@opengeoweb/core 4.3.0 → 4.4.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@mui/material/Tooltip'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@mui/material/Tooltip', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.webmap, global.reactSortablejs, global.Sortable, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.Tooltip, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, webmap, reactSortablejs, Sortable, formFields, reactHookForm, reactWindow, Box, Typography, Grid, Tooltip, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@mui/material/Tooltip'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('@mui/system'), require('react-draggable'), require('re-resizable'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@mui/material/Tooltip', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', '@mui/system', 'react-draggable', 're-resizable', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.webmap, global.reactSortablejs, global.Sortable, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.Tooltip, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.system, global.Draggable, global.reResizable, global.reduxToolkit, global.sagaExtension));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, webmap, reactSortablejs, Sortable, formFields, reactHookForm, reactWindow, Box, Typography, Grid, Tooltip, throttleDebounce, cloneDeep, proj4, turf, system, Draggable, reResizable, reduxToolkit, sagaExtension) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -37,6 +37,7 @@
     var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
     var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
     var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
+    var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -208,6 +209,7 @@
       LayerActionOrigin["ReactMapViewParseLayer"] = "ReactMapViewParseLayer";
       LayerActionOrigin["setLayerDimensionSaga"] = "setLayerDimensionSaga";
       LayerActionOrigin["toggleAutoUpdateSaga"] = "toggleAutoUpdateSaga";
+      LayerActionOrigin["unregisterMapSaga"] = "unregisterMapSaga";
     })(LayerActionOrigin || (LayerActionOrigin = {}));
 
     /* *
@@ -456,6 +458,11 @@
     var getSpeedFactor = function getSpeedFactor(speedDelay) {
       return defaultDelay / speedDelay;
     };
+    var getSelectedTime = function getSelectedTime(timeDimension) {
+      var currentValueIsValid = timeDimension && timeDimension.currentValue && moment__default["default"].utc(timeDimension.currentValue).isValid();
+      var selectedTime = currentValueIsValid && timeDimension ? moment__default["default"].utc(timeDimension.currentValue).unix() : moment__default["default"].utc().unix();
+      return selectedTime;
+    };
     /**
      * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
      */
@@ -465,13 +472,12 @@
         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__default["default"].utc(timeDimension.minValue).unix() : defaultStartEnd;
       var endTime = timeDimension && timeDimension.maxValue ? moment__default["default"].utc(timeDimension.maxValue).unix() : defaultStartEnd;
-      var currentValueIsValid = timeDimension && timeDimension.currentValue && moment__default["default"].utc(timeDimension.currentValue).isValid();
-      var selectedTime = currentValueIsValid ? moment__default["default"].utc(timeDimension.currentValue).unix() : moment__default["default"].utc().unix();
+      var selectedTime = getSelectedTime(timeDimension);
       return {
         selectedTime: selectedTime,
         startTime: startTime,
@@ -506,22 +512,12 @@
     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;
@@ -543,7 +539,9 @@
     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__default["default"].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__default["default"].unix(newTime).toISOString();
       onsetNewDateDebounced(selectedTimeString, onSetNewDate);
     };
     var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
@@ -570,6 +568,32 @@
        */
       [2147483647, 0]);
     };
+    var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
+      var prevTimeStep = moment__default["default"].utc(curTime).subtract(timeStep, 'm').toISOString();
+
+      if (!prevTimeStep) {
+        return;
+      }
+
+      if (moment__default["default"].utc(prevTimeStep) < moment__default["default"].utc(dataStartTime * millisecondsInSecond)) {
+        return;
+      }
+
+      onsetNewDateDebounced(prevTimeStep, onSetNewDate);
+    };
+    var setNextTimeStep = function setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate) {
+      var nextTimeStep = moment__default["default"].utc(curTime).add(timeStep, 'm').toISOString();
+
+      if (!nextTimeStep) {
+        return;
+      }
+
+      if (moment__default["default"].utc(nextTimeStep) > moment__default["default"].utc(dataEndTime * millisecondsInSecond)) {
+        return;
+      }
+
+      onsetNewDateDebounced(nextTimeStep, onSetNewDate);
+    };
     var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInterval) {
       switch (timeInterval.isRegularInterval) {
         case false:
@@ -2683,6 +2707,22 @@
         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 = toolkit.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
      *
@@ -4787,8 +4827,8 @@
      * @returns {object} returnType: SynchronizationGroupState
      */
 
-    toolkit.createSelector(syncGroupStore, function (store) {
-      return store || [];
+    var getSynchronizationGroupState = toolkit.createSelector(syncGroupStore, function (store) {
+      return store || null;
     });
     var getSynchronizationGroup = function getSynchronizationGroup(state, id) {
       return syncGroupStore(state).groups.byId[id];
@@ -5844,25 +5884,9 @@
       });
     }
 
-    /* *
-     * 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]
@@ -6025,12 +6049,12 @@
      * 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]
@@ -6355,7 +6379,7 @@
     };
     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 = {
@@ -7035,11 +7059,11 @@
           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;
         }
 
@@ -8435,6 +8459,39 @@
         }
       });
     }
+    function unregisterMapSaga(_a) {
+      var mapId, layerList;
+      var payload = _a.payload;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            mapId = payload.mapId;
+            return [4
+            /*yield*/
+            , effects.select(getLayersByMapId, mapId)];
+
+          case 1:
+            layerList = _b.sent();
+            return [4
+            /*yield*/
+            , effects.all(layerList.map(function (layer) {
+              return effects.put(layerActions.layerDelete({
+                mapId: mapId,
+                layerId: layer.id,
+                layerIndex: 0,
+                origin: LayerActionOrigin.unregisterMapSaga
+              }));
+            }))];
+
+          case 2:
+            _b.sent();
+
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
     function rootSaga$2() {
       return __generator(this, function (_a) {
         switch (_a.label) {
@@ -8492,6 +8549,13 @@
           case 7:
             _a.sent();
 
+            return [4
+            /*yield*/
+            , effects.takeEvery(mapActions$1.unregisterMap.type, unregisterMapSaga)];
+
+          case 8:
+            _a.sent();
+
             return [2
             /*return*/
             ];
@@ -8499,25 +8563,9 @@
       });
     }
 
-    /* *
-     * 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
@@ -8595,13 +8643,16 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     function newServiceAddedSaga(capturedAction) {
-      var addedService, id, serviceUrl, name, scope, _abstract, keywords, groups;
+      var addedService, id, serviceUrl, name, scope, _abstract, isUpdating, keywords, groups;
 
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
             addedService = capturedAction.payload;
-            id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, scope = addedService.scope, _abstract = addedService["abstract"];
+            id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, scope = addedService.scope, _abstract = addedService["abstract"], isUpdating = addedService.isUpdating;
+            if (isUpdating) return [2
+            /*return*/
+            ];
             keywords = addedService.layers.reduce(function (keywords, layer) {
               var _a;
 
@@ -8641,6 +8692,131 @@
         }
       });
     }
+    function layerSelectCloseInfoDialogSaga(_a) {
+      var _b, togglePayload, activeMapIdPayload, isLayerInfoDialogOpen, isLayerInfoDialogOpen, filteredLayers, dialogInfo;
+
+      var type = _a.type,
+          payload = _a.payload;
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            _b = type;
+
+            switch (_b) {
+              case uiActions.setToggleOpenDialog.type:
+                return [3
+                /*break*/
+                , 1];
+
+              case uiActions.setActiveMapIdForDialog.type:
+                return [3
+                /*break*/
+                , 4];
+            }
+
+            return [3
+            /*break*/
+            , 8];
+
+          case 1:
+            togglePayload = payload;
+            if (!(!togglePayload.setOpen && togglePayload.type === DialogTypes.LayerSelect)) return [3
+            /*break*/
+            , 3];
+            return [4
+            /*yield*/
+            , effects.put(uiActions.setToggleOpenDialog({
+              type: DialogTypes.LayerInfo,
+              setOpen: false
+            }))];
+
+          case 2:
+            _c.sent();
+
+            _c.label = 3;
+
+          case 3:
+            return [3
+            /*break*/
+            , 13];
+
+          case 4:
+            activeMapIdPayload = payload;
+            if (!!activeMapIdPayload.setOpen) return [3
+            /*break*/
+            , 7];
+            return [4
+            /*yield*/
+            , effects.select(getisDialogOpen, DialogTypes.LayerInfo)];
+
+          case 5:
+            isLayerInfoDialogOpen = _c.sent();
+            if (!isLayerInfoDialogOpen) return [3
+            /*break*/
+            , 7];
+            return [4
+            /*yield*/
+            , effects.put(uiActions.setToggleOpenDialog({
+              type: DialogTypes.LayerInfo,
+              setOpen: false
+            }))];
+
+          case 6:
+            _c.sent();
+
+            _c.label = 7;
+
+          case 7:
+            return [3
+            /*break*/
+            , 13];
+
+          case 8:
+            return [4
+            /*yield*/
+            , effects.select(getisDialogOpen, DialogTypes.LayerInfo)];
+
+          case 9:
+            isLayerInfoDialogOpen = _c.sent();
+            if (!isLayerInfoDialogOpen) return [3
+            /*break*/
+            , 13];
+            return [4
+            /*yield*/
+            , effects.select(getFilteredLayers)];
+
+          case 10:
+            filteredLayers = _c.sent();
+            return [4
+            /*yield*/
+            , effects.select(getActiveLayerInfo)];
+
+          case 11:
+            dialogInfo = _c.sent();
+            if (!!filteredLayers.map(function (layer) {
+              return layer.text;
+            }).includes(dialogInfo.text)) return [3
+            /*break*/
+            , 13];
+            return [4
+            /*yield*/
+            , effects.put(uiActions.setToggleOpenDialog({
+              type: DialogTypes.LayerInfo,
+              setOpen: false
+            }))];
+
+          case 12:
+            _c.sent();
+
+            _c.label = 13;
+
+          case 13:
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
     function layerSelectRemoveServiceSaga(capturedAction) {
       var removedService, serviceId, serviceUrl, results, services, servicesEnabled;
       return __generator(this, function (_a) {
@@ -8755,6 +8931,13 @@
           case 4:
             _a.sent();
 
+            return [4
+            /*yield*/
+            , effects.takeEvery([uiActions.setToggleOpenDialog.type, uiActions.setActiveMapIdForDialog.type, layerSelectActions.disableActiveService.type, layerSelectActions.toggleFilter.type, layerSelectActions.setSearchFilter.type], layerSelectCloseInfoDialogSaga)];
+
+          case 5:
+            _a.sent();
+
             return [2
             /*return*/
             ];
@@ -8762,25 +8945,9 @@
       });
     }
 
-    /* *
-     * 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]
@@ -8911,7 +9078,7 @@
      * */
     var snackbarModuleConfig = {
       id: 'snackbar-module',
-      reducerMap: {
+      reducersMap: {
         snackbar: reducer
       },
       sagas: [rootSaga]
@@ -8992,6 +9159,7 @@
       return new Promise(function (resolve, reject) {
         var serviceObject = webmap.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) {
@@ -9411,7 +9579,7 @@
     		},
     		{
     			name: "KNMIgeoservicesObs",
-    			url: "https://geoservices.knmi.nl/adagucserver?dataset=OBS&service=WMS&",
+    			url: "https://geoservices.knmi.nl/adagucserver?dataset=OBS",
     			id: "KNMIgeoservicesObs"
     		},
     		{
@@ -10227,7 +10395,9 @@
         }, /*#__PURE__*/React__namespace.createElement(material.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
           }
@@ -10630,9 +10800,7 @@
           services = _a.services,
           mapId = _a.mapId,
           _b = _a.onLayerRowClick,
-          onLayerRowClick = _b === void 0 ? function () {
-        return null;
-      } : _b,
+          onLayerRowClick = _b === void 0 ? function () {} : _b,
           _c = _a.isEnabled,
           isEnabled = _c === void 0 ? true : _c,
           _d = _a.isLayerMissing,
@@ -11042,39 +11210,93 @@
       var isLayerEnabled = reactRedux.useSelector(function (store) {
         return getLayerEnabled(store, layerId);
       });
-      var layers = reactRedux.useSelector(function (store) {
-        return getLayersFromService$1(store, layerService);
-      });
-      var layerChangeName = React__namespace.useCallback(function (_a) {
-        var layerId = _a.layerId,
-            name = _a.name;
-        return dispatch(layerActions.layerChangeName({
-          layerId: layerId,
-          name: name,
-          mapId: mapId,
-          origin: LayerActionOrigin.layerManager
-        }));
-      }, [dispatch, mapId]);
-      return /*#__PURE__*/React__namespace.createElement(RenderLayers, {
-        layers: layers,
-        layerName: layerName,
-        onChangeLayerName: function onChangeLayerName(name) {
-          layerChangeName({
-            layerId: layerId,
-            name: name
-          });
-        },
-        isEnabled: isLayerEnabled
+      var service = reactRedux.useSelector(function (store) {
+        return getServiceByName(store, layerService);
       });
-    };
+      var serviceSetLayers = React__namespace.useCallback(function (payload) {
+        dispatch(serviceActions.serviceSetLayers(payload));
+      }, [dispatch]);
 
-    /* *
-     * 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
-     *
+      var addService = function addService(serviceUrl) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var layers_1, wmService, error_1;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                _a.trys.push([0, 2,, 3]);
+
+                return [4
+                /*yield*/
+                , getLayersFlattenedFromService(serviceUrl)];
+
+              case 1:
+                layers_1 = _a.sent();
+                wmService = webmap.WMGetServiceFromStore(serviceUrl);
+                serviceSetLayers({
+                  id: wmService.id,
+                  name: wmService.title,
+                  serviceUrl: serviceUrl,
+                  layers: layers_1,
+                  scope: 'user',
+                  "abstract": wmService["abstract"]
+                });
+                return [3
+                /*break*/
+                , 3];
+
+              case 2:
+                error_1 = _a.sent();
+                console.warn(error_1.message);
+                return [3
+                /*break*/
+                , 3];
+
+              case 3:
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
+      };
+
+      if (!service) {
+        addService(layerService);
+      }
+
+      var layers = reactRedux.useSelector(function (store) {
+        return getLayersFromService$1(store, layerService);
+      });
+      var layerChangeName = React__namespace.useCallback(function (_a) {
+        var layerId = _a.layerId,
+            name = _a.name;
+        return dispatch(layerActions.layerChangeName({
+          layerId: layerId,
+          name: name,
+          mapId: mapId,
+          origin: LayerActionOrigin.layerManager
+        }));
+      }, [dispatch, mapId]);
+      return /*#__PURE__*/React__namespace.createElement(RenderLayers, {
+        layers: layers,
+        layerName: layerName,
+        onChangeLayerName: function onChangeLayerName(name) {
+          layerChangeName({
+            layerId: layerId,
+            name: name
+          });
+        },
+        isEnabled: isLayerEnabled
+      });
+    };
+
+    /* *
+     * 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.
@@ -12005,6 +12227,37 @@
 
       return true;
     };
+    var loadWMSService = function loadWMSService(serviceUrl, forceReload) {
+      if (forceReload === void 0) {
+        forceReload = false;
+      }
+
+      return __awaiter(void 0, void 0, void 0, function () {
+        var layers, service;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              return [4
+              /*yield*/
+              , getLayersFlattenedFromService(serviceUrl, forceReload)];
+
+            case 1:
+              layers = _a.sent();
+              service = webmap.WMGetServiceFromStore(serviceUrl);
+              return [2
+              /*return*/
+              , {
+                id: service.id,
+                name: service.title,
+                serviceUrl: serviceUrl,
+                "abstract": service["abstract"],
+                layers: layers,
+                scope: 'user'
+              }];
+          }
+        });
+      });
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -12159,77 +12412,40 @@
 
       var addNewService = function addNewService(formValues) {
         return __awaiter(void 0, void 0, void 0, function () {
-          var layers, serviceLayers, _a, _b, object, service;
-
-          var e_1, _c;
-
-          return __generator(this, function (_d) {
-            switch (_d.label) {
+          var layersForService;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
               case 0:
                 clearErrors(fields.serviceUrl.name);
                 setIsLoading(true);
-                _d.label = 1;
+                _a.label = 1;
 
               case 1:
-                _d.trys.push([1, 3,, 4]);
+                _a.trys.push([1, 3,, 4]);
 
                 return [4
                 /*yield*/
-                , getLayersFromService(formValues.serviceUrl)];
+                , loadWMSService(formValues.serviceUrl, true)];
 
               case 2:
-                layers = _d.sent();
-
-                if (layers.children) {
-                  serviceLayers = [];
-
-                  try {
-                    for (_a = __values(layers.children), _b = _a.next(); !_b.done; _b = _a.next()) {
-                      object = _b.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 (e_1_1) {
-                    e_1 = {
-                      error: e_1_1
-                    };
-                  } finally {
-                    try {
-                      if (_b && !_b.done && (_c = _a["return"])) _c.call(_a);
-                    } finally {
-                      if (e_1) throw e_1.error;
-                    }
-                  }
-
-                  service = webmap.WMGetServiceFromStore(formValues.serviceUrl);
-                  serviceSetLayers({
-                    id: service.id,
-                    name: formValues.serviceName,
-                    serviceUrl: formValues.serviceUrl,
-                    "abstract": formValues.serviceAbstracts,
-                    layers: serviceLayers,
-                    scope: 'user'
-                  });
-                  setIsLoading(false);
-                  showSnackbar(getSuccesMessage(formValues.serviceName));
-                  closePopup();
-                }
-
+                layersForService = _a.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();
                 return [3
                 /*break*/
                 , 4];
 
               case 3:
-                _d.sent();
+                _a.sent();
                 setIsLoading(false);
                 setError(fields.serviceUrl.name, {
                   message: VALIDATIONS_REQUEST_FAILED,
@@ -12413,7 +12629,7 @@
         InputProps: {
           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__namespace.createElement(InitialValidationsTrigger, {
@@ -13029,17 +13245,17 @@
      * */
 
     var LayerInfoDialog = function LayerInfoDialog(_a) {
-      var _b;
+      var _b, _c;
 
       var onClose = _a.onClose,
           layer = _a.layer,
           isOpen = _a.isOpen,
-          _c = _a.onMouseDown,
-          onMouseDown = _c === void 0 ? function () {} : _c,
-          _d = _a.order,
-          order = _d === void 0 ? 0 : _d,
-          _e = _a.source,
-          source = _e === void 0 ? 'app' : _e,
+          _d = _a.onMouseDown,
+          onMouseDown = _d === void 0 ? function () {} : _d,
+          _e = _a.order,
+          order = _e === void 0 ? 0 : _e,
+          _f = _a.source,
+          source = _f === void 0 ? 'app' : _f,
           dialogHeight = _a.dialogHeight;
       var styles = getLayerStyles(layer);
       var bbox = getLayerBbox(layer);
@@ -13095,7 +13311,7 @@
         title: layer.text,
         name: layer.name,
         dimensions: layer.dimensions,
-        legendURL: layer.styles && layer.styles.length && layer.styles[0].legendURL
+        legendURL: ((_c = layer.styles) === null || _c === void 0 ? void 0 : _c.length) ? layer.styles[0].legendURL : undefined
       })));
     };
 
@@ -13545,6 +13761,7 @@
           isSelected = _a.isSelected,
           isDisabled = _a.isDisabled,
           toggleChip = _a.toggleChip;
+      var chip = all ? 'all' : service && service.serviceUrl;
       return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: " + service["abstract"] : ''
       }, /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
@@ -13553,10 +13770,10 @@
         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
@@ -13813,7 +14030,7 @@
      * */
     var styles$1 = {
       servicesContainer: {
-        width: '300px',
+        width: '360px',
         maxHeight: '380px',
         top: '140px',
         backgroundColor: 'geowebColors.background.surface',
@@ -13828,6 +14045,10 @@
         backgroundColor: 'geowebColors.background.surface',
         zIndex: 100
       },
+      loading: {
+        position: 'absolute',
+        zIndex: 101
+      },
       footer: {
         display: 'flex',
         justifyContent: 'center',
@@ -13848,8 +14069,11 @@
     var ServiceOptionsDialog = function ServiceOptionsDialog(_a) {
       var services = _a.services,
           layerSelectRemoveService = _a.layerSelectRemoveService,
+          layerSelectReloadService = _a.layerSelectReloadService,
           selectedLayers = _a.selectedLayers,
-          setServicePopupInfo = _a.setServicePopupInfo;
+          setServicePopupInfo = _a.setServicePopupInfo,
+          _b = _a.isLoading,
+          isLoading = _b === void 0 ? false : _b;
 
       var openAddService = function openAddService() {
         setServicePopupInfo({
@@ -13863,9 +14087,13 @@
         "data-testid": "ServiceDialog"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: styles$1.header
-      }, "Services"), /*#__PURE__*/React__namespace.createElement(Rows, {
+      }, "Services"), /*#__PURE__*/React__namespace.createElement(material.Backdrop, {
+        sx: styles$1.loading,
+        open: isLoading
+      }, /*#__PURE__*/React__namespace.createElement(material.CircularProgress, null)), /*#__PURE__*/React__namespace.createElement(Rows, {
         services: services,
         layerSelectRemoveService: layerSelectRemoveService,
+        layerSelectReloadService: layerSelectReloadService,
         setServicePopupInfo: setServicePopupInfo,
         selectedLayers: selectedLayers
       }), /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -13881,6 +14109,7 @@
 
     var Rows = function Rows(_a) {
       var services = _a.services,
+          layerSelectReloadService = _a.layerSelectReloadService,
           layerSelectRemoveService = _a.layerSelectRemoveService,
           setServicePopupInfo = _a.setServicePopupInfo,
           selectedLayers = _a.selectedLayers;
@@ -13912,18 +14141,31 @@
           noWrap: true,
           style: {
             textOverflow: 'ellipsis',
-            paddingRight: '60px'
+            paddingRight: '70px'
           }
         }, serviceName)), /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, {
           style: {
-            marginRight: '-10px',
-            width: 90
+            marginRight: '0px',
+            width: 100
           }
         }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
           container: true
         }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
           item: true,
-          xs: 6
+          xs: 4
+        }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+          title: "Update layers from WMS service",
+          "data-testid": "updateServiceTooltip"
+        }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+          "data-testid": "updateServiceButton",
+          "aria-label": "Update layers from WMS service",
+          size: "large",
+          onClick: function onClick() {
+            return layerSelectReloadService(serviceUrl);
+          }
+        }, /*#__PURE__*/React__namespace.createElement(theme.Cached, null)))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+          item: true,
+          xs: 4
         }, userAddedService ? /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
           title: "Edit Service"
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
@@ -13954,7 +14196,7 @@
           }
         }, /*#__PURE__*/React__namespace.createElement(theme.Visibility, null))))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
           item: true,
-          xs: 6
+          xs: 4
         }, userAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
           title: serviceHasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service',
           "data-testid": "removeServiceTooltip"
@@ -13987,9 +14229,30 @@
      * 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 \"" + serviceName + "\" has been succesfully updated";
+    };
+    var getServiceFailedUpdateMessage = function getServiceFailedUpdateMessage(error) {
+      return "Unable to update service, reason: \"" + error.message + "\"";
+    };
+
     var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_a) {
       var mapId = _a.mapId,
           setServicePopupInfo = _a.setServicePopupInfo;
+
+      var _b = __read(React__namespace.useState(false), 2),
+          isLoading = _b[0],
+          setIsLoading = _b[1];
+
       var dispatch = reactRedux.useDispatch();
       var layerSelectRemoveService = React__namespace.useCallback(function (serviceId, serviceUrl) {
         dispatch(layerSelectActions.layerSelectRemoveService({
@@ -13997,17 +14260,87 @@
           serviceUrl: serviceUrl
         }));
       }, [dispatch]);
+      var serviceSetLayers = React__namespace.useCallback(function (payload) {
+        dispatch(serviceActions.serviceSetLayers(__assign(__assign({}, payload), {
+          isUpdating: true
+        })));
+      }, [dispatch]);
+      var showSnackbar = React__namespace.useCallback(function (message) {
+        dispatch(snackbarActions.openSnackbar({
+          message: message
+        }));
+      }, [dispatch]);
       var services = reactRedux.useSelector(function (store) {
         return getActiveServices(store);
       });
       var selectedLayers = reactRedux.useSelector(function (store) {
         return getMapLayers(store, mapId);
       });
+      var layerSelectReloadService = React__namespace.useCallback(function (serviceUrl) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var layersForService, service, serviceTitle, error_1;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                setIsLoading(true);
+                _a.label = 1;
+
+              case 1:
+                _a.trys.push([1, 3, 4, 5]);
+
+                return [4
+                /*yield*/
+                , loadWMSService(serviceUrl, true)];
+
+              case 2:
+                layersForService = _a.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
+                });
+                webmap.clearImageCache();
+                serviceTitle = service && service.serviceName || layersForService.name;
+                showSnackbar(getServiceSuccesUpdateMessage(serviceTitle));
+                return [3
+                /*break*/
+                , 5];
+
+              case 3:
+                error_1 = _a.sent(); // 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(error_1));
+                return [3
+                /*break*/
+                , 5];
+
+              case 4:
+                setIsLoading(false);
+                return [7
+                /*endfinally*/
+                ];
+
+              case 5:
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
+      }, [serviceSetLayers, services, showSnackbar]);
       return /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialog, {
         selectedLayers: selectedLayers,
         services: services,
         layerSelectRemoveService: layerSelectRemoveService,
-        setServicePopupInfo: setServicePopupInfo
+        layerSelectReloadService: layerSelectReloadService,
+        setServicePopupInfo: setServicePopupInfo,
+        isLoading: isLoading
       });
     };
 
@@ -16077,9 +16410,7 @@
 
     var NowButton = function NowButton(_a) {
       var _b = _a.onSetNow,
-          onSetNow = _b === void 0 ? function () {
-        return null;
-      } : _b,
+          onSetNow = _b === void 0 ? function () {} : _b,
           _c = _a.disabled,
           disabled = _c === void 0 ? false : _c;
       return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
@@ -16112,91 +16443,124 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var OptionsPopOver = material.styled(material.Popover)(function (_a) {
-      var theme = _a.theme;
-      return {
-        '& .MuiPaper-root': {
-          padding: '5px',
-          overflow: 'visible',
-          backgroundColor: theme.palette.geowebColors.background.surface
-        }
-      };
-    });
 
     var OptionsMenuButton = function OptionsMenuButton(_a) {
       var nowBtn = _a.nowBtn,
           autoUpdateBtn = _a.autoUpdateBtn,
           speedBtn = _a.speedBtn,
           timeStepBtn = _a.timeStepBtn,
-          timeScaleBtn = _a.timeScaleBtn;
-
-      var _b = __read(React__namespace.useState(null), 2),
-          anchorEl = _b[0],
-          setAnchorEl = _b[1];
+          timeScaleBtn = _a.timeScaleBtn,
+          _b = _a.isOpenByDefault,
+          isOpenByDefault = _b === void 0 ? false : _b;
 
-      var onClickButton = function onClickButton(event) {
-        setAnchorEl(event.currentTarget);
-      };
+      var _c = __read(React.useState(null), 2),
+          anchorEl = _c[0],
+          setAnchorEl = _c[1];
 
-      var handleClose = function handleClose() {
-        setAnchorEl(null);
-      };
+      var _d = __read(React.useState(false), 2),
+          open = _d[0],
+          setOpen = _d[1];
 
-      var open = Boolean(anchorEl);
-      var id = open ? 'simple-popover' : undefined;
-      return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+      React.useEffect(function () {
+        if (anchorEl && isOpenByDefault) {
+          setOpen(true);
+        }
+      }, [anchorEl, isOpenByDefault]);
+      return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Animation options",
         placement: "bottom"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
-        onClick: onClickButton,
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        ref: function ref(_ref) {
+          setAnchorEl(_ref);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+        onClick: function onClick() {
+          setOpen(!open);
+        },
         "data-testid": "optionsMenuButton",
         active: open,
         "aria-label": "animation options"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Options, null)))), /*#__PURE__*/React__namespace.createElement(OptionsPopOver, {
-        id: id,
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Options, null)))), /*#__PURE__*/React__default["default"].createElement(material.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["default"].createElement(material.Paper, {
+        elevation: 3
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        sx: {
+          padding: '0px 10px 10px'
         },
-        transformOrigin: {
-          vertical: 'bottom',
-          horizontal: 'left'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         spacing: 1
-      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
-      }, nowBtn || /*#__PURE__*/React__namespace.createElement(NowButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, nowBtn || /*#__PURE__*/React__default["default"].createElement(NowButton, null)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
-      }, timeScaleBtn || /*#__PURE__*/React__namespace.createElement(TimeScaleButton, {
+      }, timeScaleBtn || /*#__PURE__*/React__default["default"].createElement(TimeScaleButton, {
         centerTime: 0,
         onChangeTimeSliderScale: function onChangeTimeSliderScale() {},
         secondsPerPx: 0,
         selectedTime: 0,
         timeSliderScale: 0
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
-      }, timeStepBtn || /*#__PURE__*/React__namespace.createElement(TimeStepButton, {
+      }, timeStepBtn || /*#__PURE__*/React__default["default"].createElement(TimeStepButton, {
         timeStep: 0,
         onChangeTimeStep: function onChangeTimeStep() {}
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
-      }, speedBtn || /*#__PURE__*/React__namespace.createElement(SpeedButton, {
+      }, speedBtn || /*#__PURE__*/React__default["default"].createElement(SpeedButton, {
         animationDelay: defaultAnimationDelayAtStart,
         setMapAnimationDelay: function setMapAnimationDelay() {}
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
-      }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)))));
+      }, autoUpdateBtn || /*#__PURE__*/React__default["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(_a) {
+      var isForwardStep = _a.isForwardStep,
+          isDisabled = _a.isDisabled,
+          _b = _a.onClickBFButton,
+          onClickBFButton = _b === void 0 ? function () {} : _b;
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: isForwardStep ? forwardTooltipTitle : backwardTooltipTitle
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        disabled: isDisabled,
+        "aria-label": isForwardStep ? 'forward' : 'backward',
+        onClick: onClickBFButton
+      }, isForwardStep ? /*#__PURE__*/React__namespace.createElement(theme.StepForward, {
+        "data-testid": "step-forward-svg-path"
+      }) : /*#__PURE__*/React__namespace.createElement(theme.StepBackward, {
+        "data-testid": "step-backward-svg-path"
+      }))));
     };
 
     /* *
@@ -16218,16 +16582,28 @@
 
     var TimeSliderButtons = function TimeSliderButtons(_a) {
       var optionsMenuBtn = _a.optionsMenuBtn,
-          playBtn = _a.playBtn;
+          playBtn = _a.playBtn,
+          backwardBtn = _a.backwardBtn,
+          forwardBtn = _a.forwardBtn;
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-testid": "timeSliderButtons"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
-        spacing: 2
+        spacing: 0.5,
+        alignItems: "center",
+        justifyContent: "center"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, optionsMenuBtn || /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
+      }, backwardBtn || /*#__PURE__*/React__namespace.createElement(BackwardForwardStepButton, {
+        isForwardStep: false
+      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true
+      }, forwardBtn || /*#__PURE__*/React__namespace.createElement(BackwardForwardStepButton, {
+        isForwardStep: true
+      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true
       }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton, null))));
     };
 
@@ -16798,13 +17174,30 @@
       }
     };
 
-    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 _a = theme.palette.geowebColors.timeSlider,
-          timelineTimelineSurface = _a.timelineTimelineSurface,
-          timelineNightTime = _a.timelineNightTime;
-      ctx.fillStyle = timelineTimelineSurface.fill;
-      ctx.fillRect(0, 0, canvasWidth, height);
+          timelineNightTime = _a.timelineNightTime,
+          ledgendObservedBackground = _a.ledgendObservedBackground,
+          legendForecastBackground = _a.legendForecastBackground,
+          legendNoDataBackground = _a.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);
@@ -16900,7 +17293,7 @@
       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 _a = __read([0, canvasWidth].map(function (px) {
@@ -16909,13 +17302,17 @@
           visibleTimeStart = _a[0],
           visibleTimeEnd = _a[1];
 
-      var _b = __read([animationStartTime, animationEndTime].map(function (time) {
+      var _b = __read([animationStartTime, animationEndTime, dataStartTime, dataEndTime, currentTimeUnix].map(function (time) {
         return timestampToPixel(time, centerTime, canvasWidth, secondsPerPx);
-      }), 2),
+      }), 5),
           animationStartPx = _b[0],
-          animationEndPx = _b[1];
+          animationEndPx = _b[1],
+          dataStartPx = _b[2],
+          dataEndPx = _b[3],
+          currentTimePx = _b[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);
@@ -17039,7 +17436,9 @@
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "timeSliderLegend",
         sx: {
-          height: TIME_SLIDER_LEGEND_HEIGHT + "px"
+          height: TIME_SLIDER_LEGEND_HEIGHT + "px",
+          borderRadius: '4.5px',
+          overflow: 'hidden'
         }
       }, /*#__PURE__*/React__namespace.createElement(CanvasComponent, {
         ref: node,
@@ -17091,12 +17490,12 @@
           }
         },
         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);
         }
       }));
     };
 
-    var TIME_SLIDER_LEGEND_HEIGHT = 50;
+    var TIME_SLIDER_LEGEND_HEIGHT = 24;
 
     /* eslint-disable no-param-reassign */
 
@@ -17303,21 +17702,6 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-
-    var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
-      var prevTimeStep = moment__default["default"].utc(curTime).subtract(timeStep, 'm').toISOString();
-      if (!prevTimeStep) return;
-      if (moment__default["default"].utc(prevTimeStep) < moment__default["default"].utc(dataStartTime * 1000)) return;
-      onsetNewDateDebounced(prevTimeStep, onSetNewDate);
-    };
-
-    var setNextTimeStep = function setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate) {
-      var nextTimeStep = moment__default["default"].utc(curTime).add(timeStep, 'm').toISOString();
-      if (!nextTimeStep) return;
-      if (moment__default["default"].utc(nextTimeStep) > moment__default["default"].utc(dataEndTime * 1000)) return;
-      onsetNewDateDebounced(nextTimeStep, onSetNewDate);
-    };
-
     var DRAG_AREA_WIDTH = 10;
     var DRAG_HANDLER_AREA_WIDTH = 30;
 
@@ -17622,11 +18006,42 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
-    var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
-      React__namespace.useEffect(function () {
-        var handleKeyDown = function handleKeyDown(event) {
-          var target = event.target;
-
+    var HideSliderButton = function HideSliderButton(_a) {
+      var isVisible = _a.isVisible,
+          toggleTimeSliderIsVisible = _a.toggleTimeSliderIsVisible;
+      return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: isVisible ? 'Hide timeslider' : 'Show timeslider',
+        "data-testid": "autoUpdateButtonTooltip"
+      }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+        onClick: function onClick() {
+          toggleTimeSliderIsVisible(!isVisible);
+        },
+        "data-testid": "hideTimeSliderButton"
+      }, isVisible ? /*#__PURE__*/React__default["default"].createElement(theme.ChevronDown, null) : /*#__PURE__*/React__default["default"].createElement(theme.ChevronUp, 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 useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider) {
+      React__namespace.useEffect(function () {
+        var handleKeyDown = function handleKeyDown(event) {
+          var target = event.target;
+
           if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && event.key === 't' && mapIsActive) {
             onToggleTimeSlider(!isVisible);
           }
@@ -17657,14 +18072,22 @@
           _d = _a.onToggleTimeSlider,
           onToggleTimeSlider = _d === void 0 ? function () {} : _d;
       useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+      var visibilityState = isVisible ? 'visible' : 'hidden';
       return isVisible ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        style: {
+          visibility: visibilityState
+        },
         container: true,
         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"
+        "data-testid": "timeSlider",
+        spacing: 1
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }), /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -17673,19 +18096,30 @@
         selectedTime: defaultProps.selectedTime,
         mapIsActive: mapIsActive
       })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true,
-        sx: {
-          height: '50px'
-        },
-        container: true,
-        alignItems: "center",
-        justifyContent: "center"
+        item: true
+      }), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true
       }, buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, legend || /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, __assign({}, defaultProps, {
         selectedTime: defaultProps.selectedTime.unix(),
         mapIsActive: mapIsActive
-      })), ' ')) : null;
+      })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true
+      }, /*#__PURE__*/React__namespace.createElement(HideSliderButton, {
+        toggleTimeSliderIsVisible: onToggleTimeSlider,
+        isVisible: isVisible
+      }))) : /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        sx: {
+          paddingRight: 1
+        },
+        container: true,
+        alignItems: "center",
+        justifyContent: "flex-end"
+      }, /*#__PURE__*/React__namespace.createElement(HideSliderButton, {
+        toggleTimeSliderIsVisible: onToggleTimeSlider,
+        isVisible: isVisible
+      }));
     };
 
     /* *
@@ -18008,6 +18442,79 @@
       });
     };
 
+    /* *
+     * 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 BackwardForwardStepButtonConnect = function BackwardForwardStepButtonConnect(_a) {
+      var isForwardStep = _a.isForwardStep,
+          mapId = _a.mapId;
+      var timeStep = reactRedux.useSelector(function (store) {
+        return getMapTimeStep(store, mapId);
+      });
+      var dispatch = reactRedux.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 = reactRedux.useSelector(function (store) {
+        return isAnimating(store, mapId);
+      });
+      var timedim = reactRedux.useSelector(function (store) {
+        return getMapDimension(store, mapId, 'time');
+      });
+      var selectedTime = getSelectedTime(timedim);
+      var curTime = moment__default["default"].unix(selectedTime).toISOString();
+      var layers = reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      });
+
+      var _b = __read(getDataLimitsFromLayers(layers), 2),
+          dataStartTime = _b[0],
+          dataEndTime = _b[1];
+
+      var onClickBF = function onClickBF() {
+        if (isAnimating$1) {
+          stopAnimation();
+        }
+
+        isForwardStep ? setNextTimeStep(timeStep, curTime, dataEndTime, setTime) : setPreviousTimeStep(timeStep, curTime, dataStartTime, setTime);
+      };
+
+      return /*#__PURE__*/React__default["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.
@@ -18043,6 +18550,14 @@
         }),
         playBtn: /*#__PURE__*/React__namespace.createElement(PlayButtonConnect, {
           mapId: mapId
+        }),
+        backwardBtn: /*#__PURE__*/React__namespace.createElement(BackwardForwardStepButtonConnect, {
+          mapId: mapId,
+          isForwardStep: false
+        }),
+        forwardBtn: /*#__PURE__*/React__namespace.createElement(BackwardForwardStepButtonConnect, {
+          mapId: mapId,
+          isForwardStep: true
         })
       });
     };
@@ -18082,8 +18597,6 @@
     }, {
       stopMapAnimation: mapActions$1.mapStopAnimation,
       setTime: genericActions.setTime,
-      syncGroupAddSource: genericActions.syncGroupAddSource,
-      syncGroupRemoveSource: genericActions.syncGroupRemoveSource,
       mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime,
       mapSetTimeSliderSecondsPerPx: mapActions$1.setTimeSliderSecondsPerPx
     });
@@ -18105,8 +18618,6 @@
           activeWindowId = _a.activeWindowId,
           stopMapAnimation = _a.stopMapAnimation,
           setTime = _a.setTime,
-          syncGroupAddSource = _a.syncGroupAddSource,
-          syncGroupRemoveSource = _a.syncGroupRemoveSource,
           mapSetTimeSliderCenterTime = _a.mapSetTimeSliderCenterTime,
           mapSetTimeSliderSecondsPerPx = _a.mapSetTimeSliderSecondsPerPx;
       var selectedTime = getTimeBounds(dimensions).selectedTime;
@@ -18117,17 +18628,6 @@
           dataEndTime = _b[1];
 
       var mapIsActive = mapId === activeWindowId;
-      React__namespace.useEffect(function () {
-        syncGroupAddSource({
-          id: sourceId,
-          type: [SYNCGROUPS_TYPE_SETTIME]
-        });
-        return function () {
-          syncGroupRemoveSource({
-            id: sourceId
-          });
-        };
-      }, [sourceId, syncGroupAddSource, syncGroupRemoveSource]);
       return /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, {
         centerTime: centerTime,
         secondsPerPx: secondsPerPx,
@@ -18221,8 +18721,6 @@
       setAnimationEndTime: mapActions$1.setAnimationEndTime,
       setTime: genericActions.setTime,
       stopMapAnimation: mapActions$1.mapStopAnimation,
-      syncGroupAddSource: genericActions.syncGroupAddSource,
-      syncGroupRemoveSource: genericActions.syncGroupRemoveSource,
       mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime
     });
 
@@ -18244,8 +18742,6 @@
           setAnimationEndTime = _a.setAnimationEndTime,
           stopMapAnimation = _a.stopMapAnimation,
           setTime = _a.setTime,
-          syncGroupAddSource = _a.syncGroupAddSource,
-          syncGroupRemoveSource = _a.syncGroupRemoveSource,
           mapSetTimeSliderCenterTime = _a.mapSetTimeSliderCenterTime;
       var selectedTime = getMomentTimeBounds(dimensions).selectedTime;
       var currentTime = moment__default["default"].utc().unix();
@@ -18255,17 +18751,6 @@
           dataEndTime = _b[1];
 
       var mapIsActive = activeWindowId === mapId;
-      React__namespace.useEffect(function () {
-        syncGroupAddSource({
-          id: sourceId,
-          type: [SYNCGROUPS_TYPE_SETTIME]
-        });
-        return function () {
-          syncGroupRemoveSource({
-            id: sourceId
-          });
-        };
-      }, [sourceId, syncGroupAddSource, syncGroupRemoveSource]);
       return /*#__PURE__*/React__namespace.createElement(TimeSliderRail, {
         centerTime: centerTime,
         secondsPerPx: secondsPerPx,
@@ -22788,6 +23273,151 @@
       }, /*#__PURE__*/React__namespace.createElement(theme.List, 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 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(_a) {
+      var time = _a.time;
+      var nodeRef = React__namespace.useRef(null);
+
+      var _b = __read(React__namespace.useState({
+        x: 0,
+        y: 0
+      }), 2),
+          position = _b[0],
+          setPosition = _b[1];
+
+      shared.useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition);
+
+      var _c = __read(React__namespace.useState({
+        width: MIN_WIDTH,
+        height: MIN_HEIGHT
+      }), 2),
+          size = _c[0],
+          setSize = _c[1];
+
+      var _d = __read(React__namespace.useState(MIN_FONT_SIZE), 2),
+          fontSize = _d[0],
+          setFontSize = _d[1];
+
+      return /*#__PURE__*/React__namespace.createElement(Draggable__default["default"], {
+        nodeRef: nodeRef,
+        bounds: "parent",
+        position: position,
+        onStop: function onStop(_event, position) {
+          setPosition(position);
+        }
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          position: 'absolute',
+          zIndex: 100,
+          top: '10px',
+          right: '10px'
+        },
+        ref: nodeRef
+      }, /*#__PURE__*/React__namespace.createElement(reResizable.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__namespace.createElement(theme.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__namespace.createElement(system.Box, {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        sx: {
+          cursor: 'move',
+          height: '100%',
+          width: '100%',
+          backgroundColor: '#051039',
+          borderRadius: '5px'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+        variant: "subtitle2",
+        sx: {
+          color: '#FFFFFF',
+          fontSize: fontSize
+        }
+      }, moment__default["default"].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(_a) {
+      var mapId = _a.mapId;
+      var dimensions = reactRedux.useSelector(function (store) {
+        return getMapDimensions(store, mapId);
+      });
+      var selectedTime = getMomentTimeBounds(dimensions).selectedTime;
+      return /*#__PURE__*/React__default["default"].createElement(TimeSliderClock, {
+        time: selectedTime
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -22854,7 +23484,9 @@
           _p = _a.multiLegend,
           multiLegend = _p === void 0 ? true : _p,
           shouldShowLayerManager = _a.shouldShowLayerManager,
-          props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager"]);
+          _q = _a.showClock,
+          showClock = _q === void 0 ? true : _q,
+          props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock"]);
 
       var dispatch = reactRedux.useDispatch();
       var mapId = React__default["default"].useRef(id || generateMapId()).current;
@@ -22942,6 +23574,8 @@
         showMapId: true,
         mapId: mapId,
         multiLegend: multiLegend
+      }), showClock && /*#__PURE__*/React__default["default"].createElement(TimeSliderClockConnect, {
+        mapId: mapId
       }));
     };
 
@@ -22981,7 +23615,9 @@
           _c = _a.showZoomControls,
           showZoomControls = _c === void 0 ? true : _c,
           _d = _a.multiLegend,
-          multiLegend = _d === void 0 ? false : _d;
+          multiLegend = _d === void 0 ? false : _d,
+          _e = _a.showClock,
+          showClock = _e === void 0 ? true : _e;
       var dispatch = reactRedux.useDispatch();
       var syncGroupAddTarget = React__default["default"].useCallback(function (payload) {
         dispatch(genericActions.syncGroupAddTarget(payload));
@@ -23024,6 +23660,8 @@
         showMapId: true,
         mapId: firstMapId,
         multiLegend: multiLegend
+      }), showClock && /*#__PURE__*/React__default["default"].createElement(TimeSliderClockConnect, {
+        mapId: firstMapId
       }), maps.map(function (map, mapIndex) {
         var mapId = map.id;
         return /*#__PURE__*/React__default["default"].createElement(material.Box, {
@@ -23043,112 +23681,12 @@
           shouldShowZoomControls: showZoomControls && mapIndex === 0,
           showTimeSlider: false,
           disableTimeSlider: true,
+          showClock: false,
           multiLegend: multiLegend
         }));
       }));
     };
 
-    /* *
-     * 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 useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
-      var _a = __read(React__namespace.useState([]), 2),
-          referenceTimes = _a[0],
-          setReferenceTimes = _a[1];
-
-      React__namespace.useEffect(function () {
-        var referenceTimes = [];
-        var wmLayer = new webmap.WMLayer(__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(_a) {
-      var layers = _a.layers,
-          _b = _a.multiLegend,
-          multiLegend = _b === void 0 ? false : _b;
-      /* Get all the reference times for this layer */
-
-      var referenceTimes = useGetReferenceTimes(layers.topRow);
-      if (referenceTimes.length === 0) return /*#__PURE__*/React__namespace.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 " + ("" + referenceTime.substring(8, 13).replace('T', ' / ')),
-          bbox: {
-            left: -450651.2255879827,
-            bottom: 6490531.093143953,
-            right: 1428345.8183648037,
-            top: 7438773.776232235
-          },
-          srs: 'EPSG:3857',
-          layers: [__assign(__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 = __spreadArray([], __read(Array(nCols))).map(function (_, index) {
-        var refTime = referenceTimes[referenceTimes.length - nCols + index];
-        return makeMapPreset(refTime, "harm_air" + index, layers.topRow, layers.topRowSyncGroups, index);
-      });
-      /* Add the harmonie precipitation layers with the different referencetimes */
-
-
-      var mapsPrecipitation = __spreadArray([], __read(Array(nCols))).map(function (_, index) {
-        var refTime = referenceTimes[referenceTimes.length - nCols + index];
-        return makeMapPreset(refTime, "harm_precip" + index, layers.bottomRow, layers.bottomRowSyncGroups, index);
-      });
-
-      var maps = mapsTemperature.concat(mapsPrecipitation);
-      return /*#__PURE__*/React__namespace.createElement(MultiMapViewConnect, {
-        rows: 2,
-        cols: 5,
-        maps: maps,
-        multiLegend: multiLegend
-      });
-    };
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -23181,8 +23719,30 @@
       }, [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 = reactRedux.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__default["default"].utc(referenceTime).add(timeIncrement, 'h').format('YYYY-MM-DDTHH:mm:ss[Z]');
@@ -23224,6 +23784,7 @@
           startTimeIncrement = _d === void 0 ? 3 : _d,
           _e = _a.multiLegend,
           multiLegend = _e === void 0 ? false : _e;
+      var displayLayerManagerAndLegendButtonInAllMaps = !useHasSyncGroupWithLayerActions(syncGroupsIds);
       /* Get latest reference time for this layer */
 
       var latestReferenceTime = useGetLatestReferenceTime(layers[0]);
@@ -23238,7 +23799,7 @@
 
 
       var maps = timeIncrements.map(function (increment, index) {
-        return makeMapPreset(increment, "harm_precip" + increment, latestReferenceTime, layers, syncGroupsIds, index === 0 || !syncGroupsIds, index === 0 || !syncGroupsIds);
+        return makeMapPreset(increment, "harm_precip" + increment, latestReferenceTime, layers, syncGroupsIds, index === 0 || displayLayerManagerAndLegendButtonInAllMaps, index === 0 || displayLayerManagerAndLegendButtonInAllMaps);
       });
       return /*#__PURE__*/React__namespace.createElement(MultiMapViewConnect, {
         rows: 3,
@@ -23246,6 +23807,110 @@
         maps: maps,
         syncTime: false,
         showTimeSlider: false,
+        multiLegend: multiLegend,
+        showClock: false
+      });
+    };
+
+    /* *
+     * 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 useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
+      var _a = __read(React__namespace.useState([]), 2),
+          referenceTimes = _a[0],
+          setReferenceTimes = _a[1];
+
+      React__namespace.useEffect(function () {
+        var referenceTimes = [];
+        var wmLayer = new webmap.WMLayer(__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(_a) {
+      var layers = _a.layers,
+          _b = _a.multiLegend,
+          multiLegend = _b === void 0 ? false : _b;
+      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__namespace.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 " + ("" + referenceTime.substring(8, 13).replace('T', ' / ')),
+          bbox: {
+            left: -450651.2255879827,
+            bottom: 6490531.093143953,
+            right: 1428345.8183648037,
+            top: 7438773.776232235
+          },
+          srs: 'EPSG:3857',
+          layers: [__assign(__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 = __spreadArray([], __read(Array(nCols))).map(function (_, index) {
+        var refTime = referenceTimes[referenceTimes.length - nCols + index];
+        return makeMapPreset(refTime, "harm_air" + index, layers.topRow, layers.topRowSyncGroups, index);
+      });
+      /* Add the harmonie precipitation layers with the different referencetimes */
+
+
+      var mapsPrecipitation = __spreadArray([], __read(Array(nCols))).map(function (_, index) {
+        var refTime = referenceTimes[referenceTimes.length - nCols + index];
+        return makeMapPreset(refTime, "harm_precip" + index, layers.bottomRow, layers.bottomRowSyncGroups, index);
+      });
+
+      var maps = mapsTemperature.concat(mapsPrecipitation);
+      return /*#__PURE__*/React__namespace.createElement(MultiMapViewConnect, {
+        rows: 2,
+        cols: 5,
+        maps: maps,
         multiLegend: multiLegend
       });
     };
@@ -23717,9 +24382,8 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var store = reduxDynamicModules.createStore({
-      initialState: {},
-      extensions: [reduxDynamicModulesSaga.getSagaExtension({})]
+    var store = reduxToolkit.createStore({
+      extensions: [sagaExtension.getSagaExtension()]
     });
 
     /* *
@@ -23900,9 +24564,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var SnackbarWrapperConnect = function SnackbarWrapperConnect(_a) {
-      var props = __rest(_a, []);
-
+    var SnackbarWrapperConnect = shared.withEggs([snackbarModuleConfig])(function (props) {
       var dispatch = reactRedux.useDispatch();
 
       var onCloseSnackbar = function onCloseSnackbar() {
@@ -23912,15 +24574,13 @@
       var currentSnackbarMessage = reactRedux.useSelector(function (store) {
         return getFirstSnackbarMessage(store);
       });
-      return /*#__PURE__*/React__namespace.createElement(reduxDynamicModules.DynamicModuleLoader, {
-        modules: [snackbarModuleConfig]
-      }, /*#__PURE__*/React__namespace.createElement(SnackbarWrapper, __assign({
+      return /*#__PURE__*/React__namespace.createElement(SnackbarWrapper, __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");
@@ -23952,6 +24612,13 @@
         theme: theme$1
       }, children);
     };
+    var ThemeWrapperWithModules = shared.withEggs(coreModuleConfig)(function (_a) {
+      var theme = _a.theme,
+          children = _a.children;
+      return /*#__PURE__*/React__default["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.
@@ -23966,11 +24633,9 @@
           store = _a.store;
       return /*#__PURE__*/React__default["default"].createElement(reactRedux.Provider, {
         store: store
-      }, /*#__PURE__*/React__default["default"].createElement(reduxDynamicModules.DynamicModuleLoader, {
-        modules: coreModuleConfig
-      }, /*#__PURE__*/React__default["default"].createElement(CoreThemeProvider, {
+      }, /*#__PURE__*/React__default["default"].createElement(ThemeWrapperWithModules, {
         theme: theme$1
-      }, /*#__PURE__*/React__default["default"].createElement(SnackbarWrapperConnect, null, children))));
+      }, /*#__PURE__*/React__default["default"].createElement(SnackbarWrapperConnect, null, children)));
     };
 
     /* *