fix(performance): no prefetch for layers table (#2326)

Closes #2271

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 (
     <Dialog open={activeModalId === 'layerDataTable'} onClose={closeModal} maxWidth="xl">

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);
-        });
-      }
     }
   };
 

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 (
       <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '15px' }}>
-        {isDataTableVisible && selectedLayer?.features?.length && renderDetailsButton()}
+        {isDataTableVisible && datatableSettings[layerDetails.layerPath] && renderDetailsButton()}
         <IconButton tooltip="legend.refreshLayer" className="buttonOutline" onClick={handleRefreshLayer}>
           <RestartAltIcon />
         </IconButton>