From 26f78f54e4fffde2c5705c42e6aa447266093255 Mon Sep 17 00:00:00 2001
From: Zsombor Welker <zsombor.welker@realcity.io>
Date: Thu, 7 Nov 2024 22:02:12 +0100
Subject: [PATCH] debug client: dynamically update interactive layers

---
 client/src/components/MapView/LayerControl.tsx | 14 +++++++++++++-
 client/src/components/MapView/MapView.tsx      |  5 +++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/client/src/components/MapView/LayerControl.tsx b/client/src/components/MapView/LayerControl.tsx
index d6be2d641d7..fe77a286f40 100644
--- 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
index 4a6080a1b45..ec008853737 100644
--- 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} />
         )}