Rebase on upstream/develop to get the config API modifications made f…

…or add layer tree.

packages/geoview-core/package.json

@@ -52,7 +52,6 @@
     "@mui/x-tree-view": "^7.17.0",
     "@nieuwlandgeo/sldreader": "^0.3.1",
     "@mui/x-date-pickers": "^7.6.1",
-    "@mui/x-tree-view": "^7.6.1",
     "@react-spring/web": "^9.7.3",
     "ajv": "^8.16.0",
     "ajv-errors": "^3.0.0",

packages/geoview-core/public/datasets/geojson/metadata.meta

@@ -503,4 +503,3 @@
     }
   ]
 }
-

packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-layer-tree.tsx

@@ -42,20 +42,22 @@ export function AddLayerTree(props: AddLayerTreeProps): JSX.Element | null {
       .concat(selectedItems);
     setDefaultExpandedItems(result);
     setIsInitialized(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [startingSelectedItems]);
 
   useEffect(() => {
     // Log
     logger.logTraceUseEffect('Add Layer Tree - selectedItems ', selectedItems);
     onSelectedItemsChange(selectedItems);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedItems]);
 
   /**
    * Recursive function to render tree item. It renders the layer and its children.
    * @param layer - the layer to render
    * @param parentId - the parent id of the layer
    */
-  const renderTreeItem = function (layer: GroupLayerEntryConfig, parentId: string | null): JSX.Element {
+  const renderTreeItem = (layer: GroupLayerEntryConfig, parentId: string | null): JSX.Element => {
     const curLayerId = `${parentId ? `${parentId}/` : ''}${layer.layerId}`;
     return (
       <TreeItem key={curLayerId} itemId={curLayerId} label={layer.layerName} aria-label={layer.layerName}>
@@ -72,7 +74,7 @@ export function AddLayerTree(props: AddLayerTreeProps): JSX.Element | null {
    * @param treeLayerId - the id of the layer
    * @returns - the list of children of the layer
    */
-  const getLayerChildren = function (treeLayerId: string): string[] {
+  const getLayerChildren = (treeLayerId: string): string[] => {
     const result: string[] = [];
 
     function populateLayerChildren(origLayerId: string, parentViewId: string | null): void {
@@ -100,7 +102,7 @@ export function AddLayerTree(props: AddLayerTreeProps): JSX.Element | null {
     return _.uniq(result).sort();
   };
 
-  const handleItemSelectionToggle = function (event: React.SyntheticEvent, itemId: string, isSelected: boolean): void {
+  const handleItemSelectionToggle = (event: React.SyntheticEvent, itemId: string, isSelected: boolean): void => {
     const layerChildren = getLayerChildren(itemId);
     const toAddOrRemove = [itemId, ...layerChildren];
 
@@ -115,8 +117,7 @@ export function AddLayerTree(props: AddLayerTreeProps): JSX.Element | null {
     return null;
   }
 
-  const renderTreeItems = function () {
-    // return layersData[0].listOfLayerEntryConfig.map((layer) => renderTreeItem(layer as GroupLayerEntryConfig, null));
+  const renderTreeItems = (): JSX.Element[] => {
     return layersData.map((layer) => renderTreeItem(layer as GroupLayerEntryConfig, null));
   };
 

packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx

@@ -25,10 +25,11 @@ import {
   TypeGeoviewLayerType,
 } from '@/geo/layer/geoview-layers/abstract-geoview-layers';
 import { CONST_LAYER_ENTRY_TYPES } from '@/geo/map/map-schema-types';
-import { GroupLayerEntryConfig } from '@/api/config/types/map-schema-types';
+import { EntryConfigBaseClass, GroupLayerEntryConfig } from '@/api/config/types/map-schema-types';
 import { AddLayerTree } from './add-layer-tree';
 import { buildGeoLayerToAdd } from './add-new-layers-utils';
 import { useAppDisplayLanguage } from '@/core/stores/store-interface-and-intial-values/app-state';
+import { GeoviewLayerConfigError } from '@/api/config/types/classes/config-exceptions';
 
 export function AddNewLayer(): JSX.Element {
   // Log
@@ -153,14 +154,34 @@ export function AddNewLayer(): JSX.Element {
 
     const populateLayerList = async (curlayerType: TypeGeoviewLayerType): Promise<boolean> => {
       try {
-        const layersTree = await api.config.createMetadataLayerTree(layerURL, curlayerType, [], language);
-        logger.logDebug('layersTree', layersTree);
-        setLayerList(layersTree as GroupLayerEntryConfig[]);
-        if (layersTree.length > 0) {
-          setLayerName(layersTree[0].layerName ?? '');
+        // create an instance of the GeoView layer. The list of layer entry config is empty, but if the URL specify a sublayer
+        // the instance created will adjust the metadata access path and the list of sublayers accordingly.
+        const geoviewLayerConfig = await api.config.createLayerConfig(layerURL, curlayerType, [], language);
+        if (geoviewLayerConfig && !geoviewLayerConfig.getErrorDetectedFlag()) {
+          // GV: Here, the list of layer entry config may be empty or it may contain one layer Id specified in the URL.
+          // GV: This list of layer entry config will be used as a filter for the layer tree. Also, when we want to build the layer tree,
+          // GV: we set the metadata layer tree with the layer tree filter and use an empty list of layer entry config. This is how the
+          // GV: GeoView instance differentiate the creation of a layer tree and the creation of a GeoView layer with its list of sublayers.
+          // Set the layer tree filter.
+          geoviewLayerConfig.setMetadataLayerTree(
+            (geoviewLayerConfig.listOfLayerEntryConfig.length
+              ? [{ layerId: geoviewLayerConfig.listOfLayerEntryConfig[0].layerId }]
+              : []) as EntryConfigBaseClass[]
+          );
+          // GV: The listOfLayerEntryConfig must be empty when we want to build the layer tree.
+          geoviewLayerConfig.listOfLayerEntryConfig = [];
+          // Then, we fetch the service metadata. This will populate the layer tree.
+          await geoviewLayerConfig.fetchServiceMetadata();
+          const layersTree = geoviewLayerConfig.getMetadataLayerTree()!;
+          logger.logDebug('layersTree', layersTree);
+          setLayerList(layersTree as GroupLayerEntryConfig[]);
+          if (layersTree.length > 0) {
+            setLayerName(layersTree[0].layerName ?? '');
+          }
+          setHasMetadata(true);
+          return true;
         }
-        setHasMetadata(true);
-        return true;
+        throw new GeoviewLayerConfigError(`Unable to create ${curlayerType} GeoView layer using "${layerURL} URL.`);
       } catch (err) {
         emitErrorServer(curlayerType);
         return false;
@@ -213,8 +234,10 @@ export function AddNewLayer(): JSX.Element {
   const handleStep3 = (): void => {
     let valid = true;
     if (layerIdsToAdd.length === 0) {
-      valid = false;
-      emitErrorEmpty(t('layers.layer'));
+      if (!layerName) {
+        valid = false;
+        emitErrorEmpty(t('layers.layer'));
+      }
     }
     if (valid) setActiveStep(3);
   };
@@ -460,7 +483,7 @@ export function AddNewLayer(): JSX.Element {
             size="small"
             type="text"
             onClick={handleBack}
-            onKeyDown={(e) => handleKeyDown(e)}
+            onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) => handleKeyDown(e)}
           >
             {t('layers.back')}
           </Button>
@@ -484,10 +507,10 @@ export function AddNewLayer(): JSX.Element {
                 <Box
                   className="dropzone"
                   style={{ position: 'relative' }}
-                  onDrop={(e) => handleDrop(e)}
-                  onDragOver={(e) => handleDragOver(e)}
-                  onDragEnter={(e) => handleDragEnter(e)}
-                  onDragLeave={(e) => handleDragLeave(e)}
+                  onDrop={(e: React.DragEvent<HTMLDivElement>) => handleDrop(e)}
+                  onDragOver={(e: React.DragEvent<HTMLDivElement>) => handleDragOver(e)}
+                  onDragEnter={(e: React.DragEvent<HTMLDivElement>) => handleDragEnter(e)}
+                  onDragLeave={(e: React.DragEvent<HTMLDivElement>) => handleDragLeave(e)}
                 >
                   {drag && (
                     <Box