debug client: dynamically update interactive layers

opentripplanner · Nov 7, 2024 · 26f78f5 · 26f78f5
1 parent 4dee5af
commit 26f78f5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/client/src/components/MapView/LayerControl.tsx b/client/src/components/MapView/LayerControl.tsx
@@ -4,6 +4,7 @@ import { IControl, Map, TypedStyleLayer } from 'maplibre-gl';
 
 type LayerControlProps = {
   position: ControlPosition;
+  setInteractiveLayerIds: (interactiveLayerIds: string[]) => void;
 };
 
 /**
@@ -15,6 +16,12 @@ type LayerControlProps = {
 class LayerControl implements IControl {
   private readonly container: HTMLDivElement = document.createElement('div');
 
+  private readonly setInteractiveLayerIds: (interactiveLayerIds: string[]) => void;
+
+  constructor(setInteractiveLayerIds: (interactiveLayerIds: string[]) => void) {
+    this.setInteractiveLayerIds = setInteractiveLayerIds;
+  }
+
   onAdd(map: Map) {
     this.container.className = 'maplibregl-ctrl maplibregl-ctrl-group layer-select';
 
@@ -62,6 +69,10 @@ class LayerControl implements IControl {
     return this.container;
   }
 
+  private updateInteractiveLayerIds(map: Map) {
+    this.setInteractiveLayerIds(map.getLayersOrder().filter((layerId) => this.layerVisible(map, { id: layerId })));
+  }
+
   private buildLayerDiv(layer: TypedStyleLayer, map: Map) {
     const layerDiv = document.createElement('div');
     layerDiv.className = 'layer';
@@ -77,6 +88,7 @@ class LayerControl implements IControl {
       } else {
         map.setLayoutProperty(layer.id, 'visibility', 'none');
       }
+      this.updateInteractiveLayerIds(map);
     };
     input.checked = this.layerVisible(map, layer);
     input.className = 'layer';
@@ -124,7 +136,7 @@ class LayerControl implements IControl {
 }
 
 export default function DebugLayerControl(props: LayerControlProps) {
-  useControl(() => new LayerControl(), {
+  useControl(() => new LayerControl(props.setInteractiveLayerIds), {
     position: props.position,
   });
 

diff --git a/client/src/components/MapView/MapView.tsx b/client/src/components/MapView/MapView.tsx
@@ -37,6 +37,7 @@ export function MapView({
   const onMapDoubleClick = useMapDoubleClick({ tripQueryVariables, setTripQueryVariables });
   const [showContextPopup, setShowContextPopup] = useState<LngLat | null>(null);
   const [showPropsPopup, setShowPropsPopup] = useState<PopupData | null>(null);
+  const [interactiveLayerIds, setInteractiveLayerIds] = useState<string[]>([]);
   const [cursor, setCursor] = useState<string>('auto');
   const onMouseEnter = useCallback(() => setCursor('pointer'), []);
   const onMouseLeave = useCallback(() => setCursor('auto'), []);
@@ -78,7 +79,7 @@ export function MapView({
         }}
         // it's unfortunate that you have to list these layers here.
         // maybe there is a way around it: https://github.com/visgl/react-map-gl/discussions/2343
-        interactiveLayerIds={['regular-stop', 'area-stop', 'group-stop', 'parking-vertex', 'vertex', 'edge', 'link']}
+        interactiveLayerIds={interactiveLayerIds}
         cursor={cursor}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
@@ -97,7 +98,7 @@ export function MapView({
           setTripQueryVariables={setTripQueryVariables}
           loading={loading}
         />
-        <DebugLayerControl position="top-right" />
+        <DebugLayerControl position="top-right" setInteractiveLayerIds={setInteractiveLayerIds} />
         {tripQueryResult?.trip.tripPatterns.length && (
           <LegLines tripPattern={tripQueryResult.trip.tripPatterns[selectedTripPatternIndex] as TripPattern} />
         )}