Refactor coords display

src/components/ColorMapControls.tsx

@@ -157,7 +157,7 @@ export function ColorMapControls(props: ColorMapControlsProps) {
     const step = stepCalc >= 1 ? Math.floor(stepCalc) : stepCalc;
 
     return { min, max, step };
-  }, [processedHistogramData?.edges, values, isLogScale]);
+  }, [processedHistogramData?.edges, values]);
 
   /** Change handler for the color map <select> element */
   const handleCmapChange: ChangeEventHandler<HTMLSelectElement> = useCallback(

src/components/CoordinatesDisplay.tsx

@@ -1,24 +1,25 @@
 import { useCallback, useEffect, useRef, useState, FormEvent } from 'react';
-import { Map, Feature } from 'ol';
+import { Map, Feature, MapBrowserEvent } from 'ol';
 import { Geometry } from 'ol/geom';
 import { NUMBER_OF_FIXED_COORDINATE_DECIMALS } from '../configs/mapSettings';
 import { transformGraticuleCoords } from '../utils/layerUtils';
 import './styles/coordinates-display.css';
 import { searchOverlayHelper } from '../utils/externalSearchUtils';
 
 export function CoordinatesDisplay({
-  coordinates,
   flipped,
   mapRef,
   externalSearchRef,
   externalSearchMarkerRef,
 }: {
-  coordinates: number[];
   flipped: boolean;
   mapRef: React.RefObject<Map | null>;
   externalSearchRef: React.RefObject<HTMLDivElement | null>;
   externalSearchMarkerRef: React.RefObject<Feature<Geometry> | null>;
 }) {
+  const [coordinates, setCoordinates] = useState<number[] | undefined>(
+    undefined
+  );
   const [showCoordInputs, setShowCoordInputs] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
   const firstInputRef = useRef<HTMLInputElement>(null);
@@ -54,6 +55,14 @@ export function CoordinatesDisplay({
     };
   }, []);
 
+  useEffect(() => {
+    if (!mapRef.current) return;
+    const currentMapRef = mapRef.current;
+    const updateCoords = (e: MapBrowserEvent) => setCoordinates(e.coordinate);
+    currentMapRef.on('pointermove', updateCoords);
+    return () => currentMapRef.un('pointermove', updateCoords);
+  }, [mapRef]);
+
   const onSubmit = useCallback(
     (e: FormEvent) => {
       e.preventDefault();
@@ -87,6 +96,9 @@ export function CoordinatesDisplay({
     [mapRef, externalSearchRef, externalSearchMarkerRef, flipped]
   );
 
+  // Return early if coordinates aren't defined
+  if (!coordinates) return;
+
   const transformedCoords = transformGraticuleCoords(coordinates, flipped);
   return (
     <form

src/components/LayerSelector.tsx

@@ -89,7 +89,7 @@ export function LayerSelector({
         'keypress',
         previousLockMenuHandlerRef.current ?? newHandler
       );
-  }, [setLockMenu, lockMenu, menuRef.current]);
+  }, [setLockMenu, lockMenu, menuRef]);
 
   const toggleMenu = useCallback(
     (e: MouseEvent) => {
@@ -102,7 +102,7 @@ export function LayerSelector({
         menuRef.current.classList.add('hide');
       }
     },
-    [menuRef.current, lockMenu]
+    [menuRef, lockMenu]
   );
 
   return (

src/components/Login.tsx

@@ -15,7 +15,7 @@ export function Login({
     const hasRefreshToken = getCookie('valid_refresh_token');
 
     setIsAuthenticated(!!hasAccessToken && !!hasRefreshToken);
-  }, []);
+  }, [setIsAuthenticated]);
 
   if (isAuthenticated === null) return null;
 

src/components/OpenLayersMap.tsx

@@ -90,9 +90,6 @@ export function OpenLayersMap({
   const previousSearchOverlayHandlerRef =
     useRef<(e: MapBrowserEvent<any>) => void | null>(null);
   const previousKeyboardHandlerRef = useRef<(e: KeyboardEvent) => void>(null);
-  const [coordinates, setCoordinates] = useState<number[] | undefined>(
-    undefined
-  );
   const [isDrawing, setIsDrawing] = useState(false);
   const [isNewBoxDrawn, setIsNewBoxDrawn] = useState(false);
   const [flipTiles, setFlipTiles] = useState(true);
@@ -104,7 +101,7 @@ export function OpenLayersMap({
     { id: string; flipped: boolean }[]
   >([]);
 
-  const { activeBaselayer, internalBaselayers } = baselayersState;
+  const { activeBaselayer } = baselayersState;
 
   /**
    * Handler fires when user changes map layers. If the units of the new
@@ -175,13 +172,7 @@ export function OpenLayersMap({
         newBaselayer: newActiveBaselayer,
       });
     },
-    [
-      baselayersState.internalBaselayers,
-      baselayersState.activeBaselayer,
-      backHistoryStack,
-      flipTiles,
-      setFlipTiles,
-    ]
+    [baselayersState, dispatchBaselayersChange, flipTiles, setFlipTiles]
   );
 
   const goBack = useCallback(() => {
@@ -194,30 +185,30 @@ export function OpenLayersMap({
     onBaselayerChange(baselayer.id, 'goForward', baselayer.flipped);
   }, [onBaselayerChange, forwardHistoryStack]);
 
-  const tileLayers = useMemo(() => {
-    return internalBaselayers?.map(
-      (layer) =>
-        new TileLayer({
-          properties: { id: 'baselayer-' + layer.layer_id },
-          source: new XYZ({
-            url: `${SERVICE_URL}/maps/${layer.layer_id}/{z}/{-y}/{x}/tile.png?cmap=${layer.cmap}&vmin=${layer.isLogScale ? Math.pow(10, layer.vmin) : layer.vmin}&vmax=${layer.isLogScale ? Math.pow(10, layer.vmax) : layer.vmax}&flip=${flipTiles}&log_norm=${layer.isLogScale}&abs=${layer.isAbsoluteValue}`,
-            tileGrid: new TileGrid({
-              extent: [-180, -90, 180, 90],
-              origin: [-180, 90],
-              tileSize: layer.tile_size,
-              resolutions: getBaselayerResolutions(
-                180,
-                layer.tile_size,
-                layer.number_of_levels - 1
-              ),
-            }),
-            interpolate: false,
-            projection: 'EPSG:4326',
-            tilePixelRatio: layer.tile_size / 256,
+  const activeInternalTileLayer = useMemo(() => {
+    if (assertInternalBaselayer(activeBaselayer)) {
+      const layer = activeBaselayer;
+      return new TileLayer({
+        properties: { id: 'baselayer-' + layer.layer_id },
+        source: new XYZ({
+          url: `${SERVICE_URL}/maps/${layer.layer_id}/{z}/{-y}/{x}/tile.png?cmap=${layer.cmap}&vmin=${layer.isLogScale ? Math.pow(10, layer.vmin) : layer.vmin}&vmax=${layer.isLogScale ? Math.pow(10, layer.vmax) : layer.vmax}&flip=${flipTiles}&log_norm=${layer.isLogScale}&abs=${layer.isAbsoluteValue}`,
+          tileGrid: new TileGrid({
+            extent: [-180, -90, 180, 90],
+            origin: [-180, 90],
+            tileSize: layer.tile_size,
+            resolutions: getBaselayerResolutions(
+              180,
+              layer.tile_size,
+              layer.number_of_levels - 1
+            ),
           }),
-        })
-    );
-  }, [internalBaselayers, flipTiles]);
+          interpolate: false,
+          projection: 'EPSG:4326',
+          tilePixelRatio: layer.tile_size / 256,
+        }),
+      });
+    }
+  }, [flipTiles, activeBaselayer]);
 
   const externalTileLayers = useMemo(() => {
     return EXTERNAL_BASELAYERS.map((b) => {
@@ -254,10 +245,6 @@ export function OpenLayersMap({
         view: new View(DEFAULT_INTERNAL_MAP_SETTINGS),
       });
 
-      mapRef.current.on('pointermove', (e) => {
-        setCoordinates(e.coordinate);
-      });
-
       /**
        * BEGIN
        * Set up overlay, markers, and events for the external searches functionality
@@ -347,7 +334,7 @@ export function OpenLayersMap({
         }
       }
     },
-    [externalSearchMarkerRef.current, flipTiles]
+    [externalSearchMarkerRef, flipTiles]
   );
 
   useEffect(() => {
@@ -390,7 +377,7 @@ export function OpenLayersMap({
   }, [flipTiles]);
 
   /**
-   * Updates tilelayers when new baselayer is selected and/or color map settings change
+   * Updates map layer when new baselayer is selected and/or color map settings change
    */
   useEffect(() => {
     if (mapRef.current && activeBaselayer) {
@@ -401,11 +388,8 @@ export function OpenLayersMap({
           mapRef.current?.removeLayer(layer);
         }
       });
-      if (assertInternalBaselayer(activeBaselayer)) {
-        const activeLayer = tileLayers!.find(
-          (t) => t.get('id') === 'baselayer-' + activeBaselayer!.layer_id
-        )!;
-        mapRef.current.addLayer(activeLayer);
+      if (assertInternalBaselayer(activeBaselayer) && activeInternalTileLayer) {
+        mapRef.current.addLayer(activeInternalTileLayer);
       } else {
         const externalBaselayer = EXTERNAL_BASELAYERS.find(
           (b) => b.layer_id === activeBaselayer.layer_id
@@ -419,7 +403,7 @@ export function OpenLayersMap({
         mapRef.current.addLayer(activeLayer);
       }
     }
-  }, [activeBaselayer, tileLayers]);
+  }, [activeBaselayer, activeInternalTileLayer, externalTileLayers]);
 
   /**
    * Add keyboard support for switching baselayers
@@ -474,7 +458,7 @@ export function OpenLayersMap({
       view.setCenter(newCenter);
     }
     setFlipTiles(!flipTiles);
-  }, [setFlipTiles, flipTiles, mapRef.current]);
+  }, [setFlipTiles, flipTiles, mapRef]);
 
   return (
     <div id="map" style={{ cursor: isDrawing ? 'crosshair' : 'auto' }}>
@@ -548,15 +532,12 @@ export function OpenLayersMap({
         goForward={goForward}
       />
       <GraticuleLayer mapRef={mapRef} flipped={flipTiles} />
-      {coordinates && (
-        <CoordinatesDisplay
-          coordinates={coordinates}
-          flipped={flipTiles}
-          mapRef={mapRef}
-          externalSearchRef={externalSearchRef}
-          externalSearchMarkerRef={externalSearchMarkerRef}
-        />
-      )}
+      <CoordinatesDisplay
+        flipped={flipTiles}
+        mapRef={mapRef}
+        externalSearchRef={externalSearchRef}
+        externalSearchMarkerRef={externalSearchMarkerRef}
+      />
     </div>
   );
 }

src/components/layers/AddHighlightBoxLayer.tsx

@@ -119,7 +119,14 @@ export function AddHighlightBoxLayer({
         }
       };
     }
-  }, [mapRef.current, isDrawing]);
+  }, [
+    mapRef,
+    isDrawing,
+    drawBoxRef,
+    setIsDrawing,
+    setIsNewBoxDrawn,
+    showMenuOverlay,
+  ]);
 
   const handleAddBoxCleanup = useCallback(() => {
     setNewBoxData(undefined);
@@ -128,7 +135,7 @@ export function AddHighlightBoxLayer({
     if (source) {
       source.clear();
     }
-  }, [drawBoxRef.current]);
+  }, [setIsNewBoxDrawn, drawBoxRef]);
 
   return (
     <>

src/components/layers/GraticuleLayer.tsx

@@ -77,7 +77,7 @@ export function GraticuleLayer({
       mapRef.current.addLayer(graticule1);
       mapRef.current.addLayer(graticule2);
     }
-  }, [mapRef.current, flipped]);
+  }, [mapRef, flipped, handleLatLabelFormat, handleLonLabelFormat]);
 
   return null;
 }

src/components/layers/HighlightBoxLayer.tsx

@@ -141,7 +141,7 @@ export function HighlightBoxLayer({
       map?.addLayer(layer);
       addedLayerIdsRef.current.add(layerId);
     });
-  }, [mapRef.current, highlightBoxes, activeBoxIds, flipped]);
+  }, [mapRef, highlightBoxes, activeBoxIds, flipped]);
 
   useEffect(() => {
     if (!mapRef.current || !boxOverlayRef.current) return;
@@ -152,7 +152,7 @@ export function HighlightBoxLayer({
       });
       mapRef.current.addOverlay(overlayRef.current);
     }
-  }, [mapRef.current, boxOverlayRef.current]);
+  }, [mapRef, boxOverlayRef]);
 
   useEffect(() => {
     if (mapRef.current) {
@@ -162,7 +162,7 @@ export function HighlightBoxLayer({
       handleBoxHoverRef.current = handleBoxHover;
       mapRef.current.on('pointermove', handleBoxHover);
     }
-  }, [mapRef.current, handleBoxHover]);
+  }, [mapRef, handleBoxHover]);
 
   useEffect(() => {
     const map = mapRef.current;
@@ -240,7 +240,7 @@ export function HighlightBoxLayer({
         }
       }
     });
-  }, [flipped, highlightBoxes]);
+  }, [mapRef, flipped, highlightBoxes]);
 
   return (
     <>

src/components/layers/SourcesLayer.tsx

@@ -115,7 +115,7 @@ export function SourcesLayer({
 
     sourceGroupRef.current = group;
     map.addLayer(group);
-  }, [sourceGroups, activeSourceGroupIds, flipped]);
+  }, [mapRef, sourceGroups, activeSourceGroupIds, flipped]);
 
   // Set up interaction and popup
   useEffect(() => {
@@ -149,7 +149,7 @@ export function SourcesLayer({
       map.removeOverlay(popupOverlay);
       map.removeInteraction(select);
     };
-  }, [mapRef.current]);
+  }, [mapRef]);
 
   useEffect(() => {
     if (mapRef.current) {
@@ -162,7 +162,7 @@ export function SourcesLayer({
       handleSourceClickRef.current = handleSourceClick;
       selectInteractionRef.current?.on('select', handleSourceClick);
     }
-  }, [handleSourceClick, selectInteractionRef.current]);
+  }, [mapRef, handleSourceClick, selectInteractionRef]);
 
   useEffect(() => {
     const map = mapRef.current;
@@ -190,7 +190,7 @@ export function SourcesLayer({
         });
       }
     });
-  }, [flipped]);
+  }, [mapRef, flipped, selectedSourceId]);
 
   return null;
 }

src/hooks/useQuery.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 type UseQueryParams<T> = {
   queryFn: () => Promise<T>;
-  queryKey: any[];
+  queryKey: unknown[];
   initialData: T;
 };
 

src/utils/layerUtils.ts

@@ -76,7 +76,7 @@ export function transformSources(feature: Feature, flipped: boolean) {
 }
 
 export function transformBoxes(boxExtent: BoxExtent, flipped: boolean) {
-  let newBoxPosition = {
+  const newBoxPosition = {
     ...boxExtent,
   };