[Chore]: Technical: Translate deckgl-layers/cluster-layer (#1815)

* Renamed js file Signed-off-by: Maksim Suslov <maksim.suslov@actionengine.com> * Added types Signed-off-by: Maksim Suslov <maksim.suslov@actionengine.com> * Merge update Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> Co-authored-by: Daria Terekhova <daria.terekhova@actionengine.com>
keplergl · Jun 23, 2022 · 9a3da3c · 9a3da3c
1 parent 10868ec
commit 9a3da3c
Show file tree

Hide file tree

Showing 5 changed files with 604 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -127,8 +127,8 @@
     "@types/lodash.uniqby": "^4.7.7",
     "@types/lodash.xor": "^4.5.7",
     "@types/mapbox__geo-viewport": "^0.4.1",
-    "@types/react-dom": "^18.0.0",
     "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-dom": "^18.0.0",
     "@types/react-lifecycles-compat": "^3.0.1",
     "@types/react-map-gl": "^6.1.2",
     "@types/react-modal": "^3.13.1",
@@ -151,6 +151,7 @@
     "d3-request": "^1.0.6",
     "d3-scale": "^3.2.3",
     "decimal.js": "^10.2.0",
+    "eslint-config-developit": "^1.2.0",
     "exenv": "^1.2.2",
     "fuzzy": "^0.1.3",
     "global": "^4.3.0",
@@ -230,6 +231,7 @@
     "@types/d3-scale": "^3.2.2",
     "@types/geojson": "^7946.0.7",
     "@types/redux-actions": "^2.6.2",
+    "@types/supercluster": "^7.1.0",
     "@typescript-eslint/eslint-plugin": "^5.12.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.0",

diff --git a/...kgl-layers/cluster-layer/cluster-layer.js → ...kgl-layers/cluster-layer/cluster-layer.ts b/...kgl-layers/cluster-layer/cluster-layer.js → ...kgl-layers/cluster-layer/cluster-layer.ts
@@ -23,7 +23,9 @@ import {_AggregationLayer as AggregationLayer} from '@deck.gl/aggregation-layers
 
 import geoViewport from '@mapbox/geo-viewport';
 import CPUAggregator, {
+  AggregationType,
   defaultColorDimension,
+  DimensionType,
   getDimensionScale
 } from '../layer-utils/cpu-aggregator';
 import {getDistanceScales} from 'viewport-mercator-project';
@@ -32,6 +34,8 @@ import {max} from 'd3-array';
 import {LAYER_VIS_CONFIGS} from 'layers/layer-factory';
 import {SCALE_TYPES, DEFAULT_COLOR_RANGE} from '@kepler.gl/constants';
 import ClusterBuilder, {getGeoJSON} from '../layer-utils/cluster-utils';
+import {RGBAColor} from '@kepler.gl/types';
+import {AggregationLayerProps} from '@deck.gl/aggregation-layers/aggregation-layer';
 
 const defaultRadius = LAYER_VIS_CONFIGS.clusterRadius.defaultValue;
 const defaultRadiusRange = LAYER_VIS_CONFIGS.clusterRadiusRange.defaultValue;
@@ -40,15 +44,15 @@ const defaultGetColorValue = points => points.length;
 const defaultGetRadiusValue = cell =>
   cell.filteredPoints ? cell.filteredPoints.length : cell.points.length;
 
-function processGeoJSON(step, props, aggregation, {viewport}) {
+function processGeoJSON(this: CPUAggregator, step, props, aggregation, {viewport}) {
   const {data, getPosition, filterData} = props;
   const geoJSON = getGeoJSON(data, getPosition, filterData);
   const clusterBuilder = new ClusterBuilder();
 
   this.setState({geoJSON, clusterBuilder});
 }
 
-function getClusters(step, props, aggregation, {viewport}) {
+function getClusters(this: CPUAggregator, step, props, aggregation, {viewport}) {
   const {geoJSON, clusterBuilder} = this.state;
   const {clusterRadius, zoom, width, height} = props;
   const {longitude, latitude} = viewport;
@@ -70,7 +74,7 @@ function getSubLayerRadius(dimensionState, dimension, layerProps) {
   };
 }
 
-export const clusterAggregation = {
+export const clusterAggregation: AggregationType = {
   key: 'position',
   updateSteps: [
     {
@@ -108,7 +112,7 @@ export const clusterAggregation = {
   ]
 };
 
-function getRadiusValueDomain(step, props, dimensionUpdater) {
+function getRadiusValueDomain(this: CPUAggregator, step, props, dimensionUpdater) {
   const {key} = dimensionUpdater;
   const {getRadiusValue} = props;
   const {layerData} = this.state;
@@ -117,7 +121,7 @@ function getRadiusValueDomain(step, props, dimensionUpdater) {
   this._setDimensionState(key, {valueDomain});
 }
 
-const clusterLayerDimensions = [
+const clusterLayerDimensions: [DimensionType<RGBAColor>, DimensionType<number>] = [
   defaultColorDimension,
   {
     key: 'radius',
@@ -164,7 +168,10 @@ const defaultProps = {
   getRadiusValue: {type: 'accessor', value: defaultGetRadiusValue}
 };
 
-export default class ClusterLayer extends AggregationLayer {
+export default class ClusterLayer extends AggregationLayer<
+  any,
+  AggregationLayerProps<any> & {radiusScale: number}
+> {
   initializeState() {
     const cpuAggregator = new CPUAggregator({
       aggregation: clusterAggregation,
@@ -221,6 +228,7 @@ export default class ClusterLayer extends AggregationLayer {
     const updateTriggers = this._getSublayerUpdateTriggers();
     const accessors = this._getSubLayerAccessors();
 
+    // @ts-expect-error
     const distanceScale = getDistanceScales(this.context.viewport);
     const metersPerPixel = distanceScale.metersPerPixel[0];
 

diff --git a/src/deckgl-layers/layer-utils/cluster-utils.ts b/src/deckgl-layers/layer-utils/cluster-utils.ts
@@ -20,6 +20,8 @@
 
 import Supercluster from 'supercluster';
 import memoize from 'lodash.memoize';
+import {MemoizedFunction} from 'lodash';
+import {BBox, Position} from 'geojson';
 
 export function getGeoJSON(data, getPosition, filterData) {
   const raw = typeof filterData === 'function' ? data.filter(filterData) : data;
@@ -40,9 +42,9 @@ export function getGeoJSON(data, getPosition, filterData) {
     .filter(d => d.geometry.coordinates.every(Number.isFinite));
 }
 
-const clusterResolver = ({clusterRadius}) => `${clusterRadius}`;
+const clusterResolver = ({clusterRadius}: {clusterRadius: number}) => `${clusterRadius}`;
 
-const getClusterer = ({clusterRadius, geoJSON}) =>
+const getClusterer = ({clusterRadius, geoJSON}: {clusterRadius: number; geoJSON}) =>
   new Supercluster({
     maxZoom: 20,
     radius: clusterRadius,
@@ -53,13 +55,28 @@ const getClusterer = ({clusterRadius, geoJSON}) =>
   }).load(geoJSON);
 
 export default class ClusterBuilder {
-  clusterer: any;
+  clusterer: (({clusterRadius, geoJSON}: {clusterRadius: number; geoJSON}) => Supercluster) &
+    MemoizedFunction;
 
   constructor() {
     this.clusterer = memoize(getClusterer, clusterResolver);
   }
 
-  clustersAtZoom({bbox, clusterRadius, geoJSON, zoom}) {
+  clustersAtZoom({
+    bbox,
+    clusterRadius,
+    geoJSON,
+    zoom
+  }: {
+    bbox: BBox;
+    clusterRadius: number;
+    geoJSON;
+    zoom: number;
+  }): {
+    points: any;
+    position: Position;
+    index: number;
+  }[] {
     const clusterer = this.clusterer({clusterRadius, geoJSON});
 
     // map clusters to formatted bins to be passed to deck.gl bin-sorter
@@ -73,6 +90,6 @@ export default class ClusterBuilder {
   }
 
   clearClustererCache() {
-    this.clusterer.cache.clear();
+    this.clusterer.cache.clear?.();
   }
 }
diff --git a/src/deckgl-layers/layer-utils/cpu-aggregator.ts b/src/deckgl-layers/layer-utils/cpu-aggregator.ts
@@ -380,7 +380,7 @@ export const defaultElevationDimension: DimensionType<number> = {
 
 export const defaultDimensions = [defaultColorDimension, defaultElevationDimension];
 
-export type CPUAggregatorState = {layerData: {data?}; dimensions: {}};
+export type CPUAggregatorState = {layerData: {data?}; dimensions: {}; geoJSON?, clusterBuilder?};
 
 export default class CPUAggregator {
   static getDimensionScale: any;