@eeacms/volto-arcgis-block 0.1.463 → 0.1.465

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.465](https://github.com/eea/volto-arcgis-block/compare/0.1.464...0.1.465) - 6 August 2026
+
+### [0.1.464](https://github.com/eea/volto-arcgis-block/compare/0.1.463...0.1.464) - 3 August 2026
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`223790e`](https://github.com/eea/volto-arcgis-block/commit/223790ead69bbd36d2f9e10b5f90bdfc428fe3b2)]
+
+#### :hammer_and_wrench: Others
+
+- (bug): ensure time slider operates independently for each layer for CDSE datsets with multiple layers [Unai Bolivar - [`15d1c8e`](https://github.com/eea/volto-arcgis-block/commit/15d1c8eeda8cf59ed9bdff8de1bb01aa1e2ebb90)]
 ### [0.1.463](https://github.com/eea/volto-arcgis-block/compare/0.1.462...0.1.463) - 16 July 2026
 
 ### [0.1.462](https://github.com/eea/volto-arcgis-block/compare/0.1.461...0.1.462) - 14 July 2026

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.463",
+  "version": "0.1.465",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/MapViewer.jsx

@@ -1510,10 +1510,12 @@ class MapViewer extends React.Component {
           this.location.search.includes('dataset=')))
     ) {
       let toc_panel_scrolls = sessionStorage.getItem('toc_panel_scrolls');
+      let checkedLayers = sessionStorage.getItem('checkedLayers');
       if (!sessionStorage.getItem('TMSLayerObj')) {
         sessionStorage.clear();
       }
       sessionStorage.setItem('toc_panel_scrolls', toc_panel_scrolls);
+      sessionStorage.setItem('checkedLayers', checkedLayers);
     }
 
     // Handle user state changes from context

package/src/components/MapViewer/MenuWidget.jsx

@@ -988,7 +988,7 @@ class MenuWidget extends React.Component {
     }
     this.openMenu();
     this.loadComponentFilters();
-    this.expandDropdowns();
+    //this.expandDropdowns();
     // Add "My Services" component to the UI
     const myServicesComponent = this.createMyServicesComponent();
     const myServicesContainer = document.createElement('div');
@@ -1117,27 +1117,27 @@ class MenuWidget extends React.Component {
     let dataset = url.searchParams.get('dataset');
     if (product || dataset) {
       // CLMS-1261 - clear any previously checked layers when navigating using 'view in the map viewer'
-      let expandedDropdowns = sessionStorage.getItem('expandedDropdowns');
-      let checkedLayers = sessionStorage.getItem('checkedLayers');
-      if (expandedDropdowns) {
-        sessionStorage.setItem('expandedDropdowns', JSON.stringify([]));
-        const userKey = this.userID ? 'user_' + this.userID : 'user_anonymous';
-        const existing = localStorage.getItem(userKey);
-        let storeObj = {};
-        if (existing) {
-          try {
-            storeObj = JSON.parse(existing) || {};
-          } catch (e) {
-            storeObj = {};
-          }
-        }
-        storeObj.expandedDropdowns = [];
-        localStorage.setItem(userKey, JSON.stringify(storeObj));
-      }
-      if (checkedLayers) {
-        sessionStorage.setItem('checkedLayers', JSON.stringify([]));
-        window.dispatchEvent(new Event('storage'));
-      }
+      //let expandedDropdowns = sessionStorage.getItem('expandedDropdowns');
+      //let checkedLayers = sessionStorage.getItem('checkedLayers');
+      // if (expandedDropdowns) {
+      //   sessionStorage.setItem('expandedDropdowns', JSON.stringify([]));
+      //   const userKey = this.userID ? 'user_' + this.userID : 'user_anonymous';
+      //   const existing = localStorage.getItem(userKey);
+      //   let storeObj = {};
+      //   if (existing) {
+      //     try {
+      //       storeObj = JSON.parse(existing) || {};
+      //     } catch (e) {
+      //       storeObj = {};
+      //     }
+      //   }
+      //   storeObj.expandedDropdowns = [];
+      //   localStorage.setItem(userKey, JSON.stringify(storeObj));
+      // }
+      // if (checkedLayers) {
+      //   sessionStorage.setItem('checkedLayers', JSON.stringify([]));
+      //   window.dispatchEvent(new Event('storage'));
+      // }
       let event = new MouseEvent('click', {
         view: window,
         bubbles: true,
@@ -6763,155 +6763,137 @@ class MenuWidget extends React.Component {
     )
       this.setSliderTag(false);
     else this.setSliderTag(true);
-    let activeLayers = document.querySelectorAll('.active-layer');
-    let group = this.getGroup(elem);
-    let groupLayers = this.getGroupLayers(group);
-    if (this.timeLayers[elem.id][1] === 'clock') {
-      activeLayers.forEach((layer) => {
-        let layerId = layer.getAttribute('layer-id');
-        let order = this.activeLayersJSON[elem.id]?.props?.['layer-order'] || 0;
-        if (groupLayers && groupLayers.includes(layerId)) {
-          elem = document.getElementById(layerId);
-        }
-        if (elem && elem.id === layerId) {
-          this.timeLayers[elem.id] = ['fas', 'stop'];
-          if (
-            !this.visibleLayers[elem.id] ||
-            this.visibleLayers[elem.id][1] === 'eye-slash'
-          ) {
-            if (this.layers[elem.id]) this.layers[elem.id].visible = true;
-            this.visibleLayers[elem.id] = ['fas', 'eye'];
-          }
-          document
-            .querySelectorAll(
-              '.active-layer[layer-id="' +
-                elem.id +
-                '"] .map-menu-icon:not(.active-layer-time)',
-            )
-            .forEach((item) => {
-              item.classList.add('locked');
-            });
-          if (document.querySelector('#products_label'))
-            document.querySelector('#products_label').classList.add('locked');
-          if (document.querySelector('#map_remove_layers')) {
-            const mapRemoveBtn = document.querySelector('#map_remove_layers');
-            if (mapRemoveBtn) mapRemoveBtn.classList.add('locked');
-          }
-          if (this.props.download && document.querySelector('#download_label'))
-            document.querySelector('#download_label').classList.add('locked');
-          this.activeLayersJSON[elem.id] = this.addActiveLayer(
-            elem,
-            order,
-            fromDownload,
-            hideCalendar,
-          );
-        } else {
-          const node = document.getElementById(layerId);
-          if (
-            node &&
-            node.parentElement &&
-            node.parentElement.dataset &&
-            node.parentElement.dataset.timeseries === 'true'
-          ) {
-            if (!this.visibleLayers[layerId]) {
-              this.visibleLayers[layerId] = ['fas', 'eye'];
-            }
-            if (this.visibleLayers[layerId][1] === 'eye') {
-              if (this.layers[layerId]) this.layers[layerId].visible = false;
-              this.visibleLayers[layerId] = ['fas', 'eye-slash'];
-            }
-            const activeNode = document.querySelector(
-              '.active-layer[layer-id="' + layerId + '"]',
-            );
-            if (activeNode) activeNode.classList.add('locked');
-          }
-          this.activeLayersJSON[layerId] = this.addActiveLayer(
-            document.getElementById(layerId),
-            order,
+    const selectedLayerId = elem.id;
+    let activeTimeLayerId = null;
+    Object.keys(this.timeLayers).forEach((layerId) => {
+      if (this.timeLayers[layerId] && this.timeLayers[layerId][1] === 'stop') {
+        activeTimeLayerId = layerId;
+      }
+    });
+    if (this.timeLayers[selectedLayerId][1] === 'clock') {
+      if (activeTimeLayerId && activeTimeLayerId !== selectedLayerId) {
+        this.timeLayers[activeTimeLayerId] = ['far', 'clock'];
+        const previousLayerNode = document.getElementById(activeTimeLayerId);
+        const previousOrder =
+          this.activeLayersJSON[activeTimeLayerId]?.props?.['layer-order'] || 0;
+        if (previousLayerNode) {
+          this.activeLayersJSON[activeTimeLayerId] = this.addActiveLayer(
+            previousLayerNode,
+            previousOrder,
             fromDownload,
           );
         }
-      });
+        document
+          .querySelectorAll(
+            '.active-layer[layer-id="' +
+              activeTimeLayerId +
+              '"] .map-menu-icon:not(.active-layer-time)',
+          )
+          .forEach((item) => {
+            item.classList.remove('locked');
+          });
+      }
+      this.timeLayers[selectedLayerId] = ['fas', 'stop'];
+      if (
+        !this.visibleLayers[selectedLayerId] ||
+        this.visibleLayers[selectedLayerId][1] === 'eye-slash'
+      ) {
+        if (this.layers[selectedLayerId])
+          this.layers[selectedLayerId].visible = true;
+        this.visibleLayers[selectedLayerId] = ['fas', 'eye'];
+      }
+      document
+        .querySelectorAll(
+          '.active-layer[layer-id="' +
+            selectedLayerId +
+            '"] .map-menu-icon:not(.active-layer-time)',
+        )
+        .forEach((item) => {
+          item.classList.add('locked');
+        });
+      if (document.querySelector('#products_label'))
+        document.querySelector('#products_label').classList.add('locked');
+      if (document.querySelector('#map_remove_layers')) {
+        const mapRemoveBtn = document.querySelector('#map_remove_layers');
+        if (mapRemoveBtn) mapRemoveBtn.classList.add('locked');
+      }
+      if (this.props.download && document.querySelector('#download_label'))
+        document.querySelector('#download_label').classList.add('locked');
+      const selectedOrder =
+        this.activeLayersJSON[selectedLayerId]?.props?.['layer-order'] || 0;
+      this.activeLayersJSON[selectedLayerId] = this.addActiveLayer(
+        elem,
+        selectedOrder,
+        fromDownload,
+        hideCalendar,
+      );
       const op = document.querySelector('.opacity-panel');
       if (op && op.style.display === 'block') {
         this.closeOpacity();
       }
     } else {
-      activeLayers.forEach((layer) => {
-        let layerId = layer.getAttribute('layer-id');
-        let order = this.activeLayersJSON[elem.id]?.props?.['layer-order'] || 0;
-        if (groupLayers && groupLayers.includes(layerId)) {
-          elem = document.getElementById(layerId);
-        }
-        if (elem && elem.id === layerId) {
-          this.timeLayers[elem.id] = ['far', 'clock'];
-          this.activeLayersJSON[elem.id] = this.addActiveLayer(
-            elem,
-            order,
-            fromDownload,
+      this.timeLayers[selectedLayerId] = ['far', 'clock'];
+      const selectedOrder =
+        this.activeLayersJSON[selectedLayerId]?.props?.['layer-order'] || 0;
+      this.activeLayersJSON[selectedLayerId] = this.addActiveLayer(
+        elem,
+        selectedOrder,
+        fromDownload,
+      );
+      document
+        .querySelectorAll(
+          '.active-layer[layer-id="' +
+            selectedLayerId +
+            '"] .map-menu-icon:not(.active-layer-time)',
+        )
+        .forEach((item) => {
+          item.classList.remove('locked');
+        });
+      let hasActiveTimeSlider = false;
+      Object.keys(this.timeLayers).forEach((layerId) => {
+        if (
+          this.timeLayers[layerId] &&
+          this.timeLayers[layerId][1] === 'stop'
+        ) {
+          hasActiveTimeSlider = true;
+        }
+      });
+      if (!hasActiveTimeSlider) {
+        const productsLabel = document.querySelector('#products_label');
+        if (productsLabel) productsLabel.classList.remove('locked');
+        const removeBtn = document.querySelector('#map_remove_layers');
+        if (removeBtn) removeBtn.classList.remove('locked');
+        if (this.props.download) {
+          const dl = document.querySelector('#download_label');
+          if (dl) dl.classList.remove('locked');
+          const timeIcon = document.querySelector(
+            '.active-layer[layer-id="' +
+              selectedLayerId +
+              '"] .map-menu-icon.active-layer-time',
           );
-          document
-            .querySelectorAll(
-              '.active-layer[layer-id="' +
-                elem.id +
-                '"] .map-menu-icon:not(.active-layer-time)',
-            )
-            .forEach((item) => {
-              item.classList.remove('locked');
-            });
-          const productsLabel = document.querySelector('#products_label');
-          if (productsLabel) productsLabel.classList.remove('locked');
-          const removeBtn = document.querySelector('#map_remove_layers');
-          if (removeBtn) removeBtn.classList.remove('locked');
-          if (this.props.download) {
-            const dl = document.querySelector('#download_label');
-            if (dl) dl.classList.remove('locked');
-            const timeIcon = document.querySelector(
-              '.active-layer[layer-id="' +
-                elem.id +
-                '"] .map-menu-icon.active-layer-time',
-            );
-            if (timeIcon && timeIcon.dataset.download === 'true') {
-              const dlBtn = document.getElementById('download_label');
-              if (dlBtn) dlBtn.click();
-            }
-          } else {
-            const timeIcon = document.querySelector(
-              '.active-layer[layer-id="' +
-                elem.id +
-                '"] .map-menu-icon.active-layer-time',
-            );
-            if (timeIcon && timeIcon.dataset.download === 'true') {
-              const prBtn = document.getElementById('products_label');
-              if (prBtn) prBtn.click();
-            }
+          if (timeIcon && timeIcon.dataset.download === 'true') {
+            const dlBtn = document.getElementById('download_label');
+            if (dlBtn) dlBtn.click();
           }
-          const ts = document.querySelector('.timeslider-container');
-          if (ts && document.contains(ts))
-            ReactDOM.unmountComponentAtNode(
-              document.querySelector('.esri-ui-bottom-right'),
-            );
-          const warn = document.querySelector('.drawRectanglePopup-block');
-          if (warn) warn.style.display = 'block';
         } else {
-          if (!this.visibleLayers[layerId]) {
-            this.visibleLayers[layerId] = ['fas', 'eye'];
-          }
-          if (this.visibleLayers[layerId][1] === 'eye-slash') {
-            if (this.layers[layerId]) this.layers[layerId].visible = true;
-            this.visibleLayers[layerId] = ['fas', 'eye'];
-            this.activeLayersJSON[layerId] = this.addActiveLayer(
-              document.getElementById(layerId),
-              order,
-              fromDownload,
-            );
-          }
-          const activeNode = document.querySelector(
-            '.active-layer[layer-id="' + layerId + '"]',
+          const timeIcon = document.querySelector(
+            '.active-layer[layer-id="' +
+              selectedLayerId +
+              '"] .map-menu-icon.active-layer-time',
           );
-          if (activeNode) activeNode.classList.remove('locked');
+          if (timeIcon && timeIcon.dataset.download === 'true') {
+            const prBtn = document.getElementById('products_label');
+            if (prBtn) prBtn.click();
+          }
         }
-      });
+        const ts = document.querySelector('.timeslider-container');
+        if (ts && document.contains(ts))
+          ReactDOM.unmountComponentAtNode(
+            document.querySelector('.esri-ui-bottom-right'),
+          );
+        const warn = document.querySelector('.drawRectanglePopup-block');
+        if (warn) warn.style.display = 'block';
+      }
     }
     this.setState({});
   }
@@ -7778,7 +7760,31 @@ class MenuWidget extends React.Component {
    */
   loadLayers() {
     let layers = JSON.parse(sessionStorage.getItem('checkedLayers'));
-    if (layers && !this.props.download) {
+    let expandedDropdowns = null;
+    const userKey = this.userID ? 'user_' + this.userID : 'user_anonymous';
+    const existing = localStorage.getItem(userKey);
+    if (existing) {
+      try {
+        const storeObj = JSON.parse(existing) || {};
+        const stored = storeObj ? storeObj.expandedDropdowns : null;
+        if (Array.isArray(stored)) {
+          expandedDropdowns = stored;
+        } else if (typeof stored === 'string') {
+          const parsed = JSON.parse(stored);
+          if (Array.isArray(parsed)) expandedDropdowns = parsed;
+        }
+      } catch (e) {}
+    }
+    if (!Array.isArray(expandedDropdowns)) {
+      try {
+        const fromSession = sessionStorage.getItem('expandedDropdowns');
+        if (fromSession) {
+          const parsed = JSON.parse(fromSession);
+          if (Array.isArray(parsed)) expandedDropdowns = parsed;
+        }
+      } catch (e) {}
+    }
+    if (layers && !this.props.download && Array.isArray(expandedDropdowns)) {
       for (var i = layers.length - 1; i >= 0; i--) {
         let layer = layers[i];
         let node = document.getElementById(layer);
@@ -7800,10 +7806,37 @@ class MenuWidget extends React.Component {
               delete node.dataset.preserveCheckedLayerState;
             }
           }
-
-          // set scroll position
           let dropdown = node.closest('.map-menu-dropdown');
+          if (dropdown) {
+            let button = dropdown.querySelector('.ccl-expandable__button');
+            if (button && expandedDropdowns.includes(button.id)) {
+              button.setAttribute('aria-expanded', 'true');
+            }
+          }
           let productDropdown = node.closest('.map-menu-product-dropdown');
+          if (productDropdown) {
+            let familyDropdown = node.closest('.map-menu-family-dropdown');
+            if (familyDropdown) {
+              let button = familyDropdown.querySelector(
+                '.ccl-expandable__button',
+              );
+              if (button && expandedDropdowns.includes(button.id)) {
+                button.setAttribute('aria-expanded', 'true');
+              }
+            }
+            let datasetDropdown = node.closest('.map-menu-product-dropdown');
+            if (datasetDropdown) {
+              let button = datasetDropdown.querySelector(
+                '.ccl-expandable__button',
+              );
+              if (button && expandedDropdowns.includes(button.id)) {
+                button.setAttribute('aria-expanded', 'true');
+              }
+            }
+          }
+          // set scroll position
+          dropdown = node.closest('.map-menu-dropdown');
+          productDropdown = node.closest('.map-menu-product-dropdown');
           let scrollPosition = productDropdown
             ? productDropdown.offsetTop
             : dropdown.offsetTop;