@eeacms/volto-arcgis-block 0.1.195 → 0.1.197

package/CHANGELOG.md

@@ -4,6 +4,21 @@ 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.197](https://github.com/eea/volto-arcgis-block/compare/0.1.196...0.1.197) - 14 September 2023
+
+#### :hammer_and_wrench: Others
+
+- conflicts resolved and merge completed [ujbolivar - [`2220061`](https://github.com/eea/volto-arcgis-block/commit/22200614ff032783c8b4cb6976d509da5c2f03bc)]
+- CLMS-2279-2445-2339 (fix): latest updates to legend functions and presentation [ujbolivar - [`8ceea25`](https://github.com/eea/volto-arcgis-block/commit/8ceea25709ac494d28807beacbc2474e8a823269)]
+- CLMS-LEGEND-BUGS latest changes [ujbolivar - [`a90c253`](https://github.com/eea/volto-arcgis-block/commit/a90c253d96af7c6757ecf83d5e58e482be799b18)]
+- Lint [masanchez85 - [`1ea1a7f`](https://github.com/eea/volto-arcgis-block/commit/1ea1a7fdda47593fe73dbc12656d8dedd781aa47)]
+- CLMS-2279, 1952 [masanchez85 - [`dcc3359`](https://github.com/eea/volto-arcgis-block/commit/dcc3359a3ee7344ffd0f02fc35257f59178d911e)]
+### [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

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -181,9 +181,8 @@ class HotspotWidget extends React.Component {
     });
   }
 
-  handleApplyFilter(typeFilter) {
+  async handleApplyFilter(typeFilter) {
     let typeLegend;
-    let filterId;
 
     this.props.loadingHandler(true);
 
@@ -359,17 +358,16 @@ class HotspotWidget extends React.Component {
     //set sessionStorage value to keep the widget open
     sessionStorage.setItem('hotspotFilterApplied', 'true');
     this.disableButton();
-    this.props.view
-      .whenLayerView(this.props.selectedLayers[filterId])
-      .then((layerView) => {
-        layerView.watch('updating', (isUpdating) => {
-          if (!isUpdating) {
-            setTimeout(() => {
-              this.props.loadingHandler(false);
-            }, 500);
-          }
-        });
-      });
+    const layerView = await this.props.view.whenLayerView(
+      this.props.selectedLayers[typeFilter[0] + '_filter'],
+    );
+    layerView.watch('updating', (isUpdating) => {
+      if (!isUpdating) {
+        setTimeout(() => {
+          this.props.loadingHandler(false);
+        }, 1000);
+      }
+    });
   }
 
   dropdownAnimation() {

package/src/components/MapViewer/LegendWidget.jsx

@@ -17,6 +17,7 @@ class LegendWidget extends React.Component {
     //not be showing the basemap panel
     this.state = {
       showMapMenu: false,
+      loading: false,
     };
     this.mapViewer = this.props.mapViewer;
     this.menuClass =
@@ -46,7 +47,6 @@ class LegendWidget extends React.Component {
 
   brokenLegendImagePatch() {
     const collection = document.getElementsByClassName('esri-legend__symbol');
-
     Array.prototype.forEach.call(collection, (element) => {
       let img = {};
 
@@ -58,29 +58,59 @@ class LegendWidget extends React.Component {
         if (img?.src?.includes('all_present_lc_a_pol')) {
           img.src = this.urls.all_present_lc_a_pol;
 
-          img.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.display =
-            'none';
+          img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
+            'Dichotomous Present Land Cover in selected hot spots';
           return;
         } else if (img?.src?.includes('all_present_lc_b_pol')) {
-          img.src = this.urls.all_present_lc_b_pol;
-
-          img.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.display =
-            'none';
+          //img.src ='none';
+          const legends = document.getElementsByClassName(
+            'esri-legend__service',
+          );
+          for (let i = 0; i < legends.length; i++) {
+            const legend = legends[i];
+            //find the legend that contains a broken img
+            if (
+              legend.querySelector('img')?.src?.includes('all_present_lc_b_pol')
+            ) {
+              const img = legend.querySelector('img');
+              //set this legend to display none
+              if (!(img.complete && img.naturalHeight !== 0)) {
+                legend.style.display = 'none';
+              }
+              break; // break out of the loop after the first match
+            }
+          }
+          /*img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
+            'Modular Present Land Cover in selected hot spots';*/
         } else if (img?.src?.includes('all_lcc_a_pol')) {
           img.src = this.urls.all_lcc_a_pol;
 
-          img.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.display =
-            'none';
+          img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
+            'Dichotomous Land Cover Change in selected hot spots';
         } else if (img?.src?.includes('all_lcc_b_pol')) {
-          img.src = this.urls.all_lcc_b_pol;
-
-          img.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.display =
-            'none';
+          //img.src ='none';
+          const legends = document.getElementsByClassName(
+            'esri-legend__service',
+          );
+          for (let i = 0; i < legends.length; i++) {
+            const legend = legends[i];
+            //find the legend that contains a broken img
+            if (legend.querySelector('img')?.src?.includes('all_lcc_b_pol')) {
+              const img = legend.querySelector('img');
+              //set this legend to display none
+              if (!(img.complete && img.naturalHeight !== 0)) {
+                legend.style.display = 'none';
+              }
+              break; // break out of the loop after the first match
+            }
+          }
+          /*img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
+            'Modular Present Land Cover in selected hot spots';*/
         } else if (img?.src?.includes('cop_klc')) {
           img.src = this.urls.cop_klc;
 
-          img.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.display =
-            'none';
+          img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent =
+            'Key Landscapes for Conservation borders in selected hotspots';
         } else if (img.style) {
           img.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.display =
             'none';
@@ -141,6 +171,17 @@ class LegendWidget extends React.Component {
     }
   }
 
+  imageFixWithTimer() {
+    this.setState({ loading: true });
+    setTimeout(() => {
+      this.brokenLegendImagePatch();
+      if (this.props.download) {
+        this.hideNutsLegend();
+      }
+      this.setState({ loading: false });
+    }, 2000);
+  }
+
   /**
    * This method is executed after the rener method is executed
    */
@@ -155,12 +196,7 @@ class LegendWidget extends React.Component {
       container: document.querySelector('.legend-panel'),
     });
     this.props.view.allLayerViews.watch('length', () => {
-      setTimeout(() => {
-        this.brokenLegendImagePatch();
-        if (this.props.download) {
-          this.hideNutsLegend();
-        }
-      }, 1000);
+      this.imageFixWithTimer();
     });
   }
 
@@ -195,7 +231,16 @@ class LegendWidget extends React.Component {
               ></span>
             </div>
             <div className="right-panel-content">
-              <div className="legend-panel"></div>
+              <span
+                className="loading"
+                style={{ display: this.state.loading ? 'block' : 'none' }}
+              >
+                Loading...
+              </span>
+              <div
+                className="legend-panel"
+                style={{ display: this.state.loading ? 'none' : 'block' }}
+              ></div>
             </div>
           </div>
         </div>

package/src/components/MapViewer/MenuWidget.jsx

@@ -300,6 +300,8 @@ class MenuWidget extends React.Component {
             });
           }
         }
+        if (!this.visibleLayers) this.visibleLayers = {};
+        this.handleRasterVectorLegend();
       }
     });
 
@@ -598,6 +600,7 @@ class MenuWidget extends React.Component {
     this.showZoomMessageForDatasets();
     this.loadOpacity();
     this.loadVisibility();
+    this.handleRasterVectorLegend();
   }
 
   setSliderTag(val) {
@@ -1635,6 +1638,41 @@ 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 <= 11) {
+          if (
+            this.visibleLayers &&
+            this.visibleLayers[key] &&
+            this.visibleLayers[key][1] === 'eye'
+          )
+            this.layers[key].visible = true;
+        } else {
+          this.layers[key].visible = false;
+        }
+      } else if (layerTitle.includes('vector')) {
+        if (zoom >= 12) {
+          if (
+            this.visibleLayers &&
+            this.visibleLayers[key] &&
+            this.visibleLayers[key][1] === 'eye'
+          )
+            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 = {};
@@ -1694,6 +1732,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/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) {

package/src/components/MapViewer/config.js

@@ -219,15 +219,15 @@ const config = {
     outsideEu:
       'https://land.discomap.eea.europa.eu/arcgis/rest/services/CLMS_Portal/World_countries_except_EU37/MapServer',
     all_present_lc_a_pol:
-      'https://clms-prod.eea.europa.eu/en/products/lclcc-hot-spots/static-legends/dichotomous-reference-land-cover.png/@@images/image-800-8e5528b4247acef813af4b91d30a22d1.png',
+      'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/wms?request=GetLegendGraphic&version=1.0.0&format=image/png&layer=all_present_lc_a_pol',
     all_present_lc_b_pol:
-      'https://clmsdemo.devel6cph.eea.europa.eu/en/products/lclcc-hot-spots/static-legends/modular-reference-land-cover.png/@@images/image-800-97f58b15239b2b3ea85d701e171eaf64.png',
+      'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/wms?request=GetLegendGraphic&version=1.0.0&format=image/png&layer=all_present_lc_b_pol',
     all_lcc_a_pol:
-      'https://clms-prod.eea.europa.eu/en/products/lclcc-hot-spots/static-legends/dichotomous-land-cover-change.png/@@images/image-800-e77885afc5da8e0535f648b563e60408.png',
+      'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/wms?request=GetLegendGraphic&version=1.0.0&format=image/png&layer=all_lcc_a_pol',
     all_lcc_b_pol:
-      'https://clms-prod.eea.europa.eu/en/products/lclcc-hot-spots/static-legends/modular-land-cover-change.png/@@images/image-800-7e36e74d09ddd7e3f94fb502f0b5be8e.png',
+      'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/wms?request=GetLegendGraphic&version=1.0.0&format=image/png&layer=all_lcc_b_pol',
     cop_klc:
-      'https://clms-prod.eea.europa.eu/en/products/lclcc-hot-spots/static-legends/key-landscapes-for-conservation-borders.png/@@images/image-800-28ced0e8616b9a414ea5076399a5ba4e.png',
+      'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/wms?request=GetLegendGraphic&version=1.0.0&format=image/png&layer=cop_klc',
     klc_bbox: 'https://land.copernicus.eu/global/hsm/php/klc_bbox.php',
     legendLinkUrl:
       'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=',