UI improvements hover tooltip

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>
   );
 }

packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts → 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',
+    },
+  },
+});

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;

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()}

packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip-styles.ts

@@ -0,0 +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',
+  }
+});

packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx

@@ -5,13 +5,14 @@
 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
  *
  * @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');
 
@@ -21,38 +22,14 @@
     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();
@@ -81,6 +58,10 @@
     if (pointerPosition !== undefined) setPixel(pointerPosition.pixel as [number, number]);
   }, [pointerPosition]);
 
+  if(showTooltip && !tooltipValue) {
+    return null;
+  }
+
   return (
     <Box
       sx={sxClasses.tooltipItem}