@eeacms/volto-arcgis-block 0.1.194 → 0.1.196

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.196](https://github.com/eea/volto-arcgis-block/compare/0.1.195...0.1.196) - 14 September 2023
+
+#### :hammer_and_wrench: Others
+
+- Lint [masanchez85 - [`c6d79ad`](https://github.com/eea/volto-arcgis-block/commit/c6d79ad1b6d19cb5a43112f9ced774519b441c8c)]
+- CLMS-2279, 1952 [masanchez85 - [`e5b42da`](https://github.com/eea/volto-arcgis-block/commit/e5b42daca404a70aa327018db260b59fcd37fb21)]
+### [0.1.195](https://github.com/eea/volto-arcgis-block/compare/0.1.194...0.1.195) - 14 September 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-LEGEND-BUGS: opened modular request for reference land cover petition and ran linting scripts [ujbolivar - [`d58526b`](https://github.com/eea/volto-arcgis-block/commit/d58526b426430743ca468382db2713cc17bd2732)]
+- corrected console warnings for incorrect classNames in components [ujbolivar - [`9841c75`](https://github.com/eea/volto-arcgis-block/commit/9841c7554c76e51ea6af70bba8b8970c08eb170e)]
+- CLMS-1795 (fix): Improvements on loading spinner. [ujbolivar - [`f6248d3`](https://github.com/eea/volto-arcgis-block/commit/f6248d347fba01d5987da8fddaedeea379ad75de)]
 ### [0.1.194](https://github.com/eea/volto-arcgis-block/compare/0.1.193...0.1.194) - 13 September 2023
 
 ### [0.1.193](https://github.com/eea/volto-arcgis-block/compare/0.1.192...0.1.193) - 13 September 2023

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -239,7 +239,6 @@ class HotspotWidget extends React.Component {
       }
     }
     typeFilter.forEach((type) => {
-      filterId = type + '_filter';
       if (type === 'lcc') {
         let selectLccBoxTime = document.getElementById('select-klc-lccTime')
           .value;
@@ -248,11 +247,17 @@ class HotspotWidget extends React.Component {
           .getElementById('select-klc-lccTime')
           .value.match(/\d+/g)
           .map(Number)[0];
-        this.state.activeLayers.forEach((layer) => {
-          layer.includes('all_lcc_a_pol')
-            ? (typeLegend = 'all_lcc_a_pol')
-            : (typeLegend = 'all_lcc_b_pol');
-        });
+
+        for (let i = 0; i < this.state.activeLayers.length; i++) {
+          let layer = this.state.activeLayers[i];
+          if (layer.includes('all_lcc_a_pol')) {
+            typeLegend = 'all_lcc_a_pol';
+            break;
+          } else {
+            typeLegend = 'all_lcc_b_pol';
+          }
+        }
+
         if (this.esriLayer_lcc !== null) {
           if (this.esriLayer_lcc2 !== null) {
             this.props.map.remove(this.esriLayer_lcc2);
@@ -279,11 +284,16 @@ class HotspotWidget extends React.Component {
         }
       }
       if (type === 'lc') {
-        this.state.activeLayers.forEach((layer) => {
-          layer.includes('all_present_lc_a_pol')
-            ? (typeLegend = 'all_present_lc_a_pol')
-            : (typeLegend = 'all_present_lc_b_pol');
-        });
+        for (let i = 0; i < this.state.activeLayers.length; i++) {
+          let layer = this.state.activeLayers[i];
+          if (layer.includes('all_present_lc_a_pol')) {
+            typeLegend = 'all_present_lc_a_pol';
+            break;
+          } else {
+            typeLegend = 'all_present_lc_b_pol';
+          }
+        }
+
         let selectLcBoxTime = document.getElementById('select-klc-lcTime')
           .value;
         this.lcYear = selectLcBoxTime;
@@ -291,6 +301,7 @@ class HotspotWidget extends React.Component {
           .getElementById('select-klc-lcTime')
           .value.match(/\d+/g)
           .map(Number)[0];
+
         if (this.esriLayer_lc !== null) {
           if (this.esriLayer_lc2 !== null) {
             this.props.map.remove(this.esriLayer_lc2);
@@ -312,7 +323,6 @@ class HotspotWidget extends React.Component {
           this.props.selectedLayers['lc_filter'] = this.esriLayer_lc;
           this.props.selectedLayers['lc_filter'].visible = true;
           this.esriLayer_lc2 = this.esriLayer_lc;
-          //this.layerModelInit();
         }
       }
       this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
@@ -340,6 +350,7 @@ class HotspotWidget extends React.Component {
           this.props.map.add(this.esriLayer_pa);
           this.props.selectedLayers['pa_filter'].visible = true;
           this.esriLayer_pa2 = this.esriLayer_pa;
+          //this.layerModelInit();
         }
       }
       this.layerModelInit();

package/src/components/MapViewer/LoadingSpinner.jsx

@@ -1,6 +1,7 @@
 import React, { createRef } from 'react';
 import './css/ArcgisMap.css';
 import { loadModules } from 'esri-loader';
+var watchUtils;
 class LoadingSpinner extends React.Component {
   constructor(props) {
     super(props);
@@ -12,7 +13,9 @@ class LoadingSpinner extends React.Component {
   }
 
   loader() {
-    return loadModules().then(() => {});
+    return loadModules(['esri/core/watchUtils']).then(([_watchUtils]) => {
+      watchUtils = _watchUtils;
+    });
   }
 
   showLoading() {
@@ -28,8 +31,10 @@ class LoadingSpinner extends React.Component {
     await this.loader();
     this.props.view.when(() => {
       this.props.view.ui.add(this.container.current, 'manual');
+      watchUtils.watch(this.props.view, 'updating', () => {
+        return;
+      });
     });
-    this.showLoading();
   }
 
   componentDidUpdate(prevProps) {
@@ -50,8 +55,8 @@ class LoadingSpinner extends React.Component {
       >
         <div>
           <svg
-            width="50"
-            height="50"
+            width="80"
+            height="80"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
           >
@@ -59,7 +64,7 @@ class LoadingSpinner extends React.Component {
               {`.spinner_ajPY {
       transform-origin: center;
       animation: spinner_AtaB .75s infinite linear;
-      fill: #a0b128;
+      fill: #a0b128; stroke-width: 3px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
     }
     @keyframes spinner_AtaB {
       100% {
@@ -73,7 +78,7 @@ class LoadingSpinner extends React.Component {
             />
             <path
               d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-              class="spinner_ajPY"
+              className="spinner_ajPY"
             />
           </svg>
         </div>

package/src/components/MapViewer/MenuWidget.jsx

@@ -300,6 +300,8 @@ class MenuWidget extends React.Component {
             });
           }
         }
+        if (!this.visibleLayers) this.visibleLayers = {};
+        this.handleRasterVectorLegend();
       }
     });
 
@@ -902,10 +904,10 @@ class MenuWidget extends React.Component {
                           product.ProductId ===
                             '8474c3b080fa42cc837f1d2338fcf096' ||
                           product.ProductTitle === 'Snow and Ice Parameters' ? (
-                            <div class="zoom-in-message-container">
+                            <div className="zoom-in-message-container">
                               <span>{product.ProductTitle}</span>
                               <div
-                                class="zoom-in-message"
+                                className="zoom-in-message"
                                 id="snow-and-ice-zoom-message"
                               >
                                 Zoom in to view on map
@@ -924,9 +926,9 @@ class MenuWidget extends React.Component {
                         '8474c3b080fa42cc837f1d2338fcf096' ||
                       product.ProductTitle ===
                         'High Resolution Snow and Ice Parameters' ? (
-                      <div class="zoom-in-message-container">
+                      <div className="zoom-in-message-container">
                         <span>{product.ProductTitle}</span>
-                        <div class="zoom-in-message">
+                        <div className="zoom-in-message">
                           Zoom in to view on map
                         </div>
                       </div>
@@ -1144,9 +1146,9 @@ class MenuWidget extends React.Component {
                         trigger={
                           dataset.ProductId ===
                           '8474c3b080fa42cc837f1d2338fcf096' ? (
-                            <div class="zoom-in-message-container">
+                            <div className="zoom-in-message-container">
                               <span>{dataset.DatasetTitle}</span>
-                              <div class="zoom-in-message zoom-in-message-dataset">
+                              <div className="zoom-in-message zoom-in-message-dataset">
                                 Zoom in to view on map
                               </div>
                             </div>
@@ -1161,9 +1163,9 @@ class MenuWidget extends React.Component {
                       />
                     ) : dataset.ProductId ===
                       '8474c3b080fa42cc837f1d2338fcf096' ? (
-                      <div class="zoom-in-message-container">
+                      <div className="zoom-in-message-container">
                         <span>{dataset.DatasetTitle}</span>
-                        <div class="zoom-in-message">
+                        <div className="zoom-in-message">
                           Zoom in to view on map
                         </div>
                       </div>
@@ -1635,6 +1637,31 @@ class MenuWidget extends React.Component {
     this.setState({});
   }
 
+  /**
+   * Method to show/hide a legend if the layer is active or not in the view
+   */
+  handleRasterVectorLegend() {
+    let zoom = this.view.get('zoom');
+    Object.keys(this.activeLayersJSON).forEach((key) => {
+      let activeLayer = this.activeLayersJSON[key];
+      let layerTitle = activeLayer.props.children[0].props.children;
+      if (layerTitle.includes('raster')) {
+        if (zoom > 6) {
+          this.layers[key].visible = false;
+        } else {
+          this.layers[key].visible = true;
+        }
+      } else if (layerTitle.includes('vector')) {
+        if (zoom >= 12) {
+          this.layers[key].visible = true;
+        } else {
+          this.layers[key].visible = false;
+        }
+      }
+      this.setState({});
+    });
+  }
+
   async toggleLayer(elem) {
     if (!this.visibleLayers) this.visibleLayers = {};
     if (!this.timeLayers) this.timeLayers = {};
@@ -1643,10 +1670,10 @@ class MenuWidget extends React.Component {
       .getElementById(parentId)
       .closest('.map-menu-product-dropdown')
       .getAttribute('productid');
-    let modularLC;
+    /*let modularLC;
     if (elem.id.includes('all_present_lc_b_pol')) {
       modularLC = elem.id;
-    }
+    }*/
 
     let group = this.getGroup(elem);
     if (elem.checked) {
@@ -1672,13 +1699,13 @@ class MenuWidget extends React.Component {
         } else {
           this.map.add(this.layers[elem.id]);
         }
-      } else if (this.layers[modularLC]) {
+      } /*else if (this.layers[modularLC]) {
         let previousElem = document
           .getElementById(elem.id)
           .closest('.ccl-form-group')
           .previousElementSibling.querySelector('input');
         this.map.add(this.layers[previousElem.id]);
-      } else {
+      } */ else {
         this.map.add(this.layers[elem.id]);
       }
       this.layers[elem.id].visible = true; //layer id
@@ -1694,6 +1721,7 @@ class MenuWidget extends React.Component {
           elem,
           Object.keys(this.activeLayersJSON).length,
         );
+        this.handleRasterVectorLegend();
       } else {
         this.activeLayersJSON[elem.id] = this.addActiveLayer(
           elem,

package/src/components/MapViewer/PanWidget.jsx

@@ -105,7 +105,7 @@ class PanWidget extends React.Component {
               <span
                 aria-hidden="true"
                 role="presentation"
-                class="esri-widget--button esri-icon esri-icon-pan"
+                className="esri-widget--button esri-icon esri-icon-pan"
               ></span>
             </div>
             <div

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -192,11 +192,14 @@ class TimesliderWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
+    let playRateValue =
+      this.layer.ProductId === '8474c3b080fa42cc837f1d2338fcf096' ? 4000 : 1000;
     this.TimesliderWidget = new TimeSlider({
       view: this.props.view,
       container: document.querySelector('.timeslider-panel'),
       timeVisible: true,
       mode: 'instant',
+      playRate: playRateValue,
       loop: false,
       labelFormatFunction: (value, type, element, layout) => {
         if (!this.TimesliderWidget.fullTimeExtent) {