@opengeoweb/core 4.18.0 → 4.19.1

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('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/material'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('@mui/system'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('react-draggable'), require('re-resizable'), require('axios'), require('@opengeoweb/api'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension'), require('react-router-dom')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/material', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@opengeoweb/form-fields', 'react-hook-form', '@mui/system', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'react-draggable', 're-resizable', 'axios', '@opengeoweb/api', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension', 'react-router-dom'], 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.shared, global.theme, global.material, global.webmap, global.reactSortablejs, global.Sortable, global.reactWindow, global.Box, global.Typography, global.Grid, global.formFields, global.reactHookForm, global.system, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.Draggable, global.reResizable, global.axios, global.api, global.reduxToolkit, global.sagaExtension, global.reactRouterDom));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, shared, theme, material, webmap, reactSortablejs, Sortable, reactWindow, Box, Typography, Grid, formFields, reactHookForm, system, throttleDebounce, cloneDeep, proj4, turf, Draggable, reResizable, axios, api, reduxToolkit, sagaExtension, reactRouterDom) { '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('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/material'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('sortablejs'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('@mui/system'), require('react-resize-detector'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('react-draggable'), require('re-resizable'), require('axios'), require('@opengeoweb/api'), require('@redux-eggs/redux-toolkit'), require('@redux-eggs/saga-extension'), require('react-router-dom')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/material', '@opengeoweb/webmap', 'react-sortablejs', 'sortablejs', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', '@opengeoweb/form-fields', 'react-hook-form', '@mui/system', 'react-resize-detector', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'react-draggable', 're-resizable', 'axios', '@opengeoweb/api', '@redux-eggs/redux-toolkit', '@redux-eggs/saga-extension', 'react-router-dom'], 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.shared, global.theme, global.material, global.webmap, global.reactSortablejs, global.Sortable, global.reactWindow, global.Box, global.Typography, global.Grid, global.formFields, global.reactHookForm, global.system, global.reactResizeDetector, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.Draggable, global.reResizable, global.axios, global.api, global.reduxToolkit, global.sagaExtension, global.reactRouterDom));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, shared, theme, material, webmap, reactSortablejs, Sortable, reactWindow, Box, Typography, Grid, formFields, reactHookForm, system, reactResizeDetector, throttleDebounce, cloneDeep, proj4, turf, Draggable, reResizable, axios, api, reduxToolkit, sagaExtension, reactRouterDom) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -354,8 +354,10 @@
         wmjsMap.getListener().suspendEvents();
 
         try {
-          wmjsMap.stopAnimating && wmjsMap.stopAnimating(); // eslint-disable-next-line no-empty
-        } catch (e) {}
+          wmjsMap.stopAnimating && wmjsMap.stopAnimating();
+        } catch (e) {
+          console.warn(e);
+        }
 
         Object.keys(registeredWMLayersForReactLayerId).forEach(function (layerId) {
           var wmLayer = getWMLayerById(layerId);
@@ -811,8 +813,8 @@
           setTargetNode = _a[1]; // Check if pointer event targets current node element
 
 
-      var pointerEventListener = React__default["default"].useCallback(function (e) {
-        setTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(e.target) : false);
+      var pointerEventListener = React__default["default"].useCallback(function (event) {
+        setTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(event.target) : false);
       }, [nodeRef]);
       React__default["default"].useEffect(function () {
         document.addEventListener(eventType, pointerEventListener);
@@ -2540,6 +2542,30 @@
             map.autoUpdateLayerId = undefined;
           }
         },
+        setAutoTimestepLayerId: function setAutoTimestepLayerId(draft, action) {
+          var _a = action.payload,
+              mapId = _a.mapId,
+              autoTimestepLayerId = _a.autoTimestepLayerId;
+          var map = draft.byId[mapId];
+
+          if (!map) {
+            return;
+          }
+
+          map.autoTimeStepLayerId = autoTimestepLayerId;
+        },
+        setAutoUpdateLayerId: function setAutoUpdateLayerId(draft, action) {
+          var _a = action.payload,
+              mapId = _a.mapId,
+              autoUpdateLayerId = _a.autoUpdateLayerId;
+          var map = draft.byId[mapId];
+
+          if (!map) {
+            return;
+          }
+
+          map.autoUpdateLayerId = autoUpdateLayerId;
+        },
         setTimeSliderCenterTime: function setTimeSliderCenterTime(draft, action) {
           var _a = action.payload,
               mapId = _a.mapId,
@@ -3318,7 +3344,7 @@
       }, []);
     }, selectorMemoizationOptions);
 
-    var selectors$3 = /*#__PURE__*/Object.freeze({
+    var selectors$4 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         getLayerById: getLayerById,
         getLayersById: getLayersById,
@@ -3486,7 +3512,7 @@
       return details && details.focused || false;
     });
 
-    var selectors$2 = /*#__PURE__*/Object.freeze({
+    var selectors$3 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         getUiStore: getUiStore,
         getDialogDetailsByType: getDialogDetailsByType,
@@ -3883,6 +3909,156 @@
         get SyncGroupActionOrigin () { return SyncGroupActionOrigin; }
     });
 
+    /* *
+     * 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 syncGroupStore = function syncGroupStore(store) {
+      return store.syncronizationGroupStore || null;
+    };
+    /**
+     * Gets synchronization group state
+     *
+     * Example: synchronizationGroupState = getSynchronizationGroupState(store)
+     * @param {object} store store: object - Store object
+     * @returns {object} returnType: SynchronizationGroupState
+     */
+
+    var getSynchronizationGroupState = toolkit.createSelector(syncGroupStore, function (store) {
+      return store || null;
+    });
+    var getSynchronizationGroup = function getSynchronizationGroup(state, id) {
+      return syncGroupStore(state).groups.byId[id];
+    };
+    var getSynchronizationGroupSource = function getSynchronizationGroupSource(state, id) {
+      return syncGroupStore(state).sources.byId[id];
+    };
+    var getTargets = function getTargets(state, payload, actionType) {
+      var actionPayloads = [];
+      var targetsInActionPayload = {};
+      var syncronizationGroupStore = syncGroupStore(state);
+      /* All the groups the source is member of */
+
+      if (syncronizationGroupStore && payload) {
+        /* Backwards compatibility, if there are no groups, connect everything */
+        if (syncronizationGroupStore.groups.allIds.length === 0) {
+          syncronizationGroupStore.sources.allIds.forEach(function (targetId) {
+            // Only add if should react to this action
+            if (syncronizationGroupStore.sources.byId[targetId].types.includes(actionType)) {
+              /* Remember that we have already added this target in the action payloads, prevents adding it twice */
+              targetsInActionPayload[targetId] = true;
+              /* Compose the payload */
+
+              var newPayload = __assign({
+                targetId: targetId
+              }, payload);
+
+              actionPayloads.push(newPayload);
+            }
+          });
+        }
+
+        syncronizationGroupStore.groups.allIds.forEach(function (id) {
+          var syncronizationGroup = syncronizationGroupStore.groups.byId[id];
+
+          if (actionType === syncronizationGroup.type) {
+            /* Check if the source is in the target list of the synchonizationGroup */
+            var source = syncronizationGroup.targets.byId[payload.sourceId];
+            /* If the source is part of the target list, and is linked, continue syncing the other targets */
+
+            if (source && source.linked) {
+              syncronizationGroup.targets.allIds.forEach(function (targetId) {
+                var target = syncronizationGroup.targets.byId[targetId];
+
+                if (target.linked && !targetsInActionPayload[targetId]) {
+                  /* Remember that we have already added this target in the action payloads, prevents adding it twice */
+                  targetsInActionPayload[targetId] = true;
+                  /* Compose the payload */
+
+                  var newPayload = __assign({
+                    targetId: targetId
+                  }, payload);
+
+                  actionPayloads.push(newPayload);
+                }
+              });
+            }
+          }
+        });
+      }
+
+      return actionPayloads;
+    };
+    var getTargetGroups = function getTargetGroups(state, payload, actionType) {
+      var syncronizationGroupStore = syncGroupStore(state);
+      var groups = syncronizationGroupStore.groups.allIds.reduce(function (list, groupId) {
+        var syncronizationGroup = syncronizationGroupStore.groups.byId[groupId];
+
+        if (actionType === syncronizationGroup.type) {
+          /* Check if the source is in the target list of the synchronizationGroup */
+          var source = syncronizationGroup.targets.byId[payload.sourceId];
+          /* If the source is part of the target list, and is linked, continue syncin the other targets */
+
+          if (source && source.linked) {
+            return list.concat(groupId);
+          }
+        }
+
+        return list;
+      }, []);
+      return groups;
+    };
+    var getAllTargetGroupsForSource = function getAllTargetGroupsForSource(state, sourceId) {
+      var syncronizationGroupStore = syncGroupStore(state);
+
+      if (syncronizationGroupStore === null || syncronizationGroupStore === void 0 ? void 0 : syncronizationGroupStore.groups) {
+        return syncronizationGroupStore.groups.allIds.reduce(function (linkedSyncGroupIds, groupId) {
+          var syncronizationGroup = syncronizationGroupStore.groups.byId[groupId];
+          var source = syncronizationGroup.targets.byId[sourceId];
+          /* If the source is part of the target list, and is linked, continue syncin the other targets */
+
+          if (source && source.linked) {
+            return linkedSyncGroupIds.concat(groupId);
+          }
+
+          return linkedSyncGroupIds;
+        }, []);
+      }
+
+      return [];
+    };
+    var syncGroupGetViewState = toolkit.createSelector(syncGroupStore, function (store) {
+      return store.viewState;
+    });
+    var getSyncedMapIdsForTimeslider = toolkit.createSelector(syncGroupStore, function (store) {
+      return store.viewState.timeslider.groups[0].selected;
+    }, selectorMemoizationOptions);
+
+    var selectors$2 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        syncGroupStore: syncGroupStore,
+        getSynchronizationGroupState: getSynchronizationGroupState,
+        getSynchronizationGroup: getSynchronizationGroup,
+        getSynchronizationGroupSource: getSynchronizationGroupSource,
+        getTargets: getTargets,
+        getTargetGroups: getTargetGroups,
+        getAllTargetGroupsForSource: getAllTargetGroupsForSource,
+        syncGroupGetViewState: syncGroupGetViewState,
+        getSyncedMapIdsForTimeslider: getSyncedMapIdsForTimeslider
+    });
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -3905,7 +4081,8 @@
         actions: actions,
         constants: constants,
         types: types$1,
-        initialState: initialState$4
+        initialState: initialState$4,
+        syncGroupsSelectors: selectors$2
     });
 
     /* *
@@ -5525,121 +5702,6 @@
     var reducer = slice.reducer;
     var appActions = 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2020 - Finnish Meteorological Institute (FMI)
-     * */
-    var syncGroupStore = function syncGroupStore(store) {
-      return store.syncronizationGroupStore || null;
-    };
-    /**
-     * Gets synchronization group state
-     *
-     * Example: synchronizationGroupState = getSynchronizationGroupState(store)
-     * @param {object} store store: object - Store object
-     * @returns {object} returnType: SynchronizationGroupState
-     */
-
-    var getSynchronizationGroupState = toolkit.createSelector(syncGroupStore, function (store) {
-      return store || null;
-    });
-    var getSynchronizationGroup = function getSynchronizationGroup(state, id) {
-      return syncGroupStore(state).groups.byId[id];
-    };
-    var getTargets = function getTargets(state, payload, actionType) {
-      var actionPayloads = [];
-      var targetsInActionPayload = {};
-      var syncronizationGroupStore = syncGroupStore(state);
-      /* All the groups the source is member of */
-
-      if (syncronizationGroupStore && payload) {
-        /* Backwards compatibility, if there are no groups, connect everything */
-        if (syncronizationGroupStore.groups.allIds.length === 0) {
-          syncronizationGroupStore.sources.allIds.forEach(function (targetId) {
-            // Only add if should react to this action
-            if (syncronizationGroupStore.sources.byId[targetId].types.includes(actionType)) {
-              /* Remember that we have already added this target in the action payloads, prevents adding it twice */
-              targetsInActionPayload[targetId] = true;
-              /* Compose the payload */
-
-              var newPayload = __assign({
-                targetId: targetId
-              }, payload);
-
-              actionPayloads.push(newPayload);
-            }
-          });
-        }
-
-        syncronizationGroupStore.groups.allIds.forEach(function (id) {
-          var syncronizationGroup = syncronizationGroupStore.groups.byId[id];
-
-          if (actionType === syncronizationGroup.type) {
-            /* Check if the source is in the target list of the synchonizationGroup */
-            var source = syncronizationGroup.targets.byId[payload.sourceId];
-            /* If the source is part of the target list, and is linked, continue syncing the other targets */
-
-            if (source && source.linked) {
-              syncronizationGroup.targets.allIds.forEach(function (targetId) {
-                var target = syncronizationGroup.targets.byId[targetId];
-
-                if (target.linked && !targetsInActionPayload[targetId]) {
-                  /* Remember that we have already added this target in the action payloads, prevents adding it twice */
-                  targetsInActionPayload[targetId] = true;
-                  /* Compose the payload */
-
-                  var newPayload = __assign({
-                    targetId: targetId
-                  }, payload);
-
-                  actionPayloads.push(newPayload);
-                }
-              });
-            }
-          }
-        });
-      }
-
-      return actionPayloads;
-    };
-    var getTargetGroups = function getTargetGroups(state, payload, actionType) {
-      var syncronizationGroupStore = syncGroupStore(state);
-      var groups = syncronizationGroupStore.groups.allIds.reduce(function (list, groupId) {
-        var syncronizationGroup = syncronizationGroupStore.groups.byId[groupId];
-
-        if (actionType === syncronizationGroup.type) {
-          /* Check if the source is in the target list of the synchronizationGroup */
-          var source = syncronizationGroup.targets.byId[payload.sourceId];
-          /* If the source is part of the target list, and it linked, continue syncin the other targets */
-
-          if (source && source.linked) {
-            return list.concat(groupId);
-          }
-        }
-
-        return list;
-      }, []);
-      return groups;
-    };
-    var syncGroupGetViewState = toolkit.createSelector(syncGroupStore, function (store) {
-      return store.viewState;
-    });
-    var getSyncedMapIdsForTimeslider = toolkit.createSelector(syncGroupStore, function (store) {
-      return store.viewState.timeslider.groups[0].selected;
-    }, selectorMemoizationOptions);
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -8041,8 +8103,7 @@
             _this.canvas = canvas;
           }
         }))));
-      }; // eslint-disable-next-line react/static-property-placement
-
+      };
 
       CanvasComponent.defaultProps = {
         onRenderCanvas: function onRenderCanvas() {
@@ -10336,10 +10397,6 @@
      * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var iconStyle = {
-      height: 24,
-      width: 24
-    };
     var sizeSmall = {
       width: 100,
       height: 300
@@ -10376,43 +10433,31 @@
           document.removeEventListener('keydown', handleKeyDown);
         };
       }, [onChangeSize, shortcutsEnabled]);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "small"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: "small",
         "data-testid": "collapseSmall-btn",
-        size: "small",
         onClick: function onClick() {
           return onChangeSize(sizeSmall);
         },
-        sx: iconStyle,
         className: "collapseSmall-btn"
-      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseSmall, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "medium"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseSmall, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: "medium",
         "data-testid": "collapseMedium-btn",
-        size: "small",
         onClick: function onClick() {
           return onChangeSize(sizeMedium);
         },
-        sx: iconStyle,
         className: "collapseMedium-btn"
-      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseMedium, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "large"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseMedium, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: "large",
         "data-testid": "collapseLarge-btn",
-        size: "small",
         onClick: function onClick() {
           return onChangeSize(sizeLarge);
         },
-        sx: iconStyle,
         className: "collapseLarge-btn"
-      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseLarge, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: isDockedLayerManager ? 'Undock' : 'Dock'
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.CollapseLarge, null)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: isDockedLayerManager ? 'Undock' : 'Dock',
         "data-testid": "dockedBtn",
         disableRipple: true,
-        size: "small",
-        sx: iconStyle,
         onClick: function onClick() {
           return onClickDockButton();
         }
@@ -10420,7 +10465,7 @@
         "data-testid": "dockedLayerManager-collapse"
       }) : /*#__PURE__*/React__namespace.createElement(theme.ExpandWindow, {
         "data-testid": "dockedLayerManager-uncollapse"
-      }))));
+      })));
     };
 
     /* *
@@ -10627,20 +10672,24 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var style$2 = {
-      width: '24px',
-      height: '24px',
-      margin: 'auto 0px auto 32px',
-      borderRadius: '15%'
+      padding: 0,
+      margin: 'auto 0px auto 32px'
     };
 
     var LayerSelectButtonConnect = function LayerSelectButtonConnect(_a) {
       var mapId = _a.mapId,
           _b = _a.source,
-          source = _b === void 0 ? 'app' : _b;
+          source = _b === void 0 ? 'app' : _b,
+          _c = _a.tooltipTitle,
+          tooltipTitle = _c === void 0 ? 'Open the layer selector' : _c,
+          _d = _a.icon,
+          icon = _d === void 0 ? /*#__PURE__*/React__namespace.createElement(theme.Add, {
+        "data-testid": "layerSelectButtonConnectIcon"
+      }) : _d;
       var dispatch = reactRedux.useDispatch();
       var currentActiveMapId = reactRedux.useSelector(function (store) {
         return getDialogMapId(store, DialogTypes.LayerSelect);
@@ -10656,16 +10705,13 @@
           source: source
         }));
       }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "Open the layer selector"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         onClick: openLayerSelectDialog,
         sx: style$2,
         id: "layerSelectButton",
         "data-testid": "layerSelectButton",
-        disableRipple: true,
-        size: "large"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Add, null)));
+        tooltipTitle: tooltipTitle
+      }, icon);
     };
 
     /* *
@@ -10694,17 +10740,20 @@
     };
 
     var DescriptionRow = function DescriptionRow(_a) {
+      var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+
       var mapId = _a.mapId,
           mapPresetsModule = _a.mapPresetsModule,
-          _b = _a.source,
-          source = _b === void 0 ? 'app' : _b;
+          _m = _a.source,
+          source = _m === void 0 ? 'app' : _m,
+          settings = _a.settings;
 
-      var _c = __read(React__namespace.useState(mapPresetsModule ? __assign(__assign({}, mapPresetsModule), {
+      var _o = __read(React__namespace.useState(mapPresetsModule ? __assign(__assign({}, mapPresetsModule), {
         props: __assign(__assign({}, mapPresetsModule.props), {
           id: 'mappresets-menubuttonInline'
         })
       }) : undefined), 1),
-          mapPresetsModuleInline = _c[0];
+          mapPresetsModuleInline = _o[0];
 
       var hasMapPresetsModule = mapPresetsModule !== undefined;
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -10721,13 +10770,15 @@
         className: columnClasses.column1
       }, /*#__PURE__*/React__namespace.createElement(LayerSelectButtonConnect, {
         mapId: mapId,
-        source: source
+        source: source,
+        tooltipTitle: (_b = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _b === void 0 ? void 0 : _b.tooltipTitle,
+        icon: (_c = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _c === void 0 ? void 0 : _c.icon
       })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column2
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         className: "header-layer " + (hasMapPresetsModule ? 'mappresetsModule-enabled' : ''),
         sx: styles$4.text
-      }, "Layer"), /*#__PURE__*/React__namespace.createElement(material.Box, {
+      }, (_e = (_d = settings === null || settings === void 0 ? void 0 : settings.layerName) === null || _d === void 0 ? void 0 : _d.title) !== null && _e !== void 0 ? _e : 'Layer'), /*#__PURE__*/React__namespace.createElement(material.Box, {
         className: "header-mapPresets",
         sx: {
           marginRight: 4
@@ -10736,15 +10787,15 @@
         className: columnClasses.column3
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: styles$4.text
-      }, "Style")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _f === void 0 ? void 0 : _f.title) !== null && _g !== void 0 ? _g : 'Style')), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column4
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: styles$4.text
-      }, "Opacity")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, (_j = (_h = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : 'Opacity')), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column5
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: styles$4.text
-      }, "Dimensions")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      }, (_l = (_k = settings === null || settings === void 0 ? void 0 : settings.dimensions) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : 'Dimensions')), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         className: columnClasses.column6
       }));
     };
@@ -10983,7 +11034,9 @@
           _c = _a.layers,
           layers = _c === void 0 ? [] : _c,
           _d = _a.isEnabled,
-          isEnabled = _d === void 0 ? true : _d;
+          isEnabled = _d === void 0 ? true : _d,
+          _e = _a.tooltipPrefix,
+          tooltipPrefix = _e === void 0 ? 'Layer: ' : _e;
 
       if (!layers || !layers.length) {
         return /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -11010,10 +11063,10 @@
         onChangeLayerName(event.target.value);
       };
 
-      var _e = getRenderLayersValues(layerName, layers),
-          currentIndex = _e.currentIndex,
-          currentValue = _e.currentValue,
-          extendedLayers = _e.extendedLayers;
+      var _f = getRenderLayersValues(layerName, layers),
+          currentIndex = _f.currentIndex,
+          currentValue = _f.currentValue,
+          extendedLayers = _f.extendedLayers;
 
       var list = extendedLayers.map(function (layer) {
         return {
@@ -11022,7 +11075,7 @@
       });
       return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
         disableUnderline: true,
-        tooltip: "Layer: " + ((_b = extendedLayers[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
+        tooltip: "" + tooltipPrefix + ((_b = extendedLayers[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
         inputProps: {
           SelectDisplayProps: {
             'data-testid': 'selectLayer'
@@ -11107,15 +11160,17 @@
       var currentOpacity = _a.currentOpacity,
           onLayerChangeOpacity = _a.onLayerChangeOpacity,
           _b = _a.isEnabled,
-          isEnabled = _b === void 0 ? true : _b;
+          isEnabled = _b === void 0 ? true : _b,
+          _c = _a.tooltipPrefix,
+          tooltipPrefix = _c === void 0 ? 'Opacity: ' : _c;
 
-      var _c = __read(shared.useControlledTooltip(), 2),
-          tooltipOpen = _c[0],
-          setTooltipOpen = _c[1];
+      var _d = __read(shared.useControlledTooltip(), 2),
+          tooltipOpen = _d[0],
+          setTooltipOpen = _d[1];
 
-      var _d = __read(React__namespace.useState(null), 2),
-          anchorEl = _d[0],
-          setAnchorEl = _d[1];
+      var _e = __read(React__namespace.useState(null), 2),
+          anchorEl = _e[0],
+          setAnchorEl = _e[1];
 
       var isOpen = Boolean(anchorEl);
 
@@ -11170,7 +11225,7 @@
           height: 32
         }
       }, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "Opacity: " + currentOpacityText,
+        title: "" + tooltipPrefix + currentOpacityText,
         sx: shared.tooltipContainerStyles(isEnabled),
         placement: "top",
         open: tooltipOpen
@@ -11253,7 +11308,10 @@
     var LayerManagerMenuButton = function LayerManagerMenuButton(_a) {
       var mapId = _a.mapId,
           layerId = _a.layerId,
-          onLayerDuplicate = _a.onLayerDuplicate;
+          onLayerDuplicate = _a.onLayerDuplicate,
+          _b = _a.tooltipTitle,
+          tooltipTitle = _b === void 0 ? 'Options' : _b,
+          icon = _a.icon;
 
       var onClickDuplicate = function onClickDuplicate() {
         onLayerDuplicate({
@@ -11277,7 +11335,8 @@
           action: onClickDuplicate,
           icon: /*#__PURE__*/React__namespace.createElement(theme.Copy, null)
         }],
-        tooltipTitle: "Options"
+        tooltipTitle: tooltipTitle,
+        buttonIcon: icon
       });
     };
 
@@ -11288,7 +11347,10 @@
           currentLayerStyle = _a.currentLayerStyle,
           onChangeLayerStyle = _a.onChangeLayerStyle,
           _c = _a.isEnabled,
-          isEnabled = _c === void 0 ? true : _c;
+          isEnabled = _c === void 0 ? true : _c,
+          icon = _a.icon,
+          _d = _a.tooltipPrefix,
+          tooltipPrefix = _d === void 0 ? 'Style: ' : _d;
       var styles = [{
         title: 'default',
         name: 'default',
@@ -11316,7 +11378,7 @@
         return currentStyle === style.name;
       });
       return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
-        tooltip: "Style: " + ((_b = styles[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
+        tooltip: "" + tooltipPrefix + ((_b = styles[currentIndex]) === null || _b === void 0 ? void 0 : _b.title),
         inputProps: {
           SelectDisplayProps: {
             'data-testid': 'selectStyle'
@@ -11330,7 +11392,8 @@
         onChangeMouseWheel: function onChangeMouseWheel(e) {
           return onChangeLayerStyle(e.value);
         },
-        requiresCtrlToChange: true
+        requiresCtrlToChange: true,
+        IconComponent: icon
       }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         disabled: true
       }, "Style"), styles.map(function (styleFromlayer) {
@@ -11370,13 +11433,22 @@
       return 'geowebColors.buttons.flat.disabled.color';
     };
 
+    var AutoOptions;
+
+    (function (AutoOptions) {
+      AutoOptions["BOTH"] = "Auto both";
+      AutoOptions["NONE"] = "Auto none";
+      AutoOptions["TIMESTEP"] = "Auto-timestep";
+      AutoOptions["UPDATE"] = "Auto-update";
+    })(AutoOptions || (AutoOptions = {}));
+
     var ActivateLayer = function ActivateLayer(_a) {
       var _onChange = _a.onChange,
-          isActive = _a.isActive,
-          isEnabled = _a.isEnabled;
+          isEnabled = _a.isEnabled,
+          current = _a.current;
       return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
         variant: "standard",
-        tooltip: "Auto update",
+        tooltip: "Leading layer",
         // Don't show arrow https://stackoverflow.com/questions/69085735/how-to-remove-arrow-from-react-textfield-select
         inputProps: {
           IconComponent: function IconComponent() {
@@ -11384,7 +11456,7 @@
           },
           tabIndex: -1
         },
-        value: isActive ? 'Both' : 'None',
+        value: current,
         sx: {
           '&& .MuiInput-input': {
             paddingRight: '2px',
@@ -11392,30 +11464,39 @@
             backgroundColor: 'inherit'
           }
         },
-        renderValue: function renderValue(optionSelected) {
+        renderValue: function renderValue(current) {
           return /*#__PURE__*/React__namespace.createElement(AutoUpdateButton$1, {
-            optionSelected: optionSelected,
-            isActive: isActive,
+            current: current,
             isEnabled: isEnabled
           });
         },
         onChange: function onChange(event) {
           event.stopPropagation();
 
-          _onChange(event.target.value === 'Both');
+          _onChange(event.target.value);
         },
         onClose: function onClose(event) {
           event.stopPropagation();
         }
       }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         disabled: true
-      }, "Auto-update"), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-        value: "None"
+      }, "Leading layer"), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        value: AutoOptions.NONE
       }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
         icon: /*#__PURE__*/React__namespace.createElement(theme.None, null),
         text: "None"
       })), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-        value: "Both"
+        value: AutoOptions.TIMESTEP
+      }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
+        icon: /*#__PURE__*/React__namespace.createElement(theme.FastForward, null),
+        text: "Auto-timestep"
+      })), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        value: AutoOptions.UPDATE
+      }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
+        icon: /*#__PURE__*/React__namespace.createElement(theme.AutoUpdateActive, null),
+        text: "Auto-update"
+      })), /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        value: AutoOptions.BOTH
       }, /*#__PURE__*/React__namespace.createElement(AutoOption, {
         icon: /*#__PURE__*/React__namespace.createElement(theme.Both, null),
         text: "Both"
@@ -11423,20 +11504,13 @@
     };
 
     var AutoUpdateButton$1 = function AutoUpdateButton(_a) {
-      var optionSelected = _a.optionSelected,
-          isActive = _a.isActive,
+      var current = _a.current,
           isEnabled = _a.isEnabled;
-      var style = {
-        color: getIconColor(isActive, isEnabled)
-      };
-      var Icon = isActive ? /*#__PURE__*/React__namespace.createElement(theme.Both, {
-        sx: style
-      }) : /*#__PURE__*/React__namespace.createElement(theme.None, {
-        sx: style
-      });
+      var isActive = current !== AutoOptions.NONE;
+      var Icon = getIcon(isActive, isEnabled, current);
       return /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        "aria-label": current,
         "data-testid": "activateLayer-btn",
-        "aria-label": "Auto update " + optionSelected,
         sx: {
           '&.MuiButtonBase-root': {
             backgroundColor: 'inherit'
@@ -11461,6 +11535,34 @@
       }, text), /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, icon));
     };
 
+    function getIcon(isActive, isEnabled, current) {
+      var style = {
+        color: getIconColor(isActive, isEnabled)
+      };
+
+      if (current === AutoOptions.BOTH) {
+        return /*#__PURE__*/React__namespace.createElement(theme.Both, {
+          sx: style
+        });
+      }
+
+      if (current === AutoOptions.TIMESTEP) {
+        return /*#__PURE__*/React__namespace.createElement(theme.FastForward, {
+          sx: style
+        });
+      }
+
+      if (current === AutoOptions.UPDATE) {
+        return /*#__PURE__*/React__namespace.createElement(theme.AutoUpdateActive, {
+          sx: style
+        });
+      }
+
+      return /*#__PURE__*/React__namespace.createElement(theme.None, {
+        sx: style
+      });
+    }
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -11474,8 +11576,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var LayerRow = function LayerRow(_a) {
@@ -11529,9 +11631,9 @@
           },
           '&.sortable-ghost': {
             opacity: 0.5
-          },
-          alignItems: 'center'
-        }
+          }
+        },
+        alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(shared.CustomAccordion, {
         className: "medium-layermanager",
         defaultExpanded: false,
@@ -11546,8 +11648,8 @@
             padding: 0
           }
         },
-        title: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
-          isEnabled: layer.enabled,
+        title: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+          shouldShowAsDisabled: !layer.enabled,
           tooltipTitle: layer.name,
           onClick: function onClick(event) {
             event.stopPropagation();
@@ -11556,11 +11658,10 @@
               enabled: !layer.enabled
             });
           },
-          "data-testid": "enableButton-medium",
-          icon: isEnabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)
-        }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
+          "data-testid": "enableButton-medium"
+        }, isEnabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
+          current: AutoOptions.BOTH,
           onChange: onClickRow,
-          isActive: false,
           isEnabled: true
         }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           sx: {
@@ -11619,7 +11720,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         sx: {}
-      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
+      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
         tooltipTitle: "Delete",
         onClick: function onClick() {
           onLayerDelete({
@@ -11627,13 +11728,13 @@
             layerId: layerId
           });
         },
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
         "data-testid": "deleteButton"
-      }))))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Delete, null)))))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: columnClasses.column1
-      }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
-        isEnabled: layer.enabled,
+        className: columnClasses.column1,
+        alignItems: "center"
+      }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+        shouldShowAsDisabled: !layer.enabled,
         tooltipTitle: layer.name,
         onClick: function onClick(event) {
           event.stopPropagation();
@@ -11642,11 +11743,10 @@
             enabled: !layer.enabled
           });
         },
-        icon: layer.enabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null),
         "data-testid": "enableButton"
-      }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
+      }, layer.enabled ? /*#__PURE__*/React__default["default"].createElement(theme.Visibility, null) : /*#__PURE__*/React__default["default"].createElement(theme.VisibilityOff, null)), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
         onChange: onClickRow,
-        isActive: false,
+        current: AutoOptions.BOTH,
         isEnabled: true
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -11709,8 +11809,9 @@
         }
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: columnClasses.column6
-      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
+        className: columnClasses.column6,
+        alignItems: "center"
+      }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
         tooltipTitle: "Delete",
         onClick: function onClick() {
           onLayerDelete({
@@ -11718,9 +11819,8 @@
             layerId: layerId
           });
         },
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
         "data-testid": "deleteButton"
-      }), layerMenuLayout || /*#__PURE__*/React__default["default"].createElement(LayerManagerMenuButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Delete, null)), layerMenuLayout || /*#__PURE__*/React__default["default"].createElement(LayerManagerMenuButton, {
         mapId: mapId,
         layerId: layerId,
         onLayerDuplicate: onLayerDuplicate
@@ -11740,14 +11840,18 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var DeleteLayerConnect = function DeleteLayerConnect(_a) {
       var layerId = _a.layerId,
           mapId = _a.mapId,
-          layerIndex = _a.layerIndex;
+          layerIndex = _a.layerIndex,
+          _b = _a.tooltipTitle,
+          tooltipTitle = _b === void 0 ? 'Delete' : _b,
+          _c = _a.icon,
+          icon = _c === void 0 ? /*#__PURE__*/React__namespace.createElement(theme.Delete, null) : _c;
       var dispatch = reactRedux.useDispatch();
       var layerDelete = React__namespace.useCallback(function (_a) {
         var mapId = _a.mapId,
@@ -11763,8 +11867,8 @@
       var isLayerEnabled = reactRedux.useSelector(function (store) {
         return getLayerEnabled(store, layerId);
       });
-      return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
-        tooltipTitle: "Delete",
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: tooltipTitle,
         onClick: function onClick() {
           layerDelete({
             mapId: mapId,
@@ -11772,10 +11876,9 @@
             layerIndex: layerIndex
           });
         },
-        isEnabled: isLayerEnabled,
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
+        shouldShowAsDisabled: !isLayerEnabled,
         "data-testid": "deleteButton"
-      });
+      }, icon);
     };
 
     /* *
@@ -11791,8 +11894,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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var EnableLayerConnect = function EnableLayerConnect(_a) {
@@ -11801,7 +11904,10 @@
           _b = _a.isEnabled,
           isEnabled = _b === void 0 ? false : _b,
           _c = _a.layerName,
-          layerName = _c === void 0 ? '' : _c;
+          layerName = _c === void 0 ? '' : _c,
+          _d = _a.icon,
+          icon = _d === void 0 ? isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null) : _d,
+          tooltipTitle = _a.tooltipTitle;
       var dispatch = reactRedux.useDispatch();
       var layerChangeEnabled = React__namespace.useCallback(function (_a) {
         var layerId = _a.layerId,
@@ -11813,9 +11919,11 @@
           origin: LayerActionOrigin.layerManager
         }));
       }, [dispatch, mapId]);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
-        isEnabled: isEnabled,
-        tooltipTitle: "Toggle visibility",
+      var normalTooltip = tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : 'Toggle visibility';
+      var miniTooltip = tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : layerName;
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        shouldShowAsDisabled: !isEnabled,
+        tooltipTitle: normalTooltip,
         onClick: function onClick(event) {
           event.stopPropagation();
           layerChangeEnabled({
@@ -11824,11 +11932,13 @@
           });
         },
         className: "enable-btn",
-        icon: isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null),
-        "data-testid": "enableButton"
-      }), /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
-        isEnabled: isEnabled,
-        tooltipTitle: layerName,
+        "data-testid": "enableButton",
+        sx: {
+          margin: 'auto 0px'
+        }
+      }, icon), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        shouldShowAsDisabled: !isEnabled,
+        tooltipTitle: miniTooltip,
         onClick: function onClick(event) {
           event.stopPropagation();
           layerChangeEnabled({
@@ -11837,9 +11947,11 @@
           });
         },
         className: "enable-btn-mini",
-        icon: isEnabled ? /*#__PURE__*/React__namespace.createElement(theme.Visibility, null) : /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null),
-        "data-testid": "enableButton"
-      }));
+        "data-testid": "enableButton",
+        sx: {
+          margin: 'auto 0px'
+        }
+      }, icon));
     };
 
     /* *
@@ -11861,7 +11973,8 @@
 
     var OpacitySelectConnect = function OpacitySelectConnect(_a) {
       var layerId = _a.layerId,
-          mapId = _a.mapId;
+          mapId = _a.mapId,
+          tooltipPrefix = _a.tooltipPrefix;
       var dispatch = reactRedux.useDispatch();
       var opacity = reactRedux.useSelector(function (store) {
         return getLayerOpacity(store, layerId);
@@ -11879,7 +11992,8 @@
             origin: LayerActionOrigin.layerManager
           }));
         },
-        isEnabled: isLayerEnabled
+        isEnabled: isLayerEnabled,
+        tooltipPrefix: tooltipPrefix
       });
     };
 
@@ -11956,7 +12070,9 @@
 
     var RenderStylesConnect = function RenderStylesConnect(_a) {
       var layerId = _a.layerId,
-          mapId = _a.mapId;
+          mapId = _a.mapId,
+          icon = _a.icon,
+          tooltipPrefix = _a.tooltipPrefix;
       var dispatch = reactRedux.useDispatch();
       var layerService = reactRedux.useSelector(function (store) {
         return getLayerService(store, layerId);
@@ -11985,7 +12101,9 @@
         layerStyles: layerStyles,
         currentLayerStyle: currentLayerStyle,
         onChangeLayerStyle: layerChangeStyle,
-        isEnabled: isLayerEnabled
+        isEnabled: isLayerEnabled,
+        icon: icon,
+        tooltipPrefix: tooltipPrefix
       });
     };
 
@@ -12008,7 +12126,8 @@
 
     var RenderLayersConnect = function RenderLayersConnect(_a) {
       var layerId = _a.layerId,
-          mapId = _a.mapId;
+          mapId = _a.mapId,
+          tooltipPrefix = _a.tooltipPrefix;
       var dispatch = reactRedux.useDispatch();
       var layerName = reactRedux.useSelector(function (store) {
         return getLayerName(store, layerId);
@@ -12095,7 +12214,8 @@
             name: name
           });
         },
-        isEnabled: isLayerEnabled
+        isEnabled: isLayerEnabled,
+        tooltipPrefix: tooltipPrefix
       });
     };
 
@@ -12118,7 +12238,9 @@
 
     var LayerManagerMenuButtonConnect = function LayerManagerMenuButtonConnect(_a) {
       var layerId = _a.layerId,
-          mapId = _a.mapId;
+          mapId = _a.mapId,
+          tooltipTitle = _a.tooltipTitle,
+          icon = _a.icon;
       var dispatch = reactRedux.useDispatch();
       var layer = reactRedux.useSelector(function (store) {
         return getLayerById(store, layerId);
@@ -12143,7 +12265,9 @@
             mapId: mapId,
             layer: layer
           });
-        }
+        },
+        tooltipTitle: tooltipTitle,
+        icon: icon
       });
     };
 
@@ -12168,49 +12292,127 @@
       var layerId = _a.layerId,
           mapId = _a.mapId;
       var dispatch = reactRedux.useDispatch();
-      var activeLayerId = reactRedux.useSelector(function (store) {
-        return getActiveLayerId(store, mapId);
+      var autoUpdateLayerId = reactRedux.useSelector(function (store) {
+        return getAutoUpdateLayerId(store, mapId);
+      });
+      var autoTimestepLayerId = reactRedux.useSelector(function (store) {
+        return getAutoTimeStepLayerId(store, mapId);
       });
       var isLayerEnabled = reactRedux.useSelector(function (store) {
         return getLayerEnabled(store, layerId);
       });
-      var setActiveLayerId = React__namespace.useCallback(function (_a) {
-        var layerId = _a.layerId,
-            mapId = _a.mapId;
-        return dispatch(mapActions$1.setAutoLayerId({
+      var isAutoUpdating$1 = reactRedux.useSelector(function (store) {
+        return isAutoUpdating(store, mapId);
+      });
+
+      var goToLastAvailableTimeForLayerIfAutoUpdateIsOn = function goToLastAvailableTimeForLayerIfAutoUpdateIsOn() {
+        if (isAutoUpdating$1) {
+          dispatch(mapActions$1.toggleAutoUpdate({
+            mapId: mapId,
+            shouldAutoUpdate: true
+          }));
+        }
+      };
+
+      var thisLayerHasAutoUpdate = layerId === autoUpdateLayerId;
+      var thisLayerHasAutoTimestep = layerId === autoTimestepLayerId;
+      var thisLayerHasBoth = thisLayerHasAutoTimestep && thisLayerHasAutoUpdate;
+
+      function handleNoneClick() {
+        if (thisLayerHasBoth) {
+          dispatch(mapActions$1.setAutoLayerId({
+            autoTimeStepLayerId: undefined,
+            autoUpdateLayerId: undefined,
+            mapId: mapId,
+            origin: LayerActionOrigin.layerManager
+          }));
+        } else if (thisLayerHasAutoTimestep) {
+          dispatch(mapActions$1.setAutoTimestepLayerId({
+            mapId: mapId,
+            autoTimestepLayerId: undefined
+          }));
+        } else if (thisLayerHasAutoUpdate) {
+          dispatch(mapActions$1.setAutoUpdateLayerId({
+            mapId: mapId,
+            autoUpdateLayerId: undefined
+          }));
+        }
+      }
+
+      function handleBothClick() {
+        dispatch(mapActions$1.setAutoLayerId({
           autoTimeStepLayerId: layerId,
           autoUpdateLayerId: layerId,
           mapId: mapId,
           origin: LayerActionOrigin.layerManager
         }));
-      }, [dispatch]);
-      var isAutoUpdating$1 = reactRedux.useSelector(function (store) {
-        return isAutoUpdating(store, mapId);
-      });
-      var setAutoUpdateOn = React__namespace.useCallback(function (mapId) {
-        return dispatch(mapActions$1.toggleAutoUpdate({
+        goToLastAvailableTimeForLayerIfAutoUpdateIsOn();
+      }
+
+      function handleAutoUpdateClick() {
+        dispatch(mapActions$1.setAutoUpdateLayerId({
           mapId: mapId,
-          shouldAutoUpdate: true
+          autoUpdateLayerId: layerId
         }));
-      }, [dispatch]);
-      var isActive = activeLayerId === layerId;
-      return /*#__PURE__*/React__namespace.createElement(ActivateLayer, {
-        onChange: function onChange(isActive) {
-          setActiveLayerId({
+
+        if (thisLayerHasAutoTimestep) {
+          dispatch(mapActions$1.setAutoTimestepLayerId({
             mapId: mapId,
-            layerId: isActive ? layerId : undefined
-          });
+            autoTimestepLayerId: undefined
+          }));
+        }
+
+        goToLastAvailableTimeForLayerIfAutoUpdateIsOn();
+      }
+
+      function handleAutoTimestepClick() {
+        dispatch(mapActions$1.setAutoTimestepLayerId({
+          mapId: mapId,
+          autoTimestepLayerId: layerId
+        }));
+
+        if (thisLayerHasAutoUpdate) {
+          dispatch(mapActions$1.setAutoUpdateLayerId({
+            mapId: mapId,
+            autoUpdateLayerId: undefined
+          }));
+        }
+      }
 
-          if (isAutoUpdating$1) {
-            // Layer is now set active *and* autoupdate is currently on => autoupdate is desired to be set on.
-            setAutoUpdateOn(mapId);
+      var current = getCurrentOptionForLayer(thisLayerHasBoth, thisLayerHasAutoTimestep, thisLayerHasAutoUpdate);
+      return /*#__PURE__*/React__namespace.createElement(ActivateLayer, {
+        current: current,
+        onChange: function onChange(autoOption) {
+          if (autoOption === AutoOptions.BOTH) {
+            handleBothClick();
+          } else if (autoOption === AutoOptions.NONE) {
+            handleNoneClick();
+          } else if (autoOption === AutoOptions.TIMESTEP) {
+            handleAutoTimestepClick();
+          } else if (autoOption === AutoOptions.UPDATE) {
+            handleAutoUpdateClick();
           }
         },
-        isActive: isActive,
         isEnabled: isLayerEnabled
       });
     };
 
+    function getCurrentOptionForLayer(thisLayerHasBoth, thisLayerHasAutoTimestep, thisLayerHasAutoUpdate) {
+      if (thisLayerHasBoth) {
+        return AutoOptions.BOTH;
+      }
+
+      if (thisLayerHasAutoTimestep) {
+        return AutoOptions.TIMESTEP;
+      }
+
+      if (thisLayerHasAutoUpdate) {
+        return AutoOptions.UPDATE;
+      }
+
+      return AutoOptions.NONE;
+    }
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -12229,12 +12431,13 @@
      * */
 
     var LayerRowConnect = function LayerRowConnect(_a) {
-      var _b;
+      var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
 
       var layerId = _a.layerId,
           mapId = _a.mapId,
           dragHandle = _a.dragHandle,
-          layerIndex = _a.layerIndex;
+          layerIndex = _a.layerIndex,
+          settings = _a.settings;
       var isEnabled = reactRedux.useSelector(function (store) {
         return getLayerEnabled(store, layerId);
       });
@@ -12263,15 +12466,19 @@
           layerId: layerId,
           mapId: mapId,
           isEnabled: isEnabled,
-          layerName: fullLayerName || layerName
+          layerName: fullLayerName || layerName,
+          icon: isEnabled ? (_c = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _c === void 0 ? void 0 : _c.enabledIcon : (_d = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _d === void 0 ? void 0 : _d.disabledIcon,
+          tooltipTitle: isEnabled ? (_e = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _e === void 0 ? void 0 : _e.enabledTooltipTitle : (_f = settings === null || settings === void 0 ? void 0 : settings.enableLayer) === null || _f === void 0 ? void 0 : _f.disabledTooltipTitle
         }),
         layerOpacityLayout: /*#__PURE__*/React__namespace.createElement(OpacitySelectConnect, {
           layerId: layerId,
-          mapId: mapId
+          mapId: mapId,
+          tooltipPrefix: (_g = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _g === void 0 ? void 0 : _g.tooltipPrefix
         }),
         layerServicesLayout: /*#__PURE__*/React__namespace.createElement(RenderLayersConnect, {
           layerId: layerId,
-          mapId: mapId
+          mapId: mapId,
+          tooltipPrefix: (_h = settings === null || settings === void 0 ? void 0 : settings.renderLayer) === null || _h === void 0 ? void 0 : _h.tooltipPrefix
         }),
         layerDimensionLayout: /*#__PURE__*/React__namespace.createElement(DimensionSelectConnect, {
           layerId: layerId,
@@ -12279,16 +12486,22 @@
         }),
         layerStylesLayout: /*#__PURE__*/React__namespace.createElement(RenderStylesConnect, {
           layerId: layerId,
-          mapId: mapId
+          mapId: mapId,
+          tooltipPrefix: (_j = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _j === void 0 ? void 0 : _j.tooltipPrefix,
+          icon: (_k = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _k === void 0 ? void 0 : _k.icon
         }),
         layerDeleteLayout: /*#__PURE__*/React__namespace.createElement(DeleteLayerConnect, {
           mapId: mapId,
           layerId: layerId,
-          layerIndex: layerIndex
+          layerIndex: layerIndex,
+          tooltipTitle: (_l = settings === null || settings === void 0 ? void 0 : settings.deleteLayer) === null || _l === void 0 ? void 0 : _l.tooltipTitle,
+          icon: (_m = settings === null || settings === void 0 ? void 0 : settings.deleteLayer) === null || _m === void 0 ? void 0 : _m.icon
         }),
         layerMenuLayout: /*#__PURE__*/React__namespace.createElement(LayerManagerMenuButtonConnect, {
           mapId: mapId,
-          layerId: layerId
+          layerId: layerId,
+          tooltipTitle: (_o = settings === null || settings === void 0 ? void 0 : settings.menu) === null || _o === void 0 ? void 0 : _o.tooltipTitle,
+          icon: (_p = settings === null || settings === void 0 ? void 0 : settings.menu) === null || _p === void 0 ? void 0 : _p.icon
         }),
         layerActiveLayout: /*#__PURE__*/React__namespace.createElement(ActivateLayerConnect, {
           mapId: mapId,
@@ -12311,8 +12524,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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var TOOLTIP_TITLE = 'Drag';
 
@@ -12322,20 +12535,23 @@
           _c = _a.index,
           index = _c === void 0 ? undefined : _c,
           _d = _a.hideTooltip,
-          hideTooltip = _d === void 0 ? false : _d,
+          hideTooltip = _d === void 0 ? true : _d,
           _e = _a.isSorting,
-          isSorting = _e === void 0 ? false : _e;
-      var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
-      return /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
-        tooltipTitle: tooltipTitle,
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null),
+          isSorting = _e === void 0 ? false : _e,
+          _f = _a.icon,
+          icon = _f === void 0 ? /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, {
+        "data-testid": "dragHandleIcon"
+      }) : _f,
+          _g = _a.tooltipTitle,
+          tooltipTitle = _g === void 0 ? TOOLTIP_TITLE : _g;
+      var usedTooltipTitle = hideTooltip ? '' : tooltipTitle;
+      return /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+        tooltipTitle: usedTooltipTitle,
         "data-testid": "dragHandle" + (index !== undefined ? "-" + index : ''),
         className: "handle",
         tabIndex: -1,
-        isEnabled: !isDisabled,
         disableTouchRipple: true,
         disabled: isDisabled,
-        isAccessible: true,
         sx: {
           cursor: isSorting ? 'grabbing' : 'grab',
           '&:hover': {
@@ -12344,9 +12560,12 @@
           marginLeft: '3px',
           marginRight: '3px',
           marginTop: 'auto',
-          marginBottom: 'auto'
+          marginBottom: 'auto',
+          '&.MuiIconButton-root': {
+            color: 'geowebColors.greys.accessible'
+          }
         }
-      });
+      }, icon);
     };
 
     /* *
@@ -12367,7 +12586,8 @@
      * */
 
     var LayerContainerRow = function LayerContainerRow(_a) {
-      var mapId = _a.mapId;
+      var mapId = _a.mapId,
+          settings = _a.settings;
       var dispatch = reactRedux.useDispatch();
 
       var _b = __read(React__namespace.useState(false), 2),
@@ -12489,6 +12709,8 @@
           width: '100%'
         }
       }, layerIds.map(function (layerId, index) {
+        var _a, _b;
+
         return /*#__PURE__*/React__namespace.createElement(LayerRowConnect, {
           mapId: mapId,
           layerId: layerId,
@@ -12498,8 +12720,11 @@
             isDisabled: isDragDisabled,
             index: index,
             hideTooltip: isSorting || isDragDisabled,
-            isSorting: isSorting
-          })
+            isSorting: isSorting,
+            icon: (_a = settings === null || settings === void 0 ? void 0 : settings.dragHandle) === null || _a === void 0 ? void 0 : _a.icon,
+            tooltipTitle: (_b = settings === null || settings === void 0 ? void 0 : settings.dragHandle) === null || _b === void 0 ? void 0 : _b.tooltipTitle
+          }),
+          settings: settings
         });
       })));
     };
@@ -12526,7 +12751,10 @@
 
       var selectedBaseLayers = _a.selectedBaseLayers,
           availableBaseLayers = _a.availableBaseLayers,
-          onChangeBaseLayers = _a.onChangeBaseLayers;
+          onChangeBaseLayers = _a.onChangeBaseLayers,
+          icon = _a.icon,
+          _c = _a.tooltipPrefix,
+          tooltipPrefix = _c === void 0 ? 'Layer: ' : _c;
 
       if (!availableBaseLayers || !availableBaseLayers.length) {
         return /*#__PURE__*/React__namespace.createElement("div", null, "No service available");
@@ -12547,7 +12775,7 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
         disableUnderline: true,
-        tooltip: "Base layer: " + ((_b = availableBaseLayers[currentIndex]) === null || _b === void 0 ? void 0 : _b.name),
+        tooltip: "" + tooltipPrefix + ((_b = availableBaseLayers[currentIndex]) === null || _b === void 0 ? void 0 : _b.name),
         inputProps: {
           SelectDisplayProps: {
             'data-testid': 'selectBaseLayer'
@@ -12565,7 +12793,8 @@
         },
         onChangeMouseWheel: function onChangeMouseWheel(e) {
           return onChangeBaseLayers(e.value);
-        }
+        },
+        IconComponent: icon
       }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         disabled: true
       }, "Base layer"), availableBaseLayers.map(function (baseLayer) {
@@ -12637,7 +12866,9 @@
 
     var BaseLayersConnect = function BaseLayersConnect(_a) {
       var mapId = _a.mapId,
-          preloadedAvailableBaseLayers = _a.preloadedAvailableBaseLayers;
+          preloadedAvailableBaseLayers = _a.preloadedAvailableBaseLayers,
+          tooltipPrefix = _a.tooltipPrefix,
+          icon = _a.icon;
       var dispatch = reactRedux.useDispatch();
       var selectedBaseLayers = reactRedux.useSelector(function (store) {
         return getMapBaseLayers(store, mapId);
@@ -12672,7 +12903,9 @@
       return /*#__PURE__*/React__namespace.createElement(BaseLayers, {
         selectedBaseLayers: selectedBaseLayers,
         availableBaseLayers: currentAvailableBaseLayers,
-        onChangeBaseLayers: onChangeBaseLayers
+        onChangeBaseLayers: onChangeBaseLayers,
+        tooltipPrefix: tooltipPrefix,
+        icon: icon
       });
     };
 
@@ -12726,11 +12959,10 @@
       }, /*#__PURE__*/React__namespace.createElement(material.List, {
         dense: true
       }, sortedServices.map(function (service) {
-        return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
+        return /*#__PURE__*/React__namespace.createElement(material.ListItemButton, {
           "data-testid": "service-item",
           key: service.url,
           selected: service === activeService,
-          button: true,
           onClick: function onClick(event) {
             handleListItemClick(event, service);
           }
@@ -12753,8 +12985,8 @@
      * 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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var WMSLayerTreeHeader = function WMSLayerTreeHeader(_a) {
@@ -12772,18 +13004,11 @@
         htmlFor: "select-multiple-native"
       }, "Available layers for ", serviceName)), onClickReload && /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: "Reload layers from service",
-        placement: "top"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: "Reload layers from service",
         "data-testid": "reloadLayers",
-        color: "primary",
-        style: {
-          padding: 3
-        },
-        onClick: onClickReload,
-        size: "large"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Cached, null)))));
+        onClick: onClickReload
+      }, /*#__PURE__*/React__namespace.createElement(theme.Cached, null))));
     };
 
     /* *
@@ -12932,10 +13157,9 @@
             textOverflow: 'ellipsis'
           }
         }, category)), layerMap[category].map(function (layer) {
-          return layer.leaf ? /*#__PURE__*/React__namespace.createElement(material.ListItem, {
+          return layer.leaf ? /*#__PURE__*/React__namespace.createElement(material.ListItemButton, {
             "data-testid": "selectableLayer",
             key: layer.name,
-            button: true,
             selected: processedOK.indexOf(layer.name) !== -1 || layerExists(layer, highlightedLayers),
             onClick: function onClick() {
               return handleInternalSelect(layer.name);
@@ -13170,8 +13394,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var validateServiceUrl$1 = function validateServiceUrl(url) {
@@ -13287,7 +13511,7 @@
         alignItems: "center"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        xs: 10
+        xs: 12
       }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
         margin: "dense",
         id: "serviceurl",
@@ -13309,25 +13533,21 @@
         disabled: loading,
         error: urlError !== '',
         helperText: urlError,
-        variant: "standard"
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true,
-        xs: 2,
-        sx: {
-          position: 'relative'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
-        "data-testid": "add-service",
-        onClick: handleAddServiceURL,
-        disabled: loading,
-        size: "large"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Add, null)), loading && /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
-        size: 35,
-        sx: {
-          position: 'absolute',
-          top: '7px',
-          left: '7px',
-          zIndex: 1
+        variant: "filled",
+        InputProps: {
+          endAdornment: /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
+            position: "end"
+          }, loading ? /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
+            size: 24,
+            sx: {
+              zIndex: 1
+            }
+          }) : /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+            "data-testid": "add-service",
+            onClick: handleAddServiceURL,
+            disabled: loading,
+            size: "large"
+          }, /*#__PURE__*/React__namespace.createElement(theme.Add, null)))
         }
       })))), /*#__PURE__*/React__namespace.createElement(material.Box, {
         m: 2
@@ -13369,8 +13589,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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var styles$3 = {
       buttonDiv: {
@@ -13383,10 +13603,7 @@
         zIndex: 1
       },
       button: {
-        width: '24px',
-        height: '24px',
-        margin: 'auto 0px auto 32px',
-        borderRadius: '15%'
+        margin: 'auto 0px auto 32px'
       }
     };
 
@@ -13406,39 +13623,24 @@
           open = _f[0],
           setOpen = _f[1];
 
-      var _g = __read(React__namespace.useState(shouldFocus), 2),
-          isTooltipDisabled = _g[0],
-          setTooltipDisabled = _g[1];
-
       var handleClose = function handleClose() {
         setOpen(!open);
       };
 
-      var onBlurTooltip = function onBlurTooltip(event) {
-        // enable tooltip again after user blurs
-        if (event.relatedTarget) {
-          setTooltipDisabled(false);
-        }
-      };
-
       React__namespace.useEffect(function () {
         if (shouldFocus && ref.current) {
           ref.current.focus();
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
       }, []);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: tooltip,
-        disableFocusListener: isTooltipDisabled,
-        onBlur: onBlurTooltip
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         onClick: handleClose,
         sx: styles$3.button,
         disableRipple: true,
         "data-testid": "addLayersButton",
         ref: ref,
-        size: "large"
-      }, /*#__PURE__*/React__namespace.createElement(theme.Add, null))), /*#__PURE__*/React__namespace.createElement(AddLayersPopup, {
+        tooltipTitle: tooltip
+      }, /*#__PURE__*/React__namespace.createElement(theme.Add, null)), /*#__PURE__*/React__namespace.createElement(AddLayersPopup, {
         open: open,
         handleClose: handleClose,
         onRenderTree: onRenderTree,
@@ -13465,13 +13667,16 @@
      * */
 
     var BaseLayerRow = function BaseLayerRow(_a) {
+      var _b, _c, _d;
+
       var mapId = _a.mapId,
-          _b = _a.preloadedAvailableBaseLayers,
-          preloadedAvailableBaseLayers = _b === void 0 ? availableDefaultBaseLayers : _b,
-          _c = _a.preloadedServices,
-          preloadedServices = _c === void 0 ? preloadedDefaultBaseServices : _c,
-          _d = _a.tooltip,
-          tooltip = _d === void 0 ? '' : _d;
+          _e = _a.preloadedAvailableBaseLayers,
+          preloadedAvailableBaseLayers = _e === void 0 ? availableDefaultBaseLayers : _e,
+          _f = _a.preloadedServices,
+          preloadedServices = _f === void 0 ? preloadedDefaultBaseServices : _f,
+          _g = _a.tooltip,
+          tooltip = _g === void 0 ? '' : _g,
+          settings = _a.settings;
       return /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         item: true,
@@ -13497,12 +13702,14 @@
             layerType: LayerType.baseLayer
           });
         }
-      })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+      })), (_b = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _b === void 0 ? void 0 : _b.title, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         className: columnClasses.column2
       }, /*#__PURE__*/React__namespace.createElement(BaseLayersConnect, {
         mapId: mapId,
-        preloadedAvailableBaseLayers: preloadedAvailableBaseLayers
+        preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
+        tooltipPrefix: (_c = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _c === void 0 ? void 0 : _c.tooltipPrefix,
+        icon: (_d = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _d === void 0 ? void 0 : _d.icon
       })));
     };
 
@@ -13627,7 +13834,8 @@
         left: 50
       } : _k,
           _l = _a.setFocused,
-          setFocused = _l === void 0 ? function () {} : _l;
+          setFocused = _l === void 0 ? function () {} : _l,
+          settings = _a.settings;
       var minSize = {
         width: 100,
         height: 126
@@ -13718,14 +13926,17 @@
       }, /*#__PURE__*/React__namespace.createElement(DescriptionRow, {
         mapPresetsModule: leftHeaderComponent,
         mapId: mapId,
-        source: source
+        source: source,
+        settings: settings === null || settings === void 0 ? void 0 : settings.header
       }), /*#__PURE__*/React__namespace.createElement(LayerContainerRow, {
-        mapId: mapId
+        mapId: mapId,
+        settings: settings === null || settings === void 0 ? void 0 : settings.content
       }), /*#__PURE__*/React__namespace.createElement(BaseLayerRow, {
         mapId: mapId,
         tooltip: "Add base layers",
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
-        preloadedServices: preloadedBaseServices
+        preloadedServices: preloadedBaseServices,
+        settings: settings === null || settings === void 0 ? void 0 : settings.footer
       })))));
     };
 
@@ -14123,12 +14334,19 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var isURL = function isURL(string) {
       return /^https?:\/\//.test(string);
     };
+    var buttonStyle = {
+      '&.MuiButtonBase-root.MuiIconButton-root': {
+        width: 48,
+        height: 48,
+        marginRight: '-12px'
+      }
+    };
 
     var SearchFieldButtonContainer = function SearchFieldButtonContainer(_a) {
       var localSearchString = _a.localSearchString,
@@ -14136,16 +14354,13 @@
           setPopupIsOpen = _a.setPopupIsOpen;
 
       var ClearButton = function ClearButton() {
-        return /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
-          title: "Clear",
-          placement: "top"
-        }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-          edge: "end",
+        return /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+          tooltipTitle: "Clear",
+          sx: buttonStyle,
           onClick: function onClick() {
             onClickClear();
-          },
-          size: "large"
-        }, /*#__PURE__*/React__default["default"].createElement(theme.Clear, null)));
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(theme.Clear, null));
       };
 
       if (isURL(localSearchString)) {
@@ -14165,13 +14380,10 @@
         return /*#__PURE__*/React__default["default"].createElement(ClearButton, null);
       }
 
-      return /*#__PURE__*/React__default["default"].createElement(shared.CustomTooltip, {
-        title: "Search",
-        placement: "top"
-      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-        edge: "end",
-        size: "large"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.Search, null)));
+      return /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
+        tooltipTitle: "Search",
+        sx: buttonStyle
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Search, null));
     };
 
     /* *
@@ -15382,7 +15594,7 @@
         }));
       };
 
-      var hasSelectedStyle = !isAllSelected && isSelected || isAllSelected && service === 'all';
+      var hasSelectedStyle = !isAllSelected && isSelected || isAllSelected && (service === null || service === void 0 ? void 0 : service.serviceName) === 'all';
 
       var toggleChip = function toggleChip(service) {
         if (service === 'all') {
@@ -15572,8 +15784,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var styles$1 = {
       servicesContainer: {
@@ -15739,39 +15951,35 @@
             paddingRight: '70px'
           }
         }, serviceName)), /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, {
-          style: {
+          sx: {
             marginRight: '0px',
-            width: 100
+            width: 96,
+            button: {
+              marginLeft: 1
+            }
           }
         }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
-          container: true
-        }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
-          item: true,
-          xs: 4
+          container: true,
+          justifyContent: "left"
         }, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
           "data-testid": "updateServiceTooltip",
           title: updateServiceTitle,
           placement: tooltipPlacement(),
           PopperProps: tooltipPopperProps
-        }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           "data-testid": "updateServiceButton",
           "aria-label": "Update layers from WMS service",
-          size: "large",
           onKeyDown: stopTabPropagation,
           onClick: function onClick() {
             layerSelectReloadService(serviceUrl);
           }
-        }, /*#__PURE__*/React__namespace.createElement(theme.Cached, null)))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-          item: true,
-          xs: 4
-        }, userAddedService ? /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
+        }, /*#__PURE__*/React__namespace.createElement(theme.Cached, null))), userAddedService ? /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
           title: editServiceTitle,
           placement: tooltipPlacement(),
           PopperProps: tooltipPopperProps
-        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           "aria-label": "edit service",
           "data-testid": "openEditServiceButton",
-          size: "large",
           onKeyDown: stopTabPropagation,
           onClick: function onClick() {
             setServicePopupInfo({
@@ -15785,10 +15993,9 @@
           title: showServiceTitle,
           placement: tooltipPlacement(),
           PopperProps: tooltipPopperProps
-        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           "aria-label": "show service",
           "data-testid": "openShowServiceButton",
-          size: "large",
           onKeyDown: stopTabPropagation,
           onClick: function onClick() {
             setServicePopupInfo({
@@ -15798,24 +16005,20 @@
               variant: 'show'
             });
           }
-        }, /*#__PURE__*/React__namespace.createElement(theme.Visibility, null))))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-          item: true,
-          xs: 4
-        }, userAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
+        }, /*#__PURE__*/React__namespace.createElement(theme.Visibility, null)))), userAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
           title: deleteServiceTitle(serviceHasActiveLayers),
           PopperProps: tooltipPopperProps,
           placement: tooltipPlacement(),
           "data-testid": "removeServiceTooltip"
-        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           "data-testid": "removeServiceButton",
           "aria-label": "delete service",
-          size: "large",
           disabled: serviceHasActiveLayers,
           onKeyDown: stopTabPropagation,
           onClick: function onClick() {
             return layerSelectRemoveService(serviceId, serviceUrl, serviceName);
           }
-        }, /*#__PURE__*/React__namespace.createElement(theme.Delete, null)))))))));
+        }, /*#__PURE__*/React__namespace.createElement(theme.Delete, null))))))));
       }));
     };
 
@@ -16240,8 +16443,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var FilterListItem = function FilterListItem(_a) {
@@ -16332,12 +16535,12 @@
             whiteSpace: 'nowrap',
             overflow: 'hidden'
           }
-        }, filter.name, " (", filter.amountVisible, ")"), isHovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, filter.name, " (", filter.amountVisible, ")"), isHovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           style: {
-            backgroundColor: 'transparent'
+            backgroundColor: 'transparent',
+            width: 'auto'
           },
           edge: "end",
-          size: "small",
           onClick: function onClick() {
             return selectOnlyOne(filter.id);
           },
@@ -16654,8 +16857,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var style = {
       textField: {
@@ -16932,15 +17135,16 @@
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "h5",
         component: "span"
-      }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
         "aria-label": "close",
-        size: "small",
         onClick: closePopup,
         "data-testid": "closePopupButtonCross",
         sx: {
-          color: 'geowebColors.captions.captionDisabled.color',
           marginTop: 'auto',
-          marginBottom: 'auto'
+          marginBottom: 'auto',
+          '&.MuiButtonBase-root': {
+            color: 'geowebColors.greys.accessible'
+          }
         }
       }, /*#__PURE__*/React__namespace.createElement(theme.Close, null))), isLoading && /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
@@ -16978,11 +17182,14 @@
           disableUnderline: isShowPopup,
           endAdornment: isShowPopup && /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
             position: "end"
-          }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+          }, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
             "aria-label": "copy url",
             onClick: function onClick() {
               navigator.clipboard.writeText(serviceUrl);
               showSnackbar(COPY_URL_MESSAGE);
+            },
+            sx: {
+              marginTop: 0.5
             }
           }, /*#__PURE__*/React__namespace.createElement(theme.Copy, null)))
         },
@@ -17689,8 +17896,8 @@
      * 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)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_a) {
@@ -17731,16 +17938,16 @@
         key: layerId,
         item: true,
         xs: "auto"
-      }, /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: tooltipTitle,
-        placement: "top"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+        tooltipTitle: tooltipTitle,
         "data-testid": "syncButton",
-        size: "small",
         onClick: function onClick() {
           return handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced);
+        },
+        sx: {
+          margin: '5px'
         }
-      }, /*#__PURE__*/React__namespace.createElement(Icon, null))), /*#__PURE__*/React__namespace.createElement(DimensionSelectSlider, {
+      }, /*#__PURE__*/React__namespace.createElement(Icon, null)), /*#__PURE__*/React__namespace.createElement(DimensionSelectSlider, {
         marks: marks,
         layerTitle: layerTitle,
         reverse: dimConfig ? dimConfig.reversed : false,
@@ -22098,7 +22305,6 @@
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
     /* Function which calculates the distance between two points */
-    // eslint-disable-next-line class-methods-use-this
 
     var distance = function distance(a, b) {
       return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));
@@ -22177,9 +22383,10 @@
               return {
                 coordinateIndexInFeature: polygonIndex
               };
-            } // eslint-disable-next-line no-empty
-
-          } catch (e) {}
+            }
+          } catch (e) {
+            console.warn(e);
+          }
         }
       }
 
@@ -22205,9 +22412,10 @@
               return {
                 coordinateIndexInFeature: polygonIndex
               };
-            } // eslint-disable-next-line no-empty
-
-          } catch (e) {}
+            }
+          } catch (e) {
+            console.warn(e);
+          }
         }
       }
 
@@ -22435,7 +22643,7 @@
             if (feature.geometry) {
               var coordinates = feature.geometry.coordinates;
 
-              if (_this.snappedPolygonIndex > coordinates.length - 1) {
+              if (Number(_this.snappedPolygonIndex) > coordinates.length - 1) {
                 _this.snappedPolygonIndex = coordinates.length - 1;
               }
             }
@@ -25578,7 +25786,26 @@
 
       var dimensions = props.dimensions,
           mapId = props.mapId;
+      var wmjsMapRef = React__namespace.useRef(null);
+
+      var _d = reactResizeDetector.useResizeDetector(),
+          ref = _d.ref,
+          height = _d.height,
+          width = _d.width;
+
+      React__namespace.useEffect(function () {
+        if (wmjsMapRef.current && !!width && !!height) {
+          var _a = wmjsMapRef.current.getSize(),
+              mapHeight = _a.height,
+              mapWidth = _a.width;
+
+          if (width !== mapWidth || height !== mapHeight) {
+            wmjsMapRef.current.setSize(Math.ceil(width), Math.ceil(height));
+          }
+        }
+      }, [width, height]);
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        ref: ref,
         sx: {
           display: 'grid',
           width: '100%',
@@ -25611,7 +25838,10 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(ReactMapView, __assign({}, props, {
         showLegend: false,
-        displayTimeInMap: false
+        displayTimeInMap: false,
+        onWMJSMount: function onWMJSMount(id) {
+          wmjsMapRef.current = getWMJSMapById(id);
+        }
       }), children)), displayTimeInMap && dimensions && /*#__PURE__*/React__namespace.createElement(MapTime, {
         dimensions: dimensions
       }));
@@ -26725,8 +26955,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
 
     var GetFeatureInfoDialog = function GetFeatureInfoDialog(_a) {
@@ -26896,11 +27126,10 @@
           }
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "subtitle1"
-        }, title, "\xA0", /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+        }, title, "\xA0", /*#__PURE__*/React__default["default"].createElement(shared.CustomIconButton, {
           sx: {
             "float": 'right'
           },
-          size: "small",
           "aria-label": "Open layer featureinfo in another page",
           onClick: function onClick() {
             window.open(url);
@@ -27300,8 +27529,7 @@
             syncGroupAddTarget({
               groupId: syncGroupsId,
               targetId: map.id,
-              linked: true,
-              origin: 'system'
+              linked: true
             });
           });
         });
@@ -27744,10 +27972,9 @@
         var isNotCheckedElseWhere = viewStateData.groups.every(function (group) {
           return !(group.id !== groupId && group.selected.includes(source.id));
         });
-        return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
+        return /*#__PURE__*/React__namespace.createElement(material.ListItemButton, {
           key: source.id,
           dense: true,
-          button: true,
           onClick: function onClick() {
             return handleToggle(source.id);
           },
@@ -27781,8 +28008,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var SyncGroupList = function SyncGroupList(_a) {
       var viewStateData = _a.viewStateData,
@@ -27810,9 +28037,8 @@
             paddingLeft: '15px',
             paddingTop: '10px'
           }
-        }, /*#__PURE__*/React__namespace.createElement(material.Typography, null, title), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-          title: index === 0 ? 'Add new group to list' : 'Remove group from list'
-        }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, /*#__PURE__*/React__namespace.createElement(material.Typography, null, title), /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
+          tooltipTitle: index === 0 ? 'Add new group to list' : 'Remove group from list',
           style: {
             right: '10px'
           },
@@ -27821,9 +28047,8 @@
             return addNewGroup(groupObject.id);
           } : function () {
             return removeGroup(groupObject.id);
-          },
-          size: "large"
-        }, index === 0 ? /*#__PURE__*/React__namespace.createElement(theme.Add, null) : /*#__PURE__*/React__namespace.createElement(theme.Delete, null)))), /*#__PURE__*/React__namespace.createElement(SyncGroupListItem, {
+          }
+        }, index === 0 ? /*#__PURE__*/React__namespace.createElement(theme.Add, null) : /*#__PURE__*/React__namespace.createElement(theme.Delete, null))), /*#__PURE__*/React__namespace.createElement(SyncGroupListItem, {
           viewStateData: viewStateData,
           groupId: groupObject.id,
           selected: groupObject.selected,
@@ -27880,7 +28105,8 @@
         if (isChecked) {
           syncGroupRemoveTarget({
             groupId: String(groupId),
-            targetId: String(sourceId)
+            targetId: String(sourceId),
+            origin: 'user'
           });
         } else {
           var groups = syncGroupViewState[groupCategory].groups;
@@ -27893,7 +28119,8 @@
               if (group.id !== groupId && group.selected.includes(sourceId)) {
                 syncGroupRemoveTarget({
                   groupId: String(group.id),
-                  targetId: String(sourceId)
+                  targetId: String(sourceId),
+                  origin: 'user'
                 });
               }
             }
@@ -27912,7 +28139,8 @@
 
           syncGroupAddTarget({
             groupId: String(groupId),
-            targetId: String(sourceId)
+            targetId: String(sourceId),
+            origin: 'user'
           });
         }
       };
@@ -27933,7 +28161,8 @@
             syncGroupAddGroup({
               groupId: String(groupId + Math.floor(Math.random() * 1000)),
               title: title,
-              type: syncType
+              type: syncType,
+              origin: 'user'
             });
           }
         });
@@ -28211,8 +28440,8 @@
      * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
     var SnackbarWrapper = function SnackbarWrapper(_a) {
       var children = _a.children,
@@ -28230,14 +28459,19 @@
         ClickAwayListenerProps: {
           mouseEvent: false
         },
-        action: /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        action: /*#__PURE__*/React__namespace.createElement(shared.CustomIconButton, {
           "aria-label": "close",
           "data-testid": "snackbarCloseButton",
           onClick: onCloseSnackbar,
+          size: "large",
           sx: {
-            color: 'geowebColors.snackbar.action',
-            '&:hover': {
-              backgroundColor: 'geowebColors.snackbar.actionHover.rgba'
+            '&.MuiButtonBase-root': {
+              borderRadius: 20,
+              color: 'geowebColors.snackbar.action',
+              '&:hover': {
+                color: 'geowebColors.snackbar.action',
+                backgroundColor: 'geowebColors.snackbar.actionHover.rgba'
+              }
             }
           }
         }, /*#__PURE__*/React__namespace.createElement(theme.Close, null))
@@ -28352,6 +28586,7 @@
      * */
     // stores navigate hook method to object, so it can be used outside components
     var historyDict = {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       navigate: null
     };
 
@@ -28450,8 +28685,6 @@
      * */
     var NavigateSetter = function NavigateSetter() {
       // stores navigate hook method to historyDict, so it can be used outside components
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
       historyDict.navigate = reactRouterDom.useNavigate();
       return null;
     };
@@ -28668,7 +28901,7 @@
     exports.getWMLayerById = getWMLayerById;
     exports.layerActions = layerActions;
     exports.layerReducer = reducer$8;
-    exports.layerSelectors = selectors$3;
+    exports.layerSelectors = selectors$4;
     exports.layerTypes = types$3;
     exports.mapActions = mapActions;
     exports.mapModuleConfig = moduleConfig;
@@ -28686,13 +28919,14 @@
     exports.snackbarActions = snackbarActions;
     exports.store = store;
     exports.syncGroupActions = genericActions;
+    exports.syncGroupsSelectors = selectors$2;
     exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
     exports.synchronizationGroupsConfig = synchronizationGroupConfig;
     exports.testLayers = testLayers;
     exports.timeSliderUtils = timeSliderUtils;
     exports.uiActions = uiActions;
     exports.uiModuleConfig = uiModuleConfig;
-    exports.uiSelectors = selectors$2;
+    exports.uiSelectors = selectors$3;
     exports.uiTypes = types;
     exports.unRegisterWMJSLayer = unRegisterWMJSLayer;
     exports.unRegisterWMJSMap = unRegisterWMJSMap;