@eeacms/volto-arcgis-block 0.1.290 → 0.1.292

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.292](https://github.com/eea/volto-arcgis-block/compare/0.1.291...0.1.292) - 28 June 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-3254 (task): clean console statements. [Unai Bolivar - [`7058e29`](https://github.com/eea/volto-arcgis-block/commit/7058e293a6c546496035875bfda1348e3fb97e45)]
+- CLMS-3254 (task): added CSV to file formats supported span text at the bottom of the area widget [Unai Bolivar - [`96fedac`](https://github.com/eea/volto-arcgis-block/commit/96fedac5bf59edba736d56c75b4c467e8f261416)]
+- CLMS-3254 (feat): Completed CSV file upload [Unai Bolivar - [`b828893`](https://github.com/eea/volto-arcgis-block/commit/b828893edc8b147f779b79ed33935b9ab253bf48)]
+- CLMS-3254 (feat): Checking layer for extent and wkid [Unai Bolivar - [`cf6468a`](https://github.com/eea/volto-arcgis-block/commit/cf6468af5ede54807160be32449e7ecdbcfed819)]
+- CLMS-3254 (feat): CSV file upload renders points on map. [Unai Bolivar - [`abf28d1`](https://github.com/eea/volto-arcgis-block/commit/abf28d1c68580623113a059e15b0dd92a7535118)]
+### [0.1.291](https://github.com/eea/volto-arcgis-block/compare/0.1.290...0.1.291) - 20 June 2024
+
 ### [0.1.290](https://github.com/eea/volto-arcgis-block/compare/0.1.289...0.1.290) - 19 June 2024
 
 ### [0.1.289](https://github.com/eea/volto-arcgis-block/compare/0.1.288...0.1.289) - 18 June 2024

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -13,7 +13,8 @@ var Graphic,
   request,
   SimpleLineSymbol,
   SimpleFillSymbol,
-  SpatialReference;
+  SpatialReference,
+  Polygon;
 
 class AreaWidget extends React.Component {
   /**
@@ -65,6 +66,7 @@ class AreaWidget extends React.Component {
       'esri/symbols/SimpleLineSymbol',
       'esri/symbols/SimpleFillSymbol',
       'esri/geometry/SpatialReference',
+      'esri/geometry/Polygon',
     ]).then(
       ([
         _Graphic,
@@ -79,6 +81,7 @@ class AreaWidget extends React.Component {
         _SimpleLineSymbol,
         _SimpleFillSymbol,
         _SpatialReference,
+        _Polygon,
       ]) => {
         [
           Graphic,
@@ -93,6 +96,7 @@ class AreaWidget extends React.Component {
           SimpleLineSymbol,
           SimpleFillSymbol,
           SpatialReference,
+          Polygon,
         ] = [
           _Graphic,
           _Extent,
@@ -106,6 +110,7 @@ class AreaWidget extends React.Component {
           _SimpleLineSymbol,
           _SimpleFillSymbol,
           _SpatialReference,
+          _Polygon,
         ];
       },
     );
@@ -212,7 +217,7 @@ class AreaWidget extends React.Component {
     if (document.querySelector('#download_prepackage').checked) {
       this.setState({
         showInfoPopup: true,
-        infoPopupType: 'download',
+        infoPopupType: 'prepackage',
       });
     } else {
       this.setState({
@@ -292,6 +297,7 @@ class AreaWidget extends React.Component {
   // FILE UPLOAD HANDLERS
 
   // Trigger the file input click
+
   handleUploadClick = (event) => {
     event.preventDefault();
     this.fileInput.current.click();
@@ -299,19 +305,31 @@ class AreaWidget extends React.Component {
 
   handleFileUpload = (e) => {
     //Get the file name
+
     const fileName = e.target.value.toLowerCase();
 
     //Get the file size
+
     const fileSize = e.target.files[0].size;
 
     //Get the file from the form
+
     const file = document.getElementById('uploadForm');
 
+    //Get the file blob
+
+    const fileBlob = e.target.files[0];
+
+    //Create a new file reader
+
+    let reader = new FileReader();
+
     //List allowed file extensions
 
-    let fileExtensions = ['zip', 'geojson'];
+    let fileExtensions = ['zip', 'geojson', 'csv'];
 
     // Get the file extension
+
     let fileExtension = fileName.split('.').pop();
 
     //Check if the file format is not supported
@@ -324,10 +342,13 @@ class AreaWidget extends React.Component {
       return;
     }
 
-    // Check if the file is a geojson and the file size is over the 10mb file size limit
+    // Check if the file format is geojson or csv and the file size is over the 10mb file size limit
     // or file is a shape file and the file size is over the 2mb file size limit
 
-    if (fileSize > 10485760 && fileExtension === 'geojson') {
+    if (
+      fileSize > 10485760 &&
+      (fileExtension === 'geojson' || fileExtension === 'csv')
+    ) {
       this.setState({
         showInfoPopup: true,
         infoPopupType: 'fileLimit',
@@ -350,14 +371,17 @@ class AreaWidget extends React.Component {
       case 'geojson':
         this.generateFeatureCollection(fileName, file, 'geojson');
         break;
-      //case 'csv':
-      //this.generateFeatureCollection(
-      //  fileName,
-      //  file,
-      //  'csv',
-      //);
-      //  reader.readAsText(fileBlob);
-      //  break;
+      case 'csv':
+        //this.generateFeatureCollection(
+        //  fileName,
+        //  file,
+        //  'csv',
+        //);
+        reader.readAsText(fileBlob);
+        reader.onload = () => {
+          this.handleCsv(reader.result);
+        };
+        break;
       default:
         break;
     }
@@ -580,7 +604,7 @@ class AreaWidget extends React.Component {
 
   //Display CSV on the map
 
-  handleCsv(data) {
+  async handleCsv(data) {
     //Create a CSV layer
     const blob = new Blob([data], {
       type: 'plain/text',
@@ -594,50 +618,157 @@ class AreaWidget extends React.Component {
       title: 'uploadLayer',
     });
 
-    //Query all features insisde the CSV layer
-
-    //csvLayer.load().then(function(){
-    //  let query = new Query({
-    //    where: "mag > 5",
-    //    returnGeometry: true
-    //  });
-    //
-    //  return csvLayer.queryFeatures(query);
-    //})
-    //.then(function(results){
-    //  console.log(results);
-    //})
-    //.catch(function (error) {
-    //  console.error("From CSV query: ", error);
-    //});
-    //Check if the file has the correct spatial reference
-    if (this.checkWkid(csvLayer?.spatialReference) === false) return;
-
-    //Check if the file extent is larger than the limit
-    //let geometry = new Extent({
-    //  xmin: data?.features[0]?.geometry.bbox[0],
-    //  xmax: data?.features[0]?.geometry.bbox[1],
-    //  ymin: data?.features[0]?.geometry.bbox[2],
-    //  ymax: data?.features[0]?.geometry.bbox[3],
-    //  spatialReference: { wkid: 4326 },
-    //});
+    // Set a simple renderer on the layer
+
+    csvLayer.renderer = {
+      type: 'simple', // autocasts as new SimpleRenderer()
+      symbol: {
+        type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
+        size: 6,
+        color: 'black',
+        outline: {
+          // autocasts as new SimpleLineSymbol()
+          width: 0.5,
+          color: 'white',
+        },
+      },
+    };
 
-    //If checkExtent returns false, add the layer to the map
-    //if (this.checkExtent(geometry)) {
-    //  this.setState({
-    //    showInfoPopup: true,
-    //    infoPopupType: 'fullDataset',
-    //  });
-    //} else {
-    this.removeFileUploadedLayer();
-    this.fileUploadLayer = csvLayer;
-    this.removeNutsLayers();
-    this.props.map.add(this.fileUploadLayer);
-    this.setState({
-      showInfoPopup: true,
-      infoPopupType: 'download',
-    });
-    //}
+    let csvFeatures, csvFeatureCount, csvExtent;
+
+    //Query the CSV layer
+
+    try {
+      await csvLayer.load();
+      const results = await Promise.all([
+        csvLayer.queryFeatures(),
+        csvLayer.queryFeatureCount(),
+        csvLayer.queryExtent(),
+      ]);
+
+      csvFeatures = results[0];
+      csvFeatureCount = results[1];
+      csvExtent = results[2];
+
+      //Check if the file has the correct spatial reference
+
+      if (this.checkWkid(csvLayer?.spatialReference) === false) return;
+
+      //Check if the file extent is larger than the limit
+      //If checkExtent() is false, add the layer to the map
+
+      if (this.checkExtent(csvExtent.extent)) {
+        this.setState({
+          showInfoPopup: true,
+          infoPopupType: 'fullDataset',
+        });
+      } else {
+        //Draw a polygon around of the CSVlayer Features data
+
+        let allRings = [];
+        let currentRing = [];
+        let startingPoint = null;
+
+        for (let i = 0; i < csvFeatureCount; i++) {
+          const currentPoint = [
+            csvFeatures.features[i].geometry.x,
+            csvFeatures.features[i].geometry.y,
+          ];
+          if (!startingPoint) {
+            startingPoint = currentPoint;
+            currentRing.push(currentPoint);
+          } else if (
+            startingPoint[0] === currentPoint[0] &&
+            startingPoint[1] === currentPoint[1]
+          ) {
+            allRings.push(currentRing);
+            currentRing = [];
+            startingPoint = null;
+          } else {
+            currentRing.push(currentPoint);
+          }
+        }
+
+        if (currentRing.length > 0) {
+          allRings.push(currentRing);
+        }
+
+        let idPolygon = new Polygon({
+          isSelfIntersecting: false,
+          rings: allRings,
+          spatialReference: csvExtent.spatialReference,
+          //set type as multi polygon
+        });
+
+        //Draw a graphic using the polyId polygon data as the geometry
+
+        const polygonSymbol = {
+          type: 'simple-fill', // autocasts as new SimpleFillSymbol()
+          color: [234, 168, 72, 0.8],
+          outline: {
+            // autocasts as new SimpleLineSymbol()
+            color: '#000000',
+            width: 0.1,
+          },
+        };
+
+        let polygonGraphic = new Graphic({
+          geometry: idPolygon,
+          symbol: polygonSymbol,
+        });
+
+        //Clear any previously saved file upload data and save the uploaded layer to the component props for reference
+
+        this.removeFileUploadedLayer();
+        this.fileUploadLayer = {
+          layers: CSVLayer,
+          sourceGraphics: polygonGraphic,
+        };
+
+        //Clean the map before adding the graphic
+
+        this.removeNutsLayers();
+
+        //Add the polygon graphic to the map
+
+        this.props.view.graphics.add(polygonGraphic);
+        //this.props.map.add(this.fileUploadLayer);
+
+        //Refresh the map view
+
+        this.props.view.goTo(polygonGraphic).catch((error) => {
+          //console.error('From handleCsv function', error);
+        });
+
+        //Send the area to the parent component
+
+        this.props.updateArea({
+          origin: { x: csvExtent.extent.xmin, y: csvExtent.extent.ymin },
+          end: { x: csvExtent.extent.xmax, y: csvExtent.extent.ymax },
+        });
+
+        //re order the layer in the map
+
+        let index = this.getHighestIndex();
+        this.props.map.reorder(polygonGraphic, index + 1);
+
+        //Refresh the map view
+
+        this.setState({
+          showInfoPopup: true,
+          infoPopupType: 'download',
+        });
+
+        //Save file upload layer to session storage as a tag for adding item to cart action
+
+        sessionStorage.setItem(
+          'fileUploadLayer',
+          JSON.stringify(this.fileUploadLayer),
+        );
+      }
+    } catch (error) {
+      //console.error('Error: ', error);
+    }
   }
 
   checkWkid(spatialReference) {
@@ -851,7 +982,9 @@ class AreaWidget extends React.Component {
       'none';
   }
   areaSearch() {
-    let searchText = document.querySelector('#area-searchtext').value;
+    let searchText = document
+      .querySelector('#area-searchtext')
+      .value.toUpperCase();
     if (searchText.length <= 2) {
       this.loadNutsService('nuts0', [0]);
       this.loadCountriesService('nuts0');
@@ -872,15 +1005,25 @@ class AreaWidget extends React.Component {
     }
     let found = false;
     let count = this.nutsGroupLayer.layers.items.length;
-    const queryParams = this.nutsGroupLayer.layers.items[0].createQuery();
-    queryParams.where = `(NUTS_ID = '${searchText}')`;
-    queryParams.outSpatialReference = this.props.view.spatialReference;
     document.querySelector('.no-result-message').style.display = 'none';
     this.nutsGroupLayer.layers.items.forEach((item) => {
+      const queryParams = item.createQuery();
+      if (
+        item.url ===
+        'https://land.discomap.eea.europa.eu/arcgis/rest/services/CLMS_Portal/World_countries_except_EU37/MapServer'
+      ) {
+        queryParams.where = `(ISO_2DIGIT = '${searchText}')`;
+      } else {
+        queryParams.where = `(NUTS_ID = '${searchText}')`;
+      }
+      queryParams.outSpatialReference = this.props.view.spatialReference;
       item.queryFeatures(queryParams).then((response) => {
         count = count - 1;
         response.features.forEach((feature) => {
-          if (feature.attributes.NUTS_ID === searchText) {
+          if (
+            feature.attributes.NUTS_ID === searchText ||
+            feature.attributes.ISO_2DIGIT === searchText
+          ) {
             found = true;
             this.props.updateArea(feature);
             let symbol = new SimpleFillSymbol(
@@ -1278,7 +1421,9 @@ class AreaWidget extends React.Component {
                   >
                     <div className="field">
                       <label className="file-upload">
-                        <span>File formats supported: shp(zip), geojson</span>
+                        <span>
+                          File formats supported: shp(zip), geojson, CSV
+                        </span>
                         <input
                           type="file"
                           name="file"
@@ -1327,6 +1472,17 @@ class AreaWidget extends React.Component {
                       </div>
                     </>
                   )}
+                  {this.state.infoPopupType === 'prepackage' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'download']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        Click on the download icon on “Products and datasets” to
+                        continue
+                      </div>
+                    </>
+                  )}
                   {this.state.infoPopupType === 'fullDataset' && (
                     <>
                       <span className="drawRectanglePopup-icon">