Layer menu sections

src/App.tsx

@@ -1,9 +1,5 @@
 import { useCallback, useMemo, useState, useReducer, ChangeEvent } from 'react';
-import {
-  MapMetadataResponseWithClientBand,
-  BandWithCmapValues,
-  SourceList,
-} from './types/maps';
+import { MapMetadataResponseWithClientBand, SourceList } from './types/maps';
 import { ColorMapControls } from './components/ColorMapControls';
 import { fetchProducts } from './utils/fetchUtils';
 import {
@@ -30,41 +26,25 @@ function App() {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
 
   /** query the bands to use as the baselayers of the map */
-  useQuery<BandWithCmapValues[] | undefined>({
+  useQuery<MapMetadataResponseWithClientBand[] | undefined>({
     initialData: undefined,
     queryKey: [isAuthenticated],
     queryFn: async () => {
       // Fetch the maps and the map metadata in order to get the list of bands used as
       // map baselayers
       const mapsMetadata = await fetchProducts('maps');
 
-      // Loop through each map's metadata and reduce the map's bands
-      // into a single array
-      const finalBands = mapsMetadata.reduce(
-        (
-          prev: BandWithCmapValues[],
-          curr: MapMetadataResponseWithClientBand
-        ) => {
-          if (curr.bands.length) {
-            return prev.concat(curr.bands);
-          } else {
-            return prev;
-          }
-        },
-        []
-      );
-
-      // If we end up with no bands for some reason, return early
-      if (!finalBands.length) return;
+      // // If we end up with no maps for some reason, return early
+      if (!mapsMetadata.length) return;
 
       // Set the baselayersState with the finalBands; note that this action will also set the
       // activeBaselayer to be finalBands[0]
       dispatchBaselayersChange({
         type: SET_BASELAYERS_STATE,
-        baselayers: finalBands,
+        baselayerMaps: mapsMetadata,
       });
 
-      return finalBands;
+      return mapsMetadata;
     },
   });
 
@@ -167,31 +147,29 @@ function App() {
     }
   }, [baselayersState.activeBaselayer]);
 
-  const { activeBaselayer, internalBaselayersState } = baselayersState;
+  const { activeBaselayer, internalBaselayerMaps } = baselayersState;
   return (
     <>
       <Login
         isAuthenticated={isAuthenticated}
         setIsAuthenticated={setIsAuthenticated}
       />
-      {isAuthenticated !== null &&
-        activeBaselayer &&
-        internalBaselayersState && (
-          <OpenLayersMap
-            baselayersState={baselayersState}
-            dispatchBaselayersChange={dispatchBaselayersChange}
-            sourceLists={sourceLists}
-            activeSourceListIds={activeSourceListIds}
-            onSelectedSourceListsChange={onSelectedSourceListsChange}
-            highlightBoxes={optimisticHighlightBoxes}
-            setBoxes={updateHighlightBoxes}
-            activeBoxIds={activeBoxIds}
-            setActiveBoxIds={setActiveBoxIds}
-            onSelectedHighlightBoxChange={onSelectedHighlightBoxChange}
-            submapData={submapData}
-            addOptimisticHighlightBox={addOptimisticHighlightBox}
-          />
-        )}
+      {isAuthenticated !== null && activeBaselayer && internalBaselayerMaps && (
+        <OpenLayersMap
+          baselayersState={baselayersState}
+          dispatchBaselayersChange={dispatchBaselayersChange}
+          sourceLists={sourceLists}
+          activeSourceListIds={activeSourceListIds}
+          onSelectedSourceListsChange={onSelectedSourceListsChange}
+          highlightBoxes={optimisticHighlightBoxes}
+          setBoxes={updateHighlightBoxes}
+          activeBoxIds={activeBoxIds}
+          setActiveBoxIds={setActiveBoxIds}
+          onSelectedHighlightBoxChange={onSelectedHighlightBoxChange}
+          submapData={submapData}
+          addOptimisticHighlightBox={addOptimisticHighlightBox}
+        />
+      )}
       {isAuthenticated !== null &&
         assertBand(activeBaselayer) &&
         activeBaselayer.cmap &&

src/components/BaselayerSections.tsx

@@ -0,0 +1,74 @@
+import { LayerSelectorProps } from './LayerSelector';
+import { CollapsibleSection } from './CollapsibleSection';
+import { makeLayerName } from '../utils/layerUtils';
+import { EXTERNAL_BASELAYERS } from '../configs/mapSettings';
+
+type BaselayerSectionsProps = {
+  internalBaselayerMaps: LayerSelectorProps['internalBaselayerMaps'];
+  activeBaselayerId: LayerSelectorProps['activeBaselayerId'];
+  isFlipped: LayerSelectorProps['isFlipped'];
+  onBaselayerChange: LayerSelectorProps['onBaselayerChange'];
+};
+
+export function BaselayerSections({
+  internalBaselayerMaps,
+  activeBaselayerId,
+  isFlipped,
+  onBaselayerChange,
+}: BaselayerSectionsProps) {
+  return (
+    <>
+      {internalBaselayerMaps?.map((map, index) => (
+        <CollapsibleSection summary={map.name} defaultOpen={index === 0}>
+          {map.bands.map((band) => (
+            <div className="input-container" key={band.map_id + '-' + band.id}>
+              <input
+                type="radio"
+                id={String(band.id)}
+                value={band.id}
+                name="baselayer"
+                checked={band.id === activeBaselayerId}
+                onChange={() =>
+                  onBaselayerChange(
+                    String(band.id),
+                    String(band.map_id),
+                    'layerMenu'
+                  )
+                }
+              />
+              <label htmlFor={String(band.id)}>{makeLayerName(band)}</label>
+            </div>
+          ))}
+        </CollapsibleSection>
+      ))}
+      {
+        <CollapsibleSection summary="Comparison maps" defaultOpen={true}>
+          {EXTERNAL_BASELAYERS.map((bl) => (
+            <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={() =>
+                  onBaselayerChange(bl.id, undefined, 'layerMenu')
+                }
+                disabled={bl.disabledState(isFlipped)}
+              />
+              <label htmlFor={bl.id}>{bl.name}</label>
+            </div>
+          ))}
+        </CollapsibleSection>
+      }
+    </>
+  );
+}

src/components/CollapsibleSection.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+type Props = {
+  summary: ReactNode;
+  children: ReactNode;
+  defaultOpen: boolean;
+};
+
+export function CollapsibleSection({ summary, defaultOpen, children }: Props) {
+  return (
+    <details open={defaultOpen}>
+      <summary>{summary}</summary>
+      {children}
+    </details>
+  );
+}

src/components/LayerSelector.tsx

@@ -1,18 +1,17 @@
 import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { BandWithCmapValues, SourceList } from '../types/maps';
-import { makeLayerName } from '../utils/layerUtils';
+import { MapMetadataResponseWithClientBand, SourceList } from '../types/maps';
 import { LayersIcon } from './icons/LayersIcon';
 import './styles/layer-selector.css';
 import { MapProps } from './OpenLayersMap';
-import { EXTERNAL_BASELAYERS } from '../configs/mapSettings';
 import {
   BaselayerHistoryNavigation,
   BaselayerHistoryNavigationProps,
 } from './BaselayerHistoryNavigation';
 import { LockClosedIcon } from './icons/LockClosedIcon';
 import { LockOpenIcon } from './icons/LockOpenIcon';
+import { BaselayerSections } from './BaselayerSections';
 
-interface Props
+export interface LayerSelectorProps
   extends Omit<
     MapProps & BaselayerHistoryNavigationProps,
     | 'baselayersState'
@@ -24,17 +23,18 @@ interface Props
   > {
   onBaselayerChange: (
     selectedBaselayerId: string,
+    selectedMapId: string | undefined,
     context: 'layerMenu' | 'goBack' | 'goForward',
     flipped?: boolean
   ) => void;
   activeBaselayerId?: number | string;
   sourceLists: SourceList[];
   isFlipped: boolean;
-  internalBaselayers: BandWithCmapValues[] | undefined;
+  internalBaselayerMaps: MapMetadataResponseWithClientBand[] | undefined;
 }
 
 export function LayerSelector({
-  internalBaselayers,
+  internalBaselayerMaps,
   onBaselayerChange,
   activeBaselayerId,
   sourceLists,
@@ -48,7 +48,7 @@ export function LayerSelector({
   disableGoForward,
   goBack,
   goForward,
-}: Props) {
+}: LayerSelectorProps) {
   const menuRef = useRef<HTMLDivElement | null>(null);
   const [lockMenu, setLockMenu] = useState(false);
   const previousLockMenuHandlerRef = useRef<(e: KeyboardEvent) => void>(null);
@@ -133,41 +133,12 @@ export function LayerSelector({
         </div>
         <fieldset>
           <legend>Baselayers</legend>
-          {internalBaselayers?.map((band) => (
-            <div className="input-container" key={band.map_id + '-' + band.id}>
-              <input
-                type="radio"
-                id={String(band.id)}
-                value={band.id}
-                name="baselayer"
-                checked={band.id === activeBaselayerId}
-                onChange={(e) => onBaselayerChange(e.target.value, 'layerMenu')}
-              />
-              <label htmlFor={String(band.id)}>{makeLayerName(band)}</label>
-            </div>
-          ))}
-          {EXTERNAL_BASELAYERS.map((bl) => (
-            <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, 'layerMenu')}
-                disabled={bl.disabledState(isFlipped)}
-              />
-              <label htmlFor={bl.id}>{bl.name}</label>
-            </div>
-          ))}
+          <BaselayerSections
+            internalBaselayerMaps={internalBaselayerMaps}
+            activeBaselayerId={activeBaselayerId}
+            isFlipped={isFlipped}
+            onBaselayerChange={onBaselayerChange}
+          />
         </fieldset>
         {sourceLists.length ? (
           <fieldset>