@opengeoweb/core 9.1.0 → 9.2.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, forwardRef, useContext, useRef, useEffect, useLayoutEffect } from 'react';
+import React__default, { useState, useCallback, forwardRef, useContext, useRef, useEffect, useLayoutEffect } from 'react';
 import { Grid, Box as Box$2, MenuItem, Typography, useTheme as useTheme$2, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, Paper, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, styled as styled$1, Slider, Checkbox, Card, IconButton, Select, CardContent, RadioGroup, FormControlLabel, Radio, ToggleButtonGroup, ToggleButton, Divider, Tooltip, ButtonGroup } from '@mui/material';
 import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, calculateStartSize, ToolContainerDraggable, dateUtils, withEggs } from '@opengeoweb/shared';
 import { LayerSelectButtonConnect, LayerInfoButton, LayerInfoButtonConnect, getUserAddedServices, layerSelectConfig } from '@opengeoweb/layer-select';
@@ -3851,6 +3851,139 @@ _extends$3(Remove, {
 Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
+var DimensionSelectValue = function DimensionSelectValue(_ref) {
+  var isEnabled = _ref.isEnabled,
+    tooltip = _ref.tooltip,
+    selectedDimension = _ref.selectedDimension,
+    icon = _ref.icon,
+    onLayerChangeDimension = _ref.onLayerChangeDimension,
+    valueMappings = _ref.valueMappings,
+    hideLatestDuplicate = _ref.hideLatestDuplicate,
+    setUseLatestReferenceTime = _ref.setUseLatestReferenceTime,
+    useLatestReferenceTime = _ref.useLatestReferenceTime;
+  var _a;
+  var dimensionValuesRaw = (_a = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _a === void 0 ? void 0 : _a.split(',').slice(0, 100).reverse();
+  if (!(selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.name) || !(dimensionValuesRaw === null || dimensionValuesRaw === void 0 ? void 0 : dimensionValuesRaw.length)) {
+    return null;
+  }
+  var isReferenceTimeDimensionAndUseLatestIsAvailable = selectedDimension.name === 'reference_time' && useLatestReferenceTime !== undefined;
+  var latestValue = hideLatestDuplicate && isReferenceTimeDimensionAndUseLatestIsAvailable ? dimensionValuesRaw.shift() : dimensionValuesRaw[0];
+  var setDimensionValue = function setDimensionValue(dimensionValue) {
+    if (isReferenceTimeDimensionAndUseLatestIsAvailable) {
+      if (dimensionValue === 'Latest') {
+        setUseLatestReferenceTime === null || setUseLatestReferenceTime === void 0 ? void 0 : setUseLatestReferenceTime(true);
+        onLayerChangeDimension(selectedDimension.name, dimensionValuesRaw[0], layerTypes.LayerActionOrigin.layerManager);
+        return;
+      }
+      setUseLatestReferenceTime === null || setUseLatestReferenceTime === void 0 ? void 0 : setUseLatestReferenceTime(false);
+    }
+    onLayerChangeDimension(selectedDimension.name, dimensionValue, layerTypes.LayerActionOrigin.layerManager);
+  };
+  var dimensionValues = isReferenceTimeDimensionAndUseLatestIsAvailable ? ['Latest'].concat(_toConsumableArray(dimensionValuesRaw)) : dimensionValuesRaw.slice(0, 100).reverse();
+  var isLatest = isReferenceTimeDimensionAndUseLatestIsAvailable && useLatestReferenceTime && selectedDimension.maxValue === selectedDimension.currentValue;
+  return /*#__PURE__*/React__default.createElement(TooltipSelect, {
+    disableUnderline: true,
+    tooltip: tooltip,
+    isEnabled: isEnabled,
+    value: isLatest ? 'Latest' : selectedDimension.currentValue,
+    list: dimensionValues.map(function (dimensionValue) {
+      return {
+        value: dimensionValue
+      };
+    }),
+    currentIndex: isLatest ? 0 : dimensionValues.findIndex(function (dimensionValue) {
+      return dimensionValue === selectedDimension.currentValue;
+    }),
+    onChange: function onChange(event) {
+      event.stopPropagation();
+      setDimensionValue(event.target.value);
+    },
+    onChangeMouseWheel: function onChangeMouseWheel(event) {
+      setDimensionValue(event.value);
+    },
+    style: {
+      maxWidth: '50%'
+    },
+    IconComponent: icon
+  }, /*#__PURE__*/React__default.createElement(MenuItem, {
+    disabled: true
+  }, "Dimension value (", dimensionValues.length, " options)"), dimensionValues.map(function (dimensionValue) {
+    var _a;
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: dimensionValue,
+      value: dimensionValue
+    }, ((_a = valueMappings === null || valueMappings === void 0 ? void 0 : valueMappings[selectedDimension.name]) === null || _a === void 0 ? void 0 : _a.call(valueMappings, dimensionValue, isReferenceTimeDimensionAndUseLatestIsAvailable ? latestValue : undefined)) || /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        whiteSpace: 'nowrap'
+      }
+    }, dimensionValue, dimensionValue !== 'Latest' && /*#__PURE__*/React__default.createElement("i", null, " ", selectedDimension.units)));
+  }));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var DimensionSelectName = function DimensionSelectName(_ref) {
+  var selectedDimensionName = _ref.selectedDimensionName,
+    setSelectedDimensionName = _ref.setSelectedDimensionName,
+    icon = _ref.icon,
+    nameMappings = _ref.nameMappings,
+    tooltip = _ref.tooltip,
+    isEnabled = _ref.isEnabled,
+    dimensionNames = _ref.dimensionNames;
+  return /*#__PURE__*/React__default.createElement(TooltipSelect, {
+    disableUnderline: true,
+    tooltip: tooltip,
+    isEnabled: isEnabled,
+    value: selectedDimensionName,
+    list: dimensionNames.map(function (name) {
+      return {
+        value: name
+      };
+    }),
+    currentIndex: dimensionNames.findIndex(function (name) {
+      return name === selectedDimensionName;
+    }),
+    onChange: function onChange(event) {
+      event.stopPropagation();
+      setSelectedDimensionName(event.target.value);
+    },
+    onChangeMouseWheel: function onChangeMouseWheel(event) {
+      setSelectedDimensionName(event.value);
+    },
+    style: {
+      maxWidth: '50%'
+    },
+    IconComponent: icon
+  }, /*#__PURE__*/React__default.createElement(MenuItem, {
+    disabled: true
+  }, "Dimension"), dimensionNames.map(function (name) {
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: name,
+      value: name
+    }, (nameMappings === null || nameMappings === void 0 ? void 0 : nameMappings[name]) || name);
+  }));
+};
+
+var defaultDimensionNameTooltip = function defaultDimensionNameTooltip(selectedDimension) {
+  return "Dimensions: ".concat(selectedDimension.name);
+};
+var defaultDimensionValueTooltip = function defaultDimensionValueTooltip(selectedDimension) {
+  return "Dimensions: ".concat(selectedDimension.name, " ").concat(selectedDimension.currentValue, " ").concat(selectedDimension.units);
+};
 var DimensionSelect = function DimensionSelect(_ref) {
   var onLayerChangeDimension = _ref.onLayerChangeDimension,
     _ref$layerDimensions = _ref.layerDimensions,
@@ -3860,13 +3993,12 @@ var DimensionSelect = function DimensionSelect(_ref) {
     icon = _ref.icon,
     nameMappings = _ref.nameMappings,
     valueMappings = _ref.valueMappings,
-    _ref$tooltipPrefix = _ref.tooltipPrefix,
-    tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Dimensions: ' : _ref$tooltipPrefix,
+    tooltipGenerator = _ref.tooltipGenerator,
     setUseLatestReferenceTime = _ref.setUseLatestReferenceTime,
     useLatestReferenceTime = _ref.useLatestReferenceTime,
     SingleValueComponent = _ref.SingleValueComponent,
-    latestLabel = _ref.latestLabel;
-  var _a, _b;
+    hideLatestDuplicate = _ref.hideLatestDuplicate;
+  var _a, _b, _c, _d, _e, _f;
   var _useState = useState((_a = layerDimensions === null || layerDimensions === void 0 ? void 0 : layerDimensions[0]) === null || _a === void 0 ? void 0 : _a.name),
     _useState2 = _slicedToArray(_useState, 2),
     selectedDimensionName = _useState2[0],
@@ -3889,6 +4021,10 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }
   var collapseDimensionDropdown = SingleValueComponent && layerDimensions.length === 1;
   var collapseValueDropdown = SingleValueComponent && ((_b = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _b === void 0 ? void 0 : _b.length) === 1;
+  var defaultNameTooltip = (_c = defaultDimensionNameTooltip(selectedDimension)) !== null && _c !== void 0 ? _c : '';
+  var defaultValueTooltip = (_d = defaultDimensionValueTooltip(selectedDimension)) !== null && _d !== void 0 ? _d : '';
+  var nameTooltip = (_e = tooltipGenerator === null || tooltipGenerator === void 0 ? void 0 : tooltipGenerator(selectedDimension)) !== null && _e !== void 0 ? _e : defaultNameTooltip;
+  var valueTooltip = (_f = tooltipGenerator === null || tooltipGenerator === void 0 ? void 0 : tooltipGenerator(selectedDimension, true)) !== null && _f !== void 0 ? _f : defaultValueTooltip;
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     direction: "row",
@@ -3901,11 +4037,11 @@ var DimensionSelect = function DimensionSelect(_ref) {
     nameMappings: nameMappings,
     valueMappings: valueMappings,
     position: "dimension"
-  })) : /*#__PURE__*/React.createElement(SelectDimension, {
+  })) : /*#__PURE__*/React.createElement(DimensionSelectName, {
     selectedDimensionName: selectedDimensionName,
     setSelectedDimensionName: setSelectedDimensionName,
     dimensionNames: dimensionNames,
-    tooltipPrefix: tooltipPrefix,
+    tooltip: nameTooltip,
     isEnabled: isEnabled,
     icon: icon,
     nameMappings: nameMappings
@@ -3913,127 +4049,18 @@ var DimensionSelect = function DimensionSelect(_ref) {
     nameMappings: nameMappings,
     valueMappings: valueMappings,
     position: "value"
-  })) : /*#__PURE__*/React.createElement(SelectDimensionValue, {
+  })) : /*#__PURE__*/React.createElement(DimensionSelectValue, {
     selectedDimension: selectedDimension,
     onLayerChangeDimension: onLayerChangeDimension,
-    tooltipPrefix: tooltipPrefix,
+    tooltip: valueTooltip,
     isEnabled: isEnabled,
+    hideLatestDuplicate: hideLatestDuplicate,
     icon: icon,
     valueMappings: valueMappings,
     setUseLatestReferenceTime: setUseLatestReferenceTime,
-    useLatestReferenceTime: useLatestReferenceTime,
-    latestLabel: latestLabel
+    useLatestReferenceTime: useLatestReferenceTime
   })));
 };
-var SelectDimension = function SelectDimension(_ref2) {
-  var selectedDimensionName = _ref2.selectedDimensionName,
-    setSelectedDimensionName = _ref2.setSelectedDimensionName,
-    icon = _ref2.icon,
-    nameMappings = _ref2.nameMappings,
-    tooltipPrefix = _ref2.tooltipPrefix,
-    isEnabled = _ref2.isEnabled,
-    dimensionNames = _ref2.dimensionNames;
-  return /*#__PURE__*/React.createElement(TooltipSelect, {
-    disableUnderline: true,
-    tooltip: "".concat(tooltipPrefix).concat(selectedDimensionName),
-    isEnabled: isEnabled,
-    value: selectedDimensionName,
-    list: dimensionNames.map(function (name) {
-      return {
-        value: name
-      };
-    }),
-    currentIndex: dimensionNames.findIndex(function (name) {
-      return name === selectedDimensionName;
-    }),
-    onChange: function onChange(event) {
-      event.stopPropagation();
-      setSelectedDimensionName(event.target.value);
-    },
-    onChangeMouseWheel: function onChangeMouseWheel(event) {
-      setSelectedDimensionName(event.value);
-    },
-    style: {
-      maxWidth: '50%'
-    },
-    IconComponent: icon
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    disabled: true
-  }, "Dimension"), dimensionNames.map(function (name) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      key: name,
-      value: name
-    }, (nameMappings === null || nameMappings === void 0 ? void 0 : nameMappings[name]) || name);
-  }));
-};
-var SelectDimensionValue = function SelectDimensionValue(_ref3) {
-  var isEnabled = _ref3.isEnabled,
-    tooltipPrefix = _ref3.tooltipPrefix,
-    selectedDimension = _ref3.selectedDimension,
-    icon = _ref3.icon,
-    onLayerChangeDimension = _ref3.onLayerChangeDimension,
-    valueMappings = _ref3.valueMappings,
-    setUseLatestReferenceTime = _ref3.setUseLatestReferenceTime,
-    useLatestReferenceTime = _ref3.useLatestReferenceTime,
-    _ref3$latestLabel = _ref3.latestLabel,
-    latestLabel = _ref3$latestLabel === void 0 ? 'Latest' : _ref3$latestLabel;
-  var _a;
-  var dimensionValuesRaw = (_a = selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.values) === null || _a === void 0 ? void 0 : _a.split(',').slice(0, 100).reverse();
-  if (!(selectedDimension === null || selectedDimension === void 0 ? void 0 : selectedDimension.name) || !(dimensionValuesRaw === null || dimensionValuesRaw === void 0 ? void 0 : dimensionValuesRaw.length)) {
-    return null;
-  }
-  var isReferenceTimeDimensionAndUseLatestIsAvailable = selectedDimension.name === 'reference_time' && useLatestReferenceTime !== undefined;
-  var setDimensionValue = function setDimensionValue(dimensionValue) {
-    if (isReferenceTimeDimensionAndUseLatestIsAvailable) {
-      if (dimensionValue === latestLabel) {
-        setUseLatestReferenceTime === null || setUseLatestReferenceTime === void 0 ? void 0 : setUseLatestReferenceTime(true);
-        onLayerChangeDimension(selectedDimension.name, dimensionValuesRaw[0], layerTypes.LayerActionOrigin.layerManager);
-        return;
-      }
-      setUseLatestReferenceTime === null || setUseLatestReferenceTime === void 0 ? void 0 : setUseLatestReferenceTime(false);
-    }
-    onLayerChangeDimension(selectedDimension.name, dimensionValue, layerTypes.LayerActionOrigin.layerManager);
-  };
-  var dimensionValues = isReferenceTimeDimensionAndUseLatestIsAvailable ? [latestLabel].concat(_toConsumableArray(dimensionValuesRaw)) : dimensionValuesRaw.slice(0, 100).reverse();
-  var isLatest = isReferenceTimeDimensionAndUseLatestIsAvailable && useLatestReferenceTime && selectedDimension.maxValue === selectedDimension.currentValue;
-  return /*#__PURE__*/React.createElement(TooltipSelect, {
-    disableUnderline: true,
-    tooltip: "".concat(tooltipPrefix).concat(selectedDimension.name, " ").concat(selectedDimension.currentValue, " ").concat(selectedDimension.units),
-    isEnabled: isEnabled,
-    value: isLatest ? latestLabel : selectedDimension.currentValue,
-    list: dimensionValues.map(function (dimensionValue) {
-      return {
-        value: dimensionValue
-      };
-    }),
-    currentIndex: isLatest ? 0 : dimensionValues.findIndex(function (dimensionValue) {
-      return dimensionValue === selectedDimension.currentValue;
-    }),
-    onChange: function onChange(event) {
-      event.stopPropagation();
-      setDimensionValue(event.target.value);
-    },
-    onChangeMouseWheel: function onChangeMouseWheel(event) {
-      setDimensionValue(event.value);
-    },
-    style: {
-      maxWidth: '50%'
-    },
-    IconComponent: icon
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    disabled: true
-  }, "Dimension value (", dimensionValues.length, " options)"), dimensionValues.map(function (dimensionValue) {
-    var _a;
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      key: dimensionValue,
-      value: dimensionValue
-    }, ((_a = valueMappings === null || valueMappings === void 0 ? void 0 : valueMappings[selectedDimension.name]) === null || _a === void 0 ? void 0 : _a.call(valueMappings, dimensionValue)) || /*#__PURE__*/React.createElement("span", {
-      style: {
-        whiteSpace: 'nowrap'
-      }
-    }, dimensionValue, dimensionValue !== latestLabel && /*#__PURE__*/React.createElement("i", null, " ", selectedDimension.units)));
-  }));
-};
 
 var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
   var serviceLayer = layers.find(function (l) {
@@ -5253,8 +5280,8 @@ var OpacitySelectConnect = function OpacitySelectConnect(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var useLayerDimensions = function useLayerDimensions(layerId, mapId) {
   var dispatch = useDispatch();
@@ -5264,7 +5291,7 @@ var useLayerDimensions = function useLayerDimensions(layerId, mapId) {
   var isLayerEnabled = useSelector(function (store) {
     return layerSelectors.getLayerEnabled(store, layerId);
   });
-  var layerChangeDimension = React.useCallback(function (_ref) {
+  var layerChangeDimension = useCallback(function (_ref) {
     var dimension = _ref.dimension,
       origin = _ref.origin;
     return dispatch(layerActions.layerChangeDimension({
@@ -5280,13 +5307,7 @@ var useLayerDimensions = function useLayerDimensions(layerId, mapId) {
     layerChangeDimension: layerChangeDimension
   };
 };
-var DimensionSelectConnect = function DimensionSelectConnect(_ref2) {
-  var layerId = _ref2.layerId,
-    mapId = _ref2.mapId;
-  var _useLayerDimensions = useLayerDimensions(layerId, mapId),
-    layerDimensions = _useLayerDimensions.layerDimensions,
-    isLayerEnabled = _useLayerDimensions.isLayerEnabled,
-    layerChangeDimension = _useLayerDimensions.layerChangeDimension;
+var useReferenceTimeWithLatestOption = function useReferenceTimeWithLatestOption(layerId) {
   var useLatestReferenceTime = useSelector(function (store) {
     return layerSelectors.getUseLatestReferenceTime(store, layerId);
   });
@@ -5297,6 +5318,38 @@ var DimensionSelectConnect = function DimensionSelectConnect(_ref2) {
       useLatestReferenceTime: useLatestReferenceTime
     }));
   };
+  return {
+    useLatestReferenceTime: useLatestReferenceTime,
+    setUseLatestReferenceTime: setUseLatestReferenceTime
+  };
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var DimensionSelectConnect = function DimensionSelectConnect(_ref) {
+  var layerId = _ref.layerId,
+    mapId = _ref.mapId;
+  var _useLayerDimensions = useLayerDimensions(layerId, mapId),
+    layerDimensions = _useLayerDimensions.layerDimensions,
+    isLayerEnabled = _useLayerDimensions.isLayerEnabled,
+    layerChangeDimension = _useLayerDimensions.layerChangeDimension;
+  var _useReferenceTimeWith = useReferenceTimeWithLatestOption(layerId),
+    useLatestReferenceTime = _useReferenceTimeWith.useLatestReferenceTime,
+    setUseLatestReferenceTime = _useReferenceTimeWith.setUseLatestReferenceTime;
   if (!layerDimensions.length || !layerId) {
     return null;
   }
@@ -10541,12 +10594,14 @@ var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_a) {
   var layerId = _a.layerId,
     mapId = _a.mapId,
     dimensionsToShow = _a.dimensionsToShow,
-    SingleValueComponent = _a.SingleValueComponent,
-    props = __rest(_a, ["layerId", "mapId", "dimensionsToShow", "SingleValueComponent"]);
+    props = __rest(_a, ["layerId", "mapId", "dimensionsToShow"]);
   var _useLayerDimensions = useLayerDimensions(layerId, mapId),
     layerDimensions = _useLayerDimensions.layerDimensions,
     isLayerEnabled = _useLayerDimensions.isLayerEnabled,
     layerChangeDimension = _useLayerDimensions.layerChangeDimension;
+  var _useReferenceTimeWith = useReferenceTimeWithLatestOption(layerId),
+    useLatestReferenceTime = _useReferenceTimeWith.useLatestReferenceTime,
+    setUseLatestReferenceTime = _useReferenceTimeWith.setUseLatestReferenceTime;
   var filteredDimensions = dimensionsToShow ? dimensionsToShow.map(function (dimensionName) {
     return layerDimensions.find(function (dimension) {
       return dimension.name === dimensionName;
@@ -10554,7 +10609,6 @@ var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_a) {
   }).filter(Boolean) : layerDimensions;
   return /*#__PURE__*/React.createElement(DimensionSelect, Object.assign({
     layerDimensions: filteredDimensions,
-    SingleValueComponent: SingleValueComponent,
     onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue, origin) {
       var dimension = {
         name: dimensionName,
@@ -10565,7 +10619,9 @@ var CustomDimensionSelectConnect = function CustomDimensionSelectConnect(_a) {
         origin: origin
       });
     },
-    isEnabled: isLayerEnabled
+    isEnabled: isLayerEnabled,
+    useLatestReferenceTime: useLatestReferenceTime,
+    setUseLatestReferenceTime: setUseLatestReferenceTime
   }, props));
 };
 
@@ -11403,7 +11459,7 @@ var preset = {
 	timeSeriesServices: [
 		{
 			name: "KNMI",
-			url: "https://gw-edr-dev-add-cfn-t3.pub.dev.knmi.cloud/edr",
+			url: "https://gw-edr-dev-add-cfn.pub.dev.knmi.cloud/edr",
 			id: "knmi",
 			description: "KNMI EDR",
 			type: "EDR",
@@ -13717,7 +13773,7 @@ var getLayersToUpdate = function getLayersToUpdate(layers, mapId) {
     });
     return {
       layerId: layer.id,
-      url: wmjsMap.getWMSGetFeatureInfoRequestURL(wmjsLayer, "".concat(wmjsMap.getMapPin().getXY().x), "".concat(wmjsMap.getMapPin().getXY().y), 'text/html'),
+      url: wmjsMap.getWMSGetFeatureInfoRequestURL(wmjsLayer, wmjsMap.getMapPin().getXY().x, wmjsMap.getMapPin().getXY().y, 'text/html'),
       title: getTitle$1(layer.id)
     };
   });
@@ -15792,10 +15848,10 @@ var circleDrawFunction = function circleDrawFunction(args) {
 var MyMapLocation = function MyMapLocation(_ref) {
   var mapId = _ref.mapId;
   var dispatch = useDispatch();
-  var layers = useSelector(function (store) {
-    return layerSelectors.getLayers(store);
+  var layersBelongsToCurrentMapId = useSelector(function (store) {
+    return layerSelectors.getLayersByMapId(store, mapId || '');
   });
-  var layerLocation = layers.find(function (layer) {
+  var layerLocation = layersBelongsToCurrentMapId.find(function (layer) {
     var _a;
     if (layer.geojson && layer.geojson.features[0] && layer.geojson.features[0].properties && ((_a = layer.geojson.features[0].properties) === null || _a === void 0 ? void 0 : _a.name)) {
       if (layer.geojson.features[0].properties.name === MY_LOCATION) {
@@ -15846,7 +15902,7 @@ var MyMapLocation = function MyMapLocation(_ref) {
         if (!wmjsMap) {
           return;
         }
-        wmjsMap.zoomToLayer(wmjsMap.getActiveLayer());
+        wmjsMap.calculateBoundingBoxAndZoom(latitude, longitude);
       }, function (error) {
         console.warn("Geolocation error: ".concat(error.message));
       }, locationOptions);
@@ -16203,6 +16259,9 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
     width: "".concat(Math.round(100 / cols), "%"),
     height: "".concat(Math.round(100 / rows), "%")
   };
+  if (maps.length === 0) {
+    return null;
+  }
   var firstMapId = maps[0].id;
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -18018,6 +18077,8 @@ var ControlButtonGroup = function ControlButtonGroup(_a) {
   }), children);
 };
 
+var OBSERVED_PADDING_DAYS = 1;
+var FORECAST_PADDING_DAYS = OBSERVED_PADDING_DAYS + 2;
 var TICK_HEIGHT = 6;
 var HOUR_LABEL_OFFSET = 1.5;
 var MONTH_LABEL_BREAKPOINT = 65;
@@ -18063,8 +18124,8 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
   var showHourLabelEveryThirdHour = limitHourLabelsToEveryThirdHour || tickSpacing < HOUR_LABEL_EVERY_THIRD_HOUR_BREAKPOINT;
   // Set up variables for date labels and background colors
   var dayLabels = [];
-  var dayLabelDate = new Date(startTime * SECOND_TO_MILLISECOND);
-  var lastDayLabelDate = new Date(endDate.getTime() + 2 * DAY_TO_MILLISECOND); // Append two more days
+  var dayLabelDate = new Date(startTime * SECOND_TO_MILLISECOND - OBSERVED_PADDING_DAYS * DAY_TO_MILLISECOND);
+  var lastDayLabelDate = new Date(endDate.getTime() + FORECAST_PADDING_DAYS * DAY_TO_MILLISECOND);
   while (dayLabelDate < lastDayLabelDate) {
     var dateString = dayLabelDate.toLocaleDateString(locale, {
       weekday: 'short',
@@ -18096,12 +18157,12 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
       }
     }, label);
   }) : null;
-  var currentDayIndex = (currentTime - startTime) * SECOND_TO_DAY + startTimeDayOffset;
+  var currentDayIndex = (currentTime - startTime) * SECOND_TO_DAY + startTimeDayOffset + OBSERVED_PADDING_DAYS;
   var backgroundRectangles = dayLabels.map(function (label, index) {
-    var observedColor = index % 2 === 0 ? timeSliderLite.timelineBackgroundObservedAlternative.fill : timeSliderLite.timelineBackgroundObserved.fill;
-    var forecastColor = index % 2 === 0 ? timeSliderLite.timelineBackground.fill : timeSliderLite.timelineBackgroundAlternative.fill;
+    var observedColor = index % 2 === 0 ? timeSliderLite.timelineBackgroundObserved.fill : timeSliderLite.timelineBackgroundObservedAlternative.fill;
+    var forecastColor = index % 2 === 0 ? timeSliderLite.timelineBackgroundAlternative.fill : timeSliderLite.timelineBackground.fill;
     var defaultProps = {
-      x: Math.floor(index * tickSpacing - tickOffset),
+      x: Math.floor((index - OBSERVED_PADDING_DAYS) * tickSpacing - tickOffset),
       y: 0,
       height: height
     };
@@ -18124,7 +18185,7 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
   }).flat();
   var dailyLabels = !showMonthLabel ? dayLabels.map(function (label, index) {
     return /*#__PURE__*/React__default.createElement("text", {
-      x: index * tickSpacing + 8 - tickOffset,
+      x: (index - OBSERVED_PADDING_DAYS) * tickSpacing + 8 - tickOffset,
       y: 14,
       fill: timeSliderLite.timeline.fill,
       textAnchor: "left",
@@ -18141,7 +18202,7 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
       length: hourLabelsPerDay
     }, function (_, value) {
       var defaultProps = {
-        x: index * tickSpacing + value * (tickSpacing / hourLabelsPerDay) - tickOffset - HOUR_LABEL_OFFSET,
+        x: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / hourLabelsPerDay) - tickOffset - HOUR_LABEL_OFFSET,
         y: height - 10,
         visibility: showHourLabelEveryThirdHour && value % 3 !== 0 ? 'hidden' : 'visible',
         fill: timeSliderLite.timeline.fill,
@@ -18177,8 +18238,8 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
         length: Math.floor(observedTicksPerDay * (currentDayIndex - index)) + 1
       }, function (_, value) {
         return /*#__PURE__*/React__default.createElement("line", Object.assign({}, defaultProps, {
-          x1: index * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
-          x2: index * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
+          x1: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
+          x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
           key: "".concat(label, "-").concat(value, "-observed-tick")
         }));
       });
@@ -18186,8 +18247,8 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
         length: Math.floor(forecastTicksPerDay * (1 - (currentDayIndex - index))) + 1
       }, function (_, value) {
         return /*#__PURE__*/React__default.createElement("line", Object.assign({}, defaultProps, {
-          x1: (index + 1) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
-          x2: (index + 1) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
+          x1: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
+          x2: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
           key: "".concat(label, "-").concat(value, "-forecast-tick")
         }));
       });
@@ -18197,8 +18258,8 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
       length: ticksPerDay + 1
     }, function (_, value) {
       return /*#__PURE__*/React__default.createElement("line", Object.assign({}, defaultProps, {
-        x1: index * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
-        x2: index * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
+        x1: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
+        x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
         key: "".concat(label, "-").concat(value, "-tick")
       }));
     });
@@ -18466,6 +18527,8 @@ var TimeSliderLiteBackground = function TimeSliderLiteBackground(_ref) {
     timeStep = _ref.timeStep,
     selectedTime = _ref.selectedTime,
     setSelectedTime = _ref.setSelectedTime;
+  var _useTheme = useTheme$2(),
+    timeSliderLite = _useTheme.palette.geowebColors.timeSliderLite;
   var sliderAreaRef = useRef(null);
   var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -18489,7 +18552,8 @@ var TimeSliderLiteBackground = function TimeSliderLiteBackground(_ref) {
       position: 'relative',
       height: "".concat(height, "px"),
       overflow: 'hidden',
-      width: '100%'
+      width: '100%',
+      backgroundColor: timeSliderLite.timelineBackgroundObserved.fill
     },
     "data-testid": "TimeSliderLite-Background"
   }, /*#__PURE__*/React__default.createElement(TimeSliderLiteBackgroundSvg, {
@@ -18863,6 +18927,58 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
   }))));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var useOnToggleAnimation = function useOnToggleAnimation(dispatch, mapId, selectedTime, timeStep, defaultTimeStep, startTime, endTime, isAnimating, timeSliderProps) {
+  var startMapAnimation = function startMapAnimation() {
+    var _a, _b, _c;
+    var observedTimeStep = (_a = timeStep === null || timeStep === void 0 ? void 0 : timeStep[0]) !== null && _a !== void 0 ? _a : defaultTimeStep[0];
+    var forecastTimeStep = (_b = timeStep === null || timeStep === void 0 ? void 0 : timeStep[1]) !== null && _b !== void 0 ? _b : defaultTimeStep[1];
+    var floorCorrectedTimeStart = floorLocalSeconds(startTime, HOUR_TO_SECOND);
+    var floorCorrectedEndTime = floorLocalSeconds(endTime, HOUR_TO_SECOND);
+    var timeList = generateCustomTimeList((_c = timeSliderProps.currentTime) !== null && _c !== void 0 ? _c : Date.now() * MILLISECOND_TO_SECOND, floorCorrectedTimeStart, floorCorrectedEndTime, [observedTimeStep, forecastTimeStep]);
+    dispatch(mapActions.mapStartAnimation({
+      mapId: mapId,
+      initialTime: new Date(selectedTime * SECOND_TO_MILLISECOND).toISOString(),
+      timeList: timeList,
+      origin: mapEnums.MapActionOrigin.map
+    }));
+  };
+  var onToggleAnimation = function onToggleAnimation() {
+    if (isAnimating) {
+      dispatch(mapActions.mapStopAnimation({
+        mapId: mapId,
+        origin: mapEnums.MapActionOrigin.map
+      }));
+    } else {
+      startMapAnimation();
+    }
+  };
+  React__default.useEffect(function () {
+    var hasTimeRange = startTime && endTime && selectedTime;
+    var isInvalidAnimation = selectedTime < startTime || selectedTime > endTime;
+    if (hasTimeRange && isInvalidAnimation && isAnimating) {
+      startMapAnimation();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTime, startTime, endTime]);
+  return onToggleAnimation;
+};
+
 var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
   var _b, _c, _d, _e, _f, _g;
   var overrideUseTimeRange = _a.overrideUseTimeRange,
@@ -18935,27 +19051,7 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_a) {
   var selectedTime = useSelector(function (store) {
     return mapSelectors.getSelectedTime(store, mapId);
   });
-  var onToggleAnimation = function onToggleAnimation() {
-    var _a, _b, _c;
-    if (isAnimating) {
-      dispatch(mapActions.mapStopAnimation({
-        mapId: mapId,
-        origin: mapEnums.MapActionOrigin.map
-      }));
-    } else {
-      var observedTimeStep = (_a = timeStep === null || timeStep === void 0 ? void 0 : timeStep[0]) !== null && _a !== void 0 ? _a : defaultTimeStep[0];
-      var forecastTimeStep = (_b = timeStep === null || timeStep === void 0 ? void 0 : timeStep[1]) !== null && _b !== void 0 ? _b : defaultTimeStep[1];
-      var floorCorrectedTimeStart = floorLocalSeconds(startTime, HOUR_TO_SECOND);
-      var floorCorrectedEndTime = floorLocalSeconds(endTime, HOUR_TO_SECOND);
-      var timeList = generateCustomTimeList((_c = timeSliderProps.currentTime) !== null && _c !== void 0 ? _c : Date.now() * MILLISECOND_TO_SECOND, floorCorrectedTimeStart, floorCorrectedEndTime, [observedTimeStep, forecastTimeStep]);
-      dispatch(mapActions.mapStartAnimation({
-        mapId: mapId,
-        initialTime: new Date(selectedTime * SECOND_TO_MILLISECOND).toISOString(),
-        timeList: timeList,
-        origin: mapEnums.MapActionOrigin.map
-      }));
-    }
-  };
+  var onToggleAnimation = useOnToggleAnimation(dispatch, mapId, selectedTime, timeStep, defaultTimeStep, startTime, endTime, isAnimating, timeSliderProps);
   var handleTimeRangeChange = function handleTimeRangeChange(newTimeRange) {
     if (isAnimating && newTimeRange) {
       dispatch(mapActions.mapStopAnimation({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

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

@@ -7,6 +7,7 @@ export interface SingleValueComponentProps extends mapTypes.Dimension {
     nameMappings?: DimensionNameMappings;
     valueMappings?: DimensionValueMappings;
 }
+export type DimensionTooltipGenerator = (selectedDimension: mapTypes.Dimension, isValue?: boolean) => string;
 export interface DimensionSelectProps {
     layerDimensions?: mapTypes.Dimension[];
     onLayerChangeDimension: (dimensionName: string, dimensionValue: string, origin?: layerTypes.LayerActionOrigin.layerManager) => void;
@@ -14,11 +15,11 @@ export interface DimensionSelectProps {
     icon?: ElementType;
     nameMappings?: DimensionNameMappings;
     valueMappings?: DimensionValueMappings;
-    tooltipPrefix?: string;
+    tooltipGenerator?: DimensionTooltipGenerator;
     useLatestReferenceTime?: boolean;
     setUseLatestReferenceTime?: (useLatestReferenceTime: boolean) => void;
     SingleValueComponent?: React.FC<SingleValueComponentProps>;
-    latestLabel?: string;
+    hideLatestDuplicate?: boolean;
 }
 declare const DimensionSelect: FC<DimensionSelectProps>;
 export default DimensionSelect;

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

@@ -1,17 +1,7 @@
 import * as React from 'react';
-import { layerTypes, mapTypes } from '@opengeoweb/store';
 export interface DimensionSelectProps {
     layerId: string;
     mapId: string;
 }
-interface LayerChangeDimensionParams {
-    dimension: mapTypes.Dimension;
-    origin: layerTypes.LayerActionOrigin | undefined;
-}
-export declare const useLayerDimensions: (layerId: string, mapId: string) => {
-    layerDimensions: mapTypes.Dimension[];
-    isLayerEnabled: boolean;
-    layerChangeDimension: ({ dimension, origin, }: LayerChangeDimensionParams) => void;
-};
 declare const DimensionSelectConnect: React.FC<DimensionSelectProps>;
 export default DimensionSelectConnect;

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

@@ -0,0 +1,15 @@
+import { ElementType, FC } from 'react';
+import { layerTypes, mapTypes } from '@opengeoweb/store';
+import { DimensionValueMappings } from '../../../LayerManagerUtils';
+declare const DimensionSelectValue: FC<{
+    selectedDimension?: mapTypes.Dimension;
+    icon?: ElementType;
+    tooltip: string;
+    isEnabled: boolean;
+    onLayerChangeDimension: (dimensionName: string, dimensionValue: string, origin?: layerTypes.LayerActionOrigin.layerManager) => void;
+    valueMappings?: DimensionValueMappings;
+    hideLatestDuplicate?: boolean;
+    useLatestReferenceTime?: boolean;
+    setUseLatestReferenceTime?: (useLatestReferenceTime: boolean) => void;
+}>;
+export default DimensionSelectValue;

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

@@ -0,0 +1,12 @@
+import { ElementType, FC } from 'react';
+import { DimensionNameMappings } from '../../../LayerManagerUtils';
+declare const DimensionSelectName: FC<{
+    dimensionNames: string[];
+    selectedDimensionName: string;
+    setSelectedDimensionName: (dimension: string) => void;
+    icon?: ElementType;
+    nameMappings?: DimensionNameMappings;
+    tooltip: string;
+    isEnabled: boolean;
+}>;
+export default DimensionSelectName;

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

@@ -0,0 +1,15 @@
+import { layerTypes, mapTypes } from '@opengeoweb/store';
+interface LayerChangeDimensionParams {
+    dimension: mapTypes.Dimension;
+    origin: layerTypes.LayerActionOrigin | undefined;
+}
+export declare const useLayerDimensions: (layerId: string, mapId: string) => {
+    layerDimensions: mapTypes.Dimension[];
+    isLayerEnabled: boolean;
+    layerChangeDimension: ({ dimension, origin, }: LayerChangeDimensionParams) => void;
+};
+export declare const useReferenceTimeWithLatestOption: (layerId: string) => {
+    useLatestReferenceTime: boolean;
+    setUseLatestReferenceTime: (useLatestReferenceTime: boolean) => void;
+};
+export {};

package/src/lib/components/LayerManager/LayerManagerUtils.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { mapTypes } from '@opengeoweb/store';
-import type { SingleValueComponentProps } from './LayerContainerRow/LayerRow/DimensionSelect/DimensionSelect';
+import type { DimensionTooltipGenerator, SingleValueComponentProps } from './LayerContainerRow/LayerRow/DimensionSelect/DimensionSelect';
 import { Size, ToolbarButtonSettings } from './LayerManagerHeaderOptions';
 export declare const columnClasses: {
     column1: string;
@@ -163,7 +163,7 @@ export type DimensionNameMappings = {
     [dimensionName: string]: string;
 };
 export type DimensionValueMappings = {
-    [dimensionName: string]: (value: string) => string;
+    [dimensionName: string]: (value: string, latest?: string) => string;
 };
 export interface LayerManagerCustomSettings {
     toolbar?: {
@@ -232,9 +232,10 @@ export interface LayerManagerCustomSettings {
             dimensionsToShow?: string[];
             SingleValueComponent?: React.FC<SingleValueComponentProps>;
             icon?: React.ElementType;
-            tooltipPrefix?: string;
+            tooltipGenerator?: DimensionTooltipGenerator;
             nameMappings?: DimensionNameMappings;
             valueMappings?: DimensionValueMappings;
+            hideLatestDuplicate?: boolean;
         };
         deleteLayer?: {
             tooltipTitle?: string;

package/src/lib/components/TimeSliderLite/useOnToggleAnimation.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch } from '@reduxjs/toolkit';
+import { TimeSliderLiteProps } from './TimeSliderLite';
+export declare const useOnToggleAnimation: (dispatch: Dispatch<any>, mapId: string, selectedTime: number, timeStep: [number, number] | null, defaultTimeStep: [number, number], startTime: number, endTime: number, isAnimating: boolean, timeSliderProps: Partial<TimeSliderLiteProps>) => (() => void);

package/src/lib/components/TimeSliderLite/useOnToggleAnimation.spec.d.ts

@@ -0,0 +1 @@
+export {};