@opengeoweb/store 8.4.1 → 9.0.0

package/index.esm.js

@@ -1,8 +1,8 @@
 import { webmapUtils, LayerType, webmapTestSettings, WMLayer, getCapabilities } from '@opengeoweb/webmap';
-import { getGeoJson, moveFeature, defaultLayers, getFeatureCollection, emptyGeoJSON } from '@opengeoweb/webmap-react';
+import { getGeoJson, moveFeature, createInterSections, defaultLayers, getFeatureCollection, emptyGeoJSON } from '@opengeoweb/webmap-react';
 export { defaultLayers } from '@opengeoweb/webmap-react';
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useContext, useRef, useCallback, useDebugValue, useEffect } from 'react';
 import { ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { withEggs } from '@opengeoweb/shared';
 
@@ -334,15 +334,6 @@ function _regeneratorRuntime() {
     }
   }, e;
 }
-function _typeof$1(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof$1(o);
-}
 function _defineProperty$1(obj, key, value) {
   key = _toPropertyKey$1(key);
   if (key in obj) {
@@ -391,57 +382,6 @@ function _nonIterableSpread() {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _createForOfIteratorHelper(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (!it) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      var F = function () {};
-      return {
-        s: F,
-        n: function () {
-          if (i >= o.length) return {
-            done: true
-          };
-          return {
-            done: false,
-            value: o[i++]
-          };
-        },
-        e: function (e) {
-          throw e;
-        },
-        f: F
-      };
-    }
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-  var normalCompletion = true,
-    didErr = false,
-    err;
-  return {
-    s: function () {
-      it = it.call(o);
-    },
-    n: function () {
-      var step = it.next();
-      normalCompletion = step.done;
-      return step;
-    },
-    e: function (e) {
-      didErr = true;
-      err = e;
-    },
-    f: function () {
-      try {
-        if (!normalCompletion && it.return != null) it.return();
-      } finally {
-        if (didErr) throw err;
-      }
-    }
-  };
-}
 function _toPrimitive$1(input, hint) {
   if (typeof input !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
@@ -2856,7 +2796,7 @@ var LayerActionOrigin;
   LayerActionOrigin["unregisterMapSaga"] = "unregisterMapSaga";
 })(LayerActionOrigin || (LayerActionOrigin = {}));
 
-var types$7 = /*#__PURE__*/Object.freeze({
+var types$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   get LayerStatus () { return LayerStatus; },
   get LayerActionOrigin () { return LayerActionOrigin; }
@@ -9747,7 +9687,9 @@ var createLayer = function createLayer(_a) {
     layerType = _a$layerType === void 0 ? 'mapLayer' : _a$layerType,
     _a$status = _a.status,
     status = _a$status === void 0 ? 'default' : _a$status,
-    props = __rest(_a, ["id", "opacity", "acceptanceTimeInMinutes", "enabled", "layerType", "status"]);
+    _a$useLatestReference = _a.useLatestReferenceTime,
+    useLatestReferenceTime = _a$useLatestReference === void 0 ? true : _a$useLatestReference,
+    props = __rest(_a, ["id", "opacity", "acceptanceTimeInMinutes", "enabled", "layerType", "status", "useLatestReferenceTime"]);
   var wmjsLayer = webmapUtils.getWMLayerById(id);
   var dimensions = props.dimensions || (wmjsLayer ? wmjsLayer.getDimensions() : []).map(function (dim) {
     return {
@@ -9763,10 +9705,11 @@ var createLayer = function createLayer(_a) {
     acceptanceTimeInMinutes: acceptanceTimeInMinutes,
     enabled: enabled,
     layerType: layerType,
-    status: status
+    status: status,
+    useLatestReferenceTime: useLatestReferenceTime
   });
 };
-var initialState$9 = {
+var initialState$7 = {
   byId: {},
   allIds: [],
   availableBaseLayers: {
@@ -9774,8 +9717,8 @@ var initialState$9 = {
     allIds: []
   }
 };
-var slice$9 = createSlice({
-  initialState: initialState$9,
+var slice$7 = createSlice({
+  initialState: initialState$7,
   name: 'layerReducer',
   reducers: {
     addLayer: function addLayer(draft, action) {
@@ -10034,10 +9977,20 @@ var slice$9 = createSlice({
         draft.availableBaseLayers.allIds.push(layer.id);
       });
     },
-    onUpdateLayerInformation: function onUpdateLayerInformation(draft, action) {
+    setUseLatestReferenceTime: function setUseLatestReferenceTime(draft, action) {
       var _action$payload14 = action.payload,
-        layerStyle = _action$payload14.layerStyle,
-        layerDimensions = _action$payload14.layerDimensions;
+        id = _action$payload14.id,
+        useLatestReferenceTime = _action$payload14.useLatestReferenceTime;
+      var layer = draft.byId[id];
+      if (!layer) {
+        return;
+      }
+      layer.useLatestReferenceTime = useLatestReferenceTime;
+    },
+    onUpdateLayerInformation: function onUpdateLayerInformation(draft, action) {
+      var _action$payload15 = action.payload,
+        layerStyle = _action$payload15.layerStyle,
+        layerDimensions = _action$payload15.layerDimensions;
       if (layerStyle && draft.byId[layerStyle.layerId]) {
         draft.byId[layerStyle.layerId].style = layerStyle === null || layerStyle === void 0 ? void 0 : layerStyle.style;
       }
@@ -10074,6 +10027,9 @@ var slice$9 = createSlice({
             return d.name === newLayerDimension.name;
           });
           if (existingDimension) {
+            if (existingDimension.name === 'reference_time' && reduxLayer.useLatestReferenceTime && newLayerDimension.maxValue) {
+              existingDimension.currentValue = newLayerDimension.maxValue;
+            }
             /* If found update only minValue, maxValue and values */
             existingDimension.maxValue = newLayerDimension.maxValue;
             existingDimension.minValue = newLayerDimension.minValue;
@@ -10090,22 +10046,25 @@ var slice$9 = createSlice({
     },
     // feature layer actions
     setSelectedFeature: function setSelectedFeature(draft, action) {
-      var _action$payload15 = action.payload,
-        layerId = _action$payload15.layerId,
-        selectedFeatureIndex = _action$payload15.selectedFeatureIndex;
+      var _action$payload16 = action.payload,
+        layerId = _action$payload16.layerId,
+        selectedFeatureIndex = _action$payload16.selectedFeatureIndex;
       if (!draft.byId[layerId]) {
         return;
       }
       draft.byId[layerId].selectedFeatureIndex = selectedFeatureIndex;
     },
     updateFeature: function updateFeature(draft, action) {
-      var _action$payload16 = action.payload,
-        layerId = _action$payload16.layerId,
-        geojson = _action$payload16.geojson,
-        _action$payload16$sho = _action$payload16.shouldAllowMultipleShapes,
-        shouldAllowMultipleShapes = _action$payload16$sho === void 0 ? false : _action$payload16$sho,
-        _action$payload16$rea = _action$payload16.reason,
-        reason = _action$payload16$rea === void 0 ? '' : _action$payload16$rea;
+      var _a, _b;
+      var _action$payload17 = action.payload,
+        layerId = _action$payload17.layerId,
+        geojson = _action$payload17.geojson,
+        _action$payload17$sho = _action$payload17.shouldAllowMultipleShapes,
+        shouldAllowMultipleShapes = _action$payload17$sho === void 0 ? false : _action$payload17$sho,
+        _action$payload17$rea = _action$payload17.reason,
+        reason = _action$payload17$rea === void 0 ? '' : _action$payload17$rea,
+        geoJSONIntersectionLayerId = _action$payload17.geoJSONIntersectionLayerId,
+        geoJSONIntersectionBoundsLayerId = _action$payload17.geoJSONIntersectionBoundsLayerId;
       var currentLayer = draft.byId[layerId];
       if (!currentLayer) {
         return;
@@ -10122,12 +10081,22 @@ var slice$9 = createSlice({
         }
       }
       currentLayer.geojson = updatedGeoJSON;
+      if (geoJSONIntersectionBoundsLayerId && geoJSONIntersectionLayerId) {
+        var intersectionLayer = draft.byId[geoJSONIntersectionLayerId];
+        var intersectionBoundsLayer = draft.byId[geoJSONIntersectionBoundsLayerId];
+        if (!intersectionLayer || !intersectionBoundsLayer) {
+          return;
+        }
+        var bounds = R$1(intersectionBoundsLayer).geojson;
+        var properties = (_b = (_a = R$1(currentLayer).geojson) === null || _a === void 0 ? void 0 : _a.features[0]) === null || _b === void 0 ? void 0 : _b.properties;
+        intersectionLayer.geojson = createInterSections(updatedGeoJSON, bounds, properties);
+      }
     },
     updateFeatureProperties: function updateFeatureProperties(draft, action) {
-      var _action$payload17 = action.payload,
-        layerId = _action$payload17.layerId,
-        properties = _action$payload17.properties,
-        selectedFeatureIndex = _action$payload17.selectedFeatureIndex;
+      var _action$payload18 = action.payload,
+        layerId = _action$payload18.layerId,
+        properties = _action$payload18.properties,
+        selectedFeatureIndex = _action$payload18.selectedFeatureIndex;
       var currentLayer = draft.byId[layerId];
       if (!currentLayer) {
         return;
@@ -10143,10 +10112,10 @@ var slice$9 = createSlice({
       }
     },
     toggleFeatureMode: function toggleFeatureMode(draft, action) {
-      var _action$payload18 = action.payload,
-        layerId = _action$payload18.layerId,
-        isInEditMode = _action$payload18.isInEditMode,
-        drawMode = _action$payload18.drawMode;
+      var _action$payload19 = action.payload,
+        layerId = _action$payload19.layerId,
+        isInEditMode = _action$payload19.isInEditMode,
+        drawMode = _action$payload19.drawMode;
       if (!draft.byId[layerId]) {
         return;
       }
@@ -10158,10 +10127,10 @@ var slice$9 = createSlice({
       }
     },
     exitFeatureDrawMode: function exitFeatureDrawMode(draft, action) {
-      var _action$payload19 = action.payload,
-        layerId = _action$payload19.layerId,
-        shouldAllowMultipleShapes = _action$payload19.shouldAllowMultipleShapes,
-        reason = _action$payload19.reason;
+      var _action$payload20 = action.payload,
+        layerId = _action$payload20.layerId,
+        shouldAllowMultipleShapes = _action$payload20.shouldAllowMultipleShapes,
+        reason = _action$payload20.reason;
       if (!draft.byId[layerId]) {
         return;
       }
@@ -10173,9 +10142,9 @@ var slice$9 = createSlice({
   },
   extraReducers: function extraReducers(builder) {
     builder.addCase(setTimeSync, function (draft, action) {
-      var _action$payload20 = action.payload,
-        targetsFromAction = _action$payload20.targets,
-        source = _action$payload20.source;
+      var _action$payload21 = action.payload,
+        targetsFromAction = _action$payload21.targets,
+        source = _action$payload21.source;
       /* Because we want backwards compatibility with the previous code, we also need to listen to the original source action */
       var targets = [{
         targetId: source.payload.sourceId,
@@ -10199,9 +10168,9 @@ var slice$9 = createSlice({
        * These targets can be used as payloads in new Layer actions.
        * These actions are here handled via the layer reducer, as it is the same logic
        */
-      var _action$payload21 = action.payload,
-        targets = _action$payload21.targets,
-        source = _action$payload21.source;
+      var _action$payload22 = action.payload,
+        targets = _action$payload22.targets,
+        source = _action$payload22.source;
       var state = R$1(draft);
       return targets.reduce(function (prevState, target) {
         var action = {
@@ -10209,7 +10178,7 @@ var slice$9 = createSlice({
           type: source.type
         };
         /* Handle the Layer action with the same logic, using the same reducer */
-        return reducer$9(prevState, action);
+        return reducer$7(prevState, action);
       }, state);
     }).addCase(setMapPreset, function (draft, action) {
       var mapId = action.payload.mapId;
@@ -10229,8 +10198,8 @@ var slice$9 = createSlice({
     });
   }
 });
-var reducer$9 = slice$9.reducer;
-var layerActions = slice$9.actions;
+var reducer$7 = slice$7.reducer;
+var layerActions = slice$7.actions;
 
 var lodash = {exports: {}};
 
@@ -27455,14 +27424,10 @@ var selectorMemoizationOptions = {
     resultEqualityCheck: lodash.exports.isEqual
   }
 };
-var isUserAddedService = function isUserAddedService(scope) {
-  return scope === 'user';
-};
 
 var utils$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  selectorMemoizationOptions: selectorMemoizationOptions,
-  isUserAddedService: isUserAddedService
+  selectorMemoizationOptions: selectorMemoizationOptions
 });
 
 /* *
@@ -27829,8 +27794,11 @@ var getLayerIsInsideAcceptanceTime = createSelector(getAcceptanceTimeInMinutes,
   }
   return 'inside';
 });
+var getUseLatestReferenceTime = createSelector(getLayerById, function (layer) {
+  return Boolean(layer === null || layer === void 0 ? void 0 : layer.useLatestReferenceTime);
+});
 
-var selectors$8 = /*#__PURE__*/Object.freeze({
+var selectors$6 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getLayerById: getLayerById,
   getLayersById: getLayersById,
@@ -27860,7 +27828,8 @@ var selectors$8 = /*#__PURE__*/Object.freeze({
   getFeatureLayerGeoJSONProperties: getFeatureLayerGeoJSONProperties,
   getDimensionLayerIds: getDimensionLayerIds,
   getAcceptanceTimeInMinutes: getAcceptanceTimeInMinutes,
-  getLayerIsInsideAcceptanceTime: getLayerIsInsideAcceptanceTime
+  getLayerIsInsideAcceptanceTime: getLayerIsInsideAcceptanceTime,
+  getUseLatestReferenceTime: getUseLatestReferenceTime
 });
 
 /* *
@@ -27891,7 +27860,7 @@ var AnimationLength;
   AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
 })(AnimationLength || (AnimationLength = {}));
 
-var types$6 = /*#__PURE__*/Object.freeze({
+var types$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   get AnimationLength () { return AnimationLength; }
 });
@@ -28019,13 +27988,13 @@ var createUIDialogElement = function createUIDialogElement(_ref) {
     focused: false
   };
 };
-var initialState$8 = {
+var initialState$6 = {
   order: [],
   dialogs: {},
   activeWindowId: undefined
 };
-var slice$8 = createSlice({
-  initialState: initialState$8,
+var slice$6 = createSlice({
+  initialState: initialState$6,
   name: 'uiReducer',
   reducers: {
     registerDialog: function registerDialog(draft, action) {
@@ -28117,18 +28086,9 @@ var slice$8 = createSlice({
     }
   }
 });
-var reducer$8 = slice$8.reducer;
-var uiActions = slice$8.actions;
-
-var addBaseLayer = layerActions.addBaseLayer,
-  addLayer$1 = layerActions.addLayer,
-  duplicateMapLayer$1 = layerActions.duplicateMapLayer,
-  baseLayerDelete = layerActions.baseLayerDelete,
-  layerChangeDimension$1 = layerActions.layerChangeDimension,
-  layerDelete$1 = layerActions.layerDelete,
-  setBaseLayers$1 = layerActions.setBaseLayers,
-  setLayers = layerActions.setLayers,
-  onUpdateLayerInformation = layerActions.onUpdateLayerInformation;
+var reducer$6 = slice$6.reducer;
+var uiActions = slice$6.actions;
+
 /**
  * Checks if the layer id is already taken in one of the maps.
  * @param state The WebMapState
@@ -28166,12 +28126,12 @@ var createLayersWithIds = function createLayersWithIds(state, layers) {
     }
   });
 };
-var initialState$7 = {
+var initialState$5 = {
   byId: {},
   allIds: []
 };
-var slice$7 = createSlice({
-  initialState: initialState$7,
+var slice$5 = createSlice({
+  initialState: initialState$5,
   name: 'mapReducer',
   reducers: {
     registerMap: function registerMap(draft, action) {
@@ -28472,7 +28432,7 @@ var slice$7 = createSlice({
     }
   },
   extraReducers: function extraReducers(builder) {
-    builder.addCase(addLayer$1, function (draft, action) {
+    builder.addCase(layerActions.addLayer, function (draft, action) {
       var _action$payload27 = action.payload,
         layerId = _action$payload27.layerId,
         mapId = _action$payload27.mapId,
@@ -28494,7 +28454,7 @@ var slice$7 = createSlice({
       } else {
         draft.byId[mapId].mapLayers.unshift(layerId);
       }
-    }).addCase(duplicateMapLayer$1, function (draft, action) {
+    }).addCase(layerActions.duplicateMapLayer, function (draft, action) {
       var _action$payload28 = action.payload,
         newLayerId = _action$payload28.newLayerId,
         mapId = _action$payload28.mapId;
@@ -28506,7 +28466,7 @@ var slice$7 = createSlice({
         return;
       }
       draft.byId[mapId].mapLayers.unshift(newLayerId);
-    }).addCase(addBaseLayer, function (draft, action) {
+    }).addCase(layerActions.addBaseLayer, function (draft, action) {
       var _action$payload29 = action.payload,
         layer = _action$payload29.layer,
         layerId = _action$payload29.layerId,
@@ -28525,7 +28485,7 @@ var slice$7 = createSlice({
       if (layer.layerType === LayerType.overLayer) {
         draft.byId[mapId].overLayers.unshift(layerId);
       }
-    }).addCase(setLayers, function (draft, action) {
+    }).addCase(layerActions.setLayers, function (draft, action) {
       var mapId = action.payload.mapId;
       var layersWithIds = createLayersWithIds(draft, action.payload.layers);
       var layerIds = layersWithIds.map(function (_ref) {
@@ -28565,7 +28525,7 @@ var slice$7 = createSlice({
           }
         }
       }
-    }).addCase(setBaseLayers$1, function (draft, action) {
+    }).addCase(layerActions.setBaseLayers, function (draft, action) {
       var _action$payload30 = action.payload,
         layers = _action$payload30.layers,
         mapId = _action$payload30.mapId;
@@ -28597,7 +28557,7 @@ var slice$7 = createSlice({
           draft.byId[mapId].overLayers = overLayerIds;
         }
       }
-    }).addCase(layerDelete$1, function (draft, action) {
+    }).addCase(layerActions.layerDelete, function (draft, action) {
       var _action$payload31 = action.payload,
         mapId = _action$payload31.mapId,
         layerId = _action$payload31.layerId;
@@ -28625,7 +28585,7 @@ var slice$7 = createSlice({
       map.featureLayers = map.featureLayers.filter(function (id) {
         return id !== layerId;
       });
-    }).addCase(baseLayerDelete, function (draft, action) {
+    }).addCase(layerActions.baseLayerDelete, function (draft, action) {
       var _action$payload32 = action.payload,
         mapId = _action$payload32.mapId,
         layerId = _action$payload32.layerId;
@@ -28638,7 +28598,7 @@ var slice$7 = createSlice({
       draft.byId[mapId].overLayers = draft.byId[mapId].overLayers.filter(function (id) {
         return id !== layerId;
       });
-    }).addCase(layerChangeDimension$1, function (draft, action) {
+    }).addCase(layerActions.layerChangeDimension, function (draft, action) {
       var _action$payload33 = action.payload,
         layerId = _action$payload33.layerId,
         dimension = _action$payload33.dimension;
@@ -28707,9 +28667,9 @@ var slice$7 = createSlice({
           type: source.type
         };
         /* Handle the Layer action with the same logic, using the same reducer */
-        return reducer$7(prevState, action);
+        return reducer$5(prevState, action);
       }, draft);
-    }).addCase(onUpdateLayerInformation, function (draft, action) {
+    }).addCase(layerActions.onUpdateLayerInformation, function (draft, action) {
       var mapDimensions = action.payload.mapDimensions;
       if (!mapDimensions) {
         return draft;
@@ -28753,11 +28713,11 @@ var slice$7 = createSlice({
     });
   }
 });
-var mapActions = Object.assign(Object.assign({}, slice$7.actions), {
+var mapActions = Object.assign(Object.assign({}, slice$5.actions), {
   setMapPreset: setMapPreset,
   mapChangeDimension: mapChangeDimension
 });
-var reducer$7 = slice$7.reducer;
+var reducer$5 = slice$5.reducer;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -28884,7 +28844,7 @@ var getDialogError = createSelector(getDialogDetailsByType, function (details) {
   return details && details.error || '';
 });
 
-var selectors$7 = /*#__PURE__*/Object.freeze({
+var selectors$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getUiStore: getUiStore,
   getDialogDetailsByType: getDialogDetailsByType,
@@ -28932,7 +28892,7 @@ var DialogTypes;
   DialogTypes["Search"] = "search";
 })(DialogTypes || (DialogTypes = {}));
 
-var types$5 = /*#__PURE__*/Object.freeze({
+var types$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   get DialogTypes () { return DialogTypes; }
 });
@@ -29022,7 +28982,7 @@ var removeInPlace = function removeInPlace(inDraftArray, condition) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$6 = {
+var initialState$4 = {
   sources: {
     byId: {},
     allIds: []
@@ -29046,8 +29006,8 @@ var initialState$6 = {
     }
   }
 };
-var slice$6 = createSlice({
-  initialState: initialState$6,
+var slice$4 = createSlice({
+  initialState: initialState$4,
   name: 'synchronizationGroupsReducer',
   reducers: {
     syncGroupAddSource: function syncGroupAddSource(draft, action) {
@@ -29176,7 +29136,7 @@ var slice$6 = createSlice({
       });
     },
     syncGroupClear: function syncGroupClear() {
-      return initialState$6;
+      return initialState$4;
     },
     syncGroupSetViewState: function syncGroupSetViewState(draft, action) {
       var viewState = action.payload.viewState;
@@ -29235,7 +29195,7 @@ var setBboxOrTimeSync = function setBboxOrTimeSync(state, action) {
     });
   });
 };
-var _slice$actions = slice$6.actions,
+var _slice$actions = slice$4.actions,
   syncGroupAddGroup = _slice$actions.syncGroupAddGroup,
   syncGroupAddSource = _slice$actions.syncGroupAddSource,
   syncGroupAddTarget = _slice$actions.syncGroupAddTarget;
@@ -29245,8 +29205,8 @@ var _slice$actions = slice$6.actions,
   syncGroupRemoveSource = _slice$actions.syncGroupRemoveSource,
   syncGroupRemoveTarget = _slice$actions.syncGroupRemoveTarget,
   syncGroupSetViewState = _slice$actions.syncGroupSetViewState;
-var actions = slice$6.actions,
-  reducer$6 = slice$6.reducer;
+var actions = slice$4.actions,
+  reducer$4 = slice$4.reducer;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -29274,7 +29234,7 @@ var SyncGroupActionOrigin;
   SyncGroupActionOrigin["activateLayerId"] = "ORIGIN_GENERIC_SYNCHRONIZATIONGROUP_UTILS_ACTIVELAYERIDACTION";
 })(SyncGroupActionOrigin || (SyncGroupActionOrigin = {}));
 
-var types$4 = /*#__PURE__*/Object.freeze({
+var types$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   SyncGroupTypeList: SyncGroupTypeList,
   get SyncGroupActionOrigin () { return SyncGroupActionOrigin; }
@@ -29416,7 +29376,7 @@ var getSyncGroupTargets = createSelector(syncGroupStore, function (store) {
   }, []);
 });
 
-var selectors$6 = /*#__PURE__*/Object.freeze({
+var selectors$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   syncGroupStore: syncGroupStore,
   getSynchronizationGroupState: getSynchronizationGroupState,
@@ -29568,7 +29528,7 @@ var getTime = createSelector(getSyncSourceBySourceId, function (store) {
   return store && store.payloadByType && store.payloadByType[SYNCGROUPS_TYPE_SETTIME] ? store.payloadByType[SYNCGROUPS_TYPE_SETTIME].value : null;
 });
 
-var selectors$5 = /*#__PURE__*/Object.freeze({
+var selectors$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getSynchronizationGroupStore: getSynchronizationGroupStore,
   getTime: getTime
@@ -29591,7 +29551,7 @@ var selectors$5 = /*#__PURE__*/Object.freeze({
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 
-var types$3 = /*#__PURE__*/Object.freeze({
+var types$1 = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
@@ -30343,7 +30303,7 @@ var getDockedLayerManagerSize = createSelector(getMapById, function (store) {
   return store ? store.dockedLayerManagerSize : 'sizeSmall';
 });
 
-var selectors$4 = /*#__PURE__*/Object.freeze({
+var selectors$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getMapById: getMapById,
   getAllMapIds: getAllMapIds,
@@ -30513,12 +30473,12 @@ var mapUtils = Object.assign(Object.assign({}, utils$3), {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var initialState$5 = {
+var initialState$3 = {
   byId: {},
   allIds: []
 };
-var slice$5 = createSlice({
-  initialState: initialState$5,
+var slice$3 = createSlice({
+  initialState: initialState$3,
   name: 'serviceReducer',
   reducers: {
     serviceSetLayers: function serviceSetLayers(draft, action) {
@@ -30547,8 +30507,8 @@ var slice$5 = createSlice({
     action) {}
   }
 });
-var reducer$5 = slice$5.reducer;
-var serviceActions = slice$5.actions;
+var reducer$3 = slice$3.reducer;
+var serviceActions = slice$3.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -30650,7 +30610,7 @@ var getLayerStyles = createSelector(getLayerFromService, function (layer) {
   return (_a = layer === null || layer === void 0 ? void 0 : layer.styles) !== null && _a !== void 0 ? _a : [];
 }, selectorMemoizationOptions);
 
-var selectors$3 = /*#__PURE__*/Object.freeze({
+var selectors$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getServiceIds: getServiceIds,
   getServices: getServices,
@@ -30677,7 +30637,7 @@ var selectors$3 = /*#__PURE__*/Object.freeze({
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 
-var types$2 = /*#__PURE__*/Object.freeze({
+var types = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
@@ -30816,6 +30776,33 @@ var WmMultiDimensionLayer2 = new WMLayer({
     currentValue: '2017-01-01T00:25:00Z'
   }]
 });
+var WmMultiDimensionServices = {
+  serviceid_1: {
+    name: 'testservicedimensions',
+    serviceUrl: 'https://testservicedimensions',
+    layers: [{
+      name: 'netcdf_5dims',
+      title: 'netcdf_5dims',
+      leaf: true,
+      path: []
+    }]
+  },
+  serviceid_2: {
+    name: 'testservice',
+    serviceUrl: 'https://testservice',
+    layers: [{
+      name: 'RADNL_OPER_R___25PCPRR_L3_KNMI',
+      title: 'RADNL_OPER_R___25PCPRR_L3_KNMI',
+      leaf: true,
+      path: []
+    }, {
+      name: 'LAYER_WITHOUT_TIME',
+      title: 'LAYER_WITHOUT_TIME',
+      leaf: true,
+      path: []
+    }]
+  }
+};
 
 var storeTestSettings = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -30824,7 +30811,8 @@ var storeTestSettings = /*#__PURE__*/Object.freeze({
   layerWithoutTimeDimension: layerWithoutTimeDimension,
   styleListForRADNLOPERR25PCPRRL3KNMILayer: styleListForRADNLOPERR25PCPRRL3KNMILayer,
   defaultReduxServices: defaultReduxServices,
-  WmMultiDimensionLayer2: WmMultiDimensionLayer2
+  WmMultiDimensionLayer2: WmMultiDimensionLayer2,
+  WmMultiDimensionServices: WmMultiDimensionServices
 });
 
 function n$4(n,e,r){if(r||2===arguments.length)for(var t,u=0,o=e.length;o>u;u++)!t&&u in e||(t||(t=[].slice.call(e,0,u)),t[u]=e[u]);return n.concat(t||[].slice.call(e))}var e$4=function(n,e){return n===e},r$3=function(){return !1},t$6=function(t,u){void 0===t&&(t=e$4),void 0===u&&(u=r$3);var o=[],c=function(n){var e=o.findIndex((function(e){return t(e.value,n)}));return [o[e],e]};return {getCount:function(n){var e=c(n)[0];return (null==e?void 0:e.count)||0},getItems:function(){return n$4([],o,!0)},add:function(n){var e=c(n)[0];e&&!u(e.value)?e.count+=1:e||o.push({value:n,count:u(n)?1/0:1});},remove:function(n){var e=c(n),r=e[0],t=e[1];r&&!u(r.value)&&(r.count>1?r.count-=1:o.splice(t,1));}}},u$3=Array.isArray,o=function(n){var e=[],r=function(n){n.forEach((function(n){u$3(n)?r(n):e.push(n);}));};return u$3(n)&&r(n),e},c$2=["enhancers","middlewares","beforeAdd","afterAdd","beforeRemove","afterRemove"],a=function(e,r,u,i){void 0===i&&(i=[]);var a,f=i.reduce((function(n,e){return c$2.forEach((function(r){var t,u=e[r];(null==u?void 0:u.length)&&(t=n[r]).push.apply(t,u);})),n}),c$2.reduce((function(n,e){return n[e]=[],n}),{})),d={getItems:(a=t$6((function(n,e){return n.id===e.id}),(function(n){return !!n.keep}))).getItems,getCount:a.getCount,add:function(n){n.forEach((function(n){return a.add(n)}));},remove:function(n){n.forEach((function(n){return a.remove(n)}));}},v=function(n){var e,r=t$6(),u=[];return {mid:function(r){return e=r,function(e){return function(r){return n.apply(void 0,u.map((function(n){return n.act})))(e)(r)}}},add:function(n){n.forEach((function(n){r.getCount(n)||u.push({mid:n,act:n(e)}),r.add(n);}));},remove:function(n){n.forEach((function(n){1===r.getCount(n)&&(u=u.filter((function(e){return n!==e.mid}))),r.remove(n);}));}}}(u),l=function(e){var r,u=t$6(),o={},c=[];return {reducer:function(n,e){void 0===n&&(n={});var t=n;return c.length&&(t=Object.assign({},n),c.forEach((function(n){return delete t[n]})),c=[]),(Object.keys(o).length?r:function(){return {}})(t,e)},add:function(n){var t=[];return n.forEach((function(n){var e=n[0],r=n[1];u.getCount(e)||(o[e]=r,t.push(e)),u.add(e);})),t.length&&(r=e(o)),t},remove:function(t){return t.forEach((function(n){var e=n[0];1===u.getCount(e)&&(delete o[e],c.push(e)),u.remove(e);})),c.length&&(r=e(o)),n$4([],c,!0)}}}(r),g=e(l.reducer,v.mid,f.enhancers,f.middlewares),s=function(n,e,r,t){var u=n.filter((function(n){return n.id}));if(u.length){var o=[],c=[],i=[],a="add"===e;u.forEach((function(n){var e,r=d.getCount(n);(a&&!r||!a&&1===r)&&(o.push(n),(null===(e=n.middlewares)||void 0===e?void 0:e.length)&&c.push.apply(c,n.middlewares),n.reducersMap&&i.push.apply(i,Object.entries(n.reducersMap)));}));var s=o.length;s&&(f[r].forEach((function(n){return n(o,g)})),o.forEach((function(n){var e;return null===(e=n[r])||void 0===e?void 0:e.call(n,g)})),l[e](i).length&&g.dispatch({type:"@@eggs/reduce"}),v[e](c)),d[e](u),s&&(f[t].forEach((function(n){return n(o,g)})),o.forEach((function(n){var e;return null===(e=n[t])||void 0===e?void 0:e.call(n,g)})));}},h=function(n){return s(n,"remove","beforeRemove","afterRemove")};return Object.assign(g,{getEggs:d.getItems,getEggCount:d.getCount,addEggs:function(e){var r=o(e);return s(r,"add","beforeAdd","afterAdd"),function(){return h(n$4([],r,!0).reverse())}},removeEggs:function(n){h(o(n));}})};
@@ -33050,9 +33038,9 @@ function takeLatest$1(patternOrChannel, worker) {
   return fork.apply(void 0, [takeLatest, patternOrChannel, worker].concat(args));
 }
 
-var _marked$8 = /*#__PURE__*/_regeneratorRuntime().mark(updateAnimation),
-  _marked2$6 = /*#__PURE__*/_regeneratorRuntime().mark(handleBaseLayersSaga),
-  _marked3$2 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$7);
+var _marked$6 = /*#__PURE__*/_regeneratorRuntime().mark(updateAnimation),
+  _marked2$4 = /*#__PURE__*/_regeneratorRuntime().mark(handleBaseLayersSaga),
+  _marked3$2 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$5);
 // Expects start, end time as moment object and interval in minutes
 var generateTimeList = function generateTimeList(start, end, interval) {
   var timeList = [];
@@ -33221,7 +33209,7 @@ function updateAnimation(mapId, maxValue) {
       case "end":
         return _context4.stop();
     }
-  }, _marked$8);
+  }, _marked$6);
 }
 function setLayerDimensionsSaga(_ref4) {
   var payload = _ref4.payload;
@@ -33472,7 +33460,7 @@ function handleBaseLayersSaga(mapId, baseLayers) {
       case "end":
         return _context7.stop();
     }
-  }, _marked2$6);
+  }, _marked2$4);
 }
 function setMapPresetSaga(_ref6) {
   var payload = _ref6.payload;
@@ -33823,7 +33811,7 @@ function unregisterMapSaga(_ref7) {
     }, _callee7);
   })();
 }
-function rootSaga$7() {
+function rootSaga$5() {
   return _regeneratorRuntime().wrap(function rootSaga$(_context10) {
     while (1) switch (_context10.prev = _context10.next) {
       case 0:
@@ -33854,8 +33842,8 @@ function rootSaga$7() {
   }, _marked3$2);
 }
 
-var _marked$7 = /*#__PURE__*/_regeneratorRuntime().mark(fetchServiceSaga),
-  _marked2$5 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$6);
+var _marked$5 = /*#__PURE__*/_regeneratorRuntime().mark(fetchServiceSaga),
+  _marked2$3 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$4);
 function fetchServiceSaga(service) {
   var layers;
   return _regeneratorRuntime().wrap(function fetchServiceSaga$(_context) {
@@ -33880,7 +33868,7 @@ function fetchServiceSaga(service) {
       case "end":
         return _context.stop();
     }
-  }, _marked$7, null, [[0, 8]]);
+  }, _marked$5, null, [[0, 8]]);
 }
 function fetchInitialServicesSaga(_ref) {
   var payload = _ref.payload;
@@ -33901,7 +33889,7 @@ function fetchInitialServicesSaga(_ref) {
     }, _callee);
   })();
 }
-function rootSaga$6() {
+function rootSaga$4() {
   return _regeneratorRuntime().wrap(function rootSaga$(_context3) {
     while (1) switch (_context3.prev = _context3.next) {
       case 0:
@@ -33911,7 +33899,7 @@ function rootSaga$6() {
       case "end":
         return _context3.stop();
     }
-  }, _marked2$5);
+  }, _marked2$3);
 }
 
 // TODO: This fixes typecheck errors but maybe there is a better way to do that
@@ -33919,14 +33907,14 @@ i({
   extensions: [e$3()]
 });
 var mapStoreReducers = {
-  webmap: reducer$7,
-  services: reducer$5,
-  layers: reducer$9
+  webmap: reducer$5,
+  services: reducer$3,
+  layers: reducer$7
 };
 var mapStoreModuleConfig = {
   id: 'webmap-module',
   reducersMap: mapStoreReducers,
-  sagas: [rootSaga$7, rootSaga$6]
+  sagas: [rootSaga$5, rootSaga$4]
 };
 
 /* *
@@ -33947,618 +33935,6 @@ var mapStoreModuleConfig = {
  * */
 var mapStoreActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions), serviceActions);
 
-/* *
- * 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 FilterType;
-(function (FilterType) {
-  FilterType["Keyword"] = "keywords";
-  FilterType["Group"] = "groups";
-})(FilterType || (FilterType = {}));
-
-var types$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  get FilterType () { return FilterType; }
-});
-
-/* *
- * 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 getFilterId = function getFilterId(filterType, filterName) {
-  return "".concat(filterType, "-").concat(filterName);
-};
-var produceFilters = function produceFilters(filterNames, filterType, draft, layerSelectFilterAdapter) {
-  filterNames.forEach(function (filterName) {
-    var id = getFilterId(filterType, filterName);
-    if (!draft.filters.filters.entities[id]) {
-      // If this filter doesn't exit yet, add it
-      layerSelectFilterAdapter.addOne(draft.filters.filters, {
-        id: id,
-        name: filterName,
-        amount: 1,
-        amountVisible: 1,
-        checked: true,
-        type: filterType
-      });
-    } else {
-      // If it exists already, up the amounts
-      draft.filters.filters.entities[id].amount += 1;
-      draft.filters.filters.entities[id].amountVisible += 1;
-    }
-  });
-};
-var filterLayersFromService = function filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString) {
-  var mapStoreService = services[serviceId];
-  if (!mapStoreService) {
-    return [];
-  }
-  if (searchString === '' && allFiltersActive) {
-    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 _a, _b, _c;
-      var searchLowercase = search.toLowerCase();
-      var layerFilterIds = layer.path.map(function (group) {
-        return "".concat(FilterType.Group, "-").concat(group);
-      }).concat(layer.keywords.map(function (keyword) {
-        return "".concat(FilterType.Keyword, "-").concat(keyword);
-      }));
-      var isFilterInLayer = (layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (id) {
-        return filterIds.includes(id);
-      })) || allFiltersActive;
-      var isSearchTextInLayerFilter = layerFilterIds === null || layerFilterIds === void 0 ? void 0 : layerFilterIds.some(function (filterId) {
-        return filterId.toLowerCase().includes(searchLowercase);
-      });
-      var isSearchTextInLayerName = (_a = layer.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLowercase);
-      var isSearchTextInLayerText = (_b = layer.title) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLowercase);
-      var isSearchTextInLayerAbstract = (_c = layer["abstract"]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLowercase);
-      var isSearchTextInServiceName = mapStoreService.name.toLowerCase().includes(searchLowercase);
-      var isSearchTextInLayer = isSearchTextInLayerName || isSearchTextInLayerText || isSearchTextInLayerAbstract || isSearchTextInLayerFilter || isSearchTextInServiceName;
-      return isFilterInLayer && isSearchTextInLayer;
-    });
-  }).filter(function (layer) {
-    return layer.leaf;
-  });
-};
-
-var layerSelectFilterAdapter = createEntityAdapter();
-var layerSelectActiveServicesAdapter = createEntityAdapter({
-  selectId: function selectId(service) {
-    return service.serviceId;
-  }
-});
-var initialServicePopupState = {
-  isOpen: false,
-  url: '',
-  serviceId: '',
-  variant: 'add'
-};
-var initialState$4 = {
-  filters: {
-    searchFilter: '',
-    activeServices: layerSelectActiveServicesAdapter.getInitialState(),
-    filters: layerSelectFilterAdapter.getInitialState()
-  },
-  allServicesEnabled: true,
-  activeLayerInfo: {
-    name: '',
-    title: '',
-    leaf: true,
-    path: [],
-    serviceName: ''
-  },
-  servicePopup: initialServicePopupState
-};
-var slice$4 = createSlice({
-  initialState: initialState$4,
-  name: DialogTypes.LayerSelect,
-  reducers: {
-    setSearchFilter: function setSearchFilter(draft, action) {
-      var filterText = action.payload.filterText;
-      draft.filters.searchFilter = filterText;
-    },
-    closeServicePopupOpen: function closeServicePopupOpen(draft) {
-      draft.servicePopup.isOpen = false;
-    },
-    toggleServicePopup: function toggleServicePopup(draft, action) {
-      var _action$payload = action.payload,
-        variant = _action$payload.variant,
-        isOpen = _action$payload.isOpen;
-      draft.servicePopup.isOpen = isOpen;
-      draft.servicePopup.url = action.payload.url ? action.payload.url : '';
-      draft.servicePopup.variant = variant;
-      draft.servicePopup.serviceId = action.payload.serviceId ? action.payload.serviceId : '';
-    },
-    layerSelectRemoveService: function layerSelectRemoveService(draft, action) {
-      var serviceId = action.payload.serviceId;
-      // 1. Find a service that is to be removed
-      var foundService = draft.filters.activeServices.entities[serviceId];
-      // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
-      foundService.filterIds.forEach(function (filterId) {
-        var foundObject = draft.filters.filters.entities[filterId];
-        if (foundObject && foundObject.amount) {
-          foundObject.amount -= 1;
-          foundObject.amountVisible -= 1;
-        }
-        if (foundObject && foundObject.amount === 0) {
-          delete draft.filters.filters.entities[filterId];
-          draft.filters.filters.ids = draft.filters.filters.ids.filter(function (serviceId) {
-            return serviceId !== filterId;
-          });
-        }
-      });
-      // Finally remove object from activeServices, so if the service is added again later on, new object and keywords will be re-added
-      layerSelectActiveServicesAdapter.removeOne(draft.filters.activeServices, serviceId);
-    },
-    enableActiveService: function enableActiveService(draft, action) {
-      var activeServicesById = draft.filters.activeServices.entities;
-      var activeServices = lodash.exports.compact(Object.values(activeServicesById));
-      var countPressedServices = activeServices.filter(function (service) {
-        return service.enabled;
-      }).length;
-      var isAllServicesGoingToBeEnabled = countPressedServices === activeServices.length - 1;
-      if (isAllServicesGoingToBeEnabled) {
-        slice$4.caseReducers.enableAllActiveServices(draft);
-        return;
-      }
-      var service = activeServicesById[action.payload.serviceId];
-      service.enabled = true;
-      var _iterator = _createForOfIteratorHelper(service.filterIds),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var keyword = _step.value;
-          draft.filters.filters.entities[keyword].amountVisible += 1;
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-    },
-    enableAllActiveServices: function enableAllActiveServices(draft) {
-      var activeServices = draft.filters.activeServices.entities;
-      var servicesToTurnOn = lodash.exports.compact(Object.values(activeServices)).filter(function (service) {
-        return !service.enabled;
-      });
-      var updates = servicesToTurnOn.map(function (service) {
-        return {
-          id: service.serviceId,
-          changes: {
-            enabled: true
-          }
-        };
-      });
-      layerSelectActiveServicesAdapter.updateMany(draft.filters.activeServices, updates);
-      var keywords = servicesToTurnOn.flatMap(function (service) {
-        var _a;
-        return (_a = service.filterIds) !== null && _a !== void 0 ? _a : [];
-      });
-      var _iterator2 = _createForOfIteratorHelper(keywords),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var keyword = _step2.value;
-          draft.filters.filters.entities[keyword].amountVisible += 1;
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-      draft.allServicesEnabled = true;
-    },
-    onlyThisServiceEnabled: function onlyThisServiceEnabled(draft, action) {
-      var activeServicesById = draft.filters.activeServices.entities;
-      var servicesToTurnOff = lodash.exports.compact(Object.values(activeServicesById)).filter(function (service) {
-        return service.serviceId !== action.payload.serviceId;
-      });
-      var updates = servicesToTurnOff.map(function (service) {
-        return {
-          id: service.serviceId,
-          changes: {
-            enabled: false
-          }
-        };
-      });
-      layerSelectActiveServicesAdapter.updateMany(draft.filters.activeServices, updates);
-      var keywords = servicesToTurnOff.flatMap(function (service) {
-        var _a;
-        return (_a = service.filterIds) !== null && _a !== void 0 ? _a : [];
-      });
-      var _iterator3 = _createForOfIteratorHelper(keywords),
-        _step3;
-      try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var keyword = _step3.value;
-          draft.filters.filters.entities[keyword].amountVisible -= 1;
-        }
-      } catch (err) {
-        _iterator3.e(err);
-      } finally {
-        _iterator3.f();
-      }
-      draft.allServicesEnabled = false;
-    },
-    disableActiveService: function disableActiveService(draft, action) {
-      var activeServicesById = draft.filters.activeServices.entities;
-      var countPressedServices = Object.values(activeServicesById).filter(function (service) {
-        return service === null || service === void 0 ? void 0 : service.enabled;
-      }).length;
-      var isAllServicesGoingToBeDisabled = countPressedServices === 1;
-      if (isAllServicesGoingToBeDisabled) {
-        slice$4.caseReducers.enableAllActiveServices(draft);
-        return;
-      }
-      var service = activeServicesById[action.payload.serviceId];
-      service.enabled = false;
-      var _iterator4 = _createForOfIteratorHelper(service.filterIds),
-        _step4;
-      try {
-        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          var keyword = _step4.value;
-          draft.filters.filters.entities[keyword].amountVisible -= 1;
-        }
-      } catch (err) {
-        _iterator4.e(err);
-      } finally {
-        _iterator4.f();
-      }
-    },
-    toggleFilter: function toggleFilter(draft, action) {
-      var filterIds = action.payload.filterIds;
-      filterIds.forEach(function (filterId) {
-        draft.filters.filters.entities[filterId].checked = !draft.filters.filters.entities[filterId].checked;
-      });
-    },
-    enableOnlyOneFilter: function enableOnlyOneFilter(draft, action) {
-      var filterId = action.payload.filterId;
-      draft.filters.filters.ids.forEach(function (filterId) {
-        draft.filters.filters.entities[filterId].checked = false;
-      });
-      draft.filters.filters.entities[filterId].checked = true;
-    },
-    setActiveLayerInfo: function setActiveLayerInfo(draft, action) {
-      var layer = action.payload.layer;
-      draft.activeLayerInfo = layer;
-    }
-  },
-  extraReducers: function extraReducers(builder) {
-    builder.addCase(serviceActions.serviceSetLayers, function (draft, action) {
-      var _a, _b;
-      var _action$payload2 = action.payload,
-        serviceId = _action$payload2.id,
-        serviceUrl = _action$payload2.serviceUrl,
-        serviceName = _action$payload2.name,
-        scope = _action$payload2.scope,
-        _abstract = _action$payload2["abstract"],
-        layers = _action$payload2.layers,
-        isUpdating = _action$payload2.isUpdating;
-      if (isUpdating) {
-        return;
-      }
-      var keywords = layers.reduce(function (keywords, layer) {
-        var _a;
-        if (layer.leaf) {
-          return keywords.concat((_a = layer.keywords) !== null && _a !== void 0 ? _a : []);
-        }
-        return keywords;
-      }, []);
-      var groups = layers.reduce(function (groups, layer) {
-        var _a;
-        if (layer.leaf) {
-          return groups.concat((_a = layer.path) !== null && _a !== void 0 ? _a : []);
-        }
-        return groups;
-      }, []);
-      if (!((_b = (_a = draft.filters.activeServices.entities[serviceId]) === null || _a === void 0 ? void 0 : _a.filterIds) === null || _b === void 0 ? void 0 : _b.length)) {
-        // If the service has no filters yet, add them
-        produceFilters(groups, FilterType.Group, draft, layerSelectFilterAdapter);
-        produceFilters(keywords, FilterType.Keyword, draft, layerSelectFilterAdapter);
-      }
-      var filterIds = groups.map(function (group) {
-        return getFilterId(FilterType.Group, group);
-      }).concat(keywords.map(function (keyword) {
-        return getFilterId(FilterType.Keyword, keyword);
-      }));
-      draft.filters.activeServices.entities[serviceId] = {
-        serviceId: serviceId,
-        enabled: draft.allServicesEnabled,
-        filterIds: filterIds,
-        scope: scope,
-        serviceName: serviceName,
-        serviceUrl: serviceUrl,
-        "abstract": _abstract,
-        isLoading: false
-      };
-      if (!draft.filters.activeServices.ids.includes(serviceId)) {
-        draft.filters.activeServices.ids.push(serviceId);
-      }
-    }).addCase(serviceActions.fetchInitialServices, function (draft, action) {
-      var services = action.payload.services;
-      services.forEach(function (service) {
-        var serviceId = service.id,
-          serviceName = service.name,
-          serviceUrl = service.serviceUrl,
-          _abstract2 = service["abstract"],
-          scope = service.scope;
-        draft.filters.activeServices.entities[serviceId] = {
-          serviceId: serviceId,
-          enabled: draft.allServicesEnabled,
-          filterIds: [],
-          scope: scope,
-          serviceName: serviceName,
-          serviceUrl: serviceUrl,
-          "abstract": _abstract2,
-          isLoading: true
-        };
-        if (!draft.filters.activeServices.ids.includes(serviceId)) {
-          draft.filters.activeServices.ids.push(serviceId);
-        }
-      });
-    });
-  }
-});
-var reducer$4 = slice$4.reducer;
-var layerSelectActions = slice$4.actions;
-
-/* *
- * 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 layerSelectStore = function layerSelectStore(store) {
-  return store && store.layerSelect ? store.layerSelect : null;
-};
-/**
- * Returns search filter string
- *
- * Example getSearchFilter(store);
- * @param {object} store store: object - store object
- * @returns {array} returnType: string
- */
-var getSearchFilter = createSelector(layerSelectStore, function (store) {
-  var _a;
-  return ((_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.searchFilter) || '';
-});
-/**
- * Returns active services array
- *
- * Example getActiveServices(store);
- * @param {object} store store: object - store object
- * @returns {ActiveServiceObjectEntities} returnType: ActiveServiceObjectEntitiesobject of active services
- */
-// cast to usable type - selectEntities returns Dictionary<ActiveServiceObject> which is not usable inside of the code
-var getActiveServices = function getActiveServices(store) {
-  return getActiveServicesDictionary(store);
-};
-var _layerSelectActiveSer = layerSelectActiveServicesAdapter.getSelectors(function (store) {
-    var _a, _b;
-    return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.activeServices) || {
-      entities: {},
-      ids: []
-    };
-  }),
-  getActiveServicesDictionary = _layerSelectActiveSer.selectEntities,
-  getActiveServiceById = _layerSelectActiveSer.selectById;
-var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
-  var _a, _b;
-  var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.ids.filter(function (serviceId) {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices) === null || _b === void 0 ? void 0 : _b.entities[serviceId]) === null || _c === void 0 ? void 0 : _c.enabled;
-  })) !== null && _b !== void 0 ? _b : [];
-  return enabledServices;
-}, selectorMemoizationOptions);
-/**
- * Returns all ids of checked keywords
- *
- * Example getCheckedKeywordIds(store);
- * @param {object} store store: object - store object
- * @returns {array} returnType: array of keyword ids that are checked
- */
-var getCheckedFilterIds = createSelector(layerSelectStore, function (store) {
-  var _a, _b, _c;
-  var checkedFilters = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.ids.filter(function (filterId) {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
-  })) !== null && _c !== void 0 ? _c : [];
-  return checkedFilters.map(function (filterId) {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.id;
-  });
-}, selectorMemoizationOptions);
-/**
- * Returns ids of all keywords
- *
- * Example getAllKeywordIds(store);
- * @param {object} store store: object - store object
- * @returns {array} returnType: array of all keyword ids
- */
-// cast to usable type - selectIds returns EntityId[] which is not usable inside of the code
-var getAllFilterIds = function getAllFilterIds(store) {
-  return getAllFilterIdsEntity(store);
-};
-var _layerSelectFilterAda = layerSelectFilterAdapter.getSelectors(function (store) {
-    var _a, _b;
-    return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
-      entities: {},
-      ids: []
-    };
-  }),
-  getAllFilterIdsEntity = _layerSelectFilterAda.selectIds;
-/**
- * Returns all filters
- *
- * Example getAllFilters(store);
- * @param {object} store store: object - store object
- * @returns {array} returnType: array of all filters
- */
-var _layerSelectFilterAda2 = layerSelectFilterAdapter.getSelectors(function (store) {
-    var _a, _b;
-    return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
-      entities: {},
-      ids: []
-    };
-  }),
-  getAllFilters = _layerSelectFilterAda2.selectAll;
-var isAllFiltersChecked = createSelector(layerSelectStore, function (store) {
-  var _a, _b;
-  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.ids.every(function (filterId) {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.entities[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
-  });
-});
-/**
- * Gets a KeywordObject by its id
- *
- * Example: keywordObject = getKeywordObjectById(store, 'keywordId')
- * @param {object} store object from which the keyword state will be extracted
- * @param {string} filterId Id of the keyword
- * @returns {object} object containing keyword information (id, amount, amountVisible, checked)
- */
-var _layerSelectFilterAda3 = layerSelectFilterAdapter.getSelectors(function (store) {
-    var _a, _b;
-    return ((_b = (_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.filters) || {
-      entities: {},
-      ids: []
-    };
-  }),
-  getFilterById = _layerSelectFilterAda3.selectById;
-var getActiveLayerInfo = createSelector(layerSelectStore, function (store) {
-  return store === null || store === void 0 ? void 0 : store.activeLayerInfo;
-});
-/**
- * Returns a filtered active layer object based on the given filter settings
- * Example: layerSelectSelectors.getFilteredLayers(store, filteredSettings);
- * @param {object} store store: object - object from which the service state will be extracted
- * @returns {array} returnType: ActiveLayerObject - an array of all filtered activelayers
- */
-var getFilteredLayers = createSelector([getEnabledServiceIds, getServices, getCheckedFilterIds, isAllFiltersChecked, getSearchFilter], function (enabledServiceIds, servicesStore, checkedFilterIds, allFiltersActive, searchFilter) {
-  return enabledServiceIds.reduce(function (layerList, serviceId) {
-    return layerList.concat(filterLayersFromService(serviceId, servicesStore, checkedFilterIds, allFiltersActive, searchFilter).map(function (layer) {
-      return Object.assign(Object.assign({}, layer), {
-        serviceName: serviceId
-      });
-    }));
-  }, []);
-}, selectorMemoizationOptions);
-/**
- * Returns service popup details
- *
- * Example getActiveServices(store, 'server-id');
- * @param {object} store store: object - store object
- * @returns {object} returnType: object of active service
- */
-var getServicePopupDetails = function getServicePopupDetails(store) {
-  var _a;
-  return ((_a = store === null || store === void 0 ? void 0 : store.layerSelect) === null || _a === void 0 ? void 0 : _a.servicePopup) || initialServicePopupState;
-};
-
-var selectors$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  getSearchFilter: getSearchFilter,
-  getActiveServices: getActiveServices,
-  getActiveServicesDictionary: getActiveServicesDictionary,
-  getActiveServiceById: getActiveServiceById,
-  getEnabledServiceIds: getEnabledServiceIds,
-  getCheckedFilterIds: getCheckedFilterIds,
-  getAllFilterIds: getAllFilterIds,
-  getAllFilters: getAllFilters,
-  isAllFiltersChecked: isAllFiltersChecked,
-  getFilterById: getFilterById,
-  getActiveLayerInfo: getActiveLayerInfo,
-  getFilteredLayers: getFilteredLayers,
-  getServicePopupDetails: getServicePopupDetails
-});
-
-/* *
- * 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 getUserAddedServices = function getUserAddedServices() {
-  try {
-    var storedString = window.localStorage.getItem('userAddedServices');
-    var parsedData = JSON.parse(storedString);
-    if (parsedData && _typeof$1(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), isNoIdService(service) ? _defineProperty$1({}, serviceUrl, Object.assign(Object.assign({}, service), {
-          scope: 'user'
-        })) : {});
-      }, {});
-    }
-  } catch (e) {
-    console.error('Unable to read services from localStorage: ', e);
-  }
-  return {};
-};
-var setUserAddedServices = function setUserAddedServices(services) {
-  try {
-    window.localStorage.setItem('userAddedServices', JSON.stringify(services));
-  } catch (e) {
-    console.error('Unable to write services to localStorage: ', e);
-  }
-};
-var isNoIdService = function isNoIdService(param) {
-  var serviceParam = param;
-  return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -34755,16 +34131,7 @@ var getMapBaseLayerActionsTargets = function getMapBaseLayerActionsTargets(state
   });
 };
 
-var _marked$6 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$5);
-var setBaseLayers = layerActions.setBaseLayers,
-  addLayer = layerActions.addLayer,
-  duplicateMapLayer = layerActions.duplicateMapLayer,
-  layerChangeDimension = layerActions.layerChangeDimension,
-  layerChangeEnabled = layerActions.layerChangeEnabled,
-  layerChangeName = layerActions.layerChangeName,
-  layerChangeOpacity = layerActions.layerChangeOpacity,
-  layerChangeStyle = layerActions.layerChangeStyle,
-  layerDelete = layerActions.layerDelete;
+var _marked$4 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$3);
 var setTimeValidatorRexexp = /^(19|20)\d\d-(0[1-9]|1[012])-([012]\d|3[01])T([01]\d|2[0-3]):([0-5]\d):([0-5]\d)Z$/;
 function setTimeSaga(_ref) {
   var payload = _ref.payload;
@@ -34911,7 +34278,7 @@ function duplicateMapLayerActionsSaga(_ref5) {
             break;
           }
           _context5.next = 10;
-          return put(setLayerActionSync(newPayload, targets, addLayer.type));
+          return put(setLayerActionSync(newPayload, targets, layerActions.addLayer.type));
         case 10:
         case "end":
           return _context5.stop();
@@ -35037,7 +34404,7 @@ function mapBaseLayerActionsSaga(_ref9) {
     }, _callee9);
   })();
 }
-function rootSaga$5() {
+function rootSaga$3() {
   return _regeneratorRuntime().wrap(function rootSaga$(_context10) {
     while (1) switch (_context10.prev = _context10.next) {
       case 0:
@@ -35048,28 +34415,28 @@ function rootSaga$5() {
         return takeLatest$1(setBbox.type, setBBoxSaga);
       case 4:
         _context10.next = 6;
-        return takeLatest$1(layerChangeName.type, layerActionsSaga);
+        return takeLatest$1(layerActions.layerChangeName.type, layerActionsSaga);
       case 6:
         _context10.next = 8;
-        return takeLatest$1(layerChangeEnabled.type, layerActionsSaga);
+        return takeLatest$1(layerActions.layerChangeEnabled.type, layerActionsSaga);
       case 8:
         _context10.next = 10;
-        return takeLatest$1(layerChangeOpacity.type, layerActionsSaga);
+        return takeLatest$1(layerActions.layerChangeOpacity.type, layerActionsSaga);
       case 10:
         _context10.next = 12;
-        return takeLatest$1(layerChangeDimension.type, layerActionsSaga);
+        return takeLatest$1(layerActions.layerChangeDimension.type, layerActionsSaga);
       case 12:
         _context10.next = 14;
-        return takeLatest$1(layerChangeStyle.type, layerActionsSaga);
+        return takeLatest$1(layerActions.layerChangeStyle.type, layerActionsSaga);
       case 14:
         _context10.next = 16;
-        return takeLatest$1(layerDelete.type, deleteLayerActionsSaga);
+        return takeLatest$1(layerActions.layerDelete.type, deleteLayerActionsSaga);
       case 16:
         _context10.next = 18;
-        return takeLatest$1(addLayer.type, addLayerActionsSaga);
+        return takeLatest$1(layerActions.addLayer.type, addLayerActionsSaga);
       case 18:
         _context10.next = 20;
-        return takeLatest$1(duplicateMapLayer.type, duplicateMapLayerActionsSaga);
+        return takeLatest$1(layerActions.duplicateMapLayer.type, duplicateMapLayerActionsSaga);
       case 20:
         _context10.next = 22;
         return takeLatest$1(mapActions.layerMoveLayer.type, moveLayerActionsSaga);
@@ -35078,208 +34445,14 @@ function rootSaga$5() {
         return takeLatest$1(mapActions.setAutoLayerId.type, setAutoLayerIdActionsSaga);
       case 24:
         _context10.next = 26;
-        return takeLatest$1(setBaseLayers.type, mapBaseLayerActionsSaga);
+        return takeLatest$1(layerActions.setBaseLayers.type, mapBaseLayerActionsSaga);
       case 26:
       case "end":
         return _context10.stop();
     }
-  }, _marked$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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
-var snackbarAdapter = createEntityAdapter();
-var initialState$3 = snackbarAdapter.getInitialState();
-var slice$3 = createSlice({
-  initialState: initialState$3,
-  name: 'snackbar',
-  reducers: {
-    // To open the snackbar call this action
-    openSnackbar: function openSnackbar(
-    // eslint-disable-next-line no-unused-vars
-    draft,
-    // eslint-disable-next-line no-unused-vars
-    action) {},
-    // triggerOpenSnackbarBySaga is triggered by the saga to open the snackbar after the current snackbars have all been closed
-    // DO NOT CALL THIS ACTION DIRECTLY!
-    triggerOpenSnackbarBySaga: function triggerOpenSnackbarBySaga(draft, action) {
-      var snackbarContent = action.payload.snackbarContent;
-      // Ensure we have an id before proceeding
-      if (snackbarContent.id === undefined) {
-        return;
-      }
-      snackbarAdapter.setOne(draft, snackbarContent);
-    },
-    closeSnackbar: function closeSnackbar(draft) {
-      snackbarAdapter.removeAll(draft);
-    }
-  }
-});
-var reducer$3 = slice$3.reducer;
-var snackbarActions = slice$3.actions;
-
-/* *
- * 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 getSnackbarStore = function getSnackbarStore(store) {
-  if (store && store.snackbar) {
-    return store.snackbar;
-  }
-  return null;
-};
-var _snackbarAdapter$getS = snackbarAdapter.getSelectors(function (state) {
-    var _a;
-    return (_a = state === null || state === void 0 ? void 0 : state.snackbar) !== null && _a !== void 0 ? _a : {
-      entities: {},
-      ids: []
-    };
-  }),
-  getCurrentSnackbarMessages = _snackbarAdapter$getS.selectAll;
-var getFirstSnackbarMessage = createSelector(getCurrentSnackbarMessages, function (currentMessages) {
-  return currentMessages.length > 0 ? currentMessages[0] : undefined;
-});
-
-var selectors$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  getSnackbarStore: getSnackbarStore,
-  getCurrentSnackbarMessages: getCurrentSnackbarMessages,
-  getFirstSnackbarMessage: getFirstSnackbarMessage
-});
-
-/* *
- * 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 types = /*#__PURE__*/Object.freeze({
-  __proto__: null
-});
-
-var _marked$5 = /*#__PURE__*/_regeneratorRuntime().mark(openSnackbarSaga),
-  _marked2$4 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$4);
-var hideTime = 4000;
-function openSnackbarSaga(capturedAction) {
-  var snackbarMessage, currentSnackbarMessages, id, currentSnackbarMessagesOpen;
-  return _regeneratorRuntime().wrap(function openSnackbarSaga$(_context) {
-    while (1) switch (_context.prev = _context.next) {
-      case 0:
-        snackbarMessage = capturedAction.payload.message;
-        _context.next = 3;
-        return select(getCurrentSnackbarMessages);
-      case 3:
-        currentSnackbarMessages = _context.sent;
-        if (!currentSnackbarMessages.length) {
-          _context.next = 7;
-          break;
-        }
-        _context.next = 7;
-        return put(snackbarActions.closeSnackbar());
-      case 7:
-        // Generate a unique id
-        id = "snackbar".concat(Date.now().toString());
-        _context.next = 10;
-        return put(snackbarActions.triggerOpenSnackbarBySaga({
-          snackbarContent: {
-            message: snackbarMessage,
-            id: id
-          }
-        }));
-      case 10:
-        _context.next = 12;
-        return delay(hideTime);
-      case 12:
-        _context.next = 14;
-        return select(getCurrentSnackbarMessages);
-      case 14:
-        currentSnackbarMessagesOpen = _context.sent;
-        if (!currentSnackbarMessagesOpen.length) {
-          _context.next = 18;
-          break;
-        }
-        _context.next = 18;
-        return put(snackbarActions.closeSnackbar());
-      case 18:
-      case "end":
-        return _context.stop();
-    }
-  }, _marked$5);
-}
-function rootSaga$4() {
-  return _regeneratorRuntime().wrap(function rootSaga$(_context2) {
-    while (1) switch (_context2.prev = _context2.next) {
-      case 0:
-        _context2.next = 2;
-        return takeLatest$1(snackbarActions.openSnackbar.type, openSnackbarSaga);
-      case 2:
-      case "end":
-        return _context2.stop();
-    }
-  }, _marked2$4);
+  }, _marked$4);
 }
 
-/* *
- * 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 snackbarModuleConfig = {
-  id: 'snackbar-module',
-  reducersMap: {
-    snackbar: reducer$3
-  },
-  sagas: [rootSaga$4]
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -35338,8 +34511,8 @@ var utils = /*#__PURE__*/Object.freeze({
   historyDict: historyDict
 });
 
-var _marked$4 = /*#__PURE__*/_regeneratorRuntime().mark(navigateToUrlSaga),
-  _marked2$3 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$3);
+var _marked$3 = /*#__PURE__*/_regeneratorRuntime().mark(navigateToUrlSaga),
+  _marked2$2 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$2);
 function navigateToUrlSaga(action) {
   var payload;
   return _regeneratorRuntime().wrap(function navigateToUrlSaga$(_context) {
@@ -35352,9 +34525,9 @@ function navigateToUrlSaga(action) {
       case "end":
         return _context.stop();
     }
-  }, _marked$4);
+  }, _marked$3);
 }
-function rootSaga$3() {
+function rootSaga$2() {
   return _regeneratorRuntime().wrap(function rootSaga$(_context2) {
     while (1) switch (_context2.prev = _context2.next) {
       case 0:
@@ -35364,7 +34537,7 @@ function rootSaga$3() {
       case "end":
         return _context2.stop();
     }
-  }, _marked2$3);
+  }, _marked2$2);
 }
 
 /* *
@@ -35388,7 +34561,7 @@ var routerModuleConfig = {
   reducersMap: {
     router: reducer$2
   },
-  sagas: [rootSaga$3]
+  sagas: [rootSaga$2]
 };
 
 /* *
@@ -35484,16 +34657,21 @@ var slice = createSlice({
     registerDrawTool: function registerDrawTool(draft, action) {
       var _action$payload = action.payload,
         drawToolId = _action$payload.drawToolId,
-        drawModes = _action$payload.drawModes,
+        _action$payload$defau = _action$payload.defaultDrawModes,
+        defaultDrawModes = _action$payload$defau === void 0 ? [] : _action$payload$defau,
         _action$payload$geoJS = _action$payload.geoJSONLayerId,
         geoJSONLayerId = _action$payload$geoJS === void 0 ? '' : _action$payload$geoJS,
+        geoJSONIntersectionLayerId = _action$payload.geoJSONIntersectionLayerId,
+        geoJSONIntersectionBoundsLayerId = _action$payload.geoJSONIntersectionBoundsLayerId,
         _action$payload$shoul = _action$payload.shouldAllowMultipleShapes,
         shouldAllowMultipleShapes = _action$payload$shoul === void 0 ? false : _action$payload$shoul;
       drawAdapter.addOne(draft, {
         drawToolId: drawToolId,
         geoJSONLayerId: geoJSONLayerId,
+        geoJSONIntersectionLayerId: geoJSONIntersectionLayerId,
+        geoJSONIntersectionBoundsLayerId: geoJSONIntersectionBoundsLayerId,
         activeDrawModeId: '',
-        drawModes: drawModes,
+        drawModes: defaultDrawModes,
         shouldAllowMultipleShapes: shouldAllowMultipleShapes
       });
     },
@@ -35621,6 +34799,12 @@ var _drawAdapter$getSelec = drawAdapter.getSelectors(function (state) {
   }),
   selectDrawToolById = _drawAdapter$getSelec.selectById,
   selectAllDrawingTools = _drawAdapter$getSelec.selectAll;
+var getActiveDrawToolId = createSelector(selectAllDrawingTools, function (drawtools) {
+  var activeDrawTool = drawtools === null || drawtools === void 0 ? void 0 : drawtools.find(function (drawtool) {
+    return drawtool.activeDrawModeId !== '';
+  });
+  return (activeDrawTool === null || activeDrawTool === void 0 ? void 0 : activeDrawTool.drawToolId) || '';
+});
 var getDrawModeById = createSelector(selectDrawToolById, function (_store, _drawToolId, drawModeId) {
   return drawModeId;
 }, function (draw, drawModeId) {
@@ -35634,26 +34818,40 @@ var getActiveDrawModeId = createSelector(selectDrawToolById, function (drawingTo
 var getDrawToolGeoJSONLayerId = createSelector(selectDrawToolById, function (drawingTool) {
   return (drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.geoJSONLayerId) || '';
 });
+var getGeoJSONIntersectionLayerId = createSelector(selectDrawToolById, function (drawingTool) {
+  return drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.geoJSONIntersectionLayerId;
+});
+var getGeoJSONIntersectionBoundsLayerId = createSelector(selectDrawToolById, function (drawingTool) {
+  return drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.geoJSONIntersectionBoundsLayerId;
+});
+var getShouldAllowMultipleShapes = createSelector(selectDrawToolById, function (drawingTool) {
+  return (drawingTool === null || drawingTool === void 0 ? void 0 : drawingTool.shouldAllowMultipleShapes) || false;
+});
 
 var selectors = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getDrawingtoolStore: getDrawingtoolStore,
   selectDrawToolById: selectDrawToolById,
   selectAllDrawingTools: selectAllDrawingTools,
+  getActiveDrawToolId: getActiveDrawToolId,
   getDrawModeById: getDrawModeById,
   getActiveDrawModeId: getActiveDrawModeId,
-  getDrawToolGeoJSONLayerId: getDrawToolGeoJSONLayerId
+  getDrawToolGeoJSONLayerId: getDrawToolGeoJSONLayerId,
+  getGeoJSONIntersectionLayerId: getGeoJSONIntersectionLayerId,
+  getGeoJSONIntersectionBoundsLayerId: getGeoJSONIntersectionBoundsLayerId,
+  getShouldAllowMultipleShapes: getShouldAllowMultipleShapes
 });
 
-var _marked$3 = /*#__PURE__*/_regeneratorRuntime().mark(drawingSaga);
+var _marked$2 = /*#__PURE__*/_regeneratorRuntime().mark(drawingSaga);
+var registerOrigin = 'drawings saga:registerDrawToolSaga';
 function registerDrawToolSaga(_ref) {
   var payload = _ref.payload;
   return /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var mapId, geoJSONLayerId, _payload$defaultGeoJS, defaultGeoJSON;
+    var mapId, geoJSONLayerId, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId, _payload$defaultGeoJS, defaultGeoJSON, _payload$defaultGeoJS2, defaultGeoJSONIntersection, defaultGeoJSONIntersectionBounds;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          mapId = payload.mapId, geoJSONLayerId = payload.geoJSONLayerId, _payload$defaultGeoJS = payload.defaultGeoJSON, defaultGeoJSON = _payload$defaultGeoJS === void 0 ? emptyGeoJSON : _payload$defaultGeoJS; // create for every drawTool a draw layer
+          mapId = payload.mapId, geoJSONLayerId = payload.geoJSONLayerId, geoJSONIntersectionLayerId = payload.geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId = payload.geoJSONIntersectionBoundsLayerId, _payload$defaultGeoJS = payload.defaultGeoJSON, defaultGeoJSON = _payload$defaultGeoJS === void 0 ? emptyGeoJSON : _payload$defaultGeoJS, _payload$defaultGeoJS2 = payload.defaultGeoJSONIntersection, defaultGeoJSONIntersection = _payload$defaultGeoJS2 === void 0 ? emptyGeoJSON : _payload$defaultGeoJS2, defaultGeoJSONIntersectionBounds = payload.defaultGeoJSONIntersectionBounds; // create for every drawTool a draw layer
           if (!(geoJSONLayerId && mapId)) {
             _context.next = 4;
             break;
@@ -35667,9 +34865,39 @@ function registerDrawToolSaga(_ref) {
               layerType: LayerType.featureLayer
             },
             layerId: geoJSONLayerId,
-            origin: 'drawings saga:registerDrawToolSaga'
+            origin: registerOrigin
           }));
         case 4:
+          if (!(geoJSONIntersectionLayerId && mapId)) {
+            _context.next = 7;
+            break;
+          }
+          _context.next = 7;
+          return put(mapStoreActions.addLayer({
+            mapId: mapId,
+            layer: {
+              geojson: defaultGeoJSONIntersection,
+              layerType: LayerType.featureLayer
+            },
+            layerId: geoJSONIntersectionLayerId,
+            origin: registerOrigin
+          }));
+        case 7:
+          if (!(geoJSONIntersectionBoundsLayerId && mapId)) {
+            _context.next = 10;
+            break;
+          }
+          _context.next = 10;
+          return put(mapStoreActions.addLayer({
+            mapId: mapId,
+            layer: {
+              geojson: defaultGeoJSONIntersectionBounds,
+              layerType: LayerType.featureLayer
+            },
+            layerId: geoJSONIntersectionBoundsLayerId,
+            origin: registerOrigin
+          }));
+        case 10:
         case "end":
           return _context.stop();
       }
@@ -35679,7 +34907,7 @@ function registerDrawToolSaga(_ref) {
 function changeDrawToolSaga(_ref2) {
   var payload = _ref2.payload;
   return /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    var _a, _b, _c, _d, drawModeId, drawToolId, _payload$shouldUpdate, shouldUpdateShape, drawingTool, shouldAllowMultipleShapes, newDrawMode, currentGeoJSONLayer, _ref3, currentGeoJSON, _ref3$selectedFeature, selectedFeatureIndex, currentSelectionType, newSelectionType, isNewToolSelected, shouldUpdateNewShape, geoJSONFeatureCollection, newGeoJSON;
+    var _a, _b, _c, _d, drawModeId, drawToolId, _payload$shouldUpdate, shouldUpdateShape, drawingTool, _drawingTool$shouldAl, shouldAllowMultipleShapes, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId, newDrawMode, currentGeoJSONLayer, _ref3, currentGeoJSON, _ref3$selectedFeature, selectedFeatureIndex, currentSelectionType, newSelectionType, isNewToolSelected, shouldUpdateNewShape, geoJSONFeatureCollection, newGeoJSON;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -35689,49 +34917,56 @@ function changeDrawToolSaga(_ref2) {
           return select(selectDrawToolById, drawToolId);
         case 4:
           drawingTool = _context2.sent;
-          shouldAllowMultipleShapes = drawingTool.shouldAllowMultipleShapes;
+          _drawingTool$shouldAl = drawingTool.shouldAllowMultipleShapes, shouldAllowMultipleShapes = _drawingTool$shouldAl === void 0 ? false : _drawingTool$shouldAl, geoJSONIntersectionLayerId = drawingTool.geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId = drawingTool.geoJSONIntersectionBoundsLayerId;
           _context2.next = 8;
           return select(getDrawModeById, drawToolId, drawModeId);
         case 8:
           newDrawMode = _context2.sent;
           if (!(newDrawMode.value === 'DELETE')) {
-            _context2.next = 15;
+            _context2.next = 18;
             break;
           }
           _context2.next = 12;
           return put(layerActions.layerChangeGeojson({
             layerId: drawingTool.geoJSONLayerId,
-            geojson: {
-              type: 'FeatureCollection',
-              features: []
-            }
+            geojson: emptyGeoJSON
           }));
         case 12:
-          _context2.next = 14;
+          if (!geoJSONIntersectionLayerId) {
+            _context2.next = 15;
+            break;
+          }
+          _context2.next = 15;
+          return put(layerActions.layerChangeGeojson({
+            layerId: geoJSONIntersectionLayerId,
+            geojson: emptyGeoJSON
+          }));
+        case 15:
+          _context2.next = 17;
           return put(layerActions.toggleFeatureMode({
             layerId: drawingTool.geoJSONLayerId,
             isInEditMode: false,
             drawMode: ''
           }));
-        case 14:
+        case 17:
           return _context2.abrupt("return");
-        case 15:
+        case 18:
           if (!(!drawingTool.activeDrawModeId && newDrawMode.isSelectable)) {
-            _context2.next = 19;
+            _context2.next = 22;
             break;
           }
-          _context2.next = 18;
+          _context2.next = 21;
           return put(layerActions.toggleFeatureMode({
             layerId: drawingTool.geoJSONLayerId,
             isInEditMode: false,
             drawMode: ''
           }));
-        case 18:
+        case 21:
           return _context2.abrupt("return");
-        case 19:
-          _context2.next = 21;
+        case 22:
+          _context2.next = 24;
           return select(getLayerById, drawingTool.geoJSONLayerId);
-        case 21:
+        case 24:
           currentGeoJSONLayer = _context2.sent;
           _ref3 = currentGeoJSONLayer || {}, currentGeoJSON = _ref3.geojson, _ref3$selectedFeature = _ref3.selectedFeatureIndex, selectedFeatureIndex = _ref3$selectedFeature === void 0 ? 0 : _ref3$selectedFeature;
           currentSelectionType = (_b = (_a = currentGeoJSON === null || currentGeoJSON === void 0 ? void 0 : currentGeoJSON.features[selectedFeatureIndex]) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.selectionType;
@@ -35739,7 +34974,7 @@ function changeDrawToolSaga(_ref2) {
           isNewToolSelected = currentSelectionType !== newSelectionType;
           shouldUpdateNewShape = !((_d = currentGeoJSON === null || currentGeoJSON === void 0 ? void 0 : currentGeoJSON.features) === null || _d === void 0 ? void 0 : _d.length) || shouldAllowMultipleShapes || isNewToolSelected; // don't change anything if same tool is selected again
           if (!(shouldUpdateNewShape && shouldUpdateShape)) {
-            _context2.next = 35;
+            _context2.next = 38;
             break;
           }
           geoJSONFeatureCollection = getFeatureCollection(newDrawMode.shape, shouldAllowMultipleShapes, currentGeoJSON);
@@ -35747,37 +34982,41 @@ function changeDrawToolSaga(_ref2) {
           if (shouldAllowMultipleShapes) {
             moveFeature(currentGeoJSON, newGeoJSON, selectedFeatureIndex, '');
           }
-          _context2.next = 33;
+          _context2.next = 36;
           return put(layerActions.setSelectedFeature({
             layerId: drawingTool.geoJSONLayerId,
             selectedFeatureIndex: newGeoJSON.features.length - 1
           }));
-        case 33:
-          _context2.next = 35;
-          return put(mapStoreActions.layerChangeGeojson({
+        case 36:
+          _context2.next = 38;
+          return put(layerActions.updateFeature(Object.assign(Object.assign({
             layerId: drawingTool.geoJSONLayerId,
             geojson: newGeoJSON
-          }));
-        case 35:
-          _context2.next = 37;
+          }, geoJSONIntersectionLayerId && {
+            geoJSONIntersectionLayerId: geoJSONIntersectionLayerId
+          }), geoJSONIntersectionBoundsLayerId && {
+            geoJSONIntersectionBoundsLayerId: geoJSONIntersectionBoundsLayerId
+          })));
+        case 38:
+          _context2.next = 40;
           return put(layerActions.toggleFeatureMode({
             layerId: drawingTool.geoJSONLayerId,
-            isInEditMode: true,
+            isInEditMode: newDrawMode.isSelectable,
             drawMode: newDrawMode.value
           }));
-        case 37:
-          _context2.next = 42;
+        case 40:
+          _context2.next = 45;
           break;
-        case 39:
-          _context2.prev = 39;
+        case 42:
+          _context2.prev = 42;
           _context2.t0 = _context2["catch"](0);
           // eslint-disable-next-line no-console
           console.log('error changeDrawToolSaga', _context2.t0);
-        case 42:
+        case 45:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[0, 39]]);
+    }, _callee2, null, [[0, 42]]);
   })();
 }
 function drawingSaga() {
@@ -35793,7 +35032,7 @@ function drawingSaga() {
       case "end":
         return _context3.stop();
     }
-  }, _marked$3);
+  }, _marked$2);
 }
 
 /* *
@@ -36059,6 +35298,56 @@ var testGeoJSON = {
     }
   }]
 };
+var webmapStateWithAnimationDelay = function webmapStateWithAnimationDelay(mapId, animationDelay) {
+  var webmap = createWebmapState(mapId);
+  // Add the dimensions to the map state
+  webmap.byId[mapId].animationDelay = animationDelay;
+  return webmap;
+};
+var mockStateMapWithAnimationDelayWithoutLayers = function mockStateMapWithAnimationDelayWithoutLayers(mapId) {
+  return {
+    webmap: webmapStateWithAnimationDelay(mapId, defaultAnimationDelayAtStart)
+  };
+};
+var webmapStateWithTimeSliderSpan = function webmapStateWithTimeSliderSpan(mapId, timeSliderSpan) {
+  var webmap = createWebmapState(mapId);
+  // Add the span to the map state
+  webmap.byId[mapId].timeSliderSpan = timeSliderSpan;
+  return webmap;
+};
+var mockStateMapWithTimeSliderSpanWithoutLayers = function mockStateMapWithTimeSliderSpanWithoutLayers(mapId, timeSliderSpan) {
+  return {
+    webmap: webmapStateWithTimeSliderSpan(mapId, timeSliderSpan)
+  };
+};
+var mockStateMapWithDimensions = function mockStateMapWithDimensions(layer, mapId) {
+  return {
+    webmap: webmapStateWithAddedLayer(layer.layerType, layer.id, mapId, layer.dimensions),
+    services: {
+      byId: WmMultiDimensionServices,
+      allIds: ['serviceid_1', 'serviceid_2']
+    },
+    layers: createLayersState(layer.id, {
+      name: layer.name,
+      layerType: layer.layerType,
+      mapId: mapId,
+      service: layer.service,
+      dimensions: layer.dimensions,
+      enabled: (layer === null || layer === void 0 ? void 0 : layer.enabled) !== undefined ? layer.enabled : true
+    })
+  };
+};
+var webmapStateWithTimeStep = function webmapStateWithTimeStep(mapId, timeStep) {
+  var webmap = createWebmapState(mapId);
+  // Add the timeStep to the map state
+  webmap.byId[mapId].timeStep = timeStep;
+  return webmap;
+};
+var mockStateMapWithTimeStepWithoutLayers = function mockStateMapWithTimeStepWithoutLayers(mapId, timeStep) {
+  return {
+    webmap: webmapStateWithTimeStep(mapId, timeStep)
+  };
+};
 
 var storeTestUtils = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -36069,12 +35358,16 @@ var storeTestUtils = /*#__PURE__*/Object.freeze({
   webmapStateWithAddedLayer: webmapStateWithAddedLayer,
   mockStateMapWithLayer: mockStateMapWithLayer,
   mockStateMapWithMultipleLayers: mockStateMapWithMultipleLayers,
-  testGeoJSON: testGeoJSON
+  testGeoJSON: testGeoJSON,
+  mockStateMapWithAnimationDelayWithoutLayers: mockStateMapWithAnimationDelayWithoutLayers,
+  mockStateMapWithTimeSliderSpanWithoutLayers: mockStateMapWithTimeSliderSpanWithoutLayers,
+  mockStateMapWithDimensions: mockStateMapWithDimensions,
+  mockStateMapWithTimeStepWithoutLayers: mockStateMapWithTimeStepWithoutLayers
 });
 
-var _marked$2 = /*#__PURE__*/_regeneratorRuntime().mark(updateSourceValueWhenLinkingComponentToGroupSaga),
-  _marked2$2 = /*#__PURE__*/_regeneratorRuntime().mark(updateViewStateSaga),
-  _marked3$1 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$2);
+var _marked$1 = /*#__PURE__*/_regeneratorRuntime().mark(updateSourceValueWhenLinkingComponentToGroupSaga),
+  _marked2$1 = /*#__PURE__*/_regeneratorRuntime().mark(updateViewStateSaga),
+  _marked3$1 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$1);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
   return _regeneratorRuntime().wrap(function updateSourceValueWhenLinkingComponentToGroupSaga$(_context) {
@@ -36126,7 +35419,7 @@ function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdat
       case "end":
         return _context.stop();
     }
-  }, _marked$2);
+  }, _marked$1);
 }
 function addGroupTargetSaga(_ref) {
   var payload = _ref.payload;
@@ -36187,9 +35480,9 @@ function updateViewStateSaga() {
       case "end":
         return _context4.stop();
     }
-  }, _marked2$2);
+  }, _marked2$1);
 }
-function rootSaga$2() {
+function rootSaga$1() {
   return _regeneratorRuntime().wrap(function rootSaga$(_context5) {
     while (1) switch (_context5.prev = _context5.next) {
       case 0:
@@ -36229,187 +35522,9 @@ function rootSaga$2() {
 var synchronizationGroupConfig = {
   id: 'syncronizationGroupStore-module',
   reducersMap: {
-    syncronizationGroupStore: reducer$6
-  },
-  sagas: [rootSaga$5, rootSaga$2]
-};
-
-var _marked$1 = /*#__PURE__*/_regeneratorRuntime().mark(layerSelectRemoveServiceSaga),
-  _marked2$1 = /*#__PURE__*/_regeneratorRuntime().mark(rootSaga$1);
-function layerSelectCloseInfoDialogSaga(_ref) {
-  var type = _ref.type,
-    payload = _ref.payload;
-  return /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var togglePayload, activeMapIdPayload, isLayerInfoDialogOpen, _isLayerInfoDialogOpen, filteredLayers, dialogInfo;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.t0 = type;
-          _context.next = _context.t0 === uiActions.setToggleOpenDialog.type ? 3 : _context.t0 === uiActions.setActiveMapIdForDialog.type ? 8 : 17;
-          break;
-        case 3:
-          togglePayload = payload;
-          if (!(!togglePayload.setOpen && togglePayload.type === DialogTypes.LayerSelect)) {
-            _context.next = 7;
-            break;
-          }
-          _context.next = 7;
-          return put(uiActions.setToggleOpenDialog({
-            type: DialogTypes.LayerInfo,
-            setOpen: false
-          }));
-        case 7:
-          return _context.abrupt("break", 30);
-        case 8:
-          activeMapIdPayload = payload;
-          if (activeMapIdPayload.setOpen) {
-            _context.next = 16;
-            break;
-          }
-          _context.next = 12;
-          return select(getisDialogOpen, DialogTypes.LayerInfo);
-        case 12:
-          isLayerInfoDialogOpen = _context.sent;
-          if (!isLayerInfoDialogOpen) {
-            _context.next = 16;
-            break;
-          }
-          _context.next = 16;
-          return put(uiActions.setToggleOpenDialog({
-            type: DialogTypes.LayerInfo,
-            setOpen: false
-          }));
-        case 16:
-          return _context.abrupt("break", 30);
-        case 17:
-          _context.next = 19;
-          return select(getisDialogOpen, DialogTypes.LayerInfo);
-        case 19:
-          _isLayerInfoDialogOpen = _context.sent;
-          if (!_isLayerInfoDialogOpen) {
-            _context.next = 30;
-            break;
-          }
-          _context.next = 23;
-          return select(getFilteredLayers);
-        case 23:
-          filteredLayers = _context.sent;
-          _context.next = 26;
-          return select(getActiveLayerInfo);
-        case 26:
-          dialogInfo = _context.sent;
-          if (filteredLayers.map(function (layer) {
-            return layer.title;
-          }).includes(dialogInfo.title)) {
-            _context.next = 30;
-            break;
-          }
-          _context.next = 30;
-          return put(uiActions.setToggleOpenDialog({
-            type: DialogTypes.LayerInfo,
-            setOpen: false
-          }));
-        case 30:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })();
-}
-function layerSelectRemoveServiceSaga(capturedAction) {
-  var removedService, serviceId, serviceUrl, results, services, servicesEnabled;
-  return _regeneratorRuntime().wrap(function layerSelectRemoveServiceSaga$(_context2) {
-    while (1) switch (_context2.prev = _context2.next) {
-      case 0:
-        removedService = capturedAction.payload;
-        serviceId = removedService.serviceId, serviceUrl = removedService.serviceUrl;
-        _context2.next = 4;
-        return select(getActiveServices);
-      case 4:
-        results = _context2.sent;
-        services = results;
-        servicesEnabled = Object.values(services).find(function (service) {
-          return service === null || service === void 0 ? void 0 : service.enabled;
-        });
-        if (!(servicesEnabled === undefined)) {
-          _context2.next = 10;
-          break;
-        }
-        _context2.next = 10;
-        return all(Object.entries(services).map(function (_ref2) {
-          var _ref3 = _slicedToArray(_ref2, 1),
-            serviceId = _ref3[0];
-          return put(layerSelectActions.enableActiveService({
-            serviceId: serviceId
-          }));
-        }));
-      case 10:
-        _context2.next = 12;
-        return put(serviceActions.mapStoreRemoveService({
-          id: serviceId,
-          serviceUrl: serviceUrl
-        }));
-      case 12:
-      case "end":
-        return _context2.stop();
-    }
-  }, _marked$1);
-}
-function addServiceToLocalStorageSaga(_ref4) {
-  var payload = _ref4.payload;
-  var scope = payload.scope,
-    name = payload.name,
-    serviceUrl = payload.serviceUrl,
-    _abstract = payload["abstract"];
-  if (!isUserAddedService(scope)) {
-    return;
-  }
-  var localStorageServices = getUserAddedServices();
-  setUserAddedServices(Object.assign(Object.assign({}, localStorageServices), _defineProperty$1({}, serviceUrl, {
-    name: name,
-    url: serviceUrl,
-    "abstract": _abstract
-  })));
-}
-function removeServiceFromLocalStorageSaga(_ref5) {
-  var payload = _ref5.payload;
-  var serviceUrl = payload.serviceUrl;
-  var localStorageServices = getUserAddedServices();
-  if (!localStorageServices[serviceUrl]) {
-    return;
-  }
-  var updatedServices = Object.assign({}, localStorageServices);
-  delete updatedServices[serviceUrl];
-  setUserAddedServices(updatedServices);
-}
-function rootSaga$1() {
-  return _regeneratorRuntime().wrap(function rootSaga$(_context3) {
-    while (1) switch (_context3.prev = _context3.next) {
-      case 0:
-        _context3.next = 2;
-        return takeEvery$1(layerSelectActions.layerSelectRemoveService.type, layerSelectRemoveServiceSaga);
-      case 2:
-        _context3.next = 4;
-        return takeEvery$1(serviceActions.serviceSetLayers.type, addServiceToLocalStorageSaga);
-      case 4:
-        _context3.next = 6;
-        return takeEvery$1(serviceActions.mapStoreRemoveService.type, removeServiceFromLocalStorageSaga);
-      case 6:
-        _context3.next = 8;
-        return takeEvery$1([uiActions.setToggleOpenDialog.type, uiActions.setActiveMapIdForDialog.type, layerSelectActions.disableActiveService.type, layerSelectActions.toggleFilter.type, layerSelectActions.setSearchFilter.type], layerSelectCloseInfoDialogSaga);
-      case 8:
-      case "end":
-        return _context3.stop();
-    }
-  }, _marked2$1);
-}
-
-var layerSelectConfig = {
-  id: 'layerSelect-module',
-  reducersMap: {
-    layerSelect: reducer$4
+    syncronizationGroupStore: reducer$4
   },
-  sagas: [rootSaga$1]
+  sagas: [rootSaga$3, rootSaga$1]
 };
 
 var _marked = /*#__PURE__*/_regeneratorRuntime().mark(registerMapUISaga),
@@ -36522,7 +35637,7 @@ function rootSaga() {
 var uiModuleConfig = {
   id: 'ui-module',
   reducersMap: {
-    ui: reducer$8
+    ui: reducer$6
   },
   sagas: [rootSaga]
 };
@@ -36543,7 +35658,7 @@ var uiModuleConfig = {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var coreModuleConfig = [mapStoreModuleConfig, synchronizationGroupConfig, uiModuleConfig, layerSelectConfig, snackbarModuleConfig, drawtoolModuleConfig];
+var coreModuleConfig = [mapStoreModuleConfig, synchronizationGroupConfig, uiModuleConfig, drawtoolModuleConfig];
 
 var shim = {exports: {}};
 
@@ -36805,6 +35920,8 @@ if (process.env.NODE_ENV === 'production') {
   shim.exports = useSyncExternalStoreShim_development;
 }
 
+var withSelector = {exports: {}};
+
 var withSelector_production_min = {};
 
 /**
@@ -36984,7 +36101,11 @@ if (
   })();
 }
 
-if (process.env.NODE_ENV === 'production') ;
+if (process.env.NODE_ENV === 'production') {
+  withSelector.exports = withSelector_production_min;
+} else {
+  withSelector.exports = withSelector_development;
+}
 
 var reactDom = {exports: {}};
 
@@ -67885,6 +67006,183 @@ function getContext() {
 
 const ReactReduxContext = /*#__PURE__*/getContext();
 
+/**
+ * Hook factory, which creates a `useReduxContext` hook bound to a given context. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useReduxContext` hook bound to the specified context.
+ */
+function createReduxContextHook(context = ReactReduxContext) {
+  return function useReduxContext() {
+    const contextValue = useContext(context);
+
+    if (process.env.NODE_ENV !== 'production' && !contextValue) {
+      throw new Error('could not find react-redux context value; please ensure the component is wrapped in a <Provider>');
+    }
+
+    return contextValue;
+  };
+}
+/**
+ * A hook to access the value of the `ReactReduxContext`. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @returns {any} the value of the `ReactReduxContext`
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useReduxContext } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const { store } = useReduxContext()
+ *   return <div>{store.getState()}</div>
+ * }
+ */
+
+const useReduxContext = /*#__PURE__*/createReduxContextHook();
+
+const notInitialized = () => {
+  throw new Error('uSES not initialized!');
+};
+
+let useSyncExternalStoreWithSelector = notInitialized;
+const initializeUseSelector = fn => {
+  useSyncExternalStoreWithSelector = fn;
+};
+
+const refEquality = (a, b) => a === b;
+/**
+ * Hook factory, which creates a `useSelector` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useSelector` hook bound to the specified context.
+ */
+
+
+function createSelectorHook(context = ReactReduxContext) {
+  const useReduxContext$1 = context === ReactReduxContext ? useReduxContext : createReduxContextHook(context);
+  return function useSelector(selector, equalityFnOrOptions = {}) {
+    const {
+      equalityFn = refEquality,
+      stabilityCheck = undefined,
+      noopCheck = undefined
+    } = typeof equalityFnOrOptions === 'function' ? {
+      equalityFn: equalityFnOrOptions
+    } : equalityFnOrOptions;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!selector) {
+        throw new Error(`You must pass a selector to useSelector`);
+      }
+
+      if (typeof selector !== 'function') {
+        throw new Error(`You must pass a function as a selector to useSelector`);
+      }
+
+      if (typeof equalityFn !== 'function') {
+        throw new Error(`You must pass a function as an equality function to useSelector`);
+      }
+    }
+
+    const {
+      store,
+      subscription,
+      getServerState,
+      stabilityCheck: globalStabilityCheck,
+      noopCheck: globalNoopCheck
+    } = useReduxContext$1();
+    const firstRun = useRef(true);
+    const wrappedSelector = useCallback({
+      [selector.name](state) {
+        const selected = selector(state);
+
+        if (process.env.NODE_ENV !== 'production') {
+          const finalStabilityCheck = typeof stabilityCheck === 'undefined' ? globalStabilityCheck : stabilityCheck;
+
+          if (finalStabilityCheck === 'always' || finalStabilityCheck === 'once' && firstRun.current) {
+            const toCompare = selector(state);
+
+            if (!equalityFn(selected, toCompare)) {
+              let stack = undefined;
+
+              try {
+                throw new Error();
+              } catch (e) {
+                ({
+                  stack
+                } = e);
+              }
+
+              console.warn('Selector ' + (selector.name || 'unknown') + ' returned a different result when called with the same parameters. This can lead to unnecessary rerenders.' + '\nSelectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization', {
+                state,
+                selected,
+                selected2: toCompare,
+                stack
+              });
+            }
+          }
+
+          const finalNoopCheck = typeof noopCheck === 'undefined' ? globalNoopCheck : noopCheck;
+
+          if (finalNoopCheck === 'always' || finalNoopCheck === 'once' && firstRun.current) {
+            // @ts-ignore
+            if (selected === state) {
+              let stack = undefined;
+
+              try {
+                throw new Error();
+              } catch (e) {
+                ({
+                  stack
+                } = e);
+              }
+
+              console.warn('Selector ' + (selector.name || 'unknown') + ' returned the root state when called. This can lead to unnecessary rerenders.' + '\nSelectors that return the entire state are almost certainly a mistake, as they will cause a rerender whenever *anything* in state changes.', {
+                stack
+              });
+            }
+          }
+
+          if (firstRun.current) firstRun.current = false;
+        }
+
+        return selected;
+      }
+
+    }[selector.name], [selector, globalStabilityCheck, stabilityCheck]);
+    const selectedState = useSyncExternalStoreWithSelector(subscription.addNestedSub, store.getState, getServerState || store.getState, wrappedSelector, equalityFn);
+    useDebugValue(selectedState);
+    return selectedState;
+  };
+}
+/**
+ * A hook to access the redux store's state. This hook takes a selector function
+ * as an argument. The selector is called with the store state.
+ *
+ * This hook takes an optional equality comparison function as the second parameter
+ * that allows you to customize the way the selected state is compared to determine
+ * whether the component needs to be re-rendered.
+ *
+ * @param {Function} selector the selector function
+ * @param {Function=} equalityFn the function that will be used to determine equality
+ *
+ * @returns {any} the selected state
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useSelector } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const counter = useSelector(state => state.counter)
+ *   return <div>{counter}</div>
+ * }
+ */
+
+const useSelector = /*#__PURE__*/createSelectorHook();
+
 var reactIs$1 = {exports: {}};
 
 var reactIs_production_min$1 = {};
@@ -68563,7 +67861,85 @@ function Provider({
   }, children);
 }
 
+/**
+ * Hook factory, which creates a `useStore` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useStore` hook bound to the specified context.
+ */
+
+function createStoreHook(context = ReactReduxContext) {
+  const useReduxContext$1 = // @ts-ignore
+  context === ReactReduxContext ? useReduxContext : // @ts-ignore
+  createReduxContextHook(context);
+  return function useStore() {
+    const {
+      store
+    } = useReduxContext$1(); // @ts-ignore
+
+    return store;
+  };
+}
+/**
+ * A hook to access the redux store.
+ *
+ * @returns {any} the redux store
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useStore } from 'react-redux'
+ *
+ * export const ExampleComponent = () => {
+ *   const store = useStore()
+ *   return <div>{store.getState()}</div>
+ * }
+ */
+
+const useStore = /*#__PURE__*/createStoreHook();
+
+/**
+ * Hook factory, which creates a `useDispatch` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useDispatch` hook bound to the specified context.
+ */
+
+function createDispatchHook(context = ReactReduxContext) {
+  const useStore$1 = // @ts-ignore
+  context === ReactReduxContext ? useStore : createStoreHook(context);
+  return function useDispatch() {
+    const store = useStore$1(); // @ts-ignore
+
+    return store.dispatch;
+  };
+}
+/**
+ * A hook to access the redux `dispatch` function.
+ *
+ * @returns {any|function} redux store's `dispatch` function
+ *
+ * @example
+ *
+ * import React, { useCallback } from 'react'
+ * import { useDispatch } from 'react-redux'
+ *
+ * export const CounterComponent = ({ value }) => {
+ *   const dispatch = useDispatch()
+ *   const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
+ *   return (
+ *     <div>
+ *       <span>{value}</span>
+ *       <button onClick={increaseCounter}>Increase counter</button>
+ *     </div>
+ *   )
+ * }
+ */
+
+const useDispatch = /*#__PURE__*/createDispatchHook();
+
 // The primary entry point assumes we're working with standard ReactDOM/RN, but
+initializeUseSelector(withSelector.exports.useSyncExternalStoreWithSelector);
 // with standard React renderers (ReactDOM, React Native)
 
 setBatch(reactDom.exports.unstable_batchedUpdates);
@@ -68614,4 +67990,104 @@ var ThemeStoreProvider = function ThemeStoreProvider(_ref2) {
   }, children));
 };
 
-export { ThemeStoreProvider, appActions, appModuleConfig, coreModuleConfig, createStore, drawtoolActions, drawtoolModuleConfig, reducer as drawtoolReducer, selectors as drawtoolSelectors, filterLayers$1 as filterLayers, genericActions, rootSaga$5 as genericSaga, selectors$5 as genericSelectors, types$3 as genericTypes, getSingularDrawtoolDrawLayerId, getUserAddedServices, initialState$6 as initialState, layerActions, reducer$9 as layerReducer, layerSelectActions, initialState$4 as layerSelectInitialState, reducer$4 as layerSelectReducer, selectors$2 as layerSelectSelectors, types$1 as layerSelectTypes, selectors$8 as layerSelectors, types$7 as layerTypes, utils$2 as layerUtils, mapActions, constants$1 as mapConstants, enums as mapEnums, selectors$4 as mapSelectors, mapStoreActions, mapStoreModuleConfig, mapStoreReducers, types$6 as mapTypes, mapUtils, routerActions, routerModuleConfig, utils as routerUtils, serviceActions, selectors$3 as serviceSelectors, types$2 as serviceTypes, setUserAddedServices, snackbarActions, snackbarModuleConfig, reducer$3 as snackbarReducer, rootSaga$4 as snackbarSaga, selectors$1 as snackbarSelectors, types as snackbarTypes, storeTestSettings, storeTestUtils, utils$1 as storeUtils, constants as syncConstants, actions as syncGroupsActions, reducer$6 as syncGroupsReducer, selector as syncGroupsSelector, selectors$6 as syncGroupsSelectors, types$4 as syncGroupsTypes, types$4 as types, uiActions, uiModuleConfig, reducer$8 as uiReducer, selectors$7 as uiSelectors, types$5 as uiTypes, reducer$7 as webmapReducer };
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var useSetupDialog = function useSetupDialog(dialogType) {
+  var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
+  var dispatch = useDispatch();
+  var onCloseDialog = useCallback(function () {
+    dispatch(uiActions.setToggleOpenDialog({
+      type: dialogType,
+      setOpen: false
+    }));
+  }, [dialogType, dispatch]);
+  var mapId = useSelector(function (store) {
+    return getDialogMapId(store, dialogType);
+  });
+  var isMapPresent = useSelector(function (store) {
+    return getIsMapPresent(store, mapId);
+  });
+  // Check to ensure the currently active map is still present on screen - if not, close the dialog
+  useEffect(function () {
+    if (mapId !== '' && !isMapPresent) {
+      onCloseDialog();
+    }
+  }, [mapId, isMapPresent, onCloseDialog]);
+  var registerDialog = useCallback(function () {
+    dispatch(uiActions.registerDialog({
+      type: dialogType,
+      setOpen: false,
+      source: source
+    }));
+  }, [dialogType, dispatch, source]);
+  var unregisterDialog = useCallback(function () {
+    dispatch(uiActions.unregisterDialog({
+      type: dialogType
+    }));
+  }, [dialogType, dispatch]);
+  // Register this dialog in the store
+  useEffect(function () {
+    registerDialog();
+    return function () {
+      unregisterDialog();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var uiIsOrderedOnTop = useSelector(function (store) {
+    return getDialogIsOrderedOnTop(store, dialogType);
+  });
+  var setDialogOrder = useCallback(function () {
+    if (!uiIsOrderedOnTop) {
+      dispatch(uiActions.orderDialog({
+        type: dialogType
+      }));
+    }
+  }, [dialogType, dispatch, uiIsOrderedOnTop]);
+  var dialogOrder = useSelector(function (store) {
+    return getDialogOrder(store, dialogType);
+  });
+  var uiSource = useSelector(function (store) {
+    return getDialogSource(store, dialogType);
+  });
+  var isDialogOpen = useSelector(function (store) {
+    return getisDialogOpen(store, dialogType);
+  });
+  var uiIsLoading = useSelector(function (store) {
+    return getDialogIsLoading(store, dialogType);
+  });
+  var uiError = useSelector(function (store) {
+    return getDialogError(store, dialogType);
+  });
+  var setFocused = function setFocused(focused) {
+    dispatch(uiActions.setDialogFocused({
+      type: dialogType,
+      focused: focused
+    }));
+  };
+  return {
+    setDialogOrder: setDialogOrder,
+    dialogOrder: dialogOrder,
+    onCloseDialog: onCloseDialog,
+    uiSource: uiSource,
+    isDialogOpen: isDialogOpen,
+    uiIsLoading: uiIsLoading,
+    uiError: uiError,
+    setFocused: setFocused
+  };
+};
+
+export { ThemeStoreProvider, appActions, appModuleConfig, coreModuleConfig, createStore, drawtoolActions, drawtoolModuleConfig, reducer as drawtoolReducer, selectors as drawtoolSelectors, filterLayers$1 as filterLayers, genericActions, rootSaga$3 as genericSaga, selectors$3 as genericSelectors, types$1 as genericTypes, getSingularDrawtoolDrawLayerId, initialState$4 as initialState, layerActions, reducer$7 as layerReducer, selectors$6 as layerSelectors, types$5 as layerTypes, utils$2 as layerUtils, mapActions, constants$1 as mapConstants, enums as mapEnums, selectors$2 as mapSelectors, mapStoreActions, mapStoreModuleConfig, mapStoreReducers, types$4 as mapTypes, mapUtils, routerActions, routerModuleConfig, utils as routerUtils, selectorMemoizationOptions, serviceActions, selectors$1 as serviceSelectors, types as serviceTypes, storeTestSettings, storeTestUtils, utils$1 as storeUtils, constants as syncConstants, actions as syncGroupsActions, reducer$4 as syncGroupsReducer, selector as syncGroupsSelector, selectors$4 as syncGroupsSelectors, types$2 as syncGroupsTypes, types$2 as types, uiActions, uiModuleConfig, reducer$6 as uiReducer, selectors$5 as uiSelectors, types$3 as uiTypes, useSetupDialog, reducer$5 as webmapReducer };