fix(details): layer list of details component #1494

Canadian-Geospatial-Platform · Nov 15, 2023 · 3b41a59 · 3b41a59
1 parent 6ea2ad2
commit 3b41a59
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 101 deletions.
diff --git a/packages/geoview-core/src/core/components/common/layer-list-style.ts b/packages/geoview-core/src/core/components/common/layer-list-style.ts
@@ -38,6 +38,7 @@ export const getSxClasses = (theme: Theme) => ({
     minWidth: '0',
     marginTop: '0.5rem',
     marginBottom: '0.5rem',
+    marginLeft: '10px',
     flex: '1 1 auto',
     display: 'flex',
     flexDirection: 'column',

diff --git a/packages/geoview-core/src/core/components/common/layer-list.tsx b/packages/geoview-core/src/core/components/common/layer-list.tsx
@@ -16,14 +16,22 @@ import {
   Typography,
 } from '@/ui';
 import { getSxClasses } from './layer-list-style';
+import { IconStack } from '@/app';
+
+export interface LayerListEntry {
+  layerName: string;
+  numOffeatures: number;
+  layerId: string;
+  layerPath: string;
+}
 
 interface LayerListProps {
   isEnlargeDataTable: boolean;
-  layerList: Array<{ layerName: string; numOffeatures: number; layerId: string; layerPath: string }>;
+  layerList: LayerListEntry[];
   selectedLayerIndex: number;
-  handleListItemClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => void;
-  rowsFiltered: Record<string, number> | undefined;
-  mapFiltered: Record<string, boolean> | undefined;
+  handleListItemClick: (layer: LayerListEntry, index: number) => void;
+  rowsFiltered?: Record<string, number> | undefined;
+  mapFiltered?: Record<string, boolean> | undefined;
 }
 
 export function LayerList({
@@ -76,28 +84,27 @@ export function LayerList({
 
   return (
     <List sx={sxClasses.list}>
-      {layerList.map(({ layerPath, layerName }, index) => (
+      {layerList.map((layer, index) => (
         <Paper
           sx={{ ...sxClasses.paper, border: selectedLayerIndex === index ? sxClasses.borderWithIndex : sxClasses.borderNone }}
-          key={layerPath}
+          key={layer.layerPath}
         >
-          <Tooltip title={getLayerTooltip(layerName, layerPath, index)} placement="top" arrow>
+          <Tooltip title={getLayerTooltip(layer.layerName, layer.layerPath, index)} placement="top" arrow>
             <Box>
               <ListItem disablePadding>
-                <ListItemButton selected={selectedLayerIndex === index} onClick={(event) => handleListItemClick(event, index)}>
+                <ListItemButton selected={selectedLayerIndex === index} onClick={() => handleListItemClick(layer, index)}>
                   <ListItemIcon>
-                    <SendIcon sx={{ width: '0.75em', height: '0.75em' }} />
+                    <IconStack layerPath={layer.layerPath} />
                   </ListItemIcon>
                   <Box sx={sxClasses.listPrimaryText}>
-                    <Typography component="p">{layerName}</Typography>
+                    <Typography component="p">{layer.layerName}</Typography>
                     <Box sx={{ display: 'flex', alignContent: 'center' }}>
                       <Typography component="p" variant="subtitle1" noWrap>
-                        {getFeaturesOfLayer(layerPath, index)}
+                        {getFeaturesOfLayer(layer.layerPath, index)}
                       </Typography>
-                      {isMapFilteredSelectedForLayer(layerPath) && <FilterAltIcon sx={{ color: theme.palette.grey['500'] }} />}
+                      {isMapFilteredSelectedForLayer(layer.layerPath) && <FilterAltIcon sx={{ color: theme.palette.grey['500'] }} />}
                     </Box>
                   </Box>
-
                   <Box
                     sx={{
                       padding: isEnlargeDataTable ? '0.25rem' : '1rem',

diff --git a/packages/geoview-core/src/core/components/data-table/data-panel.tsx b/packages/geoview-core/src/core/components/data-table/data-panel.tsx
@@ -16,7 +16,7 @@ import {
   useDataTableStoreSelectedLayerIndex,
 } from '@/core/stores/store-interface-and-intial-values/data-table-state';
 
-import { ResponsiveGrid, EnlargeButton, CloseButton, LayerList } from '../common';
+import { ResponsiveGrid, EnlargeButton, CloseButton, LayerList, LayerListEntry } from '../common';
 
 interface DatapanelProps {
   layerData: (MapDataTableDataProps & GroupLayers)[];
@@ -48,7 +48,7 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data
   const rowsFiltered = useDataTableStoreRowsFiltered();
   const { setSelectedLayerIndex, setIsEnlargeDataTable } = useDataTableStoreActions();
 
-  const handleListItemClick = useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
+  const handleListItemClick = useCallback((layer: LayerListEntry, index: number) => {
     setSelectedLayerIndex(index);
     setIsLoading(true);
     setIsLayersPanelVisible(false);
@@ -128,7 +128,7 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data
 
           {!isLoading &&
             layerData.map(({ layerKey, layerId }, index) => (
-              <Box key={layerKey} sx={{ [theme.breakpoints.up('lg')]: { paddingLeft: '3.5rem' } }}>
+              <Box key={layerKey}>
                 {index === selectedLayerIndex ? (
                   <Box>
                     {layerData[index].features.length ? (

diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx
@@ -43,7 +43,7 @@ import {
   useDetailsStoreLayerDataArray,
   useDetailsStoreSelectedLayerPath,
 } from '@/core/stores/store-interface-and-intial-values/details-state';
-import { ResponsiveGrid, CloseButton, EnlargeButton } from '../common';
+import { ResponsiveGrid, CloseButton, EnlargeButton, LayerList } from '../common';
 
 interface DetailsPanelProps {
   mapId: string;
@@ -164,79 +164,24 @@ export function Detailspanel({ mapId }: DetailsPanelProps): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [arrayOfLayerData]);
 
-  /**
-   * Create layer tooltip
-   * @param {string} layerName en/fr layer name
-   * @param {number} numOfFeatures number of features for a layer.
-   * @returns
-   */
-  const getLayerTooltip = (layerName: string, numOfFeatures: number): React.ReactNode => {
-    return `${layerName ?? t('details.clickOnMap')}, ${numOfFeatures} ${t('details.feature')}${numOfFeatures > 1 ? 's' : ''}`;
-  };
-
   const renderLayerList = useCallback(() => {
     return (
-      <List sx={sxClasses.list}>
-        {arrayOfLayerData.map((layerData) => {
-          const isSelectedBorder = layerData.layerPath === layerDataInfo?.layerPath;
-          const numOfFeatures = layerData.features!.length;
-
-          return (
-            <Paper
-              sx={{ ...sxClasses.paper, border: isSelectedBorder ? sxClasses.borderWithIndex : sxClasses.borderNone }}
-              key={layerData.layerPath}
-            >
-              <Tooltip title={getLayerTooltip(layerData.layerName, numOfFeatures)} placement="top" arrow>
-                <Box>
-                  <ListItem disablePadding>
-                    <ListItemButton
-                      onClick={() => {
-                        setLayerDataInfo(layerData);
-                        setCurrentFeatureIndex(0);
-                        setSelectedLayerPath(layerData.layerPath);
-                        setIsLayersPanelVisible(false);
-                      }}
-                    >
-                      <ListItemIcon>
-                        <IconStack layerPath={layerData.layerPath} />
-                      </ListItemIcon>
-                      <Box sx={sxClasses.listPrimaryText}>
-                        <Typography component="p">{layerData.layerName ? layerData.layerName : t('details.clickOnMap')}</Typography>
-                        <Box sx={{ display: 'flex', alignContent: 'center' }}>
-                          <Typography component="p" variant="subtitle1" noWrap>
-                            {`${numOfFeatures} ${t('details.feature')}${numOfFeatures > 1 ? 's' : ''}`}
-                          </Typography>
-                        </Box>
-                      </Box>
-                      <Box
-                        sx={{
-                          padding: isEnlargeDataTable ? '0.25rem' : '1rem',
-                          paddingRight: isEnlargeDataTable ? '0.25rem' : '1rem',
-                          [theme.breakpoints.down('xl')]: {
-                            display: isEnlargeDataTable ? 'none !important' : 'block',
-                          },
-                          [theme.breakpoints.down('sm')]: {
-                            display: 'none',
-                          },
-                        }}
-                      >
-                        <IconButton
-                          disabled
-                          edge="end"
-                          size="small"
-                          sx={{ color: `${theme.palette.primary.main} !important`, background: `${theme.palette.grey.A100} !important` }}
-                        >
-                          <ChevronRightIcon />
-                        </IconButton>
-                      </Box>
-                    </ListItemButton>
-                  </ListItem>
-                </Box>
-              </Tooltip>
-            </Paper>
-          );
-        })}
-      </List>
+      <LayerList
+        layerList={arrayOfLayerData.map((layer) => ({
+          layerId: layer.layerName,
+          layerName: layer.layerName ?? '',
+          layerPath: layer.layerPath,
+          numOffeatures: layer.features?.length ?? 0,
+        }))}
+        isEnlargeDataTable={isEnlargeDataTable}
+        selectedLayerIndex={arrayOfLayerData.findIndex((layer) => layer.layerPath === layerDataInfo?.layerPath)}
+        handleListItemClick={(layer, index: number) => {
+          setLayerDataInfo(arrayOfLayerData[index]);
+          setCurrentFeatureIndex(0);
+          setSelectedLayerPath(arrayOfLayerData[index].layerPath);
+          setIsLayersPanelVisible(false);
+        }}
+      />
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layerDataInfo, arrayOfLayerData, isEnlargeDataTable]);

diff --git a/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts b/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts
@@ -42,7 +42,7 @@ export const getSxClasses = () => ({
   },
   stackIconsBox: {
     position: 'relative',
-    marginLeft: 8,
+    marginLeft: '0.5rem',
     '&:focus': {
       outlineColor: 'grey',
     },

diff --git a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx
@@ -2,18 +2,7 @@
 import React, { useCallback, useState } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { t } from 'i18next';
-import {
-  Box,
-  ChevronRightIcon,
-  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 './time-slider-style';
 import { TimeSlider } from './time-slider';
 import { api, getLocalizedValue, IconStack } from '@/app';