Layer selector now has subtitles

src/components/ControlBarActions.tsx

@@ -65,6 +65,8 @@ interface ControlBarActionsProps extends WithStyles<typeof styles>, WithLocale {
   allowRefresh?: boolean;
   updateResources: () => void;
   compact: boolean;
+  layerTitles: Record<keyof LayerVisibilities, string>;
+  layerSubtitles: Record<keyof LayerVisibilities, string>;
   layerVisibilities: LayerVisibilities;
   setLayerVisibility: (
     layerId: keyof LayerVisibilities,
@@ -76,6 +78,7 @@ interface ControlBarActionsProps extends WithStyles<typeof styles>, WithLocale {
 
 const _ControlBarActions: React.FC<ControlBarActionsProps> = ({
   classes,
+  locale,
   visible,
   volumeCardOpen,
   showVolumeCard,
@@ -86,6 +89,8 @@ const _ControlBarActions: React.FC<ControlBarActionsProps> = ({
   allowRefresh,
   updateResources,
   compact,
+  layerTitles,
+  layerSubtitles,
   layerVisibilities,
   setLayerVisibility,
   variableCompareMode,
@@ -99,7 +104,10 @@ const _ControlBarActions: React.FC<ControlBarActionsProps> = ({
 
   const layerSelect = (
     <LayerSelect
+      locale={locale}
       openDialog={openDialog}
+      layerTitles={layerTitles}
+      layerSubtitles={layerSubtitles}
       layerVisibilities={layerVisibilities}
       setLayerVisibility={setLayerVisibility}
       variableCompareMode={variableCompareMode}

src/components/LayerMenu.tsx

@@ -2,7 +2,7 @@ import MenuItem from "@mui/material/MenuItem";
 import ListItemText from "@mui/material/ListItemText";
 import Menu from "@mui/material/Menu";
 
-import { getLayerLabel, LayerDefinition } from "@/model/layerDefinition";
+import { getLayerTitle, LayerDefinition } from "@/model/layerDefinition";
 
 interface LayerMenuProps {
   anchorElement: Element | null;
@@ -36,7 +36,7 @@ const LayerMenu = ({
             }
             dense
           >
-            <ListItemText primary={getLayerLabel(layer)} />
+            <ListItemText primary={getLayerTitle(layer)} />
           </MenuItem>
         ))}
     </Menu>

src/components/LayerSelect.tsx

@@ -47,6 +47,8 @@ const styles = (_theme: Theme) => createStyles({});
 
 interface LayerSelectProps extends WithStyles<typeof styles>, WithLocale {
   openDialog: (dialogId: string) => void;
+  layerTitles: Record<keyof LayerVisibilities, string>;
+  layerSubtitles: Record<keyof LayerVisibilities, string>;
   layerVisibilities: LayerVisibilities;
   setLayerVisibility: (
     layerId: keyof LayerVisibilities,
@@ -100,7 +102,7 @@ const _LayerSelect: React.FC<LayerSelectProps> = (props) => {
             <LayerSelectItem layerId="overlay" {...layerSelectProps} />
             <Divider />
             <SelectableMenuItem
-              label={i18n.get("Compare Mode (Swipe)")}
+              title={i18n.get("Compare Mode (Swipe)")}
               selected={variableCompareMode}
               onClick={() => setVariableCompareMode(!variableCompareMode)}
             />

src/components/LayerSelectItem.tsx

@@ -26,19 +26,10 @@ import i18n from "@/i18n";
 import { LayerVisibilities } from "@/states/controlState";
 import SelectableMenuItem from "@/components/SelectableMenuItem";
 
-const layerLabels: Record<keyof LayerVisibilities, string> = {
-  baseMap: "Base Map",
-  datasetRgb: "Dataset RGB",
-  datasetVariable2: "Dataset Variable 2",
-  datasetVariable: "Dataset Variable",
-  datasetBoundary: "Dataset Boundary",
-  datasetPlaces: "Dataset Places",
-  userPlaces: "User Places",
-  overlay: "Overlay",
-};
-
 interface LayerSelectItemProps {
   layerId: keyof LayerVisibilities;
+  layerTitles: Record<keyof LayerVisibilities, string>;
+  layerSubtitles: Record<keyof LayerVisibilities, string>;
   layerVisibilities: LayerVisibilities;
   setLayerVisibility: (
     layerId: keyof LayerVisibilities,
@@ -48,13 +39,16 @@ interface LayerSelectItemProps {
 
 export default function LayerSelectItem({
   layerId,
+  layerTitles,
+  layerSubtitles,
   layerVisibilities,
   setLayerVisibility,
 }: LayerSelectItemProps) {
   const visible = !!layerVisibilities[layerId];
   return (
     <SelectableMenuItem
-      label={i18n.get(layerLabels[layerId])}
+      title={i18n.get(layerTitles[layerId])}
+      subtitle={layerSubtitles[layerId]}
       selected={visible}
       onClick={() => setLayerVisibility(layerId, !visible)}
     />

src/components/SelectableMenuItem.tsx

@@ -28,13 +28,15 @@ import ListItemText from "@mui/material/ListItemText";
 import ListItemIcon from "@mui/material/ListItemIcon";
 
 interface SelectableMenuItemProps {
-  label: string;
+  title: string;
+  subtitle?: string;
   selected: boolean;
   onClick: () => void;
 }
 
 export default function SelectableMenuItem({
-  label,
+  title,
+  subtitle,
   selected,
   onClick,
 }: SelectableMenuItemProps) {
@@ -43,11 +45,11 @@ export default function SelectableMenuItem({
       <ListItemIcon>
         <Check />
       </ListItemIcon>
-      {label}
+      <ListItemText primary={title} secondary={subtitle} />
     </MenuItem>
   ) : (
     <MenuItem onClick={onClick}>
-      <ListItemText inset>{label}</ListItemText>
+      <ListItemText inset primary={title} secondary={subtitle} />
     </MenuItem>
   );
 }

src/components/SettingsDialog.tsx

@@ -50,7 +50,7 @@ import RadioSetting from "./RadioSetting";
 import LayerMenu from "@/components/LayerMenu";
 import {
   findLayer,
-  getLayerLabel,
+  getLayerTitle,
   LayerDefinition,
 } from "@/model/layerDefinition";
 
@@ -209,7 +209,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
   };
 
   const baseMapLayer = findLayer(baseMapLayers, settings.selectedBaseMapId);
-  const baseMapLabel = getLayerLabel(baseMapLayer);
+  const baseMapLabel = getLayerTitle(baseMapLayer);
 
   function handleOverlayMenuOpen(event: React.MouseEvent) {
     setOverlayMenuAnchor(event.currentTarget);
@@ -225,7 +225,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
   };
 
   const overlayLayer = findLayer(overlayLayers, settings.selectedOverlayId);
-  const overlayLabel = getLayerLabel(overlayLayer);
+  const overlayLabel = getLayerTitle(overlayLayer);
 
   return (
     <div>

src/connected/ControlBarActions.tsx

@@ -35,7 +35,11 @@ import {
 } from "@/actions/controlActions";
 import { Config } from "@/config";
 import { updateResources } from "@/actions/dataActions";
-import { layerVisibilitiesSelector } from "@/selectors/controlSelectors";
+import {
+  layerSubtitlesSelector,
+  layerTitlesSelector,
+  layerVisibilitiesSelector,
+} from "@/selectors/controlSelectors";
 
 const mapStateToProps = (state: AppState) => {
   return {
@@ -48,6 +52,8 @@ const mapStateToProps = (state: AppState) => {
     timeSeriesGroups: state.dataState.timeSeriesGroups,
     compact: Config.instance.branding.compact,
     allowRefresh: Config.instance.branding.allowRefresh,
+    layerTitles: layerTitlesSelector(state),
+    layerSubtitles: layerSubtitlesSelector(state),
     layerVisibilities: layerVisibilitiesSelector(state),
     variableCompareMode: state.controlState.variableCompareMode,
   };

src/model/layerDefinition.ts

@@ -11,7 +11,7 @@ export interface LayerDefinition {
   wms?: { layerName: string; styleName?: string };
 }
 
-export function getLayerLabel(layerDef: LayerDefinition | null): string {
+export function getLayerTitle(layerDef: LayerDefinition | null): string {
   return layerDef ? `${layerDef.group}: ${layerDef.title}` : "-";
 }
 

src/selectors/controlSelectors.tsx

@@ -76,7 +76,11 @@ import {
   userServersSelector,
 } from "./dataSelectors";
 import { makeRequestUrl } from "@/api/callApi";
-import { MAP_OBJECTS, ViewMode } from "@/states/controlState";
+import {
+  LayerVisibilities,
+  MAP_OBJECTS,
+  ViewMode,
+} from "@/states/controlState";
 import { GEOGRAPHIC_CRS, WEB_MERCATOR_CRS } from "@/model/proj";
 import {
   ColorBar,
@@ -93,6 +97,7 @@ import {
   defaultBaseMapLayers,
   defaultOverlayLayers,
   findLayer,
+  getLayerTitle,
   LayerDefinition,
 } from "@/model/layerDefinition";
 
@@ -1149,3 +1154,62 @@ export const overlayLayerSelector = createSelector(
   () => 20,
   getLayerFromLayerDefinition,
 );
+
+const _getLayerTitle = (layers: LayerDefinition[], layerId: string | null) => {
+  const layer = findLayer(layers, layerId);
+  return layer ? getLayerTitle(layer) : null;
+};
+
+export const selectedBaseMapTitleSelector = createSelector(
+  baseMapsSelector,
+  selectedBaseMapIdSelector,
+  _getLayerTitle,
+);
+
+export const selectedOverlayTitleSelector = createSelector(
+  overlaysSelector,
+  selectedOverlayIdSelector,
+  _getLayerTitle,
+);
+
+export const layerTitlesSelector = (
+  _state: AppState,
+): Record<keyof LayerVisibilities, string> => ({
+  baseMap: "Base Map",
+  datasetRgb: "Dataset RGB",
+  datasetVariable2: "Dataset Variable 2",
+  datasetVariable: "Dataset Variable",
+  datasetBoundary: "Dataset Boundary",
+  datasetPlaces: "Dataset Places",
+  userPlaces: "User Places",
+  overlay: "Overlay",
+});
+
+export const layerSubtitlesSelector = createSelector(
+  selectedBaseMapTitleSelector,
+  selectedOverlayTitleSelector,
+  selectedDatasetIdSelector,
+  selectedVariableNameSelector,
+  selectedDataset2IdSelector,
+  selectedVariable2NameSelector,
+  (
+    baseMapTitle,
+    overlayTitle,
+    datasetId,
+    variableName,
+    dataset2Id,
+    variable2Name,
+  ) =>
+    ({
+      baseMap: baseMapTitle || undefined,
+      overlay: overlayTitle || undefined,
+      datasetVariable:
+        datasetId && variableName
+          ? `${datasetId} / ${variableName}`
+          : undefined,
+      datasetVariable2:
+        dataset2Id && variable2Name
+          ? `${dataset2Id} / ${variable2Name}`
+          : undefined,
+    }) as Record<keyof LayerVisibilities, string>,
+);