fix(footerTabs): fix footer tabs panel height #closes1834 (#1862)

* fix(footerTabs): fix footer tabs panel height #closes1834 * fix(footerTabs): fix footer tabs panel height #closes1834 * fix(footerTabs): fix footer tabs panel height #closes1834 * fix(footerTabs): fix footer tabs panel height #closes1834 * fix(footerTabs): fix footer tabs panel height #closes1834 * fix(footerTabs): fix footer tabs panel height #closes1834
Canadian-Geospatial-Platform · Feb 28, 2024 · bfbfe73 · bfbfe73
1 parent f47c139
commit bfbfe73
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 60 deletions.
diff --git a/packages/geoview-core/src/core/components/common/layout-style.ts b/packages/geoview-core/src/core/components/common/layout-style.ts
@@ -1,10 +1,6 @@
 import { Theme } from '@mui/material/styles';
 
 export const getSxClasses = (theme: Theme) => ({
-  detailsContainer: {
-    background: theme.palette.geoViewColor.bgColor.main,
-    paddingBottom: '1rem',
-  },
   panelHeaders: {
     fontSize: theme.palette.geoViewFontSize.lg,
     fontWeight: '600',

diff --git a/packages/geoview-core/src/core/components/common/layout.tsx b/packages/geoview-core/src/core/components/common/layout.tsx
@@ -2,15 +2,12 @@ import { useState, useCallback, type ReactNode } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Box } from '@/ui';
 import { logger } from '@/core/utils/logger';
-
-import { getSxClasses } from './layout-style';
 import { LayerList, LayerListEntry } from './layer-list';
 import { ResponsiveGrid } from './responsive-grid';
 import { LayerTitle } from './layer-title';
 import { EnlargeButton } from './enlarge-button';
 import { CloseButton } from './close-button';
 import { useFooterPanelHeight } from './use-footer-panel-height';
-import { useAppFullscreenActive } from '@/core/stores/store-interface-and-intial-values/app-state';
 
 interface LayoutProps {
   children?: ReactNode;
@@ -23,11 +20,9 @@ interface LayoutProps {
 
 export function Layout({ children, layerList, selectedLayerPath, onLayerListClicked, onIsEnlargeClicked, fullWidth }: LayoutProps) {
   const theme = useTheme();
-  const sxClasses = getSxClasses(theme);
 
   const [isLayersPanelVisible, setIsLayersPanelVisible] = useState(false);
   const [isEnlarged, setIsEnlarged] = useState(false);
-  const isMapFullScreen = useAppFullscreenActive();
 
   // Custom hook for calculating the height of footer panel
   const { leftPanelRef, rightPanelRef, panelTitleRef } = useFooterPanelHeight({ footerPanelTab: 'default' });
@@ -88,7 +83,7 @@ export function Layout({ children, layerList, selectedLayerPath, onLayerListClic
   }
 
   return (
-    <Box sx={sxClasses.detailsContainer}>
+    <Box>
       <ResponsiveGrid.Root sx={{ pt: 8, pb: 8 }} ref={panelTitleRef}>
         {!fullWidth && (
           <ResponsiveGrid.Left isLayersPanelVisible={isLayersPanelVisible} isEnlarged={isEnlarged}>
@@ -123,15 +118,15 @@ export function Layout({ children, layerList, selectedLayerPath, onLayerListClic
       </ResponsiveGrid.Root>
       <ResponsiveGrid.Root>
         <ResponsiveGrid.Left
-          {...(!isMapFullScreen && !fullWidth && { ref: leftPanelRef })}
+          {...(!fullWidth && { ref: leftPanelRef })}
           isEnlarged={isEnlarged}
           isLayersPanelVisible={isLayersPanelVisible}
           fullWidth={fullWidth}
         >
           {renderLayerList()}
         </ResponsiveGrid.Left>
         <ResponsiveGrid.Right
-          {...(!isMapFullScreen && !fullWidth && { ref: rightPanelRef })}
+          {...(!fullWidth && { ref: rightPanelRef })}
           isEnlarged={isEnlarged}
           isLayersPanelVisible={isLayersPanelVisible}
           fullWidth={fullWidth}

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
@@ -1,8 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { useAppFullscreenActive } from '@/core/stores/store-interface-and-intial-values/app-state';
 import { useUIActiveFooterBarTabId, useUIFooterPanelResizeValue } from '@/core/stores/store-interface-and-intial-values/ui-state';
-import { useDetailsStoreLayerDataArray } from '@/core/stores/store-interface-and-intial-values/feature-info-state';
+import {
+  useDetailsStoreAllFeaturesDataArray,
+  useDetailsStoreLayerDataArray,
+} 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';
 
 interface UseFooterPanelHeightType {
   footerPanelTab: 'layers' | 'details' | 'data-table' | 'legend' | 'default' | 'guide';
@@ -18,18 +22,18 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp
   const rightPanelRef = useRef<HTMLDivElement>(null);
   const panelTitleRef = useRef<HTMLDivElement>(null);
 
-  const [tableHeight, setTableHeight] = useState<number>(600);
-
   const isMapFullScreen = useAppFullscreenActive();
   const footerPanelResizeValue = useUIFooterPanelResizeValue();
   const activeFooterBarTabId = useUIActiveFooterBarTabId();
   const arrayOfLayerData = useDetailsStoreLayerDataArray();
+  const allFeaturesLayerData = useDetailsStoreAllFeaturesDataArray();
+  const { setTableHeight } = useDataTableStoreActions();
 
   useEffect(() => {
     // Log
     logger.logTraceUseEffect('USE-FOOTER-PANEL-HEIGHT - footerPanelResizeValue', footerPanelResizeValue, isMapFullScreen);
 
-    const defaultHeight = 700;
+    const defaultHeight = 600;
 
     if (leftPanelRef.current && isMapFullScreen && (activeFooterBarTabId === footerPanelTab || footerPanelTab === 'default')) {
       const panelTitleHeight = panelTitleRef.current?.clientHeight ?? 0;
@@ -39,22 +43,16 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp
       const leftPanelHeight = (window.screen.height * footerPanelResizeValue) / 100 - panelTitleHeight - firstChildHeight;
 
       leftPanelRef.current.style.maxHeight = `${leftPanelHeight}px`;
-      leftPanelRef.current.style.height = `${leftPanelHeight}px`;
       leftPanelRef.current.style.overflow = 'auto';
       leftPanelRef.current.style.paddingBottom = '24px';
 
-      if (footerPanelTab === 'data-table') {
+      if (activeFooterBarTabId === 'data-table') {
         setTableHeight(leftPanelHeight - 10);
       } else {
-        let rightPanel;
-        if (footerPanelTab === 'details') {
-          rightPanel = (rightPanelRef.current?.firstElementChild ?? null) as HTMLElement | null;
-        } else if (footerPanelTab === 'layers' || footerPanelTab === 'default') {
-          rightPanel = (rightPanelRef.current?.firstElementChild?.firstElementChild ?? null) as HTMLElement | null;
-        }
+        const rightPanel = (rightPanelRef.current?.firstElementChild ?? null) as HTMLElement | null;
+
         if (rightPanel) {
           rightPanel.style.maxHeight = `${leftPanelHeight}px`;
-          rightPanel.style.overflow = `auto`;
           rightPanel.style.paddingBottom = `24px`;
         }
       }
@@ -63,23 +61,25 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp
     if (!isMapFullScreen && leftPanelRef.current) {
       leftPanelRef.current.style.maxHeight = `${defaultHeight}px`;
       leftPanelRef.current.style.overflow = 'auto';
-      if (footerPanelTab === 'data-table') {
+      if (activeFooterBarTabId === 'data-table') {
         setTableHeight(defaultHeight);
       } else {
-        let rightPanel;
-        if (footerPanelTab === 'details') {
-          rightPanel = (rightPanelRef.current?.firstElementChild ?? null) as HTMLElement | null;
-        } else if (footerPanelTab === 'layers' || footerPanelTab === 'default') {
-          rightPanel = (rightPanelRef.current?.firstElementChild?.firstElementChild ?? null) as HTMLElement | null;
-        }
+        const rightPanel = (rightPanelRef.current?.firstElementChild ?? null) as HTMLElement | null;
 
         if (rightPanel) {
           rightPanel.style.maxHeight = `${defaultHeight}px`;
-          rightPanel.style.overflow = `auto`;
         }
       }
     }
-  }, [footerPanelResizeValue, isMapFullScreen, activeFooterBarTabId, footerPanelTab, arrayOfLayerData]);
+  }, [
+    footerPanelResizeValue,
+    isMapFullScreen,
+    activeFooterBarTabId,
+    footerPanelTab,
+    arrayOfLayerData,
+    allFeaturesLayerData,
+    setTableHeight,
+  ]);
 
-  return { leftPanelRef, rightPanelRef, panelTitleRef, tableHeight };
+  return { leftPanelRef, rightPanelRef, panelTitleRef };
 }
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
@@ -12,8 +12,9 @@ import {
   useDetailsStoreAllFeaturesDataArray,
   useUIActiveFooterBarTabId,
   useMapOrderedLayerInfo,
+  useDatatableStoreTableHeight,
 } from '@/core/stores';
-import { LayerListEntry, useFooterPanelHeight, Layout } from '../common';
+import { LayerListEntry, Layout } from '../common';
 import { logger } from '@/core/utils/logger';
 import { useFeatureFieldInfos } from './hooks';
 import { LAYER_STATUS, TABS, TypeFieldEntry, TypeLayerData } from '@/app';
@@ -40,6 +41,7 @@ export function Datapanel({ fullWidth }: DataPanelType) {
 
   const [isLoading, setIsLoading] = useState(false);
 
+  const tableHeight = useDatatableStoreTableHeight();
   const selectedLayerPath = useDataTableStoreSelectedLayerPath();
   const mapFiltered = useDataTableStoreMapFilteredRecord();
   const rowsFiltered = useDataTableStoreRowsFiltered();
@@ -48,9 +50,6 @@ export function Datapanel({ fullWidth }: DataPanelType) {
   const selectedTab = useUIActiveFooterBarTabId();
   const orderedLayerInfo = useMapOrderedLayerInfo();
 
-  // Custom hook for calculating the height of footer panel
-  const { tableHeight } = useFooterPanelHeight({ footerPanelTab: 'data-table' });
-
   // Create columns for data table.
   const mappedLayerData = useFeatureFieldInfos(layerData);
 
@@ -204,7 +203,7 @@ export function Datapanel({ fullWidth }: DataPanelType) {
         selectedTab === TABS.DATA_TABLE &&
         !isLayerDisabled() &&
         isSelectedLayerHasFeatures() &&
-        orderedLayerData.map((data) => (
+        orderedLayerData.map((data: MappedLayerDataType) => (
           <Box key={data.layerPath}>
             {data.layerPath === selectedLayerPath ? (
               <DataTable data={data} layerPath={data.layerPath} tableHeight={tableHeight} />

diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx
@@ -401,7 +401,7 @@ export function DetailsPanel({ fullWidth }: DetailsPanelType): JSX.Element {
           fullWidth={fullWidth}
         >
           {memoSelectedLayerDataFeatures && (
-            <Box sx={sxClasses.rightPanelContainer}>
+            <Box sx={fullWidth ? sxClasses.rightPanelContainer : { ...sxClasses.rightPanelContainer, maxHeight: '600px' }}>
               <Grid container sx={sxClasses.rightPanelBtnHolder}>
                 <Grid item xs={6}>
                   <Box style={{ marginLeft: '22px' }}>

diff --git a/packages/geoview-core/src/core/components/details/details-style.ts b/packages/geoview-core/src/core/components/details/details-style.ts
@@ -18,13 +18,14 @@ export const getSxClasses = (theme: Theme) => ({
     fontWeight: '600',
   },
   rightPanelContainer: {
+    overflowY: 'auto',
     border: `2px solid ${theme.palette.geoViewColor.primary.main}`,
     borderRadius: '5px',
     color: theme.palette.geoViewColor.textColor.main,
   },
   rightPanelBtnHolder: {
     marginTop: '20px',
-    marginBottom: '9px',
+    paddingBottom: '9px',
     boxShadow: `0px 12px 9px -13px ${theme.palette.geoViewColor.bgColor.dark[200]}`,
   },
   featureInfoListContainer: {

diff --git a/packages/geoview-core/src/core/components/details/feature-info-new.tsx b/packages/geoview-core/src/core/components/details/feature-info-new.tsx
@@ -99,7 +99,7 @@ export function FeatureInfo({ features, currentFeatureIndex }: TypeFeatureInfoPr
   }, [checkedFeatures, feature]); // ! Check if feature is necessary in this dependency array? If so explain it in comment? Should be featurUid?
 
   return (
-    <Paper sx={{ boxShadow: 'none', border: 'none' }}>
+    <Paper sx={{ boxShadow: 'none', border: 'none', paddingTop: '0.5rem' }}>
       <Box
         sx={{
           p: '0 20px 10px 20px',

diff --git a/packages/geoview-core/src/core/components/guide/guide-panel.tsx b/packages/geoview-core/src/core/components/guide/guide-panel.tsx
@@ -32,15 +32,15 @@ type RenderFooterContentProps = {
 const RenderFooterContentInRightPanel = memo(({ footerContenKeys, footerContentKeyValues, allTabs }: RenderFooterContentProps) => {
   return (
     <List>
-      {footerContenKeys.map((footerKey: string) => {
-        return (
-          allTabs?.includes(footerKey as TypeValidFooterBarTabsCoreProps[number]) && (
+      {footerContenKeys
+        .filter((footerKey) => allTabs?.includes(footerKey as TypeValidFooterBarTabsCoreProps[number]))
+        .map((footerKey) => {
+          return (
             <ListItem key={footerKey}>
               <Markdown options={{ wrapper: 'article' }}>{footerContentKeyValues[footerKey]}</Markdown>
             </ListItem>
-          )
-        );
-      })}
+          );
+        })}
     </List>
   );
 });
@@ -58,7 +58,9 @@ export function GuidePanel({ fullWidth }: GuidePanelType): JSX.Element {
 
   // get store config for footer bar
   const footerBarConfig = useGeoViewConfig()?.footerBar;
-  const allTabs: TypeValidFooterBarTabsCoreProps | undefined = footerBarConfig?.tabs.core;
+  const appbarConfig = useGeoViewConfig()?.appBar;
+  const allTabs: TypeValidFooterBarTabsCoreProps | undefined =
+    footerBarConfig?.tabs.core || (appbarConfig?.tabs.core as unknown as TypeValidFooterBarTabsCoreProps);
 
   // fetch the content of general guide items with custom hook
   const mdFilePath = './locales/markdown/general-content.md';

diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details-style.ts b/packages/geoview-core/src/core/components/layers/right-panel/layer-details-style.ts
@@ -12,6 +12,7 @@ export const getSxClasses = (theme: Theme) => ({
     borderStyle: 'solid',
     padding: '20px',
     overflowY: 'auto',
+    maxHeight: '600px',
   },
   buttonDescriptionContainer: {
     display: 'flex',

diff --git a/packages/geoview-core/src/core/components/legend/legend-styles.ts b/packages/geoview-core/src/core/components/legend/legend-styles.ts
@@ -5,10 +5,6 @@ export const getSxClasses = (theme: Theme) => ({
     padding: '20px',
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: theme.palette.geoViewColor.bgColor.main,
-  },
-  containerHeight: {
-    height: 700,
   },
   title: {
     textAlign: 'left',

diff --git a/packages/geoview-core/src/core/components/legend/legend.tsx b/packages/geoview-core/src/core/components/legend/legend.tsx
@@ -119,11 +119,7 @@ export function Legend({ fullWidth }: LegendType): JSX.Element {
   }, [legendLayers]);
 
   return (
-    <Box
-      sx={fullWidth ? sxClasses.container : { ...sxClasses.container, ...sxClasses.containerHeight }}
-      {...(!fullWidth && { ref: leftPanelRef })}
-      id="legendContainer"
-    >
+    <Box sx={sxClasses.container} {...(!fullWidth && { ref: leftPanelRef })} id="legendContainer">
       <Box display="flex" flexDirection="row" flexWrap="wrap">
         {!!legendLayers.length &&
           formattedLegendLayerList.map((layers, idx) => {

diff --git a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/data-table-state.ts b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/data-table-state.ts
@@ -15,6 +15,7 @@ interface IMapDataTableStateActions {
   setToolbarRowSelectedMessageEntry: (message: string, layerPath: string) => void;
   setLayersData: (layers: TypeArrayOfLayerData) => void;
   applyMapFilters: (filterStrings: string) => void;
+  setTableHeight: (tableHeight: number) => void;
 }
 export interface IMapDataTableState {
   columnFiltersRecord: Record<string, MRTColumnFiltersState>;
@@ -25,6 +26,7 @@ export interface IMapDataTableState {
   selectedLayerPath: string;
   toolbarRowSelectedMessageRecord: Record<string, string>;
   layersData: TypeArrayOfLayerData;
+  tableHeight: number;
   actions: IMapDataTableStateActions;
 }
 
@@ -37,6 +39,7 @@ export function initialDataTableState(set: TypeSetStore, get: TypeGetStore): IMa
     rowSelectionsRecord: {},
     selectedLayerPath: '',
     toolbarRowSelectedMessageRecord: {},
+    tableHeight: 600,
     layersData: [],
 
     // #region ACTIONS
@@ -110,6 +113,14 @@ export function initialDataTableState(set: TypeSetStore, get: TypeGetStore): IMa
         const layerPath = get().dataTableState.selectedLayerPath;
         DataTableProcessor.applyFilters(get().mapId, layerPath, filterStrings, !!get().dataTableState.mapFilteredRecord[layerPath]);
       },
+      setTableHeight: (tableHeight: number): void => {
+        set({
+          dataTableState: {
+            ...get().dataTableState,
+            tableHeight,
+          },
+        });
+      },
     },
     // #endregion ACTIONS
   } as IMapDataTableState;
@@ -134,6 +145,7 @@ export const useDataTableStoreRowsFiltered = (): Record<string, number> =>
   useStore(useGeoViewStore(), (state) => state.dataTableState.rowsFilteredRecord);
 export const useDatatableStoreLayersData = (): TypeArrayOfLayerData =>
   useStore(useGeoViewStore(), (state) => state.dataTableState.layersData);
+export const useDatatableStoreTableHeight = (): number => useStore(useGeoViewStore(), (state) => state.dataTableState.tableHeight);
 
 export const useDataTableStoreActions = (): IMapDataTableStateActions =>
   useStore(useGeoViewStore(), (state) => state.dataTableState.actions);