diff --git a/packages/geoview-core/public/locales/en/translation.json b/packages/geoview-core/public/locales/en/translation.json index 54ebc1c9684..d36f888b48d 100644 --- a/packages/geoview-core/public/locales/en/translation.json +++ b/packages/geoview-core/public/locales/en/translation.json @@ -203,7 +203,8 @@ "images": "Images", "close": "Close", "dataTableInstructions": "Data Table Instructions", - "selectVisbleLayer": "Click on a layer to view the data table" + "selectVisbleLayer": "Click on a layer to view the data table", + "noFeatures": "unknown..." }, "geoChart": { "noChartAvailable": "Click on the map layer with chart" diff --git a/packages/geoview-core/public/locales/fr/translation.json b/packages/geoview-core/public/locales/fr/translation.json index 93357b41d60..ec8819a6346 100644 --- a/packages/geoview-core/public/locales/fr/translation.json +++ b/packages/geoview-core/public/locales/fr/translation.json @@ -115,9 +115,7 @@ "querying": "Requête en cours", "layerAdded": "Couche __param__ ajoutée", "instructionsNoLayersTitle": "Aucune couche visible", - "instructionsNoLayersBody": "Ajoutez des couches visibles sur la carte.", - "dataTableInstructions": "Instructions relatives aux tableaux de données", - "selectVisbleLayer": "Cliquez sur une couche pour afficher le tableau de données" + "instructionsNoLayersBody": "Ajoutez des couches visibles sur la carte." }, "details": { "title": "Détails", @@ -203,7 +201,10 @@ "features": "Item(s)", "featureFiltered": "Item filtrée(s)", "images": "Images", - "close": "Fermer" + "close": "Fermer", + "dataTableInstructions": "Instructions relatives aux tableaux de données", + "selectVisbleLayer": "Cliquez sur une couche pour afficher le tableau de données", + "noFeatures": "inconnue..." }, "geochart": { "noChartAvailable": "Cliquez sur la couche de carte avec le graphique" 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 ecdc75a3c40..0e5679dc902 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 @@ -98,14 +98,20 @@ export function Datapanel({ fullWidth }: DataPanelType) { const isMapFilteredSelectedForLayer = (layerPath: string): boolean => !!mapFiltered[layerPath] && !!rowsFiltered[layerPath]; /** - * Get number of features of a layer with filtered or selected layer. + * Get number of features of a layer with filtered or selected layer or unknown when data table is loaded. * @param {string} layerPath the path of the layer * @returns */ const getFeaturesOfLayer = (layerPath: string): string => { - return rowsFiltered && rowsFiltered[layerPath] - ? `${rowsFiltered[layerPath]} ${t('dataTable.featureFiltered')}` - : `${orderedLayerData?.find((layer) => layer.layerPath === layerPath)?.features?.length ?? 0} ${t('dataTable.features')}`; + if (rowsFiltered && rowsFiltered[layerPath]) { + return `${rowsFiltered[layerPath]} ${t('dataTable.featureFiltered')}`; + } + let featureStr = t('dataTable.noFeatures'); + const features = orderedLayerData?.find((layer) => layer.layerPath === layerPath)?.features?.length ?? 0; + if (features > 0) { + featureStr = `${features} ${t('dataTable.features')}`; + } + return featureStr; }; /** @@ -127,16 +133,33 @@ export function Datapanel({ fullWidth }: DataPanelType) { * Checks if layer is disabled when layer is selected and features have null value. * @returns bool */ - const isLayerDisabled = useMemo( - () => () => !!orderedLayerData.find((layer) => layer.layerPath === selectedLayerPath && layer.features === null), - [orderedLayerData, selectedLayerPath] - ); + const isLayerDisabled = useMemo(() => { + // Log + logger.logTraceUseMemo('DATA-PANEL - isLayerDisabled', selectedLayerPath); + + return () => !!orderedLayerData.find((layer) => layer.layerPath === selectedLayerPath && layer.features === null); + }, [orderedLayerData, selectedLayerPath]); + + /** + * Checks if selected layer has features. + */ + const isSelectedLayerHasFeatures = useMemo(() => { + // Log + logger.logTraceUseMemo('DATA-PANEL - isSelectedLayerHasFeatures', selectedLayerPath); + + return () => orderedLayerData.find((layer) => layer.layerPath === selectedLayerPath && layer?.features?.length); + }, [selectedLayerPath, orderedLayerData]); /** * Checks if all layers have no features like features are empty array. * @returns */ - const isAllLayersNoFeatures = useMemo(() => () => orderedLayerData.every((layers) => !layers?.features?.length), [orderedLayerData]); + const isAllLayersNoFeatures = useMemo(() => { + // Log + logger.logTraceUseMemo('DATA-PANEL - isAllLayersNoFeatures'); + + return () => orderedLayerData.every((layers) => !layers?.features?.length); + }, [orderedLayerData]); useEffect(() => { // Log @@ -180,6 +203,7 @@ export function Datapanel({ fullWidth }: DataPanelType) { {!isLoading && selectedTab === TABS.DATA_TABLE && !isLayerDisabled() && + isSelectedLayerHasFeatures() && orderedLayerData.map((data) => ( {data.layerPath === selectedLayerPath ? ( @@ -191,7 +215,7 @@ export function Datapanel({ fullWidth }: DataPanelType) { ))} {/* show data table instructions when all layers has no features */} - {((!isLoading && isAllLayersNoFeatures()) || isLayerDisabled()) && ( + {((!isLoading && isAllLayersNoFeatures()) || isLayerDisabled() || selectedLayerPath === '') && ( {t('dataTable.dataTableInstructions')} diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx index b1cb033c47c..c479bbb97a6 100644 --- a/packages/geoview-core/src/core/components/data-table/data-table.tsx +++ b/packages/geoview-core/src/core/components/data-table/data-table.tsx @@ -292,7 +292,10 @@ function DataTable({ data, layerPath, tableHeight = 600 }: DataTableProps) { if (isValidElement(row[key])) { return row[key]; } - return row[key]?.value ?? ''; + if (typeof row[key]?.value === 'string' || typeof row[key]?.value === 'number') { + return row[key]?.value ?? ''; + } + return ''; }, header: value.alias, filterFn: 'contains',