adding tree display to adding layer functionality

packages/geoview-core/package.json

@@ -56,6 +56,7 @@
     "@mui/system": "^5.15.11",
     "@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/locales/en/translation.json

@@ -116,6 +116,7 @@
     "toggleCollapse": "Toggle collapse",
     "querying": "Querying",
     "layerAdded": "Layer __param__ added",
+    "layerAddedAndLoading": "Layer __param__ added and loading",
     "instructionsNoLayersTitle": "No layers visible",
     "instructionsNoLayersBody": "Add visible layers on the map."
   },

packages/geoview-core/public/locales/fr/translation.json

@@ -116,6 +116,7 @@
     "toggleCollapse": "Basculer la fermeture",
     "querying": "Requête en cours",
     "layerAdded": "Couche __param__  ajoutée",
+    "layerAddedAndLoading": "Couche __param__ ajoutée et chargée",
     "instructionsNoLayersTitle": "Aucune couche visible",
     "instructionsNoLayersBody": "Ajoutez des couches visibles sur la carte."
   },

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

@@ -0,0 +1,123 @@
+/**
+ * This component improves Mui's TreeView component to be able to process Layers data.
+ */
+import React, { useEffect, useState } from 'react';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import _ from 'lodash';
+import { logger } from '@/core/utils/logger';
+import { EntryConfigBaseClass, GroupLayerEntryConfig } from '@/api/config/types/map-schema-types';
+import { getLayerById } from './add-new-layers-utils';
+
+export interface AddLayerTreeProps {
+  layersData: GroupLayerEntryConfig[];
+  onSelectedItemsChange(items: string[]): void;
+  startingSelectedItems: string[];
+}
+
+export function AddLayerTree(props: AddLayerTreeProps): JSX.Element | null {
+  // Log
+  logger.logTraceRender('components/layers/left-panel/add-layer-tree/add-layer-tree');
+
+  const { layersData, startingSelectedItems, onSelectedItemsChange } = props;
+  const [defaultExpandedItems, setDefaultExpandedItems] = useState<string[]>([]); // e.g. ["layer1", "layer2"]
+  const [defaultSelectedItems, setDefaultSelectedItems] = useState<string[]>([]);
+  const [isInitialized, setIsInitialized] = useState<boolean>(false);
+  const [selectedItems, setSelectedItems] = useState<string[]>([]); // e.g. ["group1/layer1", "group2/layer2"]
+
+  // this use effect acts like onComponentDidMount
+  useEffect(() => {
+    if (isInitialized) return;
+    setSelectedItems(startingSelectedItems);
+    setDefaultSelectedItems(startingSelectedItems);
+
+    const result = startingSelectedItems
+      .map((item: string) => {
+        return item.split('/');
+      })
+      .flat()
+      .concat(selectedItems);
+    setDefaultExpandedItems(result);
+    setIsInitialized(true);
+  }, [startingSelectedItems]);
+
+  useEffect(() => {
+    onSelectedItemsChange(selectedItems);
+  }, [selectedItems]);
+
+  const renderTreeItem = function (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}>
+        {layer?.listOfLayerEntryConfig?.length > 0 &&
+          layer.listOfLayerEntryConfig.map((subLayer: EntryConfigBaseClass) =>
+            renderTreeItem(subLayer as GroupLayerEntryConfig, curLayerId)
+          )}
+      </TreeItem>
+    );
+  };
+
+  const getLayerChildren = function (treeLayerId: string): string[] {
+    const result: string[] = [];
+
+    function populateLayerChildren(origLayerId: string, parentViewId: string | null): void {
+      const viewLayerId = `${parentViewId ? `${parentViewId}/` : ''}${origLayerId}`;
+      result.push(viewLayerId);
+      const layerDetails = getLayerById(layersData, origLayerId);
+
+      const childLayerIds = layerDetails?.listOfLayerEntryConfig?.map((child: EntryConfigBaseClass) => {
+        return child.layerId;
+      });
+
+      childLayerIds?.forEach((childLayerId) => {
+        populateLayerChildren(childLayerId, viewLayerId);
+      });
+    }
+
+    const layerTokens = treeLayerId.split('/');
+    const origLayerId = layerTokens.pop() as string;
+    let parentLayerId = null;
+    if (layerTokens.length > 0) {
+      parentLayerId = layerTokens.join('/');
+    }
+    populateLayerChildren(origLayerId, parentLayerId);
+
+    return _.uniq(result).sort();
+  };
+
+  const handleItemSelectionToggle = function (event: React.SyntheticEvent, itemId: string, isSelected: boolean): void {
+    const layerChildren = getLayerChildren(itemId);
+    const toAddOrRemove = [itemId, ...layerChildren];
+
+    if (isSelected) {
+      setSelectedItems(_.uniq([...selectedItems, ...toAddOrRemove]).sort());
+    } else {
+      setSelectedItems(selectedItems.filter((item) => !toAddOrRemove.includes(item)));
+    }
+  };
+
+  if (!isInitialized) {
+    return null;
+  }
+
+  const renderTreeItems = function () {
+    // return layersData[0].listOfLayerEntryConfig.map((layer) => renderTreeItem(layer as GroupLayerEntryConfig, null));
+    return layersData.map((layer) => renderTreeItem(layer as GroupLayerEntryConfig, null));
+  };
+
+  return (
+    <SimpleTreeView
+      sx={{ fontSize: '0.8rem', '& .MuiTreeItem-label': { fontSize: '0.8rem !important' } }}
+      multiSelect
+      checkboxSelection
+      defaultExpandedItems={defaultExpandedItems}
+      defaultSelectedItems={defaultSelectedItems}
+      selectedItems={selectedItems}
+      onItemSelectionToggle={(event: React.SyntheticEvent, itemId: string, isSelected: boolean) =>
+        handleItemSelectionToggle(event, itemId, isSelected)
+      }
+    >
+      {renderTreeItems()}
+    </SimpleTreeView>
+  );
+}