@eeacms/volto-arcgis-block 0.1.400 → 0.1.402

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.402](https://github.com/eea/volto-arcgis-block/compare/0.1.401...0.1.402) - 3 November 2025
+
+#### :hammer_and_wrench: Others
+
+- (bug): Using full extent takes user to correct area [Unai Bolivar - [`9ad099c`](https://github.com/eea/volto-arcgis-block/commit/9ad099c01aacc8f0c988b8e100048cabcbedaa38)]
+- (bug): Correcting full extent bug for CDSE product geometries and BBoxes [Unai Bolivar - [`579438b`](https://github.com/eea/volto-arcgis-block/commit/579438b64a077eb85c919a7ccd300ffa0e455153)]
+### [0.1.401](https://github.com/eea/volto-arcgis-block/compare/0.1.400...0.1.401) - 29 October 2025
+
+#### :hammer_and_wrench: Others
+
+- (bug): HOTPSOT widget bugs corrected for sentry and loading mapviewer without downloading unecessary files if widget is not in use [Unai Bolivar - [`d83bcdf`](https://github.com/eea/volto-arcgis-block/commit/d83bcdfafe6979e012ac848362269fe23277bd5b)]
 ### [0.1.400](https://github.com/eea/volto-arcgis-block/compare/0.1.399...0.1.400) - 29 October 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -75,14 +75,37 @@ class HotspotWidget extends React.Component {
       this.props.urls.klc_bbox;
     return esriRequest(url, {
       responseType: 'json',
-    }).then((response) => {
-      const responseJSON = response.data;
-      this.dataBBox = responseJSON;
-    });
+    })
+      .then((response) => {
+        const responseJSON = response.data;
+        if (Array.isArray(responseJSON)) {
+          this.dataBBox = responseJSON;
+        } else {
+          this.dataBBox = [];
+        }
+      })
+      .catch(async () => {
+        try {
+          const res = await fetch(url, { credentials: 'same-origin' });
+          const text = await res.text();
+          const start = text.indexOf('[');
+          const end = text.lastIndexOf(']');
+          if (start !== -1 && end !== -1) {
+            const json = JSON.parse(text.substring(start, end + 1));
+            this.dataBBox = Array.isArray(json) ? json : [];
+          } else {
+            this.dataBBox = [];
+          }
+        } catch (_) {
+          this.dataBBox = [];
+        }
+      });
   };
 
   setBBoxCoordinates = (data) => {
+    if (!data || !Array.isArray(data)) return;
     let klc_array = data.find((e) => e.klc_code === this.dataKlc_code);
+    if (!klc_array || !klc_array.bbox) return;
     let klc_bbox_coordinates = klc_array.bbox.split(',');
     let xmin_ymin = klc_bbox_coordinates[0].split(' ');
     let xmax_ymax = klc_bbox_coordinates[1].split(' ');
@@ -92,10 +115,6 @@ class HotspotWidget extends React.Component {
       ymin: this.mapCfg.geometryZoomIn.ymin,
       xmax: this.mapCfg.geometryZoomIn.xmax,
       ymax: this.mapCfg.geometryZoomIn.ymax,
-      // xmin: -200,
-      // ymin: -85,
-      // xmax: 200,
-      // ymax: 85,
       spatialReference: 4326,
     });
     this.props.view.constraints.geometry = constraintExtent;
@@ -205,19 +224,15 @@ class HotspotWidget extends React.Component {
     typeLegend,
     selectBoxTime,
   ) {
-    //sweep the old filtered data
+    if (!bboxData || !Array.isArray(bboxData)) return;
     if (filteredLayersData[typeLegend] !== undefined) {
       delete filteredLayersData[typeLegend];
     }
-    //Find the bbox data for the chosen region
     let klc_array = bboxData.find((e) => e.klc_code === this.dataKlc_code);
-
-    //Parse the bbox data into finer detail
+    if (!klc_array || !klc_array.bbox) return;
     let klc_bbox_coordinates = klc_array.bbox.split(',');
     let xmin_ymin = klc_bbox_coordinates[0].split(' ');
     let xmax_ymax = klc_bbox_coordinates[1].split(' ');
-
-    //Add the filtered data to the filteredLayersData object
     filteredLayersData[typeLegend] = {
       klc_code: this.dataKlc_code,
       year: selectBoxTime,
@@ -242,7 +257,9 @@ class HotspotWidget extends React.Component {
       this.props.hotspotData && this.props.hotspotData['filteredLayers']
         ? Object.keys(this.props.hotspotData['filteredLayers'])
         : [];
-    let filteredLayersData = this.props.hotspotData['filteredLayerData'] || [];
+    let filteredLayersData =
+      (this.props.hotspotData && this.props.hotspotData['filteredLayerData']) ||
+      [];
     let layersToAdd = {};
     let bookmarkHotspotFilter = JSON.parse(
       localStorage.getItem('bookmarkHotspotFilter'),
@@ -441,9 +458,14 @@ class HotspotWidget extends React.Component {
   }
 
   filteredLayersToHotspotData(layerIds, layersData) {
-    let updatedFilteredLayers = this.props.hotspotData['filteredLayers'] || {};
-    let filteredLayersData = this.props.hotspotData['filteredLayersData'] || {};
-    let newHotspotData = this.props.hotspotData;
+    let updatedFilteredLayers =
+      (this.props.hotspotData && this.props.hotspotData['filteredLayers']) ||
+      {};
+    let filteredLayersData =
+      (this.props.hotspotData &&
+        this.props.hotspotData['filteredLayersData']) ||
+      {};
+    let newHotspotData = this.props.hotspotData || {};
     layerIds.forEach((layerId) => {
       let layer = Object.entries(this.layers).find(
         ([key, value]) => key === layerId,
@@ -536,7 +558,10 @@ class HotspotWidget extends React.Component {
 
   renderApplyFilterButton() {
     let typeFilter = [];
-    const activeLayers = Object.keys(this.props.hotspotData['activeLayers']);
+    const activeLayers =
+      this.props.hotspotData && this.props.hotspotData['activeLayers']
+        ? Object.keys(this.props.hotspotData['activeLayers'])
+        : [];
 
     if (
       this.container.current.querySelector('.presentLandCoverContainer').style

package/src/components/MapViewer/MenuWidget.jsx

@@ -2888,7 +2888,7 @@ class MenuWidget extends React.Component {
         ) {
           this.extentInitiated = true;
           // setTimeout(() => {
-          this.FullExtentDataset(elem);
+          this.fullExtentDataset(elem);
           // }, 2000);
         }
       }
@@ -3879,24 +3879,69 @@ class MenuWidget extends React.Component {
 
   async datasetFullExtentFromPayload(payload) {
     if (!payload) return null;
-    if (Array.isArray(payload.extent) && payload.extent.length === 4) {
+    if (
+      payload.metadata &&
+      Array.isArray(payload.metadata.bbox) &&
+      payload.metadata.bbox.length === 4
+    ) {
+      const srName = payload.metadata?.geometry?.crs?.properties?.name || '';
+      const isCRS84 =
+        typeof srName === 'string' && srName.toUpperCase().includes('CRS84');
       return new Extent({
-        xmin: payload.extent[0],
-        ymin: payload.extent[1],
-        xmax: payload.extent[2],
-        ymax: payload.extent[3],
-        spatialReference: { wkid: 3857 },
+        xmin: payload.metadata.bbox[0],
+        ymin: payload.metadata.bbox[1],
+        xmax: payload.metadata.bbox[2],
+        ymax: payload.metadata.bbox[3],
+        spatialReference: isCRS84 ? { wkid: 4326 } : { wkid: 3857 },
       });
-    }
-    if (payload.geometry && payload.geometry.coordinates) {
-      return await this.createExtentFromCoordinates(
-        payload.geometry.coordinates,
-      );
+    } else if (
+      payload.metadata &&
+      payload.metadata.geometry &&
+      payload.metadata.geometry.coordinates
+    ) {
+      const srName = payload.metadata?.geometry?.crs?.properties?.name || '';
+      const isCRS84 =
+        typeof srName === 'string' && srName.toUpperCase().includes('CRS84');
+      const coords = payload.metadata.geometry.coordinates;
+      let xmin = Infinity,
+        ymin = Infinity,
+        xmax = -Infinity,
+        ymax = -Infinity;
+      const walk = (arr) => {
+        if (!Array.isArray(arr)) return;
+        if (typeof arr[0] === 'number' && typeof arr[1] === 'number') {
+          const x = Number(arr[0]);
+          const y = Number(arr[1]);
+          if (isFinite(x) && isFinite(y)) {
+            if (x < xmin) xmin = x;
+            if (x > xmax) xmax = x;
+            if (y < ymin) ymin = y;
+            if (y > ymax) ymax = y;
+          }
+          return;
+        }
+        for (let i = 0; i < arr.length; i++) walk(arr[i]);
+      };
+      walk(coords);
+      if (
+        isFinite(xmin) &&
+        isFinite(ymin) &&
+        isFinite(xmax) &&
+        isFinite(ymax)
+      ) {
+        return new Extent({
+          xmin: xmin,
+          ymin: ymin,
+          xmax: xmax,
+          ymax: ymax,
+          spatialReference: isCRS84 ? { wkid: 4326 } : { wkid: 3857 },
+        });
+      }
     }
     return null;
   }
 
-  async FullExtentDataset(elem) {
+  async fullExtentDataset(elem) {
     const serviceLayer = this.state.wmsUserServiceLayers.find(
       (layer) => layer.LayerId === elem.id,
     );
@@ -3910,12 +3955,47 @@ class MenuWidget extends React.Component {
       ['/ogc/', '/cdse/'].some((s) => this.url.toLowerCase().includes(s));
     let BBoxes = {};
     if (isCDSE) {
-      const d =
+      let d =
         this.layers[elem.id]?.DatasetDownloadInformation ||
         this.layers[elem.id]?.datasetDownloadInformation ||
+        this.layers[elem.id]?.dataset_download_information ||
         {};
-      const byoc =
-        d && d.items && d.items[0] ? d.items[0].byoc_collection : null;
+      let byoc = d && d.items && d.items[0] ? d.items[0].byoc_collection : null;
+
+      if (!byoc) {
+        let parentId = elem.getAttribute('parentid');
+        let datasetInput = document.getElementById(parentId);
+        let datasetContainer = datasetInput
+          ? datasetInput.closest('.map-menu-dataset-dropdown')
+          : null;
+        let datasetId = datasetContainer
+          ? datasetContainer.getAttribute('datasetid')
+          : null;
+        if (datasetId && this.compCfg && Array.isArray(this.compCfg)) {
+          for (let i = 0; i < this.compCfg.length; i++) {
+            const comp = this.compCfg[i];
+            if (!comp || !comp.Products) continue;
+            for (let j = 0; j < comp.Products.length; j++) {
+              const prod = comp.Products[j];
+              if (!prod || !prod.Datasets) continue;
+              for (let k = 0; k < prod.Datasets.length; k++) {
+                const ds = prod.Datasets[k];
+                if (ds && ds.DatasetId === datasetId) {
+                  const info =
+                    ds.dataset_download_information ||
+                    ds.DatasetDownloadInformation ||
+                    {};
+                  if (info && info.items && info.items[0]) {
+                    byoc = info.items[0].byoc_collection || byoc;
+                  }
+                  break;
+                }
+              }
+            }
+          }
+        }
+      }
+
       if (byoc && this.props.fetchCatalogApiDates) {
         let payload =
           this.props.catalogapi &&
@@ -3937,7 +4017,7 @@ class MenuWidget extends React.Component {
       BBoxes = await this.parseBBOXMAPSERVER(this.layers[elem.id]);
     } else if (this.url?.toLowerCase().includes('wms') || serviceLayer) {
       await this.getCapabilities(this.url, 'wms');
-      this.parseBBOXWMS(this.xml);
+      BBoxes = this.parseBBOXWMS(this.xml);
     } else if (this.url?.toLowerCase().includes('wmts')) {
       await this.getCapabilities(this.url, 'wmts');
       BBoxes = this.parseBBOXWMTS(this.xml);
@@ -3949,7 +4029,7 @@ class MenuWidget extends React.Component {
         ymin: -20037508.342789,
         xmax: 20037508.342789,
         ymax: 20037508.342789,
-        spatialReference: 3857, // by default wkid 4326
+        spatialReference: 3857,
       });
     } else {
       myExtent = new Extent({
@@ -3957,36 +4037,9 @@ class MenuWidget extends React.Component {
         ymin: BBoxes['dataset'].ymin,
         xmax: BBoxes['dataset'].xmax,
         ymax: BBoxes['dataset'].ymax,
-        // spatialReference: 4326 // by default wkid 4326
       });
     }
-    if (isCDSE) {
-      const maxMppAllowed = 23628.54;
-      const vw = this.view && this.view.width ? this.view.width : 0;
-      const vh = this.view && this.view.height ? this.view.height : 0;
-      let extentWM = myExtent;
-      try {
-        if (
-          !(
-            myExtent.spatialReference && myExtent.spatialReference.wkid === 3857
-          )
-        ) {
-          extentWM = WebMercatorUtils.geographicToWebMercator(myExtent);
-        }
-      } catch (e) {}
-      if (vw > 0 && vh > 0) {
-        const mppX = (extentWM.xmax - extentWM.xmin) / vw;
-        const mppY = (extentWM.ymax - extentWM.ymin) / vh;
-        const mpp = Math.max(mppX, mppY);
-        if (mpp > maxMppAllowed) {
-          const cx = (myExtent.xmin + myExtent.xmax) / 2;
-          const cy = (myExtent.ymin + myExtent.ymax) / 2;
-          this.view.goTo({ center: [cx, cy], zoom: 3 });
-          return;
-        }
-      }
-    }
-    this.view.goTo(myExtent); //
+    this.view.goTo(myExtent);
   }
 
   async fullExtent(elem) {
@@ -4008,7 +4061,10 @@ class MenuWidget extends React.Component {
     let firstLayer;
     let landCoverAndLandUseMapping = document.querySelector('#component_0');
     let productIds = [];
-    if (landCoverAndLandUseMapping) {
+    if (
+      landCoverAndLandUseMapping &&
+      landCoverAndLandUseMapping.contains(document.activeElement)
+    ) {
       const productElements = landCoverAndLandUseMapping.querySelectorAll(
         '.map-menu-product-dropdown',
       );
@@ -4020,12 +4076,47 @@ class MenuWidget extends React.Component {
       });
     }
     if (isCDSE) {
-      const d =
+      let d =
         this.layers[elem.id]?.DatasetDownloadInformation ||
         this.layers[elem.id]?.datasetDownloadInformation ||
+        this.layers[elem.id]?.dataset_download_information ||
         {};
-      const byoc =
-        d && d.items && d.items[0] ? d.items[0].byoc_collection : null;
+      let byoc = d && d.items && d.items[0] ? d.items[0].byoc_collection : null;
+
+      if (!byoc) {
+        let parentId = elem.getAttribute('parentid');
+        let datasetInput = document.getElementById(parentId);
+        let datasetContainer = datasetInput
+          ? datasetInput.closest('.map-menu-dataset-dropdown')
+          : null;
+        let datasetId = datasetContainer
+          ? datasetContainer.getAttribute('datasetid')
+          : null;
+        if (datasetId && this.compCfg && Array.isArray(this.compCfg)) {
+          for (let i = 0; i < this.compCfg.length; i++) {
+            const comp = this.compCfg[i];
+            if (!comp || !comp.Products) continue;
+            for (let j = 0; j < comp.Products.length; j++) {
+              const prod = comp.Products[j];
+              if (!prod || !prod.Datasets) continue;
+              for (let k = 0; k < prod.Datasets.length; k++) {
+                const ds = prod.Datasets[k];
+                if (ds && ds.DatasetId === datasetId) {
+                  const info =
+                    ds.dataset_download_information ||
+                    ds.DatasetDownloadInformation ||
+                    {};
+                  if (info && info.items && info.items[0]) {
+                    byoc = info.items[0].byoc_collection || byoc;
+                  }
+                  break;
+                }
+              }
+            }
+          }
+        }
+      }
+
       if (byoc && this.props.fetchCatalogApiDates) {
         let payload =
           this.props.catalogapi &&
@@ -4044,13 +4135,12 @@ class MenuWidget extends React.Component {
       }
       return;
     } else if (this.productId?.includes('333e4100b79045daa0ff16466ac83b7f')) {
-      //global dynamic landCover
       this.findDatasetBoundingBox(elem);
 
       BBoxes = this.parseBBOXJSON(this.dataBBox);
     } else if (
-      this.productId?.includes('fe8209dffe13454891cea05998c8e456') || // Low Resolution Vegetation Parameters
-      this.productId?.includes('8914fde2241a4035818af8f0264fd55e') // Water Parameters
+      this.productId?.includes('fe8209dffe13454891cea05998c8e456') ||
+      this.productId?.includes('8914fde2241a4035818af8f0264fd55e')
     ) {
       if (
         this.layers[elem.id].fullExtents &&
@@ -4063,7 +4153,7 @@ class MenuWidget extends React.Component {
           ymin: -20037508.342789,
           xmax: 20037508.342789,
           ymax: 20037508.342789,
-          spatialReference: 3857, // by default wkid 4326
+          spatialReference: 3857,
         });
         this.view.goTo(myExtent);
       }
@@ -4090,7 +4180,6 @@ class MenuWidget extends React.Component {
         firstLayer = BBoxes.dataset;
       }
       if (productIds?.includes(this.productId)) {
-        // Your code here for when productIds includes this.productId
         let str = elem.parentNode.outerHTML;
         let match = str.match(/layerid="([a-zA-Z0-9_:-]+)"/);
         let layerid = match ? match[1] : null;
@@ -4099,8 +4188,6 @@ class MenuWidget extends React.Component {
           this.productId?.includes('130299ac96e54c30a12edd575eff80f7') &&
           layerid.length <= 2
         ) {
-          //let match = str.match(/layerid="(\d+)"/);
-          //let layerid = match ? match[1] : null;
           if (this.url?.toLowerCase().endsWith('mapserver')) {
             switch (layerid) {
               case '1':
@@ -4174,7 +4261,6 @@ class MenuWidget extends React.Component {
       ) {
         firstLayer = BBoxes['all_present_lc_a_pol'];
       } else if (serviceLayer) {
-        // Full extent treatment for service layers
         firstLayer = BBoxes['dataset'];
       } else {
         firstLayer = BBoxes[elem.attributes.layerid.value];
@@ -4185,9 +4271,8 @@ class MenuWidget extends React.Component {
         ymin: firstLayer.ymin,
         xmax: firstLayer.xmax,
         ymax: firstLayer.ymax,
-        // spatialReference: 4326 // by default wkid 4326
       });
-      this.view.goTo(myExtent); //
+      this.view.goTo(myExtent);
     }
     this.url = null;
   }