Update layer name and add tooltip

src/components/BaselayerSections.tsx

@@ -1,6 +1,5 @@
 import { LayerSelectorProps } from './LayerSelector';
 import { CollapsibleSection } from './CollapsibleSection';
-import { makeLayerName } from '../utils/layerUtils';
 import { EXTERNAL_BASELAYERS } from '../configs/mapSettings';
 
 type BaselayerSectionsProps = {
@@ -23,6 +22,7 @@ export function BaselayerSections({
           key={'section-internal-map-' + map.id}
           summary={map.name}
           defaultOpen={index === 0}
+          tooltip={map.description}
         >
           {map.bands.map((band) => (
             <div className="input-container" key={band.map_id + '-' + band.id}>
@@ -40,7 +40,7 @@ export function BaselayerSections({
                   )
                 }
               />
-              <label htmlFor={String(band.id)}>{makeLayerName(band)}</label>
+              <label htmlFor={String(band.id)}>{band.band_display_name}</label>
             </div>
           ))}
         </CollapsibleSection>

src/components/CollapsibleSection.tsx

@@ -4,12 +4,18 @@ type Props = {
   summary: ReactNode;
   children: ReactNode;
   defaultOpen: boolean;
+  tooltip?: string;
 };
 
-export function CollapsibleSection({ summary, defaultOpen, children }: Props) {
+export function CollapsibleSection({
+  summary,
+  defaultOpen,
+  children,
+  tooltip,
+}: Props) {
   return (
     <details open={defaultOpen}>
-      <summary>{summary}</summary>
+      <summary title={tooltip}>{summary}</summary>
       {children}
     </details>
   );

src/types/maps.ts

@@ -13,6 +13,7 @@ export type BandResponseBase = {
   id: number;
   map_id: number;
   map_name: string;
+  band_display_name: string;
   units: string;
   tiles_available: boolean;
   tile_size: number;

src/utils/layerUtils.ts

@@ -1,25 +1,11 @@
 import { Feature } from 'ol';
-import { BandWithCmapValues, BoxExtent } from '../types/maps';
+import { BoxExtent } from '../types/maps';
 import { Source } from '../types/maps';
 import { NUMBER_OF_FIXED_COORDINATE_DECIMALS } from '../configs/mapSettings';
 import { Point } from 'ol/geom';
 import { Fill, Stroke, Style } from 'ol/style';
 import { FeatureLike } from 'ol/Feature';
 
-/**
- * A utility function to format a layer's name.
- * @param band The band object
- * @returns A string of map_name + stokes_parameter + quantity, where quantity
- *  and stokes_parameter are conditionally rendered based on their truthiness
- */
-export function makeLayerName(band: BandWithCmapValues) {
-  return (
-    band.map_name +
-    (band.stokes_parameter ? ` ${band.stokes_parameter}` : '') +
-    (band.quantity ? ` ${band.quantity}` : '')
-  );
-}
-
 export function handleSelectChange(
   event: React.ChangeEvent<HTMLInputElement>,
   setter: (value: React.SetStateAction<number[]>) => void