@eeacms/volto-arcgis-block 0.1.361 → 0.1.363

package/CHANGELOG.md

@@ -4,6 +4,15 @@ 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.363](https://github.com/eea/volto-arcgis-block/compare/0.1.362...0.1.363) - 26 May 2025
+
+### [0.1.362](https://github.com/eea/volto-arcgis-block/compare/0.1.361...0.1.362) - 21 May 2025
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #956 from eea/develop [Unai Bolivar - [`b230060`](https://github.com/eea/volto-arcgis-block/commit/b230060ba6a428ced1b613f26c5dbc1f04cf5bee)]
+- CLMS-286372 (bug): Fixed syntax errors and removed old commented code in MenuWidget and Area widget upload service. [Unai Bolivar - [`bea1116`](https://github.com/eea/volto-arcgis-block/commit/bea1116c14d09dd10f6da0a34e36f6796780645f)]
+- CLMS-286372 (bug): Fixed issues with Area widget upload service. [Unai Bolivar - [`a66e6c6`](https://github.com/eea/volto-arcgis-block/commit/a66e6c69ef4d79dc265f4a17462a8f29df7aeee1)]
 ### [0.1.361](https://github.com/eea/volto-arcgis-block/compare/0.1.360...0.1.361) - 20 May 2025
 
 ### [0.1.360](https://github.com/eea/volto-arcgis-block/compare/0.1.359...0.1.360) - 19 May 2025

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -248,31 +248,71 @@ class AreaWidget extends React.Component {
     this.loadNutsService(e.target.value, [6, 7, 8]);
     this.nutsRadioButton(e.target.value);
   }
-  // countriesHandler(e) {
-  //   this.loadCountriesService(e.target.value);
-  // }
+
+  getNutsUrlChunks(nutsUrl) {
+    const [base, query] = nutsUrl.split('query?');
+    return {
+      baseUrl: base || '',
+      queryString: query || '',
+    };
+  }
+
+  getNutsParams(queryString) {
+    if (!queryString) return {};
+    return queryString.split('&').reduce((acc, pair) => {
+      const [key, value] = pair.split('=');
+      if (key && value) {
+        acc[key] = decodeURIComponent(value);
+      }
+      return acc;
+    }, {});
+  }
+
+  createDefinitionExpressionObject(params) {
+    if (!params || Object.keys(params).length === 0) return null;
+    return Object.entries(params)
+      .map(([k, v]) => {
+        if (typeof v === 'string' && v.includes(',')) {
+          const values = v.split(',').map((val) => `'${val.trim()}'`);
+          if (values.length > 2) {
+            return `${k} in (${values.join(', ')})`;
+          } else {
+            return values.map((val) => `${k}=${val}`).join(' OR ');
+          }
+        } else {
+          return `${k}='${v}'`;
+        }
+      })
+      .join(' AND ');
+  }
+
+  createFeatureLayer(id, baseUrl, level, definitionExpression) {
+    return new FeatureLayer({
+      id: id,
+      url: baseUrl,
+      layerId: level,
+      outFields: ['*'],
+      popupEnabled: false,
+      definitionExpression: definitionExpression,
+    });
+  }
 
   loadNutsService(id, levels) {
     this.clearWidget();
     document.querySelector('.esri-attribution__powered-by').style.display =
       'flex';
+    const { baseUrl, queryString } = this.getNutsUrlChunks(this.nutsUrl);
+    const params = this.getNutsParams(queryString);
+    const definitionExpression = this.createDefinitionExpressionObject(params);
     levels.forEach((level) => {
-      var layer = new FeatureLayer({
-        id: id,
-        //url: this.props.urls.nutsHandler,
-        url: this.nutsUrl,
-        layerId: level,
-        outFields: ['*'],
-        popupEnabled: false,
-        //definitionExpression: 'LEVL_CODE=' + level,
-      });
-
-      //this.removeFileUploadedLayer();
-
+      const layer = this.createFeatureLayer(
+        id,
+        baseUrl,
+        level,
+        definitionExpression,
+      );
       this.nutsGroupLayer.add(layer);
-
       let index = this.getHighestIndex();
-
       this.props.map.reorder(this.nutsGroupLayer, index + 1);
     });
   }
@@ -282,16 +322,12 @@ class AreaWidget extends React.Component {
       'flex';
     var layer = new FeatureLayer({
       id: id,
-      //url: this.props.urls.outsideEu,
-      url:
-        'https://land.discomap.eea.europa.eu/arcgis/rest/services/CLMS_Portal/World_countries_except_EU37/MapServer',
+      url: this.props.urls.outsideEu,
       layerId: 0,
       outFields: ['*'],
       popupEnabled: false,
     });
 
-    //this.removeFileUploadedLayer();
-
     this.nutsGroupLayer.add(layer);
 
     let index = this.getHighestIndex();
@@ -318,10 +354,6 @@ class AreaWidget extends React.Component {
 
     const fileSize = e.target.files[0].size;
 
-    //Get the file from the form
-
-    const file = document.getElementById('uploadForm');
-
     //Get the file blob
 
     const fileBlob = e.target.files[0];
@@ -373,34 +405,26 @@ class AreaWidget extends React.Component {
       return;
     }
 
-    switch (fileExtension) {
-      case 'zip':
-        this.generateFeatureCollection(fileName, file, 'shapefile');
-        break;
-      case 'geojson':
-        this.generateFeatureCollection(fileName, file, 'geojson');
-        break;
-      case 'csv':
-        //this.generateFeatureCollection(
-        //  fileName,
-        //  file,
-        //  'csv',
-        //);
-        reader.readAsText(fileBlob);
-        reader.onload = () => {
-          this.handleCsv(reader.result);
-        };
-        break;
-      default:
-        break;
+    if (fileExtension === 'zip' || fileExtension === 'geojson') {
+      const formData = new FormData();
+      formData.append('file', fileBlob, fileName);
+      this.generateFeatureCollection(
+        fileName,
+        formData,
+        fileExtension === 'zip' ? 'shapefile' : 'geojson',
+      );
+    } else if (fileExtension === 'csv') {
+      reader.readAsText(fileBlob);
+      reader.onload = () => {
+        this.handleCsv(reader.result);
+      };
     }
-    // setTimeout(() => {
+
     e.target.value = null;
-    // }, 2000);
     this.props.uploadFileHandler(this.state.infoPopupType);
   };
 
-  generateFeatureCollection(fileName, file, inputFormat) {
+  generateFeatureCollection(fileName, formData, inputFormat) {
     let name = fileName.split('.');
 
     // Chrome adds c:\fakepath to the value - we need to remove it
@@ -414,12 +438,12 @@ class AreaWidget extends React.Component {
       maxRecordCount: 1000,
       enforceInputFileSizeLimit: true,
       enforceOutputJsonSizeLimit: true,
+      // generalize features to 10 meters for better performance
+      generalize: true,
+      maxAllowableOffset: 10,
+      reducePrecision: true,
+      numberOfDigitsAfterDecimal: 0,
     };
-    // generalize features to 10 meters for better performance
-    params.generalize = true;
-    params.maxAllowableOffset = 10;
-    params.reducePrecision = true;
-    params.numberOfDigitsAfterDecimal = 0;
 
     const myContent = {
       filetype: inputFormat,
@@ -429,7 +453,7 @@ class AreaWidget extends React.Component {
     // use the REST generate operation to generate a feature collection from the zipped shapefile
     request(this.uploadPortal + '/sharing/rest/content/features/generate', {
       query: myContent,
-      body: file,
+      body: formData,
       responseType: 'json',
     })
       .then((response) => {
@@ -459,8 +483,6 @@ class AreaWidget extends React.Component {
 
           //Create a feature layer from the feature collection
           this.addFeatureCollectionToMap(featureCollection);
-        } else {
-          //console.error('Unexpected response structure:', response);
         }
       })
       .catch((error) => {
@@ -505,10 +527,9 @@ class AreaWidget extends React.Component {
     const layers = featureCollection.layers.map((layer) => {
       const graphics = layer.featureSet.features.map((feature) => {
         const polygonSymbol = {
-          type: 'simple-fill', // autocasts as new SimpleFillSymbol()
+          type: 'simple-fill',
           color: [234, 168, 72, 0.8],
           outline: {
-            // autocasts as new SimpleLineSymbol()
             color: '#000000',
             width: 0.1,
           },
@@ -557,9 +578,7 @@ class AreaWidget extends React.Component {
       //Add uploaded layer to the map and zoom to the extent
 
       this.props.view.graphics.addMany(sourceGraphics);
-      this.props.view.goTo(sourceGraphics).catch((error) => {
-        //console.error('From addFeatureCollectionToMap function', error);
-      });
+      this.props.view.goTo(sourceGraphics).catch((error) => {});
 
       //Create a spatial reference object for the extent
 
@@ -633,13 +652,12 @@ class AreaWidget extends React.Component {
     // Set a simple renderer on the layer
 
     csvLayer.renderer = {
-      type: 'simple', // autocasts as new SimpleRenderer()
+      type: 'simple',
       symbol: {
-        type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
+        type: 'simple-marker',
         size: 6,
         color: 'black',
         outline: {
-          // autocasts as new SimpleLineSymbol()
           width: 0.5,
           color: 'white',
         },
@@ -726,10 +744,9 @@ class AreaWidget extends React.Component {
         //Draw a graphic using the polyId polygon data as the geometry
 
         const polygonSymbol = {
-          type: 'simple-fill', // autocasts as new SimpleFillSymbol()
+          type: 'simple-fill',
           color: [234, 168, 72, 0.8],
           outline: {
-            // autocasts as new SimpleLineSymbol()
             color: '#000000',
             width: 0.1,
           },
@@ -751,13 +768,10 @@ class AreaWidget extends React.Component {
         //Add the polygon graphic to the map
 
         this.props.view.graphics.add(polygonGraphic);
-        //this.props.map.add(this.fileUploadLayer);
 
         //Refresh the map view
 
-        this.props.view.goTo(polygonGraphic).catch((error) => {
-          //console.error('From handleCsv function', error);
-        });
+        this.props.view.goTo(polygonGraphic).catch((error) => {});
 
         //Send the area to the parent component
 
@@ -792,7 +806,6 @@ class AreaWidget extends React.Component {
         infoPopupType: 'fileFormat',
       });
       this.props.uploadFileHandler(false);
-      //console.error('Error: ', error);
     }
   }
 
@@ -895,9 +908,9 @@ class AreaWidget extends React.Component {
             );
             popupToUpdate.style.display = 'block';
             popupToUpdate.innerHTML =
-              '<div class="drawRectanglePopup-content">' +
-              '<span class="drawRectanglePopup-icon"><span class="esri-icon-cursor-marquee"></span></span>' +
-              '<div class="drawRectanglePopup-text">' +
+              '<div className="drawRectanglePopup-content">' +
+              '<span className="drawRectanglePopup-icon"><span className="esri-icon-cursor-marquee"></span></span>' +
+              '<div className="drawRectanglePopup-text">' +
               '<a style="color: black; cursor: pointer" href="https://land.copernicus.eu/en/how-to-guides/how-to-download-spatial-data/how-to-download-m2m" target="_blank" rel="noreferrer">To download the full dataset consult the "How to download M2M" How to guide.</a>' +
               '</div>' +
               '</div>';
@@ -941,9 +954,9 @@ class AreaWidget extends React.Component {
             );
             popupToUpdate.style.display = 'block';
             popupToUpdate.innerHTML =
-              '<div class="drawRectanglePopup-content">' +
-              '<span class="drawRectanglePopup-icon"><span class="esri-icon-cursor-marquee"></span></span>' +
-              '<div class="drawRectanglePopup-text">' +
+              '<div className="drawRectanglePopup-content">' +
+              '<span className="drawRectanglePopup-icon"><span className="esri-icon-cursor-marquee"></span></span>' +
+              '<div className="drawRectanglePopup-text">' +
               '<a style="color: black; cursor: pointer" href="https://land.copernicus.eu/en/how-to-guides/how-to-download-spatial-data/how-to-download-m2m" target="_blank" rel="noreferrer">To download the full dataset consult the "How to download M2M" How to guide.</a>' +
               '</div>' +
               '</div>';
@@ -987,9 +1000,9 @@ class AreaWidget extends React.Component {
     if (this.props.download) {
       let popup = document.querySelector('.drawRectanglePopup-block');
       popup.innerHTML =
-        '<div class="drawRectanglePopup-content">' +
-        '<span class="drawRectanglePopup-icon"><span class="esri-icon-cursor-marquee"></span></span>' +
-        '<div class="drawRectanglePopup-text">Select or draw an area of interest in the map to continue</div>' +
+        '<div className="drawRectanglePopup-content">' +
+        '<span className="drawRectanglePopup-icon"><span className="esri-icon-cursor-marquee"></span></span>' +
+        '<div className="drawRectanglePopup-text">Select or draw an area of interest in the map to continue</div>' +
         '</div>';
       popup.style.display = 'block';
     }
@@ -1143,9 +1156,9 @@ class AreaWidget extends React.Component {
       var popup = document.createElement('div');
       popup.className = 'drawRectanglePopup-block';
       popup.innerHTML =
-        '<div class="drawRectanglePopup-content">' +
-        '<span class="drawRectanglePopup-icon"><span class="esri-icon-cursor-marquee"></span></span>' +
-        '<div class="drawRectanglePopup-text">Select or draw an area of interest in the map to continue</div>' +
+        '<div className="drawRectanglePopup-content">' +
+        '<span className="drawRectanglePopup-icon"><span className="esri-icon-cursor-marquee"></span></span>' +
+        '<div className="drawRectanglePopup-text">Select or draw an area of interest in the map to continue</div>' +
         '</div>';
       this.props.download && this.props.view.ui.add(popup, 'top-right');
     });
@@ -1373,7 +1386,7 @@ class AreaWidget extends React.Component {
                   />
                   <button
                     aria-label="Search"
-                    class="esri-button area-searchbutton"
+                    className="esri-button area-searchbutton"
                     onClick={this.areaSearch.bind(this)}
                     onKeyDown={(e) => {
                       if (
@@ -1388,7 +1401,7 @@ class AreaWidget extends React.Component {
                       }
                     }}
                   >
-                    <span class="ccl-icon-zoom"></span>
+                    <span className="ccl-icon-zoom"></span>
                   </button>
                   <div className="no-result-message">No result found</div>
                 </div>
@@ -1435,7 +1448,7 @@ class AreaWidget extends React.Component {
                 </div>
                 <div className="ccl-form">
                   <form
-                    enctype="multipart/form-data"
+                    encType="multipart/form-data"
                     method="post"
                     id="uploadForm"
                   >

package/src/components/MapViewer/MenuWidget.jsx

@@ -3060,15 +3060,15 @@ class MenuWidget extends React.Component {
 
     // Create node
     let template = `
-    <div class="esri-legend__layer">
-      <div class="esri-legend__layer-table esri-legend__layer-table--size-ramp" >
-        <div class="esri-legend__layer-caption">
+    <div className="esri-legend__layer">
+      <div className="esri-legend__layer-table esri-legend__layer-table--size-ramp" >
+        <div className="esri-legend__layer-caption">
           ${title}
         </div>
-        <div class="esri-legend__layer-body">
-          <div class="esri-legend__layer-row">
-            <div class="esri-legend__layer-cell esri-legend__layer-cell--symbols" >
-              <div class="esri-legend__symbol">
+        <div className="esri-legend__layer-body">
+          <div className="esri-legend__layer-row">
+            <div className="esri-legend__layer-cell esri-legend__layer-cell--symbols" >
+              <div className="esri-legend__symbol">
                 <img crossorigin="anonymous"
                   alt=""
                   src="${imageURL}"
@@ -3077,7 +3077,7 @@ class MenuWidget extends React.Component {
               </div>
             </div>
             <div
-              class="esri-legend__layer-cell esri-legend__layer-cell--info"
+              className="esri-legend__layer-cell esri-legend__layer-cell--info"
             ></div>
           </div>
         </div>
@@ -3813,6 +3813,7 @@ class MenuWidget extends React.Component {
             <Popup
               trigger={<FontAwesomeIcon icon={this.visibleLayers[elem.id]} />}
               content={
+                this.visibleLayers[elem.id] &&
                 this.visibleLayers[elem.id][1] === 'eye'
                   ? 'Hide layer'
                   : 'Show layer'
@@ -3998,7 +3999,10 @@ class MenuWidget extends React.Component {
         }
         if (elem.id === layerId) {
           this.timeLayers[elem.id] = ['fas', 'stop'];
-          if (this.visibleLayers[elem.id][1] === 'eye-slash') {
+          if (
+            this.visibleLayers[elem.id] &&
+            this.visibleLayers[elem.id][1] === 'eye-slash'
+          ) {
             this.layers[elem.id].visible = true;
             this.visibleLayers[elem.id] = ['fas', 'eye'];
           }
@@ -5518,11 +5522,11 @@ class MenuWidget extends React.Component {
             >
               <div className="search-panel">
                 <div className="menu-searchpanel">
-                  <div class="search-input menu-search-input">
+                  <div className="search-input menu-search-input">
                     <input
                       type="text"
                       id="menu-searchtext"
-                      maxlength="200"
+                      maxLength="200"
                       placeholder="Search products and datasets"
                       onChange={() => this.openClearButton()}
                       onKeyDown={(e) => {
@@ -5531,9 +5535,9 @@ class MenuWidget extends React.Component {
                         }
                       }}
                     />
-                    <div class="search-input-actions">
+                    <div className="search-input-actions">
                       <button
-                        class="ui basic icon button search-input-clear-icon-button clearsearch"
+                        className="ui basic icon button search-input-clear-icon-button clearsearch"
                         onClick={() => this.clearMenuText()}
                         onKeyDown={(e) => {
                           if (
@@ -5551,10 +5555,10 @@ class MenuWidget extends React.Component {
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 26 26"
-                          class="icon"
+                          className="icon"
                         >
                           <path
-                            fill-rule="evenodd"
+                            fillRule="evenodd"
                             d="M27.899 9.515L26.485 8.101 18 16.586 9.514 8.101 8.1 9.515 16.586 18 8.1 26.486 9.514 27.9 18 19.414 26.485 27.9 27.899 26.486 19.414 18z"
                           ></path>
                         </svg>
@@ -5562,7 +5566,7 @@ class MenuWidget extends React.Component {
                     </div>
                     <button
                       aria-label="Search"
-                      class="button menu-search-button"
+                      className="button menu-search-button"
                       onClick={() => this.menuSearch()}
                       onKeyDown={(e) => {
                         if (
@@ -5577,22 +5581,22 @@ class MenuWidget extends React.Component {
                         }
                       }}
                     >
-                      <span class="ccl-icon-zoom search-menu-icon"></span>
+                      <span className="ccl-icon-zoom search-menu-icon"></span>
                     </button>
                   </div>
-                  <div class="filters-element filter-logo filters-header">
-                    <div class="filters-title">
+                  <div className="filters-element filter-logo filters-header">
+                    <div className="filters-title">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 36 36"
-                        class="icon ui"
+                        className="icon ui"
                       >
                         <path
-                          fill-rule="evenodd"
+                          fillRule="evenodd"
                           d="M5.0916,5.0002 L14.9996,19.3132 L14.9996,34.0002 L20.9996,29.5002 L20.9996,19.3132 L30.9086,5.0002 L5.0916,5.0002 Z M17.0006,18.6872 L8.9086,7.0002 L27.0916,7.0002 L19.0006,18.6872 L19.0006,28.5002 L17.0006,30.0002 L17.0006,18.6872 Z"
                         ></path>
                       </svg>
-                      <span class="filters-title-bold">Filters</span>
+                      <span className="filters-title-bold">Filters</span>
                       <div
                         className="clear-filters"
                         tabIndex="0"
@@ -5645,7 +5649,7 @@ class MenuWidget extends React.Component {
                       Component
                       <select
                         id="select-component"
-                        class="esri-select filter-select"
+                        className="esri-select filter-select"
                         onBlur={() => {}}
                         onChange={() => {
                           this.loadProductFilters();
@@ -5657,7 +5661,7 @@ class MenuWidget extends React.Component {
                       Product groups
                       <select
                         id="select-product"
-                        class="esri-select filter-select"
+                        className="esri-select filter-select"
                         onBlur={() => {}}
                         onChange={() => {
                           this.loadFamilyFilters();
@@ -5669,7 +5673,7 @@ class MenuWidget extends React.Component {
                       Product sub-group
                       <select
                         id="select-family"
-                        class="esri-select filter-select"
+                        className="esri-select filter-select"
                         onBlur={() => {}}
                         onChange={() => {
                           this.menuSearch();