Changing layers icons

packages/geoview-core/public/locales/en/translation.json

@@ -65,7 +65,9 @@
     "selected_Layers": "An overview of currrently selected layers",
     "re-arrange": "re-arrange",
     "categories_title": "Categories",
-    "items_available": "items available"
+    "items_available": "items available",
+    "layer_has_error": "Layer has an error...",
+    "layer_is_loading": "Layer is loading..."
   },
   "details": {
     "zoom_to": "Zoom to feature",

packages/geoview-core/public/locales/fr/translation.json

@@ -63,7 +63,9 @@
     "sort_layers": "Trier les calques",
     "selected_Layers": "Un aperçu des calques actuellement sélectionnés",
     "re-arrange": "Réarranger",
-    "categories_title": "Catégories"
+    "categories_title": "Catégories",
+    "layer_has_error": "La couche a une erreur...",
+    "layer_is_loading": "La couche se charge..."
   },
   "details": {
     "zoom_to": "Zoom à l'élément",

packages/geoview-core/src/core/components/layers/layers-style.ts

@@ -11,6 +11,21 @@ export const getSxClasses = (theme: Theme) => ({
       marginBottom: '5px',
     },
 
+    '& .layerItemContainer.error': {
+      background: '#ffdcdb 0% 0% no-repeat padding-box',
+      '& .MuiListItemText-secondary': {
+        fontWeight: 'bold',
+        color: 'error.main',
+      },
+    },
+    '& .layerItemContainer.loading': {
+      background: '#e5efff 0% 0% no-repeat padding-box',
+      '& .MuiListItemText-secondary': {
+        fontWeight: 'bold',
+        color: 'info.main',
+      },
+    },
+
     '& .MuiListItemText-primary': {
       font: theme.footerPanel.layerTitleFont,
     },

packages/geoview-core/src/core/components/layers/left-panel/layerslist-style.ts

@@ -11,6 +11,7 @@ export const getSxClasses = (theme: Theme) => ({
       background: '#FFFFFF 0% 0% no-repeat padding-box',
       borderRadius: '5px',
       marginBottom: '5px',
+      border: '10px solid red',
     },
 
     '& .MuiListItemText-primary': {
@@ -77,7 +78,6 @@ export const getSxClasses = (theme: Theme) => ({
   layersList: {
     selectedLayerItem: {
       border: '2px solid #515BA5',
-      backgroundColor: 'white !important',
     },
   },
 });

packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import {
   Box,
   Collapse,
-  DownloadingIcon,
   ErrorIcon,
   GroupWorkOutlinedIcon,
   IconButton,
@@ -19,10 +19,14 @@
   Tooltip,
   VisibilityOffOutlinedIcon,
   VisibilityOutlinedIcon,
+  RestartAltIcon,
+  CircularProgressBase,
+  TableViewIcon,
 } from '@/ui';
 import { TypeLegendLayer } from '../types';
 import { getSxClasses } from './layerslist-style';
 import { useLayerStoreActions, useSelectedLayerPath } from '@/core/stores/store-interface-and-intial-values/layer-state';
+import { useDataTableStoreMapFilteredRecord } from '@/core/stores/store-interface-and-intial-values/data-table-state';
 
 interface SingleLayerProps {
   layer: TypeLegendLayer;
@@ -32,19 +36,43 @@
 export function SingleLayer(props: SingleLayerProps): JSX.Element {
   const { layer, depth } = props;
 
-  const layerDescription = layer.children.length ? `${layer.children.length} layers` : `${layer.items.length} items`;
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 
+  const { t } = useTranslation<string>();
+
   const { toggleLayerVisibility, setSelectedLayerPath } = useLayerStoreActions(); // get store actions
 
   const selectedLayerPath = useSelectedLayerPath(); // get store value
+  const mapFiltered = useDataTableStoreMapFilteredRecord();
 
   const layerIsSelected = layer.layerPath === selectedLayerPath;
   const legendClass = layerIsSelected ? { ...sxClasses.layersList.selectedLayerItem } : null;
 
   const [isGroupOpen, setGroupOpen] = useState(layerIsSelected);
 
+  // get layer description
+  const getLayerDescription = () => {
+    if (layer.layerStatus === 'error') {
+      return t('legend.layer_has_error');
+    }
+    if (layer.layerStatus === 'loading') {
+      return t('legend.layer_is_loading');
+    }
+    if (layer.children.length) {
+      return `${layer.children.length} layers`;
+    }
+    if (mapFiltered[layer.layerPath]) {
+      return (
+        <Box style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'left', gap: 1 }}>
+          <span>{layer.items.length} items </span>
+          <TableViewIcon />
+        </Box>
+      );
+    }
+    return `${layer.items.length} items`;
+  };
+
   /**
    * Handle expand/shrink of layer groups.
    */
@@ -53,8 +81,10 @@
   };
 
   const handleLayerClick = () => {
+    if (!['processed', 'loaded'].includes(layer.layerStatus)) {
+      return;
+    }
     if (layer.children.length === 0) {
-      // setSelectedLayer(layer);
       setSelectedLayerPath(layer.layerPath);
     } else {
       setGroupOpen(!isGroupOpen);
@@ -65,6 +95,10 @@
     toggleLayerVisibility(layer.layerPath);
   };
 
+  const handleReloadLayer = () => {
+    console.log('reloading layer');
+  };
+
   // renders the layers children, if any
   function renderChildren() {
     if (!layer.children?.length) {
@@ -81,6 +115,17 @@
   }
 
   function renderMoreLayerButtons() {
+    if (layer.layerStatus === 'loading') {
+      return null;
+    }
+    if (layer.layerStatus === 'error') {
+      return (
+        <IconButton onClick={handleReloadLayer}>
+          <RestartAltIcon />
+        </IconButton>
+      );
+    }
+
     return (
       <IconButton color="primary" onClick={() => handleToggleVisibility()}>
         {(() => {
@@ -92,18 +137,24 @@
   }
 
   function renderArrowButtons() {
+    if (!['processed', 'loaded'].includes(layer.layerStatus)) {
+      return null;
+    }
     if (layer.children?.length) {
       return (
         <IconButton color="primary" onClick={handleExpandGroupClick}>
           {isGroupOpen ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
         </IconButton>
       );
     }
-    return (
-      <IconButton onClick={handleLayerClick}>
-        <KeyboardArrowRightIcon />
-      </IconButton>
-    );
+    if (layer.items?.length) {
+      return (
+        <IconButton onClick={handleLayerClick}>
+          <KeyboardArrowRightIcon />
+        </IconButton>
+      );
+    }
+    return null;
   }
 
   function renderCollapsible() {
@@ -128,9 +179,9 @@
     }
     if (layer.layerStatus === 'loading') {
       return (
-        <IconButton sx={{ color: 'gray' }}>
-          <DownloadingIcon />
-        </IconButton>
+        <Box sx={{ padding: '5px', marginRight: '10px' }}>
+          <CircularProgressBase size={20} />
+        </Box>
       );
     }
     if (layer?.children.length) {
@@ -148,12 +199,12 @@
   }
 
   return (
-    <Box sx={legendClass} className="layerItemContainer">
+    <Box sx={legendClass} className={`layerItemContainer ${layer.layerStatus}`}>
       <ListItem key={layer.layerName} divider>
         <ListItemButton>
           {renderLayerIcon()}
           <Tooltip title={layer.layerName} placement="top" enterDelay={1000}>
-            <ListItemText primary={layer.layerName} secondary={layerDescription} onClick={handleLayerClick} />
+            <ListItemText primary={layer.layerName} secondary={getLayerDescription()} onClick={handleLayerClick} />
           </Tooltip>
           <ListItemIcon style={{ justifyContent: 'right' }}>
             {renderMoreLayerButtons()}

packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx

@@ -2,7 +2,20 @@ import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
 import { TypeLegendLayer } from '../types';
 import { getSxClasses } from '../layers-style';
-import { Box, CheckBoxIcon, CheckBoxOutIcon, IconButton, Paper, SliderBase, Typography, ZoomInSearchIcon, Grid } from '@/ui';
+import {
+  Box,
+  CheckBoxIcon,
+  CheckBoxOutIcon,
+  IconButton,
+  Paper,
+  SliderBase,
+  Typography,
+  ZoomInSearchIcon,
+  Grid,
+  RestartAltIcon,
+  HighlightOutlinedIcon,
+  TableViewIcon,
+} from '@/ui';
 import { useLayerStoreActions } from '@/core/stores/store-interface-and-intial-values/layer-state';
 
 interface LayerDetailsProps {
@@ -80,6 +93,25 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
     );
   }
 
+  function renderLayerButtons() {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+        <IconButton sx={{ backgroundColor: '#F6F6F6' }}>
+          <TableViewIcon />
+        </IconButton>
+        <IconButton sx={{ backgroundColor: '#F6F6F6' }}>
+          <RestartAltIcon />
+        </IconButton>
+        <IconButton sx={{ backgroundColor: '#F6F6F6' }}>
+          <HighlightOutlinedIcon />
+        </IconButton>
+        <IconButton onClick={handleZoomTo} sx={{ backgroundColor: '#F6F6F6' }}>
+          <ZoomInSearchIcon />
+        </IconButton>
+      </Box>
+    );
+  }
+
   // function renderItems
 
   return (
@@ -89,11 +121,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
           <Typography sx={sxClasses.categoryTitle}> {layerDetails.layerName} </Typography>
           <Typography sx={{ fontSize: '0.8em' }}> {`${layerDetails.items.length} items available`} </Typography>
         </Box>
-        <div>
-          <IconButton onClick={handleZoomTo} sx={{ backgroundColor: '#F6F6F6' }}>
-            <ZoomInSearchIcon />
-          </IconButton>
-        </div>
+        {renderLayerButtons()}
       </Box>
       {renderOpacityControl()}
       <Box sx={{ marginTop: '20px' }}>{renderItems()}</Box>

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

@@ -37,6 +37,7 @@ export {
   GroupWork as GroupWorkIcon,
   GroupWorkOutlined as GroupWorkOutlinedIcon,
   Help as HelpIcon,
+  HighlightOutlined as HighlightOutlinedIcon,
   Home as HomeIcon,
   HubOutlined as HubOutlinedIcon,
   ImportExport as ReorderIcon,
@@ -67,9 +68,12 @@ export {
   RadioButtonUnchecked as RadioButtonUncheckedIcon,
   Remove as ZoomOutIcon,
   RemoveCircleOutline as RemoveCircleOutlineIcon,
+  RestartAlt as RestartAltIcon,
   Search as SearchIcon,
   Send as SendIcon,
   Storage as StorageIcon,
+  TableView as TableViewIcon,
+  TableChartOutlined as TableChartOutlinedIcon,
   Visibility as VisibilityIcon,
   VisibilityOff as VisibilityOffIcon,
   VisibilityOutlined as VisibilityOutlinedIcon,