@opengeoweb/layer-select 20.0.1 → 20.1.0-nightly-20261017

package/dist/index.esm.js

@@ -3,15 +3,15 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { CustomIconButton, FilterOption, ToolContainerDraggable, CustomAccordion, CustomTooltip, SearchHighlight, SearchField, CustomToggleButton, AlertBanner, ToggleMenu, CustomDialog, sessionStorageProvider } from '@opengeoweb/shared';
 import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, getUserAddedServices, setUserAddedServices, layerActions, uiSelectors, layerSelectors, mapListener, serviceListener, layersListener, openlayersListener, uiReducer, layerReducer, serviceReducer, mapReducer, useSetupDialog, mapSelectors, layerTypes, mapEnums } from '@opengeoweb/store';
-import { Filter, ArrowDropDownDown, StacIcon, LayersAdd, MeteoGate, CustomServiceIcon, Add, Cached, Edit, Visibility, Delete, Copy } from '@opengeoweb/theme';
+import { Filter, ArrowDropDownDown, ChevronUp, ChevronDown, StacIcon, LayersAdd, MeteoGate, CustomServiceIcon, Add, Cached, Edit, Visibility, Delete, Copy } from '@opengeoweb/theme';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, isAnyOf, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { compact, countBy, partition } from 'lodash';
 import { snackbarListener, snackbarReducer, snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
-import { Switch, Grid, List, ToggleButtonGroup, ToggleButton, Box, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Typography, useTheme, Backdrop, CircularProgress, Button, ListItem, ListItemText, LinearProgress, InputAdornment } from '@mui/material';
+import { Switch, Grid, List, ToggleButtonGroup, ToggleButton, Box, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, ListItem, ListItemButton, ListItemText, Typography, useTheme, Backdrop, CircularProgress, Button, LinearProgress, InputAdornment } from '@mui/material';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import { List as List$1 } from 'react-window';
-import { getDimensionsList, LayerInfoButton, stacCatalogCollectionToLayerProps, fetchStacCatalogRoot, fetchStacCatalogCollections, clearImageCacheForAllMaps } from '@opengeoweb/webmap-react';
+import { getDimensionsList, LayerInfoButton, defaultEdrStyles, normalizeEDRLabel, fetchEDRJson, stacCatalogCollectionToLayerProps, fetchStacCatalogRoot, fetchStacCatalogCollections, clearImageCacheForAllMaps } from '@opengeoweb/webmap-react';
 import { LayerType, webmapUtils, getWMSServiceId, queryWMSServiceInfo, queryWMSLayers, invalidateWMSGetCapabilities } from '@opengeoweb/webmap';
 import { useFormContext } from 'react-hook-form';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
@@ -396,10 +396,6 @@ var slice = createSlice({
       if (isUpdating) {
         return;
       }
-      if (type === 'EDR') {
-        // EDR services do not work yet in the layer-select, so skip them for now
-        return;
-      }
       var keywords = layers.reduce(function (keywords, layer) {
         if (layer.leaf) {
           var _layer$keywords;
@@ -1367,6 +1363,76 @@ var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
   });
 };
 
+var CollectionListRow = function CollectionListRow(_ref) {
+  var title = _ref.title,
+    count = _ref.count,
+    level = _ref.level,
+    expanded = _ref.expanded,
+    onToggle = _ref.onToggle;
+  return jsx(ListItem, {
+    "data-testid": "layerListCollectionRow",
+    sx: {
+      backgroundColor: 'geowebColors.cards.cardContainer',
+      height: '44px',
+      marginTop: 0.5,
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderRadius: '3px',
+      padding: 0,
+      zIndex: 10,
+      overflow: 'hidden',
+      borderColor: 'geowebColors.cards.cardContainerBorder'
+    },
+    children: jsxs(ListItemButton, {
+      "aria-expanded": expanded,
+      "aria-label": (expanded ? 'Collapse' : 'Expand') + " " + title,
+      onClick: onToggle,
+      sx: {
+        height: '100%',
+        paddingLeft: 24 + level * 20 + "px",
+        paddingRight: '8px'
+      },
+      children: [jsxs(Grid, {
+        container: true,
+        size: "grow",
+        sx: {
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        },
+        children: [jsx(Grid, {
+          size: "grow",
+          children: jsx(ListItemText, {
+            primary: title,
+            sx: {
+              margin: 0,
+              '.MuiListItemText-primary': {
+                fontSize: '12px',
+                fontWeight: 500,
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden'
+              }
+            }
+          })
+        }), jsx(Grid, {
+          children: jsx(ListItemText, {
+            primary: "(" + count + ")",
+            sx: {
+              paddingLeft: 1,
+              paddingRight: 1,
+              textAlign: 'right',
+              '.MuiListItemText-primary': {
+                fontSize: '12px',
+                opacity: 0.67
+              }
+            }
+          })
+        })]
+      }), expanded ? jsx(ChevronUp, {}) : jsx(ChevronDown, {})]
+    })
+  });
+};
+
 var LayerListDimensions = function LayerListDimensions(_ref) {
   var dimensions = _ref.dimensions;
   if (!(dimensions != null && dimensions.length)) {
@@ -1536,11 +1602,15 @@ var LayerListRow = function LayerListRow(_ref) {
   var dimensions = getDimensionsList(layer.dimensions);
   var layerServiceUrl = React.useMemo(function () {
     if (service.type !== 'STAC') {
+      if (service.type === 'EDR') {
+        var collectionId = layer.edrCollectionId;
+        return service.serviceUrl.replace(/\/$/, '') + "/collections/" + encodeURIComponent(collectionId != null ? collectionId : '');
+      }
       return service.serviceUrl;
     }
     var baseUrl = service.serviceUrl.replace(/\/$/, '');
     return baseUrl + "/collections/" + encodeURIComponent(layer.name);
-  }, [layer.name, service.serviceUrl, service.type]);
+  }, [layer, service.serviceUrl, service.type]);
   return jsxs(Grid, {
     container: true,
     "data-testid": "layerListLayerRow",
@@ -1683,11 +1753,16 @@ var LayerListRow = function LayerListRow(_ref) {
   });
 };
 
+var _countTreeLayers = function countTreeLayers(node) {
+  return node.layers.length + Array.from(node.children.values()).reduce(function (count, child) {
+    return count + _countTreeLayers(child);
+  }, 0);
+};
 var LayerRow = function LayerRow(_ref) {
   var index = _ref.index,
     style = _ref.style,
     services = _ref.services,
-    filteredLayers = _ref.filteredLayers,
+    displayRows = _ref.displayRows,
     allLayers = _ref.allLayers,
     allMapIds = _ref.allMapIds,
     addLayer = _ref.addLayer,
@@ -1701,7 +1776,20 @@ var LayerRow = function LayerRow(_ref) {
     currentLayerInfo = _ref.currentLayerInfo,
     layerSelectWidth = _ref.layerSelectWidth,
     rowMargin = _ref.rowMargin;
-  var layer = filteredLayers[index];
+  var displayRow = displayRows[index];
+  if (displayRow.type === 'collection') {
+    return jsx("div", {
+      style: style,
+      children: jsx(CollectionListRow, {
+        count: displayRow.count,
+        expanded: displayRow.expanded,
+        level: displayRow.level,
+        onToggle: displayRow.onToggle,
+        title: displayRow.title
+      })
+    });
+  }
+  var layer = displayRow.layer;
   var service = services[layer.serviceName];
   if (!service) {
     return jsx("div", {
@@ -1754,11 +1842,84 @@ var LayerList = function LayerList(_ref2) {
     searchFilter = _ref2.searchFilter,
     isLayerInfoVisibleInStore = _ref2.isLayerInfoVisibleInStore,
     onToggleActiveLayer = _ref2.onToggleActiveLayer,
-    currentLayerInfo = _ref2.currentLayerInfo;
+    currentLayerInfo = _ref2.currentLayerInfo,
+    _ref2$expandEdrGroups = _ref2.expandEdrGroupsByDefault,
+    expandEdrGroupsByDefault = _ref2$expandEdrGroups === void 0 ? false : _ref2$expandEdrGroups;
   var _useLayerSelectTransl = useLayerSelectTranslation(),
     t = _useLayerSelectTransl.t;
+  var _React$useState = React.useState({}),
+    expandedCollections = _React$useState[0],
+    setExpandedCollections = _React$useState[1];
+  var displayRows = React.useMemo(function () {
+    var rows = [];
+    var roots = new Map();
+    filteredLayers.forEach(function (layer) {
+      var _parent2;
+      var service = services[layer.serviceName];
+      var isEDR = (service == null ? void 0 : service.type) === 'EDR';
+      if (!isEDR || layer.path.length === 0) {
+        rows.push({
+          type: 'layer',
+          layer: layer
+        });
+        return;
+      }
+      var parent = roots.get(layer.serviceName + ":" + layer.path[0]);
+      layer.path.forEach(function (title, level) {
+        var _parent;
+        var key = layer.serviceName + ":" + layer.path.slice(0, level + 1).join('/');
+        var existing = level === 0 ? roots.get(key) : (_parent = parent) == null ? void 0 : _parent.children.get(key);
+        var node = existing != null ? existing : {
+          key: key,
+          title: title,
+          level: level,
+          children: new Map(),
+          layers: []
+        };
+        if (!existing) {
+          if (parent) {
+            parent.children.set(key, node);
+          } else {
+            roots.set(key, node);
+          }
+        }
+        parent = node;
+      });
+      (_parent2 = parent) == null || _parent2.layers.push(layer);
+    });
+    var _flatten = function flatten(node) {
+      var _expandedCollections$;
+      var expanded = (_expandedCollections$ = expandedCollections[node.key]) != null ? _expandedCollections$ : expandEdrGroupsByDefault;
+      rows.push({
+        type: 'collection',
+        key: node.key,
+        title: node.title,
+        count: _countTreeLayers(node),
+        level: node.level,
+        expanded: expanded,
+        onToggle: function onToggle() {
+          return setExpandedCollections(function (current) {
+            var _Object$assign;
+            return Object.assign({}, current, (_Object$assign = {}, _Object$assign[node.key] = !expanded, _Object$assign));
+          });
+        }
+      });
+      if (!expanded) {
+        return;
+      }
+      node.children.forEach(_flatten);
+      node.layers.forEach(function (layer) {
+        return rows.push({
+          type: 'layer',
+          layer: layer
+        });
+      });
+    };
+    roots.forEach(_flatten);
+    return rows;
+  }, [expandEdrGroupsByDefault, expandedCollections, filteredLayers, services]);
   var rowMargin = 4;
-  var rowHeight = widthToRowHeight(layerSelectWidth);
+  var _rowHeight = widthToRowHeight(layerSelectWidth);
   var layerSelectFilterHeight = 155 + serviceListHeight;
   var minHeight = 320;
   var listHeight = layerSelectHeight - layerSelectFilterHeight < minHeight ? minHeight : layerSelectHeight - layerSelectFilterHeight;
@@ -1773,11 +1934,14 @@ var LayerList = function LayerList(_ref2) {
     }), jsx(List$1, {
       defaultHeight: minHeight,
       rowComponent: LayerRow,
-      rowCount: filteredLayers.length,
-      rowHeight: rowHeight + rowMargin,
+      rowCount: displayRows.length,
+      rowHeight: function rowHeight(index) {
+        return displayRows[index].type === 'collection' ? 48 : _rowHeight + rowMargin;
+      },
       rowProps: {
         services: services,
         filteredLayers: filteredLayers,
+        displayRows: displayRows,
         allLayers: allLayers,
         allMapIds: allMapIds,
         addLayer: addLayer,
@@ -1804,7 +1968,9 @@ var LayerListConnect = function LayerListConnect(_ref) {
   var mapId = _ref.mapId,
     layerSelectHeight = _ref.layerSelectHeight,
     serviceListHeight = _ref.serviceListHeight,
-    layerSelectWidth = _ref.layerSelectWidth;
+    layerSelectWidth = _ref.layerSelectWidth,
+    _ref$expandEdrGroupsB = _ref.expandEdrGroupsByDefault,
+    expandEdrGroupsByDefault = _ref$expandEdrGroupsB === void 0 ? false : _ref$expandEdrGroupsB;
   var dispatch = useDispatch();
   var services = useAppSelector(function (store) {
     return serviceSelectors.getServices(store);
@@ -1819,15 +1985,38 @@ var LayerListConnect = function LayerListConnect(_ref) {
     return mapSelectors.getAllMapIds(store);
   });
   var _addLayer = function addLayer(_ref2, mapId) {
+    var _defaultEdrStyles$;
     var serviceUrl = _ref2.serviceUrl,
       layerName = _ref2.layerName,
       serviceType = _ref2.serviceType;
+    var layerType = LayerType.mapLayer;
+    if (serviceType === 'STAC') {
+      layerType = LayerType.stacGeoTIFFLayer;
+    } else if (serviceType === 'EDR') {
+      layerType = LayerType.edrFeatureLayer;
+    }
     var layer = {
       service: serviceUrl,
       name: layerName,
       id: webmapUtils.generateLayerId(),
-      layerType: serviceType === 'STAC' ? LayerType.stacGeoTIFFLayer : LayerType.mapLayer
+      layerType: layerType,
+      style: serviceType === 'EDR' ? (_defaultEdrStyles$ = defaultEdrStyles[0]) == null ? void 0 : _defaultEdrStyles$.name : undefined
     };
+    if (serviceType === 'EDR') {
+      var collectionId = decodeURIComponent(serviceUrl.replace(/\/$/, '').split('/').pop());
+      var serviceLayer = Object.values(services).flatMap(function (service) {
+        var _service$layers;
+        return (_service$layers = service.layers) != null ? _service$layers : [];
+      }).find(function (candidate) {
+        var edrCandidate = candidate;
+        return candidate.name === layerName && edrCandidate.edrCollectionId === collectionId;
+      });
+      layer.options = {
+        collectionId: collectionId,
+        parameterNames: [layerName],
+        parameterMetadata: serviceLayer == null ? void 0 : serviceLayer.edrParameter
+      };
+    }
     addMapLayer({
       mapId: mapId,
       layerId: layer.id,
@@ -1925,6 +2114,7 @@ var LayerListConnect = function LayerListConnect(_ref) {
     allMapIds: allMapIds,
     currentLayerInfo: currentLayerInfo,
     deleteLayer: deleteLayer,
+    expandEdrGroupsByDefault: expandEdrGroupsByDefault,
     filteredLayers: filteredLayers,
     isLayerInfoVisibleInStore: isLayerInfoVisibleInStore,
     layerSelectHeight: layerSelectHeight,
@@ -2540,6 +2730,7 @@ var Rows = function Rows(_ref2) {
 var DetectableServiceType;
 (function (DetectableServiceType) {
   DetectableServiceType["STAC"] = "STAC";
+  DetectableServiceType["EDR"] = "EDR";
   DetectableServiceType["WMS"] = "WMS";
 })(DetectableServiceType || (DetectableServiceType = {}));
 var stripStacCollectionsAndTrailingSlashes = function stripStacCollectionsAndTrailingSlashes(serviceUrl) {
@@ -2627,96 +2818,211 @@ var loadWMSService = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-var detectServiceType = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(url) {
-    var trimmedUrl, isStacServiceUrl, _t2;
+var getEDRParameters = function getEDRParameters(collection) {
+  var _collection$parameter;
+  if (Array.isArray(collection.parameter_names)) {
+    return collection.parameter_names.map(function (parameter, index) {
+      var _parameter$id;
+      return [(_parameter$id = parameter.id) != null ? _parameter$id : String(index), parameter];
+    });
+  }
+  return Object.entries((_collection$parameter = collection.parameter_names) != null ? _collection$parameter : {});
+};
+var getEDRPath = function getEDRPath(collection) {
+  var _ref2, _collection$path, _collection$title;
+  return [].concat((_ref2 = (_collection$path = collection.path) != null ? _collection$path : collection.groups) != null ? _ref2 : collection.group ? [collection.group] : [], [(_collection$title = collection.title) != null ? _collection$title : collection.id]);
+};
+var loadEDRService = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(serviceUrl) {
+    var _service$title, _service$description;
+    var normalizedUrl, _yield$Promise$all, service, collectionsResponse, serviceId, layers;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          normalizedUrl = serviceUrl.replace(/\/$/, '');
+          _context2.n = 1;
+          return Promise.all([fetchEDRJson(normalizedUrl), fetchEDRJson(normalizedUrl + "/collections")]);
+        case 1:
+          _yield$Promise$all = _context2.v;
+          service = _yield$Promise$all[0];
+          collectionsResponse = _yield$Promise$all[1];
+          serviceId = normalizedUrl.replace(/[^a-zA-Z0-9]/g, '_');
+          layers = collectionsResponse.collections.flatMap(function (collection) {
+            return getEDRParameters(collection).map(function (_ref4) {
+              var _parameter$label, _parameter$observedPr, _parameter$label2;
+              var parameterId = _ref4[0],
+                parameter = _ref4[1];
+              return {
+                name: parameterId,
+                leaf: true,
+                path: getEDRPath(collection),
+                title: (_parameter$label = parameter.label) != null ? _parameter$label : parameterId,
+                "abstract": parameter.description,
+                keywords: (_parameter$observedPr = parameter.observedProperty) != null && _parameter$observedPr.label ? [normalizeEDRLabel(parameter.observedProperty.label, (_parameter$label2 = parameter.label) != null ? _parameter$label2 : parameterId)] : [],
+                // LayerSelect uses these fields when creating an EDR map layer.
+                edrCollectionId: collection.id,
+                edrParameter: parameter,
+                styles: defaultEdrStyles
+              };
+            });
+          });
+          return _context2.a(2, {
+            id: serviceId,
+            name: (_service$title = service.title) != null ? _service$title : serviceId,
+            serviceUrl: normalizedUrl,
+            "abstract": (_service$description = service.description) != null ? _service$description : '',
+            layers: layers,
+            scope: 'user',
+            type: DetectableServiceType.EDR
+          });
+      }
+    }, _callee2);
+  }));
+  return function loadEDRService(_x3) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+var isEDRServiceUrl = /*#__PURE__*/function () {
+  var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(serviceUrl) {
+    var _service$links, service;
     return _regenerator().w(function (_context3) {
-      while (1) switch (_context3.n) {
+      while (1) switch (_context3.p = _context3.n) {
+        case 0:
+          _context3.p = 0;
+          _context3.n = 1;
+          return fetchEDRJson(serviceUrl.replace(/\/$/, ''));
+        case 1:
+          service = _context3.v;
+          return _context3.a(2, Boolean((_service$links = service.links) == null ? void 0 : _service$links.some(function (link) {
+            var _link$href;
+            return (link.rel === 'data' || link.rel === 'collections') && ((_link$href = link.href) == null ? void 0 : _link$href.includes('/collections'));
+          })));
+        case 2:
+          _context3.p = 2;
+          _context3.v;
+          return _context3.a(2, false);
+      }
+    }, _callee3, null, [[0, 2]]);
+  }));
+  return function isEDRServiceUrl(_x4) {
+    return _ref5.apply(this, arguments);
+  };
+}();
+var detectServiceType = /*#__PURE__*/function () {
+  var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(url) {
+    var trimmedUrl, isStacServiceUrl, _t3, _t4;
+    return _regenerator().w(function (_context5) {
+      while (1) switch (_context5.n) {
         case 0:
           trimmedUrl = url.trim();
           isStacServiceUrl = /*#__PURE__*/function () {
-            var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(candidateUrl) {
+            var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(candidateUrl) {
               var root, hasStacRootShape;
-              return _regenerator().w(function (_context2) {
-                while (1) switch (_context2.p = _context2.n) {
+              return _regenerator().w(function (_context4) {
+                while (1) switch (_context4.p = _context4.n) {
                   case 0:
-                    _context2.p = 0;
-                    _context2.n = 1;
+                    _context4.p = 0;
+                    _context4.n = 1;
                     return fetchStacCatalogRoot(candidateUrl);
                   case 1:
-                    root = _context2.v;
+                    root = _context4.v;
                     hasStacRootShape = root.stac_version || root.type === 'Catalog' || Array.isArray(root.conformsTo);
                     if (!hasStacRootShape) {
-                      _context2.n = 2;
+                      _context4.n = 2;
                       break;
                     }
-                    return _context2.a(2, true);
+                    return _context4.a(2, true);
                   case 2:
-                    return _context2.a(2, Boolean(root.type === 'Collection' && root.stac_version && Array.isArray(root.links)));
+                    return _context4.a(2, Boolean(root.type === 'Collection' && root.stac_version && Array.isArray(root.links)));
                   case 3:
-                    _context2.p = 3;
-                    _context2.v;
-                    return _context2.a(2, false);
+                    _context4.p = 3;
+                    _context4.v;
+                    return _context4.a(2, false);
                 }
-              }, _callee2, null, [[0, 3]]);
+              }, _callee4, null, [[0, 3]]);
             }));
-            return function isStacServiceUrl(_x4) {
-              return _ref3.apply(this, arguments);
+            return function isStacServiceUrl(_x6) {
+              return _ref7.apply(this, arguments);
             };
           }();
-          _context3.n = 1;
+          _context5.n = 1;
           return isStacServiceUrl(trimmedUrl);
         case 1:
-          if (!_context3.v) {
-            _context3.n = 2;
+          if (!_context5.v) {
+            _context5.n = 2;
             break;
           }
-          return _context3.a(2, DetectableServiceType.STAC);
+          return _context5.a(2, DetectableServiceType.STAC);
         case 2:
-          _t2 = !trimmedUrl.endsWith('/');
-          if (!_t2) {
-            _context3.n = 4;
+          _t3 = !trimmedUrl.endsWith('/');
+          if (!_t3) {
+            _context5.n = 4;
             break;
           }
-          _context3.n = 3;
+          _context5.n = 3;
           return isStacServiceUrl(trimmedUrl + "/");
         case 3:
-          _t2 = _context3.v;
+          _t3 = _context5.v;
         case 4:
-          if (!_t2) {
-            _context3.n = 5;
+          if (!_t3) {
+            _context5.n = 5;
             break;
           }
-          return _context3.a(2, DetectableServiceType.STAC);
+          return _context5.a(2, DetectableServiceType.STAC);
         case 5:
-          return _context3.a(2, DetectableServiceType.WMS);
+          _context5.n = 6;
+          return isEDRServiceUrl(trimmedUrl);
+        case 6:
+          if (!_context5.v) {
+            _context5.n = 7;
+            break;
+          }
+          return _context5.a(2, DetectableServiceType.EDR);
+        case 7:
+          _t4 = !trimmedUrl.endsWith('/');
+          if (!_t4) {
+            _context5.n = 9;
+            break;
+          }
+          _context5.n = 8;
+          return isEDRServiceUrl(trimmedUrl + "/");
+        case 8:
+          _t4 = _context5.v;
+        case 9:
+          if (!_t4) {
+            _context5.n = 10;
+            break;
+          }
+          return _context5.a(2, DetectableServiceType.EDR);
+        case 10:
+          return _context5.a(2, DetectableServiceType.WMS);
       }
-    }, _callee3);
+    }, _callee5);
   }));
-  return function detectServiceType(_x3) {
-    return _ref2.apply(this, arguments);
+  return function detectServiceType(_x5) {
+    return _ref6.apply(this, arguments);
   };
 }();
 var loadSTACService = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(serviceUrl) {
-    var _ref5, _root$title, _root$description;
-    var _yield$Promise$all, root, collections, serviceId, layers;
-    return _regenerator().w(function (_context4) {
-      while (1) switch (_context4.n) {
+  var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(serviceUrl) {
+    var _ref9, _root$title, _root$description;
+    var _yield$Promise$all2, root, collections, serviceId, layers;
+    return _regenerator().w(function (_context6) {
+      while (1) switch (_context6.n) {
         case 0:
-          _context4.n = 1;
+          _context6.n = 1;
           return Promise.all([fetchStacCatalogRoot(serviceUrl), fetchStacCatalogCollections(serviceUrl)]);
         case 1:
-          _yield$Promise$all = _context4.v;
-          root = _yield$Promise$all[0];
-          collections = _yield$Promise$all[1];
+          _yield$Promise$all2 = _context6.v;
+          root = _yield$Promise$all2[0];
+          collections = _yield$Promise$all2[1];
           serviceId = serviceUrl.replace(/\/+$/, '').replace(/[^a-zA-Z0-9]/g, '_');
           layers = collections.map(stacCatalogCollectionToLayerProps);
-          return _context4.a(2, {
+          return _context6.a(2, {
             // Use URL-based ids so different STAC endpoints with identical root.id
             // values (e.g. "stac-fastapi") can coexist in the service store.
             id: serviceId,
-            name: (_ref5 = (_root$title = root.title) != null ? _root$title : root.id) != null ? _ref5 : serviceId,
+            name: (_ref9 = (_root$title = root.title) != null ? _root$title : root.id) != null ? _ref9 : serviceId,
             serviceUrl: serviceUrl,
             "abstract": (_root$description = root.description) != null ? _root$description : '',
             layers: layers,
@@ -2724,10 +3030,10 @@ var loadSTACService = /*#__PURE__*/function () {
             type: DetectableServiceType.STAC
           });
       }
-    }, _callee4);
+    }, _callee6);
   }));
-  return function loadSTACService(_x5) {
-    return _ref4.apply(this, arguments);
+  return function loadSTACService(_x7) {
+    return _ref8.apply(this, arguments);
   };
 }();
 
@@ -2886,7 +3192,9 @@ var LayerSelect = function LayerSelect(_ref) {
     _ref$isMultiMap = _ref.isMultiMap,
     isMultiMap = _ref$isMultiMap === void 0 ? false : _ref$isMultiMap,
     _ref$hasDataExplorer = _ref.hasDataExplorer,
-    hasDataExplorer = _ref$hasDataExplorer === void 0 ? false : _ref$hasDataExplorer;
+    hasDataExplorer = _ref$hasDataExplorer === void 0 ? false : _ref$hasDataExplorer,
+    _ref$expandEdrGroupsB = _ref.expandEdrGroupsByDefault,
+    expandEdrGroupsByDefault = _ref$expandEdrGroupsB === void 0 ? false : _ref$expandEdrGroupsB;
   var initialServiceListHeight = hasDataExplorer ? 52 : 37;
   var _React$useState = React.useState(startSize.height),
     height = _React$useState[0],
@@ -2993,6 +3301,7 @@ var LayerSelect = function LayerSelect(_ref) {
         padding: '0 16px'
       },
       children: jsx(LayerListConnect, {
+        expandEdrGroupsByDefault: expandEdrGroupsByDefault,
         layerSelectHeight: height,
         layerSelectWidth: width,
         mapId: mapId,
@@ -3083,7 +3392,7 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
     setDetectedServiceType = _React$useState3[1];
   var fetchServiceData = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(newServiceUrl) {
-      var type, serviceUrlForLoading, service, _t;
+      var type, serviceUrlForLoading, service;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.p = _context.n) {
           case 0:
@@ -3105,24 +3414,34 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
             _context.n = 2;
             return loadSTACService(serviceUrlForLoading);
           case 2:
-            _t = _context.v;
-            _context.n = 5;
+            service = _context.v;
+            _context.n = 7;
             break;
           case 3:
+            if (!(type === DetectableServiceType.EDR)) {
+              _context.n = 5;
+              break;
+            }
             _context.n = 4;
-            return loadWMSService(serviceUrlForLoading, true);
+            return loadEDRService(serviceUrlForLoading);
           case 4:
-            _t = _context.v;
+            service = _context.v;
+            _context.n = 7;
+            break;
           case 5:
-            service = _t;
+            _context.n = 6;
+            return loadWMSService(serviceUrlForLoading, true);
+          case 6:
+            service = _context.v;
+          case 7:
             setValue(FormFields.serviceName, service.name);
             setValue(FormFields.serviceAbstracts, service["abstract"] || '');
             setIsLoading(false);
             setShouldForceReload(false);
-            _context.n = 7;
+            _context.n = 9;
             break;
-          case 6:
-            _context.p = 6;
+          case 8:
+            _context.p = 8;
             _context.v;
             setIsLoading(false);
             setShouldForceReload(true);
@@ -3130,10 +3449,10 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
               message: t('validations-request-failed'),
               type: 'SYSTEM'
             });
-          case 7:
+          case 9:
             return _context.a(2);
         }
-      }, _callee, null, [[0, 6]]);
+      }, _callee, null, [[0, 8]]);
     }));
     return function fetchServiceData(_x) {
       return _ref3.apply(this, arguments);
@@ -3141,7 +3460,7 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
   }();
   var addNewService = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(formValues) {
-      var type, serviceUrlForSaving, service, _t3, _t4;
+      var type, serviceUrlForSaving, service, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
@@ -3152,16 +3471,16 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
               _context2.n = 2;
               break;
             }
-            _t3 = detectedServiceType;
+            _t2 = detectedServiceType;
             _context2.n = 4;
             break;
           case 2:
             _context2.n = 3;
             return detectServiceType(formValues.serviceUrl);
           case 3:
-            _t3 = _context2.v;
+            _t2 = _context2.v;
           case 4:
-            type = _t3;
+            type = _t2;
             serviceUrlForSaving = type === DetectableServiceType.STAC ? normalizeStacServiceUrl(formValues.serviceUrl) : formValues.serviceUrl;
             if (!(type === DetectableServiceType.STAC)) {
               _context2.n = 6;
@@ -3170,16 +3489,26 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
             _context2.n = 5;
             return loadSTACService(serviceUrlForSaving);
           case 5:
-            _t4 = _context2.v;
-            _context2.n = 8;
+            service = _context2.v;
+            _context2.n = 10;
             break;
           case 6:
+            if (!(type === DetectableServiceType.EDR)) {
+              _context2.n = 8;
+              break;
+            }
             _context2.n = 7;
-            return loadWMSService(serviceUrlForSaving, shouldForceReload);
+            return loadEDRService(serviceUrlForSaving);
           case 7:
-            _t4 = _context2.v;
+            service = _context2.v;
+            _context2.n = 10;
+            break;
           case 8:
-            service = _t4;
+            _context2.n = 9;
+            return loadWMSService(serviceUrlForSaving, shouldForceReload);
+          case 9:
+            service = _context2.v;
+          case 10:
             if (serviceUrlForSaving !== formValues.serviceUrl) {
               setValue(FormFields.serviceUrl, serviceUrlForSaving);
             }
@@ -3195,20 +3524,20 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
             setIsLoading(false);
             showSnackbar(getSuccesMessage(formValues.serviceName, t));
             closePopup();
-            _context2.n = 10;
+            _context2.n = 12;
             break;
-          case 9:
-            _context2.p = 9;
+          case 11:
+            _context2.p = 11;
             _context2.v;
             setIsLoading(false);
             setError(FormFields.serviceUrl, {
               message: t('validations-request-failed'),
               type: 'SYSTEM'
             });
-          case 10:
+          case 12:
             return _context2.a(2);
         }
-      }, _callee2, null, [[1, 9]]);
+      }, _callee2, null, [[1, 11]]);
     }));
     return function addNewService(_x2) {
       return _ref4.apply(this, arguments);

package/dist/src/lib/components/LayerList/CollectionListRow.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface CollectionListRowProps {
+    title: string;
+    count: number;
+    level: number;
+    expanded: boolean;
+    onToggle: () => void;
+}
+export declare const CollectionListRow: React.FC<CollectionListRowProps>;
+export {};

package/dist/src/lib/components/LayerList/LayerList.d.ts

@@ -27,6 +27,7 @@ export interface LayerListProps {
         isActiveLayer: boolean;
     }) => void;
     currentLayerInfo?: AddLayerParams;
+    expandEdrGroupsByDefault?: boolean;
 }
 export declare const LayerList: React.FC<LayerListProps>;
 export {};

package/dist/src/lib/components/LayerList/LayerListConnect.d.ts

@@ -4,6 +4,7 @@ interface LayerListConnectProps {
     layerSelectHeight: number;
     serviceListHeight: number;
     layerSelectWidth: number;
+    expandEdrGroupsByDefault?: boolean;
 }
 export declare const LayerListConnect: React.FC<LayerListConnectProps>;
 export {};

package/dist/src/lib/components/LayerSelect/LayerSelect.d.ts

@@ -16,6 +16,7 @@ interface LayerSelectProps {
     startSize?: Size;
     isMultiMap?: boolean;
     hasDataExplorer?: boolean;
+    expandEdrGroupsByDefault?: boolean;
 }
 export declare const LayerSelect: React.FC<LayerSelectProps>;
 export {};

package/dist/src/lib/components/ServicePopup/utils.d.ts

@@ -3,6 +3,7 @@ import type { serviceTypes } from '@opengeoweb/store';
 import type { layerSelectTypes } from '../../store';
 export declare enum DetectableServiceType {
     STAC = "STAC",
+    EDR = "EDR",
     WMS = "WMS"
 }
 export type ValidationResult = string | boolean;
@@ -10,5 +11,6 @@ export declare const normalizeStacServiceUrl: (serviceUrl: string | null | undef
 export declare const validateServiceName: (t: TFunction, value: string, services: layerSelectTypes.ActiveServiceObjectEntities, ownServiceName?: string) => ValidationResult;
 export declare const validateServiceUrl: (t: TFunction, value: string, services: layerSelectTypes.ActiveServiceObjectEntities) => ValidationResult;
 export declare const loadWMSService: (serviceUrl: string, forceReload?: boolean) => Promise<serviceTypes.SetLayersForServicePayload>;
+export declare const loadEDRService: (serviceUrl: string) => Promise<serviceTypes.SetLayersForServicePayload>;
 export declare const detectServiceType: (url: string) => Promise<DetectableServiceType>;
 export declare const loadSTACService: (serviceUrl: string) => Promise<serviceTypes.SetLayersForServicePayload>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@opengeoweb/layer-select",
-    "version": "20.0.1",
+    "version": "20.1.0-nightly-20261017",
     "description": "GeoWeb layer select library for the opengeoweb project",
     "license": "Apache-2.0",
     "repository": {
@@ -20,15 +20,15 @@
         }
     },
     "dependencies": {
-        "@opengeoweb/shared": "20.0.1",
-        "@opengeoweb/store": "20.0.1",
+        "@opengeoweb/shared": "20.1.0-nightly-20261017",
+        "@opengeoweb/store": "20.1.0-nightly-20261017",
         "react-redux": "^9.2.0",
-        "@opengeoweb/theme": "20.0.1",
-        "@opengeoweb/webmap-react": "20.0.1",
-        "@opengeoweb/webmap": "20.0.1",
+        "@opengeoweb/theme": "20.1.0-nightly-20261017",
+        "@opengeoweb/webmap-react": "20.1.0-nightly-20261017",
+        "@opengeoweb/webmap": "20.1.0-nightly-20261017",
         "react-window": "^2.2.6",
-        "@opengeoweb/snackbar": "20.0.1",
-        "@opengeoweb/form-fields": "20.0.1",
+        "@opengeoweb/snackbar": "20.1.0-nightly-20261017",
+        "@opengeoweb/form-fields": "20.1.0-nightly-20261017",
         "react-hook-form": "^7.50.1",
         "@reduxjs/toolkit": "^2.6.1",
         "lodash": "^4.18.1",