Tweaks to map dynamics

frontend/components/LinesExplorerContentPatternPath/LinesExplorerContentPatternPath.js

@@ -26,7 +26,6 @@ export default function LinesExplorerContentPatternPath() {
           <LinePatternPathStop pathStopData={pathStop} pathIndex={pathIndex} pathIndexMax={linesExplorerContext.entities.pattern.path.length - 1} />
         </div>
       ))}
-      <div>{linesExplorerContext.entities.pattern.id}</div>
     </div>
   );
 

frontend/components/LinesExplorerMap/LinesExplorerMap.js

@@ -174,7 +174,7 @@ export default function LinesExplorerMap() {
   }, [linesExplorerMap]);
 
   useEffect(() => {
-    if (selectedShapeMapData) {
+    if (selectedShapeMapData && linesExplorerContext.map.auto_zoom) {
       // Get window width and height
       let fitBoundsPadding = 100;
       if (window.innerWidth < window.innerHeight) fitBoundsPadding = 50;
@@ -183,7 +183,7 @@ export default function LinesExplorerMap() {
       const boundingBox = turf.bbox(collection);
       linesExplorerMap.fitBounds(boundingBox, { duration: 2000, padding: fitBoundsPadding, bearing: linesExplorerMap.getBearing(), maxZoom: 16 });
     }
-  }, [selectedShapeMapData, selectedVehiclesMapData, linesExplorerMap]);
+  }, [selectedShapeMapData, selectedVehiclesMapData, linesExplorerMap, linesExplorerContext.map.auto_zoom]);
 
   //
   // E. Helper functions
@@ -252,6 +252,7 @@ export default function LinesExplorerMap() {
   };
 
   const handleMapMove = () => {
+    linesExplorerContext.disableAutoZoom();
     // Get all currently rendered features and mark all of them as unselected
     // const allRenderedFeatures = linesExplorerMap.queryRenderedFeatures();
     // allRenderedFeatures.forEach(function (f) {

frontend/contexts/LinesExplorerContext.js

@@ -13,7 +13,7 @@ import parseDateToString from '@/services/parseDateToString';
 
 const initialMapState = {
   style: 'map',
-  auto_zoom: null,
+  auto_zoom: true,
 };
 
 const initialEntitiesState = {
@@ -129,6 +129,7 @@ export function LinesExplorerContextProvider({ children }) {
 
   const selectPattern = useCallback((patternData) => {
     setEntitiesState((prev) => ({ ...prev, pattern: patternData, stop: null }));
+    setMapState((prev) => ({ ...prev, auto_zoom: true }));
   }, []);
 
   const clearSelectedPattern = useCallback(() => {
@@ -139,14 +140,24 @@ export function LinesExplorerContextProvider({ children }) {
 
   const selectStop = useCallback((stopData) => {
     setEntitiesState((prev) => ({ ...prev, stop: stopData }));
+    setMapState((prev) => ({ ...prev, auto_zoom: false }));
   }, []);
 
   const clearSelectedStop = useCallback(() => {
     setEntitiesState((prev) => ({ ...prev, stop: null }));
+    setMapState((prev) => ({ ...prev, auto_zoom: true }));
   }, []);
 
   // ---------
 
+  const enableAutoZoom = useCallback(() => {
+    setMapState((prev) => ({ ...prev, auto_zoom: true }));
+  }, []);
+
+  const disableAutoZoom = useCallback(() => {
+    setMapState((prev) => ({ ...prev, auto_zoom: false }));
+  }, []);
+
   const updateMapState = useCallback(
     (newMapState, reset = false) => {
       if (reset) setMapState({ ...initialMapState, ...newMapState });
@@ -190,8 +201,11 @@ export function LinesExplorerContextProvider({ children }) {
       selectStop,
       clearSelectedStop,
       //
+      enableAutoZoom,
+      disableAutoZoom,
+      //
     }),
-    [mapState, updateMapState, entitiesState, updateEntitiesState, selectMunicipality, clearSelectedMunicipality, selectLine, clearSelectedLine, selectDate, clearSelectedDate, selectPattern, clearSelectedPattern, selectStop, clearSelectedStop]
+    [mapState, updateMapState, entitiesState, updateEntitiesState, selectMunicipality, clearSelectedMunicipality, selectLine, clearSelectedLine, selectDate, clearSelectedDate, selectPattern, clearSelectedPattern, selectStop, clearSelectedStop, enableAutoZoom, disableAutoZoom]
   );
 
   //