From ea40b8155671b454da9987aca2c1110fa6024259 Mon Sep 17 00:00:00 2001 From: Damon Ulmi <63123585+DamonU2@users.noreply.github.com> Date: Thu, 27 Jun 2024 13:34:56 -0700 Subject: [PATCH] fix(performance): no prefetch for layers table (#2326) Closes #2271 --- .../data-table/data-table-modal.tsx | 21 ++++++++----------- .../layers/left-panel/single-layer.tsx | 21 ++----------------- .../layers/right-panel/layer-details.tsx | 21 +++++++++++++++++-- 3 files changed, 30 insertions(+), 33 deletions(-) diff --git a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx index 85f4a262859..4b32fdace4b 100644 --- a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx +++ b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx @@ -137,18 +137,15 @@ export default function DataTableModal(): JSX.Element { useEffect(() => { // Log - logger.logTraceUseEffect('DATA-TABLE-MODAL - isLoading', isLoading, selectedLayer); - - const clearLoading = setTimeout( - () => { - setIsLoading(false); - }, - // set timeout delay 1 sec when layer has more than 100 features. - (layer?.features?.length ?? 0) > 100 ? 1000 : 0 - ); - return () => clearTimeout(clearLoading); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isLoading, selectedLayer]); + logger.logTraceUseEffect('DATA-TABLE-MODAL - query status'); + + // Get feature info result for selected layer to check if it is loading + const selectedLayerData = layersData.find((_layer) => _layer.layerPath === selectedLayer); + + if (selectedLayerData?.queryStatus !== 'error' && selectedLayerData?.queryStatus !== 'processed') { + setIsLoading(true); + } else setIsLoading(false); + }, [layersData, selectedLayer]); return ( diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx index 525a40fc90b..452118943b7 100644 --- a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx +++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx @@ -29,12 +29,7 @@ import { DeleteUndoButton } from './delete-undo-button'; import { LayersList } from './layers-list'; import { LayerIcon } from '@/core/components/common/layer-icon'; import { logger } from '@/core/utils/logger'; -import { - useDataTableLayerSettings, - useDataTableStoreActions, - useDataTableAllFeaturesDataArray, -} from '@/core/stores/store-interface-and-intial-values/data-table-state'; -import { LAYER_STATUS } from '@/core/utils/constant'; +import { useDataTableLayerSettings, useDataTableStoreActions } from '@/core/stores/store-interface-and-intial-values/data-table-state'; import { ArrowDownwardIcon, ArrowUpIcon, TableViewIcon } from '@/ui/icons'; import { Divider } from '@/ui/divider/divider'; @@ -75,9 +70,7 @@ export function SingleLayer({ const displayState = useLayerDisplayState(); const datatableSettings = useDataTableLayerSettings(); - const layerData = useDataTableAllFeaturesDataArray(); - - const { triggerGetAllFeatureInfo } = useDataTableStoreActions(); + useDataTableStoreActions(); const legendExpanded = !getLegendCollapsedFromOrderedLayerInfo(layer.layerPath); @@ -163,16 +156,6 @@ export function SingleLayer({ setSelectedLayerPath(layer.layerPath); if (setIsLayersListPanelVisible) { setIsLayersListPanelVisible(true); - // trigger the fetching of the features when not available OR when layer status is in error - if ( - !layerData.filter((layers) => layers.layerPath === layer.layerPath && !!layers?.features?.length).length || - layer.layerStatus === LAYER_STATUS.ERROR - ) { - triggerGetAllFeatureInfo(layer.layerPath).catch((error) => { - // Log - logger.logPromiseFailed('Failed to triggerGetAllFeatureInfo in single-layer.handleLayerClick', error); - }); - } } }; diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx index fd38ca11e1a..2c03c17f128 100644 --- a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx +++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx @@ -25,11 +25,16 @@ import { } from '@/ui'; import { useLayerHighlightedLayer, useLayerStoreActions } from '@/core/stores/store-interface-and-intial-values/layer-state'; import { useUIStoreActions } from '@/core/stores/store-interface-and-intial-values/ui-state'; -import { useDataTableAllFeaturesDataArray } from '@/core/stores/store-interface-and-intial-values/data-table-state'; +import { + useDataTableAllFeaturesDataArray, + useDataTableLayerSettings, + useDataTableStoreActions, +} from '@/core/stores/store-interface-and-intial-values/data-table-state'; import { generateId } from '@/core/utils/utilities'; import { LayerIcon } from '@/core/components/common/layer-icon'; import { LayerOpacityControl } from './layer-opacity-control/layer-opacity-control'; import { logger } from '@/core/utils/logger'; +import { LAYER_STATUS } from '@/core/utils/constant'; interface LayerDetailsProps { layerDetails: TypeLegendLayer; @@ -53,6 +58,8 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { const { setAllItemsVisibility, toggleItemVisibility, setHighlightLayer, refreshLayer, zoomToLayerExtent, getLayerBounds } = useLayerStoreActions(); const { openModal } = useUIStoreActions(); + const { triggerGetAllFeatureInfo } = useDataTableStoreActions(); + const datatableSettings = useDataTableLayerSettings(); const layersData = useDataTableAllFeaturesDataArray(); const selectedLayer = layersData.find((_layer) => _layer.layerPath === layerDetails?.layerPath); @@ -85,6 +92,16 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { }; const handleOpenTable = (): void => { + // trigger the fetching of the features when not available OR when layer status is in error + if ( + !layersData.filter((layers) => layers.layerPath === layerDetails.layerPath && !!layers?.features?.length).length || + layerDetails.layerStatus === LAYER_STATUS.ERROR + ) { + triggerGetAllFeatureInfo(layerDetails.layerPath).catch((error) => { + // Log + logger.logPromiseFailed('Failed to triggerGetAllFeatureInfo in single-layer.handleLayerClick', error); + }); + } openModal({ activeElementId: 'layerDataTable', callbackElementId: `table-details` }); }; @@ -250,7 +267,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element { function renderLayerButtons(): JSX.Element { return ( - {isDataTableVisible && selectedLayer?.features?.length && renderDetailsButton()} + {isDataTableVisible && datatableSettings[layerDetails.layerPath] && renderDetailsButton()}