carto: Fix caching in ClusterTileLayer (#9167)

modules/carto/src/layers/cluster-tile-layer.ts

@@ -106,8 +106,14 @@ class ClusterGeoJsonLayer<
     clusterIds: bigint[];
     hoveredFeatureId: bigint | number | null;
     highlightColor: number[];
+    aggregationCache: WeakMap<any, Map<number, ClusteredFeaturePropertiesT<FeaturePropertiesT>[]>>;
   };
 
+  initializeState() {
+    super.initializeState();
+    this.state.aggregationCache = new WeakMap();
+  }
+
   renderLayers(): Layer | null | LayersList {
     const visibleTiles = this.state.tileset?.tiles.filter((tile: Tile2DHeader) => {
       return tile.isLoaded && tile.content && this.state.tileset!.isTileVisible(tile);
@@ -119,6 +125,7 @@ class ClusterGeoJsonLayer<
 
     const {zoom} = this.context.viewport;
     const {clusterLevel, getPosition, getWeight} = this.props;
+    const {aggregationCache} = this.state;
 
     const properties = extractAggregationProperties(visibleTiles[0]);
     const data = [] as ClusteredFeaturePropertiesT<FeaturePropertiesT>[];
@@ -127,15 +134,21 @@ class ClusterGeoJsonLayer<
       // Calculate aggregation based on viewport zoom
       const overZoom = Math.round(zoom - tile.zoom);
       const aggregationLevels = Math.round(clusterLevel) - overZoom;
+      let tileAggregationCache = aggregationCache.get(tile.content);
+      if (!tileAggregationCache) {
+        tileAggregationCache = new Map();
+        aggregationCache.set(tile.content, tileAggregationCache);
+      }
       const didAggregate = aggregateTile(
         tile,
+        tileAggregationCache,
         aggregationLevels,
         properties,
         getPosition,
         getWeight
       );
       needsUpdate ||= didAggregate;
-      data.push(...tile.userData![aggregationLevels]);
+      data.push(...tileAggregationCache.get(aggregationLevels)!);
     }
 
     data.sort((a, b) => Number(b.count - a.count));

modules/carto/src/layers/cluster-utils.ts

@@ -23,6 +23,7 @@ export type ParsedQuadbinTile<FeaturePropertiesT> = ParsedQuadbinCell<FeaturePro
  */
 export function aggregateTile<FeaturePropertiesT>(
   tile: Tile2DHeader<ParsedQuadbinTile<FeaturePropertiesT>>,
+  tileAggregationCache: Map<number, ClusteredFeaturePropertiesT<FeaturePropertiesT>[]>,
   aggregationLevels: number,
   properties: AggregationProperties<FeaturePropertiesT> = [],
   getPosition: Accessor<ParsedQuadbinCell<FeaturePropertiesT>, [number, number]>,
@@ -32,7 +33,7 @@ export function aggregateTile<FeaturePropertiesT>(
 
   // Aggregate on demand and cache result
   if (!tile.userData) tile.userData = {};
-  const cell0 = tile.userData[aggregationLevels]?.[0];
+  const cell0 = tileAggregationCache.get(aggregationLevels)?.[0];
   if (cell0) {
     // Have already aggregated this tile
     if (properties.every(property => property.name in cell0)) {
@@ -41,15 +42,15 @@ export function aggregateTile<FeaturePropertiesT>(
     }
 
     // Aggregated properties have changed, re-aggregate
-    tile.userData = {};
+    tileAggregationCache.clear();
   }
 
   const out: Record<number, any> = {};
   for (const cell of tile.content) {
     let id = cell.id;
     const position = typeof getPosition === 'function' ? getPosition(cell, {} as any) : getPosition;
 
-    // Aggregate by parent id
+    // Aggregate by parent rid
     for (let i = 0; i < aggregationLevels - 1; i++) {
       id = cellToParent(id);
     }
@@ -93,7 +94,7 @@ export function aggregateTile<FeaturePropertiesT>(
     }
   }
 
-  tile.userData[aggregationLevels] = Object.values(out);
+  tileAggregationCache.set(aggregationLevels, Object.values(out));
   return true;
 }