@opengeoweb/core 2.5.0 → 2.6.0

package/index.esm.js

@@ -6,10 +6,10 @@ import React__default, { useState, Component, useRef, useEffect } from 'react';
 import produce, { produce as produce$1 } from 'immer';
 import { takeLatest, put, select, call, takeEvery } from 'redux-saga/effects';
 import { WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer, legendImageStore, WMImageEventType, getLegendGraphicURLForLayer } from '@opengeoweb/webmap';
-import { Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, SvgIcon, FormControl, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
+import { Grid, InputLabel, Tooltip, IconButton, Paper, Box, Typography, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, SvgIcon, FormControl, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
+import { TooltipSelect, AlertIcon, sliderStyles, tooltipContainerStyles, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, ToolContainerDraggable, ToolButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
 import makeStyles from '@mui/styles/makeStyles';
-import { sliderStyles, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, ToolContainerDraggable, ToolButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
 import { Cached, Add, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, MoreVert, DeleteForever } from '@mui/icons-material';
 import { Sortable, ReactSortable } from 'react-sortablejs';
 import createStyles from '@mui/styles/createStyles';
@@ -213,19 +213,6 @@ var toggleAutoUpdate = function toggleAutoUpdate(payload) {
     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
  *
@@ -746,7 +733,6 @@ var actions$3 = /*#__PURE__*/Object.freeze({
   layerMoveLayer: layerMoveLayer,
   setActiveLayerId: setActiveLayerId,
   toggleAutoUpdate: toggleAutoUpdate,
-  toggleLoop: toggleLoop,
   setTimeSliderScale: setTimeSliderScale,
   setTimeStep: setTimeStep,
   setAnimationDelay: setAnimationDelay,
@@ -864,6 +850,16 @@ var generateTimesliderId = function generateTimesliderId() {
   generatedTimesliderIds += 1;
   return "timesliderid_".concat(generatedTimesliderIds);
 };
+var generatedServiceIds = 0;
+var generateServiceId = function generateServiceId() {
+  generatedServiceIds += 1;
+  return "serviceid_".concat(generatedServiceIds);
+};
+var generatedTimeseriesIds = 0;
+var generateTimeSeriesId = function generateTimeSeriesId() {
+  generatedTimeseriesIds += 1;
+  return "timeseriesid_".concat(generatedTimeseriesIds);
+};
 /**
  * Map for registering wmlayers with their id's
  */
@@ -2523,18 +2519,6 @@ var getAnimationEndTime = createSelector(getMapById, function (store) {
 var isAutoUpdating = 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 = createSelector(getMapById, function (store) {
-  return store ? store.isLooping : false;
-});
 /**
  * Gets activeLayerId for map
  *
@@ -2826,14 +2810,21 @@ var getServices = createSelector(servicesStore, function (store) {
  *
  * Example: service = getServiceByName(store, 'serviceName')
  * @param {object} store store: object - Store object
- * @returns {Service} returnType: Service
+ * @returns {ReduxService} returnType: Service
  */
 
-var getServiceByName = createSelector([servicesStore, function (state, serviceName) {
-  return serviceName;
-}], function (serviceState, serviceName) {
-  if (serviceState && serviceState.byId && serviceState.byId[serviceName]) {
-    return serviceState.byId[serviceName];
+var getServiceByName = 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;
@@ -2903,9 +2894,8 @@ var getServicesInArray = createSelector(servicesStore, function (store) {
   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;
@@ -2950,7 +2940,6 @@ var selectors$1 = /*#__PURE__*/Object.freeze({
   getAnimationStartTime: getAnimationStartTime,
   getAnimationEndTime: getAnimationEndTime,
   isAutoUpdating: isAutoUpdating,
-  isLooping: isLooping,
   getActiveLayerId: getActiveLayerId,
   getMapTimeSliderScale: getMapTimeSliderScale,
   getMapTimeStep: getMapTimeStep,
@@ -4864,9 +4853,8 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSIns
     var updateObject = {
       origin: ORIGIN_REACTMAPVIEWPARSELAYER,
       serviceLayers: {
-        id: wmLayer.service,
         name: wmLayer.title,
-        service: wmLayer.service,
+        serviceUrl: wmLayer.service,
         layers: layers,
         isUserAddedService: false
       },
@@ -5591,140 +5579,6 @@ var synchronizationGroupConfig = {
   sagas: [rootSaga$4, rootSaga$3]
 };
 
-var TooltipSelect = function TooltipSelect(_a) {
-  var tooltip = _a.tooltip,
-      _a$list = _a.list,
-      list = _a$list === void 0 ? [] : _a$list,
-      _a$currentIndex = _a.currentIndex,
-      currentIndex = _a$currentIndex === void 0 ? -1 : _a$currentIndex,
-      _a$onChangeMouseWheel = _a.onChangeMouseWheel,
-      onChangeMouseWheel = _a$onChangeMouseWheel === void 0 ? function () {} : _a$onChangeMouseWheel,
-      _a$requiresCtrlToChan = _a.requiresCtrlToChange,
-      requiresCtrlToChange = _a$requiresCtrlToChan === void 0 ? false : _a$requiresCtrlToChan,
-      props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange"]);
-
-  props.disableUnderline;
-      var otherProps = __rest(props, ["disableUnderline"]);
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selectOpen = _React$useState2[0],
-      setSelectOpen = _React$useState2[1];
-
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tooltipOpen = _React$useState4[0],
-      setTooltipOpen = _React$useState4[1];
-
-  var preventDefault = function preventDefault(event) {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  var enableScroll = React.useCallback(function () {
-    document.removeEventListener('wheel', preventDefault, false);
-  }, []);
-  var disableScroll = React.useCallback(function () {
-    document.addEventListener('wheel', preventDefault, {
-      passive: false
-    });
-  }, []);
-  var onWheel = React.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.useCallback(function () {
-    setSelectOpen(true);
-    setTooltipOpen(false);
-  }, []);
-  var onClose = React.useCallback(function () {
-    setSelectOpen(false);
-  }, []);
-  var onMouseEnter = React.useCallback(function () {
-    if (!requiresCtrlToChange) {
-      disableScroll();
-    }
-
-    if (!selectOpen) setTooltipOpen(true);
-  }, [selectOpen, disableScroll, requiresCtrlToChange]);
-  var onMouseLeave = React.useCallback(function () {
-    enableScroll();
-    setTooltipOpen(false);
-  }, [enableScroll]);
-  var onFocus = React.useCallback(function () {
-    if (!requiresCtrlToChange) {
-      disableScroll();
-    }
-
-    setTooltipOpen(true);
-  }, [disableScroll, requiresCtrlToChange]);
-  var onBlur = React.useCallback(function () {
-    enableScroll();
-    setTooltipOpen(false);
-  }, [enableScroll]);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltip,
-    placement: "top",
-    open: tooltipOpen
-  }, /*#__PURE__*/React.createElement(Select, Object.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.
@@ -6746,12 +6600,14 @@ var reducer$1 = function reducer() {
   switch (action.type) {
     case MAP_SERVICES_SET_LAYERS:
       return produce(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] = Object.assign({}, action.payload);
+        if (!draft.allIds.includes(id)) draft.allIds.push(id);
       });
 
     case WEBMAP_UPDATE_LAYER_INFO:
@@ -6767,11 +6623,16 @@ var reducer$1 = function reducer() {
 
     case MAP_SERVICES_REMOVE_SERVICE:
       return produce(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 = draft.allIds[foundServiceIndex];
           draft.allIds = draft.allIds.filter(function (id) {
-            return id !== action.payload.serviceUrl;
+            return id !== serviceId;
           });
-          delete draft.byId[action.payload.serviceUrl];
+          delete draft.byId[serviceId];
         }
       });
 
@@ -7535,9 +7396,30 @@ var enableOnlyOneKeyword = function enableOnlyOneKeyword(payload) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
+var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
+  return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byId, preset) {
+    return Object.assign(Object.assign({}, byId), _defineProperty({}, preset.id, preset));
+  }, {})), 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, _ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            serviceUrl = _ref2[0],
+            service = _ref2[1];
+
+        return Object.assign(Object.assign({}, userServices), isService(service) ? _defineProperty({}, serviceUrl, service) : {});
+      }, {});
+    }
   } catch (e) {
     console.error('Unable to read services from localStorage: ', e);
   }
@@ -7556,19 +7438,19 @@ var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
     _marked2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
     _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
 function newServiceAddedSaga(capturedAction) {
-  var addedService, service, keywords;
+  var addedService, serviceUrl, keywords;
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         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);
           }, []);
           _context.next = 5;
           return put(addKeywordsAndActiveServices({
-            serviceUrl: service,
+            serviceUrl: serviceUrl,
             keywords: keywords
           }));
 
@@ -7601,20 +7483,25 @@ function layerSelectServiceRemovedSaga(capturedAction) {
 }
 function addServiceToLocalStorageSaga(_ref) {
   var payload = _ref.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: Object.assign(Object.assign({}, localStorageServices.byId), _defineProperty({}, service, {
-      id: id,
-      name: name,
-      service: service
-    })),
-    allIds: _toConsumableArray(new Set([].concat(_toConsumableArray(localStorageServices.allIds || []), [service])))
-  });
+  setUserAddedServices(Object.assign(Object.assign({}, localStorageServices), _defineProperty({}, serviceUrl, {
+    id: serviceUrl,
+    name: name,
+    url: serviceUrl
+  })));
+}
+function removeServiceFromLocalStorageSaga(_ref2) {
+  var payload = _ref2.payload;
+  var serviceUrl = payload.serviceUrl;
+  var localStorageServices = getUserAddedServices();
+  if (!localStorageServices[serviceUrl]) return;
+  var updatedServices = Object.assign({}, localStorageServices);
+  delete updatedServices[serviceUrl];
+  setUserAddedServices(updatedServices);
 }
 function rootSaga() {
   return regeneratorRuntime.wrap(function rootSaga$(_context3) {
@@ -7633,6 +7520,10 @@ function rootSaga() {
           return takeEvery(MAP_SERVICES_SET_LAYERS, addServiceToLocalStorageSaga);
 
         case 6:
+          _context3.next = 8;
+          return takeEvery(MAP_SERVICES_REMOVE_SERVICE, removeServiceFromLocalStorageSaga);
+
+        case 8:
         case "end":
           return _context3.stop();
       }
@@ -7972,7 +7863,7 @@ var WMSLayerTree = function WMSLayerTree(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$7 = connect(function (store, props) {
+var connectRedux$6 = connect(function (store, props) {
   return {
     loadedLayers: getMapLayers(store, props.mapId)
   };
@@ -8035,7 +7926,7 @@ var ConnectedTree = function ConnectedTree(_ref) {
   });
 };
 
-var WMSLayerTreeConnect = connectRedux$7(ConnectedTree);
+var WMSLayerTreeConnect = connectRedux$6(ConnectedTree);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8394,7 +8285,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$w = makeStyles({
+var useStyles$u = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -8430,7 +8321,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       handleClose = _ref.handleClose,
       _ref$layerType = _ref.layerType,
       layerType = _ref$layerType === void 0 ? LayerType.mapLayer : _ref$layerType;
-  var classes = useStyles$w();
+  var classes = useStyles$u();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8583,7 +8474,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var styles$1 = {
+var styles$2 = {
   buttonDiv: {
     position: 'relative'
   },
@@ -8635,7 +8526,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
     title: tooltip
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleClose,
-    sx: styles$1.button,
+    sx: styles$2.button,
     disableRipple: true,
     "data-testid": "addLayersButton",
     ref: ref,
@@ -8800,7 +8691,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$v = makeStyles({
+var useStyles$t = makeStyles({
   row: {
     height: '32px'
   },
@@ -8824,7 +8715,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$v();
+  var classes = useStyles$t();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -8868,72 +8759,12 @@ var DescriptionRow = function DescriptionRow(_ref) {
   }));
 };
 
-/* *
- * 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(function (theme) {
-  return createStyles({
-    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
-      }
-    }
-  });
-});
-
 var DimensionSelect = function DimensionSelect(_ref) {
   var layerId = _ref.layerId,
       onLayerChangeDimension = _ref.onLayerChangeDimension,
       _ref$layerDimensions = _ref.layerDimensions,
       layerDimensions = _ref$layerDimensions === void 0 ? [] : _ref$layerDimensions,
       isEnabled = _ref.isEnabled;
-  var classes = useTooltipContainerStyles(isEnabled);
 
   var _React$useState = React.useState(layerDimensions.length ? layerDimensions[0].name : ''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9019,7 +8850,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
         'data-testid': 'selectDimension'
       }
     },
-    className: classes.textContainer,
+    isEnabled: isEnabled,
     value: activeDimName,
     list: dimNameList,
     currentIndex: dimNameCurrentIndex,
@@ -9045,7 +8876,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
         'data-testid': 'selectDimensionValue'
       }
     },
-    className: classes.textContainer,
+    isEnabled: isEnabled,
     value: activeDim && activeDim.currentValue,
     list: dimValueList,
     currentIndex: dimValueCurrentIndex,
@@ -9066,7 +8897,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
   }))));
 };
 
-var useStyles$u = makeStyles(function (theme) {
+var useStyles$s = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -9116,8 +8947,7 @@ var RenderLayers = function RenderLayers(_ref) {
       layers = _ref$layers === void 0 ? [] : _ref$layers,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$u();
-  var containerClass = useTooltipContainerStyles(isEnabled);
+  var classes = useStyles$s();
 
   if (!layers || !layers.length) {
     return /*#__PURE__*/React.createElement("div", {
@@ -9151,7 +8981,7 @@ var RenderLayers = function RenderLayers(_ref) {
         'data-testid': 'selectLayer'
       }
     },
-    className: containerClass.textContainer,
+    isEnabled: isEnabled,
     value: currentValue,
     list: list,
     currentIndex: currentIndex,
@@ -9159,19 +8989,31 @@ var RenderLayers = function RenderLayers(_ref) {
     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.createElement(MenuItem, {
     disabled: true
-  }, "Layer"), extendedLayers.map(function (layerFromServiceLayers) {
+  }, "Layer"), extendedLayers.map(function (layerFromServiceLayers, currentIndex) {
     return /*#__PURE__*/React.createElement(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.createElement(AlertIcon, {
+      severity: "error"
+    }));
   }));
 };
 
-var useStyles$t = makeStyles(function (theme) {
+var useStyles$r = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -9232,9 +9074,8 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$t();
+  var classes = useStyles$r();
   var sliderClasses = sliderStyles();
-  var containerClass = useTooltipContainerStyles(isEnabled);
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9246,22 +9087,8 @@ var OpacitySelect = function OpacitySelect(_ref) {
       tooltipOpen = _React$useState4[0],
       setTooltipOpen = _React$useState4[1];
 
-  var preventDefault = function preventDefault(event) {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  var enableScroll = React.useCallback(function () {
-    document.removeEventListener('wheel', preventDefault, false);
-  }, []);
-  var disableScroll = React.useCallback(function () {
-    document.addEventListener('wheel', preventDefault, {
-      passive: false
-    });
-  }, []);
   var onWheel = React.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 = Math.min(Math.max(currentOpacity - direction, 0), 1); // Kind of "one frame debouncer", meant to dampen too fast slider movement
@@ -9269,8 +9096,8 @@ var OpacitySelect = function OpacitySelect(_ref) {
       window.requestAnimationFrame(function () {
         onLayerChangeOpacity(newValue);
       });
-    } else enableScroll();
-  }, [currentOpacity, onLayerChangeOpacity, disableScroll, enableScroll]);
+    }
+  }, [currentOpacity, onLayerChangeOpacity]);
   var onClickButton = React.useCallback(function () {
     setOpen(!open);
   }, [open]);
@@ -9283,23 +9110,21 @@ var OpacitySelect = function OpacitySelect(_ref) {
     if (!open) setTooltipOpen(true);
   }, [open]);
   var onMouseLeave = React.useCallback(function () {
-    enableScroll();
     setTooltipOpen(false);
-  }, [enableScroll]);
+  }, []);
   var onFocus = React.useCallback(function () {
     setTooltipOpen(true);
   }, []);
   var onBlur = React.useCallback(function () {
-    enableScroll();
     setTooltipOpen(false);
-  }, [enableScroll]);
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: classes.opacityDiv,
     onWheel: onWheel,
     "data-testid": "scrollOpacity"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipTitle,
-    className: containerClass.textContainer,
+    sx: tooltipContainerStyles(isEnabled),
     placement: "top",
     open: tooltipOpen
   }, /*#__PURE__*/React.createElement(Button, {
@@ -9390,7 +9215,6 @@ var RenderStyles = function RenderStyles(_ref) {
       onChangeLayerStyle = _ref.onChangeLayerStyle,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useTooltipContainerStyles(isEnabled);
   var styles = [{
     title: 'default',
     name: 'default',
@@ -9425,7 +9249,7 @@ var RenderStyles = function RenderStyles(_ref) {
         'data-testid': 'selectStyle'
       }
     },
-    className: classes.textContainer,
+    isEnabled: isEnabled,
     value: currentStyle,
     list: list,
     currentIndex: currentIndex,
@@ -9460,7 +9284,7 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$s = makeStyles(function (theme) {
+var useStyles$q = makeStyles(function (theme) {
   return createStyles({
     svgIcon: {
       fill: function fill(_ref) {
@@ -9489,7 +9313,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
       isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
       _ref2$isEnabled = _ref2.isEnabled,
       isEnabled = _ref2$isEnabled === void 0 ? true : _ref2$isEnabled;
-  var classes = useStyles$s({
+  var classes = useStyles$q({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -9542,7 +9366,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$r = makeStyles(function (theme) {
+var useStyles$p = makeStyles(function (theme) {
   return createStyles({
     row: {
       background: function background(isEnabled) {
@@ -9595,7 +9419,7 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$r(isEnabled);
+  var classes = useStyles$p(isEnabled);
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
   var onClickRow = function onClickRow() {
@@ -10221,7 +10045,7 @@ var DragHandle = function DragHandle(_ref) {
   });
 };
 
-var useStyles$q = makeStyles(function () {
+var useStyles$o = makeStyles(function () {
   return {
     layerRows: {
       width: '100%',
@@ -10241,6 +10065,12 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
   var mapId = _ref.mapId,
       layerManagerWidth = _ref.layerManagerWidth;
   var dispatch = useDispatch();
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      keyPressed = _React$useState2[0],
+      setKeyPressed = _React$useState2[1];
+
   var layerIds = useSelector(function (store) {
     return getLayerIds(store, mapId);
   });
@@ -10256,10 +10086,10 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
     }));
   }, [dispatch]);
 
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      activeDragIndex = _React$useState2[0],
-      setActiveDragIndex = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      activeDragIndex = _React$useState4[0],
+      setActiveDragIndex = _React$useState4[1];
 
   var onSetList = function onSetList() {}; // since we use activeDragIndex, we don't need inner state handling of ReactSortable
 
@@ -10288,7 +10118,43 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   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.useEffect(function () {
+    window.addEventListener('keydown', keyPressedTrue);
+    window.addEventListener('keyup', keyPressedFalse);
+    return function () {
+      window.removeEventListener('keydown', keyPressedTrue);
+      window.removeEventListener('keyup', keyPressedFalse);
+    };
+  }, []);
+  var preventDefault = React.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  React.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.createElement(Grid, {
     container: true,
     item: true,
@@ -10344,7 +10210,6 @@ var BaseLayers = function BaseLayers(_ref) {
   var selectedBaseLayers = _ref.selectedBaseLayers,
       availableBaseLayers = _ref.availableBaseLayers,
       onChangeBaseLayers = _ref.onChangeBaseLayers;
-  var classes = useTooltipContainerStyles();
 
   if (!availableBaseLayers || !availableBaseLayers.length) {
     return /*#__PURE__*/React.createElement("div", null, "No service available");
@@ -10374,7 +10239,7 @@ var BaseLayers = function BaseLayers(_ref) {
     style: {
       maxWidth: '100%'
     },
-    className: classes.textContainer,
+    isEnabled: true,
     value: selectedBaseLayerId,
     list: list,
     currentIndex: currentIndex,
@@ -10498,7 +10363,7 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$p = makeStyles({
+var useStyles$n = makeStyles({
   layerRow: {
     width: '100%',
     height: '36px'
@@ -10521,7 +10386,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$p();
+  var classes = useStyles$n();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -10550,7 +10415,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
-var useStyles$o = makeStyles({
+var styles$1 = {
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -10564,7 +10429,7 @@ var useStyles$o = makeStyles({
     width: '100%',
     boxSizing: 'border-box'
   }
-});
+};
 
 var LayerManager = function LayerManager(_ref) {
   var mapId = _ref.mapId,
@@ -10584,8 +10449,9 @@ var LayerManager = function LayerManager(_ref) {
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect,
       _ref$showAddLayersToo = _ref.showAddLayersTooltip,
-      showAddLayersTooltip = _ref$showAddLayersToo === void 0 ? true : _ref$showAddLayersToo;
-  var classes = useStyles$o();
+      showAddLayersTooltip = _ref$showAddLayersToo === void 0 ? true : _ref$showAddLayersToo,
+      _ref$leftComponent = _ref.leftComponent,
+      leftComponent = _ref$leftComponent === void 0 ? null : _ref$leftComponent;
 
   var _React$useState = React.useState(LayerManagerWidth.lg),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10617,13 +10483,14 @@ var LayerManager = function LayerManager(_ref) {
     "data-testid": "layerManagerWindow",
     onMouseDown: onMouseDown,
     order: order,
-    source: source
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.layerManagerContainer
+    source: source,
+    leftComponent: leftComponent
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles$1.layerManagerContainer
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     "data-testid": "layerManagerRowContainer",
-    className: classes.layerRowContainer
+    sx: styles$1.layerRowContainer
   }, /*#__PURE__*/React.createElement(DescriptionRow, {
     mapId: mapId,
     tooltip: showAddLayersTooltip ? 'Add Layers' : '',
@@ -10989,9 +10856,8 @@ var ServicePopup = function ServicePopup(_ref) {
                 }
 
                 serviceSetLayers({
-                  id: serviceUrl,
                   name: serviceName,
-                  service: serviceUrl,
+                  serviceUrl: serviceUrl,
                   layers: serviceLayers,
                   isUserAddedService: true
                 });
@@ -11376,6 +11242,65 @@ var SearchFieldConnect = function SearchFieldConnect() {
   });
 };
 
+/* *
+ * 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 ".concat(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.
@@ -11433,78 +11358,104 @@ var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
  * 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 useStyles$n = makeStyles(function (theme) {
-  return {
-    layerRow: {
-      background: theme.palette.geowebColors.cards.cardContainer,
-      padding: '8px 0px 8px 12px',
+var LayerListRow = function LayerListRow(_ref) {
+  var layer = _ref.layer,
+      layerIndex = _ref.layerIndex,
+      serviceId = _ref.serviceId,
+      addLayer = _ref.addLayer,
+      deleteLayer = _ref.deleteLayer,
+      mapLayers = _ref.mapLayers;
+  return /*#__PURE__*/React__default.createElement(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 ".concat(theme.palette.geowebColors.cards.cardContainerBorder),
-      display: 'grid',
-      gridTemplateColumns: '1fr 0.1fr',
-      gridGap: '20px'
-    },
-    layerText: {
+      border: 'solid 1px',
+      borderColor: 'geowebColors.cards.cardContainerBorder'
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 10
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
       fontSize: '12px',
+      height: '24px',
+      lineHeight: '24px',
       fontWeight: 500,
-      overflow: 'clip',
-      height: '20px',
-      textOverflow: 'ellipsis'
-    },
-    layerName: {
+      WebkitLineClamp: 1,
+      display: '-webkit-box',
+      WebkitBoxOrient: 'vertical',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden'
+    }
+  }, layer.text)), /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 4
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
       fontSize: '12px',
       height: '24px',
-      overflow: 'clip',
-      "float": 'left',
-      paddingTop: '6px',
-      whiteSpace: 'nowrap'
-    },
-    layerNameMaxWidth: {
-      maxWidth: '270px'
-    },
-    layerAbstract: {
+      lineHeight: '24px',
+      WebkitLineClamp: 1,
+      display: '-webkit-box',
+      WebkitBoxOrient: 'vertical',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden'
+    }
+  }, layer.name)), layer["abstract"] ? /*#__PURE__*/React__default.createElement(Grid, {
+    "data-testid": "layerAbstract",
+    container: true,
+    item: true,
+    xs: 8,
+    sx: {
       fontSize: '10px',
-      paddingLeft: '200px',
-      overflow: 'clip',
-      height: '30px'
-    },
-    resultCount: {
-      marginBottom: '4px',
-      fontSize: '12px'
-    },
-    layerButton: {
+      height: '30px',
+      paddingLeft: '20px',
+      WebkitLineClamp: 2,
+      display: '-webkit-box',
+      WebkitBoxOrient: 'vertical',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden'
+    }
+  }, layer["abstract"]) : null), /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    item: true,
+    xs: 2,
+    justifyContent: "flex-end",
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      width: '80px',
+      height: '48px',
       marginRight: '8px',
-      marginTop: '4px',
-      width: '80px'
+      paddingTop: '4px'
     }
-  };
-});
+  }, /*#__PURE__*/React__default.createElement(LayerAddRemoveButton, {
+    layer: layer,
+    layerIndex: layerIndex,
+    serviceId: serviceId,
+    addLayer: addLayer,
+    deleteLayer: deleteLayer,
+    mapLayers: mapLayers
+  }))));
+};
 
 var LayerList = function LayerList(_ref) {
   var services = _ref.services,
@@ -11516,7 +11467,6 @@ var LayerList = function LayerList(_ref) {
       mapLayers = _ref.mapLayers,
       keywordIds = _ref.keywordIds,
       allKeywordsActive = _ref.allKeywordsActive;
-  var classes = useStyles$n();
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -11528,42 +11478,29 @@ var LayerList = function LayerList(_ref) {
       return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
     }, 0));
   }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.resultCount
-  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement("div", {
-    style: {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      marginBottom: '4px',
+      fontSize: '12px'
+    }
+  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(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.createElement("div", {
-        key: "".concat(serviceId, "-").concat(layer.name, "-").concat(layer.text)
-      }, /*#__PURE__*/React.createElement("div", {
-        key: "".concat(serviceId, "-").concat(layer.name),
-        className: classes.layerRow,
-        "data-testid": "layerListLayerRow"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: classes.layerText
-      }, layer.text), /*#__PURE__*/React.createElement("div", null, layer["abstract"] ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(classes.layerName, " ").concat(classes.layerNameMaxWidth)
-      }, layer.name), /*#__PURE__*/React.createElement("div", {
-        className: classes.layerAbstract,
-        "data-testid": "layerAbstract"
-      }, layer["abstract"])) : /*#__PURE__*/React.createElement("div", {
-        className: classes.layerName
-      }, layer.name))), /*#__PURE__*/React.createElement("div", {
-        className: classes.layerButton
-      }, /*#__PURE__*/React.createElement(LayerAddRemoveButton, {
+      return /*#__PURE__*/React.createElement(LayerListRow, {
+        key: layer.name,
         layer: layer,
         layerIndex: layerIndex,
         serviceId: serviceId,
         addLayer: addLayer,
         deleteLayer: deleteLayer,
         mapLayers: mapLayers
-      }))));
+      });
     });
   })));
 };
@@ -11697,10 +11634,10 @@ var ServiceChip = function ServiceChip(_ref) {
     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');
@@ -11918,13 +11855,14 @@ var ServiceList = function ServiceList(_ref4) {
     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.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.createElement(ChevronRight, {
     className: classes.scrollArrowRight,
@@ -12058,7 +11996,7 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     }, /*#__PURE__*/React.createElement(Tooltip, {
       title: "Edit Service"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
-      disabled: isDisabled(service.service),
+      disabled: isDisabled(service.serviceUrl),
       "data-testid": "openEditServiceButton",
       size: "large"
     }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
@@ -12068,9 +12006,9 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
       title: "Delete Service"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(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.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
@@ -12755,13 +12693,12 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
   }, [dispatch]);
   React.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
             });
@@ -12821,7 +12758,9 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
       _ref$showTitle = _ref.showTitle,
       showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
       _ref$layerSelect = _ref.layerSelect,
-      layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
+      layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect,
+      _ref$leftComponent = _ref.leftComponent,
+      leftComponent = _ref$leftComponent === void 0 ? null : _ref$leftComponent;
   var dispatch = useDispatch();
   var isOpenInStore = useSelector(function (store) {
     return getisDialogOpen(store, 'layerManager');
@@ -12890,8 +12829,11 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     onMouseDown: onOrderDialog,
     order: uiOrder,
     source: uiSource,
-    layerSelect: layerSelect
-  }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectConnect, null));
+    layerSelect: layerSelect,
+    leftComponent: leftComponent
+  }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectConnect, {
+    preloadedServices: preloadedMapServices
+  }));
 };
 
 /* *
@@ -13861,60 +13803,6 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
   }, "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(_ref) {
-  var _ref$isLooping = _ref.isLooping,
-      isLooping = _ref$isLooping === void 0 ? true : _ref$isLooping,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      _ref$onToggleLoop = _ref.onToggleLoop,
-      onToggleLoop = _ref$onToggleLoop === void 0 ? function () {
-    return null;
-  } : _ref$onToggleLoop;
-  var loopButtonPath = isLooping ? svgLoopOffPath : svgLoopPath;
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: loopButtonPath.title
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ToolButton, {
-    onClick: function onClick() {
-      return onToggleLoop();
-    },
-    active: isLooping,
-    disabled: isDisabled,
-    "data-testid": "loopButton"
-  }, /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
-    width: 24,
-    height: 24,
-    fill: "transparent"
-  }), /*#__PURE__*/React.createElement("path", {
-    "data-testid": isLooping ? 'loop-off-svg-path' : 'loop-svg-path',
-    d: loopButtonPath.src
-  })))));
-};
-
 var useStyles$g = makeStyles(function (theme) {
   return {
     speedButtonDiv: {
@@ -14342,7 +14230,6 @@ var OptionsPopOver = withStyles(function (theme) {
 
 var OptionsMenuButton = function OptionsMenuButton(_ref) {
   var autoUpdateBtn = _ref.autoUpdateBtn,
-      loopBtn = _ref.loopBtn,
       speedBtn = _ref.speedBtn,
       timeStepBtn = _ref.timeStepBtn;
 
@@ -14406,9 +14293,6 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: "auto"
-  }, loopBtn || /*#__PURE__*/React.createElement(LoopButton, null)), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: "auto"
   }, autoUpdateBtn || /*#__PURE__*/React.createElement(AutoUpdateButton, null)))));
 };
 
@@ -14497,7 +14381,6 @@ var useStyles$e = makeStyles({
 
 var TimeSliderButtons = function TimeSliderButtons(_ref) {
   var autoUpdateBtn = _ref.autoUpdateBtn,
-      loopBtn = _ref.loopBtn,
       optionsMenuBtn = _ref.optionsMenuBtn,
       playBtn = _ref.playBtn,
       speedBtn = _ref.speedBtn,
@@ -14508,7 +14391,7 @@ var TimeSliderButtons = function TimeSliderButtons(_ref) {
     "data-testid": "timeSliderButtons"
   }, matches ? /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    spacing: 1,
+    spacing: 2,
     className: classes.buttonContainerBig
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true
@@ -14526,8 +14409,6 @@ var TimeSliderButtons = function TimeSliderButtons(_ref) {
     }
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true
-  }, loopBtn || /*#__PURE__*/React.createElement(LoopButton, null)), /*#__PURE__*/React.createElement(Grid, {
-    item: true
   }, autoUpdateBtn || /*#__PURE__*/React.createElement(AutoUpdateButton, null)), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, playBtn || /*#__PURE__*/React.createElement(PlayButton, null))) : /*#__PURE__*/React.createElement(Grid, {
@@ -16608,14 +16489,14 @@ var TimeSlider = function TimeSlider(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$6 = connect(function (store, props) {
+var connectRedux$5 = connect(function (store, props) {
   return {
     isAutoUpdating: isAutoUpdating(store, props.mapId)
   };
 }, {
   toggleAutoUpdate: toggleAutoUpdate
 });
-var AutoUpdateButtonConnectComponent = connectRedux$6(function (_ref) {
+var AutoUpdateButtonConnectComponent = connectRedux$5(function (_ref) {
   var mapId = _ref.mapId,
       isAutoUpdating = _ref.isAutoUpdating,
       toggleAutoUpdate = _ref.toggleAutoUpdate;
@@ -16633,54 +16514,7 @@ var AutoUpdateButtonConnectComponent = connectRedux$6(function (_ref) {
     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 = connect(function (store, props) {
-  return {
-    isLooping: isLooping(store, props.mapId)
-  };
-}, {
-  mapToggleLoop: toggleLoop
-});
-var LoopButtonConnect = connectRedux$5(function (_ref) {
-  var mapId = _ref.mapId,
-      _ref$isLooping = _ref.isLooping,
-      isLooping = _ref$isLooping === void 0 ? true : _ref$isLooping,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      mapToggleLoop = _ref.mapToggleLoop;
-
-  var onMapToggleLoop = function onMapToggleLoop() {
-    mapToggleLoop({
-      mapId: mapId,
-      shouldLoop: !isLooping
-    });
-  };
-
-  return /*#__PURE__*/React__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");
@@ -16811,9 +16645,6 @@ var OptionsMenuButtonConnect = function OptionsMenuButtonConnect(_ref) {
     autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
       mapId: mapId
     }),
-    loopBtn: /*#__PURE__*/React.createElement(LoopButtonConnect, {
-      mapId: mapId
-    }),
     speedBtn: /*#__PURE__*/React.createElement(SpeedButtonConnect, {
       mapId: mapId
     }),
@@ -16917,9 +16748,6 @@ var TimeSliderButtonsConnect = function TimeSliderButtonsConnect(_ref) {
     autoUpdateBtn: /*#__PURE__*/React.createElement(AutoUpdateButtonConnect, {
       mapId: mapId
     }),
-    loopBtn: /*#__PURE__*/React.createElement(LoopButtonConnect, {
-      mapId: mapId
-    }),
     optionsMenuBtn: /*#__PURE__*/React.createElement(OptionsMenuButtonConnect, {
       mapId: mapId
     }),
@@ -23576,4 +23404,55 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
   }, children)));
 };
 
-export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterBaseLayers, filterBbox, filterDimensions, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, filterSrs, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants as mapConstants, moduleConfig as mapModuleConfig, selectors$1 as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, testLayers, actions$2 as uiActions, uiModuleConfig, selectors as uiSelectors, types$1 as uiTypes, useStyles$3 as useStyles };
+/* *
+ * 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(_ref) {
+  var selectedFeatureProperties = _ref.selectedFeatureProperties;
+  return /*#__PURE__*/React__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.createElement("h1", {
+    "data-testid": "map-warning-properties-title"
+  }, selectedFeatureProperties.country), selectedFeatureProperties.details[0].event && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Event: ", selectedFeatureProperties.details[0].event), selectedFeatureProperties.details[0].sent && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Sent:", ' ', moment.utc(selectedFeatureProperties.details[0].sent).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].expires && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.details[0].expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].web && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Web: ", selectedFeatureProperties.details[0].web), selectedFeatureProperties.details[0].sender && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Sender: ", selectedFeatureProperties.details[0].sender), selectedFeatureProperties.details[0].identifier && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "Identifier: ", selectedFeatureProperties.details[0].identifier), selectedFeatureProperties.details[0].area && /*#__PURE__*/React__default.createElement("pre", {
+    "data-testid": "map-warning-properties-row"
+  }, "area: ", selectedFeatureProperties.details[0].area));
+};
+
+export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterBaseLayers, filterBbox, filterDimensions, filterMapLayers, filterMapPresets, filterNonTimeDimensions, filterServices, filterSrs, generateLayerId, generateMapId, generateServiceId, generateTimeSeriesId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants as mapConstants, moduleConfig as mapModuleConfig, selectors$1 as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, actions$2 as uiActions, uiModuleConfig, selectors as uiSelectors, types$1 as uiTypes, useStyles$3 as useStyles };