From 2121cc8f4b6d3ad8eb096ef5b4e2b64512b15c07 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Thu, 16 May 2024 16:23:17 -0400
Subject: [PATCH 1/9] move style to style file

---
 .../hover-tooltip/hover-tooltip-styles.ts     | 27 +++++++++++++++++
 .../hover-tooltip/hover-tooltip.tsx           | 29 ++-----------------
 2 files changed, 30 insertions(+), 26 deletions(-)
 create mode 100644 packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts

diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts
new file mode 100644
index 00000000000..83062056861
--- /dev/null
+++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts
@@ -0,0 +1,27 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme): any => ({
+  tooltipItem: {
+    color: theme.palette.geoViewColor.bgColor.light[900],
+    background: theme.palette.geoViewColor.bgColor.dark[900],
+    opacity: 0.9,
+    fontSize: theme.palette.geoViewFontSize.default,
+    padding: '3px 8px',
+    borderRadius: '5px',
+    textAlign: 'center',
+    maxWidth: '350px',
+    maxHeight: '60px',
+    position: 'absolute',
+    display: 'flex',
+    top: '-5px',
+    left: '3px',
+  },
+  tooltipText: {
+    fontSize: theme.palette.geoViewFontSize.default,
+    color: theme.palette.geoViewColor.bgColor.light[900],
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    padding: '5px',
+  }
+});
\ No newline at end of file
diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
index 439886def25..d1e231abf31 100644
--- a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
+++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
@@ -5,6 +5,7 @@ import { useTheme, Theme } from '@mui/material/styles';
 import { Box } from '@/ui';
 import { logger } from '@/core/utils/logger';
 import { useMapHoverFeatureInfo, useMapPointerPosition } from '@/core/stores/store-interface-and-intial-values/map-state';
+import { getSxClasses } from './hover-tooltip-styles';
 
 /**
  * Hover tooltip component to show name field information on hover
@@ -21,38 +22,14 @@ export function HoverTooltip(): JSX.Element {
     iconImage: React.CSSProperties;
   } = useTheme();
 
-  const sxClasses = {
-    tooltipItem: {
-      color: theme.palette.geoViewColor.bgColor.light[900],
-      background: theme.palette.geoViewColor.bgColor.dark[900],
-      opacity: 0.9,
-      fontSize: theme.palette.geoViewFontSize.default,
-      padding: '3px 8px',
-      borderRadius: '5px',
-      textAlign: 'center',
-      maxWidth: '350px',
-      maxHeight: '60px',
-      position: 'absolute',
-      display: 'flex',
-      top: '-5px',
-      left: '3px',
-    },
-    tooltipText: {
-      fontSize: theme.palette.geoViewFontSize.default,
-      color: theme.palette.geoViewColor.bgColor.light[900],
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      padding: '5px',
-    },
-  };
-
   // internal component state
   const [pixel, setPixel] = useState<[number, number]>([0, 0]);
   const [tooltipValue, setTooltipValue] = useState<string>('');
   const [tooltipIcon, setTooltipIcon] = useState<string>('');
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
 
+  const sxClasses = getSxClasses(theme);
+
   // store state
   const hoverFeatureInfo = useMapHoverFeatureInfo();
   const pointerPosition = useMapPointerPosition();

From 94a58a2900185de8e1f7ca93fb06dc5df5465644 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Thu, 16 May 2024 16:28:07 -0400
Subject: [PATCH 2/9] move style to style file

---
 .../src/core/components/hover-tooltip/hover-tooltip.tsx     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
index d1e231abf31..fc631ffdfd1 100644
--- a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
+++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
@@ -12,7 +12,7 @@ import { getSxClasses } from './hover-tooltip-styles';
  *
  * @returns {JSX.Element} the hover tooltip component
  */
-export function HoverTooltip(): JSX.Element {
+export function HoverTooltip() {
   // Log, commented too annoying
   // logger.logTraceRender('components/hover-tooltip/hover-tooltip');
 
@@ -58,6 +58,10 @@ export function HoverTooltip(): JSX.Element {
     if (pointerPosition !== undefined) setPixel(pointerPosition.pixel as [number, number]);
   }, [pointerPosition]);
 
+  if(showTooltip && !tooltipValue) {
+    return null;
+  }
+
   return (
     <Box
       sx={sxClasses.tooltipItem}

From aee930997040e15bcabb80075bf74ef87a0808c3 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Thu, 16 May 2024 16:44:04 -0400
Subject: [PATCH 3/9] fix icon stack

---
 .../layer-icon-style.ts}                      | 134 +++++++++---------
 .../src/core/components/common/layer-icon.tsx |  74 +++++++++-
 .../hover-tooltip/hover-tooltip-styles.ts     |   2 +
 .../src/core/components/icon-stack/helper.ts  |  69 ---------
 .../core/components/icon-stack/icon-stack.tsx |  73 ----------
 .../geoview-core/src/core/components/index.ts |   1 -
 6 files changed, 141 insertions(+), 212 deletions(-)
 rename packages/geoview-core/src/core/components/{icon-stack/icon-stack-style.ts => common/layer-icon-style.ts} (95%)
 delete mode 100644 packages/geoview-core/src/core/components/icon-stack/helper.ts
 delete mode 100644 packages/geoview-core/src/core/components/icon-stack/icon-stack.tsx

diff --git a/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts b/packages/geoview-core/src/core/components/common/layer-icon-style.ts
similarity index 95%
rename from packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts
rename to packages/geoview-core/src/core/components/common/layer-icon-style.ts
index cbf1552ed5b..57bbe5897a9 100644
--- a/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts
+++ b/packages/geoview-core/src/core/components/common/layer-icon-style.ts
@@ -1,67 +1,67 @@
-import { Theme } from '@mui/material/styles';
-
-// ? I doubt we want to define an explicit type for style properties?
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getSxClasses = (theme: Theme): any => ({
-  legendIconTransparent: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 24,
-    height: 24,
-  },
-  iconPreviewHoverable: {
-    width: 24,
-    height: 24,
-    position: 'absolute',
-    left: -3,
-    top: -2,
-    padding: 0,
-    borderRadius: 0,
-    boxShadow: 2,
-    transition: 'transform .3s ease-in-out',
-    '&:hover': {
-      transform: 'rotate(-18deg) translateX(-8px)',
-    },
-  },
-  iconPreviewStacked: {
-    width: 24,
-    height: 24,
-    padding: 0,
-    borderRadius: 0,
-    border: '1px solid',
-    borderColor: theme.palette.geoViewColor.bgColor.dark[600],
-    boxShadow: 2,
-    backgroundColor: theme.palette.geoViewColor.white,
-  },
-  maxIconImg: {
-    maxWidth: 24,
-    maxHeight: 24,
-  },
-  legendIcon: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 24,
-    height: 24,
-    backgroundColor: theme.palette.geoViewColor.white,
-    border: '1px solid',
-    borderColor: theme.palette.geoViewColor.bgColor.dark[600],
-  },
-  stackIconsBox: {
-    width: 24,
-    height: 24,
-    position: 'relative',
-    '&:focus': {
-      outlineColor: theme.palette.geoViewColor.bgColor.dark[600],
-    },
-  },
-  iconPreview: {
-    padding: 0,
-    borderRadius: 0,
-    boxShadow: 2,
-    '&:focus': {
-      border: 'revert',
-    },
-  },
-});
+import { Theme } from '@mui/material/styles';
+
+// ? I doubt we want to define an explicit type for style properties?
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getSxClasses = (theme: Theme): any => ({
+  legendIconTransparent: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 24,
+    height: 24,
+  },
+  iconPreviewHoverable: {
+    width: 24,
+    height: 24,
+    position: 'absolute',
+    left: -3,
+    top: -2,
+    padding: 0,
+    borderRadius: 0,
+    boxShadow: 2,
+    transition: 'transform .3s ease-in-out',
+    '&:hover': {
+      transform: 'rotate(-18deg) translateX(-8px)',
+    },
+  },
+  iconPreviewStacked: {
+    width: 24,
+    height: 24,
+    padding: 0,
+    borderRadius: 0,
+    border: '1px solid',
+    borderColor: theme.palette.geoViewColor.bgColor.dark[600],
+    boxShadow: 2,
+    backgroundColor: theme.palette.geoViewColor.white,
+  },
+  maxIconImg: {
+    maxWidth: 24,
+    maxHeight: 24,
+  },
+  legendIcon: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 24,
+    height: 24,
+    backgroundColor: theme.palette.geoViewColor.white,
+    border: '1px solid',
+    borderColor: theme.palette.geoViewColor.bgColor.dark[600],
+  },
+  stackIconsBox: {
+    width: 24,
+    height: 24,
+    position: 'relative',
+    '&:focus': {
+      outlineColor: theme.palette.geoViewColor.bgColor.dark[600],
+    },
+  },
+  iconPreview: {
+    padding: 0,
+    borderRadius: 0,
+    boxShadow: 2,
+    '&:focus': {
+      border: 'revert',
+    },
+  },
+});
diff --git a/packages/geoview-core/src/core/components/common/layer-icon.tsx b/packages/geoview-core/src/core/components/common/layer-icon.tsx
index 596737cf022..e965eda3b85 100644
--- a/packages/geoview-core/src/core/components/common/layer-icon.tsx
+++ b/packages/geoview-core/src/core/components/common/layer-icon.tsx
@@ -1,7 +1,77 @@
-import { Box, CircularProgressBase, ErrorIcon, GroupWorkOutlinedIcon } from '@/ui';
+import { Box, CircularProgressBase, ErrorIcon, GroupWorkOutlinedIcon, IconButton, BrowserNotSupportedIcon } from '@/ui';
 import { TypeLegendLayer } from '@/core/components/layers/types';
-import { IconStack } from '@/core/components/icon-stack/icon-stack';
+import { getSxClasses } from './layer-icon-style';
+import { useIconLayerSet } from '@/core/stores/store-interface-and-intial-values/layer-state';
 import { LayerListEntry } from '.';
+import { useTheme } from '@mui/material/styles';
+
+export interface TypeIconStackProps {
+  layerPath: string;
+  onIconClick?: () => void;
+  onStackIconClick?: (e: React.KeyboardEvent<HTMLElement>) => void;
+}
+
+/**
+ * Icon Stack to represent layer icons
+ *
+ * @param {string} layerPath
+ * @returns {JSX.Element} the icon stack item
+ */
+function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIconStackProps): JSX.Element | null {
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+
+  const iconData = useIconLayerSet(layerPath);
+
+  const iconImage: string = iconData && iconData.length > 0 ? iconData[0] : '';
+  const iconImageStacked: string = iconData && iconData.length > 1 ? iconData[1] : '';
+  const numOfIcons: number | undefined = iconData?.length;
+
+  const iconStackContent = (): JSX.Element | null => {
+    // TODO: refactor - try to remove the nested ternary to simplify reading
+    // eslint-disable-next-line no-nested-ternary
+    return numOfIcons === 1 ? (
+      <IconButton
+        tabIndex={-1}
+        sx={sxClasses.iconPreview}
+        color="primary"
+        size="small"
+        onClick={iconImage === 'no data' ? undefined : onIconClick}
+        aria-hidden="true"
+      >
+        {iconImage === 'no data' ? (
+          <BrowserNotSupportedIcon />
+        ) : (
+          <Box sx={sxClasses.legendIcon}>
+            <img alt="icon" src={iconImage} style={sxClasses.maxIconImg} />
+          </Box>
+        )}
+      </IconButton>
+    ) : // eslint-disable-next-line no-nested-ternary
+    numOfIcons && numOfIcons > 0 ? (
+      <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyPress={(e) => onStackIconClick?.(e)} aria-hidden="true">
+        <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1} aria-hidden="true">
+          <Box sx={sxClasses.legendIconTransparent}>
+            {iconImageStacked && <img alt="icon" src={iconImageStacked} style={sxClasses.maxIconImg} />}
+          </Box>
+        </IconButton>
+        <IconButton sx={sxClasses.iconPreviewHoverable} color="primary" size="small" tabIndex={-1} aria-hidden="true">
+          <Box sx={sxClasses.legendIcon}>{iconImage && <img alt="icon" src={iconImage} style={sxClasses.maxIconImg} />}</Box>
+        </IconButton>
+      </Box>
+    ) : layerPath !== '' && iconData.length === 0 && layerPath.charAt(0) !== '!' ? (
+      <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyPress={(e) => onStackIconClick?.(e)} aria-hidden="true">
+        <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1} aria-hidden="true">
+          <Box sx={sxClasses.legendIconTransparent}>
+            <BrowserNotSupportedIcon />
+          </Box>
+        </IconButton>
+      </Box>
+    ) : null;
+  };
+
+  return iconStackContent();
+}
 
 interface LayerIconProps {
   layer: TypeLegendLayer | LayerListEntry;
diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts
index 83062056861..633f2e37484 100644
--- a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts
+++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts
@@ -1,5 +1,7 @@
 import { Theme } from '@mui/material/styles';
 
+// ? I doubt we want to define an explicit type for style properties?
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getSxClasses = (theme: Theme): any => ({
   tooltipItem: {
     color: theme.palette.geoViewColor.bgColor.light[900],
diff --git a/packages/geoview-core/src/core/components/icon-stack/helper.ts b/packages/geoview-core/src/core/components/icon-stack/helper.ts
deleted file mode 100644
index 76a7dbdb22d..00000000000
--- a/packages/geoview-core/src/core/components/icon-stack/helper.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-export type TypeLayerInfo = {
-  layerPath: string;
-  iconData: string[];
-};
-
-export type TypeLayerInfoArray = TypeLayerInfo[];
-
-export const layerInfo: TypeLayerInfoArray = [
-  {
-    layerPath: 'esriFeatureLYR4/8',
-    iconData: [
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAR1JREFUKFNjZEAFzAw+6e7GHOwWV37++cT79++BN9tmnoEpYYQxAjLKzJj//Fv76edvma9//zNwszIzcLEwMjz5/HP32VdfwxgOLPgAVmyakCUhx8JxdcvL70JoNjG4iXAyPP/y69CZ1VPswYojMkuXrn/yJQpdIYzvIcbJsOPFLw+wYu+Eout73n7XwKXYToiD4dCbHxOgigvv73n7QwGXYmNeVoa3P/8uBisOTC46vO3VdxucJguwMRz6+L0ErDg5u6Jy/aOPbV9xqPYS4/y5/vVfeVjQMcVklW7Y9viLL7oGDzHOv69+/k06vmTiIng4MzAwMCVklza//vYn8N8/BiUGBoY/HKxMV699+lp0c9WMoyBLkRXjcjJcHACUTW/kHNx1hAAAAABJRU5ErkJggg==',
-    ],
-  },
-  {
-    layerPath: 'geojsonLYR1/polygons.json',
-    iconData: [
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAASZJREFUKFNjZEAC/1cxMH96zOD+jUnbgpPh6ieG/yIHBIrenIEpYYQxbva5m/34zbOWh+m9DBvTV4bf/7kZfvznZhBierybnelCmGAhwwew4vtdphJfGGSuyrOuF0K2CcR++sebQYjl6SHxwgv2YMXnuiKWKrOsiGKE24Oq5ckfXwZp1l0eYOnr3V7XpVm2aaCbCuO/+evEIMx8dAJY8c0e9/uSzDsVcCn++M+cgY3xw2Kw4svdvoflWTbb4FL8+o8TgxDzvhKw4j3tyZWm7EvaGBl/YlX/6Lf/TwW2jfIwLzEd64rZoM2y2hdZw///DAxP/vr+FWJ9kyRZcHwRsv+ZDrUlNIuwvgxkY/in9J+R4c8PBo6rYv9uFImX3TwKshJHYGF3PQBCJWK8tt5Q2wAAAABJRU5ErkJggg==',
-    ],
-  },
-  {
-    layerPath: 'geojsonLYR1/lines.json',
-    iconData: [
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-    ],
-  },
-  {
-    layerPath: 'uniqueValueId/1',
-    iconData: [
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAR1JREFUKFNjZEAFzAw+6e7GHOwWV37++cT79++BN9tmnoEpYYQxAjLKzJj//Fv76edvma9//zNwszIzcLEwMjz5/HP32VdfwxgOLPgAVmyakCUhx8JxdcvL70JoNjG4iXAyPP/y69CZ1VPswYojMkuXrn/yJQpdIYzvIcbJsOPFLw+wYu+Eout73n7XwKXYToiD4dCbHxOgigvv73n7QwGXYmNeVoa3P/8uBisOTC46vO3VdxucJguwMRz6+L0ErDg5u6Jy/aOPbV9xqPYS4/y5/vVfeVjQMcVklW7Y9viLL7oGDzHOv69+/k06vmTiIng4MzAwMCVklza//vYn8N8/BiUGBoY/HKxMV699+lp0c9WMoyBLkRXjcjJcHACUTW/kHNx1hAAAAABJRU5ErkJggg==',
-    ],
-  },
-  {
-    layerPath: 'esriFeatureLYR5/0',
-    iconData: [
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAR1JREFUKFNjZEAFzAw+6e7GHOwWV37++cT79++BN9tmnoEpYYQxAjLKzJj//Fv76edvma9//zNwszIzcLEwMjz5/HP32VdfwxgOLPgAVmyakCUhx8JxdcvL70JoNjG4iXAyPP/y69CZ1VPswYojMkuXrn/yJQpdIYzvIcbJsOPFLw+wYu+Eout73n7XwKXYToiD4dCbHxOgigvv73n7QwGXYmNeVoa3P/8uBisOTC46vO3VdxucJguwMRz6+L0ErDg5u6Jy/aOPbV9xqPYS4/y5/vVfeVjQMcVklW7Y9viLL7oGDzHOv69+/k06vmTiIng4MzAwMCVklza//vYn8N8/BiUGBoY/HKxMV699+lp0c9WMoyBLkRXjcjJcHACUTW/kHNx1hAAAAABJRU5ErkJggg==',
-    ],
-  },
-  {
-    layerPath: 'historical-flood/0',
-    iconData: [
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAR1JREFUKFNjZEAFzAw+6e7GHOwWV37++cT79++BN9tmnoEpYYQxAjLKzJj//Fv76edvma9//zNwszIzcLEwMjz5/HP32VdfwxgOLPgAVmyakCUhx8JxdcvL70JoNjG4iXAyPP/y69CZ1VPswYojMkuXrn/yJQpdIYzvIcbJsOPFLw+wYu+Eout73n7XwKXYToiD4dCbHxOgigvv73n7QwGXYmNeVoa3P/8uBisOTC46vO3VdxucJguwMRz6+L0ErDg5u6Jy/aOPbV9xqPYS4/y5/vVfeVjQMcVklW7Y9viLL7oGDzHOv69+/k06vmTiIng4MzAwMCVklza//vYn8N8/BiUGBoY/HKxMV699+lp0c9WMoyBLkRXjcjJcHACUTW/kHNx1hAAAAABJRU5ErkJggg==',
-    ],
-  },
-  {
-    layerPath: 'historical-flood/0',
-    iconData: [
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAR1JREFUKFNjZEAFzAw+6e7GHOwWV37++cT79++BN9tmnoEpYYQxAjLKzJj//Fv76edvma9//zNwszIzcLEwMjz5/HP32VdfwxgOLPgAVmyakCUhx8JxdcvL70JoNjG4iXAyPP/y69CZ1VPswYojMkuXrn/yJQpdIYzvIcbJsOPFLw+wYu+Eout73n7XwKXYToiD4dCbHxOgigvv73n7QwGXYmNeVoa3P/8uBisOTC46vO3VdxucJguwMRz6+L0ErDg5u6Jy/aOPbV9xqPYS4/y5/vVfeVjQMcVklW7Y9viLL7oGDzHOv69+/k06vmTiIng4MzAwMCVklza//vYn8N8/BiUGBoY/HKxMV699+lp0c9WMoyBLkRXjcjJcHACUTW/kHNx1hAAAAABJRU5ErkJggg==',
-    ],
-  },
-  {
-    layerPath: 'MSI/msi-94-or-more',
-    iconData: [
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
-    ],
-  },
-];
diff --git a/packages/geoview-core/src/core/components/icon-stack/icon-stack.tsx b/packages/geoview-core/src/core/components/icon-stack/icon-stack.tsx
deleted file mode 100644
index 2387208e40e..00000000000
--- a/packages/geoview-core/src/core/components/icon-stack/icon-stack.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { useTheme } from '@mui/material/styles';
-import { Box, IconButton, BrowserNotSupportedIcon } from '@/ui';
-import { getSxClasses } from './icon-stack-style';
-import { useIconLayerSet } from '@/core/stores/store-interface-and-intial-values/layer-state';
-
-export interface TypeIconStackProps {
-  layerPath: string;
-  onIconClick?: () => void;
-  onStackIconClick?: (e: React.KeyboardEvent<HTMLElement>) => void;
-}
-
-/**
- * Icon Stack to represent layer icons
- *
- * @param {string} layerPath
- * @returns {JSX.Element} the icon stack item
- */
-export function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIconStackProps): JSX.Element | null {
-  const theme = useTheme();
-  const sxClasses = getSxClasses(theme);
-
-  const iconData = useIconLayerSet(layerPath);
-
-  const iconImage: string = iconData && iconData.length > 0 ? iconData[0] : '';
-  const iconImageStacked: string = iconData && iconData.length > 1 ? iconData[1] : '';
-  const numOfIcons: number | undefined = iconData?.length;
-
-  const iconStackContent = (): JSX.Element | null => {
-    // TODO: refactor - try to remove the nested ternary to simplify reading
-    // eslint-disable-next-line no-nested-ternary
-    return numOfIcons === 1 ? (
-      <IconButton
-        tabIndex={-1}
-        sx={sxClasses.iconPreview}
-        color="primary"
-        size="small"
-        onClick={iconImage === 'no data' ? undefined : onIconClick}
-        aria-hidden="true"
-      >
-        {iconImage === 'no data' ? (
-          <BrowserNotSupportedIcon />
-        ) : (
-          <Box sx={sxClasses.legendIcon}>
-            <img alt="icon" src={iconImage} style={sxClasses.maxIconImg} />
-          </Box>
-        )}
-      </IconButton>
-    ) : // eslint-disable-next-line no-nested-ternary
-    numOfIcons && numOfIcons > 0 ? (
-      <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyPress={(e) => onStackIconClick?.(e)} aria-hidden="true">
-        <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1} aria-hidden="true">
-          <Box sx={sxClasses.legendIconTransparent}>
-            {iconImageStacked && <img alt="icon" src={iconImageStacked} style={sxClasses.maxIconImg} />}
-          </Box>
-        </IconButton>
-        <IconButton sx={sxClasses.iconPreviewHoverable} color="primary" size="small" tabIndex={-1} aria-hidden="true">
-          <Box sx={sxClasses.legendIcon}>{iconImage && <img alt="icon" src={iconImage} style={sxClasses.maxIconImg} />}</Box>
-        </IconButton>
-      </Box>
-    ) : layerPath !== '' && iconData.length === 0 && layerPath.charAt(0) !== '!' ? (
-      <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyPress={(e) => onStackIconClick?.(e)} aria-hidden="true">
-        <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1} aria-hidden="true">
-          <Box sx={sxClasses.legendIconTransparent}>
-            <BrowserNotSupportedIcon />
-          </Box>
-        </IconButton>
-      </Box>
-    ) : null;
-  };
-
-  return iconStackContent();
-}
diff --git a/packages/geoview-core/src/core/components/index.ts b/packages/geoview-core/src/core/components/index.ts
index 6a306a4e0c3..88fea82a31b 100644
--- a/packages/geoview-core/src/core/components/index.ts
+++ b/packages/geoview-core/src/core/components/index.ts
@@ -25,7 +25,6 @@ export * from './geolocator/geolocator';
 export * from './geolocator/geolocator-style';
 export * from './guide/guide-panel';
 export * from './hover-tooltip/hover-tooltip';
-export * from './icon-stack/icon-stack';
 export * from './legend/legend';
 export * from './lightbox/lightbox';
 export * from './map/map';

From d7a82d9320ce32c67be7eced32ee969b95efe631 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Thu, 16 May 2024 16:48:01 -0400
Subject: [PATCH 4/9] add 99+ notifications messaging

---
 .../src/core/components/notifications/notifications.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx
index 97558776f39..a6593db223e 100644
--- a/packages/geoview-core/src/core/components/notifications/notifications.tsx
+++ b/packages/geoview-core/src/core/components/notifications/notifications.tsx
@@ -113,7 +113,7 @@ export default function Notifications(): JSX.Element {
   return (
     <ClickAwayListener mouseEvent="onMouseDown" touchEvent="onTouchStart" onClickAway={handleClickAway}>
       <div>
-        <Badge badgeContent={notificationsCount} color="error">
+        <Badge badgeContent={notificationsCount > 99 ? '99+' : notificationsCount} color="error">
           <IconButton
             id="notification"
             tooltip="appbar.notifications"

From 420e5d03b67e586bd4a4bfa6120daaba2e368d6d Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Thu, 16 May 2024 16:59:32 -0400
Subject: [PATCH 5/9] replace span and div in components

---
 .../core/components/app-bar/buttons/version.tsx    |  4 ++--
 .../components/common/responsive-grid-layout.tsx   |  2 +-
 .../left-panel/add-new-layer/add-new-layer.tsx     | 14 +++++++-------
 .../components/layers/left-panel/single-layer.tsx  |  5 +++--
 .../layers/right-panel/layer-details.tsx           |  4 ++--
 .../layer-opacity-control.tsx                      |  4 ++--
 .../components/mouse-position/mouse-position.tsx   |  2 +-
 .../src/core/components/nav-bar/nav-bar.tsx        |  2 +-
 .../components/notifications/notifications.tsx     |  6 +++---
 .../overview-map/overview-map-toggle.tsx           |  9 +++++----
 .../core/components/overview-map/overview-map.tsx  |  3 ++-
 11 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
index e64ba496473..b0db79725d6 100644
--- a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
+++ b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
@@ -73,7 +73,7 @@ export default function Version(): JSX.Element {
 
   return (
     <ClickAwayListener mouseEvent="onMouseDown" touchEvent="onTouchStart" onClickAway={handleClickAway}>
-      <div>
+      <Box component='div'>
         <IconButton
           id="version-button"
           tooltip="appbar.version"
@@ -111,7 +111,7 @@ export default function Version(): JSX.Element {
             </Box>
           </Paper>
         </Popper>
-      </div>
+      </Box>
     </ClickAwayListener>
   );
 }
diff --git a/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx b/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx
index c5665dc7a48..f3ee2d7a409 100644
--- a/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx
+++ b/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx
@@ -290,7 +290,7 @@ const ResponsiveGridLayout = forwardRef(
                 [theme.breakpoints.down('md')]: { justifyContent: 'space-between' },
               }}
             >
-              {rightTop ?? <div />}
+              {rightTop ?? <Box />}
 
               <Box sx={{ display: 'flex', flexDirection: 'row', gap: '0.6rem' }}>
                 {!fullWidth && !hideEnlargeBtn && renderEnlargeButton()}
diff --git a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
index 4d81dc6e13a..9838fe4f999 100644
--- a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
+++ b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
@@ -1098,7 +1098,7 @@ export function AddNewLayer(): JSX.Element {
             },
             stepContent: {
               children: (
-                <div
+                <Box component='div'
                   className="dropzone"
                   style={{ position: 'relative' }}
                   onDrop={(e) => handleDrop(e)}
@@ -1107,7 +1107,7 @@ export function AddNewLayer(): JSX.Element {
                   onDragLeave={(e) => handleDragLeave(e)}
                 >
                   {drag && (
-                    <div
+                    <Box component='div'
                       ref={dragPopover}
                       style={{
                         backgroundColor: 'rgba(128,128,128,.95)',
@@ -1127,9 +1127,9 @@ export function AddNewLayer(): JSX.Element {
                         <br />
                         {t('layers.dropzone')}
                       </h3>
-                    </div>
+                    </Box>
                   )}
-                  <div>
+                  <Box component='div'>
                     <input
                       type="file"
                       id="fileUpload"
@@ -1139,10 +1139,10 @@ export function AddNewLayer(): JSX.Element {
                       }}
                       accept=".gpkg, .json, .geojson, .csv"
                     />
-                  </div>
+                  </Box>
                   <Button type="text" onClick={() => document.getElementById('fileUpload')?.click()} className="">
                     <FileUploadIcon />
-                    <span>{t('layers.upload')}</span>
+                    <Box component='span'>{t('layers.upload')}</Box>
                   </Button>
                   <p style={{ textAlign: 'center' }}>
                     <small>{t('layers.drop')}</small>
@@ -1158,7 +1158,7 @@ export function AddNewLayer(): JSX.Element {
                   />
                   <br />
                   <NavButtons isFirst handleNext={handleStep1} />
-                </div>
+                </Box>
               ),
             },
           },
diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
index f7277313754..7f84f546caa 100644
--- a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
+++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
@@ -37,6 +37,7 @@ import {
 import { LAYER_STATUS } from '@/core/utils/constant';
 import { ArrowDownwardIcon, ArrowUpIcon, TableViewIcon } from '@/ui/icons';
 import { Divider } from '@/ui/divider/divider';
+import { Box } from '@/ui/layout';
 
 interface SingleLayerProps {
   layer: TypeLegendLayer;
@@ -123,10 +124,10 @@ export function SingleLayer({ depth, layer, setIsLayersListPanelVisible, index,
 
     if (datatableSettings[layer.layerPath]) {
       return (
-        <span>
+        <Box component='span'>
           {itemsLengthDesc} &nbsp;
           <TableViewIcon sx={{ marginBottom: '-5px' }} fontSize="small" />
-        </span>
+        </Box>
       );
     }
     return itemsLengthDesc;
diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
index 2c0737c694d..a3cb7aeb8c0 100644
--- a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
+++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
@@ -153,7 +153,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
               {renderHeaderCheckbox()}
             </Grid>
             <Grid item xs="auto">
-              <span>{t('general.name')}</span>
+              <Box component='span'>{t('general.name')}</Box>
             </Grid>
           </Grid>
         )}
@@ -164,7 +164,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
             </Grid>
             <Grid item xs="auto">
               {item.icon ? <img alt={item.name} src={item.icon} /> : <BrowserNotSupportedIcon />}
-              <span style={sxClasses.tableIconLabel}>{item.name}</span>
+              <Box component='span' style={sxClasses.tableIconLabel}>{item.name}</Box>
             </Grid>
           </Grid>
         ))}
diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx
index f4ade4726e9..8f77283919d 100644
--- a/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx
+++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx
@@ -42,7 +42,7 @@ export function LayerOpacityControl(props: LayerOpacityControlProps): JSX.Elemen
   };
 
   return (
-    <div style={{ padding: '16px 17px 16px 23px' }}>
+    <Box component='div' style={{ padding: '16px 17px 16px 23px' }}>
       <Box sx={sxClasses.layerOpacityControl}>
         <Typography sx={{ fontWeight: 'bold' }}>{t('layers.opacity')}</Typography>
         <Slider
@@ -54,6 +54,6 @@ export function LayerOpacityControl(props: LayerOpacityControlProps): JSX.Elemen
           marks={marks}
         />
       </Box>
-    </div>
+    </Box>
   );
 }
diff --git a/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx b/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx
index dad6d2bef82..11e5e340b71 100644
--- a/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx
+++ b/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx
@@ -88,7 +88,7 @@ export function MousePosition(): JSX.Element {
                     ...sxClasses.mousePositionCheckmark,
                   }}
                 />
-                <span>{position}</span>
+                <Box component='span'>{position}</Box>
               </Box>
             );
           })}
diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
index 9dce2d59fa1..e779ce4cb55 100644
--- a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
+++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
@@ -161,7 +161,7 @@ export function NavBar(props: NavBarProps): JSX.Element {
         });
 
         if (panels.length > 0) {
-          return <div key={groupName}>{panels}</div>;
+          return <Box component='div' key={groupName}>{panels}</Box>;
         }
         return null;
       })}
diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx
index a6593db223e..0c8cd364cd3 100644
--- a/packages/geoview-core/src/core/components/notifications/notifications.tsx
+++ b/packages/geoview-core/src/core/components/notifications/notifications.tsx
@@ -96,7 +96,7 @@ export default function Notifications(): JSX.Element {
       <Box sx={sxClasses.notificationItem} key={index}>
         <Box>{getNotificationIcon(notification)}</Box>
         <Box sx={{ flexGrow: 1, fontSize: theme.palette.geoViewFontSize.sm, color: theme.palette.geoViewColor.textColor.light[250] }}>
-          <span>{notification.message}</span>
+          <Box component='span'>{notification.message}</Box>
         </Box>
         {notification.count > 1 ? (
           <Box>
@@ -112,7 +112,7 @@ export default function Notifications(): JSX.Element {
 
   return (
     <ClickAwayListener mouseEvent="onMouseDown" touchEvent="onTouchStart" onClickAway={handleClickAway}>
-      <div>
+      <Box component='div'>
         <Badge badgeContent={notificationsCount > 99 ? '99+' : notificationsCount} color="error">
           <IconButton
             id="notification"
@@ -142,7 +142,7 @@ export default function Notifications(): JSX.Element {
             </Box>
           </Paper>
         </Popper>
-      </div>
+      </Box>
     </ClickAwayListener>
   );
 }
diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx
index 3b3da308507..91c910b2db7 100644
--- a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx
+++ b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx
@@ -7,6 +7,7 @@ import makeStyles from '@mui/styles/makeStyles';
 
 import { ChevronLeftIcon, Tooltip } from '@/ui';
 import { logger } from '@/core/utils/logger';
+import { Box } from '@/ui/layout';
 
 // TODO: We need to find solution to remove makeStyles with either plain css or material ui.
 const useStyles = makeStyles(() => ({
@@ -98,8 +99,8 @@ export function OverviewMapToggle(props: OverviewMapToggleProps): JSX.Element {
 
   return (
     <Tooltip title={tooltipAndAria}>
-      <div ref={divRef} className={classes.toggleBtnContainer}>
-        <div
+      <Box component='div' ref={divRef} className={classes.toggleBtnContainer}>
+        <Box component='div'
           className={`${classes.toggleBtn} ${!status ? classes.minimapOpen : classes.minimapClosed}`}
           style={{
             margin: 0,
@@ -109,8 +110,8 @@ export function OverviewMapToggle(props: OverviewMapToggleProps): JSX.Element {
           }}
         >
           <ChevronLeftIcon />
-        </div>
-      </div>
+        </Box>
+      </Box>
     </Tooltip>
   );
 }
diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map.tsx b/packages/geoview-core/src/core/components/overview-map/overview-map.tsx
index cc61353eed0..9f496757cea 100644
--- a/packages/geoview-core/src/core/components/overview-map/overview-map.tsx
+++ b/packages/geoview-core/src/core/components/overview-map/overview-map.tsx
@@ -19,6 +19,7 @@ import { useAppDisplayLanguage, useAppDisplayTheme } from '@/core/stores/store-i
 import { useMapOverviewMapHideZoom, useMapProjection, useMapZoom } from '@/core/stores/store-interface-and-intial-values/map-state';
 import { MapEventProcessor } from '@/api/event-processors/event-processor-children/map-event-processor';
 import { logger } from '@/core/utils/logger';
+import { Box } from '@/ui/layout';
 
 // TODO: We need to find solution to remove makeStyles with either plain css or material ui.
 const useStyles = makeStyles(() => ({
@@ -216,5 +217,5 @@ export function OverviewMap(props: OverwiewMapProps): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [displayLanguage, displayTheme]);
 
-  return <div />;
+  return <Box />;
 }

From 1e6cb770b4e50aff155a571bb16d6563a8d5bfd0 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Fri, 17 May 2024 13:13:55 -0400
Subject: [PATCH 6/9] fixes based on review

---
 .../src/basemap-panel.tsx                     |   2 +-
 .../components/app-bar/buttons/version.tsx    |   2 +-
 .../components/common/layer-icon-style.ts     | 134 +++++++++---------
 .../src/core/components/common/layer-icon.tsx |   4 +-
 .../data-table/data-table-modal.tsx           |   6 +-
 .../hover-tooltip/hover-tooltip-styles.ts     |  58 ++++----
 .../hover-tooltip/hover-tooltip.tsx           |   6 +-
 .../add-new-layer/add-new-layer.tsx           |  10 +-
 .../layers/left-panel/single-layer.tsx        |   2 +-
 .../layers/right-panel/layer-details.tsx      |   6 +-
 .../layer-opacity-control.tsx                 |   2 +-
 .../mouse-position/mouse-position.tsx         |   2 +-
 .../src/core/components/nav-bar/nav-bar.tsx   |   2 +-
 .../notifications/notifications.tsx           |   4 +-
 .../overview-map/overview-map-toggle.tsx      |   5 +-
 .../src/core/containers/html-to-react.tsx     |   7 +-
 packages/geoview-core/src/ui/modal/modal.tsx  |   5 +-
 17 files changed, 130 insertions(+), 127 deletions(-)

diff --git a/packages/geoview-basemap-panel/src/basemap-panel.tsx b/packages/geoview-basemap-panel/src/basemap-panel.tsx
index 8484b70dabf..35c0ed0c090 100644
--- a/packages/geoview-basemap-panel/src/basemap-panel.tsx
+++ b/packages/geoview-basemap-panel/src/basemap-panel.tsx
@@ -288,7 +288,7 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
                     // eslint-disable-next-line react/no-array-index-key
                     return <img key={index} src={thumbnail} alt={basemap.altText} className="basemapCardThumbnail" />;
                   })}
-                <div className={basemap.basemapId !== activeBasemapId ? 'basemapCardThumbnailOverlay' : ''} />
+                <Box className={basemap.basemapId !== activeBasemapId ? 'basemapCardThumbnailOverlay' : ''} />
               </>
             }
           />
diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
index b0db79725d6..333ae305d06 100644
--- a/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
+++ b/packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
@@ -73,7 +73,7 @@ export default function Version(): JSX.Element {
 
   return (
     <ClickAwayListener mouseEvent="onMouseDown" touchEvent="onTouchStart" onClickAway={handleClickAway}>
-      <Box component='div'>
+      <Box>
         <IconButton
           id="version-button"
           tooltip="appbar.version"
diff --git a/packages/geoview-core/src/core/components/common/layer-icon-style.ts b/packages/geoview-core/src/core/components/common/layer-icon-style.ts
index 57bbe5897a9..cbf1552ed5b 100644
--- a/packages/geoview-core/src/core/components/common/layer-icon-style.ts
+++ b/packages/geoview-core/src/core/components/common/layer-icon-style.ts
@@ -1,67 +1,67 @@
-import { Theme } from '@mui/material/styles';
-
-// ? I doubt we want to define an explicit type for style properties?
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getSxClasses = (theme: Theme): any => ({
-  legendIconTransparent: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 24,
-    height: 24,
-  },
-  iconPreviewHoverable: {
-    width: 24,
-    height: 24,
-    position: 'absolute',
-    left: -3,
-    top: -2,
-    padding: 0,
-    borderRadius: 0,
-    boxShadow: 2,
-    transition: 'transform .3s ease-in-out',
-    '&:hover': {
-      transform: 'rotate(-18deg) translateX(-8px)',
-    },
-  },
-  iconPreviewStacked: {
-    width: 24,
-    height: 24,
-    padding: 0,
-    borderRadius: 0,
-    border: '1px solid',
-    borderColor: theme.palette.geoViewColor.bgColor.dark[600],
-    boxShadow: 2,
-    backgroundColor: theme.palette.geoViewColor.white,
-  },
-  maxIconImg: {
-    maxWidth: 24,
-    maxHeight: 24,
-  },
-  legendIcon: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 24,
-    height: 24,
-    backgroundColor: theme.palette.geoViewColor.white,
-    border: '1px solid',
-    borderColor: theme.palette.geoViewColor.bgColor.dark[600],
-  },
-  stackIconsBox: {
-    width: 24,
-    height: 24,
-    position: 'relative',
-    '&:focus': {
-      outlineColor: theme.palette.geoViewColor.bgColor.dark[600],
-    },
-  },
-  iconPreview: {
-    padding: 0,
-    borderRadius: 0,
-    boxShadow: 2,
-    '&:focus': {
-      border: 'revert',
-    },
-  },
-});
+import { Theme } from '@mui/material/styles';
+
+// ? I doubt we want to define an explicit type for style properties?
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getSxClasses = (theme: Theme): any => ({
+  legendIconTransparent: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 24,
+    height: 24,
+  },
+  iconPreviewHoverable: {
+    width: 24,
+    height: 24,
+    position: 'absolute',
+    left: -3,
+    top: -2,
+    padding: 0,
+    borderRadius: 0,
+    boxShadow: 2,
+    transition: 'transform .3s ease-in-out',
+    '&:hover': {
+      transform: 'rotate(-18deg) translateX(-8px)',
+    },
+  },
+  iconPreviewStacked: {
+    width: 24,
+    height: 24,
+    padding: 0,
+    borderRadius: 0,
+    border: '1px solid',
+    borderColor: theme.palette.geoViewColor.bgColor.dark[600],
+    boxShadow: 2,
+    backgroundColor: theme.palette.geoViewColor.white,
+  },
+  maxIconImg: {
+    maxWidth: 24,
+    maxHeight: 24,
+  },
+  legendIcon: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 24,
+    height: 24,
+    backgroundColor: theme.palette.geoViewColor.white,
+    border: '1px solid',
+    borderColor: theme.palette.geoViewColor.bgColor.dark[600],
+  },
+  stackIconsBox: {
+    width: 24,
+    height: 24,
+    position: 'relative',
+    '&:focus': {
+      outlineColor: theme.palette.geoViewColor.bgColor.dark[600],
+    },
+  },
+  iconPreview: {
+    padding: 0,
+    borderRadius: 0,
+    boxShadow: 2,
+    '&:focus': {
+      border: 'revert',
+    },
+  },
+});
diff --git a/packages/geoview-core/src/core/components/common/layer-icon.tsx b/packages/geoview-core/src/core/components/common/layer-icon.tsx
index e965eda3b85..0b55372e92d 100644
--- a/packages/geoview-core/src/core/components/common/layer-icon.tsx
+++ b/packages/geoview-core/src/core/components/common/layer-icon.tsx
@@ -1,9 +1,9 @@
+import { useTheme } from '@mui/material/styles';
 import { Box, CircularProgressBase, ErrorIcon, GroupWorkOutlinedIcon, IconButton, BrowserNotSupportedIcon } from '@/ui';
 import { TypeLegendLayer } from '@/core/components/layers/types';
 import { getSxClasses } from './layer-icon-style';
 import { useIconLayerSet } from '@/core/stores/store-interface-and-intial-values/layer-state';
 import { LayerListEntry } from '.';
-import { useTheme } from '@mui/material/styles';
 
 export interface TypeIconStackProps {
   layerPath: string;
@@ -23,7 +23,7 @@ function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIconStackPr
 
   const iconData = useIconLayerSet(layerPath);
 
-  const iconImage: string = iconData && iconData.length > 0 ? iconData[0] : '';
+  const iconImage: string = iconData?.length > 0 ? iconData[0] : '';
   const iconImageStacked: string = iconData && iconData.length > 1 ? iconData[1] : '';
   const numOfIcons: number | undefined = iconData?.length;
 
diff --git a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx
index 2f09bedf814..9bba8733b6f 100644
--- a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx
+++ b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx
@@ -64,11 +64,7 @@ export default function DataTableModal(): JSX.Element {
    * @returns {JSX.Element}
    */
   const getCellValue = (cellValue: string): JSX.Element => {
-    return (
-      <Box component="div" sx={sxClasses.tableCell}>
-        {cellValue}
-      </Box>
-    );
+    return <Box sx={sxClasses.tableCell}>{cellValue}</Box>;
   };
 
   /**
diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts
index 633f2e37484..88c96738447 100644
--- a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts
+++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts
@@ -1,29 +1,29 @@
-import { Theme } from '@mui/material/styles';
-
-// ? I doubt we want to define an explicit type for style properties?
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getSxClasses = (theme: Theme): any => ({
-  tooltipItem: {
-    color: theme.palette.geoViewColor.bgColor.light[900],
-    background: theme.palette.geoViewColor.bgColor.dark[900],
-    opacity: 0.9,
-    fontSize: theme.palette.geoViewFontSize.default,
-    padding: '3px 8px',
-    borderRadius: '5px',
-    textAlign: 'center',
-    maxWidth: '350px',
-    maxHeight: '60px',
-    position: 'absolute',
-    display: 'flex',
-    top: '-5px',
-    left: '3px',
-  },
-  tooltipText: {
-    fontSize: theme.palette.geoViewFontSize.default,
-    color: theme.palette.geoViewColor.bgColor.light[900],
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    padding: '5px',
-  }
-});
\ No newline at end of file
+import { Theme } from '@mui/material/styles';
+
+// ? I doubt we want to define an explicit type for style properties?
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getSxClasses = (theme: Theme): any => ({
+  tooltipItem: {
+    color: theme.palette.geoViewColor.bgColor.light[900],
+    background: theme.palette.geoViewColor.bgColor.dark[900],
+    opacity: 0.9,
+    fontSize: theme.palette.geoViewFontSize.default,
+    padding: '3px 8px',
+    borderRadius: '5px',
+    textAlign: 'center',
+    maxWidth: '350px',
+    maxHeight: '60px',
+    position: 'absolute',
+    display: 'flex',
+    top: '-5px',
+    left: '3px',
+  },
+  tooltipText: {
+    fontSize: theme.palette.geoViewFontSize.default,
+    color: theme.palette.geoViewColor.bgColor.light[900],
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    padding: '5px',
+  },
+});
diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
index fc631ffdfd1..fc9f22fc63a 100644
--- a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
+++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
@@ -12,7 +12,7 @@ import { getSxClasses } from './hover-tooltip-styles';
  *
  * @returns {JSX.Element} the hover tooltip component
  */
-export function HoverTooltip() {
+export function HoverTooltip(): JSX.Element {
   // Log, commented too annoying
   // logger.logTraceRender('components/hover-tooltip/hover-tooltip');
 
@@ -58,8 +58,8 @@ export function HoverTooltip() {
     if (pointerPosition !== undefined) setPixel(pointerPosition.pixel as [number, number]);
   }, [pointerPosition]);
 
-  if(showTooltip && !tooltipValue) {
-    return null;
+  if (showTooltip && !tooltipValue) {
+    return <></>;
   }
 
   return (
diff --git a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
index 9838fe4f999..f5aea0028d6 100644
--- a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
+++ b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
@@ -1098,7 +1098,8 @@ export function AddNewLayer(): JSX.Element {
             },
             stepContent: {
               children: (
-                <Box component='div'
+                <Box
+                  component="div"
                   className="dropzone"
                   style={{ position: 'relative' }}
                   onDrop={(e) => handleDrop(e)}
@@ -1107,7 +1108,8 @@ export function AddNewLayer(): JSX.Element {
                   onDragLeave={(e) => handleDragLeave(e)}
                 >
                   {drag && (
-                    <Box component='div'
+                    <Box
+                      component="div"
                       ref={dragPopover}
                       style={{
                         backgroundColor: 'rgba(128,128,128,.95)',
@@ -1129,7 +1131,7 @@ export function AddNewLayer(): JSX.Element {
                       </h3>
                     </Box>
                   )}
-                  <Box component='div'>
+                  <Box>
                     <input
                       type="file"
                       id="fileUpload"
@@ -1142,7 +1144,7 @@ export function AddNewLayer(): JSX.Element {
                   </Box>
                   <Button type="text" onClick={() => document.getElementById('fileUpload')?.click()} className="">
                     <FileUploadIcon />
-                    <Box component='span'>{t('layers.upload')}</Box>
+                    <Box component="span">{t('layers.upload')}</Box>
                   </Button>
                   <p style={{ textAlign: 'center' }}>
                     <small>{t('layers.drop')}</small>
diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
index 7f84f546caa..e6754719c37 100644
--- a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
+++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
@@ -124,7 +124,7 @@ export function SingleLayer({ depth, layer, setIsLayersListPanelVisible, index,
 
     if (datatableSettings[layer.layerPath]) {
       return (
-        <Box component='span'>
+        <Box component="span">
           {itemsLengthDesc} &nbsp;
           <TableViewIcon sx={{ marginBottom: '-5px' }} fontSize="small" />
         </Box>
diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
index a3cb7aeb8c0..3a42b64d1f0 100644
--- a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
+++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
@@ -153,7 +153,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
               {renderHeaderCheckbox()}
             </Grid>
             <Grid item xs="auto">
-              <Box component='span'>{t('general.name')}</Box>
+              <Box component="span">{t('general.name')}</Box>
             </Grid>
           </Grid>
         )}
@@ -164,7 +164,9 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
             </Grid>
             <Grid item xs="auto">
               {item.icon ? <img alt={item.name} src={item.icon} /> : <BrowserNotSupportedIcon />}
-              <Box component='span' style={sxClasses.tableIconLabel}>{item.name}</Box>
+              <Box component="span" style={sxClasses.tableIconLabel}>
+                {item.name}
+              </Box>
             </Grid>
           </Grid>
         ))}
diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx
index 8f77283919d..00e98a513ae 100644
--- a/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx
+++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx
@@ -42,7 +42,7 @@ export function LayerOpacityControl(props: LayerOpacityControlProps): JSX.Elemen
   };
 
   return (
-    <Box component='div' style={{ padding: '16px 17px 16px 23px' }}>
+    <Box style={{ padding: '16px 17px 16px 23px' }}>
       <Box sx={sxClasses.layerOpacityControl}>
         <Typography sx={{ fontWeight: 'bold' }}>{t('layers.opacity')}</Typography>
         <Slider
diff --git a/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx b/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx
index 11e5e340b71..22aaff61faa 100644
--- a/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx
+++ b/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx
@@ -88,7 +88,7 @@ export function MousePosition(): JSX.Element {
                     ...sxClasses.mousePositionCheckmark,
                   }}
                 />
-                <Box component='span'>{position}</Box>
+                <Box component="span">{position}</Box>
               </Box>
             );
           })}
diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
index e779ce4cb55..dcd78e6f86e 100644
--- a/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
+++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx
@@ -161,7 +161,7 @@ export function NavBar(props: NavBarProps): JSX.Element {
         });
 
         if (panels.length > 0) {
-          return <Box component='div' key={groupName}>{panels}</Box>;
+          return <Box key={groupName}>{panels}</Box>;
         }
         return null;
       })}
diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx
index 0c8cd364cd3..dae66dbe8c5 100644
--- a/packages/geoview-core/src/core/components/notifications/notifications.tsx
+++ b/packages/geoview-core/src/core/components/notifications/notifications.tsx
@@ -96,7 +96,7 @@ export default function Notifications(): JSX.Element {
       <Box sx={sxClasses.notificationItem} key={index}>
         <Box>{getNotificationIcon(notification)}</Box>
         <Box sx={{ flexGrow: 1, fontSize: theme.palette.geoViewFontSize.sm, color: theme.palette.geoViewColor.textColor.light[250] }}>
-          <Box component='span'>{notification.message}</Box>
+          <Box component="span">{notification.message}</Box>
         </Box>
         {notification.count > 1 ? (
           <Box>
@@ -112,7 +112,7 @@ export default function Notifications(): JSX.Element {
 
   return (
     <ClickAwayListener mouseEvent="onMouseDown" touchEvent="onTouchStart" onClickAway={handleClickAway}>
-      <Box component='div'>
+      <Box>
         <Badge badgeContent={notificationsCount > 99 ? '99+' : notificationsCount} color="error">
           <IconButton
             id="notification"
diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx
index 91c910b2db7..325e34b99e5 100644
--- a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx
+++ b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx
@@ -99,8 +99,9 @@ export function OverviewMapToggle(props: OverviewMapToggleProps): JSX.Element {
 
   return (
     <Tooltip title={tooltipAndAria}>
-      <Box component='div' ref={divRef} className={classes.toggleBtnContainer}>
-        <Box component='div'
+      <Box ref={divRef} className={classes.toggleBtnContainer}>
+        <Box
+          component="div"
           className={`${classes.toggleBtn} ${!status ? classes.minimapOpen : classes.minimapClosed}`}
           style={{
             margin: 0,
diff --git a/packages/geoview-core/src/core/containers/html-to-react.tsx b/packages/geoview-core/src/core/containers/html-to-react.tsx
index f6d0d0b081f..ace685019e5 100644
--- a/packages/geoview-core/src/core/containers/html-to-react.tsx
+++ b/packages/geoview-core/src/core/containers/html-to-react.tsx
@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import parse from 'html-react-parser';
+import { Box } from '@/ui/layout';
 
 /**
  * Interface used for custom html elements
@@ -37,11 +38,11 @@ export function HtmlToReact(props: HtmlToReactProps): JSX.Element {
 
   // eslint-disable-next-line react/jsx-props-no-spreading
   return (
-    <div {...extraOptions} className={className} style={style}>
+    <Box {...extraOptions} className={className} style={style}>
       {reactItems.map((item: TrustedHTML, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <div key={index}>{item as ReactNode}</div>
+        <Box key={index}>{item as ReactNode}</Box>
       ))}
-    </div>
+    </Box>
   );
 }
diff --git a/packages/geoview-core/src/ui/modal/modal.tsx b/packages/geoview-core/src/ui/modal/modal.tsx
index ecbcccba4ef..bd5086ea2b9 100644
--- a/packages/geoview-core/src/ui/modal/modal.tsx
+++ b/packages/geoview-core/src/ui/modal/modal.tsx
@@ -213,13 +213,14 @@ export function Modal(props: TypeDialogProps): JSX.Element {
           </Box>
         </Box>
         <DialogContent>
-          <div
+          <Box
+            component="div"
             id={contentTextId}
             className={`${sxClasses.content} ${contentTextClassName && contentTextClassName}`}
             style={contentTextStyle}
           >
             {typeof modal.content === 'string' ? <HtmlToReact htmlContent={modal.content} /> : modal.content}
-          </div>
+          </Box>
         </DialogContent>
         {modal.footer?.actions && modal.footer?.actions.length >= 1 ? (
           <DialogActions>

From 630612cc066945f2ea5fddbaebe58ba5455de241 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Fri, 17 May 2024 13:27:30 -0400
Subject: [PATCH 7/9] some changes

---
 .../geoview-core/src/core/components/common/layer-icon.tsx    | 2 +-
 .../src/core/components/hover-tooltip/hover-tooltip.tsx       | 4 ++--
 .../layers/left-panel/add-new-layer/add-new-layer.tsx         | 2 --
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/geoview-core/src/core/components/common/layer-icon.tsx b/packages/geoview-core/src/core/components/common/layer-icon.tsx
index 0b55372e92d..8da9393ed8f 100644
--- a/packages/geoview-core/src/core/components/common/layer-icon.tsx
+++ b/packages/geoview-core/src/core/components/common/layer-icon.tsx
@@ -24,7 +24,7 @@ function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIconStackPr
   const iconData = useIconLayerSet(layerPath);
 
   const iconImage: string = iconData?.length > 0 ? iconData[0] : '';
-  const iconImageStacked: string = iconData && iconData.length > 1 ? iconData[1] : '';
+  const iconImageStacked: string = iconData?.length > 1 ? iconData[1] : '';
   const numOfIcons: number | undefined = iconData?.length;
 
   const iconStackContent = (): JSX.Element | null => {
diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
index fc9f22fc63a..4ec7e14ae3d 100644
--- a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
+++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
@@ -12,7 +12,7 @@ import { getSxClasses } from './hover-tooltip-styles';
  *
  * @returns {JSX.Element} the hover tooltip component
  */
-export function HoverTooltip(): JSX.Element {
+export function HoverTooltip() {
   // Log, commented too annoying
   // logger.logTraceRender('components/hover-tooltip/hover-tooltip');
 
@@ -59,7 +59,7 @@ export function HoverTooltip(): JSX.Element {
   }, [pointerPosition]);
 
   if (showTooltip && !tooltipValue) {
-    return <></>;
+    return null;
   }
 
   return (
diff --git a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
index f5aea0028d6..59fcd55a548 100644
--- a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
+++ b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
@@ -1099,7 +1099,6 @@ export function AddNewLayer(): JSX.Element {
             stepContent: {
               children: (
                 <Box
-                  component="div"
                   className="dropzone"
                   style={{ position: 'relative' }}
                   onDrop={(e) => handleDrop(e)}
@@ -1109,7 +1108,6 @@ export function AddNewLayer(): JSX.Element {
                 >
                   {drag && (
                     <Box
-                      component="div"
                       ref={dragPopover}
                       style={{
                         backgroundColor: 'rgba(128,128,128,.95)',

From 75b48c41b441a75ae65822d0d68ce7ff179c5806 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Fri, 17 May 2024 15:58:05 -0400
Subject: [PATCH 8/9] some fix

---
 .../src/core/components/hover-tooltip/hover-tooltip.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
index 4ec7e14ae3d..c082ce73aec 100644
--- a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
+++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
@@ -12,7 +12,7 @@ import { getSxClasses } from './hover-tooltip-styles';
  *
  * @returns {JSX.Element} the hover tooltip component
  */
-export function HoverTooltip() {
+export function HoverTooltip():  JSX.Element | null {
   // Log, commented too annoying
   // logger.logTraceRender('components/hover-tooltip/hover-tooltip');
 

From f9e7487cecdeaee0204825d027dc93ecf83ddedf Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Tue, 21 May 2024 12:25:37 -0400
Subject: [PATCH 9/9] post build

---
 .../src/core/components/hover-tooltip/hover-tooltip.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
index c082ce73aec..d400e9f65c4 100644
--- a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
+++ b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
@@ -12,7 +12,7 @@ import { getSxClasses } from './hover-tooltip-styles';
  *
  * @returns {JSX.Element} the hover tooltip component
  */
-export function HoverTooltip():  JSX.Element | null {
+export function HoverTooltip(): JSX.Element | null {
   // Log, commented too annoying
   // logger.logTraceRender('components/hover-tooltip/hover-tooltip');