more fixes for aggregation layers

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

Author: igorDykhta

src/deckgl-layers/src/cluster-layer/cluster-layer.ts

@@ -1,8 +1,9 @@
+// @ts-nocheck
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
+import {CompositeLayer} from '@deck.gl/core';
 import {ScatterplotLayer} from '@deck.gl/layers';
-import {_AggregationLayer as AggregationLayer} from '@deck.gl/aggregation-layers';
 
 import geoViewport from '@mapbox/geo-viewport';
 import CPUAggregator, {
@@ -154,7 +155,7 @@ const defaultProps = {
   getRadiusValue: {type: 'accessor', value: defaultGetRadiusValue}
 };
 
-export default class ClusterLayer extends AggregationLayer<any, any> {
+export default class ClusterLayer extends CompositeLayer {
   initializeState() {
     const cpuAggregator = new CPUAggregator({
       aggregation: clusterAggregation,
@@ -165,20 +166,14 @@ export default class ClusterLayer extends AggregationLayer<any, any> {
       cpuAggregator,
       aggregatorState: cpuAggregator.state
     };
-    const attributeManager = this.getAttributeManager();
-    attributeManager.add({
-      positions: {size: 3, accessor: 'getPosition'}
-    });
   }
 
   updateState({oldProps, props, changeFlags}) {
     this.setState({
-      // make a copy of the internal state of cpuAggregator for testing
       aggregatorState: this.state.cpuAggregator.updateState(
         {oldProps, props, changeFlags},
         {
           viewport: this.context.viewport,
-          attributes: this.getAttributes(),
           numInstances: this.getNumInstances(props)
         }
       )

src/deckgl-layers/src/grid-layer/enhanced-cpu-grid-layer.ts

@@ -2,50 +2,17 @@
 // Copyright contributors to the kepler.gl project
 
 import {GridLayer} from '@deck.gl/aggregation-layers';
-import CPUAggregator, {AggregationType, getAggregatedData} from '../layer-utils/cpu-aggregator';
-
-export const gridAggregation: AggregationType = {
-  key: 'position',
-  updateSteps: [
-    {
-      key: 'aggregate',
-      triggers: {
-        cellSize: {
-          prop: 'cellSize'
-        },
-        position: {
-          prop: 'getPosition',
-          updateTrigger: 'getPosition'
-        },
-        aggregator: {
-          prop: 'gridAggregator'
-        }
-      },
-      updater: getAggregatedData
-    }
-  ]
-};
 
+/**
+ * In deck.gl 9, GridLayer natively supports CPU aggregation via gpuAggregation: false,
+ * custom getColorValue/getElevationValue accessors, percentile filtering, and scale types.
+ * The custom CPUAggregator override from deck.gl 8 is no longer needed.
+ */
 export default class ScaleEnhancedGridLayer extends GridLayer<any> {
   static defaultProps = {
     ...GridLayer.defaultProps,
     gpuAggregation: false
   };
-
-  initializeState() {
-    const cpuAggregator = new CPUAggregator({
-      aggregation: gridAggregation
-    });
-
-    this.state = {
-      cpuAggregator,
-      aggregatorState: cpuAggregator.state
-    };
-    const attributeManager = this.getAttributeManager();
-    attributeManager.add({
-      positions: {size: 3, accessor: 'getPosition'}
-    });
-  }
 }
 
 ScaleEnhancedGridLayer.layerName = 'ScaleEnhancedGridLayer';

src/deckgl-layers/src/hexagon-layer/enhanced-hexagon-layer.ts

@@ -2,45 +2,17 @@
 // Copyright contributors to the kepler.gl project
 
 import {HexagonLayer} from '@deck.gl/aggregation-layers';
-import CPUAggregator, {AggregationType, getAggregatedData} from '../layer-utils/cpu-aggregator';
-
-export const hexagonAggregation: AggregationType = {
-  key: 'position',
-  updateSteps: [
-    {
-      key: 'aggregate',
-      triggers: {
-        cellSize: {
-          prop: 'radius'
-        },
-        position: {
-          prop: 'getPosition',
-          updateTrigger: 'getPosition'
-        },
-        aggregator: {
-          prop: 'hexagonAggregator'
-        }
-      },
-      updater: getAggregatedData
-    }
-  ]
-};
 
+/**
+ * In deck.gl 9, HexagonLayer natively supports CPU aggregation via gpuAggregation: false,
+ * custom getColorValue/getElevationValue accessors, percentile filtering, and scale types.
+ * The custom CPUAggregator override from deck.gl 8 is no longer needed.
+ */
 export default class ScaleEnhancedHexagonLayer extends HexagonLayer<any> {
-  initializeState() {
-    const cpuAggregator = new CPUAggregator({
-      aggregation: hexagonAggregation
-    });
-
-    this.state = {
-      cpuAggregator,
-      aggregatorState: cpuAggregator.state
-    };
-    const attributeManager = this.getAttributeManager();
-    attributeManager.add({
-      positions: {size: 3, accessor: 'getPosition'}
-    });
-  }
+  static defaultProps = {
+    ...HexagonLayer.defaultProps,
+    gpuAggregation: false
+  };
 }
 
 ScaleEnhancedHexagonLayer.layerName = 'ScaleEnhancedHexagonLayer';

src/layers/src/aggregation-layer.ts

@@ -82,9 +82,9 @@ export default class AggregationLayer extends Layer {
       pointPosAccessor(this.config.columns)(dataContainer);
     this.getColorRange = memoize(getLayerColorRange);
 
-    // Access data of a point from aggregated bins, depends on how BinSorter works
-    // Deck.gl's BinSorter puts data in point.source
-    this.getPointData = pt => pt.source;
+    // Access data of a point from aggregated bins
+    // In deck.gl 9, aggregation layers pass original data items directly to getColorValue/getElevationValue
+    this.getPointData = pt => pt;
 
     this.gpuFilterGetIndex = pt => this.getPointData(pt).index;
     this.gpuFilterGetData = (dataContainer, data, fieldIndex) =>
@@ -308,7 +308,7 @@ export default class AggregationLayer extends Layer {
     if (this.config.dataId === null) {
       return {};
     }
-    const {gpuFilter, dataContainer} = datasets[this.config.dataId];
+    const {dataContainer} = datasets[this.config.dataId];
     const getPosition = this.getPositionAccessor(dataContainer);
 
     const aggregatePoints = getValueAggrFunc(this.getPointData);
@@ -321,24 +321,12 @@ export default class AggregationLayer extends Layer {
       this.config.sizeField,
       this.config.visConfig.sizeAggregation
     );
-    const hasFilter = Object.values(gpuFilter.filterRange).some((arr: any) =>
-      arr.some(v => v !== 0)
-    );
-
-    const getFilterValue = gpuFilter.filterValueAccessor(dataContainer)(
-      this.gpuFilterGetIndex,
-      this.gpuFilterGetData
-    );
-    const filterData = hasFilter
-      ? getFilterDataFunc(gpuFilter.filterRange, getFilterValue)
-      : undefined;
 
     const {data} = this.updateData(datasets, oldLayerData);
 
     return {
       data,
       getPosition,
-      _filterData: filterData,
       // @ts-expect-error
       ...(getColorValue ? {getColorValue} : {}),
       // @ts-expect-error
@@ -353,12 +341,12 @@ export default class AggregationLayer extends Layer {
       highlightColor: HIGHLIGH_COLOR_3D,
       // gpu data filtering is not supported in aggregation layer
       extensions: [],
-      autoHighlight: this.config.visConfig.enable3d
+      autoHighlight: true
     };
   }
 
   getDefaultAggregationLayerProp(opts) {
-    const {gpuFilter, mapState, layerCallbacks = {}} = opts;
+    const {mapState, layerCallbacks = {}} = opts;
     const {visConfig} = this.config;
     const eleZoomFactor = this.getElevationZoomFactor(mapState);
 
@@ -372,10 +360,6 @@ export default class AggregationLayer extends Layer {
       getElevationValue: {
         sizeField: this.config.sizeField,
         sizeAggregation: this.config.visConfig.sizeAggregation
-      },
-      _filterData: {
-        filterRange: gpuFilter.filterRange,
-        ...gpuFilter.filterValueUpdateTriggers
       }
     };
 

src/layers/src/grid-layer/grid-layer.ts

@@ -1,10 +1,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import {GeoJsonLayer} from '@deck.gl/layers';
 import {EnhancedGridLayer} from '@kepler.gl/deckgl-layers';
 import AggregationLayer, {AggregationLayerConfig} from '../aggregation-layer';
-import {pointToPolygonGeo} from './grid-utils';
 import GridLayerIcon from './grid-layer-icon';
 import {
   ColorRange,
@@ -99,42 +97,19 @@ export default class GridLayer extends AggregationLayer {
   }
 
   renderLayer(opts) {
-    const {data, objectHovered, mapState} = opts;
+    const {data} = opts;
 
     const defaultAggregationLayerProps = this.getDefaultAggregationLayerProp(opts);
-    const zoomFactor = this.getZoomFactor(mapState);
     const {visConfig} = this.config;
     const cellSize = visConfig.worldUnitSize * 1000;
-    const hoveredObject = this.hasHoveredObject(objectHovered);
 
     return [
       new EnhancedGridLayer({
         ...defaultAggregationLayerProps,
         ...data,
         wrapLongitude: false,
         cellSize
-      }),
-
-      // render an outline of each cell if not extruded
-      ...(hoveredObject && !visConfig.enable3d
-        ? [
-            new GeoJsonLayer({
-              ...this.getDefaultHoverLayerProps(),
-              visible: defaultAggregationLayerProps.visible,
-              wrapLongitude: false,
-              data: [
-                pointToPolygonGeo({
-                  object: hoveredObject,
-                  cellSize,
-                  coverage: visConfig.coverage,
-                  mapState
-                })
-              ],
-              getLineColor: this.config.highlightColor,
-              lineWidthScale: 8 * zoomFactor
-            })
-          ]
-        : [])
+      })
     ];
   }
 }

src/layers/src/grid-layer/grid-utils.ts

@@ -12,6 +12,7 @@ import {MapState} from '@kepler.gl/types';
  * @param coverage
  * @param properties
  * @param mapState
+ * @param coordinate - fallback position from picking info (deck.gl 9 no longer provides object.position)
  * @returns - geojson feature
  */
 
@@ -21,15 +22,17 @@ export function pointToPolygonGeo({
   cellSize,
   coverage,
   properties,
-  mapState
+  mapState,
+  coordinate
 }: {
   object: any;
   cellSize: number;
   coverage: number;
   properties?: any;
   mapState: MapState;
+  coordinate?: number[];
 }) {
-  const {position} = object;
+  const position = object.position || coordinate;
   const viewport = new WebMercatorViewport(mapState);
 
   if (!position) {

src/layers/src/hexagon-layer/hexagon-layer.ts

@@ -1,10 +1,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import {GeoJsonLayer} from '@deck.gl/layers';
 import AggregationLayer, {AggregationLayerConfig} from '../aggregation-layer';
 import {EnhancedHexagonLayer} from '@kepler.gl/deckgl-layers';
-import {hexagonToPolygonGeo} from './hexagon-utils';
 import HexagonLayerIcon from './hexagon-layer-icon';
 import {
   ColorRange,
@@ -107,37 +105,19 @@ export default class HexagonLayer extends AggregationLayer {
   }
 
   renderLayer(opts) {
-    const {data, objectHovered, mapState} = opts;
+    const {data} = opts;
 
     const defaultAggregationLayerProps = this.getDefaultAggregationLayerProp(opts);
-    const zoomFactor = this.getZoomFactor(mapState);
     const {visConfig} = this.config;
     const radius = visConfig.worldUnitSize * 1000;
-    const hoveredObject = this.hasHoveredObject(objectHovered);
 
     return [
       new EnhancedHexagonLayer({
         ...defaultAggregationLayerProps,
         ...data,
         wrapLongitude: false,
         radius
-      }),
-
-      // render an outline of each hexagon if not extruded
-      ...(hoveredObject && !visConfig.enable3d
-        ? [
-            new GeoJsonLayer({
-              ...this.getDefaultHoverLayerProps(),
-              visible: defaultAggregationLayerProps.visible,
-              wrapLongitude: false,
-              data: [
-                hexagonToPolygonGeo(hoveredObject, {}, radius * visConfig.coverage, mapState)
-              ].filter(d => d),
-              getLineColor: this.config.highlightColor,
-              lineWidthScale: 8 * zoomFactor
-            })
-          ]
-        : [])
+      })
     ];
   }
 }

src/layers/src/hexagon-layer/hexagon-utils.ts

@@ -5,14 +5,15 @@ import {WebMercatorViewport} from '@deck.gl/core';
 import Console from 'global/console';
 import type {Centroid} from '@kepler.gl/common-utils';
 
-export function hexagonToPolygonGeo(object, properties, radius, mapState) {
+export function hexagonToPolygonGeo(object, properties, radius, mapState, coordinate?) {
   const viewport = new WebMercatorViewport(mapState);
-  if (!Array.isArray(object.position)) {
+  const position = object.position || coordinate;
+  if (!Array.isArray(position)) {
     return null;
   }
 
-  const screenCenter = viewport.projectFlat(object.position);
-  const {unitsPerMeter} = viewport.getDistanceScales(object.position);
+  const screenCenter = viewport.projectFlat(position);
+  const {unitsPerMeter} = viewport.getDistanceScales(position);
 
   if (!Array.isArray(unitsPerMeter)) {
     Console.warn(`unitsPerMeter is undefined`);