Merge pull request #1352 from kaminderpal/1348-data-table-refresh

fix(Datatable): fix data table refresh when layer change (#1352)
Canadian-Geospatial-Platform · Sep 29, 2023 · edb33d2 · edb33d2
2 parents da0b3f6 + c1d8064
commit edb33d2
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 60 deletions.
diff --git a/packages/geoview-core/public/templates/raw-data-table.html b/packages/geoview-core/public/templates/raw-data-table.html
@@ -75,7 +75,7 @@ <h4 id="HUC1">1. Default Configuration</h4>
       };
 
       cgpv.api.event.on(cgpv.api.eventNames.MAP.EVENT_MAP_LOADED, (payload) => {
-        renderDataTableFromMap();
+        setTimeout(() => { renderDataTableFromMap(); }, 2000)
       }, 'mapWM1');
 
     });

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
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { Projection } from 'ol/proj';
 import {
   Box,
@@ -13,6 +13,7 @@ import {
   ListItemIcon,
   SendIcon,
   ChevronRightIcon,
+  CircularProgress,
 } from '@/ui';
 import MapDataTable, { MapDataTableData as MapDataTableDataProps } from './map-data-table';
 
@@ -50,12 +51,14 @@ const sxClasses = {
  */
 
 export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layerIds }: DatapanelProps) {
-  const [data, setData] = useState(layerData[0]);
-  const layerKeyRef = useRef<string>(layerKeys[0]);
   const [selectedLayerIndex, setSelectedLayerIndex] = useState(0);
+  const [isLoading, setisLoading] = useState(false);
+
+  // useEffect(() => {}, [isLoading]);
 
   const handleListItemClick = useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
     setSelectedLayerIndex(index);
+    setisLoading(true);
   }, []);
 
   /**
@@ -100,10 +103,11 @@ export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layer
   );
 
   useEffect(() => {
-    layerKeyRef.current = layerKeys[selectedLayerIndex];
-    setData(layerData[selectedLayerIndex]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedLayerIndex]);
+    const clearLoading = setTimeout(() => {
+      setisLoading(false);
+    }, 1000);
+    return () => clearTimeout(clearLoading);
+  }, [isLoading, selectedLayerIndex]);
 
   return (
     <Box sx={sxClasses.dataPanel}>
@@ -129,17 +133,24 @@ export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layer
             {layerKeys[selectedLayerIndex]}
           </Typography>
 
-          {data.features.length ? (
-            <MapDataTable
-              data={data}
-              layerId={layerIds[selectedLayerIndex]}
-              mapId={mapId}
-              layerKey={layerKeyRef.current}
-              projectionConfig={projectionConfig}
-            />
-          ) : (
-            'No Data'
-          )}
+          <CircularProgress isLoaded={isLoading} style={{ marginTop: '1rem' }} />
+
+          {!isLoading &&
+            layerKeys.map((layerKey, index) => (
+              <Box key={layerKey} sx={{ display: index === selectedLayerIndex ? 'block' : 'none' }}>
+                {layerData[index].features.length ? (
+                  <MapDataTable
+                    data={layerData[index]}
+                    layerId={layerIds[index]}
+                    mapId={mapId}
+                    layerKey={layerKey}
+                    projectionConfig={projectionConfig}
+                  />
+                ) : (
+                  'No Data'
+                )}
+              </Box>
+            ))}
         </Grid>
       </Grid>
     </Box>

diff --git a/packages/geoview-core/src/core/components/data-table/map-data-table.tsx b/packages/geoview-core/src/core/components/data-table/map-data-table.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import debounce from 'lodash/debounce';
 import startCase from 'lodash/startCase';
@@ -417,7 +417,7 @@ function MapDataTable({ data, layerId, mapId, layerKey, projectionConfig }: MapD
 
     return columnList;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data.fieldAliases]);
+  }, []);
 
   /**
    * featureinfo data grid Zoom in/out handling
@@ -448,7 +448,16 @@ function MapDataTable({ data, layerId, mapId, layerKey, projectionConfig }: MapD
       };
     }) as unknown as ColumnsType[];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data.features]);
+  }, []);
+
+  // reset table features when layer changes.
+  useEffect(() => {
+    setSorting([]);
+    setColumnFilters([]);
+    setRowSelection({});
+    setMapFiltered(false);
+    setToolbarRowSelectedMessage('');
+  }, [layerId]);
 
   return (
     <Box>
@@ -519,4 +528,4 @@ function MapDataTable({ data, layerId, mapId, layerKey, projectionConfig }: MapD
   );
 }
 
-export default MapDataTable;
+export default memo(MapDataTable);
diff --git a/packages/geoview-core/src/ui/circular-progress/circular-progress.tsx b/packages/geoview-core/src/ui/circular-progress/circular-progress.tsx
@@ -1,8 +1,6 @@
 /* eslint-disable react/require-default-props */
 import { CSSProperties } from 'react';
-import { CircularProgress as MaterialCircularProgress, CircularProgressProps } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { CircularProgress as MaterialCircularProgress, CircularProgressProps, Box } from '@mui/material';
 
 /**
  * Circular Progress Properties
@@ -13,48 +11,19 @@ interface TypeCircularProgressProps extends CircularProgressProps {
   isLoaded: boolean;
 }
 
-const useStyles = makeStyles((theme) => {
-  return {
-    loading: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      position: 'absolute',
-      top: '0px',
-      bottom: '0px',
-      left: '0px',
-      right: '0px',
-      zIndex: 10000,
-      backgroundColor: '#000000',
-      textAlign: 'center',
-      transition: theme.transitions.create(['visibility', 'opacity'], {
-        delay: theme.transitions.duration.shortest,
-        easing: theme.transitions.easing.easeOut,
-        duration: theme.transitions.duration.splash,
-      }),
-    },
-    progress: {
-      width: '100px !important',
-      height: '100px !important',
-      position: 'absolute',
-    },
-  };
-});
-
 /**
  * Create a customized Material UI Circular Progress
  *
  * @param {TypeCircularProgressProps} props the properties passed to the circular progress element
  * @returns {JSX.Element} the created Circular Progress element
  */
 export function CircularProgress(props: TypeCircularProgressProps): JSX.Element {
-  const { className, style, isLoaded } = props;
-  const classes = useStyles();
+  const { className, style = {}, isLoaded } = props;
 
-  return !isLoaded ? (
-    <div className={`${classes.loading} ${className !== undefined && className}`} style={{ ...style }}>
-      <MaterialCircularProgress className={classes.progress} />
-    </div>
+  return isLoaded ? (
+    <Box className={`${className !== undefined && className}`} style={{ ...style }}>
+      <MaterialCircularProgress />
+    </Box>
   ) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment
     <></>