Refactor some state to enable baselayer history navigation

src/App.tsx

@@ -9,7 +9,6 @@ import { fetchProducts } from './utils/fetchUtils';
 import {
   assertBand,
   baselayersReducer,
-  CHANGE_BASELAYER,
   CHANGE_CMAP_TYPE,
   CHANGE_CMAP_VALUES,
   initialBaselayersState,
@@ -19,11 +18,10 @@ import { useQuery } from './hooks/useQuery';
 import { useHighlightBoxes } from './hooks/useHighlightBoxes';
 import { OpenLayersMap } from './components/OpenLayersMap';
 import { handleSelectChange } from './utils/layerUtils';
-import { EXTERNAL_BASELAYERS } from './configs/mapSettings';
 
 function App() {
   /** contains useful state of the baselayer for tile requests and matplotlib color mapping */
-  const [baselayersState, dispatch] = useReducer(
+  const [baselayersState, dispatchBaselayersChange] = useReducer(
     baselayersReducer,
     initialBaselayersState
   );
@@ -58,7 +56,7 @@ function App() {
 
       // Set the baselayersState with the finalBands; note that this action will also set the
       // activeBaselayer to be finalBands[0]
-      dispatch({
+      dispatchBaselayersChange({
         type: SET_BASELAYERS_STATE,
         baselayers: finalBands,
       });
@@ -101,33 +99,6 @@ function App() {
 
   const [activeSourceListIds, setActiveSourceListIds] = useState<number[]>([]);
 
-  /**
-   * Handler fires when user changes map layers. If the units of the new
-   * layer are the same as the active layer, then we just set a new active
-   * layer. If the units differ, we set new values for vmin, vmax, and cmap
-   * from the band's recommended values in order to prevent nonsensical
-   * TileLayer requests.
-   */
-  const onBaseLayerChange = useCallback(
-    (selectedBaselayerId: string) => {
-      const isExternalBaselayer = selectedBaselayerId.includes('external');
-
-      const newActiveBaselayer = isExternalBaselayer
-        ? EXTERNAL_BASELAYERS.find((b) => b.id === selectedBaselayerId)
-        : baselayersState.internalBaselayersState?.find(
-            (b) => b.id === Number(selectedBaselayerId)
-          );
-
-      if (!newActiveBaselayer) return;
-
-      dispatch({
-        type: CHANGE_BASELAYER,
-        newBaselayer: newActiveBaselayer,
-      });
-    },
-    [baselayersState.internalBaselayersState]
-  );
-
   const onSelectedSourceListsChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       if (!sourceLists) return;
@@ -147,7 +118,7 @@ function App() {
   const onCmapValuesChange = useCallback(
     (values: number[]) => {
       if (baselayersState.activeBaselayer) {
-        dispatch({
+        dispatchBaselayersChange({
           type: CHANGE_CMAP_VALUES,
           activeBaselayer: baselayersState.activeBaselayer,
           cmapValues: {
@@ -163,7 +134,7 @@ function App() {
   const onCmapChange = useCallback(
     (cmap: string) => {
       if (baselayersState.activeBaselayer) {
-        dispatch({
+        dispatchBaselayersChange({
           type: CHANGE_CMAP_TYPE,
           activeBaselayer: baselayersState.activeBaselayer,
           cmap,
@@ -199,7 +170,7 @@ function App() {
       {activeBaselayer && internalBaselayersState && (
         <OpenLayersMap
           baselayersState={baselayersState}
-          onBaseLayerChange={onBaseLayerChange}
+          dispatchBaselayersChange={dispatchBaselayersChange}
           sourceLists={sourceLists}
           activeSourceListIds={activeSourceListIds}
           onSelectedSourceListsChange={onSelectedSourceListsChange}

src/components/BaselayerHistoryNavigation.tsx

@@ -0,0 +1,41 @@
+import { LeftArrowIcon } from './icons/LeftArrowIcon';
+import { RightArrowIcon } from './icons/RightArrowIcon';
+
+export function BaselayerHistoryNavigation({
+  disableGoBack,
+  disableGoForward,
+  goBack,
+  goForward,
+}: {
+  disableGoBack: boolean;
+  disableGoForward: boolean;
+  goBack: () => void;
+  goForward: () => void;
+}) {
+  return (
+    <>
+      <div className="bl-nav-btn-container back-btn-container">
+        <button
+          type="button"
+          className="map-btn"
+          title="Type 'h' or click to go back one baselayer"
+          disabled={disableGoBack}
+          onClick={goBack}
+        >
+          <LeftArrowIcon />
+        </button>
+      </div>
+      <div className="bl-nav-btn-container fwd-btn-container">
+        <button
+          type="button"
+          className="map-btn"
+          title="Type 'l' or click to go forward one baselayer"
+          disabled={disableGoForward}
+          onClick={goForward}
+        >
+          <RightArrowIcon />
+        </button>
+      </div>
+    </>
+  );
+}

src/components/BoxMenu.tsx

@@ -29,63 +29,61 @@ export function BoxMenu({
   return (
     <div
       className={
-        'highlight-box-hover-container no-background ' +
+        'box-menu-hover-container no-background ' +
         (isNewBox && !showMenuOverlay && 'hide')
       }
       style={{
         top: boxData.top,
         left: boxData.left,
       }}
     >
-      <div>
-        <div className="highlight-box-header">
-          <button
-            className={'menu-button highlight-box-menu-btn'}
-            onClick={() => setShowMenu(!showMenu)}
-          >
-            <MenuIcon />
-          </button>
-          {showMenu && (
-            <div className="menu-btns-container highlight-box-menu-btns-container">
-              {SUBMAP_DOWNLOAD_OPTIONS.map((option) => (
-                <button
-                  className="area-select-button highlight-box-button"
-                  key={option.display}
-                  disabled={!submapData}
-                  onClick={() => {
-                    if (submapData) {
-                      const boxPosition = transformBoxes(
-                        {
-                          top_left_ra: boxData.top_left_ra,
-                          top_left_dec: boxData.top_left_dec,
-                          bottom_right_ra: boxData.bottom_right_ra,
-                          bottom_right_dec: boxData.bottom_right_dec,
-                        },
-                        flipped
-                      );
-                      downloadSubmap(
-                        {
-                          ...submapData,
-                          top: boxPosition.top_left_dec,
-                          left: boxPosition.top_left_ra,
-                          bottom: boxPosition.bottom_right_dec,
-                          right: boxPosition.bottom_right_ra,
-                        },
-                        option.ext
-                      );
-                    }
-                  }}
-                >
-                  Download {option.display}
-                </button>
-              ))}
-              {...additionalButtons}
-            </div>
-          )}
-          {!isNewBox && 'name' in boxData && <h3>{boxData.name}</h3>}
-        </div>
-        {!isNewBox && 'description' in boxData && <p>{boxData.description}</p>}
+      <div className="box-menu-header">
+        <button
+          className={'map-btn menu-btn'}
+          onClick={() => setShowMenu(!showMenu)}
+        >
+          <MenuIcon />
+        </button>
+        {showMenu && (
+          <div className="box-menu-btns-container">
+            {SUBMAP_DOWNLOAD_OPTIONS.map((option) => (
+              <button
+                className="map-btn menu-btn"
+                key={option.display}
+                disabled={!submapData}
+                onClick={() => {
+                  if (submapData) {
+                    const boxPosition = transformBoxes(
+                      {
+                        top_left_ra: boxData.top_left_ra,
+                        top_left_dec: boxData.top_left_dec,
+                        bottom_right_ra: boxData.bottom_right_ra,
+                        bottom_right_dec: boxData.bottom_right_dec,
+                      },
+                      flipped
+                    );
+                    downloadSubmap(
+                      {
+                        ...submapData,
+                        top: boxPosition.top_left_dec,
+                        left: boxPosition.top_left_ra,
+                        bottom: boxPosition.bottom_right_dec,
+                        right: boxPosition.bottom_right_ra,
+                      },
+                      option.ext
+                    );
+                  }
+                }}
+              >
+                Download {option.display}
+              </button>
+            ))}
+            {...additionalButtons}
+          </div>
+        )}
+        {!isNewBox && 'name' in boxData && <h3>{boxData.name}</h3>}
       </div>
+      {!isNewBox && 'description' in boxData && <p>{boxData.description}</p>}
     </div>
   );
 }

src/components/LayerSelector.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback, useRef } from 'react';
+import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { BandWithCmapValues, SourceList } from '../types/maps';
 import { makeLayerName } from '../utils/layerUtils';
 import { LayersIcon } from './icons/LayersIcon';
@@ -14,7 +14,13 @@ interface Props
     | 'setActiveBoxIds'
     | 'setBoxes'
     | 'addOptimisticHighlightBox'
+    | 'dispatchBaselayersChange'
   > {
+  onBaselayerChange: (
+    selectedBaselayerId: string,
+    context: 'layerMenu' | 'goBack' | 'goForward',
+    flipped?: boolean
+  ) => void;
   activeBaselayerId?: number | string;
   sourceLists: SourceList[];
   isFlipped: boolean;
@@ -23,7 +29,7 @@ interface Props
 
 export function LayerSelector({
   internalBaselayers,
-  onBaseLayerChange,
+  onBaselayerChange,
   activeBaselayerId,
   sourceLists,
   onSelectedSourceListsChange,
@@ -34,10 +40,50 @@ export function LayerSelector({
   isFlipped,
 }: Props) {
   const menuRef = useRef<HTMLDivElement | null>(null);
+  const [lockMenu, setLockMenu] = useState(false);
+  const previousLockMenuHandlerRef = useRef<(e: KeyboardEvent) => void>(null);
+
+  useEffect(() => {
+    if (previousLockMenuHandlerRef.current) {
+      document.removeEventListener(
+        'keypress',
+        previousLockMenuHandlerRef.current
+      );
+    }
+
+    // Create new handler
+    const newHandler = (e: KeyboardEvent) => {
+      // Return early if target is in an input
+      if ((e.target as HTMLElement)?.closest('input')) {
+        return;
+      }
+      if (e.key === 'm') {
+        setLockMenu(!lockMenu);
+        if (menuRef.current?.classList.contains('hide')) {
+          menuRef.current.classList.remove('hide');
+        } else {
+          if (lockMenu) {
+            menuRef.current?.classList.add('hide');
+          }
+        }
+      }
+    };
+
+    // Add new handler and update the ref
+    document.addEventListener('keypress', newHandler);
+    previousLockMenuHandlerRef.current = newHandler;
+
+    // Remove handler when component unmounts
+    return () =>
+      document.removeEventListener(
+        'keypress',
+        previousLockMenuHandlerRef.current ?? newHandler
+      );
+  }, [setLockMenu, lockMenu, menuRef.current]);
 
   const toggleMenu = useCallback(
     (e: MouseEvent) => {
-      if (!menuRef.current) return;
+      if (!menuRef.current || lockMenu) return;
       const target = (e.target as HTMLElement).closest('div');
       if (target && target.classList.contains('btn')) {
         menuRef.current.classList.remove('hide');
@@ -46,7 +92,7 @@ export function LayerSelector({
         menuRef.current.classList.add('hide');
       }
     },
-    [menuRef.current]
+    [menuRef.current, lockMenu]
   );
 
   return (
@@ -59,6 +105,18 @@ export function LayerSelector({
         className={'layer-selector-container menu hide'}
         onMouseLeave={toggleMenu}
       >
+        <div
+          className="lock-menu-container"
+          title="Type 'm' or click to enable/disable this feature."
+        >
+          <label htmlFor="lock-menu">Keep open</label>
+          <input
+            id="lock-menu"
+            type="checkbox"
+            checked={lockMenu}
+            onChange={() => setLockMenu(!lockMenu)}
+          />
+        </div>
         <fieldset>
           <legend>Baselayers</legend>
           {internalBaselayers?.map((band) => (
@@ -69,7 +127,7 @@ export function LayerSelector({
                 value={band.id}
                 name="baselayer"
                 checked={band.id === activeBaselayerId}
-                onChange={(e) => onBaseLayerChange(e.target.value)}
+                onChange={(e) => onBaselayerChange(e.target.value, 'layerMenu')}
               />
               <label htmlFor={String(band.id)}>{makeLayerName(band)}</label>
             </div>
@@ -78,14 +136,19 @@ export function LayerSelector({
             <div
               className={`input-container ${bl.disabledState(isFlipped) ? 'disabled' : ''}`}
               key={bl.id}
+              title={
+                bl.disabledState(isFlipped)
+                  ? 'The current RA range is incompatible with this baselayer.'
+                  : undefined
+              }
             >
               <input
                 type="radio"
                 id={bl.id}
                 value={bl.id}
                 name="baselayer"
                 checked={bl.id === activeBaselayerId}
-                onChange={(e) => onBaseLayerChange(e.target.value)}
+                onChange={(e) => onBaselayerChange(e.target.value, 'layerMenu')}
                 disabled={bl.disabledState(isFlipped)}
               />
               <label htmlFor={bl.id}>{bl.name}</label>