diff --git a/packages/geoview-core/src/core/components/common/layout-style.ts b/packages/geoview-core/src/core/components/common/layout-style.ts index 3103d853d82..f628cadb7a7 100644 --- a/packages/geoview-core/src/core/components/common/layout-style.ts +++ b/packages/geoview-core/src/core/components/common/layout-style.ts @@ -2,7 +2,6 @@ import { Theme } from '@mui/material/styles'; export const getSxClasses = (theme: Theme) => ({ detailsContainer: { - background: theme.palette.geoViewColor.bgColor.main, paddingBottom: '1rem', }, panelHeaders: { diff --git a/packages/geoview-core/src/core/components/common/layout.tsx b/packages/geoview-core/src/core/components/common/layout.tsx index 31a0a23af49..16e89b66b8e 100644 --- a/packages/geoview-core/src/core/components/common/layout.tsx +++ b/packages/geoview-core/src/core/components/common/layout.tsx @@ -11,7 +11,6 @@ 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; @@ -30,7 +29,6 @@ export function Layout({ children, layerList, selectedLayerPath, onLayerListClic 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' }); @@ -126,7 +124,7 @@ export function Layout({ children, layerList, selectedLayerPath, onLayerListClic (null); const panelTitleRef = useRef(null); - const [tableHeight, setTableHeight] = useState(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; @@ -43,18 +47,13 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp 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`; } } @@ -62,24 +61,27 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp // reset the footer panel after map is not in fullscreen. if (!isMapFullScreen && leftPanelRef.current) { leftPanelRef.current.style.maxHeight = `${defaultHeight}px`; + leftPanelRef.current.style.height = `${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 index 0e5679dc902..7e5aa0bfae8 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 @@ -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) => ( {data.layerPath === selectedLayerPath ? ( diff --git a/packages/geoview-core/src/core/components/details/details-style.ts b/packages/geoview-core/src/core/components/details/details-style.ts index 77783c85827..e38140ae60f 100644 --- 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,15 @@ export const getSxClasses = (theme: Theme) => ({ fontWeight: '600', }, rightPanelContainer: { + maxHeight: '600px', + 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 index e021dc47203..dd138ac1108 100644 --- 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 ( - + ({ 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 index 9c89d21e559..0135d539699 100644 --- a/packages/geoview-core/src/core/components/legend/legend-styles.ts +++ b/packages/geoview-core/src/core/components/legend/legend-styles.ts @@ -5,7 +5,6 @@ export const getSxClasses = (theme: Theme) => ({ padding: '20px', display: 'flex', flexDirection: 'column', - backgroundColor: theme.palette.geoViewColor.bgColor.main, }, containerHeight: { height: 700, 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 index acb8c0b8eb0..16b37ced38d 100644 --- 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; @@ -25,6 +26,7 @@ export interface IMapDataTableState { selectedLayerPath: string; toolbarRowSelectedMessageRecord: Record; 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 => 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);