From 1fc37d96e886497cc75c195809f9a7e9df5b0ee1 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Thu, 28 Sep 2023 22:29:07 -0400 Subject: [PATCH 1/2] fix(DataTable): datatable when layer changes Closes #1348 --- .../core/components/data-table/data-panel.tsx | 36 +++++++++---------- .../components/data-table/map-data-table.tsx | 19 +++++++--- 2 files changed, 30 insertions(+), 25 deletions(-) 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 index 43daf7143f3..4b356e825d6 100644 --- 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 } from 'react'; import { Projection } from 'ol/proj'; import { Box, @@ -50,8 +50,6 @@ const sxClasses = { */ export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layerIds }: DatapanelProps) { - const [data, setData] = useState(layerData[0]); - const layerKeyRef = useRef(layerKeys[0]); const [selectedLayerIndex, setSelectedLayerIndex] = useState(0); const handleListItemClick = useCallback((event: React.MouseEvent, index: number) => { @@ -99,12 +97,6 @@ export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layer [selectedLayerIndex] ); - useEffect(() => { - layerKeyRef.current = layerKeys[selectedLayerIndex]; - setData(layerData[selectedLayerIndex]); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedLayerIndex]); - return ( @@ -129,17 +121,21 @@ export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layer {layerKeys[selectedLayerIndex]} - {data.features.length ? ( - - ) : ( - 'No Data' - )} + {layerKeys.map((layerKey, index) => ( + + {layerData[index].features.length ? ( + + ) : ( + 'No Data' + )} + + ))} 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 index 8461784d448..4db6f883b92 100644 --- 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 ( @@ -463,7 +472,7 @@ function MapDataTable({ data, layerId, mapId, layerKey, projectionConfig }: MapD density: 'compact', pagination: { pageSize: 10, pageIndex: 0 }, }} - state={{ sorting, columnFilters, rowSelection }} + state={{ sorting, columnFilters, rowSelection, showColumnFilters: true }} enableColumnFilterModes onSortingChange={setSorting} onColumnFiltersChange={setColumnFilters} @@ -519,4 +528,4 @@ function MapDataTable({ data, layerId, mapId, layerKey, projectionConfig }: MapD ); } -export default MapDataTable; +export default memo(MapDataTable); From c1d8064f582eee88524826d9d4ec4d80b0a03b9d Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Fri, 29 Sep 2023 10:34:23 -0400 Subject: [PATCH 2/2] fix(DataTable): datatable when layer changes Closes #1348 --- .../public/templates/raw-data-table.html | 2 +- .../core/components/data-table/data-panel.tsx | 47 ++++++++++++------- .../components/data-table/map-data-table.tsx | 2 +- .../circular-progress/circular-progress.tsx | 43 +++-------------- 4 files changed, 39 insertions(+), 55 deletions(-) diff --git a/packages/geoview-core/public/templates/raw-data-table.html b/packages/geoview-core/public/templates/raw-data-table.html index 17d6a054d63..9493cc39a86 100644 --- a/packages/geoview-core/public/templates/raw-data-table.html +++ b/packages/geoview-core/public/templates/raw-data-table.html @@ -75,7 +75,7 @@

1. Default Configuration

}; 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 index 4b356e825d6..0b6bdfb9ba9 100644 --- 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, 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 ( @@ -121,21 +133,24 @@ export function Datapanel({ layerData, mapId, projectionConfig, layerKeys, layer {layerKeys[selectedLayerIndex]} - {layerKeys.map((layerKey, index) => ( - - {layerData[index].features.length ? ( - - ) : ( - 'No Data' - )} - - ))} + + + {!isLoading && + layerKeys.map((layerKey, index) => ( + + {layerData[index].features.length ? ( + + ) : ( + 'No Data' + )} + + ))} 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 index 4db6f883b92..735ba15f4b2 100644 --- 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 index 8d7d0526850..aaab3b6444a 100644 --- 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,34 +11,6 @@ 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 * @@ -48,13 +18,12 @@ const useStyles = makeStyles((theme) => { * @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 ? ( -
- -
+ return isLoaded ? ( + + + ) : ( // eslint-disable-next-line react/jsx-no-useless-fragment <>