@opengeoweb/core 4.2.0 → 4.4.0

package/index.esm.js

@@ -3,26 +3,31 @@ import produce$1, { current, produce } from 'immer';
 import moment from 'moment';
 import * as React from 'react';
 import React__default, { Component, useRef, useState, useEffect, useCallback } from 'react';
-import _, { isEqual, debounce, groupBy, throttle, range } from 'lodash';
-import { takeLatest, put, select, call, all, takeEvery, delay } from 'redux-saga/effects';
+import _, { debounce, isEqual, groupBy, throttle, range } from 'lodash';
+import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { Tooltip, Paper, Box, Typography, Grid, InputLabel, IconButton, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, Popover, useTheme, SliderThumb, Snackbar } from '@mui/material';
-import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, calculateDialogSizeAndPosition, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
-import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Search, Clear, Close, Info, DimensionsTime, DimensionsRefTime, DimensionsElevation, DimensionsOther, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Options, SliderThumb as SliderThumb$1, List as List$1, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
-import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
-import { Sortable, ReactSortable } from 'react-sortablejs';
+import { Tooltip, Paper, Box, Typography, Grid, InputLabel, IconButton, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, Popper, useTheme, Snackbar } from '@mui/material';
+import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, calculateDialogSizeAndPosition, CustomToggleButton, useIsMounted, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
+import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Options, StepForward, StepBackward, ChevronDown, ChevronUp, List as List$1, Resize, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
+import { ReactSortable } from 'react-sortablejs';
+import Sortable from 'sortablejs';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
 import { useFormContext } from 'react-hook-form';
 import { FixedSizeList } from 'react-window';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import Grid$1 from '@mui/material/Grid';
+import Tooltip$1 from '@mui/material/Tooltip';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
 import * as turf from '@turf/turf';
-import { createStore, DynamicModuleLoader } from 'redux-dynamic-modules';
-import { getSagaExtension } from 'redux-dynamic-modules-saga';
+import { Box as Box$2 } from '@mui/system';
+import Draggable from 'react-draggable';
+import { Resizable } from 're-resizable';
+import { createStore } from '@redux-eggs/redux-toolkit';
+import { getSagaExtension } from '@redux-eggs/saga-extension';
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -361,6 +366,7 @@ var LayerActionOrigin;
   LayerActionOrigin["ReactMapViewParseLayer"] = "ReactMapViewParseLayer";
   LayerActionOrigin["setLayerDimensionSaga"] = "setLayerDimensionSaga";
   LayerActionOrigin["toggleAutoUpdateSaga"] = "toggleAutoUpdateSaga";
+  LayerActionOrigin["unregisterMapSaga"] = "unregisterMapSaga";
 })(LayerActionOrigin || (LayerActionOrigin = {}));
 
 /* *
@@ -592,6 +598,7 @@ var types$2 = /*#__PURE__*/Object.freeze({
   get LayerActionOrigin () { return LayerActionOrigin; }
 });
 
+var millisecondsInSecond = 1000;
 var defaultAnimationDelayAtStart = 250;
 var defaultDelay = 1000; // [ms]
 
@@ -608,6 +615,11 @@ var getSpeedDelay = function getSpeedDelay(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
  */
@@ -617,13 +629,12 @@ var getTimeBounds = function getTimeBounds(dimensions) {
     second: 0,
     millisecond: 0
   }).unix();
-  var timeDimension = dimensions ? dimensions.find(function (dim) {
+  var timeDimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dim) {
     return dim.name === 'time';
-  }) : null;
+  });
   var startTime = timeDimension && timeDimension.minValue ? moment.utc(timeDimension.minValue).unix() : defaultStartEnd;
   var endTime = timeDimension && timeDimension.maxValue ? moment.utc(timeDimension.maxValue).unix() : defaultStartEnd;
-  var currentValueIsValid = timeDimension && timeDimension.currentValue && moment.utc(timeDimension.currentValue).isValid();
-  var selectedTime = currentValueIsValid ? moment.utc(timeDimension.currentValue).unix() : moment.utc().unix();
+  var selectedTime = getSelectedTime(timeDimension);
   return {
     selectedTime: selectedTime,
     startTime: startTime,
@@ -658,22 +669,12 @@ var timestampToPixel = function timestampToPixel(timestamp, centerTime, widthPx,
 var pixelToTimestamp = function pixelToTimestamp(timePx, centerTime, widthPx, secondsPerPx) {
   return centerTime - (widthPx / 2 - timePx) * secondsPerPx;
 };
-var onSetNewDateDebouncer;
 var onsetNewDateDebounced = function onsetNewDateDebounced(dateToSet, onSetNewDate) {
-  /* Debounce the dateToSet with a simple timeout */
-  if (onSetNewDateDebouncer === undefined) {
-    onSetNewDateDebouncer = dateToSet;
+  debounce(function () {
     onSetNewDate(dateToSet);
-    window.setTimeout(function () {
-      if (onSetNewDateDebouncer !== undefined && onSetNewDateDebouncer !== dateToSet) {
-        onSetNewDate(onSetNewDateDebouncer);
-      }
-
-      onSetNewDateDebouncer = undefined;
-    }, 10);
-  } else {
-    onSetNewDateDebouncer = dateToSet;
-  }
+  }, 10, {
+    leading: true
+  })();
 };
 var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
   var adjustedTimeStep = timeStep * 60;
@@ -695,7 +696,9 @@ var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
 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 selectedTimeString = moment.unix(Math.min(Math.max(roundedTime, dataStartTime), dataEndTime)).toISOString();
+  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) {
@@ -722,47 +725,31 @@ var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
    */
   [2147483647, 0]);
 };
-var getNextTimeStepvalue = function getNextTimeStepvalue(value, max) {
-  var newValue = value + 1;
-  return newValue > max ? max : newValue;
-};
-var getPreviousTimeStepvalue = function getPreviousTimeStepvalue(value, min) {
-  var newValue = value - 1;
-  return newValue < min ? min : newValue;
-};
-var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max) {
-  var supportFourDirectionNavigation = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
+  var prevTimeStep = moment.utc(curTime).subtract(timeStep, 'm').toISOString();
 
-  if (!supportFourDirectionNavigation) {
-    if (event.ctrlKey || event.metaKey) {
-      switch (event.key) {
-        case 'ArrowDown':
-          return getPreviousTimeStepvalue(value, min);
+  if (!prevTimeStep) {
+    return;
+  }
 
-        case 'ArrowUp':
-          return getNextTimeStepvalue(value, max);
+  if (moment.utc(prevTimeStep) < moment.utc(dataStartTime * millisecondsInSecond)) {
+    return;
+  }
 
-        default:
-          return null;
-      }
-    }
-  } else {
-    // currently supportFourDirectionNavigation (left/right/up/down) is only used in horizontal slider TimeSliderScaleSlider
-    switch (event.key) {
-      case 'ArrowDown':
-      case 'ArrowLeft':
-        return getPreviousTimeStepvalue(value, min);
+  onsetNewDateDebounced(prevTimeStep, onSetNewDate);
+};
+var setNextTimeStep = function setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate) {
+  var nextTimeStep = moment.utc(curTime).add(timeStep, 'm').toISOString();
 
-      case 'ArrowUp':
-      case 'ArrowRight':
-        return getNextTimeStepvalue(value, max);
+  if (!nextTimeStep) {
+    return;
+  }
 
-      default:
-        return null;
-    }
+  if (moment.utc(nextTimeStep) > moment.utc(dataEndTime * millisecondsInSecond)) {
+    return;
   }
 
-  return null;
+  onsetNewDateDebounced(nextTimeStep, onSetNewDate);
 };
 var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInterval) {
   switch (timeInterval.isRegularInterval) {
@@ -920,6 +907,25 @@ 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 createMap = function createMap(_ref) {
   var id = _ref.id,
@@ -1833,6 +1839,9 @@ var selectorMemoizationOptions = {
     resultEqualityCheck: isEqual
   }
 };
+var isUserAddedService = function isUserAddedService(scope) {
+  return scope === 'user';
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1954,25 +1963,6 @@ var getLayerFromService = createSelector(function (store, serviceUrl) {
 var getLayerStyles$1 = createSelector(getLayerFromService, function (layer) {
   return layer && layer.styles ? layer.styles : [];
 }, selectorMemoizationOptions);
-/**
- * Gets services and maps them into an array
- *
- * Example: services = getServices(store)
- * @param {object} store store: object - Store object
- * @returns {array} returnType: [] - array containing services
- */
-
-createSelector(servicesStore, function (store) {
-  var services = store ? store.byId : {};
-  var arrayOfServiceObjects = Object.keys(services).map(function (key) {
-    return {
-      name: services[key].name,
-      serviceUrl: services[key].serviceUrl,
-      isUserAddedService: services[key].isUserAddedService
-    };
-  });
-  return arrayOfServiceObjects;
-}, selectorMemoizationOptions);
 
 var moveToTop = function moveToTop(list, element) {
   var filteredList = list.filter(function (item) {
@@ -2823,6 +2813,22 @@ var getAllLayers = createSelector(getLayersIds, getLayersById, function (ids, la
     return layers[layerId];
   });
 }, selectorMemoizationOptions);
+/**
+ * Retrieves all layers (including base layers and overlayers) for the given mapId
+ *
+ * Example: layers = getLayersByMapId(store, mapId)
+ * @param {object} store store: object - object from which the layers state will be extracted
+ * @param {string} mapId mapId: string - mapId
+ * @returns {array} returnType: ReduxLayer[] - an array of all layers containing layer information (service, name, style, enabled etc.)
+ */
+
+var getLayersByMapId = createSelector(getAllLayers, function (_store, _mapId) {
+  return _mapId;
+}, function (layers, mapId) {
+  return layers.filter(function (layer) {
+    return layer.mapId === mapId;
+  });
+}, selectorMemoizationOptions);
 /**
  * Retrieves all layers that aren't base layers and aren't overlayers
  *
@@ -3043,7 +3049,7 @@ var getUiStore = function getUiStore(store) {
  *
  * Example: getDialogDetailsByType(store, 'legend')
  * @param {object} store store object from which the ui state wll be extracted
- * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+ * @param {string} dialogType type of the dialog
  * @returns {array} [string, boolean] first element gives the active map id, second element whether the dialog is open
  */
 
@@ -3058,7 +3064,7 @@ var getDialogDetailsByType = function getDialogDetailsByType(store, dialogType)
  * For a given ui component: gets wether the dialog is open or closed
  *
  * @param {object} store store object from which the ui state wll be extracted
- * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+ * @param {string} dialogType type of the dialog
  * @returns {boolean} returnType: boolean
  */
 
@@ -3073,7 +3079,7 @@ var getisDialogOpen = createSelector(getDialogDetailsByType, function (details)
  *For a given ui component: gets the active map Id
  *
  * @param {object} store store object from which the ui state wll be extracted
- * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+ * @param {string} dialogType type of the dialog
  * @returns {string} returnType: string - the active map id
  */
 
@@ -3088,7 +3094,7 @@ var getDialogMapId = createSelector(getDialogDetailsByType, function (details) {
  *For a given ui component: gets the order of visible dialog
  *
  * @param {object} store store object from which the ui state wll be extracted
- * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
+ * @param {DialogType} dialogType type of the dialog
  * @returns {number} the higher the order number the higher the zIndex
  */
 
@@ -3114,7 +3120,7 @@ var getDialogOrder = createSelector(function (store, dialogType) {
  *For a given ui component: returns if ordered on top
  *
  * @param {object} store store object from which the ui state wll be extracted
- * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
+ * @param {DialogType} dialogType type of the dialog
  * @returns {boolean}
  */
 
@@ -4361,6 +4367,25 @@ var selectors = /*#__PURE__*/Object.freeze({
   getMapPresetError: getMapPresetError
 });
 
+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 || (DialogTypes = {}));
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  get DialogTypes () { return DialogTypes; }
+});
+
 var initialState$1 = {
   filters: {
     searchFilter: '',
@@ -4384,7 +4409,7 @@ var initialState$1 = {
 };
 var slice$1 = createSlice({
   initialState: initialState$1,
-  name: 'layerSelect',
+  name: DialogTypes.LayerSelect,
   reducers: {
     setSearchFilter: function setSearchFilter(draft, action) {
       var filterText = action.payload.filterText;
@@ -4401,7 +4426,7 @@ var slice$1 = createSlice({
           serviceUrl = _action$payload.serviceUrl,
           _abstract = _action$payload["abstract"],
           keywords = _action$payload.keywords,
-          isUserAddedService = _action$payload.isUserAddedService,
+          scope = _action$payload.scope,
           groups = _action$payload.groups;
 
       if (!draft.filters.activeServices.byId[serviceId]) {
@@ -4441,7 +4466,7 @@ var slice$1 = createSlice({
         serviceId: serviceId,
         enabled: draft.allServicesEnabled,
         filterIds: filterIds,
-        isUserAddedService: isUserAddedService,
+        scope: scope,
         serviceName: serviceName,
         serviceUrl: serviceUrl,
         "abstract": _abstract
@@ -4536,6 +4561,61 @@ var slice$1 = createSlice({
 var reducer$1 = slice$1.reducer;
 var layerSelectActions = slice$1.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) return [];
+
+  if (searchString === '' && allFiltersActive) {
+    return mapStoreService.layers.filter(function (layer) {
+      return layer.leaf;
+    });
+  }
+
+  var searchStringArray = searchString.split(' ');
+  return mapStoreService.layers.filter(function (layer) {
+    return searchStringArray.every(function (search) {
+      var _a, _b, _c;
+
+      var searchLowercase = search.toLowerCase();
+      var layerFilterIds = layer.path.map(function (group) {
+        return "groups-".concat(group);
+      }).concat(layer.keywords.map(function (keyword) {
+        return "keywords-".concat(keyword);
+      }));
+      var isFilterInLayer = (layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (id) {
+        return filterIds.includes(id);
+      })) || allFiltersActive;
+      var isSearchTextInLayerFilter = layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (filterId) {
+        return filterId.toLowerCase().includes(searchLowercase);
+      });
+      var isSearchTextInLayerName = (_a = layer.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLowercase);
+      var isSearchTextInLayerText = (_b = layer.text) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
+      var isSearchTextInLayerAbstract = (_c = layer["abstract"]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLowercase);
+      var isSearchTextInServiceName = mapStoreService.name.toLowerCase().includes(searchLowercase);
+      var isSearchTextInLayer = isSearchTextInLayerName || isSearchTextInLayerText || isSearchTextInLayerAbstract || isSearchTextInLayerFilter || isSearchTextInServiceName;
+      return isFilterInLayer && isSearchTextInLayer;
+    });
+  }).filter(function (layer) {
+    return layer.leaf;
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4694,6 +4774,22 @@ var isAllFiltersChecked = createSelector(layerSelectStore, function (store) {
 var getActiveLayerInfo = createSelector(layerSelectStore, function (store) {
   return store === null || store === void 0 ? void 0 : store.activeLayerInfo;
 });
+/**
+ * Returns a filtered active layer object based on the given filter settings
+ * Example: layerSelectSelectors.getFilteredLayers(store, filteredSettings);
+ * @param {object} store store: object - object from which the service state will be extracted
+ * @returns {array} returnType: ActiveLayerObject - an array of all filtered activelayers
+ */
+
+var getFilteredLayers = createSelector([getEnabledServiceIds, getServices, getCheckedFilterIds, isAllFiltersChecked, getSearchFilter], function (enabledServiceIds, servicesStore, checkedFilterIds, allFiltersActive, searchFilter) {
+  return enabledServiceIds.reduce(function (layerList, serviceId) {
+    return layerList.concat(filterLayersFromService(serviceId, servicesStore, checkedFilterIds, allFiltersActive, searchFilter).map(function (layer) {
+      return Object.assign(Object.assign({}, layer), {
+        serviceName: serviceId
+      });
+    }));
+  }, []);
+}, selectorMemoizationOptions);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4769,17 +4865,6 @@ var getFirstSnackbarMessage = createSelector(getCurrentSnackbarMessages, functio
   return currentMessages.length > 0 ? currentMessages[0] : undefined;
 });
 
-var DialogTypes;
-
-(function (DialogTypes) {
-  DialogTypes["LayerInfo"] = "layerInfo";
-})(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.
@@ -4807,8 +4892,8 @@ var syncGroupStore = function syncGroupStore(store) {
  * @returns {object} returnType: SynchronizationGroupState
  */
 
-createSelector(syncGroupStore, function (store) {
-  return store || [];
+var getSynchronizationGroupState = createSelector(syncGroupStore, function (store) {
+  return store || null;
 });
 var getSynchronizationGroup = function getSynchronizationGroup(state, id) {
   return syncGroupStore(state).groups.byId[id];
@@ -5110,7 +5195,7 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
 var _marked$5 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
     _marked2$5 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
     _marked3$4 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
-    _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
+    _marked4$3 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
     _marked5$2 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
     _marked6$1 = /*#__PURE__*/regeneratorRuntime.mark(moveLayerActionsSaga),
     _marked7$1 = /*#__PURE__*/regeneratorRuntime.mark(setActiveLayerIdActionsSaga),
@@ -5264,7 +5349,7 @@ function addLayerActionsSaga(_ref4) {
           return _context4.stop();
       }
     }
-  }, _marked4$2);
+  }, _marked4$3);
 }
 function deleteLayerActionsSaga(_ref5) {
   var payload, type, targets;
@@ -5567,7 +5652,7 @@ var createSyncGroupViewStateSelector = createSelector(groups, sources, createSyn
 var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
     _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
     _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
-    _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(updateViewStateSaga),
+    _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(updateViewStateSaga),
     _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
@@ -5706,7 +5791,7 @@ function updateViewStateSaga() {
           return _context4.stop();
       }
     }
-  }, _marked4$1);
+  }, _marked4$2);
 }
 
 function rootSaga$4() {
@@ -5757,25 +5842,9 @@ function rootSaga$4() {
   }, _marked5$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 synchronizationGroupConfig = {
   id: 'syncronizationGroupStore-module',
-  reducerMap: {
+  reducersMap: {
     syncronizationGroupStore: reducer$2
   },
   sagas: [rootSaga$5, rootSaga$4]
@@ -5906,12 +5975,12 @@ function rootSaga$3() {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var uiModuleConfig = {
   id: 'ui-module',
-  reducerMap: {
+  reducersMap: {
     ui: reducer$4
   },
   sagas: [rootSaga$3]
@@ -5978,9 +6047,7 @@ var PlayButton = function PlayButton(_ref) {
   var isAnimating = _ref.isAnimating,
       isDisabled = _ref.isDisabled,
       _ref$onTogglePlayButt = _ref.onTogglePlayButton,
-      onTogglePlayButton = _ref$onTogglePlayButt === void 0 ? function () {
-    return null;
-  } : _ref$onTogglePlayButt;
+      onTogglePlayButton = _ref$onTogglePlayButt === void 0 ? function () {} : _ref$onTogglePlayButt;
 
   var onTogglePlay = function onTogglePlay() {
     onTogglePlayButton();
@@ -6232,7 +6299,7 @@ var KNMIgeoservicesRadar = {
 };
 var KNMIgeoservicesObs = {
   name: 'KNMIgeoservicesObs',
-  url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS&service=WMS&',
+  url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS',
   id: 'KNMIgeoservicesObs'
 };
 var KNMIgeoservicesKlimaatAtlas = {
@@ -6909,11 +6976,11 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
         return;
       }
 
-      if (parseInt(this.ctx.canvas.height, 10) !== this.currentHeight) {
+      if (this.ctx.canvas.height !== this.currentHeight) {
         this.ctx.canvas.height = this.currentHeight;
       }
 
-      if (parseInt(this.ctx.canvas.width, 10) !== this.currentWidth) {
+      if (this.ctx.canvas.width !== this.currentWidth) {
         this.ctx.canvas.width = this.currentWidth;
       }
 
@@ -7099,6 +7166,84 @@ CanvasComponent.defaultProps = {
   }
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var LegendLayout = function LegendLayout(_ref) {
+  var title = _ref.title,
+      name = _ref.name,
+      dimensions = _ref.dimensions,
+      children = _ref.children,
+      height = _ref.height,
+      width = _ref.width,
+      minWidth = _ref.minWidth;
+  return /*#__PURE__*/React__default.createElement(Paper, {
+    "data-testid": "legend",
+    sx: {
+      padding: '10px',
+      border: '1px solid grey',
+      backgroundColor: '#FFF',
+      overflow: 'hidden',
+      marginBottom: 0.5
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    "data-testid": "legend-title"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      fontFamily: 'Roboto, Helvetica, Arial',
+      fontSize: '10px',
+      minWidth: '100%',
+      wordWrap: 'break-word',
+      color: 'common.black',
+      whiteSpace: 'nowrap'
+    },
+    variant: "h3"
+  }, title)), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: title || 'loading',
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      margin: '10px 0px 10px 0px',
+      height: "".concat(height, "px"),
+      width: "".concat(width, "px")
+    }
+  }, children)), /*#__PURE__*/React__default.createElement(Box, {
+    "data-testid": "legend-info",
+    sx: Object.assign({
+      fontFamily: 'Roboto, Helvetica, Arial',
+      fontSize: 10,
+      color: 'common.black',
+      overflowX: 'hidden',
+      wordWrap: 'break-word',
+      whiteSpace: 'nowrap'
+    }, minWidth && {
+      minWidth: "".concat(minWidth, "px")
+    })
+  }, dimensions && dimensions.map(function (dim) {
+    return /*#__PURE__*/React__default.createElement(Box, {
+      key: name + dim.name
+    }, dim.name === 'time' ? "".concat(dim.currentValue) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+      style: {
+        fontWeight: 500
+      }
+    }, dim.name, ":"), dim.currentValue, " ", dim.units));
+  })));
+};
+
 var defaultCanvasWidth = 150;
 var defaultCanvasHeight = 30;
 /**
@@ -7180,46 +7325,20 @@ var Legend = function Legend(_ref) {
   like a title and the WMS legendgraphic url */
 
   var wmLayer = getWMLayerById(layer.id);
-  return /*#__PURE__*/React__default.createElement(Paper, {
-    "data-testid": "legend",
-    sx: {
-      padding: '10px',
-      border: '1px solid grey',
-      display: 'inline-block',
-      backgroundColor: '#FFF',
-      overflow: 'hidden',
-      marginBottom: 0.5
-    }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    "data-testid": "legend-title",
-    style: {
-      maxWidth: canvasContainerWidth
-    }
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      fontFamily: 'Roboto, Helvetica, Arial',
-      fontSize: '10px',
-      minWidth: "".concat(defaultCanvasWidth, "px"),
-      wordWrap: 'break-word',
-      color: 'common.black'
-    },
-    variant: "h3"
-  }, wmLayer && wmLayer.title)), /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: wmLayer && wmLayer.title || 'loading',
-    placement: "top"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      margin: '10px 0px 10px 0px',
-      height: "".concat(canvasContainerHeight, "px"),
-      width: "".concat(canvasContainerWidth, "px")
-    }
+  return /*#__PURE__*/React__default.createElement(LegendLayout, {
+    title: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title,
+    name: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.name,
+    dimensions: layer === null || layer === void 0 ? void 0 : layer.dimensions,
+    height: canvasContainerHeight,
+    width: canvasContainerWidth,
+    minWidth: defaultCanvasWidth
   }, /*#__PURE__*/React__default.createElement(CanvasComponent, {
     redrawInterval: 500,
     onRenderCanvas: function onRenderCanvas(ctx, width, height) {
       /*
-        Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
-        Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
-       */
+            Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
+            Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
+           */
       var legendWmLayer = getWMLayerById(layer.id);
       var legendUrl = getLegendGraphicURLForLayer(legendWmLayer);
       var image = legendImageStore.getImage(legendUrl);
@@ -7268,26 +7387,7 @@ var Legend = function Legend(_ref) {
         renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
       }
     }
-  }))), /*#__PURE__*/React__default.createElement(Box, {
-    "data-testid": "legend-info",
-    sx: {
-      fontFamily: 'Roboto, Helvetica, Arial',
-      fontSize: 10,
-      color: 'common.black',
-      overflowX: 'hidden',
-      minWidth: "".concat(defaultCanvasWidth, "px"),
-      wordWrap: 'break-word',
-      maxWidth: "".concat(canvasContainerWidth, "px")
-    }
-  }, layer.dimensions && layer.dimensions.map(function (dim) {
-    return /*#__PURE__*/React__default.createElement(Box, {
-      key: layer.name + dim.name
-    }, dim.name === 'time' ? "".concat(dim.currentValue) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-      style: {
-        fontWeight: 500
-      }
-    }, dim.name, ":"), dim.currentValue, " ", dim.units));
-  })));
+  }));
 };
 
 /* *
@@ -7478,13 +7578,14 @@ var LegendConnect = function LegendConnect(_a) {
 var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
     _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
     _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
-    _marked4 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
+    _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
     _marked5 = /*#__PURE__*/regeneratorRuntime.mark(setLayerDimensionsSaga),
     _marked6 = /*#__PURE__*/regeneratorRuntime.mark(toggleAutoUpdateSaga),
     _marked7 = /*#__PURE__*/regeneratorRuntime.mark(handleBaseLayersSaga),
     _marked8 = /*#__PURE__*/regeneratorRuntime.mark(setMapPresetSaga),
     _marked9 = /*#__PURE__*/regeneratorRuntime.mark(checkMapPresetForChangesSaga),
-    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
+    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(unregisterMapSaga),
+    _marked11 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
 
 var generateTimeList = function generateTimeList(start, end, interval) {
   var timeList = [];
@@ -7519,8 +7620,8 @@ function startAnimationSaga(_ref) {
         case 0:
           payload = _ref.payload;
           mapId = payload.mapId, start = payload.start, end = payload.end, interval = payload.interval, timeList = payload.timeList;
-          roundedStart = roundWithTimeStep(start && moment.utc(start).unix(), interval, 'ceil');
-          roundedEnd = roundWithTimeStep(end && moment.utc(end).unix(), interval, 'floor');
+          roundedStart = roundWithTimeStep(Number(start && moment.utc(start).unix()), interval, 'ceil');
+          roundedEnd = roundWithTimeStep(Number(end && moment.utc(end).unix()), interval, 'floor');
           _context.next = 6;
           return timeList || generateTimeList(moment.utc(roundedStart * 1000), moment.utc(roundedEnd * 1000), interval);
 
@@ -7650,7 +7751,7 @@ function updateAnimation(mapId, maxValue) {
           return _context4.stop();
       }
     }
-  }, _marked4);
+  }, _marked4$1);
 }
 function setLayerDimensionsSaga(_ref4) {
   var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance;
@@ -8160,67 +8261,85 @@ function checkMapPresetForChangesSaga(action) {
     }
   }, _marked9);
 }
-function rootSaga$2() {
-  return regeneratorRuntime.wrap(function rootSaga$(_context10) {
+function unregisterMapSaga(_ref7) {
+  var payload, mapId, layerList;
+  return regeneratorRuntime.wrap(function unregisterMapSaga$(_context10) {
     while (1) {
       switch (_context10.prev = _context10.next) {
         case 0:
-          _context10.next = 2;
+          payload = _ref7.payload;
+          mapId = payload.mapId;
+          _context10.next = 4;
+          return select(getLayersByMapId, mapId);
+
+        case 4:
+          layerList = _context10.sent;
+          _context10.next = 7;
+          return all(layerList.map(function (layer) {
+            return put(layerActions.layerDelete({
+              mapId: mapId,
+              layerId: layer.id,
+              layerIndex: 0,
+              origin: LayerActionOrigin.unregisterMapSaga
+            }));
+          }));
+
+        case 7:
+        case "end":
+          return _context10.stop();
+      }
+    }
+  }, _marked10);
+}
+function rootSaga$2() {
+  return regeneratorRuntime.wrap(function rootSaga$(_context11) {
+    while (1) {
+      switch (_context11.prev = _context11.next) {
+        case 0:
+          _context11.next = 2;
           return all([takeLatest(mapActions$1.mapStopAnimation.type, stopAnimationSaga), takeLatest(mapActions$1.setActiveMapPresetId.type, stopAnimationSaga)]);
 
         case 2:
-          _context10.next = 4;
+          _context11.next = 4;
           return takeLatest(mapActions$1.mapStartAnimation.type, startAnimationSaga);
 
         case 4:
-          _context10.next = 6;
+          _context11.next = 6;
           return takeLatest(layerActions.layerDelete.type, deleteLayerSaga);
 
         case 6:
-          _context10.next = 8;
+          _context11.next = 8;
           return takeLatest(layerActions.onUpdateLayerInformation.type, setLayerDimensionsSaga);
 
         case 8:
-          _context10.next = 10;
+          _context11.next = 10;
           return takeLatest(mapActions$1.toggleAutoUpdate.type, toggleAutoUpdateSaga);
 
         case 10:
-          _context10.next = 12;
+          _context11.next = 12;
           return takeEvery(mapActions$1.setMapPreset.type, setMapPresetSaga);
 
         case 12:
-          _context10.next = 14;
+          _context11.next = 14;
           return all(mapPresetChangeActions.map(function (action) {
             return takeEvery(action, checkMapPresetForChangesSaga);
           }));
 
         case 14:
+          _context11.next = 16;
+          return takeEvery(mapActions$1.unregisterMap.type, unregisterMapSaga);
+
+        case 16:
         case "end":
-          return _context10.stop();
+          return _context11.stop();
       }
     }
-  }, _marked10);
+  }, _marked11);
 }
 
-/* *
- * 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 moduleConfig = {
   id: 'webmap-module',
-  reducerMap: {
+  reducersMap: {
     webmap: reducer$3,
     services: reducer$5,
     layers: reducer$6
@@ -8256,7 +8375,7 @@ var getUserAddedServices = function getUserAddedServices() {
             service = _ref2[1];
 
         return Object.assign(Object.assign({}, userServices), isNoIdService(service) ? _defineProperty({}, serviceUrl, Object.assign(Object.assign({}, service), {
-          isUserAddedService: true
+          scope: 'user'
         })) : {});
       }, {});
     }
@@ -8280,17 +8399,27 @@ var isNoIdService = function isNoIdService(param) {
 };
 
 var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
-    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectRemoveServiceSaga),
-    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
+    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectCloseInfoDialogSaga),
+    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectRemoveServiceSaga),
+    _marked4 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
 function newServiceAddedSaga(capturedAction) {
-  var addedService, id, serviceUrl, name, isUserAddedService, _abstract, keywords, groups;
+  var addedService, id, serviceUrl, name, scope, _abstract, isUpdating, keywords, groups;
 
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
           addedService = capturedAction.payload;
-          id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, isUserAddedService = addedService.isUserAddedService, _abstract = addedService["abstract"];
+          id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, scope = addedService.scope, _abstract = addedService["abstract"], isUpdating = addedService.isUpdating;
+
+          if (!isUpdating) {
+            _context.next = 4;
+            break;
+          }
+
+          return _context.abrupt("return");
+
+        case 4:
           keywords = addedService.layers.reduce(function (keywords, layer) {
             var _a;
 
@@ -8309,52 +8438,152 @@ function newServiceAddedSaga(capturedAction) {
 
             return groups;
           }, []);
-          _context.next = 6;
+          _context.next = 8;
           return put(layerSelectActions.addFiltersAndActiveServices({
             serviceId: id,
             serviceName: name,
             serviceUrl: serviceUrl,
             keywords: keywords,
-            isUserAddedService: isUserAddedService,
+            scope: scope,
             groups: groups,
             "abstract": _abstract
           }));
 
-        case 6:
+        case 8:
         case "end":
           return _context.stop();
       }
     }
   }, _marked$1);
 }
+function layerSelectCloseInfoDialogSaga(_ref) {
+  var type, payload, togglePayload, activeMapIdPayload, isLayerInfoDialogOpen, _isLayerInfoDialogOpen, filteredLayers, dialogInfo;
+
+  return regeneratorRuntime.wrap(function layerSelectCloseInfoDialogSaga$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          type = _ref.type, payload = _ref.payload;
+          _context2.t0 = type;
+          _context2.next = _context2.t0 === uiActions.setToggleOpenDialog.type ? 4 : _context2.t0 === uiActions.setActiveMapIdForDialog.type ? 9 : 18;
+          break;
+
+        case 4:
+          togglePayload = payload;
+
+          if (!(!togglePayload.setOpen && togglePayload.type === DialogTypes.LayerSelect)) {
+            _context2.next = 8;
+            break;
+          }
+
+          _context2.next = 8;
+          return put(uiActions.setToggleOpenDialog({
+            type: DialogTypes.LayerInfo,
+            setOpen: false
+          }));
+
+        case 8:
+          return _context2.abrupt("break", 31);
+
+        case 9:
+          activeMapIdPayload = payload;
+
+          if (activeMapIdPayload.setOpen) {
+            _context2.next = 17;
+            break;
+          }
+
+          _context2.next = 13;
+          return select(getisDialogOpen, DialogTypes.LayerInfo);
+
+        case 13:
+          isLayerInfoDialogOpen = _context2.sent;
+
+          if (!isLayerInfoDialogOpen) {
+            _context2.next = 17;
+            break;
+          }
+
+          _context2.next = 17;
+          return put(uiActions.setToggleOpenDialog({
+            type: DialogTypes.LayerInfo,
+            setOpen: false
+          }));
+
+        case 17:
+          return _context2.abrupt("break", 31);
+
+        case 18:
+          _context2.next = 20;
+          return select(getisDialogOpen, DialogTypes.LayerInfo);
+
+        case 20:
+          _isLayerInfoDialogOpen = _context2.sent;
+
+          if (!_isLayerInfoDialogOpen) {
+            _context2.next = 31;
+            break;
+          }
+
+          _context2.next = 24;
+          return select(getFilteredLayers);
+
+        case 24:
+          filteredLayers = _context2.sent;
+          _context2.next = 27;
+          return select(getActiveLayerInfo);
+
+        case 27:
+          dialogInfo = _context2.sent;
+
+          if (filteredLayers.map(function (layer) {
+            return layer.text;
+          }).includes(dialogInfo.text)) {
+            _context2.next = 31;
+            break;
+          }
+
+          _context2.next = 31;
+          return put(uiActions.setToggleOpenDialog({
+            type: DialogTypes.LayerInfo,
+            setOpen: false
+          }));
+
+        case 31:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _marked2$1);
+}
 function layerSelectRemoveServiceSaga(capturedAction) {
   var removedService, serviceId, serviceUrl, results, services, servicesEnabled;
-  return regeneratorRuntime.wrap(function layerSelectRemoveServiceSaga$(_context2) {
+  return regeneratorRuntime.wrap(function layerSelectRemoveServiceSaga$(_context3) {
     while (1) {
-      switch (_context2.prev = _context2.next) {
+      switch (_context3.prev = _context3.next) {
         case 0:
           removedService = capturedAction.payload;
           serviceId = removedService.serviceId, serviceUrl = removedService.serviceUrl;
-          _context2.next = 4;
+          _context3.next = 4;
           return select(getActiveServices);
 
         case 4:
-          results = _context2.sent;
+          results = _context3.sent;
           services = results;
           servicesEnabled = Object.values(services).find(function (service) {
             return service.enabled;
           });
 
           if (!(servicesEnabled === undefined)) {
-            _context2.next = 10;
+            _context3.next = 10;
             break;
           }
 
-          _context2.next = 10;
-          return all(Object.entries(services).map(function (_ref) {
-            var _ref2 = _slicedToArray(_ref, 2),
-                serviceId = _ref2[0],
-                service = _ref2[1];
+          _context3.next = 10;
+          return all(Object.entries(services).map(function (_ref2) {
+            var _ref3 = _slicedToArray(_ref2, 2),
+                serviceId = _ref3[0],
+                service = _ref3[1];
 
             return put(layerSelectActions.enableActiveService({
               serviceId: serviceId,
@@ -8363,7 +8592,7 @@ function layerSelectRemoveServiceSaga(capturedAction) {
           }));
 
         case 10:
-          _context2.next = 12;
+          _context3.next = 12;
           return put(serviceActions.mapStoreRemoveService({
             id: serviceId,
             serviceUrl: serviceUrl
@@ -8371,18 +8600,18 @@ function layerSelectRemoveServiceSaga(capturedAction) {
 
         case 12:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
     }
-  }, _marked2$1);
+  }, _marked3);
 }
-function addServiceToLocalStorageSaga(_ref3) {
-  var payload = _ref3.payload;
-  var isUserAddedService = payload.isUserAddedService,
+function addServiceToLocalStorageSaga(_ref4) {
+  var payload = _ref4.payload;
+  var scope = payload.scope,
       name = payload.name,
       serviceUrl = payload.serviceUrl,
       _abstract2 = payload["abstract"];
-  if (!isUserAddedService) return;
+  if (!isUserAddedService(scope)) return;
   var localStorageServices = getUserAddedServices();
   setUserAddedServices(Object.assign(Object.assign({}, localStorageServices), _defineProperty({}, serviceUrl, {
     name: name,
@@ -8390,8 +8619,8 @@ function addServiceToLocalStorageSaga(_ref3) {
     "abstract": _abstract2
   })));
 }
-function removeServiceFromLocalStorageSaga(_ref4) {
-  var payload = _ref4.payload;
+function removeServiceFromLocalStorageSaga(_ref5) {
+  var payload = _ref5.payload;
   var serviceUrl = payload.serviceUrl;
   var localStorageServices = getUserAddedServices();
   if (!localStorageServices[serviceUrl]) return;
@@ -8400,52 +8629,40 @@ function removeServiceFromLocalStorageSaga(_ref4) {
   setUserAddedServices(updatedServices);
 }
 function rootSaga$1() {
-  return regeneratorRuntime.wrap(function rootSaga$(_context3) {
+  return regeneratorRuntime.wrap(function rootSaga$(_context4) {
     while (1) {
-      switch (_context3.prev = _context3.next) {
+      switch (_context4.prev = _context4.next) {
         case 0:
-          _context3.next = 2;
+          _context4.next = 2;
           return takeEvery(serviceActions.serviceSetLayers.type, newServiceAddedSaga);
 
         case 2:
-          _context3.next = 4;
+          _context4.next = 4;
           return takeEvery(layerSelectActions.layerSelectRemoveService.type, layerSelectRemoveServiceSaga);
 
         case 4:
-          _context3.next = 6;
+          _context4.next = 6;
           return takeEvery(serviceActions.serviceSetLayers.type, addServiceToLocalStorageSaga);
 
         case 6:
-          _context3.next = 8;
+          _context4.next = 8;
           return takeEvery(serviceActions.mapStoreRemoveService.type, removeServiceFromLocalStorageSaga);
 
         case 8:
+          _context4.next = 10;
+          return takeEvery([uiActions.setToggleOpenDialog.type, uiActions.setActiveMapIdForDialog.type, layerSelectActions.disableActiveService.type, layerSelectActions.toggleFilter.type, layerSelectActions.setSearchFilter.type], layerSelectCloseInfoDialogSaga);
+
+        case 10:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
     }
-  }, _marked3);
+  }, _marked4);
 }
 
-/* *
- * 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 layerSelectConfig = {
   id: 'layerSelect-module',
-  reducerMap: {
+  reducersMap: {
     layerSelect: reducer$1
   },
   sagas: [rootSaga$1]
@@ -8546,7 +8763,7 @@ function rootSaga() {
  * */
 var snackbarModuleConfig = {
   id: 'snackbar-module',
-  reducerMap: {
+  reducersMap: {
     snackbar: reducer
   },
   sagas: [rootSaga]
@@ -8624,6 +8841,7 @@ var getLayersFromService = function getLayersFromService(serviceUrl) {
   return new Promise(function (resolve, reject) {
     var serviceObject = WMGetServiceFromStore(serviceUrl);
     serviceObject.getNodes(function (nodes) {
+      // TODO: Maarten Plieger, 2022-11-02:  Harmonize types and use correct types: https://gitlab.com/opengeoweb/opengeoweb/-/issues/2817
       var layerTree = recurseNodes(nodes);
       resolve(layerTree);
     }, function (error) {
@@ -9010,7 +9228,7 @@ var preset = {
 		},
 		{
 			name: "KNMIgeoservicesObs",
-			url: "https://geoservices.knmi.nl/adagucserver?dataset=OBS&service=WMS&",
+			url: "https://geoservices.knmi.nl/adagucserver?dataset=OBS",
 			id: "KNMIgeoservicesObs"
 		},
 		{
@@ -9463,14 +9681,14 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
   var currentActiveMapId = useSelector(function (store) {
-    return getDialogMapId(store, 'layerSelect');
+    return getDialogMapId(store, DialogTypes.LayerSelect);
   });
   var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'layerSelect');
+    return getisDialogOpen(store, DialogTypes.LayerSelect);
   });
   var openLayerSelectDialog = React.useCallback(function () {
     dispatch(uiActions.setActiveMapIdForDialog({
-      type: 'layerSelect',
+      type: DialogTypes.LayerSelect,
       mapId: mapId,
       setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
       source: source
@@ -9767,7 +9985,9 @@ var RenderLayers = function RenderLayers(_ref) {
     }, /*#__PURE__*/React.createElement(Typography, {
       variant: "body1",
       sx: {
-        fontSize: 'geowebColors.layerManager.tableRowDefaultText.fontSize',
+        fontSize: function fontSize(theme) {
+          return theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize;
+        },
         color: 'geowebColors.layerManager.tableRowDefaultText.rgba',
         fontWeight: 500
       }
@@ -10157,9 +10377,7 @@ var LayerRow = function LayerRow(_ref) {
       services = _ref.services,
       mapId = _ref.mapId,
       _ref$onLayerRowClick = _ref.onLayerRowClick,
-      onLayerRowClick = _ref$onLayerRowClick === void 0 ? function () {
-    return null;
-  } : _ref$onLayerRowClick,
+      onLayerRowClick = _ref$onLayerRowClick === void 0 ? function () {} : _ref$onLayerRowClick,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
       _ref$isLayerMissing = _ref.isLayerMissing,
@@ -10568,6 +10786,57 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var isLayerEnabled = useSelector(function (store) {
     return getLayerEnabled(store, layerId);
   });
+  var service = useSelector(function (store) {
+    return getServiceByName(store, layerService);
+  });
+  var serviceSetLayers = React.useCallback(function (payload) {
+    dispatch(serviceActions.serviceSetLayers(payload));
+  }, [dispatch]);
+
+  var addService = function addService(serviceUrl) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _layers, wmService;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return getLayersFlattenedFromService(serviceUrl);
+
+            case 3:
+              _layers = _context.sent;
+              wmService = WMGetServiceFromStore(serviceUrl);
+              serviceSetLayers({
+                id: wmService.id,
+                name: wmService.title,
+                serviceUrl: serviceUrl,
+                layers: _layers,
+                scope: 'user',
+                "abstract": wmService["abstract"]
+              });
+              _context.next = 11;
+              break;
+
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](0);
+              console.warn(_context.t0.message);
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 8]]);
+    }));
+  };
+
+  if (!service) {
+    addService(layerService);
+  }
+
   var layers = useSelector(function (store) {
     return getLayersFromService$1(store, layerService);
   });
@@ -11354,14 +11623,14 @@ var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
   var currentActiveMapId = useSelector(function (store) {
-    return getDialogMapId(store, 'keywordFilter');
+    return getDialogMapId(store, DialogTypes.KeywordFilter);
   });
   var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'keywordFilter');
+    return getisDialogOpen(store, DialogTypes.KeywordFilter);
   });
   var openFilterResultsDialog = React.useCallback(function () {
     dispatch(uiActions.setActiveMapIdForDialog({
-      type: 'keywordFilter',
+      type: DialogTypes.KeywordFilter,
       mapId: mapId,
       setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
       source: source
@@ -11498,6 +11767,37 @@ var validateServiceUrl = function validateServiceUrl(value, services) {
 
   return true;
 };
+var loadWMSService = function loadWMSService(serviceUrl) {
+  var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var layers, service;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return getLayersFlattenedFromService(serviceUrl, forceReload);
+
+          case 2:
+            layers = _context.sent;
+            service = WMGetServiceFromStore(serviceUrl);
+            return _context.abrupt("return", {
+              id: service.id,
+              name: service.title,
+              serviceUrl: serviceUrl,
+              "abstract": service["abstract"],
+              layers: layers,
+              scope: 'user'
+            });
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+};
 
 var style$1 = {
   textField: {
@@ -11631,8 +11931,7 @@ var ServicePopup = function ServicePopup(_ref2) {
 
   var addNewService = function addNewService(formValues) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var layers, serviceLayers, _iterator, _step, object, service;
-
+      var layersForService;
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
@@ -11641,55 +11940,26 @@ var ServicePopup = function ServicePopup(_ref2) {
               setIsLoading(true);
               _context2.prev = 2;
               _context2.next = 5;
-              return getLayersFromService(formValues.serviceUrl);
+              return loadWMSService(formValues.serviceUrl, true);
 
             case 5:
-              layers = _context2.sent;
-
-              if (layers.children) {
-                serviceLayers = [];
-                _iterator = _createForOfIteratorHelper(layers.children);
-
-                try {
-                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                    object = _step.value;
-                    serviceLayers.push({
-                      name: object.name,
-                      text: object.title,
-                      leaf: object.leaf,
-                      path: object.path,
-                      keywords: object.keywords ? object.keywords : [],
-                      "abstract": object["abstract"] ? object["abstract"] : '',
-                      styles: object.styles ? object.styles : [],
-                      dimensions: object.dimensions || [],
-                      geographicBoundingBox: object.geographicBoundingBox || null
-                    });
-                  }
-                } catch (err) {
-                  _iterator.e(err);
-                } finally {
-                  _iterator.f();
-                }
-
-                service = WMGetServiceFromStore(formValues.serviceUrl);
-                serviceSetLayers({
-                  id: service.id,
-                  name: formValues.serviceName,
-                  serviceUrl: formValues.serviceUrl,
-                  "abstract": formValues.serviceAbstracts,
-                  layers: serviceLayers,
-                  isUserAddedService: true
-                });
-                setIsLoading(false);
-                showSnackbar(getSuccesMessage(formValues.serviceName));
-                closePopup();
-              }
-
-              _context2.next = 13;
+              layersForService = _context2.sent;
+              serviceSetLayers({
+                id: layersForService.id,
+                name: formValues.serviceName,
+                serviceUrl: formValues.serviceUrl,
+                "abstract": formValues.serviceAbstracts,
+                layers: layersForService.layers,
+                scope: 'user'
+              });
+              setIsLoading(false);
+              showSnackbar(getSuccesMessage(formValues.serviceName));
+              closePopup();
+              _context2.next = 16;
               break;
 
-            case 9:
-              _context2.prev = 9;
+            case 12:
+              _context2.prev = 12;
               _context2.t0 = _context2["catch"](2);
               setIsLoading(false);
               setError(fields.serviceUrl.name, {
@@ -11697,12 +11967,12 @@ var ServicePopup = function ServicePopup(_ref2) {
                 type: 'SYSTEM'
               });
 
-            case 13:
+            case 16:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[2, 9]]);
+      }, _callee2, null, [[2, 12]]);
     }));
   };
 
@@ -11831,8 +12101,8 @@ var ServicePopup = function ServicePopup(_ref2) {
       })
     },
     disabled: isServiceUrlDisabled || isLoading,
+    isReadOnly: isShowPopup,
     InputProps: {
-      readOnly: isShowPopup,
       disableUnderline: isShowPopup,
       endAdornment: isShowPopup && /*#__PURE__*/React.createElement(InputAdornment, {
         position: "end"
@@ -11855,8 +12125,8 @@ var ServicePopup = function ServicePopup(_ref2) {
       }
     },
     disabled: isShowPopup || isLoading,
+    isReadOnly: isShowPopup,
     InputProps: {
-      readOnly: isShowPopup,
       disableUnderline: isShowPopup
     },
     sx: style$1.textField,
@@ -11867,12 +12137,11 @@ var ServicePopup = function ServicePopup(_ref2) {
     name: fields.serviceAbstracts.name,
     label: fields.serviceAbstracts.label,
     disabled: isShowPopup || isLoading,
-    rules: {},
+    isReadOnly: isShowPopup,
     InputProps: {
-      readOnly: isShowPopup,
       disableUnderline: isShowPopup
     },
-    helperText: !isShowPopup && 'Short description of what this service does',
+    helperText: !isShowPopup ? 'Short description of what this service does' : '',
     sx: style$1.textField,
     defaultValue: ""
   }), !isServiceUrlDisabled && /*#__PURE__*/React.createElement(InitialValidationsTrigger, {
@@ -12101,74 +12370,19 @@ var SearchFieldConnect = function SearchFieldConnect() {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var filterLayersFromService = function filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString) {
-  var mapStoreService = services[serviceId];
-  if (!mapStoreService) return [];
-
-  if (searchString === '' && allFiltersActive) {
-    return mapStoreService.layers.filter(function (layer) {
-      return layer.leaf;
-    });
-  }
-
-  var searchStringArray = searchString.split(' ');
-  return mapStoreService.layers.filter(function (layer) {
-    return searchStringArray.every(function (search) {
-      var _a, _b, _c;
 
-      var searchLowercase = search.toLowerCase();
-      var layerFilterIds = layer.path.map(function (group) {
-        return "group-".concat(group);
-      }).concat(layer.keywords.map(function (keyword) {
-        return "keyword-".concat(keyword);
-      }));
-      var isFilterInLayer = (layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (id) {
-        return filterIds.includes(id);
-      })) || allFiltersActive;
-      var isSearchTextInLayerFilter = layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (filterId) {
-        return filterId.toLowerCase().includes(searchLowercase);
-      });
-      var isSearchTextInLayerName = (_a = layer.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLowercase);
-      var isSearchTextInLayerText = (_b = layer.text) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
-      var isSearchTextInLayerAbstract = (_c = layer["abstract"]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLowercase);
-      var isSearchTextInServiceName = mapStoreService.name.toLowerCase().includes(searchLowercase);
-      var isSearchTextInLayer = isSearchTextInLayerName || isSearchTextInLayerText || isSearchTextInLayerAbstract || isSearchTextInLayerFilter || isSearchTextInServiceName;
-      return isFilterInLayer && isSearchTextInLayer;
-    });
-  }).filter(function (layer) {
-    return layer.leaf;
-  });
-};
-
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-
-var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
-  var layer = _ref.layer,
-      layerIndex = _ref.layerIndex,
-      serviceUrl = _ref.serviceUrl,
-      addLayer = _ref.addLayer,
-      deleteLayer = _ref.deleteLayer,
-      mapLayers = _ref.mapLayers;
-  var foundLayer = mapLayers.find(function (lr) {
-    return lr.name === layer.name && lr.service === serviceUrl;
+var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
+  var layer = _ref.layer,
+      layerIndex = _ref.layerIndex,
+      serviceUrl = _ref.serviceUrl,
+      addLayer = _ref.addLayer,
+      deleteLayer = _ref.deleteLayer,
+      mapLayers = _ref.mapLayers;
+  var foundLayer = mapLayers.find(function (lr) {
+    return lr.name === layer.name && lr.service === serviceUrl;
   });
   return /*#__PURE__*/React.createElement(CustomToggleButton, {
     "data-testid": "layerAddRemoveButton-".concat(layer.name),
@@ -12280,11 +12494,11 @@ var LayerInfoButtonConnect = function LayerInfoButtonConnect(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var textStyle$1 = {
+var textStyle = {
   lineHeight: '20px',
   letterSpacing: '0.25px'
 };
-var textStyleWithMargin = Object.assign(Object.assign({}, textStyle$1), {
+var textStyleWithMargin = Object.assign(Object.assign({}, textStyle), {
   marginBottom: 1
 });
 
@@ -12293,7 +12507,7 @@ var LayerInfoText = function LayerInfoText(_ref) {
       value = _ref.value;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "subtitle2",
-    sx: textStyle$1
+    sx: textStyle
   }, label), /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "body2",
     sx: textStyleWithMargin
@@ -12316,10 +12530,6 @@ var LayerInfoText = function LayerInfoText(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var textStyle = {
-  lineHeight: '20px',
-  letterSpacing: '0.25px'
-};
 var valueStyle = Object.assign(Object.assign({}, textStyle), {
   overflowWrap: 'break-word'
 });
@@ -12330,12 +12540,15 @@ var LayerInfoList = function LayerInfoList(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "subtitle2",
     sx: textStyle
-  }, label), /*#__PURE__*/React__default.createElement(Grid$1, {
+  }, label), list.length === 0 ? /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "body2",
+    sx: textStyleWithMargin
+  }, "-") : /*#__PURE__*/React__default.createElement(Grid$1, {
     container: true,
     direction: "column"
   }, list.map(function (item) {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: item.name
+      key: item.label
     }, /*#__PURE__*/React__default.createElement(Grid$1, {
       item: true,
       container: true,
@@ -12348,7 +12561,7 @@ var LayerInfoList = function LayerInfoList(_ref) {
     }, /*#__PURE__*/React__default.createElement(Typography$1, {
       variant: "body2",
       sx: textStyle
-    }, item.name, ":"))), /*#__PURE__*/React__default.createElement(Grid$1, {
+    }, item.label, ":"))), /*#__PURE__*/React__default.createElement(Grid$1, {
       item: true,
       container: true,
       direction: "row",
@@ -12363,6 +12576,41 @@ var LayerInfoList = function LayerInfoList(_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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var LayerInfoLegend = function LayerInfoLegend(_ref) {
+  var title = _ref.title,
+      name = _ref.name,
+      dimensions = _ref.dimensions,
+      legendURL = _ref.legendURL;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "subtitle2",
+    sx: textStyleWithMargin
+  }, "Legend"), /*#__PURE__*/React__default.createElement(LegendLayout, {
+    title: title,
+    name: name,
+    dimensions: dimensions
+  }, legendURL ? /*#__PURE__*/React__default.createElement("img", {
+    alt: title,
+    src: legendURL
+  }) : '-'));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -12394,20 +12642,19 @@ var getLayerStyles = function getLayerStyles(layer) {
 
   return styles.join(', ');
 };
-var getDimensionValue = function getDimensionValue(name, layer, breakAt) {
-  var includeUnit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-
-  var _a;
-
-  var dimension = (_a = layer.dimensions) === null || _a === void 0 ? void 0 : _a.find(function (dimension) {
-    return dimension.name.toLowerCase() === name;
+var getDimensionValue = function getDimensionValue(name, dimensions) {
+  var dimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
+    return dimension.name.toLowerCase() === name.toLowerCase();
   });
 
-  if (!dimension) {
-    return '-';
+  if (!dimension || !dimension.currentValue) {
+    return null;
   }
 
-  var dimValue = dimension === null || dimension === void 0 ? void 0 : dimension.currentValue.split(breakAt).join("".concat(breakAt, " "));
+  var dimName = dimension.name.toLowerCase();
+  var breakAt = dimName === 'time' ? '/' : ',';
+  var includeUnit = dimName !== 'time' && dimName !== 'reference_time';
+  var dimValue = dimension.currentValue.split(breakAt).join("".concat(breakAt, " "));
 
   if (includeUnit) {
     return "".concat(dimValue, " ").concat(dimension.units);
@@ -12418,6 +12665,64 @@ var getDimensionValue = function getDimensionValue(name, layer, breakAt) {
 var getLayerBbox = function getLayerBbox(layer) {
   return layer.geographicBoundingBox ? "west ".concat(layer.geographicBoundingBox.west, ", east ").concat(layer.geographicBoundingBox.east, ", north ").concat(layer.geographicBoundingBox.north, ", south ").concat(layer.geographicBoundingBox.south) : '-';
 };
+var getDimensionIcon$1 = function getDimensionIcon(name, dimensions) {
+  var dimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
+    return dimension.name.toLowerCase() === name.toLowerCase();
+  });
+
+  if (!dimension) {
+    return null;
+  }
+
+  switch (dimension.name.toLowerCase()) {
+    case 'time':
+      return /*#__PURE__*/React__default.createElement(DimensionsTime, null);
+
+    case 'reference_time':
+      return /*#__PURE__*/React__default.createElement(DimensionsRefTime, null);
+
+    case 'elevation':
+      return /*#__PURE__*/React__default.createElement(DimensionsElevation, null);
+
+    default:
+      return /*#__PURE__*/React__default.createElement(DimensionsOther, null);
+  }
+};
+var getDimensionLabel = function getDimensionLabel(name) {
+  var dimName = name.toLowerCase().split('_').join(' ');
+  return dimName.charAt(0).toUpperCase() + dimName.slice(1);
+};
+var getDimensionsList = function getDimensionsList(dimensions) {
+  var result = [];
+  dimensions === null || dimensions === void 0 ? void 0 : dimensions.forEach(function (_ref) {
+    var name = _ref.name;
+    var value = getDimensionValue(name, dimensions);
+
+    if (!value) {
+      return;
+    }
+
+    var icon = getDimensionIcon$1(name, dimensions);
+    var label = getDimensionLabel(name);
+    result.push({
+      label: label,
+      value: value,
+      icon: icon
+    });
+  }); // sort alphabetically so other dimensions are sorted
+
+  result.sort(function (a, b) {
+    return a.label.localeCompare(b.label);
+  }); // sort by fixed order
+
+  var preferredOrder = ['Time', 'Reference time', 'Elevation']; // using reverse ordering to make sure the other dimensions come last
+
+  preferredOrder.reverse();
+  result.sort(function (a, b) {
+    return preferredOrder.indexOf(b.label) - preferredOrder.indexOf(a.label);
+  });
+  return result;
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -12448,13 +12753,11 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
       source = _ref$source === void 0 ? 'app' : _ref$source,
       dialogHeight = _ref.dialogHeight;
 
-  var _a;
+  var _a, _b;
 
   var styles = getLayerStyles(layer);
   var bbox = getLayerBbox(layer);
-  var timeValue = getDimensionValue('time', layer, '/');
-  var refTimeValue = getDimensionValue('reference_time', layer, ',');
-  var elevationValue = getDimensionValue('elevation', layer, ',', true);
+  var dimensions = getDimensionsList(layer.dimensions);
   return /*#__PURE__*/React__default.createElement(ToolContainerDraggable, {
     onClose: onClose,
     headerSize: "xs",
@@ -12489,23 +12792,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
     value: layer["abstract"] || '-'
   }), /*#__PURE__*/React__default.createElement(LayerInfoList, {
     label: "Dimensions",
-    list: [{
-      name: 'Time',
-      value: timeValue,
-      icon: /*#__PURE__*/React__default.createElement(DimensionsTime, null)
-    }, {
-      name: 'Reference Time',
-      value: refTimeValue,
-      icon: /*#__PURE__*/React__default.createElement(DimensionsRefTime, null)
-    }, {
-      name: 'Elevation',
-      value: elevationValue,
-      icon: /*#__PURE__*/React__default.createElement(DimensionsElevation, null)
-    }, {
-      name: 'Other dimensions',
-      value: '-',
-      icon: /*#__PURE__*/React__default.createElement(DimensionsOther, null)
-    }]
+    list: dimensions
   }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
     label: "Styles",
     value: styles
@@ -12518,9 +12805,152 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
   }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
     label: "Keywords",
     value: ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.join(', ')) || '-'
+  }), /*#__PURE__*/React__default.createElement(LayerInfoLegend, {
+    title: layer.text,
+    name: layer.name,
+    dimensions: layer.dimensions,
+    legendURL: ((_b = layer.styles) === null || _b === void 0 ? void 0 : _b.length) ? layer.styles[0].legendURL : undefined
   })));
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var LayerListDimensions = function LayerListDimensions(_ref) {
+  var dimensions = _ref.dimensions;
+
+  if (!dimensions || !dimensions.length) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dimensions.map(function (dimension) {
+    return /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      key: dimension.label,
+      title: "".concat(dimension.label, ": ").concat(dimension.value)
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        marginRight: 4
+      }
+    }, dimension.icon));
+  }));
+};
+
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var buttonLarge = 80;
+var buttonSmall = 60;
+var layerSelectColumnsLarge = {
+  column1: {
+    width: 112
+  },
+  column2: {
+    marginTop: '6px',
+    width: "calc(100% - 112px)",
+    height: '36px',
+    paddingLeft: '20px'
+  },
+  column3: {
+    height: '12px'
+  },
+  column4: {
+    height: '24px'
+  },
+  column5: {
+    height: '24px',
+    width: 140
+  },
+  column6: {
+    height: '24px',
+    width: "calc(100% - 140px)"
+  },
+  column7: {
+    height: '48px',
+    width: buttonLarge,
+    marginRight: 1,
+    marginLeft: 2
+  },
+  column8: {
+    width: "calc(100% - ".concat(buttonLarge, "px - 24px)")
+  },
+  column9: {
+    width: "calc(".concat(buttonLarge, "px + 24px)")
+  }
+};
+var layerSelectColumnsSmall = {
+  column1: {
+    width: '100%'
+  },
+  column2: {
+    marginTop: '4px',
+    width: "calc(100% - 20px)"
+  },
+  column3: {
+    height: '12px'
+  },
+  column4: {
+    height: '48px'
+  },
+  column5: {
+    height: '24px',
+    width: '100%'
+  },
+  column6: {
+    height: '24px',
+    width: '100%'
+  },
+  column7: {
+    height: '48px',
+    width: buttonSmall,
+    marginRight: 0,
+    marginLeft: 1
+  },
+  column8: {
+    width: "calc(100% - ".concat(buttonSmall, "px - 8px)")
+  },
+  column9: {
+    width: "calc(".concat(buttonSmall, "px + 8px)")
+  }
+};
+var breakpoint = 500;
+var widthToColumns = function widthToColumns(width) {
+  if (width <= breakpoint) return layerSelectColumnsSmall;
+  return layerSelectColumnsLarge;
+};
+var rowHeightLarge = 68;
+var rowHeightSmall = 136;
+var widthToRowHeight = function widthToRowHeight(width) {
+  if (width <= breakpoint) return rowHeightSmall;
+  return rowHeightLarge;
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -12541,7 +12971,8 @@ var layerInfoStyle = {
   fontSize: '10px',
   textOverflow: 'ellipsis',
   overflow: 'hidden',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  lineHeight: 1
 };
 
 var LayerListRow = function LayerListRow(_ref) {
@@ -12551,31 +12982,32 @@ var LayerListRow = function LayerListRow(_ref) {
       addLayer = _ref.addLayer,
       deleteLayer = _ref.deleteLayer,
       mapLayers = _ref.mapLayers,
-      mapId = _ref.mapId;
+      mapId = _ref.mapId,
+      layerSelectWidth = _ref.layerSelectWidth;
 
-  var _a, _b, _c;
+  var _a;
 
+  var rowHeight = widthToRowHeight(layerSelectWidth);
+  var columns = widthToColumns(layerSelectWidth);
+  var dimensions = getDimensionsList(layer.dimensions);
   return /*#__PURE__*/React__default.createElement(Grid, {
     "data-testid": "layerListLayerRow",
     container: true,
-    item: true,
-    xs: 12,
     justifyContent: "center",
     alignItems: "center",
     sx: {
       backgroundColor: 'geowebColors.cards.cardContainer',
       padding: '8px',
       marginBottom: '4px',
-      height: '68px',
+      height: rowHeight,
       border: 'solid 1px',
       borderColor: 'geowebColors.cards.cardContainerBorder'
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
-    xs: 10
+    sx: columns.column8
   }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
     item: true,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -12584,25 +13016,19 @@ var LayerListRow = function LayerListRow(_ref) {
       height: '14px',
       lineHeight: '14px',
       fontWeight: 500,
-      WebkitLineClamp: 1,
-      display: '-webkit-box',
-      WebkitBoxOrient: 'vertical',
       textOverflow: 'ellipsis',
       overflow: 'hidden'
     }
   }, layer.text)), /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
     item: true,
-    xs: 4,
-    direction: "column"
+    container: true,
+    direction: "column",
+    sx: columns.column1
   }, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       fontSize: '12px',
       height: '18px',
       lineHeight: '18px',
-      WebkitLineClamp: 1,
-      display: '-webkit-box',
-      WebkitBoxOrient: 'vertical',
       textOverflow: 'ellipsis',
       overflow: 'hidden'
     }
@@ -12610,44 +13036,41 @@ var LayerListRow = function LayerListRow(_ref) {
     layer: layer,
     mapId: mapId,
     serviceName: service.name
-  })), layer["abstract"] || ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.length) || layer.path.length ? /*#__PURE__*/React__default.createElement(Grid, {
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sx: columns.column2
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sx: columns.column3
+  }, layer["abstract"] && /*#__PURE__*/React__default.createElement(Typography, {
     "data-testid": "layerAbstract",
+    sx: layerInfoStyle
+  }, layer["abstract"])), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
     container: true,
+    sx: columns.column4
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 8,
-    sx: {
-      height: '45px',
-      paddingLeft: '20px',
-      WebkitLineClamp: 2,
-      display: '-webkit-box',
-      WebkitBoxOrient: 'vertical'
-    }
-  }, layer["abstract"] && /*#__PURE__*/React__default.createElement(Typography, {
-    sx: Object.assign(Object.assign({}, layerInfoStyle), {
-      height: 15
-    })
-  }, layer["abstract"]), layer.path.length > 0 && /*#__PURE__*/React__default.createElement(Typography, {
-    sx: Object.assign(Object.assign({}, layerInfoStyle), {
-      height: ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.length) ? 15 : 30
-    })
-  }, "Groups: ", layer.path.join(' / ')), ((_c = layer.keywords) === null || _c === void 0 ? void 0 : _c.length) > 0 && /*#__PURE__*/React__default.createElement(Typography, {
-    sx: Object.assign(Object.assign({}, layerInfoStyle), {
-      height: layer.path.length ? 15 : 30
-    })
+    sx: columns.column5
+  }, /*#__PURE__*/React__default.createElement(LayerListDimensions, {
+    dimensions: dimensions
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    sx: columns.column6
+  }, layer.path.length > 0 && /*#__PURE__*/React__default.createElement(Typography, {
+    sx: layerInfoStyle
+  }, "Groups: ", layer.path.join(' / ')), ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.length) > 0 && /*#__PURE__*/React__default.createElement(Typography, {
+    sx: layerInfoStyle
   }, "Keywords:", ' ', layer.keywords.slice().sort(function (a, b) {
     return a.localeCompare(b);
-  }).join(', '))) : null), /*#__PURE__*/React__default.createElement(Grid, {
+  }).join(', ')))))), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
-    xs: 2,
+    sx: columns.column9,
     justifyContent: "flex-end",
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      width: '80px',
-      height: '48px',
-      marginRight: '8px'
-    }
+    sx: columns.column7
   }, /*#__PURE__*/React__default.createElement(LayerAddRemoveButton, {
     layer: layer,
     layerIndex: layerIndex,
@@ -12658,42 +13081,36 @@ var LayerListRow = function LayerListRow(_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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
 var LayerList = function LayerList(_ref) {
   var services = _ref.services,
-      serviceIds = _ref.serviceIds,
+      filteredLayers = _ref.filteredLayers,
       layerSelectHeight = _ref.layerSelectHeight,
       serviceListHeight = _ref.serviceListHeight,
+      layerSelectWidth = _ref.layerSelectWidth,
       addLayer = _ref.addLayer,
       deleteLayer = _ref.deleteLayer,
-      searchString = _ref.searchString,
       mapLayers = _ref.mapLayers,
-      filterIds = _ref.filterIds,
-      allFiltersActive = _ref.allFiltersActive,
       mapId = _ref.mapId;
+  var rowMargin = 4;
+  var rowHeight = widthToRowHeight(layerSelectWidth);
   var layerSelectFilterHeight = 155 + serviceListHeight;
-
-  var _React$useState = React.useState(0),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      numberOfLayers = _React$useState2[0],
-      setNumberOfLayers = _React$useState2[1];
-
-  var _React$useState3 = React.useState([]),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      layersFilteredFromService = _React$useState4[0],
-      setLayersFilteredFromService = _React$useState4[1];
-
-  React.useEffect(function () {
-    setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
-      return totalNumberOfLayers + filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString).length;
-    }, 0));
-    setLayersFilteredFromService(serviceIds.reduce(function (layerList, serviceId) {
-      return layerList.concat(filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString).map(function (layer) {
-        return Object.assign(Object.assign({}, layer), {
-          serviceId: serviceId
-        });
-      }));
-    }, []));
-  }, [serviceIds, filterIds, services, searchString, allFiltersActive]);
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -12701,24 +13118,27 @@ var LayerList = function LayerList(_ref) {
       marginBottom: '4px',
       fontSize: '12px'
     }
-  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(FixedSizeList, {
+  }, filteredLayers.length, " results"), /*#__PURE__*/React.createElement(FixedSizeList, {
     height: layerSelectHeight - layerSelectFilterHeight,
-    itemCount: numberOfLayers,
-    itemSize: 72
+    itemCount: filteredLayers.length,
+    itemSize: rowHeight + rowMargin
   }, function (_ref2) {
     var index = _ref2.index,
         style = _ref2.style;
+    var filter = filteredLayers[index];
+    var service = services[filter.serviceName];
     return /*#__PURE__*/React.createElement("div", {
       style: style,
-      key: layersFilteredFromService[index].name
-    }, services[layersFilteredFromService[index].serviceId] && /*#__PURE__*/React.createElement(LayerListRow, {
-      layer: layersFilteredFromService[index],
+      key: filter.name
+    }, service && /*#__PURE__*/React.createElement(LayerListRow, {
+      layer: filter,
       layerIndex: index,
-      service: services[layersFilteredFromService[index].serviceId],
+      service: service,
       addLayer: addLayer,
       deleteLayer: deleteLayer,
       mapLayers: mapLayers,
-      mapId: mapId
+      mapId: mapId,
+      layerSelectWidth: layerSelectWidth
     }));
   }));
 };
@@ -12743,14 +13163,12 @@ var LayerList = function LayerList(_ref) {
 var LayerListConnect = function LayerListConnect(_ref) {
   var mapId = _ref.mapId,
       layerSelectHeight = _ref.layerSelectHeight,
-      serviceListHeight = _ref.serviceListHeight;
+      serviceListHeight = _ref.serviceListHeight,
+      layerSelectWidth = _ref.layerSelectWidth;
+  var dispatch = useDispatch();
   var services = useSelector(function (store) {
     return getServices(store);
   });
-  var dispatch = useDispatch();
-  var enabledServiceIds = useSelector(function (store) {
-    return getEnabledServiceIds(store);
-  });
   var mapLayers = useSelector(function (store) {
     return getMapLayers(store, mapId);
   });
@@ -12765,7 +13183,6 @@ var LayerListConnect = function LayerListConnect(_ref) {
       layerType: LayerType$1.mapLayer
     };
     addMapLayer({
-      mapId: mapId,
       layerId: layer.id,
       layer: layer,
       origin: LayerActionOrigin.layerManager
@@ -12793,25 +13210,17 @@ var LayerListConnect = function LayerListConnect(_ref) {
       origin: LayerActionOrigin.layerManager
     }));
   }, [dispatch, mapId]);
-  var checkedFilterIds = useSelector(function (store) {
-    return getCheckedFilterIds(store);
-  });
-  var allFiltersActive = useSelector(function (store) {
-    return isAllFiltersChecked(store);
-  });
-  var searchString = useSelector(function (store) {
-    return getSearchFilter(store);
+  var filteredLayers = useSelector(function (store) {
+    return getFilteredLayers(store);
   });
   return /*#__PURE__*/React.createElement(LayerList, {
+    filteredLayers: filteredLayers,
     services: services,
-    serviceIds: enabledServiceIds,
     layerSelectHeight: layerSelectHeight,
     serviceListHeight: serviceListHeight,
+    layerSelectWidth: layerSelectWidth,
     addLayer: addLayer,
     deleteLayer: deleteLayer,
-    filterIds: checkedFilterIds,
-    allFiltersActive: allFiltersActive,
-    searchString: searchString,
     mapLayers: mapLayers,
     mapId: mapId
   });
@@ -12835,13 +13244,13 @@ var LayerListConnect = function LayerListConnect(_ref) {
  * */
 var style = {
   borderRadius: '20px!important',
-  marginRight: '8px',
+  marginRight: '4px',
   whiteSpace: 'nowrap',
-  height: '32px!important',
+  height: '24px!important',
   padding: '5px 12px!important',
   textTransform: 'none!important',
   fontWeight: 'normal',
-  marginBottom: '5px'
+  marginBottom: '4px'
 };
 
 var ServiceChip = function ServiceChip(_ref) {
@@ -12851,6 +13260,7 @@ var ServiceChip = function ServiceChip(_ref) {
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
       toggleChip = _ref.toggleChip;
+  var chip = all ? 'all' : service && service.serviceUrl;
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: ".concat(service["abstract"]) : ''
   }, /*#__PURE__*/React.createElement(CustomToggleButton, {
@@ -12859,10 +13269,10 @@ var ServiceChip = function ServiceChip(_ref) {
     tabIndex: 0,
     "data-testid": all ? 'serviceChipAll' : 'serviceChip',
     onClick: function onClick() {
-      return toggleChip(all ? 'all' : service && service.serviceUrl);
+      return toggleChip(chip);
     },
     onKeyPress: function onKeyPress() {
-      return toggleChip(all ? 'all' : service && service.serviceUrl);
+      return toggleChip(chip);
     },
     disabled: isDisabled,
     sx: style
@@ -12996,9 +13406,9 @@ var ServiceList = function ServiceList(_ref) {
       display: 'block',
       alignItems: 'center',
       "float": 'left',
-      paddingLeft: '40px',
-      paddingRight: '30px',
-      marginBottom: '5px',
+      paddingLeft: '48px',
+      paddingRight: '40px',
+      marginBottom: '8px',
       fontSize: '0.875rem'
     },
     ref: ref
@@ -13068,7 +13478,7 @@ var ServiceListConnect = function ServiceListConnect(_ref7) {
  * */
 var styles$1 = {
   servicesContainer: {
-    width: '300px',
+    width: '360px',
     maxHeight: '380px',
     top: '140px',
     backgroundColor: 'geowebColors.background.surface',
@@ -13083,6 +13493,10 @@ var styles$1 = {
     backgroundColor: 'geowebColors.background.surface',
     zIndex: 100
   },
+  loading: {
+    position: 'absolute',
+    zIndex: 101
+  },
   footer: {
     display: 'flex',
     justifyContent: 'center',
@@ -13103,8 +13517,11 @@ var styles$1 = {
 var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   var services = _ref.services,
       layerSelectRemoveService = _ref.layerSelectRemoveService,
+      layerSelectReloadService = _ref.layerSelectReloadService,
       selectedLayers = _ref.selectedLayers,
-      setServicePopupInfo = _ref.setServicePopupInfo;
+      setServicePopupInfo = _ref.setServicePopupInfo,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
 
   var openAddService = function openAddService() {
     setServicePopupInfo({
@@ -13118,9 +13535,13 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     "data-testid": "ServiceDialog"
   }, /*#__PURE__*/React.createElement(Box, {
     sx: styles$1.header
-  }, "Services"), /*#__PURE__*/React.createElement(Rows, {
+  }, "Services"), /*#__PURE__*/React.createElement(Backdrop, {
+    sx: styles$1.loading,
+    open: isLoading
+  }, /*#__PURE__*/React.createElement(CircularProgress, null)), /*#__PURE__*/React.createElement(Rows, {
     services: services,
     layerSelectRemoveService: layerSelectRemoveService,
+    layerSelectReloadService: layerSelectReloadService,
     setServicePopupInfo: setServicePopupInfo,
     selectedLayers: selectedLayers
   }), /*#__PURE__*/React.createElement(Box, {
@@ -13136,6 +13557,7 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
 
 var Rows = function Rows(_ref2) {
   var services = _ref2.services,
+      layerSelectReloadService = _ref2.layerSelectReloadService,
       layerSelectRemoveService = _ref2.layerSelectRemoveService,
       setServicePopupInfo = _ref2.setServicePopupInfo,
       selectedLayers = _ref2.selectedLayers;
@@ -13154,8 +13576,9 @@ var Rows = function Rows(_ref2) {
     var _services$serviceId = services[serviceId],
         serviceUrl = _services$serviceId.serviceUrl,
         serviceName = _services$serviceId.serviceName,
-        isUserAddedService = _services$serviceId.isUserAddedService;
+        scope = _services$serviceId.scope;
     var serviceHasActiveLayers = checkIfServiceHasActiveLayers(serviceUrl);
+    var userAddedService = isUserAddedService(scope);
     return /*#__PURE__*/React.createElement(ListItem, {
       key: serviceUrl
     }, /*#__PURE__*/React.createElement(ListItemText, {
@@ -13166,19 +13589,32 @@ var Rows = function Rows(_ref2) {
       noWrap: true,
       style: {
         textOverflow: 'ellipsis',
-        paddingRight: '60px'
+        paddingRight: '70px'
       }
     }, serviceName)), /*#__PURE__*/React.createElement(ListItemSecondaryAction, {
       style: {
-        marginRight: '-10px',
-        width: 90
+        marginRight: '0px',
+        width: 100
       }
     }, /*#__PURE__*/React.createElement(Grid, {
       container: true
     }, /*#__PURE__*/React.createElement(Grid, {
       item: true,
-      xs: 6
-    }, isUserAddedService ? /*#__PURE__*/React.createElement(Tooltip, {
+      xs: 4
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Update layers from WMS service",
+      "data-testid": "updateServiceTooltip"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      "data-testid": "updateServiceButton",
+      "aria-label": "Update layers from WMS service",
+      size: "large",
+      onClick: function onClick() {
+        return layerSelectReloadService(serviceUrl);
+      }
+    }, /*#__PURE__*/React.createElement(Cached, null)))), /*#__PURE__*/React.createElement(Grid, {
+      item: true,
+      xs: 4
+    }, userAddedService ? /*#__PURE__*/React.createElement(Tooltip, {
       title: "Edit Service"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": "edit service",
@@ -13208,8 +13644,8 @@ var Rows = function Rows(_ref2) {
       }
     }, /*#__PURE__*/React.createElement(Visibility, null))))), /*#__PURE__*/React.createElement(Grid, {
       item: true,
-      xs: 6
-    }, isUserAddedService && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Tooltip, {
+      xs: 4
+    }, userAddedService && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Tooltip, {
       title: serviceHasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service',
       "data-testid": "removeServiceTooltip"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
@@ -13224,26 +13660,31 @@ var Rows = function Rows(_ref2) {
   }));
 };
 
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
+var getService = function getService(services, serviceUrl) {
+  var serviceIds = Object.keys(services);
+  var serviceIndex = serviceIds.findIndex(function (serviceId) {
+    return services[serviceId].serviceUrl === serviceUrl;
+  });
+  if (serviceIndex < 0) return null;
+  return services[serviceIds[serviceIndex]];
+};
+
+var getServiceSuccesUpdateMessage = function getServiceSuccesUpdateMessage(serviceName) {
+  return "Service \"".concat(serviceName, "\" has been succesfully updated");
+};
+var getServiceFailedUpdateMessage = function getServiceFailedUpdateMessage(error) {
+  return "Unable to update service, reason: \"".concat(error.message, "\"");
+};
 
 var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
   var mapId = _ref.mapId,
       setServicePopupInfo = _ref.setServicePopupInfo;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isLoading = _React$useState2[0],
+      setIsLoading = _React$useState2[1];
+
   var dispatch = useDispatch();
   var layerSelectRemoveService = React.useCallback(function (serviceId, serviceUrl) {
     dispatch(layerSelectActions.layerSelectRemoveService({
@@ -13251,17 +13692,79 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
       serviceUrl: serviceUrl
     }));
   }, [dispatch]);
+  var serviceSetLayers = React.useCallback(function (payload) {
+    dispatch(serviceActions.serviceSetLayers(Object.assign(Object.assign({}, payload), {
+      isUpdating: true
+    })));
+  }, [dispatch]);
+  var showSnackbar = React.useCallback(function (message) {
+    dispatch(snackbarActions.openSnackbar({
+      message: message
+    }));
+  }, [dispatch]);
   var services = useSelector(function (store) {
     return getActiveServices(store);
   });
   var selectedLayers = useSelector(function (store) {
     return getMapLayers(store, mapId);
   });
+  var layerSelectReloadService = React.useCallback(function (serviceUrl) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var layersForService, service, serviceTitle;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setIsLoading(true);
+              _context.prev = 1;
+              _context.next = 4;
+              return loadWMSService(serviceUrl, true);
+
+            case 4:
+              layersForService = _context.sent;
+              service = getService(services, serviceUrl);
+              serviceSetLayers({
+                id: layersForService.id,
+                name: service && service.serviceName || layersForService.name,
+                serviceUrl: serviceUrl,
+                "abstract": service && service["abstract"] || layersForService["abstract"],
+                layers: layersForService.layers,
+                scope: service && service.scope || 'user',
+                isUpdating: true
+              });
+              clearImageCache();
+              serviceTitle = service && service.serviceName || layersForService.name;
+              showSnackbar(getServiceSuccesUpdateMessage(serviceTitle));
+              _context.next = 15;
+              break;
+
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](1);
+              // TODO: Maarten Plieger 2022-11-02: Snackbars should not be used to inform the user that something went wrong.
+              // https://gitlab.com/opengeoweb/opengeoweb/-/issues/2819
+              showSnackbar(getServiceFailedUpdateMessage(_context.t0));
+
+            case 15:
+              _context.prev = 15;
+              setIsLoading(false);
+              return _context.finish(15);
+
+            case 18:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 12, 15, 18]]);
+    }));
+  }, [serviceSetLayers, services, showSnackbar]);
   return /*#__PURE__*/React.createElement(ServiceOptionsDialog, {
     selectedLayers: selectedLayers,
     services: services,
     layerSelectRemoveService: layerSelectRemoveService,
-    setServicePopupInfo: setServicePopupInfo
+    layerSelectReloadService: layerSelectReloadService,
+    setServicePopupInfo: setServicePopupInfo,
+    isLoading: isLoading
   });
 };
 
@@ -13308,15 +13811,20 @@ var LayerSelect = function LayerSelect(_ref) {
       _ref$order = _ref.order,
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
-      source = _ref$source === void 0 ? 'module' : _ref$source;
+      source = _ref$source === void 0 ? 'module' : _ref$source,
+      _ref$startSize = _ref.startSize,
+      startSize = _ref$startSize === void 0 ? {
+    width: 750,
+    height: 500
+  } : _ref$startSize;
   var initialServiceListHeight = 37;
 
-  var _React$useState = React.useState(500),
+  var _React$useState = React.useState(startSize.height),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       height = _React$useState2[0],
       setHeight = _React$useState2[1];
 
-  var _React$useState3 = React.useState(750),
+  var _React$useState3 = React.useState(startSize.width),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       width = _React$useState4[0],
       setWidth = _React$useState4[1];
@@ -13345,7 +13853,7 @@ var LayerSelect = function LayerSelect(_ref) {
       width: width,
       height: height
     },
-    minWidth: 390,
+    minWidth: 320,
     minHeight: 126,
     startPosition: {
       top: 150,
@@ -13362,13 +13870,13 @@ var LayerSelect = function LayerSelect(_ref) {
     source: source
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
-      padding: '6px'
+      padding: '4px 16px 0 16px'
     }
   }, /*#__PURE__*/React.createElement(SearchFieldConnect, null)), /*#__PURE__*/React.createElement(Box, {
     sx: {
       "float": 'left',
       position: 'absolute',
-      margin: '12px 0 0 8px',
+      margin: '8px 8px 0 16px',
       zIndex: 2
     }
   }, /*#__PURE__*/React.createElement(KeywordFilterButtonConnect, {
@@ -13376,7 +13884,7 @@ var LayerSelect = function LayerSelect(_ref) {
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
       position: 'absolute',
-      margin: '12px 0 0 calc(100% - 36px)',
+      margin: '8px 0 0 calc(100% - 40px)',
       zIndex: 2
     }
   }, /*#__PURE__*/React.createElement(ServiceOptionsButton, {
@@ -13385,12 +13893,13 @@ var LayerSelect = function LayerSelect(_ref) {
     setHeight: handleHeightChange
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
-      padding: '0 8px'
+      padding: '0 16px'
     }
   }, /*#__PURE__*/React.createElement(LayerListConnect, {
     mapId: mapId,
     layerSelectHeight: height,
-    serviceListHeight: serviceListHeight
+    serviceListHeight: serviceListHeight,
+    layerSelectWidth: width
   })));
 };
 
@@ -13783,7 +14292,7 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
 var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
   var bounds = _ref.bounds;
 
-  var _useSetupDialog = useSetupDialog('keywordFilter'),
+  var _useSetupDialog = useSetupDialog(DialogTypes.KeywordFilter),
       dialogOrder = _useSetupDialog.dialogOrder,
       onCloseDialog = _useSetupDialog.onCloseDialog,
       setDialogOrder = _useSetupDialog.setDialogOrder,
@@ -13870,10 +14379,10 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
       _ref$showTitle = _ref.showTitle,
       showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle;
   var mapId = useSelector(function (store) {
-    return getDialogMapId(store, 'layerSelect');
+    return getDialogMapId(store, DialogTypes.LayerSelect);
   });
 
-  var _useSetupDialog = useSetupDialog('layerSelect'),
+  var _useSetupDialog = useSetupDialog(DialogTypes.LayerSelect),
       dialogOrder = _useSetupDialog.dialogOrder,
       isDialogOpen = _useSetupDialog.isDialogOpen,
       onCloseDialog = _useSetupDialog.onCloseDialog,
@@ -13905,11 +14414,6 @@ var useFetchServices = function useFetchServices(dialogType) {
   var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
-
-  var checkIfUserAddedService = function checkIfUserAddedService(service) {
-    return !!service.isUserAddedService;
-  };
-
   React.useEffect(function () {
     if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
       mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
@@ -13921,7 +14425,7 @@ var useFetchServices = function useFetchServices(dialogType) {
               name: service.name,
               serviceUrl: service.url,
               layers: layers,
-              isUserAddedService: checkIfUserAddedService(service),
+              scope: service.scope ? service.scope : 'system',
               // first try to load the user abstract, otherwise the service abstract
               "abstract": service["abstract"] || wmService["abstract"]
             });
@@ -13956,7 +14460,7 @@ var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var dialogType = 'layerManager';
+var dialogType = DialogTypes.LayerManager;
 /**
  * Layer Managerconnected to the store displaying the layers forthe active map Id
  * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
@@ -14117,7 +14621,7 @@ var ZoomControlConnect = function ZoomControlConnect(_ref) {
   }, [mapId]);
 
   var onZoomIn = function onZoomIn() {
-    return adagucRef.current.zoomIn();
+    return adagucRef.current.zoomIn(undefined);
   };
 
   var onZoomOut = function onZoomOut() {
@@ -14204,14 +14708,14 @@ var LayerManagerMapButtonConnect = function LayerManagerMapButtonConnect(_ref) {
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
   var currentActiveMapId = useSelector(function (store) {
-    return getDialogMapId(store, 'layerManager');
+    return getDialogMapId(store, DialogTypes.LayerManager);
   });
   var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'layerManager');
+    return getisDialogOpen(store, DialogTypes.LayerManager);
   });
   var openLayerManagerDialog = React.useCallback(function () {
     dispatch(uiActions.setActiveMapIdForDialog({
-      type: 'layerManager',
+      type: DialogTypes.LayerManager,
       mapId: mapId,
       setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
       source: source
@@ -14327,7 +14831,7 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
   }
 
   var sortedMarks = _toConsumableArray(marks).sort(function (a, b) {
-    return typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value;
+    return Number(typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value);
   });
 
   var adaptedMarks = reverse ? sortedMarks.reverse() : sortedMarks;
@@ -14815,9 +15319,7 @@ var titleOff = 'Auto update off';
 
 var AutoUpdateButton = function AutoUpdateButton(_ref) {
   var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
-      toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {
-    return null;
-  } : _ref$toggleAutoUpdate,
+      toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {} : _ref$toggleAutoUpdate,
       _ref$isAutoUpdating = _ref.isAutoUpdating,
       isAutoUpdating = _ref$isAutoUpdating === void 0 ? false : _ref$isAutoUpdating,
       _ref$disabled = _ref.disabled,
@@ -15074,9 +15576,7 @@ var TimeStepButton = function TimeStepButton(_ref) {
       timeDimension = _ref.timeDimension,
       onChangeTimeStep = _ref.onChangeTimeStep,
       _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
-      onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {
-    return null;
-  } : _ref$onToggleTimestep,
+      onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
       _ref$isOpenByDefault = _ref.isOpenByDefault,
       isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
   var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
@@ -15107,83 +15607,246 @@ var TimeStepButton = function TimeStepButton(_ref) {
   });
 };
 
-var OptionsPopOver = styled(Popover)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    '& .MuiPaper-root': {
-      padding: '5px',
-      overflow: 'visible',
-      backgroundColor: theme.palette.geowebColors.background.surface
-    }
-  };
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var marks = [{
+  label: '5 min',
+  value: Scale.Minutes5,
+  text: '5m'
+}, {
+  label: '1 h',
+  value: Scale.Hour,
+  text: '1h'
+}, {
+  label: '3 h',
+  value: Scale.Hours3,
+  text: '3h'
+}, {
+  label: '6 h',
+  value: Scale.Hours6,
+  text: '6h'
+}, {
+  label: 'day',
+  value: Scale.Day,
+  text: 'd'
+}, {
+  label: 'week',
+  value: Scale.Week,
+  text: 'w'
+}, {
+  label: 'month',
+  value: Scale.Month,
+  text: 'm'
+}, {
+  label: 'year',
+  value: Scale.Year,
+  text: 'y'
+}, {
+  label: 'data',
+  value: Scale.DataScale,
+  text: 'data'
+}].sort(function (a, b) {
+  return b.value - a.value;
 });
+var TimeScaleButton = function TimeScaleButton(_ref) {
+  var layers = _ref.layers,
+      _ref$timeSliderScale = _ref.timeSliderScale,
+      timeSliderScale = _ref$timeSliderScale === void 0 ? Scale.Hour : _ref$timeSliderScale,
+      centerTime = _ref.centerTime,
+      secondsPerPx = _ref.secondsPerPx,
+      selectedTime = _ref.selectedTime,
+      onChangeTimeSliderScale = _ref.onChangeTimeSliderScale;
 
-var OptionsMenuButton = function OptionsMenuButton(_ref2) {
-  var autoUpdateBtn = _ref2.autoUpdateBtn,
-      speedBtn = _ref2.speedBtn,
-      timeStepBtn = _ref2.timeStepBtn;
+  var onChangeSliderValue = function onChangeSliderValue(mark) {
+    var newSliderValue = mark.value;
+    var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
+    var newScale = marks.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 _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      anchorEl = _React$useState2[0],
-      setAnchorEl = _React$useState2[1];
+  return /*#__PURE__*/React.createElement(TimeSliderMenu, {
+    handleMenuItemClick: onChangeSliderValue,
+    icon: /*#__PURE__*/React.createElement(Clock, null),
+    marks: marks,
+    title: "Time scale",
+    value: timeSliderScale
+  });
+};
 
-  var onClickButton = function onClickButton(event) {
-    setAnchorEl(event.currentTarget);
-  };
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var title = 'Now';
 
-  var handleClose = function handleClose() {
-    setAnchorEl(null);
-  };
+var NowButton = function NowButton(_ref) {
+  var _ref$onSetNow = _ref.onSetNow,
+      onSetNow = _ref$onSetNow === void 0 ? function () {} : _ref$onSetNow,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: title,
+    "data-testid": "nowButtonTooltip"
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+    disabled: disabled,
+    onClick: function onClick() {
+      return onSetNow();
+    },
+    "aria-label": "now"
+  }, /*#__PURE__*/React.createElement(Now, {
+    "data-testid": "now-svg"
+  }))));
+};
+
+var OptionsMenuButton = function OptionsMenuButton(_ref) {
+  var nowBtn = _ref.nowBtn,
+      autoUpdateBtn = _ref.autoUpdateBtn,
+      speedBtn = _ref.speedBtn,
+      timeStepBtn = _ref.timeStepBtn,
+      timeScaleBtn = _ref.timeScaleBtn,
+      _ref$isOpenByDefault = _ref.isOpenByDefault,
+      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      anchorEl = _useState2[0],
+      setAnchorEl = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
 
-  var open = Boolean(anchorEl);
-  var id = open ? 'simple-popover' : undefined;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
+  useEffect(function () {
+    if (anchorEl && isOpenByDefault) {
+      setOpen(true);
+    }
+  }, [anchorEl, isOpenByDefault]);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Animation options",
     placement: "bottom"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
-    onClick: onClickButton,
+  }, /*#__PURE__*/React__default.createElement("span", {
+    ref: function ref(_ref2) {
+      setAnchorEl(_ref2);
+    }
+  }, /*#__PURE__*/React__default.createElement(ToolButton, {
+    onClick: function onClick() {
+      setOpen(!open);
+    },
     "data-testid": "optionsMenuButton",
-    active: open
-  }, /*#__PURE__*/React.createElement(Options, {
-    "data-testid": "optionsIcon"
-  })))), /*#__PURE__*/React.createElement(OptionsPopOver, {
-    id: id,
+    active: open,
+    "aria-label": "animation options"
+  }, /*#__PURE__*/React__default.createElement(Options, null)))), /*#__PURE__*/React__default.createElement(Popper, {
+    sx: {
+      zIndex: 3
+    },
+    placement: "top-start",
     open: open,
     "data-testid": "optionsMenuPopOver",
-    anchorEl: anchorEl,
-    onClose: handleClose,
-    anchorOrigin: {
-      vertical: -5,
-      horizontal: 'left'
+    anchorEl: anchorEl
+  }, /*#__PURE__*/React__default.createElement(Paper, {
+    elevation: 3
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    sx: {
+      padding: '0px 10px 10px'
     },
-    transformOrigin: {
-      vertical: 'bottom',
-      horizontal: 'left'
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     spacing: 1
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: "auto"
+  }, nowBtn || /*#__PURE__*/React__default.createElement(NowButton, null)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, timeStepBtn || /*#__PURE__*/React.createElement(TimeStepButton, {
+  }, timeScaleBtn || /*#__PURE__*/React__default.createElement(TimeScaleButton, {
+    centerTime: 0,
+    onChangeTimeSliderScale: function onChangeTimeSliderScale() {},
+    secondsPerPx: 0,
+    selectedTime: 0,
+    timeSliderScale: 0
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: "auto"
+  }, timeStepBtn || /*#__PURE__*/React__default.createElement(TimeStepButton, {
     timeStep: 0,
-    onChangeTimeStep: function onChangeTimeStep() {
-      return null;
-    }
-  })), /*#__PURE__*/React.createElement(Grid, {
+    onChangeTimeStep: function onChangeTimeStep() {}
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, speedBtn || /*#__PURE__*/React.createElement(SpeedButton, {
+  }, speedBtn || /*#__PURE__*/React__default.createElement(SpeedButton, {
     animationDelay: defaultAnimationDelayAtStart,
-    setMapAnimationDelay: function setMapAnimationDelay() {
-      return null;
-    }
-  })), /*#__PURE__*/React.createElement(Grid, {
+    setMapAnimationDelay: function setMapAnimationDelay() {}
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, autoUpdateBtn || /*#__PURE__*/React.createElement(AutoUpdateButton, null)))));
+  }, autoUpdateBtn || /*#__PURE__*/React__default.createElement(AutoUpdateButton, null))))));
+};
+
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var forwardTooltipTitle = 'Forward';
+var backwardTooltipTitle = 'Backward';
+
+var BackwardForwardStepButton = function BackwardForwardStepButton(_ref) {
+  var isForwardStep = _ref.isForwardStep,
+      isDisabled = _ref.isDisabled,
+      _ref$onClickBFButton = _ref.onClickBFButton,
+      onClickBFButton = _ref$onClickBFButton === void 0 ? function () {} : _ref$onClickBFButton;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: isForwardStep ? forwardTooltipTitle : backwardTooltipTitle
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+    disabled: isDisabled,
+    "aria-label": isForwardStep ? 'forward' : 'backward',
+    onClick: onClickBFButton
+  }, isForwardStep ? /*#__PURE__*/React.createElement(StepForward, {
+    "data-testid": "step-forward-svg-path"
+  }) : /*#__PURE__*/React.createElement(StepBackward, {
+    "data-testid": "step-backward-svg-path"
+  }))));
 };
 
 /* *
@@ -15205,19 +15868,28 @@ var OptionsMenuButton = function OptionsMenuButton(_ref2) {
 
 var TimeSliderButtons = function TimeSliderButtons(_ref) {
   var optionsMenuBtn = _ref.optionsMenuBtn,
-      playBtn = _ref.playBtn;
+      playBtn = _ref.playBtn,
+      backwardBtn = _ref.backwardBtn,
+      forwardBtn = _ref.forwardBtn;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "timeSliderButtons"
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    spacing: 2,
-    sx: {
-      padding: '20px 0px 0px 16px'
-    }
+    spacing: 0.5,
+    alignItems: "center",
+    justifyContent: "center"
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, optionsMenuBtn || /*#__PURE__*/React.createElement(OptionsMenuButton, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true
+  }, backwardBtn || /*#__PURE__*/React.createElement(BackwardForwardStepButton, {
+    isForwardStep: false
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true
+  }, forwardBtn || /*#__PURE__*/React.createElement(BackwardForwardStepButton, {
+    isForwardStep: true
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true
   }, playBtn || /*#__PURE__*/React.createElement(PlayButton, null))));
 };
 
@@ -15766,13 +16438,30 @@ var isColorIntervalEven = function isColorIntervalEven(scale, timestep) {
   }
 };
 
-var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale) {
+var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale, dataStartPx, dataEndPx, currentTimePx) {
   var ctx = context;
   var _theme$palette$geoweb7 = theme.palette.geowebColors.timeSlider,
-      timelineTimelineSurface = _theme$palette$geoweb7.timelineTimelineSurface,
-      timelineNightTime = _theme$palette$geoweb7.timelineNightTime;
-  ctx.fillStyle = timelineTimelineSurface.fill;
-  ctx.fillRect(0, 0, canvasWidth, height);
+      timelineNightTime = _theme$palette$geoweb7.timelineNightTime,
+      ledgendObservedBackground = _theme$palette$geoweb7.ledgendObservedBackground,
+      legendForecastBackground = _theme$palette$geoweb7.legendForecastBackground,
+      legendNoDataBackground = _theme$palette$geoweb7.legendNoDataBackground; // top spacing
+
+  var y = 0;
+  ctx.fillStyle = legendNoDataBackground.rgba;
+  ctx.fillRect(0, y, canvasWidth, height); // observed data
+
+  if (dataStartPx < currentTimePx) {
+    ctx.fillStyle = ledgendObservedBackground.fill;
+    ctx.fillRect(Math.max(dataStartPx, 0), y, Math.min(currentTimePx, dataEndPx) - Math.max(dataStartPx, 0), height);
+  } // forecast data
+
+
+  if (dataEndPx > currentTimePx) {
+    ctx.fillStyle = legendForecastBackground.fill;
+    ctx.fillRect(Math.max(currentTimePx, dataStartPx), y, Math.min(canvasWidth, dataEndPx) - Math.max(currentTimePx, dataStartPx), height);
+  } // hovered area
+
+
   ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
   ctx.fillRect(animationStartPx, 0, Math.max(animationEndPx - animationStartPx, 0), height);
   var colorChangeUnit = getColorChangeTimestepUnit(scale);
@@ -15873,7 +16562,7 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
   drawLeftSideDateText(ctx, theme, dateText, height);
 };
 
-var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix, animationStartTime, animationEndTime) {
+var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix, animationStartTime, animationEndTime, dataStartTime, dataEndTime) {
   var ctx = context;
 
   var _map3 = [0, canvasWidth].map(function (px) {
@@ -15883,14 +16572,18 @@ var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, can
       visibleTimeStart = _map4[0],
       visibleTimeEnd = _map4[1];
 
-  var _map5 = [animationStartTime, animationEndTime].map(function (time) {
+  var _map5 = [animationStartTime, animationEndTime, dataStartTime, dataEndTime, currentTimeUnix].map(function (time) {
     return timestampToPixel(time, centerTime, canvasWidth, secondsPerPx);
   }),
-      _map6 = _slicedToArray(_map5, 2),
+      _map6 = _slicedToArray(_map5, 5),
       animationStartPx = _map6[0],
-      animationEndPx = _map6[1];
+      animationEndPx = _map6[1],
+      dataStartPx = _map6[2],
+      dataEndPx = _map6[3],
+      currentTimePx = _map6[4];
 
-  drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale);
+  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);
   drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
   drawCurrentTime(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, currentTimeUnix);
@@ -15971,19 +16664,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Home' && mapIsActive) {
-        if (dataStartTime < dataEndTime) {
-          if (dataEndTime < currentTime) {
-            onSetNewDate(moment.utc(dataEndTime * 1000).toISOString());
-            onSetCenterTime(dataEndTime);
-          } else if (dataStartTime > currentTime) {
-            onSetNewDate(moment.utc(dataStartTime * 1000).toISOString());
-            onSetCenterTime(dataStartTime);
-          } else {
-            var closestToCurrent = roundWithTimeStep(currentTime, timeStep);
-            onSetNewDate(moment.utc(closestToCurrent * 1000).toISOString());
-            onSetCenterTime(closestToCurrent);
-          }
-        }
+        handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
       }
     };
 
@@ -16015,7 +16696,9 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "timeSliderLegend",
     sx: {
-      height: '50px'
+      height: "".concat(TIME_SLIDER_LEGEND_HEIGHT, "px"),
+      borderRadius: '4.5px',
+      overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(CanvasComponent, {
     ref: node,
@@ -16067,236 +16750,12 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       }
     },
     onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-      renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime);
+      renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
     }
   }));
 };
 
-/* *
- * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var scaleSliderOtherSettings = {
-  LEFT_PADDING: '10%'
-};
-
-var thumbComponent = function thumbComponent(props) {
-  var children = props.children,
-      other = __rest(props, ["children"]);
-
-  return /*#__PURE__*/React.createElement(SliderThumb, Object.assign({}, other, {
-    "data-testid": "scaleSliderSliderThumb",
-    tabIndex: 0
-  }), children, /*#__PURE__*/React.createElement(SliderThumb$1, null));
-};
-
-var marks = [{
-  text: '5 min scale',
-  paddingLeft: '2px',
-  value: Scale.Minutes5
-}, {
-  text: '1 h scale',
-  paddingLeft: '25px',
-  value: Scale.Hour
-}, {
-  text: '3 h scale',
-  paddingLeft: '45px',
-  value: Scale.Hours3
-}, {
-  text: '6 h scale',
-  paddingLeft: '65px',
-  value: Scale.Hours6
-}, {
-  text: 'day scale',
-  paddingLeft: '80px',
-  value: Scale.Day
-}, {
-  text: 'week scale',
-  paddingLeft: '92px',
-  value: Scale.Week
-}, {
-  text: 'month scale',
-  paddingLeft: '107px',
-  value: Scale.Month
-}, {
-  text: 'year scale',
-  paddingLeft: '130px',
-  value: Scale.Year
-}, {
-  text: 'data scale',
-  paddingLeft: '140px',
-  value: Scale.DataScale
-}];
-
-var valueLabelFormat = function valueLabelFormat(value) {
-  var valueNew = value.toString();
-  return valueNew;
-};
-
-var GeoWebScaleSlider = styled(Slider)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    '&.MuiSlider-root': {
-      height: 4,
-      width: 167,
-      margin: "0 0 18px ".concat(scaleSliderOtherSettings.LEFT_PADDING)
-    },
-    '& .MuiSlider-thumb': {
-      backgroundColor: 'rgba(0,0,0,0)',
-      marginTop: 0,
-      width: 12,
-      height: 12,
-      color: theme.palette.geowebColors.timeSlider.timeScalePointer.fill,
-      '& svg polygon': {
-        filter: theme.palette.geowebColors.timeSlider.timeScaleShadowButtonScale.filter
-      },
-      '&:before': {
-        display: 'none'
-      }
-    },
-    '& .MuiSlider-valueLabel': {
-      left: '20px'
-    },
-    '& .MuiSlider-rail': {
-      color: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.fill,
-      height: 4,
-      width: 170,
-      borderRadius: 4.5,
-      opacity: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.opacity
-    },
-    '& .MuiSlider-mark': {
-      backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicators.fill,
-      height: 6,
-      width: 2,
-      marginTop: -9,
-      '&.MuiSlider-markActive': {
-        backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicatorsActive.fill,
-        height: 6,
-        width: 2,
-        marginTop: -9
-      }
-    },
-    '@media (max-width: 585px)': {
-      '&.MuiSlider-root': {
-        width: 110
-      },
-      '& .MuiSlider-rail': {
-        width: 110
-      }
-    },
-    '@media (max-width: 395px)': {
-      '&.MuiSlider-root': {
-        width: 60
-      },
-      '& .MuiSlider-rail': {
-        width: 60
-      }
-    }
-  };
-});
-var RAIL_GUTTER_OFFSET = 0.4;
-
-var TimeSliderScaleSlider = function TimeSliderScaleSlider(_ref2) {
-  var layers = _ref2.layers,
-      _ref2$timeSliderScale = _ref2.timeSliderScale,
-      timeSliderScale = _ref2$timeSliderScale === void 0 ? Scale.Hour : _ref2$timeSliderScale,
-      centerTime = _ref2.centerTime,
-      secondsPerPx = _ref2.secondsPerPx,
-      selectedTime = _ref2.selectedTime,
-      onChangeTimeSliderScale = _ref2.onChangeTimeSliderScale;
-  var min = 0;
-  var max = marks.length - 1;
-  var value = marks.findIndex(function (mark) {
-    return mark.value === timeSliderScale;
-  });
-
-  var onChangeSliderValue = function onChangeSliderValue(newSliderValue) {
-    var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
-    var newScale = marks.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 onChange = function onChange(event, value) {
-    if (event.type !== 'keydown') {
-      onChangeSliderValue(value);
-    }
-  };
-
-  var onKeyDown = function onKeyDown(event) {
-    // disable default Slider behavior
-    event.preventDefault();
-    event.stopPropagation(); // custom logic
-
-    var newValue = getValueFromKeyboardEvent(event, value, min, max, true);
-
-    if (newValue !== null) {
-      onChangeSliderValue(newValue);
-    }
-  };
-
-  var _marks$find = marks.find(function (mark) {
-    return mark.value === value;
-  }),
-      paddingLeft = _marks$find.paddingLeft,
-      text = _marks$find.text;
-
-  var scaleTextPadding = {
-    paddingLeft: paddingLeft
-  };
-  return /*#__PURE__*/React.createElement(Box, {
-    "data-testid": "scaleSlider",
-    sx: {
-      backgroundColor: 'geowebColors.background.surface',
-      width: '229px',
-      height: '40px',
-      paddingTop: '4px',
-      paddingBottom: '7px',
-      boxSizing: 'content-box'
-    }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Box, {
-    "data-testid": "scaleSliderText",
-    sx: {
-      width: '67px',
-      height: '15px',
-      padding: '0px 10px 0 8px',
-      color: 'geowebColors.typographyAndIcons.text',
-      font: '12px Roboto'
-    },
-    style: scaleTextPadding
-  }, text)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GeoWebScaleSlider, {
-    "data-testid": "scaleSliderSlider",
-    defaultValue: Scale.Hour,
-    value: value,
-    min: min - RAIL_GUTTER_OFFSET,
-    step: 1,
-    max: max + RAIL_GUTTER_OFFSET,
-    getAriaValueText: valueLabelFormat,
-    onChange: onChange,
-    onKeyDown: onKeyDown,
-    "aria-labelledby": "scale-slider",
-    components: {
-      Thumb: thumbComponent
-    },
-    marks: marks,
-    track: false
-  })));
-};
+var TIME_SLIDER_LEGEND_HEIGHT = 24;
 
 /* eslint-disable no-param-reassign */
 
@@ -16488,20 +16947,6 @@ var renderTimeSliderRailWithNeedle = function renderTimeSliderRailWithNeedle(ctx
   drawNewNeedleLabel(ctx, selected, selectedPx, animationStartPx, animationEndPx, scale, theme);
 };
 
-var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
-  var prevTimeStep = moment.utc(curTime).subtract(timeStep, 'm').toISOString();
-  if (!prevTimeStep) return;
-  if (moment.utc(prevTimeStep) < moment.utc(dataStartTime * 1000)) return;
-  onsetNewDateDebounced(prevTimeStep, onSetNewDate);
-};
-
-var setNextTimeStep = function setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate) {
-  var nextTimeStep = moment.utc(curTime).add(timeStep, 'm').toISOString();
-  if (!nextTimeStep) return;
-  if (moment.utc(nextTimeStep) > moment.utc(dataEndTime * 1000)) return;
-  onsetNewDateDebounced(nextTimeStep, onSetNewDate);
-};
-
 var DRAG_AREA_WIDTH = 10;
 var DRAG_HANDLER_AREA_WIDTH = 30;
 
@@ -16545,12 +16990,12 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
 
   var curTime = selectedTime !== undefined ? selectedTime.toISOString() : moment.utc().toISOString();
 
-  var _React$useState = React.useState(animationStartTime && moment.utc(animationStartTime).unix()),
+  var _React$useState = React.useState(animationStartTime ? moment.utc(animationStartTime).unix() : undefined),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       localAnimationStartTime = _React$useState2[0],
       setLocalAnimationStartTime = _React$useState2[1];
 
-  var _React$useState3 = React.useState(animationEndTime && moment.utc(animationEndTime).unix()),
+  var _React$useState3 = React.useState(animationEndTime ? moment.utc(animationEndTime).unix() : undefined),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       localAnimationEndTime = _React$useState4[0],
       setLocalAnimationEndTime = _React$useState4[1];
@@ -16693,8 +17138,8 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
   };
 
   React.useEffect(function () {
-    setLocalAnimationStartTime(animationStartTime && moment.utc(animationStartTime).unix());
-    setLocalAnimationEndTime(animationEndTime && moment.utc(animationEndTime).unix());
+    setLocalAnimationStartTime(animationStartTime ? moment.utc(animationStartTime).unix() : undefined);
+    setLocalAnimationEndTime(animationEndTime ? moment.utc(animationEndTime).unix() : undefined);
   }, [animationStartTime, animationEndTime]);
   var handleKeyDown = React.useCallback(function (event) {
     if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
@@ -16801,6 +17246,37 @@ var TimeSliderRail = function TimeSliderRail(_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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var HideSliderButton = function HideSliderButton(_ref) {
+  var isVisible = _ref.isVisible,
+      toggleTimeSliderIsVisible = _ref.toggleTimeSliderIsVisible;
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: isVisible ? 'Hide timeslider' : 'Show timeslider',
+    "data-testid": "autoUpdateButtonTooltip"
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(ToolButton, {
+    onClick: function onClick() {
+      toggleTimeSliderIsVisible(!isVisible);
+    },
+    "data-testid": "hideTimeSliderButton"
+  }, isVisible ? /*#__PURE__*/React__default.createElement(ChevronDown, null) : /*#__PURE__*/React__default.createElement(ChevronUp, null))));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16845,7 +17321,6 @@ var defaultProps = {
 var TimeSlider = function TimeSlider(_ref) {
   var buttons = _ref.buttons,
       rail = _ref.rail,
-      scaleSlider = _ref.scaleSlider,
       legend = _ref.legend,
       _ref$mapIsActive = _ref.mapIsActive,
       mapIsActive = _ref$mapIsActive === void 0 ? true : _ref$mapIsActive,
@@ -16854,38 +17329,54 @@ var TimeSlider = function TimeSlider(_ref) {
       _ref$onToggleTimeSlid = _ref.onToggleTimeSlider,
       onToggleTimeSlider = _ref$onToggleTimeSlid === void 0 ? function () {} : _ref$onToggleTimeSlid;
   useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+  var visibilityState = isVisible ? 'visible' : 'hidden';
   return isVisible ? /*#__PURE__*/React.createElement(Grid, {
+    style: {
+      visibility: visibilityState
+    },
     container: true,
-    "data-testid": "timeSlider",
     sx: {
       display: 'grid',
-      gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
-      gridTemplateRows: '50px'
-    }
+      gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr) minmax(40px, 40px)',
+      gridTemplateRows: 24,
+      paddingBottom: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    "data-testid": "timeSlider",
+    spacing: 1
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
-  }, " ", buttons || /*#__PURE__*/React.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React.createElement(Grid, {
+  }), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, rail || /*#__PURE__*/React.createElement(TimeSliderRail, Object.assign({}, defaultProps, {
     selectedTime: defaultProps.selectedTime,
     mapIsActive: mapIsActive
   })), ' '), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    sx: {
-      height: '50px'
-    }
-  }, scaleSlider || /*#__PURE__*/React.createElement(TimeSliderScaleSlider, Object.assign({}, defaultProps, {
-    selectedTime: defaultProps.selectedTime.unix(),
-    timeSliderScale: Scale.Hour,
-    onChangeTimeSliderScale: function onChangeTimeSliderScale() {
-      return null;
-    }
-  }))), /*#__PURE__*/React.createElement(Grid, {
+    item: true
+  }), /*#__PURE__*/React.createElement(Grid, {
+    item: true
+  }, buttons || /*#__PURE__*/React.createElement(TimeSliderButtons, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, legend || /*#__PURE__*/React.createElement(TimeSliderLegend, Object.assign({}, defaultProps, {
     selectedTime: defaultProps.selectedTime.unix(),
     mapIsActive: mapIsActive
-  })), ' ')) : null;
+  })), ' '), /*#__PURE__*/React.createElement(Grid, {
+    item: true
+  }, /*#__PURE__*/React.createElement(HideSliderButton, {
+    toggleTimeSliderIsVisible: onToggleTimeSlider,
+    isVisible: isVisible
+  }))) : /*#__PURE__*/React.createElement(Grid, {
+    sx: {
+      paddingRight: 1
+    },
+    container: true,
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React.createElement(HideSliderButton, {
+    toggleTimeSliderIsVisible: onToggleTimeSlider,
+    isVisible: isVisible
+  }));
 };
 
 /* *
@@ -16959,74 +17450,190 @@ var SpeedButtonConnect = function SpeedButtonConnect(_ref) {
   var onSetAnimationDelay = function onSetAnimationDelay(animationDelay) {
     dispatch(mapActions$1.setAnimationDelay({
       mapId: mapId,
-      animationDelay: animationDelay,
-      origin: MapActionOrigin.map
+      animationDelay: animationDelay,
+      origin: MapActionOrigin.map
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(SpeedButton, {
+    animationDelay: animationDelay,
+    setMapAnimationDelay: onSetAnimationDelay
+  });
+};
+
+/* *
+ * 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 TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
+  var mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  var timeStep = useSelector(function (store) {
+    return getMapTimeStep(store, mapId);
+  });
+  var isAnimating$1 = useSelector(function (store) {
+    return isAnimating(store, mapId);
+  });
+  var isTimestepAuto$1 = useSelector(function (store) {
+    return isTimestepAuto(store, mapId);
+  });
+  var activeLayerId = useSelector(function (store) {
+    return getActiveLayerId(store, mapId);
+  });
+  var activeLayerTimeDimension = useSelector(function (store) {
+    return getLayerTimeDimension(store, activeLayerId);
+  });
+  var onToggleTimestepAuto = React.useCallback(function () {
+    dispatch(mapActions$1.toggleTimestepAuto({
+      mapId: mapId,
+      timestepAuto: !isTimestepAuto$1,
+      origin: MapActionOrigin.map
+    }));
+  }, [dispatch, isTimestepAuto$1, mapId]);
+  var onSetTimeStep = React.useCallback(function (timeStep, origin) {
+    dispatch(mapActions$1.setTimeStep(Object.assign({
+      mapId: mapId,
+      timeStep: timeStep
+    }, origin && {
+      origin: origin
+    })));
+  }, [dispatch, mapId]);
+  return /*#__PURE__*/React.createElement(TimeStepButton, {
+    timeStep: timeStep,
+    onChangeTimeStep: onSetTimeStep,
+    disabled: isAnimating$1,
+    isTimestepAuto: isTimestepAuto$1,
+    onToggleTimestepAuto: onToggleTimestepAuto,
+    timeDimension: activeLayerTimeDimension
+  });
+};
+
+/* *
+ * 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
     }));
   };
 
-  return /*#__PURE__*/React.createElement(SpeedButton, {
-    animationDelay: animationDelay,
-    setMapAnimationDelay: onSetAnimationDelay
+  var _getTimeBounds = getTimeBounds(dimensions),
+      selectedTime = _getTimeBounds.selectedTime;
+
+  return /*#__PURE__*/React.createElement(TimeScaleButton, {
+    layers: layers,
+    timeSliderScale: timeSliderScale,
+    onChangeTimeSliderScale: onSetTimeSliderScale,
+    secondsPerPx: secondsPerPx,
+    centerTime: centerTime,
+    selectedTime: selectedTime
   });
 };
 
-/* *
- * 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 TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
-  var mapId = _ref.mapId;
+var NowButtonConnect = function NowButtonConnect(_ref) {
+  var sourceId = _ref.sourceId,
+      mapId = _ref.mapId,
+      isDisabled = _ref.isDisabled;
   var dispatch = useDispatch();
+  var currentTime = moment.utc().unix();
   var timeStep = useSelector(function (store) {
     return getMapTimeStep(store, mapId);
   });
+
+  var _getDataLimitsFromLay = getDataLimitsFromLayers(useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  })),
+      _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
+      dataStartTime = _getDataLimitsFromLay2[0],
+      dataEndTime = _getDataLimitsFromLay2[1];
+
   var isAnimating$1 = useSelector(function (store) {
     return isAnimating(store, mapId);
   });
-  var isTimestepAuto$1 = useSelector(function (store) {
-    return isTimestepAuto(store, mapId);
-  });
-  var activeLayerId = useSelector(function (store) {
-    return getActiveLayerId(store, mapId);
-  });
-  var activeLayerTimeDimension = useSelector(function (store) {
-    return getLayerTimeDimension(store, activeLayerId);
-  });
-  var onToggleTimestepAuto = React.useCallback(function () {
-    dispatch(mapActions$1.toggleTimestepAuto({
-      mapId: mapId,
-      timestepAuto: !isTimestepAuto$1,
-      origin: MapActionOrigin.map
+
+  var onSetNewDate = function onSetNewDate(newDate) {
+    if (isAnimating$1) {
+      dispatch(mapActions$1.mapStopAnimation({
+        mapId: mapId
+      }));
+    }
+
+    dispatch(genericActions.setTime({
+      sourceId: sourceId,
+      origin: 'NowButtonConnect, 140',
+      value: handleMomentISOString(newDate)
     }));
-  }, [dispatch, isTimestepAuto$1, mapId]);
-  var onSetTimeStep = React.useCallback(function (timeStep, origin) {
-    dispatch(mapActions$1.setTimeStep(Object.assign({
+  };
+
+  var onSetCenterTime = function onSetCenterTime(newTime) {
+    dispatch(mapActions$1.setTimeSliderCenterTime({
       mapId: mapId,
-      timeStep: timeStep
-    }, origin && {
-      origin: origin
-    })));
-  }, [dispatch, mapId]);
-  return /*#__PURE__*/React.createElement(TimeStepButton, {
-    timeStep: timeStep,
-    onChangeTimeStep: onSetTimeStep,
-    disabled: isAnimating$1,
-    isTimestepAuto: isTimestepAuto$1,
-    onToggleTimestepAuto: onToggleTimestepAuto,
-    timeDimension: activeLayerTimeDimension
+      timeSliderCenterTime: newTime
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(NowButton, {
+    disabled: isDisabled,
+    onSetNow: function onSetNow() {
+      return handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
+    }
   });
 };
 
@@ -17056,8 +17663,13 @@ var TimeStepButtonComponent = function TimeStepButtonComponent(_ref) {
  */
 
 var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
-  var mapId = _ref.mapId;
+  var sourceId = _ref.sourceId,
+      mapId = _ref.mapId;
   return /*#__PURE__*/React.createElement(OptionsMenuButton, {
+    nowBtn: /*#__PURE__*/React.createElement(NowButtonConnect, {
+      mapId: mapId,
+      sourceId: sourceId
+    }),
     autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
       mapId: mapId
     }),
@@ -17066,10 +17678,70 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
     }),
     timeStepBtn: /*#__PURE__*/React.createElement(TimeStepButtonComponent, {
       mapId: mapId
+    }),
+    timeScaleBtn: /*#__PURE__*/React.createElement(TimeScaleButtonConnect, {
+      mapId: mapId
     })
   });
 };
 
+var BackwardForwardStepButtonConnect = function BackwardForwardStepButtonConnect(_ref) {
+  var isForwardStep = _ref.isForwardStep,
+      mapId = _ref.mapId;
+  var timeStep = useSelector(function (store) {
+    return getMapTimeStep(store, mapId);
+  });
+  var dispatch = useDispatch();
+
+  var setTime = function setTime(newDate) {
+    dispatch(genericActions.setTime({
+      origin: '',
+      sourceId: mapId,
+      value: handleMomentISOString(newDate)
+    }));
+  };
+
+  var stopAnimation = function stopAnimation() {
+    dispatch(mapActions$1.mapStopAnimation({
+      mapId: mapId,
+      origin: MapActionOrigin.map
+    }));
+  };
+
+  var isAnimating$1 = useSelector(function (store) {
+    return isAnimating(store, mapId);
+  });
+  var timedim = useSelector(function (store) {
+    return getMapDimension(store, mapId, 'time');
+  });
+  var selectedTime = getSelectedTime(timedim);
+  var curTime = moment.unix(selectedTime).toISOString();
+  var layers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+
+  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
+      _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
+      dataStartTime = _getDataLimitsFromLay2[0],
+      dataEndTime = _getDataLimitsFromLay2[1];
+
+  var onClickBF = function onClickBF() {
+    if (isAnimating$1) {
+      stopAnimation();
+    }
+
+    isForwardStep ? setNextTimeStep(timeStep, curTime, dataEndTime, setTime) : setPreviousTimeStep(timeStep, curTime, dataStartTime, setTime);
+  };
+
+  return /*#__PURE__*/React__default.createElement(BackwardForwardStepButton, {
+    isDisabled: false,
+    isForwardStep: isForwardStep,
+    onClickBFButton: function onClickBFButton() {
+      onClickBF();
+    }
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17096,13 +17768,23 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
  */
 
 var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_ref) {
-  var mapId = _ref.mapId;
+  var sourceId = _ref.sourceId,
+      mapId = _ref.mapId;
   return /*#__PURE__*/React.createElement(TimeSliderButtons, {
     optionsMenuBtn: /*#__PURE__*/React.createElement(OptionsMenuButtonConnect, {
-      mapId: mapId
+      mapId: mapId,
+      sourceId: sourceId
     }),
     playBtn: /*#__PURE__*/React.createElement(PlayButtonConnect, {
       mapId: mapId
+    }),
+    backwardBtn: /*#__PURE__*/React.createElement(BackwardForwardStepButtonConnect, {
+      mapId: mapId,
+      isForwardStep: false
+    }),
+    forwardBtn: /*#__PURE__*/React.createElement(BackwardForwardStepButtonConnect, {
+      mapId: mapId,
+      isForwardStep: true
     })
   });
 };
@@ -17126,8 +17808,6 @@ var connectRedux$2 = connect(function (store, props) {
 }, {
   stopMapAnimation: mapActions$1.mapStopAnimation,
   setTime: genericActions.setTime,
-  syncGroupAddSource: genericActions.syncGroupAddSource,
-  syncGroupRemoveSource: genericActions.syncGroupRemoveSource,
   mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime,
   mapSetTimeSliderSecondsPerPx: mapActions$1.setTimeSliderSecondsPerPx
 });
@@ -17149,8 +17829,6 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       activeWindowId = _ref.activeWindowId,
       stopMapAnimation = _ref.stopMapAnimation,
       setTime = _ref.setTime,
-      syncGroupAddSource = _ref.syncGroupAddSource,
-      syncGroupRemoveSource = _ref.syncGroupRemoveSource,
       mapSetTimeSliderCenterTime = _ref.mapSetTimeSliderCenterTime,
       mapSetTimeSliderSecondsPerPx = _ref.mapSetTimeSliderSecondsPerPx;
 
@@ -17165,17 +17843,6 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       dataEndTime = _getDataLimitsFromLay2[1];
 
   var mapIsActive = mapId === activeWindowId;
-  React.useEffect(function () {
-    syncGroupAddSource({
-      id: sourceId,
-      type: [SYNCGROUPS_TYPE_SETTIME]
-    });
-    return function () {
-      syncGroupRemoveSource({
-        id: sourceId
-      });
-    };
-  }, [sourceId, syncGroupAddSource, syncGroupRemoveSource]);
   return /*#__PURE__*/React.createElement(TimeSliderLegend, {
     centerTime: centerTime,
     secondsPerPx: secondsPerPx,
@@ -17253,8 +17920,6 @@ var connectRedux$1 = connect(function (store, props) {
   setAnimationEndTime: mapActions$1.setAnimationEndTime,
   setTime: genericActions.setTime,
   stopMapAnimation: mapActions$1.mapStopAnimation,
-  syncGroupAddSource: genericActions.syncGroupAddSource,
-  syncGroupRemoveSource: genericActions.syncGroupRemoveSource,
   mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime
 });
 
@@ -17276,8 +17941,6 @@ var TimeSliderRailConnectComponent = function TimeSliderRailConnectComponent(_re
       setAnimationEndTime = _ref.setAnimationEndTime,
       stopMapAnimation = _ref.stopMapAnimation,
       setTime = _ref.setTime,
-      syncGroupAddSource = _ref.syncGroupAddSource,
-      syncGroupRemoveSource = _ref.syncGroupRemoveSource,
       mapSetTimeSliderCenterTime = _ref.mapSetTimeSliderCenterTime;
 
   var _getMomentTimeBounds = getMomentTimeBounds(dimensions),
@@ -17291,17 +17954,6 @@ var TimeSliderRailConnectComponent = function TimeSliderRailConnectComponent(_re
       dataEndTime = _getDataLimitsFromLay2[1];
 
   var mapIsActive = activeWindowId === mapId;
-  React.useEffect(function () {
-    syncGroupAddSource({
-      id: sourceId,
-      type: [SYNCGROUPS_TYPE_SETTIME]
-    });
-    return function () {
-      syncGroupRemoveSource({
-        id: sourceId
-      });
-    };
-  }, [sourceId, syncGroupAddSource, syncGroupRemoveSource]);
   return /*#__PURE__*/React.createElement(TimeSliderRail, {
     centerTime: centerTime,
     secondsPerPx: secondsPerPx,
@@ -17351,89 +18003,6 @@ var TimeSliderRailConnectComponent = function TimeSliderRailConnectComponent(_re
 
 var TimeSliderRailConnect = connectRedux$1(TimeSliderRailConnectComponent);
 
-/* *
- * 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 connectReduxTimeSliderScaleSlider = connect(function (store, props) {
-  return {
-    layers: getMapLayers(store, props.mapId),
-    timeSliderScale: getMapTimeSliderScale(store, props.mapId),
-    centerTime: getMapTimeSliderCenterTime(store, props.mapId),
-    secondsPerPx: getMapTimeSliderSecondsPerPx(store, props.mapId),
-    dimensions: getMapDimensions(store, props.mapId)
-  };
-}, {
-  mapSetTimeSliderScale: mapActions$1.setTimeSliderScale,
-  mapSetTimeSliderDataScaleToSecondsPerPx: mapActions$1.setTimeSliderDataScaleToSecondsPerPx,
-  mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime
-});
-
-var TimeSliderScaleSliderComponent = function TimeSliderScaleSliderComponent(_ref) {
-  var timeSliderScale = _ref.timeSliderScale,
-      mapId = _ref.mapId,
-      layers = _ref.layers,
-      centerTime = _ref.centerTime,
-      secondsPerPx = _ref.secondsPerPx,
-      dimensions = _ref.dimensions,
-      mapSetTimeSliderScale = _ref.mapSetTimeSliderScale,
-      mapSetTimeSliderDataScaleToSecondsPerPx = _ref.mapSetTimeSliderDataScaleToSecondsPerPx,
-      mapSetTimeSliderCenterTime = _ref.mapSetTimeSliderCenterTime;
-
-  var onSetTimeSliderScale = function onSetTimeSliderScale(scale, newCenterTime, scaleToSecPerPx) {
-    if (scale === Scale.DataScale) {
-      mapSetTimeSliderDataScaleToSecondsPerPx({
-        mapId: mapId,
-        timeSliderDataScaleToSecondsPerPx: scaleToSecPerPx
-      });
-    }
-
-    mapSetTimeSliderScale({
-      mapId: mapId,
-      timeSliderScale: scale
-    });
-    mapSetTimeSliderCenterTime({
-      mapId: mapId,
-      timeSliderCenterTime: newCenterTime
-    });
-  };
-
-  var _getTimeBounds = getTimeBounds(dimensions),
-      selectedTime = _getTimeBounds.selectedTime;
-
-  return /*#__PURE__*/React.createElement(TimeSliderScaleSlider, {
-    layers: layers,
-    timeSliderScale: timeSliderScale,
-    onChangeTimeSliderScale: onSetTimeSliderScale,
-    secondsPerPx: secondsPerPx,
-    centerTime: centerTime,
-    selectedTime: selectedTime
-  });
-};
-/**
- * TimeSliderScaleSlider component connected to the store displaying a scale slider of the time slider
- *
- * Expects the following props:
- * @param {string} mapId mapId: string - Id of the map
- * @example
- * ``` <TimeSliderScaleSliderConnect mapId={mapId} />```
- */
-
-
-var TimeSliderScaleSliderConnect = connectReduxTimeSliderScaleSlider(TimeSliderScaleSliderComponent);
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17501,15 +18070,13 @@ var ConnectedTimeSlider = function ConnectedTimeSlider(_ref) {
 
   return /*#__PURE__*/React.createElement(TimeSlider, {
     buttons: /*#__PURE__*/React.createElement(TimeSliderButtonsConnect, {
-      mapId: mapId
+      mapId: mapId,
+      sourceId: sourceId
     }),
     rail: /*#__PURE__*/React.createElement(TimeSliderRailConnect, {
       mapId: mapId,
       sourceId: sourceId
     }),
-    scaleSlider: /*#__PURE__*/React.createElement(TimeSliderScaleSliderConnect, {
-      mapId: mapId
-    }),
     legend: /*#__PURE__*/React.createElement(TimeSliderLegendConnect$1, {
       mapId: mapId,
       sourceId: sourceId
@@ -18000,7 +18567,7 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSIns
         id: service.id,
         serviceUrl: wmLayer.service,
         layers: layers,
-        isUserAddedService: false
+        scope: 'system'
       },
       layerStyle: {
         origin: origin,
@@ -18706,7 +19273,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (!featureCoords) {
-        return;
+        return undefined;
       }
 
       var vertexSelected = mouseDown === true && this.mouseIsOverVertexNr !== VERTEX.NONE;
@@ -18730,6 +19297,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
 
         return false;
       }
+
+      return undefined;
     }
   }, {
     key: "hoverVertex",
@@ -18848,7 +19417,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           isInEditMode = _this$props2.isInEditMode,
           featureNrToEdit = _this$props2.featureNrToEdit,
           onHoverFeature = _this$props2.onHoverFeature;
-      if (event && event.rightButton === true) return;
+      if (event && event.rightButton === true) return undefined;
       /* adagucMouseMove is an event callback function which is triggered when the mouse moves over the map
         This event is only triggered if the map is in hover state.
         E.g. when the map is dragging/panning, this event is not triggerd
@@ -18889,11 +19458,11 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (isInEditMode === false) {
-        return;
+        return undefined;
       }
 
       var feature = this.geojson.features[featureNrToEdit];
-      if (!feature) return;
+      if (!feature) return undefined;
       var webmapjs = this.props.webmapjs;
       this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
         x: mouseX,
@@ -18959,6 +19528,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
         /* False means that this component will take over entire controll.
           True means that it is still possible to pan and drag the map while editing */
       }
+
+      return undefined;
     }
     /* Returns true if double click is detected */
 
@@ -19266,6 +19837,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           return false;
         }
       }
+
+      return undefined;
     }
   }, {
     key: "addPointToLineStringFeature",
@@ -20057,7 +20630,7 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
         /* After the image is loaded the canvas will be redrawn and drawIcon will be triggered again
         via the beforecanvasdisplay listener. */
 
-        return;
+        return undefined;
       }
 
       if (image.isLoaded()) {
@@ -20070,6 +20643,8 @@ var AdagucMapDraw = /*#__PURE__*/function (_React$PureComponent) {
           ctx.strokeRect(parseInt(_coord.x, 10) - imageWidth / 2, parseInt(_coord.y, 10) - imageHeight / 2, imageWidth, imageHeight);
         }
       }
+
+      return undefined;
     }
   }, {
     key: "drawMarker",
@@ -21322,12 +21897,8 @@ ReactMapView.defaultProps = {
   shouldAutoFetch: true,
   displayMapPin: false,
   disableMapPin: false,
-  onMount: function onMount() {
-    return null;
-  },
-  onUnMount: function onUnMount() {
-    return null;
-  },
+  onMount: function onMount() {},
+  onUnMount: function onUnMount() {},
   onMapChangeDimension: function onMapChangeDimension() {
     /* nothing */
   },
@@ -21436,7 +22007,7 @@ var MapView = function MapView(_a) {
     }
   }, /*#__PURE__*/React.createElement(ZoomControls, {
     onZoomIn: function onZoomIn() {
-      return adagucRef.current.zoomIn();
+      return adagucRef.current.zoomIn(undefined);
     },
     onZoomOut: function onZoomOut() {
       return adagucRef.current.zoomOut();
@@ -21494,10 +22065,10 @@ var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
     return (touches === null || touches === void 0 ? void 0 : touches.length) === 2;
   };
 
-  var isValidMap = React.useCallback(function (map, event) {
+  var isCanvasElement = React.useCallback(function (event) {
     var target = event.target;
-    return map && target.tagName !== 'INPUT' && mapIsActive;
-  }, [mapIsActive]);
+    return target.tagName === 'CANVAS';
+  }, []);
 
   var distance = function distance(x1, y1, x2, y2) {
     var dx = x1 - x2;
@@ -21505,9 +22076,32 @@ var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
     return Math.sqrt(dx * dx + dy * dy);
   };
 
+  var isMatchingWebMapNumbers = function isMatchingWebMapNumbers(firstStr, secondStr) {
+    // Returns true if the same web map (id) number were encountered in both given strings, false otherwise.
+    var webMapNumberBaseFormat = 'WebMapJSMapNo_';
+
+    if (!firstStr.includes(webMapNumberBaseFormat) || !secondStr.includes(webMapNumberBaseFormat)) {
+      return false;
+    }
+
+    var numberMatcher = /\d+/;
+    var firstNumber = firstStr.match(numberMatcher)[0];
+    var secondNumber = secondStr.match(numberMatcher)[0];
+    return Boolean(firstNumber && secondNumber && firstNumber === secondNumber);
+  };
+
+  var isTouchInsideTargetElement = function isTouchInsideTargetElement(elem, touchX, touchY) {
+    var _elem$getBoundingClie = elem.getBoundingClientRect(),
+        left = _elem$getBoundingClie.left,
+        top = _elem$getBoundingClie.top,
+        width = _elem$getBoundingClie.width,
+        height = _elem$getBoundingClie.height;
+
+    var leftMarginWidth = 0.02 * document.body.getBoundingClientRect().width;
+    return touchY > window.scrollY + top && touchY < window.scrollY + top + height - TIME_SLIDER_LEGEND_HEIGHT && touchX > window.scrollX + left + leftMarginWidth && touchX < window.scrollX + left + width;
+  };
+
   var handleStart = React.useCallback(function (event) {
-    var map = getWMJSMapById(mapId);
-    if (!isValidMap(map, event)) return;
     var targetTouches = event.targetTouches;
     var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
     setFirstTouchX(firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientX);
@@ -21518,10 +22112,31 @@ var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
       setSecondTouchX(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientX);
       setSecondTouchY(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientY);
     }
-  }, [isValidMap, mapId]);
+  }, []);
   var handleMove = React.useCallback(function (event) {
     var map = getWMJSMapById(mapId);
-    if (!isValidMap(map, event)) return;
+    var targetElem = event.target;
+
+    if (!isCanvasElement(event)) {
+      // Elements other than canvas elements are not allowed to be zoomed/panned
+      return;
+    }
+
+    var targetMapId = map.getId();
+    var targetElemId = targetElem.parentElement.id;
+
+    if (!isMatchingWebMapNumbers(targetMapId, targetElemId)) {
+      // Current map (given by map id) was not coupled to the canvas element user touched.
+      // This web map id number comparison is of importance when dealing with multi-window presentations.
+      return;
+    }
+
+    if (!isTouchInsideTargetElement(targetElem, firstTouchX, firstTouchY)) {
+      // A user touch outside the current canvas element will be rejected
+      return;
+    } // Start zooming/panning by touch
+
+
     event.preventDefault();
     var targetTouches = event.targetTouches;
     var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
@@ -21564,7 +22179,7 @@ var useTouchZoomPan = function useTouchZoomPan(mapIsActive, mapId) {
         setPrevDist(_dist);
       }
     }
-  }, [firstTouchX, firstTouchY, isValidMap, mapId, prevDist, secondTouchX, secondTouchY]);
+  }, [mapId, isCanvasElement, firstTouchX, firstTouchY, secondTouchX, secondTouchY, prevDist]);
   var handleEnd = React.useCallback(function () {}, []);
   React.useEffect(function () {
     document.addEventListener('touchstart', handleStart, {
@@ -21813,7 +22428,7 @@ var MapViewConnect = function MapViewConnect(_a) {
     },
     srs: srs,
     bbox: bbox,
-    mapPinLocation: displayMapPin && mapPinLocation,
+    mapPinLocation: displayMapPin ? mapPinLocation : undefined,
     dimensions: mapDimensions,
     activeLayerId: activeLayerId,
     animationDelay: animationDelay,
@@ -21933,6 +22548,141 @@ var LegendMapButtonConnect = function LegendMapButtonConnect(_ref) {
   }, /*#__PURE__*/React.createElement(List$1, null));
 };
 
+var MIN_WIDTH = 170;
+var MIN_HEIGHT = 32;
+var MIN_FONT_SIZE = 14;
+var FONT_SIZE_WIDTH_RATIO = MIN_FONT_SIZE / MIN_WIDTH;
+var TimeSliderClock = function TimeSliderClock(_ref2) {
+  var time = _ref2.time;
+  var nodeRef = React.useRef(null);
+
+  var _React$useState = React.useState({
+    x: 0,
+    y: 0
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      position = _React$useState2[0],
+      setPosition = _React$useState2[1];
+
+  useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition);
+
+  var _React$useState3 = React.useState({
+    width: MIN_WIDTH,
+    height: MIN_HEIGHT
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      size = _React$useState4[0],
+      setSize = _React$useState4[1];
+
+  var _React$useState5 = React.useState(MIN_FONT_SIZE),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      fontSize = _React$useState6[0],
+      setFontSize = _React$useState6[1];
+
+  return /*#__PURE__*/React.createElement(Draggable, {
+    nodeRef: nodeRef,
+    bounds: "parent",
+    position: position,
+    onStop: function onStop(_event, position) {
+      setPosition(position);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      zIndex: 100,
+      top: '10px',
+      right: '10px'
+    },
+    ref: nodeRef
+  }, /*#__PURE__*/React.createElement(Resizable, {
+    onResizeStart: function onResizeStart(event) {
+      event.stopPropagation();
+    },
+    onResize: function onResize(_event, _direction, _ref, delta) {
+      var width = size.width + delta.width;
+      var fontSize = FONT_SIZE_WIDTH_RATIO * width;
+      setFontSize(fontSize);
+    },
+    onResizeStop: function onResizeStop(_event, _direction, _ref, delta) {
+      var width = size.width + delta.width;
+      var height = size.height + delta.height;
+      setSize({
+        width: width,
+        height: height
+      });
+    },
+    lockAspectRatio: true,
+    minHeight: MIN_HEIGHT,
+    minWidth: MIN_WIDTH,
+    size: size,
+    handleComponent: {
+      bottomLeft: /*#__PURE__*/React.createElement(Resize, {
+        isRightAligned: true,
+        style: {
+          fill: '#FFFFFF'
+        }
+      })
+    },
+    enable: {
+      top: false,
+      right: false,
+      bottom: false,
+      left: false,
+      topRight: false,
+      bottomRight: false,
+      bottomLeft: true,
+      topLeft: false
+    }
+  }, /*#__PURE__*/React.createElement(Box$2, {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    sx: {
+      cursor: 'move',
+      height: '100%',
+      width: '100%',
+      backgroundColor: '#051039',
+      borderRadius: '5px'
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2",
+    sx: {
+      color: '#FFFFFF',
+      fontSize: fontSize
+    }
+  }, moment.utc(time).format('ddd DD MMM HH:mm z'))))));
+};
+
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var TimeSliderClockConnect = function TimeSliderClockConnect(_ref) {
+  var mapId = _ref.mapId;
+  var dimensions = useSelector(function (store) {
+    return getMapDimensions(store, mapId);
+  });
+
+  var _getMomentTimeBounds = getMomentTimeBounds(dimensions),
+      selectedTime = _getMomentTimeBounds.selectedTime;
+
+  return /*#__PURE__*/React__default.createElement(TimeSliderClock, {
+    time: selectedTime
+  });
+};
+
 var titleStyle = function titleStyle(theme) {
   return {
     position: 'absolute',
@@ -21982,7 +22732,9 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       _a$multiLegend = _a.multiLegend,
       multiLegend = _a$multiLegend === void 0 ? true : _a$multiLegend,
       shouldShowLayerManager = _a.shouldShowLayerManager,
-      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager"]);
+      _a$showClock = _a.showClock,
+      showClock = _a$showClock === void 0 ? true : _a$showClock,
+      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock"]);
 
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -22015,7 +22767,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
 
     if (shouldShowLayerManager !== undefined) {
       dispatch(uiActions.setActiveMapIdForDialog({
-        type: 'layerManager',
+        type: DialogTypes.LayerManager,
         mapId: mapId,
         setOpen: shouldShowLayerManager,
         source: 'app'
@@ -22068,6 +22820,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     showMapId: true,
     mapId: mapId,
     multiLegend: multiLegend
+  }), showClock && /*#__PURE__*/React__default.createElement(TimeSliderClockConnect, {
+    mapId: mapId
   }));
 };
 
@@ -22107,7 +22861,9 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       _ref$showZoomControls = _ref.showZoomControls,
       showZoomControls = _ref$showZoomControls === void 0 ? true : _ref$showZoomControls,
       _ref$multiLegend = _ref.multiLegend,
-      multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
+      multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend,
+      _ref$showClock = _ref.showClock,
+      showClock = _ref$showClock === void 0 ? true : _ref$showClock;
   var dispatch = useDispatch();
   var syncGroupAddTarget = React__default.useCallback(function (payload) {
     dispatch(genericActions.syncGroupAddTarget(payload));
@@ -22150,6 +22906,8 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
     showMapId: true,
     mapId: firstMapId,
     multiLegend: multiLegend
+  }), showClock && /*#__PURE__*/React__default.createElement(TimeSliderClockConnect, {
+    mapId: firstMapId
   }), maps.map(function (map, mapIndex) {
     var mapId = map.id;
     return /*#__PURE__*/React__default.createElement(Box, {
@@ -22169,96 +22927,12 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       shouldShowZoomControls: showZoomControls && mapIndex === 0,
       showTimeSlider: false,
       disableTimeSlider: true,
+      showClock: false,
       multiLegend: multiLegend
     }));
   }));
 };
 
-var useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
-  var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      referenceTimes = _React$useState2[0],
-      setReferenceTimes = _React$useState2[1];
-
-  React.useEffect(function () {
-    var referenceTimes = [];
-    var wmLayer = new WMLayer(Object.assign({}, inputLayer));
-    wmLayer.parseLayerPromise().then(function (layer) {
-      var refTimeDim = layer.getDimension('reference_time');
-      /* Loop through all values of the dimension.
-         A map cannot be used for iterating,  as the dimension values are not in an array (it is an API). */
-
-      for (var j = 0; j < refTimeDim.size(); j += 1) {
-        var referenceTimeValue = refTimeDim.getValueForIndex(j);
-        referenceTimes.push(referenceTimeValue);
-      }
-
-      setReferenceTimes(referenceTimes);
-    });
-  }, [inputLayer]);
-  return referenceTimes;
-};
-
-var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
-  var layers = _ref.layers,
-      _ref$multiLegend = _ref.multiLegend,
-      multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
-
-  /* Get all the reference times for this layer */
-  var referenceTimes = useGetReferenceTimes(layers.topRow);
-  if (referenceTimes.length === 0) return /*#__PURE__*/React.createElement("div", null, "Loading...");
-  /* Helper to make a map layer prest */
-
-  var makeMapPreset = function makeMapPreset(referenceTime, uniqueId, layer, syncGroupsIds, col) {
-    return {
-      id: uniqueId,
-      title: "Harmonie run ".concat("".concat(referenceTime.substring(8, 13).replace('T', ' / '))),
-      bbox: {
-        left: -450651.2255879827,
-        bottom: 6490531.093143953,
-        right: 1428345.8183648037,
-        top: 7438773.776232235
-      },
-      srs: 'EPSG:3857',
-      layers: [Object.assign(Object.assign({}, layer), {
-        id: uniqueId,
-        dimensions: [{
-          name: 'reference_time',
-          currentValue: referenceTime
-        }]
-      })],
-      syncGroupsIds: syncGroupsIds,
-      displayLayerManagerAndLegendButtonInMap: col === 0 || !syncGroupsIds,
-      displayDimensionSelectButtonInMap: col === 0 || !syncGroupsIds
-    };
-  };
-  /* Make the preset */
-
-
-  var nCols = 5;
-  /* Add the harmonie air temperature layers with the different referencetimes */
-
-  var mapsTemperature = _toConsumableArray(Array(nCols)).map(function (_, index) {
-    var refTime = referenceTimes[referenceTimes.length - nCols + index];
-    return makeMapPreset(refTime, "harm_air".concat(index), layers.topRow, layers.topRowSyncGroups, index);
-  });
-  /* Add the harmonie precipitation layers with the different referencetimes */
-
-
-  var mapsPrecipitation = _toConsumableArray(Array(nCols)).map(function (_, index) {
-    var refTime = referenceTimes[referenceTimes.length - nCols + index];
-    return makeMapPreset(refTime, "harm_precip".concat(index), layers.bottomRow, layers.bottomRowSyncGroups, index);
-  });
-
-  var maps = mapsTemperature.concat(mapsPrecipitation);
-  return /*#__PURE__*/React.createElement(MultiMapViewConnect, {
-    rows: 2,
-    cols: 5,
-    maps: maps,
-    multiLegend: multiLegend
-  });
-};
-
 var useGetLatestReferenceTime = function useGetLatestReferenceTime(inputLayer) {
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -22275,8 +22949,30 @@ var useGetLatestReferenceTime = function useGetLatestReferenceTime(inputLayer) {
   }, [inputLayer]);
   return latestReferenceTime;
 };
-/* Helper to make a map layer preset */
+/**
+ * Custom hook to find out if the list of syncgroup id's contains a group which is of type SYNCGROUPS_TYPE_SETLAYERACTIONS
+ * @param syncGroupsIds A string array of syncgroup ids
+ * @returns True if indeed a group is included which is of type SYNCGROUPS_TYPE_SETLAYERACTIONS
+ */
+
+
+var useHasSyncGroupWithLayerActions = function useHasSyncGroupWithLayerActions(syncGroupsIds) {
+  /* Get Syncgroupstate */
+  var syncGroupState = useSelector(function (store) {
+    return getSynchronizationGroupState(store);
+  });
+  if (!syncGroupState) return false;
+  /* Return all syncgroups configured for this component of type SYNCGROUPS_TYPE_SETLAYERACTIONS */
 
+  var syncGroupsWithLayerActions = syncGroupState.groups.allIds.filter(function (syncGroupId) {
+    return syncGroupsIds && syncGroupsIds.includes(syncGroupId) && syncGroupState.groups.byId[syncGroupId].type === 'SYNCGROUPS_TYPE_SETLAYERACTIONS';
+  });
+  /* Figure out if there is a syncgroup which controls layeractions.  */
+
+  var displayLayerManagerAndLegendButtonInAllMaps = syncGroupsIds ? syncGroupsWithLayerActions.length === 1 : false;
+  return displayLayerManagerAndLegendButtonInAllMaps;
+};
+/* Helper to make a map layer preset */
 
 var makeMapPreset = function makeMapPreset(timeIncrement, uniqueId, referenceTime, layers, syncGroupsIds, displayLayerManagerAndLegendButtonInMap, displayDimensionSelectButtonInMap) {
   var mapTime = moment.utc(referenceTime).add(timeIncrement, 'h').format('YYYY-MM-DDTHH:mm:ss[Z]');
@@ -22318,8 +23014,9 @@ var ModelRunInterval = function ModelRunInterval(_ref) {
       startTimeIncrement = _ref$startTimeIncreme === void 0 ? 3 : _ref$startTimeIncreme,
       _ref$multiLegend = _ref.multiLegend,
       multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
-
+  var displayLayerManagerAndLegendButtonInAllMaps = !useHasSyncGroupWithLayerActions(syncGroupsIds);
   /* Get latest reference time for this layer */
+
   var latestReferenceTime = useGetLatestReferenceTime(layers[0]);
   if (latestReferenceTime === '') return /*#__PURE__*/React.createElement("div", null, "Loading...");
   /* Calculate the last time increment based on 15 maps */
@@ -22332,7 +23029,7 @@ var ModelRunInterval = function ModelRunInterval(_ref) {
 
 
   var maps = timeIncrements.map(function (increment, index) {
-    return makeMapPreset(increment, "harm_precip".concat(increment), latestReferenceTime, layers, syncGroupsIds, index === 0 || !syncGroupsIds, index === 0 || !syncGroupsIds);
+    return makeMapPreset(increment, "harm_precip".concat(increment), latestReferenceTime, layers, syncGroupsIds, index === 0 || displayLayerManagerAndLegendButtonInAllMaps, index === 0 || displayLayerManagerAndLegendButtonInAllMaps);
   });
   return /*#__PURE__*/React.createElement(MultiMapViewConnect, {
     rows: 3,
@@ -22340,6 +23037,94 @@ var ModelRunInterval = function ModelRunInterval(_ref) {
     maps: maps,
     syncTime: false,
     showTimeSlider: false,
+    multiLegend: multiLegend,
+    showClock: false
+  });
+};
+
+var useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      referenceTimes = _React$useState2[0],
+      setReferenceTimes = _React$useState2[1];
+
+  React.useEffect(function () {
+    var referenceTimes = [];
+    var wmLayer = new WMLayer(Object.assign({}, inputLayer));
+    wmLayer.parseLayerPromise().then(function (layer) {
+      var refTimeDim = layer.getDimension('reference_time');
+      /* Loop through all values of the dimension.
+         A map cannot be used for iterating,  as the dimension values are not in an array (it is an API). */
+
+      for (var j = 0; j < refTimeDim.size(); j += 1) {
+        var referenceTimeValue = refTimeDim.getValueForIndex(j);
+        referenceTimes.push(referenceTimeValue);
+      }
+
+      setReferenceTimes(referenceTimes);
+    });
+  }, [inputLayer]);
+  return referenceTimes;
+};
+
+var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
+  var layers = _ref.layers,
+      _ref$multiLegend = _ref.multiLegend,
+      multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
+  var displayLayerManagerAndLegendButtonInAllTopRows = !useHasSyncGroupWithLayerActions(layers && layers.topRowSyncGroups);
+  var displayLayerManagerAndLegendButtonInAllBottomRows = !useHasSyncGroupWithLayerActions(layers && layers.bottomRowSyncGroups);
+  /* Get all the reference times for this layer */
+
+  var referenceTimes = useGetReferenceTimes(layers.topRow);
+  if (referenceTimes.length === 0) return /*#__PURE__*/React.createElement("div", null, "Loading...");
+  /* Helper to make a map layer prest */
+
+  var makeMapPreset = function makeMapPreset(referenceTime, uniqueId, layer, syncGroupsIds, col) {
+    return {
+      id: uniqueId,
+      title: "Harmonie run ".concat("".concat(referenceTime.substring(8, 13).replace('T', ' / '))),
+      bbox: {
+        left: -450651.2255879827,
+        bottom: 6490531.093143953,
+        right: 1428345.8183648037,
+        top: 7438773.776232235
+      },
+      srs: 'EPSG:3857',
+      layers: [Object.assign(Object.assign({}, layer), {
+        id: uniqueId,
+        dimensions: [{
+          name: 'reference_time',
+          currentValue: referenceTime
+        }]
+      })],
+      syncGroupsIds: syncGroupsIds,
+      displayLayerManagerAndLegendButtonInMap: col === 0 || displayLayerManagerAndLegendButtonInAllTopRows,
+      displayDimensionSelectButtonInMap: col === 0 || displayLayerManagerAndLegendButtonInAllBottomRows
+    };
+  };
+  /* Make the preset */
+
+
+  var nCols = 5;
+  /* Add the harmonie air temperature layers with the different referencetimes */
+
+  var mapsTemperature = _toConsumableArray(Array(nCols)).map(function (_, index) {
+    var refTime = referenceTimes[referenceTimes.length - nCols + index];
+    return makeMapPreset(refTime, "harm_air".concat(index), layers.topRow, layers.topRowSyncGroups, index);
+  });
+  /* Add the harmonie precipitation layers with the different referencetimes */
+
+
+  var mapsPrecipitation = _toConsumableArray(Array(nCols)).map(function (_, index) {
+    var refTime = referenceTimes[referenceTimes.length - nCols + index];
+    return makeMapPreset(refTime, "harm_precip".concat(index), layers.bottomRow, layers.bottomRowSyncGroups, index);
+  });
+
+  var maps = mapsTemperature.concat(mapsPrecipitation);
+  return /*#__PURE__*/React.createElement(MultiMapViewConnect, {
+    rows: 2,
+    cols: 5,
+    maps: maps,
     multiLegend: multiLegend
   });
 };
@@ -22755,7 +23540,7 @@ var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
     dispatch(actions.syncGroupRemoveTarget(payload));
   }, [dispatch]);
 
-  var _useSetupDialog = useSetupDialog('syncGroups'),
+  var _useSetupDialog = useSetupDialog(DialogTypes.SyncGroups),
       dialogOrder = _useSetupDialog.dialogOrder,
       isDialogOpen = _useSetupDialog.isDialogOpen,
       onCloseDialog = _useSetupDialog.onCloseDialog,
@@ -22791,8 +23576,7 @@ var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 var store = createStore({
-  initialState: {},
-  extensions: [getSagaExtension({})]
+  extensions: [getSagaExtension()]
 });
 
 /* *
@@ -22973,9 +23757,7 @@ var SnackbarWrapper = function SnackbarWrapper(_a) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var SnackbarWrapperConnect = function SnackbarWrapperConnect(_a) {
-  var props = __rest(_a, []);
-
+var SnackbarWrapperConnect = withEggs([snackbarModuleConfig])(function (props) {
   var dispatch = useDispatch();
 
   var onCloseSnackbar = function onCloseSnackbar() {
@@ -22985,15 +23767,13 @@ var SnackbarWrapperConnect = function SnackbarWrapperConnect(_a) {
   var currentSnackbarMessage = useSelector(function (store) {
     return getFirstSnackbarMessage(store);
   });
-  return /*#__PURE__*/React.createElement(DynamicModuleLoader, {
-    modules: [snackbarModuleConfig]
-  }, /*#__PURE__*/React.createElement(SnackbarWrapper, Object.assign({
+  return /*#__PURE__*/React.createElement(SnackbarWrapper, Object.assign({
     isOpen: !!currentSnackbarMessage,
     onCloseSnackbar: onCloseSnackbar,
     message: currentSnackbarMessage ? currentSnackbarMessage.message : '',
     id: currentSnackbarMessage ? currentSnackbarMessage.id : ''
-  }, props)));
-};
+  }, props));
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23025,6 +23805,13 @@ var CoreThemeProvider = function CoreThemeProvider(_ref) {
     theme: theme
   }, children);
 };
+var ThemeWrapperWithModules = withEggs(coreModuleConfig)(function (_ref2) {
+  var theme = _ref2.theme,
+      children = _ref2.children;
+  return /*#__PURE__*/React__default.createElement(CoreThemeProvider, {
+    theme: theme
+  }, children, " ");
+});
 /**
  * A Provider component which provides the GeoWeb theme and store for the core.
  * Note: Should only be used with core components, as the provided store is only for core.
@@ -23032,18 +23819,16 @@ var CoreThemeProvider = function CoreThemeProvider(_ref) {
  * @returns
  */
 
-var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
-  var children = _ref2.children,
-      _ref2$theme = _ref2.theme,
-      theme = _ref2$theme === void 0 ? lightTheme : _ref2$theme,
-      store = _ref2.store;
+var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref3) {
+  var children = _ref3.children,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? lightTheme : _ref3$theme,
+      store = _ref3.store;
   return /*#__PURE__*/React__default.createElement(Provider, {
     store: store
-  }, /*#__PURE__*/React__default.createElement(DynamicModuleLoader, {
-    modules: coreModuleConfig
-  }, /*#__PURE__*/React__default.createElement(CoreThemeProvider, {
+  }, /*#__PURE__*/React__default.createElement(ThemeWrapperWithModules, {
     theme: theme
-  }, /*#__PURE__*/React__default.createElement(SnackbarWrapperConnect, null, children))));
+  }, /*#__PURE__*/React__default.createElement(SnackbarWrapperConnect, null, children)));
 };
 
 /* *