@opengeoweb/core 2.2.1 → 2.4.1

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 }; }
 
@@ -73,6 +73,7 @@
   var WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX = 'WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX';
   var WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX = 'WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX';
   var WEBMAP_SET_PIN = 'WEBMAP_SET_PIN';
+  var WEBMAP_DISABLE_PIN = 'WEBMAP_DISABLE_PIN';
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -381,6 +382,19 @@
       payload: payload
     };
   };
+  /**
+   * Sets the diable map pin boolean
+   *
+   * Example: setMapPinLocation({ mapId: 'mapId1', diableMapPin: true })
+   * @param {object} payload object with mapId: string, diableMapPin: boolean
+   */
+
+  var setDisableMapPin = function setDisableMapPin(payload) {
+    return {
+      type: WEBMAP_DISABLE_PIN,
+      payload: payload
+    };
+  };
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -757,6 +771,7 @@
     setTimeSliderSecondsPerPx: setTimeSliderSecondsPerPx,
     setTimeSliderDataScaleToSecondsPerPx: setTimeSliderDataScaleToSecondsPerPx,
     setMapPinLocation: setMapPinLocation,
+    setDisableMapPin: setDisableMapPin,
     setLayers: setLayers,
     setBaseLayers: setBaseLayers,
     addBaseLayer: addBaseLayer,
@@ -1292,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.
 
@@ -2233,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
    *
@@ -2502,7 +2642,7 @@
   /**
    * Returns the mapPinLocation for the current map
    *
-   * Example getAllUniqueDimensions(store);
+   * Example getPinLocation(store);
    * @param {object} store store: object - store object
    * @param {string} mapId mapId: string - Id of the map
    * @returns {object} returnType: latitude and longitude of pin
@@ -2511,6 +2651,18 @@
   var getPinLocation = reselect.createSelector(getMapById, function (store) {
     return store ? store.mapPinLocation : undefined;
   }, selectorMemoizationOptions);
+  /**
+   * Returns the disable map pin boolean for the current map
+   *
+   * Example getDisableMapPin(store);
+   * @param {object} store store: object - store object
+   * @param {string} mapId mapId: string - Id of the map
+   * @returns {boolean} returnType: boolean or undefined
+   */
+
+  var getDisableMapPin = reselect.createSelector(getMapById, function (store) {
+    return store ? store.disableMapPin : undefined;
+  });
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2662,7 +2814,7 @@
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
 
-  var selectors = /*#__PURE__*/Object.freeze({
+  var selectors$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     getMapById: getMapById,
     getAllMapIds: getAllMapIds,
@@ -2680,6 +2832,7 @@
     getSrs: getSrs,
     getBbox: getBbox,
     isAnimating: isAnimating,
+    linkedMapAnimationInfo: linkedMapAnimationInfo,
     getAnimationStartTime: getAnimationStartTime,
     getAnimationEndTime: getAnimationEndTime,
     isAutoUpdating: isAutoUpdating,
@@ -2700,6 +2853,7 @@
     getLayerByLayerIndex: getLayerByLayerIndex,
     getAllUniqueDimensions: getAllUniqueDimensions,
     getPinLocation: getPinLocation,
+    getDisableMapPin: getDisableMapPin,
     getLayerById: getLayerById,
     getLayersById: getLayersById,
     getLayersIds: getLayersIds,
@@ -2744,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,
@@ -2768,6 +2922,7 @@
     WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX: WEBMAP_SET_TIME_SLIDER_SECONDS_PER_PX,
     WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX: WEBMAP_SET_TIME_SLIDER_DATA_SCALE_TO_SECONDS_PER_PX,
     WEBMAP_SET_PIN: WEBMAP_SET_PIN,
+    WEBMAP_DISABLE_PIN: WEBMAP_DISABLE_PIN,
     WEBMAP_LAYER_CHANGE_OPACITY: WEBMAP_LAYER_CHANGE_OPACITY,
     WEBMAP_LAYER_CHANGE_NAME: WEBMAP_LAYER_CHANGE_NAME,
     WEBMAP_LAYER_CHANGE_STYLE: WEBMAP_LAYER_CHANGE_STYLE,
@@ -2901,6 +3056,130 @@
     orderDialog: orderDialog
   });
 
+  /* *
+   * 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)
+   * */
+  /**
+   * Gets the active map Id and wether a dialog is open or closed
+   *
+   * Example: getDialogDetailsByType(store, 'legend')
+   * @param {object} store store object from which the ui state wll be extracted
+   * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+   * @returns {array} [string, boolean] first element gives the active map id, second element whether the dialog is open
+   */
+
+  var getDialogDetailsByType = function getDialogDetailsByType(store, dialogType) {
+    if (store && store.ui && store.ui.dialogs && store.ui.dialogs[dialogType]) {
+      return store.ui.dialogs[dialogType];
+    }
+
+    return null;
+  };
+  /**
+   * For a given ui component: gets wether the dialog is open or closed
+   *
+   * @param {object} store store object from which the ui state wll be extracted
+   * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+   * @returns {boolean} returnType: boolean
+   */
+
+  var getisDialogOpen = reselect.createSelector(getDialogDetailsByType, function (details) {
+    if (details) {
+      return details.isOpen;
+    }
+
+    return false;
+  });
+  /**
+   *For a given ui component: gets the active map Id
+   *
+   * @param {object} store store object from which the ui state wll be extracted
+   * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
+   * @returns {string} returnType: string - the active map id
+   */
+
+  var getDialogMapId = reselect.createSelector(getDialogDetailsByType, function (details) {
+    if (details) {
+      return details.activeMapId;
+    }
+
+    return '';
+  });
+  /**
+   *For a given ui component: gets the order of visible dialog
+   *
+   * @param {object} store store object from which the ui state wll be extracted
+   * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
+   * @returns {number} the higher the order number the higher the zIndex
+   */
+
+  var getDialogOrder = reselect.createSelector(function (store, dialogType) {
+    if (store && store.ui && store.ui.order) {
+      var order = store.ui.order;
+      var visibleOrder = order.filter(function (orderedDialogType) {
+        return store.ui.dialogs[orderedDialogType].isOpen;
+      });
+
+      if (!visibleOrder.includes(dialogType)) {
+        return 0;
+      }
+
+      return visibleOrder.length - visibleOrder.indexOf(dialogType);
+    }
+
+    return 0;
+  }, function (order) {
+    return order;
+  });
+  /**
+   *For a given ui component: returns if ordered on top
+   *
+   * @param {object} store store object from which the ui state wll be extracted
+   * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
+   * @returns {boolean}
+   */
+
+  var getDialogIsOrderedOnTop = reselect.createSelector(function (store, dialogType) {
+    if (store && store.ui && store.ui.order) {
+      var order = store.ui.order;
+      return order.includes(dialogType) && order.indexOf(dialogType) === 0;
+    }
+
+    return false;
+  }, function (isOrderedOnTop) {
+    return isOrderedOnTop;
+  });
+  var getDialogSource = reselect.createSelector(getDialogDetailsByType, function (details) {
+    if (details && details.source) {
+      return details.source;
+    }
+
+    return 'app';
+  });
+
+  var selectors = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    getDialogDetailsByType: getDialogDetailsByType,
+    getisDialogOpen: getisDialogOpen,
+    getDialogMapId: getDialogMapId,
+    getDialogOrder: getDialogOrder,
+    getDialogIsOrderedOnTop: getDialogIsOrderedOnTop,
+    getDialogSource: getDialogSource
+  });
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -2957,56 +3236,7 @@
    * 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.
-   * 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)
-   * */
-  /* Actions for sources */
+  /* Actions for sources */
 
   /**
    * Add a source component to the sources list.
@@ -3135,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,
@@ -3145,7 +3381,8 @@
     syncGroupLinkTarget: syncGroupLinkTarget,
     syncGroupAddGroup: syncGroupAddGroup,
     syncGroupRemoveGroup: syncGroupRemoveGroup,
-    syncGroupClear: syncGroupClear
+    syncGroupClear: syncGroupClear,
+    syncGroupSetViewState: syncGroupSetViewState
   });
 
   /* *
@@ -3215,7 +3452,8 @@
     syncGroupLinkTarget: syncGroupLinkTarget,
     syncGroupAddGroup: syncGroupAddGroup,
     syncGroupRemoveGroup: syncGroupRemoveGroup,
-    syncGroupClear: syncGroupClear
+    syncGroupClear: syncGroupClear,
+    syncGroupSetViewState: syncGroupSetViewState
   });
 
   /* *
@@ -3831,6 +4069,20 @@
     groups: {
       byId: {},
       allIds: []
+    },
+    viewState: {
+      timeslider: {
+        groups: [],
+        sourcesById: []
+      },
+      zoompane: {
+        groups: [],
+        sourcesById: []
+      },
+      level: {
+        groups: [],
+        sourcesById: []
+      }
     }
   };
   var reducer$4 = function reducer(state, action) {
@@ -4051,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;
     }
@@ -4164,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");
@@ -4928,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.
@@ -5077,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) {
@@ -5096,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*/
           ];
@@ -5143,40 +5578,6 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$I = 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,
@@ -5186,20 +5587,20 @@
         currentIndex = _c === void 0 ? -1 : _c,
         _d = _a.onChangeMouseWheel,
         onChangeMouseWheel = _d === void 0 ? function () {} : _d,
-        props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel"]);
+        _e = _a.requiresCtrlToChange,
+        requiresCtrlToChange = _e === void 0 ? false : _e,
+        props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange"]);
 
     props.disableUnderline;
         var otherProps = __rest(props, ["disableUnderline"]);
 
-    var _e = __read(React__namespace.useState(false), 2),
-        selectOpen = _e[0],
-        setSelectOpen = _e[1];
-
     var _f = __read(React__namespace.useState(false), 2),
-        tooltipOpen = _f[0],
-        setTooltipOpen = _f[1];
+        selectOpen = _f[0],
+        setSelectOpen = _f[1];
 
-    var classes = useStyles$I();
+    var _g = __read(React__namespace.useState(false), 2),
+        tooltipOpen = _g[0],
+        setTooltipOpen = _g[1];
 
     var preventDefault = function preventDefault(event) {
       event.preventDefault();
@@ -5215,11 +5616,14 @@
       });
     }, []);
     var onWheel = React__namespace.useCallback(function (event) {
-      if (selectOpen) return;
-      var direction = event.deltaY < 0 ? 1 : -1;
-      var newValue = list[Math.min(Math.max(currentIndex - direction, 0), list.length - 1)];
-      onChangeMouseWheel(newValue);
-    }, [selectOpen, currentIndex, list, onChangeMouseWheel]);
+      if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
+        disableScroll();
+        if (selectOpen) return;
+        var direction = event.deltaY < 0 ? 1 : -1;
+        var newValue = list[Math.min(Math.max(currentIndex - direction, 0), list.length - 1)];
+        onChangeMouseWheel(newValue);
+      } else enableScroll();
+    }, [selectOpen, currentIndex, list, onChangeMouseWheel, enableScroll, disableScroll, requiresCtrlToChange]);
     var onOpen = React__namespace.useCallback(function () {
       setSelectOpen(true);
       setTooltipOpen(false);
@@ -5228,17 +5632,23 @@
       setSelectOpen(false);
     }, []);
     var onMouseEnter = React__namespace.useCallback(function () {
-      disableScroll();
+      if (!requiresCtrlToChange) {
+        disableScroll();
+      }
+
       if (!selectOpen) setTooltipOpen(true);
-    }, [selectOpen, disableScroll]);
+    }, [selectOpen, disableScroll, requiresCtrlToChange]);
     var onMouseLeave = React__namespace.useCallback(function () {
       enableScroll();
       setTooltipOpen(false);
     }, [enableScroll]);
     var onFocus = React__namespace.useCallback(function () {
-      disableScroll();
+      if (!requiresCtrlToChange) {
+        disableScroll();
+      }
+
       setTooltipOpen(true);
-    }, [disableScroll]);
+    }, [disableScroll, requiresCtrlToChange]);
     var onBlur = React__namespace.useCallback(function () {
       enableScroll();
       setTooltipOpen(false);
@@ -5256,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)));
@@ -5306,7 +5754,7 @@
   var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     actions: actions$1,
-    constants: constants,
+    constants: constants$1,
     types: types,
     initialState: initialState$4
   });
@@ -5431,138 +5879,24 @@
           return produce.produce(state, function (draft) {
             draft.dialogs[type_4].isOpen = setOpen_2;
 
-            if (setOpen_2) {
-              draft.order = moveToTop(state.order, type_4);
-            }
-          });
-        }
-
-      case UI_ORDER_DIALOG:
-        {
-          var type_5 = action.payload.type;
-          return produce.produce(state, function (draft) {
-            draft.order = moveToTop(state.order, type_5);
-          });
-        }
-
-      default:
-        return 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2021 - Finnish Meteorological Institute (FMI)
-   * */
-  /**
-   * Gets the active map Id and wether a dialog is open or closed
-   *
-   * Example: getDialogDetailsByType(store, 'legend')
-   * @param {object} store store object from which the ui state wll be extracted
-   * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
-   * @returns {array} [string, boolean] first element gives the active map id, second element whether the dialog is open
-   */
-
-  var getDialogDetailsByType = function getDialogDetailsByType(store, dialogType) {
-    if (store && store.ui && store.ui.dialogs && store.ui.dialogs[dialogType]) {
-      return store.ui.dialogs[dialogType];
-    }
-
-    return null;
-  };
-  /**
-   * For a given ui component: gets wether the dialog is open or closed
-   *
-   * @param {object} store store object from which the ui state wll be extracted
-   * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
-   * @returns {boolean} returnType: boolean
-   */
-
-  var getisDialogOpen = reselect.createSelector(getDialogDetailsByType, function (details) {
-    if (details) {
-      return details.isOpen;
-    }
-
-    return false;
-  });
-  /**
-   *For a given ui component: gets the active map Id
-   *
-   * @param {object} store store object from which the ui state wll be extracted
-   * @param {string} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation'
-   * @returns {string} returnType: string - the active map id
-   */
-
-  var getDialogMapId = reselect.createSelector(getDialogDetailsByType, function (details) {
-    if (details) {
-      return details.activeMapId;
-    }
-
-    return '';
-  });
-  /**
-   *For a given ui component: gets the order of visible dialog
-   *
-   * @param {object} store store object from which the ui state wll be extracted
-   * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
-   * @returns {number} the higher the order number the higher the zIndex
-   */
-
-  var getDialogOrder = reselect.createSelector(function (store, dialogType) {
-    if (store && store.ui && store.ui.order) {
-      var order = store.ui.order;
-      var visibleOrder = order.filter(function (orderedDialogType) {
-        return store.ui.dialogs[orderedDialogType].isOpen;
-      });
-
-      if (!visibleOrder.includes(dialogType)) {
-        return 0;
-      }
-
-      return visibleOrder.length - visibleOrder.indexOf(dialogType);
-    }
-
-    return 0;
-  }, function (order) {
-    return order;
-  });
-  /**
-   *For a given ui component: returns if ordered on top
-   *
-   * @param {object} store store object from which the ui state wll be extracted
-   * @param {DialogType} dialogType type of the dialog 'legend' | 'layerManager' | 'dimensionSelect-elevation' | dimensionSelect-ensemble_member
-   * @returns {boolean}
-   */
+            if (setOpen_2) {
+              draft.order = moveToTop(state.order, type_4);
+            }
+          });
+        }
 
-  var getDialogIsOrderedOnTop = reselect.createSelector(function (store, dialogType) {
-    if (store && store.ui && store.ui.order) {
-      var order = store.ui.order;
-      return order.includes(dialogType) && order.indexOf(dialogType) === 0;
-    }
+      case UI_ORDER_DIALOG:
+        {
+          var type_5 = action.payload.type;
+          return produce.produce(state, function (draft) {
+            draft.order = moveToTop(state.order, type_5);
+          });
+        }
 
-    return false;
-  }, function (isOrderedOnTop) {
-    return isOrderedOnTop;
-  });
-  var getDialogSource = reselect.createSelector(getDialogDetailsByType, function (details) {
-    if (details && details.source) {
-      return details.source;
+      default:
+        return state;
     }
-
-    return 'app';
-  });
+  };
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -6373,6 +6707,21 @@
           });
         }
 
+      case WEBMAP_DISABLE_PIN:
+        {
+          var _1 = action.payload,
+              mapId_29 = _1.mapId,
+              disableMapPin_1 = _1.disableMapPin;
+
+          if (!state.byId[mapId_29]) {
+            return state;
+          }
+
+          return produce.produce(state, function (draft) {
+            draft.byId[mapId_29].disableMapPin = disableMapPin_1;
+          });
+        }
+
       case GENERIC_SYNC_SETLAYERACTIONS:
         {
           /*
@@ -6381,9 +6730,9 @@
            * These targets can be used as payloads in new Layer actions.
            * These actions are here handled via the layer reducer, as it is the same logic
            */
-          var _1 = action.payload,
-              targets = _1.targets,
-              source_1 = _1.source;
+          var _2 = action.payload,
+              targets = _2.targets,
+              source_1 = _2.source;
           return targets.reduce(function (prevState, target) {
             var action = {
               payload: target,
@@ -8071,7 +8420,7 @@
   		},
   		{
   			name: "ECMWF",
-  			url: "https://apps.ecmwf.int/wms/?token=public",
+  			url: "https://eccharts.ecmwf.int/wms/?token=public",
   			id: "ecmwf"
   		},
   		{
@@ -8190,7 +8539,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$H = makeStyles__default["default"]({
+  var useStyles$w = makeStyles__default["default"]({
     buttonDiv: {
       position: 'relative'
     },
@@ -8226,7 +8575,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$H();
+    var classes = useStyles$w();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -8341,7 +8690,6 @@
     }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       "data-testid": "add-service",
       onClick: handleAddServiceURL,
-      color: "primary",
       disabled: loading,
       size: "large"
     }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Add, null)), loading && /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
@@ -8391,26 +8739,23 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$G = makeStyles__default["default"](function (theme) {
-    return {
-      buttonDiv: {
-        position: 'relative'
-      },
-      loadingButton: {
-        position: 'absolute',
-        top: 7,
-        left: 7,
-        zIndex: 1
-      },
-      button: {
-        width: '24px',
-        height: '24px',
-        margin: '6px 0px 0px 10px',
-        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
-        borderRadius: '15%'
-      }
-    };
-  });
+  var styles$1 = {
+    buttonDiv: {
+      position: 'relative'
+    },
+    loadingButton: {
+      position: 'absolute',
+      top: 7,
+      left: 7,
+      zIndex: 1
+    },
+    button: {
+      width: '24px',
+      height: '24px',
+      margin: '6px 0px 0px 10px',
+      borderRadius: '15%'
+    }
+  };
 
   var AddLayersButton = function AddLayersButton(_a) {
     var onClickService = _a.onClickService,
@@ -8426,7 +8771,6 @@
         _f = _a.shouldFocus,
         shouldFocus = _f === void 0 ? false : _f;
     var ref = React__namespace.useRef(null);
-    var classes = useStyles$G();
 
     var _g = __read(React__namespace.useState(false), 2),
         open = _g[0],
@@ -8446,7 +8790,7 @@
       title: tooltip
     }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       onClick: handleClose,
-      className: classes.button,
+      sx: styles$1.button,
       disableRipple: true,
       "data-testid": "addLayersButton",
       ref: ref,
@@ -8500,6 +8844,9 @@
     column6: {
       width: iconButtonSize * 2,
       display: 'inline-flex'
+    },
+    columns35: {
+      width: "calc((100% - " + iconButtonSize * totalButtons + "px) * 0.75)"
     }
   });
   var LayerManagerColumnsSmall = makeStyles__default["default"]({
@@ -8521,6 +8868,9 @@
     column6: {
       width: iconButtonSize * 2,
       display: 'inline-flex'
+    },
+    columns35: {
+      display: 'none'
     }
   });
   var LayerManagerWidth;
@@ -8551,24 +8901,18 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$F = makeStyles__default["default"](function (theme) {
-    return {
-      button: {
-        width: '24px',
-        height: '24px',
-        margin: '6px 0px 0px 10px',
-        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
-        borderRadius: '15%'
-      }
-    };
-  });
+  var style$2 = {
+    width: '24px',
+    height: '24px',
+    margin: '6px 0px 0px 10px',
+    borderRadius: '15%'
+  };
 
   var LayerSelectButtonConnect = function LayerSelectButtonConnect(_a) {
     var mapId = _a.mapId,
         _b = _a.source,
         source = _b === void 0 ? 'app' : _b;
     var dispatch = reactRedux.useDispatch();
-    var classes = useStyles$F();
     var currentActiveMapId = reactRedux.useSelector(function (store) {
       return getDialogMapId(store, 'layerSelect');
     });
@@ -8587,7 +8931,7 @@
       title: "Layer Select"
     }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       onClick: openLayerSelectDialog,
-      className: classes.button,
+      sx: style$2,
       id: "layerSelectButton",
       "data-testid": "layerSelectButton",
       disableRipple: true,
@@ -8611,7 +8955,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$E = makeStyles__default["default"]({
+  var useStyles$v = makeStyles__default["default"]({
     row: {
       height: '32px'
     },
@@ -8635,7 +8979,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e;
-    var classes = useStyles$E();
+    var classes = useStyles$v();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -8712,23 +9056,23 @@
           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',
           fill: function fill(isEnabled) {
-            return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultIcon.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledIcon.rgba;
+            return isEnabled ? theme.palette.geowebColors.buttons.flat["default"].color : theme.palette.geowebColors.buttons.flat.disabled.color;
           }
         },
         '&>div': {
@@ -8859,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
@@ -8885,7 +9229,7 @@
       }
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Select dimension value. (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
+    }, "Dimension value (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: dimValue,
         value: dimValue
@@ -8909,188 +9253,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$D = 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,
-              isEnabled = _a.isEnabled;
-          var _b = theme.palette.geowebColors.layerManager,
-              tableRowDefaultIcon = _b.tableRowDefaultIcon,
-              tableRowDisabledIcon = _b.tableRowDisabledIcon;
-
-          if (!isEnabled) {
-            return tableRowDisabledIcon.fill;
-          }
-
-          if (isActive) {
-            return theme.palette.common.white;
-          }
-
-          return tableRowDefaultIcon.rgba;
-        },
-        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.layerManager.tableRowMouseover.rgba;
-          },
-          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.layerManager.tableRowMouseover.rgba;
-          }
-        }
-      },
-      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,
-        props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId"]);
-
-    var classes = useStyles$D({
-      isActive: isActive,
-      isEnabled: isEnabled
-    });
-
-    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,
-      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$C = 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$C(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
-    });
-  };
-
-  /* *
-   * 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$B = makeStyles__default["default"](function (theme) {
+  var useStyles$u = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       dropdownEmpty: {
         paddingLeft: 8,
@@ -9106,6 +9269,33 @@
     });
   });
 
+  var getRenderLayersValues = function getRenderLayersValues(layerName, layers) {
+    var serviceLayer = layers.find(function (l) {
+      return l.name === layerName;
+    });
+
+    if (!serviceLayer && layerName) {
+      return {
+        currentValue: layerName,
+        currentIndex: layers.length,
+        extendedLayers: __spreadArray(__spreadArray([], __read(layers)), [{
+          name: layerName,
+          text: layerName,
+          leaf: true,
+          path: []
+        }])
+      };
+    }
+
+    return {
+      currentValue: (serviceLayer === null || serviceLayer === void 0 ? void 0 : serviceLayer.name) || '',
+      currentIndex: layers.findIndex(function (l) {
+        return l.name === (serviceLayer === null || serviceLayer === void 0 ? void 0 : serviceLayer.name);
+      }),
+      extendedLayers: layers
+    };
+  };
+
   var RenderLayers = function RenderLayers(_a) {
     var onChangeLayerName = _a.onChangeLayerName,
         layerName = _a.layerName,
@@ -9113,7 +9303,7 @@
         layers = _b === void 0 ? [] : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c;
-    var classes = useStyles$B();
+    var classes = useStyles$u();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
     if (!layers || !layers.length) {
@@ -9125,24 +9315,21 @@
       }, "No service available"));
     }
 
-    var filteredLayers = layers.filter(function (l) {
-      return l.name === layerName;
-    });
-    var currentValue = filteredLayers.length === 1 && filteredLayers[0].name ? filteredLayers[0].name : '';
-
     var selectLayer = function selectLayer(event) {
       event.stopPropagation();
       onChangeLayerName(event.target.value);
     };
 
-    var list = layers.map(function (layer) {
+    var _d = getRenderLayersValues(layerName, layers),
+        currentIndex = _d.currentIndex,
+        currentValue = _d.currentValue,
+        extendedLayers = _d.extendedLayers;
+
+    var list = extendedLayers.map(function (layer) {
       return {
         value: layer.name
       };
     });
-    var currentIndex = layers.findIndex(function (layer) {
-      return currentValue === layer.name;
-    });
     return /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
       disableUnderline: true,
       tooltip: "Select a layer",
@@ -9158,10 +9345,11 @@
       onChange: selectLayer,
       onChangeMouseWheel: function onChangeMouseWheel(e) {
         return onChangeLayerName(e.value);
-      }
+      },
+      requiresCtrlToChange: true
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Select layer"), layers.map(function (layerFromServiceLayers) {
+    }, "Layer"), extendedLayers.map(function (layerFromServiceLayers) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: layerFromServiceLayers.name,
         value: layerFromServiceLayers.name,
@@ -9186,7 +9374,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$A = makeStyles__default["default"](function (theme) {
+  var useStyles$t = makeStyles__default["default"](function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -9209,7 +9397,7 @@
         position: 'fixed',
         top: '-5px',
         boxSizing: 'initial',
-        zIndex: 1,
+        zIndex: 2,
         boxShadow: theme.shadows[8]
       }
     };
@@ -9247,7 +9435,7 @@
         onLayerChangeOpacity = _a.onLayerChangeOpacity,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$A();
+    var classes = useStyles$t();
     var sliderClasses = shared.sliderStyles();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -9273,11 +9461,17 @@
       });
     }, []);
     var onWheel = React__namespace.useCallback(function (event) {
-      var multiplier = event.altKey ? 10 : 1;
-      var direction = event.deltaY > 0 ? 0.01 * multiplier : -0.01 * multiplier;
-      var newValue = Math.min(Math.max(currentOpacity - direction, 0), 1);
-      onLayerChangeOpacity(newValue);
-    }, [currentOpacity, onLayerChangeOpacity]);
+      if (event.ctrlKey || event.metaKey) {
+        disableScroll();
+        var multiplier = event.altKey ? 10 : 1;
+        var direction = event.deltaY > 0 ? 0.01 * multiplier : -0.01 * multiplier;
+        var newValue_1 = Math.min(Math.max(currentOpacity - direction, 0), 1); // Kind of "one frame debouncer", meant to dampen too fast slider movement
+
+        window.requestAnimationFrame(function () {
+          onLayerChangeOpacity(newValue_1);
+        });
+      } else enableScroll();
+    }, [currentOpacity, onLayerChangeOpacity, disableScroll, enableScroll]);
     var onClickButton = React__namespace.useCallback(function () {
       setOpen(!open);
     }, [open]);
@@ -9287,17 +9481,15 @@
       }
     }, [open]);
     var onMouseEnter = React__namespace.useCallback(function () {
-      disableScroll();
       if (!open) setTooltipOpen(true);
-    }, [open, disableScroll]);
+    }, [open]);
     var onMouseLeave = React__namespace.useCallback(function () {
       enableScroll();
       setTooltipOpen(false);
     }, [enableScroll]);
     var onFocus = React__namespace.useCallback(function () {
-      disableScroll();
       setTooltipOpen(true);
-    }, [disableScroll]);
+    }, []);
     var onBlur = React__namespace.useCallback(function () {
       enableScroll();
       setTooltipOpen(false);
@@ -9352,120 +9544,44 @@
    * 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$z = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      icon: {
-        minWidth: 32,
-        color: theme.palette.geowebColors.layerManager.tableRowDefaultIcon.rgba
-      },
-      text: {
-        fontSize: 16,
-        color: theme.palette.geowebColors.layerManager.tableRowDefaultText.rgba
-      }
-    });
-  });
-
-  var MenuItemButton = function MenuItemButton(_a) {
-    var title = _a.title,
-        tooltipTitle = _a.tooltipTitle,
-        icon = _a.icon;
-    var classes = useStyles$z();
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, {
-      className: classes.icon + " icon"
-    }, icon), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-      title: tooltipTitle,
-      placement: "top"
-    }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
-      className: classes.text,
-      variant: "inherit"
-    }, title)));
-  };
-
-  /* *
-   * 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 {
-      menu: {
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        '& li:hover': {
-          backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
-        }
-      }
-    };
-  });
+   * limitations under the License.
+   *
+   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2021 - Finnish Meteorological Institute (FMI)
+   * */
+  var CopyIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 7v2H6a1 1 0 0 0-.993.883L5 10v9a1 1 0 0 0 .883.993L6 20h6a1 1 0 0 0 .993-.883L13 19h2v1.6a1.4 1.4 0 0 1-1.263 1.394l-.135.006H4.399a1.4 1.4 0 0 1-1.393-1.265L3 20.6V8.4a1.4 1.4 0 0 1 1.264-1.394L4.4 7H8zm7.584-5v2H12a1 1 0 0 0-.993.883L11 5v9a1 1 0 0 0 .883.993L12 15h6a1 1 0 0 0 .993-.883L19 14V7.42h2v8.18a1.4 1.4 0 0 1-1.263 1.394l-.135.006h-9.203a1.4 1.4 0 0 1-1.393-1.265L9 15.6V3.4a1.4 1.4 0 0 1 1.264-1.394L10.4 2h5.185zM17 2l4 4h-2.5c-.777 0-1.42-.598-1.493-1.357L17 4.499V2z"
+  }));
 
   var LayerManagerMenuButton = function LayerManagerMenuButton(_a) {
-    var tooltipTitle = _a.tooltipTitle,
-        mapId = _a.mapId,
+    var mapId = _a.mapId,
         layerId = _a.layerId,
-        onLayerDuplicate = _a.onLayerDuplicate,
-        _b = _a.isEnabled,
-        isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$y();
-
-    var _c = __read(React__namespace.useState(null), 2),
-        anchorEl = _c[0],
-        setAnchorEl = _c[1];
-
-    var handleClick = function handleClick(event) {
-      setAnchorEl(event.currentTarget);
-    };
-
-    var handleClose = function handleClose() {
-      setAnchorEl(null);
-    };
+        onLayerDuplicate = _a.onLayerDuplicate;
 
     var onClickDuplicate = function onClickDuplicate() {
       onLayerDuplicate({
         mapId: mapId,
         layerId: layerId
       });
-      handleClose();
     };
 
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
-      tooltipTitle: tooltipTitle,
-      onClick: handleClick,
-      icon: /*#__PURE__*/React__namespace.createElement(iconsMaterial.MoreVert, null),
-      testId: "openMenuButton",
-      isEnabled: isEnabled
-    }), /*#__PURE__*/React__namespace.createElement(material.Menu, {
-      anchorEl: anchorEl,
-      keepMounted: true,
-      open: Boolean(anchorEl),
-      onClose: handleClose,
-      PaperProps: {
-        className: classes.menu
-      }
-    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
-      "data-testid": "duplicateLayerButton",
-      onClick: onClickDuplicate
-    }, /*#__PURE__*/React__namespace.createElement(MenuItemButton, {
-      title: "Duplicate layer",
-      tooltipTitle: "Duplicate layer",
-      icon: /*#__PURE__*/React__namespace.createElement(iconsMaterial.FileCopy, {
-        fontSize: "small"
-      })
-    }))));
+    return /*#__PURE__*/React__namespace.createElement(shared.ToggleMenu, {
+      buttonTestId: "openMenuButton",
+      buttonSx: {
+        margin: '4px 2px',
+        '&.MuiButtonBase-root': {
+          backgroundColor: 'transparent',
+          color: 'geowebColors.greys.accessible'
+        }
+      },
+      menuPosition: "bottom",
+      menuItems: [{
+        text: 'Duplicate layer',
+        action: onClickDuplicate,
+        icon: CopyIcon
+      }],
+      tooltipTitle: "Open menu"
+    });
   };
 
   var RenderStyles = function RenderStyles(_a) {
@@ -9517,10 +9633,11 @@
       onChange: selectStyle,
       onChangeMouseWheel: function onChangeMouseWheel(e) {
         return onChangeLayerStyle(e.value);
-      }
+      },
+      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
@@ -9544,72 +9661,22 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$x = makeStyles__default["default"](function () {
+  var useStyles$s = makeStyles__default["default"](function (theme) {
     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$x();
-    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.
-   * 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$w = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      icon: {
-        width: 18,
-        height: 18,
-        marginTop: 4
-      },
       svgIcon: {
         fill: function fill(_a) {
           var isActive = _a.isActive,
               isEnabled = _a.isEnabled;
-          var _b = theme.palette.geowebColors.layerManager,
-              tableRowDefaultIcon = _b.tableRowDefaultIcon,
-              tableRowDisabledIcon = _b.tableRowDisabledIcon;
 
           if (isActive) {
             return theme.palette.common.white;
           }
 
-          if (!isEnabled) {
-            return tableRowDisabledIcon.fill;
+          if (isEnabled) {
+            return theme.palette.geowebColors.buttons.flat["default"].color;
           }
 
-          return tableRowDefaultIcon.rgba;
+          return theme.palette.geowebColors.buttons.flat.disabled.color;
         }
       }
     });
@@ -9623,14 +9690,18 @@
         isActive = _c === void 0 ? false : _c,
         _d = _a.isEnabled,
         isEnabled = _d === void 0 ? true : _d;
-    var classes = useStyles$w({
+    var classes = useStyles$s({
       isActive: isActive,
       isEnabled: isEnabled
     });
 
     var Icon = function Icon() {
       return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
-        className: classes.icon
+        sx: {
+          width: '18px',
+          height: '18px',
+          marginTop: '4px'
+        }
       }, /*#__PURE__*/React__namespace.createElement("g", {
         id: "Concept-3",
         stroke: "none",
@@ -9647,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),
@@ -9672,7 +9743,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$v = makeStyles__default["default"](function (theme) {
+  var useStyles$r = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       row: {
         background: function background(isEnabled) {
@@ -9706,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,
@@ -9724,7 +9797,7 @@
         layerActiveLayout = _a.layerActiveLayout,
         layerManagerWidth = _a.layerManagerWidth,
         dragHandle = _a.dragHandle;
-    var classes = useStyles$v(isEnabled);
+    var classes = useStyles$r(isEnabled);
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
     var onClickRow = function onClickRow() {
@@ -9739,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() {
@@ -9762,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, {
@@ -9805,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({
@@ -9817,7 +9896,6 @@
         });
       }
     }), layerMenuLayout || /*#__PURE__*/React__default["default"].createElement(LayerManagerMenuButton, {
-      tooltipTitle: "Open Menu",
       mapId: mapId,
       layerId: layerId,
       onLayerDuplicate: onLayerDuplicate
@@ -9859,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({
@@ -9903,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) {
@@ -10145,11 +10223,7 @@
         origin: 'MenuButtonConnect'
       }));
     }, [dispatch]);
-    var isLayerEnabled = reactRedux.useSelector(function (store) {
-      return getLayerEnabled(store, layerId);
-    });
     return /*#__PURE__*/React__namespace.createElement(LayerManagerMenuButton, {
-      tooltipTitle: "Open Menu",
       layerId: layerId,
       mapId: mapId,
       onLayerDuplicate: function onLayerDuplicate() {
@@ -10158,8 +10232,7 @@
           mapId: mapId,
           layer: layer
         });
-      },
-      isEnabled: isLayerEnabled
+      }
     });
   };
 
@@ -10252,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
       }),
@@ -10306,22 +10392,6 @@
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
   var TOOLTIP_TITLE = 'Drag a layer up or down';
-  var useStyles$u = makeStyles__default["default"](function (theme) {
-    return {
-      dragHandle: {
-        cursor: 'grab',
-        backgroundColor: 'inherit',
-        '&:hover': {
-          backgroundColor: 'inherit'
-        },
-        height: 32,
-        color: function color(_a) {
-          var isDisabled = _a.isDisabled;
-          return isDisabled ? theme.palette.geowebColors.layerManager.tableRowDefaultIcon.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledIcon.fill;
-        }
-      }
-    };
-  });
 
   var DragHandle = function DragHandle(_a) {
     var _b = _a.isDisabled,
@@ -10330,20 +10400,26 @@
         index = _c === void 0 ? undefined : _c,
         _d = _a.hideTooltip,
         hideTooltip = _d === void 0 ? false : _d;
-    var classes = useStyles$u({
-      isDisabled: isDisabled
-    });
     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 : ''),
-      className: classes.dragHandle + " handle",
+      className: "handle",
       tabIndex: -1,
       isEnabled: !isDisabled,
       disableFocusRipple: true,
       disableTouchRipple: true,
-      disabled: isDisabled
+      disabled: isDisabled,
+      isAccessible: true,
+      sx: {
+        cursor: 'grab',
+        '&:hover': {
+          backgroundColor: 'inherit!important'
+        },
+        marginLeft: '3px',
+        marginRight: '3px'
+      }
     });
   };
 
@@ -10363,7 +10439,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$t = makeStyles__default["default"](function () {
+  var useStyles$q = makeStyles__default["default"](function () {
     return {
       layerRows: {
         width: '100%',
@@ -10429,7 +10505,7 @@
 
     var isSorting = activeDragIndex !== null;
     var isDragDisabled = layerIds.length === 1;
-    var classes = useStyles$t(isSorting);
+    var classes = useStyles$q(isSorting);
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
@@ -10527,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
@@ -10639,7 +10715,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$s = makeStyles__default["default"]({
+  var useStyles$p = makeStyles__default["default"]({
     layerRow: {
       width: '100%',
       height: '36px'
@@ -10662,7 +10738,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _d = _a.tooltip,
         tooltip = _d === void 0 ? '' : _d;
-    var classes = useStyles$s();
+    var classes = useStyles$p();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -10707,7 +10783,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$r = makeStyles__default["default"]({
+  var useStyles$o = makeStyles__default["default"]({
     layerRowContainer: {
       position: 'relative',
       width: '100%',
@@ -10742,7 +10818,7 @@
         layerSelect = _e === void 0 ? false : _e,
         _f = _a.showAddLayersTooltip,
         showAddLayersTooltip = _f === void 0 ? true : _f;
-    var classes = useStyles$r();
+    var classes = useStyles$o();
 
     var _g = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
         layerManagerWidth = _g[0],
@@ -10798,80 +10874,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 CustomToggleButton = function CustomToggleButton(_a) {
-    var _b = _a.variant,
-        variant = _b === void 0 ? 'primary' : _b,
-        _c = _a.value,
-        value = _c === void 0 ? 0 : _c,
-        props = __rest(_a, ["variant", "value"]);
-
-    return /*#__PURE__*/React__namespace.createElement(material.ToggleButton, __assign({
-      className: variant,
-      value: value
-    }, props));
-  };
-
-  /* *
-   * 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 ToolButton = function ToolButton(_a) {
-    var active = _a.active,
-        _b = _a.width,
-        width = _b === void 0 ? '24px' : _b,
-        _c = _a.height,
-        height = _c === void 0 ? '24px' : _c,
-        children = _a.children,
-        _d = _a.value,
-        value = _d === void 0 ? 0 : _d,
-        _e = _a.sx,
-        sx = _e === void 0 ? {} : _e,
-        props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
-
-    return /*#__PURE__*/React__namespace.createElement(CustomToggleButton, __assign({
-      variant: "tool",
-      disableRipple: true,
-      selected: active,
-      value: value,
-      sx: __assign({
-        width: width + "!important",
-        height: height + "!important",
-        textTransform: 'none!important',
-        padding: '11px!important'
-      }, sx)
-    }, props), children);
-  };
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -10908,7 +10910,7 @@
         source: source
       }));
     }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
-    return /*#__PURE__*/React__namespace.createElement(ToolButton, {
+    return /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
       onClick: openFilterResultsDialog,
       active: isOpenInStore,
       id: "keywordFilterButton",
@@ -11487,13 +11489,6 @@
   var isURL = function isURL(string) {
     return /^https?:\/\//.test(string);
   };
-  var useStyles$q = makeStyles__default["default"](function (theme) {
-    return {
-      iconButton: {
-        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
-      }
-    };
-  });
   var clearIconPath = 'M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M15.44426,7.26697571 L12.0002861,10.7110482 L8.55573996,7.26697571 C8.19978253,6.9110081 7.62292549,6.9110081 7.26696807,7.26697571 C6.91101064,7.62294331 6.91101064,8.19981687 7.26696807,8.55578447 L10.7115142,11.9998569 L7.26696807,15.4445017 C6.91101064,15.8004693 6.91101064,16.3767705 7.26696807,16.7333104 C7.44494678,16.910722 7.67843653,17 7.91192629,17 C8.14484377,17 8.37776125,16.910722 8.55573996,16.7333104 L12.0002861,13.289238 L15.44426,16.7333104 C15.6222388,16.910722 15.8551562,17 16.088646,17 C16.3221357,17 16.5550532,16.910722 16.7330319,16.7333104 C17.0889894,16.3767705 17.0889894,15.8004693 16.7330319,15.4445017 L13.289058,11.9998569 L16.7330319,8.55578447 C17.0889894,8.19981687 17.0889894,7.62294331 16.7330319,7.26697571 C16.3770745,6.9110081 15.8002175,6.9110081 15.44426,7.26697571 Z';
   var clearIcon = /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
     style: {
@@ -11525,7 +11520,6 @@
         isPopupOpen = _b[0],
         setPopupOpen = _b[1];
 
-    var classes = useStyles$q();
     React__default["default"].useEffect(function () {
       if (isPopupOpen === false) {
         onClickClear();
@@ -11536,7 +11530,6 @@
       title: "Clear",
       placement: "top"
     }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-      className: classes.iconButton,
       edge: "end",
       onClick: function onClick() {
         onClickClear();
@@ -11565,7 +11558,6 @@
       title: "Search",
       placement: "top"
     }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-      className: classes.iconButton,
       edge: "end",
       size: "large"
     }, searchIcon));
@@ -11664,6 +11656,50 @@
     });
   };
 
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2022 - Finnish Meteorological Institute (FMI)
+   * */
+
+  var LayerAddRemoveButton = function LayerAddRemoveButton(_a) {
+    var layer = _a.layer,
+        layerIndex = _a.layerIndex,
+        serviceId = _a.serviceId,
+        addLayer = _a.addLayer,
+        deleteLayer = _a.deleteLayer,
+        mapLayers = _a.mapLayers;
+    var foundLayer = mapLayers.find(function (lr) {
+      return lr.name === layer.name && lr.service === serviceId;
+    });
+    return /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
+      "data-testid": "layerAddRemoveButton-" + layer.name,
+      onClick: function onClick() {
+        !foundLayer ? addLayer({
+          serviceURL: serviceId,
+          layerName: layer.name
+        }) : deleteLayer({
+          layerId: foundLayer.id,
+          layerIndex: layerIndex
+        });
+      },
+      selected: !!foundLayer,
+      variant: "tool",
+      fullWidth: true
+    }, !foundLayer ? 'Add' : 'Remove');
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -11718,35 +11754,35 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$p = makeStyles__default["default"](function (theme) {
+  var useStyles$n = makeStyles__default["default"](function (theme) {
     return {
       layerRow: {
-        background: theme.palette.geowebColors.background.surface,
+        background: theme.palette.geowebColors.cards.cardContainer,
         padding: '8px 0px 8px 12px',
         marginBottom: '4px',
         height: '64px',
-        border: "solid 1px " + theme.palette.geowebColors.cards.cardContainerBorder
+        border: "solid 1px " + theme.palette.geowebColors.cards.cardContainerBorder,
+        display: 'grid',
+        gridTemplateColumns: '1fr 0.1fr',
+        gridGap: '20px'
       },
       layerText: {
         fontSize: '12px',
         fontWeight: 500,
         overflow: 'clip',
         height: '20px',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+        textOverflow: 'ellipsis'
       },
       layerName: {
         fontSize: '12px',
         height: '24px',
-        maxWidth: '100%',
         overflow: 'clip',
         "float": 'left',
         paddingTop: '6px',
-        textOverflow: 'ellipsis',
         whiteSpace: 'nowrap'
       },
       layerNameMaxWidth: {
-        maxWidth: '196px'
+        maxWidth: '270px'
       },
       layerAbstract: {
         fontSize: '10px',
@@ -11757,6 +11793,11 @@
       resultCount: {
         marginBottom: '4px',
         fontSize: '12px'
+      },
+      layerButton: {
+        marginRight: '8px',
+        marginTop: '4px',
+        width: '80px'
       }
     };
   });
@@ -11765,10 +11806,13 @@
     var services = _a.services,
         serviceIds = _a.serviceIds,
         layerSelectHeight = _a.layerSelectHeight,
+        addLayer = _a.addLayer,
+        deleteLayer = _a.deleteLayer,
         searchString = _a.searchString,
+        mapLayers = _a.mapLayers,
         keywordIds = _a.keywordIds,
         allKeywordsActive = _a.allKeywordsActive;
-    var classes = useStyles$p();
+    var classes = useStyles$n();
 
     var _b = __read(React__namespace.useState(0), 2),
         numberOfLayers = _b[0],
@@ -11789,12 +11833,14 @@
         overflow: 'auto'
       }
     }, serviceIds.map(function (serviceId) {
-      return filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer) {
+      return filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer, layerIndex) {
         return /*#__PURE__*/React__namespace.createElement("div", {
+          key: serviceId + "-" + layer.name + "-" + layer.text
+        }, /*#__PURE__*/React__namespace.createElement("div", {
           key: serviceId + "-" + layer.name,
           className: classes.layerRow,
           "data-testid": "layerListLayerRow"
-        }, /*#__PURE__*/React__namespace.createElement("div", {
+        }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
           className: classes.layerText
         }, layer.text), /*#__PURE__*/React__namespace.createElement("div", null, layer["abstract"] ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
           className: classes.layerName + " " + classes.layerNameMaxWidth
@@ -11803,7 +11849,16 @@
           "data-testid": "layerAbstract"
         }, layer["abstract"])) : /*#__PURE__*/React__namespace.createElement("div", {
           className: classes.layerName
-        }, layer.name)));
+        }, layer.name))), /*#__PURE__*/React__namespace.createElement("div", {
+          className: classes.layerButton
+        }, /*#__PURE__*/React__namespace.createElement(LayerAddRemoveButton, {
+          layer: layer,
+          layerIndex: layerIndex,
+          serviceId: serviceId,
+          addLayer: addLayer,
+          deleteLayer: deleteLayer,
+          mapLayers: mapLayers
+        }))));
       });
     })));
   };
@@ -11826,13 +11881,57 @@
    * */
 
   var LayerListConnect = function LayerListConnect(_a) {
-    var layerSelectHeight = _a.layerSelectHeight;
+    var mapId = _a.mapId,
+        layerSelectHeight = _a.layerSelectHeight;
     var services = reactRedux.useSelector(function (store) {
       return getServices(store);
     });
+    var dispatch = reactRedux.useDispatch();
     var enabledServiceIds = reactRedux.useSelector(function (store) {
       return getEnabledServiceIds(store);
     });
+    var mapLayers = reactRedux.useSelector(function (store) {
+      return getMapLayers(store, mapId);
+    });
+
+    var addLayer$1 = function addLayer(_a) {
+      var serviceURL = _a.serviceURL,
+          layerName = _a.layerName;
+      var layer = {
+        service: serviceURL,
+        name: layerName,
+        id: generateLayerId(),
+        layerType: webmap.LayerType.mapLayer
+      };
+      addMapLayer({
+        mapId: mapId,
+        layerId: layer.id,
+        layer: layer,
+        origin: 'LayerListConnect'
+      });
+    };
+
+    var addMapLayer = React__namespace.useCallback(function (_a) {
+      var layerId = _a.layerId,
+          layer = _a.layer,
+          origin = _a.origin;
+      return dispatch(addLayer({
+        mapId: mapId,
+        layerId: layerId,
+        layer: layer,
+        origin: origin
+      }));
+    }, [dispatch, mapId]);
+    var deleteLayer = React__namespace.useCallback(function (_a) {
+      var layerId = _a.layerId,
+          layerIndex = _a.layerIndex;
+      return dispatch(layerDelete({
+        mapId: mapId,
+        layerId: layerId,
+        layerIndex: layerIndex,
+        origin: 'LayerListConnect'
+      }));
+    }, [dispatch, mapId]);
     var checkedKeywordIds = reactRedux.useSelector(function (store) {
       return getCheckedKeywordIds(store);
     });
@@ -11846,9 +11945,12 @@
       services: services,
       serviceIds: enabledServiceIds,
       layerSelectHeight: layerSelectHeight,
+      addLayer: addLayer$1,
+      deleteLayer: deleteLayer,
       keywordIds: checkedKeywordIds,
       allKeywordsActive: allKeywordsActive,
-      searchString: searchString
+      searchString: searchString,
+      mapLayers: mapLayers
     });
   };
 
@@ -11884,7 +11986,7 @@
         service = _a.service,
         isEnabled = _a.isEnabled,
         toggleChip = _a.toggleChip;
-    return /*#__PURE__*/React__namespace.createElement(CustomToggleButton, {
+    return /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
       variant: "boxed",
       selected: isEnabled,
       tabIndex: 0,
@@ -11980,7 +12082,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$o = makeStyles__default["default"](function (theme) {
+  var useStyles$m = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       serviceChips: {
         width: '100%',
@@ -12004,7 +12106,7 @@
         fontSize: '0.875rem'
       },
       scrollArrowLeft: {
-        width: '120px',
+        width: '100px',
         marginBottom: '-12px',
         height: '34px',
         backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
@@ -12012,7 +12114,10 @@
         marginRight: '-120px',
         "float": 'left',
         zIndex: 1,
-        position: 'relative'
+        position: 'relative',
+        '&:hover': {
+          color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+        }
       },
       serviceList: {
         height: '32px',
@@ -12021,13 +12126,16 @@
         overflow: 'hidden'
       },
       scrollArrowRight: {
-        width: '120px',
+        width: '100px',
         marginBottom: '-12px',
         height: '34px',
         backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), " + theme.palette.geowebColors.background.surfaceApp + " 51%)",
         right: '0px',
         position: 'fixed',
-        cursor: 'pointer'
+        cursor: 'pointer',
+        '&:hover': {
+          color: theme.palette.geowebColors.buttons.tertiary.activeMouseOver.color
+        }
       }
     });
   });
@@ -12052,7 +12160,7 @@
     var ref = React__namespace.useRef(null);
     var scrollSpeed = 5;
     var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-    var classes = useStyles$o({
+    var classes = useStyles$m({
       margin: margin,
       maxWidthValue: maxWidthValue
     });
@@ -12179,66 +12287,52 @@
    * See the License for the specific language governing permissions and
    * limitations under the License.
    *
-   * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2022 - Finnish Meteorological Institute (FMI)
-   * */
-  var useStyles$n = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      servicesContainer: {
-        width: '300px',
-        maxHeight: '380px',
-        top: '140px',
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        boxShadow: theme.shadows[6],
-        overflow: 'auto'
-      },
-      header: {
-        position: 'sticky',
-        top: 0,
-        fontSize: theme.typography.fontSize,
-        padding: '12px',
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        zIndex: 100
-      },
-      footer: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        position: 'sticky',
-        bottom: 0,
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        zIndex: 100
-      },
-      iconFill: {
-        color: theme.palette.geowebColors.typographyAndIcons.icon
-      },
-      button: {
-        margin: '16px',
-        width: '80%',
-        fontSize: '12px',
-        textTransform: 'none'
-      },
-      text: {
-        paddingTop: '3px',
-        fontSize: '12px',
-        fontFamily: theme.typography.fontFamily,
-        fontWeight: theme.typography.fontWeightRegular,
-        textTransform: 'none',
-        color: '#575f7a'
-      },
-      icon: {
-        width: '24px',
-        height: '24px'
-      }
-    });
-  });
+   * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2022 - Finnish Meteorological Institute (FMI)
+   * */
+  var styles = {
+    servicesContainer: {
+      width: '300px',
+      maxHeight: '380px',
+      top: '140px',
+      backgroundColor: 'geowebColors.background.surface',
+      boxShadow: 6,
+      overflow: 'auto'
+    },
+    header: {
+      position: 'sticky',
+      top: 0,
+      fontSize: 'default',
+      padding: '12px',
+      backgroundColor: 'geowebColors.background.surface',
+      zIndex: 100
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'sticky',
+      bottom: 0,
+      backgroundColor: 'geowebColors.background.surface',
+      zIndex: 100
+    },
+    button: {
+      margin: '16px',
+      width: '80%',
+      fontSize: '12px',
+      textTransform: 'none'
+    },
+    icon: {
+      width: '24px',
+      height: '24px'
+    }
+  };
 
   var ServiceOptionsDialog = function ServiceOptionsDialog(_a) {
     var services = _a.services,
         mapStoreRemoveService = _a.mapStoreRemoveService,
         _b = _a.layers,
         layers = _b === void 0 ? [] : _b;
-    var classes = useStyles$n();
 
     var _c = __read(React__namespace.useState(false), 2),
         addServiceisOpen = _c[0],
@@ -12255,15 +12349,17 @@
     var isDisabled = function isDisabled(service) {
       return layers.some(function (layer) {
         return layer.service && layer.service.includes(service);
+      }) || preloadedDefaultMapServices.some(function (defaultMapService) {
+        return defaultMapService.url && defaultMapService.url.includes(service);
       });
     };
 
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
-      className: classes.servicesContainer,
+      sx: styles.servicesContainer,
       "data-testid": "ServiceDialog"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.header
-    }, " Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: styles.header
+    }, "Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
       disablePadding: true
     }, services.map(function (service) {
       return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
@@ -12284,14 +12380,14 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "Edit Service"
-      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        disabled: isDisabled(service.service),
         "data-testid": "openEditServiceButton",
         size: "large"
       }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
         d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
-        fill: classes.iconFill,
         fillRule: "evenodd"
-      }))))), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+      })))))), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "Delete Service"
       }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         size: "large",
@@ -12302,18 +12398,17 @@
         "data-testid": "removeServiceButton"
       }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
         d: "M17.504 8.228c.588 0 1.027.48.973 1.066l-.876 9.64A1.197 1.197 0 0 1 16.434 20H8.41c-.59 0-1.115-.48-1.167-1.066l-.877-9.64a.962.962 0 0 1 .973-1.066zm-2.115 1.228a.82.82 0 0 0-.819.82v7.674a.818.818 0 0 0 1.638 0v-7.675a.819.819 0 0 0-.819-.819zm-2.968 0a.819.819 0 0 0-.819.82v7.674a.818.818 0 1 0 1.638 0v-7.675a.82.82 0 0 0-.82-.819zm-2.968 0a.819.819 0 0 0-.818.82v7.674a.818.818 0 1 0 1.637 0v-7.675a.82.82 0 0 0-.82-.819zM13.432 4c.21 0 .404.168.436.376l.107.758 3.256-.01a1.606 1.606 0 0 1 1.61 1.6l.001.535-12.841.038L6 6.76a1.605 1.605 0 0 1 1.6-1.61l3.262-.008.103-.758a.454.454 0 0 1 .434-.38z",
-        fill: classes.iconFill,
         fillRule: "evenodd"
       }))))))));
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.footer
+    })), /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: styles.footer
     }, /*#__PURE__*/React__namespace.createElement(material.Button, {
       onClick: openAddService,
       "data-testid": "openAddServiceButton",
-      className: classes.button,
+      sx: styles.button,
       variant: "tertiary",
       startIcon: /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
-        className: classes.icon
+        sx: styles.icon
       }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
         d: "M13.647 13.647h6.82a1.276 1.276 0 1 0 0-2.552h-6.82v-6.82a1.276 1.276 0 1 0-2.552 0v6.82h-6.82a1.276 1.276 0 1 0 0 2.552h6.82v6.82a1.274 1.274 0 0 0 1.276 1.275c.705 0 1.276-.571 1.276-1.276v-6.82z",
         fillRule: "evenodd"
@@ -12378,48 +12473,12 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$m = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      servicesContainer: {
-        position: 'fixed',
-        top: '140px',
-        right: '-72px',
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        boxShadow: theme.shadows[6]
-      },
-      servicesText: {
-        paddingTop: '12px',
-        paddingLeft: '12px'
-      }
-    });
-  });
 
   var ServiceOptionsButton = function ServiceOptionsButton() {
-    var classes = useStyles$m();
-
-    var _a = __read(React__namespace.useState(false), 2),
-        containerOpen = _a[0],
-        setContainerOpen = _a[1];
-
-    var toggleContainer = function toggleContainer() {
-      setContainerOpen(!containerOpen);
-    };
-
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
-      onClick: toggleContainer,
-      active: containerOpen,
-      "data-testid": "serviceOptionsButton",
-      variant: "tool"
-    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
-      d: "M12 16c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0-2c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm0-6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z",
-      fillRule: "evenodd"
-    })))), containerOpen ? /*#__PURE__*/React__namespace.createElement(material.Box, {
-      className: classes.servicesContainer,
-      "data-testid": "ServiceOptionsDialogContainer"
-    }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialogConnect, null)) : null);
+    return /*#__PURE__*/React__namespace.createElement(shared.ToggleMenu, {
+      buttonTestId: "serviceOptionsButton",
+      menuPosition: "bottom"
+    }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialogConnect, null));
   };
 
   /* *
@@ -12526,6 +12585,7 @@
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.layerSelectContainer
     }, /*#__PURE__*/React__namespace.createElement(LayerListConnect, {
+      mapId: mapId,
       layerSelectHeight: height
     })));
   };
@@ -13209,7 +13269,7 @@
         isActive = _c === void 0 ? false : _c,
         props = __rest(_a, ["onClick", "children", "title", "placement", "isActive"]);
 
-    return /*#__PURE__*/React__namespace.createElement(ToolButton, __assign({
+    return /*#__PURE__*/React__namespace.createElement(shared.ToolButton, __assign({
       onClick: onClick,
       active: isActive
     }, props), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
@@ -14120,7 +14180,7 @@
       title: autoUpdateButton.title
     }, /*#__PURE__*/React__namespace.createElement("span", {
       "data-testid": "autoUpdateButtonTooltip"
-    }, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+    }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
       active: isAutoUpdating,
       disabled: disabled,
       onClick: function onClick() {
@@ -14184,7 +14244,7 @@
     var loopButtonPath = isLooping ? svgLoopOffPath : svgLoopPath;
     return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: loopButtonPath.title
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
       onClick: function onClick() {
         return onToggleLoop();
       },
@@ -14296,7 +14356,7 @@
       className: classes.speedButtonDiv
     }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Speed"
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
       onClick: onClickButton,
       active: true,
       "data-testid": "speedButton"
@@ -14588,7 +14648,7 @@
       className: classes.timeStepDiv
     }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Time step"
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
       active: true,
       onClick: onClickButton,
       "data-testid": "timeStepButton",
@@ -14694,7 +14754,7 @@
     var id = open ? 'simple-popover' : undefined;
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Options"
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
       onClick: onClickButton,
       "data-testid": "optionsMenuButton",
       active: open
@@ -14783,7 +14843,7 @@
     var playButtonPath = isAnimating ? pausePath : playPath;
     return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: playButtonPath.title
-    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+    }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
       onClick: onTogglePlay,
       disabled: isDisabled,
       "data-testid": "playButton",
@@ -15439,13 +15499,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),
@@ -15539,7 +15601,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) {
@@ -15548,7 +15610,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);
@@ -15961,6 +16029,12 @@
 
   var NEEDLE_HANDLE_WIDTH = 10;
   var LEFT_MOUSE_BTN = 1;
+  var THROTTLE_WAIT_TIME = 500; // [ms]
+
+  var THROTTLE_OPTIONS = {
+    trailing: false // Invoke function when called, but not more than once every <THROTTLE_WAIT_TIME>.
+
+  };
 
   var TimeSliderLegend = function TimeSliderLegend(_a) {
     var centerTime = _a.centerTime,
@@ -15973,6 +16047,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,
@@ -15996,6 +16072,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') {
@@ -16025,7 +16113,21 @@
       setNewRoundedTime(x, centerTime, width, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
     };
 
-    var theme = material.useTheme();
+    var theme = material.useTheme(); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    var throttledZoom = React__namespace.useCallback(_.throttle(function (newSecondsPerPx, newCenterTime) {
+      onZoom(newSecondsPerPx, newCenterTime);
+    }, THROTTLE_WAIT_TIME, THROTTLE_OPTIONS), []);
+
+    var zoom = function zoom(deltaY, deltaX, canvasWidth, mouseX) {
+      if (!onZoom) return;
+      var direction = deltaY || deltaX;
+      var newSecondsPerPx = getNextSecondsPerPxValue(Math.sign(direction), secondsPerPx, dataScaleToSecondsPerPx);
+      var mouseTime = pixelToTimestamp(mouseX, centerTime, canvasWidth, secondsPerPx);
+      var newCenterTime = getNewCenterOfFixedPointZoom(mouseTime, secondsPerPx, newSecondsPerPx, centerTime);
+      throttledZoom(newSecondsPerPx, newCenterTime);
+    };
+
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.timeSliderLegend,
       "data-testid": "timeSliderLegend"
@@ -16057,12 +16159,7 @@
             deltaX = _a.deltaX,
             canvasWidth = _a.canvasWidth,
             mouseX = _a.mouseX;
-        if (!onZoom) return;
-        var direction = deltaY || deltaX;
-        var newSecondsPerPx = getNextSecondsPerPxValue(Math.sign(direction), secondsPerPx, dataScaleToSecondsPerPx);
-        var mouseTime = pixelToTimestamp(mouseX, centerTime, canvasWidth, secondsPerPx);
-        var newCenterTime = getNewCenterOfFixedPointZoom(mouseTime, secondsPerPx, newSecondsPerPx, centerTime);
-        onZoom(newSecondsPerPx, newCenterTime);
+        zoom(deltaY, deltaX, canvasWidth, mouseX);
       },
       onMouseDown: function onMouseDown(x, y, width) {
         setDragged(false);
@@ -16084,7 +16181,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);
       }
     }));
   };
@@ -16376,6 +16473,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();
   };
 
@@ -17170,10 +17270,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,
@@ -17181,19 +17281,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({
@@ -17206,7 +17306,7 @@
     };
 
     return /*#__PURE__*/React__default["default"].createElement(PlayButton, {
-      isAnimating: isAnimating,
+      isAnimating: linkedMapAnimationInfo.isAnimating,
       isDisabled: isDisabled,
       onTogglePlayButton: function onTogglePlayButton() {
         onTogglePlay();
@@ -17263,52 +17363,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.
@@ -17336,7 +17390,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,
@@ -17359,6 +17415,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,
@@ -17393,6 +17451,8 @@
       isTimeSliderHoverOn: isTimeSliderHoverOn,
       dataStartTime: dataStartTime,
       dataEndTime: dataEndTime,
+      animationStartTime: animationStartTime,
+      animationEndTime: animationEndTime,
       timeStep: timeStep,
       onSetNewDate: function onSetNewDate(newDate) {
         if (isAnimating) {
@@ -17826,7 +17886,7 @@
   };
   var ECMWFPublicService = {
     name: 'ECMWF',
-    url: 'https://apps.ecmwf.int/wms/?token=public',
+    url: 'https://eccharts.ecmwf.int/wms/?token=public',
     id: 'ecmwf'
   };
   var MeteoCanada = {
@@ -21214,6 +21274,14 @@
           });
         }
       }
+      /* Set disable map pin */
+
+
+      if (!prevProps || prevProps.disableMapPin !== props.disableMapPin) {
+        if (!(props.disableMapPin === undefined)) {
+          this.adaguc.webMapJS.getMapPin().toggleDisableMapPin();
+        }
+      }
       /* Change the animation delay */
 
 
@@ -21857,6 +21925,9 @@
     var mapPinLocation = reactRedux.useSelector(function (store) {
       return getPinLocation(store, mapId);
     });
+    var disableMapPin = reactRedux.useSelector(function (store) {
+      return getDisableMapPin(store, mapId);
+    });
     var dispatch = reactRedux.useDispatch();
     var map = getWMJSMapById(mapId);
     var mapChangeDimension$1 = React__namespace.useCallback(function (mapDimensionPayload) {
@@ -21928,6 +21999,7 @@
       activeLayerId: activeLayerId,
       animationDelay: animationDelay,
       displayMapPin: displayMapPin,
+      disableMapPin: disableMapPin,
       onMapChangeDimension: function onMapChangeDimension(mapDimensionPayload) {
         if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
           setTime$1({
@@ -22562,7 +22634,9 @@
         _k = _a.shouldShowZoomControls,
         shouldShowZoomControls = _k === void 0 ? false : _k,
         _l = _a.displayMapPin,
-        displayMapPin = _l === void 0 ? false : _l;
+        displayMapPin = _l === void 0 ? false : _l,
+        toggleTimestepAuto$1 = _a.toggleTimestepAuto,
+        setTimestep = _a.setTimestep;
     var classes = useStyles$4();
     var dispatch = reactRedux.useDispatch();
     var mapId = React__default["default"].useRef(id || generateMapId()).current;
@@ -22633,6 +22707,22 @@
             timestepAuto: false
           }));
         }
+      } // Set timestep auto based on preset
+
+
+      if (toggleTimestepAuto$1 !== undefined && shouldAnimate !== true) {
+        dispatch(toggleTimestepAuto({
+          mapId: mapId,
+          timestepAuto: toggleTimestepAuto$1
+        }));
+      } // Set timestep value based on preset
+
+
+      if (setTimestep !== undefined && shouldAnimate !== true) {
+        dispatch(setTimeStep({
+          mapId: mapId,
+          timeStep: setTimestep
+        }));
       } // eslint-disable-next-line react-hooks/exhaustive-deps
 
     }, []);
@@ -23011,7 +23101,11 @@
         _h = _a.animationPayload,
         animationPayload = _h === void 0 ? undefined : _h,
         _j = _a.displayMapPin,
-        displayMapPin = _j === void 0 ? false : _j;
+        displayMapPin = _j === void 0 ? false : _j,
+        _k = _a.showTimeSlider,
+        showTimeSlider = _k === void 0 ? true : _k,
+        toggleTimestepAuto = _a.toggleTimestepAuto,
+        setTimestep = _a.setTimestep;
     var classes = useStyles$2();
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: classes.mapSliderConnect,
@@ -23020,7 +23114,7 @@
       className: classes.zoomControls
     }, /*#__PURE__*/React__default["default"].createElement(ZoomControlConnect, {
       mapId: id
-    })), /*#__PURE__*/React__default["default"].createElement("div", {
+    })), showTimeSlider && /*#__PURE__*/React__default["default"].createElement("div", {
       className: classes.timeSlider
     }, /*#__PURE__*/React__default["default"].createElement(TimeSliderConnect, {
       mapId: id,
@@ -23038,7 +23132,9 @@
       shouldAnimate: shouldAnimate,
       animationPayload: animationPayload,
       shouldShowZoomControls: shouldShowZoomControls,
-      displayMapPin: displayMapPin
+      displayMapPin: displayMapPin,
+      toggleTimestepAuto: toggleTimestepAuto,
+      setTimestep: setTimestep
     }));
   };
 
@@ -23260,11 +23356,7 @@
           return removeGroup(groupObject.id);
         },
         size: "large"
-      }, index === 0 ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.Add, {
-        className: classes.iconColor
-      }) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.DeleteForever, {
-        className: classes.iconColor
-      })))), /*#__PURE__*/React__namespace.createElement(SyncGroupListItem, {
+      }, index === 0 ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.Add, null) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.DeleteForever, null)))), /*#__PURE__*/React__namespace.createElement(SyncGroupListItem, {
         viewStateData: viewStateData,
         groupId: groupObject.id,
         selected: groupObject.selected,
@@ -23290,110 +23382,10 @@
         backgroundColor: theme.palette.geowebColors.syncGroups.drawerOpen.fill,
         boxShadow: 'inset 0px 7px 7px -7px, inset 0px -7px 7px -7px',
         color: '#000000'
-      },
-      iconColor: {
-        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
       }
     });
   });
 
-  /* *
-   * 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.
@@ -23417,7 +23409,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
@@ -23522,7 +23517,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",
@@ -23578,14 +23575,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]);
@@ -23598,14 +23593,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
     });
   };
 
@@ -23850,8 +23886,9 @@
   exports.layerReducer = reducer$6;
   exports.makeMapPreset = makeMapPreset;
   exports.mapActions = actions$3;
-  exports.mapConstants = constants$1;
-  exports.mapSelectors = selectors;
+  exports.mapConstants = constants;
+  exports.mapModuleConfig = moduleConfig;
+  exports.mapSelectors = selectors$1;
   exports.mapTypes = types$2;
   exports.mapUtils = utils;
   exports.publicLayers = publicLayers;
@@ -23863,6 +23900,8 @@
   exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
   exports.testLayers = testLayers;
   exports.uiActions = actions$2;
+  exports.uiModuleConfig = uiModuleConfig;
+  exports.uiSelectors = selectors;
   exports.uiTypes = types$1;
   exports.useStyles = useStyles$3;