@eeacms/volto-arcgis-block 0.1.100 → 0.1.102

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.102](https://github.com/eea/volto-arcgis-block/compare/0.1.101...0.1.102) - 21 February 2023
+
+#### :hammer_and_wrench: Others
+
+- SPRINT-42 FIX: Passed linting and precommit [ujbolivar - [`d79f9c1`](https://github.com/eea/volto-arcgis-block/commit/d79f9c105082f5d78a2982fd815ed981f65c7d94)]
+- SPRINT-42 FIX: final touches before first commit for testing in development env [ujbolivar - [`ae24c5e`](https://github.com/eea/volto-arcgis-block/commit/ae24c5e02296f32f6a21ae88c1eca3377a58c3c3)]
+- SPRINT-42 FIX: Solution to be uploaded for testing in development environment [ujbolivar - [`2d0b377`](https://github.com/eea/volto-arcgis-block/commit/2d0b37786cc17bedbd65fca1224518a43e738af4)]
+- FIX: If user has selected the time slider, and has had to log in, when returning, timeslider should open automatically [ujbolivar - [`46ad898`](https://github.com/eea/volto-arcgis-block/commit/46ad89838768bc659303d7fdaeb6bb2a30606fd3)]
+### [0.1.101](https://github.com/eea/volto-arcgis-block/compare/0.1.100...0.1.101) - 20 February 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1581 fix: hotspot functions properly on window reload [ujbolivar - [`11d5a63`](https://github.com/eea/volto-arcgis-block/commit/11d5a637161afdcf583adaa04802b999bcaae5ce)]
+- CLMS-1581 FIX: CORB expects text/plain MIME for hotspot layers. Widget open / close behavior fixed. [ujbolivar - [`cc19efc`](https://github.com/eea/volto-arcgis-block/commit/cc19efc49d5f7c8d6fa0cf52a5c8b24d3f51ab98)]
 ### [0.1.100](https://github.com/eea/volto-arcgis-block/compare/0.1.99...0.1.100) - 17 February 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -35,7 +35,7 @@ class HotspotWidget extends React.Component {
     this.getKLCNames = this.getKLCNames.bind(this);
     this.layerModelInit = this.layerModelInit.bind(this);
     this.handleApplyFilter = this.handleApplyFilter.bind(this);
-    this.getLayerParameters();
+    //this.getLayerParameters();
   }
 
   loader() {
@@ -44,33 +44,42 @@ class HotspotWidget extends React.Component {
     });
   }
 
+  addLegendName(legend) {
+    let name = legend;
+    return name;
+  }
+
+  addLegendNameToUrl(legend) {
+    const legendLinkUrl =
+      'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=';
+    return legendLinkUrl + legend;
+  }
+
   layerModelInit() {
     const serviceUrl =
       'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/wms';
 
     this.esriLayer_lcc = new WMSLayer({
       url: serviceUrl,
-      // featureInfoFormat: "text/html",
+      //featureInfoFormat: "application/json",
       customLayerParameters: {},
       sublayers: [
         // LAND COVER CHANGE DATASET ________________________________________________________________________________________________________________
         {
-          name: 'all_lcc_a_pol',
-          legendUrl:
-            'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=all_lcc_a_pol',
+          name: this.addLegendName('all_lcc_a_pol'),
+          legendUrl: this.addLegendNameToUrl('all_lcc_a_pol'),
         },
       ],
     });
     this.esriLayer_lc = new WMSLayer({
       url: serviceUrl,
-      // featureInfoFormat: "text/html",
+      //featureInfoFormat: "application/json",
       customLayerParameters: {},
       sublayers: [
         // PRESENT LAND COVER DATASET ________________________________________________________________________________________________________________
         {
-          name: 'all_lcc_a_pol',
-          legendUrl:
-            'https://geospatial.jrc.ec.europa.eu/geoserver/hotspots/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=all_lcc_a_pol',
+          name: this.addLegendName('all_present_lc_a_pol'),
+          legendUrl: this.addLegendNameToUrl('all_present_lc_a_pol'),
         },
       ],
     });
@@ -109,13 +118,18 @@ class HotspotWidget extends React.Component {
         .getElementById('select-klc-lccTime')
         .value.match(/\d+/g)
         .map(Number)[0];
-      /* var typeLegend =
+      let typeLegend =
         document.getElementById('select-klc-highlights-lcc').value ===
         'Dichotomous'
           ? 'all_lcc_a_pol'
-          : 'all_lcc_b_pol'; */
+          : 'all_lcc_b_pol';
       if (this.esriLayer_lcc !== null) {
-        //this.esriLayer_lcc.sublayers.items[0].name = typeLegend;
+        this.esriLayer_lcc.sublayers.items[0].name = this.addLegendName(
+          typeLegend,
+        );
+        this.esriLayer_lcc.sublayers.items[0].legendUrl = this.addLegendNameToUrl(
+          typeLegend,
+        );
         this.esriLayer_lcc.customLayerParameters['CQL_FILTER'] =
           'klc_code LIKE ' +
           "'" +
@@ -128,17 +142,21 @@ class HotspotWidget extends React.Component {
         this.props.selectedLayers['lcc_filter'].visible = true;
       }
     } else {
-      /* var typeLegend =
-        document.getElementById('select-klc-highlights-lcc').value ===
-        'Dichotomous'
+      let typeLegend =
+        document.getElementById('select-klc-highlights-lc').value === 'Modular'
           ? 'all_present_lc_a_pol'
-          : 'all_present_lc_b_pol'; */
+          : 'all_present_lc_b_pol';
       var selectBoxHighlightsLc = document
         .getElementById('select-klc-lcTime')
         .value.match(/\d+/g)
         .map(Number)[0];
       if (this.esriLayer_lc !== null) {
-        //this.esriLayer_lc.sublayers.items[0].name = typeLegend;
+        this.esriLayer_lc.sublayers.items[0].name = this.addLegendName(
+          typeLegend,
+        );
+        this.esriLayer_lc.sublayers.items[0].legendUrl = this.addLegendNameToUrl(
+          typeLegend,
+        );
         this.esriLayer_lc.customLayerParameters['CQL_FILTER'] =
           'klc_code LIKE ' +
           "'" +
@@ -167,13 +185,10 @@ class HotspotWidget extends React.Component {
    * button is clicked. It controls the open
    * and close actions of the component
    */
+
   openMenu() {
     if (this.state.showMapMenu) {
-      if (this.dataJSONNames)
-        this.getKLCNames(
-          this.dataJSONNames,
-          this.dataJSONNames[0].node.klc_name,
-        );
+      this.getKLCNames(this.dataJSONNames, this.dataJSONNames[0].node.klc_name);
       this.props.mapViewer.setActiveWidget();
       this.container.current.querySelector('.right-panel').style.display =
         'none';
@@ -187,7 +202,12 @@ class HotspotWidget extends React.Component {
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
     } else {
-      this.getKLCNames(this.dataJSONNames, this.dataJSONNames[0].node.klc_name);
+      this.getLayerParameters();
+      if (this.getLayerParameters.length !== 0)
+        this.getKLCNames(
+          this.dataJSONNames,
+          this.dataJSONNames[0].node.klc_name,
+        );
       this.props.mapViewer.setActiveWidget(this);
       this.container.current.querySelector('.right-panel').style.display =
         'flex';
@@ -203,7 +223,7 @@ class HotspotWidget extends React.Component {
     }
   }
 
-  async getLayerParameters() {
+  getLayerParameters() {
     fetch('https://land.copernicus.eu/global/hsm/all_geo_klc_json')
       .then((data) => {
         if (data.status === 200) {
@@ -464,10 +484,15 @@ class HotspotWidget extends React.Component {
     );
   }
 
+  /**
+   *  This method is executed before the render method is executed
+   */
+
   /**
    * This method is executed after the rener method is executed
    */
   async componentDidMount() {
+    await this.getLayerParameters();
     await this.loader();
     this.props.view.ui.add(this.container.current, 'top-right');
     this.layerModelInit();

package/src/components/MapViewer/MenuWidget.jsx

@@ -482,6 +482,35 @@ class MenuWidget extends React.Component {
     this.loadVisibility();
   }
 
+  /**
+   * Active on map is tab and time slider widget is opened by default if the user selected time slider and is coming back from the EU pass login
+   */
+
+  componentDidUpdate(prevProps) {
+    if (this.props !== prevProps) {
+      let isLoggedIn = document
+        .querySelector('[defcheck=' + this.props.elem.id + ']')
+        .parentElement.querySelector('.map-menu-icon-login')
+        .classList.contains('logged');
+      if (this.props.sliderIsActive && isLoggedIn) {
+        let event = new MouseEvent('click', {
+          view: window,
+          bubbles: true,
+          cancelable: false,
+        });
+        let el = document.getElementById('active_label');
+        el.dispatchEvent(event);
+        this.showTimeSlider();
+      }
+    }
+  }
+
+  setActiveSlider(val) {
+    if (!sessionStorage.key('sliderIsActive'))
+      sessionStorage.setItem('sliderIsActive', 'false');
+    sessionStorage.setItem('sliderIsActive', val);
+  }
+
   /**
    * Close opacity panel if user clicks outside
    */
@@ -1395,11 +1424,14 @@ class MenuWidget extends React.Component {
     let hotspotButton = document.querySelector('#hotspot_button');
     let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
     checkedLayers.forEach((key) => {
+      // if key includes all_present_lc_a_pol or all_lcc_a_pol and if the activeWidget is not the hotspot widget, click on the hotspot button, else close the active widget and set the hotspot container to display to none
       if (
         key.includes('all_present_lc_a_pol') ||
         key.includes('all_lcc_a_pol')
       ) {
-        hotspotButton.click();
+        if (!this.props.mapViewer.activeWidget) {
+          hotspotButton.click();
+        }
       }
     });
   }
@@ -1848,7 +1880,14 @@ class MenuWidget extends React.Component {
    * @param {*} e From the click event
    * @param {*} id id from elem
    */
+
   showTimeSlider(elem, fromDownload) {
+    if (
+      sessionStorage.key('sliderIsActive') &&
+      sessionStorage.getItem('sliderIsActive') === 'false'
+    )
+      this.setActiveSlider(true);
+    else this.setActiveSlider(false);
     let activeLayers = document.querySelectorAll('.active-layer');
     let group = this.getGroup(elem);
     let groupLayers = this.getGroupLayers(group);