Interactive Brushing

/**
 * Adds GPU-based data brushing functionalities to layers
 * Allows layers to show/hide objects based on current pointer position
 */
class BrushingExtension extends LayerExtension {
  static extensionName: 'BrushingExtension';
  static defaultProps: BrushingExtensionDefaultProps;
  
  constructor();
  
  getShaders(): any;
  initializeState(context: LayerContext, extension: this): void;
  finalizeState(context: LayerContext, extension: this): void;
  draw(params: any, extension: this): void;
}

interface BrushingExtensionProps<DataT = any> {
  /**
   * Called to retrieve an arbitrary position for each object that it will be filtered by.
   * Only effective if `brushingTarget` is set to `custom`.
   * @default {type: 'accessor', value: [0, 0]}
   */
  getBrushingTarget?: Accessor<DataT, [number, number]>;
  
  /**
   * Enable/disable brushing. If brushing is disabled, all objects are rendered.
   * @default true
   */
  brushingEnabled?: boolean;
  
  /**
   * The position used to filter each object by.
   * - 'source': Use source position of objects
   * - 'target': Use target position of objects  
   * - 'source_target': Use both source and target positions
   * - 'custom': Use position from getBrushingTarget accessor
   * @default 'source'
   */
  brushingTarget?: 'source' | 'target' | 'source_target' | 'custom';
  
  /**
   * The brushing radius centered at the pointer, in meters. 
   * If a data object is within this circle, it is rendered; otherwise it is hidden.
   * @default 10000
   */
  brushingRadius?: number;
}

interface BrushingExtensionDefaultProps {
  getBrushingTarget: {type: 'accessor', value: [number, number]};
  brushingTarget: 'source';
  brushingEnabled: boolean;
  brushingRadius: number;
}

import { ScatterplotLayer } from "@deck.gl/layers";
import { BrushingExtension } from "@deck.gl/extensions";

// Basic brushing with default settings
const basicBrushingLayer = new ScatterplotLayer({
  id: "brushing-points",
  data: points,
  extensions: [new BrushingExtension()],
  getPosition: d => d.coordinates,
  getRadius: 50,
  brushingEnabled: true,
  brushingRadius: 25000 // 25km radius
});

// Custom brushing target
const customBrushingLayer = new ScatterplotLayer({
  id: "custom-brushing",
  data: connections,
  extensions: [new BrushingExtension()],
  getPosition: d => d.start,
  brushingTarget: 'custom',
  getBrushingTarget: d => d.center, // Use center point for brushing
  brushingRadius: 50000
});

// Brushing with source and target positions (for arc layers)
const arcBrushingLayer = new ArcLayer({
  id: "brushing-arcs",
  data: flights,
  extensions: [new BrushingExtension()],
  getSourcePosition: d => d.origin,
  getTargetPosition: d => d.destination,
  brushingTarget: 'source_target', // Brush based on both endpoints
  brushingRadius: 100000
});