@opengeoweb/core 4.22.1 → 5.0.1

package/index.js

@@ -1,10 +1,10 @@
-import createNextState, { enableES5, isDraftable, isDraft, current, produce } from 'immer';
+import produce, { enableES5, isDraftable, isDraft, current, produce as produce$1 } from 'immer';
 import { createSelector } from 'reselect';
-import _, { isEqual as isEqual$1, debounce, compact, groupBy, throttle as throttle$2, range } from 'lodash';
+import _, { isEqual as isEqual$1, compact, debounce, groupBy, throttle as throttle$2, range } from 'lodash';
 import moment from 'moment';
+import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import * as React from 'react';
 import React__default, { Component, useRef, useState as useState$1, useEffect as useEffect$1, useCallback, createElement, PureComponent, forwardRef, useContext, createContext, Fragment, cloneElement, isValidElement, createRef, useLayoutEffect as useLayoutEffect$1 } from 'react';
-import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { useDispatch, useSelector, connect, Provider } from 'react-redux';
 import { Paper, Box as Box$2, Typography, Grid, MenuItem, useTheme as useTheme$2, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled as styled$1, Slider, Menu, Tooltip, IconButton, ButtonGroup, Divider, Snackbar } from '@mui/material';
 import { CustomTooltip, ToolContainerDraggable, CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, AlertBanner, calculateDialogSizeAndPosition, CustomToggleButton, SearchHighlight, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
@@ -231,7 +231,7 @@ function isPlainObject$2(value) {
     return EnhancerArray;
 })(Array));
 function freezeDraftable(val) {
-    return isDraftable(val) ? createNextState(val, function () {
+    return isDraftable(val) ? produce(val, function () {
     }) : val;
 }
 // src/immutableStateInvariantMiddleware.ts
@@ -374,7 +374,7 @@ function createReducer(initialState, mapOrBuilderCallback, actionMatchers, defau
                     return result;
                 }
                 else {
-                    return createNextState(previousState, function (draft) {
+                    return produce(previousState, function (draft) {
                         return caseReducer(draft, action);
                     });
                 }
@@ -530,7 +530,7 @@ function createStateOperator(mutator) {
             return state;
         }
         else {
-            return createNextState(state, runMutator);
+            return produce(state, runMutator);
         }
     };
 }
@@ -1218,6 +1218,34 @@ var selectors$5 = /*#__PURE__*/Object.freeze({
     getLayerStyles: getLayerStyles$1
 });
 
+/* *
+ * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * */
+var AnimationLength$1;
+(function (AnimationLength) {
+  AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
+  AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
+  AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
+  AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
+  AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
+  AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
+  AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
+  AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
+})(AnimationLength$1 || (AnimationLength$1 = {}));
+
 function _iterableToArrayLimit(arr, i) {
   var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
   if (null != _i) {
@@ -1957,54 +1985,6 @@ var getLastTimeStepForLayerId = function getLastTimeStepForLayerId(layerId) {
   return wmjsTimeDim.getLastValue();
 };
 
-/* *
- * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
-var Scale;
-(function (Scale) {
-  Scale[Scale["Minutes5"] = 0] = "Minutes5";
-  Scale[Scale["Hour"] = 1] = "Hour";
-  Scale[Scale["Hours3"] = 2] = "Hours3";
-  Scale[Scale["Hours6"] = 3] = "Hours6";
-  Scale[Scale["Hours12"] = 4] = "Hours12";
-  Scale[Scale["Day"] = 5] = "Day";
-  Scale[Scale["Days2"] = 6] = "Days2";
-  Scale[Scale["Week"] = 7] = "Week";
-  Scale[Scale["Weeks2"] = 8] = "Weeks2";
-  Scale[Scale["Month"] = 9] = "Month";
-  Scale[Scale["Months3"] = 10] = "Months3";
-  Scale[Scale["Year"] = 11] = "Year";
-  Scale[Scale["DataScale"] = 12] = "DataScale";
-})(Scale || (Scale = {}));
-var AnimationLength;
-(function (AnimationLength) {
-  AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
-  AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
-  AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
-  AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
-  AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
-  AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
-  AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
-  AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
-})(AnimationLength || (AnimationLength = {}));
-var MapActionOrigin;
-(function (MapActionOrigin) {
-  MapActionOrigin["map"] = "map";
-})(MapActionOrigin || (MapActionOrigin = {}));
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2068,385 +2048,99 @@ var types$3 = /*#__PURE__*/Object.freeze({
 
 var types$2 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    get Scale () { return Scale; },
-    get AnimationLength () { return AnimationLength; },
-    get MapActionOrigin () { return MapActionOrigin; },
+    get AnimationLength () { return AnimationLength$1; },
     get LayerType () { return LayerType; },
     get LayerStatus () { return LayerStatus; },
     get LayerActionOrigin () { return LayerActionOrigin; }
 });
 
-var millisecondsInSecond = 1000;
-var defaultAnimationDelayAtStart = 250;
-var defaultDelay = 1000; // [ms]
-var defaultTimeStep = 60;
-var speedFactors = [0.1, 0.2, 0.5, 1, 2, 4, 8, 16]; // Declares available animation speed multipliers for default delay
-/**
- * Returns speed delay for given speedFactor. For options, see defined above in "speedFactors"
- */
-var getSpeedDelay = function getSpeedDelay(speedFactor) {
-  return defaultDelay / speedFactor;
-};
-var getSpeedFactor = function getSpeedFactor(speedDelay) {
-  return defaultDelay / speedDelay;
-};
-var getSelectedTime = function getSelectedTime(timeDimension) {
-  var currentValueIsValid = timeDimension && timeDimension.currentValue && moment.utc(timeDimension.currentValue).isValid();
-  var selectedTime = currentValueIsValid && timeDimension ? moment.utc(timeDimension.currentValue).unix() : moment.utc().unix();
-  return selectedTime;
-};
-/**
- * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
- */
-var getTimeBounds = function getTimeBounds(dimensions) {
-  var defaultStartEnd = moment.utc().set({
-    second: 0,
-    millisecond: 0
-  }).unix();
-  var timeDimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dim) {
-    return dim.name === 'time';
-  });
-  var startTime = timeDimension && timeDimension.minValue ? moment.utc(timeDimension.minValue).unix() : defaultStartEnd;
-  var endTime = timeDimension && timeDimension.maxValue ? moment.utc(timeDimension.maxValue).unix() : defaultStartEnd;
-  var selectedTime = getSelectedTime(timeDimension);
-  return {
-    selectedTime: selectedTime,
-    startTime: startTime,
-    endTime: endTime
-  };
-};
-/**
- * Returns time bounds as *Moment* time instances from the given dimension. If no time dimension given, current time is returned as default
- */
-var getMomentTimeBounds = function getMomentTimeBounds(dimensions) {
-  var _getTimeBounds = getTimeBounds(dimensions),
-    selectedTime = _getTimeBounds.selectedTime,
-    startTime = _getTimeBounds.startTime,
-    endTime = _getTimeBounds.endTime;
-  return {
-    selectedTime: moment.unix(selectedTime),
-    startTime: moment.unix(startTime),
-    endTime: moment.unix(endTime)
-  };
-};
-var scalingCoefficient = function scalingCoefficient(end, start, width) {
-  return width / (end - start);
-};
-var timestampToPixelEdges = function timestampToPixelEdges(timestamp, start, end, width) {
-  return (timestamp - start) * scalingCoefficient(end, start, width);
-};
-var timestampToPixel = function timestampToPixel(timestamp, centerTime, widthPx, secondsPerPx) {
-  return widthPx / 2 - (centerTime - timestamp) / secondsPerPx;
-};
-var pixelToTimestamp = function pixelToTimestamp(timePx, centerTime, widthPx, secondsPerPx) {
-  return centerTime - (widthPx / 2 - timePx) * secondsPerPx;
-};
-var onsetNewDateDebounced = function onsetNewDateDebounced(dateToSet, onSetNewDate) {
-  debounce(function () {
-    onSetNewDate(dateToSet);
-  }, 10, {
-    leading: true
-  })();
-};
-var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
-  var adjustedTimeStep = timeStep * 60;
-  if (!type || type === 'round') {
-    return Math.round(unixTime / adjustedTimeStep) * adjustedTimeStep;
-  }
-  if (type === 'floor') {
-    return Math.floor(unixTime / adjustedTimeStep) * adjustedTimeStep;
-  }
-  if (type === 'ceil') {
-    return Math.ceil(unixTime / adjustedTimeStep) * adjustedTimeStep;
-  }
-  return undefined;
-};
-var setNewRoundedTime = function setNewRoundedTime(x, centerTime, width, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate) {
-  var unixTime = pixelToTimestamp(x, centerTime, width, secondsPerPx);
-  var roundedTime = roundWithTimeStep(unixTime, timeStep);
-  var maxTime = Math.max(roundedTime, dataStartTime);
-  var newTime = Math.min(maxTime, dataEndTime || roundedTime);
-  var selectedTimeString = moment.unix(newTime).toISOString();
-  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
-};
-var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
-  return layers.reduce(function (_ref, layer) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      start = _ref2[0],
-      end = _ref2[1];
-    var dimension = getWMJSTimeDimensionForLayerId(layer.id);
-    if (dimension) {
-      var lastValue = moment(dimension.getLastValue()).unix();
-      var firstValue = moment(dimension.getFirstValue()).unix();
-      var newLast = lastValue > end ? lastValue : end;
-      var newFirst = firstValue < start ? firstValue : start;
-      return [newFirst, newLast];
-    }
-    return [start, end];
-  },
-  /* Using the maximum 32-bit value and 0 as starting points
-   * bigger values like Number.MAX_VALUE or Number.MAX_SAFE_INTEGER
-   * cause weird behaviour as timestamps break at 32bit limit (year 2038)
-   */
-  [2147483647, 0]);
-};
-var setPreviousTimeStep = function setPreviousTimeStep(timeStep, currentTime, dataStartTime, onSetNewDate) {
-  var nextTime = currentTime - timeStep;
-  var roundedTime = roundWithTimeStep(nextTime, timeStep, 'floor');
-  var newTime = Math.max(roundedTime, dataStartTime || roundedTime);
-  var selectedTimeString = moment.unix(newTime).toISOString();
-  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
-};
-var setNextTimeStep = function setNextTimeStep(timeStep, currentTime, dataEndTime, onSetNewDate) {
-  var nextTime = currentTime + timeStep;
-  var roundedTime = roundWithTimeStep(nextTime, timeStep, 'ceil');
-  var newTime = Math.min(roundedTime, dataEndTime || roundedTime);
-  var selectedTimeString = moment.unix(newTime).toISOString();
-  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
-};
-/**
- * updates unfiltered selected time and moves selected time a given distance
- * in pixels. Unfiltered selected time can be outside data data limits, but
- * selected time cannot.
- */
-var moveSelectedTimePx = function moveSelectedTimePx(x, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime, onSetNewDate) {
-  var _map = [dataStartTime, dataEndTime, unfilteredSelectedTime].map(function (timestamp) {
-      return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
-    }),
-    _map2 = _slicedToArray(_map, 3),
-    leftMarkerPx = _map2[0],
-    rightMarkerPx = _map2[1],
-    unfilteredSelectedTimePx = _map2[2];
-  setUnfilteredSelectedTime(pixelToTimestamp(unfilteredSelectedTimePx + x, centerTime, canvasWidth, secondsPerPx));
-  var clickedUnfilteredSelectedTimePx = unfilteredSelectedTimePx + x;
-  var minClickedUnfilteredSelectedTimePx = Math.min(clickedUnfilteredSelectedTimePx, rightMarkerPx);
-  var newUnfilteredSelectedTimePx = Math.max(minClickedUnfilteredSelectedTimePx, leftMarkerPx);
-  setNewRoundedTime(newUnfilteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
-};
-/**
- * This function calculates a suitable secondsPerpx value,
- * when a data scale is selected. secondsPerPx is different for every data set
- * and is calculated here with a function getDataLimitsfromLayers.
- * There in the function the largest time range of all layers is selected.
- * @param layers
- * @returns secondsPerPx for data sets of layers calculated 60*2*3,
- * where 3 is found by trying how to get the whole data range
- * to fit in the time slider
- */
-var getScaleToSecondsPerPxForDataScale = function getScaleToSecondsPerPxForDataScale(layers) {
-  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
-    _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
-    dataStartTime = _getDataLimitsFromLay2[0],
-    dataEndTime = _getDataLimitsFromLay2[1];
-  var dataRegionInSeconds = dataEndTime - dataStartTime;
-  return Math.floor(dataRegionInSeconds / 360); // 60 * 2 * 3, 3 is a hand shake value
-};
-/**
- * In this Map collection all fundamental scales
- * (Scale.Minutes5 ... Scale.Year) are mapped with their corresponding
- * secondsPerPx numbers. A Scale.DataScale is not included since its
- * secondsPerPx number is different for every data set.
- * @returns a Map including information explained above
- */
-var secondsPerPxToScale = new Map([[2.5, Scale.Minutes5], [30, Scale.Hour], [3 * 30, Scale.Hours3], [6 * 30, Scale.Hours6], [24 * 30, Scale.Day], [7 * 24 * 30, Scale.Week], [30 * 24 * 30, Scale.Month], [365 * 24 * 30, Scale.Year]]);
-/**
- * Here secondsPerPxToScale is converted to an iterator object and
- * then keys are turned to values and values turned to keys
- * to make it easier in some parts GeoWeb to fetch a secondsPerpx for
- * a certain fundamental scale (Scale.Minutes5 ... Scale.year)
- * @returns an Object, where names are fundamental scale values (0 - 7) and
- * values are their corresponding secondsPerPx numbers.
- */
-var scaleToSecondsPerPx = _toConsumableArray(secondsPerPxToScale.entries()).reduce(function (acc, _ref3) {
-  var _ref4 = _slicedToArray(_ref3, 2),
-    k = _ref4[0],
-    v = _ref4[1];
-  return Object.assign(Object.assign({}, acc), _defineProperty$1({}, v, Number(k)));
-}, {});
-/**
- * This function creates and returns an array where there is secondsPerPx
- * number of the data set added for a data scale (dataScaleToSecondsPerPx)
- * to secondsPerPxToScale.
- * @param dataScaleToSecondsPerPx
- * @returns an array containing secondsPerPx numbers.
- * The secondsPerPx number for a data scale is included
- * contrary to secondsPerPxToScale.
- */
-var secondsPerPxValues = function secondsPerPxValues(dataScaleToSecondsPerPx) {
-  var sortedSecondsPerPx = _toConsumableArray(secondsPerPxToScale).map(function (value) {
-    return Number(value[0]);
-  });
-  var full = [].concat(_toConsumableArray(sortedSecondsPerPx), [dataScaleToSecondsPerPx]);
-  return full;
-};
-var defaultDataScaleToSecondsPerPx = 43200;
-var getNewCenterOfFixedPointZoom = function getNewCenterOfFixedPointZoom(fixedTimePoint, oldSecondsPerPx, newSecondsPerPx, oldCenterTime) {
-  var centerToFixedPointPx = (fixedTimePoint - oldCenterTime) / oldSecondsPerPx;
-  return fixedTimePoint - centerToFixedPointPx * newSecondsPerPx;
-};
-/**
- * Move the time slider such that a given time point (timePoint)
- * is at a given pixel width (timePointPx).
- * @returns a new center time for the resulting position
- */
-var moveRelativeToTimePoint = function moveRelativeToTimePoint(timePoint, timePointPx, secondsPerPx, canvasWidth) {
-  return timePoint - secondsPerPx * (timePointPx - canvasWidth / 2);
-};
-/** This reusable custom hook tells whether given pointer event targets current canvas node.
- * Example:
+/* *
+ * 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
  *
- * const [isAllowedCanvasNodePointed, nodeRef] = useCanvasTarget('mousedown', false);
- *  ...
- * return isAllowedCanvasNodePointed ? (<CanvasComponent ref={nodeRef}>Component with ref</CanvasComponent>) : (<CanvasComponent>Component with NO ref</CanvasComponent>);
- *  ...
- */
-var useCanvasTarget = function useCanvasTarget(eventType) {
-  var nodeRef = React__default.useRef(null);
-  var _React$useState = React__default.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isTargetNode = _React$useState2[0],
-    setTargetNode = _React$useState2[1];
-  // Check if pointer event targets current node element
-  var pointerEventListener = React__default.useCallback(function (event) {
-    setTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(event.target) : false);
-  }, [nodeRef]);
-  React__default.useEffect(function () {
-    document.addEventListener(eventType, pointerEventListener);
-    return function () {
-      return document.removeEventListener(eventType, pointerEventListener);
-    };
-  }, [eventType, pointerEventListener]); // Only add/remove event listener when listener really changes, that is, NOT necessarily between every re-render.
-  return [isTargetNode, nodeRef];
-};
-var needleGeom = {
-  smallWidth: 126,
-  largeWidth: 167,
-  height: 24,
-  cornerRadius: 5,
-  lineWidth: 1
-};
-var AUTO_MOVE_AREA_PADDING = 1;
-var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
-  return (scale === Scale.Year ? needleGeom.largeWidth : needleGeom.smallWidth) / 2 + AUTO_MOVE_AREA_PADDING;
-};
-/** Reusable business logic for how to handle events that set time to now (closest).
- * Used in NowButton and TimeSliderLegend.
- */
-var handleSetNowEvent = function handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime) {
-  if (dataStartTime < dataEndTime) {
-    if (dataEndTime < currentTime) {
-      onSetNewDate(moment.utc(dataEndTime * millisecondsInSecond).toISOString());
-      onSetCenterTime(dataEndTime);
-    } else if (dataStartTime > currentTime) {
-      onSetNewDate(moment.utc(dataStartTime * millisecondsInSecond).toISOString());
-      onSetCenterTime(dataStartTime);
-    } else {
-      var closestToCurrent = roundWithTimeStep(currentTime, timeStep);
-      onSetNewDate(moment.utc(closestToCurrent * millisecondsInSecond).toISOString());
-      onSetCenterTime(closestToCurrent);
-    }
-  }
-};
-var TimeInMinutes;
-(function (TimeInMinutes) {
-  TimeInMinutes[TimeInMinutes["YEAR"] = 525600] = "YEAR";
-  TimeInMinutes[TimeInMinutes["MONTH"] = 43800] = "MONTH";
-  TimeInMinutes[TimeInMinutes["DAY"] = 1440] = "DAY";
-  TimeInMinutes[TimeInMinutes["HOUR"] = 60] = "HOUR";
-  TimeInMinutes[TimeInMinutes["MINUTE"] = 1] = "MINUTE";
-})(TimeInMinutes || (TimeInMinutes = {}));
-/**
+ *     http://www.apache.org/licenses/LICENSE-2.0
  *
- * @param minutes
- * @returns the two highest values in the format yr(s) mo(s) d h m
- */
-var minutesToDescribedDuration = function minutesToDescribedDuration(minutes) {
-  var units = [{
-    label: 'yr',
-    value: TimeInMinutes.YEAR,
-    plural: 's'
-  }, {
-    label: 'mo',
-    value: TimeInMinutes.MONTH,
-    plural: 's'
-  }, {
-    label: 'd',
-    value: TimeInMinutes.DAY
-  }, {
-    label: 'h',
-    value: TimeInMinutes.HOUR
-  }, {
-    label: 'm',
-    value: TimeInMinutes.MINUTE
-  }];
-  var durations = units.reduce(function (units, duration) {
-    var min = units.min,
-      time = units.time,
-      count = units.count;
-    var label = duration.label,
-      value = duration.value,
-      _duration$plural = duration.plural,
-      plural = _duration$plural === void 0 ? '' : _duration$plural;
-    var unit = Math.floor(min / value);
-    if (unit > 0 && count < 2) {
-      return {
-        time: "".concat(time).concat(unit).concat(label).concat(unit > 1 ? plural : '', " "),
-        min: min - unit * value,
-        count: count + 1
-      };
-    }
-    return {
-      min: min,
-      time: time,
-      count: count
-    };
-  }, {
-    min: minutes,
-    time: '',
-    count: 0
-  });
-  return durations.time.trim();
-};
+ * 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 Scale;
+(function (Scale) {
+  Scale[Scale["Minutes5"] = 0] = "Minutes5";
+  Scale[Scale["Hour"] = 1] = "Hour";
+  Scale[Scale["Hours3"] = 2] = "Hours3";
+  Scale[Scale["Hours6"] = 3] = "Hours6";
+  Scale[Scale["Day"] = 4] = "Day";
+  Scale[Scale["Week"] = 5] = "Week";
+  Scale[Scale["Month"] = 6] = "Month";
+  Scale[Scale["Year"] = 7] = "Year";
+})(Scale || (Scale = {}));
+var Span;
+(function (Span) {
+  Span[Span["Hour"] = 0] = "Hour";
+  Span[Span["Hours3"] = 1] = "Hours3";
+  Span[Span["Hours6"] = 2] = "Hours6";
+  Span[Span["Hours12"] = 3] = "Hours12";
+  Span[Span["Day"] = 4] = "Day";
+  Span[Span["Days2"] = 5] = "Days2";
+  Span[Span["Week"] = 6] = "Week";
+  Span[Span["Weeks2"] = 7] = "Weeks2";
+  Span[Span["Month"] = 8] = "Month";
+  Span[Span["Months3"] = 9] = "Months3";
+  Span[Span["Year"] = 10] = "Year";
+  Span[Span["DataSpan"] = 11] = "DataSpan";
+})(Span || (Span = {}));
+var AnimationLength;
+(function (AnimationLength) {
+  AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
+  AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
+  AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
+  AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
+  AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
+  AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
+  AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
+  AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
+})(AnimationLength || (AnimationLength = {}));
+var MapActionOrigin;
+(function (MapActionOrigin) {
+  MapActionOrigin["map"] = "map";
+})(MapActionOrigin || (MapActionOrigin = {}));
 
-var timeSliderUtils = /*#__PURE__*/Object.freeze({
+var enums = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    millisecondsInSecond: millisecondsInSecond,
-    defaultAnimationDelayAtStart: defaultAnimationDelayAtStart,
-    defaultDelay: defaultDelay,
-    defaultTimeStep: defaultTimeStep,
-    speedFactors: speedFactors,
-    getSpeedDelay: getSpeedDelay,
-    getSpeedFactor: getSpeedFactor,
-    getSelectedTime: getSelectedTime,
-    getTimeBounds: getTimeBounds,
-    getMomentTimeBounds: getMomentTimeBounds,
-    scalingCoefficient: scalingCoefficient,
-    timestampToPixelEdges: timestampToPixelEdges,
-    timestampToPixel: timestampToPixel,
-    pixelToTimestamp: pixelToTimestamp,
-    onsetNewDateDebounced: onsetNewDateDebounced,
-    roundWithTimeStep: roundWithTimeStep,
-    setNewRoundedTime: setNewRoundedTime,
-    getDataLimitsFromLayers: getDataLimitsFromLayers,
-    setPreviousTimeStep: setPreviousTimeStep,
-    setNextTimeStep: setNextTimeStep,
-    moveSelectedTimePx: moveSelectedTimePx,
-    getScaleToSecondsPerPxForDataScale: getScaleToSecondsPerPxForDataScale,
-    secondsPerPxToScale: secondsPerPxToScale,
-    scaleToSecondsPerPx: scaleToSecondsPerPx,
-    secondsPerPxValues: secondsPerPxValues,
-    defaultDataScaleToSecondsPerPx: defaultDataScaleToSecondsPerPx,
-    getNewCenterOfFixedPointZoom: getNewCenterOfFixedPointZoom,
-    moveRelativeToTimePoint: moveRelativeToTimePoint,
-    useCanvasTarget: useCanvasTarget,
-    needleGeom: needleGeom,
-    AUTO_MOVE_AREA_PADDING: AUTO_MOVE_AREA_PADDING,
-    getAutoMoveAreaWidth: getAutoMoveAreaWidth,
-    handleSetNowEvent: handleSetNowEvent,
-    get TimeInMinutes () { return TimeInMinutes; },
-    minutesToDescribedDuration: minutesToDescribedDuration
+    get Scale () { return Scale; },
+    get Span () { return Span; },
+    get AnimationLength () { return AnimationLength; },
+    get MapActionOrigin () { return MapActionOrigin; }
 });
 
+/* *
+ * 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 defaultAnimationDelayAtStart = 250;
+var defaultDelay = 1000; // [ms]
+var defaultTimeStep = 60;
+var defaultSecondsPerPx = 80;
+
 var createMap = function createMap(_ref) {
   var id = _ref.id,
     _ref$isAnimating = _ref.isAnimating,
@@ -2480,18 +2174,18 @@ var createMap = function createMap(_ref) {
     dimensions = _ref$dimensions === void 0 ? [] : _ref$dimensions,
     autoUpdateLayerId = _ref.autoUpdateLayerId,
     autoTimeStepLayerId = _ref.autoTimeStepLayerId,
-    _ref$timeSliderScale = _ref.timeSliderScale,
-    timeSliderScale = _ref$timeSliderScale === void 0 ? Scale.Hour : _ref$timeSliderScale,
+    _ref$timeSliderSpan = _ref.timeSliderSpan,
+    timeSliderSpan = _ref$timeSliderSpan === void 0 ? Span.Day : _ref$timeSliderSpan,
     _ref$timeStep = _ref.timeStep,
     timeStep = _ref$timeStep === void 0 ? defaultTimeStep : _ref$timeStep,
     _ref$animationDelay = _ref.animationDelay,
     animationDelay = _ref$animationDelay === void 0 ? defaultAnimationDelayAtStart : _ref$animationDelay,
+    _ref$timeSliderWidth = _ref.timeSliderWidth,
+    timeSliderWidth = _ref$timeSliderWidth === void 0 ? 440 : _ref$timeSliderWidth,
     _ref$timeSliderCenter = _ref.timeSliderCenterTime,
     timeSliderCenterTime = _ref$timeSliderCenter === void 0 ? moment.utc().unix() : _ref$timeSliderCenter,
     _ref$timeSliderSecond = _ref.timeSliderSecondsPerPx,
-    timeSliderSecondsPerPx = _ref$timeSliderSecond === void 0 ? 30 : _ref$timeSliderSecond,
-    _ref$timeSliderDataSc = _ref.timeSliderDataScaleToSecondsPerPx,
-    timeSliderDataScaleToSecondsPerPx = _ref$timeSliderDataSc === void 0 ? defaultDataScaleToSecondsPerPx : _ref$timeSliderDataSc,
+    timeSliderSecondsPerPx = _ref$timeSliderSecond === void 0 ? defaultSecondsPerPx : _ref$timeSliderSecond,
     _ref$isTimestepAuto = _ref.isTimestepAuto,
     isTimestepAuto = _ref$isTimestepAuto === void 0 ? true : _ref$isTimestepAuto,
     _ref$isTimeSliderHove = _ref.isTimeSliderHoverOn,
@@ -2520,12 +2214,12 @@ var createMap = function createMap(_ref) {
     dimensions: dimensions,
     autoUpdateLayerId: autoUpdateLayerId,
     autoTimeStepLayerId: autoTimeStepLayerId,
-    timeSliderScale: timeSliderScale,
+    timeSliderSpan: timeSliderSpan,
     timeStep: timeStep,
     animationDelay: animationDelay,
+    timeSliderWidth: timeSliderWidth,
     timeSliderCenterTime: timeSliderCenterTime,
     timeSliderSecondsPerPx: timeSliderSecondsPerPx,
-    timeSliderDataScaleToSecondsPerPx: timeSliderDataScaleToSecondsPerPx,
     isTimestepAuto: isTimestepAuto,
     isTimeSliderHoverOn: isTimeSliderHoverOn,
     isTimeSliderVisible: isTimeSliderVisible,
@@ -2686,6 +2380,56 @@ var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInter
 var getActiveLayerTimeStep = function getActiveLayerTimeStep(timeDimension) {
   return (timeDimension === null || timeDimension === void 0 ? void 0 : timeDimension.timeInterval) ? getTimeStepFromDataInterval(timeDimension.timeInterval) : undefined;
 };
+var getSpeedFactor = function getSpeedFactor(speedDelay) {
+  return defaultDelay / speedDelay;
+};
+/**
+ * Returns speed delay for given speedFactor. For options, see defined above in "speedFactors"
+ */
+var getSpeedDelay = function getSpeedDelay(speedFactor) {
+  return defaultDelay / speedFactor;
+};
+var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
+  var adjustedTimeStep = timeStep * 60;
+  if (!type || type === 'round') {
+    return Math.round(unixTime / adjustedTimeStep) * adjustedTimeStep;
+  }
+  if (type === 'floor') {
+    return Math.floor(unixTime / adjustedTimeStep) * adjustedTimeStep;
+  }
+  if (type === 'ceil') {
+    return Math.ceil(unixTime / adjustedTimeStep) * adjustedTimeStep;
+  }
+  return undefined;
+};
+/**
+ * In this Map collection all fundamental scales
+ * (Scale.Minutes5 ... Scale.Year) are mapped with their corresponding
+ * secondsPerPx numbers.
+ * @returns a Map including information explained above
+ */
+var secondsPerPxToScale = new Map([[2.5, Scale.Minutes5], [30, Scale.Hour], [3 * 30, Scale.Hours3], [6 * 30, Scale.Hours6], [24 * 30, Scale.Day], [7 * 24 * 30, Scale.Week], [30 * 24 * 30, Scale.Month], [365 * 24 * 30, Scale.Year]]);
+var secondsToSpan = new Map([[3600, Span.Hour], [3 * 3600, Span.Hours3], [6 * 3600, Span.Hours6], [12 * 3600, Span.Hours12], [24 * 3600, Span.Day], [2 * 24 * 3600, Span.Days2], [7 * 24 * 3600, Span.Week], [2 * 7 * 24 * 3600, Span.Weeks2], [30 * 24 * 3600, Span.Month], [3 * 30 * 24 * 3600, Span.Months3], [365 * 24 * 3600, Span.Year]]);
+/**
+ * Here secondsPerPxToScale is converted to an iterator object and
+ * then keys are turned to values and values turned to keys
+ * to make it easier in some parts GeoWeb to fetch a secondsPerpx for
+ * a certain fundamental scale (Scale.Minutes5 ... Scale.year)
+ * @returns an Object, where names are fundamental scale values (0 - 7) and
+ * values are their corresponding secondsPerPx numbers.
+ */
+var scaleToSecondsPerPx = _toConsumableArray(secondsPerPxToScale.entries()).reduce(function (acc, _ref2) {
+  var _ref3 = _slicedToArray(_ref2, 2),
+    k = _ref3[0],
+    v = _ref3[1];
+  return Object.assign(Object.assign({}, acc), _defineProperty$1({}, v, Number(k)));
+}, {});
+var spanToSeconds = _toConsumableArray(secondsToSpan.entries()).reduce(function (acc, _ref4) {
+  var _ref5 = _slicedToArray(_ref4, 2),
+    k = _ref5[0],
+    v = _ref5[1];
+  return Object.assign(Object.assign({}, acc), _defineProperty$1({}, v, Number(k)));
+}, {});
 
 var utils$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -2697,7 +2441,14 @@ var utils$1 = /*#__PURE__*/Object.freeze({
     produceDraftStateSetMapDimensionFromLayerChangeDimension: produceDraftStateSetMapDimensionFromLayerChangeDimension,
     moveArrayElements: moveArrayElements,
     getTimeStepFromDataInterval: getTimeStepFromDataInterval,
-    getActiveLayerTimeStep: getActiveLayerTimeStep
+    getActiveLayerTimeStep: getActiveLayerTimeStep,
+    getSpeedFactor: getSpeedFactor,
+    getSpeedDelay: getSpeedDelay,
+    roundWithTimeStep: roundWithTimeStep,
+    secondsPerPxToScale: secondsPerPxToScale,
+    secondsToSpan: secondsToSpan,
+    scaleToSecondsPerPx: scaleToSecondsPerPx,
+    spanToSeconds: spanToSeconds
 });
 
 /* *
@@ -2986,13 +2737,15 @@ var createLayer = function createLayer(_a) {
   var id = _a.id,
     _a$opacity = _a.opacity,
     opacity = _a$opacity === void 0 ? 1 : _a$opacity,
+    _a$acceptanceTimeInMi = _a.acceptanceTimeInMinutes,
+    acceptanceTimeInMinutes = _a$acceptanceTimeInMi === void 0 ? 60 : _a$acceptanceTimeInMi,
     _a$enabled = _a.enabled,
     enabled = _a$enabled === void 0 ? true : _a$enabled,
     _a$layerType = _a.layerType,
     layerType = _a$layerType === void 0 ? 'mapLayer' : _a$layerType,
     _a$status = _a.status,
     status = _a$status === void 0 ? 'default' : _a$status,
-    props = __rest$1(_a, ["id", "opacity", "enabled", "layerType", "status"]);
+    props = __rest$1(_a, ["id", "opacity", "acceptanceTimeInMinutes", "enabled", "layerType", "status"]);
   var wmjsLayer = getWMLayerById(id);
   var dimensions = props.dimensions || (wmjsLayer ? wmjsLayer.getDimensions() : []).map(function (dim) {
     return {
@@ -3005,6 +2758,7 @@ var createLayer = function createLayer(_a) {
     dimensions: dimensions,
     id: id,
     opacity: opacity,
+    acceptanceTimeInMinutes: acceptanceTimeInMinutes,
     enabled: enabled,
     layerType: layerType,
     status: status
@@ -3542,7 +3296,7 @@ var createLayersWithIds = function createLayersWithIds(state, layers) {
   if (!layers) {
     return layers;
   }
-  return produce(layers, function (draft) {
+  return produce$1(layers, function (draft) {
     for (var j = 0; j < draft.length; j += 1) {
       var layer = draft[j];
       if (!layer.id) {
@@ -3627,16 +3381,14 @@ var slice$6 = createSlice({
       }
       draft.byId[mapId].isAnimating = false;
     },
-    setTimeSliderScale: function setTimeSliderScale(draft, action) {
+    setTimeSliderSpan: function setTimeSliderSpan(draft, action) {
       var _action$payload3 = action.payload,
         mapId = _action$payload3.mapId,
-        timeSliderScale = _action$payload3.timeSliderScale;
+        timeSliderSpan = _action$payload3.timeSliderSpan;
       if (!draft.byId[mapId]) {
         return;
       }
-      draft.byId[mapId].timeSliderScale = timeSliderScale;
-      var scaleToSecPerPx = timeSliderScale === Scale.DataScale ? draft.byId[mapId].timeSliderDataScaleToSecondsPerPx : scaleToSecondsPerPx[timeSliderScale];
-      draft.byId[mapId].timeSliderSecondsPerPx = scaleToSecPerPx;
+      draft.byId[mapId].timeSliderSpan = timeSliderSpan;
     },
     setTimeStep: function setTimeStep(draft, action) {
       var _action$payload4 = action.payload,
@@ -3725,44 +3477,41 @@ var slice$6 = createSlice({
       }
       map.autoUpdateLayerId = autoUpdateLayerId;
     },
-    setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
+    setTimeSliderWidth: function setTimeSliderWidth(draft, action) {
       var _action$payload12 = action.payload,
         mapId = _action$payload12.mapId,
-        timeSliderCenterTime = _action$payload12.timeSliderCenterTime;
+        timeSliderWidth = _action$payload12.timeSliderWidth;
       if (!draft.byId[mapId]) {
         return;
       }
-      draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
+      draft.byId[mapId].timeSliderWidth = timeSliderWidth;
     },
-    setTimeSliderUnfilteredSelectedTime: function setTimeSliderUnfilteredSelectedTime(draft, action) {
+    setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
       var _action$payload13 = action.payload,
         mapId = _action$payload13.mapId,
-        timeSliderUnfilteredSelectedTime = _action$payload13.timeSliderUnfilteredSelectedTime;
+        timeSliderCenterTime = _action$payload13.timeSliderCenterTime;
       if (!draft.byId[mapId]) {
         return;
       }
-      draft.byId[mapId].timeSliderUnfilteredSelectedTime = timeSliderUnfilteredSelectedTime;
+      draft.byId[mapId].timeSliderCenterTime = timeSliderCenterTime;
     },
-    setTimeSliderSecondsPerPx: function setTimeSliderSecondsPerPx(draft, action) {
+    setTimeSliderUnfilteredSelectedTime: function setTimeSliderUnfilteredSelectedTime(draft, action) {
       var _action$payload14 = action.payload,
         mapId = _action$payload14.mapId,
-        timeSliderSecondsPerPx = _action$payload14.timeSliderSecondsPerPx;
+        timeSliderUnfilteredSelectedTime = _action$payload14.timeSliderUnfilteredSelectedTime;
       if (!draft.byId[mapId]) {
         return;
       }
-      var secondsPerPxToScaleValue = secondsPerPxToScale.get(timeSliderSecondsPerPx);
-      var scale = secondsPerPxToScaleValue === undefined ? Scale.DataScale : secondsPerPxToScale.get(timeSliderSecondsPerPx);
-      draft.byId[mapId].timeSliderSecondsPerPx = timeSliderSecondsPerPx;
-      draft.byId[mapId].timeSliderScale = scale;
+      draft.byId[mapId].timeSliderUnfilteredSelectedTime = timeSliderUnfilteredSelectedTime;
     },
-    setTimeSliderDataScaleToSecondsPerPx: function setTimeSliderDataScaleToSecondsPerPx(draft, action) {
+    setTimeSliderSecondsPerPx: function setTimeSliderSecondsPerPx(draft, action) {
       var _action$payload15 = action.payload,
         mapId = _action$payload15.mapId,
-        timeSliderDataScaleToSecondsPerPx = _action$payload15.timeSliderDataScaleToSecondsPerPx;
+        timeSliderSecondsPerPx = _action$payload15.timeSliderSecondsPerPx;
       if (!draft.byId[mapId]) {
         return;
       }
-      draft.byId[mapId].timeSliderDataScaleToSecondsPerPx = timeSliderDataScaleToSecondsPerPx;
+      draft.byId[mapId].timeSliderSecondsPerPx = timeSliderSecondsPerPx;
     },
     toggleAutoUpdate: function toggleAutoUpdate(draft, action) {
       var _action$payload16 = action.payload,
@@ -4580,6 +4329,41 @@ var selectors$3 = /*#__PURE__*/Object.freeze({
     getDialogFocused: getDialogFocused
 });
 
+/* *
+ * 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 DialogTypes;
+(function (DialogTypes) {
+  DialogTypes["LayerInfo"] = "layerInfo";
+  DialogTypes["SyncGroups"] = "syncGroups";
+  DialogTypes["TimeSeriesSelect"] = "timeSeriesSelect";
+  DialogTypes["TimeSeriesManager"] = "timeSeriesManager";
+  DialogTypes["KeywordFilter"] = "keywordFilter";
+  DialogTypes["DimensionSelectEnsembleMember"] = "dimensionSelect-ensemble_member";
+  DialogTypes["DimensionSelectElevation"] = "dimensionSelect-elevation";
+  DialogTypes["LayerManager"] = "layerManager";
+  DialogTypes["LayerSelect"] = "layerSelect";
+  DialogTypes["DockedLayerManager"] = "dockedLayerManager";
+})(DialogTypes || (DialogTypes = {}));
+
+var types$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get DialogTypes () { return DialogTypes; }
+});
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4835,7 +4619,7 @@ var slice$5 = createSlice({
   }
 });
 var setBboxOrTimeSync = function setBboxOrTimeSync(state, action) {
-  return produce(state, function (draft) {
+  return produce$1(state, function (draft) {
     var _action$payload6 = action.payload,
       targets = _action$payload6.targets,
       source = _action$payload6.source,
@@ -4917,7 +4701,7 @@ var SyncGroupActionOrigin;
   SyncGroupActionOrigin["activateLayerId"] = "ORIGIN_GENERIC_SYNCHRONIZATIONGROUP_UTILS_ACTIVELAYERIDACTION";
 })(SyncGroupActionOrigin || (SyncGroupActionOrigin = {}));
 
-var types$1 = /*#__PURE__*/Object.freeze({
+var types = /*#__PURE__*/Object.freeze({
     __proto__: null,
     SyncGroupTypeList: SyncGroupTypeList,
     get SyncGroupActionOrigin () { return SyncGroupActionOrigin; }
@@ -5090,11 +4874,12 @@ var selectors$2 = /*#__PURE__*/Object.freeze({
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    actions: actions,
     constants: constants,
-    types: types$1,
-    initialState: initialState$4,
-    syncGroupsSelectors: selectors$2
+    types: types,
+    syncGroupsSelectors: selectors$2,
+    syncGroupsTypes: types,
+    actions: actions,
+    initialState: initialState$4
 });
 
 /* *
@@ -5469,15 +5254,15 @@ var getAutoTimeStepLayerId = createSelector(getMapById, function (store) {
   return store === null || store === void 0 ? void 0 : store.autoTimeStepLayerId;
 });
 /**
- * Gets scale of a time slider of a map
+ * Gets span of a time slider of a map
  *
- * Example: scale = getScale(store, 'mapid_1')
+ * Example: span = getSpan(store, 'mapid_1')
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {Scale} returnType: Scale -  scale as an enum
+ * @returns {Span} returnType: Span -  span as an enum
  */
-var getMapTimeSliderScale = createSelector(getMapById, function (store) {
-  return store ? store.timeSliderScale : Scale.Hour;
+var getMapTimeSliderSpan = createSelector(getMapById, function (store) {
+  return store ? store.timeSliderSpan : Span.Day;
 });
 /**
  * Gets time step of a map
@@ -5505,6 +5290,17 @@ var getMapTimeStepWithoutDefault = createSelector(getMapById, function (store) {
 var getMapAnimationDelay = createSelector(getMapById, function (store) {
   return store ? store.animationDelay : defaultAnimationDelayAtStart;
 });
+/**
+ * Returns the width of time slider
+ *
+ * Example: timeSliderWith = getMapTimeSliderWidth(store, 'mapid_1')
+ * @param {object} store store: object - store object
+ * @param {string} mapId mapId: string - Id of the map
+ * @returns {number} returnType: number - center time as a unix timestamp
+ */
+var getMapTimeSliderWidth = createSelector(getMapById, function (store) {
+  return store ? store.timeSliderWidth : 0;
+});
 /**
  * Returns the center time of time slider
  *
@@ -5537,18 +5333,7 @@ var getTimeSliderUnfilteredSelectedTime = createSelector(getMapById, function (s
  * @returns {number} returnType: number - the number of seconds per pixel
  */
 var getMapTimeSliderSecondsPerPx = createSelector(getMapById, function (store) {
-  return store ? store.timeSliderSecondsPerPx : 60;
-});
-/**
- * Returns the number of scale to seconds pixel on the time slider
- *
- * Example: dataScaleToSecondsPerPx = getMapTimeSliderDataScaleToSecondsPerPx(store, 'mapid_1')
- * @param {object} store store: object - store object
- * @param {string} mapId mapId: string - Id of the map
- * @returns {number} returnType: number - the number of scaleto seconds pixel
- */
-var getMapTimeSliderDataScaleToSecondsPerPx = createSelector(getMapById, function (store) {
-  return store ? store.timeSliderDataScaleToSecondsPerPx : defaultDataScaleToSecondsPerPx;
+  return store ? store.timeSliderSecondsPerPx : defaultSecondsPerPx;
 });
 /**
  * Returns map is timestep auto
@@ -5858,14 +5643,14 @@ var selectors = /*#__PURE__*/Object.freeze({
     getActiveLayerId: getActiveLayerId,
     getAutoUpdateLayerId: getAutoUpdateLayerId,
     getAutoTimeStepLayerId: getAutoTimeStepLayerId,
-    getMapTimeSliderScale: getMapTimeSliderScale,
+    getMapTimeSliderSpan: getMapTimeSliderSpan,
     getMapTimeStep: getMapTimeStep,
     getMapTimeStepWithoutDefault: getMapTimeStepWithoutDefault,
     getMapAnimationDelay: getMapAnimationDelay,
+    getMapTimeSliderWidth: getMapTimeSliderWidth,
     getMapTimeSliderCenterTime: getMapTimeSliderCenterTime,
     getTimeSliderUnfilteredSelectedTime: getTimeSliderUnfilteredSelectedTime,
     getMapTimeSliderSecondsPerPx: getMapTimeSliderSecondsPerPx,
-    getMapTimeSliderDataScaleToSecondsPerPx: getMapTimeSliderDataScaleToSecondsPerPx,
     isTimestepAuto: isTimestepAuto,
     isTimeSliderHoverOn: isTimeSliderHoverOn,
     isZoomControlsVisible: isZoomControlsVisible,
@@ -5886,25 +5671,6 @@ var selectors = /*#__PURE__*/Object.freeze({
     getDockedLayerManagerSize: getDockedLayerManagerSize
 });
 
-var DialogTypes;
-(function (DialogTypes) {
-  DialogTypes["LayerInfo"] = "layerInfo";
-  DialogTypes["SyncGroups"] = "syncGroups";
-  DialogTypes["TimeSeriesSelect"] = "timeSeriesSelect";
-  DialogTypes["TimeSeriesManager"] = "timeSeriesManager";
-  DialogTypes["KeywordFilter"] = "keywordFilter";
-  DialogTypes["DimensionSelectEnsembleMember"] = "dimensionSelect-ensemble_member";
-  DialogTypes["DimensionSelectElevation"] = "dimensionSelect-elevation";
-  DialogTypes["LayerManager"] = "layerManager";
-  DialogTypes["LayerSelect"] = "layerSelect";
-  DialogTypes["DockedLayerManager"] = "dockedLayerManager";
-})(DialogTypes || (DialogTypes = {}));
-
-var types = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    get DialogTypes () { return DialogTypes; }
-});
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -5966,225 +5732,6 @@ var produceFilters = function produceFilters(filterNames, filterType, draft, lay
     }
   });
 };
-
-var layerSelectFilterAdapter = createEntityAdapter();
-var layerSelectActiveServicesAdapter = createEntityAdapter();
-var initialServicePopupState = {
-  isOpen: false,
-  url: '',
-  serviceId: '',
-  variant: 'add'
-};
-var initialState$3 = {
-  filters: {
-    searchFilter: '',
-    activeServices: layerSelectActiveServicesAdapter.getInitialState(),
-    filters: layerSelectFilterAdapter.getInitialState()
-  },
-  allServicesEnabled: true,
-  activeLayerInfo: {
-    name: '',
-    title: '',
-    leaf: true,
-    path: [],
-    serviceName: ''
-  },
-  servicePopup: initialServicePopupState
-};
-var slice$4 = createSlice({
-  initialState: initialState$3,
-  name: DialogTypes.LayerSelect,
-  reducers: {
-    setSearchFilter: function setSearchFilter(draft, action) {
-      var filterText = action.payload.filterText;
-      draft.filters.searchFilter = filterText;
-    },
-    setAllServicesEnabled: function setAllServicesEnabled(draft, action) {
-      var allServicesEnabled = action.payload.allServicesEnabled;
-      draft.allServicesEnabled = allServicesEnabled;
-    },
-    closeServicePopupOpen: function closeServicePopupOpen(draft) {
-      draft.servicePopup.isOpen = false;
-    },
-    toggleServicePopup: function toggleServicePopup(draft, action) {
-      var _action$payload = action.payload,
-        variant = _action$payload.variant,
-        isOpen = _action$payload.isOpen;
-      draft.servicePopup.isOpen = isOpen;
-      draft.servicePopup.url = action.payload.url ? action.payload.url : '';
-      draft.servicePopup.variant = variant;
-      draft.servicePopup.serviceId = action.payload.serviceId ? action.payload.serviceId : '';
-    },
-    layerSelectRemoveService: function layerSelectRemoveService(draft, action) {
-      var serviceId = action.payload.serviceId;
-      // 1. Find a service that is to be removed
-      var foundService = draft.filters.activeServices.entities[serviceId];
-      // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
-      foundService.filterIds.forEach(function (filterId) {
-        var foundObject = draft.filters.filters.entities[filterId];
-        if (foundObject && foundObject.amount) {
-          foundObject.amount -= 1;
-          foundObject.amountVisible -= 1;
-        }
-        if (foundObject && foundObject.amount === 0) {
-          delete draft.filters.filters.entities[filterId];
-          draft.filters.filters.ids = draft.filters.filters.ids.filter(function (serviceId) {
-            return serviceId !== filterId;
-          });
-        }
-      });
-      // Finally remove object from activeServices, so if the service is added again later on, new object and keywords will be re-added
-      layerSelectActiveServicesAdapter.removeOne(draft.filters.activeServices, serviceId);
-    },
-    enableActiveService: function enableActiveService(draft, action) {
-      var _action$payload2 = action.payload,
-        serviceId = _action$payload2.serviceId,
-        keywords = _action$payload2.filters;
-      draft.filters.activeServices.entities[serviceId].enabled = true;
-      var _iterator = _createForOfIteratorHelper(keywords),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var keyword = _step.value;
-          draft.filters.filters.entities[keyword].amountVisible += 1;
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-    },
-    disableActiveService: function disableActiveService(draft, action) {
-      var _action$payload3 = action.payload,
-        serviceId = _action$payload3.serviceId,
-        keywords = _action$payload3.filters;
-      draft.filters.activeServices.entities[serviceId].enabled = false;
-      var _iterator2 = _createForOfIteratorHelper(keywords),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var keyword = _step2.value;
-          draft.filters.filters.entities[keyword].amountVisible -= 1;
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-    },
-    toggleFilter: function toggleFilter(draft, action) {
-      var filterIds = action.payload.filterIds;
-      filterIds.forEach(function (filterId) {
-        draft.filters.filters.entities[filterId].checked = !draft.filters.filters.entities[filterId].checked;
-      });
-    },
-    enableOnlyOneFilter: function enableOnlyOneFilter(draft, action) {
-      var filterId = action.payload.filterId;
-      draft.filters.filters.ids.forEach(function (filterId) {
-        draft.filters.filters.entities[filterId].checked = false;
-      });
-      draft.filters.filters.entities[filterId].checked = true;
-    },
-    setActiveLayerInfo: function setActiveLayerInfo(draft, action) {
-      var layer = action.payload.layer;
-      draft.activeLayerInfo = layer;
-    }
-  },
-  extraReducers: function extraReducers(builder) {
-    builder.addCase(serviceActions.serviceSetLayers, function (draft, action) {
-      var _a, _b;
-      var _action$payload4 = action.payload,
-        serviceId = _action$payload4.id,
-        serviceUrl = _action$payload4.serviceUrl,
-        serviceName = _action$payload4.name,
-        scope = _action$payload4.scope,
-        _abstract = _action$payload4["abstract"],
-        layers = _action$payload4.layers,
-        isUpdating = _action$payload4.isUpdating;
-      if (isUpdating) {
-        return;
-      }
-      var keywords = layers.reduce(function (keywords, layer) {
-        var _a;
-        if (layer.leaf) {
-          return keywords.concat((_a = layer.keywords) !== null && _a !== void 0 ? _a : []);
-        }
-        return keywords;
-      }, []);
-      var groups = layers.reduce(function (groups, layer) {
-        var _a;
-        if (layer.leaf) {
-          return groups.concat((_a = layer.path) !== null && _a !== void 0 ? _a : []);
-        }
-        return groups;
-      }, []);
-      if (!((_b = (_a = draft.filters.activeServices.entities[serviceId]) === null || _a === void 0 ? void 0 : _a.filterIds) === null || _b === void 0 ? void 0 : _b.length)) {
-        // If the service has no filters yet, add them
-        produceFilters(groups, FilterType.Group, draft, layerSelectFilterAdapter);
-        produceFilters(keywords, FilterType.Keyword, draft, layerSelectFilterAdapter);
-      }
-      var filterIds = groups.map(function (group) {
-        return getFilterId(FilterType.Group, group);
-      }).concat(keywords.map(function (keyword) {
-        return getFilterId(FilterType.Keyword, keyword);
-      }));
-      draft.filters.activeServices.entities[serviceId] = {
-        serviceId: serviceId,
-        enabled: draft.allServicesEnabled,
-        filterIds: filterIds,
-        scope: scope,
-        serviceName: serviceName,
-        serviceUrl: serviceUrl,
-        "abstract": _abstract,
-        isLoading: false
-      };
-      if (!draft.filters.activeServices.ids.includes(serviceId)) {
-        draft.filters.activeServices.ids.push(serviceId);
-      }
-    }).addCase(serviceActions.fetchInitialServices, function (draft, action) {
-      var services = action.payload.services;
-      services.forEach(function (service) {
-        var serviceId = service.id,
-          serviceName = service.name,
-          serviceUrl = service.serviceUrl,
-          _abstract2 = service["abstract"],
-          scope = service.scope;
-        draft.filters.activeServices.entities[serviceId] = {
-          serviceId: serviceId,
-          enabled: draft.allServicesEnabled,
-          filterIds: [],
-          scope: scope,
-          serviceName: serviceName,
-          serviceUrl: serviceUrl,
-          "abstract": _abstract2,
-          isLoading: true
-        };
-        if (!draft.filters.activeServices.ids.includes(serviceId)) {
-          draft.filters.activeServices.ids.push(serviceId);
-        }
-      });
-    });
-  }
-});
-var reducer$3 = slice$4.reducer;
-var layerSelectActions = slice$4.actions;
-
-/* *
- * 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 filterLayersFromService = function filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString) {
   var mapStoreService = services[serviceId];
   if (!mapStoreService) {
@@ -6223,6 +5770,208 @@ var filterLayersFromService = function filterLayersFromService(serviceId, servic
   });
 };
 
+var layerSelectFilterAdapter = createEntityAdapter();
+var layerSelectActiveServicesAdapter = createEntityAdapter();
+var initialServicePopupState = {
+  isOpen: false,
+  url: '',
+  serviceId: '',
+  variant: 'add'
+};
+var initialState$3 = {
+  filters: {
+    searchFilter: '',
+    activeServices: layerSelectActiveServicesAdapter.getInitialState(),
+    filters: layerSelectFilterAdapter.getInitialState()
+  },
+  allServicesEnabled: true,
+  activeLayerInfo: {
+    name: '',
+    title: '',
+    leaf: true,
+    path: [],
+    serviceName: ''
+  },
+  servicePopup: initialServicePopupState
+};
+var slice$4 = createSlice({
+  initialState: initialState$3,
+  name: DialogTypes.LayerSelect,
+  reducers: {
+    setSearchFilter: function setSearchFilter(draft, action) {
+      var filterText = action.payload.filterText;
+      draft.filters.searchFilter = filterText;
+    },
+    setAllServicesEnabled: function setAllServicesEnabled(draft, action) {
+      var allServicesEnabled = action.payload.allServicesEnabled;
+      draft.allServicesEnabled = allServicesEnabled;
+    },
+    closeServicePopupOpen: function closeServicePopupOpen(draft) {
+      draft.servicePopup.isOpen = false;
+    },
+    toggleServicePopup: function toggleServicePopup(draft, action) {
+      var _action$payload = action.payload,
+        variant = _action$payload.variant,
+        isOpen = _action$payload.isOpen;
+      draft.servicePopup.isOpen = isOpen;
+      draft.servicePopup.url = action.payload.url ? action.payload.url : '';
+      draft.servicePopup.variant = variant;
+      draft.servicePopup.serviceId = action.payload.serviceId ? action.payload.serviceId : '';
+    },
+    layerSelectRemoveService: function layerSelectRemoveService(draft, action) {
+      var serviceId = action.payload.serviceId;
+      // 1. Find a service that is to be removed
+      var foundService = draft.filters.activeServices.entities[serviceId];
+      // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
+      foundService.filterIds.forEach(function (filterId) {
+        var foundObject = draft.filters.filters.entities[filterId];
+        if (foundObject && foundObject.amount) {
+          foundObject.amount -= 1;
+          foundObject.amountVisible -= 1;
+        }
+        if (foundObject && foundObject.amount === 0) {
+          delete draft.filters.filters.entities[filterId];
+          draft.filters.filters.ids = draft.filters.filters.ids.filter(function (serviceId) {
+            return serviceId !== filterId;
+          });
+        }
+      });
+      // Finally remove object from activeServices, so if the service is added again later on, new object and keywords will be re-added
+      layerSelectActiveServicesAdapter.removeOne(draft.filters.activeServices, serviceId);
+    },
+    enableActiveService: function enableActiveService(draft, action) {
+      var _action$payload2 = action.payload,
+        serviceId = _action$payload2.serviceId,
+        keywords = _action$payload2.filters;
+      draft.filters.activeServices.entities[serviceId].enabled = true;
+      var _iterator = _createForOfIteratorHelper(keywords),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var keyword = _step.value;
+          draft.filters.filters.entities[keyword].amountVisible += 1;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    },
+    disableActiveService: function disableActiveService(draft, action) {
+      var _action$payload3 = action.payload,
+        serviceId = _action$payload3.serviceId,
+        keywords = _action$payload3.filters;
+      draft.filters.activeServices.entities[serviceId].enabled = false;
+      var _iterator2 = _createForOfIteratorHelper(keywords),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var keyword = _step2.value;
+          draft.filters.filters.entities[keyword].amountVisible -= 1;
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    },
+    toggleFilter: function toggleFilter(draft, action) {
+      var filterIds = action.payload.filterIds;
+      filterIds.forEach(function (filterId) {
+        draft.filters.filters.entities[filterId].checked = !draft.filters.filters.entities[filterId].checked;
+      });
+    },
+    enableOnlyOneFilter: function enableOnlyOneFilter(draft, action) {
+      var filterId = action.payload.filterId;
+      draft.filters.filters.ids.forEach(function (filterId) {
+        draft.filters.filters.entities[filterId].checked = false;
+      });
+      draft.filters.filters.entities[filterId].checked = true;
+    },
+    setActiveLayerInfo: function setActiveLayerInfo(draft, action) {
+      var layer = action.payload.layer;
+      draft.activeLayerInfo = layer;
+    }
+  },
+  extraReducers: function extraReducers(builder) {
+    builder.addCase(serviceActions.serviceSetLayers, function (draft, action) {
+      var _a, _b;
+      var _action$payload4 = action.payload,
+        serviceId = _action$payload4.id,
+        serviceUrl = _action$payload4.serviceUrl,
+        serviceName = _action$payload4.name,
+        scope = _action$payload4.scope,
+        _abstract = _action$payload4["abstract"],
+        layers = _action$payload4.layers,
+        isUpdating = _action$payload4.isUpdating;
+      if (isUpdating) {
+        return;
+      }
+      var keywords = layers.reduce(function (keywords, layer) {
+        var _a;
+        if (layer.leaf) {
+          return keywords.concat((_a = layer.keywords) !== null && _a !== void 0 ? _a : []);
+        }
+        return keywords;
+      }, []);
+      var groups = layers.reduce(function (groups, layer) {
+        var _a;
+        if (layer.leaf) {
+          return groups.concat((_a = layer.path) !== null && _a !== void 0 ? _a : []);
+        }
+        return groups;
+      }, []);
+      if (!((_b = (_a = draft.filters.activeServices.entities[serviceId]) === null || _a === void 0 ? void 0 : _a.filterIds) === null || _b === void 0 ? void 0 : _b.length)) {
+        // If the service has no filters yet, add them
+        produceFilters(groups, FilterType.Group, draft, layerSelectFilterAdapter);
+        produceFilters(keywords, FilterType.Keyword, draft, layerSelectFilterAdapter);
+      }
+      var filterIds = groups.map(function (group) {
+        return getFilterId(FilterType.Group, group);
+      }).concat(keywords.map(function (keyword) {
+        return getFilterId(FilterType.Keyword, keyword);
+      }));
+      draft.filters.activeServices.entities[serviceId] = {
+        serviceId: serviceId,
+        enabled: draft.allServicesEnabled,
+        filterIds: filterIds,
+        scope: scope,
+        serviceName: serviceName,
+        serviceUrl: serviceUrl,
+        "abstract": _abstract,
+        isLoading: false
+      };
+      if (!draft.filters.activeServices.ids.includes(serviceId)) {
+        draft.filters.activeServices.ids.push(serviceId);
+      }
+    }).addCase(serviceActions.fetchInitialServices, function (draft, action) {
+      var services = action.payload.services;
+      services.forEach(function (service) {
+        var serviceId = service.id,
+          serviceName = service.name,
+          serviceUrl = service.serviceUrl,
+          _abstract2 = service["abstract"],
+          scope = service.scope;
+        draft.filters.activeServices.entities[serviceId] = {
+          serviceId: serviceId,
+          enabled: draft.allServicesEnabled,
+          filterIds: [],
+          scope: scope,
+          serviceName: serviceName,
+          serviceUrl: serviceUrl,
+          "abstract": _abstract2,
+          isLoading: true
+        };
+        if (!draft.filters.activeServices.ids.includes(serviceId)) {
+          draft.filters.activeServices.ids.push(serviceId);
+        }
+      });
+    });
+  }
+});
+var reducer$3 = slice$4.reducer;
+var layerSelectActions = slice$4.actions;
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -7077,7 +6826,7 @@ var groupTypes = [{
       - Fill arrays inside initialState with objects containing new values from Redux
 */
 var createSyncGroupViewState = function createSyncGroupViewState(groups, sources) {
-  var initialState = produce(emptyState, function (draft) {
+  var initialState = produce$1(emptyState, function (draft) {
     /*
       _____ 1. Fill groups _____
         1. Goes through all groups by ID
@@ -8871,7 +8620,7 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
  *
  * Expects the following props:
  * @param {boolean} showMapId (optional) showMapId: boolean - show the id of the map in the dialog title of which the legend is shown in te dialog
- * @param {Source} source (optional) source: Source - default is 'app', 'module' makes sure it will be shown on top of the module
+ * @param {uiTypes.Source} source (optional) source: uiTypes.Source - default is 'app', 'module' makes sure it will be shown on top of the module
 
  * ``` <LegendConnect legendDialogId={legendDialogId} />```
  */
@@ -13765,7 +13514,7 @@ var RenderLayers = function RenderLayers(_ref) {
     _ref$isEnabled = _ref.isEnabled,
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
     _ref$tooltipPrefix = _ref.tooltipPrefix,
-    tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'Layer: ' : _ref$tooltipPrefix;
+    tooltipPrefix = _ref$tooltipPrefix === void 0 ? 'layerTypes.Layer: ' : _ref$tooltipPrefix;
   var _a;
   if (!layers || !layers.length) {
     return /*#__PURE__*/React.createElement(Box$2, {
@@ -21102,6 +20851,367 @@ var AutoUpdateButton = function AutoUpdateButton(_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 millisecondsInSecond = 1000;
+var speedFactors = [0.1, 0.2, 0.5, 1, 2, 4, 8, 16]; // Declares available animation speed multipliers for default delay
+
+var getSelectedTime = function getSelectedTime(timeDimension) {
+  var currentValueIsValid = timeDimension && timeDimension.currentValue && moment.utc(timeDimension.currentValue).isValid();
+  var selectedTime = currentValueIsValid && timeDimension ? moment.utc(timeDimension.currentValue).unix() : moment.utc().unix();
+  return selectedTime;
+};
+/**
+ * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
+ */
+var getTimeBounds = function getTimeBounds(dimensions) {
+  var defaultStartEnd = moment.utc().set({
+    second: 0,
+    millisecond: 0
+  }).unix();
+  var timeDimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dim) {
+    return dim.name === 'time';
+  });
+  var startTime = timeDimension && timeDimension.minValue ? moment.utc(timeDimension.minValue).unix() : defaultStartEnd;
+  var endTime = timeDimension && timeDimension.maxValue ? moment.utc(timeDimension.maxValue).unix() : defaultStartEnd;
+  var selectedTime = getSelectedTime(timeDimension);
+  return {
+    selectedTime: selectedTime,
+    startTime: startTime,
+    endTime: endTime
+  };
+};
+/**
+ * Returns time bounds as *Moment* time instances from the given dimension. If no time dimension given, current time is returned as default
+ */
+var getMomentTimeBounds = function getMomentTimeBounds(dimensions) {
+  var _getTimeBounds = getTimeBounds(dimensions),
+    selectedTime = _getTimeBounds.selectedTime,
+    startTime = _getTimeBounds.startTime,
+    endTime = _getTimeBounds.endTime;
+  return {
+    selectedTime: moment.unix(selectedTime),
+    startTime: moment.unix(startTime),
+    endTime: moment.unix(endTime)
+  };
+};
+var scalingCoefficient = function scalingCoefficient(end, start, width) {
+  return width / (end - start);
+};
+var timestampToPixelEdges = function timestampToPixelEdges(timestamp, start, end, width) {
+  return (timestamp - start) * scalingCoefficient(end, start, width);
+};
+var timestampToPixel = function timestampToPixel(timestamp, centerTime, widthPx, secondsPerPx) {
+  return widthPx / 2 - (centerTime - timestamp) / secondsPerPx;
+};
+var pixelToTimestamp = function pixelToTimestamp(timePx, centerTime, widthPx, secondsPerPx) {
+  return centerTime - (widthPx / 2 - timePx) * secondsPerPx;
+};
+var onsetNewDateDebounced = function onsetNewDateDebounced(dateToSet, onSetNewDate) {
+  debounce(function () {
+    onSetNewDate(dateToSet);
+  }, 10, {
+    leading: true
+  })();
+};
+var setNewRoundedTime = function setNewRoundedTime(x, centerTime, width, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate) {
+  var unixTime = pixelToTimestamp(x, centerTime, width, secondsPerPx);
+  var roundedTime = roundWithTimeStep(unixTime, timeStep);
+  var maxTime = Math.max(roundedTime, dataStartTime);
+  var newTime = Math.min(maxTime, dataEndTime || roundedTime);
+  var selectedTimeString = moment.unix(newTime).toISOString();
+  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
+};
+var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
+  return layers.reduce(function (_ref, layer) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      start = _ref2[0],
+      end = _ref2[1];
+    var dimension = getWMJSTimeDimensionForLayerId(layer.id);
+    if (dimension) {
+      var lastValue = moment(dimension.getLastValue()).unix();
+      var firstValue = moment(dimension.getFirstValue()).unix();
+      var newLast = lastValue > end ? lastValue : end;
+      var newFirst = firstValue < start ? firstValue : start;
+      return [newFirst, newLast];
+    }
+    return [start, end];
+  },
+  /* Using the maximum 32-bit value and 0 as starting points
+   * bigger values like Number.MAX_VALUE or Number.MAX_SAFE_INTEGER
+   * cause weird behaviour as timestamps break at 32bit limit (year 2038)
+   */
+  [2147483647, 0]);
+};
+var setPreviousTimeStep = function setPreviousTimeStep(timeStep, currentTime, dataStartTime, onSetNewDate) {
+  var nextTime = currentTime - timeStep;
+  var roundedTime = roundWithTimeStep(nextTime, timeStep, 'floor');
+  var newTime = Math.max(roundedTime, dataStartTime || roundedTime);
+  var selectedTimeString = moment.unix(newTime).toISOString();
+  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
+};
+var setNextTimeStep = function setNextTimeStep(timeStep, currentTime, dataEndTime, onSetNewDate) {
+  var nextTime = currentTime + timeStep;
+  var roundedTime = roundWithTimeStep(nextTime, timeStep, 'ceil');
+  var newTime = Math.min(roundedTime, dataEndTime || roundedTime);
+  var selectedTimeString = moment.unix(newTime).toISOString();
+  onsetNewDateDebounced(selectedTimeString, onSetNewDate);
+};
+/**
+ * updates unfiltered selected time and moves selected time a given distance
+ * in pixels. Unfiltered selected time can be outside data data limits, but
+ * selected time cannot.
+ */
+var moveSelectedTimePx = function moveSelectedTimePx(x, canvasWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime, onSetNewDate) {
+  var _map = [dataStartTime, dataEndTime, unfilteredSelectedTime].map(function (timestamp) {
+      return timestampToPixel(timestamp, centerTime, canvasWidth, secondsPerPx);
+    }),
+    _map2 = _slicedToArray(_map, 3),
+    leftMarkerPx = _map2[0],
+    rightMarkerPx = _map2[1],
+    unfilteredSelectedTimePx = _map2[2];
+  setUnfilteredSelectedTime(pixelToTimestamp(unfilteredSelectedTimePx + x, centerTime, canvasWidth, secondsPerPx));
+  var clickedUnfilteredSelectedTimePx = unfilteredSelectedTimePx + x;
+  var minClickedUnfilteredSelectedTimePx = Math.min(clickedUnfilteredSelectedTimePx, rightMarkerPx);
+  var newUnfilteredSelectedTimePx = Math.max(minClickedUnfilteredSelectedTimePx, leftMarkerPx);
+  setNewRoundedTime(newUnfilteredSelectedTimePx, centerTime, canvasWidth, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
+};
+/**
+ * This function gets the length in seconds of the data layers
+ * @param layers
+ * @returns dataSpanSeconds,
+ */
+var getDataSpanSeconds = function getDataSpanSeconds(layers) {
+  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
+    _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
+    dataStartTime = _getDataLimitsFromLay2[0],
+    dataEndTime = _getDataLimitsFromLay2[1];
+  var dataRegionInSeconds = dataEndTime - dataStartTime;
+  return Math.floor(dataRegionInSeconds);
+};
+/**
+ * This function creates and returns an array where there is secondsPerPx
+ * number of the data set added for a data scale (secondsPerPx)
+ * to secondsPerPxToScale.
+ * @param secondsPerPx
+ * @returns an array containing secondsPerPx numbers.
+ * The secondsPerPx number for a data scale is included
+ * contrary to secondsPerPxToScale.
+ */
+var secondsPerPxValues = function secondsPerPxValues(secondsPerPx) {
+  var sortedSecondsPerPx = _toConsumableArray(secondsPerPxToScale).map(function (value) {
+    return Number(value[0]);
+  });
+  var full = [].concat(_toConsumableArray(sortedSecondsPerPx), [secondsPerPx]);
+  return full;
+};
+var secondsPerPxFromCanvasWidth = function secondsPerPxFromCanvasWidth(canvasWidth, spanInSeconds) {
+  return spanInSeconds / canvasWidth;
+};
+var getNewCenterOfFixedPointZoom = function getNewCenterOfFixedPointZoom(fixedTimePoint, oldSecondsPerPx, newSecondsPerPx, oldCenterTime) {
+  var centerToFixedPointPx = (fixedTimePoint - oldCenterTime) / oldSecondsPerPx;
+  return fixedTimePoint - centerToFixedPointPx * newSecondsPerPx;
+};
+/**
+ * Move the time slider such that a given time point (timePoint)
+ * is at a given pixel width (timePointPx).
+ * @returns a new center time for the resulting position
+ */
+var moveRelativeToTimePoint = function moveRelativeToTimePoint(timePoint, timePointPx, secondsPerPx, canvasWidth) {
+  return timePoint - secondsPerPx * (timePointPx - canvasWidth / 2);
+};
+/** This reusable custom hook tells whether given pointer event targets current canvas node.
+ * Example:
+ *
+ * const [isAllowedCanvasNodePointed, nodeRef] = useCanvasTarget('mousedown', false);
+ *  ...
+ * return isAllowedCanvasNodePointed ? (<CanvasComponent ref={nodeRef}>Component with ref</CanvasComponent>) : (<CanvasComponent>Component with NO ref</CanvasComponent>);
+ *  ...
+ */
+var useCanvasTarget = function useCanvasTarget(eventType) {
+  var nodeRef = React__default.useRef(null);
+  var _React$useState = React__default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isTargetNode = _React$useState2[0],
+    setTargetNode = _React$useState2[1];
+  // Check if pointer event targets current node element
+  var pointerEventListener = React__default.useCallback(function (event) {
+    setTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(event.target) : false);
+  }, [nodeRef]);
+  React__default.useEffect(function () {
+    document.addEventListener(eventType, pointerEventListener);
+    return function () {
+      return document.removeEventListener(eventType, pointerEventListener);
+    };
+  }, [eventType, pointerEventListener]); // Only add/remove event listener when listener really changes, that is, NOT necessarily between every re-render.
+  return [isTargetNode, nodeRef];
+};
+var needleGeom = {
+  smallWidth: 126,
+  largeWidth: 167,
+  height: 24,
+  cornerRadius: 5,
+  lineWidth: 1
+};
+var AUTO_MOVE_AREA_PADDING = 1;
+var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
+  return (scale === Scale.Year ? needleGeom.largeWidth : needleGeom.smallWidth) / 2 + AUTO_MOVE_AREA_PADDING;
+};
+/** Reusable business logic for how to handle events that set time to now (closest).
+ * Used in NowButton and TimeSliderLegend.
+ */
+var handleSetNowEvent = function handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime) {
+  if (dataStartTime < dataEndTime) {
+    if (dataEndTime < currentTime) {
+      onSetNewDate(moment.utc(dataEndTime * millisecondsInSecond).toISOString());
+      onSetCenterTime(dataEndTime);
+    } else if (dataStartTime > currentTime) {
+      onSetNewDate(moment.utc(dataStartTime * millisecondsInSecond).toISOString());
+      onSetCenterTime(dataStartTime);
+    } else {
+      var closestToCurrent = roundWithTimeStep(currentTime, timeStep);
+      onSetNewDate(moment.utc(closestToCurrent * millisecondsInSecond).toISOString());
+      onSetCenterTime(closestToCurrent);
+    }
+  }
+};
+var TimeInMinutes;
+(function (TimeInMinutes) {
+  TimeInMinutes[TimeInMinutes["YEAR"] = 525600] = "YEAR";
+  TimeInMinutes[TimeInMinutes["MONTH"] = 43800] = "MONTH";
+  TimeInMinutes[TimeInMinutes["DAY"] = 1440] = "DAY";
+  TimeInMinutes[TimeInMinutes["HOUR"] = 60] = "HOUR";
+  TimeInMinutes[TimeInMinutes["MINUTE"] = 1] = "MINUTE";
+})(TimeInMinutes || (TimeInMinutes = {}));
+/**
+ *
+ * @param minutes
+ * @returns the two highest values in the format yr(s) mo(s) d h m
+ */
+var minutesToDescribedDuration = function minutesToDescribedDuration(minutes) {
+  var units = [{
+    label: 'yr',
+    value: TimeInMinutes.YEAR,
+    plural: 's'
+  }, {
+    label: 'mo',
+    value: TimeInMinutes.MONTH,
+    plural: 's'
+  }, {
+    label: 'd',
+    value: TimeInMinutes.DAY
+  }, {
+    label: 'h',
+    value: TimeInMinutes.HOUR
+  }, {
+    label: 'm',
+    value: TimeInMinutes.MINUTE
+  }];
+  var durations = units.reduce(function (units, duration) {
+    var min = units.min,
+      time = units.time,
+      count = units.count;
+    var label = duration.label,
+      value = duration.value,
+      _duration$plural = duration.plural,
+      plural = _duration$plural === void 0 ? '' : _duration$plural;
+    var unit = Math.floor(min / value);
+    if (unit > 0 && count < 2) {
+      return {
+        time: "".concat(time).concat(unit).concat(label).concat(unit > 1 ? plural : '', " "),
+        min: min - unit * value,
+        count: count + 1
+      };
+    }
+    return {
+      min: min,
+      time: time,
+      count: count
+    };
+  }, {
+    min: minutes,
+    time: '',
+    count: 0
+  });
+  return durations.time.trim();
+};
+// For a data scale an appropriate fundamental scale is chosen
+// depending on secondsPerPx of data. When a time range of
+// data is for example many months. the fundamental scale mapEnums.Scale.Year
+// is chosen here and the legend of the time slider is drawn in the
+// same as if otiginally a year scale would have been chose.
+//
+// If a  time range of data is a few weeks, mapEnums.Scale.Month is chosen. So, all
+// the time range of data can be shown in the window.
+var getFundamentalScale$1 = function getFundamentalScale(secondsPerPx) {
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Month]) {
+    return Scale.Year;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Week]) {
+    return Scale.Month;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Day]) {
+    return Scale.Week;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Hours6]) {
+    return Scale.Day;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Hours3]) {
+    return Scale.Hours6;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Hour]) {
+    return Scale.Hours3;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Minutes5]) {
+    return Scale.Hour;
+  }
+  return Scale.Minutes5;
+};
+
+var timeSliderUtils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    getSelectedTime: getSelectedTime,
+    getTimeBounds: getTimeBounds,
+    getMomentTimeBounds: getMomentTimeBounds,
+    scalingCoefficient: scalingCoefficient,
+    timestampToPixelEdges: timestampToPixelEdges,
+    timestampToPixel: timestampToPixel,
+    pixelToTimestamp: pixelToTimestamp,
+    onsetNewDateDebounced: onsetNewDateDebounced,
+    setNewRoundedTime: setNewRoundedTime,
+    getDataLimitsFromLayers: getDataLimitsFromLayers,
+    setPreviousTimeStep: setPreviousTimeStep,
+    setNextTimeStep: setNextTimeStep,
+    moveSelectedTimePx: moveSelectedTimePx,
+    getDataSpanSeconds: getDataSpanSeconds,
+    secondsPerPxValues: secondsPerPxValues,
+    secondsPerPxFromCanvasWidth: secondsPerPxFromCanvasWidth,
+    getNewCenterOfFixedPointZoom: getNewCenterOfFixedPointZoom,
+    moveRelativeToTimePoint: moveRelativeToTimePoint,
+    useCanvasTarget: useCanvasTarget,
+    needleGeom: needleGeom,
+    AUTO_MOVE_AREA_PADDING: AUTO_MOVE_AREA_PADDING,
+    getAutoMoveAreaWidth: getAutoMoveAreaWidth,
+    handleSetNowEvent: handleSetNowEvent,
+    get TimeInMinutes () { return TimeInMinutes; },
+    minutesToDescribedDuration: minutesToDescribedDuration,
+    getFundamentalScale: getFundamentalScale$1
+});
+
 var THROTTLE_WAIT_TIME = 300; // [ms]
 var THROTTLE_OPTIONS = {
   trailing: false // Invoke function when called, but not more than once every <THROTTLE_WAIT_TIME>.
@@ -21429,69 +21539,86 @@ var TimeStepButton = function TimeStepButton(_ref) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var marks$1 = [{
-  label: '5 min',
-  value: Scale.Minutes5,
-  text: '5m'
-}, {
   label: '1 h',
-  value: Scale.Hour,
+  value: Span.Hour,
   text: '1h'
 }, {
   label: '3 h',
-  value: Scale.Hours3,
+  value: Span.Hours3,
   text: '3h'
 }, {
   label: '6 h',
-  value: Scale.Hours6,
+  value: Span.Hours6,
   text: '6h'
+}, {
+  label: '12 h',
+  value: Span.Hours12,
+  text: '12h'
 }, {
   label: 'day',
-  value: Scale.Day,
+  value: Span.Day,
   text: 'd'
+}, {
+  label: '2 days',
+  value: Span.Days2,
+  text: '2d'
 }, {
   label: 'week',
-  value: Scale.Week,
+  value: Span.Week,
   text: 'w'
+}, {
+  label: '2 weeks',
+  value: Span.Weeks2,
+  text: '2w'
 }, {
   label: 'month',
-  value: Scale.Month,
+  value: Span.Month,
+  text: 'm'
+}, {
+  label: '3 months',
+  value: Span.Months3,
   text: 'm'
 }, {
   label: 'year',
-  value: Scale.Year,
+  value: Span.Year,
   text: 'y'
 }, {
   label: 'data',
-  value: Scale.DataScale,
+  value: Span.DataSpan,
   text: 'data'
 }].sort(function (a, b) {
   return b.value - a.value;
 });
-var TimeScaleButton = function TimeScaleButton(_ref) {
+var TimeSpanButton = function TimeSpanButton(_ref) {
   var layers = _ref.layers,
-    _ref$timeSliderScale = _ref.timeSliderScale,
-    timeSliderScale = _ref$timeSliderScale === void 0 ? Scale.Hour : _ref$timeSliderScale,
+    _ref$timeSliderSpan = _ref.timeSliderSpan,
+    timeSliderSpan = _ref$timeSliderSpan === void 0 ? Span.Day : _ref$timeSliderSpan,
     centerTime = _ref.centerTime,
     secondsPerPx = _ref.secondsPerPx,
     selectedTime = _ref.selectedTime,
-    onChangeTimeSliderScale = _ref.onChangeTimeSliderScale;
+    timeSliderWidth = _ref.timeSliderWidth,
+    onChangeTimeSliderSpan = _ref.onChangeTimeSliderSpan,
+    _ref$isOpenByDefault = _ref.isOpenByDefault,
+    isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
   var onChangeSliderValue = function onChangeSliderValue(mark) {
     var newSliderValue = mark.value;
     var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
-    var newScale = marks$1.find(function (el) {
+    var newSpan = marks$1.find(function (el) {
       return el.value === newValue;
     }).value;
-    var scaleToSecPerPx = newScale === Scale.DataScale ? getScaleToSecondsPerPxForDataScale(layers) : scaleToSecondsPerPx[newScale];
-    var newCenterTime = getNewCenterOfFixedPointZoom(selectedTime, secondsPerPx, scaleToSecPerPx, centerTime);
-    onChangeTimeSliderScale(newScale, newCenterTime, scaleToSecPerPx);
+    var spanInSeconds = newSpan === Span.DataSpan ? getDataSpanSeconds(layers) : spanToSeconds[newSpan];
+    var newSecondsPerPx = secondsPerPxFromCanvasWidth(timeSliderWidth, spanInSeconds);
+    var newCenterTime = getNewCenterOfFixedPointZoom(selectedTime, secondsPerPx, newSecondsPerPx, centerTime);
+    onChangeTimeSliderSpan(newSpan, newCenterTime, newSecondsPerPx);
   };
   return /*#__PURE__*/React.createElement(TimeSliderMenu, {
     handleMenuItemClick: onChangeSliderValue,
     icon: /*#__PURE__*/React.createElement(Clock, null),
     marks: marks$1,
-    title: "Time scale",
-    value: timeSliderScale,
-    onChangeMouseWheel: onChangeSliderValue
+    title: "Time span",
+    value: timeSliderSpan,
+    onChangeMouseWheel: onChangeSliderValue,
+    isOpenByDefault: isOpenByDefault
   });
 };
 
@@ -21629,7 +21756,7 @@ var OptionsMenu = function OptionsMenu(_ref) {
   var autoUpdateBtn = _ref.autoUpdateBtn,
     nowBtn = _ref.nowBtn,
     speedBtn = _ref.speedBtn,
-    timeScaleBtn = _ref.timeScaleBtn,
+    timeSpanBtn = _ref.timeSpanBtn,
     timeStepBtn = _ref.timeStepBtn,
     animationLengthBtn = _ref.animationLengthBtn;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
@@ -21638,12 +21765,13 @@ var OptionsMenu = function OptionsMenu(_ref) {
   }, nowBtn || /*#__PURE__*/React__default.createElement(NowButton, null)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, timeScaleBtn || /*#__PURE__*/React__default.createElement(TimeScaleButton, {
+  }, timeSpanBtn || /*#__PURE__*/React__default.createElement(TimeSpanButton, {
     centerTime: 0,
-    onChangeTimeSliderScale: function onChangeTimeSliderScale() {},
+    onChangeTimeSliderSpan: function onChangeTimeSliderSpan() {},
     secondsPerPx: 0,
     selectedTime: 0,
-    timeSliderScale: 0
+    timeSliderSpan: 0,
+    timeSliderWidth: 0
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
@@ -21672,7 +21800,7 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
     autoUpdateBtn = _ref.autoUpdateBtn,
     speedBtn = _ref.speedBtn,
     timeStepBtn = _ref.timeStepBtn,
-    timeScaleBtn = _ref.timeScaleBtn,
+    timeSpanBtn = _ref.timeSpanBtn,
     animationLengthBtn = _ref.animationLengthBtn,
     _ref$isOpenByDefault = _ref.isOpenByDefault,
     isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
@@ -21726,7 +21854,7 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
     spacing: 1
   }, /*#__PURE__*/React__default.createElement(OptionsMenu, {
     nowBtn: nowBtn,
-    timeScaleBtn: timeScaleBtn,
+    timeSpanBtn: timeSpanBtn,
     timeStepBtn: timeStepBtn,
     speedBtn: speedBtn,
     animationLengthBtn: animationLengthBtn,
@@ -21884,90 +22012,6 @@ var TICK_MARK_HEIGHT_PRIMARY = 40;
 var TICK_MARK_HEIGHT_SECONDARY = 10;
 var TICK_MARK_HEIGHT_TERTIARY = 5;
 var getStepPxLineHeight = function getStepPxLineHeight(scale, timestep) {
-  if ([Scale.Hour, Scale.Hours3, Scale.Hours6, Scale.Day].includes(scale)) {
-    var scaleUnitSeconds = scaleToUnitSeconds[scale];
-    var rem = timestep % scaleUnitSeconds;
-    switch (scale) {
-      case Scale.Hour:
-        {
-          if (rem === 0) {
-            return TICK_MARK_HEIGHT_PRIMARY;
-          }
-          // 15 min subdivisions
-          if (rem % (15 * 60) === 0) {
-            return TICK_MARK_HEIGHT_SECONDARY;
-          }
-          return TICK_MARK_HEIGHT_TERTIARY;
-        }
-      case Scale.Hours3:
-        {
-          if (rem === 0) {
-            return TICK_MARK_HEIGHT_PRIMARY;
-          }
-          return TICK_MARK_HEIGHT_TERTIARY;
-        }
-      case Scale.Hours6:
-        {
-          if (rem === 0) {
-            return TICK_MARK_HEIGHT_PRIMARY;
-          }
-          // 3 hour subdivisions
-          if (rem % (3 * 60 * 60) === 0) {
-            return TICK_MARK_HEIGHT_SECONDARY;
-          }
-          return TICK_MARK_HEIGHT_TERTIARY;
-        }
-      default:
-        {
-          // Scale.Day
-          if (rem === 0) {
-            return TICK_MARK_HEIGHT_PRIMARY;
-          }
-          // 6 hour subdivisions
-          if (rem % (6 * 60 * 60) === 0) {
-            return TICK_MARK_HEIGHT_SECONDARY;
-          }
-          return TICK_MARK_HEIGHT_TERTIARY;
-        }
-    }
-  } else {
-    switch (scale) {
-      case Scale.Week:
-        {
-          var weekday = moment.unix(timestep).utc().isoWeekday();
-          // momentjs isoWeekdays range from 1(Monday) to 7(Sunday)
-          if (weekday === 1) {
-            return TICK_MARK_HEIGHT_PRIMARY;
-          }
-          return TICK_MARK_HEIGHT_TERTIARY;
-        }
-      case Scale.Year:
-        {
-          var month = moment.unix(timestep).utc().month();
-          // momentjs months are zero indexed
-          if (month === 0) {
-            return TICK_MARK_HEIGHT_PRIMARY;
-          }
-          if (month % 3 === 0) {
-            return TICK_MARK_HEIGHT_SECONDARY;
-          }
-          return TICK_MARK_HEIGHT_TERTIARY;
-        }
-      case Scale.Minutes5:
-        {
-          // add primary line on day change
-          if (timestep % (60 * 60 * 24) === 0) {
-            return TICK_MARK_HEIGHT_PRIMARY;
-          }
-          return TICK_MARK_HEIGHT_TERTIARY;
-        }
-      default:
-        // Scale.Month
-        return TICK_MARK_HEIGHT_TERTIARY;
-    }
-  }
-};
-var getStepPxLineHeightForDataScale = function getStepPxLineHeightForDataScale(scale, timestep) {
   var scaleUnitSeconds = scaleToUnitSeconds[scale];
   var rem = timestep % scaleUnitSeconds;
   switch (scale) {
@@ -22027,6 +22071,9 @@ var getStepPxLineHeightForDataScale = function getStepPxLineHeightForDataScale(s
         if (month === 0) {
           return TICK_MARK_HEIGHT_PRIMARY;
         }
+        if (month % 3 === 0) {
+          return TICK_MARK_HEIGHT_SECONDARY;
+        }
         return TICK_MARK_HEIGHT_TERTIARY;
       }
     case Scale.Minutes5:
@@ -22038,15 +22085,15 @@ var getStepPxLineHeightForDataScale = function getStepPxLineHeightForDataScale(s
         return TICK_MARK_HEIGHT_TERTIARY;
       }
     default:
-      // Scale.Month
+      // mapEnums.Scale.Month
       return TICK_MARK_HEIGHT_TERTIARY;
   }
 };
-var drawStepPxLine = function drawStepPxLine(ctx, theme, stepPx, height, scale, fundamentalScale, timestep) {
+var drawStepPxLine = function drawStepPxLine(ctx, theme, stepPx, height, fundamentalScale, timestep) {
   var ctx2 = ctx;
   ctx2.strokeStyle = theme.palette.geowebColors.timeSlider.timelineTimeScale.fill;
   ctx2.lineWidth = 1;
-  var stepPxLineHeight = scale !== Scale.DataScale ? getStepPxLineHeight(scale, timestep) : getStepPxLineHeightForDataScale(fundamentalScale, timestep);
+  var stepPxLineHeight = getStepPxLineHeight(fundamentalScale, timestep);
   ctx2.beginPath();
   ctx2.moveTo(stepPx, height - stepPxLineHeight);
   ctx2.lineTo(stepPx, height);
@@ -22068,10 +22115,7 @@ var drawTimeText = function drawTimeText(ctx, theme, stepPx, height, timeText, s
     ctx2.fillText(timeText, stepPx - 15, height - 12);
   }
 };
-var drawUpperText = function drawUpperText(ctx, theme, newDate, stepPx, height, minOffset) {
-  if (stepPx <= 0) {
-    return;
-  }
+var drawYearScaleText = function drawYearScaleText(ctx, theme, newDate, stepPx, height) {
   var ctx2 = ctx;
   var _theme$palette$geoweb2 = theme.palette.geowebColors.timeSlider.timelineText,
     fontSize = _theme$palette$geoweb2.fontSize,
@@ -22080,9 +22124,9 @@ var drawUpperText = function drawUpperText(ctx, theme, newDate, stepPx, height,
   ctx2.fillStyle = color;
   ctx2.font = "".concat(fontSize, "px ").concat(fontFamily);
   ctx2.textAlign = 'left';
-  ctx2.fillText(newDate, Math.max(minOffset, stepPx + 2), height - 30);
+  ctx2.fillText(newDate, stepPx + 2, height - 10);
 };
-var drawYearScaleText = function drawYearScaleText(ctx, theme, newDate, stepPx, height) {
+var drawLeftSideDateText = function drawLeftSideDateText(ctx, theme, newDate, height) {
   var ctx2 = ctx;
   var _theme$palette$geoweb3 = theme.palette.geowebColors.timeSlider.timelineText,
     fontSize = _theme$palette$geoweb3.fontSize,
@@ -22091,17 +22135,6 @@ var drawYearScaleText = function drawYearScaleText(ctx, theme, newDate, stepPx,
   ctx2.fillStyle = color;
   ctx2.font = "".concat(fontSize, "px ").concat(fontFamily);
   ctx2.textAlign = 'left';
-  ctx2.fillText(newDate, stepPx + 2, height - 10);
-};
-var drawLeftSideDateText = function drawLeftSideDateText(ctx, theme, newDate, height) {
-  var ctx2 = ctx;
-  var _theme$palette$geoweb4 = theme.palette.geowebColors.timeSlider.timelineText,
-    fontSize = _theme$palette$geoweb4.fontSize,
-    fontFamily = _theme$palette$geoweb4.fontFamily,
-    color = _theme$palette$geoweb4.color;
-  ctx2.fillStyle = color;
-  ctx2.font = "".concat(fontSize, "px ").concat(fontFamily);
-  ctx2.textAlign = 'left';
   ctx2.fillText(newDate, 2, height - 30);
 };
 var getTimeFormat = function getTimeFormat(scale) {
@@ -22111,7 +22144,7 @@ var getTimeFormat = function getTimeFormat(scale) {
     case Scale.Month:
       return 'MMM';
     case Scale.Week:
-      return 'DD';
+      return 'DD MMM';
     case Scale.Day:
       return 'ddd DD';
     default:
@@ -22165,7 +22198,7 @@ var roundToNearestMultiple = function roundToNearestMultiple(timeUnix, scale) {
  * done for each scale.
  * @returns an object where there are rounding units of each scale
  */
-var scaleToRoundableUnit = (_scaleToRoundableUnit = {}, _defineProperty$1(_scaleToRoundableUnit, Scale.Hour, 'hour'), _defineProperty$1(_scaleToRoundableUnit, Scale.Day, 'day'), _defineProperty$1(_scaleToRoundableUnit, Scale.Week, 'isoWeek'), _defineProperty$1(_scaleToRoundableUnit, Scale.Month, 'isoWeek'), _defineProperty$1(_scaleToRoundableUnit, Scale.Year, 'year'), _defineProperty$1(_scaleToRoundableUnit, Scale.DataScale, 'year'), _scaleToRoundableUnit);
+var scaleToRoundableUnit = (_scaleToRoundableUnit = {}, _defineProperty$1(_scaleToRoundableUnit, Scale.Hour, 'hour'), _defineProperty$1(_scaleToRoundableUnit, Scale.Day, 'day'), _defineProperty$1(_scaleToRoundableUnit, Scale.Week, 'isoWeek'), _defineProperty$1(_scaleToRoundableUnit, Scale.Month, 'isoWeek'), _defineProperty$1(_scaleToRoundableUnit, Scale.Year, 'year'), _scaleToRoundableUnit);
 var getRoundedStartAndEnd = function getRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, scale) {
   if (scale === Scale.Minutes5 || scale === Scale.Hours3 || scale === Scale.Hours6) {
     return [roundToNearestMultiple(visibleTimeStart, scale, false), roundToNearestMultiple(visibleTimeEnd, scale, true)];
@@ -22207,30 +22240,6 @@ var getTimesteps = function getTimesteps(roundedStart, roundedEnd, fundamentalSc
   }
   return timesteps;
 };
-var getDateChangeTimestepUnit = function getDateChangeTimestepUnit(scale) {
-  switch (scale) {
-    case Scale.DataScale:
-      return 'year';
-    case Scale.Month:
-      return 'year';
-    case Scale.Week:
-    case Scale.Day:
-      return 'month';
-    default:
-      return 'day';
-  }
-};
-var getMinOffset = function getMinOffset(scale) {
-  switch (scale) {
-    case Scale.Month:
-      return 42;
-    case Scale.Week:
-    case Scale.Day:
-      return 70;
-    default:
-      return 115;
-  }
-};
 var getCustomTimesteps = function getCustomTimesteps(roundedStart, roundedEnd, increment) {
   var nightTime = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var momentIncrement = increment;
@@ -22250,24 +22259,7 @@ var getCustomTimesteps = function getCustomTimesteps(roundedStart, roundedEnd, i
   }
   return timesteps;
 };
-var getLeftSideDateText = function getLeftSideDateText(timestamp, scale) {
-  var timeMoment = moment.unix(timestamp).utc();
-  switch (scale) {
-    case Scale.Minutes5:
-    case Scale.Hour:
-    case Scale.Hours3:
-    case Scale.Hours6:
-      return timeMoment.format('Y MMM ddd DD');
-    case Scale.Day:
-    case Scale.Week:
-      return timeMoment.format('Y MMM');
-    case Scale.Month:
-      return timeMoment.format('Y');
-    default:
-      return '';
-  }
-};
-var getLeftSideDateTextForDataScale = function getLeftSideDateTextForDataScale(timestamp, fundamentalScale) {
+var getLeftSideDateText = function getLeftSideDateText(timestamp, fundamentalScale) {
   var timeMoment = moment.unix(timestamp).utc();
   switch (fundamentalScale) {
     case Scale.Minutes5:
@@ -22286,50 +22278,40 @@ var getLeftSideDateTextForDataScale = function getLeftSideDateTextForDataScale(t
       return '';
   }
 };
-var getDateChangeFormat = function getDateChangeFormat(timestamp, timestepUnit) {
-  var momentTime = moment.unix(timestamp).utc();
-  if (timestepUnit === 'year') {
-    return momentTime.format('Y');
-  }
-  if (timestepUnit === 'month') {
-    if (momentTime.month() === 0) {
-      return momentTime.format('Y MMM');
-    }
-    return momentTime.format('MMM');
-  }
-  if (momentTime.month() === 0 && momentTime.date() === 1) {
-    return momentTime.format('Y MMM ddd DD');
-  }
-  if (momentTime.date() === 1) {
-    return momentTime.format('MMM ddd DD');
-  }
-  return momentTime.format('ddd DD');
-};
 // For a data scale an appropriate fundamental scale is chosen
-// depending on dataScaleToSecondsPerPx of data. When a time range of
-// data is for example many months. the fundamental scale Scale.Year
+// depending on secondsPerPx of data. When a time range of
+// data is for example many months. the fundamental scale mapEnums.Scale.Year
 // is chosen here and the legend of the time slider is drawn in the
 // same as if otiginally a year scale would have been chose.
 //
-// If a  time range of data is a few weeks, Scale.Month is chosen. So, all
+// If a  time range of data is a few weeks, mapEnums.Scale.Month is chosen. So, all
 // the time range of data can be shown in the window.
-var getFundamentalScaleForDataScale = function getFundamentalScaleForDataScale(dataScaleToSecondsPerPx) {
-  if (dataScaleToSecondsPerPx >= scaleToSecondsPerPx[Scale.Month]) {
+var getFundamentalScale = function getFundamentalScale(secondsPerPx) {
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Month]) {
     return Scale.Year;
   }
-  if (dataScaleToSecondsPerPx >= scaleToSecondsPerPx[Scale.Week]) {
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Week]) {
     return Scale.Month;
   }
-  if (dataScaleToSecondsPerPx >= scaleToSecondsPerPx[Scale.Day]) {
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Day]) {
     return Scale.Week;
   }
-  if (dataScaleToSecondsPerPx >= scaleToSecondsPerPx[Scale.Hour]) {
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Hours6]) {
     return Scale.Day;
   }
-  return Scale.Hour;
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Hours3]) {
+    return Scale.Hours6;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Hour]) {
+    return Scale.Hours3;
+  }
+  if (secondsPerPx >= scaleToSecondsPerPx[Scale.Minutes5]) {
+    return Scale.Hour;
+  }
+  return Scale.Minutes5;
 };
-var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale, dataScaleToSecondsPerPx) {
-  var fundamentalScale = scale === Scale.DataScale ? getFundamentalScaleForDataScale(dataScaleToSecondsPerPx) : scale;
+var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, secondsPerPx) {
+  var fundamentalScale = getFundamentalScale(secondsPerPx);
   var _getRoundedStartAndEn = getRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, fundamentalScale),
     _getRoundedStartAndEn2 = _slicedToArray(_getRoundedStartAndEn, 2),
     roundedStart = _getRoundedStartAndEn2[0],
@@ -22339,7 +22321,7 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
   getTimesteps(roundedStart, roundedEnd, fundamentalScale).forEach(function (timestep) {
     var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
     // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
-    drawStepPxLine(ctx, theme, Math.floor(stepPx) + 0.5, height, scale, fundamentalScale, timestep);
+    drawStepPxLine(ctx, theme, Math.floor(stepPx) + 0.5, height, fundamentalScale, timestep);
     // Draw the time step time as text
     var timeFormat = getTimeFormat(fundamentalScale);
     var timeText = moment.unix(timestep).utc().format(timeFormat).toString();
@@ -22351,7 +22333,7 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
     }
   });
   // draw month overlay lines
-  if (fundamentalScale === Scale.Week || fundamentalScale === Scale.Month || scale === Scale.DataScale) {
+  if (fundamentalScale === Scale.Week || fundamentalScale === Scale.Month) {
     var _getCustomRoundedStar = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, 'month'),
       _getCustomRoundedStar2 = _slicedToArray(_getCustomRoundedStar, 2),
       _roundedStart = _getCustomRoundedStar2[0],
@@ -22359,7 +22341,7 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
     var monthTimesteps = getCustomTimesteps(_roundedStart, _roundedEnd, 'month');
     monthTimesteps.forEach(function (timestep) {
       var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
-      if (fundamentalScale === Scale.Month || scale === Scale.DataScale && fundamentalScale !== Scale.Day) {
+      if (fundamentalScale === Scale.Month) {
         var momentTime = moment.unix(timestep).utc();
         // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
         drawDateChangeLine(ctx, theme, Math.floor(stepPx) + 0.5, height);
@@ -22371,24 +22353,10 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
     });
   }
   // draw date change texts
-  if (scale === Scale.Year && fundamentalScale === Scale.Year) {
+  if (fundamentalScale === Scale.Year) {
     return;
   }
-  var timestepUnit = getDateChangeTimestepUnit(fundamentalScale);
-  var _getCustomRoundedStar3 = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, timestepUnit),
-    _getCustomRoundedStar4 = _slicedToArray(_getCustomRoundedStar3, 2),
-    dateChangeStart = _getCustomRoundedStar4[0],
-    dateChangeEnd = _getCustomRoundedStar4[1];
-  var dateChangeTimesteps = getCustomTimesteps(dateChangeStart, dateChangeEnd, timestepUnit);
-  dateChangeTimesteps.forEach(function (timestep) {
-    var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
-    var textFormat = getDateChangeFormat(timestep, timestepUnit);
-    var minOffset = getMinOffset(fundamentalScale);
-    if (scale !== Scale.DataScale) {
-      drawUpperText(ctx, theme, textFormat, stepPx, height, minOffset);
-    }
-  });
-  var dateText = scale === Scale.DataScale ? getLeftSideDateTextForDataScale(visibleTimeStart, fundamentalScale) : getLeftSideDateText(visibleTimeStart, scale);
+  var dateText = getLeftSideDateText(visibleTimeStart, fundamentalScale);
   drawLeftSideDateText(ctx, theme, dateText, height);
 };
 
@@ -22475,7 +22443,7 @@ var drawCurrentTime = function drawCurrentTime(context, theme, width, height, st
   ctx.stroke();
 };
 
-var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale, dataStartPx, dataEndPx, currentTimePx) {
+var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, secondsPerPx, dataStartPx, dataEndPx, currentTimePx) {
   var ctx = context;
   var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
     timelineNightTime = _theme$palette$geoweb.timelineNightTime,
@@ -22484,6 +22452,7 @@ var drawBackground = function drawBackground(context, theme, visibleTimeStart, v
     legendNoDataBackground = _theme$palette$geoweb.legendNoDataBackground;
   // top spacing
   var y = 0;
+  var fundamentalScale = getFundamentalScale$1(secondsPerPx);
   drawDefaultBackground();
   drawObservedData();
   drawForecastData();
@@ -22528,7 +22497,7 @@ var drawBackground = function drawBackground(context, theme, visibleTimeStart, v
     ctx.restore();
   }
   function drawNightOrAlternateTime() {
-    var colorChangeTimesteps = getColorChangeTimesteps(scale, visibleTimeStart, visibleTimeEnd);
+    var colorChangeTimesteps = getColorChangeTimesteps(fundamentalScale, visibleTimeStart, visibleTimeEnd);
     colorChangeTimesteps.forEach(function (timestep, i, arr) {
       if (i === 0) {
         return;
@@ -22539,7 +22508,7 @@ var drawBackground = function drawBackground(context, theme, visibleTimeStart, v
         _map2 = _slicedToArray(_map, 2),
         prevPx = _map2[0],
         currPx = _map2[1];
-      if (!isColorIntervalEven(scale, timestep)) {
+      if (!isColorIntervalEven(fundamentalScale, timestep)) {
         ctx.fillStyle = timelineNightTime.rgba;
         var TOP_OFFSET = 16;
         ctx.fillRect(prevPx, TOP_OFFSET, currPx - prevPx, height);
@@ -22585,7 +22554,7 @@ function getColorChangeTimesteps(scale, visibleTimeStart, visibleTimeEnd) {
   return colorChangeTimesteps;
 }
 
-var drawTimeSliderLegend = function drawTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix, animationStartTime, animationEndTime, dataStartTime, dataEndTime) {
+var drawTimeSliderLegend = function drawTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, selectedTimeUnix, span, currentTimeUnix, animationStartTime, animationEndTime, dataStartTime, dataEndTime) {
   var ctx = context;
   var _map = [0, canvasWidth].map(function (px) {
       return pixelToTimestamp(px, centerTime, canvasWidth, secondsPerPx);
@@ -22603,8 +22572,8 @@ var drawTimeSliderLegend = function drawTimeSliderLegend(context, theme, canvasW
     dataEndPx = _map4[3],
     currentTimePx = _map4[4];
   ctx.clearRect(0, 0, canvasWidth, height);
-  drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale, dataStartPx, dataEndPx, currentTimePx);
-  drawTimeScale(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale, dataScaleToSecondsPerPx);
+  drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, secondsPerPx, dataStartPx, dataEndPx, currentTimePx);
+  drawTimeScale(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, secondsPerPx);
   drawCurrentTime(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, currentTimeUnix);
   drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
 };
@@ -22769,12 +22738,12 @@ function convertStringTimeToUnix(time) {
 var TimeSliderLegend = function TimeSliderLegend(_ref) {
   var mapId = _ref.mapId,
     centerTime = _ref.centerTime,
-    secondsPerPx = _ref.secondsPerPx,
-    _ref$dataScaleToSecon = _ref.dataScaleToSecondsPerPx,
-    dataScaleToSecondsPerPx = _ref$dataScaleToSecon === void 0 ? defaultDataScaleToSecondsPerPx : _ref$dataScaleToSecon,
+    canvasWidth = _ref.timeSliderWidth,
+    _ref$secondsPerPx = _ref.secondsPerPx,
+    secondsPerPx = _ref$secondsPerPx === void 0 ? defaultSecondsPerPx : _ref$secondsPerPx,
     selectedTime = _ref.selectedTime,
-    _ref$scale = _ref.scale,
-    scale = _ref$scale === void 0 ? Scale.Hour : _ref$scale,
+    _ref$span = _ref.span,
+    span = _ref$span === void 0 ? Span.Day : _ref$span,
     currentTime = _ref.currentTime,
     dataStartTime = _ref.dataStartTime,
     dataEndTime = _ref.dataEndTime,
@@ -22790,42 +22759,40 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     _ref$onSetAnimationSt = _ref.onSetAnimationStartTime,
     onSetAnimationStartTime = _ref$onSetAnimationSt === void 0 ? function () {} : _ref$onSetAnimationSt,
     _ref$onSetAnimationEn = _ref.onSetAnimationEndTime,
-    onSetAnimationEndTime = _ref$onSetAnimationEn === void 0 ? function () {} : _ref$onSetAnimationEn;
+    onSetAnimationEndTime = _ref$onSetAnimationEn === void 0 ? function () {} : _ref$onSetAnimationEn,
+    _ref$updateCanvasWidt = _ref.updateCanvasWidth,
+    updateCanvasWidth = _ref$updateCanvasWidt === void 0 ? function () {} : _ref$updateCanvasWidt;
   var _useCanvasTarget = useCanvasTarget('mousedown'),
     _useCanvasTarget2 = _slicedToArray(_useCanvasTarget, 2),
     node = _useCanvasTarget2[1];
-  var _React$useState5 = React.useState(0),
+  var _React$useState5 = React.useState(false),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    canvasWidth = _React$useState6[0],
-    setCanvasWidth = _React$useState6[1];
+    selectedTimeDragging = _React$useState6[0],
+    setSelectedTimeDragging = _React$useState6[1];
   var _React$useState7 = React.useState(false),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    selectedTimeDragging = _React$useState8[0],
-    setSelectedTimeDragging = _React$useState8[1];
+    leftMarkerDragging = _React$useState8[0],
+    setLeftMarkerDragging = _React$useState8[1];
   var _React$useState9 = React.useState(false),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    leftMarkerDragging = _React$useState10[0],
-    setLeftMarkerDragging = _React$useState10[1];
+    rightMarkerDragging = _React$useState10[0],
+    setRightMarkerDragging = _React$useState10[1];
   var _React$useState11 = React.useState(false),
     _React$useState12 = _slicedToArray(_React$useState11, 2),
-    rightMarkerDragging = _React$useState12[0],
-    setRightMarkerDragging = _React$useState12[1];
+    dragTooltipOpen = _React$useState12[0],
+    setDragTooltipOpen = _React$useState12[1];
   var _React$useState13 = React.useState(false),
     _React$useState14 = _slicedToArray(_React$useState13, 2),
-    dragTooltipOpen = _React$useState14[0],
-    setDragTooltipOpen = _React$useState14[1];
+    mouseDownInLegend = _React$useState14[0],
+    setMouseDownInLegend = _React$useState14[1];
   var _React$useState15 = React.useState(false),
     _React$useState16 = _slicedToArray(_React$useState15, 2),
-    mouseDownInLegend = _React$useState16[0],
-    setMouseDownInLegend = _React$useState16[1];
-  var _React$useState17 = React.useState(false),
+    animationAreaDragging = _React$useState16[0],
+    setAnimationAreaDragging = _React$useState16[1];
+  var _React$useState17 = React.useState('auto'),
     _React$useState18 = _slicedToArray(_React$useState17, 2),
-    animationAreaDragging = _React$useState18[0],
-    setAnimationAreaDragging = _React$useState18[1];
-  var _React$useState19 = React.useState('auto'),
-    _React$useState20 = _slicedToArray(_React$useState19, 2),
-    cursorStyle = _React$useState20[0],
-    setCursorStyle = _React$useState20[1];
+    cursorStyle = _React$useState18[0],
+    setCursorStyle = _React$useState18[1];
   /**
    * remove active drag. can happen outside canvas.
    */
@@ -22850,10 +22817,10 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   var timeSliderLegendId = "timeSliderLegend_".concat(mapId);
   var timeSliderLegendElement = document.querySelector(".".concat(timeSliderLegendId));
   var pixelsToLeft = timeSliderLegendElement === null || timeSliderLegendElement === void 0 ? void 0 : timeSliderLegendElement.getBoundingClientRect()['left'];
-  var _React$useState21 = React.useState(moment.utc(0)),
-    _React$useState22 = _slicedToArray(_React$useState21, 2),
-    tooltipTime = _React$useState22[0],
-    setTooltipTime = _React$useState22[1];
+  var _React$useState19 = React.useState(moment.utc(0)),
+    _React$useState20 = _slicedToArray(_React$useState19, 2),
+    tooltipTime = _React$useState20[0],
+    setTooltipTime = _React$useState20[1];
   var _useAnimationTime = useAnimationTime(animationStartTime, animationEndTime, onSetAnimationStartTime, onSetAnimationEndTime, leftMarkerDragging, rightMarkerDragging, animationAreaDragging, centerTime, canvasWidth, secondsPerPx, dragTooltipPosition, pixelsToLeft, setTooltipTime, startDraggingPosition),
     handleAnimationDragging = _useAnimationTime.handleAnimationDragging,
     localAnimationEndTime = _useAnimationTime.localAnimationEndTime,
@@ -22996,8 +22963,8 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
     onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-      setCanvasWidth(width);
-      drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
+      updateCanvasWidth(canvasWidth, width);
+      drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, selectedTime, span, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
     }
   })));
 };
@@ -27759,21 +27726,21 @@ var drawTextAnnotation = function drawTextAnnotation(ctx, x, y, text, theme) {
   ctx.fillText(text, -actualTextWidth / 2, actualTextHeight / 2);
   ctx.restore();
 };
-var drawNewCurrentTimeBox = function drawNewCurrentTimeBox(ctx, selectedTime, selectedPx, scale, theme, isAutoUpdating) {
+var drawNewCurrentTimeBox = function drawNewCurrentTimeBox(ctx, selectedTime, selectedPx, span, theme, isAutoUpdating) {
   var iconWidth = 25;
   var smallWidth = needleGeom.smallWidth,
     largeWidth = needleGeom.largeWidth,
     height = needleGeom.height;
-  var boxWidth = scale === Scale.Year ? largeWidth : smallWidth;
+  var boxWidth = span === Span.Year ? largeWidth : smallWidth;
   var needleX = selectedPx - boxWidth / 2;
   var needleY = needleGeom.lineWidth;
   drawRoundedRectangle(ctx, needleX - iconWidth, needleY, boxWidth + iconWidth, height, needleGeom.cornerRadius, theme);
-  var timeFormat = scale === Scale.Year ? 'Y ddd DD MMM HH:mm' : 'ddd DD MMM HH:mm';
+  var timeFormat = span === Span.Year ? 'Y ddd DD MMM HH:mm' : 'ddd DD MMM HH:mm';
   var timeText = moment.utc(selectedTime * 1000).format(timeFormat).toString();
   drawTextAnnotation(ctx, needleX + boxWidth / 2 - iconWidth, needleY + height / 2, timeText, theme);
   drawAutoUpdateIcon(ctx, needleX + boxWidth - iconWidth, needleY, theme, isAutoUpdating);
 };
-var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selected, secondsPerPx, scale, isAutoUpdating) {
+var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selected, secondsPerPx, span, isAutoUpdating) {
   // map unix timestamps to pixel values
   var _map = [selected].map(function (t) {
       return timestampToPixel(t, centerTime, width, secondsPerPx);
@@ -27781,7 +27748,7 @@ var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx
     _map2 = _slicedToArray(_map, 1),
     selectedPx = _map2[0];
   ctx.clearRect(0, 0, width, height);
-  drawNewCurrentTimeBox(ctx, selected, selectedPx, scale, theme, isAutoUpdating);
+  drawNewCurrentTimeBox(ctx, selected, selectedPx, span, theme, isAutoUpdating);
 };
 
 var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
@@ -27790,8 +27757,8 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     _ref$secondsPerPx = _ref.secondsPerPx,
     secondsPerPx = _ref$secondsPerPx === void 0 ? 50 : _ref$secondsPerPx,
     selectedTime = _ref.selectedTime,
-    _ref$scale = _ref.scale,
-    scale = _ref$scale === void 0 ? Scale.Hour : _ref$scale,
+    _ref$span = _ref.span,
+    span = _ref$span === void 0 ? Span.Day : _ref$span,
     timeStep = _ref.timeStep,
     dataStartTime = _ref.dataStartTime,
     dataEndTime = _ref.dataEndTime,
@@ -27872,7 +27839,7 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     },
     onRenderCanvas: function onRenderCanvas(ctx, width, height) {
       setCanvasWidth(width);
-      renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selectedTime, secondsPerPx, scale, isAutoUpdating);
+      renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selectedTime, secondsPerPx, span, isAutoUpdating);
     }
   }));
 };
@@ -27915,10 +27882,10 @@ var useMoveTimeWithKeyboard = function useMoveTimeWithKeyboard(mapIsActive, time
   }, [currentTime, dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, selectedTime, timeStep]);
 };
 var defaultProps = {
+  timeSliderWidth: 100,
   centerTime: moment.utc().startOf('day').hours(12).unix(),
-  secondsPerPx: 5,
-  selectedTime: moment.utc().startOf('day').hours(12).unix(),
-  dataScaleToSecondsPerPx: defaultDataScaleToSecondsPerPx
+  secondsPerPx: defaultSecondsPerPx,
+  selectedTime: moment.utc().startOf('day').hours(12).unix()
 };
 var TimeSlider = function TimeSlider(_ref) {
   var mapId = _ref.mapId,
@@ -28138,68 +28105,6 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
-var TimeScaleButtonConnect = function TimeScaleButtonConnect(_ref) {
-  var mapId = _ref.mapId;
-  var layers = useSelector(function (store) {
-    return getMapLayers(store, mapId);
-  });
-  var timeSliderScale = useSelector(function (store) {
-    return getMapTimeSliderScale(store, mapId);
-  });
-  var centerTime = useSelector(function (store) {
-    return getMapTimeSliderCenterTime(store, mapId);
-  });
-  var secondsPerPx = useSelector(function (store) {
-    return getMapTimeSliderSecondsPerPx(store, mapId);
-  });
-  var dimensions = useSelector(function (store) {
-    return getMapDimensions(store, mapId);
-  });
-  var dispatch = useDispatch();
-  var onSetTimeSliderScale = function onSetTimeSliderScale(scale, newCenterTime, scaleToSecPerPx) {
-    if (scale === Scale.DataScale) {
-      dispatch(mapActions$1.setTimeSliderDataScaleToSecondsPerPx({
-        mapId: mapId,
-        timeSliderDataScaleToSecondsPerPx: scaleToSecPerPx
-      }));
-    }
-    dispatch(mapActions$1.setTimeSliderScale({
-      mapId: mapId,
-      timeSliderScale: scale
-    }));
-    dispatch(mapActions$1.setTimeSliderCenterTime({
-      mapId: mapId,
-      timeSliderCenterTime: newCenterTime
-    }));
-  };
-  var _getTimeBounds = getTimeBounds(dimensions),
-    selectedTime = _getTimeBounds.selectedTime;
-  return /*#__PURE__*/React.createElement(TimeScaleButton, {
-    layers: layers,
-    timeSliderScale: timeSliderScale,
-    onChangeTimeSliderScale: onSetTimeSliderScale,
-    secondsPerPx: secondsPerPx,
-    centerTime: centerTime,
-    selectedTime: selectedTime
-  });
-};
-
 var NowButtonConnect = function NowButtonConnect(_ref) {
   var sourceId = _ref.sourceId,
     mapId = _ref.mapId,
@@ -28287,6 +28192,70 @@ var AnimationLengthButtonConnect = function AnimationLengthButtonConnect(_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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * */
+var TimeSpanButtonConnect = function TimeSpanButtonConnect(_ref) {
+  var mapId = _ref.mapId;
+  var layers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+  var timeSliderSpan = useSelector(function (store) {
+    return getMapTimeSliderSpan(store, mapId);
+  });
+  var centerTime = useSelector(function (store) {
+    return getMapTimeSliderCenterTime(store, mapId);
+  });
+  var timeSliderWidth = useSelector(function (store) {
+    return getMapTimeSliderWidth(store, mapId);
+  });
+  var secondsPerPx = useSelector(function (store) {
+    return getMapTimeSliderSecondsPerPx(store, mapId);
+  });
+  var dimensions = useSelector(function (store) {
+    return getMapDimensions(store, mapId);
+  });
+  var dispatch = useDispatch();
+  var onSetTimeSliderSpan = function onSetTimeSliderSpan(newSpan, newCenterTime, newSecondsPerPx) {
+    dispatch(mapActions$1.setTimeSliderSecondsPerPx({
+      mapId: mapId,
+      timeSliderSecondsPerPx: newSecondsPerPx
+    }));
+    dispatch(mapActions$1.setTimeSliderSpan({
+      mapId: mapId,
+      timeSliderSpan: newSpan
+    }));
+    dispatch(mapActions$1.setTimeSliderCenterTime({
+      mapId: mapId,
+      timeSliderCenterTime: newCenterTime
+    }));
+  };
+  var _getTimeBounds = getTimeBounds(dimensions),
+    selectedTime = _getTimeBounds.selectedTime;
+  return /*#__PURE__*/React.createElement(TimeSpanButton, {
+    layers: layers,
+    timeSliderSpan: timeSliderSpan,
+    onChangeTimeSliderSpan: onSetTimeSliderSpan,
+    secondsPerPx: secondsPerPx,
+    centerTime: centerTime,
+    selectedTime: selectedTime,
+    timeSliderWidth: timeSliderWidth
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -28331,7 +28300,7 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
     timeStepBtn: /*#__PURE__*/React.createElement(TimeStepButtonComponent, {
       mapId: mapId
     }),
-    timeScaleBtn: /*#__PURE__*/React.createElement(TimeScaleButtonConnect, {
+    timeSpanBtn: /*#__PURE__*/React.createElement(TimeSpanButtonConnect, {
       mapId: mapId
     })
   });
@@ -28503,18 +28472,18 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
   var dimensions = useSelector(function (store) {
     return getMapDimensions(store, mapId);
   });
-  var scale = useSelector(function (store) {
-    return getMapTimeSliderScale(store, mapId);
+  var span = useSelector(function (store) {
+    return getMapTimeSliderSpan(store, mapId);
   });
   var centerTime = useSelector(function (store) {
     return getMapTimeSliderCenterTime(store, mapId);
   });
+  var timeSliderWidth = useSelector(function (store) {
+    return getMapTimeSliderWidth(store, mapId);
+  });
   var secondsPerPx = useSelector(function (store) {
     return getMapTimeSliderSecondsPerPx(store, mapId);
   });
-  var dataScaleToSecondsPerPx = useSelector(function (store) {
-    return getMapTimeSliderDataScaleToSecondsPerPx(store, mapId);
-  });
   var isAnimating$1 = useSelector(function (store) {
     return isAnimating(store, mapId);
   });
@@ -28544,10 +28513,10 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
   return /*#__PURE__*/React.createElement(TimeSliderLegend, {
     mapId: mapId,
     centerTime: centerTime,
+    timeSliderWidth: timeSliderWidth,
     secondsPerPx: secondsPerPx,
-    dataScaleToSecondsPerPx: dataScaleToSecondsPerPx,
     selectedTime: selectedTime,
-    scale: scale,
+    span: span,
     currentTime: currentTime,
     isTimeSliderHoverOn: isTimeSliderHoverOn$1,
     dataStartTime: dataStartTime,
@@ -28601,6 +28570,20 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
         mapId: mapId,
         animationEndTime: animationEndTime
       }));
+    },
+    updateCanvasWidth: function updateCanvasWidth(storeWidth, newWidth) {
+      if (storeWidth !== newWidth) {
+        dispatch(mapActions$1.setTimeSliderWidth({
+          mapId: mapId,
+          timeSliderWidth: newWidth
+        }));
+        var spanInSeconds = span === Span.DataSpan ? getDataSpanSeconds(layers) : spanToSeconds[span];
+        var newSecondsPerPx = secondsPerPxFromCanvasWidth(newWidth, spanInSeconds);
+        dispatch(mapActions$1.setTimeSliderSecondsPerPx({
+          mapId: mapId,
+          timeSliderSecondsPerPx: newSecondsPerPx
+        }));
+      }
     }
   });
 };
@@ -28611,7 +28594,7 @@ var connectRedux = connect(function (store, props) {
     dimensions: getMapDimensions(store, props.mapId),
     centerTime: getMapTimeSliderCenterTime(store, props.mapId),
     secondsPerPx: getMapTimeSliderSecondsPerPx(store, props.mapId),
-    scale: getMapTimeSliderScale(store, props.mapId),
+    span: getMapTimeSliderSpan(store, props.mapId),
     timeStep: getMapTimeStep(store, props.mapId),
     isAnimating: isAnimating(store, props.mapId),
     isAutoUpdating: isAutoUpdating(store, props.mapId),
@@ -28628,7 +28611,7 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     dimensions = _ref.dimensions,
     centerTime = _ref.centerTime,
     secondsPerPx = _ref.secondsPerPx,
-    scale = _ref.scale,
+    span = _ref.span,
     layers = _ref.layers,
     timeStep = _ref.timeStep,
     isAnimating = _ref.isAnimating,
@@ -28647,7 +28630,7 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     centerTime: centerTime,
     secondsPerPx: secondsPerPx,
     selectedTime: selectedTime,
-    scale: scale,
+    span: span,
     dataStartTime: dataStartTime,
     dataEndTime: dataEndTime,
     timeStep: timeStep,
@@ -29210,8 +29193,8 @@ var ReactMapViewLayer = function ReactMapViewLayer(props) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var tileRenderSettings = {
   WorldMap_Light_Grey_Canvas: {
@@ -29643,14 +29626,14 @@ var getFeatureLayers = function getFeatureLayers(children) {
 };
 /**
  * Returns true if this is a maplayer and not a baselayer or overlayer
- * @param layer The Layer object, or the props from the ReactWMJSLayer
+ * @param layer The layerTypes.Layer object, or the props from the ReactWMJSLayer
  */
 var isAMapLayer = function isAMapLayer(layer) {
   return layer.layerType === LayerType$1.mapLayer;
 };
 /**
  * Returns true if this is a geojsonlayer (layer containing geojson field)
- * @param layer The Layer object, or the props from the ReactWMJSLayer
+ * @param layer The layerTypes.Layer object, or the props from the ReactWMJSLayer
  */
 var isAGeoJSONLayer = function isAGeoJSONLayer(layer) {
   return layer.geojson !== undefined;
@@ -32425,7 +32408,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
                 myChildren.push(child);
                 takenIds.add(childProps.id);
               } else {
-                childProps.onLayerError(childProps, new Error("Duplicate layer id \"".concat(childProps.id, "\" encountered within this WebMap")), wmjsMap);
+                childProps.onLayerError(childProps, new Error("Duplicate layer id \"".concat(childProps.id, "\" encountered within this mapTypes.WebMap")), wmjsMap);
                 console.warn('ReactWMJSLayer has a duplicate id', child);
               }
             } else {
@@ -32642,7 +32625,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
       /* Check if webmapjs was not already initialized */
       var existingWMJSMap = getWMJSMapById(mapId);
       if (existingWMJSMap) {
-        console.warn("Somehow ".concat(mapId, "unRegisterWMJSMap already exists"));
+        console.warn("Somehow ".concat(mapId, "mapStoreUtils.unRegisterWMJSMap already exists"));
         unRegisterWMJSMap(mapId);
       }
       var wmjsMap = new WMJSMap(this.adagucWebMapJSRef.current);
@@ -33493,7 +33476,7 @@ var OptionsMenuConnect = function OptionsMenuConnect(_ref) {
     timeStepBtn: /*#__PURE__*/React__default.createElement(TimeStepButtonComponent, {
       mapId: mapId
     }),
-    timeScaleBtn: /*#__PURE__*/React__default.createElement(TimeScaleButtonConnect, {
+    timeSpanBtn: /*#__PURE__*/React__default.createElement(TimeSpanButtonConnect, {
       mapId: mapId
     })
   });
@@ -57302,4 +57285,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, index$1 as SyncGroups, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnect, TimeSliderConnect, TimeSliderLite, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, selectors$1 as genericSelectors, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$7 as layerReducer, selectors$4 as layerSelectors, types$3 as layerTypes, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils$1 as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, routerActions, selectors$5 as serviceSelectors, snackbarActions, store, genericActions as syncGroupActions, selectors$2 as syncGroupsSelectors, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, timeSliderUtils, uiActions, uiModuleConfig, reducer$6 as uiReducer, selectors$3 as uiSelectors, types as uiTypes, unRegisterAllWMJSLayersAndMaps, unRegisterWMJSLayer, unRegisterWMJSMap, useFetchServices, useSetupDialog, reducer$5 as webmapReducer };
+export { AppWrapperConnect, ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, DockedLayerManagerConnect, HarmonieTempAndPrecipPreset, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LayerSelectConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, RouterWrapperConnect, SnackbarWrapperConnect, SyncGroupViewerConnect, index$1 as SyncGroups, TimeSlider, BackwardForwardStepButtonConnect as TimeSliderBackwardForwardStepButtonConnect, TimeSliderButtonsConnect, TimeSliderConnect, TimeSliderLite, OptionsMenuButtonConnect as TimeSliderOptionsMenuButtonConnect, PlayButtonConnect as TimeSliderPlayButtonConnect, ZoomControlConnect, ZoomControls, appActions, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, selectors$1 as genericSelectors, getDrawFunctionFromStore, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$7 as layerReducer, selectors$4 as layerSelectors, types$3 as layerTypes, mapActions, enums as mapEnums, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils$1 as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerDrawFunction, registerWMJSMap, registerWMLayer, routerActions, selectors$5 as serviceSelectors, snackbarActions, store, genericActions as syncGroupActions, selectors$2 as syncGroupsSelectors, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, timeSliderUtils, uiActions, uiModuleConfig, reducer$6 as uiReducer, selectors$3 as uiSelectors, types$1 as uiTypes, unRegisterAllWMJSLayersAndMaps, unRegisterWMJSLayer, unRegisterWMJSMap, useFetchServices, useSetupDialog, reducer$5 as webmapReducer };