clean up subscriptions and filtering

districtr · Oct 8, 2024 · 24801ef · 24801ef
1 parent 5e6cb7d
commit 24801ef
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/app/src/app/constants/layers.ts b/app/src/app/constants/layers.ts
@@ -1,10 +1,14 @@
-import { ExpressionSpecification, LayerSpecification } from "maplibre-gl";
+import {
+  ExpressionSpecification,
+  FilterSpecification,
+  LayerSpecification,
+} from "maplibre-gl";
 import { MutableRefObject } from "react";
 import { Map } from "maplibre-gl";
 import { getBlocksSource } from "./sources";
 import { DocumentObject } from "../utils/api/apiHandlers";
 import { color10 } from "./colors";
-import { useMapStore } from "../store/mapStore";
+import { MapStore, useMapStore } from "../store/mapStore";
 
 export const BLOCK_SOURCE_ID = "blocks";
 export const BLOCK_LAYER_ID = "blocks";
@@ -53,10 +57,32 @@ ZONE_ASSIGNMENT_STYLE_DYNAMIC.push("#cecece");
 export const ZONE_ASSIGNMENT_STYLE: ExpressionSpecification =
   ZONE_ASSIGNMENT_STYLE_DYNAMIC;
 
+export function getLayerFilter(
+  layerId: string,
+  _shatterIds?: MapStore["shatterIds"]
+) {
+  const shatterIds = _shatterIds || useMapStore.getState().shatterIds;
+  const isChildLayer = CHILD_LAYERS.includes(layerId);
+  const ids = isChildLayer ? shatterIds.children : shatterIds.parents;
+  const cleanIds = Boolean(ids) ? Array.from(ids) : [];
+  const filterBase: FilterSpecification = [
+    "in",
+    ["get", "path"],
+    ["literal", cleanIds],
+  ];
+
+  if (isChildLayer) {
+    return filterBase;
+  }
+  const parentFilter: FilterSpecification = ["!", filterBase];
+  return parentFilter;
+}
+
 export function getBlocksLayerSpecification(
   sourceLayer: string,
   layerId: string,
 ): LayerSpecification {
+  const shatterIds = useMapStore.getState().shatterIds;
   return {
     id: layerId,
     source: BLOCK_SOURCE_ID,
@@ -65,10 +91,7 @@ export function getBlocksLayerSpecification(
     layout: {
       visibility: "visible",
     },
-    filter:
-      layerId === BLOCK_LAYER_ID_CHILD
-        ? ["in", ["get", "path"], ["literal", []]]
-        : ["!", ["in", ["get", "path"], ["literal", []]]],
+    filter: getLayerFilter(layerId),
     paint: {
       "line-opacity": [
         "case",
@@ -93,10 +116,7 @@ export function getBlocksHoverLayerSpecification(
     layout: {
       visibility: "visible",
     },
-    filter:
-      layerId === BLOCK_HOVER_LAYER_ID_CHILD
-        ? ["in", ["get", "path"], ["literal", []]]
-        : ["!", ["in", ["get", "path"], ["literal", []]]],
+    filter: getLayerFilter(layerId),
     paint: {
       "fill-opacity": [
         "case",

diff --git a/app/src/app/store/mapRenderSubs.ts b/app/src/app/store/mapRenderSubs.ts
@@ -4,10 +4,12 @@ import {
   BLOCK_HOVER_LAYER_ID,
   PARENT_LAYERS,
   CHILD_LAYERS,
+  getLayerFilter,
 } from "../constants/layers";
 import {
   ColorZoneAssignmentsState,
   colorZoneAssignments,
+  getMap,
   shallowCompareArray,
 } from "../utils/helpers";
 import { useMapStore as _useMapStore, MapStore } from "./mapStore";
@@ -36,20 +38,9 @@ export const getRenderSubscriptions = (useMapStore: typeof _useMapStore) => {
       if (!mapRef?.current || mapRenderingState !== 'loaded') {
         return;
       }
-
-      PARENT_LAYERS.forEach((layerId) =>
-        mapRef.current?.setFilter(layerId, [
-          "!",
-          ["in", ["get", "path"], ["literal", Array.from(shatterIds.parents)]],
-        ])
-      );
 
-      CHILD_LAYERS.forEach((layerId) =>
-        mapRef.current?.setFilter(layerId, [
-          "in",
-          ["get", "path"],
-          ["literal", Array.from(shatterIds.children)],
-        ])
+      [...PARENT_LAYERS, ...CHILD_LAYERS].forEach((layerId) =>
+        mapRef.current?.setFilter(layerId, getLayerFilter(layerId, shatterIds))
       );
 
       mapRef.current.once("render", () => {

diff --git a/app/src/app/utils/helpers.ts b/app/src/app/utils/helpers.ts
@@ -10,6 +10,7 @@ import {
 import { MutableRefObject } from "react";
 import { Point } from "maplibre-gl";
 import {
+  BLOCK_HOVER_LAYER_ID,
   BLOCK_LAYER_ID,
   BLOCK_LAYER_ID_CHILD,
   BLOCK_SOURCE_ID,
@@ -243,6 +244,16 @@ export type ColorZoneAssignmentsState = [
   MapStore["appLoadingState"],
   MapStore["mapRenderingState"]
 ];
+
+export const getMap = (_mapRef?: MapStore['mapRef']) => {
+  const mapRef = _mapRef || useMapStore.getState().mapRef
+  if (mapRef?.current && mapRef.current?.getStyle().layers.findIndex((layer) => layer.id === BLOCK_HOVER_LAYER_ID) !== -1) {
+    return null
+  }
+
+  return mapRef as MutableRefObject<maplibregl.Map>
+}
+
 /**
  * Assigns colors to zones on the map based on the current zone assignments.
  * This function updates the feature state of map features to reflect their assigned zones.