@eeacms/volto-arcgis-block 0.1.470 → 0.1.472

package/CHANGELOG.md

@@ -4,8 +4,26 @@ 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.472](https://github.com/eea/volto-arcgis-block/compare/0.1.471...0.1.472) - 14 August 2026
+
+#### :hammer_and_wrench: Others
+
+- (bug): grouplayers do not look like wmts layers keeping path for these clean [Unai Bolivar - [`f146798`](https://github.com/eea/volto-arcgis-block/commit/f146798adb952ca741a28115e3244d8fc58ac1fb)]
+### [0.1.471](https://github.com/eea/volto-arcgis-block/compare/0.1.470...0.1.471) - 14 August 2026
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`8f37c43`](https://github.com/eea/volto-arcgis-block/commit/8f37c43a97b75692ffe14653b8295408e3b1b157)]
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #1197 from eea/develop [Unai Bolivar - [`d02c7a5`](https://github.com/eea/volto-arcgis-block/commit/d02c7a558aea93dd328a69ace2e90f5edec26b93)]
+- (bug): fix time slider integration for dual resolution layer datasets [Unai Bolivar - [`c12c740`](https://github.com/eea/volto-arcgis-block/commit/c12c740f7f5e04dcc14f7cdecb7488832c5b61ab)]
 ### [0.1.470](https://github.com/eea/volto-arcgis-block/compare/0.1.469...0.1.470) - 13 August 2026
 
+#### :hammer_and_wrench: Others
+
+- Merge pull request #1195 from eea/develop [Unai Bolivar - [`83e7db1`](https://github.com/eea/volto-arcgis-block/commit/83e7db1ea05eafe8acecbe6169f596f65ed96df5)]
 ### [0.1.469](https://github.com/eea/volto-arcgis-block/compare/0.1.468...0.1.469) - 12 August 2026
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/MenuWidget.jsx

@@ -952,7 +952,17 @@ class MenuWidget extends React.Component {
     }
   }
 
-  supportDualLayers(layer, inheritedIndexLayer, datasetCollectionId) {
+  supportDualLayers(
+    layer,
+    inheritedIndexLayer,
+    datasetCollectionId,
+    isTimeSeries,
+    datasetDownloadInformation,
+    viewService,
+    datasetId,
+    datasetTitle,
+    productId,
+  ) {
     const resolutionData = layer.resolution_data || {};
     const thresholdScale = Number(resolutionData.thresholdScale);
     const normalizeScaleValue = (scaleValue, fallbackValue = 0) => {
@@ -991,6 +1001,7 @@ class MenuWidget extends React.Component {
         catalogByoc: null,
         evalscript: null,
         processUrl: '/++api++/@proxyrunprocessapi',
+        selectedTimeRange: null,
       },
 
       _resolveCatalogDateRange: function (options) {
@@ -1099,94 +1110,97 @@ class MenuWidget extends React.Component {
         const width = this.tileInfo.size[0];
         const height = this.tileInfo.size[1];
 
-        return this._resolveCatalogDateRange(options).then(
-          (catalogDateRange) => {
-            const resolvedTimeRangeFrom = catalogDateRange?.from || null;
-            const resolvedTimeRangeTo = catalogDateRange?.to || null;
-            const timeRange = {};
-            if (resolvedTimeRangeFrom) {
-              timeRange.from = resolvedTimeRangeFrom;
-            }
-            if (resolvedTimeRangeTo) {
-              timeRange.to = resolvedTimeRangeTo;
-            }
-            const dataFilter = {};
-            if (Object.keys(timeRange).length) {
-              dataFilter.timeRange = timeRange;
-            }
+        const selectedTimeRange = this.selectedTimeRange || null;
+        const resolveTimeRange = selectedTimeRange
+          ? Promise.resolve(selectedTimeRange)
+          : this._resolveCatalogDateRange(options);
+
+        return resolveTimeRange.then((catalogDateRange) => {
+          const resolvedTimeRangeFrom = catalogDateRange?.from || null;
+          const resolvedTimeRangeTo = catalogDateRange?.to || null;
+          const timeRange = {};
+          if (resolvedTimeRangeFrom) {
+            timeRange.from = resolvedTimeRangeFrom;
+          }
+          if (resolvedTimeRangeTo) {
+            timeRange.to = resolvedTimeRangeTo;
+          }
+          const dataFilter = {};
+          if (Object.keys(timeRange).length) {
+            dataFilter.timeRange = timeRange;
+          }
 
-            const payload = {
-              input: {
-                bounds: {
-                  bbox: [
-                    bbox3857.west,
-                    bbox3857.south,
-                    bbox3857.east,
-                    bbox3857.north,
-                  ],
-                  properties: {
-                    crs: 'http://www.opengis.net/def/crs/EPSG/0/3857',
-                  },
-                },
-                data: [
-                  {
-                    type: this.collectionId,
-                    ...(Object.keys(dataFilter).length ? { dataFilter } : {}),
-                  },
-                ],
-              },
-              output: {
-                width: width,
-                height: height,
-                responses: [
-                  {
-                    identifier: 'default',
-                    format: { type: 'image/png' },
-                  },
+          const payload = {
+            input: {
+              bounds: {
+                bbox: [
+                  bbox3857.west,
+                  bbox3857.south,
+                  bbox3857.east,
+                  bbox3857.north,
                 ],
+                properties: {
+                  crs: 'http://www.opengis.net/def/crs/EPSG/0/3857',
+                },
               },
-              evalscript: this.evalscript,
-            };
+              data: [
+                {
+                  type: this.collectionId,
+                  ...(Object.keys(dataFilter).length ? { dataFilter } : {}),
+                },
+              ],
+            },
+            output: {
+              width: width,
+              height: height,
+              responses: [
+                {
+                  identifier: 'default',
+                  format: { type: 'image/png' },
+                },
+              ],
+            },
+            evalscript: this.evalscript,
+          };
 
-            return fetch(this.processUrl, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                Accept: 'image/png',
-              },
-              body: JSON.stringify(payload),
-              signal: options && options.signal,
+          return fetch(this.processUrl, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              Accept: 'image/png',
+            },
+            body: JSON.stringify(payload),
+            signal: options && options.signal,
+          })
+            .then((response) => {
+              if (!response.ok) {
+                throw new Error(
+                  `Process API error ${response.status}: ${response.statusText}`,
+                );
+              }
+              return response.blob();
             })
-              .then((response) => {
-                if (!response.ok) {
-                  throw new Error(
-                    `Process API error ${response.status}: ${response.statusText}`,
-                  );
-                }
-                return response.blob();
-              })
-              .then((blob) => {
-                return new Promise((resolve, reject) => {
-                  const url = URL.createObjectURL(blob);
-                  const img = new Image();
-                  img.onload = () => {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = width;
-                    canvas.height = height;
-                    const ctx = canvas.getContext('2d');
-                    ctx.drawImage(img, 0, 0, width, height);
-                    URL.revokeObjectURL(url);
-                    resolve(canvas);
-                  };
-                  img.onerror = (err) => {
-                    URL.revokeObjectURL(url);
-                    reject(err);
-                  };
-                  img.src = url;
-                });
+            .then((blob) => {
+              return new Promise((resolve, reject) => {
+                const url = URL.createObjectURL(blob);
+                const img = new Image();
+                img.onload = () => {
+                  const canvas = document.createElement('canvas');
+                  canvas.width = width;
+                  canvas.height = height;
+                  const ctx = canvas.getContext('2d');
+                  ctx.drawImage(img, 0, 0, width, height);
+                  URL.revokeObjectURL(url);
+                  resolve(canvas);
+                };
+                img.onerror = (err) => {
+                  URL.revokeObjectURL(url);
+                  reject(err);
+                };
+                img.src = url;
               });
-          },
-        );
+            });
+        });
       },
     });
     const tileInfo = {
@@ -1249,6 +1263,14 @@ class MenuWidget extends React.Component {
       title: baseLayerTitle,
       visibilityMode: 'independent',
       layers: dualResolutionLayers,
+      isTimeSeries: isTimeSeries,
+      DatasetDownloadInformation: datasetDownloadInformation || {},
+      datasetDownloadInformation: datasetDownloadInformation || {},
+      ViewService: viewService,
+      DatasetId: datasetId,
+      DatasetTitle: datasetTitle,
+      ProductId: productId,
+      LayerTitle: baseLayerTitle,
     });
   }
 
@@ -2371,7 +2393,17 @@ class MenuWidget extends React.Component {
       ) {
         const datasetCollectionId =
           dataset_download_information?.items?.[0]?.byoc_collection || null;
-        this.supportDualLayers(layer, inheritedIndexLayer, datasetCollectionId);
+        this.supportDualLayers(
+          layer,
+          inheritedIndexLayer,
+          datasetCollectionId,
+          isTimeSeries,
+          dataset_download_information,
+          viewService,
+          DatasetId,
+          DatasetTitle,
+          ProductId,
+        );
       } else if (viewService?.toLowerCase().includes('wms')) {
         viewService = viewService?.includes('?')
           ? viewService + '&'
@@ -4791,12 +4823,8 @@ class MenuWidget extends React.Component {
       this.findCheckedDatasetNoServiceToVisualize(elem);
     }
     if (this.layers[elem.id] === undefined) return;
-    const layerViewService =
-      this.layers[elem.id]?.ViewService || this.layers[elem.id]?.url || '';
     const isSceneViewActive = this.view && this.view.type === '3d';
-    const evaluateWmtsLayer =
-      this.layers[elem.id]?.type === 'wmts' ||
-      layerViewService.toLowerCase().includes('wmts');
+    const evaluateWmtsLayer = this.layers[elem.id]?.type === 'wmts';
     if (elem.checked && evaluateWmtsLayer) {
       this.refreshWmtsLayerData(elem.id);
       const canApplyWmtsSettings = await this.applyWmtsSettingsData(
@@ -4884,9 +4912,7 @@ class MenuWidget extends React.Component {
               payload = await this.props.fetchCatalogApiDates(byoc, false);
             }
             if (payload) {
-              if (
-                this.layers[elem.id].ViewService.toLowerCase().includes('wmts')
-              ) {
+              if (this.layers[elem.id].type === 'wmts') {
                 const resolveSentinelLayer =
                   /(?:sh\.dataspace\.copernicus\.eu|services\.sentinel-hub\.com)\/ogc\/wmts/i.test(
                     this.layers[elem.id].ViewService ||
@@ -7262,7 +7288,7 @@ class MenuWidget extends React.Component {
 
   getLayerTitle(layer) {
     let title;
-    if (layer.url?.toLowerCase().includes('wmts')) {
+    if (layer.type === 'wmts') {
       // CLMS-1105
       title = layer._wmtsTitle;
     } else {

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -45,6 +45,8 @@ class TimesliderWidget extends React.Component {
       this.layerName = this.layer.sublayers.items[0].name;
     } else if (this.layer.type === 'wmts') {
       this.layerName = this.layer.activeLayer.id; //WMTS
+    } else if (this.layer.type === 'group') {
+      this.layerName = this.layer.name || this.layer.title || this.layer.id;
     }
     this.drag = {};
     if (
@@ -61,6 +63,54 @@ class TimesliderWidget extends React.Component {
     this.containerParentNode = null;
   }
 
+  resolveLayerServiceUrl() {
+    return (
+      this.layer?.ViewService ||
+      this.layer?.viewService ||
+      this.layer?.url ||
+      null
+    );
+  }
+
+  applyLayerTimeSelection(timeValue) {
+    if (!timeValue) return;
+    if (this.layer.type === 'wmts') {
+      this.layer.customLayerParameters = {
+        SHOWLOGO: false,
+      };
+      this.layer.customLayerParameters['TIME'] = timeValue + '/' + timeValue;
+      this.layer.refresh();
+      return;
+    }
+    if (this.layer.type === 'group') {
+      const selectedTimeText = String(timeValue);
+      const isDateOnly = /^\d{4}-\d{2}-\d{2}$/.test(selectedTimeText);
+      const selectedTimeRange = isDateOnly
+        ? {
+            from: `${selectedTimeText}T00:00:00Z`,
+            to: `${selectedTimeText}T23:59:59Z`,
+          }
+        : {
+            from: selectedTimeText,
+            to: selectedTimeText,
+          };
+      const childLayers = this.layer?.layers?.items || [];
+      childLayers.forEach((childLayer) => {
+        childLayer.selectedTimeRange = selectedTimeRange;
+        if (typeof childLayer.refresh === 'function') {
+          childLayer.refresh();
+        }
+      });
+      if (typeof this.layer.refresh === 'function') {
+        this.layer.refresh();
+      }
+      return;
+    }
+    this.layer.customLayerParameters = {};
+    this.layer.customLayerParameters['TIME'] = timeValue;
+    this.layer.refresh();
+  }
+
   restoreContainerContext() {
     if (
       !this.container ||
@@ -344,20 +394,9 @@ class TimesliderWidget extends React.Component {
           if (!this.container.current ? true : false) {
             this.TimesliderWidget.stop();
           }
-          if (this.layer.type === 'wmts') {
-            this.layer.customLayerParameters = {
-              SHOWLOGO: false,
-            };
-            this.layer.customLayerParameters['TIME'] =
-              timeDict[this.TimesliderWidget.timeExtent.end] +
-              '/' +
-              timeDict[this.TimesliderWidget.timeExtent.end];
-          } else {
-            this.layer.customLayerParameters = {};
-            this.layer.customLayerParameters['TIME'] =
-              timeDict[this.TimesliderWidget.timeExtent.end];
-          }
-          this.layer.refresh();
+          this.applyLayerTimeSelection(
+            timeDict[this.TimesliderWidget.timeExtent.end],
+          );
         },
       );
       this._watchHandles.push(watchHandle);
@@ -473,7 +512,8 @@ class TimesliderWidget extends React.Component {
         .whenLayerView(this.layer, this.TimesliderWidget)
         .then(async (lv) => {
           if (!this._isMounted) return;
-          this.url = lv?.layer?.viewService ?? this.layer?.url ?? null;
+          this.url =
+            lv?.layer?.viewService ?? this.resolveLayerServiceUrl() ?? null;
           const urlNorm =
             typeof this.url === 'string'
               ? this.url.replace(/%2F/gi, '/').toLowerCase()
@@ -538,6 +578,10 @@ class TimesliderWidget extends React.Component {
                 } else if (this.layer.type === 'wmts') {
                   times = this.parseTimeWMTS(xml);
                 }
+                if (!this.layerName || !times[this.layerName]) {
+                  this.TimesliderWidget.disabled = true;
+                  return;
+                }
                 // Capabilities have time enabled
                 if (
                   times[this.layerName].hasOwnProperty('dimension') === false
@@ -639,32 +683,24 @@ class TimesliderWidget extends React.Component {
                       // }
                       // this.props.time.dataset.setAttribute('time-start', start);
                       // this.props.time.dataset.setAttribute('time-end', end);
-                      if (this.layer.type === 'wmts') {
-                        this.layer.customLayerParameters = {};
-                        this.layer.customLayerParameters['TIME'] =
-                          timeDict[this.TimesliderWidget.timeExtent.end] +
-                          '/' +
-                          timeDict[this.TimesliderWidget.timeExtent.end];
+                      if (times[this.layerName].hasOwnProperty('array')) {
+                        this.applyLayerTimeSelection(
+                          timeDict[this.TimesliderWidget.timeExtent.end],
+                        );
                       } else {
-                        this.layer.customLayerParameters = {};
-                        if (times[this.layerName].hasOwnProperty('array')) {
-                          this.layer.customLayerParameters['TIME'] =
-                            timeDict[this.TimesliderWidget.timeExtent.end];
-                        } else {
-                          const newDateTimeObject = new Date(
-                            this.TimesliderWidget.timeExtent.start.toISOString(),
-                          );
-                          newDateTimeObject.setMinutes(
-                            this.TimesliderWidget.timeExtent.start.getMinutes() +
-                              this.TimesliderWidget.stops['interval'].value,
-                          );
-                          this.layer.customLayerParameters['TIME'] =
-                            this.TimesliderWidget.timeExtent.start.toISOString() +
+                        const newDateTimeObject = new Date(
+                          this.TimesliderWidget.timeExtent.start.toISOString(),
+                        );
+                        newDateTimeObject.setMinutes(
+                          this.TimesliderWidget.timeExtent.start.getMinutes() +
+                            this.TimesliderWidget.stops['interval'].value,
+                        );
+                        this.applyLayerTimeSelection(
+                          this.TimesliderWidget.timeExtent.start.toISOString() +
                             '/' +
-                            newDateTimeObject.toISOString(); //OK
-                        }
+                            newDateTimeObject.toISOString(),
+                        );
                       }
-                      this.layer.refresh();
                     },
                   );
                   this._watchHandles.push(watchHandle);
@@ -721,7 +757,7 @@ class TimesliderWidget extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (!this.TimesliderWidget) return;
-    const url = this.layer?.url || '';
+    const url = this.resolveLayerServiceUrl() || '';
     const urlNorm =
       typeof url === 'string' ? url.replace(/%2F/gi, '/').toLowerCase() : '';
     const isCDSE = urlNorm.includes('/ogc/') || urlNorm.includes('/cdse/');