fix(ui): reorganize ui component to follow best pratices (#2754)

* fix(ui): PErformance for ui Closes #2743 * continue fix ui * fix remaining * fix review * remove memo and improve doc * fix review * fix last comment
Canadian-Geospatial-Platform · Feb 19, 2025 · 2db3b31 · 2db3b31
1 parent f32442a
commit 2db3b31
Show file tree

Hide file tree

Showing 106 changed files with 2,428 additions and 1,416 deletions.
diff --git a/packages/geoview-aoi-panel/src/index.tsx b/packages/geoview-aoi-panel/src/index.tsx
@@ -1,7 +1,7 @@
 import { TypeJsonObject, toJsonObject, AnySchemaObject, Cast } from 'geoview-core/src/core/types/global-types';
 import { AppBarPlugin } from 'geoview-core/src/api/plugin/appbar-plugin';
 import { AoiIcon } from 'geoview-core/src/ui/icons';
-import { TypeIconButtonProps } from 'geoview-core/src/ui/icon-button/icon-button-types';
+import { IconButtonPropsExtend } from 'geoview-core/src/ui/icon-button/icon-button';
 import { TypePanelProps } from 'geoview-core/src/ui/panel/panel-types';
 import { AoiPanel } from './aoi-panel';
 import schema from '../schema.json';
@@ -45,7 +45,7 @@ class AoiPanelPlugin extends AppBarPlugin {
     },
   });
 
-  override onCreateButtonProps(): TypeIconButtonProps {
+  override onCreateButtonProps(): IconButtonPropsExtend {
     // Button props
     return {
       id: `aoi-panel`,

diff --git a/packages/geoview-basemap-panel/src/index.tsx b/packages/geoview-basemap-panel/src/index.tsx
@@ -1,7 +1,7 @@
 import { TypeJsonObject, toJsonObject, AnySchemaObject, Cast } from 'geoview-core/src/core/types/global-types';
 import { AppBarPlugin } from 'geoview-core/src/api/plugin/appbar-plugin';
 import { MapIcon } from 'geoview-core/src/ui/icons';
-import { TypeIconButtonProps } from 'geoview-core/src/ui/icon-button/icon-button-types';
+import { IconButtonPropsExtend } from 'geoview-core/src/ui/icon-button/icon-button';
 import { TypePanelProps } from 'geoview-core/src/ui/panel/panel-types';
 import { BasemapPanel } from './basemap-panel';
 import schema from '../schema.json';
@@ -101,7 +101,7 @@ class BasemapPanelPlugin extends AppBarPlugin {
     },
   });
 
-  override onCreateButtonProps(): TypeIconButtonProps {
+  override onCreateButtonProps(): IconButtonPropsExtend {
     // Button props
     return {
       id: `basemap-panel`,

diff --git a/packages/geoview-core/src/api/plugin/appbar-plugin.ts b/packages/geoview-core/src/api/plugin/appbar-plugin.ts
@@ -1,7 +1,7 @@
 import { TypeButtonPanel, TypePanelProps } from '@/ui/panel/panel-types';
 import { AbstractPlugin } from './abstract-plugin';
 import { TypeWindow } from '@/core/types/global-types';
-import { TypeIconButtonProps } from '@/ui/icon-button/icon-button-types';
+import { IconButtonPropsExtend } from '@/ui/icon-button/icon-button';
 
 /** ******************************************************************************************************************************
  * AppBar Plugin abstract class.
@@ -11,16 +11,16 @@ export abstract class AppBarPlugin extends AbstractPlugin {
   buttonPanel?: TypeButtonPanel;
 
   // Store the button props
-  buttonProps?: TypeIconButtonProps;
+  buttonProps?: IconButtonPropsExtend;
 
   // Store the panel props
   panelProps?: TypePanelProps;
 
   /**
    * Overridable function to create app bar button props content
-   * @returns TypeIconButtonProps The app bar button props content
+   * @returns IconButtonPropsExtend The app bar button props content
    */
-  onCreateButtonProps(): TypeIconButtonProps {
+  onCreateButtonProps(): IconButtonPropsExtend {
     // Override this to create the button props..
 
     // Fetch cgpv

diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar-api.ts b/packages/geoview-core/src/core/components/app-bar/app-bar-api.ts
@@ -1,5 +1,5 @@
 import { CONST_PANEL_TYPES, TypeButtonPanel, TypePanelProps } from '@/ui/panel/panel-types';
-import { TypeIconButtonProps } from '@/ui/icon-button/icon-button-types';
+import { IconButtonPropsExtend } from '@/ui/icon-button/icon-button';
 
 import { generateId } from '@/core/utils/utilities';
 import EventHelper, { EventDelegateBase } from '@/api/events/event-helper';
@@ -103,20 +103,20 @@ export class AppBarApi {
   /**
    * Creates a button on the app-bar that will open a panel
    *
-   * @param {TypeIconButtonProps} buttonProps - Button properties (icon, tooltip)
+   * @param {IconButtonPropsExtend} buttonProps - Button properties (icon, tooltip)
    * @param {TypePanelProps} panelProps - Panel properties (icon, title, content)
    * @param {string | null | undefined} groupName - Optional value to set this button in a group
    * @returns {TypeButtonPanel | null} The created panel
    */
   createAppbarPanel(
-    buttonProps: TypeIconButtonProps,
+    buttonProps: IconButtonPropsExtend,
     panelProps: TypePanelProps,
     groupName?: string | null | undefined
   ): TypeButtonPanel | null {
     if (buttonProps && panelProps) {
       const buttonPanelId = `${this.mapId}${generateId(buttonProps.id)}`;
 
-      const button: TypeIconButtonProps = {
+      const button: IconButtonPropsExtend = {
         ...buttonProps,
         id: buttonPanelId,
         visible: buttonProps.visible === undefined ? true : buttonProps.visible,

diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
@@ -8,7 +8,7 @@ import {
   ListItem,
   Panel,
   IconButton,
-  TypeIconButtonProps,
+  IconButtonPropsExtend,
   QuestionMarkIcon,
   InfoOutlinedIcon,
   HubOutlinedIcon,
@@ -305,8 +305,8 @@ export function AppBar(props: AppBarProps): JSX.Element {
     }
     appBarConfigTabs
       .filter((tab) => CV_DEFAULT_APPBAR_TABS_ORDER.includes(tab) && memoPanels[tab])
-      .map((tab): [TypeIconButtonProps, TypePanelProps, string] => {
-        const button: TypeIconButtonProps = {
+      .map((tab): [IconButtonPropsExtend, TypePanelProps, string] => {
+        const button: IconButtonPropsExtend = {
           id: `AppbarPanelButton${capitalize(tab)}`,
           tooltip: t(`${camelCase(tab)}.title`)!,
           tooltipPlacement: 'bottom',
@@ -367,8 +367,8 @@ export function AppBar(props: AppBarProps): JSX.Element {
                     <ListItem>
                       <IconButton
                         id={buttonPanel.button.id}
-                        aria-label={buttonPanel.button.tooltip}
-                        tooltip={buttonPanel.button.tooltip}
+                        aria-label={t(buttonPanel.button.tooltip!) as string}
+                        tooltip={t(buttonPanel.button.tooltip!) as string}
                         tooltipPlacement="right"
                         className={`buttonFilled ${tabId === buttonPanel.button.id && isOpen ? 'active' : ''}`}
                         size="small"
@@ -429,14 +429,14 @@ export function AppBar(props: AppBarProps): JSX.Element {
                     key={`panel-${index.toString()}`}
                     panel={buttonPanel.panel}
                     button={buttonPanel.button}
-                    onPanelOpened={buttonPanel.onPanelOpened}
-                    onPanelClosed={hideClickMarker}
-                    handleKeyDown={(event: KeyboardEvent) =>
+                    onOpen={buttonPanel.onOpen}
+                    onClose={hideClickMarker}
+                    onKeyDown={(event: KeyboardEvent) =>
                       handleEscapeKey(event.key, tabId, isFocusTrapped, () => {
                         handleGeneralCloseClicked(buttonPanel.button?.id ?? '', buttonPanel?.groupName ?? '');
                       })
                     }
-                    onGeneralCloseClicked={() => handleGeneralCloseClicked(buttonPanel.button?.id ?? '', buttonPanel?.groupName ?? '')}
+                    onGeneralClose={() => handleGeneralCloseClicked(buttonPanel.button?.id ?? '', buttonPanel?.groupName ?? '')}
                   />
                 );
               }

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
@@ -98,11 +98,11 @@ export default function Version(): JSX.Element {
       <Box>
         <IconButton
           id="version-button"
-          tooltip="appbar.version"
+          tooltip={t('appbar.version') as string}
+          aria-label={t('appbar.version') as string}
           tooltipPlacement="bottom-end"
           onClick={handleOpenPopover}
           className={`${interaction === 'dynamic' ? 'buttonFilled' : 'style4'} ${open ? 'active' : ''}`}
-          aria-label="appbar.version"
         >
           <SvgIcon viewBox="-4 -2 38 36">
             <GeoCaIcon />

diff --git a/packages/geoview-core/src/core/components/attribution/attribution.tsx b/packages/geoview-core/src/core/components/attribution/attribution.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState, memo } from 'react';
-
+import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
 
 import { Box, MoreHorizIcon, Popover, IconButton, Typography } from '@/ui';
@@ -40,6 +40,7 @@ export const Attribution = memo(function Attribution(): JSX.Element {
   logger.logTraceRender('components/attribution/attribution');
 
   // Hooks
+  const { t } = useTranslation<string>();
   const theme = useTheme();
 
   // State
@@ -79,8 +80,8 @@ export const Attribution = memo(function Attribution(): JSX.Element {
         onClick={handleOpenPopover}
         className={open ? 'active' : ''}
         tooltipPlacement="top"
-        tooltip="mapctrl.attribution.tooltip"
-        aria-label="mapctrl.attribution.tooltip"
+        tooltip={t('mapctrl.attribution.tooltip') as string}
+        aria-label={t('mapctrl.attribution.tooltip') as string}
         sx={buttonStyles}
       >
         <MoreHorizIcon />

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
@@ -200,7 +200,7 @@ const ResponsiveGridLayout = forwardRef(
             ...(fullWidth ? sxClasses.appBarEnlargeButton : sxClasses.footerBarEnlargeButton),
           }}
           onClick={() => setIsRightPanelVisible(false)}
-          tooltip={t('dataTable.close') ?? ''}
+          tooltip={t('dataTable.close') as string}
         >
           {t('dataTable.close')}
         </Button>

diff --git a/packages/geoview-core/src/core/components/data-table/export-button.tsx b/packages/geoview-core/src/core/components/data-table/export-button.tsx
@@ -6,7 +6,7 @@ import { ExportToCsv, Options } from 'export-to-csv';
 
 import { type MRT_ColumnDef as MRTColumnDef } from 'material-react-table';
 
-import { IconButton, DownloadIcon, Tooltip, Menu, MenuItem } from '@/ui';
+import { IconButton, DownloadIcon, Menu, MenuItem } from '@/ui';
 import { logger } from '@/core/utils/logger';
 import { ColumnsType } from './data-table-types';
 import { useLayerStoreActions } from '@/core/stores/store-interface-and-intial-values/layer-state';
@@ -107,10 +107,8 @@ function ExportButton({ layerPath, rows, columns, children }: ExportButtonProps)
 
   return (
     <>
-      <IconButton onClick={handleClick} className="buttonOutline">
-        <Tooltip title={t('dataTable.exportBtn')} placement="bottom" enterDelay={100}>
-          <DownloadIcon />
-        </Tooltip>
+      <IconButton onClick={handleClick} tooltip={t('dataTable.exportBtn') as string} className="buttonOutline">
+        <DownloadIcon />
       </IconButton>
       <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
         <MenuItem onClick={handleExportData}>{t('dataTable.downloadAsCSV')}</MenuItem>

diff --git a/packages/geoview-core/src/core/components/data-table/top-toolbar.tsx b/packages/geoview-core/src/core/components/data-table/top-toolbar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, IconButton, Tooltip } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
 /* eslint-disable camelcase */
 import {
   MRT_GlobalFilterTextField as MRTGlobalFilterTextField,
@@ -83,10 +83,13 @@ function TopToolbar(props: TopToolbarProps<ColumnsType>): JSX.Element {
           <MRTGlobalFilterTextField className="buttonOutline" table={table} />
         </Box>
         <Box display="flex" sx={{ justifyContent: 'space-around' }}>
-          <IconButton className="buttonOutline" color="primary" onClick={() => useTable?.resetColumnFilters()}>
-            <Tooltip title={t('dataTable.clearFilters')} placement="bottom" arrow>
-              <ClearFiltersIcon />
-            </Tooltip>
+          <IconButton
+            className="buttonOutline"
+            title={t('dataTable.clearFilters')}
+            color="primary"
+            onClick={() => useTable?.resetColumnFilters()}
+          >
+            <ClearFiltersIcon />
           </IconButton>
 
           <MRTToggleFiltersButton className="buttonOutline" table={table} />

diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx
@@ -459,8 +459,8 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
                   .replace('{total}', `${memoSelectedLayerDataFeatures?.length}`)}
                 <IconButton
                   sx={{ marginLeft: '1.25rem', [theme.breakpoints.down('sm')]: { display: 'none' } }}
-                  aria-label="clear-all-features"
-                  tooltip="details.clearAllfeatures"
+                  aria-label={t('details.clearAllfeatures') as string}
+                  tooltip={t('details.clearAllfeatures') as string}
                   tooltipPlacement="top"
                   onClick={() => handleClearAllHighlights()}
                   className="buttonOutline"
@@ -473,8 +473,8 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
             <Grid size={{ xs: 6 }}>
               <Box sx={{ textAlign: 'right', marginRight: '1.625rem' }}>
                 <IconButton
-                  aria-label="backward"
-                  tooltip="details.previousFeatureBtn"
+                  aria-label={t('details.previousFeatureBtn') as string}
+                  tooltip={t('details.previousFeatureBtn') as string}
                   tooltipPlacement="top"
                   onClick={() => handleFeatureNavigateChange(-1)}
                   disabled={currentFeatureIndex <= 0}
@@ -484,8 +484,8 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
                 </IconButton>
                 <IconButton
                   sx={{ marginLeft: '1.25rem' }}
-                  aria-label="forward"
-                  tooltip="details.nextFeatureBtn"
+                  aria-label={t('details.nextFeatureBtn') as string}
+                  tooltip={t('details.nextFeatureBtn') as string}
                   tooltipPlacement="top"
                   onClick={() => handleFeatureNavigateChange(1)}
                   disabled={!memoSelectedLayerData?.features || currentFeatureIndex + 1 >= memoSelectedLayerData!.features!.length}

diff --git a/packages/geoview-core/src/core/components/details/feature-info.tsx b/packages/geoview-core/src/core/components/details/feature-info.tsx
@@ -69,10 +69,15 @@ const FeatureHeader = memo(function FeatureHeader({ iconSrc, name, hasGeometry,
         <Tooltip title={t('details.keepFeatureSelected')} placement="top" enterDelay={1000}>
           <Checkbox disabled={!hasGeometry} onChange={onCheckChange} checked={checked} sx={sxClasses.selectFeatureCheckbox} />
         </Tooltip>
-        <IconButton color="primary" disabled={!hasGeometry} onClick={onZoomIn} className="buttonOutline">
-          <Tooltip title={t('details.zoomTo')} placement="top" enterDelay={1000}>
-            <ZoomInSearchIcon />
-          </Tooltip>
+        <IconButton
+          color="primary"
+          tooltip={t('details.zoomTo') as string}
+          tooltipPlacement="top"
+          disabled={!hasGeometry}
+          onClick={onZoomIn}
+          className="buttonOutline"
+        >
+          <ZoomInSearchIcon />
         </IconButton>
       </Box>
     </Box>

diff --git a/packages/geoview-core/src/core/components/export/export-modal-button.tsx b/packages/geoview-core/src/core/components/export/export-modal-button.tsx
@@ -1,4 +1,6 @@
-import { IconButton, DownloadIcon } from '@/ui';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '@/ui/icon-button/icon-button';
+import { DownloadIcon } from '@/ui/icons/index';
 import { useUIStoreActions } from '@/core/stores/store-interface-and-intial-values/ui-state';
 import { useGeoViewMapId } from '@/core/stores/geoview-store';
 
@@ -16,19 +18,22 @@ interface ExportProps {
  * @returns {JSX.Element} the export button
  */
 export default function ExportButton({ className = '', sxDetails }: ExportProps): JSX.Element {
+  // Hooks
+  const { t } = useTranslation<string>();
+
   // get store function
   const mapId = useGeoViewMapId();
   const { enableFocusTrap } = useUIStoreActions();
 
   return (
     <IconButton
       id={`${mapId}-export-btn`}
-      tooltip="appbar.export"
+      tooltip={t('appbar.export') as string}
+      aria-label={t('appbar.export') as string}
       tooltipPlacement="bottom-end"
       onClick={() => enableFocusTrap({ activeElementId: 'export', callbackElementId: `${mapId}-export-btn` })}
       sx={sxDetails}
       className={className}
-      aria-label="appbar.export"
     >
       <DownloadIcon />
     </IconButton>

diff --git a/packages/geoview-core/src/core/components/footer-bar/hooks/resize-footer-panel.tsx b/packages/geoview-core/src/core/components/footer-bar/hooks/resize-footer-panel.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { useState, MouseEvent, useMemo, memo, useCallback } from 'react';
 import Slider from '@mui/material/Slider';
 import { useGeoViewMapId } from '@/core/stores/geoview-store';
@@ -33,6 +34,7 @@ export const ResizeFooterPanel = memo(function ResizeFooterPanel(): JSX.Element
   logger.logTraceRender('components/footer-bar/hooks/resize-footer-panel');
 
   // Hooks
+  const { t } = useTranslation<string>();
   const sxClasses = useMemo(() => getSxClasses(), []);
 
   // Store
@@ -70,7 +72,7 @@ export const ResizeFooterPanel = memo(function ResizeFooterPanel(): JSX.Element
   const open = Boolean(anchorEl);
   return (
     <>
-      <IconButton onClick={(e) => handleClick(e)} tooltip="footerBar.resizeTooltip">
+      <IconButton onClick={(e) => handleClick(e)} tooltip={t('footerBar.resizeTooltip') as string}>
         <HeightIcon />
       </IconButton>
       <Popover

diff --git a/packages/geoview-core/src/core/components/geolocator/geolocator-result.tsx b/packages/geoview-core/src/core/components/geolocator/geolocator-result.tsx
@@ -189,7 +189,7 @@ export function GeolocatorResult({ geoLocationData, searchValue, error }: Geoloc
               size="small"
               edge="end"
               color="inherit"
-              tooltip="geolocator.clearFilters"
+              tooltip={t('geolocator.clearFilters') as string}
               onClick={handleClearFilters}
               disabled={!geoLocationData.length}
             >