[BUG] fix gpu filter update trigger attribute update in every render (#…

…2707) * [BUG] fix gpu filter update trigger attribute update in every render Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Oct 22, 2024 · e20d5e8 · e20d5e8
1 parent 2d8161e
commit e20d5e8
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 15 deletions.
diff --git a/src/layers/src/mapboxgl-layer.ts b/src/layers/src/mapboxgl-layer.ts
@@ -131,7 +131,7 @@ class MapboxLayerGL extends Layer {
     const getPropertyFromFilter = hasFilter
       ? d => {
           const filterValue = valueAccessor(d);
-          return Object.values(filterValueUpdateTriggers as ({name: string} | null)[]).reduce(
+          return Object.values(filterValueUpdateTriggers).reduce(
             (accu: any, gpu, i) => ({
               ...accu,
               ...(gpu?.name ? {[prefixGpuField(gpu.name)]: filterValue[i]} : {})

diff --git a/src/table/src/gpu-filter-utils.ts b/src/table/src/gpu-filter-utils.ts
@@ -150,12 +150,6 @@ const defaultGetData = (dc: DataContainerInterface, d: any, fieldIndex: number)
   return dc.valueAt(d.index, fieldIndex);
 };
 
-/**
- * @param channels
- * @param dataId
- * @param fields
- * @return {Function} getFilterValue
- */
 const getFilterValueAccessor =
   (channels: (Filter | undefined)[], dataId: string, fields: any[]) =>
   (dc: DataContainerInterface) =>
@@ -198,12 +192,21 @@ const getFilterValueAccessor =
     return channelValues;
   };
 
+function isFilterTriggerEqual(a, b) {
+  return a === b || (a?.name === b?.name && a?.domain0 === b?.domain0);
+}
+
 /**
  * Get filter properties for gpu filtering
  */
-export function getGpuFilterProps(filters: Filter[], dataId: string, fields: Field[]): GpuFilter {
+export function getGpuFilterProps(
+  filters: Filter[],
+  dataId: string,
+  fields: Field[],
+  oldGpuFilter?: GpuFilter
+): GpuFilter {
   const filterRange = getEmptyFilterRange();
-  const triggers = {};
+  const triggers: GpuFilter['filterValueUpdateTriggers'] = {};
 
   // array of filter for each channel, undefined, if no filter is assigned to that channel
   const channels: (Filter | undefined)[] = [];
@@ -219,14 +222,18 @@ export function getGpuFilterProps(filters: Filter[], dataId: string, fields: Fie
 
     filterRange[i][0] = filter ? filter.value[0] - filter.domain?.[0] : 0;
     filterRange[i][1] = filter ? filter.value[1] - filter.domain?.[0] : 0;
+    const oldFilterTrigger = oldGpuFilter?.filterValueUpdateTriggers?.[`gpuFilter_${i}`] || null;
 
-    triggers[`gpuFilter_${i}`] = filter ? filter.name[filter.dataId.indexOf(dataId)] : null;
-    triggers[`gpuFilter_${i}`] = filter
+    const trigger = filter
       ? {
           name: filter.name[filter.dataId.indexOf(dataId)],
           domain0: filter.domain?.[0]
         }
       : null;
+    // don't create a new object, cause deck.gl use shallow compare
+    triggers[`gpuFilter_${i}`] = isFilterTriggerEqual(trigger, oldFilterTrigger)
+      ? oldFilterTrigger
+      : trigger;
     channels.push(filter);
   }
 

diff --git a/src/table/src/kepler-table.ts b/src/table/src/kepler-table.ts
@@ -54,7 +54,9 @@ import {
 
 export type GpuFilter = {
   filterRange: number[][];
-  filterValueUpdateTriggers: any;
+  filterValueUpdateTriggers: {
+    [id: string]: {name: string; domain0: number} | null;
+  };
   filterValueAccessor: (
     dc: DataContainerInterface
   ) => (
@@ -215,7 +217,7 @@ class KeplerTable {
     this.filteredIndexForDomain = allIndexes;
     this.fieldPairs = findPointFieldPairs(fields);
     this.fields = fields;
-    this.gpuFilter = getGpuFilterProps([], dataId, fields);
+    this.gpuFilter = getGpuFilterProps([], dataId, fields, undefined);
     this.supportedFilterTypes = supportedFilterTypes;
     this.disableDataOperation = disableDataOperation;
   }
@@ -334,7 +336,7 @@ class KeplerTable {
     const filterRecord = getFilterRecord(dataId, filters, opt || {});
 
     this.filterRecord = filterRecord;
-    this.gpuFilter = getGpuFilterProps(filters, dataId, fields);
+    this.gpuFilter = getGpuFilterProps(filters, dataId, fields, this.gpuFilter);
 
     this.changedFilters = diffFilters(filterRecord, oldFilterRecord);
 

diff --git a/test/helpers/layer-utils.js b/test/helpers/layer-utils.js
@@ -173,7 +173,12 @@ export function testRenderLayerCases(t, LayerClass, testCases) {
           mapState: INITIAL_MAP_STATE,
           gpuFilter:
             tc.datasets[layer.config.dataId].gpuFilter ||
-            getGpuFilterProps([], layer.config.dataId, tc.datasets[layer.config.dataId].fields),
+            getGpuFilterProps(
+              [],
+              layer.config.dataId,
+              tc.datasets[layer.config.dataId].fields,
+              layer.gpuFilter
+            ),
           interactionConfig: INITIAL_VIS_STATE.interactionConfig,
           visible: true,
           layerCallbacks: {},