@eeacms/volto-arcgis-block 0.1.448 → 0.1.450

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.450](https://github.com/eea/volto-arcgis-block/compare/0.1.449...0.1.450) - 13 May 2026
+
+#### :hammer_and_wrench: Others
+
+- (bug): fix swipe, hotspot filter, TOC CDSE [Unai Bolivar - [`0065fef`](https://github.com/eea/volto-arcgis-block/commit/0065fef63b0690aac79472d2b97b06243ccfa123)]
+- (bug): swipe fix [Unai Bolivar - [`685648f`](https://github.com/eea/volto-arcgis-block/commit/685648f17cfa38ddc8bad66aaba9ee0165f7410e)]
+### [0.1.449](https://github.com/eea/volto-arcgis-block/compare/0.1.448...0.1.449) - 12 May 2026
+
 ### [0.1.448](https://github.com/eea/volto-arcgis-block/compare/0.1.447...0.1.448) - 11 May 2026
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -596,9 +596,9 @@ class HotspotWidget extends React.Component {
     if (lcContainer === null || lccContainer === null) return;
     if (
       (lcContainer.style.display === 'block' &&
-        lcTimeSelect.value === 'default') ||
+        (lcTimeSelect.value === 'default' || lcTimeSelect.value === '')) ||
       (lccContainer.style.display === 'block' &&
-        lccTimeSelect.value === 'default') ||
+        (lccTimeSelect.value === 'default' || lccTimeSelect.value === '')) ||
       klcSelect.value === 'default'
     ) {
       document.querySelector('#applyFilterButton').disabled = true;
@@ -759,10 +759,20 @@ class HotspotWidget extends React.Component {
             } else {
               selectBox.value = this.state.selectedArea;
               if (this.state.lcYear !== null) {
-                selectBoxLcTime.value = this.state.lcYear;
+                const hasLcYearOption = Array.from(
+                  selectBoxLcTime.options,
+                ).some((option) => option.value === this.state.lcYear);
+                selectBoxLcTime.value = hasLcYearOption
+                  ? this.state.lcYear
+                  : 'default';
               }
               if (this.state.lccYear !== null) {
-                selectBoxLccTime.value = this.state.lccYear;
+                const hasLccYearOption = Array.from(
+                  selectBoxLccTime.options,
+                ).some((option) => option.value === this.state.lccYear);
+                selectBoxLccTime.value = hasLccYearOption
+                  ? this.state.lccYear
+                  : 'default';
               }
               break; // move break statement inside the if block
             }
@@ -783,10 +793,20 @@ class HotspotWidget extends React.Component {
             } else {
               selectBox.value = this.state.selectedArea;
               if (this.state.lcYear !== null) {
-                selectBoxLcTime.value = this.state.lcYear;
+                const hasLcYearOption = Array.from(
+                  selectBoxLcTime.options,
+                ).some((option) => option.value === this.state.lcYear);
+                selectBoxLcTime.value = hasLcYearOption
+                  ? this.state.lcYear
+                  : 'default';
               }
               if (this.state.lccYear !== null) {
-                selectBoxLccTime.value = this.state.lccYear;
+                const hasLccYearOption = Array.from(
+                  selectBoxLccTime.options,
+                ).some((option) => option.value === this.state.lccYear);
+                selectBoxLccTime.value = hasLccYearOption
+                  ? this.state.lccYear
+                  : 'default';
               }
               break;
             }

package/src/components/MapViewer/MapViewer.jsx

@@ -714,6 +714,7 @@ class MapViewer extends React.Component {
       }
       this.syncViewWidgetContainers();
       this.syncViewTask = null;
+      this.restorePanelScroll(true);
     });
   }
 
@@ -1552,6 +1553,33 @@ class MapViewer extends React.Component {
     this.processPendingWidgetActivation();
   }
 
+  restorePanelScroll(skipTimeout) {
+    let paneles = document.querySelector('div#paneles.panels');
+    var selected_tab = document.querySelector('.tab-selected');
+
+    if (!paneles || !selected_tab) {
+      return;
+    }
+
+    let toc_panel_scrolls =
+      JSON.parse(sessionStorage.getItem('toc_panel_scrolls')) ?? {};
+    let scroll = toc_panel_scrolls[selected_tab.id];
+    if (scroll !== undefined) {
+      scroll = parseInt(scroll);
+      if (skipTimeout) {
+        if (paneles) {
+          paneles.scrollTop = scroll;
+        }
+      } else {
+        setTimeout(() => {
+          if (paneles) {
+            paneles.scrollTop = scroll;
+          }
+        }, 1000);
+      }
+    }
+  }
+
   componentWillUnmount() {
     this.isComponentMounted = false;
     this.viewTransitionTaskId += 1;
@@ -2173,6 +2201,7 @@ export const CheckUserID = ({ reference }) => {
             tax={reference.tax}
             catalogapi={reference.props.catalogapi}
             fetchCatalogApiDates={reference.props.fetchCatalogApiDates}
+            restorePanelScroll={reference.restorePanelScroll}
           />
         </>
       )}

package/src/components/MapViewer/MenuWidget.jsx

@@ -762,23 +762,6 @@ class MenuWidget extends React.Component {
     }
   }
 
-  restorePanelScroll() {
-    let paneles = document.querySelector('#paneles');
-    var selected_tab = document.querySelector('.tab-selected');
-
-    if (!paneles || !selected_tab) {
-      return;
-    }
-
-    let toc_panel_scrolls =
-      JSON.parse(sessionStorage.getItem('toc_panel_scrolls')) ?? {};
-    let scroll = toc_panel_scrolls[selected_tab.id];
-    if (scroll !== undefined) {
-      scroll = parseInt(scroll);
-      paneles.scrollTop = scroll;
-    }
-  }
-
   /**
    * Method that will be invoked when the
    * button is clicked. It controls the open
@@ -841,7 +824,7 @@ class MenuWidget extends React.Component {
           timeSliderContainer.style.display = 'block';
         }
 
-        this.restorePanelScroll();
+        this.props.restorePanelScroll();
       }
 
       this.setState({ showMapMenu: true });
@@ -2085,10 +2068,14 @@ class MenuWidget extends React.Component {
           ViewService: viewService,
         });
       } else if (viewService?.toLowerCase().includes('wmts')) {
+        const resolveSentinelLayer = /(?:sh\.dataspace\.copernicus\.eu|services\.sentinel-hub\.com)\/ogc\/wmts/i.test(
+          viewService || '',
+        );
         this.layers[layer.LayerId + '_' + inheritedIndexLayer] = new WMTSLayer({
           url: viewService?.includes('?')
             ? viewService + '&'
             : viewService + '?',
+          serviceMode: 'KVP',
           spatialReference: this.view?.spatialReference,
           //id: layer.LayerId,
           title: '',
@@ -2109,6 +2096,7 @@ class MenuWidget extends React.Component {
           DatasetDownloadInformation: dataset_download_information || {},
           customLayerParameters: {
             SHOWLOGO: false,
+            ...(resolveSentinelLayer ? { PREVIEW: 2 } : {}),
           },
         });
       } else {
@@ -2720,6 +2708,18 @@ class MenuWidget extends React.Component {
     if (!activeLayerData) {
       return false;
     }
+    const resolveSentinelLayer = /(?:sh\.dataspace\.copernicus\.eu|services\.sentinel-hub\.com)\/ogc\/wmts/i.test(
+      (
+        currentLayerData.ViewService ||
+        currentLayerData.url ||
+        ''
+      ).toLowerCase(),
+    );
+    const nextCustomLayerParameters = {
+      ...(currentLayerData.customLayerParameters || {}),
+      SHOWLOGO: false,
+      ...(resolveSentinelLayer ? { PREVIEW: 2 } : {}),
+    };
 
     const nextLayerData = new WMTSLayer({
       id: currentLayerData.id || layerId,
@@ -2731,9 +2731,7 @@ class MenuWidget extends React.Component {
         this.view?.spatialReference || currentLayerData.spatialReference,
       activeLayer: activeLayerData,
       ViewService: currentLayerData.ViewService || currentLayerData.url,
-      customLayerParameters: currentLayerData.customLayerParameters || {
-        SHOWLOGO: false,
-      },
+      customLayerParameters: nextCustomLayerParameters,
     });
 
     const customKeys = [
@@ -4461,8 +4459,23 @@ class MenuWidget extends React.Component {
               if (
                 this.layers[elem.id].ViewService.toLowerCase().includes('wmts')
               ) {
+                const resolveSentinelLayer = /(?:sh\.dataspace\.copernicus\.eu|services\.sentinel-hub\.com)\/ogc\/wmts/i.test(
+                  this.layers[elem.id].ViewService ||
+                    this.layers[elem.id].url ||
+                    '',
+                );
+                const nextCustomLayerParameters = {
+                  ...(this.layers[elem.id].customLayerParameters || {}),
+                  SHOWLOGO: false,
+                  ...(resolveSentinelLayer ? { PREVIEW: 2 } : {}),
+                  TIME:
+                    payload.dates[payload.dates.length - 1] +
+                      '/' +
+                      payload.dates[payload.dates.length - 1] || '',
+                };
                 this.layers[elem.id] = new WMTSLayer({
                   url: this.layers[elem.id].url,
+                  serviceMode: this.layers[elem.id].serviceMode || 'KVP',
                   spatialReference: this.layers[elem.id].spatialReference,
                   title: this.layers[elem.id].title,
                   _wmtsTitle: this.layers[elem.id]._wmtsTitle,
@@ -4477,13 +4490,7 @@ class MenuWidget extends React.Component {
                   LayerTitle: this.layers[elem.id].LayerTitle,
                   DatasetDownloadInformation: this.layers[elem.id]
                     .DatasetDownloadInformation,
-                  customLayerParameters: {
-                    SHOWLOGO: false,
-                    TIME:
-                      payload.dates[payload.dates.length - 1] +
-                        '/' +
-                        payload.dates[payload.dates.length - 1] || '',
-                  },
+                  customLayerParameters: nextCustomLayerParameters,
                 });
               }
             }
@@ -4649,26 +4656,97 @@ class MenuWidget extends React.Component {
       sessionStorage.removeItem('downloadButtonClicked');
       sessionStorage.removeItem('timeSliderTag');
       this.deleteCheckedLayer(elem.id);
-      this.layers[elem.id].opacity = 1;
-      this.layers[elem.id].visible = false;
+      const currentLayerData = this.layers[elem.id];
+      currentLayerData.opacity = 1;
+      currentLayerData.visible = false;
       if (!userService) this.deleteFilteredLayer(elem.id);
-      let mapLayer = this.map.findLayerById(elem.id);
+      const mapLayersToRemove = [];
+      const mapLayer = this.map.findLayerById(elem.id);
       if (mapLayer) {
+        mapLayersToRemove.push(mapLayer);
+      }
+      if (
+        currentLayerData &&
+        this.map &&
+        this.map.layers &&
+        typeof this.map.layers.includes === 'function' &&
+        this.map.layers.includes(currentLayerData)
+      ) {
+        mapLayersToRemove.push(currentLayerData);
+      }
+      const currentLayerService = String(
+        currentLayerData?.ViewService || currentLayerData?.url || '',
+      ).toLowerCase();
+      const currentLayerActive = currentLayerData?.activeLayer?.id || null;
+      const currentLayerDataset = currentLayerData?.DatasetId || null;
+      const mapLayerItems = this.map?.layers?.items || [];
+      mapLayerItems.forEach((candidateLayer) => {
+        if (!candidateLayer) {
+          return;
+        }
+        if (candidateLayer === currentLayerData) {
+          mapLayersToRemove.push(candidateLayer);
+          return;
+        }
+        if (
+          candidateLayer.LayerId === elem.id ||
+          candidateLayer.id === elem.id
+        ) {
+          mapLayersToRemove.push(candidateLayer);
+          return;
+        }
+        const candidateService = String(
+          candidateLayer.ViewService || candidateLayer.url || '',
+        ).toLowerCase();
+        if (!currentLayerService || currentLayerService !== candidateService) {
+          return;
+        }
+        if (
+          currentLayerActive &&
+          candidateLayer.activeLayer &&
+          candidateLayer.activeLayer.id === currentLayerActive
+        ) {
+          mapLayersToRemove.push(candidateLayer);
+          return;
+        }
+        if (
+          currentLayerDataset &&
+          candidateLayer.DatasetId &&
+          candidateLayer.DatasetId === currentLayerDataset
+        ) {
+          mapLayersToRemove.push(candidateLayer);
+        }
+      });
+      const removedLayerIds = new Set();
+      mapLayersToRemove.forEach((layerToRemove) => {
+        if (!layerToRemove) {
+          return;
+        }
+        const layerIdentity = layerToRemove.uid || layerToRemove.id;
+        if (layerIdentity && removedLayerIds.has(layerIdentity)) {
+          return;
+        }
         if (!userService) {
           if (
-            mapLayer.type &&
-            mapLayer.type !== 'base-tile' &&
-            mapLayer.type !== 'wmts'
-          )
-            mapLayer.clear();
-          if (mapLayer.type !== 'wmts') {
-            mapLayer.destroy();
+            layerToRemove.type &&
+            layerToRemove.type !== 'base-tile' &&
+            layerToRemove.type !== 'wmts' &&
+            typeof layerToRemove.clear === 'function'
+          ) {
+            layerToRemove.clear();
+          }
+          if (
+            layerToRemove.type !== 'wmts' &&
+            typeof layerToRemove.destroy === 'function'
+          ) {
+            layerToRemove.destroy();
           }
-          this.map.remove(this.layers[elem.id]);
-        } else {
-          this.map.remove(mapLayer);
         }
-      }
+        this.map.remove(layerToRemove);
+        if (layerIdentity) {
+          removedLayerIds.add(layerIdentity);
+        }
+      });
       if (this.uploadedGraphics && this.uploadedGraphics[elem.id]) {
         try {
           this.view.graphics.removeMany(this.uploadedGraphics[elem.id]);
@@ -7653,7 +7731,7 @@ class MenuWidget extends React.Component {
       if (document.querySelector('.opacity-panel').style.display === 'block') {
         this.closeOpacity();
       }
-      this.restorePanelScroll();
+      this.props.restorePanelScroll();
     }
   }
 

package/src/components/MapViewer/SwipeWidget.jsx

@@ -152,8 +152,9 @@ class SwipeWidget extends React.Component {
       // CLOSE
       this.props.mapViewer.setActiveWidget();
       this.cleanupSwipeState();
-      this.loadVisibleLayers();
+      this.removeLayerChangeListener();
       this.cleanupSwipeResource();
+      this.loadVisibleLayers();
       this.setState({ showMapMenu: false });
       if (shouldReturnToThreeDimensionalView) {
         this.props.mapViewer.switchViewMode('3d');
@@ -434,11 +435,15 @@ class SwipeWidget extends React.Component {
     let cl = JSON.parse(sessionStorage.getItem('checkedLayers'));
     if (cl) {
       cl.forEach((layer) => {
-        if (layers[layer].id === selectedLeadingLayer) {
-          this.swipe.leadingLayers.add(layers[layer]);
+        const selectedLayer = layers[layer];
+        if (!selectedLayer) {
+          return;
+        }
+        if (selectedLayer.id === selectedLeadingLayer) {
+          this.swipe.leadingLayers.add(selectedLayer);
         }
-        if (layers[layer].id === selectedTrailingLayer) {
-          this.swipe.trailingLayers.add(layers[layer]);
+        if (selectedLayer.id === selectedTrailingLayer) {
+          this.swipe.trailingLayers.add(selectedLayer);
         }
       });
     }
@@ -488,7 +493,9 @@ class SwipeWidget extends React.Component {
     let cl = JSON.parse(sessionStorage.getItem('checkedLayers'));
     if (cl) {
       cl.forEach((layer) => {
-        this.map.layers.add(layers[layer]);
+        if (layers[layer]) {
+          this.map.layers.add(layers[layer]);
+        }
       });
     }
     if (layers['lcc_filter']) {