@opengeoweb/core 4.3.0 → 4.4.0

package/index.esm.js

@@ -3,13 +3,13 @@ import produce$1, { current, produce } from 'immer';
 import moment from 'moment';
 import * as React from 'react';
 import React__default, { Component, useRef, useState, useEffect, useCallback } from 'react';
-import _, { isEqual, debounce, groupBy, throttle, range } from 'lodash';
-import { takeLatest, put, select, call, all, takeEvery, delay } from 'redux-saga/effects';
+import _, { debounce, isEqual, groupBy, throttle, range } from 'lodash';
+import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { Tooltip, Paper, Box, Typography, Grid, InputLabel, IconButton, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, Popover, useTheme, Snackbar } from '@mui/material';
-import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, calculateDialogSizeAndPosition, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
-import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Options, List as List$1, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
-import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
+import { Tooltip, Paper, Box, Typography, Grid, InputLabel, IconButton, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, Popper, useTheme, Snackbar } from '@mui/material';
+import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, calculateDialogSizeAndPosition, CustomToggleButton, useIsMounted, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
+import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Search, Clear, Close, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Clock, Now, Options, StepForward, StepBackward, ChevronDown, ChevronUp, List as List$1, Resize, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
@@ -23,8 +23,11 @@ import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
 import * as turf from '@turf/turf';
-import { createStore, DynamicModuleLoader } from 'redux-dynamic-modules';
-import { getSagaExtension } from 'redux-dynamic-modules-saga';
+import { Box as Box$2 } from '@mui/system';
+import Draggable from 'react-draggable';
+import { Resizable } from 're-resizable';
+import { createStore } from '@redux-eggs/redux-toolkit';
+import { getSagaExtension } from '@redux-eggs/saga-extension';
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -363,6 +366,7 @@ var LayerActionOrigin;
   LayerActionOrigin["ReactMapViewParseLayer"] = "ReactMapViewParseLayer";
   LayerActionOrigin["setLayerDimensionSaga"] = "setLayerDimensionSaga";
   LayerActionOrigin["toggleAutoUpdateSaga"] = "toggleAutoUpdateSaga";
+  LayerActionOrigin["unregisterMapSaga"] = "unregisterMapSaga";
 })(LayerActionOrigin || (LayerActionOrigin = {}));
 
 /* *
@@ -611,6 +615,11 @@ var getSpeedDelay = function getSpeedDelay(speedFactor) {
 var getSpeedFactor = function getSpeedFactor(speedDelay) {
   return defaultDelay / speedDelay;
 };
+var getSelectedTime = function getSelectedTime(timeDimension) {
+  var currentValueIsValid = timeDimension && timeDimension.currentValue && moment.utc(timeDimension.currentValue).isValid();
+  var selectedTime = currentValueIsValid && timeDimension ? moment.utc(timeDimension.currentValue).unix() : moment.utc().unix();
+  return selectedTime;
+};
 /**
  * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
  */
@@ -620,13 +629,12 @@ var getTimeBounds = function getTimeBounds(dimensions) {
     second: 0,
     millisecond: 0
   }).unix();
-  var timeDimension = dimensions ? dimensions.find(function (dim) {
+  var timeDimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dim) {
     return dim.name === 'time';
-  }) : null;
+  });
   var startTime = timeDimension && timeDimension.minValue ? moment.utc(timeDimension.minValue).unix() : defaultStartEnd;
   var endTime = timeDimension && timeDimension.maxValue ? moment.utc(timeDimension.maxValue).unix() : defaultStartEnd;
-  var currentValueIsValid = timeDimension && timeDimension.currentValue && moment.utc(timeDimension.currentValue).isValid();
-  var selectedTime = currentValueIsValid ? moment.utc(timeDimension.currentValue).unix() : moment.utc().unix();
+  var selectedTime = getSelectedTime(timeDimension);
   return {
     selectedTime: selectedTime,
     startTime: startTime,
@@ -661,22 +669,12 @@ var timestampToPixel = function timestampToPixel(timestamp, centerTime, widthPx,
 var pixelToTimestamp = function pixelToTimestamp(timePx, centerTime, widthPx, secondsPerPx) {
   return centerTime - (widthPx / 2 - timePx) * secondsPerPx;
 };
-var onSetNewDateDebouncer;
 var onsetNewDateDebounced = function onsetNewDateDebounced(dateToSet, onSetNewDate) {
-  /* Debounce the dateToSet with a simple timeout */
-  if (onSetNewDateDebouncer === undefined) {
-    onSetNewDateDebouncer = dateToSet;
+  debounce(function () {
     onSetNewDate(dateToSet);
-    window.setTimeout(function () {
-      if (onSetNewDateDebouncer !== undefined && onSetNewDateDebouncer !== dateToSet) {
-        onSetNewDate(onSetNewDateDebouncer);
-      }
-
-      onSetNewDateDebouncer = undefined;
-    }, 10);
-  } else {
-    onSetNewDateDebouncer = dateToSet;
-  }
+  }, 10, {
+    leading: true
+  })();
 };
 var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
   var adjustedTimeStep = timeStep * 60;
@@ -698,7 +696,9 @@ var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
 var setNewRoundedTime = function setNewRoundedTime(x, centerTime, width, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate) {
   var unixTime = pixelToTimestamp(x, centerTime, width, secondsPerPx);
   var roundedTime = roundWithTimeStep(unixTime, timeStep);
-  var selectedTimeString = moment.unix(Math.min(Math.max(roundedTime, dataStartTime), dataEndTime)).toISOString();
+  var maxTime = Math.max(roundedTime, dataStartTime);
+  var newTime = Math.min(maxTime, dataEndTime || roundedTime);
+  var selectedTimeString = moment.unix(newTime).toISOString();
   onsetNewDateDebounced(selectedTimeString, onSetNewDate);
 };
 var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
@@ -725,6 +725,32 @@ var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
    */
   [2147483647, 0]);
 };
+var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
+  var prevTimeStep = moment.utc(curTime).subtract(timeStep, 'm').toISOString();
+
+  if (!prevTimeStep) {
+    return;
+  }
+
+  if (moment.utc(prevTimeStep) < moment.utc(dataStartTime * millisecondsInSecond)) {
+    return;
+  }
+
+  onsetNewDateDebounced(prevTimeStep, onSetNewDate);
+};
+var setNextTimeStep = function setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate) {
+  var nextTimeStep = moment.utc(curTime).add(timeStep, 'm').toISOString();
+
+  if (!nextTimeStep) {
+    return;
+  }
+
+  if (moment.utc(nextTimeStep) > moment.utc(dataEndTime * millisecondsInSecond)) {
+    return;
+  }
+
+  onsetNewDateDebounced(nextTimeStep, onSetNewDate);
+};
 var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInterval) {
   switch (timeInterval.isRegularInterval) {
     case false:
@@ -2787,6 +2813,22 @@ var getAllLayers = createSelector(getLayersIds, getLayersById, function (ids, la
     return layers[layerId];
   });
 }, selectorMemoizationOptions);
+/**
+ * Retrieves all layers (including base layers and overlayers) for the given mapId
+ *
+ * Example: layers = getLayersByMapId(store, mapId)
+ * @param {object} store store: object - object from which the layers state will be extracted
+ * @param {string} mapId mapId: string - mapId
+ * @returns {array} returnType: ReduxLayer[] - an array of all layers containing layer information (service, name, style, enabled etc.)
+ */
+
+var getLayersByMapId = createSelector(getAllLayers, function (_store, _mapId) {
+  return _mapId;
+}, function (layers, mapId) {
+  return layers.filter(function (layer) {
+    return layer.mapId === mapId;
+  });
+}, selectorMemoizationOptions);
 /**
  * Retrieves all layers that aren't base layers and aren't overlayers
  *
@@ -4850,8 +4892,8 @@ var syncGroupStore = function syncGroupStore(store) {
  * @returns {object} returnType: SynchronizationGroupState
  */
 
-createSelector(syncGroupStore, function (store) {
-  return store || [];
+var getSynchronizationGroupState = createSelector(syncGroupStore, function (store) {
+  return store || null;
 });
 var getSynchronizationGroup = function getSynchronizationGroup(state, id) {
   return syncGroupStore(state).groups.byId[id];
@@ -5153,7 +5195,7 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
 var _marked$5 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
     _marked2$5 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
     _marked3$4 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
-    _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
+    _marked4$3 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
     _marked5$2 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
     _marked6$1 = /*#__PURE__*/regeneratorRuntime.mark(moveLayerActionsSaga),
     _marked7$1 = /*#__PURE__*/regeneratorRuntime.mark(setActiveLayerIdActionsSaga),
@@ -5307,7 +5349,7 @@ function addLayerActionsSaga(_ref4) {
           return _context4.stop();
       }
     }
-  }, _marked4$2);
+  }, _marked4$3);
 }
 function deleteLayerActionsSaga(_ref5) {
   var payload, type, targets;
@@ -5610,7 +5652,7 @@ var createSyncGroupViewStateSelector = createSelector(groups, sources, createSyn
 var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
     _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
     _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
-    _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(updateViewStateSaga),
+    _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(updateViewStateSaga),
     _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
@@ -5749,7 +5791,7 @@ function updateViewStateSaga() {
           return _context4.stop();
       }
     }
-  }, _marked4$1);
+  }, _marked4$2);
 }
 
 function rootSaga$4() {
@@ -5800,25 +5842,9 @@ function rootSaga$4() {
   }, _marked5$1);
 }
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
 var synchronizationGroupConfig = {
   id: 'syncronizationGroupStore-module',
-  reducerMap: {
+  reducersMap: {
     syncronizationGroupStore: reducer$2
   },
   sagas: [rootSaga$5, rootSaga$4]
@@ -5949,12 +5975,12 @@ function rootSaga$3() {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var uiModuleConfig = {
   id: 'ui-module',
-  reducerMap: {
+  reducersMap: {
     ui: reducer$4
   },
   sagas: [rootSaga$3]
@@ -6273,7 +6299,7 @@ var KNMIgeoservicesRadar = {
 };
 var KNMIgeoservicesObs = {
   name: 'KNMIgeoservicesObs',
-  url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS&service=WMS&',
+  url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS',
   id: 'KNMIgeoservicesObs'
 };
 var KNMIgeoservicesKlimaatAtlas = {
@@ -6950,11 +6976,11 @@ var CanvasComponent = /*#__PURE__*/function (_Component) {
         return;
       }
 
-      if (parseInt(this.ctx.canvas.height, 10) !== this.currentHeight) {
+      if (this.ctx.canvas.height !== this.currentHeight) {
         this.ctx.canvas.height = this.currentHeight;
       }
 
-      if (parseInt(this.ctx.canvas.width, 10) !== this.currentWidth) {
+      if (this.ctx.canvas.width !== this.currentWidth) {
         this.ctx.canvas.width = this.currentWidth;
       }
 
@@ -7552,13 +7578,14 @@ var LegendConnect = function LegendConnect(_a) {
 var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
     _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
     _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
-    _marked4 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
+    _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
     _marked5 = /*#__PURE__*/regeneratorRuntime.mark(setLayerDimensionsSaga),
     _marked6 = /*#__PURE__*/regeneratorRuntime.mark(toggleAutoUpdateSaga),
     _marked7 = /*#__PURE__*/regeneratorRuntime.mark(handleBaseLayersSaga),
     _marked8 = /*#__PURE__*/regeneratorRuntime.mark(setMapPresetSaga),
     _marked9 = /*#__PURE__*/regeneratorRuntime.mark(checkMapPresetForChangesSaga),
-    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
+    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(unregisterMapSaga),
+    _marked11 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
 
 var generateTimeList = function generateTimeList(start, end, interval) {
   var timeList = [];
@@ -7724,7 +7751,7 @@ function updateAnimation(mapId, maxValue) {
           return _context4.stop();
       }
     }
-  }, _marked4);
+  }, _marked4$1);
 }
 function setLayerDimensionsSaga(_ref4) {
   var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance;
@@ -8234,67 +8261,85 @@ function checkMapPresetForChangesSaga(action) {
     }
   }, _marked9);
 }
-function rootSaga$2() {
-  return regeneratorRuntime.wrap(function rootSaga$(_context10) {
+function unregisterMapSaga(_ref7) {
+  var payload, mapId, layerList;
+  return regeneratorRuntime.wrap(function unregisterMapSaga$(_context10) {
     while (1) {
       switch (_context10.prev = _context10.next) {
         case 0:
-          _context10.next = 2;
+          payload = _ref7.payload;
+          mapId = payload.mapId;
+          _context10.next = 4;
+          return select(getLayersByMapId, mapId);
+
+        case 4:
+          layerList = _context10.sent;
+          _context10.next = 7;
+          return all(layerList.map(function (layer) {
+            return put(layerActions.layerDelete({
+              mapId: mapId,
+              layerId: layer.id,
+              layerIndex: 0,
+              origin: LayerActionOrigin.unregisterMapSaga
+            }));
+          }));
+
+        case 7:
+        case "end":
+          return _context10.stop();
+      }
+    }
+  }, _marked10);
+}
+function rootSaga$2() {
+  return regeneratorRuntime.wrap(function rootSaga$(_context11) {
+    while (1) {
+      switch (_context11.prev = _context11.next) {
+        case 0:
+          _context11.next = 2;
           return all([takeLatest(mapActions$1.mapStopAnimation.type, stopAnimationSaga), takeLatest(mapActions$1.setActiveMapPresetId.type, stopAnimationSaga)]);
 
         case 2:
-          _context10.next = 4;
+          _context11.next = 4;
           return takeLatest(mapActions$1.mapStartAnimation.type, startAnimationSaga);
 
         case 4:
-          _context10.next = 6;
+          _context11.next = 6;
           return takeLatest(layerActions.layerDelete.type, deleteLayerSaga);
 
         case 6:
-          _context10.next = 8;
+          _context11.next = 8;
           return takeLatest(layerActions.onUpdateLayerInformation.type, setLayerDimensionsSaga);
 
         case 8:
-          _context10.next = 10;
+          _context11.next = 10;
           return takeLatest(mapActions$1.toggleAutoUpdate.type, toggleAutoUpdateSaga);
 
         case 10:
-          _context10.next = 12;
+          _context11.next = 12;
           return takeEvery(mapActions$1.setMapPreset.type, setMapPresetSaga);
 
         case 12:
-          _context10.next = 14;
+          _context11.next = 14;
           return all(mapPresetChangeActions.map(function (action) {
             return takeEvery(action, checkMapPresetForChangesSaga);
           }));
 
         case 14:
+          _context11.next = 16;
+          return takeEvery(mapActions$1.unregisterMap.type, unregisterMapSaga);
+
+        case 16:
         case "end":
-          return _context10.stop();
+          return _context11.stop();
       }
     }
-  }, _marked10);
+  }, _marked11);
 }
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
 var moduleConfig = {
   id: 'webmap-module',
-  reducerMap: {
+  reducersMap: {
     webmap: reducer$3,
     services: reducer$5,
     layers: reducer$6
@@ -8354,17 +8399,27 @@ var isNoIdService = function isNoIdService(param) {
 };
 
 var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
-    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectRemoveServiceSaga),
-    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
+    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectCloseInfoDialogSaga),
+    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectRemoveServiceSaga),
+    _marked4 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
 function newServiceAddedSaga(capturedAction) {
-  var addedService, id, serviceUrl, name, scope, _abstract, keywords, groups;
+  var addedService, id, serviceUrl, name, scope, _abstract, isUpdating, keywords, groups;
 
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
           addedService = capturedAction.payload;
-          id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, 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) {
+            _context.next = 4;
+            break;
+          }
+
+          return _context.abrupt("return");
+
+        case 4:
           keywords = addedService.layers.reduce(function (keywords, layer) {
             var _a;
 
@@ -8383,7 +8438,7 @@ function newServiceAddedSaga(capturedAction) {
 
             return groups;
           }, []);
-          _context.next = 6;
+          _context.next = 8;
           return put(layerSelectActions.addFiltersAndActiveServices({
             serviceId: id,
             serviceName: name,
@@ -8394,41 +8449,141 @@ function newServiceAddedSaga(capturedAction) {
             "abstract": _abstract
           }));
 
-        case 6:
+        case 8:
         case "end":
           return _context.stop();
       }
     }
   }, _marked$1);
 }
+function layerSelectCloseInfoDialogSaga(_ref) {
+  var type, payload, togglePayload, activeMapIdPayload, isLayerInfoDialogOpen, _isLayerInfoDialogOpen, filteredLayers, dialogInfo;
+
+  return regeneratorRuntime.wrap(function layerSelectCloseInfoDialogSaga$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          type = _ref.type, payload = _ref.payload;
+          _context2.t0 = type;
+          _context2.next = _context2.t0 === uiActions.setToggleOpenDialog.type ? 4 : _context2.t0 === uiActions.setActiveMapIdForDialog.type ? 9 : 18;
+          break;
+
+        case 4:
+          togglePayload = payload;
+
+          if (!(!togglePayload.setOpen && togglePayload.type === DialogTypes.LayerSelect)) {
+            _context2.next = 8;
+            break;
+          }
+
+          _context2.next = 8;
+          return put(uiActions.setToggleOpenDialog({
+            type: DialogTypes.LayerInfo,
+            setOpen: false
+          }));
+
+        case 8:
+          return _context2.abrupt("break", 31);
+
+        case 9:
+          activeMapIdPayload = payload;
+
+          if (activeMapIdPayload.setOpen) {
+            _context2.next = 17;
+            break;
+          }
+
+          _context2.next = 13;
+          return select(getisDialogOpen, DialogTypes.LayerInfo);
+
+        case 13:
+          isLayerInfoDialogOpen = _context2.sent;
+
+          if (!isLayerInfoDialogOpen) {
+            _context2.next = 17;
+            break;
+          }
+
+          _context2.next = 17;
+          return put(uiActions.setToggleOpenDialog({
+            type: DialogTypes.LayerInfo,
+            setOpen: false
+          }));
+
+        case 17:
+          return _context2.abrupt("break", 31);
+
+        case 18:
+          _context2.next = 20;
+          return select(getisDialogOpen, DialogTypes.LayerInfo);
+
+        case 20:
+          _isLayerInfoDialogOpen = _context2.sent;
+
+          if (!_isLayerInfoDialogOpen) {
+            _context2.next = 31;
+            break;
+          }
+
+          _context2.next = 24;
+          return select(getFilteredLayers);
+
+        case 24:
+          filteredLayers = _context2.sent;
+          _context2.next = 27;
+          return select(getActiveLayerInfo);
+
+        case 27:
+          dialogInfo = _context2.sent;
+
+          if (filteredLayers.map(function (layer) {
+            return layer.text;
+          }).includes(dialogInfo.text)) {
+            _context2.next = 31;
+            break;
+          }
+
+          _context2.next = 31;
+          return put(uiActions.setToggleOpenDialog({
+            type: DialogTypes.LayerInfo,
+            setOpen: false
+          }));
+
+        case 31:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _marked2$1);
+}
 function layerSelectRemoveServiceSaga(capturedAction) {
   var removedService, serviceId, serviceUrl, results, services, servicesEnabled;
-  return regeneratorRuntime.wrap(function layerSelectRemoveServiceSaga$(_context2) {
+  return regeneratorRuntime.wrap(function layerSelectRemoveServiceSaga$(_context3) {
     while (1) {
-      switch (_context2.prev = _context2.next) {
+      switch (_context3.prev = _context3.next) {
         case 0:
           removedService = capturedAction.payload;
           serviceId = removedService.serviceId, serviceUrl = removedService.serviceUrl;
-          _context2.next = 4;
+          _context3.next = 4;
           return select(getActiveServices);
 
         case 4:
-          results = _context2.sent;
+          results = _context3.sent;
           services = results;
           servicesEnabled = Object.values(services).find(function (service) {
             return service.enabled;
           });
 
           if (!(servicesEnabled === undefined)) {
-            _context2.next = 10;
+            _context3.next = 10;
             break;
           }
 
-          _context2.next = 10;
-          return all(Object.entries(services).map(function (_ref) {
-            var _ref2 = _slicedToArray(_ref, 2),
-                serviceId = _ref2[0],
-                service = _ref2[1];
+          _context3.next = 10;
+          return all(Object.entries(services).map(function (_ref2) {
+            var _ref3 = _slicedToArray(_ref2, 2),
+                serviceId = _ref3[0],
+                service = _ref3[1];
 
             return put(layerSelectActions.enableActiveService({
               serviceId: serviceId,
@@ -8437,7 +8592,7 @@ function layerSelectRemoveServiceSaga(capturedAction) {
           }));
 
         case 10:
-          _context2.next = 12;
+          _context3.next = 12;
           return put(serviceActions.mapStoreRemoveService({
             id: serviceId,
             serviceUrl: serviceUrl
@@ -8445,13 +8600,13 @@ function layerSelectRemoveServiceSaga(capturedAction) {
 
         case 12:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
     }
-  }, _marked2$1);
+  }, _marked3);
 }
-function addServiceToLocalStorageSaga(_ref3) {
-  var payload = _ref3.payload;
+function addServiceToLocalStorageSaga(_ref4) {
+  var payload = _ref4.payload;
   var scope = payload.scope,
       name = payload.name,
       serviceUrl = payload.serviceUrl,
@@ -8464,8 +8619,8 @@ function addServiceToLocalStorageSaga(_ref3) {
     "abstract": _abstract2
   })));
 }
-function removeServiceFromLocalStorageSaga(_ref4) {
-  var payload = _ref4.payload;
+function removeServiceFromLocalStorageSaga(_ref5) {
+  var payload = _ref5.payload;
   var serviceUrl = payload.serviceUrl;
   var localStorageServices = getUserAddedServices();
   if (!localStorageServices[serviceUrl]) return;
@@ -8474,52 +8629,40 @@ function removeServiceFromLocalStorageSaga(_ref4) {
   setUserAddedServices(updatedServices);
 }
 function rootSaga$1() {
-  return regeneratorRuntime.wrap(function rootSaga$(_context3) {
+  return regeneratorRuntime.wrap(function rootSaga$(_context4) {
     while (1) {
-      switch (_context3.prev = _context3.next) {
+      switch (_context4.prev = _context4.next) {
         case 0:
-          _context3.next = 2;
+          _context4.next = 2;
           return takeEvery(serviceActions.serviceSetLayers.type, newServiceAddedSaga);
 
         case 2:
-          _context3.next = 4;
+          _context4.next = 4;
           return takeEvery(layerSelectActions.layerSelectRemoveService.type, layerSelectRemoveServiceSaga);
 
         case 4:
-          _context3.next = 6;
+          _context4.next = 6;
           return takeEvery(serviceActions.serviceSetLayers.type, addServiceToLocalStorageSaga);
 
         case 6:
-          _context3.next = 8;
+          _context4.next = 8;
           return takeEvery(serviceActions.mapStoreRemoveService.type, removeServiceFromLocalStorageSaga);
 
         case 8:
+          _context4.next = 10;
+          return takeEvery([uiActions.setToggleOpenDialog.type, uiActions.setActiveMapIdForDialog.type, layerSelectActions.disableActiveService.type, layerSelectActions.toggleFilter.type, layerSelectActions.setSearchFilter.type], layerSelectCloseInfoDialogSaga);
+
+        case 10:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
     }
-  }, _marked3);
+  }, _marked4);
 }
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
 var layerSelectConfig = {
   id: 'layerSelect-module',
-  reducerMap: {
+  reducersMap: {
     layerSelect: reducer$1
   },
   sagas: [rootSaga$1]
@@ -8620,7 +8763,7 @@ function rootSaga() {
  * */
 var snackbarModuleConfig = {
   id: 'snackbar-module',
-  reducerMap: {
+  reducersMap: {
     snackbar: reducer
   },
   sagas: [rootSaga]
@@ -8698,6 +8841,7 @@ var getLayersFromService = function getLayersFromService(serviceUrl) {
   return new Promise(function (resolve, reject) {
     var serviceObject = WMGetServiceFromStore(serviceUrl);
     serviceObject.getNodes(function (nodes) {
+      // TODO: Maarten Plieger, 2022-11-02:  Harmonize types and use correct types: https://gitlab.com/opengeoweb/opengeoweb/-/issues/2817
       var layerTree = recurseNodes(nodes);
       resolve(layerTree);
     }, function (error) {
@@ -9084,7 +9228,7 @@ var preset = {
 		},
 		{
 			name: "KNMIgeoservicesObs",
-			url: "https://geoservices.knmi.nl/adagucserver?dataset=OBS&service=WMS&",
+			url: "https://geoservices.knmi.nl/adagucserver?dataset=OBS",
 			id: "KNMIgeoservicesObs"
 		},
 		{
@@ -9841,7 +9985,9 @@ var RenderLayers = function RenderLayers(_ref) {
     }, /*#__PURE__*/React.createElement(Typography, {
       variant: "body1",
       sx: {
-        fontSize: 'geowebColors.layerManager.tableRowDefaultText.fontSize',
+        fontSize: function fontSize(theme) {
+          return theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize;
+        },
         color: 'geowebColors.layerManager.tableRowDefaultText.rgba',
         fontWeight: 500
       }
@@ -10231,9 +10377,7 @@ var LayerRow = function LayerRow(_ref) {
       services = _ref.services,
       mapId = _ref.mapId,
       _ref$onLayerRowClick = _ref.onLayerRowClick,
-      onLayerRowClick = _ref$onLayerRowClick === void 0 ? function () {
-    return null;
-  } : _ref$onLayerRowClick,
+      onLayerRowClick = _ref$onLayerRowClick === void 0 ? function () {} : _ref$onLayerRowClick,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
       _ref$isLayerMissing = _ref.isLayerMissing,
@@ -10642,6 +10786,57 @@ var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var isLayerEnabled = useSelector(function (store) {
     return getLayerEnabled(store, layerId);
   });
+  var service = useSelector(function (store) {
+    return getServiceByName(store, layerService);
+  });
+  var serviceSetLayers = React.useCallback(function (payload) {
+    dispatch(serviceActions.serviceSetLayers(payload));
+  }, [dispatch]);
+
+  var addService = function addService(serviceUrl) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _layers, wmService;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return getLayersFlattenedFromService(serviceUrl);
+
+            case 3:
+              _layers = _context.sent;
+              wmService = WMGetServiceFromStore(serviceUrl);
+              serviceSetLayers({
+                id: wmService.id,
+                name: wmService.title,
+                serviceUrl: serviceUrl,
+                layers: _layers,
+                scope: 'user',
+                "abstract": wmService["abstract"]
+              });
+              _context.next = 11;
+              break;
+
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](0);
+              console.warn(_context.t0.message);
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 8]]);
+    }));
+  };
+
+  if (!service) {
+    addService(layerService);
+  }
+
   var layers = useSelector(function (store) {
     return getLayersFromService$1(store, layerService);
   });
@@ -11572,6 +11767,37 @@ var validateServiceUrl = function validateServiceUrl(value, services) {
 
   return true;
 };
+var loadWMSService = function loadWMSService(serviceUrl) {
+  var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var layers, service;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return getLayersFlattenedFromService(serviceUrl, forceReload);
+
+          case 2:
+            layers = _context.sent;
+            service = WMGetServiceFromStore(serviceUrl);
+            return _context.abrupt("return", {
+              id: service.id,
+              name: service.title,
+              serviceUrl: serviceUrl,
+              "abstract": service["abstract"],
+              layers: layers,
+              scope: 'user'
+            });
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+};
 
 var style$1 = {
   textField: {
@@ -11705,8 +11931,7 @@ var ServicePopup = function ServicePopup(_ref2) {
 
   var addNewService = function addNewService(formValues) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var layers, serviceLayers, _iterator, _step, object, service;
-
+      var layersForService;
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
@@ -11715,55 +11940,26 @@ var ServicePopup = function ServicePopup(_ref2) {
               setIsLoading(true);
               _context2.prev = 2;
               _context2.next = 5;
-              return getLayersFromService(formValues.serviceUrl);
+              return loadWMSService(formValues.serviceUrl, true);
 
             case 5:
-              layers = _context2.sent;
-
-              if (layers.children) {
-                serviceLayers = [];
-                _iterator = _createForOfIteratorHelper(layers.children);
-
-                try {
-                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                    object = _step.value;
-                    serviceLayers.push({
-                      name: object.name,
-                      text: object.title,
-                      leaf: object.leaf,
-                      path: object.path,
-                      keywords: object.keywords ? object.keywords : [],
-                      "abstract": object["abstract"] ? object["abstract"] : '',
-                      styles: object.styles ? object.styles : [],
-                      dimensions: object.dimensions || [],
-                      geographicBoundingBox: object.geographicBoundingBox || null
-                    });
-                  }
-                } catch (err) {
-                  _iterator.e(err);
-                } finally {
-                  _iterator.f();
-                }
-
-                service = WMGetServiceFromStore(formValues.serviceUrl);
-                serviceSetLayers({
-                  id: service.id,
-                  name: formValues.serviceName,
-                  serviceUrl: formValues.serviceUrl,
-                  "abstract": formValues.serviceAbstracts,
-                  layers: serviceLayers,
-                  scope: 'user'
-                });
-                setIsLoading(false);
-                showSnackbar(getSuccesMessage(formValues.serviceName));
-                closePopup();
-              }
-
-              _context2.next = 13;
+              layersForService = _context2.sent;
+              serviceSetLayers({
+                id: layersForService.id,
+                name: formValues.serviceName,
+                serviceUrl: formValues.serviceUrl,
+                "abstract": formValues.serviceAbstracts,
+                layers: layersForService.layers,
+                scope: 'user'
+              });
+              setIsLoading(false);
+              showSnackbar(getSuccesMessage(formValues.serviceName));
+              closePopup();
+              _context2.next = 16;
               break;
 
-            case 9:
-              _context2.prev = 9;
+            case 12:
+              _context2.prev = 12;
               _context2.t0 = _context2["catch"](2);
               setIsLoading(false);
               setError(fields.serviceUrl.name, {
@@ -11771,12 +11967,12 @@ var ServicePopup = function ServicePopup(_ref2) {
                 type: 'SYSTEM'
               });
 
-            case 13:
+            case 16:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[2, 9]]);
+      }, _callee2, null, [[2, 12]]);
     }));
   };
 
@@ -11945,7 +12141,7 @@ var ServicePopup = function ServicePopup(_ref2) {
     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.createElement(InitialValidationsTrigger, {
@@ -12557,7 +12753,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
       source = _ref$source === void 0 ? 'app' : _ref$source,
       dialogHeight = _ref.dialogHeight;
 
-  var _a;
+  var _a, _b;
 
   var styles = getLayerStyles(layer);
   var bbox = getLayerBbox(layer);
@@ -12613,7 +12809,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
     title: layer.text,
     name: layer.name,
     dimensions: layer.dimensions,
-    legendURL: layer.styles && layer.styles.length && layer.styles[0].legendURL
+    legendURL: ((_b = layer.styles) === null || _b === void 0 ? void 0 : _b.length) ? layer.styles[0].legendURL : undefined
   })));
 };
 
@@ -13064,6 +13260,7 @@ var ServiceChip = function ServiceChip(_ref) {
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
       toggleChip = _ref.toggleChip;
+  var chip = all ? 'all' : service && service.serviceUrl;
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: ".concat(service["abstract"]) : ''
   }, /*#__PURE__*/React.createElement(CustomToggleButton, {
@@ -13072,10 +13269,10 @@ var ServiceChip = function ServiceChip(_ref) {
     tabIndex: 0,
     "data-testid": all ? 'serviceChipAll' : 'serviceChip',
     onClick: function onClick() {
-      return toggleChip(all ? 'all' : service && service.serviceUrl);
+      return toggleChip(chip);
     },
     onKeyPress: function onKeyPress() {
-      return toggleChip(all ? 'all' : service && service.serviceUrl);
+      return toggleChip(chip);
     },
     disabled: isDisabled,
     sx: style
@@ -13281,7 +13478,7 @@ var ServiceListConnect = function ServiceListConnect(_ref7) {
  * */
 var styles$1 = {
   servicesContainer: {
-    width: '300px',
+    width: '360px',
     maxHeight: '380px',
     top: '140px',
     backgroundColor: 'geowebColors.background.surface',
@@ -13296,6 +13493,10 @@ var styles$1 = {
     backgroundColor: 'geowebColors.background.surface',
     zIndex: 100
   },
+  loading: {
+    position: 'absolute',
+    zIndex: 101
+  },
   footer: {
     display: 'flex',
     justifyContent: 'center',
@@ -13316,8 +13517,11 @@ var styles$1 = {
 var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   var services = _ref.services,
       layerSelectRemoveService = _ref.layerSelectRemoveService,
+      layerSelectReloadService = _ref.layerSelectReloadService,
       selectedLayers = _ref.selectedLayers,
-      setServicePopupInfo = _ref.setServicePopupInfo;
+      setServicePopupInfo = _ref.setServicePopupInfo,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
 
   var openAddService = function openAddService() {
     setServicePopupInfo({
@@ -13331,9 +13535,13 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     "data-testid": "ServiceDialog"
   }, /*#__PURE__*/React.createElement(Box, {
     sx: styles$1.header
-  }, "Services"), /*#__PURE__*/React.createElement(Rows, {
+  }, "Services"), /*#__PURE__*/React.createElement(Backdrop, {
+    sx: styles$1.loading,
+    open: isLoading
+  }, /*#__PURE__*/React.createElement(CircularProgress, null)), /*#__PURE__*/React.createElement(Rows, {
     services: services,
     layerSelectRemoveService: layerSelectRemoveService,
+    layerSelectReloadService: layerSelectReloadService,
     setServicePopupInfo: setServicePopupInfo,
     selectedLayers: selectedLayers
   }), /*#__PURE__*/React.createElement(Box, {
@@ -13349,6 +13557,7 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
 
 var Rows = function Rows(_ref2) {
   var services = _ref2.services,
+      layerSelectReloadService = _ref2.layerSelectReloadService,
       layerSelectRemoveService = _ref2.layerSelectRemoveService,
       setServicePopupInfo = _ref2.setServicePopupInfo,
       selectedLayers = _ref2.selectedLayers;
@@ -13380,18 +13589,31 @@ var Rows = function Rows(_ref2) {
       noWrap: true,
       style: {
         textOverflow: 'ellipsis',
-        paddingRight: '60px'
+        paddingRight: '70px'
       }
     }, serviceName)), /*#__PURE__*/React.createElement(ListItemSecondaryAction, {
       style: {
-        marginRight: '-10px',
-        width: 90
+        marginRight: '0px',
+        width: 100
       }
     }, /*#__PURE__*/React.createElement(Grid, {
       container: true
     }, /*#__PURE__*/React.createElement(Grid, {
       item: true,
-      xs: 6
+      xs: 4
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Update layers from WMS service",
+      "data-testid": "updateServiceTooltip"
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      "data-testid": "updateServiceButton",
+      "aria-label": "Update layers from WMS service",
+      size: "large",
+      onClick: function onClick() {
+        return layerSelectReloadService(serviceUrl);
+      }
+    }, /*#__PURE__*/React.createElement(Cached, null)))), /*#__PURE__*/React.createElement(Grid, {
+      item: true,
+      xs: 4
     }, userAddedService ? /*#__PURE__*/React.createElement(Tooltip, {
       title: "Edit Service"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
@@ -13422,7 +13644,7 @@ var Rows = function Rows(_ref2) {
       }
     }, /*#__PURE__*/React.createElement(Visibility, null))))), /*#__PURE__*/React.createElement(Grid, {
       item: true,
-      xs: 6
+      xs: 4
     }, userAddedService && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Tooltip, {
       title: serviceHasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service',
       "data-testid": "removeServiceTooltip"
@@ -13438,26 +13660,31 @@ var Rows = function Rows(_ref2) {
   }));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
+var getService = function getService(services, serviceUrl) {
+  var serviceIds = Object.keys(services);
+  var serviceIndex = serviceIds.findIndex(function (serviceId) {
+    return services[serviceId].serviceUrl === serviceUrl;
+  });
+  if (serviceIndex < 0) return null;
+  return services[serviceIds[serviceIndex]];
+};
+
+var getServiceSuccesUpdateMessage = function getServiceSuccesUpdateMessage(serviceName) {
+  return "Service \"".concat(serviceName, "\" has been succesfully updated");
+};
+var getServiceFailedUpdateMessage = function getServiceFailedUpdateMessage(error) {
+  return "Unable to update service, reason: \"".concat(error.message, "\"");
+};
 
 var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
   var mapId = _ref.mapId,
       setServicePopupInfo = _ref.setServicePopupInfo;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isLoading = _React$useState2[0],
+      setIsLoading = _React$useState2[1];
+
   var dispatch = useDispatch();
   var layerSelectRemoveService = React.useCallback(function (serviceId, serviceUrl) {
     dispatch(layerSelectActions.layerSelectRemoveService({
@@ -13465,17 +13692,79 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
       serviceUrl: serviceUrl
     }));
   }, [dispatch]);
+  var serviceSetLayers = React.useCallback(function (payload) {
+    dispatch(serviceActions.serviceSetLayers(Object.assign(Object.assign({}, payload), {
+      isUpdating: true
+    })));
+  }, [dispatch]);
+  var showSnackbar = React.useCallback(function (message) {
+    dispatch(snackbarActions.openSnackbar({
+      message: message
+    }));
+  }, [dispatch]);
   var services = useSelector(function (store) {
     return getActiveServices(store);
   });
   var selectedLayers = useSelector(function (store) {
     return getMapLayers(store, mapId);
   });
+  var layerSelectReloadService = React.useCallback(function (serviceUrl) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var layersForService, service, serviceTitle;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setIsLoading(true);
+              _context.prev = 1;
+              _context.next = 4;
+              return loadWMSService(serviceUrl, true);
+
+            case 4:
+              layersForService = _context.sent;
+              service = getService(services, serviceUrl);
+              serviceSetLayers({
+                id: layersForService.id,
+                name: service && service.serviceName || layersForService.name,
+                serviceUrl: serviceUrl,
+                "abstract": service && service["abstract"] || layersForService["abstract"],
+                layers: layersForService.layers,
+                scope: service && service.scope || 'user',
+                isUpdating: true
+              });
+              clearImageCache();
+              serviceTitle = service && service.serviceName || layersForService.name;
+              showSnackbar(getServiceSuccesUpdateMessage(serviceTitle));
+              _context.next = 15;
+              break;
+
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](1);
+              // TODO: Maarten Plieger 2022-11-02: Snackbars should not be used to inform the user that something went wrong.
+              // https://gitlab.com/opengeoweb/opengeoweb/-/issues/2819
+              showSnackbar(getServiceFailedUpdateMessage(_context.t0));
+
+            case 15:
+              _context.prev = 15;
+              setIsLoading(false);
+              return _context.finish(15);
+
+            case 18:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 12, 15, 18]]);
+    }));
+  }, [serviceSetLayers, services, showSnackbar]);
   return /*#__PURE__*/React.createElement(ServiceOptionsDialog, {
     selectedLayers: selectedLayers,
     services: services,
     layerSelectRemoveService: layerSelectRemoveService,
-    setServicePopupInfo: setServicePopupInfo
+    layerSelectReloadService: layerSelectReloadService,
+    setServicePopupInfo: setServicePopupInfo,
+    isLoading: isLoading
   });
 };
 
@@ -15422,9 +15711,7 @@ var title = 'Now';
 
 var NowButton = function NowButton(_ref) {
   var _ref$onSetNow = _ref.onSetNow,
-      onSetNow = _ref$onSetNow === void 0 ? function () {
-    return null;
-  } : _ref$onSetNow,
+      onSetNow = _ref$onSetNow === void 0 ? function () {} : _ref$onSetNow,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return /*#__PURE__*/React.createElement(Tooltip, {
@@ -15441,92 +15728,125 @@ var NowButton = function NowButton(_ref) {
   }))));
 };
 
-var OptionsPopOver = styled(Popover)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    '& .MuiPaper-root': {
-      padding: '5px',
-      overflow: 'visible',
-      backgroundColor: theme.palette.geowebColors.background.surface
-    }
-  };
-});
-
-var OptionsMenuButton = function OptionsMenuButton(_ref2) {
-  var nowBtn = _ref2.nowBtn,
-      autoUpdateBtn = _ref2.autoUpdateBtn,
-      speedBtn = _ref2.speedBtn,
-      timeStepBtn = _ref2.timeStepBtn,
-      timeScaleBtn = _ref2.timeScaleBtn;
-
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      anchorEl = _React$useState2[0],
-      setAnchorEl = _React$useState2[1];
+var OptionsMenuButton = function OptionsMenuButton(_ref) {
+  var nowBtn = _ref.nowBtn,
+      autoUpdateBtn = _ref.autoUpdateBtn,
+      speedBtn = _ref.speedBtn,
+      timeStepBtn = _ref.timeStepBtn,
+      timeScaleBtn = _ref.timeScaleBtn,
+      _ref$isOpenByDefault = _ref.isOpenByDefault,
+      isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
 
-  var onClickButton = function onClickButton(event) {
-    setAnchorEl(event.currentTarget);
-  };
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      anchorEl = _useState2[0],
+      setAnchorEl = _useState2[1];
 
-  var handleClose = function handleClose() {
-    setAnchorEl(null);
-  };
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
 
-  var open = Boolean(anchorEl);
-  var id = open ? 'simple-popover' : undefined;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
+  useEffect(function () {
+    if (anchorEl && isOpenByDefault) {
+      setOpen(true);
+    }
+  }, [anchorEl, isOpenByDefault]);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Animation options",
     placement: "bottom"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
-    onClick: onClickButton,
+  }, /*#__PURE__*/React__default.createElement("span", {
+    ref: function ref(_ref2) {
+      setAnchorEl(_ref2);
+    }
+  }, /*#__PURE__*/React__default.createElement(ToolButton, {
+    onClick: function onClick() {
+      setOpen(!open);
+    },
     "data-testid": "optionsMenuButton",
     active: open,
     "aria-label": "animation options"
-  }, /*#__PURE__*/React.createElement(Options, null)))), /*#__PURE__*/React.createElement(OptionsPopOver, {
-    id: id,
+  }, /*#__PURE__*/React__default.createElement(Options, null)))), /*#__PURE__*/React__default.createElement(Popper, {
+    sx: {
+      zIndex: 3
+    },
+    placement: "top-start",
     open: open,
     "data-testid": "optionsMenuPopOver",
-    anchorEl: anchorEl,
-    onClose: handleClose,
-    anchorOrigin: {
-      vertical: -5,
-      horizontal: 'left'
+    anchorEl: anchorEl
+  }, /*#__PURE__*/React__default.createElement(Paper, {
+    elevation: 3
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    sx: {
+      padding: '0px 10px 10px'
     },
-    transformOrigin: {
-      vertical: 'bottom',
-      horizontal: 'left'
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     spacing: 1
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, nowBtn || /*#__PURE__*/React.createElement(NowButton, null)), /*#__PURE__*/React.createElement(Grid, {
+  }, nowBtn || /*#__PURE__*/React__default.createElement(NowButton, null)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, timeScaleBtn || /*#__PURE__*/React.createElement(TimeScaleButton, {
+  }, timeScaleBtn || /*#__PURE__*/React__default.createElement(TimeScaleButton, {
     centerTime: 0,
     onChangeTimeSliderScale: function onChangeTimeSliderScale() {},
     secondsPerPx: 0,
     selectedTime: 0,
     timeSliderScale: 0
-  })), /*#__PURE__*/React.createElement(Grid, {
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, timeStepBtn || /*#__PURE__*/React.createElement(TimeStepButton, {
+  }, timeStepBtn || /*#__PURE__*/React__default.createElement(TimeStepButton, {
     timeStep: 0,
     onChangeTimeStep: function onChangeTimeStep() {}
-  })), /*#__PURE__*/React.createElement(Grid, {
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, speedBtn || /*#__PURE__*/React.createElement(SpeedButton, {
+  }, speedBtn || /*#__PURE__*/React__default.createElement(SpeedButton, {
     animationDelay: defaultAnimationDelayAtStart,
     setMapAnimationDelay: function setMapAnimationDelay() {}
-  })), /*#__PURE__*/React.createElement(Grid, {
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, autoUpdateBtn || /*#__PURE__*/React.createElement(AutoUpdateButton, null)))));
+  }, autoUpdateBtn || /*#__PURE__*/React__default.createElement(AutoUpdateButton, null))))));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var forwardTooltipTitle = 'Forward';
+var backwardTooltipTitle = 'Backward';
+
+var BackwardForwardStepButton = function BackwardForwardStepButton(_ref) {
+  var isForwardStep = _ref.isForwardStep,
+      isDisabled = _ref.isDisabled,
+      _ref$onClickBFButton = _ref.onClickBFButton,
+      onClickBFButton = _ref$onClickBFButton === void 0 ? function () {} : _ref$onClickBFButton;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: isForwardStep ? forwardTooltipTitle : backwardTooltipTitle
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+    disabled: isDisabled,
+    "aria-label": isForwardStep ? 'forward' : 'backward',
+    onClick: onClickBFButton
+  }, isForwardStep ? /*#__PURE__*/React.createElement(StepForward, {
+    "data-testid": "step-forward-svg-path"
+  }) : /*#__PURE__*/React.createElement(StepBackward, {
+    "data-testid": "step-backward-svg-path"
+  }))));
 };
 
 /* *
@@ -15548,16 +15868,28 @@ var OptionsMenuButton = function OptionsMenuButton(_ref2) {
 
 var TimeSliderButtons = function TimeSliderButtons(_ref) {
   var optionsMenuBtn = _ref.optionsMenuBtn,
-      playBtn = _ref.playBtn;
+      playBtn = _ref.playBtn,
+      backwardBtn = _ref.backwardBtn,
+      forwardBtn = _ref.forwardBtn;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "timeSliderButtons"
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    spacing: 2
+    spacing: 0.5,
+    alignItems: "center",
+    justifyContent: "center"
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, optionsMenuBtn || /*#__PURE__*/React.createElement(OptionsMenuButton, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true
+  }, backwardBtn || /*#__PURE__*/React.createElement(BackwardForwardStepButton, {
+    isForwardStep: false
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true
+  }, forwardBtn || /*#__PURE__*/React.createElement(BackwardForwardStepButton, {
+    isForwardStep: true
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true
   }, playBtn || /*#__PURE__*/React.createElement(PlayButton, null))));
 };
 
@@ -16106,13 +16438,30 @@ var isColorIntervalEven = function isColorIntervalEven(scale, timestep) {
   }
 };
 
-var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale) {
+var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale, dataStartPx, dataEndPx, currentTimePx) {
   var ctx = context;
   var _theme$palette$geoweb7 = theme.palette.geowebColors.timeSlider,
-      timelineTimelineSurface = _theme$palette$geoweb7.timelineTimelineSurface,
-      timelineNightTime = _theme$palette$geoweb7.timelineNightTime;
-  ctx.fillStyle = timelineTimelineSurface.fill;
-  ctx.fillRect(0, 0, canvasWidth, height);
+      timelineNightTime = _theme$palette$geoweb7.timelineNightTime,
+      ledgendObservedBackground = _theme$palette$geoweb7.ledgendObservedBackground,
+      legendForecastBackground = _theme$palette$geoweb7.legendForecastBackground,
+      legendNoDataBackground = _theme$palette$geoweb7.legendNoDataBackground; // top spacing
+
+  var y = 0;
+  ctx.fillStyle = legendNoDataBackground.rgba;
+  ctx.fillRect(0, y, canvasWidth, height); // observed data
+
+  if (dataStartPx < currentTimePx) {
+    ctx.fillStyle = ledgendObservedBackground.fill;
+    ctx.fillRect(Math.max(dataStartPx, 0), y, Math.min(currentTimePx, dataEndPx) - Math.max(dataStartPx, 0), height);
+  } // forecast data
+
+
+  if (dataEndPx > currentTimePx) {
+    ctx.fillStyle = legendForecastBackground.fill;
+    ctx.fillRect(Math.max(currentTimePx, dataStartPx), y, Math.min(canvasWidth, dataEndPx) - Math.max(currentTimePx, dataStartPx), height);
+  } // hovered area
+
+
   ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
   ctx.fillRect(animationStartPx, 0, Math.max(animationEndPx - animationStartPx, 0), height);
   var colorChangeUnit = getColorChangeTimestepUnit(scale);
@@ -16213,7 +16562,7 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
   drawLeftSideDateText(ctx, theme, dateText, height);
 };
 
-var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix, animationStartTime, animationEndTime) {
+var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix, animationStartTime, animationEndTime, dataStartTime, dataEndTime) {
   var ctx = context;
 
   var _map3 = [0, canvasWidth].map(function (px) {
@@ -16223,14 +16572,18 @@ var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, can
       visibleTimeStart = _map4[0],
       visibleTimeEnd = _map4[1];
 
-  var _map5 = [animationStartTime, animationEndTime].map(function (time) {
+  var _map5 = [animationStartTime, animationEndTime, dataStartTime, dataEndTime, currentTimeUnix].map(function (time) {
     return timestampToPixel(time, centerTime, canvasWidth, secondsPerPx);
   }),
-      _map6 = _slicedToArray(_map5, 2),
+      _map6 = _slicedToArray(_map5, 5),
       animationStartPx = _map6[0],
-      animationEndPx = _map6[1];
+      animationEndPx = _map6[1],
+      dataStartPx = _map6[2],
+      dataEndPx = _map6[3],
+      currentTimePx = _map6[4];
 
-  drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale);
+  ctx.clearRect(0, 0, canvasWidth, height);
+  drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale, dataStartPx, dataEndPx, currentTimePx);
   drawTimeScale(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale, dataScaleToSecondsPerPx);
   drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
   drawCurrentTime(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, currentTimeUnix);
@@ -16343,7 +16696,9 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "timeSliderLegend",
     sx: {
-      height: "".concat(TIME_SLIDER_LEGEND_HEIGHT, "px")
+      height: "".concat(TIME_SLIDER_LEGEND_HEIGHT, "px"),
+      borderRadius: '4.5px',
+      overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(CanvasComponent, {
     ref: node,
@@ -16395,12 +16750,12 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       }
     },
     onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-      renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime);
+      renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
     }
   }));
 };
 
-var TIME_SLIDER_LEGEND_HEIGHT = 50;
+var TIME_SLIDER_LEGEND_HEIGHT = 24;
 
 /* eslint-disable no-param-reassign */
 
@@ -16592,20 +16947,6 @@ var renderTimeSliderRailWithNeedle = function renderTimeSliderRailWithNeedle(ctx
   drawNewNeedleLabel(ctx, selected, selectedPx, animationStartPx, animationEndPx, scale, theme);
 };
 
-var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
-  var prevTimeStep = moment.utc(curTime).subtract(timeStep, 'm').toISOString();
-  if (!prevTimeStep) return;
-  if (moment.utc(prevTimeStep) < moment.utc(dataStartTime * 1000)) return;
-  onsetNewDateDebounced(prevTimeStep, onSetNewDate);
-};
-
-var setNextTimeStep = function setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate) {
-  var nextTimeStep = moment.utc(curTime).add(timeStep, 'm').toISOString();
-  if (!nextTimeStep) return;
-  if (moment.utc(nextTimeStep) > moment.utc(dataEndTime * 1000)) return;
-  onsetNewDateDebounced(nextTimeStep, onSetNewDate);
-};
-
 var DRAG_AREA_WIDTH = 10;
 var DRAG_HANDLER_AREA_WIDTH = 30;
 
@@ -16905,6 +17246,37 @@ var TimeSliderRail = function TimeSliderRail(_ref) {
   }));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var HideSliderButton = function HideSliderButton(_ref) {
+  var isVisible = _ref.isVisible,
+      toggleTimeSliderIsVisible = _ref.toggleTimeSliderIsVisible;
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: isVisible ? 'Hide timeslider' : 'Show timeslider',
+    "data-testid": "autoUpdateButtonTooltip"
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(ToolButton, {
+    onClick: function onClick() {
+      toggleTimeSliderIsVisible(!isVisible);
+    },
+    "data-testid": "hideTimeSliderButton"
+  }, isVisible ? /*#__PURE__*/React__default.createElement(ChevronDown, null) : /*#__PURE__*/React__default.createElement(ChevronUp, null))));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16957,14 +17329,22 @@ var TimeSlider = function TimeSlider(_ref) {
       _ref$onToggleTimeSlid = _ref.onToggleTimeSlider,
       onToggleTimeSlider = _ref$onToggleTimeSlid === void 0 ? function () {} : _ref$onToggleTimeSlid;
   useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+  var visibilityState = isVisible ? 'visible' : 'hidden';
   return isVisible ? /*#__PURE__*/React.createElement(Grid, {
+    style: {
+      visibility: visibilityState
+    },
     container: true,
     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.createElement(Grid, {
     item: true
   }), /*#__PURE__*/React.createElement(Grid, {
@@ -16973,19 +17353,30 @@ var TimeSlider = function TimeSlider(_ref) {
     selectedTime: defaultProps.selectedTime,
     mapIsActive: mapIsActive
   })), ' '), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    sx: {
-      height: '50px'
-    },
-    container: true,
-    alignItems: "center",
-    justifyContent: "center"
+    item: true
+  }), /*#__PURE__*/React.createElement(Grid, {
+    item: true
   }, buttons || /*#__PURE__*/React.createElement(TimeSliderButtons, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, legend || /*#__PURE__*/React.createElement(TimeSliderLegend, Object.assign({}, defaultProps, {
     selectedTime: defaultProps.selectedTime.unix(),
     mapIsActive: mapIsActive
-  })), ' ')) : null;
+  })), ' '), /*#__PURE__*/React.createElement(Grid, {
+    item: true
+  }, /*#__PURE__*/React.createElement(HideSliderButton, {
+    toggleTimeSliderIsVisible: onToggleTimeSlider,
+    isVisible: isVisible
+  }))) : /*#__PURE__*/React.createElement(Grid, {
+    sx: {
+      paddingRight: 1
+    },
+    container: true,
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React.createElement(HideSliderButton, {
+    toggleTimeSliderIsVisible: onToggleTimeSlider,
+    isVisible: isVisible
+  }));
 };
 
 /* *
@@ -17294,6 +17685,63 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
   });
 };
 
+var BackwardForwardStepButtonConnect = function BackwardForwardStepButtonConnect(_ref) {
+  var isForwardStep = _ref.isForwardStep,
+      mapId = _ref.mapId;
+  var timeStep = useSelector(function (store) {
+    return getMapTimeStep(store, mapId);
+  });
+  var dispatch = useDispatch();
+
+  var setTime = function setTime(newDate) {
+    dispatch(genericActions.setTime({
+      origin: '',
+      sourceId: mapId,
+      value: handleMomentISOString(newDate)
+    }));
+  };
+
+  var stopAnimation = function stopAnimation() {
+    dispatch(mapActions$1.mapStopAnimation({
+      mapId: mapId,
+      origin: MapActionOrigin.map
+    }));
+  };
+
+  var isAnimating$1 = useSelector(function (store) {
+    return isAnimating(store, mapId);
+  });
+  var timedim = useSelector(function (store) {
+    return getMapDimension(store, mapId, 'time');
+  });
+  var selectedTime = getSelectedTime(timedim);
+  var curTime = moment.unix(selectedTime).toISOString();
+  var layers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
+
+  var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
+      _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
+      dataStartTime = _getDataLimitsFromLay2[0],
+      dataEndTime = _getDataLimitsFromLay2[1];
+
+  var onClickBF = function onClickBF() {
+    if (isAnimating$1) {
+      stopAnimation();
+    }
+
+    isForwardStep ? setNextTimeStep(timeStep, curTime, dataEndTime, setTime) : setPreviousTimeStep(timeStep, curTime, dataStartTime, setTime);
+  };
+
+  return /*#__PURE__*/React__default.createElement(BackwardForwardStepButton, {
+    isDisabled: false,
+    isForwardStep: isForwardStep,
+    onClickBFButton: function onClickBFButton() {
+      onClickBF();
+    }
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17329,6 +17777,14 @@ var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_ref) {
     }),
     playBtn: /*#__PURE__*/React.createElement(PlayButtonConnect, {
       mapId: mapId
+    }),
+    backwardBtn: /*#__PURE__*/React.createElement(BackwardForwardStepButtonConnect, {
+      mapId: mapId,
+      isForwardStep: false
+    }),
+    forwardBtn: /*#__PURE__*/React.createElement(BackwardForwardStepButtonConnect, {
+      mapId: mapId,
+      isForwardStep: true
     })
   });
 };
@@ -17352,8 +17808,6 @@ var connectRedux$2 = connect(function (store, props) {
 }, {
   stopMapAnimation: mapActions$1.mapStopAnimation,
   setTime: genericActions.setTime,
-  syncGroupAddSource: genericActions.syncGroupAddSource,
-  syncGroupRemoveSource: genericActions.syncGroupRemoveSource,
   mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime,
   mapSetTimeSliderSecondsPerPx: mapActions$1.setTimeSliderSecondsPerPx
 });
@@ -17375,8 +17829,6 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       activeWindowId = _ref.activeWindowId,
       stopMapAnimation = _ref.stopMapAnimation,
       setTime = _ref.setTime,
-      syncGroupAddSource = _ref.syncGroupAddSource,
-      syncGroupRemoveSource = _ref.syncGroupRemoveSource,
       mapSetTimeSliderCenterTime = _ref.mapSetTimeSliderCenterTime,
       mapSetTimeSliderSecondsPerPx = _ref.mapSetTimeSliderSecondsPerPx;
 
@@ -17391,17 +17843,6 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
       dataEndTime = _getDataLimitsFromLay2[1];
 
   var mapIsActive = mapId === activeWindowId;
-  React.useEffect(function () {
-    syncGroupAddSource({
-      id: sourceId,
-      type: [SYNCGROUPS_TYPE_SETTIME]
-    });
-    return function () {
-      syncGroupRemoveSource({
-        id: sourceId
-      });
-    };
-  }, [sourceId, syncGroupAddSource, syncGroupRemoveSource]);
   return /*#__PURE__*/React.createElement(TimeSliderLegend, {
     centerTime: centerTime,
     secondsPerPx: secondsPerPx,
@@ -17479,8 +17920,6 @@ var connectRedux$1 = connect(function (store, props) {
   setAnimationEndTime: mapActions$1.setAnimationEndTime,
   setTime: genericActions.setTime,
   stopMapAnimation: mapActions$1.mapStopAnimation,
-  syncGroupAddSource: genericActions.syncGroupAddSource,
-  syncGroupRemoveSource: genericActions.syncGroupRemoveSource,
   mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime
 });
 
@@ -17502,8 +17941,6 @@ var TimeSliderRailConnectComponent = function TimeSliderRailConnectComponent(_re
       setAnimationEndTime = _ref.setAnimationEndTime,
       stopMapAnimation = _ref.stopMapAnimation,
       setTime = _ref.setTime,
-      syncGroupAddSource = _ref.syncGroupAddSource,
-      syncGroupRemoveSource = _ref.syncGroupRemoveSource,
       mapSetTimeSliderCenterTime = _ref.mapSetTimeSliderCenterTime;
 
   var _getMomentTimeBounds = getMomentTimeBounds(dimensions),
@@ -17514,20 +17951,9 @@ var TimeSliderRailConnectComponent = function TimeSliderRailConnectComponent(_re
   var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
       _getDataLimitsFromLay2 = _slicedToArray(_getDataLimitsFromLay, 2),
       dataStartTime = _getDataLimitsFromLay2[0],
-      dataEndTime = _getDataLimitsFromLay2[1];
-
-  var mapIsActive = activeWindowId === mapId;
-  React.useEffect(function () {
-    syncGroupAddSource({
-      id: sourceId,
-      type: [SYNCGROUPS_TYPE_SETTIME]
-    });
-    return function () {
-      syncGroupRemoveSource({
-        id: sourceId
-      });
-    };
-  }, [sourceId, syncGroupAddSource, syncGroupRemoveSource]);
+      dataEndTime = _getDataLimitsFromLay2[1];
+
+  var mapIsActive = activeWindowId === mapId;
   return /*#__PURE__*/React.createElement(TimeSliderRail, {
     centerTime: centerTime,
     secondsPerPx: secondsPerPx,
@@ -22122,6 +22548,141 @@ var LegendMapButtonConnect = function LegendMapButtonConnect(_ref) {
   }, /*#__PURE__*/React.createElement(List$1, null));
 };
 
+var MIN_WIDTH = 170;
+var MIN_HEIGHT = 32;
+var MIN_FONT_SIZE = 14;
+var FONT_SIZE_WIDTH_RATIO = MIN_FONT_SIZE / MIN_WIDTH;
+var TimeSliderClock = function TimeSliderClock(_ref2) {
+  var time = _ref2.time;
+  var nodeRef = React.useRef(null);
+
+  var _React$useState = React.useState({
+    x: 0,
+    y: 0
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      position = _React$useState2[0],
+      setPosition = _React$useState2[1];
+
+  useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition);
+
+  var _React$useState3 = React.useState({
+    width: MIN_WIDTH,
+    height: MIN_HEIGHT
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      size = _React$useState4[0],
+      setSize = _React$useState4[1];
+
+  var _React$useState5 = React.useState(MIN_FONT_SIZE),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      fontSize = _React$useState6[0],
+      setFontSize = _React$useState6[1];
+
+  return /*#__PURE__*/React.createElement(Draggable, {
+    nodeRef: nodeRef,
+    bounds: "parent",
+    position: position,
+    onStop: function onStop(_event, position) {
+      setPosition(position);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      zIndex: 100,
+      top: '10px',
+      right: '10px'
+    },
+    ref: nodeRef
+  }, /*#__PURE__*/React.createElement(Resizable, {
+    onResizeStart: function onResizeStart(event) {
+      event.stopPropagation();
+    },
+    onResize: function onResize(_event, _direction, _ref, delta) {
+      var width = size.width + delta.width;
+      var fontSize = FONT_SIZE_WIDTH_RATIO * width;
+      setFontSize(fontSize);
+    },
+    onResizeStop: function onResizeStop(_event, _direction, _ref, delta) {
+      var width = size.width + delta.width;
+      var height = size.height + delta.height;
+      setSize({
+        width: width,
+        height: height
+      });
+    },
+    lockAspectRatio: true,
+    minHeight: MIN_HEIGHT,
+    minWidth: MIN_WIDTH,
+    size: size,
+    handleComponent: {
+      bottomLeft: /*#__PURE__*/React.createElement(Resize, {
+        isRightAligned: true,
+        style: {
+          fill: '#FFFFFF'
+        }
+      })
+    },
+    enable: {
+      top: false,
+      right: false,
+      bottom: false,
+      left: false,
+      topRight: false,
+      bottomRight: false,
+      bottomLeft: true,
+      topLeft: false
+    }
+  }, /*#__PURE__*/React.createElement(Box$2, {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    sx: {
+      cursor: 'move',
+      height: '100%',
+      width: '100%',
+      backgroundColor: '#051039',
+      borderRadius: '5px'
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2",
+    sx: {
+      color: '#FFFFFF',
+      fontSize: fontSize
+    }
+  }, moment.utc(time).format('ddd DD MMM HH:mm z'))))));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var TimeSliderClockConnect = function TimeSliderClockConnect(_ref) {
+  var mapId = _ref.mapId;
+  var dimensions = useSelector(function (store) {
+    return getMapDimensions(store, mapId);
+  });
+
+  var _getMomentTimeBounds = getMomentTimeBounds(dimensions),
+      selectedTime = _getMomentTimeBounds.selectedTime;
+
+  return /*#__PURE__*/React__default.createElement(TimeSliderClock, {
+    time: selectedTime
+  });
+};
+
 var titleStyle = function titleStyle(theme) {
   return {
     position: 'absolute',
@@ -22171,7 +22732,9 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       _a$multiLegend = _a.multiLegend,
       multiLegend = _a$multiLegend === void 0 ? true : _a$multiLegend,
       shouldShowLayerManager = _a.shouldShowLayerManager,
-      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager"]);
+      _a$showClock = _a.showClock,
+      showClock = _a$showClock === void 0 ? true : _a$showClock,
+      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock"]);
 
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -22257,6 +22820,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     showMapId: true,
     mapId: mapId,
     multiLegend: multiLegend
+  }), showClock && /*#__PURE__*/React__default.createElement(TimeSliderClockConnect, {
+    mapId: mapId
   }));
 };
 
@@ -22296,7 +22861,9 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       _ref$showZoomControls = _ref.showZoomControls,
       showZoomControls = _ref$showZoomControls === void 0 ? true : _ref$showZoomControls,
       _ref$multiLegend = _ref.multiLegend,
-      multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
+      multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend,
+      _ref$showClock = _ref.showClock,
+      showClock = _ref$showClock === void 0 ? true : _ref$showClock;
   var dispatch = useDispatch();
   var syncGroupAddTarget = React__default.useCallback(function (payload) {
     dispatch(genericActions.syncGroupAddTarget(payload));
@@ -22339,6 +22906,8 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
     showMapId: true,
     mapId: firstMapId,
     multiLegend: multiLegend
+  }), showClock && /*#__PURE__*/React__default.createElement(TimeSliderClockConnect, {
+    mapId: firstMapId
   }), maps.map(function (map, mapIndex) {
     var mapId = map.id;
     return /*#__PURE__*/React__default.createElement(Box, {
@@ -22358,96 +22927,12 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       shouldShowZoomControls: showZoomControls && mapIndex === 0,
       showTimeSlider: false,
       disableTimeSlider: true,
+      showClock: false,
       multiLegend: multiLegend
     }));
   }));
 };
 
-var useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
-  var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      referenceTimes = _React$useState2[0],
-      setReferenceTimes = _React$useState2[1];
-
-  React.useEffect(function () {
-    var referenceTimes = [];
-    var wmLayer = new WMLayer(Object.assign({}, inputLayer));
-    wmLayer.parseLayerPromise().then(function (layer) {
-      var refTimeDim = layer.getDimension('reference_time');
-      /* Loop through all values of the dimension.
-         A map cannot be used for iterating,  as the dimension values are not in an array (it is an API). */
-
-      for (var j = 0; j < refTimeDim.size(); j += 1) {
-        var referenceTimeValue = refTimeDim.getValueForIndex(j);
-        referenceTimes.push(referenceTimeValue);
-      }
-
-      setReferenceTimes(referenceTimes);
-    });
-  }, [inputLayer]);
-  return referenceTimes;
-};
-
-var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
-  var layers = _ref.layers,
-      _ref$multiLegend = _ref.multiLegend,
-      multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
-
-  /* Get all the reference times for this layer */
-  var referenceTimes = useGetReferenceTimes(layers.topRow);
-  if (referenceTimes.length === 0) return /*#__PURE__*/React.createElement("div", null, "Loading...");
-  /* Helper to make a map layer prest */
-
-  var makeMapPreset = function makeMapPreset(referenceTime, uniqueId, layer, syncGroupsIds, col) {
-    return {
-      id: uniqueId,
-      title: "Harmonie run ".concat("".concat(referenceTime.substring(8, 13).replace('T', ' / '))),
-      bbox: {
-        left: -450651.2255879827,
-        bottom: 6490531.093143953,
-        right: 1428345.8183648037,
-        top: 7438773.776232235
-      },
-      srs: 'EPSG:3857',
-      layers: [Object.assign(Object.assign({}, layer), {
-        id: uniqueId,
-        dimensions: [{
-          name: 'reference_time',
-          currentValue: referenceTime
-        }]
-      })],
-      syncGroupsIds: syncGroupsIds,
-      displayLayerManagerAndLegendButtonInMap: col === 0 || !syncGroupsIds,
-      displayDimensionSelectButtonInMap: col === 0 || !syncGroupsIds
-    };
-  };
-  /* Make the preset */
-
-
-  var nCols = 5;
-  /* Add the harmonie air temperature layers with the different referencetimes */
-
-  var mapsTemperature = _toConsumableArray(Array(nCols)).map(function (_, index) {
-    var refTime = referenceTimes[referenceTimes.length - nCols + index];
-    return makeMapPreset(refTime, "harm_air".concat(index), layers.topRow, layers.topRowSyncGroups, index);
-  });
-  /* Add the harmonie precipitation layers with the different referencetimes */
-
-
-  var mapsPrecipitation = _toConsumableArray(Array(nCols)).map(function (_, index) {
-    var refTime = referenceTimes[referenceTimes.length - nCols + index];
-    return makeMapPreset(refTime, "harm_precip".concat(index), layers.bottomRow, layers.bottomRowSyncGroups, index);
-  });
-
-  var maps = mapsTemperature.concat(mapsPrecipitation);
-  return /*#__PURE__*/React.createElement(MultiMapViewConnect, {
-    rows: 2,
-    cols: 5,
-    maps: maps,
-    multiLegend: multiLegend
-  });
-};
-
 var useGetLatestReferenceTime = function useGetLatestReferenceTime(inputLayer) {
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -22464,8 +22949,30 @@ var useGetLatestReferenceTime = function useGetLatestReferenceTime(inputLayer) {
   }, [inputLayer]);
   return latestReferenceTime;
 };
-/* Helper to make a map layer preset */
+/**
+ * Custom hook to find out if the list of syncgroup id's contains a group which is of type SYNCGROUPS_TYPE_SETLAYERACTIONS
+ * @param syncGroupsIds A string array of syncgroup ids
+ * @returns True if indeed a group is included which is of type SYNCGROUPS_TYPE_SETLAYERACTIONS
+ */
+
+
+var useHasSyncGroupWithLayerActions = function useHasSyncGroupWithLayerActions(syncGroupsIds) {
+  /* Get Syncgroupstate */
+  var syncGroupState = useSelector(function (store) {
+    return getSynchronizationGroupState(store);
+  });
+  if (!syncGroupState) return false;
+  /* Return all syncgroups configured for this component of type SYNCGROUPS_TYPE_SETLAYERACTIONS */
 
+  var syncGroupsWithLayerActions = syncGroupState.groups.allIds.filter(function (syncGroupId) {
+    return syncGroupsIds && syncGroupsIds.includes(syncGroupId) && syncGroupState.groups.byId[syncGroupId].type === 'SYNCGROUPS_TYPE_SETLAYERACTIONS';
+  });
+  /* Figure out if there is a syncgroup which controls layeractions.  */
+
+  var displayLayerManagerAndLegendButtonInAllMaps = syncGroupsIds ? syncGroupsWithLayerActions.length === 1 : false;
+  return displayLayerManagerAndLegendButtonInAllMaps;
+};
+/* Helper to make a map layer preset */
 
 var makeMapPreset = function makeMapPreset(timeIncrement, uniqueId, referenceTime, layers, syncGroupsIds, displayLayerManagerAndLegendButtonInMap, displayDimensionSelectButtonInMap) {
   var mapTime = moment.utc(referenceTime).add(timeIncrement, 'h').format('YYYY-MM-DDTHH:mm:ss[Z]');
@@ -22507,8 +23014,9 @@ var ModelRunInterval = function ModelRunInterval(_ref) {
       startTimeIncrement = _ref$startTimeIncreme === void 0 ? 3 : _ref$startTimeIncreme,
       _ref$multiLegend = _ref.multiLegend,
       multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
-
+  var displayLayerManagerAndLegendButtonInAllMaps = !useHasSyncGroupWithLayerActions(syncGroupsIds);
   /* Get latest reference time for this layer */
+
   var latestReferenceTime = useGetLatestReferenceTime(layers[0]);
   if (latestReferenceTime === '') return /*#__PURE__*/React.createElement("div", null, "Loading...");
   /* Calculate the last time increment based on 15 maps */
@@ -22521,7 +23029,7 @@ var ModelRunInterval = function ModelRunInterval(_ref) {
 
 
   var maps = timeIncrements.map(function (increment, index) {
-    return makeMapPreset(increment, "harm_precip".concat(increment), latestReferenceTime, layers, syncGroupsIds, index === 0 || !syncGroupsIds, index === 0 || !syncGroupsIds);
+    return makeMapPreset(increment, "harm_precip".concat(increment), latestReferenceTime, layers, syncGroupsIds, index === 0 || displayLayerManagerAndLegendButtonInAllMaps, index === 0 || displayLayerManagerAndLegendButtonInAllMaps);
   });
   return /*#__PURE__*/React.createElement(MultiMapViewConnect, {
     rows: 3,
@@ -22529,6 +23037,94 @@ var ModelRunInterval = function ModelRunInterval(_ref) {
     maps: maps,
     syncTime: false,
     showTimeSlider: false,
+    multiLegend: multiLegend,
+    showClock: false
+  });
+};
+
+var useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      referenceTimes = _React$useState2[0],
+      setReferenceTimes = _React$useState2[1];
+
+  React.useEffect(function () {
+    var referenceTimes = [];
+    var wmLayer = new WMLayer(Object.assign({}, inputLayer));
+    wmLayer.parseLayerPromise().then(function (layer) {
+      var refTimeDim = layer.getDimension('reference_time');
+      /* Loop through all values of the dimension.
+         A map cannot be used for iterating,  as the dimension values are not in an array (it is an API). */
+
+      for (var j = 0; j < refTimeDim.size(); j += 1) {
+        var referenceTimeValue = refTimeDim.getValueForIndex(j);
+        referenceTimes.push(referenceTimeValue);
+      }
+
+      setReferenceTimes(referenceTimes);
+    });
+  }, [inputLayer]);
+  return referenceTimes;
+};
+
+var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_ref) {
+  var layers = _ref.layers,
+      _ref$multiLegend = _ref.multiLegend,
+      multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend;
+  var displayLayerManagerAndLegendButtonInAllTopRows = !useHasSyncGroupWithLayerActions(layers && layers.topRowSyncGroups);
+  var displayLayerManagerAndLegendButtonInAllBottomRows = !useHasSyncGroupWithLayerActions(layers && layers.bottomRowSyncGroups);
+  /* Get all the reference times for this layer */
+
+  var referenceTimes = useGetReferenceTimes(layers.topRow);
+  if (referenceTimes.length === 0) return /*#__PURE__*/React.createElement("div", null, "Loading...");
+  /* Helper to make a map layer prest */
+
+  var makeMapPreset = function makeMapPreset(referenceTime, uniqueId, layer, syncGroupsIds, col) {
+    return {
+      id: uniqueId,
+      title: "Harmonie run ".concat("".concat(referenceTime.substring(8, 13).replace('T', ' / '))),
+      bbox: {
+        left: -450651.2255879827,
+        bottom: 6490531.093143953,
+        right: 1428345.8183648037,
+        top: 7438773.776232235
+      },
+      srs: 'EPSG:3857',
+      layers: [Object.assign(Object.assign({}, layer), {
+        id: uniqueId,
+        dimensions: [{
+          name: 'reference_time',
+          currentValue: referenceTime
+        }]
+      })],
+      syncGroupsIds: syncGroupsIds,
+      displayLayerManagerAndLegendButtonInMap: col === 0 || displayLayerManagerAndLegendButtonInAllTopRows,
+      displayDimensionSelectButtonInMap: col === 0 || displayLayerManagerAndLegendButtonInAllBottomRows
+    };
+  };
+  /* Make the preset */
+
+
+  var nCols = 5;
+  /* Add the harmonie air temperature layers with the different referencetimes */
+
+  var mapsTemperature = _toConsumableArray(Array(nCols)).map(function (_, index) {
+    var refTime = referenceTimes[referenceTimes.length - nCols + index];
+    return makeMapPreset(refTime, "harm_air".concat(index), layers.topRow, layers.topRowSyncGroups, index);
+  });
+  /* Add the harmonie precipitation layers with the different referencetimes */
+
+
+  var mapsPrecipitation = _toConsumableArray(Array(nCols)).map(function (_, index) {
+    var refTime = referenceTimes[referenceTimes.length - nCols + index];
+    return makeMapPreset(refTime, "harm_precip".concat(index), layers.bottomRow, layers.bottomRowSyncGroups, index);
+  });
+
+  var maps = mapsTemperature.concat(mapsPrecipitation);
+  return /*#__PURE__*/React.createElement(MultiMapViewConnect, {
+    rows: 2,
+    cols: 5,
+    maps: maps,
     multiLegend: multiLegend
   });
 };
@@ -22980,8 +23576,7 @@ var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 var store = createStore({
-  initialState: {},
-  extensions: [getSagaExtension({})]
+  extensions: [getSagaExtension()]
 });
 
 /* *
@@ -23162,9 +23757,7 @@ var SnackbarWrapper = function SnackbarWrapper(_a) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var SnackbarWrapperConnect = function SnackbarWrapperConnect(_a) {
-  var props = __rest(_a, []);
-
+var SnackbarWrapperConnect = withEggs([snackbarModuleConfig])(function (props) {
   var dispatch = useDispatch();
 
   var onCloseSnackbar = function onCloseSnackbar() {
@@ -23174,15 +23767,13 @@ var SnackbarWrapperConnect = function SnackbarWrapperConnect(_a) {
   var currentSnackbarMessage = useSelector(function (store) {
     return getFirstSnackbarMessage(store);
   });
-  return /*#__PURE__*/React.createElement(DynamicModuleLoader, {
-    modules: [snackbarModuleConfig]
-  }, /*#__PURE__*/React.createElement(SnackbarWrapper, Object.assign({
+  return /*#__PURE__*/React.createElement(SnackbarWrapper, Object.assign({
     isOpen: !!currentSnackbarMessage,
     onCloseSnackbar: onCloseSnackbar,
     message: currentSnackbarMessage ? currentSnackbarMessage.message : '',
     id: currentSnackbarMessage ? currentSnackbarMessage.id : ''
-  }, props)));
-};
+  }, props));
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23214,6 +23805,13 @@ var CoreThemeProvider = function CoreThemeProvider(_ref) {
     theme: theme
   }, children);
 };
+var ThemeWrapperWithModules = withEggs(coreModuleConfig)(function (_ref2) {
+  var theme = _ref2.theme,
+      children = _ref2.children;
+  return /*#__PURE__*/React__default.createElement(CoreThemeProvider, {
+    theme: theme
+  }, children, " ");
+});
 /**
  * A Provider component which provides the GeoWeb theme and store for the core.
  * Note: Should only be used with core components, as the provided store is only for core.
@@ -23221,18 +23819,16 @@ var CoreThemeProvider = function CoreThemeProvider(_ref) {
  * @returns
  */
 
-var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
-  var children = _ref2.children,
-      _ref2$theme = _ref2.theme,
-      theme = _ref2$theme === void 0 ? lightTheme : _ref2$theme,
-      store = _ref2.store;
+var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref3) {
+  var children = _ref3.children,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? lightTheme : _ref3$theme,
+      store = _ref3.store;
   return /*#__PURE__*/React__default.createElement(Provider, {
     store: store
-  }, /*#__PURE__*/React__default.createElement(DynamicModuleLoader, {
-    modules: coreModuleConfig
-  }, /*#__PURE__*/React__default.createElement(CoreThemeProvider, {
+  }, /*#__PURE__*/React__default.createElement(ThemeWrapperWithModules, {
     theme: theme
-  }, /*#__PURE__*/React__default.createElement(SnackbarWrapperConnect, null, children))));
+  }, /*#__PURE__*/React__default.createElement(SnackbarWrapperConnect, null, children)));
 };
 
 /* *