@eeacms/volto-arcgis-block 0.1.455 → 0.1.456

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.456](https://github.com/eea/volto-arcgis-block/compare/0.1.455...0.1.456) - 11 June 2026
+
+#### :hammer_and_wrench: Others
+
+- CLMS-295764 (feat): loadable comented [Urkorue - [`fa3acd8`](https://github.com/eea/volto-arcgis-block/commit/fa3acd8c5827630e3e36e1d01f1339ddcfd5594c)]
+- CLMS-295764 (feat): highchart comented [Urkorue - [`fde0d0d`](https://github.com/eea/volto-arcgis-block/commit/fde0d0d7aa446974f4cfc78868dc6c3dbd1cf109)]
 ### [0.1.455](https://github.com/eea/volto-arcgis-block/compare/0.1.454...0.1.455) - 9 June 2026
 
 ### [0.1.454](https://github.com/eea/volto-arcgis-block/compare/0.1.453...0.1.454) - 8 June 2026

package/package.json

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

package/src/components/MapViewer/InfoWidget.jsx

@@ -1,7 +1,7 @@
 import React, { createRef } from 'react';
 import { loadModules } from 'esri-loader';
 import { Loader } from 'semantic-ui-react';
-import loadable from '@loadable/component';
+//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';
@@ -10,7 +10,7 @@ var GeometryEngine, Graphic, esriRequest;
 
 // import Highcharts from 'highcharts';
 
-const HighchartsReact = loadable(() => import('highcharts-react-official'));
+//const HighchartsReact = loadable(() => import('highcharts-react-official'));
 class InfoWidget extends React.Component {
   /**
    * Creator of the InfoWidget widget class
@@ -311,15 +311,22 @@ class InfoWidget extends React.Component {
                         };
                         break;
                       case 'wmts':
-                        if (
-                          layers[index]?.ViewService &&
-                          layers[index].ViewService.toLowerCase().includes(
-                            'cdse',
-                          )
-                        ) {
-                          properties = data;
+                        // if (
+                        //   layers[index]?.ViewService &&
+                        //   layers[index].ViewService.toLowerCase().includes(
+                        //     'cdse',
+                        //   )
+                        // ) {
+                        //   properties = data;
+                        // }
+                        if (data.type === 'FeatureCollection') {
+                          if (data.features.length) {
+                            let obj = data.features.map((a) => {
+                              return a.properties;
+                            });
+                            properties = this.transformWmtsData(obj);
+                          }
                         }
-                        properties = data;
                         this.infoData[index] = {
                           title: layer.title,
                           data: properties,
@@ -570,14 +577,15 @@ class InfoWidget extends React.Component {
   }
 
   identifyWMTS(layer, event) {
-    let layerId = this.getLayerName(layer);
+    let layerId = layer.activeLayer.id;
     let url = layer.featureInfoUrl ? layer.featureInfoUrl : layer.url;
+    let featureInfoUrl = url.replace('/cdse/', '/cdse/wms/');
     return this.wmsCapabilities(url).then((xml) => {
       let version = layer.version;
       let format = this.parseFormat(xml, layerId);
       let times = '';
       let nTimes = 1;
-      return esriRequest(url, {
+      return esriRequest(featureInfoUrl, {
         responseType: 'html',
         sync: 'true',
         query: {
@@ -839,6 +847,49 @@ class InfoWidget extends React.Component {
     return values;
   }
 
+  transformWmtsData(obj) {
+    let values = { timeFields: {}, data: {}, variables: {}, tableData: {} };
+    let startField = Object.keys(obj[0]).find(
+      (a, i) =>
+        a.toUpperCase().includes('DATE') &&
+        !isNaN(parseInt(Object.values(obj[0])[i])),
+    );
+    values.timeFields['start'] = startField;
+    values.tableData['fields'] = Object.keys(obj[0]);
+    values.tableData['values'] = obj.map((a) => {
+      return Object.entries(a);
+    });
+    let fields = Object.keys(obj[0]).filter((a, i) => {
+      return (
+        !isNaN(parseInt(Object.values(obj[0])[i])) &&
+        a.toUpperCase() !== 'OBJECTID' &&
+        !a.toUpperCase().includes('DATE')
+      );
+    });
+    let field = fields[0];
+    values.variables = { options: fields, selected: field };
+    values.timeFields['values'] = obj.map((a, i) => {
+      let date = {};
+      Object.entries(obj[i]).forEach(([key, value]) => {
+        if (key === startField) {
+          date[key] = value;
+        }
+      });
+      return date;
+    });
+    values.data['outFields'] = field;
+    values.data['values'] = obj.map((a, i) => {
+      let x = {};
+      Object.entries(obj[i]).forEach(([key, value]) => {
+        if (fields.includes(key)) {
+          x[key] = parseFloat(value);
+        }
+      });
+      return x;
+    });
+    return values;
+  }
+
   addMarker(evt) {
     this.removeMarker();
     let lat = evt.mapPoint.latitude;
@@ -1367,14 +1418,14 @@ class InfoWidget extends React.Component {
                     )}
                     {this.state.pixelInfo && !noData && (
                       <>
-                        {this.loadVariableSelector(this.state.layerIndex)}
+                        {/* {this.loadVariableSelector(this.state.layerIndex)}
                         {this.Highcharts && (
                           <HighchartsReact
                             highcharts={this.Highcharts}
                             options={this.loadInfoChart(this.state.layerIndex)}
                           />
                         )}
-                        {this.loadStatisticsSelector(this.state.layerIndex)}
+                        {this.loadStatisticsSelector(this.state.layerIndex)} */}
                         {this.loadTimeInfoTable(this.state.layerIndex)}
                       </>
                     )}