Merge pull request Canadian-Geospatial-Platform#1761 from Alex-NRCan/…

…fix-geocore [FIX] Details-panel highlighting and more things (Canadian-Geospatial-Platform#1761)
Alex-NRCan · Feb 9, 2024 · 719e29f · 719e29f
2 parents 4d8cd51 + 8ef137d
commit 719e29f
Show file tree

Hide file tree

Showing 18 changed files with 333 additions and 267 deletions.
diff --git a/packages/geoview-core/public/templates/layers/geocore.html b/packages/geoview-core/public/templates/layers/geocore.html
@@ -77,8 +77,6 @@ <h4 id="HLYR1">1. Many GeoCore Layers</h4>
               {
                 'geoviewLayerType': 'geoCore',
                 'listOfLayerEntryConfig': [
-                  /*===========================================================================
-                  Temporarilly deactivate this entry because the service has a legend problem
                   {
                     'layerId': '0fe65119-e96e-4a57-8bfe-9d9245fba06b',
                     'geocoreLayerName': { 'en': 'HRDEM Mosaic Hillshade' },
@@ -92,7 +90,6 @@ <h4 id="HLYR1">1. Many GeoCore Layers</h4>
                       }
                     ]
                   },
-                  /*===========================================================================*/
                   {
                     'layerId': 'ccc75c12-5acc-4a6a-959f-ef6f621147b9',
                     'geocoreLayerName': { 'en': 'Commemorative Map' },
@@ -127,6 +124,11 @@ <h4 id="HLYR1">1. Many GeoCore Layers</h4>
             ]
           },
           'components': ['overview-map'],
+          'footerBar': {
+            'tabs': {
+              'core': ['legend', 'layers', 'details', 'data-table']
+            }
+          },
           'corePackages': [],
           'theme': 'dark',
           'suportedLanguages': ['en']

diff --git a/packages/geoview-core/src/api/plugin/plugin.ts b/packages/geoview-core/src/api/plugin/plugin.ts
@@ -1,18 +1,16 @@
 import React from 'react';
-
-import { useTheme } from '@mui/material/styles';
-
 import i18next from 'i18next';
 import * as translate from 'react-i18next';
-
+import { useTheme } from '@mui/material/styles';
 import Ajv from 'ajv';
 
 import { whenThisThen, showError } from '@/core/utils/utilities';
-
 import { api } from '@/app';
+import { TypeJsonObject, TypeJsonValue } from '@/core/types/global-types';
+import { logger } from '@/core/utils/logger';
+
 import { AbstractPlugin } from './abstract-plugin';
 import { TypePluginStructure } from './plugin-types';
-import { TypeJsonObject, TypeJsonValue } from '@/core/types/global-types';
 
 /**
  * Class to manage plugins
@@ -160,8 +158,10 @@ export class Plugin {
           if (!valid && validate.errors && validate.errors.length) {
             for (let j = 0; j < validate.errors.length; j += 1) {
               const error = validate.errors[j];
-
               const errorMessage = `Plugin ${pluginId}: ${error.instancePath} ${error.message} - ${JSON.stringify(error.params)}`;
+
+              // Log
+              logger.logError(errorMessage);
               showError(mapId, errorMessage);
             }
           }

diff --git a/packages/geoview-core/src/core/components/click-marker/click-marker.tsx b/packages/geoview-core/src/core/components/click-marker/click-marker.tsx
@@ -4,13 +4,7 @@ import { Coordinate } from 'ol/coordinate'; // For typing only
 
 import { getGeoViewStore } from '@/core/stores/stores-managers';
 
-import {
-  TypeFeatureInfoEntry,
-  TypeJsonObject,
-  useDetailsStoreLayerDataArray,
-  useDetailsStoreSelectedLayerPath,
-  useGeoViewMapId,
-} from '@/app';
+import { TypeJsonObject, useGeoViewMapId } from '@/app';
 import { Box, ClickMapMarker } from '@/ui';
 
 import { useMapClickMarker, useMapStoreActions } from '@/core/stores/store-interface-and-intial-values/map-state';
@@ -40,43 +34,9 @@ export function ClickMarker(): JSX.Element {
 
   // get values from the store
   const clickMarker = useMapClickMarker();
-  const { hideClickMarker, setOverlayClickMarkerRef, showClickMarker, addSelectedFeature, removeSelectedFeature } = useMapStoreActions();
-  const layerDataArray = useDetailsStoreLayerDataArray();
-  const selectedLayerPath = useDetailsStoreSelectedLayerPath();
+  const { setOverlayClickMarkerRef, showClickMarker } = useMapStoreActions();
   setTimeout(() => setOverlayClickMarkerRef(clickMarkerRef.current as HTMLElement), 0);
 
-  // When layerDataArray is updated, check for feature to add to selectedFeatures (highlight)
-  useEffect(() => {
-    // Log
-    logger.logTraceUseEffect('CLICK-MARKER - layerDataArray', layerDataArray);
-
-    removeSelectedFeature('all');
-    let feature: TypeFeatureInfoEntry | undefined;
-    const selectedLayerDataEntry = layerDataArray.filter((layerData) => layerData.layerPath === selectedLayerPath)[0];
-    if (
-      selectedLayerDataEntry != null &&
-      selectedLayerDataEntry.features?.length &&
-      selectedLayerDataEntry.features[0].geoviewLayerType !== 'ogcWms'
-    )
-      [feature] = selectedLayerDataEntry.features;
-    else {
-      layerDataArray.every((layer) => {
-        const { features } = layer;
-        if (features && features.length > 0 && features[0].geoviewLayerType !== 'ogcWms') {
-          [feature] = features;
-          return false;
-        }
-        return true;
-      });
-    }
-
-    if (feature) {
-      hideClickMarker();
-      addSelectedFeature(feature);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [layerDataArray]);
-
   useEffect(() => {
     // Log
     logger.logTraceUseEffect('CLICK-MARKER - mount');
@@ -86,7 +46,6 @@ export function ClickMarker(): JSX.Element {
       (state) => state.mapState.clickCoordinates,
       (curClick, prevClick) => {
         if (curClick !== prevClick) {
-          removeSelectedFeature('all');
           markerCoordinates.current = curClick!.lnglat;
           showClickMarker({ lnglat: curClick!.lnglat });
         }

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
@@ -71,7 +71,7 @@ export const getSxClasses = (theme: Theme) => ({
   paper: { marginBottom: '1rem' },
   borderWithIndex: `2px solid ${theme.palette.geoViewColor.primary.main}`,
   borderNone: 'none',
-  backgroundProcessing: `${theme.palette.geoViewColor.warning.light[500]}`,
+  backgroundProcessing: `${theme.palette.geoViewColor.warning.opacity(0.33)}`,
   backgroundError: `${theme.palette.geoViewColor.error.main}`,
   default: `${theme.palette.geoViewColor.bgColor.light[100]}`,
   headline: { fontSize: '1.125rem', fontWeight: 'bold' },

diff --git a/packages/geoview-core/src/core/components/common/layout.tsx b/packages/geoview-core/src/core/components/common/layout.tsx
@@ -25,7 +25,6 @@ export function Layout({ children, layerList, selectedLayerPath, handleLayerList
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 
-  const layerTitle = t('general.layers');
   const [isLayersPanelVisible, setIsLayersPanelVisible] = useState(false);
   const [isEnlargeDataTable, setIsEnlargeDataTable] = useState(false);
 
@@ -76,7 +75,7 @@ export function Layout({ children, layerList, selectedLayerPath, handleLayerList
     <Box sx={sxClasses.detailsContainer}>
       <ResponsiveGrid.Root sx={{ pt: 8, pb: 8 }} ref={panelTitleRef}>
         <ResponsiveGrid.Left isLayersPanelVisible={isLayersPanelVisible} isEnlargeDataTable={isEnlargeDataTable}>
-          <LayerTitle>{layerTitle}</LayerTitle>
+          {!!layerList.length && <LayerTitle>{t('general.layers')}</LayerTitle>}
         </ResponsiveGrid.Left>
         <ResponsiveGrid.Right isLayersPanelVisible={isLayersPanelVisible} isEnlargeDataTable={isEnlargeDataTable}>
           <Box

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
@@ -169,7 +169,7 @@ export function Datapanel() {
     <Box sx={sxClasses.dataPanel}>
       <ResponsiveGrid.Root sx={{ pt: 8, pb: 8 }} ref={panelTitleRef}>
         <ResponsiveGrid.Left isLayersPanelVisible={isLayersPanelVisible} isEnlargeDataTable={isEnlargeDataTable}>
-          <LayerTitle>{t('general.layers')}</LayerTitle>
+          {!!orderedLayerData?.length && <LayerTitle>{t('general.layers')}</LayerTitle>}
         </ResponsiveGrid.Left>
         <ResponsiveGrid.Right isLayersPanelVisible={isLayersPanelVisible} isEnlargeDataTable={isEnlargeDataTable}>
           <Box