@eeacms/volto-arcgis-block 0.1.413 → 0.1.415

package/CHANGELOG.md

@@ -4,8 +4,23 @@ 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.415](https://github.com/eea/volto-arcgis-block/compare/0.1.414...0.1.415) - 3 December 2025
+
+#### :hammer_and_wrench: Others
+
+- (bug): In the TOC menu, when a level is selected, the lower level is now displayed [Unai Bolivar - [`ec66304`](https://github.com/eea/volto-arcgis-block/commit/ec6630453964d3f82c5277ddf43a976c3b1c72c3)]
+### [0.1.414](https://github.com/eea/volto-arcgis-block/compare/0.1.413...0.1.414) - 1 December 2025
+
+#### :hammer_and_wrench: Others
+
+- (bug): Refactor setOpacity to update localstorage correctly [Unai Bolivar - [`b285628`](https://github.com/eea/volto-arcgis-block/commit/b285628caf26c91bbe4f94db48e7406e36f906a6)]
+- (bug): Refactor menu deselection updating the map view [Unai Bolivar - [`01c3b52`](https://github.com/eea/volto-arcgis-block/commit/01c3b520d5679d67b8459ac68a9ca4d14522e67d)]
+- (bug): Adding peesistence to extent mechanisms for HRVPP datasets. Unstable. [Unai Bolivar - [`c5c491f`](https://github.com/eea/volto-arcgis-block/commit/c5c491f1c46ce62ccfe90830c3949db2bb2d4831)]
 ### [0.1.413](https://github.com/eea/volto-arcgis-block/compare/0.1.412...0.1.413) - 27 November 2025
 
+#### :hammer_and_wrench: Others
+
+- Merge pull request #1068 from eea/develop [Unai Bolivar - [`cf8a1b1`](https://github.com/eea/volto-arcgis-block/commit/cf8a1b1f0c90dba13ff68f971e01690c52d57453)]
 ### [0.1.412](https://github.com/eea/volto-arcgis-block/compare/0.1.411...0.1.412) - 26 November 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -464,7 +464,6 @@ class BookmarkWidget extends React.Component {
                   }
                 }
                 shouldUpdate = true;
-                break;
               }
             }
           } else if (e.moved) {

package/src/components/MapViewer/MenuWidget.jsx

@@ -463,6 +463,7 @@ class MenuWidget extends React.Component {
     this.xml = null;
     this.dataBBox = null;
     this.extentInitiated = false;
+    this.extentCenter = null;
     this.hotspotLayerIds = [];
     this.getHotspotLayerIds = this.getHotspotLayerIds.bind(this);
     this.prepareHotspotLayers = this.prepareHotspotLayers.bind(this);
@@ -476,7 +477,11 @@ class MenuWidget extends React.Component {
     this.view.watch('stationary', (isStationary) => {
       let snowAndIceInSessionStorage = sessionStorage.getItem('snowAndIce');
       let node;
+      if (this.view && this.view.center) {
+        this.extentCenter = { x: this.view.center.x, y: this.view.center.y };
+      }
       if (isStationary) {
+        this.extentInitiated = false;
         let zoom = this.view.get('zoom');
         if (this.props.download) {
           node = document.querySelector('.zoom-in-message-dataset');
@@ -2892,6 +2897,12 @@ class MenuWidget extends React.Component {
           // }, 2000);
         }
       }
+      if (
+        this.layers[elem.id].DatasetId === '65f8eded11d94a1ba5540ceecaddd4e6' ||
+        this.layers[elem.id].DatasetId === '40e056d02eed4c1fb2040cf0f06823df'
+      ) {
+        this.fullExtentDataset(elem);
+      }
       if (
         (elem.id.includes('all_lcc') || elem.id.includes('all_present')) &&
         (this.layers['lc_filter'] || this.layers['lcc_filter']) &&
@@ -3028,6 +3039,7 @@ class MenuWidget extends React.Component {
         }
       } catch (e) {}
     } else {
+      this.extentInitiated = false;
       sessionStorage.removeItem('downloadButtonClicked');
       sessionStorage.removeItem('timeSliderTag');
       this.deleteCheckedLayer(elem.id);
@@ -3280,6 +3292,23 @@ class MenuWidget extends React.Component {
     let splitdefCheck = layerdef.split(',');
     let layerChecks = [];
     let selector = [];
+    if (value) {
+      let productDropdown = e.closest('.map-menu-product-dropdown');
+      let datasetDropdown = e.closest('.map-menu-dropdown');
+      let familyDropdown = e.closest('.map-menu-family-dropdown');
+      if (productDropdown) {
+        let btn = productDropdown.querySelector('.ccl-expandable__button');
+        if (btn) btn.setAttribute('aria-expanded', 'true');
+      }
+      if (familyDropdown) {
+        let btn = familyDropdown.querySelector('.ccl-expandable__button');
+        if (btn) btn.setAttribute('aria-expanded', 'true');
+      }
+      if (datasetDropdown) {
+        let btn = datasetDropdown.querySelector('.ccl-expandable__button');
+        if (btn) btn.setAttribute('aria-expanded', 'true');
+      }
+    }
     if (value) {
       for (let i = 0; i < splitdefCheck.length; i++) {
         selector = document.querySelector(`[id="${splitdefCheck[i]}"]`);
@@ -3305,6 +3334,29 @@ class MenuWidget extends React.Component {
         this.toggleLayer(element);
       }
     });
+    if (!value) {
+      let filterIds = ['lcc_filter', 'lc_filter', 'klc_filter', 'pa_filter'];
+      for (let i = 0; i < filterIds.length; i++) {
+        let fid = filterIds[i];
+        if (this.layers && this.layers[fid]) {
+          this.deleteFilteredLayer(fid);
+          let mapLayer = this.map && this.map.findLayerById(fid);
+          if (mapLayer) {
+            if (mapLayer.type && mapLayer.type !== 'base-tile') {
+              mapLayer.clear();
+            }
+            mapLayer.destroy();
+            this.map.remove(mapLayer);
+          }
+          if (this.activeLayersJSON && this.activeLayersJSON[fid])
+            delete this.activeLayersJSON[fid];
+          if (this.visibleLayers && this.visibleLayers[fid])
+            delete this.visibleLayers[fid];
+          if (this.timeLayers && this.timeLayers[fid])
+            delete this.timeLayers[fid];
+        }
+      }
+    }
   }
 
   /**
@@ -3321,9 +3373,21 @@ class MenuWidget extends React.Component {
     let selector = [];
 
     if (value) {
+      let productContainer = document.querySelector('[productid="' + id + '"]');
+      if (productContainer) {
+        let btn = productContainer.querySelector('.ccl-expandable__button');
+        if (btn) btn.setAttribute('aria-expanded', 'true');
+      }
       for (let i = 0; i < splitdefCheck.length; i++) {
         selector = document.querySelector(`[id="${splitdefCheck[i]}"]`);
         datasetChecks.push(selector);
+        if (selector) {
+          let datasetDropdown = selector.closest('.map-menu-dropdown');
+          if (datasetDropdown) {
+            let btn = datasetDropdown.querySelector('.ccl-expandable__button');
+            if (btn) btn.setAttribute('aria-expanded', 'true');
+          }
+        }
       }
     } else {
       datasetChecks = document.querySelectorAll(`[parentid=${id}]`);
@@ -3345,9 +3409,21 @@ class MenuWidget extends React.Component {
     let selector = [];
 
     if (value) {
+      let familyContainer = document.querySelector('[productid="' + id + '"]');
+      if (familyContainer) {
+        let btn = familyContainer.querySelector('.ccl-expandable__button');
+        if (btn) btn.setAttribute('aria-expanded', 'true');
+      }
       for (let i = 0; i < splitdefCheck.length; i++) {
         selector = document.querySelector(`[id="${splitdefCheck[i]}"]`);
         datasetChecks.push(selector);
+        if (selector) {
+          let datasetDropdown = selector.closest('.map-menu-dropdown');
+          if (datasetDropdown) {
+            let btn = datasetDropdown.querySelector('.ccl-expandable__button');
+            if (btn) btn.setAttribute('aria-expanded', 'true');
+          }
+        }
       }
     } else {
       datasetChecks = document.querySelectorAll(`[parentid=${id}]`);
@@ -4040,8 +4116,9 @@ class MenuWidget extends React.Component {
       });
     }
     if (
-      this.layers[elem.id].DatasetId === '65f8eded11d94a1ba5540ceecaddd4e6' ||
-      this.layers[elem.id].DatasetId === '40e056d02eed4c1fb2040cf0f06823df'
+      this.extentInitiated === false &&
+      (this.layers[elem.id].DatasetId === '65f8eded11d94a1ba5540ceecaddd4e6' ||
+        this.layers[elem.id].DatasetId === '40e056d02eed4c1fb2040cf0f06823df')
     ) {
       let myExtent = new Extent({
         xmin: -13478905.5678019,
@@ -4050,7 +4127,20 @@ class MenuWidget extends React.Component {
         ymax: 11175665.272476234,
         spatialReference: 3857,
       });
-      this.view.goTo({ center: myExtent.center, zoom: 3 });
+      const targetCenter = myExtent.center;
+      if (this.extentCenter) {
+        const epsilon = 1e-3;
+        const sameStoredCenter =
+          Math.abs(this.extentCenter.x - targetCenter.x) < epsilon &&
+          Math.abs(this.extentCenter.y - targetCenter.y) < epsilon;
+        if (sameStoredCenter) {
+          this.extentInitiated = true;
+          return;
+        }
+      }
+      this.view.goTo({ center: targetCenter, zoom: 3 });
+      this.extentCenter = { x: targetCenter.x, y: targetCenter.y };
+      this.extentInitiated = true;
     } else {
       this.view.goTo(myExtent);
     }
@@ -4287,8 +4377,10 @@ class MenuWidget extends React.Component {
         ymax: firstLayer.ymax,
       });
       if (
-        this.layers[elem.id].DatasetId === '65f8eded11d94a1ba5540ceecaddd4e6' ||
-        this.layers[elem.id].DatasetId === '40e056d02eed4c1fb2040cf0f06823df'
+        this.extentInitiated === false &&
+        (this.layers[elem.id].DatasetId ===
+          '65f8eded11d94a1ba5540ceecaddd4e6' ||
+          this.layers[elem.id].DatasetId === '40e056d02eed4c1fb2040cf0f06823df')
       ) {
         let myExtent = new Extent({
           xmin: -13478905.5678019,
@@ -4297,7 +4389,26 @@ class MenuWidget extends React.Component {
           ymax: 11175665.272476234,
           spatialReference: 3857,
         });
-        this.view.goTo({ center: myExtent.center, zoom: 3 });
+        const targetCenter = myExtent.center;
+        if (this.extentCenter) {
+          const epsilon = 1e-3;
+          const sameStoredCenter =
+            Math.abs(this.extentCenter.x - targetCenter.x) < epsilon &&
+            Math.abs(this.extentCenter.y - targetCenter.y) < epsilon;
+          if (sameStoredCenter) {
+            if (this.toggleHotspotWidget.view.zoom !== 3) {
+              this.view.zoom = 3;
+              this.setState({}); // Force re-render
+              return;
+            } else {
+              this.extentInitiated = true;
+              return;
+            }
+          }
+        }
+        this.view.goTo({ center: targetCenter, zoom: 3 });
+        this.extentCenter = { x: targetCenter.x, y: targetCenter.y };
+        this.extentInitiated = true;
       } else {
         this.view.goTo(myExtent);
       }
@@ -4887,13 +4998,61 @@ class MenuWidget extends React.Component {
    */
   saveOpacity(layer, value) {
     if (this.props.download) return;
+
+    // Resolve layer id from string or layer object
+    let layerId = typeof layer === 'string' ? layer : null;
+    if (!layerId && layer && typeof layer === 'object') {
+      let lid = null;
+      if (layer.id) {
+        lid = layer.id;
+      } else if (layer.LayerId) {
+        lid = layer.LayerId;
+      } else if (layer.layer && layer.layer.id) {
+        lid = layer.layer.id;
+      }
+      layerId = lid;
+    }
+    if (!layerId) return;
+
+    // Update sessionStorage
     let layerOpacities = JSON.parse(sessionStorage.getItem('layerOpacities'));
     if (layerOpacities === null) {
       layerOpacities = {};
     }
-    layerOpacities[layer] = value;
+    layerOpacities[layerId] = value;
     sessionStorage.setItem('layerOpacities', JSON.stringify(layerOpacities));
 
+    // Persist basic layer information (metadata + current opacity + visibility)
+    try {
+      let layersInfo = JSON.parse(sessionStorage.getItem('layersInfo'));
+      if (layersInfo === null) layersInfo = {};
+      if (this.layers && this.layers[layerId]) {
+        const l = this.layers[layerId];
+        layersInfo[layerId] = {
+          id: layerId,
+          title: l.title || l.DatasetTitle || l.LayerTitle || '',
+          DatasetId: l.DatasetId || '',
+          ViewService: l.ViewService || l.url || '',
+          type: l.type || '',
+          opacity: value,
+          visible: !!l.visible,
+        };
+        sessionStorage.setItem('layersInfo', JSON.stringify(layersInfo));
+      }
+    } catch (e) {}
+
+    // Mirror into user-specific localStorage blob for persistence across sessions
+    try {
+      const userKey = this.userID ? 'user_' + this.userID : 'user_anonymous';
+      const existing = localStorage.getItem(userKey);
+      const storeObj = existing ? JSON.parse(existing) : {};
+      storeObj['layerOpacities'] = JSON.stringify(layerOpacities);
+      if (sessionStorage.getItem('layersInfo')) {
+        storeObj['layersInfo'] = sessionStorage.getItem('layersInfo');
+      }
+      localStorage.setItem(userKey, JSON.stringify(storeObj));
+    } catch (e) {}
+
     // Save to localStorage for user service layers
     const savedServices = JSON.parse(
       localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
@@ -4904,7 +5063,7 @@ class MenuWidget extends React.Component {
 
       // Update opacity for matching layer in user services
       savedServices.forEach((service) => {
-        if (service.LayerId === layer) {
+        if (service.LayerId === layerId) {
           service.opacity = value;
           servicesUpdated = true;
         }

package/src/components/MapViewer/css/ArcgisMap.css

@@ -1379,8 +1379,10 @@ div.upload-container.esri-component
 }
 
 .calendar-button:hover {
-  background-color: #a0b128;
-  color: white;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #a0b128;
+  border-radius: 2px;
 }
 
 .datepicker {