@opengeoweb/core 2.3.0 → 2.4.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('reselect'), require('moment'), require('lodash'), require('react'), require('immer'), require('redux-saga/effects'), require('@opengeoweb/webmap'), require('@mui/material'), require('@mui/styles/makeStyles'), require('react-redux'), require('@opengeoweb/shared'), require('@mui/icons-material'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga'), require('@opengeoweb/theme')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'reselect', 'moment', 'lodash', 'react', 'immer', 'redux-saga/effects', '@opengeoweb/webmap', '@mui/material', '@mui/styles/makeStyles', 'react-redux', '@opengeoweb/shared', '@mui/icons-material', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', 'redux-dynamic-modules', 'redux-dynamic-modules-saga', '@opengeoweb/theme'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.reselect, global.moment, global._, global.React, global.produce, global.effects, global.webmap, global.material, global.makeStyles, global.reactRedux, global.shared, global.iconsMaterial, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
-})(this, (function (exports, reselect, moment, _, React, produce, effects, webmap, material, makeStyles, reactRedux, shared, iconsMaterial, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('reselect'), require('moment'), require('lodash'), require('react'), require('immer'), require('redux-saga/effects'), require('@opengeoweb/webmap'), require('@mui/material'), require('react-redux'), require('@mui/styles/makeStyles'), require('@opengeoweb/shared'), require('@mui/icons-material'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga'), require('@opengeoweb/theme')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'reselect', 'moment', 'lodash', 'react', 'immer', 'redux-saga/effects', '@opengeoweb/webmap', '@mui/material', 'react-redux', '@mui/styles/makeStyles', '@opengeoweb/shared', '@mui/icons-material', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', 'redux-dynamic-modules', 'redux-dynamic-modules-saga', '@opengeoweb/theme'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.reselect, global.moment, global._, global.React, global.produce, global.effects, global.webmap, global.material, global.reactRedux, global.makeStyles, global.shared, global.iconsMaterial, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
+})(this, (function (exports, reselect, moment, _, React, produce, effects, webmap, material, reactRedux, makeStyles, shared, iconsMaterial, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1307,6 +1307,103 @@
     return [];
   }, selectorMemoizationOptions);
 
+  /* *
+   * 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)
+   * */
+
+  /* Action constants for sources */
+  var SYNCGROUPS_ADD_SOURCE = 'SYNCGROUPS_ADD_SOURCE';
+  var SYNCGROUPS_REMOVE_SOURCE = 'SYNCGROUPS_REMOVE_SOURCE';
+  /* Action constants for groups */
+
+  var SYNCGROUPS_TOGGLE_LINK_TARGET = 'SYNCGROUPS_TOGGLE_LINK_TARGET';
+  var SYNCGROUPS_ADD_TARGET = 'SYNCGROUPS_ADD_TARGET';
+  var SYNCGROUPS_REMOVE_TARGET = 'SYNCGROUPS_REMOVE_TARGET';
+  var SYNCGROUPS_ADD_GROUP = 'SYNCGROUPS_ADD_GROUP';
+  var SYNCGROUPS_REMOVE_GROUP = 'SYNCGROUPS_REMOVE_GROUP';
+  var SYNCGROUPS_CLEAR = 'SYNCGROUPS_CLEAR';
+  /* Type constants */
+
+  var SYNCGROUPS_TYPE_SETTIME = 'SYNCGROUPS_TYPE_SETTIME';
+  var SYNCGROUPS_TYPE_SETBBOX = 'SYNCGROUPS_TYPE_SETBBOX';
+  var SYNCGROUPS_TYPE_SETLAYERACTIONS = 'SYNCGROUPS_TYPE_SETLAYERACTIONS';
+  var SYNCGROUPS_SET_VIEW_STATE = 'SYNCGROUPS_SET_VIEW_STATE';
+
+  var constants$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SYNCGROUPS_ADD_SOURCE: SYNCGROUPS_ADD_SOURCE,
+    SYNCGROUPS_REMOVE_SOURCE: SYNCGROUPS_REMOVE_SOURCE,
+    SYNCGROUPS_TOGGLE_LINK_TARGET: SYNCGROUPS_TOGGLE_LINK_TARGET,
+    SYNCGROUPS_ADD_TARGET: SYNCGROUPS_ADD_TARGET,
+    SYNCGROUPS_REMOVE_TARGET: SYNCGROUPS_REMOVE_TARGET,
+    SYNCGROUPS_ADD_GROUP: SYNCGROUPS_ADD_GROUP,
+    SYNCGROUPS_REMOVE_GROUP: SYNCGROUPS_REMOVE_GROUP,
+    SYNCGROUPS_CLEAR: SYNCGROUPS_CLEAR,
+    SYNCGROUPS_TYPE_SETTIME: SYNCGROUPS_TYPE_SETTIME,
+    SYNCGROUPS_TYPE_SETBBOX: SYNCGROUPS_TYPE_SETBBOX,
+    SYNCGROUPS_TYPE_SETLAYERACTIONS: SYNCGROUPS_TYPE_SETLAYERACTIONS,
+    SYNCGROUPS_SET_VIEW_STATE: SYNCGROUPS_SET_VIEW_STATE
+  });
+
+  /* *
+   * 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 synchronizationGroupStore = function synchronizationGroupStore(store) {
+    return store && store.syncronizationGroupStore ? store.syncronizationGroupStore : null;
+  };
+
+  var getSynchronizationGroupStore = reselect.createSelector(synchronizationGroupStore, function (store) {
+    return store;
+  });
+  /**
+   * Returns the synchronization source by id
+   * @param store The app store
+   * @param id The source id to find
+   */
+
+  var getSyncSourceBySourceId = function getSyncSourceBySourceId(state, id) {
+    if (state && state.sources) {
+      var sources = state.sources;
+
+      if (sources.byId[id]) {
+        return sources.byId[id];
+      }
+    }
+
+    return null;
+  };
+
+  var getTime = reselect.createSelector(getSyncSourceBySourceId, function (store) {
+    return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
+  });
+
   /*! *****************************************************************************
   Copyright (c) Microsoft Corporation.
 
@@ -2248,6 +2345,34 @@
   var isAnimating = reselect.createSelector(getMapById, function (store) {
     return store ? store.isAnimating : false;
   });
+  /**
+   * Gets if any linked map is animating
+   *
+   * Example: linkedMapIsAnimating = linkedMapAnimationInfo(store, 'mapid_1')
+   * @param {object} store store: object - store object
+   * @param {string} mapId mapId: string - Id of the map
+   * @returns {object} returnType: object - object containing isAnimating boolean and id string
+   */
+
+  var linkedMapAnimationInfo = reselect.createSelector(function (store, mapId) {
+    var animationInfo = {
+      isAnimating: isAnimating(store, mapId),
+      id: mapId
+    };
+    getSynchronizationGroupStore(store).groups.allIds.forEach(function (groupId) {
+      if (getSynchronizationGroupStore(store).groups.byId[groupId].targets.byId[animationInfo.id] && getSynchronizationGroupStore(store).groups.byId[groupId].targets.byId[animationInfo.id].linked) {
+        getSynchronizationGroupStore(store).groups.byId[groupId].targets.allIds.forEach(function (id) {
+          if (isAnimating(store, id) === true) {
+            animationInfo.isAnimating = true;
+            animationInfo.id = id;
+          }
+        });
+      }
+    });
+    return animationInfo;
+  }, function (animationInfo) {
+    return animationInfo;
+  });
   /**
    * Gets start time of animation
    *
@@ -2707,6 +2832,7 @@
     getSrs: getSrs,
     getBbox: getBbox,
     isAnimating: isAnimating,
+    linkedMapAnimationInfo: linkedMapAnimationInfo,
     getAnimationStartTime: getAnimationStartTime,
     getAnimationEndTime: getAnimationEndTime,
     isAutoUpdating: isAutoUpdating,
@@ -2772,7 +2898,7 @@
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
 
-  var constants$1 = /*#__PURE__*/Object.freeze({
+  var constants = /*#__PURE__*/Object.freeze({
     __proto__: null,
     WEBMAP_REGISTER_MAP: WEBMAP_REGISTER_MAP,
     WEBMAP_UNREGISTER_MAP: WEBMAP_UNREGISTER_MAP,
@@ -3094,55 +3220,6 @@
   var GENERIC_SETTIME = 'GENERIC_SETTIME';
   var GENERIC_SETBBOX = 'GENERIC_SETBBOX';
 
-  /* *
-   * 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)
-   * */
-
-  /* Action constants for sources */
-  var SYNCGROUPS_ADD_SOURCE = 'SYNCGROUPS_ADD_SOURCE';
-  var SYNCGROUPS_REMOVE_SOURCE = 'SYNCGROUPS_REMOVE_SOURCE';
-  /* Action constants for groups */
-
-  var SYNCGROUPS_TOGGLE_LINK_TARGET = 'SYNCGROUPS_TOGGLE_LINK_TARGET';
-  var SYNCGROUPS_ADD_TARGET = 'SYNCGROUPS_ADD_TARGET';
-  var SYNCGROUPS_REMOVE_TARGET = 'SYNCGROUPS_REMOVE_TARGET';
-  var SYNCGROUPS_ADD_GROUP = 'SYNCGROUPS_ADD_GROUP';
-  var SYNCGROUPS_REMOVE_GROUP = 'SYNCGROUPS_REMOVE_GROUP';
-  var SYNCGROUPS_CLEAR = 'SYNCGROUPS_CLEAR';
-  /* Type constants */
-
-  var SYNCGROUPS_TYPE_SETTIME = 'SYNCGROUPS_TYPE_SETTIME';
-  var SYNCGROUPS_TYPE_SETBBOX = 'SYNCGROUPS_TYPE_SETBBOX';
-  var SYNCGROUPS_TYPE_SETLAYERACTIONS = 'SYNCGROUPS_TYPE_SETLAYERACTIONS';
-
-  var constants = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    SYNCGROUPS_ADD_SOURCE: SYNCGROUPS_ADD_SOURCE,
-    SYNCGROUPS_REMOVE_SOURCE: SYNCGROUPS_REMOVE_SOURCE,
-    SYNCGROUPS_TOGGLE_LINK_TARGET: SYNCGROUPS_TOGGLE_LINK_TARGET,
-    SYNCGROUPS_ADD_TARGET: SYNCGROUPS_ADD_TARGET,
-    SYNCGROUPS_REMOVE_TARGET: SYNCGROUPS_REMOVE_TARGET,
-    SYNCGROUPS_ADD_GROUP: SYNCGROUPS_ADD_GROUP,
-    SYNCGROUPS_REMOVE_GROUP: SYNCGROUPS_REMOVE_GROUP,
-    SYNCGROUPS_CLEAR: SYNCGROUPS_CLEAR,
-    SYNCGROUPS_TYPE_SETTIME: SYNCGROUPS_TYPE_SETTIME,
-    SYNCGROUPS_TYPE_SETBBOX: SYNCGROUPS_TYPE_SETBBOX,
-    SYNCGROUPS_TYPE_SETLAYERACTIONS: SYNCGROUPS_TYPE_SETLAYERACTIONS
-  });
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -3288,6 +3365,12 @@
       type: SYNCGROUPS_CLEAR
     };
   };
+  var syncGroupSetViewState = function syncGroupSetViewState(payload) {
+    return {
+      type: SYNCGROUPS_SET_VIEW_STATE,
+      payload: payload
+    };
+  };
 
   var actions$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -3298,7 +3381,8 @@
     syncGroupLinkTarget: syncGroupLinkTarget,
     syncGroupAddGroup: syncGroupAddGroup,
     syncGroupRemoveGroup: syncGroupRemoveGroup,
-    syncGroupClear: syncGroupClear
+    syncGroupClear: syncGroupClear,
+    syncGroupSetViewState: syncGroupSetViewState
   });
 
   /* *
@@ -3368,7 +3452,8 @@
     syncGroupLinkTarget: syncGroupLinkTarget,
     syncGroupAddGroup: syncGroupAddGroup,
     syncGroupRemoveGroup: syncGroupRemoveGroup,
-    syncGroupClear: syncGroupClear
+    syncGroupClear: syncGroupClear,
+    syncGroupSetViewState: syncGroupSetViewState
   });
 
   /* *
@@ -3984,6 +4069,20 @@
     groups: {
       byId: {},
       allIds: []
+    },
+    viewState: {
+      timeslider: {
+        groups: [],
+        sourcesById: []
+      },
+      zoompane: {
+        groups: [],
+        sourcesById: []
+      },
+      level: {
+        groups: [],
+        sourcesById: []
+      }
     }
   };
   var reducer$4 = function reducer(state, action) {
@@ -4204,6 +4303,12 @@
       case SYNCGROUPS_CLEAR:
         return initialState$4;
 
+      case SYNCGROUPS_SET_VIEW_STATE:
+        return produce__default["default"](state, function (draft) {
+          var viewState = action.payload.viewState;
+          draft.viewState = viewState;
+        });
+
       default:
         return state;
     }
@@ -4317,6 +4422,9 @@
     }, []);
     return groups;
   };
+  var syncGroupGetViewState = reselect.createSelector(syncGroupStore, function (store) {
+    return store.viewState;
+  });
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -5081,6 +5189,105 @@
     });
   }
 
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2021 - Finnish Meteorological Institute (FMI)
+   * */
+  var emptyState = {
+    timeslider: {
+      groups: [],
+      sourcesById: []
+    },
+    zoompane: {
+      groups: [],
+      sourcesById: []
+    },
+    level: {
+      groups: [],
+      sourcesById: []
+    }
+  };
+  var groupTypes = [{
+    title: 'Timeslider',
+    syncType: 'SYNCGROUPS_TYPE_SETTIME',
+    groupType: 'timeslider'
+  }, {
+    title: 'Zoompane',
+    syncType: 'SYNCGROUPS_TYPE_SETBBOX',
+    groupType: 'zoompane'
+  }];
+  /*
+      _____ Creates viewState  _____
+        - Runs Each time viewState is created:
+        - Fill arrays inside initialState with objects containing new values from Redux
+  */
+
+  var createSyncGroupViewState = function createSyncGroupViewState(groups, sources) {
+    var initialState = produce__default["default"](emptyState, function (draft) {
+      /*
+        _____ 1. Fill groups _____
+          1. Goes through all groups by ID
+          2. Collects original timeslider or zoompane values into an array
+          3. Sorts and adds selected sources to ViewState based on ID type
+      */
+      Object.keys(groups.byId).forEach(function (id) {
+        var _a;
+
+        var groupType = (_a = groupTypes.find(function (object) {
+          return object.syncType === groups.byId[id].type;
+        })) === null || _a === void 0 ? void 0 : _a.groupType;
+
+        if (groupType) {
+          draft[groupType].groups.push({
+            id: id,
+            selected: groups.byId[id].targets.allIds
+          });
+        }
+      });
+      /*
+        _____ 2. Fill sourcesById _____
+          1. Loop though sources and add source to each group type
+      */
+
+      Object.keys(sources.byId).forEach(function (id) {
+        groupTypes.forEach(function (_a) {
+          var syncType = _a.syncType,
+              groupType = _a.groupType;
+
+          if (sources.byId[id].types.includes(syncType)) {
+            draft[groupType].sourcesById.push({
+              id: id,
+              name: id
+            });
+          }
+        });
+      });
+    });
+    return initialState;
+  };
+
+  var groups = function groups(store) {
+    return store.syncronizationGroupStore.groups;
+  };
+
+  var sources = function sources(store) {
+    return store.syncronizationGroupStore.sources;
+  };
+
+  var createSyncGroupViewStateSelector = reselect.createSelector(groups, sources, createSyncGroupViewState);
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -5230,6 +5437,32 @@
       }
     });
   }
+  function updateViewStateSaga() {
+    var viewState;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          return [4
+          /*yield*/
+          , effects.select(createSyncGroupViewStateSelector)];
+
+        case 1:
+          viewState = _a.sent();
+          return [4
+          /*yield*/
+          , effects.put(syncGroupSetViewState({
+            viewState: viewState
+          }))];
+
+        case 2:
+          _a.sent();
+
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  }
 
   function rootSaga$3() {
     return __generator(this, function (_a) {
@@ -5249,6 +5482,55 @@
         case 2:
           _a.sent();
 
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_ADD_GROUP, updateViewStateSaga)];
+
+        case 3:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_REMOVE_GROUP, updateViewStateSaga)];
+
+        case 4:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_ADD_SOURCE, updateViewStateSaga)];
+
+        case 5:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_REMOVE_SOURCE, updateViewStateSaga)];
+
+        case 6:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_ADD_TARGET, updateViewStateSaga)];
+
+        case 7:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_REMOVE_TARGET, updateViewStateSaga)];
+
+        case 8:
+          _a.sent();
+
+          return [4
+          /*yield*/
+          , effects.takeLatest(SYNCGROUPS_TOGGLE_LINK_TARGET, updateViewStateSaga)];
+
+        case 9:
+          _a.sent();
+
           return [2
           /*return*/
           ];
@@ -5296,40 +5578,6 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$B = makeStyles__default["default"](function (theme) {
-    return {
-      select: {
-        '& ul': {
-          backgroundColor: theme.palette.geowebColors.background.surface
-        },
-        '& li': {
-          fontSize: 16,
-          padding: 12,
-          '&:hover': {
-            backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
-          },
-          '&.Mui-selected': {
-            color: theme.palette.common.white,
-            backgroundColor: theme.palette.geowebColors.buttons.primary.active.fill,
-            boxShadow: "none",
-            '&:hover': {
-              color: theme.palette.common.white,
-              backgroundColor: theme.palette.geowebColors.buttons.primary.mouseOver.fill
-            }
-          },
-          '&:after': {
-            background: 'none!important'
-          },
-          // (optional) header
-          '&.Mui-disabled': {
-            fontSize: 12,
-            opacity: 0.67,
-            padding: '0 12px'
-          }
-        }
-      }
-    };
-  });
 
   var TooltipSelect = function TooltipSelect(_a) {
     var tooltip = _a.tooltip,
@@ -5354,8 +5602,6 @@
         tooltipOpen = _g[0],
         setTooltipOpen = _g[1];
 
-    var classes = useStyles$B();
-
     var preventDefault = function preventDefault(event) {
       event.preventDefault();
       event.stopPropagation();
@@ -5420,8 +5666,46 @@
       onBlur: onBlur,
       onWheel: onWheel,
       MenuProps: {
-        classes: {
-          paper: classes.select
+        BackdropProps: {
+          sx: {
+            '&.MuiBackdrop-root': {
+              backgroundColor: 'transparent'
+            }
+          }
+        },
+        sx: {
+          '& ul': {
+            backgroundColor: 'geowebColors.background.surface'
+          },
+          '& li': {
+            fontSize: '16px',
+            padding: '12px',
+            '&:hover': {
+              backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+            },
+            '&.Mui-selected': {
+              color: 'geowebColors.buttons.tool.active.color',
+              backgroundColor: 'geowebColors.buttons.tool.active.fill',
+              boxShadow: "none",
+              '&:hover': {
+                backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+              },
+              '&:focus': {
+                backgroundColor: 'geowebColors.buttons.tool.activeMouseOver.fill'
+              }
+            },
+            '&:after': {
+              background: 'none!important'
+            },
+            '&.Mui-disabled': {
+              fontSize: '12px',
+              opacity: 0.67,
+              padding: '0px 12px',
+              '&.MuiMenuItem-root': {
+                minHeight: '30px!important'
+              }
+            }
+          }
         }
       }
     }, otherProps)));
@@ -5470,7 +5754,7 @@
   var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     actions: actions$1,
-    constants: constants,
+    constants: constants$1,
     types: types,
     initialState: initialState$4
   });
@@ -8255,7 +8539,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$A = makeStyles__default["default"]({
+  var useStyles$x = makeStyles__default["default"]({
     buttonDiv: {
       position: 'relative'
     },
@@ -8291,7 +8575,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$A();
+    var classes = useStyles$x();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -8560,6 +8844,9 @@
     column6: {
       width: iconButtonSize * 2,
       display: 'inline-flex'
+    },
+    columns35: {
+      width: "calc((100% - " + iconButtonSize * totalButtons + "px) * 0.75)"
     }
   });
   var LayerManagerColumnsSmall = makeStyles__default["default"]({
@@ -8581,6 +8868,9 @@
     column6: {
       width: iconButtonSize * 2,
       display: 'inline-flex'
+    },
+    columns35: {
+      display: 'none'
     }
   });
   var LayerManagerWidth;
@@ -8665,7 +8955,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$z = makeStyles__default["default"]({
+  var useStyles$w = makeStyles__default["default"]({
     row: {
       height: '32px'
     },
@@ -8689,7 +8979,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e;
-    var classes = useStyles$z();
+    var classes = useStyles$w();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -8766,18 +9056,18 @@
           borderColor: 'transparent!important'
         },
         '&:hover .MuiSelect-select': {
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
+          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
         },
         '&.Mui-focused .MuiSelect-select': {
           outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
+          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
         },
         '&:hover&.MuiButton-root': {
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
+          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
         },
         '&:focus&.MuiButton-root': {
           outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
+          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
         },
         '& .MuiSvgIcon-root': {
           transition: 'none',
@@ -8913,7 +9203,7 @@
       }
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Select dimension"), layerDimensions.map(function (dimension) {
+    }, "Dimension"), layerDimensions.map(function (dimension) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: dimension.name,
         value: dimension.name
@@ -8936,202 +9226,15 @@
       },
       style: {
         maxWidth: '50%'
-      }
-    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-      disabled: true
-    }, "Select dimension value. (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
-      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-        key: dimValue,
-        value: dimValue
-      }, "" + dimValue, /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, "\xA0", /*#__PURE__*/React__namespace.createElement("i", null, "" + activeDim.units)));
-    }))));
-  };
-
-  /* *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   *     http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2021 - Finnish Meteorological Institute (FMI)
-   * */
-  var useStyles$y = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      button: {
-        height: 28,
-        width: 28,
-        borderRadius: 5,
-        marginTop: 2,
-        color: function color(_a) {
-          var isActive = _a.isActive,
-              isAccessible = _a.isAccessible,
-              isEnabled = _a.isEnabled;
-
-          if (!isEnabled) {
-            return theme.palette.geowebColors.buttons.flat.disabled.color;
-          }
-
-          if (isAccessible) {
-            return theme.palette.geowebColors.greys.accessible;
-          }
-
-          if (isActive) {
-            return theme.palette.common.white;
-          }
-
-          return theme.palette.geowebColors.buttons.flat["default"].color;
-        },
-        backgroundColor: function backgroundColor(_a) {
-          var isActive = _a.isActive;
-          return isActive ? theme.palette.geowebColors.buttons.primary.active.fill : 'inherit';
-        },
-        '&:focus': {
-          backgroundColor: function backgroundColor(_a) {
-            var isActive = _a.isActive;
-            return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-          },
-          outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-          borderRadius: 0
-        },
-        '&:hover': {
-          backgroundColor: function backgroundColor(_a) {
-            var isActive = _a.isActive;
-            return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-          }
-        }
-      },
-      popper: {
-        pointerEvents: 'none'
-      }
-    });
-  });
-
-  var LayerManagerButton = function LayerManagerButton(_a) {
-    var _b = _a.tooltipTitle,
-        tooltipTitle = _b === void 0 ? '' : _b,
-        _c = _a.onClick,
-        onClick = _c === void 0 ? function () {} : _c,
-        _d = _a.isActive,
-        isActive = _d === void 0 ? false : _d,
-        _e = _a.isEnabled,
-        isEnabled = _e === void 0 ? true : _e,
-        icon = _a.icon,
-        testId = _a.testId,
-        _f = _a.isAccessible,
-        isAccessible = _f === void 0 ? false : _f,
-        className = _a.className,
-        props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "className"]);
-
-    var classes = useStyles$y({
-      isActive: isActive,
-      isEnabled: isEnabled,
-      isAccessible: isAccessible
-    });
-
-    var handleClick = function handleClick(event) {
-      onClick(event);
-    };
-
-    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-      title: tooltipTitle,
-      placement: "top",
-      classes: {
-        popper: classes.popper
-      }
-    }, /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
-      size: "small",
-      onClick: handleClick,
-      "data-testid": testId,
-      className: classes.button + " " + className,
-      disableFocusRipple: true
-    }, props), icon));
-  };
-
-  /* *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   *     http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2021 - Finnish Meteorological Institute (FMI)
-   * */
-  var useStyles$x = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      checkbox: {
-        color: 'inherit',
-        padding: 4,
-        borderRadius: 5,
-        '&.Mui-focusVisible': {
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
-        },
-        '&:hover': {
-          backgroundColor: 'transparent!important'
-        },
-        '&.Mui-checked': {
-          color: 'inherit'
-        }
-      }
-    });
-  });
-
-  var EnableLayer = function EnableLayer(_a) {
-    var isEnabled = _a.isEnabled,
-        title = _a.title,
-        onChangeEnableLayer = _a.onChangeEnableLayer;
-    var classes = useStyles$x(isEnabled);
-
-    var onClick = function onClick() {
-      onChangeEnableLayer(!isEnabled);
-    };
-
-    var visibilityIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
-      width: 24,
-      height: 24,
-      fill: "transparent"
-    }), /*#__PURE__*/React__namespace.createElement("path", {
-      d: "M14.4980749,15.8618431 C15.8661433,15.0851043 16.779689,13.6936347 16.779689,12.1014551 C16.779689,10.5092755 15.8661433,9.11870594 14.4980749,8.34106705 C17.6257313,9.18620931 19.3529176,11.4300215 19.8092405,12.1014551 C19.3529176,12.7719886 17.6266313,15.0167008 14.4980749,15.8618431 L14.4980749,15.8618431 Z M4.18985949,12.1014551 C4.64618231,11.4300215 6.37336867,9.18710936 9.49922496,8.3419671 C8.13295665,9.11870594 7.21851093,10.5101755 7.21851093,12.1014551 C7.21851093,13.6936347 8.13295665,15.0842042 9.49922496,15.8618431 C6.37336867,15.0167008 4.64618231,12.7728886 4.18985949,12.1014551 L4.18985949,12.1014551 Z M11.99955,13.8583429 C10.9950998,13.8583429 10.180559,13.0717036 10.180559,12.1014551 C10.180559,11.1312066 10.9950998,10.3445672 11.99955,10.3445672 C13.0031002,10.3445672 13.8176409,11.1312066 13.8176409,12.1014551 C13.8176409,13.0717036 13.0031002,13.8583429 11.99955,13.8583429 L11.99955,13.8583429 Z M20.7983899,11.7666383 C20.6813841,11.5713286 17.8696435,7 11.99955,7 C6.12945647,7 3.31681584,11.5713286 3.19980999,11.7666383 L3,12.1014551 L3.19980999,12.4362718 C3.31681584,12.6306815 6.12945647,17.2020101 11.99955,17.2020101 C17.8696435,17.2020101 20.6813841,12.6306815 20.7983899,12.4362718 L21,12.1014551 L20.7983899,11.7666383 Z"
-    }));
-    var visibilityOffIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
-      style: {
-        marginTop: 2
-      }
-    }, /*#__PURE__*/React__namespace.createElement("rect", {
-      width: 24,
-      height: 24,
-      fill: "transparent"
-    }), /*#__PURE__*/React__namespace.createElement("path", {
-      d: "M12 15.309c-.755 0-1.45-.088-2.092-.236l.798-.797c.41.124.844.192 1.294.192 2.453 0 4.442-1.988 4.442-4.44 0-.495-.085-.907-.234-1.255l.03-.03c1.72.906 2.781 2.167 3.218 2.766-.724.992-3.151 3.8-7.456 3.8zm-7.456-3.8c.442-.607 1.522-1.89 3.276-2.796-.166.36-.261.79-.261 1.315 0 1.228.499 2.34 1.305 3.144l-1.102 1.104c-1.72-.906-2.78-2.169-3.218-2.767zm5.646-3.524c.818 0 1.482.665 1.482 1.483 0 .818-.664 1.481-1.482 1.481s-1.482-.663-1.482-1.481c0-.818.664-1.483 1.482-1.483zm10.608 3.19c-.073-.125-1.245-2.026-3.603-3.388l2.009-2.01c.406-.406.406-1.065 0-1.473-.407-.405-1.066-.405-1.473 0l-2.58 2.582c-.93-.295-1.98-.478-3.151-.478-5.87 0-8.681 4.57-8.798 4.766L3 11.51l.202.335c.073.124 1.244 2.025 3.603 3.387l-2.009 2.01c-.406.406-.406 1.065 0 1.472.204.203.47.305.737.305.266 0 .532-.102.736-.305l2.58-2.58c.93.293 1.98.476 3.151.476 5.87 0 8.681-4.57 8.798-4.765l.202-.335-.202-.335z"
-    }));
-    return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
-      tooltipTitle: title,
-      onClick: onClick,
-      icon: /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
-        className: classes.checkbox,
-        icon: visibilityOffIcon,
-        checkedIcon: visibilityIcon,
-        checked: isEnabled,
-        disableFocusRipple: true,
-        tabIndex: -1
-      }),
-      testId: "enableLayer",
-      isEnabled: isEnabled
-    });
+      }
+    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+      disabled: true
+    }, "Dimension value (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
+      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+        key: dimValue,
+        value: dimValue
+      }, "" + dimValue, /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, "\xA0", /*#__PURE__*/React__namespace.createElement("i", null, "" + activeDim.units)));
+    }))));
   };
 
   /* *
@@ -9150,7 +9253,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$w = makeStyles__default["default"](function (theme) {
+  var useStyles$v = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       dropdownEmpty: {
         paddingLeft: 8,
@@ -9200,7 +9303,7 @@
         layers = _b === void 0 ? [] : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c;
-    var classes = useStyles$w();
+    var classes = useStyles$v();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
     if (!layers || !layers.length) {
@@ -9246,7 +9349,7 @@
       requiresCtrlToChange: true
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Select layer"), extendedLayers.map(function (layerFromServiceLayers) {
+    }, "Layer"), extendedLayers.map(function (layerFromServiceLayers) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: layerFromServiceLayers.name,
         value: layerFromServiceLayers.name,
@@ -9271,7 +9374,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$v = makeStyles__default["default"](function (theme) {
+  var useStyles$u = makeStyles__default["default"](function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -9332,7 +9435,7 @@
         onLayerChangeOpacity = _a.onLayerChangeOpacity,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$v();
+    var classes = useStyles$u();
     var sliderClasses = shared.sliderStyles();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -9534,7 +9637,7 @@
       requiresCtrlToChange: true
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Select style"), styles.map(function (styleFromlayer) {
+    }, "Style"), styles.map(function (styleFromlayer) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: styleFromlayer.name,
         value: styleFromlayer.name
@@ -9542,48 +9645,6 @@
     }));
   };
 
-  /* *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   *     http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2021 - Finnish Meteorological Institute (FMI)
-   * */
-  var useStyles$u = makeStyles__default["default"](function () {
-    return createStyles__default["default"]({
-      icon: {
-        width: 20,
-        height: 20
-      }
-    });
-  });
-
-  var DeleteButton = function DeleteButton(_a) {
-    var tooltipTitle = _a.tooltipTitle,
-        onClickDelete = _a.onClickDelete,
-        _b = _a.isEnabled,
-        isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$u();
-    return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
-      tooltipTitle: tooltipTitle,
-      onClick: onClickDelete,
-      icon: /*#__PURE__*/React__namespace.createElement(iconsMaterial.Delete, {
-        className: classes.icon
-      }),
-      testId: "deleteButton",
-      isEnabled: isEnabled
-    });
-  };
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -9604,13 +9665,18 @@
     return createStyles__default["default"]({
       svgIcon: {
         fill: function fill(_a) {
-          var isActive = _a.isActive;
+          var isActive = _a.isActive,
+              isEnabled = _a.isEnabled;
 
           if (isActive) {
             return theme.palette.common.white;
           }
 
-          return theme.palette.geowebColors.buttons.flat["default"].color;
+          if (isEnabled) {
+            return theme.palette.geowebColors.buttons.flat["default"].color;
+          }
+
+          return theme.palette.geowebColors.buttons.flat.disabled.color;
         }
       }
     });
@@ -9652,7 +9718,7 @@
       }))));
     };
 
-    return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
+    return /*#__PURE__*/React__namespace.createElement(shared.ManagerButton, {
       tooltipTitle: tooltipTitle,
       onClick: onClickActivate,
       icon: /*#__PURE__*/React__namespace.createElement(Icon, null),
@@ -9711,6 +9777,8 @@
     } : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c,
+        _d = _a.isLayerMissing,
+        isLayerMissing = _d === void 0 ? false : _d,
         onLayerEnable = _a.onLayerEnable,
         onLayerChangeName = _a.onLayerChangeName,
         onLayerChangeStyle = _a.onLayerChangeStyle,
@@ -9744,7 +9812,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: columnSizes.column1
-    }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(EnableLayer, {
+    }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(shared.EnableButton, {
       isEnabled: layer.enabled,
       title: layer.name,
       onChangeEnableLayer: function onChangeEnableLayer() {
@@ -9767,7 +9835,13 @@
           name: name
         });
       }
-    })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+    })), isLayerMissing ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      item: true,
+      className: "" + columnSizes.columns35
+    }, /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
+      title: "This layer could not be loaded: does not exist on the server.",
+      isCompact: true
+    })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: "" + columnSizes.column3
     }, layerStylesLayout || /*#__PURE__*/React__default["default"].createElement(RenderStyles, {
@@ -9810,10 +9884,10 @@
           dimension: dimension
         });
       }
-    })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+    }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: columnSizes.column6
-    }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(DeleteButton, {
+    }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(shared.ManagerDeleteButton, {
       tooltipTitle: "Remove layer",
       onClickDelete: function onClickDelete() {
         onLayerDelete({
@@ -9863,7 +9937,7 @@
     var isLayerEnabled = reactRedux.useSelector(function (store) {
       return getLayerEnabled(store, layerId);
     });
-    return /*#__PURE__*/React__namespace.createElement(DeleteButton, {
+    return /*#__PURE__*/React__namespace.createElement(shared.ManagerDeleteButton, {
       tooltipTitle: "Remove layer",
       onClickDelete: function onClickDelete() {
         layerDelete$1({
@@ -9907,7 +9981,7 @@
         enabled: enabled
       }));
     }, [dispatch]);
-    return /*#__PURE__*/React__namespace.createElement(EnableLayer, {
+    return /*#__PURE__*/React__namespace.createElement(shared.EnableButton, {
       isEnabled: isEnabled,
       title: "Toggle this layer's visibility",
       onChangeEnableLayer: function onChangeEnableLayer(enable) {
@@ -10251,10 +10325,23 @@
     var isEnabled = reactRedux.useSelector(function (store) {
       return getLayerEnabled(store, layerId);
     });
+    var layerName = reactRedux.useSelector(function (store) {
+      return getLayerName(store, layerId);
+    });
+    var layerService = reactRedux.useSelector(function (store) {
+      return getLayerService(store, layerId);
+    });
+    var layers = reactRedux.useSelector(function (store) {
+      return getLayersFromService$1(store, layerService);
+    });
+    var isLayerMissing = layers && layers.length > 0 && !layers.some(function (l) {
+      return l.name === layerName;
+    });
     return /*#__PURE__*/React__namespace.createElement(LayerRow, {
       isEnabled: isEnabled,
       mapId: mapId,
       layerId: layerId,
+      isLayerMissing: isLayerMissing,
       layerEnableLayout: /*#__PURE__*/React__namespace.createElement(EnableLayerConnect, {
         layerId: layerId
       }),
@@ -10314,7 +10401,7 @@
         _d = _a.hideTooltip,
         hideTooltip = _d === void 0 ? false : _d;
     var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
-    return /*#__PURE__*/React__default["default"].createElement(LayerManagerButton, {
+    return /*#__PURE__*/React__default["default"].createElement(shared.ManagerButton, {
       tooltipTitle: tooltipTitle,
       icon: /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null),
       testId: "dragHandle" + (index !== undefined ? "-" + index : ''),
@@ -10516,7 +10603,7 @@
       }
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Select base layer"), availableBaseLayers.map(function (baseLayer) {
+    }, "Base layer"), availableBaseLayers.map(function (baseLayer) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: baseLayer.id,
         value: baseLayer.id
@@ -15422,13 +15509,15 @@
     }
   };
 
-  var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale) {
+  var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale) {
     var ctx = context;
     var _a = theme.palette.geowebColors.timeSlider,
         timelineTimelineSurface = _a.timelineTimelineSurface,
         timelineNightTime = _a.timelineNightTime;
     ctx.fillStyle = timelineTimelineSurface.fill;
     ctx.fillRect(0, 0, canvasWidth, height);
+    ctx.fillStyle = theme.palette.geowebColors.timeSlider.timelineSelectionBackground.rgba;
+    ctx.fillRect(animationStartPx, 0, Math.max(animationEndPx - animationStartPx, 0), height);
     var colorChangeUnit = getColorChangeTimestepUnit(scale);
 
     var _b = __read(getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, colorChangeUnit), 2),
@@ -15522,7 +15611,7 @@
     drawLeftSideDateText(ctx, theme, dateText, height);
   };
 
-  var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix) {
+  var renderTimeSliderLegend = function renderTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTimeUnix, scale, currentTimeUnix, animationStartTime, animationEndTime) {
     var ctx = context;
 
     var _a = __read([0, canvasWidth].map(function (px) {
@@ -15531,7 +15620,13 @@
         visibleTimeStart = _a[0],
         visibleTimeEnd = _a[1];
 
-    drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale);
+    var _b = __read([animationStartTime, animationEndTime].map(function (time) {
+      return timestampToPixel(time, centerTime, canvasWidth, secondsPerPx);
+    }), 2),
+        animationStartPx = _b[0],
+        animationEndPx = _b[1];
+
+    drawBackground(ctx, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, scale);
     drawTimeScale(ctx, theme, visibleTimeStart, visibleTimeEnd, canvasWidth, height, scale, dataScaleToSecondsPerPx);
     drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
     drawCurrentTime(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, currentTimeUnix);
@@ -15962,6 +16057,8 @@
         currentTime = _a.currentTime,
         dataStartTime = _a.dataStartTime,
         dataEndTime = _a.dataEndTime,
+        animationStartTime = _a.animationStartTime,
+        animationEndTime = _a.animationEndTime,
         isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
         timeStep = _a.timeStep,
         onSetNewDate = _a.onSetNewDate,
@@ -15985,6 +16082,18 @@
         isNewSelectionTimeRequested = _g[0],
         setNewSelectionTimeRequested = _g[1];
 
+    var _h = __read(React__namespace.useState(animationStartTime && moment__default["default"].utc(animationStartTime).unix()), 2),
+        localAnimationStartTime = _h[0],
+        setLocalAnimationStartTime = _h[1];
+
+    var _j = __read(React__namespace.useState(animationEndTime && moment__default["default"].utc(animationEndTime).unix()), 2),
+        localAnimationEndTime = _j[0],
+        setLocalAnimationEndTime = _j[1];
+
+    React__namespace.useEffect(function () {
+      setLocalAnimationStartTime(animationStartTime && moment__default["default"].utc(animationStartTime).unix());
+      setLocalAnimationEndTime(animationEndTime && moment__default["default"].utc(animationEndTime).unix());
+    }, [animationStartTime, animationEndTime]);
     React__namespace.useEffect(function () {
       var handleKeyDown = function handleKeyDown(event) {
         if (event.key === 'Home') {
@@ -16082,7 +16191,7 @@
         }
       },
       onRenderCanvas: function onRenderCanvas(ctx, width, height) {
-        renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime);
+        renderTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, dataScaleToSecondsPerPx, selectedTime, scale, currentTime, localAnimationStartTime, localAnimationEndTime);
       }
     }));
   };
@@ -16374,6 +16483,9 @@
     var svgIconPath = new Path2D('M8.843 1.029c-.56 0-.814.362-.814.699 0 .179.065.36.19.54l3.06 4.34c.065.093.14.171.221.234v8.373c-.082.064-.156.142-.22.234L8.219 19.79c-.125.18-.19.361-.19.54 0 .337.255.699.814.699h6.373c.56 0 .813-.361.813-.7 0-.178-.064-.36-.19-.538l-3.06-4.343c-.08-.112-.174-.204-.278-.273V6.883c.104-.069.199-.16.278-.273l3.06-4.343c.126-.179.19-.36.19-.539 0-.338-.254-.7-.813-.7z');
     ctx.fillStyle = playerTimeMarkers.fill;
     ctx.fill(svgIconPath);
+    ctx.strokeStyle = theme.palette.geowebColors.timeSlider.playerNeedlePlayer.rgba;
+    ctx.lineWidth = 1;
+    ctx.stroke(svgIconPath);
     ctx.restore();
   };
 
@@ -17168,10 +17280,10 @@
   var animationIntervalDefault = 5;
   var connectRedux$3 = reactRedux.connect(function (store, props) {
     return {
-      isAnimating: isAnimating(store, props.mapId),
       animationStartTime: getAnimationStartTime(store, props.mapId),
       animationEndTime: getAnimationEndTime(store, props.mapId),
-      timeStep: getMapTimeStep(store, props.mapId)
+      timeStep: getMapTimeStep(store, props.mapId),
+      linkedMapAnimationInfo: linkedMapAnimationInfo(store, props.mapId)
     };
   }, {
     mapStartAnimation: mapStartAnimation,
@@ -17179,19 +17291,19 @@
   });
   var PlayButtonConnect = connectRedux$3(function (_a) {
     var mapId = _a.mapId,
-        isAnimating = _a.isAnimating,
         animationStartTime = _a.animationStartTime,
         animationEndTime = _a.animationEndTime,
         isDisabled = _a.isDisabled,
         timeStep = _a.timeStep,
+        linkedMapAnimationInfo = _a.linkedMapAnimationInfo,
         mapStartAnimation = _a.mapStartAnimation,
         mapStopAnimation = _a.mapStopAnimation;
     var animationInterval = timeStep || animationIntervalDefault;
 
     var onTogglePlay = function onTogglePlay() {
-      if (isAnimating) {
+      if (linkedMapAnimationInfo.isAnimating) {
         mapStopAnimation({
-          mapId: mapId
+          mapId: linkedMapAnimationInfo.id
         });
       } else {
         mapStartAnimation({
@@ -17204,7 +17316,7 @@
     };
 
     return /*#__PURE__*/React__default["default"].createElement(PlayButton, {
-      isAnimating: isAnimating,
+      isAnimating: linkedMapAnimationInfo.isAnimating,
       isDisabled: isDisabled,
       onTogglePlayButton: function onTogglePlayButton() {
         onTogglePlay();
@@ -17261,52 +17373,6 @@
     });
   };
 
-  /* *
-   * 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 synchronizationGroupStore = function synchronizationGroupStore(store) {
-    return store && store.syncronizationGroupStore ? store.syncronizationGroupStore : null;
-  };
-
-  var getSynchronizationGroupStore = reselect.createSelector(synchronizationGroupStore, function (store) {
-    return store;
-  });
-  /**
-   * Returns the synchronization source by id
-   * @param store The app store
-   * @param id The source id to find
-   */
-
-  var getSyncSourceBySourceId = function getSyncSourceBySourceId(state, id) {
-    if (state && state.sources) {
-      var sources = state.sources;
-
-      if (sources.byId[id]) {
-        return sources.byId[id];
-      }
-    }
-
-    return null;
-  };
-
-  var getTime = reselect.createSelector(getSyncSourceBySourceId, function (store) {
-    return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
-  });
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -17334,7 +17400,9 @@
       isAnimating: isAnimating(store, props.mapId),
       timeStep: getMapTimeStep(store, props.mapId),
       isTimeSliderHoverOn: isTimeSliderHoverOn(store, props.mapId),
-      timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId)
+      timeValue: getTime(getSynchronizationGroupStore(store), props.sourceId),
+      animationStartTime: getAnimationStartTime(store, props.mapId),
+      animationEndTime: getAnimationEndTime(store, props.mapId)
     };
   }, {
     stopMapAnimation: mapStopAnimation,
@@ -17357,6 +17425,8 @@
         isAnimating = _a.isAnimating,
         timeStep = _a.timeStep,
         isTimeSliderHoverOn = _a.isTimeSliderHoverOn,
+        animationStartTime = _a.animationStartTime,
+        animationEndTime = _a.animationEndTime,
         stopMapAnimation = _a.stopMapAnimation,
         setTime = _a.setTime,
         syncGroupAddSource = _a.syncGroupAddSource,
@@ -17391,6 +17461,8 @@
       isTimeSliderHoverOn: isTimeSliderHoverOn,
       dataStartTime: dataStartTime,
       dataEndTime: dataEndTime,
+      animationStartTime: animationStartTime,
+      animationEndTime: animationEndTime,
       timeStep: timeStep,
       onSetNewDate: function onSetNewDate(newDate) {
         if (isAnimating) {
@@ -23324,103 +23396,6 @@
     });
   });
 
-  /* *
-   * Licensed under the Apache License, Version 2.0 (the "License");
-   * you may not use this file except in compliance with the License.
-   * You may obtain a copy of the License at
-   *
-   *     http://www.apache.org/licenses/LICENSE-2.0
-   *
-   * Unless required by applicable law or agreed to in writing, software
-   * distributed under the License is distributed on an "AS IS" BASIS,
-   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   * See the License for the specific language governing permissions and
-   * limitations under the License.
-   *
-   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2021 - Finnish Meteorological Institute (FMI)
-   * */
-  var emptyState = {
-    timeslider: {
-      groups: [],
-      sourcesById: []
-    },
-    zoompane: {
-      groups: [],
-      sourcesById: []
-    },
-    level: {
-      groups: [],
-      sourcesById: []
-    }
-  };
-  var groupTypes = [{
-    title: 'Timeslider',
-    syncType: 'SYNCGROUPS_TYPE_SETTIME',
-    groupType: 'timeslider'
-  }, {
-    title: 'Zoompane',
-    syncType: 'SYNCGROUPS_TYPE_SETBBOX',
-    groupType: 'zoompane'
-  }];
-  /*
-      _____ Creates viewState  _____
-        - Runs Each time viewState is created:
-        - Fill arrays inside initialState with objects containing new values from Redux
-  */
-
-  var createSyncGroupViewState = function createSyncGroupViewState(syncState) {
-    var initialState = produce__default["default"](emptyState, function (draft) {
-      /*
-        _____ 1. Fill groups _____
-          1. Goes through all groups by ID
-          2. Collects original timeslider or zoompane values into an array
-          3. Sorts and adds selected sources to ViewState based on ID type
-      */
-      Object.keys(syncState.groups.byId).forEach(function (id) {
-        var _a;
-
-        var groupType = (_a = groupTypes.find(function (object) {
-          return object.syncType === syncState.groups.byId[id].type;
-        })) === null || _a === void 0 ? void 0 : _a.groupType;
-
-        if (groupType) {
-          draft[groupType].groups.push({
-            id: id,
-            selected: syncState.groups.byId[id].targets.allIds
-          });
-        }
-      });
-      /*
-        _____ 2. Fill sourcesById _____
-          1. Loop though sources and add source to each group type
-      */
-
-      Object.keys(syncState.sources.byId).forEach(function (id) {
-        groupTypes.forEach(function (_a) {
-          var syncType = _a.syncType,
-              groupType = _a.groupType;
-
-          if (syncState.sources.byId[id].types.includes(syncType)) {
-            draft[groupType].sourcesById.push({
-              id: id,
-              name: id
-            });
-          }
-        });
-      });
-    });
-    return initialState;
-  }; // TODO
-  // Improve selector to reduce unnecessary re-rendering
-  // https://gitlab.com/opengeoweb/opengeoweb/-/issues/1333
-
-  var syncState = function syncState(store) {
-    return store.syncronizationGroupStore;
-  };
-
-  var createSyncGroupViewStateSelector = reselect.createSelector(syncState, createSyncGroupViewState);
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -23444,7 +23419,10 @@
         syncGroupAddTarget = _a.syncGroupAddTarget,
         syncGroupRemoveTarget = _a.syncGroupRemoveTarget,
         syncGroupAddGroup = _a.syncGroupAddGroup,
-        syncGroupRemoveGroup = _a.syncGroupRemoveGroup;
+        syncGroupRemoveGroup = _a.syncGroupRemoveGroup,
+        onMouseDown = _a.onMouseDown,
+        _b = _a.order,
+        order = _b === void 0 ? 0 : _b;
     /*
         _____ Handle Toggle _____
           - Handles checking, unchecking and toggling between in groups
@@ -23549,7 +23527,9 @@
       headerSize: "medium",
       isOpen: isOpen,
       onClose: onClose,
-      "data-testid": "syncGroupViewer"
+      "data-testid": "syncGroupViewer",
+      onMouseDown: onMouseDown,
+      order: order
     }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(SyncGroupList, {
       viewStateData: syncGroupViewState.zoompane,
       title: "ZoomPane",
@@ -23605,14 +23585,12 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var SyncGroupViewerConnect = function SyncGroupViewerConnect(_a) {
-    var onClose = _a.onClose,
-        isOpen = _a.isOpen;
+  var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
     var dispatch = reactRedux.useDispatch(); // TODO
     // Improve the selector to prevent re-renders
     // For example dusting anination syncgroups should not re-render
 
-    var viewState = reactRedux.useSelector(createSyncGroupViewStateSelector);
+    var viewState = reactRedux.useSelector(syncGroupGetViewState);
     var syncGroupAddGroup$1 = React__namespace.useCallback(function (payload) {
       return dispatch(syncGroupAddGroup(payload));
     }, [dispatch]);
@@ -23625,14 +23603,55 @@
     var syncGroupRemoveTarget$1 = React__namespace.useCallback(function (payload) {
       return dispatch(syncGroupRemoveTarget(payload));
     }, [dispatch]);
+    var isOpenInStore = reactRedux.useSelector(function (store) {
+      return getisDialogOpen(store, 'syncGroups');
+    });
+    var onClose = React__namespace.useCallback(function () {
+      return dispatch(setToggleOpenDialog({
+        type: 'syncGroups',
+        setOpen: false
+      }));
+    }, [dispatch]);
+    var uiOrder = reactRedux.useSelector(function (store) {
+      return getDialogOrder(store, 'syncGroups');
+    });
+    var uiIsOrderedOnTop = reactRedux.useSelector(function (store) {
+      return getDialogIsOrderedOnTop(store, 'syncGroups');
+    });
+    var registerDialog$1 = React__namespace.useCallback(function () {
+      return dispatch(registerDialog({
+        type: 'syncGroups',
+        setOpen: false
+      }));
+    }, [dispatch]);
+    var unregisterDialog$1 = React__namespace.useCallback(function () {
+      return dispatch(unregisterDialog({
+        type: 'syncGroups'
+      }));
+    }, [dispatch]);
+    var onOrderDialog = React__namespace.useCallback(function () {
+      if (!uiIsOrderedOnTop) {
+        dispatch(orderDialog({
+          type: 'syncGroups'
+        }));
+      }
+    }, [dispatch, uiIsOrderedOnTop]);
+    React__namespace.useEffect(function () {
+      registerDialog$1();
+      return function () {
+        unregisterDialog$1();
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return /*#__PURE__*/React__namespace.createElement(SyncGroupViewer, {
       onClose: onClose,
-      isOpen: isOpen,
+      isOpen: isOpenInStore,
       syncGroupViewState: viewState,
       syncGroupAddTarget: syncGroupAddTarget$1,
       syncGroupRemoveTarget: syncGroupRemoveTarget$1,
       syncGroupAddGroup: syncGroupAddGroup$1,
-      syncGroupRemoveGroup: syncGroupRemoveGroup$1
+      syncGroupRemoveGroup: syncGroupRemoveGroup$1,
+      order: uiOrder,
+      onMouseDown: onOrderDialog
     });
   };
 
@@ -23877,7 +23896,7 @@
   exports.layerReducer = reducer$6;
   exports.makeMapPreset = makeMapPreset;
   exports.mapActions = actions$3;
-  exports.mapConstants = constants$1;
+  exports.mapConstants = constants;
   exports.mapModuleConfig = moduleConfig;
   exports.mapSelectors = selectors$1;
   exports.mapTypes = types$2;