From d71591d0eb3b1380fb91a4826cd1a9f7386d1bb4 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Tue, 14 Nov 2023 14:29:35 -0500 Subject: [PATCH 01/17] fix(datatable): common enlarge and close btn #1494 --- .../core/components/common/close-button.tsx | 41 +++++++++++++++ .../common/enlarge-button-style.tsx | 31 ++++++++++++ .../core/components/common/enlarge-button.tsx | 36 +++++++++++++ .../src/core/components/common/index.ts | 3 ++ .../responsive-grid.tsx | 0 .../core/components/data-table/data-panel.tsx | 37 ++------------ .../components/data-table/data-table-style.ts | 31 ++---------- .../core/components/details/details-api.tsx | 4 +- ...yers-list-footer.tsx => details-panel.tsx} | 50 +++++-------------- .../src/core/components/details/details.tsx | 14 ------ .../geoview-core/src/core/components/index.ts | 2 +- .../time-slider/time-slider-panel.tsx | 34 ++----------- .../layer-state.ts | 1 - 13 files changed, 136 insertions(+), 148 deletions(-) create mode 100644 packages/geoview-core/src/core/components/common/close-button.tsx create mode 100644 packages/geoview-core/src/core/components/common/enlarge-button-style.tsx create mode 100644 packages/geoview-core/src/core/components/common/enlarge-button.tsx create mode 100644 packages/geoview-core/src/core/components/common/index.ts rename packages/geoview-core/src/core/components/{responsive-grid => common}/responsive-grid.tsx (100%) rename packages/geoview-core/src/core/components/details/{layers-list-footer.tsx => details-panel.tsx} (87%) delete mode 100644 packages/geoview-core/src/core/components/details/details.tsx diff --git a/packages/geoview-core/src/core/components/common/close-button.tsx b/packages/geoview-core/src/core/components/common/close-button.tsx new file mode 100644 index 00000000000..40ed6202c1a --- /dev/null +++ b/packages/geoview-core/src/core/components/common/close-button.tsx @@ -0,0 +1,41 @@ +import { SetStateAction, Dispatch } from 'react'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; +import { Button } from '@/ui'; +import { getSxClasses } from './enlarge-button-style'; + +interface CloseButtonProps { + isLayersPanelVisible: boolean; + setIsLayersPanelVisible: Dispatch>; +} + +/** + * Create close button + * @param {boolean} isLayersPanelVisible show/hide the list in left panel + * @param {function} setIsLayersPanelVisible dispatch function to update isLayersPanelVisible + * @returns JSX.element + */ +export function CloseButton({ isLayersPanelVisible, setIsLayersPanelVisible }: CloseButtonProps) { + const { t } = useTranslation(); + const theme = useTheme(); + + const sxClasses = getSxClasses(theme); + return ( + + ); +} diff --git a/packages/geoview-core/src/core/components/common/enlarge-button-style.tsx b/packages/geoview-core/src/core/components/common/enlarge-button-style.tsx new file mode 100644 index 00000000000..04f7454e5c1 --- /dev/null +++ b/packages/geoview-core/src/core/components/common/enlarge-button-style.tsx @@ -0,0 +1,31 @@ +import { Theme } from '@mui/material'; + +export const getSxClasses = (theme: Theme) => ({ + enlargeBtn: { + width: '7rem !important', + height: '2.5rem !important', + borderRadius: '1.5rem', + boxShadow: '0px 3px 6px #00000029', + marginTop: '0.25rem', + background: '#F4F5FF !important', + '>div': { + color: `${theme.palette.primary.main} !important`, + }, + '& svg': { + marginRight: '0.25rem', + }, + ':hover': { + backgroundColor: `${theme.palette.primary.main} !important`, + '> div': { + color: `${theme.palette.common.white} !important`, + }, + '& svg': { + color: `${theme.palette.common.white} !important`, + }, + }, + [theme.breakpoints.down('md')]: { display: 'none' }, + }, + enlargeBtnIcon: { + color: theme.palette.primary.main, + }, +}); diff --git a/packages/geoview-core/src/core/components/common/enlarge-button.tsx b/packages/geoview-core/src/core/components/common/enlarge-button.tsx new file mode 100644 index 00000000000..49770100503 --- /dev/null +++ b/packages/geoview-core/src/core/components/common/enlarge-button.tsx @@ -0,0 +1,36 @@ +import { Dispatch } from 'react'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; +import { ArrowBackIcon, ArrowForwardIcon, Button } from '@/ui'; +import { getSxClasses } from './enlarge-button-style'; + +interface EnlargeButtonProps { + isEnlargeDataTable: boolean; + setIsEnlargeDataTable: Dispatch; +} + +/** + * Create enlarge button + * @param {boolean} isEnlargeDataTable + * @param {function} setIsEnlargeDataTable + * @returns JSX.element + */ +export function EnlargeButton({ isEnlargeDataTable, setIsEnlargeDataTable }: EnlargeButtonProps) { + const { t } = useTranslation(); + const theme = useTheme(); + + const sxClasses = getSxClasses(theme); + return ( + + ); +} diff --git a/packages/geoview-core/src/core/components/common/index.ts b/packages/geoview-core/src/core/components/common/index.ts new file mode 100644 index 00000000000..e4d3acfea55 --- /dev/null +++ b/packages/geoview-core/src/core/components/common/index.ts @@ -0,0 +1,3 @@ +export * from './close-button'; +export * from './enlarge-button'; +export * from './responsive-grid'; diff --git a/packages/geoview-core/src/core/components/responsive-grid/responsive-grid.tsx b/packages/geoview-core/src/core/components/common/responsive-grid.tsx similarity index 100% rename from packages/geoview-core/src/core/components/responsive-grid/responsive-grid.tsx rename to packages/geoview-core/src/core/components/common/responsive-grid.tsx 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 51cf3dd9ebe..f2e216a9378 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 @@ -14,9 +14,6 @@ import { SendIcon, ChevronRightIcon, CircularProgress, - Button, - ArrowForwardIcon, - ArrowBackIcon, Tooltip, FilterAltIcon, } from '@/ui'; @@ -32,7 +29,8 @@ import { useDataTableStoreRowsFiltered, useDataTableStoreSelectedLayerIndex, } from '@/core/stores/store-interface-and-intial-values/data-table-state'; -import { ResponsiveGrid } from '../responsive-grid/responsive-grid'; + +import { ResponsiveGrid, EnlargeButton, CloseButton } from '../common'; interface DatapanelProps { layerData: (MapDataTableDataProps & GroupLayers)[]; @@ -191,35 +189,8 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data sx={{ display: 'flex', justifyContent: 'right' }} isLayersPanelVisible={isLayersPanelVisible} > - - {!isLoading && ( - - )} + + {!isLoading && } diff --git a/packages/geoview-core/src/core/components/data-table/data-table-style.ts b/packages/geoview-core/src/core/components/data-table/data-table-style.ts index dafe5d6d8bc..2738aee209e 100644 --- a/packages/geoview-core/src/core/components/data-table/data-table-style.ts +++ b/packages/geoview-core/src/core/components/data-table/data-table-style.ts @@ -4,8 +4,9 @@ export const getSxClasses = (theme: Theme) => ({ list: { color: 'text.primary', width: '100%', - paddingRight: '2rem', - + [theme.breakpoints.up('md')]: { + paddingRight: '2rem', + }, '& .MuiListItemText-primary': { font: theme.footerPanel.layerTitleFont, }, @@ -69,32 +70,6 @@ export const getSxClasses = (theme: Theme) => ({ headline: { fontSize: '1.125rem', fontWeight: 'bold' }, dataPanel: { backgroundColor: '#F1F2F5', padding: '1.5rem' }, gridContainer: { paddingLeft: '1rem', paddingRight: '1rem' }, - enlargeBtn: { - width: '7rem !important', - height: '2.5rem !important', - borderRadius: '1.5rem', - boxShadow: '0px 3px 6px #00000029', - marginTop: '0.25rem', - background: '#F4F5FF !important', - '>div': { - color: `${theme.palette.primary.main} !important`, - }, - '& svg': { - marginRight: '0.25rem', - }, - ':hover': { - backgroundColor: `${theme.palette.primary.main} !important`, - '> div': { - color: `${theme.palette.common.white} !important`, - }, - '& svg': { - color: `${theme.palette.common.white} !important`, - }, - }, - }, - enlargeBtnIcon: { - color: theme.palette.primary.main, - }, iconImage: { padding: 3, borderRadius: 0, diff --git a/packages/geoview-core/src/core/components/details/details-api.tsx b/packages/geoview-core/src/core/components/details/details-api.tsx index 6749daf6486..1d246f7f1dd 100644 --- a/packages/geoview-core/src/core/components/details/details-api.tsx +++ b/packages/geoview-core/src/core/components/details/details-api.tsx @@ -2,7 +2,7 @@ import { createElement, ReactElement } from 'react'; import { FeatureInfoLayerSet } from '@/geo/utils/feature-info-layer-set'; import { api } from '@/app'; -import { Details } from './details'; +import { Detailspanel } from './details-panel'; /** * API to manage details component @@ -32,6 +32,6 @@ export class DetailsApi { * @return {ReactElement} the details react element */ createDetails = (mapId: string): ReactElement => { - return createElement(Details, mapId); + return createElement(Detailspanel, { mapId }); }; } diff --git a/packages/geoview-core/src/core/components/details/layers-list-footer.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx similarity index 87% rename from packages/geoview-core/src/core/components/details/layers-list-footer.tsx rename to packages/geoview-core/src/core/components/details/details-panel.tsx index a4365abba3a..479e62b19ce 100644 --- a/packages/geoview-core/src/core/components/details/layers-list-footer.tsx +++ b/packages/geoview-core/src/core/components/details/details-panel.tsx @@ -23,9 +23,6 @@ import { LayersClearOutlinedIcon, ChevronRightIcon, Box, - Button, - ArrowForwardIcon, - ArrowBackIcon, } from '@/ui'; import { FeatureInfo } from './feature-info-new'; import { PayloadBaseClass, api } from '@/app'; @@ -42,23 +39,24 @@ import { TypeLayerData, } from '@/api/events/payloads'; import { getSxClasses } from './details-style'; -import { useDetailsStoreActions, useDetailsStoreSelectedLayerPath } from '@/core/stores/store-interface-and-intial-values/details-state'; -import { ResponsiveGrid } from '../responsive-grid/responsive-grid'; +import { + useDetailsStoreActions, + useDetailsStoreLayerDataArray, + useDetailsStoreSelectedLayerPath, +} from '@/core/stores/store-interface-and-intial-values/details-state'; +import { ResponsiveGrid, CloseButton, EnlargeButton } from '../common'; -interface TypeLayersListProps { - arrayOfLayerData: TypeArrayOfLayerData; +interface DetailsPanelProps { mapId: string; } /** * layers list * - * @param {TypeLayersListProps} props The properties passed to LayersListFooter + * @param {DetailsPanelProps} props The properties passed to LayersListFooter * @returns {JSX.Element} the layers list */ -export function LayersListFooter(props: TypeLayersListProps): JSX.Element { - const { arrayOfLayerData, mapId } = props; - +export function Detailspanel({ mapId }: DetailsPanelProps): JSX.Element { const { t } = useTranslation(); const theme = useTheme(); @@ -76,6 +74,7 @@ export function LayersListFooter(props: TypeLayersListProps): JSX.Element { // get values from store const selectedLayerPath = useDetailsStoreSelectedLayerPath(); const { setSelectedLayerPath } = useDetailsStoreActions(); + const arrayOfLayerData = useDetailsStoreLayerDataArray(); // Returns the index of matching layer based on the found layer path const findLayerPathIndex = (layerDataArray: TypeArrayOfLayerData, layerPathSearch: string): number => { @@ -266,33 +265,8 @@ export function LayersListFooter(props: TypeLayersListProps): JSX.Element { md={9} sx={{ display: 'flex', justifyContent: 'right' }} > - - + + diff --git a/packages/geoview-core/src/core/components/details/details.tsx b/packages/geoview-core/src/core/components/details/details.tsx deleted file mode 100644 index 6f943889d9c..00000000000 --- a/packages/geoview-core/src/core/components/details/details.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { LayersListFooter } from './layers-list-footer'; -import { useDetailsStoreLayerDataArray } from '@/core/stores/store-interface-and-intial-values/details-state'; - -/** - * The Details component is used to display the list of layers in footer that have selected features. - * It allows to show the list of features found in the click tolerance of the getFeatureInfo when you click on the expand icon. - * - * @returns {JSX.Element} returns the Details component - */ -export function Details(mapId: string): JSX.Element | null { - const layerDataArray = useDetailsStoreLayerDataArray(); - - return ; -} diff --git a/packages/geoview-core/src/core/components/index.ts b/packages/geoview-core/src/core/components/index.ts index 119d92d7254..2593690dbed 100644 --- a/packages/geoview-core/src/core/components/index.ts +++ b/packages/geoview-core/src/core/components/index.ts @@ -13,7 +13,7 @@ export * from './data-table/export-button'; export * from './data-table/filter-map'; export * from './data-table/json-export-button'; export * from './data-table/map-data-table'; -export * from './details/details'; +export * from './details/details-panel'; export * from './export/export-modal'; export * from './footer-bar/footer-bar-expand-button'; export * from './footer-bar/footer-bar-fixnorth-switch'; diff --git a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx index 6a6b4ff4981..591d4ab34ba 100644 --- a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx +++ b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx @@ -3,7 +3,6 @@ import React, { useCallback, useState } from 'react'; import { useTheme } from '@mui/material/styles'; import { t } from 'i18next'; import { - Button, Box, ChevronRightIcon, IconButton, @@ -15,14 +14,12 @@ import { SendIcon, Tooltip, Typography, - ArrowForwardIcon, - ArrowBackIcon, } from '@/ui'; import { getSxClasses } from './time-slider-style'; import { TimeSlider } from './time-slider'; import { api, getLocalizedValue } from '@/app'; import { SliderFilterProps } from './time-slider-api'; -import { ResponsiveGrid } from '../responsive-grid/responsive-grid'; +import { CloseButton, EnlargeButton, ResponsiveGrid } from '../common'; interface TypeTimeSliderProps { mapId: string; @@ -131,33 +128,8 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element { md={9} sx={{ display: 'flex', justifyContent: 'right' }} > - - + + diff --git a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts index b647150fe8d..930b8fdfda0 100644 --- a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts +++ b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts @@ -107,7 +107,6 @@ export function initializeLayerState(set: TypeSetStore, get: TypeGetStore): ILay }); layer.allItemsChecked = visibility; layer.isVisible = visibility; - } set({ legendState: { From 11f6f82ae7c4b8215eaa3c00ef573d0c1d03fc2f Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Tue, 14 Nov 2023 14:35:30 -0500 Subject: [PATCH 02/17] fix(datatable): common enlarge and close btn #1494 --- .../core/components/details/details-style.ts | 26 ------------------- .../time-slider/time-slider-style.ts | 26 ------------------- 2 files changed, 52 deletions(-) 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 b1e3a993ab5..3b7bc61fd06 100644 --- a/packages/geoview-core/src/core/components/details/details-style.ts +++ b/packages/geoview-core/src/core/components/details/details-style.ts @@ -91,32 +91,6 @@ export const getSxClasses = (theme: Theme) => ({ }, }, }, - enlargeBtn: { - width: '7rem !important', - height: '2.5rem !important', - borderRadius: '1.5rem', - boxShadow: '0px 3px 6px #00000029', - marginTop: '0.25rem', - background: '#F4F5FF !important', - '>div': { - color: `${theme.palette.primary.main} !important`, - }, - '& svg': { - marginRight: '0.25rem', - }, - ':hover': { - backgroundColor: `${theme.palette.primary.main} !important`, - '> div': { - color: `${theme.palette.common.white} !important`, - }, - '& svg': { - color: `${theme.palette.common.white} !important`, - }, - }, - }, - enlargeBtnIcon: { - color: theme.palette.primary.main, - }, borderWithIndex: `2px solid ${theme.palette.primary.main}`, borderNone: 'none', headline: { fontSize: '1.125rem', fontWeight: 'bold' }, diff --git a/packages/geoview-core/src/core/components/time-slider/time-slider-style.ts b/packages/geoview-core/src/core/components/time-slider/time-slider-style.ts index 2e98d7c3e61..2c17532cb52 100644 --- a/packages/geoview-core/src/core/components/time-slider/time-slider-style.ts +++ b/packages/geoview-core/src/core/components/time-slider/time-slider-style.ts @@ -68,32 +68,6 @@ export const getSxClasses = (theme: Theme) => ({ marginBottom: '9px', boxShadow: '0px 12px 9px -13px #E0E0E0', }, - enlargeBtn: { - width: '7rem !important', - height: '2.5rem !important', - borderRadius: '1.5rem', - boxShadow: '0px 3px 6px #00000029', - marginTop: '0.25rem', - background: '#F4F5FF !important', - '>div': { - color: `${theme.palette.primary.main} !important`, - }, - '& svg': { - marginRight: '0.25rem', - }, - ':hover': { - backgroundColor: `${theme.palette.primary.main} !important`, - '> div': { - color: `${theme.palette.common.white} !important`, - }, - '& svg': { - color: `${theme.palette.common.white} !important`, - }, - }, - }, - enlargeBtnIcon: { - color: theme.palette.primary.main, - }, gridContainer: { paddingLeft: '1rem', paddingRight: '1rem' }, listPrimaryText: { minWidth: '0', From 3ba759bfd8ea471b39bd4868c4b44726e7707585 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Tue, 14 Nov 2023 22:20:06 -0500 Subject: [PATCH 03/17] fix(datatable): common list for data table #1494 --- .../src/core/components/common/index.ts | 1 + .../components/common/layer-list-style.ts | 71 ++++++++++ .../src/core/components/common/layer-list.tsx | 130 ++++++++++++++++++ .../core/components/data-table/data-panel.tsx | 121 +++------------- .../components/data-table/data-table-style.ts | 66 --------- 5 files changed, 219 insertions(+), 170 deletions(-) create mode 100644 packages/geoview-core/src/core/components/common/layer-list-style.ts create mode 100644 packages/geoview-core/src/core/components/common/layer-list.tsx diff --git a/packages/geoview-core/src/core/components/common/index.ts b/packages/geoview-core/src/core/components/common/index.ts index e4d3acfea55..07a3d8c470c 100644 --- a/packages/geoview-core/src/core/components/common/index.ts +++ b/packages/geoview-core/src/core/components/common/index.ts @@ -1,3 +1,4 @@ export * from './close-button'; export * from './enlarge-button'; export * from './responsive-grid'; +export * from './layer-list'; diff --git a/packages/geoview-core/src/core/components/common/layer-list-style.ts b/packages/geoview-core/src/core/components/common/layer-list-style.ts new file mode 100644 index 00000000000..90ee63a84dc --- /dev/null +++ b/packages/geoview-core/src/core/components/common/layer-list-style.ts @@ -0,0 +1,71 @@ +import { Theme } from '@mui/material'; + +export const getSxClasses = (theme: Theme) => ({ + list: { + color: 'text.primary', + width: '100%', + [theme.breakpoints.up('md')]: { + paddingRight: '2rem', + }, + '& .MuiListItemText-primary': { + font: theme.footerPanel.layerTitleFont, + }, + + '& .MuiListItem-root': { + height: '100%', + '& .MuiListItemButton-root': { + padding: '0 0 0 16px', + height: '100%', + }, + }, + + '& .MuiListItemIcon-root': { + minWidth: '2rem', + }, + '& .MuiListItemText-root': { + '>span': { + fontSize: '1rem', + }, + '> p': { + fontSize: '0.875rem', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }, + }, + }, + listPrimaryText: { + minWidth: '0', + marginTop: '0.5rem', + marginBottom: '0.5rem', + flex: '1 1 auto', + display: 'flex', + flexDirection: 'column', + '& p': { + fontSize: '1rem', + font: '600 18px / 24px Roboto, Helvetica, Arial, sans-serif;', + fontWeight: 400, + lineHeight: 1.5, + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }, + '>div': { + display: 'flex', + alignItems: 'center', + marginTop: '4px', + '>p': { + fontSize: '0.875rem !important', + color: theme.palette.text.secondary, + }, + ' svg': { + width: '0.75em', + height: '0.75em', + }, + }, + }, + paper: { marginBottom: '1rem' }, + borderWithIndex: `2px solid ${theme.palette.primary.main}`, + borderNone: 'none', + headline: { fontSize: '1.125rem', fontWeight: 'bold' }, +}); diff --git a/packages/geoview-core/src/core/components/common/layer-list.tsx b/packages/geoview-core/src/core/components/common/layer-list.tsx new file mode 100644 index 00000000000..c4491634ad1 --- /dev/null +++ b/packages/geoview-core/src/core/components/common/layer-list.tsx @@ -0,0 +1,130 @@ +// import { MouseEvent } from 'react'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; +import { + Box, + ChevronRightIcon, + FilterAltIcon, + IconButton, + List, + ListItem, + ListItemButton, + ListItemIcon, + Paper, + SendIcon, + Tooltip, + Typography, +} from '@/ui'; +import { getSxClasses } from './layer-list-style'; + +interface LayerListProps { + isEnlargeDataTable: boolean; + layerList: Array<{ layerName: string; numOffeatures: number; layerId: string; layerPath: string }>; + selectedLayerIndex: number; + handleListItemClick: (event: React.MouseEvent, index: number) => void; + rowsFiltered: Record | undefined; + mapFiltered: Record | undefined; +} + +export function LayerList({ + layerList, + isEnlargeDataTable, + selectedLayerIndex, + handleListItemClick, + rowsFiltered = {}, + mapFiltered = {}, +}: LayerListProps) { + const { t } = useTranslation(); + const theme = useTheme(); + + const sxClasses = getSxClasses(theme); + + /** + * Check if filtered are being set for each layer. + * @param {string} layerPath The path of the layer + * @returns boolean + */ + const isMapFilteredSelectedForLayer = (layerPath: string): boolean => !!mapFiltered[layerPath]; + + /** + * Get number of features of a layer with filtered or selected layer. + * @param {string} layerPath the path of the layer + * @param {number} index index of layer in the list + * @returns + */ + const getFeaturesOfLayer = (layerPath: string, index: number): string => { + return rowsFiltered && rowsFiltered[layerPath] + ? `${rowsFiltered[layerPath]} ${t('dataTable.featureFiltered')}` + : `${layerList[index].numOffeatures} ${t('dataTable.features')}`; + }; + + /** + * Create layer tooltip + * @param {TypeLocalizedString} layerName en/fr layer name + * @param {string} layerPath the path of the layer. + * @param {number} index an index of the layer in the array. + * @returns + */ + const getLayerTooltip = (layerName: string, layerPath: string, index: number): React.ReactNode => { + return ( + + {`${layerName}, ${getFeaturesOfLayer(layerPath, index)}`} + {isMapFilteredSelectedForLayer(layerPath) && } + + ); + }; + + return ( + + {layerList.map(({ layerPath, layerName }, index) => ( + + + + + handleListItemClick(event, index)}> + + + + + {layerName} + + + {getFeaturesOfLayer(layerPath, index)} + + {isMapFilteredSelectedForLayer(layerPath) && } + + + + + + + + + + + + + + ))} + + ); +} 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 f2e216a9378..92eb5181fcf 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 @@ -2,25 +2,11 @@ import { useCallback, useEffect, useState } from 'react'; import { useTheme } from '@mui/material/styles'; import { Projection } from 'ol/proj'; import { useTranslation } from 'react-i18next'; -import { - Box, - Typography, - Paper, - List, - ListItem, - ListItemButton, - IconButton, - ListItemIcon, - SendIcon, - ChevronRightIcon, - CircularProgress, - Tooltip, - FilterAltIcon, -} from '@/ui'; +import { Box, Typography, CircularProgress } from '@/ui'; import MapDataTable, { MapDataTableData as MapDataTableDataProps } from './map-data-table'; import { getSxClasses } from './data-table-style'; import { GroupLayers } from './data-table-api'; -import { TypeDisplayLanguage, TypeLocalizedString } from '@/geo/map/map-schema-types'; +import { TypeDisplayLanguage } from '@/geo/map/map-schema-types'; import { useDataTableStoreActions, @@ -30,7 +16,7 @@ import { useDataTableStoreSelectedLayerIndex, } from '@/core/stores/store-interface-and-intial-values/data-table-state'; -import { ResponsiveGrid, EnlargeButton, CloseButton } from '../common'; +import { ResponsiveGrid, EnlargeButton, CloseButton, LayerList } from '../common'; interface DatapanelProps { layerData: (MapDataTableDataProps & GroupLayers)[]; @@ -69,41 +55,6 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - /** - * Check if filtered are being set for each layer. - * @param {string} layerKey The key of the layer - * @returns boolean - */ - const isMapFilteredSelectedForLayer = (layerKey: string): boolean => !!mapFiltered[layerKey]; - - /** - * Get number of features of a layer with filtered or selected layer. - * @param layerKey - * @param index - * @returns - */ - const getFeaturesOfLayer = (layerKey: string, index: number): string => { - return rowsFiltered[layerKey] - ? `${rowsFiltered[layerKey]} ${t('dataTable.featureFiltered')}` - : `${layerData[index].features.length} ${t('dataTable.features')}`; - }; - - /** - * Create layer tooltip - * @param {TypeLocalizedString} layerName en/fr layer name - * @param {string} layerKey the key of the layer. - * @param {number} index an index of the layer in the array. - * @returns - */ - const getLayerTooltip = (layerName: TypeLocalizedString, layerKey: string, index: number): React.ReactNode => { - return ( - - {`${layerName[language]}, ${getFeaturesOfLayer(layerKey, index)}`} - {isMapFilteredSelectedForLayer(layerKey) && } - - ); - }; - /** * Render group layers as list. * @@ -111,60 +62,22 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data */ const renderList = useCallback( () => ( - - {layerData.map(({ layerKey, layerName }, index) => ( - - - - - handleListItemClick(event, index)}> - - - - - {layerName![language]} - - - {getFeaturesOfLayer(layerKey, index)} - - {isMapFilteredSelectedForLayer(layerKey) && } - - - - - - - - - - - - - - ))} - + ({ + layerId: layer.layerId, + layerName: layer.layerName![language] ?? '', + layerPath: layer.layerKey, + numOffeatures: layer.features.length, + }))} + isEnlargeDataTable={isEnlargeDataTable} + selectedLayerIndex={selectedLayerIndex} + handleListItemClick={handleListItemClick} + rowsFiltered={rowsFiltered} + mapFiltered={mapFiltered} + /> ), // eslint-disable-next-line react-hooks/exhaustive-deps - [layerData, selectedLayerIndex, isMapFilteredSelectedForLayer, isEnlargeDataTable] + [layerData, selectedLayerIndex, isEnlargeDataTable, mapFiltered, rowsFiltered] ); useEffect(() => { diff --git a/packages/geoview-core/src/core/components/data-table/data-table-style.ts b/packages/geoview-core/src/core/components/data-table/data-table-style.ts index 2738aee209e..6f2b37e5889 100644 --- a/packages/geoview-core/src/core/components/data-table/data-table-style.ts +++ b/packages/geoview-core/src/core/components/data-table/data-table-style.ts @@ -1,72 +1,6 @@ import { Theme } from '@mui/material'; export const getSxClasses = (theme: Theme) => ({ - list: { - color: 'text.primary', - width: '100%', - [theme.breakpoints.up('md')]: { - paddingRight: '2rem', - }, - '& .MuiListItemText-primary': { - font: theme.footerPanel.layerTitleFont, - }, - - '& .MuiListItem-root': { - height: '100%', - '& .MuiListItemButton-root': { - padding: '0 0 0 16px', - height: '100%', - }, - }, - - '& .MuiListItemIcon-root': { - minWidth: '2rem', - }, - '& .MuiListItemText-root': { - '>span': { - fontSize: '1rem', - }, - '> p': { - fontSize: '0.875rem', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - }, - }, - }, - listPrimaryText: { - minWidth: '0', - marginTop: '0.5rem', - marginBottom: '0.5rem', - flex: '1 1 auto', - display: 'flex', - flexDirection: 'column', - '& p': { - fontSize: '1rem', - font: '600 18px / 24px Roboto, Helvetica, Arial, sans-serif;', - fontWeight: 400, - lineHeight: 1.5, - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - }, - '>div': { - display: 'flex', - alignItems: 'center', - marginTop: '4px', - '>p': { - fontSize: '0.875rem !important', - color: theme.palette.text.secondary, - }, - ' svg': { - width: '0.75em', - height: '0.75em', - }, - }, - }, - paper: { marginBottom: '1rem', height: '67px' }, - borderWithIndex: `2px solid ${theme.palette.primary.main}`, - borderNone: 'none', headline: { fontSize: '1.125rem', fontWeight: 'bold' }, dataPanel: { backgroundColor: '#F1F2F5', padding: '1.5rem' }, gridContainer: { paddingLeft: '1rem', paddingRight: '1rem' }, From 3b41a59d7e3125daa2069ab8eb03e4c759bc9013 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Tue, 14 Nov 2023 23:30:48 -0500 Subject: [PATCH 04/17] fix(details): layer list of details component #1494 --- .../components/common/layer-list-style.ts | 1 + .../src/core/components/common/layer-list.tsx | 33 ++++--- .../core/components/data-table/data-panel.tsx | 6 +- .../core/components/details/details-panel.tsx | 89 ++++--------------- .../components/icon-stack/icon-stack-style.ts | 2 +- .../time-slider/time-slider-panel.tsx | 13 +-- 6 files changed, 43 insertions(+), 101 deletions(-) diff --git a/packages/geoview-core/src/core/components/common/layer-list-style.ts b/packages/geoview-core/src/core/components/common/layer-list-style.ts index 90ee63a84dc..c801c74b198 100644 --- a/packages/geoview-core/src/core/components/common/layer-list-style.ts +++ b/packages/geoview-core/src/core/components/common/layer-list-style.ts @@ -38,6 +38,7 @@ export const getSxClasses = (theme: Theme) => ({ minWidth: '0', marginTop: '0.5rem', marginBottom: '0.5rem', + marginLeft: '10px', flex: '1 1 auto', display: 'flex', flexDirection: 'column', diff --git a/packages/geoview-core/src/core/components/common/layer-list.tsx b/packages/geoview-core/src/core/components/common/layer-list.tsx index c4491634ad1..d67c175ca11 100644 --- a/packages/geoview-core/src/core/components/common/layer-list.tsx +++ b/packages/geoview-core/src/core/components/common/layer-list.tsx @@ -16,14 +16,22 @@ import { Typography, } from '@/ui'; import { getSxClasses } from './layer-list-style'; +import { IconStack } from '@/app'; + +export interface LayerListEntry { + layerName: string; + numOffeatures: number; + layerId: string; + layerPath: string; +} interface LayerListProps { isEnlargeDataTable: boolean; - layerList: Array<{ layerName: string; numOffeatures: number; layerId: string; layerPath: string }>; + layerList: LayerListEntry[]; selectedLayerIndex: number; - handleListItemClick: (event: React.MouseEvent, index: number) => void; - rowsFiltered: Record | undefined; - mapFiltered: Record | undefined; + handleListItemClick: (layer: LayerListEntry, index: number) => void; + rowsFiltered?: Record | undefined; + mapFiltered?: Record | undefined; } export function LayerList({ @@ -76,28 +84,27 @@ export function LayerList({ return ( - {layerList.map(({ layerPath, layerName }, index) => ( + {layerList.map((layer, index) => ( - + - handleListItemClick(event, index)}> + handleListItemClick(layer, index)}> - + - {layerName} + {layer.layerName} - {getFeaturesOfLayer(layerPath, index)} + {getFeaturesOfLayer(layer.layerPath, index)} - {isMapFilteredSelectedForLayer(layerPath) && } + {isMapFilteredSelectedForLayer(layer.layerPath) && } - , index: number) => { + const handleListItemClick = useCallback((layer: LayerListEntry, index: number) => { setSelectedLayerIndex(index); setIsLoading(true); setIsLayersPanelVisible(false); @@ -128,7 +128,7 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data {!isLoading && layerData.map(({ layerKey, layerId }, index) => ( - + {index === selectedLayerIndex ? ( {layerData[index].features.length ? ( diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx index 6e3e58c9cf7..84ab91356ff 100644 --- a/packages/geoview-core/src/core/components/details/details-panel.tsx +++ b/packages/geoview-core/src/core/components/details/details-panel.tsx @@ -43,7 +43,7 @@ import { useDetailsStoreLayerDataArray, useDetailsStoreSelectedLayerPath, } from '@/core/stores/store-interface-and-intial-values/details-state'; -import { ResponsiveGrid, CloseButton, EnlargeButton } from '../common'; +import { ResponsiveGrid, CloseButton, EnlargeButton, LayerList } from '../common'; interface DetailsPanelProps { mapId: string; @@ -164,79 +164,24 @@ export function Detailspanel({ mapId }: DetailsPanelProps): JSX.Element { // eslint-disable-next-line react-hooks/exhaustive-deps }, [arrayOfLayerData]); - /** - * Create layer tooltip - * @param {string} layerName en/fr layer name - * @param {number} numOfFeatures number of features for a layer. - * @returns - */ - const getLayerTooltip = (layerName: string, numOfFeatures: number): React.ReactNode => { - return `${layerName ?? t('details.clickOnMap')}, ${numOfFeatures} ${t('details.feature')}${numOfFeatures > 1 ? 's' : ''}`; - }; - const renderLayerList = useCallback(() => { return ( - - {arrayOfLayerData.map((layerData) => { - const isSelectedBorder = layerData.layerPath === layerDataInfo?.layerPath; - const numOfFeatures = layerData.features!.length; - - return ( - - - - - { - setLayerDataInfo(layerData); - setCurrentFeatureIndex(0); - setSelectedLayerPath(layerData.layerPath); - setIsLayersPanelVisible(false); - }} - > - - - - - {layerData.layerName ? layerData.layerName : t('details.clickOnMap')} - - - {`${numOfFeatures} ${t('details.feature')}${numOfFeatures > 1 ? 's' : ''}`} - - - - - - - - - - - - - - ); - })} - + ({ + layerId: layer.layerName, + layerName: layer.layerName ?? '', + layerPath: layer.layerPath, + numOffeatures: layer.features?.length ?? 0, + }))} + isEnlargeDataTable={isEnlargeDataTable} + selectedLayerIndex={arrayOfLayerData.findIndex((layer) => layer.layerPath === layerDataInfo?.layerPath)} + handleListItemClick={(layer, index: number) => { + setLayerDataInfo(arrayOfLayerData[index]); + setCurrentFeatureIndex(0); + setSelectedLayerPath(arrayOfLayerData[index].layerPath); + setIsLayersPanelVisible(false); + }} + /> ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [layerDataInfo, arrayOfLayerData, isEnlargeDataTable]); diff --git a/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts b/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts index b2e88f2624b..016768550cf 100644 --- a/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts +++ b/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts @@ -42,7 +42,7 @@ export const getSxClasses = () => ({ }, stackIconsBox: { position: 'relative', - marginLeft: 8, + marginLeft: '0.5rem', '&:focus': { outlineColor: 'grey', }, diff --git a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx index 36c811dce69..8a1167bef7f 100644 --- a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx +++ b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx @@ -2,18 +2,7 @@ import React, { useCallback, useState } from 'react'; import { useTheme } from '@mui/material/styles'; import { t } from 'i18next'; -import { - Box, - ChevronRightIcon, - IconButton, - List, - ListItem, - ListItemButton, - ListItemIcon, - Paper, - Tooltip, - Typography, -} from '@/ui'; +import { Box, ChevronRightIcon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Paper, Tooltip, Typography } from '@/ui'; import { getSxClasses } from './time-slider-style'; import { TimeSlider } from './time-slider'; import { api, getLocalizedValue, IconStack } from '@/app'; From a49556c19a6b007a8412d25d36aa9755c94d3348 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Wed, 15 Nov 2023 10:08:11 -0500 Subject: [PATCH 05/17] fix(details): layer list of details component #1494 --- .../src/core/components/common/layer-list.tsx | 1 - .../core/components/details/details-panel.tsx | 19 ++----------------- 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/packages/geoview-core/src/core/components/common/layer-list.tsx b/packages/geoview-core/src/core/components/common/layer-list.tsx index d67c175ca11..37838d5f50e 100644 --- a/packages/geoview-core/src/core/components/common/layer-list.tsx +++ b/packages/geoview-core/src/core/components/common/layer-list.tsx @@ -11,7 +11,6 @@ import { ListItemButton, ListItemIcon, Paper, - SendIcon, Tooltip, Typography, } from '@/ui'; diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx index 84ab91356ff..cdc7b6496c6 100644 --- a/packages/geoview-core/src/core/components/details/details-panel.tsx +++ b/packages/geoview-core/src/core/components/details/details-panel.tsx @@ -7,24 +7,9 @@ import { useTheme } from '@mui/material/styles'; import { getUid } from 'ol/util'; // TODO no ol in component -import { - ListItem, - ListItemButton, - List, - ListItemIcon, - Tooltip, - IconButton, - Grid, - Paper, - Typography, - ArrowForwardIosOutlinedIcon, - ArrowBackIosOutlinedIcon, - LayersClearOutlinedIcon, - ChevronRightIcon, - Box, -} from '@/ui'; +import { IconButton, Grid, Typography, ArrowForwardIosOutlinedIcon, ArrowBackIosOutlinedIcon, LayersClearOutlinedIcon, Box } from '@/ui'; import { FeatureInfo } from './feature-info-new'; -import { PayloadBaseClass, api, IconStack } from '@/app'; +import { PayloadBaseClass, api } from '@/app'; import { EVENT_NAMES } from '@/api/events/event-types'; import { payloadIsAFeatureHighlight, From 890530caf8412385bf7cc006c04eec5c5db8dd86 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Wed, 15 Nov 2023 15:37:54 -0500 Subject: [PATCH 06/17] fix(time-slider): update layer list for time slider #1494 --- .../src/core/components/common/layer-list.tsx | 20 ++--- .../core/components/data-table/data-panel.tsx | 1 - .../core/components/details/details-panel.tsx | 1 - .../time-slider/time-slider-panel.tsx | 74 +++---------------- 4 files changed, 22 insertions(+), 74 deletions(-) diff --git a/packages/geoview-core/src/core/components/common/layer-list.tsx b/packages/geoview-core/src/core/components/common/layer-list.tsx index 37838d5f50e..4900212fe28 100644 --- a/packages/geoview-core/src/core/components/common/layer-list.tsx +++ b/packages/geoview-core/src/core/components/common/layer-list.tsx @@ -19,8 +19,7 @@ import { IconStack } from '@/app'; export interface LayerListEntry { layerName: string; - numOffeatures: number; - layerId: string; + numOffeatures?: number; layerPath: string; } @@ -75,7 +74,7 @@ export function LayerList({ const getLayerTooltip = (layerName: string, layerPath: string, index: number): React.ReactNode => { return ( - {`${layerName}, ${getFeaturesOfLayer(layerPath, index)}`} + {`${layerName}${!!layerList[index].numOffeatures ? ', ' + getFeaturesOfLayer(layerPath, index) : ''}`} {isMapFilteredSelectedForLayer(layerPath) && } ); @@ -97,12 +96,15 @@ export function LayerList({ {layer.layerName} - - - {getFeaturesOfLayer(layer.layerPath, index)} - - {isMapFilteredSelectedForLayer(layer.layerPath) && } - + {!!layer?.numOffeatures && ( + + + {getFeaturesOfLayer(layer.layerPath, index)} + + + {isMapFilteredSelectedForLayer(layer.layerPath) && } + + )} ( ({ - layerId: layer.layerId, layerName: layer.layerName![language] ?? '', layerPath: layer.layerKey, numOffeatures: layer.features.length, diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx index cdc7b6496c6..89505dc36ed 100644 --- a/packages/geoview-core/src/core/components/details/details-panel.tsx +++ b/packages/geoview-core/src/core/components/details/details-panel.tsx @@ -153,7 +153,6 @@ export function Detailspanel({ mapId }: DetailsPanelProps): JSX.Element { return ( ({ - layerId: layer.layerName, layerName: layer.layerName ?? '', layerPath: layer.layerPath, numOffeatures: layer.features?.length ?? 0, diff --git a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx index 8a1167bef7f..2fac61d58d3 100644 --- a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx +++ b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx @@ -2,12 +2,11 @@ import React, { useCallback, useState } from 'react'; import { useTheme } from '@mui/material/styles'; import { t } from 'i18next'; -import { Box, ChevronRightIcon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Paper, Tooltip, Typography } from '@/ui'; +import { Box, Typography } from '@/ui'; import { getSxClasses } from './time-slider-style'; import { TimeSlider } from './time-slider'; -import { api, getLocalizedValue, IconStack } from '@/app'; import { SliderFilterProps } from './time-slider-api'; -import { CloseButton, EnlargeButton, ResponsiveGrid } from '../common'; +import { CloseButton, EnlargeButton, LayerList, ResponsiveGrid } from '../common'; interface TypeTimeSliderProps { mapId: string; @@ -38,66 +37,15 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element { */ const renderLayerList = useCallback(() => { return ( - - {layersList.map((layerPath) => { - const isSelectedBorder = layerPath === selectedLayer; - const layerName = getLocalizedValue(api.maps[mapId].layer.registeredLayers[layerPath].layerName, mapId); - // TODO use visible layers from store instead of this - if (api.maps[mapId].layer.registeredLayers[layerPath].olLayer?.getVisible()) { - return ( - - - - - { - setSelectedLayer(layerPath); - setIsLayersPanelVisible(false); - }} - sx={{ height: '67px' }} - > - - - - - - {layerName} - - - - - - - - - - - - - ); - } - return null; - })} - + { + setSelectedLayer(layer.layerPath); + setIsLayersPanelVisible(false); + }} + layerList={layersList.map((layer, index) => ({ layerName: layer, layerPath: layer }))} + /> ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [layersList, selectedLayer, isEnlargeDataTable]); From 072ec05e9afc19713b3bd3608a55117c0d41d7ef Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Wed, 15 Nov 2023 16:13:01 -0500 Subject: [PATCH 07/17] fix(time-slider): add layer name in right panel mobile device #1494 --- .../components/common/responsive-grid.tsx | 8 ++++-- .../core/components/data-table/data-panel.tsx | 28 +++++++++++++------ .../core/components/details/details-panel.tsx | 27 ++++++++++++------ .../time-slider/time-slider-panel.tsx | 27 ++++++++++++------ 4 files changed, 60 insertions(+), 30 deletions(-) diff --git a/packages/geoview-core/src/core/components/common/responsive-grid.tsx b/packages/geoview-core/src/core/components/common/responsive-grid.tsx index 0f9c278c650..8232f028653 100644 --- a/packages/geoview-core/src/core/components/common/responsive-grid.tsx +++ b/packages/geoview-core/src/core/components/common/responsive-grid.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import { GridProps } from '@mui/material'; +import { GridProps, SxProps } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { Grid } from '@/ui'; @@ -10,6 +10,7 @@ interface ResponsiveGridProps extends GridProps { interface ResponsiveGridPanelProps extends GridProps { children: ReactNode; isLayersPanelVisible: boolean; + sxProps?: SxProps; } /** @@ -53,7 +54,7 @@ function ResponsiveGridLeftPanel({ children, isLayersPanelVisible = false, ...re * @param {boolean} isLayersPanelVisible panel visibility * @returns JSX.Element */ -function ResponsiveGridRightPanel({ children, isLayersPanelVisible = false, ...rest }: ResponsiveGridPanelProps) { +function ResponsiveGridRightPanel({ children, isLayersPanelVisible = false, sxProps = {}, ...rest }: ResponsiveGridPanelProps) { const theme = useTheme(); return ( 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 ec80ce51007..a69ebdc06e3 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 @@ -90,19 +90,28 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data return ( - + {t('dataTable.leftPanelHeading')} - - - {!isLoading && } + + + + {!isLoading && {layerData![selectedLayerIndex]?.layerName![language] ?? ''}} + + + + {!isLoading && } + + @@ -117,6 +126,7 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data xs={!isLayersPanelVisible ? 12 : 0} md={!isEnlargeDataTable ? 8 : 10.75} isLayersPanelVisible={isLayersPanelVisible} + sxProps={{ minHeight: '250px' }} > - + {t('details.availableLayers')} - - - + + + + {layerDataInfo.layerName} + + + + + + diff --git a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx index 2fac61d58d3..573458f6c1b 100644 --- a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx +++ b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx @@ -53,19 +53,28 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element { return ( - + {t('details.availableLayers')} - - - + + + + {selectedLayer} + + + + + + From a8805fec10ca0e09eb96d23d814465187e7dc45b Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Wed, 15 Nov 2023 16:21:33 -0500 Subject: [PATCH 08/17] fix(time-slider): fix height of layer list #1494 --- .../src/core/components/common/layer-list-style.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/geoview-core/src/core/components/common/layer-list-style.ts b/packages/geoview-core/src/core/components/common/layer-list-style.ts index c801c74b198..6c79ba34975 100644 --- a/packages/geoview-core/src/core/components/common/layer-list-style.ts +++ b/packages/geoview-core/src/core/components/common/layer-list-style.ts @@ -5,6 +5,9 @@ export const getSxClasses = (theme: Theme) => ({ color: 'text.primary', width: '100%', [theme.breakpoints.up('md')]: { + paddingRight: '1rem', + }, + [theme.breakpoints.up('lg')]: { paddingRight: '2rem', }, '& .MuiListItemText-primary': { @@ -18,7 +21,9 @@ export const getSxClasses = (theme: Theme) => ({ height: '100%', }, }, - + '& .MuiListItemButton-root': { + minHeight: '73px', + }, '& .MuiListItemIcon-root': { minWidth: '2rem', }, From 37048663fa54e94ab1fcdb446d2c9e1b02833d3a Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Wed, 15 Nov 2023 16:26:30 -0500 Subject: [PATCH 09/17] fix(time-slider): fix height of layer list #1494 --- packages/geoview-core/src/core/components/common/layer-list.tsx | 2 +- .../src/core/components/time-slider/time-slider-panel.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/geoview-core/src/core/components/common/layer-list.tsx b/packages/geoview-core/src/core/components/common/layer-list.tsx index 4900212fe28..1c63e266500 100644 --- a/packages/geoview-core/src/core/components/common/layer-list.tsx +++ b/packages/geoview-core/src/core/components/common/layer-list.tsx @@ -74,7 +74,7 @@ export function LayerList({ const getLayerTooltip = (layerName: string, layerPath: string, index: number): React.ReactNode => { return ( - {`${layerName}${!!layerList[index].numOffeatures ? ', ' + getFeaturesOfLayer(layerPath, index) : ''}`} + {`${layerName}${layerList[index].numOffeatures ? `, ${getFeaturesOfLayer(layerPath, index)}` : ''}`} {isMapFilteredSelectedForLayer(layerPath) && } ); diff --git a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx index 573458f6c1b..f3991c57218 100644 --- a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx +++ b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx @@ -44,7 +44,7 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element { setSelectedLayer(layer.layerPath); setIsLayersPanelVisible(false); }} - layerList={layersList.map((layer, index) => ({ layerName: layer, layerPath: layer }))} + layerList={layersList.map((layer) => ({ layerName: layer, layerPath: layer }))} /> ); // eslint-disable-next-line react-hooks/exhaustive-deps From 8d4fde031ff8d670637879daab7463c382121563 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Wed, 15 Nov 2023 16:30:49 -0500 Subject: [PATCH 10/17] fix(time-slider): fix height of layer list #1494 --- packages/geoview-core/src/core/components/common/layer-list.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/geoview-core/src/core/components/common/layer-list.tsx b/packages/geoview-core/src/core/components/common/layer-list.tsx index 1c63e266500..55556499d06 100644 --- a/packages/geoview-core/src/core/components/common/layer-list.tsx +++ b/packages/geoview-core/src/core/components/common/layer-list.tsx @@ -1,4 +1,3 @@ -// import { MouseEvent } from 'react'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; import { From 0646a81b03cb4d80a8516f0dc3f16a35aa714783 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Wed, 15 Nov 2023 21:07:45 -0500 Subject: [PATCH 11/17] fix(time-slider): remove margin from iconstack #1494 --- .../src/core/components/icon-stack/icon-stack-style.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts b/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts index 016768550cf..3cedd765018 100644 --- a/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts +++ b/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts @@ -42,7 +42,6 @@ export const getSxClasses = () => ({ }, stackIconsBox: { position: 'relative', - marginLeft: '0.5rem', '&:focus': { outlineColor: 'grey', }, From a50f52124b46a8cff873a3e97ce5d2ab78f2b890 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Thu, 16 Nov 2023 14:07:46 -0500 Subject: [PATCH 12/17] fix(time-slider): remove margin from iconstack #1494 --- .../core/components/common/close-button.tsx | 5 +- .../core/components/common/enlarge-button.tsx | 5 +- .../src/core/components/common/layer-list.tsx | 84 ++++--------------- .../components/common/responsive-grid.tsx | 3 +- .../core/components/data-table/data-panel.tsx | 45 ++++++++-- .../core/components/details/details-panel.tsx | 13 ++- .../time-slider/time-slider-panel.tsx | 2 +- packages/geoview-core/src/ui/grid/index.ts | 2 + 8 files changed, 80 insertions(+), 79 deletions(-) diff --git a/packages/geoview-core/src/core/components/common/close-button.tsx b/packages/geoview-core/src/core/components/common/close-button.tsx index 40ed6202c1a..bd95b7b0bf5 100644 --- a/packages/geoview-core/src/core/components/common/close-button.tsx +++ b/packages/geoview-core/src/core/components/common/close-button.tsx @@ -16,10 +16,11 @@ interface CloseButtonProps { * @returns JSX.element */ export function CloseButton({ isLayersPanelVisible, setIsLayersPanelVisible }: CloseButtonProps) { - const { t } = useTranslation(); - const theme = useTheme(); + const { t } = useTranslation(); + const theme = useTheme(); const sxClasses = getSxClasses(theme); + return (