fix(time-slider): remove margin from iconstack #1494

packages/geoview-core/src/core/components/common/close-button.tsx

@@ -16,10 +16,11 @@ interface CloseButtonProps {
  * @returns JSX.element
  */
 export function CloseButton({ isLayersPanelVisible, setIsLayersPanelVisible }: CloseButtonProps) {
-  const { t } = useTranslation();
-  const theme = useTheme();
+  const { t } = useTranslation<string>();
 
+  const theme = useTheme();
   const sxClasses = getSxClasses(theme);
+
   return (
     <Button
       type="text"

packages/geoview-core/src/core/components/common/enlarge-button.tsx

@@ -16,10 +16,11 @@ interface EnlargeButtonProps {
  * @returns JSX.element
  */
 export function EnlargeButton({ isEnlargeDataTable, setIsEnlargeDataTable }: EnlargeButtonProps) {
-  const { t } = useTranslation();
-  const theme = useTheme();
+  const { t } = useTranslation<string>();
 
+  const theme = useTheme();
   const sxClasses = getSxClasses(theme);
+
   return (
     <Button
       type="text"

packages/geoview-core/src/core/components/common/layer-list.tsx

@@ -1,92 +1,44 @@
+import { ReactNode } from 'react';
 import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'react-i18next';
-import {
-  Box,
-  ChevronRightIcon,
-  FilterAltIcon,
-  IconButton,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  Paper,
-  Tooltip,
-  Typography,
-} from '@/ui';
+import { Box, ChevronRightIcon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Paper, Tooltip, Typography } from '@/ui';
 import { getSxClasses } from './layer-list-style';
 import { IconStack } from '@/app';
 
 export interface LayerListEntry {
   layerName: string;
-  numOffeatures?: number;
   layerPath: string;
+  layerFeatures?: ReactNode | undefined;
+  mapFilteredIcon?: ReactNode | undefined;
+  tooltip?: ReactNode | undefined;
 }
 
 interface LayerListProps {
   isEnlargeDataTable: boolean;
   layerList: LayerListEntry[];
   selectedLayerIndex: number;
   handleListItemClick: (layer: LayerListEntry, index: number) => void;
-  rowsFiltered?: Record<string, number> | undefined;
-  mapFiltered?: Record<string, boolean> | undefined;
 }
 
-export function LayerList({
-  layerList,
-  isEnlargeDataTable,
-  selectedLayerIndex,
-  handleListItemClick,
-  rowsFiltered = {},
-  mapFiltered = {},
-}: LayerListProps) {
-  const { t } = useTranslation();
+/**
+ * Create a list of layers
+ * @param {LayerListEntry} layerList  Array of layer list entries.
+ * @param {boolean} isEnlargeDataTable  Boolean value if right panel is enlarged or not.
+ * @param {number} selectedLayerIndex  Current index of list item selected.
+ * @param {Function} handleListItemClick  Callback function excecuted when list item is clicked.
+ * @returns
+ */
+export function LayerList({ layerList, isEnlargeDataTable, selectedLayerIndex, handleListItemClick }: LayerListProps) {
   const theme = useTheme();
-
   const sxClasses = getSxClasses(theme);
 
-  /**
-   * Check if filtered are being set for each layer.
-   * @param {string} layerPath The path of the layer
-   * @returns boolean
-   */
-  const isMapFilteredSelectedForLayer = (layerPath: string): boolean => !!mapFiltered[layerPath];
-
-  /**
-   * Get number of features of a layer with filtered or selected layer.
-   * @param {string} layerPath the path of the layer
-   * @param {number} index index of layer in the list
-   * @returns
-   */
-  const getFeaturesOfLayer = (layerPath: string, index: number): string => {
-    return rowsFiltered && rowsFiltered[layerPath]
-      ? `${rowsFiltered[layerPath]} ${t('dataTable.featureFiltered')}`
-      : `${layerList[index].numOffeatures} ${t('dataTable.features')}`;
-  };
-
-  /**
-   * Create layer tooltip
-   * @param {TypeLocalizedString} layerName en/fr layer name
-   * @param {string} layerPath the path of the layer.
-   * @param {number} index an index of the layer in the array.
-   * @returns
-   */
-  const getLayerTooltip = (layerName: string, layerPath: string, index: number): React.ReactNode => {
-    return (
-      <Box sx={{ display: 'flex', alignContent: 'center', '& svg ': { width: '0.75em', height: '0.75em' } }}>
-        {`${layerName}${layerList[index].numOffeatures ? `, ${getFeaturesOfLayer(layerPath, index)}` : ''}`}
-        {isMapFilteredSelectedForLayer(layerPath) && <FilterAltIcon />}
-      </Box>
-    );
-  };
-
   return (
     <List sx={sxClasses.list}>
       {layerList.map((layer, index) => (
         <Paper
           sx={{ ...sxClasses.paper, border: selectedLayerIndex === index ? sxClasses.borderWithIndex : sxClasses.borderNone }}
           key={layer.layerPath}
         >
-          <Tooltip title={getLayerTooltip(layer.layerName, layer.layerPath, index)} placement="top" arrow>
+          <Tooltip title={layer.tooltip} placement="top" arrow>
             <Box>
               <ListItem disablePadding>
                 <ListItemButton selected={selectedLayerIndex === index} onClick={() => handleListItemClick(layer, index)}>
@@ -95,13 +47,13 @@ export function LayerList({
                   </ListItemIcon>
                   <Box sx={sxClasses.listPrimaryText}>
                     <Typography component="p">{layer.layerName}</Typography>
-                    {!!layer?.numOffeatures && (
+                    {!!layer?.layerFeatures && (
                       <Box sx={{ display: 'flex', alignContent: 'center' }}>
                         <Typography component="p" variant="subtitle1" noWrap>
-                          {getFeaturesOfLayer(layer.layerPath, index)}
+                          {layer.layerFeatures}
                         </Typography>
 
-                        {isMapFilteredSelectedForLayer(layer.layerPath) && <FilterAltIcon sx={{ color: theme.palette.grey['500'] }} />}
+                        {!!layer.mapFilteredIcon && layer.mapFilteredIcon}
                       </Box>
                     )}
                   </Box>

packages/geoview-core/src/core/components/common/responsive-grid.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
-import { GridProps, SxProps } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { Grid } from '@/ui';
+import { Grid, GridProps, SxProps } from '@/ui';
 
 interface ResponsiveGridProps extends GridProps {
   children: ReactNode;

packages/geoview-core/src/core/components/data-table/data-panel.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Projection } from 'ol/proj';
 import { useTranslation } from 'react-i18next';
-import { Box, Typography, CircularProgress } from '@/ui';
+import { Box, Typography, CircularProgress, FilterAltIcon } from '@/ui';
 import MapDataTable, { MapDataTableData as MapDataTableDataProps } from './map-data-table';
 import { getSxClasses } from './data-table-style';
 import { GroupLayers } from './data-table-api';
@@ -55,6 +55,41 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  /**
+   * Check if filtered are being set for each layer.
+   * @param {string} layerPath The path of the layer
+   * @returns boolean
+   */
+  const isMapFilteredSelectedForLayer = (layerPath: string): boolean => !!mapFiltered[layerPath];
+
+  /**
+   * Get number of features of a layer with filtered or selected layer.
+   * @param {string} layerPath the path of the layer
+   * @param {number} index index of layer in the list
+   * @returns
+   */
+  const getFeaturesOfLayer = (layerPath: string, index: number): string => {
+    return rowsFiltered && rowsFiltered[layerPath]
+      ? `${rowsFiltered[layerPath]} ${t('dataTable.featureFiltered')}`
+      : `${layerData[index].features.length} ${t('dataTable.features')}`;
+  };
+
+  /**
+   * Create layer tooltip
+   * @param {TypeLocalizedString} layerName en/fr layer name
+   * @param {string} layerPath the path of the layer.
+   * @param {number} index an index of the layer in the array.
+   * @returns
+   */
+  const getLayerTooltip = (layerName: string, layerPath: string, index: number): React.ReactNode => {
+    return (
+      <Box sx={{ display: 'flex', alignContent: 'center', '& svg ': { width: '0.75em', height: '0.75em' } }}>
+        {`${layerName}, ${getFeaturesOfLayer(layerPath, index)}`}
+        {isMapFilteredSelectedForLayer(layerPath) && <FilterAltIcon />}
+      </Box>
+    );
+  };
+
   /**
    * Render group layers as list.
    *
@@ -63,16 +98,16 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data
   const renderList = useCallback(
     () => (
       <LayerList
-        layerList={layerData.map((layer) => ({
+        layerList={layerData.map((layer, index) => ({
           layerName: layer.layerName![language] ?? '',
           layerPath: layer.layerKey,
-          numOffeatures: layer.features.length,
+          layerFeatures: getFeaturesOfLayer(layer.layerKey, index),
+          tooltip: getLayerTooltip(layer.layerName![language] ?? '', layer.layerKey, index),
+          mapFilteredIcon: isMapFilteredSelectedForLayer(layer.layerKey) && <FilterAltIcon sx={{ color: theme.palette.grey['500'] }} />,
         }))}
         isEnlargeDataTable={isEnlargeDataTable}
         selectedLayerIndex={selectedLayerIndex}
         handleListItemClick={handleListItemClick}
-        rowsFiltered={rowsFiltered}
-        mapFiltered={mapFiltered}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/geoview-core/src/core/components/details/details-panel.tsx

@@ -149,13 +149,24 @@ export function Detailspanel({ mapId }: DetailsPanelProps): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [arrayOfLayerData]);
 
+  /**
+   * Get number of features of a layer.
+   * @returns string
+   */
+  const getFeaturesOfLayer = (): string => {
+    const numOfFeatures = layerDataInfo?.features?.length ?? 0;
+    return `${numOfFeatures} ${t('details.feature')}${numOfFeatures > 1 ? 's' : ''}`;
+  };
+
   const renderLayerList = useCallback(() => {
     return (
       <LayerList
-        layerList={arrayOfLayerData.map((layer) => ({
+        layerList={arrayOfLayerData.map((layer, index) => ({
           layerName: layer.layerName ?? '',
           layerPath: layer.layerPath,
           numOffeatures: layer.features?.length ?? 0,
+          layerFeatures: getFeaturesOfLayer(),
+          tooltip: `${layer.layerName}, ${getFeaturesOfLayer()}`,
         }))}
         isEnlargeDataTable={isEnlargeDataTable}
         selectedLayerIndex={arrayOfLayerData.findIndex((layer) => layer.layerPath === layerDataInfo?.layerPath)}

packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx

@@ -44,7 +44,7 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element {
           setSelectedLayer(layer.layerPath);
           setIsLayersPanelVisible(false);
         }}
-        layerList={layersList.map((layer) => ({ layerName: layer, layerPath: layer }))}
+        layerList={layersList.map((layer) => ({ layerName: layer, layerPath: layer, tooltip: layer as string }))}
       />
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/geoview-core/src/ui/grid/index.ts

@@ -1,3 +1,5 @@
 import Grid from '@mui/material/Grid';
+import { GridProps, SxProps } from '@mui/material';
 
+export type { GridProps, SxProps };
 export { Grid };