@opengeoweb/core 2.13.0 → 3.0.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/styles/makeStyles'), require('@opengeoweb/webmap'), 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')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/styles/makeStyles', '@opengeoweb/webmap', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.makeStyles, global.webmap, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, makeStyles, webmap, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@mui/styles/makeStyles'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('react-window'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@mui/styles/makeStyles', '@opengeoweb/webmap', 'react-sortablejs', '@mui/styles/createStyles', 'react-window', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.makeStyles, global.webmap, global.reactSortablejs, global.createStyles, global.reactWindow, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, makeStyles, webmap, reactSortablejs, createStyles, reactWindow, withStyles, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -822,8 +822,10 @@
           activeMapPresetId = _y === void 0 ? null : _y,
           _z = _a.displayMapPin,
           displayMapPin = _z === void 0 ? false : _z,
-          _0 = _a.shouldShowZoomControls,
-          shouldShowZoomControls = _0 === void 0 ? true : _0;
+          _0 = _a.disableMapPin,
+          disableMapPin = _0 === void 0 ? false : _0,
+          _1 = _a.shouldShowZoomControls,
+          shouldShowZoomControls = _1 === void 0 ? true : _1;
       return {
         id: id,
         isAnimating: isAnimating,
@@ -849,6 +851,7 @@
         isTimeSliderVisible: isTimeSliderVisible,
         activeMapPresetId: activeMapPresetId,
         displayMapPin: displayMapPin,
+        disableMapPin: disableMapPin,
         shouldShowZoomControls: shouldShowZoomControls
       };
     };
@@ -1529,6 +1532,17 @@
             draft.availableBaseLayers.allIds.push(layer.id);
           });
         },
+        setAvailableBaseLayers: function setAvailableBaseLayers(draft, action) {
+          var layers = action.payload.layers;
+          draft.availableBaseLayers.byId = {};
+          draft.availableBaseLayers.allIds = []; // add new available baselayers
+
+          layers.forEach(function (layer) {
+            if (layer.layerType !== LayerType.baseLayer || !layer.mapId) return;
+            draft.availableBaseLayers.byId[layer.id] = createLayer(__assign({}, layer));
+            draft.availableBaseLayers.allIds.push(layer.id);
+          });
+        },
         onUpdateLayerInformation: function onUpdateLayerInformation(draft, action) {
           var _a = action.payload,
               layerStyle = _a.layerStyle,
@@ -1812,12 +1826,13 @@
      * @returns {array} returnType: [] - array containing services
      */
 
-    var getServicesInArray = toolkit.createSelector(servicesStore, function (store) {
+    toolkit.createSelector(servicesStore, function (store) {
       var services = store ? store.byId : {};
       var arrayOfServiceObjects = Object.keys(services).map(function (key) {
         return {
           name: services[key].name,
-          serviceUrl: services[key].serviceUrl
+          serviceUrl: services[key].serviceUrl,
+          isUserAddedService: services[key].isUserAddedService
         };
       });
       return arrayOfServiceObjects;
@@ -4067,11 +4082,11 @@
      * Example getDisableMapPin(store);
      * @param {object} store store: object - store object
      * @param {string} mapId mapId: string - Id of the map
-     * @returns {boolean} returnType: boolean or undefined
+     * @returns {boolean} returnType: boolean
      */
 
     var getDisableMapPin = toolkit.createSelector(getMapById, function (store) {
-      return store ? store.disableMapPin : undefined;
+      return store ? store.disableMapPin : false;
     });
     /**
      * Returns the diplay map pin boolean for the current map
@@ -4305,7 +4320,8 @@
               serviceId = _b.serviceId,
               serviceName = _b.serviceName,
               serviceUrl = _b.serviceUrl,
-              keywords = _b.keywords;
+              keywords = _b.keywords,
+              isUserAddedService = _b.isUserAddedService;
 
           if (!draft.filters.activeServices.byId[serviceId]) {
             draft.filters.activeServices.byId[serviceId] = {};
@@ -4343,6 +4359,7 @@
           draft.filters.activeServices.byId[serviceId].serviceName = serviceName;
           draft.filters.activeServices.byId[serviceId].serviceUrl = serviceUrl;
           draft.filters.activeServices.byId[serviceId].enabled = true;
+          draft.filters.activeServices.byId[serviceId].isUserAddedService = isUserAddedService;
           draft.filters.activeServices.byId[serviceId].keywordsPerService = keywords;
           if (!draft.filters.activeServices.allIds.includes(serviceId)) draft.filters.activeServices.allIds.push(serviceId);
         },
@@ -7433,7 +7450,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var IS_LEGEND_OPEN_BY_DEFAULT = true;
+    var IS_LEGEND_OPEN_BY_DEFAULT = false;
 
     var LegendConnectComponent = function LegendConnectComponent(_a) {
       var _b = _a.showMapId,
@@ -7474,7 +7491,7 @@
       });
 
       var onClose = function onClose() {
-        return dispatch(uiActions.setToggleOpenDialog({
+        dispatch(uiActions.setToggleOpenDialog({
           type: legendType,
           setOpen: false,
           origin: MapActionOrigin.map,
@@ -8456,7 +8473,7 @@
     };
     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));
+      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), serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.isUserAddedService);
     };
 
     var getUserAddedServices = function getUserAddedServices() {
@@ -8465,6 +8482,13 @@
         var parsedData = JSON.parse(storedString);
 
         if (parsedData && _typeof(parsedData) === 'object') {
+          Object.values(parsedData).forEach(function (value) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (value.hasOwnProperty('url') && value.hasOwnProperty('id')) {
+              var service = value;
+              service.isUserAddedService = true;
+            }
+          });
           return Object.entries(parsedData).reduce(function (userServices, _a) {
             var _b;
 
@@ -8506,40 +8530,26 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     function newServiceAddedSaga(capturedAction) {
-      var addedService, id, serviceUrl, name, keywords, services, findServiceName;
+      var addedService, id, serviceUrl, name, isUserAddedService, keywords;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
             addedService = capturedAction.payload;
-            id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name;
+            id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, isUserAddedService = addedService.isUserAddedService;
             keywords = addedService.layers.reduce(function (keywordAccumulator, layer) {
               return keywordAccumulator.concat(layer.path, layer.keywords);
             }, []);
-            return [4
-            /*yield*/
-            , effects.select(getServicesInArray)];
-
-          case 1:
-            services = _a.sent();
-
-            findServiceName = function findServiceName() {
-              var foundService = services.find(function (object) {
-                return (object === null || object === void 0 ? void 0 : object.url) === serviceUrl;
-              });
-              if (foundService) return foundService.name;
-              return name;
-            };
-
             return [4
             /*yield*/
             , effects.put(layerSelectActions.addKeywordsAndActiveServices({
               serviceId: id,
-              serviceName: findServiceName(),
+              serviceName: name,
               serviceUrl: serviceUrl,
-              keywords: keywords
+              keywords: keywords,
+              isUserAddedService: isUserAddedService
             }))];
 
-          case 2:
+          case 1:
             _a.sent();
 
             return [2
@@ -9280,38 +9290,35 @@
     };
 
     var AddLayersPopup = function AddLayersPopup(_a) {
-      var onClickService = _a.onClickService,
-          onRenderTree = _a.onRenderTree,
-          _b = _a.highlightedLayers,
-          highlightedLayers = _b === void 0 ? [] : _b,
-          _c = _a.preloadedServices,
-          preloadedServices = _c === void 0 ? preloadedDefaultMapServices : _c,
-          _d = _a.open,
-          open = _d === void 0 ? false : _d,
+      var onRenderTree = _a.onRenderTree,
+          _b = _a.preloadedServices,
+          preloadedServices = _b === void 0 ? preloadedDefaultMapServices : _b,
+          _c = _a.open,
+          open = _c === void 0 ? false : _c,
           handleClose = _a.handleClose,
-          _e = _a.layerType,
-          layerType = _e === void 0 ? LayerType.mapLayer : _e;
+          _d = _a.layerType,
+          layerType = _d === void 0 ? LayerType.mapLayer : _d;
       var classes = useStyles$q();
 
-      var _f = __read(React__namespace.useState(''), 2),
-          serviceURL = _f[0],
-          setServiceURL = _f[1];
+      var _e = __read(React__namespace.useState(''), 2),
+          serviceURL = _e[0],
+          setServiceURL = _e[1];
 
-      var _g = __read(React__namespace.useState(preloadedServices), 2),
-          services = _g[0],
-          setServices = _g[1];
+      var _f = __read(React__namespace.useState(preloadedServices), 2),
+          services = _f[0],
+          setServices = _f[1];
 
-      var _h = __read(React__namespace.useState(preloadedServices[0]), 2),
-          activeService = _h[0],
-          setActiveService = _h[1];
+      var _g = __read(React__namespace.useState(preloadedServices[0]), 2),
+          activeService = _g[0],
+          setActiveService = _g[1];
 
-      var _j = __read(React__namespace.useState(''), 2),
-          urlError = _j[0],
-          setUrlError = _j[1];
+      var _h = __read(React__namespace.useState(''), 2),
+          urlError = _h[0],
+          setUrlError = _h[1];
 
-      var _k = __read(React__namespace.useState(false), 2),
-          loading = _k[0],
-          setLoading = _k[1];
+      var _j = __read(React__namespace.useState(false), 2),
+          loading = _j[0],
+          setLoading = _j[1];
 
       var handleChangeService = function handleChangeService(service) {
         setActiveService(service);
@@ -9359,6 +9366,12 @@
         }
       };
 
+      React__namespace.useEffect(function () {
+        if (!_.isEqual(preloadedServices, services)) {
+          setServices(preloadedServices);
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, [preloadedServices]);
       return /*#__PURE__*/React__namespace.createElement(material.Dialog, {
         fullWidth: true,
         maxWidth: "md",
@@ -9429,9 +9442,8 @@
         item: true,
         xs: 8
       }, onRenderTree ? onRenderTree(activeService) : /*#__PURE__*/React__namespace.createElement(WMSLayerTreeConnect, {
+        mapId: "",
         service: activeService,
-        onClickLayer: onClickService,
-        highlightedLayers: highlightedLayers,
         layerType: layerType
       }))))), /*#__PURE__*/React__namespace.createElement(material.DialogActions, null, /*#__PURE__*/React__namespace.createElement(material.Button, {
         onClick: handleClose,
@@ -9474,28 +9486,36 @@
     };
 
     var AddLayersButton = function AddLayersButton(_a) {
-      var onClickService = _a.onClickService,
-          onRenderTree = _a.onRenderTree,
+      var onRenderTree = _a.onRenderTree,
           _b = _a.tooltip,
           tooltip = _b === void 0 ? '' : _b,
-          _c = _a.highlightedLayers,
-          highlightedLayers = _c === void 0 ? [] : _c,
-          _d = _a.preloadedServices,
-          preloadedServices = _d === void 0 ? preloadedDefaultMapServices : _d,
-          _e = _a.layerType,
-          layerType = _e === void 0 ? LayerType.mapLayer : _e,
-          _f = _a.shouldFocus,
-          shouldFocus = _f === void 0 ? false : _f;
+          _c = _a.preloadedServices,
+          preloadedServices = _c === void 0 ? preloadedDefaultMapServices : _c,
+          _d = _a.layerType,
+          layerType = _d === void 0 ? LayerType.mapLayer : _d,
+          _e = _a.shouldFocus,
+          shouldFocus = _e === void 0 ? false : _e;
       var ref = React__namespace.useRef(null);
 
-      var _g = __read(React__namespace.useState(false), 2),
-          open = _g[0],
-          setOpen = _g[1];
+      var _f = __read(React__namespace.useState(false), 2),
+          open = _f[0],
+          setOpen = _f[1];
+
+      var _g = __read(React__namespace.useState(shouldFocus), 2),
+          isTooltipDisabled = _g[0],
+          setTooltipDisabled = _g[1];
 
       var handleClose = function handleClose() {
         setOpen(!open);
       };
 
+      var onBlurTooltip = function onBlurTooltip(event) {
+        // enable tooltip again after user blurs
+        if (event.relatedTarget) {
+          setTooltipDisabled(false);
+        }
+      };
+
       React__namespace.useEffect(function () {
         if (shouldFocus && ref.current) {
           ref.current.focus();
@@ -9503,7 +9523,9 @@
 
       }, []);
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: tooltip
+        title: tooltip,
+        disableFocusListener: isTooltipDisabled,
+        onBlur: onBlurTooltip
       }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         onClick: handleClose,
         sx: styles$2.button,
@@ -9514,9 +9536,7 @@
       }, /*#__PURE__*/React__namespace.createElement(theme.Add, null))), /*#__PURE__*/React__namespace.createElement(AddLayersPopup, {
         open: open,
         handleClose: handleClose,
-        onClickService: onClickService,
         onRenderTree: onRenderTree,
-        highlightedLayers: highlightedLayers,
         preloadedServices: preloadedServices,
         layerType: layerType
       }));
@@ -10114,7 +10134,6 @@
           _b = _a.isEnabled,
           isEnabled = _b === void 0 ? true : _b;
       var classes = useStyles$n();
-      var sliderClasses = shared.sliderStyles();
 
       var _c = __read(React__namespace.useState(false), 2),
           open = _c[0],
@@ -10178,8 +10197,8 @@
         onBlur: onBlur
       }, currentOpacityText)), open ? /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.sliderBackground
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: sliderClasses.sliderHeader
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: shared.sliderHeaderStyle
       }, "Opacity"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
         "data-testid": "opacitySlider",
         orientation: "vertical",
@@ -11214,7 +11233,11 @@
         "data-testid": "layerContainerRow"
       }, /*#__PURE__*/React__namespace.createElement(reactSortablejs.ReactSortable, {
         tag: "div",
-        list: layerIds,
+        list: layerIds.map(function (layerId) {
+          return {
+            id: layerId
+          };
+        }),
         setList: onSetList,
         animation: 200,
         onSort: onSortEnd,
@@ -11362,6 +11385,15 @@
         }));
       }, baseLayersWithMapId);
     };
+    var areAvailableBaseLayersSame = function areAvailableBaseLayersSame(availableBaseLayerList, newBaseLayerList) {
+      var availableList = availableBaseLayerList.map(function (layer) {
+        return layer.name;
+      });
+      var newList = newBaseLayerList.map(function (layer) {
+        return layer.name;
+      });
+      return _.isEqual(availableList, newList);
+    };
 
     var BaseLayersConnect = function BaseLayersConnect(_a) {
       var mapId = _a.mapId,
@@ -11375,14 +11407,16 @@
       });
       React__namespace.useEffect(function () {
         // Set initial availableBaseLayers only if none set for that map yet
-        if (currentAvailableBaseLayers.length < 1) {
-          var availableBaseLayersToBeAdded = constructListAvailableBaseLayers(selectedBaseLayers, preloadedAvailableBaseLayers, mapId);
-          dispatch(layerActions.addAvailableBaseLayers({
+        var availableBaseLayersToBeAdded = constructListAvailableBaseLayers(selectedBaseLayers, preloadedAvailableBaseLayers, mapId);
+        var areBaseLayersSame = areAvailableBaseLayersSame(availableBaseLayersToBeAdded, currentAvailableBaseLayers);
+
+        if (!areBaseLayersSame) {
+          dispatch(layerActions.setAvailableBaseLayers({
             layers: availableBaseLayersToBeAdded
           }));
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-      }, [mapId]);
+      }, [mapId, preloadedAvailableBaseLayers]);
 
       var onChangeBaseLayers = function onChangeBaseLayers(newSelectedLayerId) {
         var newBaseLayer = currentAvailableBaseLayers.filter(function (layer) {
@@ -11708,52 +11742,64 @@
     };
 
     var ServicePopup = function ServicePopup(_a) {
-      var _b, _c;
-
       var servicePopupVariant = _a.servicePopupVariant,
-          _d = _a.hideBackdrop,
-          hideBackdrop = _d === void 0 ? false : _d,
+          _b = _a.hideBackdrop,
+          hideBackdrop = _b === void 0 ? false : _b,
           isOpen = _a.isOpen,
           closePopup = _a.closePopup,
+          serviceId = _a.serviceId,
           url = _a.url,
           services = _a.services,
           serviceSetLayers = _a.serviceSetLayers;
 
-      var _e = __read(React__namespace.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_b = services[url]) === null || _b === void 0 ? void 0 : _b.name), 2),
-          serviceName = _e[0],
-          setServiceName = _e[1];
+      var _c = __read(React__namespace.useState(''), 2),
+          serviceName = _c[0],
+          setServiceName = _c[1];
+
+      var _d = __read(React__namespace.useState(''), 2),
+          serviceUrl = _d[0],
+          setServiceUrl = _d[1];
 
-      var _f = __read(React__namespace.useState(servicePopupVariant === 'add' || url === undefined ? '' : url), 2),
-          serviceUrl = _f[0],
-          setServiceUrl = _f[1];
+      var _e = __read(React__namespace.useState(''), 2),
+          _abstract = _e[0],
+          setAbstract = _e[1];
+
+      var _f = __read(React__namespace.useState(false), 2),
+          disableButton = _f[0],
+          setDisableButton = _f[1];
 
-      var _g = __read(React__namespace.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_c = services[url]) === null || _c === void 0 ? void 0 : _c["abstract"]), 2),
-          _abstract = _g[0],
-          setAbstract = _g[1];
+      var _g = __read(React__namespace.useState(false), 2),
+          isLoading = _g[0],
+          setIsLoading = _g[1];
 
       var _h = __read(React__namespace.useState(false), 2),
-          disableButton = _h[0],
-          setDisableButton = _h[1];
+          serviceNameHasError = _h[0],
+          setServiceNameHasError = _h[1];
 
-      var _j = __read(React__namespace.useState(false), 2),
-          isLoading = _j[0],
-          setIsLoading = _j[1];
+      var _j = __read(React__namespace.useState(''), 2),
+          serviceNameHelperText = _j[0],
+          setServiceNameHelperText = _j[1];
 
       var _k = __read(React__namespace.useState(false), 2),
-          serviceNameHasError = _k[0],
-          setServiceNameHasError = _k[1];
+          serviceUrlHasError = _k[0],
+          setServiceUrlHasError = _k[1];
 
       var _l = __read(React__namespace.useState(''), 2),
-          serviceNameHelperText = _l[0],
-          setServiceNameHelperText = _l[1];
+          serviceUrlHelperText = _l[0],
+          setServiceUrlHelperText = _l[1];
+
+      React__namespace.useEffect(function () {
+        var _a;
 
-      var _m = __read(React__namespace.useState(false), 2),
-          serviceUrlHasError = _m[0],
-          setServiceUrlHasError = _m[1];
+        if (servicePopupVariant === 'edit') {
+          setServiceName(((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName) || '');
+          setServiceUrl(url || '');
+        }
 
-      var _o = __read(React__namespace.useState(''), 2),
-          serviceUrlHelperText = _o[0],
-          setServiceUrlHelperText = _o[1];
+        if (servicePopupVariant === 'save') {
+          setServiceUrl(url || '');
+        }
+      }, [serviceId, services, url, servicePopupVariant, isOpen]);
 
       var validateServiceUrl = function validateServiceUrl(url) {
         if (url === '' || url === null || typeof url === 'undefined') return false;
@@ -11852,11 +11898,10 @@
 
       var ServiceNameInRedux = function ServiceNameInRedux() {
         if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
-          for (var service in services) {
-            if (services && services[service].name.toLowerCase() === serviceName.toLowerCase()) return true;
-          }
-
-          return false;
+          var foundName = Object.keys(services).find(function (serviceId) {
+            return services[serviceId].serviceName.toLowerCase() === (serviceName === null || serviceName === void 0 ? void 0 : serviceName.toLowerCase());
+          });
+          return foundName !== undefined;
         }
 
         return false;
@@ -11864,11 +11909,10 @@
 
       var UrlInRedux = function UrlInRedux() {
         if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
-          if (services && services[serviceUrl]) {
-            return true;
-          }
-
-          return false;
+          var foundUrl = Object.keys(services).find(function (serviceId) {
+            return services[serviceId].serviceUrl === serviceUrl;
+          });
+          return foundUrl !== undefined;
         }
 
         return false;
@@ -11876,6 +11920,7 @@
 
 
       React__namespace.useEffect(function () {
+        if (serviceName === undefined) return;
         setServiceNameHelperText('');
 
         if (ServiceNameInRedux()) {
@@ -11891,7 +11936,7 @@
       React__namespace.useEffect(function () {
         setServiceUrlHelperText('');
 
-        if (serviceUrl.length > 0 && !validateServiceUrl(serviceUrl)) {
+        if (serviceUrl && serviceUrl.length > 0 && !validateServiceUrl(serviceUrl)) {
           setServiceUrlHasError(true);
           setServiceUrlHelperText('Error: Not a valid URL.');
         } else if (UrlInRedux()) {
@@ -11978,7 +12023,8 @@
           return setAbstract(event.target.value);
         },
         value: _abstract,
-        "data-testid": "abstractTextField"
+        "data-testid": "abstractTextField",
+        disabled: true
       })), /*#__PURE__*/React__namespace.createElement(material.DialogActions, {
         sx: style$1.footerContent
       }, /*#__PURE__*/React__namespace.createElement(material.Button, {
@@ -12034,10 +12080,11 @@
           hideBackdrop = _a.hideBackdrop,
           isOpen = _a.isOpen,
           closePopup = _a.closePopup,
+          serviceId = _a.serviceId,
           url = _a.url;
       var dispatch = reactRedux.useDispatch();
       var services = reactRedux.useSelector(function (store) {
-        return getServices(store);
+        return getActiveServices(store);
       });
       var serviceSetLayers = React__default["default"].useCallback(function (payload) {
         dispatch(serviceActions.serviceSetLayers(payload));
@@ -12047,9 +12094,10 @@
         hideBackdrop: hideBackdrop,
         isOpen: isOpen,
         closePopup: closePopup,
-        url: url,
+        serviceId: serviceId,
         services: services,
-        serviceSetLayers: serviceSetLayers
+        serviceSetLayers: serviceSetLayers,
+        url: url
       });
     };
 
@@ -12209,7 +12257,7 @@
       });
       return /*#__PURE__*/React__namespace.createElement(SearchField, {
         setSearchFilter: function setSearchFilter(filterText) {
-          return dispatch(layerSelectActions.setSearchFilter({
+          dispatch(layerSelectActions.setSearchFilter({
             filterText: filterText
           }));
         },
@@ -12442,15 +12490,27 @@
           mapLayers = _a.mapLayers,
           keywordIds = _a.keywordIds,
           allKeywordsActive = _a.allKeywordsActive;
+      var layerSelectFilterHeight = 199;
 
       var _b = __read(React__namespace.useState(0), 2),
           numberOfLayers = _b[0],
           setNumberOfLayers = _b[1];
 
+      var _c = __read(React__namespace.useState([]), 2),
+          layersFilteredFromService = _c[0],
+          setLayersFilteredFromService = _c[1];
+
       React__namespace.useEffect(function () {
         setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
           return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
         }, 0));
+        setLayersFilteredFromService(serviceIds.reduce(function (layerList, serviceId) {
+          return layerList.concat(filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer) {
+            return __assign(__assign({}, layer), {
+              serviceId: serviceId
+            });
+          }));
+        }, []));
       }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "layerList"
@@ -12459,25 +12519,26 @@
           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(LayerListRow, {
-            key: layer.name,
-            layer: layer,
-            layerIndex: layerIndex,
-            service: services[serviceId],
-            serviceUrl: services[serviceId].serviceUrl,
-            addLayer: addLayer,
-            deleteLayer: deleteLayer,
-            mapLayers: mapLayers
-          });
-        });
-      })));
+      }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement(reactWindow.FixedSizeList, {
+        height: layerSelectHeight - layerSelectFilterHeight,
+        itemCount: numberOfLayers,
+        itemSize: 68
+      }, function (_a) {
+        var index = _a.index,
+            style = _a.style;
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          style: style,
+          key: layersFilteredFromService[index].name
+        }, /*#__PURE__*/React__namespace.createElement(LayerListRow, {
+          layer: layersFilteredFromService[index],
+          layerIndex: index,
+          service: services[layersFilteredFromService[index].serviceId],
+          serviceUrl: services[layersFilteredFromService[index].serviceId].serviceUrl,
+          addLayer: addLayer,
+          deleteLayer: deleteLayer,
+          mapLayers: mapLayers
+        }));
+      }));
     };
 
     /* *
@@ -12996,13 +13057,19 @@
 
     var ServiceOptionsDialog = function ServiceOptionsDialog(_a) {
       var services = _a.services,
-          mapStoreRemoveService = _a.mapStoreRemoveService,
-          _b = _a.layers,
-          layers = _b === void 0 ? [] : _b;
+          mapStoreRemoveService = _a.mapStoreRemoveService;
 
-      var _c = __read(React__namespace.useState(false), 2),
-          addServiceisOpen = _c[0],
-          setAddServiceIsOpen = _c[1];
+      var _b = __read(React__namespace.useState(false), 2),
+          addServiceIsOpen = _b[0],
+          setAddServiceIsOpen = _b[1];
+
+      var _c = __read(React__namespace.useState({
+        isOpen: false,
+        serviceId: '',
+        serviceUrl: ''
+      }), 2),
+          editServiceIsOpen = _c[0],
+          setEditServiceIsOpen = _c[1];
 
       var openAddService = function openAddService() {
         setAddServiceIsOpen(true);
@@ -13010,13 +13077,10 @@
 
       var closePopup = function closePopup() {
         setAddServiceIsOpen(false);
-      };
-
-      var isDisabled = function isDisabled(service) {
-        return layers.some(function (layer) {
-          return layer.service && layer.service.includes(service);
-        }) || preloadedDefaultMapServices.some(function (defaultMapService) {
-          return defaultMapService.url && defaultMapService.url.includes(service);
+        setEditServiceIsOpen({
+          isOpen: false,
+          serviceId: '',
+          serviceUrl: ''
         });
       };
 
@@ -13045,16 +13109,25 @@
             marginRight: '-10px'
           }
         }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-          title: "Edit Service"
+          title: "Edit Service",
+          disableHoverListener: !services[serviceId].isUserAddedService
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
-          disabled: isDisabled(services[serviceId].serviceUrl),
+          disabled: !services[serviceId].isUserAddedService,
           "data-testid": "openEditServiceButton",
-          size: "large"
+          size: "large",
+          onClick: function onClick() {
+            setEditServiceIsOpen({
+              isOpen: true,
+              serviceId: serviceId,
+              serviceUrl: services[serviceId].serviceUrl
+            });
+          }
         }, /*#__PURE__*/React__namespace.createElement(theme.Edit, null)))), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-          title: "Delete Service"
+          title: "Delete Service",
+          disableHoverListener: !services[serviceId].isUserAddedService
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           size: "large",
-          disabled: isDisabled(services[serviceId].serviceUrl),
+          disabled: !services[serviceId].isUserAddedService,
           onClick: function onClick() {
             return mapStoreRemoveService(serviceId, services[serviceId].serviceUrl);
           },
@@ -13068,10 +13141,16 @@
         sx: styles.button,
         variant: "tertiary",
         startIcon: /*#__PURE__*/React__namespace.createElement(theme.Add, null)
-      }, "Add a new service"))), addServiceisOpen && /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
+      }, "Add a new service"))), addServiceIsOpen && /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
         servicePopupVariant: "add",
-        isOpen: addServiceisOpen,
+        isOpen: addServiceIsOpen,
         closePopup: closePopup
+      }), editServiceIsOpen && /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
+        servicePopupVariant: "edit",
+        isOpen: editServiceIsOpen.isOpen,
+        closePopup: closePopup,
+        serviceId: editServiceIsOpen.serviceId,
+        url: editServiceIsOpen.serviceUrl
       }));
     };
 
@@ -13094,9 +13173,6 @@
 
     var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect() {
       var dispatch = reactRedux.useDispatch();
-      var allLayers = reactRedux.useSelector(function (store) {
-        return getAllLayers(store);
-      });
       var mapStoreRemoveService = React__namespace.useCallback(function (serviceId, serviceUrl) {
         dispatch(serviceActions.mapStoreRemoveService({
           id: serviceId,
@@ -13108,7 +13184,6 @@
       });
       return /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialog, {
         services: services,
-        layers: allLayers,
         mapStoreRemoveService: mapStoreRemoveService
       });
     };
@@ -13399,40 +13474,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 CustomSwitch = withStyles__default["default"](function (theme) {
-      return {
-        switchBase: {
-          '&$checked': {
-            color: theme.palette.geowebColors.customSlider.thumb
-          },
-          '&$checked + $track': {
-            backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
-          }
-        },
-        checked: {},
-        track: {
-          backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-          opacity: '1 !important'
-        }
-      };
-    })(material.Switch);
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -13469,7 +13510,7 @@
           keywords: keywords
         }));
       }, [allKeywordIds, allKeywordsActive, checkedKeywordIds, dispatch]);
-      return /*#__PURE__*/React__namespace.createElement(CustomSwitch, {
+      return /*#__PURE__*/React__namespace.createElement(material.Switch, {
         checked: allKeywordsActive,
         onChange: toggleKeywords,
         "data-testid": "customSwitch"
@@ -13756,8 +13797,13 @@
         }; // eslint-disable-next-line react-hooks/exhaustive-deps
       }, []);
       var serviceSetLayers = React__namespace.useCallback(function (payload) {
-        return dispatch(serviceActions.serviceSetLayers(payload));
+        dispatch(serviceActions.serviceSetLayers(payload));
       }, [dispatch]);
+
+      var checkIfUserAddedService = function checkIfUserAddedService(service) {
+        return !!service.isUserAddedService;
+      };
+
       React__namespace.useEffect(function () {
         if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
           mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
@@ -13769,7 +13815,7 @@
                   name: service.name,
                   serviceUrl: service.url,
                   layers: layers,
-                  isUserAddedService: false
+                  isUserAddedService: checkIfUserAddedService(service)
                 });
               }
             })["catch"](function () {
@@ -14851,7 +14897,6 @@
       var animationDelay = _a.animationDelay,
           setMapAnimationDelay = _a.setMapAnimationDelay;
       var classes = useStyles$c();
-      var sliderClasses = shared.sliderStyles();
 
       var _b = __read(React__namespace.useState(false), 2),
           open = _b[0],
@@ -14915,8 +14960,8 @@
         text: text
       })))), open ? /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.sliderBackground
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: sliderClasses.sliderHeader
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: shared.sliderHeaderStyle
       }, "Speed"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
         "data-testid": "speedSlider",
         orientation: "vertical",
@@ -15093,31 +15138,6 @@
         disabled: {}
       };
     });
-    var TimeStepSwitch = withStyles__default["default"](function (theme) {
-      return {
-        root: {
-          marginLeft: '18px'
-        },
-        thumb: {
-          width: 20,
-          height: 20,
-          margin: '0 0 0 0'
-        },
-        switchBase: {
-          '&$checked': {
-            color: theme.palette.geowebColors.customSlider.thumb
-          },
-          '&$checked + $track': {
-            backgroundColor: theme.palette.geowebColors.customSlider.switchTrack
-          }
-        },
-        checked: {},
-        track: {
-          backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-          opacity: '1 !important'
-        }
-      };
-    })(material.Switch);
 
     var TimeStepButton = function TimeStepButton(_a) {
       var timeStep = _a.timeStep,
@@ -15132,7 +15152,6 @@
         return null;
       } : _d;
       var classes = useStyles$b();
-      var sliderClasses = shared.sliderStyles();
 
       var _e = __read(React__namespace.useState(false), 2),
           open = _e[0],
@@ -15200,8 +15219,8 @@
         "data-testid": "timeStepButtonText"
       })))), open ? /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.sliderBackground
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: sliderClasses.sliderHeader
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: shared.sliderHeaderStyle
       }, "Time step"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
         "data-testid": "timeStepButtonSlider",
         orientation: "vertical",
@@ -15219,14 +15238,17 @@
       }, /*#__PURE__*/React__namespace.createElement("span", {
         "data-testid": "timestepAutoSwitchTooltip"
       }, /*#__PURE__*/React__namespace.createElement(material.FormControlLabel, {
-        control: /*#__PURE__*/React__namespace.createElement(TimeStepSwitch, {
+        control: /*#__PURE__*/React__namespace.createElement(material.Switch, {
           checked: isTimestepAuto,
           onChange: function onChange() {
             return onToggleTimestepAuto();
           },
           disabled: disabled,
           id: "timestepAutoSwitch",
-          disableRipple: true
+          disableRipple: true,
+          sx: {
+            marginLeft: '18px'
+          }
         }),
         label: "Auto",
         labelPlacement: "end",
@@ -21057,8 +21079,10 @@
 
 
         if (!prevProps || prevProps.disableMapPin !== props.disableMapPin) {
-          if (!(props.disableMapPin === undefined)) {
-            this.adaguc.webMapJS.getMapPin().toggleDisableMapPin();
+          if (props.disableMapPin === true) {
+            this.adaguc.webMapJS.getMapPin().setMapPinDisabled();
+          } else if (props.disableMapPin === false) {
+            this.adaguc.webMapJS.getMapPin().setMapPinEnabled();
           }
         }
         /* Change the animation delay */
@@ -21381,7 +21405,10 @@
           _this.onUpdateBBoxListener(newBbox);
         }, true);
         this.adaguc.webMapJS.addListener('onsetmappin', function (mapPinLatLonCoordinate) {
-          if (onMapPinChangeLocation) {
+          // only change location when mapPin is visible and enabled
+          if (onMapPinChangeLocation && // eslint-disable-next-line react/destructuring-assignment
+          _this.props.displayMapPin && // eslint-disable-next-line react/destructuring-assignment
+          !_this.props.disableMapPin) {
             onMapPinChangeLocation({
               mapPinLocation: {
                 lat: mapPinLatLonCoordinate.lat,
@@ -21490,6 +21517,7 @@
         },
         shouldAutoFetch: true,
         displayMapPin: false,
+        disableMapPin: false,
         onMount: function onMount() {
           return null;
         },
@@ -21738,28 +21766,28 @@
         dispatch(layerActions.onUpdateLayerInformation(payload));
       }, [dispatch]);
       var registerMap = React__namespace.useCallback(function (payload) {
-        return dispatch(mapActions$1.registerMap(payload));
+        dispatch(mapActions$1.registerMap(payload));
       }, [dispatch]);
       var unregisterMap = React__namespace.useCallback(function (payload) {
-        return dispatch(mapActions$1.unregisterMap(payload));
+        dispatch(mapActions$1.unregisterMap(payload));
       }, [dispatch]);
       var genericSetBbox = React__namespace.useCallback(function (payload) {
-        return dispatch(genericActions.setBbox(payload));
+        dispatch(genericActions.setBbox(payload));
       }, [dispatch]);
       var syncGroupAddSource = React__namespace.useCallback(function (payload) {
-        return dispatch(genericActions.syncGroupAddSource(payload));
+        dispatch(genericActions.syncGroupAddSource(payload));
       }, [dispatch]);
       var syncGroupRemoveSource = React__namespace.useCallback(function (payload) {
-        return dispatch(genericActions.syncGroupRemoveSource(payload));
+        dispatch(genericActions.syncGroupRemoveSource(payload));
       }, [dispatch]);
       var layerError = React__namespace.useCallback(function (payload) {
-        return dispatch(layerActions.layerError(payload));
+        dispatch(layerActions.layerError(payload));
       }, [dispatch]);
       var mapPinChangeLocation = React__namespace.useCallback(function (payload) {
-        return dispatch(mapActions$1.setMapPinLocation(payload));
+        dispatch(mapActions$1.setMapPinLocation(payload));
       }, [dispatch]);
       var setSelectedFeature = React__namespace.useCallback(function (payload) {
-        return dispatch(mapActions$1.setSelectedFeature(payload));
+        dispatch(mapActions$1.setSelectedFeature(payload));
       }, [dispatch]);
       useKeyboardZoomAndPan(mapId);
       return /*#__PURE__*/React__namespace.createElement("div", {
@@ -22034,7 +22062,8 @@
           displayDimensionSelectButtonInMap = _o === void 0 ? true : _o,
           _p = _a.multiLegend,
           multiLegend = _p === void 0 ? true : _p,
-          props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend"]);
+          shouldShowLayerManager = _a.shouldShowLayerManager,
+          props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager"]);
 
       var dispatch = reactRedux.useDispatch();
       var mapId = React__default["default"].useRef(id || generateMapId()).current;
@@ -22065,7 +22094,17 @@
         dispatch(mapActions$1.setMapPreset({
           mapId: mapId,
           initialProps: initialProps
-        })); // eslint-disable-next-line react-hooks/exhaustive-deps
+        }));
+
+        if (shouldShowLayerManager !== undefined) {
+          dispatch(uiActions.setActiveMapIdForDialog({
+            type: 'layerManager',
+            mapId: mapId,
+            setOpen: shouldShowLayerManager,
+            source: 'app'
+          }));
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
       }, []);
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
@@ -22155,7 +22194,7 @@
       var classes = useStyles$2();
       var dispatch = reactRedux.useDispatch();
       var syncGroupAddTarget = React__default["default"].useCallback(function (payload) {
-        return dispatch(genericActions.syncGroupAddTarget(payload));
+        dispatch(genericActions.syncGroupAddTarget(payload));
       }, [dispatch]);
       React__default["default"].useEffect(function () {
         maps.forEach(function (map) {
@@ -22851,16 +22890,16 @@
 
       var viewState = reactRedux.useSelector(syncGroupGetViewState);
       var syncGroupAddGroup = React__namespace.useCallback(function (payload) {
-        return dispatch(actions.syncGroupAddGroup(payload));
+        dispatch(actions.syncGroupAddGroup(payload));
       }, [dispatch]);
       var syncGroupRemoveGroup = React__namespace.useCallback(function (payload) {
-        return dispatch(actions.syncGroupRemoveGroup(payload));
+        dispatch(actions.syncGroupRemoveGroup(payload));
       }, [dispatch]);
       var syncGroupAddTarget = React__namespace.useCallback(function (payload) {
-        return dispatch(actions.syncGroupAddTarget(payload));
+        dispatch(actions.syncGroupAddTarget(payload));
       }, [dispatch]);
       var syncGroupRemoveTarget = React__namespace.useCallback(function (payload) {
-        return dispatch(actions.syncGroupRemoveTarget(payload));
+        dispatch(actions.syncGroupRemoveTarget(payload));
       }, [dispatch]);
       var isOpenInStore = reactRedux.useSelector(function (store) {
         return getisDialogOpen(store, 'syncGroups');
@@ -23136,21 +23175,17 @@
         }
       }, /*#__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", {
+      }, selectedFeatureProperties.areaDesc), selectedFeatureProperties.areaDesc && /*#__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", {
+      }, "event: ", selectedFeatureProperties.languages[2].event), selectedFeatureProperties.onset && /*#__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", {
+      }, "Sent:", ' ', moment__default["default"].utc(selectedFeatureProperties.onset).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__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", {
+      }, "Expires:", ' ', moment__default["default"].utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[2].senderName && /*#__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", {
+      }, "Sender: ", selectedFeatureProperties.languages[2].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default["default"].createElement("pre", {
         "data-testid": "map-warning-properties-row"
-      }, "area: ", selectedFeatureProperties.details[0].area));
+      }, "Identifier: ", selectedFeatureProperties.identifier));
     };
 
     /* *