@eeacms/volto-arcgis-block 0.1.23 → 0.1.24

package/CHANGELOG.md

@@ -4,8 +4,24 @@ 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.24](https://github.com/eea/volto-arcgis-block/compare/0.1.23...0.1.24)
+
+- Bugs n improvements [`#80`](https://github.com/eea/volto-arcgis-block/pull/80)
+- The area array to a json object and added a unique_id to the cart [`#79`](https://github.com/eea/volto-arcgis-block/pull/79)
+- Remove Global from legend [`#76`](https://github.com/eea/volto-arcgis-block/pull/76)
+- ESLint fix [`974d62b`](https://github.com/eea/volto-arcgis-block/commit/974d62bd5b66025e12fa85dffcd0d1a5ae04cba4)
+- ESLint fix [`5c4b0d7`](https://github.com/eea/volto-arcgis-block/commit/5c4b0d76de50edd85809c35449f2fb364a9e9312)
+- ESLint fix [`d57d144`](https://github.com/eea/volto-arcgis-block/commit/d57d144fd0e3dbbbbc95195f289d50e6c4b03375)
+- ESLint fix [`9eb0a0c`](https://github.com/eea/volto-arcgis-block/commit/9eb0a0c17d018ac1b25bde422ac149b46b146ff4)
+- ESLint fix [`5fd3772`](https://github.com/eea/volto-arcgis-block/commit/5fd3772f197a3a380067962a5638dbf901a4624e)
+- Pixel info [`1ccef39`](https://github.com/eea/volto-arcgis-block/commit/1ccef39a9adcc3ee94655c77a5a166b613600a08)
+- NUTS bug fix [`37fe7f3`](https://github.com/eea/volto-arcgis-block/commit/37fe7f3fad2c005e3b7c234b3b0564d5df92fa8c)
+
 #### [0.1.23](https://github.com/eea/volto-arcgis-block/compare/0.1.22...0.1.23)
 
+> 17 December 2021
+
+- Develop [`#75`](https://github.com/eea/volto-arcgis-block/pull/75)
 - Use cases region highlight [`#71`](https://github.com/eea/volto-arcgis-block/pull/71)
 - Bugs n improvements [`#74`](https://github.com/eea/volto-arcgis-block/pull/74)
 - Add NUTS 2 in the Map viewer [`#72`](https://github.com/eea/volto-arcgis-block/pull/72)

package/Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-arcgis-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,clms.land.copernicus.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,clms.land.copernicus.eu,water.europa.eu-freshwater"
         DEPENDENCIES = ""
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",
@@ -40,7 +40,9 @@
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
     "@fortawesome/react-fontawesome": "0.1.14",
-    "@eeacms/volto-clms-utils": "0.1.1"
+    "@eeacms/volto-clms-utils": "0.1.1",
+    "highcharts": "^9.3.2",
+    "highcharts-react-official": "^3.1.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/components/MapViewer/AreaWidget.jsx

@@ -1,7 +1,4 @@
 import React, { createRef } from 'react';
-//import "@arcgis/core/assets/esri/css/main.css";
-//import "./css/ArcgisMap.css";
-//import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { loadModules } from 'esri-loader';
 
 var Graphic,
@@ -202,7 +199,14 @@ class AreaWidget extends React.Component {
     });
     this.props.map.add(this.nutsGroupLayer);
     this.props.view.on('click', (event) => {
-      if (this.props.mapViewer.activeWidget === this) {
+      if (
+        (this.props.mapViewer.activeWidget === this || this.props.download) &&
+        (this.props.mapViewer.activeWidget
+          ? !this.props.mapViewer.activeWidget.container.current.classList.contains(
+              'info-container',
+            )
+          : true)
+      ) {
         this.props.view.hitTest(event).then((response) => {
           if (response.results.length > 0) {
             let graphic = response.results.filter((result) => {

package/src/components/MapViewer/InfoWidget.jsx

@@ -0,0 +1,389 @@
+import React, { createRef } from 'react';
+import { loadModules } from 'esri-loader';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+var GeometryEngine, Graphic;
+
+class InfoWidget extends React.Component {
+  /**
+   * Creator of the InfoWidget widget class
+   * @param {*} props
+   */
+  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 = { showMapMenu: false };
+    this.map = this.props.map;
+    this.menuClass =
+      'esri-icon-description esri-widget--button esri-widget esri-interactive';
+    //this.chartOptions;
+  }
+
+  loader() {
+    return loadModules(['esri/geometry/geometryEngine', 'esri/Graphic']).then(
+      ([_GeometryEngine, _Graphic]) => {
+        [GeometryEngine, Graphic] = [_GeometryEngine, _Graphic];
+      },
+    );
+  }
+
+  /**
+   * Method that will be invoked when the
+   * button is clicked. It controls the open
+   * and close actions of the component
+   */
+  openMenu() {
+    if (this.state.showMapMenu) {
+      this.props.mapViewer.setActiveWidget();
+      this.container.current.querySelector('.info-panel').style.display =
+        'none';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.replace('esri-icon-right-arrow', 'esri-icon-description');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: false, pixelInfo: false });
+      this.props.view.popup.autoOpenEnabled = true;
+      this.removeMarker();
+    } else {
+      this.props.mapViewer.setActiveWidget(this);
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.replace('esri-icon-description', 'esri-icon-right-arrow');
+      this.container.current.querySelector('.info-panel').style.display =
+        'block';
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: true });
+      this.props.mapViewer.view.popup.close();
+      this.props.view.popup.autoOpenEnabled = false;
+    }
+  }
+  /**
+   * This method is executed after the rener method is executed
+   */
+  async componentDidMount() {
+    await this.loader();
+    this.props.view.ui.add(this.container.current, 'top-right');
+    this.props.view.on('click', (e) => {
+      if (this.props.mapViewer.activeWidget === this) {
+        let timeLayers = this.map.layers.items.filter(
+          (a) => a.timeInfo && a.visible,
+        );
+        let layer = timeLayers[timeLayers.length - 1];
+        let title;
+        if (layer.sublayers) {
+          title = layer.sublayers.items[0].title;
+        } else if (layer.activeLayer) {
+          title = layer.activeLayer.title;
+        } else {
+          title = layer.title;
+        }
+        this.identify(layer, e).then((response) => {
+          let variables = response.variables.options;
+          let variable = response.variables.selected;
+          if (
+            this.state.variables
+              ? variables.includes(this.state.variables.selected)
+              : false
+          ) {
+            variable = this.state.variables.selected;
+          }
+          let data = {
+            x: response.timeFields.values
+              .map((a) => {
+                return a[response.timeFields.start];
+              })
+              .sort((a, b) => {
+                return new Date(a).getTime() - new Date(b).getTime();
+              }),
+            y: response.data.values.map((a) => {
+              return Math.round(a[variable] * 100) / 100;
+            }),
+          };
+          let chartData = this.createChart(title, variable, data);
+          this.addMarker(e);
+          this.setState({
+            pixelInfo: true,
+            data: response,
+            options: chartData,
+            variables: { options: variables, selected: variable, title: title },
+          });
+        });
+      }
+    });
+  }
+
+  addMarker(evt) {
+    this.removeMarker();
+    let lat = evt.mapPoint.latitude;
+    let long = evt.mapPoint.longitude;
+    var point = {
+      type: 'point',
+      longitude: long,
+      latitude: lat,
+    };
+    var markerSymbol = {
+      type: 'simple-marker',
+      color: [255, 255, 255, 0.75],
+      outline: {
+        color: 'black',
+        width: '2px',
+      },
+    };
+    var pointGraphic = new Graphic({
+      geometry: point,
+      symbol: markerSymbol,
+      attributes: { long, lat, id: 'pixel-info' },
+    });
+    this.props.view.graphics.add(pointGraphic);
+  }
+
+  removeMarker() {
+    if (
+      this.props.view.graphics.items.find((a) => {
+        return a.attributes ? a.attributes.id === 'pixel-info' : false;
+      })
+    ) {
+      let marker = this.props.view.graphics.items.find((a) => {
+        return a.attributes && a.attributes.id === 'pixel-info';
+      });
+      this.props.view.graphics.remove(marker);
+    }
+
+    let marker = this.props.view.graphics.items.find((a) => {
+      return a.attributes ? a.attributes.id === 'pixel-info' : false;
+    });
+    this.props.view.graphics.remove(marker);
+  }
+
+  identify(layer, evt) {
+    let values = { timeFields: {}, data: {}, variables: {} };
+    //Complete time data
+    values.timeFields['start'] = layer.timeInfo.startField;
+    values.timeFields['end'] = layer.timeInfo.endField;
+    let timeQuery = layer.createQuery();
+    timeQuery.outFields = [layer.timeInfo.startField];
+    let fields = layer.fields
+      .filter((a) => {
+        return (
+          a.type !== 'date' &&
+          a.type !== 'geometry' &&
+          a.type !== 'string' &&
+          a.type !== 'oid'
+        );
+      })
+      .map((b) => {
+        return b.name;
+      });
+    let field = layer.displayField in fields ? layer.displayField : fields[0];
+    values.variables = { options: fields, selected: field };
+    if (layer.timeInfo.fullTimeExtent.endField) {
+      timeQuery.outFields.push(layer.timeInfo.endField);
+    }
+    timeQuery.returnDistinctValues = true;
+    timeQuery.returnGeometry = false;
+    let p1 = layer.queryFeatures(timeQuery).then((r) => {
+      let timevals = [];
+      r.features.forEach((e) => timevals.push(e.attributes));
+      values.timeFields['values'] = timevals;
+    });
+
+    //Query for data
+    let query = layer.createQuery();
+    query.geometry = this.props.view.toMap(evt); // the point location of the pointer
+    query.distance = 1000;
+    query.units = 'meters';
+    query.spatialRelationship = 'intersects'; // this is the default
+    query.returnGeometry = true;
+    query.outFields = [fields.toString()]; // Information to be returned
+    values.data['outFields'] = [fields.toString()];
+
+    let p2 = layer.queryFeatures(query).then((response) => {
+      //First of all, we get all the points with its distance to click point
+      let points = response.features.map((e) => {
+        return {
+          latitude: e.geometry.latitude,
+          longitude: e.geometry.longitude,
+          distance: GeometryEngine.distance(
+            this.props.view.toMap(evt),
+            e.geometry,
+            'meters',
+          ),
+        };
+      });
+      let min_distance = Math.min.apply(
+        null,
+        points.map((e) => e.distance),
+      ); //minimum distance
+      let point = points.find((e) => e.distance <= min_distance); //minimum distance point
+      //get de info of the minimum distance point at all the times possible
+      let info = response.features.filter(
+        (e) =>
+          e.geometry.latitude === point.latitude &&
+          e.geometry.longitude === point.longitude,
+      );
+      values.data['values'] = info.map((e) => {
+        return e.attributes;
+      });
+    });
+
+    return Promise.all([p1, p2]).then(() => {
+      return values;
+    });
+  }
+
+  createChart(title, variable, chartData) {
+    let chartOptions = {
+      chart: {
+        height: 208,
+      },
+      title: {
+        text: title,
+        style: {},
+      },
+      subtitle: {
+        text: '',
+        style: {
+          display: 'none',
+        },
+      },
+      plotOptions: {
+        line: {
+          pointPlacement: 'between',
+        },
+      },
+      xAxis: {
+        title: {
+          text: null,
+        },
+        labels: {
+          format: '{value:%d/%m/%Y}',
+        },
+        type: 'datetime',
+        categories: chartData.x,
+        tickmarkPlacement: 'between',
+        startOnTick: true,
+        endOnTick: true,
+      },
+      legend: {
+        enabled: false,
+      },
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        headerFormat: '{point.x:%d/%m/%Y}<br><b>{point.point.symbolName}</b>',
+      },
+      series: [
+        {
+          marker: {
+            enabled: false,
+          },
+          name: variable,
+          data: chartData.y,
+          shadow: false,
+          zIndex: 1,
+          color: '#a0b128',
+        },
+      ],
+      exporting: {
+        buttons: {
+          contextButton: {
+            enabled: false,
+          },
+        },
+      },
+      credits: {
+        enabled: false,
+      },
+    };
+    return chartOptions;
+  }
+
+  selectVariable(option) {
+    let variables = this.state.variables.options;
+    let variable = option;
+    let title = this.state.variables.title;
+    let data = {
+      x: this.state.data.timeFields.values
+        .map((a) => {
+          return a[this.state.data.timeFields.start];
+        })
+        .sort((a, b) => {
+          return new Date(a).getTime() - new Date(b).getTime();
+        }),
+      y: this.state.data.data.values.map((a) => {
+        return Math.round(a[variable] * 100) / 100;
+      }),
+    };
+    let chartData = this.createChart(title, variable, data);
+    this.setState({
+      options: chartData,
+      variables: { options: variables, selected: variable, title: title },
+    });
+  }
+
+  /**
+   * This method renders the component
+   * @returns jsx
+   */
+  render() {
+    let isEmpty;
+    if (this.state.data) {
+      isEmpty =
+        this.state.data.data.values.map((a) => {
+          return a[this.state.variables.selected];
+        }).length === 0;
+    }
+    return (
+      <>
+        <div ref={this.container} className="info-container">
+          <div
+            className={this.menuClass}
+            id="info_button"
+            title="Info"
+            onClick={this.openMenu.bind(this)}
+            onKeyDown={this.openMenu.bind(this)}
+            tabIndex="0"
+            role="button"
+          ></div>
+          <div className="info-panel">
+            {this.state.pixelInfo ? (
+              <>
+                <select
+                  className="esri-select"
+                  value={this.state.variables.selected}
+                  onBlur={(e) => this.selectVariable(e.target.value)}
+                  onChange={(e) => this.selectVariable(e.target.value)}
+                >
+                  {this.state.variables.options.map((option) => (
+                    <option key={option} value={option}>
+                      {option}
+                    </option>
+                  ))}
+                </select>
+                {isEmpty ? (
+                  <span className="info-panel-empty">No data</span>
+                ) : (
+                  <HighchartsReact
+                    highcharts={Highcharts}
+                    options={this.state.options}
+                  />
+                )}
+              </>
+            ) : (
+              <span className="info-panel-empty">
+                Click on the map to get pixel info
+              </span>
+            )}
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default InfoWidget;

package/src/components/MapViewer/MenuWidget.jsx

@@ -8,6 +8,7 @@ import { useIntl } from 'react-intl';
 import { Message, Modal } from 'semantic-ui-react';
 import AreaWidget from './AreaWidget';
 import TimesliderWidget from './TimesliderWidget';
+import InfoWidget from './InfoWidget';
 var WMSLayer, WMTSLayer, FeatureLayer;
 
 export const AddCartItem = ({
@@ -27,7 +28,7 @@ export const AddCartItem = ({
 
   const checkArea = () => {
     let check = document.querySelector('.area-panel input:checked').value;
-    let area = [];
+    let area = {};
     if (check === 'area') {
       let graphics = mapViewer.view.graphics;
       if (graphics.length === 0) {
@@ -76,6 +77,8 @@ export const AddCartItem = ({
     let datasetElem = document.querySelector('div[datasetid="' + id + '"]');
     let datasetData = {
       id: id,
+      UID: id,
+      unique_id: `${id}-${new Date().getTime()}`,
       area: area,
     };
     if (
@@ -711,6 +714,23 @@ class MenuWidget extends React.Component {
       if (nuts) {
         this.map.reorder(nuts, this.map.layers.items.length + 1);
       }
+      if (Object.keys(this.timeLayers).length > 0) {
+        if (!document.querySelector('.info-container')) {
+          let div = document.createElement('div');
+          document.querySelector('.esri-ui-top-right').appendChild(div);
+          ReactDOM.render(
+            <InfoWidget
+              view={this.props.view}
+              map={this.map}
+              mapViewer={this.props.mapViewer}
+            />,
+            div,
+          );
+          div.remove();
+        } else {
+          document.querySelector('.info-container').style.display = '';
+        }
+      }
     } else {
       let checkboxes = document.getElementsByName('layerCheckbox');
       let repeatedLayers = [];
@@ -727,6 +747,13 @@ class MenuWidget extends React.Component {
       }
     }
     this.updateCheckDataset(parentId);
+    if (
+      Object.keys(this.timeLayers).length === 0 &&
+      document.querySelector('.info-container')
+    ) {
+      this.props.mapViewer.closeActiveWidget();
+      document.querySelector('.info-container').style.display = 'none';
+    }
     this.setState({});
   }
 

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -19,10 +19,7 @@ class TimesliderWidget extends React.Component {
   }
 
   loader() {
-    return loadModules([
-      'esri/widgets/TimeSlider',
-      'esri/layers/WMSLayer',
-    ]).then(([_TimeSlider]) => {
+    return loadModules(['esri/widgets/TimeSlider']).then(([_TimeSlider]) => {
       [TimeSlider] = [_TimeSlider];
     });
   }

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

@@ -37,6 +37,11 @@
   max-height: 250px !important;
 }
 
+.esri-ui-top-right,
+.esri-ui-top-left {
+  z-index: 1;
+}
+
 .esri-component.esri-zoom.esri-widget {
   background: none;
   box-shadow: none;
@@ -76,6 +81,10 @@
   order: 5;
 }
 
+.info-container {
+  order: 6;
+}
+
 /* Basemap */
 .basemap-container {
   display: flex;
@@ -586,6 +595,26 @@
   overflow: auto;
 }
 
+/* Pixel info */
+.info-container {
+  display: flex;
+  box-shadow: none !important;
+}
+
+.info-panel {
+  display: none;
+  overflow: auto;
+  width: 300px;
+  max-height: 240px;
+  padding: 1rem;
+  background-color: white;
+  font-size: 1rem;
+}
+
+.info-panel select {
+  margin-bottom: 1rem;
+}
+
 /* Modal */
 .map-download-modal.ui.modal {
   margin: 0 !important;

package/src/components/UseCasesMapViewer/LegendWidget.jsx

@@ -75,6 +75,12 @@ class LegendWidget extends React.Component {
             break;
         }
       }
+
+      let legendRow = document.querySelectorAll('.esri-legend__layer-row');
+      for (let i = 0; i < legendRow.length; i++) {
+        legendRow[i].textContent.toLowerCase() === 'global' &&
+          legendRow[i].remove();
+      }
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.mapViewer.setState({ showMapMenu: true });