@opengeoweb/core 4.2.0 → 4.4.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@opengeoweb/webmap', 'react-sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.webmap, global.reactSortablejs, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, webmap, reactSortablejs, formFields, reactHookForm, reactWindow, Box, Typography, Grid, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@mui/material/Tooltip'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('@mui/system'), require('react-draggable'), require('re-resizable'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@mui/material/Tooltip', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', '@mui/system', 'react-draggable', 're-resizable', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.webmap, global.reactSortablejs, global.Sortable, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.Tooltip, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.system, global.Draggable, global.reResizable, global.reduxToolkit, global.sagaExtension));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, webmap, reactSortablejs, Sortable, formFields, reactHookForm, reactWindow, Box, Typography, Grid, Tooltip, throttleDebounce, cloneDeep, proj4, turf, system, Draggable, reResizable, reduxToolkit, sagaExtension) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,12 +29,15 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+    var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
     var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
     var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
     var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+    var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
     var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
     var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
     var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
+    var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -206,6 +209,7 @@
       LayerActionOrigin["ReactMapViewParseLayer"] = "ReactMapViewParseLayer";
       LayerActionOrigin["setLayerDimensionSaga"] = "setLayerDimensionSaga";
       LayerActionOrigin["toggleAutoUpdateSaga"] = "toggleAutoUpdateSaga";
+      LayerActionOrigin["unregisterMapSaga"] = "unregisterMapSaga";
     })(LayerActionOrigin || (LayerActionOrigin = {}));
 
     /* *
@@ -437,6 +441,7 @@
         get LayerActionOrigin () { return LayerActionOrigin; }
     });
 
+    var millisecondsInSecond = 1000;
     var defaultAnimationDelayAtStart = 250;
     var defaultDelay = 1000; // [ms]
 
@@ -453,6 +458,11 @@
     var getSpeedFactor = function getSpeedFactor(speedDelay) {
       return defaultDelay / speedDelay;
     };
+    var getSelectedTime = function getSelectedTime(timeDimension) {
+      var currentValueIsValid = timeDimension && timeDimension.currentValue && moment__default["default"].utc(timeDimension.currentValue).isValid();
+      var selectedTime = currentValueIsValid && timeDimension ? moment__default["default"].utc(timeDimension.currentValue).unix() : moment__default["default"].utc().unix();
+      return selectedTime;
+    };
     /**
      * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
      */
@@ -462,13 +472,12 @@
         second: 0,
         millisecond: 0
       }).unix();
-      var timeDimension = dimensions ? dimensions.find(function (dim) {
+      var timeDimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dim) {
         return dim.name === 'time';
-      }) : null;
+      });
       var startTime = timeDimension && timeDimension.minValue ? moment__default["default"].utc(timeDimension.minValue).unix() : defaultStartEnd;
       var endTime = timeDimension && timeDimension.maxValue ? moment__default["default"].utc(timeDimension.maxValue).unix() : defaultStartEnd;
-      var currentValueIsValid = timeDimension && timeDimension.currentValue && moment__default["default"].utc(timeDimension.currentValue).isValid();
-      var selectedTime = currentValueIsValid ? moment__default["default"].utc(timeDimension.currentValue).unix() : moment__default["default"].utc().unix();
+      var selectedTime = getSelectedTime(timeDimension);
       return {
         selectedTime: selectedTime,
         startTime: startTime,
@@ -503,22 +512,12 @@
     var pixelToTimestamp = function pixelToTimestamp(timePx, centerTime, widthPx, secondsPerPx) {
       return centerTime - (widthPx / 2 - timePx) * secondsPerPx;
     };
-    var onSetNewDateDebouncer;
     var onsetNewDateDebounced = function onsetNewDateDebounced(dateToSet, onSetNewDate) {
-      /* Debounce the dateToSet with a simple timeout */
-      if (onSetNewDateDebouncer === undefined) {
-        onSetNewDateDebouncer = dateToSet;
+      _.debounce(function () {
         onSetNewDate(dateToSet);
-        window.setTimeout(function () {
-          if (onSetNewDateDebouncer !== undefined && onSetNewDateDebouncer !== dateToSet) {
-            onSetNewDate(onSetNewDateDebouncer);
-          }
-
-          onSetNewDateDebouncer = undefined;
-        }, 10);
-      } else {
-        onSetNewDateDebouncer = dateToSet;
-      }
+      }, 10, {
+        leading: true
+      })();
     };
     var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
       var adjustedTimeStep = timeStep * 60;
@@ -540,7 +539,9 @@
     var setNewRoundedTime = function setNewRoundedTime(x, centerTime, width, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate) {
       var unixTime = pixelToTimestamp(x, centerTime, width, secondsPerPx);
       var roundedTime = roundWithTimeStep(unixTime, timeStep);
-      var selectedTimeString = moment__default["default"].unix(Math.min(Math.max(roundedTime, dataStartTime), dataEndTime)).toISOString();
+      var maxTime = Math.max(roundedTime, dataStartTime);
+      var newTime = Math.min(maxTime, dataEndTime || roundedTime);
+      var selectedTimeString = moment__default["default"].unix(newTime).toISOString();
       onsetNewDateDebounced(selectedTimeString, onSetNewDate);
     };
     var getDataLimitsFromLayers = function getDataLimitsFromLayers(layers) {
@@ -567,49 +568,31 @@
        */
       [2147483647, 0]);
     };
-    var getNextTimeStepvalue = function getNextTimeStepvalue(value, max) {
-      var newValue = value + 1;
-      return newValue > max ? max : newValue;
-    };
-    var getPreviousTimeStepvalue = function getPreviousTimeStepvalue(value, min) {
-      var newValue = value - 1;
-      return newValue < min ? min : newValue;
-    };
-    var getValueFromKeyboardEvent = function getValueFromKeyboardEvent(event, value, min, max, supportFourDirectionNavigation) {
-      if (supportFourDirectionNavigation === void 0) {
-        supportFourDirectionNavigation = false;
-      }
+    var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
+      var prevTimeStep = moment__default["default"].utc(curTime).subtract(timeStep, 'm').toISOString();
 
-      if (!supportFourDirectionNavigation) {
-        if (event.ctrlKey || event.metaKey) {
-          switch (event.key) {
-            case 'ArrowDown':
-              return getPreviousTimeStepvalue(value, min);
+      if (!prevTimeStep) {
+        return;
+      }
 
-            case 'ArrowUp':
-              return getNextTimeStepvalue(value, max);
+      if (moment__default["default"].utc(prevTimeStep) < moment__default["default"].utc(dataStartTime * millisecondsInSecond)) {
+        return;
+      }
 
-            default:
-              return null;
-          }
-        }
-      } else {
-        // currently supportFourDirectionNavigation (left/right/up/down) is only used in horizontal slider TimeSliderScaleSlider
-        switch (event.key) {
-          case 'ArrowDown':
-          case 'ArrowLeft':
-            return getPreviousTimeStepvalue(value, min);
+      onsetNewDateDebounced(prevTimeStep, onSetNewDate);
+    };
+    var setNextTimeStep = function setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate) {
+      var nextTimeStep = moment__default["default"].utc(curTime).add(timeStep, 'm').toISOString();
 
-          case 'ArrowUp':
-          case 'ArrowRight':
-            return getNextTimeStepvalue(value, max);
+      if (!nextTimeStep) {
+        return;
+      }
 
-          default:
-            return null;
-        }
+      if (moment__default["default"].utc(nextTimeStep) > moment__default["default"].utc(dataEndTime * millisecondsInSecond)) {
+        return;
       }
 
-      return null;
+      onsetNewDateDebounced(nextTimeStep, onSetNewDate);
     };
     var getTimeStepFromDataInterval = function getTimeStepFromDataInterval(timeInterval) {
       switch (timeInterval.isRegularInterval) {
@@ -768,6 +751,25 @@
     var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
       return (scale === Scale.Year ? needleGeom.largeWidth : needleGeom.smallWidth) / 2 + AUTO_MOVE_AREA_PADDING;
     };
+    /** Reusable business logic for how to handle events that set time to now (closest).
+     * Used in NowButton and TimeSliderLegend.
+     */
+
+    var handleSetNowEvent = function handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime) {
+      if (dataStartTime < dataEndTime) {
+        if (dataEndTime < currentTime) {
+          onSetNewDate(moment__default["default"].utc(dataEndTime * millisecondsInSecond).toISOString());
+          onSetCenterTime(dataEndTime);
+        } else if (dataStartTime > currentTime) {
+          onSetNewDate(moment__default["default"].utc(dataStartTime * millisecondsInSecond).toISOString());
+          onSetCenterTime(dataStartTime);
+        } else {
+          var closestToCurrent = roundWithTimeStep(currentTime, timeStep);
+          onSetNewDate(moment__default["default"].utc(closestToCurrent * millisecondsInSecond).toISOString());
+          onSetCenterTime(closestToCurrent);
+        }
+      }
+    };
 
     var createMap = function createMap(_a) {
       var id = _a.id,
@@ -1697,6 +1699,9 @@
         resultEqualityCheck: _.isEqual
       }
     };
+    var isUserAddedService = function isUserAddedService(scope) {
+      return scope === 'user';
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1818,25 +1823,6 @@
     var getLayerStyles$1 = toolkit.createSelector(getLayerFromService, function (layer) {
       return layer && layer.styles ? layer.styles : [];
     }, selectorMemoizationOptions);
-    /**
-     * Gets services and maps them into an array
-     *
-     * Example: services = getServices(store)
-     * @param {object} store store: object - Store object
-     * @returns {array} returnType: [] - array containing services
-     */
-
-    toolkit.createSelector(servicesStore, function (store) {
-      var services = store ? store.byId : {};
-      var arrayOfServiceObjects = Object.keys(services).map(function (key) {
-        return {
-          name: services[key].name,
-          serviceUrl: services[key].serviceUrl,
-          isUserAddedService: services[key].isUserAddedService
-        };
-      });
-      return arrayOfServiceObjects;
-    }, selectorMemoizationOptions);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2721,6 +2707,22 @@
         return layers[layerId];
       });
     }, selectorMemoizationOptions);
+    /**
+     * Retrieves all layers (including base layers and overlayers) for the given mapId
+     *
+     * Example: layers = getLayersByMapId(store, mapId)
+     * @param {object} store store: object - object from which the layers state will be extracted
+     * @param {string} mapId mapId: string - mapId
+     * @returns {array} returnType: ReduxLayer[] - an array of all layers containing layer information (service, name, style, enabled etc.)
+     */
+
+    var getLayersByMapId = toolkit.createSelector(getAllLayers, function (_store, _mapId) {
+      return _mapId;
+    }, function (layers, mapId) {
+      return layers.filter(function (layer) {
+        return layer.mapId === mapId;
+      });
+    }, selectorMemoizationOptions);
     /**
      * Retrieves all layers that aren't base layers and aren't overlayers
      *
@@ -2941,7 +2943,7 @@
      *
      * Example: getDialogDetailsByType(store, 'legend')
      * @param {object} store store object from which the ui state wll be extracted
-     * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+     * @param {string} dialogType type of the dialog
      * @returns {array} [string, boolean] first element gives the active map id, second element whether the dialog is open
      */
 
@@ -2956,7 +2958,7 @@
      * For a given ui component: gets wether the dialog is open or closed
      *
      * @param {object} store store object from which the ui state wll be extracted
-     * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+     * @param {string} dialogType type of the dialog
      * @returns {boolean} returnType: boolean
      */
 
@@ -2971,7 +2973,7 @@
      *For a given ui component: gets the active map Id
      *
      * @param {object} store store object from which the ui state wll be extracted
-     * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+     * @param {string} dialogType type of the dialog
      * @returns {string} returnType: string - the active map id
      */
 
@@ -2986,7 +2988,7 @@
      *For a given ui component: gets the order of visible dialog
      *
      * @param {object} store store object from which the ui state wll be extracted
-     * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
+     * @param {DialogType} dialogType type of the dialog
      * @returns {number} the higher the order number the higher the zIndex
      */
 
@@ -3012,7 +3014,7 @@
      *For a given ui component: returns if ordered on top
      *
      * @param {object} store store object from which the ui state wll be extracted
-     * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
+     * @param {DialogType} dialogType type of the dialog
      * @returns {boolean}
      */
 
@@ -4276,6 +4278,25 @@
         getMapPresetError: getMapPresetError
     });
 
+    var DialogTypes;
+
+    (function (DialogTypes) {
+      DialogTypes["LayerInfo"] = "layerInfo";
+      DialogTypes["SyncGroups"] = "syncGroups";
+      DialogTypes["TimeSeriesSelect"] = "timeSeriesSelect";
+      DialogTypes["TimeSeriesManager"] = "timeSeriesManager";
+      DialogTypes["KeywordFilter"] = "keywordFilter";
+      DialogTypes["DimensionSelectEnsembleMember"] = "dimensionSelect-ensemble_member";
+      DialogTypes["DimensionSelectElevation"] = "dimensionSelect-elevation";
+      DialogTypes["LayerManager"] = "layerManager";
+      DialogTypes["LayerSelect"] = "layerSelect";
+    })(DialogTypes || (DialogTypes = {}));
+
+    var types = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        get DialogTypes () { return DialogTypes; }
+    });
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4315,7 +4336,7 @@
     };
     var slice$1 = toolkit.createSlice({
       initialState: initialState$1,
-      name: 'layerSelect',
+      name: DialogTypes.LayerSelect,
       reducers: {
         setSearchFilter: function setSearchFilter(draft, action) {
           var filterText = action.payload.filterText;
@@ -4332,7 +4353,7 @@
               serviceUrl = _a.serviceUrl,
               _abstract = _a["abstract"],
               keywords = _a.keywords,
-              isUserAddedService = _a.isUserAddedService,
+              scope = _a.scope,
               groups = _a.groups;
 
           if (!draft.filters.activeServices.byId[serviceId]) {
@@ -4372,7 +4393,7 @@
             serviceId: serviceId,
             enabled: draft.allServicesEnabled,
             filterIds: filterIds,
-            isUserAddedService: isUserAddedService,
+            scope: scope,
             serviceName: serviceName,
             serviceUrl: serviceUrl,
             "abstract": _abstract
@@ -4477,6 +4498,61 @@
     var reducer$1 = slice$1.reducer;
     var layerSelectActions = slice$1.actions;
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+    var filterLayersFromService = function filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString) {
+      var mapStoreService = services[serviceId];
+      if (!mapStoreService) return [];
+
+      if (searchString === '' && allFiltersActive) {
+        return mapStoreService.layers.filter(function (layer) {
+          return layer.leaf;
+        });
+      }
+
+      var searchStringArray = searchString.split(' ');
+      return mapStoreService.layers.filter(function (layer) {
+        return searchStringArray.every(function (search) {
+          var _a, _b, _c;
+
+          var searchLowercase = search.toLowerCase();
+          var layerFilterIds = layer.path.map(function (group) {
+            return "groups-" + group;
+          }).concat(layer.keywords.map(function (keyword) {
+            return "keywords-" + keyword;
+          }));
+          var isFilterInLayer = (layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (id) {
+            return filterIds.includes(id);
+          })) || allFiltersActive;
+          var isSearchTextInLayerFilter = layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (filterId) {
+            return filterId.toLowerCase().includes(searchLowercase);
+          });
+          var isSearchTextInLayerName = (_a = layer.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLowercase);
+          var isSearchTextInLayerText = (_b = layer.text) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
+          var isSearchTextInLayerAbstract = (_c = layer["abstract"]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLowercase);
+          var isSearchTextInServiceName = mapStoreService.name.toLowerCase().includes(searchLowercase);
+          var isSearchTextInLayer = isSearchTextInLayerName || isSearchTextInLayerText || isSearchTextInLayerAbstract || isSearchTextInLayerFilter || isSearchTextInServiceName;
+          return isFilterInLayer && isSearchTextInLayer;
+        });
+      }).filter(function (layer) {
+        return layer.leaf;
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4635,6 +4711,22 @@
     var getActiveLayerInfo = toolkit.createSelector(layerSelectStore, function (store) {
       return store === null || store === void 0 ? void 0 : store.activeLayerInfo;
     });
+    /**
+     * Returns a filtered active layer object based on the given filter settings
+     * Example: layerSelectSelectors.getFilteredLayers(store, filteredSettings);
+     * @param {object} store store: object - object from which the service state will be extracted
+     * @returns {array} returnType: ActiveLayerObject - an array of all filtered activelayers
+     */
+
+    var getFilteredLayers = toolkit.createSelector([getEnabledServiceIds, getServices, getCheckedFilterIds, isAllFiltersChecked, getSearchFilter], function (enabledServiceIds, servicesStore, checkedFilterIds, allFiltersActive, searchFilter) {
+      return enabledServiceIds.reduce(function (layerList, serviceId) {
+        return layerList.concat(filterLayersFromService(serviceId, servicesStore, checkedFilterIds, allFiltersActive, searchFilter).map(function (layer) {
+          return __assign(__assign({}, layer), {
+            serviceName: serviceId
+          });
+        }));
+      }, []);
+    }, selectorMemoizationOptions);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4708,17 +4800,6 @@
       return currentMessages.length > 0 ? currentMessages[0] : undefined;
     });
 
-    var DialogTypes;
-
-    (function (DialogTypes) {
-      DialogTypes["LayerInfo"] = "layerInfo";
-    })(DialogTypes || (DialogTypes = {}));
-
-    var types = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        get DialogTypes () { return DialogTypes; }
-    });
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4746,8 +4827,8 @@
      * @returns {object} returnType: SynchronizationGroupState
      */
 
-    toolkit.createSelector(syncGroupStore, function (store) {
-      return store || [];
+    var getSynchronizationGroupState = toolkit.createSelector(syncGroupStore, function (store) {
+      return store || null;
     });
     var getSynchronizationGroup = function getSynchronizationGroup(state, id) {
       return syncGroupStore(state).groups.byId[id];
@@ -5803,25 +5884,9 @@
       });
     }
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
-     * */
     var synchronizationGroupConfig = {
       id: 'syncronizationGroupStore-module',
-      reducerMap: {
+      reducersMap: {
         syncronizationGroupStore: reducer$2
       },
       sagas: [rootSaga$5, rootSaga$4]
@@ -5984,12 +6049,12 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var uiModuleConfig = {
       id: 'ui-module',
-      reducerMap: {
+      reducersMap: {
         ui: reducer$4
       },
       sagas: [rootSaga$3]
@@ -6056,9 +6121,7 @@
       var isAnimating = _a.isAnimating,
           isDisabled = _a.isDisabled,
           _b = _a.onTogglePlayButton,
-          onTogglePlayButton = _b === void 0 ? function () {
-        return null;
-      } : _b;
+          onTogglePlayButton = _b === void 0 ? function () {} : _b;
 
       var onTogglePlay = function onTogglePlay() {
         onTogglePlayButton();
@@ -6316,7 +6379,7 @@
     };
     var KNMIgeoservicesObs = {
       name: 'KNMIgeoservicesObs',
-      url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS&service=WMS&',
+      url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS',
       id: 'KNMIgeoservicesObs'
     };
     var KNMIgeoservicesKlimaatAtlas = {
@@ -6996,11 +7059,11 @@
           return;
         }
 
-        if (parseInt(this.ctx.canvas.height, 10) !== this.currentHeight) {
+        if (this.ctx.canvas.height !== this.currentHeight) {
           this.ctx.canvas.height = this.currentHeight;
         }
 
-        if (parseInt(this.ctx.canvas.width, 10) !== this.currentWidth) {
+        if (this.ctx.canvas.width !== this.currentWidth) {
           this.ctx.canvas.width = this.currentWidth;
         }
 
@@ -7177,6 +7240,84 @@
       return CanvasComponent;
     }(React.Component);
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var LegendLayout = function LegendLayout(_a) {
+      var title = _a.title,
+          name = _a.name,
+          dimensions = _a.dimensions,
+          children = _a.children,
+          height = _a.height,
+          width = _a.width,
+          minWidth = _a.minWidth;
+      return /*#__PURE__*/React__default["default"].createElement(material.Paper, {
+        "data-testid": "legend",
+        sx: {
+          padding: '10px',
+          border: '1px solid grey',
+          backgroundColor: '#FFF',
+          overflow: 'hidden',
+          marginBottom: 0.5
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        "data-testid": "legend-title"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: {
+          fontFamily: 'Roboto, Helvetica, Arial',
+          fontSize: '10px',
+          minWidth: '100%',
+          wordWrap: 'break-word',
+          color: 'common.black',
+          whiteSpace: 'nowrap'
+        },
+        variant: "h3"
+      }, title)), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: title || 'loading',
+        placement: "top"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          margin: '10px 0px 10px 0px',
+          height: height + "px",
+          width: width + "px"
+        }
+      }, children)), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        "data-testid": "legend-info",
+        sx: __assign({
+          fontFamily: 'Roboto, Helvetica, Arial',
+          fontSize: 10,
+          color: 'common.black',
+          overflowX: 'hidden',
+          wordWrap: 'break-word',
+          whiteSpace: 'nowrap'
+        }, minWidth && {
+          minWidth: minWidth + "px"
+        })
+      }, dimensions && dimensions.map(function (dim) {
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          key: name + dim.name
+        }, dim.name === 'time' ? "" + dim.currentValue : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          style: {
+            fontWeight: 500
+          }
+        }, dim.name, ":"), dim.currentValue, " ", dim.units));
+      })));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -7271,46 +7412,20 @@
       like a title and the WMS legendgraphic url */
 
       var wmLayer = getWMLayerById(layer.id);
-      return /*#__PURE__*/React__default["default"].createElement(material.Paper, {
-        "data-testid": "legend",
-        sx: {
-          padding: '10px',
-          border: '1px solid grey',
-          display: 'inline-block',
-          backgroundColor: '#FFF',
-          overflow: 'hidden',
-          marginBottom: 0.5
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        "data-testid": "legend-title",
-        style: {
-          maxWidth: canvasContainerWidth
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        sx: {
-          fontFamily: 'Roboto, Helvetica, Arial',
-          fontSize: '10px',
-          minWidth: defaultCanvasWidth + "px",
-          wordWrap: 'break-word',
-          color: 'common.black'
-        },
-        variant: "h3"
-      }, wmLayer && wmLayer.title)), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-        title: wmLayer && wmLayer.title || 'loading',
-        placement: "top"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        sx: {
-          margin: '10px 0px 10px 0px',
-          height: canvasContainerHeight + "px",
-          width: canvasContainerWidth + "px"
-        }
+      return /*#__PURE__*/React__default["default"].createElement(LegendLayout, {
+        title: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title,
+        name: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.name,
+        dimensions: layer === null || layer === void 0 ? void 0 : layer.dimensions,
+        height: canvasContainerHeight,
+        width: canvasContainerWidth,
+        minWidth: defaultCanvasWidth
       }, /*#__PURE__*/React__default["default"].createElement(CanvasComponent, {
         redrawInterval: 500,
         onRenderCanvas: function onRenderCanvas(ctx, width, height) {
           /*
-            Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
-            Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
-           */
+                Check if the wmLayer is available, this happens when the WMS GetCapabilities is loaded and parsed.
+                Note that we cannot use the wmLayer variable above, as this one could contain a non initialized WMJSLayer.
+               */
           var legendWmLayer = getWMLayerById(layer.id);
           var legendUrl = webmap.getLegendGraphicURLForLayer(legendWmLayer);
           var image = webmap.legendImageStore.getImage(legendUrl);
@@ -7359,26 +7474,7 @@
             renderLegendGraphic(previousLegendImage.current, ctx, imageWidth, imageHeight);
           }
         }
-      }))), /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        "data-testid": "legend-info",
-        sx: {
-          fontFamily: 'Roboto, Helvetica, Arial',
-          fontSize: 10,
-          color: 'common.black',
-          overflowX: 'hidden',
-          minWidth: defaultCanvasWidth + "px",
-          wordWrap: 'break-word',
-          maxWidth: canvasContainerWidth + "px"
-        }
-      }, layer.dimensions && layer.dimensions.map(function (dim) {
-        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
-          key: layer.name + dim.name
-        }, dim.name === 'time' ? "" + dim.currentValue : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
-          style: {
-            fontWeight: 500
-          }
-        }, dim.name, ":"), dim.currentValue, " ", dim.units));
-      })));
+      }));
     };
 
     /* *
@@ -7630,8 +7726,8 @@
         switch (_b.label) {
           case 0:
             mapId = payload.mapId, start = payload.start, end = payload.end, interval = payload.interval, timeList = payload.timeList;
-            roundedStart = roundWithTimeStep(start && moment__default["default"].utc(start).unix(), interval, 'ceil');
-            roundedEnd = roundWithTimeStep(end && moment__default["default"].utc(end).unix(), interval, 'floor');
+            roundedStart = roundWithTimeStep(Number(start && moment__default["default"].utc(start).unix()), interval, 'ceil');
+            roundedEnd = roundWithTimeStep(Number(end && moment__default["default"].utc(end).unix()), interval, 'floor');
             return [4
             /*yield*/
             , timeList || generateTimeList(moment__default["default"].utc(roundedStart * 1000), moment__default["default"].utc(roundedEnd * 1000), interval)];
@@ -8363,6 +8459,39 @@
         }
       });
     }
+    function unregisterMapSaga(_a) {
+      var mapId, layerList;
+      var payload = _a.payload;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            mapId = payload.mapId;
+            return [4
+            /*yield*/
+            , effects.select(getLayersByMapId, mapId)];
+
+          case 1:
+            layerList = _b.sent();
+            return [4
+            /*yield*/
+            , effects.all(layerList.map(function (layer) {
+              return effects.put(layerActions.layerDelete({
+                mapId: mapId,
+                layerId: layer.id,
+                layerIndex: 0,
+                origin: LayerActionOrigin.unregisterMapSaga
+              }));
+            }))];
+
+          case 2:
+            _b.sent();
+
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
     function rootSaga$2() {
       return __generator(this, function (_a) {
         switch (_a.label) {
@@ -8420,6 +8549,13 @@
           case 7:
             _a.sent();
 
+            return [4
+            /*yield*/
+            , effects.takeEvery(mapActions$1.unregisterMap.type, unregisterMapSaga)];
+
+          case 8:
+            _a.sent();
+
             return [2
             /*return*/
             ];
@@ -8427,25 +8563,9 @@
       });
     }
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
-     * */
     var moduleConfig = {
       id: 'webmap-module',
-      reducerMap: {
+      reducersMap: {
         webmap: reducer$3,
         services: reducer$5,
         layers: reducer$6
@@ -8483,7 +8603,7 @@
                 service = _c[1];
 
             return __assign(__assign({}, userServices), isNoIdService(service) ? (_b = {}, _b[serviceUrl] = __assign(__assign({}, service), {
-              isUserAddedService: true
+              scope: 'user'
             }), _b) : {});
           }, {});
         }
@@ -8523,13 +8643,16 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     function newServiceAddedSaga(capturedAction) {
-      var addedService, id, serviceUrl, name, isUserAddedService, _abstract, keywords, groups;
+      var addedService, id, serviceUrl, name, scope, _abstract, isUpdating, keywords, groups;
 
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
             addedService = capturedAction.payload;
-            id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, isUserAddedService = addedService.isUserAddedService, _abstract = addedService["abstract"];
+            id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, scope = addedService.scope, _abstract = addedService["abstract"], isUpdating = addedService.isUpdating;
+            if (isUpdating) return [2
+            /*return*/
+            ];
             keywords = addedService.layers.reduce(function (keywords, layer) {
               var _a;
 
@@ -8555,7 +8678,7 @@
               serviceName: name,
               serviceUrl: serviceUrl,
               keywords: keywords,
-              isUserAddedService: isUserAddedService,
+              scope: scope,
               groups: groups,
               "abstract": _abstract
             }))];
@@ -8569,6 +8692,131 @@
         }
       });
     }
+    function layerSelectCloseInfoDialogSaga(_a) {
+      var _b, togglePayload, activeMapIdPayload, isLayerInfoDialogOpen, isLayerInfoDialogOpen, filteredLayers, dialogInfo;
+
+      var type = _a.type,
+          payload = _a.payload;
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            _b = type;
+
+            switch (_b) {
+              case uiActions.setToggleOpenDialog.type:
+                return [3
+                /*break*/
+                , 1];
+
+              case uiActions.setActiveMapIdForDialog.type:
+                return [3
+                /*break*/
+                , 4];
+            }
+
+            return [3
+            /*break*/
+            , 8];
+
+          case 1:
+            togglePayload = payload;
+            if (!(!togglePayload.setOpen && togglePayload.type === DialogTypes.LayerSelect)) return [3
+            /*break*/
+            , 3];
+            return [4
+            /*yield*/
+            , effects.put(uiActions.setToggleOpenDialog({
+              type: DialogTypes.LayerInfo,
+              setOpen: false
+            }))];
+
+          case 2:
+            _c.sent();
+
+            _c.label = 3;
+
+          case 3:
+            return [3
+            /*break*/
+            , 13];
+
+          case 4:
+            activeMapIdPayload = payload;
+            if (!!activeMapIdPayload.setOpen) return [3
+            /*break*/
+            , 7];
+            return [4
+            /*yield*/
+            , effects.select(getisDialogOpen, DialogTypes.LayerInfo)];
+
+          case 5:
+            isLayerInfoDialogOpen = _c.sent();
+            if (!isLayerInfoDialogOpen) return [3
+            /*break*/
+            , 7];
+            return [4
+            /*yield*/
+            , effects.put(uiActions.setToggleOpenDialog({
+              type: DialogTypes.LayerInfo,
+              setOpen: false
+            }))];
+
+          case 6:
+            _c.sent();
+
+            _c.label = 7;
+
+          case 7:
+            return [3
+            /*break*/
+            , 13];
+
+          case 8:
+            return [4
+            /*yield*/
+            , effects.select(getisDialogOpen, DialogTypes.LayerInfo)];
+
+          case 9:
+            isLayerInfoDialogOpen = _c.sent();
+            if (!isLayerInfoDialogOpen) return [3
+            /*break*/
+            , 13];
+            return [4
+            /*yield*/
+            , effects.select(getFilteredLayers)];
+
+          case 10:
+            filteredLayers = _c.sent();
+            return [4
+            /*yield*/
+            , effects.select(getActiveLayerInfo)];
+
+          case 11:
+            dialogInfo = _c.sent();
+            if (!!filteredLayers.map(function (layer) {
+              return layer.text;
+            }).includes(dialogInfo.text)) return [3
+            /*break*/
+            , 13];
+            return [4
+            /*yield*/
+            , effects.put(uiActions.setToggleOpenDialog({
+              type: DialogTypes.LayerInfo,
+              setOpen: false
+            }))];
+
+          case 12:
+            _c.sent();
+
+            _c.label = 13;
+
+          case 13:
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    }
     function layerSelectRemoveServiceSaga(capturedAction) {
       var removedService, serviceId, serviceUrl, results, services, servicesEnabled;
       return __generator(this, function (_a) {
@@ -8628,11 +8876,11 @@
       var _b;
 
       var payload = _a.payload;
-      var isUserAddedService = payload.isUserAddedService,
+      var scope = payload.scope,
           name = payload.name,
           serviceUrl = payload.serviceUrl,
           _abstract2 = payload["abstract"];
-      if (!isUserAddedService) return;
+      if (!isUserAddedService(scope)) return;
       var localStorageServices = getUserAddedServices();
       setUserAddedServices(__assign(__assign({}, localStorageServices), (_b = {}, _b[serviceUrl] = {
         name: name,
@@ -8683,6 +8931,13 @@
           case 4:
             _a.sent();
 
+            return [4
+            /*yield*/
+            , effects.takeEvery([uiActions.setToggleOpenDialog.type, uiActions.setActiveMapIdForDialog.type, layerSelectActions.disableActiveService.type, layerSelectActions.toggleFilter.type, layerSelectActions.setSearchFilter.type], layerSelectCloseInfoDialogSaga)];
+
+          case 5:
+            _a.sent();
+
             return [2
             /*return*/
             ];
@@ -8690,25 +8945,9 @@
       });
     }
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
     var layerSelectConfig = {
       id: 'layerSelect-module',
-      reducerMap: {
+      reducersMap: {
         layerSelect: reducer$1
       },
       sagas: [rootSaga$1]
@@ -8839,7 +9078,7 @@
      * */
     var snackbarModuleConfig = {
       id: 'snackbar-module',
-      reducerMap: {
+      reducersMap: {
         snackbar: reducer
       },
       sagas: [rootSaga]
@@ -8920,6 +9159,7 @@
       return new Promise(function (resolve, reject) {
         var serviceObject = webmap.WMGetServiceFromStore(serviceUrl);
         serviceObject.getNodes(function (nodes) {
+          // TODO: Maarten Plieger, 2022-11-02:  Harmonize types and use correct types: https://gitlab.com/opengeoweb/opengeoweb/-/issues/2817
           var layerTree = recurseNodes(nodes);
           resolve(layerTree);
         }, function (error) {
@@ -9339,7 +9579,7 @@
     		},
     		{
     			name: "KNMIgeoservicesObs",
-    			url: "https://geoservices.knmi.nl/adagucserver?dataset=OBS&service=WMS&",
+    			url: "https://geoservices.knmi.nl/adagucserver?dataset=OBS",
     			id: "KNMIgeoservicesObs"
     		},
     		{
@@ -9818,14 +10058,14 @@
           source = _b === void 0 ? 'app' : _b;
       var dispatch = reactRedux.useDispatch();
       var currentActiveMapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'layerSelect');
+        return getDialogMapId(store, DialogTypes.LayerSelect);
       });
       var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, 'layerSelect');
+        return getisDialogOpen(store, DialogTypes.LayerSelect);
       });
       var openLayerSelectDialog = React__namespace.useCallback(function () {
         dispatch(uiActions.setActiveMapIdForDialog({
-          type: 'layerSelect',
+          type: DialogTypes.LayerSelect,
           mapId: mapId,
           setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
           source: source
@@ -10155,7 +10395,9 @@
         }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
           variant: "body1",
           sx: {
-            fontSize: 'geowebColors.layerManager.tableRowDefaultText.fontSize',
+            fontSize: function fontSize(theme) {
+              return theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize;
+            },
             color: 'geowebColors.layerManager.tableRowDefaultText.rgba',
             fontWeight: 500
           }
@@ -10558,9 +10800,7 @@
           services = _a.services,
           mapId = _a.mapId,
           _b = _a.onLayerRowClick,
-          onLayerRowClick = _b === void 0 ? function () {
-        return null;
-      } : _b,
+          onLayerRowClick = _b === void 0 ? function () {} : _b,
           _c = _a.isEnabled,
           isEnabled = _c === void 0 ? true : _c,
           _d = _a.isLayerMissing,
@@ -10970,6 +11210,60 @@
       var isLayerEnabled = reactRedux.useSelector(function (store) {
         return getLayerEnabled(store, layerId);
       });
+      var service = reactRedux.useSelector(function (store) {
+        return getServiceByName(store, layerService);
+      });
+      var serviceSetLayers = React__namespace.useCallback(function (payload) {
+        dispatch(serviceActions.serviceSetLayers(payload));
+      }, [dispatch]);
+
+      var addService = function addService(serviceUrl) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var layers_1, wmService, error_1;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                _a.trys.push([0, 2,, 3]);
+
+                return [4
+                /*yield*/
+                , getLayersFlattenedFromService(serviceUrl)];
+
+              case 1:
+                layers_1 = _a.sent();
+                wmService = webmap.WMGetServiceFromStore(serviceUrl);
+                serviceSetLayers({
+                  id: wmService.id,
+                  name: wmService.title,
+                  serviceUrl: serviceUrl,
+                  layers: layers_1,
+                  scope: 'user',
+                  "abstract": wmService["abstract"]
+                });
+                return [3
+                /*break*/
+                , 3];
+
+              case 2:
+                error_1 = _a.sent();
+                console.warn(error_1.message);
+                return [3
+                /*break*/
+                , 3];
+
+              case 3:
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
+      };
+
+      if (!service) {
+        addService(layerService);
+      }
+
       var layers = reactRedux.useSelector(function (store) {
         return getLayersFromService$1(store, layerService);
       });
@@ -11288,7 +11582,7 @@
       var onStart = React__namespace.useCallback(function (_a) {
         var oldIndex = _a.oldIndex;
         setActiveDragIndex(oldIndex);
-        reactSortablejs.Sortable.ghost.style.opacity = '1';
+        Sortable__default["default"].ghost.style.opacity = '1';
       }, []);
       var onEnd = React__namespace.useCallback(function () {
         if (activeDragIndex !== null) {
@@ -11786,14 +12080,14 @@
           source = _b === void 0 ? 'app' : _b;
       var dispatch = reactRedux.useDispatch();
       var currentActiveMapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'keywordFilter');
+        return getDialogMapId(store, DialogTypes.KeywordFilter);
       });
       var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, 'keywordFilter');
+        return getisDialogOpen(store, DialogTypes.KeywordFilter);
       });
       var openFilterResultsDialog = React__namespace.useCallback(function () {
         dispatch(uiActions.setActiveMapIdForDialog({
-          type: 'keywordFilter',
+          type: DialogTypes.KeywordFilter,
           mapId: mapId,
           setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
           source: source
@@ -11933,6 +12227,37 @@
 
       return true;
     };
+    var loadWMSService = function loadWMSService(serviceUrl, forceReload) {
+      if (forceReload === void 0) {
+        forceReload = false;
+      }
+
+      return __awaiter(void 0, void 0, void 0, function () {
+        var layers, service;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              return [4
+              /*yield*/
+              , getLayersFlattenedFromService(serviceUrl, forceReload)];
+
+            case 1:
+              layers = _a.sent();
+              service = webmap.WMGetServiceFromStore(serviceUrl);
+              return [2
+              /*return*/
+              , {
+                id: service.id,
+                name: service.title,
+                serviceUrl: serviceUrl,
+                "abstract": service["abstract"],
+                layers: layers,
+                scope: 'user'
+              }];
+          }
+        });
+      });
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -12087,77 +12412,40 @@
 
       var addNewService = function addNewService(formValues) {
         return __awaiter(void 0, void 0, void 0, function () {
-          var layers, serviceLayers, _a, _b, object, service;
-
-          var e_1, _c;
-
-          return __generator(this, function (_d) {
-            switch (_d.label) {
+          var layersForService;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
               case 0:
                 clearErrors(fields.serviceUrl.name);
                 setIsLoading(true);
-                _d.label = 1;
+                _a.label = 1;
 
               case 1:
-                _d.trys.push([1, 3,, 4]);
+                _a.trys.push([1, 3,, 4]);
 
                 return [4
                 /*yield*/
-                , getLayersFromService(formValues.serviceUrl)];
+                , loadWMSService(formValues.serviceUrl, true)];
 
               case 2:
-                layers = _d.sent();
-
-                if (layers.children) {
-                  serviceLayers = [];
-
-                  try {
-                    for (_a = __values(layers.children), _b = _a.next(); !_b.done; _b = _a.next()) {
-                      object = _b.value;
-                      serviceLayers.push({
-                        name: object.name,
-                        text: object.title,
-                        leaf: object.leaf,
-                        path: object.path,
-                        keywords: object.keywords ? object.keywords : [],
-                        "abstract": object["abstract"] ? object["abstract"] : '',
-                        styles: object.styles ? object.styles : [],
-                        dimensions: object.dimensions || [],
-                        geographicBoundingBox: object.geographicBoundingBox || null
-                      });
-                    }
-                  } catch (e_1_1) {
-                    e_1 = {
-                      error: e_1_1
-                    };
-                  } finally {
-                    try {
-                      if (_b && !_b.done && (_c = _a["return"])) _c.call(_a);
-                    } finally {
-                      if (e_1) throw e_1.error;
-                    }
-                  }
-
-                  service = webmap.WMGetServiceFromStore(formValues.serviceUrl);
-                  serviceSetLayers({
-                    id: service.id,
-                    name: formValues.serviceName,
-                    serviceUrl: formValues.serviceUrl,
-                    "abstract": formValues.serviceAbstracts,
-                    layers: serviceLayers,
-                    isUserAddedService: true
-                  });
-                  setIsLoading(false);
-                  showSnackbar(getSuccesMessage(formValues.serviceName));
-                  closePopup();
-                }
-
+                layersForService = _a.sent();
+                serviceSetLayers({
+                  id: layersForService.id,
+                  name: formValues.serviceName,
+                  serviceUrl: formValues.serviceUrl,
+                  "abstract": formValues.serviceAbstracts,
+                  layers: layersForService.layers,
+                  scope: 'user'
+                });
+                setIsLoading(false);
+                showSnackbar(getSuccesMessage(formValues.serviceName));
+                closePopup();
                 return [3
                 /*break*/
                 , 4];
 
               case 3:
-                _d.sent();
+                _a.sent();
                 setIsLoading(false);
                 setError(fields.serviceUrl.name, {
                   message: VALIDATIONS_REQUEST_FAILED,
@@ -12301,8 +12589,8 @@
           })
         },
         disabled: isServiceUrlDisabled || isLoading,
+        isReadOnly: isShowPopup,
         InputProps: {
-          readOnly: isShowPopup,
           disableUnderline: isShowPopup,
           endAdornment: isShowPopup && /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
             position: "end"
@@ -12325,8 +12613,8 @@
           }
         },
         disabled: isShowPopup || isLoading,
+        isReadOnly: isShowPopup,
         InputProps: {
-          readOnly: isShowPopup,
           disableUnderline: isShowPopup
         },
         sx: style$1.textField,
@@ -12337,12 +12625,11 @@
         name: fields.serviceAbstracts.name,
         label: fields.serviceAbstracts.label,
         disabled: isShowPopup || isLoading,
-        rules: {},
+        isReadOnly: isShowPopup,
         InputProps: {
-          readOnly: isShowPopup,
           disableUnderline: isShowPopup
         },
-        helperText: !isShowPopup && 'Short description of what this service does',
+        helperText: !isShowPopup ? 'Short description of what this service does' : '',
         sx: style$1.textField,
         defaultValue: ""
       }), !isServiceUrlDisabled && /*#__PURE__*/React__namespace.createElement(InitialValidationsTrigger, {
@@ -12585,63 +12872,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-    var filterLayersFromService = function filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString) {
-      var mapStoreService = services[serviceId];
-      if (!mapStoreService) return [];
-
-      if (searchString === '' && allFiltersActive) {
-        return mapStoreService.layers.filter(function (layer) {
-          return layer.leaf;
-        });
-      }
-
-      var searchStringArray = searchString.split(' ');
-      return mapStoreService.layers.filter(function (layer) {
-        return searchStringArray.every(function (search) {
-          var _a, _b, _c;
-
-          var searchLowercase = search.toLowerCase();
-          var layerFilterIds = layer.path.map(function (group) {
-            return "group-" + group;
-          }).concat(layer.keywords.map(function (keyword) {
-            return "keyword-" + keyword;
-          }));
-          var isFilterInLayer = (layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (id) {
-            return filterIds.includes(id);
-          })) || allFiltersActive;
-          var isSearchTextInLayerFilter = layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (filterId) {
-            return filterId.toLowerCase().includes(searchLowercase);
-          });
-          var isSearchTextInLayerName = (_a = layer.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLowercase);
-          var isSearchTextInLayerText = (_b = layer.text) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
-          var isSearchTextInLayerAbstract = (_c = layer["abstract"]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLowercase);
-          var isSearchTextInServiceName = mapStoreService.name.toLowerCase().includes(searchLowercase);
-          var isSearchTextInLayer = isSearchTextInLayerName || isSearchTextInLayerText || isSearchTextInLayerAbstract || isSearchTextInLayerFilter || isSearchTextInServiceName;
-          return isFilterInLayer && isSearchTextInLayer;
-        });
-      }).filter(function (layer) {
-        return layer.leaf;
-      });
-    };
-
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var LayerAddRemoveButton = function LayerAddRemoveButton(_a) {
@@ -12764,12 +12996,11 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var textStyle$1 = {
+    var textStyle = {
       lineHeight: '20px',
       letterSpacing: '0.25px'
     };
-
-    var textStyleWithMargin = __assign(__assign({}, textStyle$1), {
+    var textStyleWithMargin = __assign(__assign({}, textStyle), {
       marginBottom: 1
     });
 
@@ -12778,7 +13009,7 @@
           value = _a.value;
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         variant: "subtitle2",
-        sx: textStyle$1
+        sx: textStyle
       }, label), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         variant: "body2",
         sx: textStyleWithMargin
@@ -12801,10 +13032,6 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var textStyle = {
-      lineHeight: '20px',
-      letterSpacing: '0.25px'
-    };
 
     var valueStyle = __assign(__assign({}, textStyle), {
       overflowWrap: 'break-word'
@@ -12816,12 +13043,15 @@
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         variant: "subtitle2",
         sx: textStyle
-      }, label), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
+      }, label), list.length === 0 ? /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+        variant: "body2",
+        sx: textStyleWithMargin
+      }, "-") : /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
         container: true,
         direction: "column"
       }, list.map(function (item) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
-          key: item.name
+          key: item.label
         }, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
           item: true,
           container: true,
@@ -12834,7 +13064,7 @@
         }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
           variant: "body2",
           sx: textStyle
-        }, item.name, ":"))), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
+        }, item.label, ":"))), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
           item: true,
           container: true,
           direction: "row",
@@ -12849,6 +13079,41 @@
       })));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var LayerInfoLegend = function LayerInfoLegend(_a) {
+      var title = _a.title,
+          name = _a.name,
+          dimensions = _a.dimensions,
+          legendURL = _a.legendURL;
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+        variant: "subtitle2",
+        sx: textStyleWithMargin
+      }, "Legend"), /*#__PURE__*/React__default["default"].createElement(LegendLayout, {
+        title: title,
+        name: name,
+        dimensions: dimensions
+      }, legendURL ? /*#__PURE__*/React__default["default"].createElement("img", {
+        alt: title,
+        src: legendURL
+      }) : '-'));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -12880,22 +13145,19 @@
 
       return styles.join(', ');
     };
-    var getDimensionValue = function getDimensionValue(name, layer, breakAt, includeUnit) {
-      var _a;
-
-      if (includeUnit === void 0) {
-        includeUnit = false;
-      }
-
-      var dimension = (_a = layer.dimensions) === null || _a === void 0 ? void 0 : _a.find(function (dimension) {
-        return dimension.name.toLowerCase() === name;
+    var getDimensionValue = function getDimensionValue(name, dimensions) {
+      var dimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
+        return dimension.name.toLowerCase() === name.toLowerCase();
       });
 
-      if (!dimension) {
-        return '-';
+      if (!dimension || !dimension.currentValue) {
+        return null;
       }
 
-      var dimValue = dimension === null || dimension === void 0 ? void 0 : dimension.currentValue.split(breakAt).join(breakAt + " ");
+      var dimName = dimension.name.toLowerCase();
+      var breakAt = dimName === 'time' ? '/' : ',';
+      var includeUnit = dimName !== 'time' && dimName !== 'reference_time';
+      var dimValue = dimension.currentValue.split(breakAt).join(breakAt + " ");
 
       if (includeUnit) {
         return dimValue + " " + dimension.units;
@@ -12906,6 +13168,64 @@
     var getLayerBbox = function getLayerBbox(layer) {
       return layer.geographicBoundingBox ? "west " + layer.geographicBoundingBox.west + ", east " + layer.geographicBoundingBox.east + ", north " + layer.geographicBoundingBox.north + ", south " + layer.geographicBoundingBox.south : '-';
     };
+    var getDimensionIcon$1 = function getDimensionIcon(name, dimensions) {
+      var dimension = dimensions === null || dimensions === void 0 ? void 0 : dimensions.find(function (dimension) {
+        return dimension.name.toLowerCase() === name.toLowerCase();
+      });
+
+      if (!dimension) {
+        return null;
+      }
+
+      switch (dimension.name.toLowerCase()) {
+        case 'time':
+          return /*#__PURE__*/React__default["default"].createElement(theme.DimensionsTime, null);
+
+        case 'reference_time':
+          return /*#__PURE__*/React__default["default"].createElement(theme.DimensionsRefTime, null);
+
+        case 'elevation':
+          return /*#__PURE__*/React__default["default"].createElement(theme.DimensionsElevation, null);
+
+        default:
+          return /*#__PURE__*/React__default["default"].createElement(theme.DimensionsOther, null);
+      }
+    };
+    var getDimensionLabel = function getDimensionLabel(name) {
+      var dimName = name.toLowerCase().split('_').join(' ');
+      return dimName.charAt(0).toUpperCase() + dimName.slice(1);
+    };
+    var getDimensionsList = function getDimensionsList(dimensions) {
+      var result = [];
+      dimensions === null || dimensions === void 0 ? void 0 : dimensions.forEach(function (_a) {
+        var name = _a.name;
+        var value = getDimensionValue(name, dimensions);
+
+        if (!value) {
+          return;
+        }
+
+        var icon = getDimensionIcon$1(name, dimensions);
+        var label = getDimensionLabel(name);
+        result.push({
+          label: label,
+          value: value,
+          icon: icon
+        });
+      }); // sort alphabetically so other dimensions are sorted
+
+      result.sort(function (a, b) {
+        return a.label.localeCompare(b.label);
+      }); // sort by fixed order
+
+      var preferredOrder = ['Time', 'Reference time', 'Elevation']; // using reverse ordering to make sure the other dimensions come last
+
+      preferredOrder.reverse();
+      result.sort(function (a, b) {
+        return preferredOrder.indexOf(b.label) - preferredOrder.indexOf(a.label);
+      });
+      return result;
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -12925,23 +13245,21 @@
      * */
 
     var LayerInfoDialog = function LayerInfoDialog(_a) {
-      var _b;
+      var _b, _c;
 
       var onClose = _a.onClose,
           layer = _a.layer,
           isOpen = _a.isOpen,
-          _c = _a.onMouseDown,
-          onMouseDown = _c === void 0 ? function () {} : _c,
-          _d = _a.order,
-          order = _d === void 0 ? 0 : _d,
-          _e = _a.source,
-          source = _e === void 0 ? 'app' : _e,
+          _d = _a.onMouseDown,
+          onMouseDown = _d === void 0 ? function () {} : _d,
+          _e = _a.order,
+          order = _e === void 0 ? 0 : _e,
+          _f = _a.source,
+          source = _f === void 0 ? 'app' : _f,
           dialogHeight = _a.dialogHeight;
       var styles = getLayerStyles(layer);
       var bbox = getLayerBbox(layer);
-      var timeValue = getDimensionValue('time', layer, '/');
-      var refTimeValue = getDimensionValue('reference_time', layer, ',');
-      var elevationValue = getDimensionValue('elevation', layer, ',', true);
+      var dimensions = getDimensionsList(layer.dimensions);
       return /*#__PURE__*/React__default["default"].createElement(shared.ToolContainerDraggable, {
         onClose: onClose,
         headerSize: "xs",
@@ -12976,23 +13294,7 @@
         value: layer["abstract"] || '-'
       }), /*#__PURE__*/React__default["default"].createElement(LayerInfoList, {
         label: "Dimensions",
-        list: [{
-          name: 'Time',
-          value: timeValue,
-          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsTime, null)
-        }, {
-          name: 'Reference Time',
-          value: refTimeValue,
-          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsRefTime, null)
-        }, {
-          name: 'Elevation',
-          value: elevationValue,
-          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsElevation, null)
-        }, {
-          name: 'Other dimensions',
-          value: '-',
-          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsOther, null)
-        }]
+        list: dimensions
       }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
         label: "Styles",
         value: styles
@@ -13005,9 +13307,152 @@
       }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
         label: "Keywords",
         value: ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.join(', ')) || '-'
+      }), /*#__PURE__*/React__default["default"].createElement(LayerInfoLegend, {
+        title: layer.text,
+        name: layer.name,
+        dimensions: layer.dimensions,
+        legendURL: ((_c = layer.styles) === null || _c === void 0 ? void 0 : _c.length) ? layer.styles[0].legendURL : undefined
       })));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var LayerListDimensions = function LayerListDimensions(_a) {
+      var dimensions = _a.dimensions;
+
+      if (!dimensions || !dimensions.length) {
+        return null;
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, dimensions.map(function (dimension) {
+        return /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
+          key: dimension.label,
+          title: dimension.label + ": " + dimension.value
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
+          style: {
+            marginRight: 4
+          }
+        }, dimension.icon));
+      }));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var buttonLarge = 80;
+    var buttonSmall = 60;
+    var layerSelectColumnsLarge = {
+      column1: {
+        width: 112
+      },
+      column2: {
+        marginTop: '6px',
+        width: "calc(100% - 112px)",
+        height: '36px',
+        paddingLeft: '20px'
+      },
+      column3: {
+        height: '12px'
+      },
+      column4: {
+        height: '24px'
+      },
+      column5: {
+        height: '24px',
+        width: 140
+      },
+      column6: {
+        height: '24px',
+        width: "calc(100% - 140px)"
+      },
+      column7: {
+        height: '48px',
+        width: buttonLarge,
+        marginRight: 1,
+        marginLeft: 2
+      },
+      column8: {
+        width: "calc(100% - " + buttonLarge + "px - 24px)"
+      },
+      column9: {
+        width: "calc(" + buttonLarge + "px + 24px)"
+      }
+    };
+    var layerSelectColumnsSmall = {
+      column1: {
+        width: '100%'
+      },
+      column2: {
+        marginTop: '4px',
+        width: "calc(100% - 20px)"
+      },
+      column3: {
+        height: '12px'
+      },
+      column4: {
+        height: '48px'
+      },
+      column5: {
+        height: '24px',
+        width: '100%'
+      },
+      column6: {
+        height: '24px',
+        width: '100%'
+      },
+      column7: {
+        height: '48px',
+        width: buttonSmall,
+        marginRight: 0,
+        marginLeft: 1
+      },
+      column8: {
+        width: "calc(100% - " + buttonSmall + "px - 8px)"
+      },
+      column9: {
+        width: "calc(" + buttonSmall + "px + 8px)"
+      }
+    };
+    var breakpoint = 500;
+    var widthToColumns = function widthToColumns(width) {
+      if (width <= breakpoint) return layerSelectColumnsSmall;
+      return layerSelectColumnsLarge;
+    };
+    var rowHeightLarge = 68;
+    var rowHeightSmall = 136;
+    var widthToRowHeight = function widthToRowHeight(width) {
+      if (width <= breakpoint) return rowHeightSmall;
+      return rowHeightLarge;
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -13028,11 +13473,12 @@
       fontSize: '10px',
       textOverflow: 'ellipsis',
       overflow: 'hidden',
-      whiteSpace: 'nowrap'
+      whiteSpace: 'nowrap',
+      lineHeight: 1
     };
 
     var LayerListRow = function LayerListRow(_a) {
-      var _b, _c, _d;
+      var _b;
 
       var layer = _a.layer,
           layerIndex = _a.layerIndex,
@@ -13040,28 +13486,29 @@
           addLayer = _a.addLayer,
           deleteLayer = _a.deleteLayer,
           mapLayers = _a.mapLayers,
-          mapId = _a.mapId;
+          mapId = _a.mapId,
+          layerSelectWidth = _a.layerSelectWidth;
+      var rowHeight = widthToRowHeight(layerSelectWidth);
+      var columns = widthToColumns(layerSelectWidth);
+      var dimensions = getDimensionsList(layer.dimensions);
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         "data-testid": "layerListLayerRow",
         container: true,
-        item: true,
-        xs: 12,
         justifyContent: "center",
         alignItems: "center",
         sx: {
           backgroundColor: 'geowebColors.cards.cardContainer',
           padding: '8px',
           marginBottom: '4px',
-          height: '68px',
+          height: rowHeight,
           border: 'solid 1px',
           borderColor: 'geowebColors.cards.cardContainerBorder'
         }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         item: true,
-        xs: 10
+        sx: columns.column8
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
         item: true,
         xs: 12
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
@@ -13070,25 +13517,19 @@
           height: '14px',
           lineHeight: '14px',
           fontWeight: 500,
-          WebkitLineClamp: 1,
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
           textOverflow: 'ellipsis',
           overflow: 'hidden'
         }
       }, layer.text)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
         item: true,
-        xs: 4,
-        direction: "column"
+        container: true,
+        direction: "column",
+        sx: columns.column1
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
           fontSize: '12px',
           height: '18px',
           lineHeight: '18px',
-          WebkitLineClamp: 1,
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
           textOverflow: 'ellipsis',
           overflow: 'hidden'
         }
@@ -13096,44 +13537,41 @@
         layer: layer,
         mapId: mapId,
         serviceName: service.name
-      })), layer["abstract"] || ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.length) || layer.path.length ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        sx: columns.column2
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        sx: columns.column3
+      }, layer["abstract"] && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         "data-testid": "layerAbstract",
+        sx: layerInfoStyle
+      }, layer["abstract"])), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
         container: true,
+        sx: columns.column4
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 8,
-        sx: {
-          height: '45px',
-          paddingLeft: '20px',
-          WebkitLineClamp: 2,
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical'
-        }
-      }, layer["abstract"] && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        sx: __assign(__assign({}, layerInfoStyle), {
-          height: 15
-        })
-      }, layer["abstract"]), layer.path.length > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        sx: __assign(__assign({}, layerInfoStyle), {
-          height: ((_c = layer.keywords) === null || _c === void 0 ? void 0 : _c.length) ? 15 : 30
-        })
-      }, "Groups: ", layer.path.join(' / ')), ((_d = layer.keywords) === null || _d === void 0 ? void 0 : _d.length) > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        sx: __assign(__assign({}, layerInfoStyle), {
-          height: layer.path.length ? 15 : 30
-        })
+        sx: columns.column5
+      }, /*#__PURE__*/React__default["default"].createElement(LayerListDimensions, {
+        dimensions: dimensions
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        sx: columns.column6
+      }, layer.path.length > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: layerInfoStyle
+      }, "Groups: ", layer.path.join(' / ')), ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.length) > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: layerInfoStyle
       }, "Keywords:", ' ', layer.keywords.slice().sort(function (a, b) {
         return a.localeCompare(b);
-      }).join(', '))) : null), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }).join(', ')))))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         item: true,
-        xs: 2,
+        sx: columns.column9,
         justifyContent: "flex-end",
         alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        sx: {
-          width: '80px',
-          height: '48px',
-          marginRight: '8px'
-        }
+        sx: columns.column7
       }, /*#__PURE__*/React__default["default"].createElement(LayerAddRemoveButton, {
         layer: layer,
         layerIndex: layerIndex,
@@ -13163,38 +13601,17 @@
 
     var LayerList = function LayerList(_a) {
       var services = _a.services,
-          serviceIds = _a.serviceIds,
+          filteredLayers = _a.filteredLayers,
           layerSelectHeight = _a.layerSelectHeight,
           serviceListHeight = _a.serviceListHeight,
+          layerSelectWidth = _a.layerSelectWidth,
           addLayer = _a.addLayer,
           deleteLayer = _a.deleteLayer,
-          searchString = _a.searchString,
           mapLayers = _a.mapLayers,
-          filterIds = _a.filterIds,
-          allFiltersActive = _a.allFiltersActive,
           mapId = _a.mapId;
+      var rowMargin = 4;
+      var rowHeight = widthToRowHeight(layerSelectWidth);
       var layerSelectFilterHeight = 155 + serviceListHeight;
-
-      var _b = __read(React__namespace.useState(0), 2),
-          numberOfLayers = _b[0],
-          setNumberOfLayers = _b[1];
-
-      var _c = __read(React__namespace.useState([]), 2),
-          layersFilteredFromService = _c[0],
-          setLayersFilteredFromService = _c[1];
-
-      React__namespace.useEffect(function () {
-        setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
-          return totalNumberOfLayers + filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString).length;
-        }, 0));
-        setLayersFilteredFromService(serviceIds.reduce(function (layerList, serviceId) {
-          return layerList.concat(filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString).map(function (layer) {
-            return __assign(__assign({}, layer), {
-              serviceId: serviceId
-            });
-          }));
-        }, []));
-      }, [serviceIds, filterIds, services, searchString, allFiltersActive]);
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "layerList"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -13202,24 +13619,27 @@
           marginBottom: '4px',
           fontSize: '12px'
         }
-      }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement(reactWindow.FixedSizeList, {
+      }, filteredLayers.length, " results"), /*#__PURE__*/React__namespace.createElement(reactWindow.FixedSizeList, {
         height: layerSelectHeight - layerSelectFilterHeight,
-        itemCount: numberOfLayers,
-        itemSize: 72
+        itemCount: filteredLayers.length,
+        itemSize: rowHeight + rowMargin
       }, function (_a) {
         var index = _a.index,
             style = _a.style;
+        var filter = filteredLayers[index];
+        var service = services[filter.serviceName];
         return /*#__PURE__*/React__namespace.createElement("div", {
           style: style,
-          key: layersFilteredFromService[index].name
-        }, services[layersFilteredFromService[index].serviceId] && /*#__PURE__*/React__namespace.createElement(LayerListRow, {
-          layer: layersFilteredFromService[index],
+          key: filter.name
+        }, service && /*#__PURE__*/React__namespace.createElement(LayerListRow, {
+          layer: filter,
           layerIndex: index,
-          service: services[layersFilteredFromService[index].serviceId],
+          service: service,
           addLayer: addLayer,
           deleteLayer: deleteLayer,
           mapLayers: mapLayers,
-          mapId: mapId
+          mapId: mapId,
+          layerSelectWidth: layerSelectWidth
         }));
       }));
     };
@@ -13244,14 +13664,12 @@
     var LayerListConnect = function LayerListConnect(_a) {
       var mapId = _a.mapId,
           layerSelectHeight = _a.layerSelectHeight,
-          serviceListHeight = _a.serviceListHeight;
+          serviceListHeight = _a.serviceListHeight,
+          layerSelectWidth = _a.layerSelectWidth;
+      var dispatch = reactRedux.useDispatch();
       var services = reactRedux.useSelector(function (store) {
         return getServices(store);
       });
-      var dispatch = reactRedux.useDispatch();
-      var enabledServiceIds = reactRedux.useSelector(function (store) {
-        return getEnabledServiceIds(store);
-      });
       var mapLayers = reactRedux.useSelector(function (store) {
         return getMapLayers(store, mapId);
       });
@@ -13266,7 +13684,6 @@
           layerType: webmap.LayerType.mapLayer
         };
         addMapLayer({
-          mapId: mapId,
           layerId: layer.id,
           layer: layer,
           origin: LayerActionOrigin.layerManager
@@ -13294,25 +13711,17 @@
           origin: LayerActionOrigin.layerManager
         }));
       }, [dispatch, mapId]);
-      var checkedFilterIds = reactRedux.useSelector(function (store) {
-        return getCheckedFilterIds(store);
-      });
-      var allFiltersActive = reactRedux.useSelector(function (store) {
-        return isAllFiltersChecked(store);
-      });
-      var searchString = reactRedux.useSelector(function (store) {
-        return getSearchFilter(store);
+      var filteredLayers = reactRedux.useSelector(function (store) {
+        return getFilteredLayers(store);
       });
       return /*#__PURE__*/React__namespace.createElement(LayerList, {
+        filteredLayers: filteredLayers,
         services: services,
-        serviceIds: enabledServiceIds,
         layerSelectHeight: layerSelectHeight,
         serviceListHeight: serviceListHeight,
+        layerSelectWidth: layerSelectWidth,
         addLayer: addLayer,
         deleteLayer: deleteLayer,
-        filterIds: checkedFilterIds,
-        allFiltersActive: allFiltersActive,
-        searchString: searchString,
         mapLayers: mapLayers,
         mapId: mapId
       });
@@ -13336,13 +13745,13 @@
      * */
     var style = {
       borderRadius: '20px!important',
-      marginRight: '8px',
+      marginRight: '4px',
       whiteSpace: 'nowrap',
-      height: '32px!important',
+      height: '24px!important',
       padding: '5px 12px!important',
       textTransform: 'none!important',
       fontWeight: 'normal',
-      marginBottom: '5px'
+      marginBottom: '4px'
     };
 
     var ServiceChip = function ServiceChip(_a) {
@@ -13352,6 +13761,7 @@
           isSelected = _a.isSelected,
           isDisabled = _a.isDisabled,
           toggleChip = _a.toggleChip;
+      var chip = all ? 'all' : service && service.serviceUrl;
       return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: " + service["abstract"] : ''
       }, /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
@@ -13360,10 +13770,10 @@
         tabIndex: 0,
         "data-testid": all ? 'serviceChipAll' : 'serviceChip',
         onClick: function onClick() {
-          return toggleChip(all ? 'all' : service && service.serviceUrl);
+          return toggleChip(chip);
         },
         onKeyPress: function onKeyPress() {
-          return toggleChip(all ? 'all' : service && service.serviceUrl);
+          return toggleChip(chip);
         },
         disabled: isDisabled,
         sx: style
@@ -13530,9 +13940,9 @@
           display: 'block',
           alignItems: 'center',
           "float": 'left',
-          paddingLeft: '40px',
-          paddingRight: '30px',
-          marginBottom: '5px',
+          paddingLeft: '48px',
+          paddingRight: '40px',
+          marginBottom: '8px',
           fontSize: '0.875rem'
         },
         ref: ref
@@ -13620,7 +14030,7 @@
      * */
     var styles$1 = {
       servicesContainer: {
-        width: '300px',
+        width: '360px',
         maxHeight: '380px',
         top: '140px',
         backgroundColor: 'geowebColors.background.surface',
@@ -13635,6 +14045,10 @@
         backgroundColor: 'geowebColors.background.surface',
         zIndex: 100
       },
+      loading: {
+        position: 'absolute',
+        zIndex: 101
+      },
       footer: {
         display: 'flex',
         justifyContent: 'center',
@@ -13655,8 +14069,11 @@
     var ServiceOptionsDialog = function ServiceOptionsDialog(_a) {
       var services = _a.services,
           layerSelectRemoveService = _a.layerSelectRemoveService,
+          layerSelectReloadService = _a.layerSelectReloadService,
           selectedLayers = _a.selectedLayers,
-          setServicePopupInfo = _a.setServicePopupInfo;
+          setServicePopupInfo = _a.setServicePopupInfo,
+          _b = _a.isLoading,
+          isLoading = _b === void 0 ? false : _b;
 
       var openAddService = function openAddService() {
         setServicePopupInfo({
@@ -13670,9 +14087,13 @@
         "data-testid": "ServiceDialog"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: styles$1.header
-      }, "Services"), /*#__PURE__*/React__namespace.createElement(Rows, {
+      }, "Services"), /*#__PURE__*/React__namespace.createElement(material.Backdrop, {
+        sx: styles$1.loading,
+        open: isLoading
+      }, /*#__PURE__*/React__namespace.createElement(material.CircularProgress, null)), /*#__PURE__*/React__namespace.createElement(Rows, {
         services: services,
         layerSelectRemoveService: layerSelectRemoveService,
+        layerSelectReloadService: layerSelectReloadService,
         setServicePopupInfo: setServicePopupInfo,
         selectedLayers: selectedLayers
       }), /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -13688,6 +14109,7 @@
 
     var Rows = function Rows(_a) {
       var services = _a.services,
+          layerSelectReloadService = _a.layerSelectReloadService,
           layerSelectRemoveService = _a.layerSelectRemoveService,
           setServicePopupInfo = _a.setServicePopupInfo,
           selectedLayers = _a.selectedLayers;
@@ -13706,8 +14128,9 @@
         var _a = services[serviceId],
             serviceUrl = _a.serviceUrl,
             serviceName = _a.serviceName,
-            isUserAddedService = _a.isUserAddedService;
+            scope = _a.scope;
         var serviceHasActiveLayers = checkIfServiceHasActiveLayers(serviceUrl);
+        var userAddedService = isUserAddedService(scope);
         return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
           key: serviceUrl
         }, /*#__PURE__*/React__namespace.createElement(material.ListItemText, {
@@ -13718,19 +14141,32 @@
           noWrap: true,
           style: {
             textOverflow: 'ellipsis',
-            paddingRight: '60px'
+            paddingRight: '70px'
           }
         }, serviceName)), /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, {
           style: {
-            marginRight: '-10px',
-            width: 90
+            marginRight: '0px',
+            width: 100
           }
         }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
           container: true
         }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
           item: true,
-          xs: 6
-        }, isUserAddedService ? /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+          xs: 4
+        }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+          title: "Update layers from WMS service",
+          "data-testid": "updateServiceTooltip"
+        }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+          "data-testid": "updateServiceButton",
+          "aria-label": "Update layers from WMS service",
+          size: "large",
+          onClick: function onClick() {
+            return layerSelectReloadService(serviceUrl);
+          }
+        }, /*#__PURE__*/React__namespace.createElement(theme.Cached, null)))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+          item: true,
+          xs: 4
+        }, userAddedService ? /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
           title: "Edit Service"
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           "aria-label": "edit service",
@@ -13760,8 +14196,8 @@
           }
         }, /*#__PURE__*/React__namespace.createElement(theme.Visibility, null))))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
           item: true,
-          xs: 6
-        }, isUserAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+          xs: 4
+        }, userAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
           title: serviceHasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service',
           "data-testid": "removeServiceTooltip"
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
@@ -13793,9 +14229,30 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
+    var getService = function getService(services, serviceUrl) {
+      var serviceIds = Object.keys(services);
+      var serviceIndex = serviceIds.findIndex(function (serviceId) {
+        return services[serviceId].serviceUrl === serviceUrl;
+      });
+      if (serviceIndex < 0) return null;
+      return services[serviceIds[serviceIndex]];
+    };
+
+    var getServiceSuccesUpdateMessage = function getServiceSuccesUpdateMessage(serviceName) {
+      return "Service \"" + serviceName + "\" has been succesfully updated";
+    };
+    var getServiceFailedUpdateMessage = function getServiceFailedUpdateMessage(error) {
+      return "Unable to update service, reason: \"" + error.message + "\"";
+    };
+
     var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_a) {
       var mapId = _a.mapId,
           setServicePopupInfo = _a.setServicePopupInfo;
+
+      var _b = __read(React__namespace.useState(false), 2),
+          isLoading = _b[0],
+          setIsLoading = _b[1];
+
       var dispatch = reactRedux.useDispatch();
       var layerSelectRemoveService = React__namespace.useCallback(function (serviceId, serviceUrl) {
         dispatch(layerSelectActions.layerSelectRemoveService({
@@ -13803,17 +14260,87 @@
           serviceUrl: serviceUrl
         }));
       }, [dispatch]);
+      var serviceSetLayers = React__namespace.useCallback(function (payload) {
+        dispatch(serviceActions.serviceSetLayers(__assign(__assign({}, payload), {
+          isUpdating: true
+        })));
+      }, [dispatch]);
+      var showSnackbar = React__namespace.useCallback(function (message) {
+        dispatch(snackbarActions.openSnackbar({
+          message: message
+        }));
+      }, [dispatch]);
       var services = reactRedux.useSelector(function (store) {
         return getActiveServices(store);
       });
       var selectedLayers = reactRedux.useSelector(function (store) {
         return getMapLayers(store, mapId);
       });
+      var layerSelectReloadService = React__namespace.useCallback(function (serviceUrl) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var layersForService, service, serviceTitle, error_1;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                setIsLoading(true);
+                _a.label = 1;
+
+              case 1:
+                _a.trys.push([1, 3, 4, 5]);
+
+                return [4
+                /*yield*/
+                , loadWMSService(serviceUrl, true)];
+
+              case 2:
+                layersForService = _a.sent();
+                service = getService(services, serviceUrl);
+                serviceSetLayers({
+                  id: layersForService.id,
+                  name: service && service.serviceName || layersForService.name,
+                  serviceUrl: serviceUrl,
+                  "abstract": service && service["abstract"] || layersForService["abstract"],
+                  layers: layersForService.layers,
+                  scope: service && service.scope || 'user',
+                  isUpdating: true
+                });
+                webmap.clearImageCache();
+                serviceTitle = service && service.serviceName || layersForService.name;
+                showSnackbar(getServiceSuccesUpdateMessage(serviceTitle));
+                return [3
+                /*break*/
+                , 5];
+
+              case 3:
+                error_1 = _a.sent(); // TODO: Maarten Plieger 2022-11-02: Snackbars should not be used to inform the user that something went wrong.
+                // https://gitlab.com/opengeoweb/opengeoweb/-/issues/2819
+
+                showSnackbar(getServiceFailedUpdateMessage(error_1));
+                return [3
+                /*break*/
+                , 5];
+
+              case 4:
+                setIsLoading(false);
+                return [7
+                /*endfinally*/
+                ];
+
+              case 5:
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
+      }, [serviceSetLayers, services, showSnackbar]);
       return /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialog, {
         selectedLayers: selectedLayers,
         services: services,
         layerSelectRemoveService: layerSelectRemoveService,
-        setServicePopupInfo: setServicePopupInfo
+        layerSelectReloadService: layerSelectReloadService,
+        setServicePopupInfo: setServicePopupInfo,
+        isLoading: isLoading
       });
     };
 
@@ -13893,20 +14420,25 @@
           _d = _a.order,
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
-          source = _e === void 0 ? 'module' : _e;
+          source = _e === void 0 ? 'module' : _e,
+          _f = _a.startSize,
+          startSize = _f === void 0 ? {
+        width: 750,
+        height: 500
+      } : _f;
       var initialServiceListHeight = 37;
 
-      var _f = __read(React__namespace.useState(500), 2),
-          height = _f[0],
-          setHeight = _f[1];
+      var _g = __read(React__namespace.useState(startSize.height), 2),
+          height = _g[0],
+          setHeight = _g[1];
 
-      var _g = __read(React__namespace.useState(750), 2),
-          width = _g[0],
-          setWidth = _g[1];
+      var _h = __read(React__namespace.useState(startSize.width), 2),
+          width = _h[0],
+          setWidth = _h[1];
 
-      var _h = __read(React__namespace.useState(initialServiceListHeight), 2),
-          serviceListHeight = _h[0],
-          setServiceListHeight = _h[1];
+      var _j = __read(React__namespace.useState(initialServiceListHeight), 2),
+          serviceListHeight = _j[0],
+          setServiceListHeight = _j[1];
 
       var onChangeSize = function onChangeSize(_a) {
         var height = _a.height,
@@ -13927,7 +14459,7 @@
           width: width,
           height: height
         },
-        minWidth: 390,
+        minWidth: 320,
         minHeight: 126,
         startPosition: {
           top: 150,
@@ -13944,13 +14476,13 @@
         source: source
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
-          padding: '6px'
+          padding: '4px 16px 0 16px'
         }
       }, /*#__PURE__*/React__namespace.createElement(SearchFieldConnect, null)), /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           "float": 'left',
           position: 'absolute',
-          margin: '12px 0 0 8px',
+          margin: '8px 8px 0 16px',
           zIndex: 2
         }
       }, /*#__PURE__*/React__namespace.createElement(KeywordFilterButtonConnect, {
@@ -13958,7 +14490,7 @@
       })), /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           position: 'absolute',
-          margin: '12px 0 0 calc(100% - 36px)',
+          margin: '8px 0 0 calc(100% - 40px)',
           zIndex: 2
         }
       }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsButton, {
@@ -13967,12 +14499,13 @@
         setHeight: handleHeightChange
       })), /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
-          padding: '0 8px'
+          padding: '0 16px'
         }
       }, /*#__PURE__*/React__namespace.createElement(LayerListConnect, {
         mapId: mapId,
         layerSelectHeight: height,
-        serviceListHeight: serviceListHeight
+        serviceListHeight: serviceListHeight,
+        layerSelectWidth: width
       })));
     };
 
@@ -14396,7 +14929,7 @@
     var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_a) {
       var bounds = _a.bounds;
 
-      var _b = useSetupDialog('keywordFilter'),
+      var _b = useSetupDialog(DialogTypes.KeywordFilter),
           dialogOrder = _b.dialogOrder,
           onCloseDialog = _b.onCloseDialog,
           setDialogOrder = _b.setDialogOrder,
@@ -14483,10 +15016,10 @@
           _b = _a.showTitle,
           showTitle = _b === void 0 ? false : _b;
       var mapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'layerSelect');
+        return getDialogMapId(store, DialogTypes.LayerSelect);
       });
 
-      var _c = useSetupDialog('layerSelect'),
+      var _c = useSetupDialog(DialogTypes.LayerSelect),
           dialogOrder = _c.dialogOrder,
           isDialogOpen = _c.isDialogOpen,
           onCloseDialog = _c.onCloseDialog,
@@ -14534,11 +15067,6 @@
       var serviceSetLayers = React__namespace.useCallback(function (payload) {
         dispatch(serviceActions.serviceSetLayers(payload));
       }, [dispatch]);
-
-      var checkIfUserAddedService = function checkIfUserAddedService(service) {
-        return !!service.isUserAddedService;
-      };
-
       React__namespace.useEffect(function () {
         if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
           mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
@@ -14550,7 +15078,7 @@
                   name: service.name,
                   serviceUrl: service.url,
                   layers: layers,
-                  isUserAddedService: checkIfUserAddedService(service),
+                  scope: service.scope ? service.scope : 'system',
                   // first try to load the user abstract, otherwise the service abstract
                   "abstract": service["abstract"] || wmService["abstract"]
                 });
@@ -14587,7 +15115,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var dialogType = 'layerManager';
+    var dialogType = DialogTypes.LayerManager;
     /**
      * Layer Managerconnected to the store displaying the layers forthe active map Id
      * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
@@ -14748,7 +15276,7 @@
       }, [mapId]);
 
       var onZoomIn = function onZoomIn() {
-        return adagucRef.current.zoomIn();
+        return adagucRef.current.zoomIn(undefined);
       };
 
       var onZoomOut = function onZoomOut() {
@@ -14835,14 +15363,14 @@
           source = _b === void 0 ? 'app' : _b;
       var dispatch = reactRedux.useDispatch();
       var currentActiveMapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'layerManager');
+        return getDialogMapId(store, DialogTypes.LayerManager);
       });
       var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, 'layerManager');
+        return getisDialogOpen(store, DialogTypes.LayerManager);
       });
       var openLayerManagerDialog = React__namespace.useCallback(function () {
         dispatch(uiActions.setActiveMapIdForDialog({
-          type: 'layerManager',
+          type: DialogTypes.LayerManager,
           mapId: mapId,
           setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
           source: source
@@ -14973,7 +15501,7 @@
       }
 
       var sortedMarks = __spreadArray([], __read(marks)).sort(function (a, b) {
-        return typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value;
+        return Number(typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value);
       });
 
       var adaptedMarks = reverse ? sortedMarks.reverse() : sortedMarks;
@@ -15460,9 +15988,7 @@
 
     var AutoUpdateButton = function AutoUpdateButton(_a) {
       var _b = _a.toggleAutoUpdate,
-          toggleAutoUpdate = _b === void 0 ? function () {
-        return null;
-      } : _b,
+          toggleAutoUpdate = _b === void 0 ? function () {} : _b,
           _c = _a.isAutoUpdating,
           isAutoUpdating = _c === void 0 ? false : _c,
           _d = _a.disabled,
@@ -15749,9 +16275,7 @@
           timeDimension = _a.timeDimension,
           onChangeTimeStep = _a.onChangeTimeStep,
           _d = _a.onToggleTimestepAuto,
-          onToggleTimestepAuto = _d === void 0 ? function () {
-        return null;
-      } : _d,
+          onToggleTimestepAuto = _d === void 0 ? function () {} : _d,
           _e = _a.isOpenByDefault,
           isOpenByDefault = _e === void 0 ? false : _e;
       var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
@@ -15798,82 +16322,245 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var OptionsPopOver = material.styled(material.Popover)(function (_a) {
-      var theme = _a.theme;
-      return {
-        '& .MuiPaper-root': {
-          padding: '5px',
-          overflow: 'visible',
-          backgroundColor: theme.palette.geowebColors.background.surface
-        }
-      };
+    var marks = [{
+      label: '5 min',
+      value: Scale.Minutes5,
+      text: '5m'
+    }, {
+      label: '1 h',
+      value: Scale.Hour,
+      text: '1h'
+    }, {
+      label: '3 h',
+      value: Scale.Hours3,
+      text: '3h'
+    }, {
+      label: '6 h',
+      value: Scale.Hours6,
+      text: '6h'
+    }, {
+      label: 'day',
+      value: Scale.Day,
+      text: 'd'
+    }, {
+      label: 'week',
+      value: Scale.Week,
+      text: 'w'
+    }, {
+      label: 'month',
+      value: Scale.Month,
+      text: 'm'
+    }, {
+      label: 'year',
+      value: Scale.Year,
+      text: 'y'
+    }, {
+      label: 'data',
+      value: Scale.DataScale,
+      text: 'data'
+    }].sort(function (a, b) {
+      return b.value - a.value;
     });
+    var TimeScaleButton = function TimeScaleButton(_a) {
+      var layers = _a.layers,
+          _b = _a.timeSliderScale,
+          timeSliderScale = _b === void 0 ? Scale.Hour : _b,
+          centerTime = _a.centerTime,
+          secondsPerPx = _a.secondsPerPx,
+          selectedTime = _a.selectedTime,
+          onChangeTimeSliderScale = _a.onChangeTimeSliderScale;
+
+      var onChangeSliderValue = function onChangeSliderValue(mark) {
+        var newSliderValue = mark.value;
+        var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
+        var newScale = marks.find(function (el) {
+          return el.value === newValue;
+        }).value;
+        var scaleToSecPerPx = newScale === Scale.DataScale ? getScaleToSecondsPerPxForDataScale(layers) : scaleToSecondsPerPx[newScale];
+        var newCenterTime = getNewCenterOfFixedPointZoom(selectedTime, secondsPerPx, scaleToSecPerPx, centerTime);
+        onChangeTimeSliderScale(newScale, newCenterTime, scaleToSecPerPx);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
+        handleMenuItemClick: onChangeSliderValue,
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Clock, null),
+        marks: marks,
+        title: "Time scale",
+        value: timeSliderScale
+      });
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var title = 'Now';
+
+    var NowButton = function NowButton(_a) {
+      var _b = _a.onSetNow,
+          onSetNow = _b === void 0 ? function () {} : _b,
+          _c = _a.disabled,
+          disabled = _c === void 0 ? false : _c;
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: title,
+        "data-testid": "nowButtonTooltip"
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        disabled: disabled,
+        onClick: function onClick() {
+          return onSetNow();
+        },
+        "aria-label": "now"
+      }, /*#__PURE__*/React__namespace.createElement(theme.Now, {
+        "data-testid": "now-svg"
+      }))));
+    };
+
+    /* *
+     * 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 OptionsMenuButton = function OptionsMenuButton(_a) {
-      var autoUpdateBtn = _a.autoUpdateBtn,
+      var nowBtn = _a.nowBtn,
+          autoUpdateBtn = _a.autoUpdateBtn,
           speedBtn = _a.speedBtn,
-          timeStepBtn = _a.timeStepBtn;
+          timeStepBtn = _a.timeStepBtn,
+          timeScaleBtn = _a.timeScaleBtn,
+          _b = _a.isOpenByDefault,
+          isOpenByDefault = _b === void 0 ? false : _b;
 
-      var _b = __read(React__namespace.useState(null), 2),
-          anchorEl = _b[0],
-          setAnchorEl = _b[1];
-
-      var onClickButton = function onClickButton(event) {
-        setAnchorEl(event.currentTarget);
-      };
+      var _c = __read(React.useState(null), 2),
+          anchorEl = _c[0],
+          setAnchorEl = _c[1];
 
-      var handleClose = function handleClose() {
-        setAnchorEl(null);
-      };
+      var _d = __read(React.useState(false), 2),
+          open = _d[0],
+          setOpen = _d[1];
 
-      var open = Boolean(anchorEl);
-      var id = open ? 'simple-popover' : undefined;
-      return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+      React.useEffect(function () {
+        if (anchorEl && isOpenByDefault) {
+          setOpen(true);
+        }
+      }, [anchorEl, isOpenByDefault]);
+      return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Animation options",
         placement: "bottom"
-      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
-        onClick: onClickButton,
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        ref: function ref(_ref) {
+          setAnchorEl(_ref);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+        onClick: function onClick() {
+          setOpen(!open);
+        },
         "data-testid": "optionsMenuButton",
-        active: open
-      }, /*#__PURE__*/React__namespace.createElement(theme.Options, {
-        "data-testid": "optionsIcon"
-      })))), /*#__PURE__*/React__namespace.createElement(OptionsPopOver, {
-        id: id,
+        active: open,
+        "aria-label": "animation options"
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Options, null)))), /*#__PURE__*/React__default["default"].createElement(material.Popper, {
+        sx: {
+          zIndex: 3
+        },
+        placement: "top-start",
         open: open,
         "data-testid": "optionsMenuPopOver",
-        anchorEl: anchorEl,
-        onClose: handleClose,
-        anchorOrigin: {
-          vertical: -5,
-          horizontal: 'left'
+        anchorEl: anchorEl
+      }, /*#__PURE__*/React__default["default"].createElement(material.Paper, {
+        elevation: 3
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        sx: {
+          padding: '0px 10px 10px'
         },
-        transformOrigin: {
-          vertical: 'bottom',
-          horizontal: 'left'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         spacing: 1
-      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: "auto"
+      }, nowBtn || /*#__PURE__*/React__default["default"].createElement(NowButton, null)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: "auto"
+      }, timeScaleBtn || /*#__PURE__*/React__default["default"].createElement(TimeScaleButton, {
+        centerTime: 0,
+        onChangeTimeSliderScale: function onChangeTimeSliderScale() {},
+        secondsPerPx: 0,
+        selectedTime: 0,
+        timeSliderScale: 0
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
-      }, timeStepBtn || /*#__PURE__*/React__namespace.createElement(TimeStepButton, {
+      }, timeStepBtn || /*#__PURE__*/React__default["default"].createElement(TimeStepButton, {
         timeStep: 0,
-        onChangeTimeStep: function onChangeTimeStep() {
-          return null;
-        }
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        onChangeTimeStep: function onChangeTimeStep() {}
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
-      }, speedBtn || /*#__PURE__*/React__namespace.createElement(SpeedButton, {
+      }, speedBtn || /*#__PURE__*/React__default["default"].createElement(SpeedButton, {
         animationDelay: defaultAnimationDelayAtStart,
-        setMapAnimationDelay: function setMapAnimationDelay() {
-          return null;
-        }
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        setMapAnimationDelay: function setMapAnimationDelay() {}
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: "auto"
-      }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)))));
+      }, autoUpdateBtn || /*#__PURE__*/React__default["default"].createElement(AutoUpdateButton, null))))));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var forwardTooltipTitle = 'Forward';
+    var backwardTooltipTitle = 'Backward';
+
+    var BackwardForwardStepButton = function BackwardForwardStepButton(_a) {
+      var isForwardStep = _a.isForwardStep,
+          isDisabled = _a.isDisabled,
+          _b = _a.onClickBFButton,
+          onClickBFButton = _b === void 0 ? function () {} : _b;
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: isForwardStep ? forwardTooltipTitle : backwardTooltipTitle
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        disabled: isDisabled,
+        "aria-label": isForwardStep ? 'forward' : 'backward',
+        onClick: onClickBFButton
+      }, isForwardStep ? /*#__PURE__*/React__namespace.createElement(theme.StepForward, {
+        "data-testid": "step-forward-svg-path"
+      }) : /*#__PURE__*/React__namespace.createElement(theme.StepBackward, {
+        "data-testid": "step-backward-svg-path"
+      }))));
     };
 
     /* *
@@ -15895,19 +16582,28 @@
 
     var TimeSliderButtons = function TimeSliderButtons(_a) {
       var optionsMenuBtn = _a.optionsMenuBtn,
-          playBtn = _a.playBtn;
+          playBtn = _a.playBtn,
+          backwardBtn = _a.backwardBtn,
+          forwardBtn = _a.forwardBtn;
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-testid": "timeSliderButtons"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
-        spacing: 2,
-        sx: {
-          padding: '20px 0px 0px 16px'
-        }
+        spacing: 0.5,
+        alignItems: "center",
+        justifyContent: "center"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, optionsMenuBtn || /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
+      }, backwardBtn || /*#__PURE__*/React__namespace.createElement(BackwardForwardStepButton, {
+        isForwardStep: false
+      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true
+      }, forwardBtn || /*#__PURE__*/React__namespace.createElement(BackwardForwardStepButton, {
+        isForwardStep: true
+      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true
       }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton, null))));
     };
 
@@ -16478,13 +17174,30 @@
       }
     };
 
-    var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale) {
+    var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale, dataStartPx, dataEndPx, currentTimePx) {
       var ctx = context;
       var _a = theme.palette.geowebColors.timeSlider,
-          timelineTimelineSurface = _a.timelineTimelineSurface,
-          timelineNightTime = _a.timelineNightTime;
-      ctx.fillStyle = timelineTimelineSurface.fill;
-      ctx.fillRect(0, 0, canvasWidth, height);
+          timelineNightTime = _a.timelineNightTime,
+          ledgendObservedBackground = _a.ledgendObservedBackground,
+          legendForecastBackground = _a.legendForecastBackground,
+          legendNoDataBackground = _a.legendNoDataBackground; // top spacing
+
+      var y = 0;
+      ctx.fillStyle = legendNoDataBackground.rgba;
+      ctx.fillRect(0, y, canvasWidth, height); // observed data
+
+      if (dataStartPx < currentTimePx) {
+        ctx.fillStyle = ledgendObservedBackground.fill;
+        ctx.fillRect(Math.max(dataStartPx, 0), y, Math.min(currentTimePx, dataEndPx) - Math.max(dataStartPx, 0), height);
+      } // forecast data
+
+
+      if (dataEndPx > currentTimePx) {
+        ctx.fillStyle = legendForecastBackground.fill;
+        ctx.fillRect(Math.max(currentTimePx, dataStartPx), y, Math.min(canvasWidth, dataEndPx) - Math.max(currentTimePx, dataStartPx), height);
+      } // hovered area
+
+
       ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
       ctx.fillRect(animationStartPx, 0, Math.max(animationEndPx - animationStartPx, 0), height);
       var colorChangeUnit = getColorChangeTimestepUnit(scale);
@@ -16580,7 +17293,7 @@
       drawLeftSideDateText(ctx, theme, dateText, height);
     };
 
-    var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix, animationStartTime, animationEndTime) {
+    var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix, animationStartTime, animationEndTime, dataStartTime, dataEndTime) {
       var ctx = context;
 
       var _a = __read([0, canvasWidth].map(function (px) {
@@ -16589,13 +17302,17 @@
           visibleTimeStart = _a[0],
           visibleTimeEnd = _a[1];
 
-      var _b = __read([animationStartTime, animationEndTime].map(function (time) {
+      var _b = __read([animationStartTime, animationEndTime, dataStartTime, dataEndTime, currentTimeUnix].map(function (time) {
         return timestampToPixel(time, centerTime, canvasWidth, secondsPerPx);
-      }), 2),
+      }), 5),
           animationStartPx = _b[0],
-          animationEndPx = _b[1];
+          animationEndPx = _b[1],
+          dataStartPx = _b[2],
+          dataEndPx = _b[3],
+          currentTimePx = _b[4];
 
-      drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale);
+      ctx.clearRect(0, 0, canvasWidth, height);
+      drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale, dataStartPx, dataEndPx, currentTimePx);
       drawTimeScale(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale, dataScaleToSecondsPerPx);
       drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
       drawCurrentTime(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, currentTimeUnix);
@@ -16687,19 +17404,7 @@
       React__namespace.useEffect(function () {
         var handleKeyDown = function handleKeyDown(event) {
           if (event.key === 'Home' && mapIsActive) {
-            if (dataStartTime < dataEndTime) {
-              if (dataEndTime < currentTime) {
-                onSetNewDate(moment__default["default"].utc(dataEndTime * 1000).toISOString());
-                onSetCenterTime(dataEndTime);
-              } else if (dataStartTime > currentTime) {
-                onSetNewDate(moment__default["default"].utc(dataStartTime * 1000).toISOString());
-                onSetCenterTime(dataStartTime);
-              } else {
-                var closestToCurrent = roundWithTimeStep(currentTime, timeStep);
-                onSetNewDate(moment__default["default"].utc(closestToCurrent * 1000).toISOString());
-                onSetCenterTime(closestToCurrent);
-              }
-            }
+            handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
           }
         };
 
@@ -16731,7 +17436,9 @@
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "timeSliderLegend",
         sx: {
-          height: '50px'
+          height: TIME_SLIDER_LEGEND_HEIGHT + "px",
+          borderRadius: '4.5px',
+          overflow: 'hidden'
         }
       }, /*#__PURE__*/React__namespace.createElement(CanvasComponent, {
         ref: node,
@@ -16783,238 +17490,14 @@
           }
         },
         onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-          renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime);
+          renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime, dataStartTime, dataEndTime);
         }
       }));
     };
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
-     * */
-    var scaleSliderOtherSettings = {
-      LEFT_PADDING: '10%'
-    };
-
-    var thumbComponent = function thumbComponent(props) {
-      var children = props.children,
-          other = __rest(props, ["children"]);
+    var TIME_SLIDER_LEGEND_HEIGHT = 24;
 
-      return /*#__PURE__*/React__namespace.createElement(material.SliderThumb, __assign({}, other, {
-        "data-testid": "scaleSliderSliderThumb",
-        tabIndex: 0
-      }), children, /*#__PURE__*/React__namespace.createElement(theme.SliderThumb, null));
-    };
-
-    var marks = [{
-      text: '5 min scale',
-      paddingLeft: '2px',
-      value: Scale.Minutes5
-    }, {
-      text: '1 h scale',
-      paddingLeft: '25px',
-      value: Scale.Hour
-    }, {
-      text: '3 h scale',
-      paddingLeft: '45px',
-      value: Scale.Hours3
-    }, {
-      text: '6 h scale',
-      paddingLeft: '65px',
-      value: Scale.Hours6
-    }, {
-      text: 'day scale',
-      paddingLeft: '80px',
-      value: Scale.Day
-    }, {
-      text: 'week scale',
-      paddingLeft: '92px',
-      value: Scale.Week
-    }, {
-      text: 'month scale',
-      paddingLeft: '107px',
-      value: Scale.Month
-    }, {
-      text: 'year scale',
-      paddingLeft: '130px',
-      value: Scale.Year
-    }, {
-      text: 'data scale',
-      paddingLeft: '140px',
-      value: Scale.DataScale
-    }];
-
-    var valueLabelFormat = function valueLabelFormat(value) {
-      var valueNew = value.toString();
-      return valueNew;
-    };
-
-    var GeoWebScaleSlider = material.styled(material.Slider)(function (_a) {
-      var theme = _a.theme;
-      return {
-        '&.MuiSlider-root': {
-          height: 4,
-          width: 167,
-          margin: "0 0 18px " + scaleSliderOtherSettings.LEFT_PADDING
-        },
-        '& .MuiSlider-thumb': {
-          backgroundColor: 'rgba(0,0,0,0)',
-          marginTop: 0,
-          width: 12,
-          height: 12,
-          color: theme.palette.geowebColors.timeSlider.timeScalePointer.fill,
-          '& svg polygon': {
-            filter: theme.palette.geowebColors.timeSlider.timeScaleShadowButtonScale.filter
-          },
-          '&:before': {
-            display: 'none'
-          }
-        },
-        '& .MuiSlider-valueLabel': {
-          left: '20px'
-        },
-        '& .MuiSlider-rail': {
-          color: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.fill,
-          height: 4,
-          width: 170,
-          borderRadius: 4.5,
-          opacity: theme.palette.geowebColors.timeSlider.timeScaleHorizontalScale.opacity
-        },
-        '& .MuiSlider-mark': {
-          backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicators.fill,
-          height: 6,
-          width: 2,
-          marginTop: -9,
-          '&.MuiSlider-markActive': {
-            backgroundColor: theme.palette.geowebColors.timeSlider.timeScaleTimeIndicatorsActive.fill,
-            height: 6,
-            width: 2,
-            marginTop: -9
-          }
-        },
-        '@media (max-width: 585px)': {
-          '&.MuiSlider-root': {
-            width: 110
-          },
-          '& .MuiSlider-rail': {
-            width: 110
-          }
-        },
-        '@media (max-width: 395px)': {
-          '&.MuiSlider-root': {
-            width: 60
-          },
-          '& .MuiSlider-rail': {
-            width: 60
-          }
-        }
-      };
-    });
-    var RAIL_GUTTER_OFFSET = 0.4;
-
-    var TimeSliderScaleSlider = function TimeSliderScaleSlider(_a) {
-      var layers = _a.layers,
-          _b = _a.timeSliderScale,
-          timeSliderScale = _b === void 0 ? Scale.Hour : _b,
-          centerTime = _a.centerTime,
-          secondsPerPx = _a.secondsPerPx,
-          selectedTime = _a.selectedTime,
-          onChangeTimeSliderScale = _a.onChangeTimeSliderScale;
-      var min = 0;
-      var max = marks.length - 1;
-      var value = marks.findIndex(function (mark) {
-        return mark.value === timeSliderScale;
-      });
-
-      var onChangeSliderValue = function onChangeSliderValue(newSliderValue) {
-        var newValue = newSliderValue ? Math.round(newSliderValue) : 0;
-        var newScale = marks.find(function (el) {
-          return el.value === newValue;
-        }).value;
-        var scaleToSecPerPx = newScale === Scale.DataScale ? getScaleToSecondsPerPxForDataScale(layers) : scaleToSecondsPerPx[newScale];
-        var newCenterTime = getNewCenterOfFixedPointZoom(selectedTime, secondsPerPx, scaleToSecPerPx, centerTime);
-        onChangeTimeSliderScale(newScale, newCenterTime, scaleToSecPerPx);
-      };
-
-      var onChange = function onChange(event, value) {
-        if (event.type !== 'keydown') {
-          onChangeSliderValue(value);
-        }
-      };
-
-      var onKeyDown = function onKeyDown(event) {
-        // disable default Slider behavior
-        event.preventDefault();
-        event.stopPropagation(); // custom logic
-
-        var newValue = getValueFromKeyboardEvent(event, value, min, max, true);
-
-        if (newValue !== null) {
-          onChangeSliderValue(newValue);
-        }
-      };
-
-      var _c = marks.find(function (mark) {
-        return mark.value === value;
-      }),
-          paddingLeft = _c.paddingLeft,
-          text = _c.text;
-
-      var scaleTextPadding = {
-        paddingLeft: paddingLeft
-      };
-      return /*#__PURE__*/React__namespace.createElement(material.Box, {
-        "data-testid": "scaleSlider",
-        sx: {
-          backgroundColor: 'geowebColors.background.surface',
-          width: '229px',
-          height: '40px',
-          paddingTop: '4px',
-          paddingBottom: '7px',
-          boxSizing: 'content-box'
-        }
-      }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        "data-testid": "scaleSliderText",
-        sx: {
-          width: '67px',
-          height: '15px',
-          padding: '0px 10px 0 8px',
-          color: 'geowebColors.typographyAndIcons.text',
-          font: '12px Roboto'
-        },
-        style: scaleTextPadding
-      }, text)), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(GeoWebScaleSlider, {
-        "data-testid": "scaleSliderSlider",
-        defaultValue: Scale.Hour,
-        value: value,
-        min: min - RAIL_GUTTER_OFFSET,
-        step: 1,
-        max: max + RAIL_GUTTER_OFFSET,
-        getAriaValueText: valueLabelFormat,
-        onChange: onChange,
-        onKeyDown: onKeyDown,
-        "aria-labelledby": "scale-slider",
-        components: {
-          Thumb: thumbComponent
-        },
-        marks: marks,
-        track: false
-      })));
-    };
-
-    /* eslint-disable no-param-reassign */
+    /* eslint-disable no-param-reassign */
 
     var drawRoundedRectangle = function drawRoundedRectangle(ctx, x, y, width, height, cornerRadius, theme) {
       ctx.save();
@@ -17219,21 +17702,6 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-
-    var setPreviousTimeStep = function setPreviousTimeStep(timeStep, curTime, dataStartTime, onSetNewDate) {
-      var prevTimeStep = moment__default["default"].utc(curTime).subtract(timeStep, 'm').toISOString();
-      if (!prevTimeStep) return;
-      if (moment__default["default"].utc(prevTimeStep) < moment__default["default"].utc(dataStartTime * 1000)) return;
-      onsetNewDateDebounced(prevTimeStep, onSetNewDate);
-    };
-
-    var setNextTimeStep = function setNextTimeStep(timeStep, curTime, dataEndTime, onSetNewDate) {
-      var nextTimeStep = moment__default["default"].utc(curTime).add(timeStep, 'm').toISOString();
-      if (!nextTimeStep) return;
-      if (moment__default["default"].utc(nextTimeStep) > moment__default["default"].utc(dataEndTime * 1000)) return;
-      onsetNewDateDebounced(nextTimeStep, onSetNewDate);
-    };
-
     var DRAG_AREA_WIDTH = 10;
     var DRAG_HANDLER_AREA_WIDTH = 30;
 
@@ -17277,11 +17745,11 @@
 
       var curTime = selectedTime !== undefined ? selectedTime.toISOString() : moment__default["default"].utc().toISOString();
 
-      var _e = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
+      var _e = __read(React__namespace.useState(animationStartTime ? moment__default["default"].utc(animationStartTime).unix() : undefined), 2),
           localAnimationStartTime = _e[0],
           setLocalAnimationStartTime = _e[1];
 
-      var _f = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
+      var _f = __read(React__namespace.useState(animationEndTime ? moment__default["default"].utc(animationEndTime).unix() : undefined), 2),
           localAnimationEndTime = _f[0],
           setLocalAnimationEndTime = _f[1];
 
@@ -17416,8 +17884,8 @@
       };
 
       React__namespace.useEffect(function () {
-        setLocalAnimationStartTime(animationStartTime && moment__default["default"].utc(animationStartTime).unix());
-        setLocalAnimationEndTime(animationEndTime && moment__default["default"].utc(animationEndTime).unix());
+        setLocalAnimationStartTime(animationStartTime ? moment__default["default"].utc(animationStartTime).unix() : undefined);
+        setLocalAnimationEndTime(animationEndTime ? moment__default["default"].utc(animationEndTime).unix() : undefined);
       }, [animationStartTime, animationEndTime]);
       var handleKeyDown = React__namespace.useCallback(function (event) {
         if (event.ctrlKey && dataStartTime && dataEndTime && mapIsActive) {
@@ -17521,6 +17989,37 @@
       }));
     };
 
+    /* *
+     * 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(_a) {
+      var isVisible = _a.isVisible,
+          toggleTimeSliderIsVisible = _a.toggleTimeSliderIsVisible;
+      return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: isVisible ? 'Hide timeslider' : 'Show timeslider',
+        "data-testid": "autoUpdateButtonTooltip"
+      }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+        onClick: function onClick() {
+          toggleTimeSliderIsVisible(!isVisible);
+        },
+        "data-testid": "hideTimeSliderButton"
+      }, isVisible ? /*#__PURE__*/React__default["default"].createElement(theme.ChevronDown, null) : /*#__PURE__*/React__default["default"].createElement(theme.ChevronUp, null))));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -17565,7 +18064,6 @@
     var TimeSlider = function TimeSlider(_a) {
       var buttons = _a.buttons,
           rail = _a.rail,
-          scaleSlider = _a.scaleSlider,
           legend = _a.legend,
           _b = _a.mapIsActive,
           mapIsActive = _b === void 0 ? true : _b,
@@ -17574,38 +18072,54 @@
           _d = _a.onToggleTimeSlider,
           onToggleTimeSlider = _d === void 0 ? function () {} : _d;
       useTimeSliderKeyBoardControl(mapIsActive, isVisible, onToggleTimeSlider);
+      var visibilityState = isVisible ? 'visible' : 'hidden';
       return isVisible ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        style: {
+          visibility: visibilityState
+        },
         container: true,
-        "data-testid": "timeSlider",
         sx: {
           display: 'grid',
-          gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
-          gridTemplateRows: '50px'
-        }
+          gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr) minmax(40px, 40px)',
+          gridTemplateRows: 24,
+          paddingBottom: 1,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        "data-testid": "timeSlider",
+        spacing: 1
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
-      }, " ", buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, rail || /*#__PURE__*/React__namespace.createElement(TimeSliderRail, __assign({}, defaultProps, {
         selectedTime: defaultProps.selectedTime,
         mapIsActive: mapIsActive
       })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true,
-        sx: {
-          height: '50px'
-        }
-      }, scaleSlider || /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSlider, __assign({}, defaultProps, {
-        selectedTime: defaultProps.selectedTime.unix(),
-        timeSliderScale: Scale.Hour,
-        onChangeTimeSliderScale: function onChangeTimeSliderScale() {
-          return null;
-        }
-      }))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true
+      }), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true
+      }, buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
       }, legend || /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, __assign({}, defaultProps, {
         selectedTime: defaultProps.selectedTime.unix(),
         mapIsActive: mapIsActive
-      })), ' ')) : null;
+      })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        item: true
+      }, /*#__PURE__*/React__namespace.createElement(HideSliderButton, {
+        toggleTimeSliderIsVisible: onToggleTimeSlider,
+        isVisible: isVisible
+      }))) : /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        sx: {
+          paddingRight: 1
+        },
+        container: true,
+        alignItems: "center",
+        justifyContent: "flex-end"
+      }, /*#__PURE__*/React__namespace.createElement(HideSliderButton, {
+        toggleTimeSliderIsVisible: onToggleTimeSlider,
+        isVisible: isVisible
+      }));
     };
 
     /* *
@@ -17750,6 +18264,136 @@
       });
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2020 - Finnish Meteorological Institute (FMI)
+     * */
+    var TimeScaleButtonConnect = function TimeScaleButtonConnect(_a) {
+      var mapId = _a.mapId;
+      var layers = reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      });
+      var timeSliderScale = reactRedux.useSelector(function (store) {
+        return getMapTimeSliderScale(store, mapId);
+      });
+      var centerTime = reactRedux.useSelector(function (store) {
+        return getMapTimeSliderCenterTime(store, mapId);
+      });
+      var secondsPerPx = reactRedux.useSelector(function (store) {
+        return getMapTimeSliderSecondsPerPx(store, mapId);
+      });
+      var dimensions = reactRedux.useSelector(function (store) {
+        return getMapDimensions(store, mapId);
+      });
+      var dispatch = reactRedux.useDispatch();
+
+      var onSetTimeSliderScale = function onSetTimeSliderScale(scale, newCenterTime, scaleToSecPerPx) {
+        if (scale === Scale.DataScale) {
+          dispatch(mapActions$1.setTimeSliderDataScaleToSecondsPerPx({
+            mapId: mapId,
+            timeSliderDataScaleToSecondsPerPx: scaleToSecPerPx
+          }));
+        }
+
+        dispatch(mapActions$1.setTimeSliderScale({
+          mapId: mapId,
+          timeSliderScale: scale
+        }));
+        dispatch(mapActions$1.setTimeSliderCenterTime({
+          mapId: mapId,
+          timeSliderCenterTime: newCenterTime
+        }));
+      };
+
+      var selectedTime = getTimeBounds(dimensions).selectedTime;
+      return /*#__PURE__*/React__namespace.createElement(TimeScaleButton, {
+        layers: layers,
+        timeSliderScale: timeSliderScale,
+        onChangeTimeSliderScale: onSetTimeSliderScale,
+        secondsPerPx: secondsPerPx,
+        centerTime: centerTime,
+        selectedTime: selectedTime
+      });
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var NowButtonConnect = function NowButtonConnect(_a) {
+      var sourceId = _a.sourceId,
+          mapId = _a.mapId,
+          isDisabled = _a.isDisabled;
+      var dispatch = reactRedux.useDispatch();
+      var currentTime = moment__default["default"].utc().unix();
+      var timeStep = reactRedux.useSelector(function (store) {
+        return getMapTimeStep(store, mapId);
+      });
+
+      var _b = __read(getDataLimitsFromLayers(reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      })), 2),
+          dataStartTime = _b[0],
+          dataEndTime = _b[1];
+
+      var isAnimating$1 = reactRedux.useSelector(function (store) {
+        return isAnimating(store, mapId);
+      });
+
+      var onSetNewDate = function onSetNewDate(newDate) {
+        if (isAnimating$1) {
+          dispatch(mapActions$1.mapStopAnimation({
+            mapId: mapId
+          }));
+        }
+
+        dispatch(genericActions.setTime({
+          sourceId: sourceId,
+          origin: 'NowButtonConnect, 140',
+          value: handleMomentISOString(newDate)
+        }));
+      };
+
+      var onSetCenterTime = function onSetCenterTime(newTime) {
+        dispatch(mapActions$1.setTimeSliderCenterTime({
+          mapId: mapId,
+          timeSliderCenterTime: newTime
+        }));
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(NowButton, {
+        disabled: isDisabled,
+        onSetNow: function onSetNow() {
+          return handleSetNowEvent(timeStep, dataStartTime, dataEndTime, currentTime, onSetNewDate, onSetCenterTime);
+        }
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -17775,18 +18419,99 @@
      * ``` <OptionsMenuButtonConnect mapId={mapId} />```
      */
 
-    var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_a) {
-      var mapId = _a.mapId;
-      return /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, {
-        autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
-          mapId: mapId
-        }),
-        speedBtn: /*#__PURE__*/React__namespace.createElement(SpeedButtonConnect, {
-          mapId: mapId
-        }),
-        timeStepBtn: /*#__PURE__*/React__namespace.createElement(TimeStepButtonComponent, {
-          mapId: mapId
-        })
+    var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_a) {
+      var sourceId = _a.sourceId,
+          mapId = _a.mapId;
+      return /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, {
+        nowBtn: /*#__PURE__*/React__namespace.createElement(NowButtonConnect, {
+          mapId: mapId,
+          sourceId: sourceId
+        }),
+        autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
+          mapId: mapId
+        }),
+        speedBtn: /*#__PURE__*/React__namespace.createElement(SpeedButtonConnect, {
+          mapId: mapId
+        }),
+        timeStepBtn: /*#__PURE__*/React__namespace.createElement(TimeStepButtonComponent, {
+          mapId: mapId
+        }),
+        timeScaleBtn: /*#__PURE__*/React__namespace.createElement(TimeScaleButtonConnect, {
+          mapId: mapId
+        })
+      });
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var BackwardForwardStepButtonConnect = function BackwardForwardStepButtonConnect(_a) {
+      var isForwardStep = _a.isForwardStep,
+          mapId = _a.mapId;
+      var timeStep = reactRedux.useSelector(function (store) {
+        return getMapTimeStep(store, mapId);
+      });
+      var dispatch = reactRedux.useDispatch();
+
+      var setTime = function setTime(newDate) {
+        dispatch(genericActions.setTime({
+          origin: '',
+          sourceId: mapId,
+          value: handleMomentISOString(newDate)
+        }));
+      };
+
+      var stopAnimation = function stopAnimation() {
+        dispatch(mapActions$1.mapStopAnimation({
+          mapId: mapId,
+          origin: MapActionOrigin.map
+        }));
+      };
+
+      var isAnimating$1 = reactRedux.useSelector(function (store) {
+        return isAnimating(store, mapId);
+      });
+      var timedim = reactRedux.useSelector(function (store) {
+        return getMapDimension(store, mapId, 'time');
+      });
+      var selectedTime = getSelectedTime(timedim);
+      var curTime = moment__default["default"].unix(selectedTime).toISOString();
+      var layers = reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      });
+
+      var _b = __read(getDataLimitsFromLayers(layers), 2),
+          dataStartTime = _b[0],
+          dataEndTime = _b[1];
+
+      var onClickBF = function onClickBF() {
+        if (isAnimating$1) {
+          stopAnimation();
+        }
+
+        isForwardStep ? setNextTimeStep(timeStep, curTime, dataEndTime, setTime) : setPreviousTimeStep(timeStep, curTime, dataStartTime, setTime);
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement(BackwardForwardStepButton, {
+        isDisabled: false,
+        isForwardStep: isForwardStep,
+        onClickBFButton: function onClickBFButton() {
+          onClickBF();
+        }
       });
     };
 
@@ -17816,13 +18541,23 @@
      */
 
     var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_a) {
-      var mapId = _a.mapId;
+      var sourceId = _a.sourceId,
+          mapId = _a.mapId;
       return /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, {
         optionsMenuBtn: /*#__PURE__*/React__namespace.createElement(OptionsMenuButtonConnect, {
-          mapId: mapId
+          mapId: mapId,
+          sourceId: sourceId
         }),
         playBtn: /*#__PURE__*/React__namespace.createElement(PlayButtonConnect, {
           mapId: mapId
+        }),
+        backwardBtn: /*#__PURE__*/React__namespace.createElement(BackwardForwardStepButtonConnect, {
+          mapId: mapId,
+          isForwardStep: false
+        }),
+        forwardBtn: /*#__PURE__*/React__namespace.createElement(BackwardForwardStepButtonConnect, {
+          mapId: mapId,
+          isForwardStep: true
         })
       });
     };
@@ -17862,8 +18597,6 @@
     }, {
       stopMapAnimation: mapActions$1.mapStopAnimation,
       setTime: genericActions.setTime,
-      syncGroupAddSource: genericActions.syncGroupAddSource,
-      syncGroupRemoveSource: genericActions.syncGroupRemoveSource,
       mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime,
       mapSetTimeSliderSecondsPerPx: mapActions$1.setTimeSliderSecondsPerPx
     });
@@ -17885,8 +18618,6 @@
           activeWindowId = _a.activeWindowId,
           stopMapAnimation = _a.stopMapAnimation,
           setTime = _a.setTime,
-          syncGroupAddSource = _a.syncGroupAddSource,
-          syncGroupRemoveSource = _a.syncGroupRemoveSource,
           mapSetTimeSliderCenterTime = _a.mapSetTimeSliderCenterTime,
           mapSetTimeSliderSecondsPerPx = _a.mapSetTimeSliderSecondsPerPx;
       var selectedTime = getTimeBounds(dimensions).selectedTime;
@@ -17897,17 +18628,6 @@
           dataEndTime = _b[1];
 
       var mapIsActive = mapId === activeWindowId;
-      React__namespace.useEffect(function () {
-        syncGroupAddSource({
-          id: sourceId,
-          type: [SYNCGROUPS_TYPE_SETTIME]
-        });
-        return function () {
-          syncGroupRemoveSource({
-            id: sourceId
-          });
-        };
-      }, [sourceId, syncGroupAddSource, syncGroupRemoveSource]);
       return /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, {
         centerTime: centerTime,
         secondsPerPx: secondsPerPx,
@@ -18001,8 +18721,6 @@
       setAnimationEndTime: mapActions$1.setAnimationEndTime,
       setTime: genericActions.setTime,
       stopMapAnimation: mapActions$1.mapStopAnimation,
-      syncGroupAddSource: genericActions.syncGroupAddSource,
-      syncGroupRemoveSource: genericActions.syncGroupRemoveSource,
       mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime
     });
 
@@ -18024,8 +18742,6 @@
           setAnimationEndTime = _a.setAnimationEndTime,
           stopMapAnimation = _a.stopMapAnimation,
           setTime = _a.setTime,
-          syncGroupAddSource = _a.syncGroupAddSource,
-          syncGroupRemoveSource = _a.syncGroupRemoveSource,
           mapSetTimeSliderCenterTime = _a.mapSetTimeSliderCenterTime;
       var selectedTime = getMomentTimeBounds(dimensions).selectedTime;
       var currentTime = moment__default["default"].utc().unix();
@@ -18035,17 +18751,6 @@
           dataEndTime = _b[1];
 
       var mapIsActive = activeWindowId === mapId;
-      React__namespace.useEffect(function () {
-        syncGroupAddSource({
-          id: sourceId,
-          type: [SYNCGROUPS_TYPE_SETTIME]
-        });
-        return function () {
-          syncGroupRemoveSource({
-            id: sourceId
-          });
-        };
-      }, [sourceId, syncGroupAddSource, syncGroupRemoveSource]);
       return /*#__PURE__*/React__namespace.createElement(TimeSliderRail, {
         centerTime: centerTime,
         secondsPerPx: secondsPerPx,
@@ -18095,87 +18800,6 @@
 
     var TimeSliderRailConnect = connectRedux$1(TimeSliderRailConnectComponent);
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
-     * */
-    var connectReduxTimeSliderScaleSlider = reactRedux.connect(function (store, props) {
-      return {
-        layers: getMapLayers(store, props.mapId),
-        timeSliderScale: getMapTimeSliderScale(store, props.mapId),
-        centerTime: getMapTimeSliderCenterTime(store, props.mapId),
-        secondsPerPx: getMapTimeSliderSecondsPerPx(store, props.mapId),
-        dimensions: getMapDimensions(store, props.mapId)
-      };
-    }, {
-      mapSetTimeSliderScale: mapActions$1.setTimeSliderScale,
-      mapSetTimeSliderDataScaleToSecondsPerPx: mapActions$1.setTimeSliderDataScaleToSecondsPerPx,
-      mapSetTimeSliderCenterTime: mapActions$1.setTimeSliderCenterTime
-    });
-
-    var TimeSliderScaleSliderComponent = function TimeSliderScaleSliderComponent(_a) {
-      var timeSliderScale = _a.timeSliderScale,
-          mapId = _a.mapId,
-          layers = _a.layers,
-          centerTime = _a.centerTime,
-          secondsPerPx = _a.secondsPerPx,
-          dimensions = _a.dimensions,
-          mapSetTimeSliderScale = _a.mapSetTimeSliderScale,
-          mapSetTimeSliderDataScaleToSecondsPerPx = _a.mapSetTimeSliderDataScaleToSecondsPerPx,
-          mapSetTimeSliderCenterTime = _a.mapSetTimeSliderCenterTime;
-
-      var onSetTimeSliderScale = function onSetTimeSliderScale(scale, newCenterTime, scaleToSecPerPx) {
-        if (scale === Scale.DataScale) {
-          mapSetTimeSliderDataScaleToSecondsPerPx({
-            mapId: mapId,
-            timeSliderDataScaleToSecondsPerPx: scaleToSecPerPx
-          });
-        }
-
-        mapSetTimeSliderScale({
-          mapId: mapId,
-          timeSliderScale: scale
-        });
-        mapSetTimeSliderCenterTime({
-          mapId: mapId,
-          timeSliderCenterTime: newCenterTime
-        });
-      };
-
-      var selectedTime = getTimeBounds(dimensions).selectedTime;
-      return /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSlider, {
-        layers: layers,
-        timeSliderScale: timeSliderScale,
-        onChangeTimeSliderScale: onSetTimeSliderScale,
-        secondsPerPx: secondsPerPx,
-        centerTime: centerTime,
-        selectedTime: selectedTime
-      });
-    };
-    /**
-     * TimeSliderScaleSlider component connected to the store displaying a scale slider of the time slider
-     *
-     * Expects the following props:
-     * @param {string} mapId mapId: string - Id of the map
-     * @example
-     * ``` <TimeSliderScaleSliderConnect mapId={mapId} />```
-     */
-
-
-    var TimeSliderScaleSliderConnect = connectReduxTimeSliderScaleSlider(TimeSliderScaleSliderComponent);
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -18243,15 +18867,13 @@
 
       return /*#__PURE__*/React__namespace.createElement(TimeSlider, {
         buttons: /*#__PURE__*/React__namespace.createElement(TimeSliderButtonsConnect, {
-          mapId: mapId
+          mapId: mapId,
+          sourceId: sourceId
         }),
         rail: /*#__PURE__*/React__namespace.createElement(TimeSliderRailConnect, {
           mapId: mapId,
           sourceId: sourceId
         }),
-        scaleSlider: /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSliderConnect, {
-          mapId: mapId
-        }),
         legend: /*#__PURE__*/React__namespace.createElement(TimeSliderLegendConnect$1, {
           mapId: mapId,
           sourceId: sourceId
@@ -18744,7 +19366,7 @@
             id: service.id,
             serviceUrl: wmLayer.service,
             layers: layers,
-            isUserAddedService: false
+            scope: 'system'
           },
           layerStyle: {
             origin: origin,
@@ -19452,7 +20074,7 @@
         }
 
         if (!featureCoords) {
-          return;
+          return undefined;
         }
 
         var vertexSelected = mouseDown === true && this.mouseIsOverVertexNr !== VERTEX.NONE;
@@ -19476,6 +20098,8 @@
 
           return false;
         }
+
+        return undefined;
       };
 
       AdagucMapDraw.prototype.hoverVertex = function (feature, mouseX, mouseY) {
@@ -19590,7 +20214,7 @@
             isInEditMode = _a.isInEditMode,
             featureNrToEdit = _a.featureNrToEdit,
             onHoverFeature = _a.onHoverFeature;
-        if (event && event.rightButton === true) return;
+        if (event && event.rightButton === true) return undefined;
         /* adagucMouseMove is an event callback function which is triggered when the mouse moves over the map
           This event is only triggered if the map is in hover state.
           E.g. when the map is dragging/panning, this event is not triggerd
@@ -19631,11 +20255,11 @@
         }
 
         if (isInEditMode === false) {
-          return;
+          return undefined;
         }
 
         var feature = this.geojson.features[featureNrToEdit];
-        if (!feature) return;
+        if (!feature) return undefined;
         var webmapjs = this.props.webmapjs;
         this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
           x: mouseX,
@@ -19701,6 +20325,8 @@
           /* False means that this component will take over entire controll.
             True means that it is still possible to pan and drag the map while editing */
         }
+
+        return undefined;
       };
       /* Returns true if double click is detected */
 
@@ -19994,6 +20620,8 @@
             return false;
           }
         }
+
+        return undefined;
       };
 
       AdagucMapDraw.prototype.addPointToLineStringFeature = function (event) {
@@ -20762,7 +21390,7 @@
           /* After the image is loaded the canvas will be redrawn and drawIcon will be triggered again
           via the beforecanvasdisplay listener. */
 
-          return;
+          return undefined;
         }
 
         if (image.isLoaded()) {
@@ -20775,6 +21403,8 @@
             ctx.strokeRect(parseInt(_coord.x, 10) - imageWidth / 2, parseInt(_coord.y, 10) - imageHeight / 2, imageWidth, imageHeight);
           }
         }
+
+        return undefined;
       };
 
       AdagucMapDraw.prototype.drawMarker = function (ctx, _coord, selected, middle, isInEditMode, featureProperties) {
@@ -21979,12 +22609,8 @@
         shouldAutoFetch: true,
         displayMapPin: false,
         disableMapPin: false,
-        onMount: function onMount() {
-          return null;
-        },
-        onUnMount: function onUnMount() {
-          return null;
-        },
+        onMount: function onMount() {},
+        onUnMount: function onUnMount() {},
         onMapChangeDimension: function onMapChangeDimension() {
           /* nothing */
         },
@@ -22096,7 +22722,7 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(ZoomControls, {
         onZoomIn: function onZoomIn() {
-          return adagucRef.current.zoomIn();
+          return adagucRef.current.zoomIn(undefined);
         },
         onZoomOut: function onZoomOut() {
           return adagucRef.current.zoomOut();
@@ -22165,10 +22791,10 @@
         return (touches === null || touches === void 0 ? void 0 : touches.length) === 2;
       };
 
-      var isValidMap = React__namespace.useCallback(function (map, event) {
+      var isCanvasElement = React__namespace.useCallback(function (event) {
         var target = event.target;
-        return map && target.tagName !== 'INPUT' && mapIsActive;
-      }, [mapIsActive]);
+        return target.tagName === 'CANVAS';
+      }, []);
 
       var distance = function distance(x1, y1, x2, y2) {
         var dx = x1 - x2;
@@ -22176,9 +22802,32 @@
         return Math.sqrt(dx * dx + dy * dy);
       };
 
+      var isMatchingWebMapNumbers = function isMatchingWebMapNumbers(firstStr, secondStr) {
+        // Returns true if the same web map (id) number were encountered in both given strings, false otherwise.
+        var webMapNumberBaseFormat = 'WebMapJSMapNo_';
+
+        if (!firstStr.includes(webMapNumberBaseFormat) || !secondStr.includes(webMapNumberBaseFormat)) {
+          return false;
+        }
+
+        var numberMatcher = /\d+/;
+        var firstNumber = firstStr.match(numberMatcher)[0];
+        var secondNumber = secondStr.match(numberMatcher)[0];
+        return Boolean(firstNumber && secondNumber && firstNumber === secondNumber);
+      };
+
+      var isTouchInsideTargetElement = function isTouchInsideTargetElement(elem, touchX, touchY) {
+        var _a = elem.getBoundingClientRect(),
+            left = _a.left,
+            top = _a.top,
+            width = _a.width,
+            height = _a.height;
+
+        var leftMarginWidth = 0.02 * document.body.getBoundingClientRect().width;
+        return touchY > window.scrollY + top && touchY < window.scrollY + top + height - TIME_SLIDER_LEGEND_HEIGHT && touchX > window.scrollX + left + leftMarginWidth && touchX < window.scrollX + left + width;
+      };
+
       var handleStart = React__namespace.useCallback(function (event) {
-        var map = getWMJSMapById(mapId);
-        if (!isValidMap(map, event)) return;
         var targetTouches = event.targetTouches;
         var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
         setFirstTouchX(firstTouch === null || firstTouch === void 0 ? void 0 : firstTouch.clientX);
@@ -22189,10 +22838,31 @@
           setSecondTouchX(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientX);
           setSecondTouchY(secondTouch === null || secondTouch === void 0 ? void 0 : secondTouch.clientY);
         }
-      }, [isValidMap, mapId]);
+      }, []);
       var handleMove = React__namespace.useCallback(function (event) {
         var map = getWMJSMapById(mapId);
-        if (!isValidMap(map, event)) return;
+        var targetElem = event.target;
+
+        if (!isCanvasElement(event)) {
+          // Elements other than canvas elements are not allowed to be zoomed/panned
+          return;
+        }
+
+        var targetMapId = map.getId();
+        var targetElemId = targetElem.parentElement.id;
+
+        if (!isMatchingWebMapNumbers(targetMapId, targetElemId)) {
+          // Current map (given by map id) was not coupled to the canvas element user touched.
+          // This web map id number comparison is of importance when dealing with multi-window presentations.
+          return;
+        }
+
+        if (!isTouchInsideTargetElement(targetElem, firstTouchX, firstTouchY)) {
+          // A user touch outside the current canvas element will be rejected
+          return;
+        } // Start zooming/panning by touch
+
+
         event.preventDefault();
         var targetTouches = event.targetTouches;
         var firstTouch = targetTouches === null || targetTouches === void 0 ? void 0 : targetTouches.item(0);
@@ -22234,7 +22904,7 @@
             setPrevDist(dist);
           }
         }
-      }, [firstTouchX, firstTouchY, isValidMap, mapId, prevDist, secondTouchX, secondTouchY]);
+      }, [mapId, isCanvasElement, firstTouchX, firstTouchY, secondTouchX, secondTouchY, prevDist]);
       var handleEnd = React__namespace.useCallback(function () {}, []);
       React__namespace.useEffect(function () {
         document.addEventListener('touchstart', handleStart, {
@@ -22483,7 +23153,7 @@
         },
         srs: srs,
         bbox: bbox,
-        mapPinLocation: displayMapPin && mapPinLocation,
+        mapPinLocation: displayMapPin ? mapPinLocation : undefined,
         dimensions: mapDimensions,
         activeLayerId: activeLayerId,
         animationDelay: animationDelay,
@@ -22567,40 +23237,185 @@
      * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var LegendMapButtonConnect = function LegendMapButtonConnect(_a) {
+      var mapId = _a.mapId,
+          _b = _a.source,
+          source = _b === void 0 ? 'app' : _b,
+          _c = _a.multiLegend,
+          multiLegend = _c === void 0 ? false : _c;
+      var dispatch = reactRedux.useDispatch();
+      var legendType = multiLegend ? "legend-" + mapId : "legend";
+      var currentActiveMapId = reactRedux.useSelector(function (store) {
+        return getDialogMapId(store, legendType);
+      });
+      var isOpenInStore = reactRedux.useSelector(function (store) {
+        return getisDialogOpen(store, legendType);
+      });
+      var openLegendDialog = React__namespace.useCallback(function () {
+        dispatch(uiActions.setActiveMapIdForDialog({
+          type: legendType,
+          mapId: mapId,
+          setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+          source: source,
+          origin: MapActionOrigin.map
+        }));
+      }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source, legendType]);
+      var isOpen = currentActiveMapId === mapId && isOpenInStore;
+      return /*#__PURE__*/React__namespace.createElement(MapControlButton, {
+        title: "Legend",
+        "data-testid": "open-Legend",
+        onClick: openLegendDialog,
+        isActive: isOpen
+      }, /*#__PURE__*/React__namespace.createElement(theme.List, null));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var MIN_WIDTH = 170;
+    var MIN_HEIGHT = 32;
+    var MIN_FONT_SIZE = 14;
+    var FONT_SIZE_WIDTH_RATIO = MIN_FONT_SIZE / MIN_WIDTH;
+    var TimeSliderClock = function TimeSliderClock(_a) {
+      var time = _a.time;
+      var nodeRef = React__namespace.useRef(null);
+
+      var _b = __read(React__namespace.useState({
+        x: 0,
+        y: 0
+      }), 2),
+          position = _b[0],
+          setPosition = _b[1];
+
+      shared.useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition);
+
+      var _c = __read(React__namespace.useState({
+        width: MIN_WIDTH,
+        height: MIN_HEIGHT
+      }), 2),
+          size = _c[0],
+          setSize = _c[1];
+
+      var _d = __read(React__namespace.useState(MIN_FONT_SIZE), 2),
+          fontSize = _d[0],
+          setFontSize = _d[1];
+
+      return /*#__PURE__*/React__namespace.createElement(Draggable__default["default"], {
+        nodeRef: nodeRef,
+        bounds: "parent",
+        position: position,
+        onStop: function onStop(_event, position) {
+          setPosition(position);
+        }
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          position: 'absolute',
+          zIndex: 100,
+          top: '10px',
+          right: '10px'
+        },
+        ref: nodeRef
+      }, /*#__PURE__*/React__namespace.createElement(reResizable.Resizable, {
+        onResizeStart: function onResizeStart(event) {
+          event.stopPropagation();
+        },
+        onResize: function onResize(_event, _direction, _ref, delta) {
+          var width = size.width + delta.width;
+          var fontSize = FONT_SIZE_WIDTH_RATIO * width;
+          setFontSize(fontSize);
+        },
+        onResizeStop: function onResizeStop(_event, _direction, _ref, delta) {
+          var width = size.width + delta.width;
+          var height = size.height + delta.height;
+          setSize({
+            width: width,
+            height: height
+          });
+        },
+        lockAspectRatio: true,
+        minHeight: MIN_HEIGHT,
+        minWidth: MIN_WIDTH,
+        size: size,
+        handleComponent: {
+          bottomLeft: /*#__PURE__*/React__namespace.createElement(theme.Resize, {
+            isRightAligned: true,
+            style: {
+              fill: '#FFFFFF'
+            }
+          })
+        },
+        enable: {
+          top: false,
+          right: false,
+          bottom: false,
+          left: false,
+          topRight: false,
+          bottomRight: false,
+          bottomLeft: true,
+          topLeft: false
+        }
+      }, /*#__PURE__*/React__namespace.createElement(system.Box, {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        sx: {
+          cursor: 'move',
+          height: '100%',
+          width: '100%',
+          backgroundColor: '#051039',
+          borderRadius: '5px'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+        variant: "subtitle2",
+        sx: {
+          color: '#FFFFFF',
+          fontSize: fontSize
+        }
+      }, moment__default["default"].utc(time).format('ddd DD MMM HH:mm z'))))));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-
-    var LegendMapButtonConnect = function LegendMapButtonConnect(_a) {
-      var mapId = _a.mapId,
-          _b = _a.source,
-          source = _b === void 0 ? 'app' : _b,
-          _c = _a.multiLegend,
-          multiLegend = _c === void 0 ? false : _c;
-      var dispatch = reactRedux.useDispatch();
-      var legendType = multiLegend ? "legend-" + mapId : "legend";
-      var currentActiveMapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, legendType);
+    var TimeSliderClockConnect = function TimeSliderClockConnect(_a) {
+      var mapId = _a.mapId;
+      var dimensions = reactRedux.useSelector(function (store) {
+        return getMapDimensions(store, mapId);
       });
-      var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, legendType);
+      var selectedTime = getMomentTimeBounds(dimensions).selectedTime;
+      return /*#__PURE__*/React__default["default"].createElement(TimeSliderClock, {
+        time: selectedTime
       });
-      var openLegendDialog = React__namespace.useCallback(function () {
-        dispatch(uiActions.setActiveMapIdForDialog({
-          type: legendType,
-          mapId: mapId,
-          setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
-          source: source,
-          origin: MapActionOrigin.map
-        }));
-      }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source, legendType]);
-      var isOpen = currentActiveMapId === mapId && isOpenInStore;
-      return /*#__PURE__*/React__namespace.createElement(MapControlButton, {
-        title: "Legend",
-        "data-testid": "open-Legend",
-        onClick: openLegendDialog,
-        isActive: isOpen
-      }, /*#__PURE__*/React__namespace.createElement(theme.List, null));
     };
 
     /* *
@@ -22669,7 +23484,9 @@
           _p = _a.multiLegend,
           multiLegend = _p === void 0 ? true : _p,
           shouldShowLayerManager = _a.shouldShowLayerManager,
-          props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager"]);
+          _q = _a.showClock,
+          showClock = _q === void 0 ? true : _q,
+          props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "showClock"]);
 
       var dispatch = reactRedux.useDispatch();
       var mapId = React__default["default"].useRef(id || generateMapId()).current;
@@ -22704,7 +23521,7 @@
 
         if (shouldShowLayerManager !== undefined) {
           dispatch(uiActions.setActiveMapIdForDialog({
-            type: 'layerManager',
+            type: DialogTypes.LayerManager,
             mapId: mapId,
             setOpen: shouldShowLayerManager,
             source: 'app'
@@ -22757,6 +23574,8 @@
         showMapId: true,
         mapId: mapId,
         multiLegend: multiLegend
+      }), showClock && /*#__PURE__*/React__default["default"].createElement(TimeSliderClockConnect, {
+        mapId: mapId
       }));
     };
 
@@ -22796,7 +23615,9 @@
           _c = _a.showZoomControls,
           showZoomControls = _c === void 0 ? true : _c,
           _d = _a.multiLegend,
-          multiLegend = _d === void 0 ? false : _d;
+          multiLegend = _d === void 0 ? false : _d,
+          _e = _a.showClock,
+          showClock = _e === void 0 ? true : _e;
       var dispatch = reactRedux.useDispatch();
       var syncGroupAddTarget = React__default["default"].useCallback(function (payload) {
         dispatch(genericActions.syncGroupAddTarget(payload));
@@ -22839,6 +23660,8 @@
         showMapId: true,
         mapId: firstMapId,
         multiLegend: multiLegend
+      }), showClock && /*#__PURE__*/React__default["default"].createElement(TimeSliderClockConnect, {
+        mapId: firstMapId
       }), maps.map(function (map, mapIndex) {
         var mapId = map.id;
         return /*#__PURE__*/React__default["default"].createElement(material.Box, {
@@ -22858,112 +23681,12 @@
           shouldShowZoomControls: showZoomControls && mapIndex === 0,
           showTimeSlider: false,
           disableTimeSlider: true,
+          showClock: false,
           multiLegend: multiLegend
         }));
       }));
     };
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-
-    var useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
-      var _a = __read(React__namespace.useState([]), 2),
-          referenceTimes = _a[0],
-          setReferenceTimes = _a[1];
-
-      React__namespace.useEffect(function () {
-        var referenceTimes = [];
-        var wmLayer = new webmap.WMLayer(__assign({}, inputLayer));
-        wmLayer.parseLayerPromise().then(function (layer) {
-          var refTimeDim = layer.getDimension('reference_time');
-          /* Loop through all values of the dimension.
-             A map cannot be used for iterating,  as the dimension values are not in an array (it is an API). */
-
-          for (var j = 0; j < refTimeDim.size(); j += 1) {
-            var referenceTimeValue = refTimeDim.getValueForIndex(j);
-            referenceTimes.push(referenceTimeValue);
-          }
-
-          setReferenceTimes(referenceTimes);
-        });
-      }, [inputLayer]);
-      return referenceTimes;
-    };
-
-    var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_a) {
-      var layers = _a.layers,
-          _b = _a.multiLegend,
-          multiLegend = _b === void 0 ? false : _b;
-      /* Get all the reference times for this layer */
-
-      var referenceTimes = useGetReferenceTimes(layers.topRow);
-      if (referenceTimes.length === 0) return /*#__PURE__*/React__namespace.createElement("div", null, "Loading...");
-      /* Helper to make a map layer prest */
-
-      var makeMapPreset = function makeMapPreset(referenceTime, uniqueId, layer, syncGroupsIds, col) {
-        return {
-          id: uniqueId,
-          title: "Harmonie run " + ("" + referenceTime.substring(8, 13).replace('T', ' / ')),
-          bbox: {
-            left: -450651.2255879827,
-            bottom: 6490531.093143953,
-            right: 1428345.8183648037,
-            top: 7438773.776232235
-          },
-          srs: 'EPSG:3857',
-          layers: [__assign(__assign({}, layer), {
-            id: uniqueId,
-            dimensions: [{
-              name: 'reference_time',
-              currentValue: referenceTime
-            }]
-          })],
-          syncGroupsIds: syncGroupsIds,
-          displayLayerManagerAndLegendButtonInMap: col === 0 || !syncGroupsIds,
-          displayDimensionSelectButtonInMap: col === 0 || !syncGroupsIds
-        };
-      };
-      /* Make the preset */
-
-
-      var nCols = 5;
-      /* Add the harmonie air temperature layers with the different referencetimes */
-
-      var mapsTemperature = __spreadArray([], __read(Array(nCols))).map(function (_, index) {
-        var refTime = referenceTimes[referenceTimes.length - nCols + index];
-        return makeMapPreset(refTime, "harm_air" + index, layers.topRow, layers.topRowSyncGroups, index);
-      });
-      /* Add the harmonie precipitation layers with the different referencetimes */
-
-
-      var mapsPrecipitation = __spreadArray([], __read(Array(nCols))).map(function (_, index) {
-        var refTime = referenceTimes[referenceTimes.length - nCols + index];
-        return makeMapPreset(refTime, "harm_precip" + index, layers.bottomRow, layers.bottomRowSyncGroups, index);
-      });
-
-      var maps = mapsTemperature.concat(mapsPrecipitation);
-      return /*#__PURE__*/React__namespace.createElement(MultiMapViewConnect, {
-        rows: 2,
-        cols: 5,
-        maps: maps,
-        multiLegend: multiLegend
-      });
-    };
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -22996,9 +23719,31 @@
       }, [inputLayer]);
       return latestReferenceTime;
     };
-    /* Helper to make a map layer preset */
+    /**
+     * Custom hook to find out if the list of syncgroup id's contains a group which is of type SYNCGROUPS_TYPE_SETLAYERACTIONS
+     * @param syncGroupsIds A string array of syncgroup ids
+     * @returns True if indeed a group is included which is of type SYNCGROUPS_TYPE_SETLAYERACTIONS
+     */
 
 
+    var useHasSyncGroupWithLayerActions = function useHasSyncGroupWithLayerActions(syncGroupsIds) {
+      /* Get Syncgroupstate */
+      var syncGroupState = reactRedux.useSelector(function (store) {
+        return getSynchronizationGroupState(store);
+      });
+      if (!syncGroupState) return false;
+      /* Return all syncgroups configured for this component of type SYNCGROUPS_TYPE_SETLAYERACTIONS */
+
+      var syncGroupsWithLayerActions = syncGroupState.groups.allIds.filter(function (syncGroupId) {
+        return syncGroupsIds && syncGroupsIds.includes(syncGroupId) && syncGroupState.groups.byId[syncGroupId].type === 'SYNCGROUPS_TYPE_SETLAYERACTIONS';
+      });
+      /* Figure out if there is a syncgroup which controls layeractions.  */
+
+      var displayLayerManagerAndLegendButtonInAllMaps = syncGroupsIds ? syncGroupsWithLayerActions.length === 1 : false;
+      return displayLayerManagerAndLegendButtonInAllMaps;
+    };
+    /* Helper to make a map layer preset */
+
     var makeMapPreset = function makeMapPreset(timeIncrement, uniqueId, referenceTime, layers, syncGroupsIds, displayLayerManagerAndLegendButtonInMap, displayDimensionSelectButtonInMap) {
       var mapTime = moment__default["default"].utc(referenceTime).add(timeIncrement, 'h').format('YYYY-MM-DDTHH:mm:ss[Z]');
       return {
@@ -23039,6 +23784,7 @@
           startTimeIncrement = _d === void 0 ? 3 : _d,
           _e = _a.multiLegend,
           multiLegend = _e === void 0 ? false : _e;
+      var displayLayerManagerAndLegendButtonInAllMaps = !useHasSyncGroupWithLayerActions(syncGroupsIds);
       /* Get latest reference time for this layer */
 
       var latestReferenceTime = useGetLatestReferenceTime(layers[0]);
@@ -23053,7 +23799,7 @@
 
 
       var maps = timeIncrements.map(function (increment, index) {
-        return makeMapPreset(increment, "harm_precip" + increment, latestReferenceTime, layers, syncGroupsIds, index === 0 || !syncGroupsIds, index === 0 || !syncGroupsIds);
+        return makeMapPreset(increment, "harm_precip" + increment, latestReferenceTime, layers, syncGroupsIds, index === 0 || displayLayerManagerAndLegendButtonInAllMaps, index === 0 || displayLayerManagerAndLegendButtonInAllMaps);
       });
       return /*#__PURE__*/React__namespace.createElement(MultiMapViewConnect, {
         rows: 3,
@@ -23061,6 +23807,110 @@
         maps: maps,
         syncTime: false,
         showTimeSlider: false,
+        multiLegend: multiLegend,
+        showClock: false
+      });
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var useGetReferenceTimes = function useGetReferenceTimes(inputLayer) {
+      var _a = __read(React__namespace.useState([]), 2),
+          referenceTimes = _a[0],
+          setReferenceTimes = _a[1];
+
+      React__namespace.useEffect(function () {
+        var referenceTimes = [];
+        var wmLayer = new webmap.WMLayer(__assign({}, inputLayer));
+        wmLayer.parseLayerPromise().then(function (layer) {
+          var refTimeDim = layer.getDimension('reference_time');
+          /* Loop through all values of the dimension.
+             A map cannot be used for iterating,  as the dimension values are not in an array (it is an API). */
+
+          for (var j = 0; j < refTimeDim.size(); j += 1) {
+            var referenceTimeValue = refTimeDim.getValueForIndex(j);
+            referenceTimes.push(referenceTimeValue);
+          }
+
+          setReferenceTimes(referenceTimes);
+        });
+      }, [inputLayer]);
+      return referenceTimes;
+    };
+
+    var HarmonieTempAndPrecipPreset = function HarmonieTempAndPrecipPreset(_a) {
+      var layers = _a.layers,
+          _b = _a.multiLegend,
+          multiLegend = _b === void 0 ? false : _b;
+      var displayLayerManagerAndLegendButtonInAllTopRows = !useHasSyncGroupWithLayerActions(layers && layers.topRowSyncGroups);
+      var displayLayerManagerAndLegendButtonInAllBottomRows = !useHasSyncGroupWithLayerActions(layers && layers.bottomRowSyncGroups);
+      /* Get all the reference times for this layer */
+
+      var referenceTimes = useGetReferenceTimes(layers.topRow);
+      if (referenceTimes.length === 0) return /*#__PURE__*/React__namespace.createElement("div", null, "Loading...");
+      /* Helper to make a map layer prest */
+
+      var makeMapPreset = function makeMapPreset(referenceTime, uniqueId, layer, syncGroupsIds, col) {
+        return {
+          id: uniqueId,
+          title: "Harmonie run " + ("" + referenceTime.substring(8, 13).replace('T', ' / ')),
+          bbox: {
+            left: -450651.2255879827,
+            bottom: 6490531.093143953,
+            right: 1428345.8183648037,
+            top: 7438773.776232235
+          },
+          srs: 'EPSG:3857',
+          layers: [__assign(__assign({}, layer), {
+            id: uniqueId,
+            dimensions: [{
+              name: 'reference_time',
+              currentValue: referenceTime
+            }]
+          })],
+          syncGroupsIds: syncGroupsIds,
+          displayLayerManagerAndLegendButtonInMap: col === 0 || displayLayerManagerAndLegendButtonInAllTopRows,
+          displayDimensionSelectButtonInMap: col === 0 || displayLayerManagerAndLegendButtonInAllBottomRows
+        };
+      };
+      /* Make the preset */
+
+
+      var nCols = 5;
+      /* Add the harmonie air temperature layers with the different referencetimes */
+
+      var mapsTemperature = __spreadArray([], __read(Array(nCols))).map(function (_, index) {
+        var refTime = referenceTimes[referenceTimes.length - nCols + index];
+        return makeMapPreset(refTime, "harm_air" + index, layers.topRow, layers.topRowSyncGroups, index);
+      });
+      /* Add the harmonie precipitation layers with the different referencetimes */
+
+
+      var mapsPrecipitation = __spreadArray([], __read(Array(nCols))).map(function (_, index) {
+        var refTime = referenceTimes[referenceTimes.length - nCols + index];
+        return makeMapPreset(refTime, "harm_precip" + index, layers.bottomRow, layers.bottomRowSyncGroups, index);
+      });
+
+      var maps = mapsTemperature.concat(mapsPrecipitation);
+      return /*#__PURE__*/React__namespace.createElement(MultiMapViewConnect, {
+        rows: 2,
+        cols: 5,
+        maps: maps,
         multiLegend: multiLegend
       });
     };
@@ -23497,7 +24347,7 @@
         dispatch(actions.syncGroupRemoveTarget(payload));
       }, [dispatch]);
 
-      var _a = useSetupDialog('syncGroups'),
+      var _a = useSetupDialog(DialogTypes.SyncGroups),
           dialogOrder = _a.dialogOrder,
           isDialogOpen = _a.isDialogOpen,
           onCloseDialog = _a.onCloseDialog,
@@ -23532,9 +24382,8 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var store = reduxDynamicModules.createStore({
-      initialState: {},
-      extensions: [reduxDynamicModulesSaga.getSagaExtension({})]
+    var store = reduxToolkit.createStore({
+      extensions: [sagaExtension.getSagaExtension()]
     });
 
     /* *
@@ -23715,9 +24564,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var SnackbarWrapperConnect = function SnackbarWrapperConnect(_a) {
-      var props = __rest(_a, []);
-
+    var SnackbarWrapperConnect = shared.withEggs([snackbarModuleConfig])(function (props) {
       var dispatch = reactRedux.useDispatch();
 
       var onCloseSnackbar = function onCloseSnackbar() {
@@ -23727,15 +24574,13 @@
       var currentSnackbarMessage = reactRedux.useSelector(function (store) {
         return getFirstSnackbarMessage(store);
       });
-      return /*#__PURE__*/React__namespace.createElement(reduxDynamicModules.DynamicModuleLoader, {
-        modules: [snackbarModuleConfig]
-      }, /*#__PURE__*/React__namespace.createElement(SnackbarWrapper, __assign({
+      return /*#__PURE__*/React__namespace.createElement(SnackbarWrapper, __assign({
         isOpen: !!currentSnackbarMessage,
         onCloseSnackbar: onCloseSnackbar,
         message: currentSnackbarMessage ? currentSnackbarMessage.message : '',
         id: currentSnackbarMessage ? currentSnackbarMessage.id : ''
-      }, props)));
-    };
+      }, props));
+    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23767,6 +24612,13 @@
         theme: theme$1
       }, children);
     };
+    var ThemeWrapperWithModules = shared.withEggs(coreModuleConfig)(function (_a) {
+      var theme = _a.theme,
+          children = _a.children;
+      return /*#__PURE__*/React__default["default"].createElement(CoreThemeProvider, {
+        theme: theme
+      }, children, " ");
+    });
     /**
      * A Provider component which provides the GeoWeb theme and store for the core.
      * Note: Should only be used with core components, as the provided store is only for core.
@@ -23781,11 +24633,9 @@
           store = _a.store;
       return /*#__PURE__*/React__default["default"].createElement(reactRedux.Provider, {
         store: store
-      }, /*#__PURE__*/React__default["default"].createElement(reduxDynamicModules.DynamicModuleLoader, {
-        modules: coreModuleConfig
-      }, /*#__PURE__*/React__default["default"].createElement(CoreThemeProvider, {
+      }, /*#__PURE__*/React__default["default"].createElement(ThemeWrapperWithModules, {
         theme: theme$1
-      }, /*#__PURE__*/React__default["default"].createElement(SnackbarWrapperConnect, null, children))));
+      }, /*#__PURE__*/React__default["default"].createElement(SnackbarWrapperConnect, null, children)));
     };
 
     /* *