@opengeoweb/core 2.5.0 → 2.6.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('reselect'), require('moment'), require('lodash'), require('react'), require('immer'), require('redux-saga/effects'), require('@opengeoweb/webmap'), require('@mui/material'), require('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('@turf/turf'), 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', '@turf/turf', '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.turf, 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, turf, 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('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), 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', 'react-redux', '@mui/material', '@opengeoweb/shared', '@mui/styles/makeStyles', '@mui/icons-material', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', '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.reactRedux, global.material, global.shared, global.makeStyles, global.iconsMaterial, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
+})(this, (function (exports, reselect, moment, _, React, produce, effects, webmap, reactRedux, material, shared, makeStyles, iconsMaterial, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -227,19 +227,6 @@
       payload: payload
     };
   };
-  /**
-   * Toggles loop state for map
-   *
-   * Example: toggleLoop({ mapId: 'mapId1', shouldLoop: true })
-   * @param {object} payload object with mapId: string, shouldLoop: boolean
-   */
-
-  var toggleLoop = function toggleLoop(payload) {
-    return {
-      type: WEBMAP_TOGGLE_LOOP,
-      payload: payload
-    };
-  };
   /**
    *Sets the scale of a time slider with id for a map
    *
@@ -760,7 +747,6 @@
     layerMoveLayer: layerMoveLayer,
     setActiveLayerId: setActiveLayerId,
     toggleAutoUpdate: toggleAutoUpdate,
-    toggleLoop: toggleLoop,
     setTimeSliderScale: setTimeSliderScale,
     setTimeStep: setTimeStep,
     setAnimationDelay: setAnimationDelay,
@@ -878,6 +864,16 @@
     generatedTimesliderIds += 1;
     return "timesliderid_" + generatedTimesliderIds;
   };
+  var generatedServiceIds = 0;
+  var generateServiceId = function generateServiceId() {
+    generatedServiceIds += 1;
+    return "serviceid_" + generatedServiceIds;
+  };
+  var generatedTimeseriesIds = 0;
+  var generateTimeSeriesId = function generateTimeSeriesId() {
+    generatedTimeseriesIds += 1;
+    return "timeseriesid_" + generatedTimeseriesIds;
+  };
   /**
    * Map for registering wmlayers with their id's
    */
@@ -2410,18 +2406,6 @@
   var isAutoUpdating = reselect.createSelector(getMapById, function (store) {
     return store ? store.isAutoUpdating : false;
   });
-  /**
-   * Tells whether the "loop" behavior of animation is on/off
-   *
-   * Example: isLooping = isLooping(store, 'mapid_1')
-   * @param {object} store store: object - store object
-   * @param {string} mapId mapId: string - Id of the map
-   * @returns {boolean} returnType: boolean
-   */
-
-  var isLooping = reselect.createSelector(getMapById, function (store) {
-    return store ? store.isLooping : false;
-  });
   /**
    * Gets activeLayerId for map
    *
@@ -2713,14 +2697,21 @@
    *
    * Example: service = getServiceByName(store, 'serviceName')
    * @param {object} store store: object - Store object
-   * @returns {Service} returnType: Service
+   * @returns {ReduxService} returnType: Service
    */
 
-  var getServiceByName = reselect.createSelector([servicesStore, function (state, serviceName) {
-    return serviceName;
-  }], function (serviceState, serviceName) {
-    if (serviceState && serviceState.byId && serviceState.byId[serviceName]) {
-      return serviceState.byId[serviceName];
+  var getServiceByName = reselect.createSelector([servicesStore, function (state, serviceUrl) {
+    return serviceUrl;
+  }], function (serviceState, serviceUrl) {
+    var foundServiceIndex = serviceState.allIds.findIndex(function (id) {
+      return serviceState.byId[id].serviceUrl === serviceUrl;
+    });
+    /* Add the service based on a url */
+
+    var id = foundServiceIndex !== -1 ? serviceState.allIds[foundServiceIndex] : null;
+
+    if (serviceState && serviceState.byId && serviceState.byId[id]) {
+      return serviceState.byId[id];
     }
 
     return null;
@@ -2790,9 +2781,8 @@
     var services = store ? store.byId : {};
     var arrayOfServiceObjects = Object.keys(services).map(function (key) {
       return {
-        id: services[key].id,
         name: services[key].name,
-        service: services[key].service
+        serviceUrl: services[key].serviceUrl
       };
     });
     return arrayOfServiceObjects;
@@ -2837,7 +2827,6 @@
     getAnimationStartTime: getAnimationStartTime,
     getAnimationEndTime: getAnimationEndTime,
     isAutoUpdating: isAutoUpdating,
-    isLooping: isLooping,
     getActiveLayerId: getActiveLayerId,
     getMapTimeSliderScale: getMapTimeSliderScale,
     getMapTimeStep: getMapTimeStep,
@@ -4731,9 +4720,8 @@
       var updateObject = {
         origin: ORIGIN_REACTMAPVIEWPARSELAYER,
         serviceLayers: {
-          id: wmLayer.service,
           name: wmLayer.title,
-          service: wmLayer.service,
+          serviceUrl: wmLayer.service,
           layers: layers,
           isUserAddedService: false
         },
@@ -5564,155 +5552,6 @@
     sagas: [rootSaga$4, rootSaga$3]
   };
 
-  /* *
-   * 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 TooltipSelect = function TooltipSelect(_a) {
-    var tooltip = _a.tooltip,
-        _b = _a.list,
-        list = _b === void 0 ? [] : _b,
-        _c = _a.currentIndex,
-        currentIndex = _c === void 0 ? -1 : _c,
-        _d = _a.onChangeMouseWheel,
-        onChangeMouseWheel = _d === void 0 ? function () {} : _d,
-        _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 _f = __read(React__namespace.useState(false), 2),
-        selectOpen = _f[0],
-        setSelectOpen = _f[1];
-
-    var _g = __read(React__namespace.useState(false), 2),
-        tooltipOpen = _g[0],
-        setTooltipOpen = _g[1];
-
-    var preventDefault = function preventDefault(event) {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    var enableScroll = React__namespace.useCallback(function () {
-      document.removeEventListener('wheel', preventDefault, false);
-    }, []);
-    var disableScroll = React__namespace.useCallback(function () {
-      document.addEventListener('wheel', preventDefault, {
-        passive: false
-      });
-    }, []);
-    var onWheel = React__namespace.useCallback(function (event) {
-      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);
-    }, []);
-    var onClose = React__namespace.useCallback(function () {
-      setSelectOpen(false);
-    }, []);
-    var onMouseEnter = React__namespace.useCallback(function () {
-      if (!requiresCtrlToChange) {
-        disableScroll();
-      }
-
-      if (!selectOpen) setTooltipOpen(true);
-    }, [selectOpen, disableScroll, requiresCtrlToChange]);
-    var onMouseLeave = React__namespace.useCallback(function () {
-      enableScroll();
-      setTooltipOpen(false);
-    }, [enableScroll]);
-    var onFocus = React__namespace.useCallback(function () {
-      if (!requiresCtrlToChange) {
-        disableScroll();
-      }
-
-      setTooltipOpen(true);
-    }, [disableScroll, requiresCtrlToChange]);
-    var onBlur = React__namespace.useCallback(function () {
-      enableScroll();
-      setTooltipOpen(false);
-    }, [enableScroll]);
-    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-      title: tooltip,
-      placement: "top",
-      open: tooltipOpen
-    }, /*#__PURE__*/React__namespace.createElement(material.Select, __assign({
-      onOpen: onOpen,
-      onClose: onClose,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onWheel: onWheel,
-      MenuProps: {
-        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)));
-  };
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -6803,12 +6642,14 @@
     switch (action.type) {
       case MAP_SERVICES_SET_LAYERS:
         return produce__default["default"](state, function (draft) {
-          if (!draft.byId[action.payload.service]) draft.byId[action.payload.service] = {};
-          draft.byId[action.payload.service].id = action.payload.id;
-          draft.byId[action.payload.service].name = action.payload.name;
-          draft.byId[action.payload.service].service = action.payload.service;
-          draft.byId[action.payload.service].layers = action.payload.layers;
-          if (!draft.allIds.includes(action.payload.service)) draft.allIds.push(action.payload.service);
+          var foundServiceIndex = draft.allIds.findIndex(function (id) {
+            return draft.byId[id].serviceUrl === action.payload.serviceUrl;
+          });
+          /* Add the service based on a url */
+
+          var id = foundServiceIndex !== -1 ? draft.allIds[foundServiceIndex] : generateServiceId();
+          draft.byId[id] = __assign({}, action.payload);
+          if (!draft.allIds.includes(id)) draft.allIds.push(id);
         });
 
       case WEBMAP_UPDATE_LAYER_INFO:
@@ -6824,11 +6665,16 @@
 
       case MAP_SERVICES_REMOVE_SERVICE:
         return produce__default["default"](state, function (draft) {
-          if (draft.byId[action.payload.serviceUrl]) {
+          var foundServiceIndex = draft.allIds.findIndex(function (id) {
+            return draft.byId[id].serviceUrl === action.payload.serviceUrl;
+          });
+
+          if (foundServiceIndex !== -1) {
+            var serviceId_1 = draft.allIds[foundServiceIndex];
             draft.allIds = draft.allIds.filter(function (id) {
-              return id !== action.payload.serviceUrl;
+              return id !== serviceId_1;
             });
-            delete draft.byId[action.payload.serviceUrl];
+            delete draft.byId[serviceId_1];
           }
         });
 
@@ -7676,6 +7522,22 @@
     };
   };
 
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function (obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function (obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
+  }
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -7692,9 +7554,34 @@
    * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2022 - Finnish Meteorological Institute (FMI)
    * */
+  var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
+    return Object.values(__assign(__assign({}, presets.reduce(function (byId, preset) {
+      var _a;
+
+      return __assign(__assign({}, byId), (_a = {}, _a[preset.id] = preset, _a));
+    }, {})), userAddedServices));
+  };
+  var isService = function isService(param) {
+    var serviceParam = param;
+    return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.id) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
+  };
+
   var getUserAddedServices = function getUserAddedServices() {
     try {
-      return JSON.parse(window.localStorage.getItem('userAddedServices')) || {};
+      var storedString = window.localStorage.getItem('userAddedServices');
+      var parsedData = JSON.parse(storedString);
+
+      if (parsedData && _typeof(parsedData) === 'object') {
+        return Object.entries(parsedData).reduce(function (userServices, _a) {
+          var _b;
+
+          var _c = __read(_a, 2),
+              serviceUrl = _c[0],
+              service = _c[1];
+
+          return __assign(__assign({}, userServices), isService(service) ? (_b = {}, _b[serviceUrl] = service, _b) : {});
+        }, {});
+      }
     } catch (e) {
       console.error('Unable to read services from localStorage: ', e);
     }
@@ -7726,19 +7613,19 @@
    * Copyright 2022 - Finnish Meteorological Institute (FMI)
    * */
   function newServiceAddedSaga(capturedAction) {
-    var addedService, service, keywords;
+    var addedService, serviceUrl, keywords;
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
           addedService = capturedAction.payload;
-          service = addedService.service;
+          serviceUrl = addedService.serviceUrl;
           keywords = addedService.layers.reduce(function (keywordAccumulator, layer) {
             return keywordAccumulator.concat(layer.path, layer.keywords);
           }, []);
           return [4
           /*yield*/
           , effects.put(addKeywordsAndActiveServices({
-            serviceUrl: service,
+            serviceUrl: serviceUrl,
             keywords: keywords
           }))];
 
@@ -7777,20 +7664,27 @@
     var _b;
 
     var payload = _a.payload;
-    var id = payload.id,
-        isUserAddedService = payload.isUserAddedService,
+    var isUserAddedService = payload.isUserAddedService,
         name = payload.name,
-        service = payload.service;
+        serviceUrl = payload.serviceUrl;
     if (!isUserAddedService) return;
     var localStorageServices = getUserAddedServices();
-    setUserAddedServices({
-      byId: __assign(__assign({}, localStorageServices.byId), (_b = {}, _b[service] = {
-        id: id,
-        name: name,
-        service: service
-      }, _b)),
-      allIds: __spreadArray([], __read(new Set(__spreadArray(__spreadArray([], __read(localStorageServices.allIds || [])), [service]))))
-    });
+    setUserAddedServices(__assign(__assign({}, localStorageServices), (_b = {}, _b[serviceUrl] = {
+      id: serviceUrl,
+      name: name,
+      url: serviceUrl
+    }, _b)));
+  }
+  function removeServiceFromLocalStorageSaga(_a) {
+    var payload = _a.payload;
+    var serviceUrl = payload.serviceUrl;
+    var localStorageServices = getUserAddedServices();
+    if (!localStorageServices[serviceUrl]) return;
+
+    var updatedServices = __assign({}, localStorageServices);
+
+    delete updatedServices[serviceUrl];
+    setUserAddedServices(updatedServices);
   }
   function rootSaga() {
     return __generator(this, function (_a) {
@@ -7817,6 +7711,13 @@
         case 3:
           _a.sent();
 
+          return [4
+          /*yield*/
+          , effects.takeEvery(MAP_SERVICES_REMOVE_SERVICE, removeServiceFromLocalStorageSaga)];
+
+        case 4:
+          _a.sent();
+
           return [2
           /*return*/
           ];
@@ -8175,7 +8076,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var connectRedux$7 = reactRedux.connect(function (store, props) {
+  var connectRedux$6 = reactRedux.connect(function (store, props) {
     return {
       loadedLayers: getMapLayers(store, props.mapId)
     };
@@ -8238,7 +8139,7 @@
     });
   };
 
-  var WMSLayerTreeConnect = connectRedux$7(ConnectedTree);
+  var WMSLayerTreeConnect = connectRedux$6(ConnectedTree);
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8613,7 +8514,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$w = makeStyles__default["default"]({
+  var useStyles$u = makeStyles__default["default"]({
     buttonDiv: {
       position: 'relative'
     },
@@ -8649,7 +8550,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$w();
+    var classes = useStyles$u();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -8813,7 +8714,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var styles$1 = {
+  var styles$2 = {
     buttonDiv: {
       position: 'relative'
     },
@@ -8864,7 +8765,7 @@
       title: tooltip
     }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       onClick: handleClose,
-      sx: styles$1.button,
+      sx: styles$2.button,
       disableRipple: true,
       "data-testid": "addLayersButton",
       ref: ref,
@@ -9029,7 +8930,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$v = makeStyles__default["default"]({
+  var useStyles$t = makeStyles__default["default"]({
     row: {
       height: '32px'
     },
@@ -9053,7 +8954,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e;
-    var classes = useStyles$v();
+    var classes = useStyles$t();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -9097,65 +8998,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 useTooltipContainerStyles = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      textContainer: {
-        width: '100%',
-        height: 32,
-        fontWeight: 500,
-        fontSize: theme.palette.geowebColors.layerManager.tableRowDefaultText.fontSize,
-        color: function color(isEnabled) {
-          return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultText.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledText.rgba;
-        },
-        '& .MuiOutlinedInput-input': {
-          padding: '6px 24px 6px 8px'
-        },
-        '& .MuiOutlinedInput-notchedOutline': {
-          borderColor: 'transparent!important'
-        },
-        '&:hover .MuiSelect-select': {
-          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
-        },
-        '&.Mui-focused .MuiSelect-select': {
-          outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
-        },
-        '&:hover&.MuiButton-root': {
-          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
-        },
-        '&:focus&.MuiButton-root': {
-          outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-          backgroundColor: theme.palette.geowebColors.buttons.tool.mouseOver.fill
-        },
-        '& .MuiSvgIcon-root': {
-          transition: 'none',
-          fill: function fill(isEnabled) {
-            return isEnabled ? theme.palette.geowebColors.buttons.flat["default"].color : theme.palette.geowebColors.buttons.flat.disabled.color;
-          }
-        },
-        '&>div': {
-          paddingLeft: 8
-        }
-      }
-    });
-  });
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -9179,7 +9021,6 @@
         _b = _a.layerDimensions,
         layerDimensions = _b === void 0 ? [] : _b,
         isEnabled = _a.isEnabled;
-    var classes = useTooltipContainerStyles(isEnabled);
 
     var _c = __read(React__namespace.useState(layerDimensions.length ? layerDimensions[0].name : ''), 2),
         activeDimName = _c[0],
@@ -9256,7 +9097,7 @@
     }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: 12
-    }, /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+    }, /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
       disableUnderline: true,
       tooltip: "Select the dimension to adjust, currently it is set to " + activeDimName + " with value " + activeDim.currentValue,
       inputProps: {
@@ -9264,7 +9105,7 @@
           'data-testid': 'selectDimension'
         }
       },
-      className: classes.textContainer,
+      isEnabled: isEnabled,
       value: activeDimName,
       list: dimNameList,
       currentIndex: dimNameCurrentIndex,
@@ -9282,7 +9123,7 @@
         key: dimension.name,
         value: dimension.name
       }, dimension.name);
-    })), /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+    })), /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
       disableUnderline: true,
       tooltip: "Dimension " + activeDimName + " is set to " + activeDim.currentValue + " with units " + activeDim.units,
       inputProps: {
@@ -9290,7 +9131,7 @@
           'data-testid': 'selectDimensionValue'
         }
       },
-      className: classes.textContainer,
+      isEnabled: isEnabled,
       value: activeDim && activeDim.currentValue,
       list: dimValueList,
       currentIndex: dimValueCurrentIndex,
@@ -9327,7 +9168,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$u = makeStyles__default["default"](function (theme) {
+  var useStyles$s = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       dropdownEmpty: {
         paddingLeft: 8,
@@ -9377,8 +9218,7 @@
         layers = _b === void 0 ? [] : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c;
-    var classes = useStyles$u();
-    var containerClass = useTooltipContainerStyles(isEnabled);
+    var classes = useStyles$s();
 
     if (!layers || !layers.length) {
       return /*#__PURE__*/React__namespace.createElement("div", {
@@ -9404,7 +9244,7 @@
         value: layer.name
       };
     });
-    return /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+    return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
       disableUnderline: true,
       tooltip: "Select a layer",
       inputProps: {
@@ -9412,7 +9252,7 @@
           'data-testid': 'selectLayer'
         }
       },
-      className: containerClass.textContainer,
+      isEnabled: isEnabled,
       value: currentValue,
       list: list,
       currentIndex: currentIndex,
@@ -9420,15 +9260,27 @@
       onChangeMouseWheel: function onChangeMouseWheel(e) {
         return onChangeLayerName(e.value);
       },
-      requiresCtrlToChange: true
+      requiresCtrlToChange: true,
+      renderValue: function renderValue(value) {
+        return extendedLayers.find(function (layer) {
+          return layer.name === value;
+        }).text;
+      }
     }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
-    }, "Layer"), extendedLayers.map(function (layerFromServiceLayers) {
+    }, "Layer"), extendedLayers.map(function (layerFromServiceLayers, currentIndex) {
       return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: layerFromServiceLayers.name,
         value: layerFromServiceLayers.name,
-        disabled: !layerFromServiceLayers.leaf
-      }, layerFromServiceLayers.text);
+        disabled: !layerFromServiceLayers.leaf,
+        sx: {
+          '& .MuiSvgIcon-root': {
+            marginLeft: '28px'
+          }
+        }
+      }, layerFromServiceLayers.text, currentIndex === layers.length && /*#__PURE__*/React__namespace.createElement(shared.AlertIcon, {
+        severity: "error"
+      }));
     }));
   };
 
@@ -9448,7 +9300,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$t = makeStyles__default["default"](function (theme) {
+  var useStyles$r = makeStyles__default["default"](function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -9509,9 +9361,8 @@
         onLayerChangeOpacity = _a.onLayerChangeOpacity,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$t();
+    var classes = useStyles$r();
     var sliderClasses = shared.sliderStyles();
-    var containerClass = useTooltipContainerStyles(isEnabled);
 
     var _c = __read(React__namespace.useState(false), 2),
         open = _c[0],
@@ -9521,22 +9372,8 @@
         tooltipOpen = _d[0],
         setTooltipOpen = _d[1];
 
-    var preventDefault = function preventDefault(event) {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    var enableScroll = React__namespace.useCallback(function () {
-      document.removeEventListener('wheel', preventDefault, false);
-    }, []);
-    var disableScroll = React__namespace.useCallback(function () {
-      document.addEventListener('wheel', preventDefault, {
-        passive: false
-      });
-    }, []);
     var onWheel = React__namespace.useCallback(function (event) {
       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
@@ -9544,8 +9381,8 @@
         window.requestAnimationFrame(function () {
           onLayerChangeOpacity(newValue_1);
         });
-      } else enableScroll();
-    }, [currentOpacity, onLayerChangeOpacity, disableScroll, enableScroll]);
+      }
+    }, [currentOpacity, onLayerChangeOpacity]);
     var onClickButton = React__namespace.useCallback(function () {
       setOpen(!open);
     }, [open]);
@@ -9558,23 +9395,21 @@
       if (!open) setTooltipOpen(true);
     }, [open]);
     var onMouseLeave = React__namespace.useCallback(function () {
-      enableScroll();
       setTooltipOpen(false);
-    }, [enableScroll]);
+    }, []);
     var onFocus = React__namespace.useCallback(function () {
       setTooltipOpen(true);
     }, []);
     var onBlur = React__namespace.useCallback(function () {
-      enableScroll();
       setTooltipOpen(false);
-    }, [enableScroll]);
+    }, []);
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.opacityDiv,
       onWheel: onWheel,
       "data-testid": "scrollOpacity"
     }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: tooltipTitle,
-      className: containerClass.textContainer,
+      sx: shared.tooltipContainerStyles(isEnabled),
       placement: "top",
       open: tooltipOpen
     }, /*#__PURE__*/React__namespace.createElement(material.Button, {
@@ -9665,7 +9500,6 @@
         onChangeLayerStyle = _a.onChangeLayerStyle,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useTooltipContainerStyles(isEnabled);
     var styles = [{
       title: 'default',
       name: 'default',
@@ -9692,7 +9526,7 @@
     var currentIndex = styles.findIndex(function (style) {
       return currentStyle === style.name;
     });
-    return /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+    return /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
       disableUnderline: true,
       tooltip: "Select a style for layer " + layerName,
       inputProps: {
@@ -9700,7 +9534,7 @@
           'data-testid': 'selectStyle'
         }
       },
-      className: classes.textContainer,
+      isEnabled: isEnabled,
       value: currentStyle,
       list: list,
       currentIndex: currentIndex,
@@ -9735,7 +9569,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$s = makeStyles__default["default"](function (theme) {
+  var useStyles$q = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       svgIcon: {
         fill: function fill(_a) {
@@ -9764,7 +9598,7 @@
         isActive = _c === void 0 ? false : _c,
         _d = _a.isEnabled,
         isEnabled = _d === void 0 ? true : _d;
-    var classes = useStyles$s({
+    var classes = useStyles$q({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -9817,7 +9651,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$r = makeStyles__default["default"](function (theme) {
+  var useStyles$p = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       row: {
         background: function background(isEnabled) {
@@ -9871,7 +9705,7 @@
         layerActiveLayout = _a.layerActiveLayout,
         layerManagerWidth = _a.layerManagerWidth,
         dragHandle = _a.dragHandle;
-    var classes = useStyles$r(isEnabled);
+    var classes = useStyles$p(isEnabled);
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
     var onClickRow = function onClickRow() {
@@ -10513,7 +10347,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$q = makeStyles__default["default"](function () {
+  var useStyles$o = makeStyles__default["default"](function () {
     return {
       layerRows: {
         width: '100%',
@@ -10533,6 +10367,11 @@
     var mapId = _a.mapId,
         layerManagerWidth = _a.layerManagerWidth;
     var dispatch = reactRedux.useDispatch();
+
+    var _b = __read(React__namespace.useState(false), 2),
+        keyPressed = _b[0],
+        setKeyPressed = _b[1];
+
     var layerIds = reactRedux.useSelector(function (store) {
       return getLayerIds(store, mapId);
     });
@@ -10548,9 +10387,9 @@
       }));
     }, [dispatch]);
 
-    var _b = __read(React__namespace.useState(null), 2),
-        activeDragIndex = _b[0],
-        setActiveDragIndex = _b[1];
+    var _c = __read(React__namespace.useState(null), 2),
+        activeDragIndex = _c[0],
+        setActiveDragIndex = _c[1];
 
     var onSetList = function onSetList() {}; // since we use activeDragIndex, we don't need inner state handling of ReactSortable
 
@@ -10579,7 +10418,43 @@
 
     var isSorting = activeDragIndex !== null;
     var isDragDisabled = layerIds.length === 1;
-    var classes = useStyles$q(isSorting);
+    var classes = useStyles$o(isSorting);
+
+    var keyPressedTrue = function keyPressedTrue(event) {
+      if (event.ctrlKey || event.metaKey) {
+        setKeyPressed(true);
+      }
+    };
+
+    var keyPressedFalse = function keyPressedFalse() {
+      setKeyPressed(false);
+    };
+
+    React__namespace.useEffect(function () {
+      window.addEventListener('keydown', keyPressedTrue);
+      window.addEventListener('keyup', keyPressedFalse);
+      return function () {
+        window.removeEventListener('keydown', keyPressedTrue);
+        window.removeEventListener('keyup', keyPressedFalse);
+      };
+    }, []);
+    var preventDefault = React__namespace.useCallback(function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }, []);
+    React__namespace.useEffect(function () {
+      if (keyPressed === true) {
+        window.addEventListener('wheel', preventDefault, {
+          passive: false
+        });
+      } else {
+        window.removeEventListener('wheel', preventDefault);
+      }
+
+      return function () {
+        return window.removeEventListener('wheel', preventDefault);
+      };
+    }, [keyPressed, preventDefault]);
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
@@ -10635,7 +10510,6 @@
     var selectedBaseLayers = _a.selectedBaseLayers,
         availableBaseLayers = _a.availableBaseLayers,
         onChangeBaseLayers = _a.onChangeBaseLayers;
-    var classes = useTooltipContainerStyles();
 
     if (!availableBaseLayers || !availableBaseLayers.length) {
       return /*#__PURE__*/React__namespace.createElement("div", null, "No service available");
@@ -10654,7 +10528,7 @@
       style: {
         width: '100%'
       }
-    }, /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
+    }, /*#__PURE__*/React__namespace.createElement(shared.TooltipSelect, {
       disableUnderline: true,
       tooltip: "Select base layer",
       inputProps: {
@@ -10665,7 +10539,7 @@
       style: {
         maxWidth: '100%'
       },
-      className: classes.textContainer,
+      isEnabled: true,
       value: selectedBaseLayerId,
       list: list,
       currentIndex: currentIndex,
@@ -10789,7 +10663,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$p = makeStyles__default["default"]({
+  var useStyles$n = makeStyles__default["default"]({
     layerRow: {
       width: '100%',
       height: '36px'
@@ -10812,7 +10686,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _d = _a.tooltip,
         tooltip = _d === void 0 ? '' : _d;
-    var classes = useStyles$p();
+    var classes = useStyles$n();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -10857,7 +10731,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$o = makeStyles__default["default"]({
+  var styles$1 = {
     layerRowContainer: {
       position: 'relative',
       width: '100%',
@@ -10871,7 +10745,7 @@
       width: '100%',
       boxSizing: 'border-box'
     }
-  });
+  };
 
   var LayerManager = function LayerManager(_a) {
     var mapId = _a.mapId,
@@ -10891,12 +10765,13 @@
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e,
         _f = _a.showAddLayersTooltip,
-        showAddLayersTooltip = _f === void 0 ? true : _f;
-    var classes = useStyles$o();
+        showAddLayersTooltip = _f === void 0 ? true : _f,
+        _g = _a.leftComponent,
+        leftComponent = _g === void 0 ? null : _g;
 
-    var _g = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
-        layerManagerWidth = _g[0],
-        setLayerManagerWidth = _g[1];
+    var _h = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
+        layerManagerWidth = _h[0],
+        setLayerManagerWidth = _h[1];
 
     var onChangeSize = function onChangeSize(_a) {
       var width = _a.width;
@@ -10923,13 +10798,14 @@
       "data-testid": "layerManagerWindow",
       onMouseDown: onMouseDown,
       order: order,
-      source: source
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.layerManagerContainer
+      source: source,
+      leftComponent: leftComponent
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: styles$1.layerManagerContainer
     }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       "data-testid": "layerManagerRowContainer",
-      className: classes.layerRowContainer
+      sx: styles$1.layerRowContainer
     }, /*#__PURE__*/React__namespace.createElement(DescriptionRow, {
       mapId: mapId,
       tooltip: showAddLayersTooltip ? 'Add Layers' : '',
@@ -11310,9 +11186,8 @@
                 }
 
                 serviceSetLayers({
-                  id: serviceUrl,
                   name: serviceName,
-                  service: serviceUrl,
+                  serviceUrl: serviceUrl,
                   layers: serviceLayers,
                   isUserAddedService: true
                 });
@@ -11731,6 +11606,65 @@
     });
   };
 
+  /* *
+   * 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 getMapStoreServiceFromLayerSelectServiceId = function getMapStoreServiceFromLayerSelectServiceId(services, serviceId) {
+    /*
+      Because the mapStore services redux store is refactored,
+      the id's do not match anymore with the layerSelect services redux store.
+      The following code ensures that the right mapStore service is found based on the id in the layerSelect store.
+         TODO: https://gitlab.com/opengeoweb/opengeoweb/-/issues/1883
+    */
+    var mapStoreServiceIndex = Object.keys(services).findIndex(function (serviceKey) {
+      return services[serviceKey].serviceUrl === serviceId;
+    });
+
+    if (mapStoreServiceIndex === -1) {
+      console.warn("serviceId " + serviceId + " not found");
+      return null;
+    }
+
+    return services[Object.keys(services)[mapStoreServiceIndex]];
+  };
+  var filterLayersFromService = function filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString) {
+    var mapStoreService = getMapStoreServiceFromLayerSelectServiceId(services, serviceId);
+    if (!mapStoreService) return [];
+
+    if (searchString === '' && allKeywordsActive) {
+      return mapStoreService.layers.filter(function (layer) {
+        return layer.leaf;
+      });
+    }
+
+    var searchStringArray = searchString.split(' ');
+    return mapStoreService.layers.filter(function (layer) {
+      return searchStringArray.every(function (search) {
+        var layerPathAndKeywords = layer.path.concat(layer.keywords);
+        return (!!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
+          return !keywordIds.includes(keyword);
+        }) || allKeywordsActive) && (!!layer.name && layer.name.toLowerCase().includes(search.toLowerCase()) || !!layer.text && layer.text.toLowerCase().includes(search.toLowerCase()) || !!layer["abstract"] && layer["abstract"].toLowerCase().includes(search.toLowerCase()) || !!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
+          return !keyword.toLowerCase().includes(search.toLowerCase());
+        }) || mapStoreService.name.toLowerCase().includes(search.toLowerCase()));
+      });
+    }).filter(function (layer) {
+      return layer.leaf;
+    });
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -11788,29 +11722,103 @@
    * See the License for the specific language governing permissions and
    * limitations under the License.
    *
-   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2021 - Finnish Meteorological Institute (FMI)
+   * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2022 - Finnish Meteorological Institute (FMI)
    * */
-  var filterLayersFromService = function filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString) {
-    if (searchString === '' && allKeywordsActive) {
-      return services[serviceId].layers.filter(function (layer) {
-        return layer.leaf;
-      });
-    }
 
-    var searchStringArray = searchString.split(' ');
-    return services[serviceId].layers.filter(function (layer) {
-      return searchStringArray.every(function (search) {
-        var layerPathAndKeywords = layer.path.concat(layer.keywords);
-        return (!!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
-          return !keywordIds.includes(keyword);
-        }) || allKeywordsActive) && (!!layer.name && layer.name.toLowerCase().includes(search.toLowerCase()) || !!layer.text && layer.text.toLowerCase().includes(search.toLowerCase()) || !!layer["abstract"] && layer["abstract"].toLowerCase().includes(search.toLowerCase()) || !!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
-          return !keyword.toLowerCase().includes(search.toLowerCase());
-        }) || services[serviceId].name.toLowerCase().includes(search.toLowerCase()));
-      });
-    }).filter(function (layer) {
-      return layer.leaf;
-    });
+  var LayerListRow = function LayerListRow(_a) {
+    var layer = _a.layer,
+        layerIndex = _a.layerIndex,
+        serviceId = _a.serviceId,
+        addLayer = _a.addLayer,
+        deleteLayer = _a.deleteLayer,
+        mapLayers = _a.mapLayers;
+    return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      "data-testid": "layerListLayerRow",
+      container: true,
+      item: true,
+      xs: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      sx: {
+        backgroundColor: 'geowebColors.cards.cardContainer',
+        paddingLeft: '12px',
+        marginBottom: '4px',
+        height: '64px',
+        border: 'solid 1px',
+        borderColor: 'geowebColors.cards.cardContainerBorder'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      container: true,
+      item: true,
+      xs: 10
+    }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      container: true,
+      item: true,
+      xs: 12
+    }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      sx: {
+        fontSize: '12px',
+        height: '24px',
+        lineHeight: '24px',
+        fontWeight: 500,
+        WebkitLineClamp: 1,
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+      }
+    }, layer.text)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      container: true,
+      item: true,
+      xs: 4
+    }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      sx: {
+        fontSize: '12px',
+        height: '24px',
+        lineHeight: '24px',
+        WebkitLineClamp: 1,
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+      }
+    }, layer.name)), layer["abstract"] ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      "data-testid": "layerAbstract",
+      container: true,
+      item: true,
+      xs: 8,
+      sx: {
+        fontSize: '10px',
+        height: '30px',
+        paddingLeft: '20px',
+        WebkitLineClamp: 2,
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+      }
+    }, layer["abstract"]) : null), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      container: true,
+      item: true,
+      xs: 2,
+      justifyContent: "flex-end",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      sx: {
+        width: '80px',
+        height: '48px',
+        marginRight: '8px',
+        paddingTop: '4px'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(LayerAddRemoveButton, {
+      layer: layer,
+      layerIndex: layerIndex,
+      serviceId: serviceId,
+      addLayer: addLayer,
+      deleteLayer: deleteLayer,
+      mapLayers: mapLayers
+    }))));
   };
 
   /* *
@@ -11826,56 +11834,9 @@
    * See the License for the specific language governing permissions and
    * limitations under the License.
    *
-   * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-   * Copyright 2021 - Finnish Meteorological Institute (FMI)
+   * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2022 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$n = makeStyles__default["default"](function (theme) {
-    return {
-      layerRow: {
-        background: theme.palette.geowebColors.cards.cardContainer,
-        padding: '8px 0px 8px 12px',
-        marginBottom: '4px',
-        height: '64px',
-        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'
-      },
-      layerName: {
-        fontSize: '12px',
-        height: '24px',
-        overflow: 'clip',
-        "float": 'left',
-        paddingTop: '6px',
-        whiteSpace: 'nowrap'
-      },
-      layerNameMaxWidth: {
-        maxWidth: '270px'
-      },
-      layerAbstract: {
-        fontSize: '10px',
-        paddingLeft: '200px',
-        overflow: 'clip',
-        height: '30px'
-      },
-      resultCount: {
-        marginBottom: '4px',
-        fontSize: '12px'
-      },
-      layerButton: {
-        marginRight: '8px',
-        marginTop: '4px',
-        width: '80px'
-      }
-    };
-  });
 
   var LayerList = function LayerList(_a) {
     var services = _a.services,
@@ -11887,7 +11848,6 @@
         mapLayers = _a.mapLayers,
         keywordIds = _a.keywordIds,
         allKeywordsActive = _a.allKeywordsActive;
-    var classes = useStyles$n();
 
     var _b = __read(React__namespace.useState(0), 2),
         numberOfLayers = _b[0],
@@ -11898,42 +11858,29 @@
         return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
       }, 0));
     }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    return /*#__PURE__*/React__namespace.createElement(material.Box, {
       "data-testid": "layerList"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.resultCount
-    }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: {
+        marginBottom: '4px',
+        fontSize: '12px'
+      }
+    }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: {
         height: layerSelectHeight - 199,
         overflow: 'auto'
       }
     }, serviceIds.map(function (serviceId) {
       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", 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
-        }, layer.name), /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.layerAbstract,
-          "data-testid": "layerAbstract"
-        }, layer["abstract"])) : /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.layerName
-        }, layer.name))), /*#__PURE__*/React__namespace.createElement("div", {
-          className: classes.layerButton
-        }, /*#__PURE__*/React__namespace.createElement(LayerAddRemoveButton, {
+        return /*#__PURE__*/React__namespace.createElement(LayerListRow, {
+          key: layer.name,
           layer: layer,
           layerIndex: layerIndex,
           serviceId: serviceId,
           addLayer: addLayer,
           deleteLayer: deleteLayer,
           mapLayers: mapLayers
-        }))));
+        });
       });
     })));
   };
@@ -12067,10 +12014,10 @@
       tabIndex: 0,
       "data-testid": all ? 'serviceChipAll' : 'serviceChip',
       onClick: function onClick() {
-        return toggleChip(all ? 'all' : service && service.service);
+        return toggleChip(all ? 'all' : service && service.serviceUrl);
       },
       onKeyPress: function onKeyPress() {
-        return toggleChip(all ? 'all' : service && service.service);
+        return toggleChip(all ? 'all' : service && service.serviceUrl);
       },
       sx: style
     }, service ? service.name : 'All');
@@ -12301,13 +12248,14 @@
       key: "All",
       all: true,
       isEnabled: isAllEnabled
-    }), Object.keys(services).map(function (service) {
+    }), Object.keys(services).map(function (serviceId) {
       var _a;
 
+      var service = services[serviceId];
       return /*#__PURE__*/React__namespace.createElement(ServiceChipConnect, {
-        key: services[service].id,
-        service: services[service],
-        isEnabled: (_a = activeServices[service]) === null || _a === void 0 ? void 0 : _a.enabled
+        key: serviceId,
+        service: service,
+        isEnabled: (_a = activeServices[service.serviceUrl]) === null || _a === void 0 ? void 0 : _a.enabled
       });
     })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronRight, {
       className: classes.scrollArrowRight,
@@ -12456,7 +12404,7 @@
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "Edit Service"
       }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
-        disabled: isDisabled(service.service),
+        disabled: isDisabled(service.serviceUrl),
         "data-testid": "openEditServiceButton",
         size: "large"
       }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
@@ -12466,9 +12414,9 @@
         title: "Delete Service"
       }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         size: "large",
-        disabled: isDisabled(service.service),
+        disabled: isDisabled(service.serviceUrl),
         onClick: function onClick() {
-          return mapStoreRemoveService(service.service);
+          return mapStoreRemoveService(service.serviceUrl);
         },
         "data-testid": "removeServiceButton"
       }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
@@ -13179,13 +13127,12 @@
     }, [dispatch]);
     React__namespace.useEffect(function () {
       if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
-        preloadedServices.forEach(function (service) {
+        mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
           getLayersFlattenedFromService(service.url).then(function (layers) {
             if (isMounted.current) {
               serviceSetLayers$1({
-                id: service.id,
                 name: service.name,
-                service: service.url,
+                serviceUrl: service.url,
                 layers: layers,
                 isUserAddedService: false
               });
@@ -13245,7 +13192,9 @@
         _b = _a.showTitle,
         showTitle = _b === void 0 ? false : _b,
         _c = _a.layerSelect,
-        layerSelect = _c === void 0 ? false : _c;
+        layerSelect = _c === void 0 ? false : _c,
+        _d = _a.leftComponent,
+        leftComponent = _d === void 0 ? null : _d;
     var dispatch = reactRedux.useDispatch();
     var isOpenInStore = reactRedux.useSelector(function (store) {
       return getisDialogOpen(store, 'layerManager');
@@ -13314,8 +13263,11 @@
       onMouseDown: onOrderDialog,
       order: uiOrder,
       source: uiSource,
-      layerSelect: layerSelect
-    }), layerSelect && /*#__PURE__*/React__namespace.createElement(LayerSelectConnect, null));
+      layerSelect: layerSelect,
+      leftComponent: leftComponent
+    }), layerSelect && /*#__PURE__*/React__namespace.createElement(LayerSelectConnect, {
+      preloadedServices: preloadedMapServices
+    }));
   };
 
   /* *
@@ -14283,60 +14235,6 @@
     }, "AUTO")))))));
   };
 
-  /* *
-   * 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 svgLoopPath = {
-    title: 'Loop',
-    src: 'M20.029 10.371c.24-.013.487.078.67.246.176.162.278.38.288.615.001 0 .22 1.941-1.458 3.79-1.124 1.224-2.718 1.844-4.74 1.844H6.96v1.288c0 .43-.284.654-.564.654-.14 0-.277-.05-.41-.148l-2.671-1.948c-.2-.147-.314-.36-.314-.587 0-.229.114-.443.315-.588l2.67-1.95c.134-.096.272-.145.41-.145.28 0 .563.224.563.653v1.116h7.832c1.417 0 2.59-.465 3.393-1.342 1.025-1.13 1.011-2.28.998-2.5-.023-.508.355-.954.842-.998zM17.605 5c.14 0 .277.05.41.148l2.671 1.947c.2.147.314.36.314.587 0 .23-.114.444-.315.589l-2.67 1.949c-.134.096-.272.146-.41.146-.28 0-.563-.224-.563-.654V8.597H9.21c-1.416 0-2.59.465-3.393 1.342-1.025 1.13-1.011 2.329-.999 2.558.024.508-.354.954-.841.998l-.05.002c-.228 0-.454-.09-.626-.248-.176-.163-.278-.38-.288-.614-.002 0-.227-1.993 1.458-3.849 1.124-1.224 2.718-1.845 4.74-1.845h7.83V5.654c0-.429.284-.654.564-.654z'
-  };
-  var svgLoopOffPath = {
-    title: 'Loop off',
-    src: 'M15.154 3.26l1.827.814-1.278 2.867h1.339V5.654c0-.429.283-.654.563-.654.14 0 .277.05.41.148l2.671 1.947c.2.147.314.36.314.587 0 .23-.114.444-.315.589l-2.67 1.949c-.134.096-.272.146-.41.146-.28 0-.563-.224-.563-.654V8.597h-2.076l-2.944 6.613h2.768c1.328 0 2.442-.408 3.238-1.182l.155-.16c1.025-1.129 1.011-2.279.998-2.499-.023-.508.355-.954.842-.998.247-.013.493.078.676.246.176.162.278.38.288.615.001 0 .22 1.941-1.458 3.79-1.124 1.224-2.718 1.844-4.74 1.844h-3.504l-2.439 5.478-1.827-.813 2.077-4.666H6.958v1.29c0 .429-.283.653-.563.653-.14 0-.277-.05-.41-.148l-2.671-1.948c-.2-.147-.314-.36-.314-.587 0-.229.114-.443.315-.588l2.67-1.95c.134-.096.272-.145.41-.145.28 0 .563.224.563.653v1.116h2.875l2.944-6.614H9.21c-1.322 0-2.432.405-3.228 1.172l-.165.17c-1.025 1.13-1.011 2.329-.999 2.558.024.508-.354.954-.841.998l-.05.002c-.228 0-.454-.09-.626-.248-.176-.163-.278-.38-.288-.614-.002 0-.227-1.993 1.458-3.849 1.124-1.224 2.718-1.845 4.74-1.845h4.303l1.64-3.68z'
-  };
-
-  var LoopButton = function LoopButton(_a) {
-    var _b = _a.isLooping,
-        isLooping = _b === void 0 ? true : _b,
-        _c = _a.isDisabled,
-        isDisabled = _c === void 0 ? false : _c,
-        _d = _a.onToggleLoop,
-        onToggleLoop = _d === void 0 ? function () {
-      return null;
-    } : _d;
-    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(shared.ToolButton, {
-      onClick: function onClick() {
-        return onToggleLoop();
-      },
-      active: isLooping,
-      disabled: isDisabled,
-      "data-testid": "loopButton"
-    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
-      width: 24,
-      height: 24,
-      fill: "transparent"
-    }), /*#__PURE__*/React__namespace.createElement("path", {
-      "data-testid": isLooping ? 'loop-off-svg-path' : 'loop-svg-path',
-      d: loopButtonPath.src
-    })))));
-  };
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -14810,7 +14708,6 @@
 
   var OptionsMenuButton = function OptionsMenuButton(_a) {
     var autoUpdateBtn = _a.autoUpdateBtn,
-        loopBtn = _a.loopBtn,
         speedBtn = _a.speedBtn,
         timeStepBtn = _a.timeStepBtn;
 
@@ -14873,9 +14770,6 @@
     })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: "auto"
-    }, loopBtn || /*#__PURE__*/React__namespace.createElement(LoopButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-      item: true,
-      xs: "auto"
     }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)))));
   };
 
@@ -14964,7 +14858,6 @@
 
   var TimeSliderButtons = function TimeSliderButtons(_a) {
     var autoUpdateBtn = _a.autoUpdateBtn,
-        loopBtn = _a.loopBtn,
         optionsMenuBtn = _a.optionsMenuBtn,
         playBtn = _a.playBtn,
         speedBtn = _a.speedBtn,
@@ -14975,7 +14868,7 @@
       "data-testid": "timeSliderButtons"
     }, matches ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
-      spacing: 1,
+      spacing: 2,
       className: classes.buttonContainerBig
     }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
@@ -14993,8 +14886,6 @@
       }
     })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
-    }, loopBtn || /*#__PURE__*/React__namespace.createElement(LoopButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
-      item: true
     }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
     }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton, null))) : /*#__PURE__*/React__namespace.createElement(material.Grid, {
@@ -17112,14 +17003,14 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var connectRedux$6 = reactRedux.connect(function (store, props) {
+  var connectRedux$5 = reactRedux.connect(function (store, props) {
     return {
       isAutoUpdating: isAutoUpdating(store, props.mapId)
     };
   }, {
     toggleAutoUpdate: toggleAutoUpdate
   });
-  var AutoUpdateButtonConnectComponent = connectRedux$6(function (_a) {
+  var AutoUpdateButtonConnectComponent = connectRedux$5(function (_a) {
     var mapId = _a.mapId,
         isAutoUpdating = _a.isAutoUpdating,
         toggleAutoUpdate = _a.toggleAutoUpdate;
@@ -17137,54 +17028,7 @@
       disabled: false
     });
   });
-  var AutoUpdateButtonConnect = connectRedux$6(AutoUpdateButtonConnectComponent);
-
-  /* *
-   * 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 connectRedux$5 = reactRedux.connect(function (store, props) {
-    return {
-      isLooping: isLooping(store, props.mapId)
-    };
-  }, {
-    mapToggleLoop: toggleLoop
-  });
-  var LoopButtonConnect = connectRedux$5(function (_a) {
-    var mapId = _a.mapId,
-        _b = _a.isLooping,
-        isLooping = _b === void 0 ? true : _b,
-        _c = _a.isDisabled,
-        isDisabled = _c === void 0 ? false : _c,
-        mapToggleLoop = _a.mapToggleLoop;
-
-    var onMapToggleLoop = function onMapToggleLoop() {
-      mapToggleLoop({
-        mapId: mapId,
-        shouldLoop: !isLooping
-      });
-    };
-
-    return /*#__PURE__*/React__default["default"].createElement(LoopButton, {
-      isLooping: isLooping,
-      isDisabled: isDisabled,
-      onToggleLoop: function onToggleLoop() {
-        onMapToggleLoop();
-      }
-    });
-  });
+  var AutoUpdateButtonConnect = connectRedux$5(AutoUpdateButtonConnectComponent);
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -17315,9 +17159,6 @@
       autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
         mapId: mapId
       }),
-      loopBtn: /*#__PURE__*/React__namespace.createElement(LoopButtonConnect, {
-        mapId: mapId
-      }),
       speedBtn: /*#__PURE__*/React__namespace.createElement(SpeedButtonConnect, {
         mapId: mapId
       }),
@@ -17421,9 +17262,6 @@
       autoUpdateBtn: /*#__PURE__*/React__namespace.createElement(AutoUpdateButtonConnect, {
         mapId: mapId
       }),
-      loopBtn: /*#__PURE__*/React__namespace.createElement(LoopButtonConnect, {
-        mapId: mapId
-      }),
       optionsMenuBtn: /*#__PURE__*/React__namespace.createElement(OptionsMenuButtonConnect, {
         mapId: mapId
       }),
@@ -18475,22 +18313,6 @@
     }));
   };
 
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof(obj);
-  }
-
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -24120,6 +23942,57 @@
     }, children)));
   };
 
+  /* *
+   * 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 MapWarningProperties = function MapWarningProperties(_a) {
+    var selectedFeatureProperties = _a.selectedFeatureProperties;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      "data-testid": "map-warning-properties",
+      style: {
+        width: '100%',
+        height: '15%',
+        marginTop: '30px',
+        marginLeft: '100px',
+        position: 'relative',
+        zIndex: 10000,
+        backgroundColor: '#CCCCCCC0',
+        padding: '0px 20px 20px',
+        overflow: 'auto',
+        fontSize: '11px'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("h1", {
+      "data-testid": "map-warning-properties-title"
+    }, selectedFeatureProperties.country), selectedFeatureProperties.details[0].event && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Event: ", selectedFeatureProperties.details[0].event), selectedFeatureProperties.details[0].sent && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Sent:", ' ', moment__default["default"].utc(selectedFeatureProperties.details[0].sent).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].expires && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.details[0].expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].web && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Web: ", selectedFeatureProperties.details[0].web), selectedFeatureProperties.details[0].sender && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Sender: ", selectedFeatureProperties.details[0].sender), selectedFeatureProperties.details[0].identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "Identifier: ", selectedFeatureProperties.details[0].identifier), selectedFeatureProperties.details[0].area && /*#__PURE__*/React__default["default"].createElement("pre", {
+      "data-testid": "map-warning-properties-row"
+    }, "area: ", selectedFeatureProperties.details[0].area));
+  };
+
   exports.ConfigurableConnectedMap = ConfigurableConnectedMap;
   exports.ConfigurableMapWithSliderConnect = ConfigurableMapWithSliderConnect;
   exports.CoreThemeProvider = CoreThemeProvider;
@@ -24135,6 +24008,7 @@
   exports.MapView = MapView;
   exports.MapViewConnect = MapViewConnect;
   exports.MapViewLayer = MapViewLayer;
+  exports.MapWarningProperties = MapWarningProperties;
   exports.MultiDimensionSelectMapButtonsConnect = MultiDimensionSelectMapButtonsConnect;
   exports.MultiMapDimensionSelectConnect = MultiMapMultiDimensionSelectConnect;
   exports.MultiMapViewConnect = MultiMapViewConnect;
@@ -24143,7 +24017,6 @@
   exports.SyncGroupViewerConnect = SyncGroupViewerConnect;
   exports.SyncGroups = index;
   exports.TimeSliderConnect = TimeSliderConnect;
-  exports.TooltipSelect = TooltipSelect;
   exports.ZoomControlConnect = ZoomControlConnect;
   exports.ZoomControls = ZoomControls;
   exports.componentsLookUp = componentsLookUp;
@@ -24160,6 +24033,8 @@
   exports.filterSrs = filterSrs;
   exports.generateLayerId = generateLayerId;
   exports.generateMapId = generateMapId;
+  exports.generateServiceId = generateServiceId;
+  exports.generateTimeSeriesId = generateTimeSeriesId;
   exports.generateTimesliderId = generateTimesliderId;
   exports.getFirstTimeStepForLayerId = getFirstTimeStepForLayerId;
   exports.getInitialPresets = getInitialPresets;
@@ -24185,6 +24060,7 @@
   exports.store = store;
   exports.syncGroupActions = actions;
   exports.synchronizationGroupModuleConfig = synchronizationGroupConfig;
+  exports.synchronizationGroupsConfig = synchronizationGroupConfig;
   exports.testLayers = testLayers;
   exports.uiActions = actions$2;
   exports.uiModuleConfig = uiModuleConfig;