Grid: improve performance

client/src/containers/grid/filters/item.tsx

@@ -3,6 +3,7 @@
 import { useMemo } from "react";
 
 import { LuPlus, LuX } from "react-icons/lu";
+import { useDebounce } from "rooks";
 
 import { cn } from "@/lib/utils";
 
@@ -62,6 +63,15 @@ export default function GridFiltersItem(dataset: DatasetMeta) {
     );
   };
 
+  const onValueChange = (v: number[]) => {
+    setGridFilters({
+      ...gridFilters,
+      [dataset.var_name]: v,
+    });
+  };
+
+  const onValueChangeDebounced = useDebounce(onValueChange, 100);
+
   return (
     <div key={dataset.var_name} className="space-y-2">
       <Collapsible
@@ -96,14 +106,9 @@ export default function GridFiltersItem(dataset: DatasetMeta) {
                 min={continousOptions.min || 0}
                 max={continousOptions.max || 100}
                 step={1}
-                value={continuousValue}
+                defaultValue={continuousValue}
                 minStepsBetweenThumbs={1}
-                onValueChange={(v) => {
-                  setGridFilters({
-                    ...gridFilters,
-                    [dataset.var_name]: v,
-                  });
-                }}
+                onValueChange={onValueChangeDebounced}
               />
             </div>
           )}

client/src/containers/grid/map/grid-layer.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 
 import * as ArcGISReactiveUtils from "@arcgis/core/core/reactiveUtils";
 import { DeckLayer } from "@deck.gl/arcgis";
+import { Accessor, Color } from "@deck.gl/core";
 import { H3HexagonLayer } from "@deck.gl/geo-layers";
 import { ArrowLoader } from "@loaders.gl/arrow";
 import { load } from "@loaders.gl/core";
@@ -22,15 +23,17 @@ import { useMap } from "@/components/map/provider";
 export const getGridLayerProps = ({
   gridDatasets,
   gridFilters,
-  colorscale,
+  getFillColor,
   zoom,
 }: {
   gridDatasets: string[];
   gridFilters: Record<string, number[]> | null;
-  colorscale: CHROMA.Scale<CHROMA.Color>;
+  getFillColor: Accessor<Record<string, number>, Color>;
   zoom: number;
 }) => {
-  const columns = gridDatasets.map((d) => `columns=${d}`).join("&");
+  const columns = !!gridDatasets.length
+    ? gridDatasets.map((d) => `columns=${d}`).join("&")
+    : "";
 
   return new H3TileLayer({
     id: "tile-h3s",
@@ -76,19 +79,7 @@ export const getGridLayerProps = ({
           const res = BigInt(d.cell);
           return res.toString(16);
         },
-        getFillColor: (d) => {
-          const currentFilters = (gridFilters || {})[gridDatasets[0]];
-
-          if (currentFilters) {
-            const value = d[`${gridDatasets[0]}`];
-
-            if (value < currentFilters[0] || value > currentFilters[1]) {
-              return [0, 0, 0, 0];
-            }
-          }
-
-          return colorscale(d[`${gridDatasets[0]}`]).rgb();
-        },
+        getFillColor,
         opacity: 1,
         updateTriggers: {
           getLineWidth: [zoom],
@@ -132,15 +123,56 @@ export default function GridLayer() {
     return CHROMA.scale("viridis").domain([0, 35]);
   }, [gridDatasets, gridMetaData]);
 
+  const getFillColor = useCallback(
+    (d: Record<string, number>): Color => {
+      if (gridDatasets.length === 1) {
+        const [dataset] = gridDatasets;
+        const currentFilters = (gridFilters || {})[dataset];
+
+        if (currentFilters) {
+          const value = d[`${dataset}`];
+
+          if (value < currentFilters[0] || value > currentFilters[1]) {
+            return [0, 0, 0, 0];
+          }
+        }
+
+        return colorscale(d[`${dataset}`]).rgb();
+      }
+
+      if (gridDatasets.length > 1) {
+        const f = gridDatasets.every((dataset) => {
+          const currentFilters = (gridFilters || {})[dataset];
+          if (currentFilters) {
+            const v = d[`${dataset}`];
+            if (v < currentFilters[0] || v > currentFilters[1]) {
+              return false;
+            }
+          }
+          return true;
+        });
+
+        if (f) {
+          return [0, 100, 200, 255];
+        }
+
+        return [0, 0, 0, 0];
+      }
+
+      return [0, 0, 0, 0];
+    },
+    [gridDatasets, gridFilters, colorscale],
+  );
+
   const layer = useMemo(() => {
     if (!GRID_LAYER.current) {
       GRID_LAYER.current = new DeckLayer({
         "deck.layers": [
           getGridLayerProps({
             gridDatasets,
             gridFilters,
-            colorscale,
             zoom,
+            getFillColor,
           }),
         ],
       });
@@ -152,13 +184,13 @@ export default function GridLayer() {
       getGridLayerProps({
         gridDatasets,
         gridFilters,
-        colorscale,
         zoom,
+        getFillColor,
       }),
     ];
 
     return GRID_LAYER.current;
-  }, [gridDatasets, gridFilters, colorscale, zoom]);
+  }, [gridDatasets, gridFilters, getFillColor, zoom]);
 
   // Listen to extent changes
   ArcGISReactiveUtils.when(