@eeacms/volto-arcgis-block 0.1.251 → 0.1.252

package/.env

@@ -0,0 +1,3 @@
+# Jest configuration variables
+# - possible values: ON, OFF
+JEST_USE_SETUP=OFF

package/.eslintrc.js

@@ -0,0 +1,55 @@
+const fs = require('fs');
+const path = require('path');
+
+const projectRootPath = fs.existsSync('./project')
+  ? fs.realpathSync('./project')
+  : fs.realpathSync('./../../../');
+const packageJson = require(path.join(projectRootPath, 'package.json'));
+const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
+
+const pathsConfig = jsConfig.paths;
+
+let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
+
+Object.keys(pathsConfig).forEach(pkg => {
+  if (pkg === '@plone/volto') {
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
+  }
+});
+const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
+const reg = new AddonConfigurationRegistry(projectRootPath);
+
+// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
+const addonAliases = Object.keys(reg.packages).map(o => [
+  o,
+  reg.packages[o].modulePath,
+]);
+
+
+module.exports = {
+  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', '@plone/volto/src'],
+          ...addonAliases,
+          ['@package', `${__dirname}/src`],
+          ['~', `${__dirname}/src`],
+        ],
+        extensions: ['.js', '.jsx', '.json'],
+      },
+      'babel-plugin-root-import': {
+        rootPathSuffix: 'src',
+      },
+    },
+  },
+  rules: {
+    'react/jsx-no-target-blank': [
+      'error',
+      {
+        allowReferrer: true,
+      },
+    ],
+  }
+};

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.252](https://github.com/eea/volto-arcgis-block/compare/0.1.251...0.1.252) - 25 January 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2569 (bug): locales volto dot pot modified [Unai Bolivar - [`85f09ea`](https://github.com/eea/volto-arcgis-block/commit/85f09eae3ce52aaf301f558abb92998d04188f6a)]
+- CLMS-2569 (bug): update needed pushed [Unai Bolivar - [`413899f`](https://github.com/eea/volto-arcgis-block/commit/413899fd23fe822fa4d31d1fef2b125e38ee3755)]
+- test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`b16da41`](https://github.com/eea/volto-arcgis-block/commit/b16da416aa6724eff1369d4a4293fd9800cdc718)]
+- clms-2569 (bug): Layer Info widget is not working for the Hot Spots WMS service (RLC and LCC layers) [Unai Bolivar - [`5e209f8`](https://github.com/eea/volto-arcgis-block/commit/5e209f8ba09af43f08b32970e3c5ba5214c94c53)]
 ### [0.1.251](https://github.com/eea/volto-arcgis-block/compare/0.1.250...0.1.251) - 24 January 2024
 
 ### [0.1.250](https://github.com/eea/volto-arcgis-block/compare/0.1.249...0.1.250) - 18 January 2024

package/jest-addon.config.js

@@ -1,3 +1,5 @@
+require('dotenv').config({ path: __dirname + '/.env' })
+
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
   collectCoverageFrom: [
@@ -38,7 +40,9 @@ module.exports = {
       statements: 5,
     },
   },
-  setupFilesAfterEnv: [
-    '<rootDir>/node_modules/@eeacms/volto-arcgis-block/jest.setup.js',
-  ],
-};
+  ...(process.env.JEST_USE_SETUP === 'ON' && {
+    setupFilesAfterEnv: [
+      '<rootDir>/node_modules/@eeacms/volto-arcgis-block/jest.setup.js',
+    ],
+  }),
+}

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2021-01-29T12:34:47.097Z\n"
+"POT-Creation-Date: 2024-01-25T07:53:02.154Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -12,3 +12,5 @@ msgstr ""
 "Language-Name: English\n"
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.251",
+  "version": "0.1.252",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",
@@ -72,6 +72,7 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "husky": "^8.0.3",
     "lint-staged": "13.1.4",
-    "md5": "^2.3.0"
+    "md5": "^2.3.0",
+    "dotenv": "^16.3.2"
   }
 }

package/src/components/MapViewer/AreaWidget.jsx

@@ -659,7 +659,7 @@ class AreaWidget extends React.Component {
                           id="drawRectanglePopupWarning"
                           href="https://land.copernicus.eu/en/how-to-guides/how-to-download-spatial-data/how-to-download-m2m"
                           target="_blank"
-                          rel="noreferrer"
+                          rel="noopener noreferrer"
                         >
                           To download the full dataset consult the "How to
                           download M2M" How to guide.

package/src/components/MapViewer/HotspotWidget.jsx

@@ -191,6 +191,38 @@ class HotspotWidget extends React.Component {
     });
   }
 
+  addFilteredLayersData(
+    filteredLayersData,
+    bboxData,
+    typeLegend,
+    selectBoxTime,
+  ) {
+    //sweep the old filtered data
+    if (filteredLayersData[typeLegend] !== undefined) {
+      delete filteredLayersData[typeLegend];
+    }
+    //Find the bbox data for the chosen region
+    let klc_array = bboxData.find((e) => e.klc_code === this.dataKlc_code);
+
+    //Parse the bbox data into finer detail
+    let klc_bbox_coordinates = klc_array.bbox.split(',');
+    let xmin_ymin = klc_bbox_coordinates[0].split(' ');
+    let xmax_ymax = klc_bbox_coordinates[1].split(' ');
+
+    //Add the filtered data to the filteredLayersData object
+    filteredLayersData[typeLegend] = {
+      klc_code: this.dataKlc_code,
+      year: selectBoxTime,
+      bboxData: {
+        klc_array: klc_array,
+        klc_bbox_coordinates: {
+          xmin_ymin: xmin_ymin,
+          xmax_ymax: xmax_ymax,
+        },
+      },
+    };
+  }
+
   async handleApplyFilter(typeFilter) {
     let typeLegend;
     let activeLayers =
@@ -201,6 +233,7 @@ class HotspotWidget extends React.Component {
       this.props.hotspotData && this.props.hotspotData['filteredLayers']
         ? Object.keys(this.props.hotspotData['filteredLayers'])
         : [];
+    let filteredLayersData = this.props.hotspotData['filteredLayerData'] || [];
     let layersToAdd = {};
     let bookmarkHotspotFilter = JSON.parse(
       localStorage.getItem('bookmarkHotspotFilter'),
@@ -229,6 +262,13 @@ class HotspotWidget extends React.Component {
           }
         }
 
+        this.addFilteredLayersData(
+          filteredLayersData,
+          this.dataBBox,
+          typeLegend,
+          selectLccBoxTime,
+        );
+
         filterLayer = this.esriLayer_lcc;
 
         filterLayer.sublayers.items[0].name = this.addLegendName(typeLegend);
@@ -261,6 +301,14 @@ class HotspotWidget extends React.Component {
 
         let selectLcBoxTime = document.getElementById('select-klc-lcTime')
           .value;
+
+        this.addFilteredLayersData(
+          filteredLayersData,
+          this.dataBBox,
+          typeLegend,
+          selectLcBoxTime,
+        );
+
         //this.lcYear = selectLcBoxTime;
         this.setState({ lcYear: selectLcBoxTime });
         if (document.getElementById('select-klc-lcTime').value.match(/\d+/g)) {
@@ -347,11 +395,15 @@ class HotspotWidget extends React.Component {
     sessionStorage.setItem('hotspotFilterApplied', 'true');
     this.disableButton();
     this.props.mapLayersHandler(this.layers);
-    this.filteredLayersToHotspotData(Object.keys(layersToAdd));
+    this.filteredLayersToHotspotData(
+      Object.keys(layersToAdd),
+      filteredLayersData,
+    );
   }
 
-  filteredLayersToHotspotData(layerIds) {
+  filteredLayersToHotspotData(layerIds, layersData) {
     let updatedFilteredLayers = this.props.hotspotData['filteredLayers'] || {};
+    let filteredLayersData = this.props.hotspotData['filteredLayersData'] || {};
     let newHotspotData = this.props.hotspotData;
     layerIds.forEach((layerId) => {
       let layer = Object.entries(this.layers).find(
@@ -363,10 +415,20 @@ class HotspotWidget extends React.Component {
           delete updatedFilteredLayers[key];
         }
       });
-
       updatedFilteredLayers[layerId] = layer;
     });
+
+    Object.keys(layersData).forEach((layersDataKey) => {
+      Object.keys(filteredLayersData).forEach((filteredLayersDataKey) => {
+        if (layersDataKey === filteredLayersDataKey) {
+          delete filteredLayersData[filteredLayersDataKey];
+        }
+      });
+      filteredLayersData[layersDataKey] = layersData[layersDataKey];
+    });
+
     newHotspotData['filteredLayers'] = updatedFilteredLayers;
+    newHotspotData['filteredLayersData'] = filteredLayersData;
     return this.props.hotspotDataHandler(newHotspotData);
   }
 

package/src/components/MapViewer/InfoWidget.jsx

@@ -101,7 +101,23 @@ class InfoWidget extends React.Component {
         let promises = [];
         let layerTypes = [];
         layers.forEach((layer, index) => {
-          let title = this.getLayerTitle(layer);
+          let title;
+          if (this?.props?.hotspotData) {
+            let layerId = this.getLayerName(layer);
+            outerLoop: for (let key in this.props.hotspotData) {
+              let item = this.props.hotspotData[key];
+              for (let prop in item) {
+                if (prop === layerId) {
+                  if (this.props.hotspotData[key][prop].Title !== undefined) {
+                    title = this.props.hotspotData[key][prop].Title;
+                    break outerLoop;
+                  }
+                }
+              }
+            }
+          } else {
+            title = this.getLayerTitle(layer);
+          }
           if (layer.isTimeSeries) {
             if (layer.url.toLowerCase().includes('wms')) {
               layerTypes.push({
@@ -246,12 +262,17 @@ class InfoWidget extends React.Component {
                   } else {
                     switch (layer.type) {
                       case 'wms':
-                        if (data.type === 'FeatureCollection') {
+                        if (
+                          data &&
+                          data.type &&
+                          data.type === 'FeatureCollection'
+                        ) {
                           if (data.features.length) {
                             properties = data.features[0].properties;
                             properties = Object.entries(properties);
                           }
                         } else if (
+                          data &&
                           data.doctype &&
                           data.doctype.name === 'html'
                         ) {
@@ -268,6 +289,7 @@ class InfoWidget extends React.Component {
                             properties = fields;
                           }
                         } else if (
+                          data &&
                           data.getElementsByTagName('FIELDS').length &&
                           typeof data !== 'undefined'
                         ) {
@@ -367,61 +389,115 @@ class InfoWidget extends React.Component {
   identifyWMS(layer, event) {
     let layerId = this.getLayerName(layer);
     let url = layer.featureInfoUrl ? layer.featureInfoUrl : layer.url;
-    return this.wmsCapabilities(url).then((xml) => {
-      let version = this.parseCapabilities(xml, 'wms_capabilities')[0]
-        .attributes['version'];
-      let format = this.parseFormat(xml, layerId);
-      let times = '';
-      let nTimes = 1;
-      if (layer.isTimeSeries) {
-        times = this.parseTime(xml, layerId);
-        nTimes = times.length;
-      }
-      return esriRequest(url, {
-        responseType: 'html',
-        sync: 'true',
-        query: {
-          request: 'GetFeatureInfo',
-          service: 'WMS',
-          version: version,
-          SRS: 'EPSG:' + this.props.view.spatialReference.latestWkid,
-          CRS: 'EPSG:' + this.props.view.spatialReference.latestWkid,
-          BBOX:
-            '' +
-            this.props.view.extent.xmin +
-            ', ' +
-            this.props.view.extent.ymin +
-            ', ' +
-            this.props.view.extent.xmax +
-            ', ' +
-            this.props.view.extent.ymax,
-          HEIGHT: this.props.view.height,
-          WIDTH: this.props.view.width,
-          X: event.screenPoint.x,
-          Y: event.screenPoint.y,
-          QUERY_LAYERS: layerId,
-          INFO_FORMAT: format,
-          TIME: times ? times[0] + '/' + times[nTimes - 1] : '',
-          FEATURE_COUNT: '' + nTimes,
-        },
-      })
-        .then((response) => {
-          let format = response.requestOptions.query.INFO_FORMAT;
-          let data;
-          if (format.includes('text')) {
-            data = new window.DOMParser().parseFromString(
-              response.data,
-              'text/html',
-            );
-          } else if (format.includes('json')) {
-            data = JSON.parse(response.data);
+    if (this?.props?.hotspotData) {
+      for (let key in this.props.hotspotData) {
+        let item = this.props.hotspotData[key];
+        for (let prop in item) {
+          if (prop === layerId) {
+            return esriRequest(url, {
+              responseType: 'html',
+              sync: 'true',
+              query: {
+                request: 'GetFeatureInfo',
+                service: 'WMS',
+                version: '1.3.0',
+                SRS: 'EPSG:' + this.props.view.spatialReference.latestWkid,
+                CRS: 'EPSG:' + this.props.view.spatialReference.latestWkid,
+                BBOX:
+                  '' +
+                  this.props.view.extent.xmin +
+                  ', ' +
+                  this.props.view.extent.ymin +
+                  ', ' +
+                  this.props.view.extent.xmax +
+                  ', ' +
+                  this.props.view.extent.ymax,
+                HEIGHT: this.props.view.height,
+                WIDTH: this.props.view.width,
+                X: event.screenPoint.x,
+                Y: event.screenPoint.y,
+                QUERY_LAYERS: layerId,
+                INFO_FORMAT: 'application/json',
+                TIME: '/',
+                FEATURE_COUNT: '' + 1,
+              },
+            })
+              .then((response) => {
+                let format = response.requestOptions.query.INFO_FORMAT;
+                let data;
+                if (format.includes('text')) {
+                  data = new window.DOMParser().parseFromString(
+                    response.data,
+                    'text/html',
+                  );
+                } else if (format.includes('json')) {
+                  data = JSON.parse(response.data);
+                }
+                return data;
+              })
+              .then((data) => {
+                return data;
+              });
           }
-          return data;
+        }
+      }
+    } else {
+      return this.wmsCapabilities(url).then((xml) => {
+        let version = this.parseCapabilities(xml, 'wms_capabilities')[0]
+          .attributes['version'];
+        let format = this.parseFormat(xml);
+        let times = '';
+        let nTimes = 1;
+        if (layer.isTimeSeries) {
+          times = this.parseTime(xml, layerId);
+          nTimes = times.length;
+        }
+        return esriRequest(url, {
+          responseType: 'html',
+          sync: 'true',
+          query: {
+            request: 'GetFeatureInfo',
+            service: 'WMS',
+            version: version,
+            SRS: 'EPSG:' + this.props.view.spatialReference.latestWkid,
+            CRS: 'EPSG:' + this.props.view.spatialReference.latestWkid,
+            BBOX:
+              '' +
+              this.props.view.extent.xmin +
+              ', ' +
+              this.props.view.extent.ymin +
+              ', ' +
+              this.props.view.extent.xmax +
+              ', ' +
+              this.props.view.extent.ymax,
+            HEIGHT: this.props.view.height,
+            WIDTH: this.props.view.width,
+            X: event.screenPoint.x,
+            Y: event.screenPoint.y,
+            QUERY_LAYERS: layerId,
+            INFO_FORMAT: format,
+            TIME: times ? times[0] + '/' + times[nTimes - 1] : '',
+            FEATURE_COUNT: '' + nTimes,
+          },
         })
-        .then((data) => {
-          return data;
-        });
-    });
+          .then((response) => {
+            let format = response.requestOptions.query.INFO_FORMAT;
+            let data;
+            if (format.includes('text')) {
+              data = new window.DOMParser().parseFromString(
+                response.data,
+                'text/html',
+              );
+            } else if (format.includes('json')) {
+              data = JSON.parse(response.data);
+            }
+            return data;
+          })
+          .then((data) => {
+            return data;
+          });
+      });
+    }
   }
 
   wmsCapabilities(url) {
@@ -440,7 +516,8 @@ class InfoWidget extends React.Component {
   }
 
   parseCapabilities(xml, tag) {
-    return xml.getElementsByTagName(tag);
+    let result = xml.getElementsByTagName(tag);
+    return result;
   }
 
   parseFormat(xml) {

package/src/components/MapViewer/MapViewer.jsx

@@ -356,7 +356,14 @@ class MapViewer extends React.Component {
 
   renderInfo() {
     if (this.view)
-      return <InfoWidget view={this.view} map={this.map} mapViewer={this} />;
+      return (
+        <InfoWidget
+          view={this.view}
+          map={this.map}
+          mapViewer={this}
+          hotspotData={this.state.hotspotData}
+        />
+      );
   }
 
   renderPan() {

package/src/components/MapViewer/MenuWidget.jsx

@@ -1350,7 +1350,7 @@ class MenuWidget extends React.Component {
                     <a
                       href={dataset.DatasetURL}
                       target="_blank"
-                      rel="noreferrer"
+                      rel="noopener noreferrer"
                       onClick={(e) => e.stopPropagation()}
                       onKeyDown={(e) => e.stopPropagation()}
                     >

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -86,7 +86,7 @@ class InfoWidget extends React.Component {
                     <a
                       href={UseCase.Links_to_web_sites.split(' ')[0]}
                       target="_blank"
-                      rel="noreferrer"
+                      rel="noopener noreferrer"
                     >
                       {' '}
                       here