@eeacms/volto-arcgis-block 0.1.321 → 0.1.323

package/CHANGELOG.md

@@ -4,10 +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.321](https://github.com/eea/volto-arcgis-block/compare/0.1.320...0.1.321) - 9 December 2024
+### [0.1.323](https://github.com/eea/volto-arcgis-block/compare/0.1.322...0.1.323) - 10 December 2024
 
 #### :hammer_and_wrench: Others
 
+- CLMS-3264 (bug): datasets that cannot be visualized in the data viewer can still be downloaded from the data viewer. [Unai Bolivar - [`66d28fc`](https://github.com/eea/volto-arcgis-block/commit/66d28fcc303dba6be7495143833ef1f5d398327e)]
+### [0.1.322](https://github.com/eea/volto-arcgis-block/compare/0.1.321...0.1.322) - 10 December 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-DATA-VIEWER-CRASH-PATCH (BUG): Patch disabling lazyloading for info widget. [Unai Bolivar - [`f347c17`](https://github.com/eea/volto-arcgis-block/commit/f347c1783bef80f3ad7a028db1a875bb475fc67c)]
+### [0.1.321](https://github.com/eea/volto-arcgis-block/compare/0.1.320...0.1.321) - 10 December 2024
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #857 from eea/develop [Unai Bolivar - [`95bc2c7`](https://github.com/eea/volto-arcgis-block/commit/95bc2c73ec16745423c0fd9969e97fce4e6c4aa5)]
 - CLMS-3264 (bug): Downloading map image layer datasets functions correctly. [Unai Bolivar - [`e11271c`](https://github.com/eea/volto-arcgis-block/commit/e11271c7ec621231207ca3069b6470f814eea7e2)]
 - CLMS-3264 (bug): pointing to correct db. Resetting local host to run tests. Saving before hand. [Unai Bolivar - [`3dca534`](https://github.com/eea/volto-arcgis-block/commit/3dca5348668b69b7fa65b39371d28e4111e0b2e8)]
 ### [0.1.320](https://github.com/eea/volto-arcgis-block/compare/0.1.319...0.1.320) - 9 December 2024

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -394,9 +394,9 @@ class AreaWidget extends React.Component {
       default:
         break;
     }
-    setTimeout(() => {
-      e.target.value = null;
-    }, 2000);
+    // setTimeout(() => {
+    e.target.value = null;
+    // }, 2000);
     this.props.uploadFileHandler(this.state.infoPopupType);
   };
 

package/src/components/MapViewer/HotspotWidget.jsx

@@ -969,20 +969,20 @@ class HotspotWidget extends React.Component {
           Object.keys(bookmarkHotspotFilter?.filteredLayers).length !== 0 &&
           this.props.bookmarkData.active === true
         ) {
-          setTimeout(() => {
-            let activeLayers = [];
-            let filteredLayers = [];
-            Object.keys(bookmarkHotspotFilter.activeLayers).forEach((key) => {
-              activeLayers[key] = this.layers[key];
-            });
-            Object.keys(bookmarkHotspotFilter.filteredLayers).forEach((key) => {
-              filteredLayers[key] = null;
-            });
-            this.props.hotspotData['activeLayers'] = activeLayers;
-            this.props.hotspotData['filteredLayers'] = filteredLayers;
-            this.renderApplyFilterButton();
-            localStorage.setItem('bookmarkHotspotFilter', null);
-          }, 2000);
+          // setTimeout(() => {
+          let activeLayers = [];
+          let filteredLayers = [];
+          Object.keys(bookmarkHotspotFilter.activeLayers).forEach((key) => {
+            activeLayers[key] = this.layers[key];
+          });
+          Object.keys(bookmarkHotspotFilter.filteredLayers).forEach((key) => {
+            filteredLayers[key] = null;
+          });
+          this.props.hotspotData['activeLayers'] = activeLayers;
+          this.props.hotspotData['filteredLayers'] = filteredLayers;
+          this.renderApplyFilterButton();
+          localStorage.setItem('bookmarkHotspotFilter', null);
+          // }, 2000);
         } else if (
           bookmarkHotspotFilter !== null &&
           Object.keys(bookmarkHotspotFilter?.filteredLayers).length === 0 &&

package/src/components/MapViewer/InfoWidget.jsx

@@ -1,16 +1,16 @@
 import React, { createRef } from 'react';
 import { loadModules } from 'esri-loader';
 import { Loader } from 'semantic-ui-react';
-import loadable from '@loadable/component';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
-// import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// import loadable from '@loadable/component';
+// import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
 
-var GeometryEngine, Graphic, esriRequest;
+import Highcharts from 'highcharts';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-// import Highcharts from 'highcharts';
+var GeometryEngine, Graphic, esriRequest;
 
-const HighchartsReact = loadable(() => import('highcharts-react-official'));
+// const HighchartsReact = loadable(() => import('highcharts-react-official'));
 
 class InfoWidget extends React.Component {
   /**
@@ -87,12 +87,12 @@ class InfoWidget extends React.Component {
     }
   }
 
-  waitForContainer(mapdiv) {
-    while (mapdiv === null) {
-      new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
-    }
-    return mapdiv;
-  }
+  // waitForContainer(mapdiv) {
+  //   while (mapdiv === null) {
+  //     new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
+  //   }
+  //   return mapdiv;
+  // }
 
   /**
    * This method is executed after the rener method is executed
@@ -1156,7 +1156,8 @@ class InfoWidget extends React.Component {
                     {this.state.pixelInfo && !noData && (
                       <>
                         {this.loadVariableSelector(this.state.layerIndex)}
-                        <HighchartsReact
+                        {/* <HighchartsReact */}
+                        <Highcharts
                           highcharts={this.Highcharts}
                           options={this.loadInfoChart(this.state.layerIndex)}
                         />
@@ -1196,4 +1197,5 @@ class InfoWidget extends React.Component {
   }
 }
 
-export default injectLazyLibs('highcharts')(InfoWidget);
+// export default injectLazyLibs('highcharts')(InfoWidget);
+export default InfoWidget;

package/src/components/MapViewer/LoadingSpinner.jsx

@@ -54,12 +54,12 @@ class LoadingSpinner extends React.Component {
     this.setState({});
   }
 
-  waitForContainer(mapdiv) {
-    while (mapdiv === null) {
-      new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
-    }
-    return mapdiv;
-  }
+  // waitForContainer(mapdiv) {
+  //   while (mapdiv === null) {
+  //     new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
+  //   }
+  //   return mapdiv;
+  // }
 
   async componentDidMount() {
     //this.waitForContainer(this.props.view);

package/src/components/MapViewer/MapViewer.jsx

@@ -57,7 +57,6 @@ class MapViewer extends React.Component {
       layerLoading: false,
       layers: {},
       uploadedFile: true,
-      //isReady: false,
     };
     this.activeLayersHandler = this.activeLayersHandler.bind(this);
     this.activeLayersArray = {};
@@ -157,35 +156,26 @@ class MapViewer extends React.Component {
    * they are already mounted
    */
 
-  waitForDataFill(obj) {
-    while (obj.length === 0) {
-      new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
-    }
-    return obj;
-  }
+  // waitForDataFill(obj) {
+  //   while (obj.length === 0) {
+  //     new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
+  //   }
+  //   return obj;
+  // }
 
-  waitForContainer(mapdiv) {
-    while (mapdiv === null) {
-      new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
-    }
-    return mapdiv;
-  }
+  // waitForContainer(mapdiv) {
+  //   while (mapdiv === null) {
+  //     new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
+  //   }
+  //   return mapdiv;
+  // }
 
   async componentDidMount() {
     loadCss();
     await this.loader();
     //    this.state.url = window.location.href;
-    await this.waitForDataFill(this.compCfg);
-    if (!this.mapdiv.current) return;
-    //this.props.view.when(() => {
-    //  this.props.view.ui.add(this.container.current, 'top-right');
-    //});
-    //this.intervalId = setInterval(() => {
-    //  if (this.mapdiv.current !== null) {
-    //    this.setState({ isReady: true });
-    //    clearInterval(this.intervalId);
-    //  }
-    //}, 100);
+    //  await this.waitForDataFill(this.compCfg);
+
     this.positronCompositeBasemap = new Basemap({
       title: 'Positron composite',
       thumbnailUrl: this.cfgUrls.positronCompositeThumbnail,

package/src/components/MapViewer/MenuWidget.jsx

@@ -92,7 +92,7 @@ export const AddCartItem = ({
     let areaExtent = null;
     let check = document.querySelector('.area-panel input:checked')?.value;
     let fileUpload = sessionStorage.getItem('fileUploadLayer') ? true : false;
-    let isMapServer = dataset.ViewService.toLowerCase().endsWith('/mapserver')
+    let isMapServer = dataset?.ViewService?.toLowerCase().endsWith('/mapserver')
       ? true
       : false;
     if (check === 'area' || fileUpload) {
@@ -681,155 +681,124 @@ class MenuWidget extends React.Component {
    * and close actions of the component
    */
   openMenu() {
-    setTimeout(() => {
-      if (this.state.showMapMenu) {
-        this.container.current.querySelector('#tabcontainer').style.display =
-          'none';
-        this.container.current.querySelector('#paneles').style.display = 'none';
-        this.container.current
-          .querySelector('.esri-widget--button')
-          .classList.replace('esri-icon-close', 'esri-icon-drag-horizontal');
-        if (
-          document.contains(document.querySelector('.timeslider-container'))
-        ) {
-          document.querySelector('.timeslider-container').style.display =
-            'none';
-        }
-        if (
-          document.querySelector('.opacity-panel').style.display === 'block'
-        ) {
-          this.closeOpacity();
-        }
+    // setTimeout(() => {
+    if (this.state.showMapMenu) {
+      this.container.current.querySelector('#tabcontainer').style.display =
+        'none';
+      this.container.current.querySelector('#paneles').style.display = 'none';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.replace('esri-icon-close', 'esri-icon-drag-horizontal');
+      if (document.contains(document.querySelector('.timeslider-container'))) {
+        document.querySelector('.timeslider-container').style.display = 'none';
+      }
+      if (document.querySelector('.opacity-panel').style.display === 'block') {
+        this.closeOpacity();
+      }
 
-        // By invoking the setState, we notify the state we want to reach
-        // and ensure that the component is rendered again
-        this.setState({ showMapMenu: false });
-      } else {
-        /*  
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: false });
+    } else {
+      /*  
         The following variables have been changed from container
         to this.container.current to avoid data viewer crash
         when client comes from dataset / product pages or refreshing
         */
-        const tabContainer = this.container.current.querySelector(
-          '#tabcontainer',
-        );
-        const paneles = this.container.current.querySelector('#paneles');
-        const esriWidgetButton = this.container.current.querySelector(
-          '.esri-widget--button',
-        );
-        const timeSliderContainer = document.querySelector(
-          '.timeslider-container',
-        );
+      const tabContainer = this.container.current.querySelector(
+        '#tabcontainer',
+      );
+      const paneles = this.container.current.querySelector('#paneles');
+      const esriWidgetButton = this.container.current.querySelector(
+        '.esri-widget--button',
+      );
+      const timeSliderContainer = document.querySelector(
+        '.timeslider-container',
+      );
 
-        if (tabContainer) {
-          tabContainer.style.display = 'block';
-        }
+      if (tabContainer) {
+        tabContainer.style.display = 'block';
+      }
 
-        if (paneles) {
-          paneles.style.display = 'block';
-        }
+      if (paneles) {
+        paneles.style.display = 'block';
+      }
 
-        if (esriWidgetButton) {
-          esriWidgetButton.classList.replace(
-            'esri-icon-drag-horizontal',
-            'esri-icon-close',
-          );
-        }
+      if (esriWidgetButton) {
+        esriWidgetButton.classList.replace(
+          'esri-icon-drag-horizontal',
+          'esri-icon-close',
+        );
+      }
 
-        if (timeSliderContainer && document.contains(timeSliderContainer)) {
-          timeSliderContainer.style.display = 'block';
-        }
+      if (timeSliderContainer && document.contains(timeSliderContainer)) {
+        timeSliderContainer.style.display = 'block';
+      }
 
-        this.restorePanelScroll();
+      this.restorePanelScroll();
 
-        // By invoking the setState, we notify the state we want to reach
-        // and ensure that the component is rendered again
-        this.setState({ showMapMenu: true });
-      }
-      if (this.loadFirst && this.container.current) {
-        this.checkUrl();
-        this.loadFirst = false;
-        this.zoomTooltips();
-      }
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: true });
+    }
+    if (this.loadFirst && this.container.current) {
+      this.checkUrl();
+      this.loadFirst = false;
+      this.zoomTooltips();
+    }
 
-      let authToken = this.getAuthToken();
-      let timeSliderTag = sessionStorage.getItem('timeSliderTag');
-      let downloadTag = sessionStorage.getItem('downloadButtonClicked');
-      let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
+    let authToken = this.getAuthToken();
+    let timeSliderTag = sessionStorage.getItem('timeSliderTag');
+    let downloadTag = sessionStorage.getItem('downloadButtonClicked');
+    let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
 
+    // "Active on map" section and the time slider opened by default if user is logged in and timeSliderTag is true
+    if (checkedLayers && !this.props.download) {
       // "Active on map" section and the time slider opened by default if user is logged in and timeSliderTag is true
-      if (checkedLayers && !this.props.download) {
-        // "Active on map" section and the time slider opened by default if user is logged in and timeSliderTag is true
-        if (authToken && timeSliderTag) {
-          for (let i = 0; i < checkedLayers.length; i++) {
-            let layerid = checkedLayers[i];
-            if (
-              layerid &&
-              this.layers[layerid].isTimeSeries &&
-              !this.container.current
-                .querySelector('.esri-widget')
-                .classList.contains('esri-icon-drag-horizontal')
-            ) {
-              // select active on map tab
-              let event = new MouseEvent('click', {
-                view: window,
-                bubbles: true,
-                cancelable: false,
-              });
-              let el = document.getElementById('download_label');
-              el.dispatchEvent(event);
-              break;
-            }
-          }
-        }
-        // "Area widget" opened by default if user is logged in and downloadTag is true
-        else if (authToken && downloadTag) {
-          for (let i = 0; i < checkedLayers.length; i++) {
-            let layerid = checkedLayers[i];
-            if (
-              layerid &&
-              !this.layers[layerid].isTimeSeries &&
-              !this.container.current
-                .querySelector('.esri-widget')
-                .classList.contains('esri-icon-drag-horizontal')
-            ) {
-              //open area widget
-              let event = new MouseEvent('click', {
-                view: window,
-                bubbles: true,
-                cancelable: false,
-              });
-              document
-                .querySelector('.map-menu-icon-login.logged')
-                .dispatchEvent(event);
-              break;
-            } else if (
-              layerid &&
-              this.layers[layerid].isTimeSeries &&
-              !this.container.current
-                .querySelector('.esri-widget')
-                .classList.contains('esri-icon-drag-horizontal')
-            ) {
-              // select active on map tab
-              let event = new MouseEvent('click', {
-                view: window,
-                bubbles: true,
-                cancelable: false,
-              });
-              let el = document.getElementById('download_label');
-              el.dispatchEvent(event);
-              break;
-            }
+      if (authToken && timeSliderTag) {
+        for (let i = 0; i < checkedLayers.length; i++) {
+          let layerid = checkedLayers[i];
+          if (
+            layerid &&
+            this.layers[layerid].isTimeSeries &&
+            !this.container.current
+              .querySelector('.esri-widget')
+              .classList.contains('esri-icon-drag-horizontal')
+          ) {
+            // select active on map tab
+            let event = new MouseEvent('click', {
+              view: window,
+              bubbles: true,
+              cancelable: false,
+            });
+            let el = document.getElementById('download_label');
+            el.dispatchEvent(event);
+            break;
           }
         }
       }
-      // CLMS-1389
-      // "Active on map" section and the time slider opened by default if download and timeseries == true
-
-      if (this.layers)
-        if (this.props.download && this.layers) {
-          let layerid = Object.keys(this.layers)[0];
+      // "Area widget" opened by default if user is logged in and downloadTag is true
+      else if (authToken && downloadTag) {
+        for (let i = 0; i < checkedLayers.length; i++) {
+          let layerid = checkedLayers[i];
           if (
+            layerid &&
+            !this.layers[layerid].isTimeSeries &&
+            !this.container.current
+              .querySelector('.esri-widget')
+              .classList.contains('esri-icon-drag-horizontal')
+          ) {
+            //open area widget
+            let event = new MouseEvent('click', {
+              view: window,
+              bubbles: true,
+              cancelable: false,
+            });
+            document
+              .querySelector('.map-menu-icon-login.logged')
+              .dispatchEvent(event);
+            break;
+          } else if (
             layerid &&
             this.layers[layerid].isTimeSeries &&
             !this.container.current
@@ -844,9 +813,35 @@ class MenuWidget extends React.Component {
             });
             let el = document.getElementById('download_label');
             el.dispatchEvent(event);
+            break;
           }
         }
-    }, 1000);
+      }
+    }
+    // CLMS-1389
+    // "Active on map" section and the time slider opened by default if download and timeseries == true
+
+    if (this.layers)
+      if (this.props.download && this.layers) {
+        let layerid = Object.keys(this.layers)[0];
+        if (
+          layerid &&
+          this.layers[layerid].isTimeSeries &&
+          !this.container.current
+            .querySelector('.esri-widget')
+            .classList.contains('esri-icon-drag-horizontal')
+        ) {
+          // select active on map tab
+          let event = new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: false,
+          });
+          let el = document.getElementById('download_label');
+          el.dispatchEvent(event);
+        }
+      }
+    // }, 1000);
   }
 
   /**
@@ -863,25 +858,25 @@ class MenuWidget extends React.Component {
       this.props.view.ui.add(this.container.current, 'top-left');
     });
     if (this.props.download) {
-      setTimeout(() => {
-        document.querySelector('.area-panel input:checked').click();
-        if (document.querySelector('.map-product-checkbox input')) {
-          document.querySelector('.map-product-checkbox input').click();
-          let dropdown = document.querySelector(
-            '.map-menu-dropdown .ccl-expandable__button',
+      // setTimeout(() => {
+      document.querySelector('.area-panel input:checked').click();
+      if (document.querySelector('.map-product-checkbox input')) {
+        document.querySelector('.map-product-checkbox input').click();
+        let dropdown = document.querySelector(
+          '.map-menu-dropdown .ccl-expandable__button',
+        );
+        if (dropdown) {
+          dropdown.setAttribute('aria-expanded', 'true');
+          dropdown = document.querySelector(
+            '.map-menu-product-dropdown .ccl-expandable__button',
           );
-          if (dropdown) {
-            dropdown.setAttribute('aria-expanded', 'true');
-            dropdown = document.querySelector(
-              '.map-menu-product-dropdown .ccl-expandable__button',
-            );
-            dropdown.setAttribute('aria-expanded', 'true');
-          }
+          dropdown.setAttribute('aria-expanded', 'true');
         }
-      }, 1000);
+      }
+      // }, 1000);
     }
     //to watch the component
-    this.setState({});
+    //this.setState({});
     this.openMenu();
     this.expandDropdowns();
     this.loadLayers();
@@ -2110,9 +2105,9 @@ class MenuWidget extends React.Component {
           productContainerId !== 'd764e020485a402598551fa461bf1db2' // hotspot
         ) {
           this.extentInitiated = true;
-          setTimeout(() => {
-            this.FullExtentDataset(elem);
-          }, 2000);
+          // setTimeout(() => {
+          this.FullExtentDataset(elem);
+          // }, 2000);
         }
       }
       if (

package/src/components/MapViewer/PrintWidget.jsx

@@ -67,12 +67,12 @@ class PrintWidget extends React.Component {
     }
   }
 
-  waitForContainer(mapdiv) {
-    while (mapdiv === null) {
-      new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
-    }
-    return mapdiv;
-  }
+  // waitForContainer(mapdiv) {
+  //   while (mapdiv === null) {
+  //     new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
+  //   }
+  //   return mapdiv;
+  // }
 
   /**
    * This method is executed after the rener method is executed

package/src/components/MapViewer/ScaleWidget.jsx

@@ -26,12 +26,12 @@ class ScaleWidget extends React.Component {
     });
   }
 
-  waitForContainer(mapdiv) {
-    while (mapdiv === null) {
-      new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
-    }
-    return mapdiv;
-  }
+  // waitForContainer(mapdiv) {
+  //   while (mapdiv === null) {
+  //     new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
+  //   }
+  //   return mapdiv;
+  // }
 
   /**
    * This method is executed after the rener method is executed

package/src/components/MapViewer/SwipeWidget.jsx

@@ -369,20 +369,26 @@ class SwipeWidget extends React.Component {
             <div className="right-panel-content">
               <div className="swipe-panel">
                 <span>Leading Layer</span>
-                <select id="select-leading-layer" class="esri-select"></select>
+                <select
+                  id="select-leading-layer"
+                  className="esri-select"
+                ></select>
                 <br></br>
                 <span>Trailing Layer</span>
-                <select id="select-trailing-layer" class="esri-select"></select>
+                <select
+                  id="select-trailing-layer"
+                  className="esri-select"
+                ></select>
                 <br></br>
                 <span>Swipe Direction</span>
-                <select id="select-swipe-direction" class="esri-select">
+                <select id="select-swipe-direction" className="esri-select">
                   <option value="horizontal">Horizontal</option>
                   <option value="vertical">Vertical</option>
                 </select>
                 <br></br>
                 <button
                   id="applySwipeButton"
-                  class="esri-button"
+                  className="esri-button"
                   onClick={() => this.renderApplySwipeButton()}
                 >
                   Swipe