@eeacms/volto-arcgis-block 0.1.192 → 0.1.194

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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.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
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1795 (FEAT): LOADING SPINNER FOR LAYER VIEW LOAD works logged in [ujbolivar - [`f3426f2`](https://github.com/eea/volto-arcgis-block/commit/f3426f27cd19b9c2bf8d1a1e7e264dc5ffe9313f)]
+- CLMS-1795 (FEAT): LOADING SPINNER FOR LAYER VIEW LOAD [ujbolivar - [`ffdba08`](https://github.com/eea/volto-arcgis-block/commit/ffdba087f3dc47efd3d946c51f003358a36eec0f)]
+- CLMS-1795: loading spinner [ujbolivar - [`b413d91`](https://github.com/eea/volto-arcgis-block/commit/b413d918c18f67223fa1366edae7e4ee2f9f7952)]
+- changed file name [ujbolivar - [`f7c2499`](https://github.com/eea/volto-arcgis-block/commit/f7c24992fe9aa78a9451a49957e115ddd358c2a7)]
 ### [0.1.192](https://github.com/eea/volto-arcgis-block/compare/0.1.191...0.1.192) - 11 September 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -183,6 +183,9 @@ class HotspotWidget extends React.Component {
 
   handleApplyFilter(typeFilter) {
     let typeLegend;
+    let filterId;
+
+    this.props.loadingHandler(true);
 
     if (this.props.selectedLayers) {
       //Clear previous selections when applying a new filter
@@ -236,6 +239,7 @@ class HotspotWidget extends React.Component {
       }
     }
     typeFilter.forEach((type) => {
+      filterId = type + '_filter';
       if (type === 'lcc') {
         let selectLccBoxTime = document.getElementById('select-klc-lccTime')
           .value;
@@ -271,7 +275,7 @@ class HotspotWidget extends React.Component {
           this.props.selectedLayers['lcc_filter'] = this.esriLayer_lcc;
           this.props.selectedLayers['lcc_filter'].visible = true;
           this.esriLayer_lcc2 = this.esriLayer_lcc;
-          this.layerModelInit();
+          //this.layerModelInit();
         }
       }
       if (type === 'lc') {
@@ -308,7 +312,7 @@ 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.layerModelInit();
         }
       }
       this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
@@ -322,7 +326,7 @@ class HotspotWidget extends React.Component {
           this.props.map.add(this.esriLayer_klc);
           this.props.selectedLayers['klc_filter'].visible = true;
           this.esriLayer_klc2 = this.esriLayer_klc;
-          this.layerModelInit();
+          //this.layerModelInit();
         }
       }
       this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
@@ -336,14 +340,25 @@ 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();
       this.setBBoxCoordinates(this.dataBBox);
     });
     //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);
+          }
+        });
+      });
   }
 
   dropdownAnimation() {

package/src/components/MapViewer/LoadingSpinner.jsx

@@ -0,0 +1,85 @@
+import React, { createRef } from 'react';
+import './css/ArcgisMap.css';
+import { loadModules } from 'esri-loader';
+class LoadingSpinner extends React.Component {
+  constructor(props) {
+    super(props);
+    //We create a reference to a DOM element to be mounted
+    this.container = createRef();
+    //Initially, we set the state of the component to
+    //not be showing the basemap panel
+    this.state = {};
+  }
+
+  loader() {
+    return loadModules().then(() => {});
+  }
+
+  showLoading() {
+    if (this.props.layerLoading === false) {
+      this.container.current.style.display = 'none';
+    } else {
+      this.container.current.style.display = 'block';
+    }
+    this.setState({});
+  }
+
+  async componentDidMount() {
+    await this.loader();
+    this.props.view.when(() => {
+      this.props.view.ui.add(this.container.current, 'manual');
+    });
+    this.showLoading();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.layerLoading !== prevProps.layerLoading) {
+      this.showLoading();
+    }
+  }
+
+  render() {
+    return (
+      <div
+        ref={this.container}
+        id="loader"
+        className="loading"
+        role="alert"
+        aria-busy="true"
+        aria-live="polite"
+      >
+        <div>
+          <svg
+            width="50"
+            height="50"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <style>
+              {`.spinner_ajPY {
+      transform-origin: center;
+      animation: spinner_AtaB .75s infinite linear;
+      fill: #a0b128;
+    }
+    @keyframes spinner_AtaB {
+      100% {
+        transform: rotate(360deg);
+      }
+    }`}
+            </style>
+            <path
+              d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+              opacity=".25"
+            />
+            <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"
+            />
+          </svg>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LoadingSpinner;

package/src/components/MapViewer/MapViewer.jsx

@@ -19,6 +19,8 @@ import MenuWidget from './MenuWidget';
 import HotspotWidget from './HotspotWidget';
 import PanWidget from './PanWidget';
 import BookmarkWidget from './BookmarkWidget';
+import LoadingSpinner from './LoadingSpinner';
+
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom, intl, Basemap, WebTileLayer, Extent;
 let mapStatus = {};
@@ -50,13 +52,20 @@ class MapViewer extends React.Component {
     this.mapClass = classNames('map-container', {
       [`${props.customClass}`]: props.customClass || null,
     });
-    this.state = {};
+    this.state = {
+      layerLoading: false,
+    };
     this.layers = {};
     this.activeLayersHandler = this.activeLayersHandler.bind(this);
     this.activeLayersArray = {};
     this.props.mapviewer_config.loading = true;
     this.cfgUrls = this.props.cfg.Urls;
     this.userID = null;
+    this.loadingHandler = this.loadingHandler.bind(this);
+  }
+
+  loadingHandler(bool) {
+    this.setState({ layerLoading: bool });
   }
 
   activeLayersHandler(newActiveLayers) {
@@ -330,6 +339,7 @@ class MapViewer extends React.Component {
           layers={sessionStorage}
           mapCfg={this.mapCfg}
           urls={this.cfgUrls}
+          loadingHandler={this.loadingHandler}
         />
       );
   }
@@ -349,6 +359,7 @@ class MapViewer extends React.Component {
           layers={this.layers}
           activeLayersHandler={this.activeLayersHandler}
           urls={this.cfgUrls}
+          loadingHandler={this.loadingHandler}
         />
       ); //call conf
   }
@@ -361,6 +372,12 @@ class MapViewer extends React.Component {
     return intl && <CheckLanguage />;
   }
 
+  renderLoadingSpinner() {
+    return (
+      <LoadingSpinner view={this.view} layerLoading={this.state.layerLoading} />
+    );
+  }
+
   /**
    * This method renders the map viewer, invoking if necessary the methods
    * to render the other widgets to display
@@ -391,6 +408,7 @@ class MapViewer extends React.Component {
             {this.renderHotspot()}
             {this.renderMenu()}
             {this.renderBookmark()}
+            {this.renderLoadingSpinner()}
           </div>
         </div>
       );

package/src/components/MapViewer/MenuWidget.jsx

@@ -1650,6 +1650,7 @@ class MenuWidget extends React.Component {
 
     let group = this.getGroup(elem);
     if (elem.checked) {
+      this.props.loadingHandler(true);
       if (this.props.download || this.location.search !== '') {
         if (
           this.extentInitiated === false &&
@@ -1705,6 +1706,13 @@ class MenuWidget extends React.Component {
       if (nuts) {
         this.map.reorder(nuts, this.map.layers.items.length + 1);
       }
+      this.props.view.whenLayerView(this.layers[elem.id]).then((layerView) => {
+        layerView.watch('updating', (isUpdating) => {
+          if (!isUpdating) {
+            this.props.loadingHandler(false);
+          }
+        });
+      });
       this.checkForHotspots(elem, productContainerId);
     } else {
       sessionStorage.removeItem('downloadButtonClicked');

package/src/components/MapViewer/css/ArcgisMap.css

@@ -13,13 +13,20 @@
   pointer-events: auto;
 }
 
+/* Loading Spinner */
 .loading {
   position: absolute;
   top: 50%;
   left: 50%;
+  display: none;
+  width: fit-content;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   color: #212529;
   font-size: 2rem;
   touch-action: auto;
+  transform: translate(-50%, -50%);
 }
 
 .map {
@@ -278,9 +285,12 @@ body.section-map-viewer
   width: auto !important;
 }
 
-.esri-button-menu__item-wrapper
+div.esri-popover
+  div
+  div.esri-button-menu__content
+  ul.esri-button-menu__item-wrapper
   li.esri-button-menu__item
-  [for*='-widget-1-menu-item-1'] {
+  [for*='-menu-item-1'] {
   display: none;
 }
 /* Area */

package/src/components/UseCasesMapViewer/css/ArcgisMap.css

@@ -304,3 +304,11 @@
   color: #a0b128;
   font-size: 0.875rem;
 }
+
+.use-cases-products-map
+  .map-container
+  .map
+  .esri-view-root
+  .esri-view-surface--touch-none {
+  background-color: #97dbf2;
+}

package/src/components/MapViewer/Loader.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import './css/ArcgisMap.css';
-
-class Loader extends React.Component {
-  render() {
-    return (
-      <div
-        active=""
-        //type="indeterminate"
-        //scale="m"
-        id="loader"
-        className="loading"
-        role="alert"
-        aria-busy="true"
-        aria-live="polite"
-      >
-        <div></div>
-        <div></div>
-        <br></br>
-        <span>Loading...</span>
-      </div>
-    );
-  }
-}
-
-export default Loader;