@opengeoweb/core 3.0.0 → 4.0.0

package/index.esm.js

@@ -1,10 +1,10 @@
-import { createAction, createSlice, createSelector } from '@reduxjs/toolkit';
+import { createAction, createSlice, createSelector, createEntityAdapter } from '@reduxjs/toolkit';
 import produce$1, { current, produce } from 'immer';
 import moment from 'moment';
 import * as React from 'react';
 import React__default, { Component, useRef, useState, useEffect } from 'react';
 import _, { isEqual, debounce, throttle, range } from 'lodash';
-import { takeLatest, put, select, call, all, takeEvery } from 'redux-saga/effects';
+import { takeLatest, put, select, call, all, takeEvery, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { Tooltip, Paper, Typography, Grid, InputLabel, IconButton, Box, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
 import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
@@ -1440,7 +1440,7 @@ var createLayer = function createLayer(_a) {
     status: status
   });
 };
-var initialState$5 = {
+var initialState$6 = {
   byId: {},
   allIds: [],
   availableBaseLayers: {
@@ -1448,8 +1448,8 @@ var initialState$5 = {
     allIds: []
   }
 };
-var slice$5 = createSlice({
-  initialState: initialState$5,
+var slice$6 = createSlice({
+  initialState: initialState$6,
   name: 'layerReducer',
   reducers: {
     addLayer: function addLayer(draft, action) {
@@ -1683,9 +1683,9 @@ var slice$5 = createSlice({
           layerDimensions = _action$payload11.layerDimensions;
       var layerStyleAction = layerActions.layerChangeStyle(layerStyle);
       var state = current(draft);
-      var intermediateState = layerStyle === null ? state : reducer$5(state, layerStyleAction);
+      var intermediateState = layerStyle === null ? state : reducer$6(state, layerStyleAction);
       var dimensionsAction = layerActions.layerSetDimensions(layerDimensions);
-      var newState = layerDimensions === null ? intermediateState : reducer$5(intermediateState, dimensionsAction);
+      var newState = layerDimensions === null ? intermediateState : reducer$6(intermediateState, dimensionsAction);
       return newState;
     }
   },
@@ -1730,7 +1730,7 @@ var slice$5 = createSlice({
         };
         /* Handle the Layer action with the same logic, using the same reducer */
 
-        return reducer$5(prevState, action);
+        return reducer$6(prevState, action);
       }, state);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -1750,8 +1750,8 @@ var slice$5 = createSlice({
     });
   }
 });
-var reducer$5 = slice$5.reducer;
-var layerActions = slice$5.actions;
+var reducer$6 = slice$6.reducer;
+var layerActions = slice$6.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1769,12 +1769,12 @@ var layerActions = slice$5.actions;
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$4 = {
+var initialState$5 = {
   byId: {},
   allIds: []
 };
-var slice$4 = createSlice({
-  initialState: initialState$4,
+var slice$5 = createSlice({
+  initialState: initialState$5,
   name: 'serviceReducer',
   reducers: {
     serviceSetLayers: function serviceSetLayers(draft, action) {
@@ -1801,13 +1801,13 @@ var slice$4 = createSlice({
       var serviceLayers = action.payload.serviceLayers;
       if (serviceLayers === null) return draft;
       var mapAction = serviceActions.serviceSetLayers(serviceLayers);
-      var newState = reducer$4(draft, mapAction);
+      var newState = reducer$5(draft, mapAction);
       return newState;
     });
   }
 });
-var reducer$4 = slice$4.reducer;
-var serviceActions = slice$4.actions;
+var reducer$5 = slice$5.reducer;
+var serviceActions = slice$5.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1992,13 +1992,13 @@ var createUIDialogElement = function createUIDialogElement(_ref) {
     source: source
   };
 };
-var initialState$3 = {
+var initialState$4 = {
   order: [],
   dialogs: {},
   activeWindowId: undefined
 };
-var slice$3 = createSlice({
-  initialState: initialState$3,
+var slice$4 = createSlice({
+  initialState: initialState$4,
   name: 'uiReducer',
   reducers: {
     registerDialog: function registerDialog(draft, action) {
@@ -2075,8 +2075,8 @@ var slice$3 = createSlice({
     }
   }
 });
-var reducer$3 = slice$3.reducer;
-var uiActions = slice$3.actions;
+var reducer$4 = slice$4.reducer;
+var uiActions = slice$4.actions;
 
 var addBaseLayer = layerActions.addBaseLayer,
     addLayer$1 = layerActions.addLayer,
@@ -2127,12 +2127,12 @@ var createLayersWithIds = function createLayersWithIds(state, layers) {
   });
 };
 
-var initialState$2 = {
+var initialState$3 = {
   byId: {},
   allIds: []
 };
-var slice$2 = createSlice({
-  initialState: initialState$2,
+var slice$3 = createSlice({
+  initialState: initialState$3,
   name: 'mapReducer',
   reducers: {
     registerMap: function registerMap(draft, action) {
@@ -2698,13 +2698,13 @@ var slice$2 = createSlice({
         };
         /* Handle the Layer action with the same logic, using the same reducer */
 
-        return reducer$2(prevState, action);
+        return reducer$3(prevState, action);
       }, draft);
     }).addCase(onUpdateLayerInformation, function (draft, action) {
       var mapDimensions = action.payload.mapDimensions;
       if (mapDimensions === null) return draft;
       var mapAction = mapActions$1.mapUpdateAllMapDimensions(mapDimensions);
-      return reducer$2(draft, mapAction);
+      return reducer$3(draft, mapAction);
     }).addCase(mapChangeDimension, function (draft, action) {
       var _action$payload36 = action.payload,
           mapId = _action$payload36.mapId,
@@ -2743,11 +2743,11 @@ var slice$2 = createSlice({
     });
   }
 });
-var mapActions$1 = Object.assign(Object.assign({}, slice$2.actions), {
+var mapActions$1 = Object.assign(Object.assign({}, slice$3.actions), {
   setMapPreset: setMapPreset,
   mapChangeDimension: mapChangeDimension
 });
-var reducer$2 = slice$2.reducer;
+var reducer$3 = slice$3.reducer;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3244,7 +3244,7 @@ var removeInPlace = function removeInPlace(inDraftArray, condition) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$1 = {
+var initialState$2 = {
   sources: {
     byId: {},
     allIds: []
@@ -3268,8 +3268,8 @@ var initialState$1 = {
     }
   }
 };
-var slice$1 = createSlice({
-  initialState: initialState$1,
+var slice$2 = createSlice({
+  initialState: initialState$2,
   name: 'synchronizationGroupsReducer',
   reducers: {
     syncGroupAddSource: function syncGroupAddSource(draft, action) {
@@ -3413,7 +3413,7 @@ var slice$1 = createSlice({
       });
     },
     syncGroupClear: function syncGroupClear() {
-      return initialState$1;
+      return initialState$2;
     },
     syncGroupSetViewState: function syncGroupSetViewState(draft, action) {
       var viewState = action.payload.viewState;
@@ -3485,7 +3485,7 @@ var setBboxOrTimeSync = function setBboxOrTimeSync(state, action) {
   });
 };
 
-var _slice$actions = slice$1.actions,
+var _slice$actions = slice$2.actions,
     syncGroupAddGroup = _slice$actions.syncGroupAddGroup,
     syncGroupAddSource = _slice$actions.syncGroupAddSource,
     syncGroupAddTarget = _slice$actions.syncGroupAddTarget;
@@ -3495,8 +3495,8 @@ var _slice$actions = slice$1.actions,
     syncGroupRemoveSource = _slice$actions.syncGroupRemoveSource,
     syncGroupRemoveTarget = _slice$actions.syncGroupRemoveTarget,
     syncGroupSetViewState = _slice$actions.syncGroupSetViewState;
-var actions = slice$1.actions,
-    reducer$1 = slice$1.reducer;
+var actions = slice$2.actions,
+    reducer$2 = slice$2.reducer;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3553,7 +3553,7 @@ var index = /*#__PURE__*/Object.freeze({
   actions: actions,
   constants: constants,
   types: types$1,
-  initialState: initialState$1
+  initialState: initialState$2
 });
 
 /* *
@@ -4359,7 +4359,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getMapPresetError: getMapPresetError
 });
 
-var initialState = {
+var initialState$1 = {
   filters: {
     searchFilter: '',
     activeServices: {
@@ -4372,8 +4372,8 @@ var initialState = {
     }
   }
 };
-var slice = createSlice({
-  initialState: initialState,
+var slice$1 = createSlice({
+  initialState: initialState$1,
   name: 'layerSelect',
   reducers: {
     setSearchFilter: function setSearchFilter(draft, action) {
@@ -4532,8 +4532,8 @@ var slice = createSlice({
     }
   }
 });
-var reducer = slice.reducer;
-var layerSelectActions = slice.actions;
+var reducer$1 = slice$1.reducer;
+var layerSelectActions = slice$1.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4665,6 +4665,80 @@ var getKeywordObjectById = function getKeywordObjectById(store, keywordId) {
   return (_d = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.keywords) === null || _c === void 0 ? void 0 : _c.byId[keywordId]) !== null && _d !== void 0 ? _d : {};
 };
 
+/* *
+ * 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 snackbarAdapter = createEntityAdapter();
+var initialState = snackbarAdapter.getInitialState();
+var slice = createSlice({
+  initialState: initialState,
+  name: 'snackbar',
+  reducers: {
+    // To open the snackbar call this action
+    // eslint-disable-next-line no-unused-vars
+    openSnackbar: function openSnackbar(draft, action) {},
+    // triggerOpenSnackbarBySaga is triggered by the saga to open the snackbar after the current snackbars have all been closed
+    // DO NOT CALL THIS ACTION DIRECTLY!
+    triggerOpenSnackbarBySaga: function triggerOpenSnackbarBySaga(draft, action) {
+      var snackbarContent = action.payload.snackbarContent; // Ensure we have an id before proceeding
+
+      if (snackbarContent.id === undefined) {
+        return;
+      }
+
+      snackbarAdapter.setOne(draft, snackbarContent);
+    },
+    closeSnackbar: function closeSnackbar(draft) {
+      snackbarAdapter.removeAll(draft);
+    }
+  }
+});
+var reducer = slice.reducer;
+var snackbarActions = slice.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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var _snackbarAdapter$getS = snackbarAdapter.getSelectors(function (state) {
+  var _a;
+
+  return (_a = state === null || state === void 0 ? void 0 : state.snackbar) !== null && _a !== void 0 ? _a : {
+    entities: {},
+    ids: []
+  };
+}),
+    getCurrentSnackbarMessages = _snackbarAdapter$getS.selectAll;
+createSelector(getCurrentSnackbarMessages, function (currentMessages) {
+  return currentMessages.length > 0 ? currentMessages[0] : undefined;
+});
+
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
@@ -4996,15 +5070,15 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
   });
 };
 
-var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
-    _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
+var _marked$5 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
+    _marked2$5 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
     _marked3$4 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
     _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
     _marked5$2 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
     _marked6$1 = /*#__PURE__*/regeneratorRuntime.mark(moveLayerActionsSaga),
     _marked7$1 = /*#__PURE__*/regeneratorRuntime.mark(setActiveLayerIdActionsSaga),
     _marked8$1 = /*#__PURE__*/regeneratorRuntime.mark(mapBaseLayerActionsSaga),
-    _marked9$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
+    _marked9$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$5);
 var setBaseLayers = layerActions.setBaseLayers,
     addLayer = layerActions.addLayer,
     layerChangeDimension = layerActions.layerChangeDimension,
@@ -5052,7 +5126,7 @@ function setTimeSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked$4);
+  }, _marked$5);
 }
 function setBBoxSaga(_ref2) {
   var payload, targets, groups;
@@ -5079,7 +5153,7 @@ function setBBoxSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2$4);
+  }, _marked2$5);
 }
 function layerActionsSaga(_ref3) {
   var payload, type, targets;
@@ -5294,7 +5368,7 @@ function mapBaseLayerActionsSaga(_ref8) {
     }
   }, _marked8$1);
 }
-function rootSaga$4() {
+function rootSaga$5() {
   return regeneratorRuntime.wrap(function rootSaga$(_context9) {
     while (1) {
       switch (_context9.prev = _context9.next) {
@@ -5453,11 +5527,11 @@ var sources = function sources(store) {
 
 var createSyncGroupViewStateSelector = createSelector(groups, sources, createSyncGroupViewState);
 
-var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
-    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
+var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
+    _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
     _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
     _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(updateViewStateSaga),
-    _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
+    _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$4);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
   return regeneratorRuntime.wrap(function updateSourceValueWhenLinkingComponentToGroupSaga$(_context) {
@@ -5524,7 +5598,7 @@ function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdat
           return _context.stop();
       }
     }
-  }, _marked$3);
+  }, _marked$4);
 }
 function addGroupTargetSaga(_ref) {
   var payload, groupId, linked, targetToUpdate;
@@ -5548,7 +5622,7 @@ function addGroupTargetSaga(_ref) {
           return _context2.stop();
       }
     }
-  }, _marked2$3);
+  }, _marked2$4);
 }
 function linkGroupTargetSaga(_ref2) {
   var payload, groupId, linked, targetToUpdate;
@@ -5598,7 +5672,7 @@ function updateViewStateSaga() {
   }, _marked4$1);
 }
 
-function rootSaga$3() {
+function rootSaga$4() {
   return regeneratorRuntime.wrap(function rootSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
@@ -5665,14 +5739,14 @@ function rootSaga$3() {
 var synchronizationGroupConfig = {
   id: 'syncronizationGroupStore-module',
   reducerMap: {
-    syncronizationGroupStore: reducer$1
+    syncronizationGroupStore: reducer$2
   },
-  sagas: [rootSaga$4, rootSaga$3]
+  sagas: [rootSaga$5, rootSaga$4]
 };
 
-var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
-    _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
-    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
+var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
+    _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
+    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
 function registerMapUISaga() {
   var fields, source;
   return regeneratorRuntime.wrap(function registerMapUISaga$(_context) {
@@ -5708,7 +5782,7 @@ function registerMapUISaga() {
           return _context.stop();
       }
     }
-  }, _marked$2);
+  }, _marked$3);
 }
 function unregisterUIMapSaga() {
   var fields, activeUI;
@@ -5760,9 +5834,9 @@ function unregisterUIMapSaga() {
           return _context2.stop();
       }
     }
-  }, _marked2$2);
+  }, _marked2$3);
 }
-function rootSaga$2() {
+function rootSaga$3() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
@@ -5801,9 +5875,9 @@ function rootSaga$2() {
 var uiModuleConfig = {
   id: 'ui-module',
   reducerMap: {
-    ui: reducer$3
+    ui: reducer$4
   },
-  sagas: [rootSaga$2]
+  sagas: [rootSaga$3]
 };
 
 /* *
@@ -5971,100 +6045,51 @@ var PlayButtonConnect = connectRedux$6(function (_ref) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var parseBoolean = function parseBoolean(value) {
-  return ['true', 'false', true, false].includes(value) && JSON.parse(value);
-};
-
-var isBaseLayer = function isBaseLayer(layer) {
-  return ['baseLayer'].includes(layer.layerType);
-};
-
-var isMapLayer = function isMapLayer(layer) {
-  return ['mapLayer'].includes(layer.layerType);
-};
-
-var isOverLayer = function isOverLayer(layer) {
-  return ['overLayer'].includes(layer.layerType);
-};
-
 var isValidService = function isValidService(service) {
   return Object.prototype.hasOwnProperty.call(service, 'url');
 };
 
-var parseLayerType = function parseLayerType(layer, defaultValue) {
-  if (isBaseLayer(layer)) {
-    return LayerType.baseLayer;
-  }
-
-  if (isMapLayer(layer)) {
-    return LayerType.mapLayer;
-  }
-
-  if (isOverLayer(layer)) {
-    return LayerType.overLayer;
-  }
-
-  return defaultValue;
+var parseBoolean = function parseBoolean(value) {
+  return typeof value === 'boolean' ? value : value === 'true';
 };
-
 var parseLayer = function parseLayer(layer) {
-  var lr = JSON.parse(JSON.stringify(layer)); // Cloning used here to achieve object immutability
-
-  if (!lr.id) {
-    lr.id = generateLayerId();
-  }
-
-  if (lr.layerType) {
-    lr.layerType = parseLayerType(lr, null);
-  }
-
-  if (lr.enabled) {
-    lr.enabled = parseBoolean(lr.enabled);
-  }
-
-  return lr;
+  return Object.assign(Object.assign(Object.assign({}, layer), !layer.id && {
+    id: generateLayerId()
+  }), layer.enabled && {
+    enabled: parseBoolean(layer.enabled)
+  });
 };
 
-var filterBaseLayers = function filterBaseLayers(presetArray) {
-  var hasLayers = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
-  var filteredBaseLayers = hasLayers ? presetArray.filter(function (preset) {
-    return isBaseLayer(preset);
-  }).map(function (filteredPresetLayer) {
-    return parseLayer(filteredPresetLayer);
-  }) : null;
-  var hasBaseLayers = filteredBaseLayers && filteredBaseLayers.length > 0;
-  var baseLayers = hasBaseLayers ? filteredBaseLayers : undefined;
-  return baseLayers;
-};
-var filterMapLayers = function filterMapLayers(presetArray) {
-  var hasLayers = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
-  var filteredMapLayers = hasLayers ? presetArray.filter(function (preset) {
-    return isMapLayer(preset);
-  }).map(function (filteredPresetLayer) {
-    return parseLayer(filteredPresetLayer);
-  }) : null;
-  var hasMapLayers = filteredMapLayers && filteredMapLayers.length > 0;
-  var mapLayers = hasMapLayers ? filteredMapLayers : undefined;
-  return mapLayers;
+var createEmtpyFilteredList = function createEmtpyFilteredList(existingList) {
+  return {
+    mapLayers: existingList,
+    baseLayers: existingList,
+    overLayers: existingList
+  };
 };
+
 var filterLayers = function filterLayers() {
   var layers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var layerParser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (layer) {
+    return layer;
+  };
   return layers.reduce(function (layers, layer) {
     var mapLayers = layers.mapLayers,
         baseLayers = layers.baseLayers,
         overLayers = layers.overLayers;
+    var parsedLayer = layerParser(layer);
 
     if (layer.layerType === LayerType.baseLayer) {
       return {
         mapLayers: mapLayers,
-        baseLayers: baseLayers.concat(layer),
+        baseLayers: baseLayers.concat(parsedLayer),
         overLayers: overLayers
       };
     }
 
     if (layer.layerType === LayerType.mapLayer) {
       return {
-        mapLayers: mapLayers.concat(layer),
+        mapLayers: mapLayers.concat(parsedLayer),
         baseLayers: baseLayers,
         overLayers: overLayers
       };
@@ -6074,16 +6099,12 @@ var filterLayers = function filterLayers() {
       return {
         mapLayers: mapLayers,
         baseLayers: baseLayers,
-        overLayers: overLayers.concat(layer)
+        overLayers: overLayers.concat(parsedLayer)
       };
     }
 
     return layers;
-  }, {
-    mapLayers: [],
-    baseLayers: [],
-    overLayers: []
-  });
+  }, createEmtpyFilteredList([]));
 };
 var filterServices = function filterServices(presetArray) {
   var hasServices = presetArray && Array.isArray(presetArray) && presetArray.length > 0;
@@ -6094,21 +6115,28 @@ var filterServices = function filterServices(presetArray) {
   var services = hasValidServices ? validServices : undefined;
   return services;
 };
-var filterMapPresets = function filterMapPresets(presets) {
-  var preset = presets && presets.preset;
-  var filterredServices = preset && preset.services ? filterServices(preset.services) : undefined;
-  var baseServices = preset && preset.baseServices ? filterServices(preset.baseServices) : undefined;
-  var filteredBaseLayers = preset && preset.layers ? filterBaseLayers(preset.layers) : undefined;
-  var filteredMapLayers = preset && preset.layers ? filterMapLayers(preset.layers) : undefined;
+var filterMapPresets = function filterMapPresets(initialAppPreset) {
+  var preset = initialAppPreset && initialAppPreset.preset || {};
+  var layers = preset.layers,
+      services = preset.services,
+      baseServices = preset.baseServices;
+
+  var _ref = layers ? filterLayers(layers, parseLayer) : createEmtpyFilteredList(undefined),
+      baseLayers = _ref.baseLayers,
+      mapLayers = _ref.mapLayers;
+
+  var filterredServices = services ? filterServices(services) : undefined;
+  var filteredBaseServices = baseServices ? filterServices(baseServices) : undefined;
   var filteredPreset = {
     services: filterredServices,
-    baseServices: baseServices,
-    baseLayers: filteredBaseLayers,
-    mapLayers: filteredMapLayers
+    baseServices: filteredBaseServices,
+    baseLayers: baseLayers,
+    mapLayers: mapLayers
   };
   return filteredPreset;
-};
-var getInitialPresets = function getInitialPresets(mapPreset, defaultInitialPresets) {
+}; // loads the initialPresets.json
+
+var getInitialAppPresets = function getInitialAppPresets(mapPreset, defaultInitialPresets) {
   var filteredPresets = mapPreset ? filterMapPresets(mapPreset) : null;
   var initialPresets = filteredPresets || filterMapPresets(defaultInitialPresets);
   return initialPresets;
@@ -7037,7 +7065,7 @@ CanvasComponent.defaultProps = {
 var defaultCanvasWidth = 150;
 var defaultCanvasHeight = 30; // TODO: remove fontFamily styles after theming is fully implemented
 
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$r = makeStyles(function (theme) {
   return {
     legendCanvas: {
       margin: '10px 0px 10px 0px'
@@ -7105,7 +7133,7 @@ var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, heig
 
 var Legend = function Legend(_ref) {
   var layer = _ref.layer;
-  var classes = useStyles$s();
+  var classes = useStyles$r();
   /* Variable to remember the previous image */
 
   var previousLegendImage = useRef(null);
@@ -7260,7 +7288,7 @@ var Legend = function Legend(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$r = makeStyles(function () {
+var useStyles$q = makeStyles(function () {
   return {
     legendList: {
       display: 'flex',
@@ -7288,7 +7316,7 @@ var LegendDialog = function LegendDialog(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
-  var classes = useStyles$r();
+  var classes = useStyles$q();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startPosition: {
       right: 20,
@@ -7436,8 +7464,8 @@ var LegendConnect = function LegendConnect(_a) {
   }, props));
 };
 
-var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
-    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
+var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
+    _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
     _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
     _marked4 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
     _marked5 = /*#__PURE__*/regeneratorRuntime.mark(setLayerDimensionsSaga),
@@ -7445,7 +7473,7 @@ var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
     _marked7 = /*#__PURE__*/regeneratorRuntime.mark(handleBaseLayersSaga),
     _marked8 = /*#__PURE__*/regeneratorRuntime.mark(setMapPresetSaga),
     _marked9 = /*#__PURE__*/regeneratorRuntime.mark(checkMapPresetForChangesSaga),
-    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
+    _marked10 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
 
 var generateTimeList = function generateTimeList(start, end, interval) {
   var timeList = [];
@@ -7495,7 +7523,7 @@ function startAnimationSaga(_ref) {
           return _context.stop();
       }
     }
-  }, _marked$1);
+  }, _marked$2);
 }
 function stopAnimationSaga(_ref2) {
   var payload, mapId;
@@ -7513,7 +7541,7 @@ function stopAnimationSaga(_ref2) {
           return _context2.stop();
       }
     }
-  }, _marked2$1);
+  }, _marked2$2);
 }
 function deleteLayerSaga(_ref3) {
   var payload, mapId, layers;
@@ -8121,7 +8149,7 @@ function checkMapPresetForChangesSaga(action) {
     }
   }, _marked9);
 }
-function rootSaga$1() {
+function rootSaga$2() {
   return regeneratorRuntime.wrap(function rootSaga$(_context10) {
     while (1) {
       switch (_context10.prev = _context10.next) {
@@ -8182,11 +8210,11 @@ function rootSaga$1() {
 var moduleConfig = {
   id: 'webmap-module',
   reducerMap: {
-    webmap: reducer$2,
-    services: reducer$4,
-    layers: reducer$5
+    webmap: reducer$3,
+    services: reducer$5,
+    layers: reducer$6
   },
-  sagas: [rootSaga$1]
+  sagas: [rootSaga$2]
 };
 
 /* *
@@ -8206,13 +8234,13 @@ var moduleConfig = {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
-  return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byId, preset) {
-    return Object.assign(Object.assign({}, byId), _defineProperty({}, preset.id, preset));
+  return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byUrl, preset) {
+    return Object.assign(Object.assign({}, byUrl), _defineProperty({}, preset.url, preset));
   }, {})), userAddedServices));
 };
-var isService = function isService(param) {
+var isNoIdService = function isNoIdService(param) {
   var serviceParam = param;
-  return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.id) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url), serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.isUserAddedService);
+  return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
 };
 
 var getUserAddedServices = function getUserAddedServices() {
@@ -8221,19 +8249,14 @@ var getUserAddedServices = function getUserAddedServices() {
     var parsedData = JSON.parse(storedString);
 
     if (parsedData && _typeof(parsedData) === 'object') {
-      Object.values(parsedData).forEach(function (value) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (value.hasOwnProperty('url') && value.hasOwnProperty('id')) {
-          var service = value;
-          service.isUserAddedService = true;
-        }
-      });
       return Object.entries(parsedData).reduce(function (userServices, _ref) {
         var _ref2 = _slicedToArray(_ref, 2),
             serviceUrl = _ref2[0],
             service = _ref2[1];
 
-        return Object.assign(Object.assign({}, userServices), isService(service) ? _defineProperty({}, serviceUrl, service) : {});
+        return Object.assign(Object.assign({}, userServices), isNoIdService(service) ? _defineProperty({}, serviceUrl, Object.assign(Object.assign({}, service), {
+          isUserAddedService: true
+        })) : {});
       }, {});
     }
   } catch (e) {
@@ -8250,9 +8273,9 @@ var setUserAddedServices = function setUserAddedServices(services) {
   }
 };
 
-var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
-    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
-    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
+    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
+    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
 function newServiceAddedSaga(capturedAction) {
   var addedService, id, serviceUrl, name, isUserAddedService, keywords;
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
@@ -8278,7 +8301,7 @@ function newServiceAddedSaga(capturedAction) {
           return _context.stop();
       }
     }
-  }, _marked);
+  }, _marked$1);
 }
 function layerSelectServiceRemovedSaga(capturedAction) {
   var removedService, serviceId;
@@ -8298,7 +8321,7 @@ function layerSelectServiceRemovedSaga(capturedAction) {
           return _context2.stop();
       }
     }
-  }, _marked2);
+  }, _marked2$1);
 }
 function addServiceToLocalStorageSaga(_ref) {
   var payload = _ref.payload;
@@ -8308,7 +8331,6 @@ function addServiceToLocalStorageSaga(_ref) {
   if (!isUserAddedService) return;
   var localStorageServices = getUserAddedServices();
   setUserAddedServices(Object.assign(Object.assign({}, localStorageServices), _defineProperty({}, serviceUrl, {
-    id: serviceUrl,
     name: name,
     url: serviceUrl
   })));
@@ -8322,7 +8344,7 @@ function removeServiceFromLocalStorageSaga(_ref2) {
   delete updatedServices[serviceUrl];
   setUserAddedServices(updatedServices);
 }
-function rootSaga() {
+function rootSaga$1() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
@@ -8369,7 +8391,108 @@ function rootSaga() {
 var layerSelectConfig = {
   id: 'layerSelect-module',
   reducerMap: {
-    layerSelect: reducer
+    layerSelect: reducer$1
+  },
+  sagas: [rootSaga$1]
+};
+
+var _marked = /*#__PURE__*/regeneratorRuntime.mark(openSnackbarSaga),
+    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+var hideTime = 4000;
+function openSnackbarSaga(capturedAction) {
+  var snackbarMessage, currentSnackbarMessages, id, currentSnackbarMessagesOpen;
+  return regeneratorRuntime.wrap(function openSnackbarSaga$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          snackbarMessage = capturedAction.payload.snackbarContent.message;
+          _context.next = 3;
+          return select(getCurrentSnackbarMessages);
+
+        case 3:
+          currentSnackbarMessages = _context.sent;
+
+          if (!currentSnackbarMessages.length) {
+            _context.next = 7;
+            break;
+          }
+
+          _context.next = 7;
+          return put(snackbarActions.closeSnackbar());
+
+        case 7:
+          // Generate a unique id
+          id = "snackbar".concat(Date.now().toString());
+          _context.next = 10;
+          return put(snackbarActions.triggerOpenSnackbarBySaga({
+            snackbarContent: {
+              message: snackbarMessage,
+              id: id
+            }
+          }));
+
+        case 10:
+          _context.next = 12;
+          return delay(hideTime);
+
+        case 12:
+          _context.next = 14;
+          return select(getCurrentSnackbarMessages);
+
+        case 14:
+          currentSnackbarMessagesOpen = _context.sent;
+
+          if (!currentSnackbarMessagesOpen.length) {
+            _context.next = 18;
+            break;
+          }
+
+          _context.next = 18;
+          return put(snackbarActions.closeSnackbar());
+
+        case 18:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _marked);
+}
+function rootSaga() {
+  return regeneratorRuntime.wrap(function rootSaga$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return takeLatest(snackbarActions.openSnackbar.type, openSnackbarSaga);
+
+        case 2:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _marked2);
+}
+
+/* *
+ * 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 snackbarModuleConfig = {
+  id: 'snackbar-module',
+  reducerMap: {
+    snackbar: reducer
   },
   sagas: [rootSaga]
 };
@@ -8390,7 +8513,7 @@ var layerSelectConfig = {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig, layerSelectConfig];
+var coreModuleConfig = [moduleConfig, synchronizationGroupConfig, uiModuleConfig, layerSelectConfig, snackbarModuleConfig];
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8918,7 +9041,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$q = makeStyles({
+var useStyles$p = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -8951,7 +9074,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       handleClose = _ref.handleClose,
       _ref$layerType = _ref.layerType,
       layerType = _ref$layerType === void 0 ? LayerType.mapLayer : _ref$layerType;
-  var classes = useStyles$q();
+  var classes = useStyles$p();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9335,7 +9458,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$p = makeStyles({
+var useStyles$o = makeStyles({
   row: {
     height: '32px'
   },
@@ -9359,7 +9482,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$p();
+  var classes = useStyles$o();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -9551,7 +9674,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }))));
 };
 
-var useStyles$o = makeStyles(function (theme) {
+var useStyles$n = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -9604,7 +9727,7 @@ var RenderLayers = function RenderLayers(_ref) {
 
   var _a;
 
-  var classes = useStyles$o();
+  var classes = useStyles$n();
 
   if (!layers || !layers.length) {
     return /*#__PURE__*/React.createElement("div", {
@@ -9670,7 +9793,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$n = makeStyles(function (theme) {
+var useStyles$m = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -9730,7 +9853,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$n();
+  var classes = useStyles$m();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9946,44 +10069,37 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$m = makeStyles(function (theme) {
-  return createStyles({
-    svgIcon: {
-      fill: function fill(_ref) {
-        var isActive = _ref.isActive,
-            isEnabled = _ref.isEnabled;
-
-        if (isActive) {
-          return theme.palette.common.white;
-        }
 
-        if (isEnabled) {
-          return theme.palette.geowebColors.buttons.flat["default"].color;
-        }
+var makeIconStyle = function makeIconStyle(isActive, isEnabled) {
+  return {
+    color: function color() {
+      if (isActive) {
+        return 'common.white';
+      }
 
-        return theme.palette.geowebColors.buttons.flat.disabled.color;
+      if (isEnabled) {
+        return 'geowebColors.buttons.flat.default.color';
       }
+
+      return 'geowebColors.buttons.flat.disabled.color';
     }
-  });
-});
+  };
+};
 
-var ActivateLayer = function ActivateLayer(_ref2) {
-  var _ref2$tooltipTitle = _ref2.tooltipTitle,
-      tooltipTitle = _ref2$tooltipTitle === void 0 ? 'Leading layer' : _ref2$tooltipTitle,
-      onClickActivate = _ref2.onClickActivate,
-      _ref2$isActive = _ref2.isActive,
-      isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
-      _ref2$isEnabled = _ref2.isEnabled,
-      isEnabled = _ref2$isEnabled === void 0 ? true : _ref2$isEnabled;
-  var classes = useStyles$m({
-    isActive: isActive,
-    isEnabled: isEnabled
-  });
+var ActivateLayer = function ActivateLayer(_ref) {
+  var _ref$tooltipTitle = _ref.tooltipTitle,
+      tooltipTitle = _ref$tooltipTitle === void 0 ? 'Leading layer' : _ref$tooltipTitle,
+      onClickActivate = _ref.onClickActivate,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+      _ref$isEnabled = _ref.isEnabled,
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+  var iconStyle = makeIconStyle(isActive, isEnabled);
   return /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickActivate,
     icon: /*#__PURE__*/React.createElement(Flag, {
-      className: classes.svgIcon
+      sx: iconStyle
     }),
     testId: "activateLayerButton",
     isActive: isActive
@@ -13399,15 +13515,10 @@ var MapControlButton = function MapControlButton(_a) {
   return /*#__PURE__*/React.createElement(Tooltip, {
     placement: placement,
     title: title
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: "span",
-    sx: {
-      marginBottom: '8px'
-    }
   }, /*#__PURE__*/React.createElement(ToolButton, Object.assign({
     onClick: onClick,
     active: isActive
-  }, props), children)));
+  }, props), children));
 };
 
 /* *
@@ -14226,6 +14337,8 @@ var MultiMapMultiDimensionSelectConnect = function MultiMapMultiDimensionSelectC
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
+var titleOn = 'Auto update on';
+var titleOff = 'Auto update off';
 
 var AutoUpdateButton = function AutoUpdateButton(_ref) {
   var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
@@ -14237,10 +14350,9 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return /*#__PURE__*/React.createElement(Tooltip, {
-    title: isAutoUpdating ? 'Auto update on' : 'Auto update off'
-  }, /*#__PURE__*/React.createElement("span", {
+    title: isAutoUpdating ? titleOn : titleOff,
     "data-testid": "autoUpdateButtonTooltip"
-  }, /*#__PURE__*/React.createElement(ToolButton, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
     active: isAutoUpdating,
     disabled: disabled,
     onClick: function onClick() {
@@ -14272,6 +14384,7 @@ var useStyles$c = makeStyles(function (theme) {
     }
   };
 });
+var speedTooltipTitle = 'Speed';
 
 var SpeedButton = function SpeedButton(_ref) {
   var animationDelay = _ref.animationDelay,
@@ -14332,14 +14445,14 @@ var SpeedButton = function SpeedButton(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classes.speedButtonDiv
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Speed"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+    title: speedTooltipTitle
+  }, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onClickButton,
     active: true,
     "data-testid": "speedButton"
   }, /*#__PURE__*/React.createElement(TextIcon, {
     text: text
-  })))), open ? /*#__PURE__*/React.createElement("div", {
+  }))), open ? /*#__PURE__*/React.createElement("div", {
     className: classes.sliderBackground
   }, /*#__PURE__*/React.createElement(Box, {
     sx: sliderHeaderStyle
@@ -14503,6 +14616,7 @@ var useStyles$b = makeStyles(function (theme) {
     disabled: {}
   };
 });
+var timeStepTitle = 'Time step';
 
 var TimeStepButton = function TimeStepButton(_ref) {
   var timeStep = _ref.timeStep,
@@ -14574,8 +14688,8 @@ var TimeStepButton = function TimeStepButton(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classes.timeStepDiv
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Time step"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+    title: timeStepTitle
+  }, /*#__PURE__*/React.createElement(ToolButton, {
     active: true,
     onClick: onClickButton,
     "data-testid": "timeStepButton",
@@ -14583,7 +14697,7 @@ var TimeStepButton = function TimeStepButton(_ref) {
   }, /*#__PURE__*/React.createElement(FastForward, null), /*#__PURE__*/React.createElement(TextIcon, {
     text: currentMark && currentMark.text || '',
     "data-testid": "timeStepButtonText"
-  })))), open ? /*#__PURE__*/React.createElement("div", {
+  }))), open ? /*#__PURE__*/React.createElement("div", {
     className: classes.sliderBackground
   }, /*#__PURE__*/React.createElement(Box, {
     sx: sliderHeaderStyle
@@ -14658,13 +14772,13 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
   var id = open ? 'simple-popover' : undefined;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Options"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
+  }, /*#__PURE__*/React.createElement(ToolButton, {
     onClick: onClickButton,
     "data-testid": "optionsMenuButton",
     active: open
   }, /*#__PURE__*/React.createElement(Options, {
     "data-testid": "optionsIcon"
-  })))), /*#__PURE__*/React.createElement(OptionsPopOver, {
+  }))), /*#__PURE__*/React.createElement(OptionsPopOver, {
     id: id,
     open: open,
     "data-testid": "optionsMenuPopOver",
@@ -22517,4 +22631,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterBaseLayers, filterLayers, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$5 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, useStyles$2 as useStyles };
+export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$6 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, useStyles$2 as useStyles };