@eeacms/volto-arcgis-block 0.1.396 → 0.1.397

package/CHANGELOG.md

@@ -4,11 +4,19 @@ 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.397](https://github.com/eea/volto-arcgis-block/compare/0.1.396...0.1.397) - 9 October 2025
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #1035 from eea/CLMS-292957 [Unai Bolivar - [`830053b`](https://github.com/eea/volto-arcgis-block/commit/830053bb4f035a484b0d1fd8a4d130d7ed38686a)]
+- (feat): temporal data fetched from /@getcalogapi fully implemented into time slider widget [Unai Bolivar - [`c3bff63`](https://github.com/eea/volto-arcgis-block/commit/c3bff63b6b2429f5a8a2a006f27b376e3ae35e1b)]
+- (bug): Time slider opens and fully loads when using the active layers tab button. Working on fixing the time sldier button behavior on the TOC menu [Unai Bolivar - [`1363032`](https://github.com/eea/volto-arcgis-block/commit/1363032c58922c2af623ed4c57bcc1951230a254)]
+- (bug): faulty time slider button behavior that crashed the app fixed. [Unai Bolivar - [`b3227a1`](https://github.com/eea/volto-arcgis-block/commit/b3227a1672bd03534886ac270c568246df58666b)]
+- (bug): Restored the bookmark data functionality that was delete on PR merge [Unai Bolivar - [`f36075a`](https://github.com/eea/volto-arcgis-block/commit/f36075aee1aa900403cc8b5182064bdbfb95c733)]
 ### [0.1.396](https://github.com/eea/volto-arcgis-block/compare/0.1.395...0.1.396) - 9 October 2025
 
 #### :hammer_and_wrench: Others
 
-- Merge pull request #1033 from eea/CLMS-292637-UPDATED [Unai Bolivar - [`ec88d8a`](https://github.com/eea/volto-arcgis-block/commit/ec88d8a0bae01b4b4513dcd6f6efb65e0fb39e99)]
 - (task): Bookmark thumbnail is saved along with the rest of the bookmark data. [Unai Bolivar - [`c57f925`](https://github.com/eea/volto-arcgis-block/commit/c57f925eb112a455fa2bed7150003a4633984b1a)]
 - (task): bookmark data persistence managed. [Unai Bolivar - [`10cd300`](https://github.com/eea/volto-arcgis-block/commit/10cd300f6af9d1cfc457f58dadadaf9540890d19)]
 ### [0.1.395](https://github.com/eea/volto-arcgis-block/compare/0.1.394...0.1.395) - 3 October 2025

package/package.json

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

package/src/actions/catalogapi.js

@@ -0,0 +1,32 @@
+export const GET_CATALOGAPI_DATES_REQUEST = 'GET_CATALOGAPI_DATES_REQUEST';
+export const GET_CATALOGAPI_DATES_SUCCESS = 'GET_CATALOGAPI_DATES_SUCCESS';
+export const GET_CATALOGAPI_DATES_FAILURE = 'GET_CATALOGAPI_DATES_FAILURE';
+
+export function fetchCatalogApiDates(byoc, force_refresh = false) {
+  return async (dispatch, getState) => {
+    dispatch({ type: GET_CATALOGAPI_DATES_REQUEST, byoc });
+    const state = typeof getState === 'function' ? getState() : {};
+    const lang =
+      (state && state.intl && state.intl.locale) ||
+      (state && state.userSession && state.userSession.lang) ||
+      'en';
+    const url = `/++api++/${encodeURIComponent(
+      lang,
+    )}/@get_catalogapi_dates?byoc=${encodeURIComponent(byoc)}&force_refresh=${
+      force_refresh ? 'true' : 'false'
+    }`;
+    try {
+      const res = await fetch(url, { headers: { Accept: 'application/json' } });
+      const data = await res.json();
+      dispatch({ type: GET_CATALOGAPI_DATES_SUCCESS, byoc, payload: data });
+      return data;
+    } catch (error) {
+      dispatch({
+        type: GET_CATALOGAPI_DATES_FAILURE,
+        byoc,
+        error: String(error),
+      });
+      return null;
+    }
+  };
+}

package/src/actions/index.js

@@ -11,3 +11,9 @@
  * };
  */
 export { MAPVIEWER_CONFIG, MapViewerConfig } from './mapviewer/mapviewer';
+export {
+  GET_CATALOGAPI_DATES_REQUEST,
+  GET_CATALOGAPI_DATES_SUCCESS,
+  GET_CATALOGAPI_DATES_FAILURE,
+  fetchCatalogApiDates,
+} from './catalogapi';

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -709,6 +709,12 @@ class BookmarkWidget extends React.Component {
     userObj.bookmarks.hotspot = legacyHotspot;
     userObj.bookmarks.selectedHotspotFilter = selectedHotspotFilter;
     localStorage.setItem(storageKey, JSON.stringify(userObj));
+    try {
+      localStorage.setItem(
+        storageKey + '_bookmarks_backup',
+        JSON.stringify(userObj.bookmarks),
+      );
+    } catch (e) {}
   }
   componentDidUpdate() {
     if (this.userID !== this.props.userID) {
@@ -794,6 +800,22 @@ class BookmarkWidget extends React.Component {
       userObj && userObj.bookmarks && typeof userObj.bookmarks === 'object'
         ? userObj.bookmarks
         : null;
+    if (!bookmarks) {
+      let backup = null;
+      try {
+        backup = JSON.parse(
+          localStorage.getItem(storageKey + '_bookmarks_backup'),
+        );
+      } catch (e) {
+        backup = null;
+      }
+      if (backup && typeof backup === 'object') {
+        userObj.bookmarks = backup;
+        localStorage.setItem(storageKey, JSON.stringify(userObj));
+        bookmarks = backup;
+      }
+    }
+
     if (!bookmarks) return;
     const items = Array.isArray(bookmarks.items) ? bookmarks.items : [];
     const layers = Array.isArray(bookmarks.layers) ? bookmarks.layers : [];
@@ -922,6 +944,12 @@ class BookmarkWidget extends React.Component {
     userObj.bookmarks.hotspot = hotspot;
     userObj.bookmarks.selectedHotspotFilter = selectedHotspotFilter;
     localStorage.setItem(storageKey, JSON.stringify(userObj));
+    try {
+      localStorage.setItem(
+        storageKey + '_bookmarks_backup',
+        JSON.stringify(userObj.bookmarks),
+      );
+    } catch (e) {}
   }
   /**
    * This method renders the component

package/src/components/MapViewer/MapViewer.jsx

@@ -32,6 +32,7 @@ import LoadingSpinner from './LoadingSpinner';
 import UploadWidget from './UploadWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
 import { getTaxonomy } from '@eeacms/volto-taxonomy/actions';
+import { fetchCatalogApiDates } from '../../actions';
 
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom, intl, Basemap, WebTileLayer, Extent;
@@ -1128,6 +1129,8 @@ export const CheckUserID = ({ reference }) => {
             isLoggedIn={isLoggedIn}
             getTaxonomy={reference.getTaxonomy}
             tax={reference.tax}
+            catalogapi={reference.props.catalogapi}
+            fetchCatalogApiDates={reference.props.fetchCatalogApiDates}
           />
         </>
       )}
@@ -1137,6 +1140,8 @@ export const CheckUserID = ({ reference }) => {
 
 const mapDispatchToProps = (dispatch) => ({
   getTaxonomy: (name) => dispatch(getTaxonomy(name)),
+  fetchCatalogApiDates: (byoc, force_refresh) =>
+    dispatch(fetchCatalogApiDates(byoc, force_refresh)),
 });
 
 const MapViewerWithProvider = (props) => {
@@ -1181,6 +1186,7 @@ export default compose(
   connect(
     (state) => ({
       mapviewer_config: state.mapviewer_config.mapviewer_config,
+      catalogapi: state.catalogapi,
     }),
     { MapViewerConfig },
   ),

package/src/components/MapViewer/MenuWidget.jsx

@@ -2982,20 +2982,49 @@ class MenuWidget extends React.Component {
       if (!userService) this.checkForHotspots(elem, productContainerId);
       // Auto-fit extent once for OGC WMS layers on manual toggle
       try {
-        // const isCDSE = !!this.url && this.url.toLowerCase().includes('/ogc/');
         const isCDSE =
           !!this.url &&
           ['/ogc/', '/cdse/'].some((s) => this.url.toLowerCase().includes(s));
         if (isCDSE) {
-          const cdseGeometry = await this.getCDSEWFSGeoCoordinates(
-            this.url,
-            this.layers[elem.id],
-          );
-          const extent = await this.createExtentFromCoordinates(cdseGeometry);
-          this.view.goTo({
-            target: extent,
-            zoom: 4,
-          });
+          const d =
+            this.layers[elem.id]?.DatasetDownloadInformation ||
+            this.layers[elem.id]?.datasetDownloadInformation ||
+            {};
+          const byoc =
+            d && d.items && d.items[0] ? d.items[0].byoc_collection : null;
+          if (byoc && this.props.fetchCatalogApiDates) {
+            let payload =
+              this.props.catalogapi &&
+              this.props.catalogapi.byoc &&
+              this.props.catalogapi.byoc[byoc]
+                ? this.props.catalogapi.byoc[byoc].data
+                : null;
+            if (!payload) {
+              payload = await this.props.fetchCatalogApiDates(byoc, false);
+            }
+            if (payload) {
+              let myExtent = null;
+              if (
+                Array.isArray(payload.extent) &&
+                payload.extent.length === 4
+              ) {
+                myExtent = new Extent({
+                  xmin: payload.extent[0],
+                  ymin: payload.extent[1],
+                  xmax: payload.extent[2],
+                  ymax: payload.extent[3],
+                  spatialReference: { wkid: 3857 },
+                });
+              } else if (payload.geometry && payload.geometry.coordinates) {
+                myExtent = await this.createExtentFromCoordinates(
+                  payload.geometry.coordinates,
+                );
+              }
+              if (myExtent) {
+                this.view.goTo(myExtent);
+              }
+            }
+          }
         }
       } catch (e) {}
       // try {
@@ -3857,6 +3886,25 @@ class MenuWidget extends React.Component {
     return newBBox;
   }
 
+  async datasetFullExtentFromPayload(payload) {
+    if (!payload) return null;
+    if (Array.isArray(payload.extent) && payload.extent.length === 4) {
+      return new Extent({
+        xmin: payload.extent[0],
+        ymin: payload.extent[1],
+        xmax: payload.extent[2],
+        ymax: payload.extent[3],
+        spatialReference: { wkid: 3857 },
+      });
+    }
+    if (payload.geometry && payload.geometry.coordinates) {
+      return await this.createExtentFromCoordinates(
+        payload.geometry.coordinates,
+      );
+    }
+    return null;
+  }
+
   async FullExtentDataset(elem) {
     const serviceLayer = this.state.wmsUserServiceLayers.find(
       (layer) => layer.LayerId === elem.id,
@@ -3871,15 +3919,28 @@ class MenuWidget extends React.Component {
       ['/ogc/', '/cdse/'].some((s) => this.url.toLowerCase().includes(s));
     let BBoxes = {};
     if (isCDSE) {
-      const cdseGeometry = await this.getCDSEWFSGeoCoordinates(
-        this.url,
-        this.layers[elem.id],
-      );
-      const extent = await this.createExtentFromCoordinates(cdseGeometry);
-      this.view.goTo({
-        target: extent,
-        zoom: 4,
-      });
+      const d =
+        this.layers[elem.id]?.DatasetDownloadInformation ||
+        this.layers[elem.id]?.datasetDownloadInformation ||
+        {};
+      const byoc =
+        d && d.items && d.items[0] ? d.items[0].byoc_collection : null;
+      if (byoc && this.props.fetchCatalogApiDates) {
+        let payload =
+          this.props.catalogapi &&
+          this.props.catalogapi.byoc &&
+          this.props.catalogapi.byoc[byoc]
+            ? this.props.catalogapi.byoc[byoc].data
+            : null;
+        if (!payload) {
+          payload = await this.props.fetchCatalogApiDates(byoc, false);
+        }
+        const myExtent = await this.datasetFullExtentFromPayload(payload);
+        if (myExtent) {
+          this.view.goTo(myExtent);
+          return;
+        }
+      }
       return;
     } else if (this.url?.toLowerCase().endsWith('mapserver')) {
       BBoxes = await this.parseBBOXMAPSERVER(this.layers[elem.id]);
@@ -3968,15 +4029,28 @@ class MenuWidget extends React.Component {
       });
     }
     if (isCDSE) {
-      const cdseGeometry = await this.getCDSEWFSGeoCoordinates(
-        this.url,
-        this.layers[elem.id],
-      );
-      const extent = await this.createExtentFromCoordinates(cdseGeometry);
-      this.view.goTo({
-        target: extent,
-        zoom: 4,
-      });
+      const d =
+        this.layers[elem.id]?.DatasetDownloadInformation ||
+        this.layers[elem.id]?.datasetDownloadInformation ||
+        {};
+      const byoc =
+        d && d.items && d.items[0] ? d.items[0].byoc_collection : null;
+      if (byoc && this.props.fetchCatalogApiDates) {
+        let payload =
+          this.props.catalogapi &&
+          this.props.catalogapi.byoc &&
+          this.props.catalogapi.byoc[byoc]
+            ? this.props.catalogapi.byoc[byoc].data
+            : null;
+        if (!payload) {
+          payload = await this.props.fetchCatalogApiDates(byoc, false);
+        }
+        const myExtent = await this.datasetFullExtentFromPayload(payload);
+        if (myExtent) {
+          this.view.goTo(myExtent);
+          return;
+        }
+      }
       return;
     } else if (this.productId?.includes('333e4100b79045daa0ff16466ac83b7f')) {
       //global dynamic landCover
@@ -4381,6 +4455,13 @@ class MenuWidget extends React.Component {
    */
 
   showTimeSlider(elem, fromDownload, hideCalendar) {
+    if (!elem) return;
+    if (!this.timeLayers) this.timeLayers = {};
+    if (!this.visibleLayers) this.visibleLayers = {};
+    if (!this.timeLayers[elem.id]) this.timeLayers[elem.id] = ['far', 'clock'];
+    if (!this.visibleLayers[elem.id]) {
+      this.visibleLayers[elem.id] = ['fas', 'eye'];
+    }
     if (
       sessionStorage.key('timeSliderTag') &&
       sessionStorage.getItem('timeSliderTag') === 'true'
@@ -4393,17 +4474,17 @@ class MenuWidget extends React.Component {
     if (this.timeLayers[elem.id][1] === 'clock') {
       activeLayers.forEach((layer) => {
         let layerId = layer.getAttribute('layer-id');
-        let order = this.activeLayersJSON[elem.id].props['layer-order'];
-        if (groupLayers.includes(layerId)) {
+        let order = this.activeLayersJSON[elem.id]?.props?.['layer-order'] || 0;
+        if (groupLayers && groupLayers.includes(layerId)) {
           elem = document.getElementById(layerId);
         }
-        if (elem.id === layerId) {
+        if (elem && elem.id === layerId) {
           this.timeLayers[elem.id] = ['fas', 'stop'];
           if (
             !this.visibleLayers[elem.id] ||
             this.visibleLayers[elem.id][1] === 'eye-slash'
           ) {
-            this.layers[elem.id].visible = true;
+            if (this.layers[elem.id]) this.layers[elem.id].visible = true;
             this.visibleLayers[elem.id] = ['fas', 'eye'];
           }
           document
@@ -4415,9 +4496,13 @@ class MenuWidget extends React.Component {
             .forEach((item) => {
               item.classList.add('locked');
             });
-          document.querySelector('#products_label').classList.add('locked');
-          document.querySelector('#map_remove_layers').classList.add('locked');
-          if (this.props.download)
+          if (document.querySelector('#products_label'))
+            document.querySelector('#products_label').classList.add('locked');
+          if (document.querySelector('#map_remove_layers')) {
+            const mapRemoveBtn = document.querySelector('#map_remove_layers');
+            if (mapRemoveBtn) mapRemoveBtn.classList.add('locked');
+          }
+          if (this.props.download && document.querySelector('#download_label'))
             document.querySelector('#download_label').classList.add('locked');
           this.activeLayersJSON[elem.id] = this.addActiveLayer(
             elem,
@@ -4426,17 +4511,24 @@ class MenuWidget extends React.Component {
             hideCalendar,
           );
         } else {
+          const node = document.getElementById(layerId);
           if (
-            document.getElementById(layerId).parentElement.dataset
-              .timeseries === 'true'
+            node &&
+            node.parentElement &&
+            node.parentElement.dataset &&
+            node.parentElement.dataset.timeseries === 'true'
           ) {
+            if (!this.visibleLayers[layerId]) {
+              this.visibleLayers[layerId] = ['fas', 'eye'];
+            }
             if (this.visibleLayers[layerId][1] === 'eye') {
-              this.layers[layerId].visible = false;
+              if (this.layers[layerId]) this.layers[layerId].visible = false;
               this.visibleLayers[layerId] = ['fas', 'eye-slash'];
             }
-            document
-              .querySelector('.active-layer[layer-id="' + layerId + '"]')
-              .classList.add('locked');
+            const activeNode = document.querySelector(
+              '.active-layer[layer-id="' + layerId + '"]',
+            );
+            if (activeNode) activeNode.classList.add('locked');
           }
           this.activeLayersJSON[layerId] = this.addActiveLayer(
             document.getElementById(layerId),
@@ -4445,17 +4537,18 @@ class MenuWidget extends React.Component {
           );
         }
       });
-      if (document.querySelector('.opacity-panel').style.display === 'block') {
+      const op = document.querySelector('.opacity-panel');
+      if (op && op.style.display === 'block') {
         this.closeOpacity();
       }
     } else {
       activeLayers.forEach((layer) => {
         let layerId = layer.getAttribute('layer-id');
-        let order = this.activeLayersJSON[elem.id].props['layer-order'];
-        if (groupLayers.includes(layerId)) {
+        let order = this.activeLayersJSON[elem.id]?.props?.['layer-order'] || 0;
+        if (groupLayers && groupLayers.includes(layerId)) {
           elem = document.getElementById(layerId);
         }
-        if (elem.id === layerId) {
+        if (elem && elem.id === layerId) {
           this.timeLayers[elem.id] = ['far', 'clock'];
           this.activeLayersJSON[elem.id] = this.addActiveLayer(
             elem,
@@ -4471,46 +4564,46 @@ class MenuWidget extends React.Component {
             .forEach((item) => {
               item.classList.remove('locked');
             });
-          document.querySelector('#products_label').classList.remove('locked');
-          document
-            .querySelector('#map_remove_layers')
-            .classList.remove('locked');
+          const productsLabel = document.querySelector('#products_label');
+          if (productsLabel) productsLabel.classList.remove('locked');
+          const removeBtn = document.querySelector('#map_remove_layers');
+          if (removeBtn) removeBtn.classList.remove('locked');
           if (this.props.download) {
-            document
-              .querySelector('#download_label')
-              .classList.remove('locked');
-            if (
-              document.querySelector(
-                '.active-layer[layer-id="' +
-                  elem.id +
-                  '"] .map-menu-icon.active-layer-time',
-              ).dataset.download === 'true'
-            ) {
-              document.getElementById('download_label').click();
+            const dl = document.querySelector('#download_label');
+            if (dl) dl.classList.remove('locked');
+            const timeIcon = document.querySelector(
+              '.active-layer[layer-id="' +
+                elem.id +
+                '"] .map-menu-icon.active-layer-time',
+            );
+            if (timeIcon && timeIcon.dataset.download === 'true') {
+              const dlBtn = document.getElementById('download_label');
+              if (dlBtn) dlBtn.click();
             }
           } else {
-            if (
-              document.querySelector(
-                '.active-layer[layer-id="' +
-                  elem.id +
-                  '"] .map-menu-icon.active-layer-time',
-              ).dataset.download === 'true'
-            ) {
-              document.getElementById('products_label').click();
+            const timeIcon = document.querySelector(
+              '.active-layer[layer-id="' +
+                elem.id +
+                '"] .map-menu-icon.active-layer-time',
+            );
+            if (timeIcon && timeIcon.dataset.download === 'true') {
+              const prBtn = document.getElementById('products_label');
+              if (prBtn) prBtn.click();
             }
           }
-          if (
-            document.contains(document.querySelector('.timeslider-container'))
-          )
+          const ts = document.querySelector('.timeslider-container');
+          if (ts && document.contains(ts))
             ReactDOM.unmountComponentAtNode(
               document.querySelector('.esri-ui-bottom-right'),
             );
-          if (document.querySelector('.drawRectanglePopup-block'))
-            document.querySelector('.drawRectanglePopup-block').style.display =
-              'block';
+          const warn = document.querySelector('.drawRectanglePopup-block');
+          if (warn) warn.style.display = 'block';
         } else {
+          if (!this.visibleLayers[layerId]) {
+            this.visibleLayers[layerId] = ['fas', 'eye'];
+          }
           if (this.visibleLayers[layerId][1] === 'eye-slash') {
-            this.layers[layerId].visible = true;
+            if (this.layers[layerId]) this.layers[layerId].visible = true;
             this.visibleLayers[layerId] = ['fas', 'eye'];
             this.activeLayersJSON[layerId] = this.addActiveLayer(
               document.getElementById(layerId),
@@ -4518,9 +4611,10 @@ class MenuWidget extends React.Component {
               fromDownload,
             );
           }
-          document
-            .querySelector('.active-layer[layer-id="' + layerId + '"]')
-            .classList.remove('locked');
+          const activeNode = document.querySelector(
+            '.active-layer[layer-id="' + layerId + '"]',
+          );
+          if (activeNode) activeNode.classList.remove('locked');
         }
       });
     }
@@ -5452,6 +5546,14 @@ class MenuWidget extends React.Component {
         time.end = parseInt(activeLayer.getAttribute('time-end'));
       }
       let isLoggedIn = document.querySelector('.map-menu-icon-login.logged');
+      let byoc = null;
+      try {
+        const d =
+          layer?.DatasetDownloadInformation ||
+          layer?.datasetDownloadInformation ||
+          {};
+        byoc = d && d.items && d.items[0] ? d.items[0].byoc_collection : null;
+      } catch (e) {}
       ReactDOM.render(
         <TimesliderWidget
           view={this.props.view}
@@ -5464,6 +5566,8 @@ class MenuWidget extends React.Component {
           fromDownload={fromDownload}
           area={this.props.area}
           hideCalendar={hideCalendar}
+          catalogapi={this.props.catalogapi}
+          catalogApiByoc={byoc}
         />,
         document.querySelector('.esri-ui-bottom-right'),
       );
@@ -5478,20 +5582,46 @@ class MenuWidget extends React.Component {
       }
     }
   }
-  checkTimeLayer(dataset, checkedLayers) {
+  async checkTimeLayer(dataset, checkedLayers) {
     let id = dataset.DatasetId;
-    let checkbox = document
-      .querySelector('[datasetid="' + id + '"]')
-      .querySelector('.map-dataset-checkbox input');
+    let container = document.querySelector('[datasetid="' + id + '"]');
+    if (!container) return;
+    let checkbox = container.querySelector('.map-dataset-checkbox input');
+    if (!checkbox) return;
     if (!checkbox.checked) {
       checkbox.click();
     }
+    try {
+      const info =
+        dataset?.dataset_download_information ||
+        dataset?.DatasetDownloadInformation ||
+        {};
+      const byoc =
+        info && info.items && info.items[0]
+          ? info.items[0].byoc_collection
+          : null;
+      if (byoc && this.props.fetchCatalogApiDates) {
+        await this.props.fetchCatalogApiDates(byoc, false);
+      }
+    } catch (e) {}
     document.getElementById('active_label').click();
     if (!document.querySelector('.timeslider-container')) {
-      let layerId = this.findCheckedLayer(dataset, checkedLayers);
       setTimeout(() => {
-        // Display timeslider with no calendar.
-        this.showTimeSlider(document.getElementById(layerId), true, true);
+        let layerInputs = container.querySelectorAll(
+          '.map-menu-layers-container input[type="checkbox"]',
+        );
+        let target = null;
+        layerInputs.forEach((inp) => {
+          if (!target && inp.checked) target = inp;
+        });
+        if (!target && layerInputs[0]) {
+          layerInputs[0].checked = true;
+          this.toggleLayer(layerInputs[0]);
+          target = layerInputs[0];
+        }
+        if (target) {
+          this.showTimeSlider(target, true, true);
+        }
       }, 100);
     }
   }

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -54,6 +54,7 @@ class TimesliderWidget extends React.Component {
       document.querySelector('.drawRectanglePopup-block').style.display =
         'none';
     }
+    this._cdseApplied = false;
   }
 
   loader() {
@@ -268,6 +269,73 @@ class TimesliderWidget extends React.Component {
     };
   } // parserPeriod
 
+  applyCDSETemporalData(payload) {
+    try {
+      const arr = Array.isArray(payload?.dates) ? payload.dates : [];
+      if (!arr.length) {
+        this.TimesliderWidget.disabled = true;
+        return;
+      }
+      this.TimesliderWidget.fullTimeExtent = new TimeExtent({
+        start: new Date(arr[arr.length - 1]),
+        end: new Date(arr[0]),
+      });
+      this.TimesliderWidget.stops = {
+        dates: arr.map((e) => new Date(e)),
+      };
+      const time = arr.map((d) => new Date(d));
+      for (let i in time) {
+        timeDict[time[i]] = arr[i];
+      }
+      let periodicity = null;
+      if (arr.length > 1) {
+        periodicity = Math.floor(
+          (Date.parse(arr[1]) - Date.parse(arr[0])) / 86400000,
+        );
+        if (periodicity === 0) {
+          periodicity =
+            (new Date(arr[1]).getHours() - new Date(arr[0]).getHours()) / 24;
+        }
+      }
+      this.setState({ periodicity: periodicity });
+      if (this.TimesliderWidget.effectiveStops.length === 11) {
+        let period =
+          (this.TimesliderWidget.fullTimeExtent.end -
+            this.TimesliderWidget.fullTimeExtent.start) /
+          590000000;
+        if (
+          this.TimesliderWidget.stops &&
+          this.TimesliderWidget.stops.interval &&
+          period > this.TimesliderWidget.stops.interval.value
+        ) {
+          this.TimesliderWidget.stops = {
+            interval: {
+              value: period,
+              unit: 'minutes',
+            },
+          };
+        }
+      }
+      this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
+        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];
+        } else {
+          this.layer.customLayerParameters = {};
+          this.layer.customLayerParameters['TIME'] =
+            timeDict[this.TimesliderWidget.timeExtent.end];
+        }
+        this.layer.refresh();
+      });
+    } catch (e) {}
+  }
+
   /**
    * This method is executed after the rener method is executed
    */
@@ -403,97 +471,18 @@ class TimesliderWidget extends React.Component {
             let times = {};
             let periodicity;
             if (isCDSE) {
-              times = await this.getCDSEWFSTemporalData(
-                this.layer.url,
-                this.layer,
-              );
-              if (times) {
-                // Dates array
-                this.TimesliderWidget.fullTimeExtent = new TimeExtent({
-                  start: new Date(
-                    times[this.layerName].array[
-                      times[this.layerName].array.length - 1
-                    ],
-                  ),
-                  end: new Date(times[this.layerName].array[0]),
-                });
-                this.TimesliderWidget.stops = {
-                  dates: times[this.layerName].array.map((e) => new Date(e)),
-                };
-
-                if (this.layer.type === 'wmts') {
-                  this.layer.customLayerParameters = {
-                    SHOWLOGO: false,
-                  };
-                  const time = times[this.layerName].array.map(
-                    (d) => new Date(d),
-                  );
-
-                  for (let i in time) {
-                    timeDict[time[i]] = times[this.layerName].array[i];
-                  }
-                }
-
-                periodicity = Math.floor(
-                  (Date.parse(times[this.layerName].array[1]) -
-                    Date.parse(times[this.layerName].array[0])) /
-                    86400000,
-                );
-                if (periodicity === 0) {
-                  periodicity =
-                    (new Date(times[this.layerName].array[1]).getHours() -
-                      new Date(times[this.layerName].array[0]).getHours()) /
-                    24;
-                }
-
-                this.setState({ periodicity: periodicity });
-                if (this.TimesliderWidget.effectiveStops.length === 11) {
-                  let period =
-                    (this.TimesliderWidget.fullTimeExtent.end -
-                      this.TimesliderWidget.fullTimeExtent.start) /
-                    590000000;
-                  if (period > this.TimesliderWidget.stops.interval.value) {
-                    this.TimesliderWidget.stops = {
-                      interval: {
-                        value: period,
-                        unit: 'minutes',
-                      },
-                    };
-                  }
-                }
-                this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
-                  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];
-                  } 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() +
-                        '/' +
-                        newDateTimeObject.toISOString(); //OK
-                    }
-                  }
-                  this.layer.refresh();
-                });
-              } // if there is dimension time
-              else {
+              const byoc = this.props.catalogApiByoc;
+              const payload =
+                this.props.catalogapi &&
+                this.props.catalogapi.byoc &&
+                byoc &&
+                this.props.catalogapi.byoc[byoc]
+                  ? this.props.catalogapi.byoc[byoc].data
+                  : null;
+              if (payload) {
+                this.applyCDSETemporalData(payload);
+                this._cdseApplied = true;
+              } else {
                 this.TimesliderWidget.disabled = true;
               }
             } else {
@@ -639,6 +628,37 @@ class TimesliderWidget extends React.Component {
     });
   } //componentDidMount
 
+  componentDidUpdate(prevProps) {
+    if (!this.TimesliderWidget) return;
+    const url = this.layer?.url || '';
+    const urlNorm =
+      typeof url === 'string' ? url.replace(/%2F/gi, '/').toLowerCase() : '';
+    const isCDSE = urlNorm.includes('/ogc/') || urlNorm.includes('/cdse/');
+    if (!isCDSE) return;
+    const byoc = this.props.catalogApiByoc;
+    const prevData =
+      prevProps &&
+      prevProps.catalogapi &&
+      prevProps.catalogapi.byoc &&
+      byoc &&
+      prevProps.catalogapi.byoc[byoc]
+        ? prevProps.catalogapi.byoc[byoc].data
+        : null;
+    const currData =
+      this.props &&
+      this.props.catalogapi &&
+      this.props.catalogapi.byoc &&
+      byoc &&
+      this.props.catalogapi.byoc[byoc]
+        ? this.props.catalogapi.byoc[byoc].data
+        : null;
+    if (!this._cdseApplied && currData && currData !== prevData) {
+      this.TimesliderWidget.disabled = false;
+      this.applyCDSETemporalData(currData);
+      this._cdseApplied = true;
+    }
+  }
+
   getPeriodicity() {
     let period = this.state.periodicity;
     if (period === 1 / 24 || period === 'PT1H') {
@@ -848,7 +868,7 @@ class TimesliderWidget extends React.Component {
               onClick={() => this.openCalendar()}
               onKeyDown={() => this.openCalendar()}
             >
-              <Icon name={calendarSVG} size={25} />
+              <Icon name={calendarSVG} size="25px" />
             </button>
           </div>
           <div className="timeslider-panel"></div>

package/src/reducers/catalogapi/catalogapi_reducer.js

@@ -0,0 +1,40 @@
+import {
+  GET_CATALOGAPI_DATES_REQUEST,
+  GET_CATALOGAPI_DATES_SUCCESS,
+  GET_CATALOGAPI_DATES_FAILURE,
+} from '../../actions/catalogapi';
+
+const initialState = {
+  byoc: {},
+};
+
+export function catalogapiReducer(state = initialState, action = {}) {
+  switch (action.type) {
+    case GET_CATALOGAPI_DATES_REQUEST:
+      return {
+        ...state,
+        byoc: {
+          ...state.byoc,
+          [action.byoc]: { loading: true, error: null, data: null },
+        },
+      };
+    case GET_CATALOGAPI_DATES_SUCCESS:
+      return {
+        ...state,
+        byoc: {
+          ...state.byoc,
+          [action.byoc]: { loading: false, error: null, data: action.payload },
+        },
+      };
+    case GET_CATALOGAPI_DATES_FAILURE:
+      return {
+        ...state,
+        byoc: {
+          ...state.byoc,
+          [action.byoc]: { loading: false, error: action.error, data: null },
+        },
+      };
+    default:
+      return state;
+  }
+}

package/src/reducers/index.js

@@ -5,6 +5,7 @@
 
 // import defaultReducers from '@plone/volto/reducers';
 import { mapViewerConfigReducer } from './mapviewer/mapviewer_reducer';
+import { catalogapiReducer } from './catalogapi/catalogapi_reducer';
 /**
  * Root reducer.
  * @function
@@ -16,6 +17,7 @@ const reducers = {
   // ...defaultReducers,
   // Add your reducers here
   mapviewer_config: mapViewerConfigReducer,
+  catalogapi: catalogapiReducer,
 };
 
 export default reducers;