From a4360b3a6ec162c45a0608709d6120fbefc38de2 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Wed, 4 Oct 2023 21:06:35 -0400 Subject: [PATCH 1/3] fix(DataTable): remove data grid from footer panel Closes #1309 --- .vscode/settings.json | 2 +- README.md | 2 +- docs/app/components-packages.md | 3 +- .../public/locales/en/translation.json | 5 - .../public/locales/fr/translation.json | 5 - .../components/data-grid/data-grid-api.ts | 244 ----------------- .../components/data-grid/export-button.tsx | 39 --- .../data-grid/json-export-menu-item.tsx | 78 ------ .../components/data-grid/layer-data-grid.tsx | 248 ------------------ .../components/data-grid/menu-data-grid.tsx | 50 ---- .../components/data-table/map-data-table.tsx | 2 +- .../geoview-core/src/core/components/index.ts | 5 - packages/geoview-core/src/geo/map/map.ts | 6 - packages/geoview-core/src/ui/style/default.ts | 2 - .../default-config-footer-panel.json | 10 +- packages/geoview-footer-panel/schema.json | 33 ++- .../geoview-footer-panel/src/data-item.tsx | 75 ------ .../geoview-footer-panel/src/group-layers.tsx | 27 -- packages/geoview-footer-panel/src/index.tsx | 15 +- 19 files changed, 38 insertions(+), 813 deletions(-) delete mode 100644 packages/geoview-core/src/core/components/data-grid/data-grid-api.ts delete mode 100644 packages/geoview-core/src/core/components/data-grid/export-button.tsx delete mode 100644 packages/geoview-core/src/core/components/data-grid/json-export-menu-item.tsx delete mode 100644 packages/geoview-core/src/core/components/data-grid/layer-data-grid.tsx delete mode 100644 packages/geoview-core/src/core/components/data-grid/menu-data-grid.tsx delete mode 100644 packages/geoview-footer-panel/src/data-item.tsx delete mode 100644 packages/geoview-footer-panel/src/group-layers.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 411922be25a..12ab29c36d9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,6 @@ { "editor.detectIndentation": false, - "editor.renderWhitespace": "all", + "editor.renderWhitespace": "none", "editor.tabSize": 2, "editor.hover.delay": 1000, "window.title": "${activeEditorMedium}${separator}${rootName}${separator}${profileName}" diff --git a/README.md b/README.md index 4cb8ecb4a28..00e6b1ba63a 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ This project is now a monorepo and contains the following packages under the `pa - [geoview-layers-panel](packages/geoview-layers-panel) - a package that displays a panel with a list of loaded layers and their legend. -- [geoview-footer-panel](packages/geoview-footer-panel) - a package that displays a footer panel with a list of tabs (legend, details, data grid, ...) for basic view. +- [geoview-footer-panel](packages/geoview-footer-panel) - a package that displays a footer panel with a list of tabs (legend, details, data table, ...) for basic view. - [geoview-swiper](packages/geoview-swiper) - a package that enable a swiper control to tooggle visibility of layers from one side to the other side of the swiper bar. diff --git a/docs/app/components-packages.md b/docs/app/components-packages.md index 4a8785f3f88..7ffcb987718 100644 --- a/docs/app/components-packages.md +++ b/docs/app/components-packages.md @@ -5,10 +5,9 @@ The main difference between a component and a package is their level of customiz ## What is a components Components are part of the geoview-core package where we find the basic functionality of GeoView (api, events, translation, ...). -Some components, like legends and data grids can be reused in another package or directly from the GeoView API as we can see in these demos: +Some components, like legends and data table can be reused in another package or directly from the GeoView API as we can see in these demos: - [legend](https://canadian-geospatial-platform.github.io/geoview/public/legend.html) -- [data-grid](https://canadian-geospatial-platform.github.io/geoview/public/package-footer-panel.html) Other components can be added to the map from the configuration via the following line: diff --git a/packages/geoview-core/public/locales/en/translation.json b/packages/geoview-core/public/locales/en/translation.json index 0929c57a601..2567a04cf7b 100644 --- a/packages/geoview-core/public/locales/en/translation.json +++ b/packages/geoview-core/public/locales/en/translation.json @@ -81,11 +81,6 @@ "close": "Close", "download": "Download" }, - "datagrid": { - "exportJson": "Download GeoJSON", - "filterMap": "Filter Map", - "stopFilterMap": "Stop Map Filter" - }, "keyboardnav": { "start": "Skip after map element", "end": "Skip before map element", diff --git a/packages/geoview-core/public/locales/fr/translation.json b/packages/geoview-core/public/locales/fr/translation.json index 2ed8b3e9f2f..7306669fee5 100644 --- a/packages/geoview-core/public/locales/fr/translation.json +++ b/packages/geoview-core/public/locales/fr/translation.json @@ -81,11 +81,6 @@ "close": "Fermer", "download": "Télécharger" }, - "datagrid": { - "exportJson": "Télécharger GeoJSON", - "filterMap": "Filtrer la carte", - "stopFilterMap": "Filtrer la carte d'arrêt" - }, "keyboardnav": { "start": "Aller après l'élément carte", "end": "Aller avant l'élément carte", diff --git a/packages/geoview-core/src/core/components/data-grid/data-grid-api.ts b/packages/geoview-core/src/core/components/data-grid/data-grid-api.ts deleted file mode 100644 index aecf174478e..00000000000 --- a/packages/geoview-core/src/core/components/data-grid/data-grid-api.ts +++ /dev/null @@ -1,244 +0,0 @@ -/* eslint-disable @typescript-eslint/ban-types */ -/* eslint-disable react/no-array-index-key */ -import { createElement, ReactElement, useState, useEffect } from 'react'; -// import { useTranslation } from 'react-i18next'; -import { toLonLat } from 'ol/proj'; -import { Extent } from 'ol/extent'; -import { Geometry, Point, Polygon, LineString, MultiPoint } from 'ol/geom'; -import { - AbstractGeoViewVector, - api, - TypeArrayOfFeatureInfoEntries, - TypeDisplayLanguage, - TypeListOfLayerEntryConfig, - isVectorLayer, -} from '@/app'; - -import LayerDataGrid from './layer-data-grid'; - -export interface TypeLayerDataGridProps { - layerId: string; -} - -/** - * API to manage data grid component - * - * @exports - * @class DataGridAPI - */ -export class DataGridAPI { - mapId!: string; - - displayLanguage!: TypeDisplayLanguage; - - /** - * initialize the data grid api - * - * @param mapId the id of the map this data grid belongs to - */ - constructor(mapId: string) { - this.mapId = mapId; - this.displayLanguage = api.maps[mapId].displayLanguage; - } - - /** - * Create a data grid - * - * @param {TypeLayerDataGridProps} layerDataGridProps the properties of the data grid to be created - * @return {ReactElement} the data grid react element - * - */ - - createDataGrid = (layerDataGridProps: TypeLayerDataGridProps): ReactElement => { - const { layerId } = layerDataGridProps; - const [groupValues, setGroupValues] = useState<{ layerkey: string; layerValues: {}[] }[]>([]); - const [groupKeys, setGroupKeys] = useState([]); - const { currentProjection } = api.maps[this.mapId]; - const projectionConfig = api.projection.projections[currentProjection]; - - /** - * Create a geometry json - * - * @param {Geometry} geometry the geometry - * @return {TypeJsonObject} the geometry json - * - */ - const buildGeometry = (geometry: Geometry) => { - if (geometry instanceof Polygon) { - return { - type: 'Polygon', - coordinates: geometry.getCoordinates().map((coords) => { - return coords.map((coord) => toLonLat(coord, projectionConfig)); - }), - }; - } - - if (geometry instanceof LineString) { - return { type: 'LineString', coordinates: geometry.getCoordinates().map((coord) => toLonLat(coord, projectionConfig)) }; - } - - if (geometry instanceof Point) { - return { type: 'Point', coordinates: toLonLat(geometry.getCoordinates(), projectionConfig) }; - } - - if (geometry instanceof MultiPoint) { - return { type: 'MultiPoint', coordinates: geometry.getCoordinates().map((coord) => toLonLat(coord, projectionConfig)) }; - } - - return {}; - }; - - /** - * Create a data grid rows - * @param {TypeArrayOfFeatureInfoEntries} arrayOfFeatureInfoEntries the properties of the data grid to be created - * @return {TypeJsonArray} the data grid rows - * - */ - const buildFeatureRows = (arrayOfFeatureInfoEntries: TypeArrayOfFeatureInfoEntries) => { - return arrayOfFeatureInfoEntries.map((feature) => { - const { featureKey, fieldInfo, geometry, featureIcon, extent } = feature; - const featureInfo: Record = {}; - Object.entries(fieldInfo).forEach(([fieldKey, fieldInfoEntry]) => { - const featureInfoKey = (fieldInfoEntry?.alias ? fieldInfoEntry?.alias : fieldKey) as string; - const featureInfoValue = fieldInfoEntry?.value as string; - const fieldType = fieldInfoEntry?.dataType as string; - featureInfo[fieldKey] = { featureInfoKey, featureInfoValue, fieldType }; - }); - - return { - featureKey: { featureInfoKey: 'featureKey', featureInfoValue: featureKey, fieldType: 'string' }, - featureIcon: { featureInfoKey: 'Icon', featureInfoValue: featureIcon.toDataURL(), fieldType: 'string' }, - featureActions: { featureInfoKey: 'Zoom', featureInfoValue: '', fieldType: 'string' }, - geometry: buildGeometry(geometry?.getGeometry() as Geometry), - extent, - ...featureInfo, - }; - }); - }; - - // eslint-disable-next-line @typescript-eslint/ban-types - const setLayerDataGridProps = (layerKey: string, layerValues: {}[]) => { - const firstValue: Record = layerValues[0]; - // set columns - const columnHeader = Object.keys(firstValue).filter((kn) => kn !== 'geometry' && kn !== 'extent'); - const columns = columnHeader.map((header) => { - return { - field: header, - headerName: firstValue[header].featureInfoKey, - width: header !== 'featureIcon' && header !== 'featureActions' ? 150 : 80, - type: firstValue[header].fieldType ? firstValue[header].fieldType : 'string', - hide: columnHeader.length > 1 && header === 'featureKey', - hideable: header !== 'featureIcon' && header !== 'featureActions', - filterable: header !== 'featureKey' && header !== 'featureIcon' && header !== 'featureActions', - sortable: header !== 'featureIcon' && header !== 'featureActions', - disableColumnMenu: header === 'featureIcon' || header === 'featureActions', - }; - }); - - // set rows - const rows = layerValues.map((values) => { - let geometry = {}; - let extent = [] as Extent; - const featureInfo: Record = {}; - Object.entries(values).forEach(([valueKey, valueInfoEntry]) => { - if (valueKey === 'geometry') { - geometry = valueInfoEntry as Geometry; - } else if (valueKey === 'extent') { - extent = valueInfoEntry as Extent; - } else { - featureInfo[valueKey] = ( - valueInfoEntry as { featureInfoKey: string; featureInfoValue: string; fieldType: string } - ).featureInfoValue; - } - }); - - return { - geometry, - extent, - ...featureInfo, - }; - }); - - return { - key: `${layerId}-datagrid-${layerKey}`, - mapId: this.mapId, - layerKey, - columns, - rows, - pageSize: 50, - rowsPerPageOptions: [25, 50, 100], - autoHeight: true, - layerId, - rowId: 'featureKey', - displayLanguage: this.displayLanguage, - }; - }; - - useEffect(() => { - let isMounted = true; - const geoviewLayerInstance = api.maps[this.mapId].layer.geoviewLayers[layerId]; - if ( - geoviewLayerInstance.listOfLayerEntryConfig.length > 0 && - (geoviewLayerInstance as AbstractGeoViewVector).getAllFeatureInfo !== undefined - ) { - const grouplayerKeys: string[] = []; - const grouplayerValues: { layerkey: string; layerValues: {}[] }[] = []; - const getGroupKeys = (listOfLayerEntryConfig: TypeListOfLayerEntryConfig, parentLayerId: string) => { - listOfLayerEntryConfig.forEach((LayerEntryConfig) => { - if ( - LayerEntryConfig.entryType === 'group' && - LayerEntryConfig.listOfLayerEntryConfig !== undefined && - LayerEntryConfig.listOfLayerEntryConfig.length > 1 - ) { - getGroupKeys(LayerEntryConfig.listOfLayerEntryConfig, `${parentLayerId}/${LayerEntryConfig.layerId}`); - } else if (LayerEntryConfig.entryType !== 'group') { - grouplayerKeys.push(`${parentLayerId}/${LayerEntryConfig.layerId}`); - } - }); - }; - getGroupKeys(geoviewLayerInstance.listOfLayerEntryConfig, layerId); - - if (isVectorLayer(geoviewLayerInstance)) { - let count = 0; - grouplayerKeys.forEach((layerkey) => { - // eslint-disable-next-line @typescript-eslint/ban-types - let layerValues: {}[] = []; - (geoviewLayerInstance as AbstractGeoViewVector)?.getAllFeatureInfo(layerkey).then((arrayOfFeatureInfoEntries) => { - if (arrayOfFeatureInfoEntries?.length > 0) { - // set values - count++; - layerValues = buildFeatureRows(arrayOfFeatureInfoEntries); - grouplayerValues.push({ layerkey, layerValues }); - } - if (count === grouplayerKeys.length) { - if (isMounted) setGroupKeys(grouplayerKeys); - if (isMounted) setGroupValues(grouplayerValues); - } - }); - }); - } - } - return () => { - isMounted = false; - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [layerId]); - - return createElement('div', {}, [ - groupValues.map((groupValue, index) => { - if (groupValue.layerValues.length > 0) { - return createElement( - 'div', - { - key: `${layerId}-layer-datagrid-table-${index}`, - className: `${layerId}-layer-datagrid-table`, - style: { display: index === 0 ? 'block' : 'none' }, - }, - createElement(LayerDataGrid, setLayerDataGridProps(groupKeys[index], groupValue.layerValues)) - ); - } - return null; - }), - ]); - }; -} diff --git a/packages/geoview-core/src/core/components/data-grid/export-button.tsx b/packages/geoview-core/src/core/components/data-grid/export-button.tsx deleted file mode 100644 index 2639fd41a48..00000000000 --- a/packages/geoview-core/src/core/components/data-grid/export-button.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { ButtonProps } from '@mui/material'; -import { - GridCsvExportMenuItem, - GridCsvExportOptions, - GridPrintExportMenuItem, - GridPrintExportOptions, - GridToolbarExportContainer, -} from '@mui/x-data-grid'; -import { memo } from 'react'; -import JsonExportMenuItem from './json-export-menu-item'; -import { Rows } from './menu-data-grid'; - -type ExportButtonProps = ButtonProps & { - rows: Rows[]; - layerKey: string; -}; - -/** - * Custom the export menu, adding the export json button - * @param {ButtonProps} propsButton material ui button props. - * @param {rows} rows list of rows to be displayed in data-grid table - * @param {layerId} layerId unique id of layers rendered in map. - * @return {GridToolbarExportContainer} export menu - * - */ -function ExportButton({ rows, layerKey, ...rest }: ExportButtonProps) { - const csvOptions: GridCsvExportOptions = { delimiter: ';' }; - const printOptions: GridPrintExportOptions = {}; - - return ( - - - - - - ); -} - -export default memo(ExportButton); diff --git a/packages/geoview-core/src/core/components/data-grid/json-export-menu-item.tsx b/packages/geoview-core/src/core/components/data-grid/json-export-menu-item.tsx deleted file mode 100644 index 55ab19b32ea..00000000000 --- a/packages/geoview-core/src/core/components/data-grid/json-export-menu-item.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { memo } from 'react'; -import { MenuItem } from '@mui/material'; -import { GridExportMenuItemProps, useGridApiContext, gridFilteredSortedRowIdsSelector, GridRowId } from '@mui/x-data-grid'; -import { t } from 'i18next'; -import { Rows } from './menu-data-grid'; - -interface JsonExportMenuItemProps extends GridExportMenuItemProps { - rows: Rows[]; - layerKey: string; -} - -/** - * the export Json item added in menu - * @param {hideMenu} hideMenu function to be called after export of json is done. - * @param {rows} Rows to be displayed in data grid - * @param {layerId} layerId unique id of layers rendered in map. - * @returns {MenuItem} item to be dispayed. - */ - -function JsonExportMenuItem({ hideMenu, rows, layerKey }: JsonExportMenuItemProps) { - const apiRef = useGridApiContext(); - /** - * build the JSON file - * @param {GridRowId} gridRowIds the array of the rowId - * @return {JSON.stringify} Json gile content - * - */ - const getJson = (gridRowIds: GridRowId[]) => { - const geoData = gridRowIds.map((gridRowId) => { - const { geometry, ...featureInfo } = rows[gridRowId as number]; - delete featureInfo.featureKey; - delete featureInfo.featureIcon; - delete featureInfo.featureActions; - delete featureInfo.extent; - return { - type: 'Feature', - geometry, - properties: featureInfo, - }; - }); - // Stringify with some indentation - return JSON.stringify({ type: 'FeatureCollection', features: geoData }, null, 2); - }; - - /** - * export the blob to a file - * @param {Blob} blob the blob to save to file - * @param {string} filename file name - */ - const exportBlob = (blob: Blob, filename: string) => { - // Save the blob in a json file - const url = URL.createObjectURL(blob); - - const a = document.createElement('a'); - a.href = url; - a.download = filename; - a.click(); - - URL.revokeObjectURL(url); - }; - - /** - * Export blob when menu item clicked. - */ - const onMenuItemClick = () => { - const jsonString = getJson(gridFilteredSortedRowIdsSelector(apiRef)); - const blob = new Blob([jsonString], { - type: 'text/json', - }); - exportBlob(blob, `DataGrid_${layerKey.replaceAll('/', '-').replaceAll('.', '-')}.json`); - // Hide the export menu after the export - hideMenu?.(); - }; - - return onMenuItemClick()}>{t('datagrid.exportJson')}; -} - -export default memo(JsonExportMenuItem); diff --git a/packages/geoview-core/src/core/components/data-grid/layer-data-grid.tsx b/packages/geoview-core/src/core/components/data-grid/layer-data-grid.tsx deleted file mode 100644 index 2fce7f7d0e4..00000000000 --- a/packages/geoview-core/src/core/components/data-grid/layer-data-grid.tsx +++ /dev/null @@ -1,248 +0,0 @@ -import { useState, useEffect, memo } from 'react'; -import { DataGrid, DataGridProps, gridClasses, GridCellParams, frFR, enUS, GridFilterModel } from '@mui/x-data-grid'; -import { useTheme, Theme } from '@mui/material/styles'; -import { Extent } from 'ol/extent'; -import { TypeLayerEntryConfig, AbstractGeoViewVector, EsriDynamic, api, TypeDisplayLanguage } from '@/app'; -import { Tooltip, ZoomInSearchIcon, IconButton } from '@/ui'; -import MenuDataGrid from './menu-data-grid'; - -/** - * Create a data grid (table) component for a lyer features all request - * - * @param {DataGridProps} props table properties - * @returns {JSX.Element} returns table component - */ - -// extend the DataGridProps to include the key row element -interface CustomDataGridProps extends DataGridProps { - mapId: string; - layerId: string; - rowId: string; - layerKey: string; - displayLanguage: TypeDisplayLanguage; -} - -interface FilterObject { - operatorValue: string; - columnField: string; - value: string; -} - -const DATE_FILTER: { [index: string]: string } = { - is: '= date value', - not: '<> date value', - after: '> date value', - onOrAfter: '>= date value', - before: '< date value', - onOrBefore: '<= date value', - isEmpty: 'is null', - isNotEmpty: 'is not null', -}; - -const STRING_FILTER: { [index: string]: string } = { - contains: `like '%value%'`, - equals: `= 'value'`, - startsWith: `like 'value%'`, - endsWith: `like '%value'`, - isAnyOf: `in (value)`, - isEmpty: 'is null', - isNotEmpty: 'is not null', -}; - -const NUMBER_FILTER: { [index: string]: string } = { - '=': '=', - '!=': '=', - '<=': '<=', - '<': '<', - '>': '>', - '>=': '>=', - isAnyOf: `in`, - isEmpty: 'is null', - isNotEmpty: 'is not null', -}; - -const sxClasses = { - DataGrid: { - boxShadow: 2, - border: 2, - borderColor: 'primary.light', - '& .MuiDataGrid-cell:hover': { - color: 'text.primary', - }, - '& .MuiFormControlLabel-root > .MuiFormControlLabel-label': { - fontSize: '0.93rem', - color: 'primary.main', - }, - [`& div.even.${gridClasses.row}`]: { - backgroundColor: 'background.grey', - '&:hover, &.Mui-hovered': { - backgroundColor: 'action.hoverRow', - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, - '&.Mui-selected': { - backgroundColor: 'action.selectedRow', - '&:hover, &.Mui-hovered': { - backgroundColor: 'action.hoverRow', - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'action.selectedRow', - }, - }, - }, - }, - [`& .${gridClasses.row}`]: { - '&:hover, &.Mui-hovered': { - backgroundColor: 'action.hoverRow', - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, - '&.Mui-selected': { - backgroundColor: 'action.selectedRow', - '&:hover, &.Mui-hovered': { - backgroundColor: 'action.hoverRow', - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'action.selectedRow', - }, - }, - }, - }, - }, -}; - -function LayerDataGrid(props: CustomDataGridProps) { - const { mapId, layerId, rowId, layerKey, displayLanguage, columns, rows } = props; - - const theme: Theme & { - iconImg: React.CSSProperties; - } = useTheme(); - - const [filterString, setFilterString] = useState(''); - const [mapFiltered, setMapFiltered] = useState(false); - - // set locale from display language - const locale = - displayLanguage === 'en' ? enUS.components.MuiDataGrid.defaultProps.localeText : frFR.components.MuiDataGrid.defaultProps.localeText; - - /** - * featureinfo data grid Zoom in/out handling - * - * @param {React.MouseEvent} e mouse clicking event - * @param {Extent} extent feature exten - * - */ - const handleZoomIn = (e: React.MouseEvent, extent: Extent) => { - api.maps[mapId].zoomToExtent(extent); - }; - /** - * Convert the filter string from the Filter Model - * - * @param {GridFilterModel} gridFilterModel - */ - const buildFilterString = (gridFilterModel: GridFilterModel) => { - // checkif if there is items in filter object - let filter = ''; - if (gridFilterModel.items.length > 0) { - const filterObj = gridFilterModel.items[0] as FilterObject; - const fieldType = columns.find((column) => column.field === filterObj.columnField)?.type; - - if ( - (filterObj.value === undefined || filterObj.value === '') && - filterObj.operatorValue !== 'isEmpty' && - filterObj.operatorValue !== 'isNotEmpty' - ) { - filter = ''; - } else if (fieldType === 'date') { - filter = `${filterObj.columnField} ${(DATE_FILTER[filterObj.operatorValue] as string).replace( - 'value', - `'${filterObj.value as string}'` - )}`; - } else if (fieldType === 'number') { - filter = `${filterObj.columnField} ${NUMBER_FILTER[filterObj.operatorValue]} `; - filter += filterObj.operatorValue !== 'isAnyOf' ? `${filterObj.value}` : `(${(filterObj.value as unknown as string[]).join(',')})`; - } else if (fieldType === 'string') { - filter = - filterObj.operatorValue !== 'isAnyOf' - ? `${filterObj.columnField} ${(STRING_FILTER[filterObj.operatorValue] as string).replace( - 'value', - `${filterObj.value as string}` - )}` - : `${filterObj.columnField} ${(STRING_FILTER[filterObj.operatorValue] as string).replace( - 'value', - `'${(filterObj.value as unknown as string[]).join("','")}'` - )}`; - } - } - setFilterString(filter); - }; - - /** - * Apply the filter who is on the data grid to the map - */ - useEffect(() => { - const geoviewLayerInstance = api.maps[mapId].layer.geoviewLayers[layerId]; - const filterLayerConfig = api.maps[mapId].layer.registeredLayers[layerKey] as TypeLayerEntryConfig; - if (mapFiltered && geoviewLayerInstance !== undefined && filterLayerConfig !== undefined) { - (geoviewLayerInstance as AbstractGeoViewVector | EsriDynamic)?.applyViewFilter(filterLayerConfig, filterString); - } else { - (geoviewLayerInstance as AbstractGeoViewVector | EsriDynamic)?.applyViewFilter(filterLayerConfig, ''); - } - }, [mapFiltered, filterString, mapId, layerId, layerKey]); - - // tooltip implementation for column content - // TODO: works only with hover and add tooltips even when not needed. need improvement - columns.forEach((column) => { - /* eslint-disable no-param-reassign */ - column.renderCell = (params: GridCellParams) => { - if (column.field === 'featureIcon') { - return {params.value}; - } - - if (column.field === 'featureActions') { - return ( - handleZoomIn(e, rows[params.id as number].extent)}> - - - ); - } - - return ( - - {params.value} - - ); - }; - }); - - return ( -
-
- row[rowId]} - getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd')} - checkboxSelection - disableSelectionOnClick - rowsPerPageOptions={[50]} - components={{ - Toolbar: MenuDataGrid, - }} - componentsProps={{ toolbar: { mapFiltered, setMapFiltered, rows, layerKey } }} - /** - * logLevel={false} will suppress useResizeContainer warnings if the data grid is rendered in an un-selected tab - * You may wish to remove this line when working on the data grid - */ - logLevel={false} - onFilterModelChange={(filterModel) => buildFilterString(filterModel)} - /> -
-
- ); -} - -export default memo(LayerDataGrid); diff --git a/packages/geoview-core/src/core/components/data-grid/menu-data-grid.tsx b/packages/geoview-core/src/core/components/data-grid/menu-data-grid.tsx deleted file mode 100644 index 0669e235a08..00000000000 --- a/packages/geoview-core/src/core/components/data-grid/menu-data-grid.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { GridToolbarContainer, GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector } from '@mui/x-data-grid'; -import { Dispatch, SetStateAction, memo } from 'react'; -import { useTranslation } from 'react-i18next'; -import Button from '@mui/material/Button'; -import { Extent } from 'ol/extent'; -import { Geometry } from 'ol/geom'; -import { Switch } from '@/ui'; -import ExportButton from './export-button'; - -export interface Rows { - geometry: Geometry; - extent?: Extent; - featureKey?: string; - featureIcon?: string; - featureActions?: unknown; -} - -interface MenuDataGridProps { - mapFiltered: boolean; - setMapFiltered: Dispatch>; - rows: Rows[]; - layerKey: string; -} - -/** - * Custom the toolbar/Menu to be displayed in data-grid - * @param {mapFiltered} mapFiltered boolean value that will allow filteration in data grid. - * @param {setMapFiltered} setMapFiltered dispatch event for updating mapFiltered state. - * @param {rows} Row list of rows to be displayed in data grid - * @param {layerKey} layerKey unique id of layers rendered in map. - * - * @return {GridToolbarContainer} toolbar - */ -function MenuDataGrid({ mapFiltered, setMapFiltered, rows, layerKey }: MenuDataGridProps): JSX.Element { - const { t } = useTranslation(); - const label = !mapFiltered ? t('datagrid.filterMap') : t('datagrid.stopFilterMap'); - return ( - - - - - - - - ); -} - -export default memo(MenuDataGrid); diff --git a/packages/geoview-core/src/core/components/data-table/map-data-table.tsx b/packages/geoview-core/src/core/components/data-table/map-data-table.tsx index 3432d15eaaa..be2abf28ce8 100644 --- a/packages/geoview-core/src/core/components/data-table/map-data-table.tsx +++ b/packages/geoview-core/src/core/components/data-table/map-data-table.tsx @@ -443,7 +443,7 @@ function MapDataTable({ data, layerId, mapId, layerKey, projectionConfig }: MapD }, [density]); /** - * featureinfo data grid Zoom in/out handling + * featureinfo data table Zoom in/out handling * * @param {React.MouseEvent} e mouse clicking event * @param {Extent} extent feature exten diff --git a/packages/geoview-core/src/core/components/index.ts b/packages/geoview-core/src/core/components/index.ts index 6957dc211b4..c78490f7adf 100644 --- a/packages/geoview-core/src/core/components/index.ts +++ b/packages/geoview-core/src/core/components/index.ts @@ -9,11 +9,6 @@ export * from './attribution/attribution'; export * from './click-marker/click-marker'; export * from './crosshair/crosshair-icon'; export * from './crosshair/crosshair'; -export * from './data-grid/data-grid-api'; -export * from './data-grid/export-button'; -export * from './data-grid/json-export-menu-item'; -export * from './data-grid/layer-data-grid'; -export * from './data-grid/menu-data-grid'; export * from './data-table/data-table-api'; export * from './data-table/export-button'; export * from './data-table/filter-map'; diff --git a/packages/geoview-core/src/geo/map/map.ts b/packages/geoview-core/src/geo/map/map.ts index d83102c8ba5..e8e38a50f43 100644 --- a/packages/geoview-core/src/geo/map/map.ts +++ b/packages/geoview-core/src/geo/map/map.ts @@ -26,7 +26,6 @@ import { Legend2Api } from '@/core/components/legend-2/legend-api'; import { DetailsAPI } from '@/core/components/details/details-api'; import { DetailsAPI as DetailsAPIFooter } from '@/core/components/details-1/details-api'; import { FeatureInfoAPI } from '@/core/components/feature-info/feature-info.api'; -import { DataGridAPI } from '@/core/components/data-grid/data-grid-api'; import { DataTableApi } from '@/core/components/data-table/data-table-api'; import { GeoviewRenderer } from '@/geo/renderer/geoview-renderer'; import { Select } from '@/geo/interaction/select'; @@ -101,10 +100,6 @@ export class MapViewer { featureInfo!: FeatureInfoAPI; - // used to access the footer tabs api - // TODO: To be removed once dataTable is done - dataGrid!: DataGridAPI; - // used to access the data table api dataTable!: DataTableApi; @@ -175,7 +170,6 @@ export class MapViewer { this.details = new DetailsAPI(this.mapId); this.detailsFooter = new DetailsAPIFooter(this.mapId); this.featureInfo = new FeatureInfoAPI(this.mapId); - this.dataGrid = new DataGridAPI(this.mapId); this.dataTable = new DataTableApi(this.mapId); this.modal = new ModalApi(this.mapId); diff --git a/packages/geoview-core/src/ui/style/default.ts b/packages/geoview-core/src/ui/style/default.ts index 7dcbe21ab19..24eb1ec4887 100644 --- a/packages/geoview-core/src/ui/style/default.ts +++ b/packages/geoview-core/src/ui/style/default.ts @@ -54,8 +54,6 @@ export const defaultThemeOptions: ThemeOptions = { fontWeight: 500, }, }, - // based on recommendation - https://github.com/mui/material-ui/issues/29677 - // will resolve the spacing issues of data grid spacing: (factor: number) => { const values = [0, 1, 2, 4, 5, 6, 8, 10, 12, 14, 15, 16, 18, 20, 30]; const index = Math.floor(factor); diff --git a/packages/geoview-footer-panel/default-config-footer-panel.json b/packages/geoview-footer-panel/default-config-footer-panel.json index 06e4f73201c..3967aa2c669 100644 --- a/packages/geoview-footer-panel/default-config-footer-panel.json +++ b/packages/geoview-footer-panel/default-config-footer-panel.json @@ -1,7 +1,13 @@ { "tabs": { - "defaultTabs": ["legend", "details", "data-grid"], + "defaultTabs": [ + "legend", + "details" + ], "customTabs": [] }, - "suportedLanguages": ["en", "fr"] + "suportedLanguages": [ + "en", + "fr" + ] } \ No newline at end of file diff --git a/packages/geoview-footer-panel/schema.json b/packages/geoview-footer-panel/schema.json index 70db1027d4b..d0553fcf295 100644 --- a/packages/geoview-footer-panel/schema.json +++ b/packages/geoview-footer-panel/schema.json @@ -5,7 +5,6 @@ "version": 1.0, "comments": "Configuration for GeoView footer package.", "additionalProperties": true, - "properties": { "tabs": { "type": "object", @@ -15,10 +14,16 @@ "type": "array", "items": { "type": "string", - "enum": ["legend", "details", "data-grid"] + "enum": [ + "legend", + "details" + ] }, "minItems": 0, - "default": ["legend", "details", "data-grid"], + "default": [ + "legend", + "details" + ], "uniqueItems": true, "description": "Defaut tabs of footer panel to use" }, @@ -43,21 +48,28 @@ }, "additionalProperties": false }, - "suportedLanguages": { "type": "array", "uniqueItems": true, "items": { "type": "string", - "enum": ["en", "fr"] + "enum": [ + "en", + "fr" + ] }, - "default": ["en", "fr"], + "default": [ + "en", + "fr" + ], "description": "ISO 639-1 code indicating the languages supported by the configuration file.", "minItems": 1 }, "version": { "type": "string", - "enum": ["1.0"], + "enum": [ + "1.0" + ], "description": "The schema version used to validate the configuration file. The schema should enumerate the list of versions accepted by this version of the viewer." }, "collapsed": { @@ -66,5 +78,8 @@ "description": "State of footer panel when map is loaded" } }, - "required": ["suportedLanguages", "tabs"] -} + "required": [ + "suportedLanguages", + "tabs" + ] +} \ No newline at end of file diff --git a/packages/geoview-footer-panel/src/data-item.tsx b/packages/geoview-footer-panel/src/data-item.tsx deleted file mode 100644 index 68eb1839e69..00000000000 --- a/packages/geoview-footer-panel/src/data-item.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/* eslint-disable react/require-default-props */ -import { TypeWindow, getLocalizedValue, TypeTabs, AbstractGeoViewVector } from 'geoview-core'; - -interface Props { - mapId: string; -} -const w = window as TypeWindow; - -/** - * Create an element that displays the data grid footer component - * - * @returns {JSX.Element} created data grid footer component - */ -export function DataItem({ mapId }: Props): JSX.Element { - const { cgpv } = w; - const { api, ui, react } = cgpv; - const { Tabs } = ui.elements; - const { useState, useEffect } = react; - - // eslint-disable-next-line @typescript-eslint/ban-types - const [dataLayers, setDataLayers] = useState([]); - - const updateLayers = () => { - if (api.maps[mapId].layer?.layerOrder !== undefined) setDataLayers([...api.maps[mapId].layer.layerOrder].reverse()); - }; - - useEffect(() => { - api.event.on(api.eventNames.MAP.EVENT_MAP_LOADED, updateLayers, mapId); - api.event.on(api.eventNames.LAYER_SET.UPDATED, updateLayers, `${mapId}/$LegendsLayerSet$`); - - return () => { - api.event.off(api.eventNames.MAP.EVENT_MAP_LOADED, mapId, updateLayers); - api.event.off(api.eventNames.LAYER_SET.UPDATED, mapId, updateLayers); - }; - }); - - setTimeout(() => { - dataLayers.forEach((layerId) => { - const layerSelection = document.getElementById(`${layerId}-groupLayerSelection`); - if (layerSelection) { - (layerSelection as HTMLSelectElement).addEventListener('change', function onChange(this) { - const { selectedIndex } = this; - const datagridTables = document.getElementsByClassName(`${layerId}-layer-datagrid-table`); - if (datagridTables.length > 0) { - for (let i = 0; i < datagridTables.length; i++) { - (datagridTables[i] as HTMLDivElement).setAttribute('style', `display:${i !== selectedIndex ? 'none' : 'block'}`); - } - } - }); - } - }); - }, 2000); - - return ( - { - const geoviewLayerInstance = api.maps[mapId].layer.geoviewLayers[layerId] as AbstractGeoViewVector; - const labelValue = getLocalizedValue(geoviewLayerInstance.geoviewLayerName, mapId); - - // TODO: needs refactor here for group layers. - return { - value: index, - label: labelValue !== undefined ? labelValue : `data-${index}`, - content: () => - api.maps[mapId].dataGrid.createDataGrid({ - layerId, - }), - }; - })} - /> - ); -} diff --git a/packages/geoview-footer-panel/src/group-layers.tsx b/packages/geoview-footer-panel/src/group-layers.tsx deleted file mode 100644 index 5a22570f9d3..00000000000 --- a/packages/geoview-footer-panel/src/group-layers.tsx +++ /dev/null @@ -1,27 +0,0 @@ -interface GroupLayersProps { - layerKeys: string[]; - layerId: string; - mapId: string; -} - -/** - * Create a select element with layers as options. - * @param layerKeys list of layer keys - * @param layerId id of the layer - * @param mapId id of the map - * @returns {JSX.Element} created data grid footer component - */ - -export default function GroupLayers({ mapId, layerKeys, layerId }: GroupLayersProps) { - return ( - - ); -} diff --git a/packages/geoview-footer-panel/src/index.tsx b/packages/geoview-footer-panel/src/index.tsx index 5a4db5b7ca5..6e68f8989a3 100644 --- a/packages/geoview-footer-panel/src/index.tsx +++ b/packages/geoview-footer-panel/src/index.tsx @@ -16,7 +16,6 @@ import schema from '../schema.json'; import defaultConfig from '../default-config-footer-panel.json'; import { DetailsItem } from './details-item'; import { LegendItem } from './legend-item'; -import { DataItem } from './data-item'; const w = window as TypeWindow; @@ -58,12 +57,12 @@ class FooterPanelPlugin extends AbstractPlugin { en: { legend: 'Legend', details: 'Details', - dataGrid: 'Data', + dataTable: 'Data', }, fr: { legend: 'Légende', details: 'Détails', - dataGrid: 'Données', + dataTable: 'Données', }, }); @@ -135,16 +134,6 @@ class FooterPanelPlugin extends AbstractPlugin { ); } - if (defaultTabs.includes('data-grid')) { - /// create new tab and add the DataGridComponent to the footer tab - footerTabs.createFooterTab({ - value: tabsCounter, - label: this.translations[displayLanguage].dataGrid as string, - content: () => , - }); - tabsCounter++; - } - // TODO add custom detail reusable component when done const customTabs = configObj?.tabs.customTabs as Array; From 606bee1f97267626fe5863eb2519a6352fd7e6bb Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Thu, 5 Oct 2023 12:50:51 -0400 Subject: [PATCH 2/3] fix(DataTable): remove data grid from footer panel Closes #1309 --- common/config/rush/pnpm-lock.yaml | 28 -------------------- packages/geoview-core/package.json | 3 +-- packages/geoview-core/src/ui/index.ts | 1 - packages/geoview-core/src/ui/table/table.tsx | 11 -------- 4 files changed, 1 insertion(+), 42 deletions(-) delete mode 100644 packages/geoview-core/src/ui/table/table.tsx diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 0a2b253824b..b5d11ddd320 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -120,7 +120,6 @@ importers: '@mui/material': ^5.14.6 '@mui/styles': ^5.14.6 '@mui/system': ^5.14.6 - '@mui/x-data-grid': ^5.17.26 '@mui/x-date-pickers': ^6.13.0 '@nieuwlandgeo/sldreader': ^0.3.1 '@types/create-react-class': ^15.6.3 @@ -208,7 +207,6 @@ importers: '@mui/material': 5.14.10_z3lur6ypmh5qwbjfxgrqu4qyca '@mui/styles': 5.14.10_dpmmhqj3uzrk25jjzo7arvivk4 '@mui/system': 5.14.10_rfkbpnzsimr7lblgvywgowtdjy - '@mui/x-data-grid': 5.17.26_ck7kmcuxqrljrcmbd4xvj4hurm '@mui/x-date-pickers': 6.15.0_gnwipsnaj7gjrdstfphvpeudfi '@nieuwlandgeo/sldreader': 0.3.1_ol@8.1.0 ajv: 8.12.0 @@ -2794,28 +2792,6 @@ packages: react-is: 18.2.0 dev: false - /@mui/x-data-grid/5.17.26_ck7kmcuxqrljrcmbd4xvj4hurm: - resolution: {integrity: sha512-eGJq9J0g9cDGLFfMmugOadZx0mJeOd/yQpHwEa5gUXyONS6qF0OhXSWyDOhDdA3l2TOoQzotMN5dY/T4Wl1KYA==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@mui/material': ^5.4.1 - '@mui/system': ^5.4.1 - react: ^17.0.2 || ^18.0.0 - react-dom: ^17.0.2 || ^18.0.0 - dependencies: - '@babel/runtime': 7.23.1 - '@mui/material': 5.14.10_z3lur6ypmh5qwbjfxgrqu4qyca - '@mui/system': 5.14.10_rfkbpnzsimr7lblgvywgowtdjy - '@mui/utils': 5.14.10_dpmmhqj3uzrk25jjzo7arvivk4 - clsx: 1.2.1 - prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0_react@18.2.0 - reselect: 4.1.8 - transitivePeerDependencies: - - '@types/react' - dev: false - /@mui/x-date-pickers/6.15.0_gnwipsnaj7gjrdstfphvpeudfi: resolution: {integrity: sha512-ubo5SBGe5qPU3F7/mMOa/Yb52GggLGvROCe3HdlatD6LebsxqsERsI2O8aLqwUwIb1AAX2GeiJLdvNBPCQ8xpQ==} engines: {node: '>=14.0.0'} @@ -8420,10 +8396,6 @@ packages: resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} dev: true - /reselect/4.1.8: - resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==} - dev: false - /resolve-cwd/3.0.0: resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==} engines: {node: '>=8'} diff --git a/packages/geoview-core/package.json b/packages/geoview-core/package.json index 56784bc3c2a..3b1eca4a6cb 100644 --- a/packages/geoview-core/package.json +++ b/packages/geoview-core/package.json @@ -52,7 +52,6 @@ "@mui/material": "^5.14.6", "@mui/styles": "^5.14.6", "@mui/system": "^5.14.6", - "@mui/x-data-grid": "^5.17.26", "@nieuwlandgeo/sldreader": "^0.3.1", "@mui/x-date-pickers": "^6.13.0", "ajv": "^8.12.0", @@ -177,4 +176,4 @@ "react": "^18.2.0", "react-dom": "^18.2.0" } -} +} \ No newline at end of file diff --git a/packages/geoview-core/src/ui/index.ts b/packages/geoview-core/src/ui/index.ts index ffe49e838db..17af61d3c08 100644 --- a/packages/geoview-core/src/ui/index.ts +++ b/packages/geoview-core/src/ui/index.ts @@ -38,7 +38,6 @@ export * from './stepper/stepper'; export * from './style/theme'; export * from './svg/geo-ca-icon'; export * from './switch/switch'; -export * from './table/table'; export * from './tabs/tabs'; export * from './text-field/custom-text-field'; export * from './text-field/text-field'; diff --git a/packages/geoview-core/src/ui/table/table.tsx b/packages/geoview-core/src/ui/table/table.tsx deleted file mode 100644 index 42ba21f103e..00000000000 --- a/packages/geoview-core/src/ui/table/table.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { DataGrid, DataGridProps } from '@mui/x-data-grid'; - -/** - * Create a table component - * - * @param {DataGridProps} props table properties - * @returns {JSX.Element} returns table component - */ -export function Table(props: DataGridProps): JSX.Element { - return ; -} From 5f13a7036a52966c21e186f6865444be3faf7724 Mon Sep 17 00:00:00 2001 From: kaminderpal Date: Thu, 5 Oct 2023 14:03:21 -0400 Subject: [PATCH 3/3] fix(DataTable): remove data grid from footer panel Closes #1309 --- .vscode/settings.json | 2 +- .../public/templates/raw-data-table.html | 57 ------------------- .../default-config-footer-panel.json | 3 +- packages/geoview-footer-panel/schema.json | 6 +- .../geoview-footer-panel/src/data-table.tsx | 48 ++++++++++++++++ packages/geoview-footer-panel/src/index.tsx | 13 ++++- 6 files changed, 67 insertions(+), 62 deletions(-) create mode 100644 packages/geoview-footer-panel/src/data-table.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 12ab29c36d9..411922be25a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,6 @@ { "editor.detectIndentation": false, - "editor.renderWhitespace": "none", + "editor.renderWhitespace": "all", "editor.tabSize": 2, "editor.hover.delay": 1000, "window.title": "${activeEditorMedium}${separator}${rootName}${separator}${profileName}" diff --git a/packages/geoview-core/public/templates/raw-data-table.html b/packages/geoview-core/public/templates/raw-data-table.html index 02821e076c3..4608e7edcff 100644 --- a/packages/geoview-core/public/templates/raw-data-table.html +++ b/packages/geoview-core/public/templates/raw-data-table.html @@ -59,66 +59,9 @@

1. Default Configuration

// initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready cgpv.init(function () { console.log('api is ready'); - const { api, ui, createRoot } = cgpv; - const mapId1 = "mapWM1"; - const mapId2 = "mapWM2"; - //create snippets createConfigSnippet(); createCodeSnippet(); - - renderDataTableFromMap = async () => { - // import footerTabs from the core for the current map - const { footerTabs: ft1 } = api.maps[mapId1]; - console.time("renderDataTableFromMap") - const root = createRoot(document.getElementById("dataTable")); - - root.render("Data is loading...") - - const layerId = Object.keys(api.maps[mapId1].layer.geoviewLayers)[2]; - const data = await cgpv.api.maps[mapId1].dataTable.createDataPanel({ layerId, mapId: mapId1 }) - - // create new tab and add the LegendComponent to the footer tab - ft1.createFooterTab({ - value: 3, - label: 'Data Table', - content: () => data, - }); - - root.render("") - - console.timeEnd("renderDataTableFromMap") - }; - - renderFrenchDataTableFromMap = async () => { - // import footerTabs from the core for the current map - const { footerTabs: ft1 } = api.maps[mapId2]; - console.time("renderFrDataTableFromMap") - const root = createRoot(document.getElementById("frDataTable")); - - root.render("Les données sont en cours de chargement...") - - const layerId = Object.keys(api.maps[mapId2].layer.geoviewLayers)[2]; - const data = await cgpv.api.maps[mapId2].dataTable.createDataPanel({ layerId, mapId: mapId2 }) - - // create new tab and add the LegendComponent to the footer tab - ft1.createFooterTab({ - value: 3, - label: 'Nouveau Données', - content: () => data, - }); - root.render("") - - console.timeEnd("renderFrDataTableFromMap") - } - - cgpv.api.event.on(cgpv.api.eventNames.MAP.EVENT_MAP_LOADED, (payload) => { - renderDataTableFromMap(); - }, 'mapWM1'); - - cgpv.api.event.on(cgpv.api.eventNames.MAP.EVENT_MAP_LOADED, (payload) => { - renderFrenchDataTableFromMap(); - }, 'mapWM2'); }); diff --git a/packages/geoview-footer-panel/default-config-footer-panel.json b/packages/geoview-footer-panel/default-config-footer-panel.json index 3967aa2c669..e59945b1c00 100644 --- a/packages/geoview-footer-panel/default-config-footer-panel.json +++ b/packages/geoview-footer-panel/default-config-footer-panel.json @@ -2,7 +2,8 @@ "tabs": { "defaultTabs": [ "legend", - "details" + "details", + "data-table" ], "customTabs": [] }, diff --git a/packages/geoview-footer-panel/schema.json b/packages/geoview-footer-panel/schema.json index d0553fcf295..03f5c6cb926 100644 --- a/packages/geoview-footer-panel/schema.json +++ b/packages/geoview-footer-panel/schema.json @@ -16,13 +16,15 @@ "type": "string", "enum": [ "legend", - "details" + "details", + "data-table" ] }, "minItems": 0, "default": [ "legend", - "details" + "details", + "data-table" ], "uniqueItems": true, "description": "Defaut tabs of footer panel to use" diff --git a/packages/geoview-footer-panel/src/data-table.tsx b/packages/geoview-footer-panel/src/data-table.tsx new file mode 100644 index 00000000000..d9b3e548aef --- /dev/null +++ b/packages/geoview-footer-panel/src/data-table.tsx @@ -0,0 +1,48 @@ +import type React from 'react'; +import { TypeWindow } from 'geoview-core'; + +interface DataTableProps { + mapId: string; +} + +const w = window as TypeWindow; + +/** + * Create the datatable that displays in footer panel. + * + * @returns {JSX.Element} created data table component + */ + +export function DataTable({ mapId }: DataTableProps) { + const { cgpv } = w; + const { api, react } = cgpv; + const { useState, useEffect } = react; + + const [table, setTable] = useState(null); + + /** + * Create data table from geo view layers. + */ + const createDataTable = async () => { + const data = await cgpv.api.maps[mapId].dataTable.createDataPanel(); + setTable(data); + }; + + /** + * get the table after map is loaded and timeout has been passed. + */ + const getDataTable = () => { + setTimeout(() => { + createDataTable(); + }, 1000); + }; + + useEffect(() => { + api.event.on(api.eventNames.MAP.EVENT_MAP_LOADED, getDataTable, mapId); + return () => { + api.event.off(api.eventNames.MAP.EVENT_MAP_LOADED, mapId, getDataTable); + }; + }, []); + + return
{table}
; +} diff --git a/packages/geoview-footer-panel/src/index.tsx b/packages/geoview-footer-panel/src/index.tsx index 6e68f8989a3..a1d20c469d1 100644 --- a/packages/geoview-footer-panel/src/index.tsx +++ b/packages/geoview-footer-panel/src/index.tsx @@ -16,6 +16,7 @@ import schema from '../schema.json'; import defaultConfig from '../default-config-footer-panel.json'; import { DetailsItem } from './details-item'; import { LegendItem } from './legend-item'; +import { DataTable } from './data-table'; const w = window as TypeWindow; @@ -57,7 +58,7 @@ class FooterPanelPlugin extends AbstractPlugin { en: { legend: 'Legend', details: 'Details', - dataTable: 'Data', + dataTable: 'DataTable', }, fr: { legend: 'Légende', @@ -134,6 +135,16 @@ class FooterPanelPlugin extends AbstractPlugin { ); } + if (defaultTabs.includes('data-table')) { + /// create new tab and add the DataTable Component to the footer tab + footerTabs.createFooterTab({ + value: tabsCounter, + label: this.translations[displayLanguage].dataTable as string, + content: () => , + }); + tabsCounter++; + } + // TODO add custom detail reusable component when done const customTabs = configObj?.tabs.customTabs as Array;