@opengeoweb/core 12.13.0 → 13.1.0

package/README.md

@@ -9,7 +9,7 @@ This library was generated with [Nx](https://nx.dev).
 ## Installation
 
 ```
-npm install @opengeoweb/core @opengeoweb/store @opengeoweb/timeslider
+npm install @opengeoweb/core @opengeoweb/store @opengeoweb/time-slider
 ```
 
 ## Use
@@ -25,7 +25,7 @@ import {
   CoreThemeStoreProvider,
 } from '@opengeoweb/core';
 import { storeMiddlewares, storeReducerMap } from '@opengeoweb/store';
-import { TimeSliderConnect } from '@opengeoweb/timeslider';
+import { TimeSliderConnect } from '@opengeoweb/time-slider';
 import { configureStore } from '@reduxjs/toolkit';
 
 const store = configureStore({

package/index.esm.js

@@ -6,8 +6,8 @@ import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE,
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, Copy, None, FastForward, AutoUpdateActive, Both, Delete, Visibility, VisibilityOff, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Overlayers, Layers, ExitDomain, Info, Search, Exclamation, MyLocation, Close, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation, I18nextProvider } from 'react-i18next';
-import { TIMESLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, onsetNewDateDebounced, defaultSecondsPerPx, moveSelectedTimePx, TimeSlider, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/timeslider';
-import { webmapReactTranslations, WEBMAP_REACT_NAMESPACE, webmapTranslations, WEBMAP_NAMESPACE, LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, LegendDialog, LegendButton, MapContext, emptyGeoJSON, MapFeatureClass, setMapCenter, OpenLayersFeatureLayer, OpenLayersMapDraw, getIsInsideAcceptanceTime, OpenLayersLayer, useSetIntervalWhenVisible, openLayersGetMapImageStore, TimeContext, OpenLayersMapView, WMSLayer, genericOpenLayersFeatureStyle, OpenLayersGetFeatureInfo, MapControls, OpenLayersZoomControl, getLayerUpdateInfo, publicLayers } from '@opengeoweb/webmap-react';
+import { TIME_SLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, onsetNewDateDebounced, defaultSecondsPerPx, moveSelectedTimePx, TimeSlider, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/time-slider';
+import { webmapReactTranslations, WEBMAP_REACT_NAMESPACE, webmapTranslations, WEBMAP_NAMESPACE, LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, LegendDialog, LegendButton, MapContext, emptyGeoJSON, MapFeatureClass, setMapCenter, OpenLayersFeatureLayer, OpenLayersMapDraw, makeTimeList, getIsInsideAcceptanceTime, OpenLayersLayer, useSetIntervalWhenVisible, openLayersGetMapImageStore, TimeContext, OpenLayersMapView, WMSLayer, genericOpenLayersFeatureStyle, OpenLayersGetFeatureInfo, MapControls, OpenLayersZoomControl, getLayerUpdateInfo, publicLayers } from '@opengeoweb/webmap-react';
 import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
@@ -76,7 +76,7 @@ var en = {
 	"layermanager-header-button-large": "large",
 	"layermanager-header-button-dock": "Dock",
 	"layermanager-header-button-undock": "Undock",
-	"layermanager-EDR-multiparam": "Multi params",
+	"layermanager-EDR": "EDR: ",
 	"projection-title": "Projection",
 	"wms-loader-description": "Please enter a wms server, or select one from the list.",
 	"wms-loader-no-data": "No data",
@@ -699,11 +699,11 @@ var initCoreReactI18n = function initCoreReactI18n() {
     ns: SHARED_NAMESPACE,
     translations: sharedTranslations
   }, {
-    ns: TIMESLIDER_NAMESPACE,
+    ns: TIME_SLIDER_NAMESPACE,
     translations: timesliderTranslations
   }]);
 };
-var ns = [CORE_NAMESPACE, TIMESLIDER_NAMESPACE];
+var ns = [CORE_NAMESPACE, TIME_SLIDER_NAMESPACE];
 var useCoreTranslation = function useCoreTranslation() {
   return useTranslation(ns);
 };
@@ -1218,6 +1218,26 @@ var DimensionSelectName = function DimensionSelectName(_ref) {
   });
 };
 
+var LatestOptions;
+(function (LatestOptions) {
+  LatestOptions["LATEST_0"] = "Latest";
+  LatestOptions["LATEST_1"] = "Latest -1";
+  LatestOptions["LATEST_2"] = "Latest -2";
+  LatestOptions["LATEST_3"] = "Latest -3";
+})(LatestOptions || (LatestOptions = {}));
+var createLatestMap = function createLatestMap(dimensionValuesRaw) {
+  var latestOptions = Object.values(LatestOptions).slice(0, dimensionValuesRaw.length);
+  return {
+    getValue: function getValue(value) {
+      var index = dimensionValuesRaw.indexOf(value);
+      return index !== -1 ? latestOptions[index] : value;
+    },
+    getIndex: function getIndex(value) {
+      return latestOptions.indexOf(value);
+    },
+    latestOptions: latestOptions
+  };
+};
 var DimensionSelectValue = function DimensionSelectValue(_ref) {
   var isEnabled = _ref.isEnabled,
     tooltip = _ref.tooltip,
@@ -1234,24 +1254,40 @@ var DimensionSelectValue = function DimensionSelectValue(_ref) {
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
   var dimensionValuesRaw = generatedValues.toReversed().slice(0, 100);
+  var latestMap = createLatestMap(dimensionValuesRaw);
   if (!(selectedDimension != null && selectedDimension.name) || !(dimensionValuesRaw != null && dimensionValuesRaw.length)) {
     return null;
   }
   var isReferenceTimeDimensionAndUseLatestIsAvailable = selectedDimension.name === 'reference_time' && useLatestReferenceTime !== undefined;
   var latestValue = dimensionValuesRaw[0];
+  var dimensionValues = isReferenceTimeDimensionAndUseLatestIsAvailable ? [].concat(latestMap.latestOptions, dimensionValuesRaw.slice(hideLatestDuplicate ? 1 : 0)) : dimensionValuesRaw.slice().reverse();
   var setDimensionValue = function setDimensionValue(dimensionValue) {
     if (isReferenceTimeDimensionAndUseLatestIsAvailable) {
-      if (dimensionValue === 'Latest') {
+      var index = latestMap.getIndex(dimensionValue);
+      if (index !== -1) {
         setUseLatestReferenceTime == null || setUseLatestReferenceTime(true);
-        onLayerChangeDimension(selectedDimension.name, dimensionValuesRaw[0], layerTypes.LayerActionOrigin.layerManager);
+        onLayerChangeDimension(selectedDimension.name, dimensionValuesRaw[index], layerTypes.LayerActionOrigin.layerManager);
         return;
       }
       setUseLatestReferenceTime == null || setUseLatestReferenceTime(false);
     }
     onLayerChangeDimension(selectedDimension.name, dimensionValue, layerTypes.LayerActionOrigin.layerManager);
   };
-  var dimensionValues = isReferenceTimeDimensionAndUseLatestIsAvailable ? ['Latest'].concat(dimensionValuesRaw.slice(hideLatestDuplicate ? 1 : 0)) : dimensionValuesRaw.slice().reverse();
-  var isLatest = isReferenceTimeDimensionAndUseLatestIsAvailable && useLatestReferenceTime && selectedDimension.maxValue === selectedDimension.currentValue;
+  var isOneOfLatest = isReferenceTimeDimensionAndUseLatestIsAvailable && useLatestReferenceTime;
+  var getValue = function getValue() {
+    if (isOneOfLatest) {
+      return latestMap.getValue(selectedDimension.currentValue);
+    }
+    return selectedDimension.currentValue;
+  };
+  var getIndex = function getIndex() {
+    if (isOneOfLatest) {
+      return latestMap.getIndex(selectedDimension.currentValue);
+    }
+    return dimensionValues.findIndex(function (dimensionValue) {
+      return dimensionValue === selectedDimension.currentValue;
+    });
+  };
   return jsxs(TooltipSelect, {
     "data-testid": "dimensionSelectValue",
     disableUnderline: true,
@@ -1260,15 +1296,13 @@ var DimensionSelectValue = function DimensionSelectValue(_ref) {
     },
     tooltip: tooltip,
     isEnabled: isEnabled,
-    value: isLatest ? 'Latest' : selectedDimension.currentValue,
+    value: getValue(),
     list: dimensionValues.map(function (dimensionValue) {
       return {
         value: dimensionValue
       };
     }),
-    currentIndex: isLatest ? 0 : dimensionValues.findIndex(function (dimensionValue) {
-      return dimensionValue === selectedDimension.currentValue;
-    }),
+    currentIndex: getIndex(),
     onChange: function onChange(event) {
       event.stopPropagation();
       setDimensionValue(event.target.value);
@@ -1294,7 +1328,7 @@ var DimensionSelectValue = function DimensionSelectValue(_ref) {
           style: {
             whiteSpace: 'nowrap'
           },
-          children: [dimensionValue, dimensionValue !== 'Latest' && jsxs("i", {
+          children: [dimensionValue, !dimensionValue.includes('Latest') && jsxs("i", {
             children: [" ", selectedDimension.units]
           })]
         })
@@ -2461,7 +2495,7 @@ var Accordion = function Accordion(_ref0) {
     isEDRLayer = _ref0$isEDRLayer === void 0 ? false : _ref0$isEDRLayer;
   var _useCoreTranslation3 = useCoreTranslation(),
     t = _useCoreTranslation3.t;
-  var displayLayerName = isEDRLayer && layerName != null && layerName.includes(',') ? t('layermanager-EDR-multiparam') : layerName;
+  var displayLayerName = isEDRLayer ? t('layermanager-EDR') + layerName : layerName;
   return jsx(CustomAccordion, {
     className: "medium-layermanager",
     defaultExpanded: false,
@@ -2832,10 +2866,12 @@ var getRenderEDRLayersValues = function getRenderEDRLayersValues(selectedParams,
   };
 };
 var RenderEDRLayers = function RenderEDRLayers(_ref) {
-  var onChangeLayerName = _ref.onChangeLayerName,
+  var onChangeLayerOptions = _ref.onChangeLayerOptions,
     selectedParams = _ref.selectedParams,
     _ref$layers = _ref.layers,
     layers = _ref$layers === void 0 ? [] : _ref$layers,
+    layerName = _ref.layerName,
+    collectionId = _ref.collectionId,
     _ref$isEnabled = _ref.isEnabled,
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
     tooltipPrefix = _ref.tooltipPrefix,
@@ -2849,10 +2885,13 @@ var RenderEDRLayers = function RenderEDRLayers(_ref) {
   var selectLayer = function selectLayer(event) {
     event.stopPropagation();
     // Ensure after deselecting all, the empty value gets removed
-    var params = event.target.value.filter(function (param) {
+    var parameterNames = event.target.value.filter(function (param) {
       return param !== '';
     });
-    onChangeLayerName(params.join(','));
+    onChangeLayerOptions({
+      collectionId: collectionId,
+      parameterNames: parameterNames
+    });
   };
   var _getRenderEDRLayersVa = getRenderEDRLayersValues(selectedParams, layers),
     currentValues = _getRenderEDRLayersVa.currentValues,
@@ -2862,7 +2901,7 @@ var RenderEDRLayers = function RenderEDRLayers(_ref) {
       value: layer.name
     };
   });
-  var multiParamText = t('layermanager-EDR-multiparam');
+  var edrText = t('layermanager-EDR');
   var tooltipNames = currentValues.map(function (value) {
     var layer = extendedLayers.find(function (layer) {
       return value === layer.name;
@@ -2886,14 +2925,8 @@ var RenderEDRLayers = function RenderEDRLayers(_ref) {
     onChange: selectLayer,
     skipLocalStyling: skipLocalStyling,
     multiple: true,
-    renderValue: function renderValue(values) {
-      if (values.length === 1) {
-        var layer = extendedLayers.find(function (layer) {
-          return layer.name === currentValues[0];
-        });
-        return (layer == null ? void 0 : layer.title) || (layer == null ? void 0 : layer.name) || 'Param';
-      }
-      return multiParamText;
+    renderValue: function renderValue() {
+      return edrText + layerName;
     },
     children: [jsx(MenuItem, {
       disabled: true,
@@ -2927,6 +2960,9 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var layerName = useSelector(function (store) {
     return layerSelectors.getLayerName(store, layerId);
   });
+  var layerDisplayName = useSelector(function (store) {
+    return layerSelectors.getLayerDisplayName(store, layerId);
+  });
   var layerType = useSelector(function (store) {
     return layerSelectors.getLayerType(store, layerId);
   });
@@ -2939,6 +2975,9 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var service = useSelector(function (store) {
     return serviceSelectors.getServiceByUrl(store, layerService);
   });
+  var layerOptions = useSelector(function (store) {
+    return layerSelectors.getLayerOptions(store, layerId);
+  });
   var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
@@ -2997,15 +3036,29 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
       origin: layerTypes.LayerActionOrigin.layerManager
     }));
   }, [dispatch, mapId]);
-  if (layerType === LayerType.edrLayer) {
-    var selectedParams = layerName.split(',');
+  var layerChangeOptions = React.useCallback(function (_ref4) {
+    var layerId = _ref4.layerId,
+      options = _ref4.options;
+    return dispatch(layerActions.layerChangeOptions({
+      layerId: layerId,
+      options: options,
+      mapId: mapId,
+      origin: layerTypes.LayerActionOrigin.layerManager
+    }));
+  }, [dispatch, mapId]);
+  if (layerType === LayerType.edrFeatureLayer) {
+    var _layerOptions$paramet;
+    var selectedParams = (_layerOptions$paramet = layerOptions == null ? void 0 : layerOptions.parameterNames) != null ? _layerOptions$paramet : [];
+    var collectionId = (layerOptions == null ? void 0 : layerOptions.collectionId) || '';
     return jsx(RenderEDRLayers, {
       layers: layers,
+      layerName: layerDisplayName,
+      collectionId: collectionId,
       selectedParams: selectedParams,
-      onChangeLayerName: function onChangeLayerName(name) {
-        layerChangeName({
+      onChangeLayerOptions: function onChangeLayerOptions(options) {
+        layerChangeOptions({
           layerId: layerId,
-          name: name
+          options: options
         });
       },
       isEnabled: isLayerEnabled,
@@ -3303,24 +3356,11 @@ var MissingDataConnect = function MissingDataConnect(_ref) {
   var layerIsInsideAcceptanceTime = useSelector(function (store) {
     return layerSelectors.getLayerIsInsideAcceptanceTime(store, layerId, mapId);
   });
-  var layerName = useSelector(function (store) {
-    return layerSelectors.getLayerName(store, layerId);
-  });
-  var layerType = useSelector(function (store) {
-    return layerSelectors.getLayerType(store, layerId);
-  });
-  var layerService = useSelector(function (store) {
-    return layerSelectors.getLayerService(store, layerId);
-  });
-  var serviceLayer = useSelector(function (store) {
-    return serviceSelectors.getLayerFromService(store, layerService, layerName, layerType === LayerType.edrLayer);
-  });
-  var layerStatus = useSelector(function (store) {
-    return layerSelectors.getLayerStatus(store, layerId);
+  var isLayerMissing = useSelector(function (store) {
+    return layerSelectors.getIsLayerMissing(store, layerId);
   });
-  var layerIsMissingOnServer = !serviceLayer || layerStatus === layerTypes.LayerStatus.error;
   return jsx(MissingData, {
-    layerIsInsideAcceptanceTime: layerIsMissingOnServer ? 'outside' : layerIsInsideAcceptanceTime
+    layerIsInsideAcceptanceTime: isLayerMissing ? 'outside' : layerIsInsideAcceptanceTime
   });
 };
 
@@ -3445,45 +3485,32 @@ var LayerRowConnect = /*#__PURE__*/React.memo(function (_ref) {
   var layerName = useSelector(function (store) {
     return layerSelectors.getLayerName(store, layerId);
   });
+  var layerDisplayName = useSelector(function (store) {
+    return layerSelectors.getLayerDisplayName(store, layerId);
+  });
   var layerType = useSelector(function (store) {
     return layerSelectors.getLayerType(store, layerId);
   });
-  var isEDRLayer = layerType === LayerType.edrLayer;
+  var isEDRLayer = layerType === LayerType.edrFeatureLayer;
   var layerServiceUrl = useSelector(function (store) {
     return layerSelectors.getLayerService(store, layerId);
   });
-  var serviceLayer = useSelector(function (store) {
-    return serviceSelectors.getLayerFromService(store, layerServiceUrl, layerName, isEDRLayer);
-  });
-  var layerStatus = useSelector(function (store) {
-    return layerSelectors.getLayerStatus(store, layerId);
-  });
-  var currentlySelectedLayer = useSelector(function (store) {
-    return layerSelectors.getLayerByIdWithoutTimeDimension(store, layerId);
+  var isLayerMissing = useSelector(function (store) {
+    return layerSelectors.getIsLayerMissing(store, layerId);
   });
-  var layerWithAllData = useSelector(function (store) {
-    return serviceSelectors.getLayerFromService(store, currentlySelectedLayer == null ? void 0 : currentlySelectedLayer.service, currentlySelectedLayer == null ? void 0 : currentlySelectedLayer.name);
-  });
-  var currentService = useSelector(function (store) {
-    return serviceSelectors.getServiceByUrl(store, layerServiceUrl);
-  });
-  // Ensure that for an EDR layer, we send over the entire layerName if there are multiple params selected
-  // If only one param selected, send over the title from the service
-  var layerNameForEDRLayer = layerName != null && layerName.includes(',') ? layerName : serviceLayer == null ? void 0 : serviceLayer.title;
-  var fullLayerName = isEDRLayer ? layerNameForEDRLayer : serviceLayer == null ? void 0 : serviceLayer.title;
   renderCounter.count(LayerRowConnect.name);
   return jsx(LayerRow, {
     isEnabled: isEnabled,
     mapId: mapId,
     layerId: layerId,
-    isLayerMissing: !serviceLayer || layerStatus === layerTypes.LayerStatus.error,
-    layerName: fullLayerName || layerName,
+    isLayerMissing: isLayerMissing,
+    layerName: layerDisplayName,
     isEDRLayer: isEDRLayer,
     layerEnableLayout: jsx(EnableLayerConnect, {
       layerId: layerId,
       mapId: mapId,
       isEnabled: isEnabled,
-      layerName: fullLayerName || layerName,
+      layerName: layerDisplayName,
       icon: isEnabled ? settings == null || (_settings$enableLayer = settings.enableLayer) == null ? void 0 : _settings$enableLayer.enabledIcon : settings == null || (_settings$enableLayer2 = settings.enableLayer) == null ? void 0 : _settings$enableLayer2.disabledIcon,
       tooltipTitle: isEnabled ? settings == null || (_settings$enableLayer3 = settings.enableLayer) == null ? void 0 : _settings$enableLayer3.enabledTooltipTitle : settings == null || (_settings$enableLayer4 = settings.enableLayer) == null ? void 0 : _settings$enableLayer4.disabledTooltipTitle
     }),
@@ -3527,10 +3554,10 @@ var LayerRowConnect = /*#__PURE__*/React.memo(function (_ref) {
       layerId: layerId
     }, settings == null ? void 0 : settings.deleteLayer)),
     layerShowLayerInfoLayout: jsx(LayerInfoButtonConnect, {
-      isLayerMissing: !serviceLayer,
+      isLayerMissing: isLayerMissing,
       mapId: mapId,
-      serviceUrl: currentService == null ? void 0 : currentService.serviceUrl,
-      layerName: (layerWithAllData == null ? void 0 : layerWithAllData.name) || ''
+      serviceUrl: layerServiceUrl,
+      layerName: layerName
     }),
     layerMenuLayout: jsx(LayerManagerMenuButtonConnect, Object.assign({
       mapId: mapId,
@@ -5720,6 +5747,11 @@ var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_ref) {
     var animationEndTime = dateUtils.dateToIsoString(dateUtils.add(dateUtils.utc(selectedAnimationStartTime), {
       minutes: length
     }));
+    dispatch(mapActions.setAnimationStartTime({
+      mapId: mapId,
+      animationStartTime: selectedAnimationStartTime || dateUtils.dateToIsoString(dateUtils.utc()),
+      origin: mapEnums.MapActionOrigin.map
+    }));
     dispatch(mapActions.setAnimationEndTime({
       mapId: mapId,
       animationEndTime: animationEndTime || dateUtils.dateToIsoString(dateUtils.utc()),
@@ -5787,10 +5819,6 @@ var TimeSpanButtonConnect = function TimeSpanButtonConnect(_ref) {
     var newSecondsPerPx = secondsPerPxFromCanvasWidth(timeSliderWidth, spanInSeconds);
     var newCenterTime = getNewCenterOfFixedPointZoom(selectedTime, secondsPerPx, newSecondsPerPx, centerTime);
     if (spanInSeconds !== undefined && newCenterTime !== undefined && newSecondsPerPx !== undefined) {
-      dispatch(mapActions.setTimeSliderSecondsPerPx({
-        mapId: mapId,
-        timeSliderSecondsPerPx: newSecondsPerPx
-      }));
       dispatch(mapActions.setTimeSliderSpan({
         mapId: mapId,
         timeSliderSpan: spanInSeconds,
@@ -5960,7 +5988,9 @@ var NowButtonConnect = function NowButtonConnect(_ref) {
     dispatch(genericActions.setTime({
       sourceId: sourceId,
       origin: 'NowButtonConnect, 140',
-      value: handleDateUtilsISOString(newDate)
+      value: {
+        currentTime: handleDateUtilsISOString(newDate)
+      }
     }));
   };
   var onSetCenterTime = function onSetCenterTime(newTime) {
@@ -6165,16 +6195,6 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
         timeSliderCenterTime: newTime
       }));
     },
-    onZoom: function onZoom(newSecondsPerPx, newCenterTime) {
-      dispatch(mapActions.setTimeSliderSecondsPerPx({
-        mapId: mapId,
-        timeSliderSecondsPerPx: newSecondsPerPx
-      }));
-      dispatch(mapActions.setTimeSliderCenterTime({
-        mapId: mapId,
-        timeSliderCenterTime: newCenterTime
-      }));
-    },
     onSetAnimationStartTime: function onSetAnimationStartTime(animationStartTime) {
       dispatch(mapActions.setAnimationStartTime({
         mapId: mapId,
@@ -6195,14 +6215,6 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
           mapId: mapId,
           timeSliderWidth: newWidth
         }));
-        var spanInSeconds = secondsPerPx * storeWidth;
-        var newSecondsPerPx = secondsPerPxFromCanvasWidth(newWidth, spanInSeconds);
-        if (newSecondsPerPx !== undefined) {
-          dispatch(mapActions.setTimeSliderSecondsPerPx({
-            mapId: mapId,
-            timeSliderSecondsPerPx: newSecondsPerPx
-          }));
-        }
       }
     },
     adjustSelectedTimeOnWheel: adjustSelectedTimeOnWheel
@@ -6259,14 +6271,12 @@ var useUpdateTimeSpan = function useUpdateTimeSpan(mapId, myOnSetTimeSliderSpan)
   var isAnimating = useSelector(function (store) {
     return mapSelectors.isAnimating(store, mapId);
   });
-  var updateTimeSliderSpan = function updateTimeSliderSpan(spanInSeconds, newCenterTime, newSecondsPerPx) {
-    if (spanInSeconds !== undefined && newCenterTime !== undefined && newSecondsPerPx !== undefined) {
-      // Do not dispatch actions if values are the same
-      if (currentTimeSpan !== spanInSeconds || secondsPerPx !== newSecondsPerPx || centerTime !== newCenterTime) {
-        myOnSetTimeSliderSpan(spanInSeconds, newCenterTime, newSecondsPerPx);
-      }
+  var updateTimeSliderSpan = React.useCallback(function (spanInSeconds, newCenterTime) {
+    // Do not dispatch actions if values are the same
+    if (spanInSeconds !== undefined && newCenterTime !== undefined && (currentTimeSpan !== spanInSeconds || centerTime !== newCenterTime)) {
+      myOnSetTimeSliderSpan(spanInSeconds, newCenterTime);
     }
-  };
+  }, [centerTime, currentTimeSpan, myOnSetTimeSliderSpan]);
   React.useEffect(function () {
     if (isTimeSpanAuto && autoTimeStepLayerId && activeLayerTimeDimension && !isAnimating) {
       var _getTimeBounds = getTimeBounds([activeLayerTimeDimension]),
@@ -6275,14 +6285,12 @@ var useUpdateTimeSpan = function useUpdateTimeSpan(mapId, myOnSetTimeSliderSpan)
       var minimumStartTime = selectedTime - 24 * 3600;
       var slicedStartTime = startTime < minimumStartTime ? minimumStartTime : startTime;
       var spanInSeconds = endTime - slicedStartTime;
-      var newSecondsPerPx = secondsPerPxFromCanvasWidth(timeSliderWidth, spanInSeconds);
       var newCenterTime = (slicedStartTime + endTime) / 2;
-      updateTimeSliderSpan(spanInSeconds, newCenterTime, newSecondsPerPx);
+      updateTimeSliderSpan(spanInSeconds, newCenterTime);
     } else {
       var _spanInSeconds = currentTimeSpan || defaultTimeSpan;
-      var _newSecondsPerPx = secondsPerPxFromCanvasWidth(timeSliderWidth, _spanInSeconds);
-      var _newCenterTime = getNewCenterOfFixedPointZoom(selectedTime, secondsPerPx, _newSecondsPerPx, centerTime);
-      updateTimeSliderSpan(_spanInSeconds, _newCenterTime, _newSecondsPerPx);
+      var _newCenterTime = getNewCenterOfFixedPointZoom(selectedTime, secondsPerPx, secondsPerPxFromCanvasWidth(timeSliderWidth, _spanInSeconds), centerTime);
+      updateTimeSliderSpan(_spanInSeconds, _newCenterTime);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [autoTimeStepLayerId, isTimeSpanAuto, mapId, activeLayerTimeDimension == null ? void 0 : activeLayerTimeDimension.name]);
@@ -6330,19 +6338,11 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
       origin: mapEnums.MapActionOrigin.map
     }));
   }, [dispatch, mapId]);
-  var onSetTimeSliderSpan = React.useCallback(function (newSpan, newCenterTime, newSecondsPerPx) {
-    dispatch(mapActions.setTimeSliderSecondsPerPx({
-      mapId: mapId,
-      timeSliderSecondsPerPx: newSecondsPerPx
-    }));
+  var onSetTimeSliderSpan = React.useCallback(function (newSpan) {
     dispatch(mapActions.setTimeSliderSpan({
       mapId: mapId,
       timeSliderSpan: newSpan
     }));
-    dispatch(mapActions.setTimeSliderCenterTime({
-      mapId: mapId,
-      timeSliderCenterTime: newCenterTime
-    }));
   }, [dispatch, mapId]);
   var timeStep = useSelector(function (store) {
     return mapSelectors.getMapTimeStep(store, mapId);
@@ -6384,7 +6384,9 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
     dispatch(genericActions.setTime({
       sourceId: sourceId,
       origin: 'TimeSliderConnect',
-      value: handleDateUtilsISOString(newDate)
+      value: {
+        currentTime: handleDateUtilsISOString(newDate)
+      }
     }));
   }, [dispatch, isAnimating, mapId, sourceId]);
   // Update local state when time is updated outside of this component, e.g. during animation or syncgroups
@@ -7586,32 +7588,27 @@ var OpenLayersFeatureLayerConnect = function OpenLayersFeatureLayerConnect(_ref)
  * Copyright 2025 - Finnish Meteorological Institute (FMI)
  * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var makePrefetchTimeSpan = function makePrefetchTimeSpan(timeSliderStartCenterEndTime, animationStartTime, animationEndTime, isAnimating) {
-  var timeSliderTimeStepInS = timeSliderStartCenterEndTime.step * 60;
-  var animationTimeStartInS = dateUtils.parseISO(animationStartTime).getTime() / 1000;
-  var animationTimeEndInS = dateUtils.parseISO(animationEndTime).getTime() / 1000;
-  var prefetchStart = isAnimating ? animationTimeStartInS : timeSliderStartCenterEndTime.start;
-  var prefetchEnd = isAnimating ? animationTimeEndInS : timeSliderStartCenterEndTime.end;
-  if (!prefetchStart || !prefetchEnd) {
+var makePrefetchTimeSpan = function makePrefetchTimeSpan(timeSliderStartCenterEndTime, isAnimating, prefetchList) {
+  var timeSliderTimeStepInS = timeSliderStartCenterEndTime.step * 60 * 1000;
+  var prefetchStart = timeSliderStartCenterEndTime.start * 1000;
+  var prefetchEnd = timeSliderStartCenterEndTime.end * 1000;
+  if (isAnimating || !prefetchStart || !prefetchEnd) {
     return {
-      timespan: {
-        start: 0,
-        end: 0,
-        step: 0
-      },
-      isAnimating: isAnimating
+      isAnimating: isAnimating,
+      prefetchList: prefetchList
     };
   }
   var roundStart = Math.round(prefetchStart / timeSliderTimeStepInS) * timeSliderTimeStepInS;
-  var roundEnd = Math.round(prefetchEnd / timeSliderTimeStepInS) * timeSliderTimeStepInS;
+  var roundEnd = Math.round(prefetchEnd / timeSliderTimeStepInS) * timeSliderTimeStepInS + timeSliderTimeStepInS;
+  var timeSpanList = makeTimeList({
+    start: roundStart,
+    end: roundEnd,
+    step: timeSliderTimeStepInS
+  });
   // eslint-disable-next-line no-constant-condition
   return {
-    timespan: {
-      start: roundStart * 1000,
-      end: roundEnd * 1000,
-      step: timeSliderTimeStepInS * 1000
-    },
-    isAnimating: isAnimating
+    isAnimating: isAnimating,
+    prefetchList: timeSpanList
   };
 };
 var makeLayerInfoPayload = function makeLayerInfoPayload(payload, mapDimensions, mapId) {
@@ -7820,7 +7817,7 @@ var useGetOpenLayersView = function useGetOpenLayersView(mapId, store) {
  * @param {object} [controls.zoomControls] **optional** controls: object - toggle the map controls, zoomControls defaults to true
  */
 var OlMapViewConnect = function OlMapViewConnect(_ref) {
-  var _featureProperties$va;
+  var _useSelector2, _featureProperties$va;
   var mapId = _ref.mapId,
     children = _ref.children,
     _ref$controls = _ref.controls,
@@ -7917,16 +7914,10 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
   var timeSliderStartCenterEndTime = useSelector(function (store) {
     return mapSelectors.getMapTimeSliderStartCenterEndAndStep(store, mapId);
   });
-  var animationStartTime = useSelector(function (store) {
-    return mapSelectors.getAnimationStartTime(store, mapId);
-  });
-  var animationEndTime = useSelector(function (store) {
-    return mapSelectors.getAnimationEndTime(store, mapId);
-  });
   var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
-  var isAnimating = useSelector(function (store) {
-    return mapSelectors.isAnimating(store, mapId);
-  });
+  var isAnimating = (_useSelector2 = useSelector(function (store) {
+    return mapSelectors.linkedMapAnimationInfo(store, mapId);
+  })) == null ? void 0 : _useSelector2.isAnimating;
   var dispatch = useDispatch();
   var updateLayerInformation = React.useCallback(function (payload) {
     var _payload$layerDimensi, _payload$layerDimensi2;
@@ -7999,6 +7990,9 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
   var isActiveWindowId = useSelector(function (store) {
     return uiSelectors.getIsActiveWindowId(store, mapId);
   });
+  var animationList = useSelector(function (store) {
+    return mapSelectors.getAnimationListAsEpochTimes(store, mapId);
+  });
   React.useEffect(function () {
     registerMap({
       mapId: mapId
@@ -8085,7 +8079,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
       }
     }));
   }, [hoverId, previousHoverId, hoverLinkedFeature, featureProperties, linkedPanelId, dispatch]);
-  var prefetchTimespan = makePrefetchTimeSpan(timeSliderStartCenterEndTime, animationStartTime, animationEndTime, isAnimating);
+  var prefetchTimespan = makePrefetchTimeSpan(timeSliderStartCenterEndTime, isAnimating, animationList);
   var layerIds = mapLayerIds.join();
   var refetchLayers = React.useCallback(function () {
     mapLayerIds == null || mapLayerIds.forEach(/*#__PURE__*/function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "12.13.0",
+  "version": "13.1.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,22 +8,22 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/shared": "12.13.0",
+    "@opengeoweb/shared": "13.1.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/store": "12.13.0",
-    "@opengeoweb/timeslider": "12.13.0",
+    "@opengeoweb/store": "13.1.0",
+    "@opengeoweb/time-slider": "13.1.0",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/webmap-react": "12.13.0",
-    "@opengeoweb/webmap": "12.13.0",
-    "@opengeoweb/theme": "12.13.0",
+    "@opengeoweb/webmap-react": "13.1.0",
+    "@opengeoweb/webmap": "13.1.0",
+    "@opengeoweb/theme": "13.1.0",
     "axios": "^1.7.7",
-    "@opengeoweb/layer-select": "12.13.0",
+    "@opengeoweb/layer-select": "13.1.0",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "react-sortablejs": "^6.1.4",
     "sortablejs": "^1.15.1",
-    "@mui/system": "^7.3.1",
-    "@opengeoweb/snackbar": "12.13.0",
+    "@mui/system": "^7.3.2",
+    "@opengeoweb/snackbar": "13.1.0",
     "react-router-dom": "^6.21.0",
     "react-draggable": "^4.4.6",
     "i18next": "^25.0.1",
@@ -31,8 +31,8 @@
     "dompurify": "^3.0.6",
     "@mui/material": "^7.0.1",
     "@sentry/react": "^8.34.0",
-    "@tanstack/react-query": "^5.69.2",
-    "@opengeoweb/api": "12.13.0",
+    "@tanstack/react-query": "^5.85.5",
+    "@opengeoweb/api": "13.1.0",
     "@types/geojson": "^7946.0.14"
   },
   "peerDependencies": {

package/src/lib/components/EDR/EDRLayerSymbols.stories.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { TimeAwareEDRLocationLayer } from '@opengeoweb/webmap-react';
+import type { Meta } from '@storybook/react-webpack5';
+declare const meta: Meta<typeof TimeAwareEDRLocationLayer>;
+export default meta;
+export declare const EDRLayerSymbols: {
+    (): React.ReactElement;
+    parameters: {
+        msw: {
+            handlers: {
+                locations: import("msw").HttpHandler[];
+            };
+        };
+    };
+};

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/DimensionSelect/DimensionSelectValue.d.ts

@@ -1,6 +1,12 @@
 import { ElementType, FC } from 'react';
 import { layerTypes, mapTypes } from '@opengeoweb/store';
 import { DimensionValueMappings } from '../../../LayerManagerUtils';
+export declare enum LatestOptions {
+    LATEST_0 = "Latest",
+    LATEST_1 = "Latest -1",
+    LATEST_2 = "Latest -2",
+    LATEST_3 = "Latest -3"
+}
 declare const DimensionSelectValue: FC<{
     selectedDimension?: mapTypes.Dimension;
     generatedValues: string[];

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/RenderLayers/RenderEDRLayers.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { LayerProps } from '@opengeoweb/webmap';
+import { EDRFeatureLayerOptions, LayerProps } from '@opengeoweb/webmap';
 export interface RenderEDRLayersProps {
-    onChangeLayerName: (name: string) => void;
+    onChangeLayerOptions: (options: EDRFeatureLayerOptions) => void;
     selectedParams: string[];
     layers: LayerProps[];
+    layerName: string;
+    collectionId: string;
     isEnabled?: boolean;
     tooltipPrefix?: string;
     skipLocalStyling?: boolean;

package/src/lib/components/MapViewConnect/olMapUtils.d.ts

@@ -2,7 +2,7 @@ import { TimeSliderStartCenterEndTime } from '@opengeoweb/store';
 import { Dimension } from '@opengeoweb/webmap';
 import { MapLocation, OnInitializeLayerProps, TimeContextType, UpdateLayerInfoPayload } from '@opengeoweb/webmap-react';
 import { Feature, View } from 'ol';
-export declare const makePrefetchTimeSpan: (timeSliderStartCenterEndTime: TimeSliderStartCenterEndTime, animationStartTime: string | undefined, animationEndTime: string | undefined, isAnimating: boolean) => TimeContextType;
+export declare const makePrefetchTimeSpan: (timeSliderStartCenterEndTime: TimeSliderStartCenterEndTime, isAnimating: boolean, prefetchList: number[]) => TimeContextType;
 export declare const makeLayerInfoPayload: (payload: OnInitializeLayerProps, mapDimensions: Dimension[], mapId: string) => UpdateLayerInfoPayload;
 export declare const getCenterOfLinkedFeature: (feature: Feature | undefined, srs: string) => MapLocation | null;
 interface UseFitAndHighlightWarningFeatureOptions {

package/src/lib/components/TimeSliderConnect/TimeSliderConnect.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare const useUpdateTimestep: (mapId: string) => void;
-export declare const useUpdateTimeSpan: (mapId: string, myOnSetTimeSliderSpan: (newSpan: number, newCenterTime: number, newSecondsPerPx: number) => void) => void;
+export declare const useUpdateTimeSpan: (mapId: string, myOnSetTimeSliderSpan: (newSpan: number, newCenterTime: number) => void) => void;
 interface TimeSliderConnectProps {
     sourceId: string;
     mapId: string;

package/src/lib/components/TimeSliderConnect/TimeSliderLegendConnect.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 interface TimeSliderLegendConnectProps {
     mapId: string;
-    onSetTimeSliderSpan?: (newSpan: number, newCenterTime: number, newSecondsPerPx: number) => void;
+    onSetTimeSliderSpan?: (newSpan: number, newCenterTime: number) => void;
     unfilteredSelectedTime: number;
     setUnfilteredSelectedTime: (unfilteredSelectedTime: number) => void;
     mapWindowRef?: React.MutableRefObject<HTMLElement | null>;

package/src/lib/components/TimeSliderConnect/timesliderUtils.d.ts

@@ -1,5 +1,5 @@
 import { mapTypes } from '@opengeoweb/store';
-import { TimeBounds } from '@opengeoweb/timeslider';
+import { TimeBounds } from '@opengeoweb/time-slider';
 /**
  * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
  */