i think this does it right

districtr · Jun 26, 2024 · 8dc9328 · 8dc9328
1 parent 649d06f
commit 8dc9328
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 27 deletions.
diff --git a/app/src/app/components/Picker.jsx b/app/src/app/components/Picker.jsx
@@ -5,9 +5,21 @@ import { violet, mauve, blackA } from "@radix-ui/colors";
 import { useZoneStore } from "../store/zoneStore";
 
 const ZoneTypeSelector = () => {
-  const { selectedZone, setSelectedZone } = useZoneStore();
+  const {
+    selectedZone,
+    setSelectedZone,
+    setZoneAssignments,
+    accumulatedGeoids,
+  } = useZoneStore();
 
   const handlePickerValueChange = (value) => {
+    console.log(
+      "setting accumulated geoids to old zone",
+      selectedZone,
+      "new zone is",
+      value,
+    );
+    setZoneAssignments(selectedZone, accumulatedGeoids);
     setSelectedZone(value);
   };
 
@@ -145,5 +157,5 @@ const SelectScrollUpButton = styled(Select.ScrollUpButton, scrollButtonStyles);
 
 const SelectScrollDownButton = styled(
   Select.ScrollDownButton,
-  scrollButtonStyles
+  scrollButtonStyles,
 );
diff --git a/app/src/app/store/zoneStore.ts b/app/src/app/store/zoneStore.ts
@@ -1,17 +1,19 @@
 import { create } from "zustand";
-import { Zone, GEOID, ZoneDict } from "../constants/types";
+import { Zone, GEOID } from "../constants/types";
 
 export interface ZoneStore {
   selectedZone: Zone;
   setSelectedZone: (zone: Zone) => void;
   zoneAssignments: Map<string, number>; // geoid -> zone
   setZoneAssignments: (zone: Zone, geoids: Set<GEOID>) => void;
+  accumulatedGeoids: Set<string>;
 }
 
 export const useZoneStore = create<ZoneStore>((set) => ({
   selectedZone: 1,
   setSelectedZone: (zone: Zone) => set({ selectedZone: zone }),
   zoneAssignments: new Map(),
+  accumulatedGeoids: new Set<string>(),
   /**
    *
    * @param zone - identifier for the zone assignment
@@ -24,6 +26,9 @@ export const useZoneStore = create<ZoneStore>((set) => ({
       geoids.forEach((geoid) => {
         newZoneAssignments.set(geoid, zone);
       });
-      return { zoneAssignments: newZoneAssignments };
+      return {
+        zoneAssignments: newZoneAssignments,
+        accumulatedGeoids: new Set<string>(),
+      };
     }),
 }));
diff --git a/app/src/app/utils/events/actions.ts b/app/src/app/utils/events/actions.ts
@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useRef } from "react";
+import { MutableRefObject, useRef } from "react";
 import type { Map, MapLayerMouseEvent, MapLayerTouchEvent } from "maplibre-gl";
 import { BLOCK_LAYER_ID } from "@/app/constants/layers";
 import {
@@ -11,16 +11,10 @@ import { PointLike } from "maplibre-gl";
 
 export const useApplyActions = (
   map: MutableRefObject<Map | null>,
-  mapLoaded: boolean
+  mapLoaded: boolean,
 ) => {
   const zoneStore = useZoneStore();
   const hoverFeatureIds = useRef(new Set<string>());
-  const accumulatedGeoids = useRef(new Set<string>());
-
-  useEffect(() => {
-    // clear accumulated geoids when zone changes
-    accumulatedGeoids.current.clear();
-  }, [zoneStore.selectedZone]);
 
   if (!mapLoaded) return;
   map.current?.on(
@@ -36,15 +30,15 @@ export const useApplyActions = (
         layers: [BLOCK_LAYER_ID],
       });
       HighlightFeature(selectedFeatures, map, hoverFeatureIds);
-    }
+    },
   );
 
   map.current?.on(
     "mouseleave",
     "blocks-hover",
     (e: MapLayerMouseEvent | MapLayerTouchEvent) => {
       UnhighlightFeature(map, hoverFeatureIds);
-    }
+    },
   );
 
   map.current?.on(
@@ -60,7 +54,7 @@ export const useApplyActions = (
         layers: [BLOCK_LAYER_ID],
       });
 
-      SelectFeature(selectedFeatures, map, zoneStore, accumulatedGeoids);
-    }
+      SelectFeature(selectedFeatures, map, zoneStore);
+    },
   );
 };
diff --git a/app/src/app/utils/events/handlers.ts b/app/src/app/utils/events/handlers.ts
@@ -16,7 +16,7 @@ const debouncedSetZoneAssignments = debounce(
   (zoneStoreRef: ZoneStore, selectedZone: number, geoids: Set<string>) => {
     zoneStoreRef.setZoneAssignments(selectedZone, geoids);
   },
-  1000 // 1 second
+  1000, // 1 second
 );
 
 /**
@@ -26,14 +26,12 @@ const debouncedSetZoneAssignments = debounce(
  * @param features - Array of MapGeoJSONFeature from QueryRenderedFeatures
  * @param map - MutableRefObject<Map | null>, the maplibre map instance
  * @param zoneStoreRef - MutableRefObject<ZoneStore | null>, the zone store reference from zustand
- * @param accumulatedGeoids - MutableRefObject<Set<string>>, a blank set to accumulate geoids; reset every time the zone changes.
  */
 
 export const SelectFeature = (
   features: Array<MapGeoJSONFeature> | undefined,
   map: MutableRefObject<Map | null>,
   zoneStoreRef: ZoneStore,
-  accumulatedGeoids: MutableRefObject<Set<string>>
 ) => {
   features?.forEach((feature) => {
     map.current?.setFeatureState(
@@ -42,18 +40,18 @@ export const SelectFeature = (
         id: feature?.id ?? undefined,
         sourceLayer: BLOCK_LAYER_SOURCE_ID,
       },
-      { selected: true, zone: Number(zoneStoreRef.selectedZone) }
+      { selected: true, zone: Number(zoneStoreRef.selectedZone) },
     );
   });
   if (features?.length) {
     features.forEach((feature) => {
-      accumulatedGeoids.current.add(feature.properties?.GEOID20);
+      zoneStoreRef.accumulatedGeoids.add(feature.properties?.GEOID20);
     });
 
     debouncedSetZoneAssignments(
       zoneStoreRef,
       zoneStoreRef.selectedZone,
-      accumulatedGeoids.current
+      zoneStoreRef.accumulatedGeoids,
     );
   }
 };
@@ -67,7 +65,7 @@ export const SelectFeature = (
 export const HighlightFeature = (
   features: Array<MapGeoJSONFeature> | undefined,
   map: MutableRefObject<Map | null>,
-  hoverGeoids: MutableRefObject<Set<string>>
+  hoverGeoids: MutableRefObject<Set<string>>,
 ) => {
   if (features?.length) {
     if (hoverGeoids.current.size) {
@@ -78,7 +76,7 @@ export const HighlightFeature = (
             id: Id,
             sourceLayer: BLOCK_LAYER_SOURCE_ID,
           },
-          { hover: false }
+          { hover: false },
         );
       });
       hoverGeoids.current.clear();
@@ -92,7 +90,7 @@ export const HighlightFeature = (
         id: feature?.id ?? undefined,
         sourceLayer: BLOCK_LAYER_SOURCE_ID,
       },
-      { hover: true }
+      { hover: true },
     );
   });
 
@@ -112,7 +110,7 @@ export const HighlightFeature = (
  */
 export const UnhighlightFeature = (
   map: MutableRefObject<Map | null>,
-  hoverFeatureIds: MutableRefObject<Set<string>>
+  hoverFeatureIds: MutableRefObject<Set<string>>,
 ) => {
   if (hoverFeatureIds.current.size) {
     hoverFeatureIds.current.forEach((Id) => {
@@ -122,7 +120,7 @@ export const UnhighlightFeature = (
           id: Id,
           sourceLayer: BLOCK_LAYER_SOURCE_ID,
         },
-        { hover: false }
+        { hover: false },
       );
     });
     hoverFeatureIds.current.clear();