@eeacms/volto-arcgis-block 0.1.355 → 0.1.357

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.357](https://github.com/eea/volto-arcgis-block/compare/0.1.356...0.1.357) - 12 May 2025
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #945 from eea/CLMS-285178-ISOLATED-SWIPE-WIDGET-FIX [Unai Bolivar - [`617b4c4`](https://github.com/eea/volto-arcgis-block/commit/617b4c43ad4363267c4df34c72e64314ee42afb4)]
+- CLMS-285178 (bug): Separated swipe from other tickets and can push now going [Unai Bolivar - [`84efe24`](https://github.com/eea/volto-arcgis-block/commit/84efe24d964b79f54ddf17f69e389a3f57e3f867)]
+- CLMS-285178 (bug): Separated swipe from other tickets and can push [Unai Bolivar - [`3e94fd6`](https://github.com/eea/volto-arcgis-block/commit/3e94fd6d2f92817d6b0220155a7e8a0ed5d8dfdb)]
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`fdd39ce`](https://github.com/eea/volto-arcgis-block/commit/fdd39ce6c0d848b33f3b6d033e4b35e9bd4f2002)]
+### [0.1.356](https://github.com/eea/volto-arcgis-block/compare/0.1.355...0.1.356) - 6 May 2025
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #944 from eea/develop [Unai Bolivar - [`a034911`](https://github.com/eea/volto-arcgis-block/commit/a0349111d5f09be64b57acccc6a14cc5617f279a)]
 ### [0.1.355](https://github.com/eea/volto-arcgis-block/compare/0.1.354...0.1.355) - 5 May 2025
 
 ### [0.1.354](https://github.com/eea/volto-arcgis-block/compare/0.1.353...0.1.354) - 24 April 2025

package/Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-arcgis-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,clms.land.copernicus.eu,water.europa.eu-freshwater,clmsdemo.devel6cph.eea.europa.eu,land.copernicus.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,clms.land.copernicus.eu,water.europa.eu-freshwater,clmsdemo.devel6cph.eea.europa.eu,land.copernicus.eu,ask.copernicus.eu"
         DEPENDENCIES = ""
         BACKEND_PROFILES = "eea.kitkat:testing"
         BACKEND_ADDONS = "clms.addon,clms.types,clms.downloadtool,clms.statstool"

package/package.json

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

package/src/components/MapViewer/MenuWidget.jsx

@@ -1457,8 +1457,8 @@ class MenuWidget extends React.Component {
     return (
       <div
         className="map-menu-family-dropdown"
-        id={'product_' + inheritedIndexProduct}
-        productid={familyId}
+        id={'family_' + inheritedIndexProduct}
+        familyid={familyId}
         key={'a' + familyId}
       >
         <fieldset className="ccl-fieldset" key={'b' + familyId}>
@@ -3213,7 +3213,7 @@ class MenuWidget extends React.Component {
     let datasetContainer = selectedDataset.closest(
       '.map-menu-dataset-dropdown',
     );
-    let datasetContainerId = datasetContainer.getAttribute('datasetid');
+    let datasetContainerId = datasetContainer?.getAttribute('datasetid');
     this.compCfg.forEach((component) => {
       component.Products.forEach((product) => {
         product.Datasets.forEach((dataset) => {
@@ -5191,6 +5191,7 @@ class MenuWidget extends React.Component {
     let productFilter;
     let familyFilter;
     let result = false;
+    let familiesResult = [];
     if (document.querySelector('#menu-searchtext')) {
       searchText = document
         .querySelector('#menu-searchtext')
@@ -5270,6 +5271,12 @@ class MenuWidget extends React.Component {
               if (dataset.Default_active) {
                 defaultActive = 'map_' + datasetElem.id;
               }
+              if (
+                dataset.FamilyTitle &&
+                !familiesResult.includes(dataset.FamilyTitle)
+              ) {
+                familiesResult.push(dataset.FamilyTitle);
+              }
             } else if (
               datasetChecked ||
               (dataset?.DatasetTitle?.toUpperCase().includes(searchText) &&
@@ -5301,6 +5308,12 @@ class MenuWidget extends React.Component {
               if (dataset.Default_active) {
                 defaultActive = 'map_' + datasetElem.id;
               }
+              if (
+                dataset.FamilyTitle &&
+                !familiesResult.includes(dataset.FamilyTitle)
+              ) {
+                familiesResult.push(dataset.FamilyTitle);
+              }
             } else {
               datasetElem.setAttribute('style', 'display: none;');
             }
@@ -5325,6 +5338,18 @@ class MenuWidget extends React.Component {
         componentElem.setAttribute('style', 'display: none;');
       }
     }
+    let familiesElements = document.querySelectorAll(
+      '.map-menu-family-dropdown',
+    );
+    for (let index = 0; index < familiesElements.length; index++) {
+      if (
+        familiesResult.includes(familiesElements[index].attributes[2].value)
+      ) {
+        familiesElements[index].setAttribute('style', 'display: block;');
+      } else {
+        familiesElements[index].setAttribute('style', 'display: none;');
+      }
+    }
     let myServiceResult = false;
     this.state.wmsUserServiceLayers.forEach((element) => {
       let node = document.getElementById('my-service-' + element.LayerId);

package/src/components/MapViewer/SwipeWidget.jsx

@@ -25,8 +25,11 @@ class SwipeWidget extends React.Component {
     this.dpiMax = 1200;
     this.scaleMax = 600000000;
     this.map = this.props.map;
-    this.layers = this.props.layers;
+    // layers = this.props.layers;
     this.hasSwipe = false;
+    this.prevActiveLayers = this.props.mapViewer.activeLayers
+      ? this.props.mapViewer.activeLayers
+      : [];
   }
 
   loader() {
@@ -103,6 +106,27 @@ class SwipeWidget extends React.Component {
     });
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const curr = this.props.mapViewer.activeLayers || [];
+    const prev = this.prevActiveLayers || [];
+    const changed =
+      curr.length !== prev.length || curr.some((layer, i) => layer !== prev[i]);
+    if (this.state.showMapMenu && changed) {
+      if (curr.length === 0) {
+        sessionStorage.setItem('checkedLayers', JSON.stringify([]));
+        this.map.layers.removeAll();
+        this.props.view.ui.remove(this.swipe);
+        this.hasSwipe = false;
+        this.resetSwipeWidgetToDefault();
+        // this.openMenu(this);
+      } else if (this.hasSwipe) {
+        this.loadOptions();
+        this.renderApplySwipeButton();
+      }
+    }
+    this.prevActiveLayers = curr;
+  }
+
   getLayerTitle(layer) {
     let title;
     if (layer.url && layer.url.toLowerCase().includes('wmts')) {
@@ -119,6 +143,7 @@ class SwipeWidget extends React.Component {
     return title;
   }
   loadOptions() {
+    const layers = this.props.layers;
     var selectLeadingLayer = document.getElementById('select-leading-layer');
     if (selectLeadingLayer) {
       this.removeOptions(selectLeadingLayer);
@@ -143,9 +168,9 @@ class SwipeWidget extends React.Component {
       this.map.layers.items.length > 0
     ) {
       cl = [];
-      // Find the layer ID in this.layers that corresponds to each map.layers item
+      // Find the layer ID in layers that corresponds to each map.layers item
       for (const mapLayer of this.map.layers.items) {
-        for (const [layerKey, layerObj] of Object.entries(this.layers)) {
+        for (const [layerKey, layerObj] of Object.entries(layers)) {
           if (layerObj.id === mapLayer.id) {
             cl.push(layerKey);
             break;
@@ -162,32 +187,32 @@ class SwipeWidget extends React.Component {
     // Process the layers
     if (cl && cl.length > 0) {
       cl.forEach((layer) => {
-        if (this.layers[layer]) {
-          let layerId = this.layers[layer].id;
-          if (this.layers['lcc_filter']) {
+        if (layers[layer]) {
+          let layerId = layers[layer].id;
+          if (layers['lcc_filter']) {
             if (
               layer === 'all_lcc_a_pol_1_4_1_0' ||
               layer === 'all_lcc_b_pol_1_4_1_1'
             ) {
-              layerId = this.layers['lcc_filter'].id;
+              layerId = layers['lcc_filter'].id;
             }
           }
-          if (this.layers['lc_filter']) {
+          if (layers['lc_filter']) {
             if (
               layer === 'all_present_lc_a_pol_1_4_0_0' ||
               layer === 'all_present_lc_b_pol_1_4_0_1'
             ) {
-              layerId = this.layers['lc_filter'].id;
+              layerId = layers['lc_filter'].id;
             }
           }
-          if (this.layers['klc_filter']) {
+          if (layers['klc_filter']) {
             if (layer === 'cop_klc_1_4_2_0') {
-              layerId = this.layers['klc_filter'].id;
+              layerId = layers['klc_filter'].id;
             }
           }
-          if (this.layers['pa_filter']) {
+          if (layers['pa_filter']) {
             if (layer === 'protected_areas_1_4_3_0') {
-              layerId = this.layers['pa_filter'].id;
+              layerId = layers['pa_filter'].id;
             }
           }
           if (selectLeadingLayer) {
@@ -198,7 +223,7 @@ class SwipeWidget extends React.Component {
             ) {
               selectLeadingLayer.options.add(
                 new Option(
-                  this.getLayerTitle(this.layers[layer]),
+                  this.getLayerTitle(layers[layer]),
                   layerId,
                   true,
                   true,
@@ -206,11 +231,7 @@ class SwipeWidget extends React.Component {
               );
             } else {
               selectLeadingLayer.options.add(
-                new Option(
-                  this.getLayerTitle(this.layers[layer]),
-                  layerId,
-                  false,
-                ),
+                new Option(this.getLayerTitle(layers[layer]), layerId, false),
               );
             }
           }
@@ -222,7 +243,7 @@ class SwipeWidget extends React.Component {
             ) {
               selectTrailingLayer.options.add(
                 new Option(
-                  this.getLayerTitle(this.layers[layer]),
+                  this.getLayerTitle(layers[layer]),
                   layerId,
                   true,
                   true,
@@ -230,11 +251,7 @@ class SwipeWidget extends React.Component {
               );
             } else {
               selectTrailingLayer.options.add(
-                new Option(
-                  this.getLayerTitle(this.layers[layer]),
-                  layerId,
-                  false,
-                ),
+                new Option(this.getLayerTitle(layers[layer]), layerId, false),
               );
             }
           }
@@ -242,6 +259,33 @@ class SwipeWidget extends React.Component {
       });
     }
   }
+  resetSwipeWidgetToDefault() {
+    // Remove all swipe layers
+    if (this.swipe) {
+      this.swipe.leadingLayers.removeAll();
+      this.swipe.trailingLayers.removeAll();
+      this.hasSwipe = false;
+    }
+    // Reset dropdowns to default
+    const selectLeadingLayer = document.getElementById('select-leading-layer');
+    if (selectLeadingLayer) {
+      this.removeOptions(selectLeadingLayer);
+      selectLeadingLayer.options.add(
+        new Option('Select a leading layer', 'default', false, false),
+      );
+      selectLeadingLayer.options[0].disabled = true;
+    }
+    const selectTrailingLayer = document.getElementById(
+      'select-trailing-layer',
+    );
+    if (selectTrailingLayer) {
+      this.removeOptions(selectTrailingLayer);
+      selectTrailingLayer.options.add(
+        new Option('Select a trailing layer', 'default', false, false),
+      );
+      selectTrailingLayer.options[0].disabled = true;
+    }
+  }
   removeOptions(selectElement) {
     if (selectElement.options.length > 0) {
       var i,
@@ -252,6 +296,7 @@ class SwipeWidget extends React.Component {
     }
   }
   renderApplySwipeButton() {
+    const layers = this.props.layers;
     this.props.view.ui.remove(this.swipe);
     this.props.view.ui.add(this.swipe);
     this.hasSwipe = true;
@@ -268,44 +313,44 @@ class SwipeWidget extends React.Component {
     let cl = JSON.parse(sessionStorage.getItem('checkedLayers'));
     if (cl) {
       cl.forEach((layer) => {
-        if (this.layers[layer].id === selectedLeadingLayer) {
-          this.swipe.leadingLayers.add(this.layers[layer]);
+        if (layers[layer].id === selectedLeadingLayer) {
+          this.swipe.leadingLayers.add(layers[layer]);
         }
-        if (this.layers[layer].id === selectedTrailingLayer) {
-          this.swipe.trailingLayers.add(this.layers[layer]);
+        if (layers[layer].id === selectedTrailingLayer) {
+          this.swipe.trailingLayers.add(layers[layer]);
         }
       });
     }
-    if (this.layers['lcc_filter']) {
-      if (this.layers['lcc_filter'].id === selectedLeadingLayer) {
-        this.swipe.leadingLayers.add(this.layers['lcc_filter']);
+    if (layers['lcc_filter']) {
+      if (layers['lcc_filter'].id === selectedLeadingLayer) {
+        this.swipe.leadingLayers.add(layers['lcc_filter']);
       }
-      if (this.layers['lcc_filter'].id === selectedTrailingLayer) {
-        this.swipe.trailingLayers.add(this.layers['lcc_filter']);
+      if (layers['lcc_filter'].id === selectedTrailingLayer) {
+        this.swipe.trailingLayers.add(layers['lcc_filter']);
       }
     }
-    if (this.layers['lc_filter']) {
-      if (this.layers['lc_filter'].id === selectedLeadingLayer) {
-        this.swipe.leadingLayers.add(this.layers['lc_filter']);
+    if (layers['lc_filter']) {
+      if (layers['lc_filter'].id === selectedLeadingLayer) {
+        this.swipe.leadingLayers.add(layers['lc_filter']);
       }
-      if (this.layers['lc_filter'].id === selectedTrailingLayer) {
-        this.swipe.trailingLayers.add(this.layers['lc_filter']);
+      if (layers['lc_filter'].id === selectedTrailingLayer) {
+        this.swipe.trailingLayers.add(layers['lc_filter']);
       }
     }
-    if (this.layers['klc_filter']) {
-      if (this.layers['klc_filter'].id === selectedLeadingLayer) {
-        this.swipe.leadingLayers.add(this.layers['klc_filter']);
+    if (layers['klc_filter']) {
+      if (layers['klc_filter'].id === selectedLeadingLayer) {
+        this.swipe.leadingLayers.add(layers['klc_filter']);
       }
-      if (this.layers['klc_filter'].id === selectedTrailingLayer) {
-        this.swipe.trailingLayers.add(this.layers['klc_filter']);
+      if (layers['klc_filter'].id === selectedTrailingLayer) {
+        this.swipe.trailingLayers.add(layers['klc_filter']);
       }
     }
-    if (this.layers['pa_filter']) {
-      if (this.layers['pa_filter'].id === selectedLeadingLayer) {
-        this.swipe.leadingLayers.add(this.layers['pa_filter']);
+    if (layers['pa_filter']) {
+      if (layers['pa_filter'].id === selectedLeadingLayer) {
+        this.swipe.leadingLayers.add(layers['pa_filter']);
       }
-      if (this.layers['pa_filter'].id === selectedTrailingLayer) {
-        this.swipe.trailingLayers.add(this.layers['pa_filter']);
+      if (layers['pa_filter'].id === selectedTrailingLayer) {
+        this.swipe.trailingLayers.add(layers['pa_filter']);
       }
     }
     this.map.layers.removeAll();
@@ -318,23 +363,24 @@ class SwipeWidget extends React.Component {
   }
 
   loadVisibleLayers() {
+    const layers = this.props.layers;
     let cl = JSON.parse(sessionStorage.getItem('checkedLayers'));
     if (cl) {
       cl.forEach((layer) => {
-        this.map.layers.add(this.layers[layer]);
+        this.map.layers.add(layers[layer]);
       });
     }
-    if (this.layers['lcc_filter']) {
-      this.map.layers.add(this.layers['lcc_filter']);
+    if (layers['lcc_filter']) {
+      this.map.layers.add(layers['lcc_filter']);
     }
-    if (this.layers['lc_filter']) {
-      this.map.layers.add(this.layers['lc_filter']);
+    if (layers['lc_filter']) {
+      this.map.layers.add(layers['lc_filter']);
     }
-    if (this.layers['klc_filter']) {
-      this.map.layers.add(this.layers['klc_filter']);
+    if (layers['klc_filter']) {
+      this.map.layers.add(layers['klc_filter']);
     }
-    if (this.layers['pa_filter']) {
-      this.map.layers.add(this.layers['pa_filter']);
+    if (layers['pa_filter']) {
+      this.map.layers.add(layers['pa_filter']);
     }
   }
   /**