fix(layers): fix layers data table #closes1856 (Canadian-Geospatial-P…

…latform#1877) * fix(layers): fix layers data table #closes1856 * fix(layers): fix eslint issues of Select component #closes1856 * fix(layers): fix scroll height of geochart #closes1856 * fix(layers): fix scroll height of geochart #closes1856 * fix(layers): fix import paths of single layer #closes1856 * fix(layers): add reason for using timer #closes1856
Alex-NRCan · Mar 1, 2024 · f95fd8b · f95fd8b
1 parent dcced26
commit f95fd8b
Show file tree

Hide file tree

Showing 10 changed files with 3,653 additions and 7,097 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx b/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx
@@ -7,6 +7,7 @@ import {
 } from '@/core/stores/store-interface-and-intial-values/feature-info-state';
 import { logger } from '@/core/utils/logger';
 import { useDataTableStoreActions } from '@/core/stores/store-interface-and-intial-values/data-table-state';
+import { TABS } from '@/app';
 
 interface UseFooterPanelHeightType {
   footerPanelTab: 'layers' | 'details' | 'data-table' | 'legend' | 'default' | 'guide';
@@ -46,11 +47,14 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp
       leftPanelRef.current.style.overflow = 'auto';
       leftPanelRef.current.style.paddingBottom = '24px';
 
-      if (activeFooterBarTabId === 'data-table') {
+      if (activeFooterBarTabId === TABS.DATA_TABLE) {
         setTableHeight(leftPanelHeight - 10);
+      } else if (activeFooterBarTabId === TABS.GEO_CHART && rightPanelRef.current) {
+        rightPanelRef.current.style.maxHeight = `${leftPanelHeight}px`;
+        rightPanelRef.current.style.overflowY = footerPanelResizeValue !== 100 ? 'auto' : 'visible';
+        rightPanelRef.current.style.paddingBottom = `24px`;
       } else {
         const rightPanel = (rightPanelRef.current?.firstElementChild ?? null) as HTMLElement | null;
-
         if (rightPanel) {
           rightPanel.style.maxHeight = `${leftPanelHeight}px`;
           rightPanel.style.paddingBottom = `24px`;
@@ -61,11 +65,13 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp
     if (!isMapFullScreen && leftPanelRef.current) {
       leftPanelRef.current.style.maxHeight = `${defaultHeight}px`;
       leftPanelRef.current.style.overflow = 'auto';
-      if (activeFooterBarTabId === 'data-table') {
+      if (activeFooterBarTabId === TABS.DATA_TABLE) {
         setTableHeight(defaultHeight);
+      } else if (activeFooterBarTabId === TABS.GEO_CHART && rightPanelRef.current) {
+        rightPanelRef.current.style.maxHeight = `${defaultHeight}px`;
+        rightPanelRef.current.style.overflowY = 'auto';
       } else {
         const rightPanel = (rightPanelRef.current?.firstElementChild ?? null) as HTMLElement | null;
-
         if (rightPanel) {
           rightPanel.style.maxHeight = `${defaultHeight}px`;
         }

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
@@ -19,7 +19,7 @@ import { useLayerSelectedLayerPath } from '@/core/stores/store-interface-and-int
 import { FieldInfos } from './data-table';
 import { getSxClasses } from './data-table-style';
 import { logger } from '@/core/utils/logger';
-import { useDetailsStoreLayerDataArray } from '@/core/stores';
+import { useDetailsStoreAllFeaturesDataArray } from '@/core/stores';
 import { useFeatureFieldInfos } from './hooks';
 
 interface ColumnsType {
@@ -46,8 +46,7 @@ export default function DataTableModal(): JSX.Element {
   const activeModalId = useUIActiveFocusItem().activeElementId;
   const selectedLayer = useLayerSelectedLayerPath();
 
-  // TODO:: update when correct data is available, mean time we will be using details store data.
-  const layersData = useDetailsStoreLayerDataArray();
+  const layersData = useDetailsStoreAllFeaturesDataArray();
 
   // Create columns for data table.
   const mappedLayerData = useFeatureFieldInfos(layersData);
@@ -107,7 +106,10 @@ export default function DataTableModal(): JSX.Element {
           if (isValidElement(row[key])) {
             return row[key];
           }
-          return row[key].value ?? '';
+          if (typeof row[key]?.value === 'string' || typeof row[key]?.value === 'number') {
+            return row[key]?.value ?? '';
+          }
+          return '';
         },
         header: value?.alias ?? '',
         Cell: ({ cell }) => getCellValue(cell.getValue() as string),
@@ -148,7 +150,7 @@ export default function DataTableModal(): JSX.Element {
   return (
     <Dialog open={activeModalId === 'layerDatatable'} onClose={closeModal} maxWidth="xl">
       <DialogTitle>{`${t('legend.tableDetails')} ${layer?.layerName ?? selectedLayer}`}</DialogTitle>
-      <DialogContent>
+      <DialogContent sx={{ overflow: 'hidden' }}>
         {isLoading && (
           <Box sx={{ minHeight: '300px', minWidth: '450px', position: 'relative' }}>
             <CircularProgress

diff --git a/packages/geoview-core/src/core/components/geolocator/geolocator-result.tsx b/packages/geoview-core/src/core/components/geolocator/geolocator-result.tsx
@@ -156,6 +156,7 @@ export function GeolocatorResult({ geoLocationData, searchValue, error }: Geoloc
               inputLabel={{ id: 'geolocationProvinceFilter' }}
               menuItems={provinces}
               disabled={!geoLocationData.length}
+              variant="standard"
             />
           </Box>
           <Box sx={{ flexGrow: 2, paddingRight: '8px', maxWidth: 150 }}>
@@ -170,6 +171,7 @@ export function GeolocatorResult({ geoLocationData, searchValue, error }: Geoloc
               inputLabel={{ id: 'geolocationCategoryFilter' }}
               menuItems={categories}
               disabled={!geoLocationData.length}
+              variant="standard"
             />
           </Box>
           <Box>

diff --git a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
@@ -1119,6 +1119,7 @@ export function AddNewLayer(): JSX.Element {
                     inputLabel={{
                       id: 'service-type-label',
                     }}
+                    variant="standard"
                     menuItems={layerOptions.map(([value, label]) => ({
                       key: value,
                       item: {

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
@@ -30,6 +30,11 @@ import { DeleteUndoButton } from './delete-undo-button';
 import { LayersList } from './layers-list';
 import { LayerIcon } from '../../common/layer-icon';
 import { logger } from '@/core/utils/logger';
+import {
+  useDetailsStoreActions,
+  useDetailsStoreAllFeaturesDataArray,
+} from '@/core/stores/store-interface-and-intial-values/feature-info-state';
+import { LAYER_STATUS } from '@/core/utils/constant';
 
 interface SingleLayerProps {
   layer: TypeLegendLayer;
@@ -50,6 +55,9 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
   const selectedLayerPath = useLayerSelectedLayerPath();
   const displayState = useLayerDisplayState();
   const mapFiltered = useDataTableStoreMapFilteredRecord();
+  const layerData = useDetailsStoreAllFeaturesDataArray();
+
+  const { triggerGetAllFeatureInfo } = useDetailsStoreActions();
 
   // if any of the chiild layers is selected return true
   const isLayerChildSelected = (startingLayer: TypeLegendLayer): boolean => {
@@ -136,6 +144,13 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
         setGroupOpen(true);
       }
       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, 'all');
+      }
     }
   };
 

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
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
 import _ from 'lodash';
@@ -23,7 +23,13 @@ import {
   ListItem,
   List,
 } from '@/ui';
-import { useLayerHighlightedLayer, useLayerStoreActions, useUIStoreActions, useMapStoreActions } from '@/core/stores';
+import {
+  useLayerHighlightedLayer,
+  useLayerStoreActions,
+  useUIStoreActions,
+  useMapStoreActions,
+  useDetailsStoreAllFeaturesDataArray,
+} from '@/core/stores';
 import { generateId } from '@/core/utils/utilities';
 import { LayerIcon } from '../../common/layer-icon';
 import { LayerOpacityControl } from './layer-opacity-control/layer-opacity-control';
@@ -44,11 +50,36 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 
+  const [isDataTableVisible, setIsDatatableVisible] = useState(false);
+
   // get store actions
   const highlightedLayer = useLayerHighlightedLayer();
   const { setAllItemsVisibility, toggleItemVisibility, setHighlightLayer, zoomToLayerExtent, getLayerBounds } = useLayerStoreActions();
   const { openModal } = useUIStoreActions();
   const { getAlwaysVisibleFromOrderedLayerInfo } = useMapStoreActions();
+  const layersData = useDetailsStoreAllFeaturesDataArray();
+  const selectedLayer = layersData.find((_layer) => _layer.layerPath === layerDetails?.layerPath);
+
+  useEffect(() => {
+    // Log
+    logger.logTraceUseEffect('LAYER DETAILS', selectedLayer, layerDetails);
+
+    // Reason for timer:- when layer detail component is loaded, behind the scene we send query to fetch the features.
+    // After component is rendered and fetching features is done, eventhough store is update, it never re rendered this component
+    // thats why we need to update the state so that layers data is fetched again from store.
+    let timer: NodeJS.Timeout;
+    if (!selectedLayer) {
+      setIsDatatableVisible(true);
+    } else {
+      timer = setTimeout(() => {
+        setIsDatatableVisible(true);
+      }, 100);
+    }
+    return () => {
+      setIsDatatableVisible(false);
+      if (timer) clearTimeout(timer);
+    };
+  }, [layersData, layerDetails, selectedLayer]);
 
   const handleZoomTo = () => {
     zoomToLayerExtent(layerDetails.layerPath);
@@ -177,7 +208,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
   function renderLayerButtons() {
     return (
       <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '15px' }}>
-        {layerDetails.items.length > 0 && (
+        {isDataTableVisible && selectedLayer?.features?.length && (
           <IconButton id="table-details" tooltip="legend.tableDetails" className="style1" onClick={handleOpenTable}>
             <TableViewIcon />
           </IconButton>

diff --git a/packages/geoview-core/src/ui/select/select.tsx b/packages/geoview-core/src/ui/select/select.tsx
@@ -17,13 +17,13 @@ import { getSxClasses } from './select-style';
 /**
  * Custom MUI Select properties
  */
-interface TypeSelectProps extends SelectProps {
+type TypeSelectProps = SelectProps & {
   mapId?: string;
   fullWidth?: boolean;
   menuItems: TypeMenuItemProps[];
   inputLabel: InputLabelProps;
   formControlProps?: FormControlProps;
-}
+};
 
 /**
  * Menu Item properties

diff --git a/packages/geoview-core/src/ui/tabs/tabs.tsx b/packages/geoview-core/src/ui/tabs/tabs.tsx
@@ -1,7 +1,7 @@
 import { SyntheticEvent, ReactNode, useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Grid, Tab as MaterialTab, Tabs as MaterialTabs, TabsProps, TabProps, BoxProps, Box } from '@mui/material';
+import { Grid, Tab as MaterialTab, Tabs as MaterialTabs, TabsProps, TabProps, BoxProps, Box, SelectChangeEvent } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { HtmlToReact } from '@/core/containers/html-to-react';
 import { logger } from '@/core/utils/logger';
@@ -216,8 +216,9 @@ export function Tabs(props: TypeTabsProps): JSX.Element {
                 inputLabel={{ id: 'footerBarDropdownLabel' }}
                 menuItems={mobileTabsDropdownValues}
                 value={value}
-                onChange={(e) => updateTabPanel(e.target.value as number)}
+                onChange={(e: SelectChangeEvent<unknown>) => updateTabPanel(e.target.value as number)}
                 MenuProps={{ container: mapElem }}
+                variant="outlined"
               />
             </Box>
           )}

diff --git a/packages/geoview-geochart/src/geochart-panel.tsx b/packages/geoview-geochart/src/geochart-panel.tsx
@@ -4,7 +4,7 @@ import { ChartType, SchemaValidator } from 'geochart';
 import { LayerListEntry, Layout } from 'geoview-core/src/core/components/common';
 import { TypeLayerData, TypeArrayOfLayerData } from 'geoview-core/src/api/events/payloads/get-feature-info-payload';
 import { Typography } from 'geoview-core/src/ui/typography/typography';
-import { Paper } from 'geoview-core/src/ui';
+import { Box, Paper } from 'geoview-core/src/ui';
 import {
   useMapVisibleLayers,
   useGeochartConfigs,
@@ -216,14 +216,17 @@ export function GeoChartPanel(props: GeoChartPanelProps): JSX.Element {
           onLayerListClicked={handleLayerChange}
           onIsEnlargeClicked={handleIsEnlargeClicked}
         >
-          {selectedLayerPath &&
-            Object.entries(configObj).map(([layerPath, layerChartConfig], index) => {
-              const sx: React.CSSProperties = { position: 'absolute', top: '-5000px' };
-              if (layerPath === selectedLayerPath) {
-                sx.top = '0px';
-              }
-              return renderChart(layerChartConfig as GeoViewGeoChartConfig<ChartType>, sx, index.toString());
-            })}
+          {selectedLayerPath && (
+            <Box>
+              {Object.entries(configObj).map(([layerPath, layerChartConfig], index) => {
+                const sx: React.CSSProperties = { position: 'absolute', top: '-5000px' };
+                if (layerPath === selectedLayerPath) {
+                  sx.top = '5px';
+                }
+                return renderChart(layerChartConfig as GeoViewGeoChartConfig<ChartType>, sx, index.toString());
+              })}
+            </Box>
+          )}
           {!selectedLayerPath && (
             <Paper sx={{ padding: '2rem' }}>
               <Typography variant="h3" gutterBottom sx={sxClasses.geochartInstructionsTitle}>