Merge pull request #6440 from leonardehrenfried/clickable-debug-stops

Restore ability to click on stops in debug UI on first map load

client/src/components/MapView/LayerControl.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import type { ControlPosition } from 'react-map-gl/maplibre';
-import type { MapRef } from 'react-map-gl/maplibre';
+import React, { useCallback, useEffect, useState } from 'react';
+import type { ControlPosition, MapRef } from 'react-map-gl/maplibre';
+import { findSelectedDebugLayers } from '../../util/map.ts';
 
 interface Layer {
   id: string;
@@ -85,15 +85,8 @@ const LayerControl: React.FC<LayerControlProps> = ({ mapRef, setInteractiveLayer
       mapInstance.setLayoutProperty(layerId, 'visibility', isVisible ? 'visible' : 'none');
 
       // After toggling, recalculate which interactive layers are visible.
-      const style = mapInstance.getStyle();
-      if (!style || !style.layers) return;
-
-      const visibleInteractive = style.layers
-        .filter((l) => l.type !== 'raster' && !l.id.startsWith('jsx'))
-        .filter((l) => mapInstance.getLayoutProperty(l.id, 'visibility') !== 'none')
-        .map((l) => l.id);
-
-      setInteractiveLayerIds(visibleInteractive);
+      const selected = findSelectedDebugLayers(mapInstance);
+      setInteractiveLayerIds(selected);
     },
     [mapRef, setInteractiveLayerIds],
   );

client/src/components/MapView/MapView.tsx

@@ -17,6 +17,7 @@ import { useState, useCallback, useRef } from 'react';
 import { ContextMenuPopup } from './ContextMenuPopup.tsx';
 import { GeometryPropertyPopup } from './GeometryPropertyPopup.tsx';
 import RightMenu from './RightMenu.tsx';
+import { findSelectedDebugLayers } from '../../util/map.ts';
 
 const styleUrl = import.meta.env.VITE_DEBUG_STYLE_URL;
 
@@ -63,7 +64,7 @@ export function MapView({
     // provided by the WorldEnvelopeService
     if (map.getZoom() < 2) {
       const source = map.getSource('stops') as VectorTileSource;
-      map.fitBounds(source.bounds, { maxDuration: 50, linear: true });
+      map.fitBounds(source.bounds, { animate: false });
     }
   };
 
@@ -76,6 +77,9 @@ export function MapView({
     // 1) Call your existing function
     panToWorldEnvelopeIfRequired(e);
 
+    const selected = findSelectedDebugLayers(e.target);
+    setInteractiveLayerIds(selected);
+
     // 2) Add the native MapLibre attribution control
     onLoad(e);
   }

client/src/util/map.ts

@@ -0,0 +1,16 @@
+import { MapInstance } from 'react-map-gl/maplibre';
+
+/**
+ * Find currently selected (= visible) debug layers.
+ */
+export const findSelectedDebugLayers = (mapInstance: MapInstance): string[] => {
+  const style = mapInstance.getStyle();
+  if (!style || !style.layers) {
+    return [];
+  }
+
+  return style.layers
+    .filter((l) => l.type !== 'raster' && !l.id.startsWith('jsx'))
+    .filter((l) => mapInstance.getLayoutProperty(l.id, 'visibility') !== 'none')
+    .map((l) => l.id);
+};