fix(DataTable): datatable when layer changes Closes #1348

Canadian-Geospatial-Platform · Sep 29, 2023 · c1d8064 · c1d8064
1 parent 7e5d589
commit c1d8064
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 55 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, useCallback } 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';
 
@@ -51,9 +52,13 @@ const sxClasses = {
 
 export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layerIds }: DatapanelProps) {
   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);
   }, []);
 
   /**
@@ -97,6 +102,13 @@ export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layer
     [selectedLayerIndex]
   );
 
+  useEffect(() => {
+    const clearLoading = setTimeout(() => {
+      setisLoading(false);
+    }, 1000);
+    return () => clearTimeout(clearLoading);
+  }, [isLoading, selectedLayerIndex]);
+
   return (
     <Box sx={sxClasses.dataPanel}>
       <Grid container spacing={2} sx={sxClasses.gridContainer}>
@@ -121,21 +133,24 @@ export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layer
             {layerKeys[selectedLayerIndex]}
           </Typography>
 
-          {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>
-          ))}
+          <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
@@ -472,7 +472,7 @@ function MapDataTable({ data, layerId, mapId, layerKey, projectionConfig }: MapD
           density: 'compact',
           pagination: { pageSize: 10, pageIndex: 0 },
         }}
-        state={{ sorting, columnFilters, rowSelection, showColumnFilters: true }}
+        state={{ sorting, columnFilters, rowSelection }}
         enableColumnFilterModes
         onSortingChange={setSorting}
         onColumnFiltersChange={setColumnFilters}

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
     <></>