Extensions

class BrushingExtension extends LayerExtension {
  constructor(props?: BrushingExtensionProps);
}

interface BrushingExtensionProps {
  /** Brush radius in pixels */
  brushRadius?: number;
  
  /** Enable brush on mouse move */
  brushOnMouseMove?: boolean;
  
  /** Brush target - 'source' or 'target' for arc layers */
  brushTarget?: 'source' | 'target';
}

class DataFilterExtension extends LayerExtension {
  constructor(props?: DataFilterExtensionProps);
}

interface DataFilterExtensionProps {
  /** Data filter size (1-4) */
  filterSize?: number;
  
  /** Data filter transformation */
  fp64?: boolean;
  
  /** Enable soft edges for smooth filtering */
  softMargin?: number;
}

class CollisionFilterExtension extends LayerExtension {
  constructor(props?: CollisionFilterExtensionProps);
}

interface CollisionFilterExtensionProps {
  /** Collision groups */
  collisionGroup?: string;
  
  /** Sort priority */
  getCollisionPriority?: (object: any, objectInfo: any) => number;
}

class Fp64Extension extends LayerExtension {
  constructor();
}

class PathStyleExtension extends LayerExtension {
  constructor(props?: PathStyleExtensionProps);
}

interface PathStyleExtensionProps {
  /** Enable dash patterns */
  dash?: boolean;
  
  /** Enable path offset */
  offset?: boolean;
  
  /** Enable high precision */
  highPrecisionDash?: boolean;
}

class FillStyleExtension extends LayerExtension {
  constructor(props?: FillStyleExtensionProps);
}

interface FillStyleExtensionProps {
  /** Enable pattern fills */
  pattern?: boolean;
}

class ClipExtension extends LayerExtension {
  constructor(props?: ClipExtensionProps);
}

interface ClipExtensionProps {
  /** Number of clip planes */
  clipByInstance?: boolean;
}

class MaskExtension extends LayerExtension {
  constructor(props?: MaskExtensionProps);
}

interface MaskExtensionProps {
  /** Mask operation */
  maskByInstance?: boolean;
}

/**
 * Base class for layer extensions
 */
abstract class LayerExtension {
  constructor(opts?: any);
  
  /** Extension name */
  extensionName?: string;
  
  /** Get additional shader modules */
  getShaders(extension: this): any;
  
  /** Initialize extension state */
  initializeState(context: any, extension: this): void;
  
  /** Update extension state */
  updateState(params: any, extension: this): void;
  
  /** Finalize extension */
  finalizeState(context: any, extension: this): void;
  
  /** Get sub-layer props */
  getSubLayerProps(extension: this): any;
  
  /** Draw layer with extension */
  draw(params: any, extension: this): void;
}

import {
  Deck, 
  ScatterplotLayer, 
  DataFilterExtension, 
  BrushingExtension,
  PathStyleExtension,
  PathLayer
} from 'deck.gl';

// Data filtering with smooth transitions
const filteredLayer = new ScatterplotLayer({
  id: 'filtered-points',
  data: points,
  getPosition: d => d.coordinates,
  getRadius: 100,
  getFillColor: [255, 0, 0],
  
  // DataFilterExtension props
  extensions: [new DataFilterExtension({filterSize: 1})],
  getFilterValue: d => d.timestamp,
  filterRange: [startTime, endTime],
  filterSoftMargin: 0.1
});

// Interactive brushing
const brushingLayer = new ScatterplotLayer({
  id: 'brushing-points',
  data: points,
  getPosition: d => d.coordinates,
  getRadius: 50,
  getFillColor: [0, 255, 0],
  
  // BrushingExtension props
  extensions: [new BrushingExtension()],
  brushingRadius: 100,
  brushingEnabled: true,
  updateTriggers: {
    getBrushingRadius: brushingRadius
  }
});

// Dashed path styling
const dashedPaths = new PathLayer({
  id: 'dashed-paths',
  data: paths,
  getPath: d => d.coordinates,
  getColor: [255, 255, 0],
  getWidth: 5,
  
  // PathStyleExtension props
  extensions: [new PathStyleExtension({dash: true})],
  getDashArray: [10, 5], // 10 units dash, 5 units gap
  dashJustified: true,
  dashGapPickable: false
});

// High precision positioning
const precisionLayer = new ScatterplotLayer({
  id: 'high-precision',
  data: precisePoints,
  getPosition: d => d.coordinates,
  getRadius: 10,
  getFillColor: [0, 0, 255],
  
  // Fp64Extension for high precision
  extensions: [new Fp64Extension()],
  fp64: true // Enable 64-bit positioning
});

// Collision-free labels
const labelLayer = new TextLayer({
  id: 'labels',
  data: labelData,
  getPosition: d => d.coordinates,
  getText: d => d.label,
  getSize: 16,
  getColor: [0, 0, 0],
  
  // CollisionFilterExtension props
  extensions: [new CollisionFilterExtension()],
  collisionEnabled: true,
  getCollisionPriority: d => d.priority
});

// Multiple extensions
const multiExtensionLayer = new PathLayer({
  id: 'multi-extension',
  data: paths,
  getPath: d => d.coordinates,
  getColor: d => d.color,
  getWidth: 3,
  
  extensions: [
    new DataFilterExtension({filterSize: 1}),
    new PathStyleExtension({dash: true, offset: true})
  ],
  
  // DataFilter props
  getFilterValue: d => d.category,
  filterRange: activeCategories,
  
  // PathStyle props
  getDashArray: d => d.dashPattern,
  getOffset: d => d.offset
});

// Common extension combinations for different use cases

// Interactive analytics
const analyticsExtensions = [
  new DataFilterExtension({filterSize: 2}),
  new BrushingExtension(),
  new CollisionFilterExtension()
];

// High precision mapping
const mappingExtensions = [
  new Fp64Extension(),
  new ClipExtension(),
  new PathStyleExtension({dash: true})
];

// Styled visualization
const stylingExtensions = [
  new FillStyleExtension({pattern: true}),
  new PathStyleExtension({dash: true, offset: true}),
  new MaskExtension()
];

// Extensions add shader complexity and may impact performance
// Use only necessary extensions
const efficientLayer = new ScatterplotLayer({
  id: 'efficient',
  data: largeDataset,
  
  // Only use required extensions
  extensions: [new DataFilterExtension({filterSize: 1})], // Not multiple extensions
  
  // Optimize extension settings
  getFilterValue: d => d.category, // Simple accessor
  filterRange: [activeCategory, activeCategory] // Tight range
});

// DataFilterExtension uses GPU for better performance with large datasets
const gpuFiltered = new ScatterplotLayer({
  extensions: [new DataFilterExtension()],
  getFilterValue: d => d.timestamp,
  filterRange: timeRange // GPU filtering
});

// For small datasets, client-side filtering may be more efficient
const cpuFiltered = new ScatterplotLayer({
  data: smallDataset.filter(d => d.timestamp >= startTime),
  // No extension needed
});

interface LayerExtensionContext {
  gl: WebGLRenderingContext;
  layer: Layer;
  viewport: Viewport;
}

interface ExtensionProps {
  [key: string]: any;
}