fixing legend overview

packages/geoview-core/src/core/components/footer-bar/footer-bar-style.ts

@@ -58,4 +58,4 @@ export const sxClassesRotationButton = {
     height: '1.5em',
     color: 'primary.light',
   },
-};
+};

packages/geoview-core/src/core/components/legend-2/legend-overview/legend-layer.tsx

@@ -1,89 +1,102 @@
-
-import { useTranslation } from 'react-i18next';
-import { TypeDisplayLanguage, sxClasses } from '@/app';
-import { Box, ListItem, Tooltip, ListItemText, ListItemIcon, IconButton, KeyboardArrowDownIcon, Collapse, List, KeyboardArrowUpIcon } from '@/ui';
-import { TypeLegendLayer } from '../types';
-import { useState } from 'react';
-import { getSxClasses } from './legend-overview-styles';
-import { useTheme } from '@mui/material';
-
-interface LegendLayerProps {
-  layer: TypeLegendLayer
-}
-
-export function LegendLayer(props: LegendLayerProps): JSX.Element {
-  const { layer } = props;
-  const { t, i18n } = useTranslation<string>();
-  const layerName = layer.layerName[i18n.language as TypeDisplayLanguage];
-  const theme = useTheme();
-  const sxClasses = getSxClasses(theme);
-  const [isGroupOpen, setGroupOpen] = useState(true);
-
-
-  /**
-   * Handle expand/shrink of layer groups.
-   */
-  const handleExpandGroupClick = () => {
-    setGroupOpen(!isGroupOpen);
-  };
-
-
-  //renders the layers children, if any
-  function renderChildren() {
-    if(!layer.children?.length) { return null; }
-
-    return (
-      <List sx={{ width: '100%', padding: '20px', margin:'20px 0px' }}>
-        {layer.children.map((item) => <LegendLayer layer={item} /> )}
-      </List>
-    );
-  }
-
-  //renders the layers items if any
-  function renderItems() {
-    if(!layer.children?.length) { return null; }
-    return (
-      <List sx={{ width: '100%' }}>
-        {layer.children.map((item) => <LegendLayer layer={item} /> )}
-      </List>
-    );
-  }
-
-  function renderArrowButtons() {
-    if(layer.children?.length || layer.items?.length) {
-      return (
-        <ListItemIcon style={{ justifyContent: 'right' }}>
-          <IconButton color="primary">
-            {isGroupOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowUpIcon />}
-          </IconButton>
-        </ListItemIcon>
-      )
-    } else {
-      return null;
-    }
-  }
-
-  function renderCollapsible() {
-    if(!(layer.children?.length || layer.items?.length)) {
-      return null;
-    }
-
-    return (
-      <Collapse in={isGroupOpen} sx={sxClasses.collapsibleContainer}  timeout="auto">
-        {renderChildren()}
-      </Collapse>
-    )
-  }
-
-  return (
-    <Box>
-      <ListItem key={layerName} sx={sxClasses.legendLayerListItem} divider onClick={handleExpandGroupClick}>
-        <Tooltip title={layerName} placement="top" enterDelay={1000}>
-          <ListItemText primary={layerName} />
-        </Tooltip>
-        {renderArrowButtons()}
-      </ListItem>
-      {renderCollapsible()}
-    </Box>
-  );
-}
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { useTheme } from '@mui/material';
+import { TypeDisplayLanguage } from '@/app';
+import {
+  Box,
+  ListItem,
+  Tooltip,
+  ListItemText,
+  ListItemIcon,
+  IconButton,
+  KeyboardArrowDownIcon,
+  Collapse,
+  List,
+  KeyboardArrowUpIcon,
+} from '@/ui';
+import { TypeLegendLayer } from '../types';
+import { getSxClasses } from './legend-overview-styles';
+
+interface LegendLayerProps {
+  layer: TypeLegendLayer;
+}
+
+export function LegendLayer(props: LegendLayerProps): JSX.Element {
+  const { layer } = props;
+  const { i18n } = useTranslation<string>();
+  const layerName = layer.layerName[i18n.language as TypeDisplayLanguage];
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+  const [isGroupOpen, setGroupOpen] = useState(true);
+
+  /**
+   * Handle expand/shrink of layer groups.
+   */
+  const handleExpandGroupClick = () => {
+    setGroupOpen(!isGroupOpen);
+  };
+
+  // renders the layers children, if any
+  function renderChildren() {
+    if (!layer.children?.length) {
+      return null;
+    }
+
+    return (
+      <List sx={{ width: '100%', padding: '20px', margin: '20px 0px' }}>
+        {layer.children.map((item) => (
+          <LegendLayer layer={item} key={item.layerPath} />
+        ))}
+      </List>
+    );
+  }
+
+  // renders the layers items if any
+  /* function renderItems() {
+    if (!layer.children?.length) {
+      return null;
+    }
+    return (
+      <List sx={{ width: '100%' }}>
+        {layer.children.map((item) => (
+          <LegendLayer layer={item} key={item.layerPath} />
+        ))}
+      </List>
+    );
+  } */
+
+  function renderArrowButtons() {
+    if (layer.children?.length || layer.items?.length) {
+      return (
+        <ListItemIcon style={{ justifyContent: 'right' }}>
+          <IconButton color="primary">{isGroupOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowUpIcon />}</IconButton>
+        </ListItemIcon>
+      );
+    }
+    return null;
+  }
+
+  function renderCollapsible() {
+    if (!(layer.children?.length || layer.items?.length)) {
+      return null;
+    }
+
+    return (
+      <Collapse in={isGroupOpen} sx={sxClasses.collapsibleContainer} timeout="auto">
+        {renderChildren()}
+      </Collapse>
+    );
+  }
+
+  return (
+    <Box>
+      <ListItem key={layerName} sx={sxClasses.legendLayerListItem} divider onClick={handleExpandGroupClick}>
+        <Tooltip title={layerName} placement="top" enterDelay={1000}>
+          <ListItemText primary={layerName} />
+        </Tooltip>
+        {renderArrowButtons()}
+      </ListItem>
+      {renderCollapsible()}
+    </Box>
+  );
+}

packages/geoview-core/src/core/components/legend-2/legend-overview/legend-overview-styles.ts

@@ -1,27 +1,27 @@
-import { Theme } from '@mui/material/styles';
-
-export const getSxClasses = (theme: Theme) => ({
-  container: {
-    padding: '10px 0px 20px 0px',
-  },
-  title: {
-    textAlign: 'left',
-    font: theme.footerPanel.titleFont,
-    fontSize: '20px',
-  },
-  subtitle: {
-    font: theme.footerPanel.titleFont,
-    fontWeight: 'normal',
-    fontSize: '0.9em',
-    textAlign: 'left',
-    marginBottom: '15px'
-  },
-  legendLayerListItem: {
-    padding: "6px 4px"
-  },
-  collapsibleContainer: {
-    width: '100%',
-    padding: '10px 0',
-    margin: '0px 10px'
-  }
-});
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  container: {
+    padding: '10px 0px 20px 0px',
+  },
+  title: {
+    textAlign: 'left',
+    font: theme.footerPanel.titleFont,
+    fontSize: '20px',
+  },
+  subtitle: {
+    font: theme.footerPanel.titleFont,
+    fontWeight: 'normal',
+    fontSize: '0.9em',
+    textAlign: 'left',
+    marginBottom: '15px',
+  },
+  legendLayerListItem: {
+    padding: '6px 4px',
+  },
+  collapsibleContainer: {
+    width: '100%',
+    padding: '10px 0',
+    margin: '0px 10px',
+  },
+});

packages/geoview-core/src/core/components/legend-2/legend-overview/legend-overview.tsx

@@ -14,18 +14,19 @@ export function LegendOverview(props: LegendOverviewProps): JSX.Element {
   const { mapId } = props;
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
-  const { t, i18n } = useTranslation<string>();
+  const { t } = useTranslation<string>();
   const store = getGeoViewStore(mapId);
   const legendLayers = useStore(store, (state) => state.legendState.legendLayers);
 
   const numItems = 33;
   /* START fake store data here */
 
-
   function renderLegendLayersList() {
     return (
       <List sx={{ width: '100%', padding: '20px' }}>
-        {legendLayers.map((item) => <LegendLayer layer={item} /> )}
+        {legendLayers.map((item) => (
+          <LegendLayer layer={item} key={item.layerPath} />
+        ))}
       </List>
     );
   }