fixes based on review

Canadian-Geospatial-Platform · May 17, 2024 · 1e6cb77 · 1e6cb77
1 parent 706a3c7
commit 1e6cb77
Show file tree

Hide file tree

Showing 17 changed files with 130 additions and 127 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',
-  }
-});
+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
@@ -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
@@ -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
@@ -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
@@ -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/...re/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx b/...re/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
@@ -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
@@ -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
@@ -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
@@ -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,
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,7 +88,7 @@ export function MousePosition(): JSX.Element { @@
                         ...sxClasses.mousePositionCheckmark,
                       }}
                     />
-                    <Box component='span'>{position}</Box>
+                    <Box component="span">{position}</Box>
                   </Box>
                 );
               })}
@@ Expand Down @@