@opengeoweb/core 4.1.0 → 4.2.0

package/index.esm.js

@@ -2,16 +2,21 @@ import { createAction, createSlice, createSelector, createEntityAdapter } from '
 import produce$1, { current, produce } from 'immer';
 import moment from 'moment';
 import * as React from 'react';
-import React__default, { Component, useRef, useState, useEffect } from 'react';
-import _, { isEqual, debounce, throttle, range } from 'lodash';
+import React__default, { Component, useRef, useState, useEffect, useCallback } from 'react';
+import _, { isEqual, debounce, groupBy, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, all, takeEvery, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { Tooltip, Paper, Box, Typography, Grid, InputLabel, IconButton, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, styled, Slider, Menu, Popover, useTheme, SliderThumb, Snackbar } from '@mui/material';
-import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
-import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Close, Search, Clear, ChevronLeft, ChevronRight, Edit, Delete, Home, Minus, Layers, Equalizer, Sort, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, FastForward, Options, SliderThumb as SliderThumb$1, List as List$1, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
+import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, calculateDialogSizeAndPosition, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
+import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Search, Clear, Close, Info, DimensionsTime, DimensionsRefTime, DimensionsElevation, DimensionsOther, Edit, Visibility, Delete, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, Speed, FastForward, Options, SliderThumb as SliderThumb$1, List as List$1, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { Sortable, ReactSortable } from 'react-sortablejs';
+import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } from '@opengeoweb/form-fields';
+import { useFormContext } from 'react-hook-form';
 import { FixedSizeList } from 'react-window';
+import Box$1 from '@mui/material/Box';
+import Typography$1 from '@mui/material/Typography';
+import Grid$1 from '@mui/material/Grid';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
 import proj4 from 'proj4';
@@ -1946,7 +1951,7 @@ var getLayerFromService = createSelector(function (store, serviceUrl) {
  * @returns {array} returnType: Style[] - array containing layer styles
  */
 
-var getLayerStyles = createSelector(getLayerFromService, function (layer) {
+var getLayerStyles$1 = createSelector(getLayerFromService, function (layer) {
   return layer && layer.styles ? layer.styles : [];
 }, selectorMemoizationOptions);
 /**
@@ -4363,10 +4368,18 @@ var initialState$1 = {
       byId: {},
       allIds: []
     },
-    keywords: {
+    filters: {
       byId: {},
       allIds: []
     }
+  },
+  allServicesEnabled: true,
+  activeLayerInfo: {
+    name: '',
+    text: '',
+    leaf: true,
+    path: [],
+    serviceName: ''
   }
 };
 var slice$1 = createSlice({
@@ -4377,86 +4390,84 @@ var slice$1 = createSlice({
       var filterText = action.payload.filterText;
       draft.filters.searchFilter = filterText;
     },
-    addKeywordsAndActiveServices: function addKeywordsAndActiveServices(draft, action) {
+    setAllServicesEnabled: function setAllServicesEnabled(draft, action) {
+      var allServicesEnabled = action.payload.allServicesEnabled;
+      draft.allServicesEnabled = allServicesEnabled;
+    },
+    addFiltersAndActiveServices: function addFiltersAndActiveServices(draft, action) {
       var _action$payload = action.payload,
           serviceId = _action$payload.serviceId,
           serviceName = _action$payload.serviceName,
           serviceUrl = _action$payload.serviceUrl,
+          _abstract = _action$payload["abstract"],
           keywords = _action$payload.keywords,
-          isUserAddedService = _action$payload.isUserAddedService;
+          isUserAddedService = _action$payload.isUserAddedService,
+          groups = _action$payload.groups;
 
       if (!draft.filters.activeServices.byId[serviceId]) {
         draft.filters.activeServices.byId[serviceId] = {};
 
-        var _iterator = _createForOfIteratorHelper(keywords),
-            _step;
+        var addFilters = function addFilters(filterNames, filterType) {
+          filterNames.forEach(function (filterName) {
+            var id = "".concat(filterType, "-").concat(filterName);
 
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var keyword = _step.value;
-
-            if (!draft.filters.keywords.byId[keyword]) {
-              draft.filters.keywords.byId[keyword] = {
-                id: keyword,
+            if (!draft.filters.filters.byId[id]) {
+              draft.filters.filters.byId[id] = {
+                id: id,
+                name: filterName,
                 amount: 1,
                 amountVisible: 1,
-                checked: true
+                checked: true,
+                type: filterType
               };
-              draft.filters.keywords.allIds.push(keyword);
+              draft.filters.filters.allIds.push(id);
             } else {
-              draft.filters.keywords.byId[keyword].amount += 1;
-              draft.filters.keywords.byId[keyword].amountVisible += 1;
+              draft.filters.filters.byId[id].amount += 1;
+              draft.filters.filters.byId[id].amountVisible += 1;
             }
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
+          });
+        };
+
+        addFilters(groups, 'group');
+        addFilters(keywords, 'keyword');
       }
 
-      draft.filters.activeServices.byId[serviceId].serviceName = serviceName;
-      draft.filters.activeServices.byId[serviceId].serviceUrl = serviceUrl;
-      draft.filters.activeServices.byId[serviceId].enabled = true;
-      draft.filters.activeServices.byId[serviceId].isUserAddedService = isUserAddedService;
-      draft.filters.activeServices.byId[serviceId].keywordsPerService = keywords;
+      var filterIds = groups.map(function (group) {
+        return "group-".concat(group);
+      }).concat(keywords.map(function (keyword) {
+        return "keyword-".concat(keyword);
+      }));
+      draft.filters.activeServices.byId[serviceId] = {
+        serviceId: serviceId,
+        enabled: draft.allServicesEnabled,
+        filterIds: filterIds,
+        isUserAddedService: isUserAddedService,
+        serviceName: serviceName,
+        serviceUrl: serviceUrl,
+        "abstract": _abstract
+      };
       if (!draft.filters.activeServices.allIds.includes(serviceId)) draft.filters.activeServices.allIds.push(serviceId);
     },
-    layerSelectServiceRemoved: function layerSelectServiceRemoved(draft, action) {
+    layerSelectRemoveService: function layerSelectRemoveService(draft, action) {
       var serviceId = action.payload.serviceId; // 1. Find a service that is to be removed
 
       var foundService = draft.filters.activeServices.byId[serviceId]; // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
 
-      var _iterator2 = _createForOfIteratorHelper(foundService.keywordsPerService),
-          _step2;
-
-      try {
-        var _loop = function _loop() {
-          var keyword = _step2.value;
-          var foundObject = draft.filters.keywords.byId[keyword];
-
-          if (foundObject && foundObject.amount) {
-            foundObject.amount -= 1;
-            foundObject.amountVisible -= 1;
-          }
-
-          if (foundObject && foundObject.amount === 0) {
-            delete draft.filters.keywords.byId[keyword];
-            draft.filters.keywords.allIds = draft.filters.keywords.allIds.filter(function (serviceId) {
-              return serviceId !== keyword;
-            });
-          }
-        };
+      foundService.filterIds.forEach(function (filterId) {
+        var foundObject = draft.filters.filters.byId[filterId];
 
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          _loop();
-        } // Finally remove object from activeServices, so if the service is added again later on, new object and keywords will be re-added
+        if (foundObject && foundObject.amount) {
+          foundObject.amount -= 1;
+          foundObject.amountVisible -= 1;
+        }
 
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
+        if (foundObject && foundObject.amount === 0) {
+          delete draft.filters.filters.byId[filterId];
+          draft.filters.filters.allIds = draft.filters.filters.allIds.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
 
       delete draft.filters.activeServices.byId[serviceId];
       draft.filters.activeServices.allIds = draft.filters.activeServices.allIds.filter(function (id) {
@@ -4466,66 +4477,59 @@ var slice$1 = createSlice({
     enableActiveService: function enableActiveService(draft, action) {
       var _action$payload2 = action.payload,
           serviceId = _action$payload2.serviceId,
-          keywords = _action$payload2.keywords;
+          keywords = _action$payload2.filters;
       draft.filters.activeServices.byId[serviceId].enabled = true;
 
-      var _iterator3 = _createForOfIteratorHelper(keywords),
-          _step3;
+      var _iterator = _createForOfIteratorHelper(keywords),
+          _step;
 
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var keyword = _step3.value;
-          draft.filters.keywords.byId[keyword].amountVisible += 1;
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var keyword = _step.value;
+          draft.filters.filters.byId[keyword].amountVisible += 1;
         }
       } catch (err) {
-        _iterator3.e(err);
+        _iterator.e(err);
       } finally {
-        _iterator3.f();
+        _iterator.f();
       }
     },
     disableActiveService: function disableActiveService(draft, action) {
       var _action$payload3 = action.payload,
           serviceId = _action$payload3.serviceId,
-          keywords = _action$payload3.keywords;
+          keywords = _action$payload3.filters;
       draft.filters.activeServices.byId[serviceId].enabled = false;
 
-      var _iterator4 = _createForOfIteratorHelper(keywords),
-          _step4;
+      var _iterator2 = _createForOfIteratorHelper(keywords),
+          _step2;
 
       try {
-        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          var keyword = _step4.value;
-          draft.filters.keywords.byId[keyword].amountVisible -= 1;
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var keyword = _step2.value;
+          draft.filters.filters.byId[keyword].amountVisible -= 1;
         }
       } catch (err) {
-        _iterator4.e(err);
+        _iterator2.e(err);
       } finally {
-        _iterator4.f();
+        _iterator2.f();
       }
     },
-    toggleKeywords: function toggleKeywords(draft, action) {
-      var keywords = action.payload.keywords;
-
-      var _iterator5 = _createForOfIteratorHelper(keywords),
-          _step5;
-
-      try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var keyword = _step5.value;
-          draft.filters.keywords.byId[keyword].checked = !draft.filters.keywords.byId[keyword].checked;
-        }
-      } catch (err) {
-        _iterator5.e(err);
-      } finally {
-        _iterator5.f();
-      }
+    toggleFilter: function toggleFilter(draft, action) {
+      var filterIds = action.payload.filterIds;
+      filterIds.forEach(function (filterId) {
+        draft.filters.filters.byId[filterId].checked = !draft.filters.filters.byId[filterId].checked;
+      });
     },
-    enableOnlyOneKeyword: function enableOnlyOneKeyword(draft, action) {
-      var keyword = action.payload.keyword;
-      draft.filters.keywords.allIds.forEach(function (serviceId) {
-        draft.filters.keywords.byId[serviceId].checked = false;
+    enableOnlyOneFilter: function enableOnlyOneFilter(draft, action) {
+      var filterId = action.payload.filterId;
+      draft.filters.filters.allIds.forEach(function (filterId) {
+        draft.filters.filters.byId[filterId].checked = false;
       });
-      draft.filters.keywords.byId[keyword].checked = true;
+      draft.filters.filters.byId[filterId].checked = true;
+    },
+    setActiveLayerInfo: function setActiveLayerInfo(draft, action) {
+      var layer = action.payload.layer;
+      draft.activeLayerInfo = layer;
     }
   }
 });
@@ -4577,6 +4581,21 @@ var getActiveServices = createSelector(layerSelectStore, function (store) {
 
   return store ? (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId : {};
 }, selectorMemoizationOptions);
+/**
+ * Returns active services by id
+ *
+ * Example getActiveServices(store, 'server-id');
+ * @param {object} store store: object - store object
+ * @param {serverId} serverId serverId: string - active server id
+ * @returns {object} returnType: object of active service
+ */
+
+var getActiveServiceById = function getActiveServiceById(store, serviceId) {
+  var _a, _b;
+
+  var enabledServices = ((_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.byId[serviceId]) || {};
+  return enabledServices;
+};
 /**
  * Returns all ids of enabled services
  *
@@ -4603,18 +4622,18 @@ var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
  * @returns {array} returnType: array of keyword ids that are checked
  */
 
-var getCheckedKeywordIds = createSelector(layerSelectStore, function (store) {
+var getCheckedFilterIds = createSelector(layerSelectStore, function (store) {
   var _a, _b;
 
-  var checkedKeywords = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.keywords.allIds.filter(function (keyword) {
-    var _a;
+  var checkedFilters = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.allIds.filter(function (filterId) {
+    var _a, _b;
 
-    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.keywords.byId[keyword].checked;
+    return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.byId[filterId]) === null || _b === void 0 ? void 0 : _b.checked;
   })) !== null && _b !== void 0 ? _b : [];
-  return checkedKeywords.map(function (keyword) {
+  return checkedFilters.map(function (filterId) {
     var _a;
 
-    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.keywords.byId[keyword].id;
+    return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.byId[filterId].id;
   });
 }, selectorMemoizationOptions);
 /**
@@ -4625,11 +4644,28 @@ var getCheckedKeywordIds = createSelector(layerSelectStore, function (store) {
  * @returns {array} returnType: array of all keyword ids
  */
 
-var getAllKeywordIds = createSelector(layerSelectStore, function (store) {
+var getAllFilterIds = 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.keywords.allIds) !== null && _b !== void 0 ? _b : [];
+  return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.filters.allIds) !== null && _b !== void 0 ? _b : [];
 }, selectorMemoizationOptions);
+/**
+ * Returns all filters
+ *
+ * Example getAllFilters(store);
+ * @param {object} store store: object - store object
+ * @returns {array} returnType: array of all filters
+ */
+
+var getAllFilters = createSelector(layerSelectStore, function (store) {
+  var filters = store === null || store === void 0 ? void 0 : store.filters.filters.byId;
+
+  if (filters) {
+    return Object.values(filters);
+  }
+
+  return [];
+});
 /**
  * Returns if all keywords are checked
  *
@@ -4638,29 +4674,26 @@ var getAllKeywordIds = createSelector(layerSelectStore, function (store) {
  * @returns {array} returnType: boolean if all keywords are checked
  */
 
-var isAllKeywordsChecked = createSelector(layerSelectStore, function (store) {
+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.keywords) === null || _b === void 0 ? void 0 : _b.allIds.every(function (keyword) {
-    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.allIds.every(function (filterId) {
+    var _a, _b, _c;
 
-    return (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.keywords) === null || _b === void 0 ? void 0 : _b.byId[keyword].checked;
+    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.byId[filterId]) === null || _c === void 0 ? void 0 : _c.checked;
   });
 });
 /**
- * Gets a KeywordObject by its id
+ * Returns the active layer info
  *
- * Example: keywordObject = getKeywordObjectById(store, 'keywordId')
- * @param {object} store object from which the keyword state will be extracted
- * @param {string} keywordId Id of the keyword
- * @returns {object} object containing keyword information (id, amount, amountVisible, checked)
+ * Example getActiveLayerInfo(store);
+ * @param {object} store store: object - store object
+ * @returns {object} returnType: ActiveLayerObject
  */
 
-var getKeywordObjectById = function getKeywordObjectById(store, keywordId) {
-  var _a, _b, _c, _d;
-
-  return (_d = (_c = (_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.keywords) === null || _c === void 0 ? void 0 : _c.byId[keywordId]) !== null && _d !== void 0 ? _d : {};
-};
+var getActiveLayerInfo = createSelector(layerSelectStore, function (store) {
+  return store === null || store === void 0 ? void 0 : store.activeLayerInfo;
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4736,8 +4769,15 @@ var getFirstSnackbarMessage = createSelector(getCurrentSnackbarMessages, functio
   return currentMessages.length > 0 ? currentMessages[0] : undefined;
 });
 
+var DialogTypes;
+
+(function (DialogTypes) {
+  DialogTypes["LayerInfo"] = "layerInfo";
+})(DialogTypes || (DialogTypes = {}));
+
 var types = /*#__PURE__*/Object.freeze({
-  __proto__: null
+  __proto__: null,
+  get DialogTypes () { return DialogTypes; }
 });
 
 /* *
@@ -5977,7 +6017,7 @@ var PlayButton = function PlayButton(_ref) {
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
 var animationIntervalDefault = 5;
-var connectRedux$6 = connect(function (store, props) {
+var connectRedux$5 = connect(function (store, props) {
   return {
     animationStartTime: getAnimationStartTime(store, props.mapId),
     animationEndTime: getAnimationEndTime(store, props.mapId),
@@ -5988,7 +6028,7 @@ var connectRedux$6 = connect(function (store, props) {
   mapStartAnimation: mapActions$1.mapStartAnimation,
   mapStopAnimation: mapActions$1.mapStopAnimation
 });
-var PlayButtonConnect = connectRedux$6(function (_ref) {
+var PlayButtonConnect = connectRedux$5(function (_ref) {
   var mapId = _ref.mapId,
       animationStartTime = _ref.animationStartTime,
       animationEndTime = _ref.animationEndTime,
@@ -8204,16 +8244,6 @@ var moduleConfig = {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
-  return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byUrl, preset) {
-    return Object.assign(Object.assign({}, byUrl), _defineProperty({}, preset.url, preset));
-  }, {})), userAddedServices));
-};
-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));
-};
-
 var getUserAddedServices = function getUserAddedServices() {
   try {
     var storedString = window.localStorage.getItem('userAddedServices');
@@ -8244,70 +8274,124 @@ var setUserAddedServices = function setUserAddedServices(services) {
   }
 };
 
+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));
+};
+
 var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
-    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
+    _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectRemoveServiceSaga),
     _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$1);
 function newServiceAddedSaga(capturedAction) {
-  var addedService, id, serviceUrl, name, isUserAddedService, keywords;
+  var addedService, id, serviceUrl, name, isUserAddedService, _abstract, keywords, groups;
+
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
           addedService = capturedAction.payload;
-          id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, isUserAddedService = addedService.isUserAddedService;
-          keywords = addedService.layers.reduce(function (keywordAccumulator, layer) {
-            return keywordAccumulator.concat(layer.path, layer.keywords);
+          id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, isUserAddedService = addedService.isUserAddedService, _abstract = addedService["abstract"];
+          keywords = addedService.layers.reduce(function (keywords, layer) {
+            var _a;
+
+            if (layer.leaf) {
+              return keywords.concat((_a = layer.keywords) !== null && _a !== void 0 ? _a : []);
+            }
+
+            return keywords;
+          }, []);
+          groups = addedService.layers.reduce(function (groups, layer) {
+            var _a;
+
+            if (layer.leaf) {
+              return groups.concat((_a = layer.path) !== null && _a !== void 0 ? _a : []);
+            }
+
+            return groups;
           }, []);
-          _context.next = 5;
-          return put(layerSelectActions.addKeywordsAndActiveServices({
+          _context.next = 6;
+          return put(layerSelectActions.addFiltersAndActiveServices({
             serviceId: id,
             serviceName: name,
             serviceUrl: serviceUrl,
             keywords: keywords,
-            isUserAddedService: isUserAddedService
+            isUserAddedService: isUserAddedService,
+            groups: groups,
+            "abstract": _abstract
           }));
 
-        case 5:
+        case 6:
         case "end":
           return _context.stop();
       }
     }
   }, _marked$1);
 }
-function layerSelectServiceRemovedSaga(capturedAction) {
-  var removedService, serviceId;
-  return regeneratorRuntime.wrap(function layerSelectServiceRemovedSaga$(_context2) {
+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.id;
+          serviceId = removedService.serviceId, serviceUrl = removedService.serviceUrl;
           _context2.next = 4;
-          return put(layerSelectActions.layerSelectServiceRemoved({
-            serviceId: serviceId
-          }));
+          return select(getActiveServices);
 
         case 4:
+          results = _context2.sent;
+          services = results;
+          servicesEnabled = Object.values(services).find(function (service) {
+            return service.enabled;
+          });
+
+          if (!(servicesEnabled === undefined)) {
+            _context2.next = 10;
+            break;
+          }
+
+          _context2.next = 10;
+          return all(Object.entries(services).map(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2),
+                serviceId = _ref2[0],
+                service = _ref2[1];
+
+            return put(layerSelectActions.enableActiveService({
+              serviceId: serviceId,
+              filters: service.filterIds
+            }));
+          }));
+
+        case 10:
+          _context2.next = 12;
+          return put(serviceActions.mapStoreRemoveService({
+            id: serviceId,
+            serviceUrl: serviceUrl
+          }));
+
+        case 12:
         case "end":
           return _context2.stop();
       }
     }
   }, _marked2$1);
 }
-function addServiceToLocalStorageSaga(_ref) {
-  var payload = _ref.payload;
+function addServiceToLocalStorageSaga(_ref3) {
+  var payload = _ref3.payload;
   var isUserAddedService = payload.isUserAddedService,
       name = payload.name,
-      serviceUrl = payload.serviceUrl;
+      serviceUrl = payload.serviceUrl,
+      _abstract2 = payload["abstract"];
   if (!isUserAddedService) return;
   var localStorageServices = getUserAddedServices();
   setUserAddedServices(Object.assign(Object.assign({}, localStorageServices), _defineProperty({}, serviceUrl, {
     name: name,
-    url: serviceUrl
+    url: serviceUrl,
+    "abstract": _abstract2
   })));
 }
-function removeServiceFromLocalStorageSaga(_ref2) {
-  var payload = _ref2.payload;
+function removeServiceFromLocalStorageSaga(_ref4) {
+  var payload = _ref4.payload;
   var serviceUrl = payload.serviceUrl;
   var localStorageServices = getUserAddedServices();
   if (!localStorageServices[serviceUrl]) return;
@@ -8325,7 +8409,7 @@ function rootSaga$1() {
 
         case 2:
           _context3.next = 4;
-          return takeEvery(serviceActions.mapStoreRemoveService.type, layerSelectServiceRemovedSaga);
+          return takeEvery(layerSelectActions.layerSelectRemoveService.type, layerSelectRemoveServiceSaga);
 
         case 4:
           _context3.next = 6;
@@ -8516,7 +8600,9 @@ var recurseNodes = function recurseNodes(nodesToRecur) {
     children: [],
     keywords: nodesToRecur.keywords || [],
     "abstract": nodesToRecur["abstract"] || '',
-    styles: nodesToRecur.styles || []
+    styles: nodesToRecur.styles || [],
+    dimensions: nodesToRecur.dimensions || [],
+    geographicBoundingBox: nodesToRecur.geographicBoundingBox || null
   };
 
   if (nodesToRecur.children) {
@@ -8774,7 +8860,7 @@ var WMSLayerTree = function WMSLayerTree(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$5 = connect(function (store, props) {
+var connectRedux$4 = connect(function (store, props) {
   return {
     loadedLayers: getMapLayers(store, props.mapId)
   };
@@ -8838,7 +8924,7 @@ var ConnectedTree = function ConnectedTree(_ref) {
   });
 };
 
-var WMSLayerTreeConnect = connectRedux$5(ConnectedTree);
+var WMSLayerTreeConnect = connectRedux$4(ConnectedTree);
 
 var WMSServerList = function WMSServerList(_ref) {
   var availableServices = _ref.availableServices,
@@ -9012,7 +9098,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var validateServiceUrl = function validateServiceUrl(url) {
+var validateServiceUrl$1 = function validateServiceUrl(url) {
   if (url === '' || url === null || typeof url === 'undefined') return false;
   var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
   if (!matcher.test(url)) return false;
@@ -9082,7 +9168,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       setServiceURL('');
       setUrlError('');
       setLoading(false); // Check if valid URL was passed
-    } else if (validateServiceUrl(serviceURL)) {
+    } else if (validateServiceUrl$1(serviceURL)) {
       // Check if service is WMS server
       getLayersFromService(serviceURL).then(function (layerTreeFromPromise) {
         // Shorten URL as a naming backup
@@ -9743,7 +9829,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var marks$1 = [{
+var marks$2 = [{
   value: 0,
   label: '0 %'
 }, {
@@ -9870,7 +9956,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
     step: 0.01,
     max: 1,
     min: 0,
-    marks: marks$1,
+    marks: marks$2,
     onChange: function onChange(event, newValue) {
       event.stopPropagation();
       onLayerChangeOpacity(newValue);
@@ -10428,7 +10514,7 @@ var RenderStylesConnect = function RenderStylesConnect(_ref) {
     return getLayerName(store, layerId);
   });
   var layerStyles = useSelector(function (store) {
-    return getLayerStyles(store, layerService, layerName);
+    return getLayerStyles$1(store, layerService, layerName);
   });
   var currentLayerStyle = useSelector(function (store) {
     return getLayerStyle(store, layerId);
@@ -11132,6 +11218,16 @@ var styles$2 = {
     boxSizing: 'border-box'
   }
 };
+var calculateStartSize = function calculateStartSize(minSize, prefSize, startPosition) {
+  var _calculateDialogSizeA = calculateDialogSizeAndPosition(),
+      calcWidth = _calculateDialogSizeA.width,
+      calcHeight = _calculateDialogSizeA.height;
+
+  return {
+    width: Math.max(minSize.width, Math.min(prefSize.width, calcWidth)),
+    height: Math.max(minSize.height, Math.min(prefSize.height, calcHeight - startPosition.top))
+  };
+};
 
 var LayerManager = function LayerManager(_ref) {
   var mapId = _ref.mapId,
@@ -11157,8 +11253,21 @@ var LayerManager = function LayerManager(_ref) {
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
       error = _ref.error;
+  var minSize = {
+    width: 300,
+    height: 126
+  };
+  var prefSize = {
+    width: 720,
+    height: 300
+  };
+  var startPosition = {
+    top: 96,
+    left: 50
+  };
+  var startSize = calculateStartSize(minSize, prefSize, startPosition);
 
-  var _React$useState = React.useState(LayerManagerWidth.lg),
+  var _React$useState = React.useState(widthToWidthClass(startSize.width)),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       layerManagerWidth = _React$useState2[0],
       setLayerManagerWidth = _React$useState2[1];
@@ -11170,16 +11279,10 @@ var LayerManager = function LayerManager(_ref) {
 
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: showTitle ? "Layer Manager ".concat(mapId) : 'Layer Manager',
-    startSize: {
-      width: 720,
-      height: 300
-    },
-    minWidth: 300,
-    minHeight: 126,
-    startPosition: {
-      top: 96,
-      left: 50
-    },
+    startSize: startSize,
+    minWidth: minSize.width,
+    minHeight: minSize.height,
+    startPosition: startPosition,
     isOpen: isOpen,
     onChangeSize: onChangeSize,
     onClose: onClose,
@@ -11274,42 +11377,141 @@ var KeywordFilterButtonConnect = function KeywordFilterButtonConnect(_ref) {
   }, /*#__PURE__*/React.createElement(Filter, null));
 };
 
-var style$1 = {
-  dialogTitle: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '16px 16px 20px 16px',
-    ' span': {
-      fontSize: '2.125rem'
+/* *
+ * 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 isURL = function isURL(string) {
+  return /^https?:\/\//.test(string);
+};
+
+var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
+  var localSearchString = _ref.localSearchString,
+      onClickClear = _ref.onClickClear,
+      setPopupIsOpen = _ref.setPopupIsOpen;
+
+  var ClearButton = function ClearButton() {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: "Clear",
+      placement: "top"
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      edge: "end",
+      onClick: function onClick() {
+        onClickClear();
+      },
+      size: "large"
+    }, /*#__PURE__*/React__default.createElement(Clear, null)));
+  };
+
+  if (isURL(localSearchString)) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginRight: '15px'
     }
-  },
-  container: function container(theme) {
-    return {
-      '& .MuiDialog-paper': {
-        backgroundColor: theme.palette.geowebColors.cards.cardContainer
-      }
-    };
-  },
-  closeBtn: function closeBtn(theme) {
-    return {
-      color: theme.palette.geowebColors.captions.captionDisabled.color,
-      marginTop: 'auto',
-      marginBottom: 'auto'
-    };
-  },
+  }, /*#__PURE__*/React__default.createElement(ClearButton, null)), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "tertiary",
+    onClick: function onClick() {
+      return setPopupIsOpen(true);
+    }
+  }, "Save"));
+  if (localSearchString) return /*#__PURE__*/React__default.createElement(ClearButton, null);
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Search",
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    edge: "end",
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(Search, null)));
+};
+
+/* *
+ * 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 VALIDATIONS_NAME_EXISTING = 'This name already exists. Choose another name.';
+var VALIDATIONS_SERVICE_EXISTING = 'URL already exists.';
+var VALIDATIONS_SERVICE_VALID_URL = 'Not a valid URL.';
+var VALIDATIONS_REQUEST_FAILED = 'Download failed. Check the URL.';
+var validateServiceName = function validateServiceName(value, services) {
+  var ownServiceName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var serviceName = value === null || value === void 0 ? void 0 : value.toLowerCase();
+  var foundName = Object.keys(services).find(function (serviceId) {
+    return services[serviceId].serviceName.toLowerCase() === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
+  });
+  return foundName === undefined ? true : VALIDATIONS_NAME_EXISTING;
+};
+
+var isValidUrl = function isValidUrl(url) {
+  if (url === '' || url === null || typeof url === 'undefined') {
+    return false;
+  }
+
+  var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
+
+  if (!matcher.test(url)) {
+    return false;
+  }
+
+  return true;
+};
+
+var validateServiceUrl = function validateServiceUrl(value, services) {
+  var serviceUrl = value; // validate valid url
+
+  var isServiceUrlValid = isValidUrl(serviceUrl);
+
+  if (!isServiceUrlValid) {
+    return VALIDATIONS_SERVICE_VALID_URL;
+  } // check url existing
+
+
+  var foundUrl = Object.keys(services).find(function (serviceId) {
+    return services[serviceId].serviceUrl === serviceUrl;
+  });
+
+  if (foundUrl) {
+    return VALIDATIONS_SERVICE_EXISTING;
+  }
+
+  return true;
+};
+
+var style$1 = {
   textField: {
-    width: '100%'
-  },
-  dialogContent: {
-    padding: '8px 16px'
-  },
-  footerContent: {
-    padding: '16px'
+    width: '100%',
+    marginBottom: 2
   }
 };
 var ADD_HEADING = 'Add a new service';
 var EDIT_HEADING = 'Edit service';
 var SAVE_HEADING = 'Save service';
+var COPY_URL_MESSAGE = 'Service URL copied to clipboard';
+var getSuccesMessage = function getSuccesMessage(serviceName) {
+  return "Service \"".concat(serviceName, "\" has been saved succesfully");
+};
 
 var getTitleForVariant = function getTitleForVariant(variant) {
   switch (variant) {
@@ -11319,109 +11521,130 @@ var getTitleForVariant = function getTitleForVariant(variant) {
     case 'edit':
       return EDIT_HEADING;
 
-    default:
+    case 'save':
       return SAVE_HEADING;
+
+    default:
+      return 'Service';
   }
 };
 
-var ServicePopup = function ServicePopup(_ref) {
-  var servicePopupVariant = _ref.servicePopupVariant,
-      _ref$hideBackdrop = _ref.hideBackdrop,
-      hideBackdrop = _ref$hideBackdrop === void 0 ? false : _ref$hideBackdrop,
-      isOpen = _ref.isOpen,
-      closePopup = _ref.closePopup,
-      serviceId = _ref.serviceId,
-      url = _ref.url,
-      services = _ref.services,
-      serviceSetLayers = _ref.serviceSetLayers;
+var fields = {
+  serviceUrl: {
+    name: 'serviceUrl',
+    label: 'This service refers to this URL'
+  },
+  serviceName: {
+    name: 'serviceName',
+    label: 'Service name'
+  },
+  serviceAbstracts: {
+    name: 'serviceAbstracts',
+    label: 'Abstracts'
+  }
+};
 
-  var _React$useState = React.useState(''),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      serviceName = _React$useState2[0],
-      setServiceName = _React$useState2[1];
+var InitialValidationsTrigger = function InitialValidationsTrigger(_ref) {
+  var trigger = _ref.trigger,
+      getValues = _ref.getValues,
+      onValidField = _ref.onValidField;
+  React.useEffect(function () {
+    var value = getValues(fields.serviceUrl.name);
 
-  var _React$useState3 = React.useState(''),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      serviceUrl = _React$useState4[0],
-      setServiceUrl = _React$useState4[1];
-
-  var _React$useState5 = React.useState(''),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      _abstract = _React$useState6[0],
-      setAbstract = _React$useState6[1];
-
-  var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      disableButton = _React$useState8[0],
-      setDisableButton = _React$useState8[1];
-
-  var _React$useState9 = React.useState(false),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      isLoading = _React$useState10[0],
-      setIsLoading = _React$useState10[1];
-
-  var _React$useState11 = React.useState(false),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      serviceNameHasError = _React$useState12[0],
-      setServiceNameHasError = _React$useState12[1];
+    if (value) {
+      trigger(fields.serviceUrl.name).then(function (isValid) {
+        return isValid && onValidField(value);
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  var _React$useState13 = React.useState(''),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      serviceNameHelperText = _React$useState14[0],
-      setServiceNameHelperText = _React$useState14[1];
+  }, []);
+  return null;
+};
 
-  var _React$useState15 = React.useState(false),
-      _React$useState16 = _slicedToArray(_React$useState15, 2),
-      serviceUrlHasError = _React$useState16[0],
-      setServiceUrlHasError = _React$useState16[1];
+var ServicePopup = function ServicePopup(_ref2) {
+  var servicePopupVariant = _ref2.servicePopupVariant,
+      _ref2$hideBackdrop = _ref2.hideBackdrop,
+      hideBackdrop = _ref2$hideBackdrop === void 0 ? false : _ref2$hideBackdrop,
+      isOpen = _ref2.isOpen,
+      closePopup = _ref2.closePopup,
+      services = _ref2.services,
+      serviceSetLayers = _ref2.serviceSetLayers,
+      serviceUrl = _ref2.serviceUrl,
+      serviceName = _ref2.serviceName,
+      serviceAbstracts = _ref2.serviceAbstracts,
+      _ref2$showSnackbar = _ref2.showSnackbar,
+      showSnackbar = _ref2$showSnackbar === void 0 ? function () {} : _ref2$showSnackbar;
+
+  var _useFormContext = useFormContext(),
+      reset = _useFormContext.reset,
+      errors = _useFormContext.formState.errors,
+      handleSubmit = _useFormContext.handleSubmit,
+      setError = _useFormContext.setError,
+      clearErrors = _useFormContext.clearErrors,
+      watch = _useFormContext.watch,
+      trigger = _useFormContext.trigger,
+      getValues = _useFormContext.getValues,
+      setValue = _useFormContext.setValue;
 
-  var _React$useState17 = React.useState(''),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      serviceUrlHelperText = _React$useState18[0],
-      setServiceUrlHelperText = _React$useState18[1];
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isLoading = _React$useState2[0],
+      setIsLoading = _React$useState2[1];
 
-  React.useEffect(function () {
-    var _a;
+  var fetchServiceData = function fetchServiceData(newServiceUrl) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var service;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setIsLoading(true);
+              _context.next = 4;
+              return getLayersFromService(newServiceUrl);
 
-    if (servicePopupVariant === 'edit') {
-      setServiceName(((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName) || '');
-      setServiceUrl(url || '');
-    }
+            case 4:
+              service = WMGetServiceFromStore(newServiceUrl);
+              setValue(fields.serviceName.name, service.title);
+              setValue(fields.serviceAbstracts.name, service["abstract"]);
+              setIsLoading(false);
+              _context.next = 14;
+              break;
 
-    if (servicePopupVariant === 'save') {
-      setServiceUrl(url || '');
-    }
-  }, [serviceId, services, url, servicePopupVariant, isOpen]);
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](0);
+              setIsLoading(false);
+              setError(fields.serviceUrl.name, {
+                message: VALIDATIONS_REQUEST_FAILED,
+                type: 'SYSTEM'
+              });
 
-  var validateServiceUrl = function validateServiceUrl(url) {
-    if (url === '' || url === null || typeof url === 'undefined') return false;
-    var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
-    if (!matcher.test(url)) return false;
-    return true;
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
   };
 
-  var addNewService = function addNewService() {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+  var addNewService = function addNewService(formValues) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
       var layers, serviceLayers, _iterator, _step, object, service;
 
-      return regeneratorRuntime.wrap(function _callee$(_context) {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
-              setServiceUrlHasError(false);
-
-              if (!validateServiceUrl(serviceUrl)) {
-                _context.next = 15;
-                break;
-              }
-
+              clearErrors(fields.serviceUrl.name);
               setIsLoading(true);
-              _context.prev = 3;
-              _context.next = 6;
-              return getLayersFromService(serviceUrl);
+              _context2.prev = 2;
+              _context2.next = 5;
+              return getLayersFromService(formValues.serviceUrl);
 
-            case 6:
-              layers = _context.sent;
+            case 5:
+              layers = _context2.sent;
 
               if (layers.children) {
                 serviceLayers = [];
@@ -11437,7 +11660,9 @@ var ServicePopup = function ServicePopup(_ref) {
                       path: object.path,
                       keywords: object.keywords ? object.keywords : [],
                       "abstract": object["abstract"] ? object["abstract"] : '',
-                      styles: object.styles ? object.styles : []
+                      styles: object.styles ? object.styles : [],
+                      dimensions: object.dimensions || [],
+                      geographicBoundingBox: object.geographicBoundingBox || null
                     });
                   }
                 } catch (err) {
@@ -11446,197 +11671,251 @@ var ServicePopup = function ServicePopup(_ref) {
                   _iterator.f();
                 }
 
-                service = WMGetServiceFromStore(serviceUrl);
+                service = WMGetServiceFromStore(formValues.serviceUrl);
                 serviceSetLayers({
                   id: service.id,
-                  name: serviceName,
-                  serviceUrl: serviceUrl,
+                  name: formValues.serviceName,
+                  serviceUrl: formValues.serviceUrl,
+                  "abstract": formValues.serviceAbstracts,
                   layers: serviceLayers,
                   isUserAddedService: true
                 });
                 setIsLoading(false);
-                closePopupAndResetState();
+                showSnackbar(getSuccesMessage(formValues.serviceName));
+                closePopup();
               }
 
-              _context.next = 15;
+              _context2.next = 13;
               break;
 
-            case 10:
-              _context.prev = 10;
-              _context.t0 = _context["catch"](3);
+            case 9:
+              _context2.prev = 9;
+              _context2.t0 = _context2["catch"](2);
               setIsLoading(false);
-              setServiceUrlHasError(true);
-              setServiceUrlHelperText('Error: Download failed. Check the URL.');
+              setError(fields.serviceUrl.name, {
+                message: VALIDATIONS_REQUEST_FAILED,
+                type: 'SYSTEM'
+              });
 
-            case 15:
+            case 13:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee, null, [[3, 10]]);
+      }, _callee2, null, [[2, 9]]);
     }));
   };
 
-  var ServiceNameInRedux = function ServiceNameInRedux() {
-    if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
-      var foundName = Object.keys(services).find(function (serviceId) {
-        return services[serviceId].serviceName.toLowerCase() === (serviceName === null || serviceName === void 0 ? void 0 : serviceName.toLowerCase());
-      });
-      return foundName !== undefined;
-    }
-
-    return false;
+  var onValidateServiceUrl = function onValidateServiceUrl(value) {
+    return validateServiceUrl(value, services);
   };
 
-  var UrlInRedux = function UrlInRedux() {
-    if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
-      var foundUrl = Object.keys(services).find(function (serviceId) {
-        return services[serviceId].serviceUrl === serviceUrl;
-      });
-      return foundUrl !== undefined;
+  var onFocusServiceUrl = function onFocusServiceUrl() {
+    if (!errors[fields.serviceUrl.name]) {
+      trigger(fields.serviceUrl.name);
     }
+  };
 
-    return false;
-  }; // Check serviceName
-
+  var onBlurServiceUrl = function onBlurServiceUrl() {
+    if (!errors[fields.serviceUrl.name]) {
+      fetchServiceData(getValues(fields.serviceUrl.name));
+    }
+  };
 
-  React.useEffect(function () {
-    if (serviceName === undefined) return;
-    setServiceNameHelperText('');
+  var onValidateServiceName = function onValidateServiceName(value) {
+    return validateServiceName(value, services, serviceName);
+  };
 
-    if (ServiceNameInRedux()) {
-      setServiceNameHasError(true);
-      setServiceNameHelperText('Error: This name already exists. Choose another name.');
-    } else {
-      setServiceNameHasError(false);
-      setServiceNameHelperText('');
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  var getFormAreRequiredFieldsEmpty = function getFormAreRequiredFieldsEmpty() {
+    var serviceNameField = watch(fields.serviceName.name);
+    var serviceUrlField = watch(fields.serviceUrl.name);
+    return serviceNameField === '' || serviceNameField === undefined || serviceUrlField === '' || serviceUrlField === undefined;
+  };
 
-  }, [serviceName]); // Check Url
+  var getFormHasformErrors = function getFormHasformErrors() {
+    var totalErrors = Object.keys(errors).length;
 
-  React.useEffect(function () {
-    setServiceUrlHelperText('');
-
-    if (serviceUrl && serviceUrl.length > 0 && !validateServiceUrl(serviceUrl)) {
-      setServiceUrlHasError(true);
-      setServiceUrlHelperText('Error: Not a valid URL.');
-    } else if (UrlInRedux()) {
-      setServiceUrlHasError(true);
-      setServiceUrlHelperText('Error: URL already exists.');
-    } else {
-      setServiceUrlHasError(false);
-      setServiceNameHelperText('');
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (totalErrors > 0) {
+      // prevent SYSTEM error types from blocking the save button
+      if (totalErrors === 1 && errors.serviceUrl) {
+        return errors.serviceUrl.type !== undefined && errors.serviceUrl.type !== 'SYSTEM';
+      }
 
-  }, [serviceUrl]); // Check if all fields are valid
+      return true;
+    }
 
-  React.useEffect(function () {
-    if (!serviceNameHasError && !serviceUrlHasError && validateServiceUrl(serviceUrl) && serviceName.length > 0) {
-      setDisableButton(false);
-    } else setDisableButton(true);
-  }, [serviceNameHasError, serviceUrlHasError, serviceName, serviceUrl]);
-
-  var closePopupAndResetState = function closePopupAndResetState() {
-    setServiceName('');
-    setServiceUrl('');
-    setAbstract('');
-    closePopup();
+    return false;
   };
 
+  var isSubmitDisabled = getFormHasformErrors() || getFormAreRequiredFieldsEmpty();
+  React.useEffect(function () {
+    reset({
+      serviceUrl: serviceUrl,
+      serviceName: serviceName,
+      serviceAbstracts: serviceAbstracts
+    });
+  }, [serviceUrl, serviceName, serviceAbstracts, reset]);
+  var isShowPopup = servicePopupVariant === 'show';
+  var isServiceUrlDisabled = isShowPopup || servicePopupVariant === 'edit';
   return /*#__PURE__*/React.createElement(Dialog, {
     open: isOpen,
     hideBackdrop: hideBackdrop,
     fullWidth: true,
     maxWidth: "xs",
     "data-testid": "servicePopup",
-    sx: style$1.container
+    sx: {
+      '& .MuiDialog-paper': {
+        backgroundColor: "geowebColors.cards.cardContainer",
+        maxWidth: 458
+      }
+    }
+  }, /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleSubmit(addNewService)
   }, /*#__PURE__*/React.createElement(DialogTitle, {
-    sx: style$1.dialogTitle
+    sx: {
+      alignItems: 'center',
+      padding: '16px 16px 24px 16px'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      ' span': {
+        fontSize: '1rem',
+        fontWeight: 500,
+        fontStyle: 'normal',
+        lineHeight: '1.38',
+        letterSpacing: '0.12px'
+      }
+    }
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h5",
     component: "span"
   }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React.createElement(IconButton, {
+    "aria-label": "close",
     size: "small",
-    onClick: closePopupAndResetState,
+    onClick: closePopup,
     "data-testid": "closePopupButtonCross",
-    sx: style$1.closeBtn
-  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
-    sx: style$1.dialogContent
-  }, /*#__PURE__*/React.createElement(TextField, {
+    sx: {
+      color: 'geowebColors.captions.captionDisabled.color',
+      marginTop: 'auto',
+      marginBottom: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(Close, null))), isLoading && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(LinearProgress, {
+    "data-testid": "loadingIndicator",
+    color: "secondary",
+    sx: {
+      position: 'absolute',
+      width: '100%',
+      top: 8
+    }
+  }))), /*#__PURE__*/React.createElement(DialogContent, {
+    sx: {
+      padding: '8px 16px'
+    }
+  }, /*#__PURE__*/React.createElement(ReactHookFormTextField, {
+    name: fields.serviceUrl.name,
+    label: fields.serviceUrl.label,
+    onFocus: onFocusServiceUrl,
+    onBlur: onBlurServiceUrl,
     sx: style$1.textField,
-    variant: "filled",
-    label: "Service name",
-    onChange: function onChange(event) {
-      return setServiceName(event.target.value);
+    rules: {
+      required: true,
+      validate: Object.assign({}, !isServiceUrlDisabled && {
+        onValidateServiceUrl: onValidateServiceUrl
+      })
     },
-    value: serviceName,
-    inputProps: {
-      'data-testid': 'serviceNameTextField'
+    disabled: isServiceUrlDisabled || isLoading,
+    InputProps: {
+      readOnly: isShowPopup,
+      disableUnderline: isShowPopup,
+      endAdornment: isShowPopup && /*#__PURE__*/React.createElement(InputAdornment, {
+        position: "end"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        "aria-label": "copy url",
+        onClick: function onClick() {
+          navigator.clipboard.writeText(serviceUrl);
+          showSnackbar(COPY_URL_MESSAGE);
+        }
+      }, /*#__PURE__*/React.createElement(Copy, null)))
     },
-    error: serviceNameHasError,
-    helperText: serviceNameHelperText
-  })), /*#__PURE__*/React.createElement(DialogContent, {
-    sx: style$1.dialogContent
-  }, /*#__PURE__*/React.createElement(TextField, {
-    sx: style$1.textField,
-    variant: "filled",
-    label: "Service URL",
-    onChange: function onChange(event) {
-      return setServiceUrl(event.target.value);
+    defaultValue: serviceUrl
+  }), /*#__PURE__*/React.createElement(ReactHookFormTextField, {
+    name: fields.serviceName.name,
+    label: fields.serviceName.label,
+    rules: {
+      required: true,
+      validate: {
+        onValidateServiceName: onValidateServiceName
+      }
     },
-    value: serviceUrl,
-    id: "service-url",
-    inputProps: {
-      'data-testid': 'serviceUrlTextField'
+    disabled: isShowPopup || isLoading,
+    InputProps: {
+      readOnly: isShowPopup,
+      disableUnderline: isShowPopup
     },
-    error: serviceUrlHasError,
-    helperText: serviceUrlHelperText
-  })), /*#__PURE__*/React.createElement(DialogContent, {
-    sx: style$1.dialogContent
-  }, /*#__PURE__*/React.createElement(TextField, {
     sx: style$1.textField,
-    variant: "filled",
+    defaultValue: serviceName
+  }), /*#__PURE__*/React.createElement(ReactHookFormTextField, {
     multiline: true,
     rows: 4,
-    label: "Abstracts",
-    helperText: "Short description of what this service does",
-    onChange: function onChange(event) {
-      return setAbstract(event.target.value);
+    name: fields.serviceAbstracts.name,
+    label: fields.serviceAbstracts.label,
+    disabled: isShowPopup || isLoading,
+    rules: {},
+    InputProps: {
+      readOnly: isShowPopup,
+      disableUnderline: isShowPopup
     },
-    value: _abstract,
-    "data-testid": "abstractTextField",
-    disabled: true
+    helperText: !isShowPopup && 'Short description of what this service does',
+    sx: style$1.textField,
+    defaultValue: ""
+  }), !isServiceUrlDisabled && /*#__PURE__*/React.createElement(InitialValidationsTrigger, {
+    trigger: trigger,
+    getValues: getValues,
+    onValidField: fetchServiceData
   })), /*#__PURE__*/React.createElement(DialogActions, {
-    sx: style$1.footerContent
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: closePopupAndResetState,
+    sx: {
+      padding: 2
+    }
+  }, isShowPopup ? /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return closePopup();
+    },
+    variant: "tertiary",
+    sx: {
+      width: '117px'
+    }
+  }, "close") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: closePopup,
     "data-testid": "closePopupButtonCancel",
     variant: "tertiary",
     sx: {
       width: '117px'
     }
-  }, "cancel"), !isLoading ? /*#__PURE__*/React.createElement(Button, {
+  }, "cancel"), /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
     variant: "primary",
-    disabled: disableButton,
-    onClick: addNewService,
+    disabled: isSubmitDisabled || isLoading,
     "data-testid": "saveServiceButton",
     sx: {
       width: '117px',
       marginLeft: '16px!important'
     }
-  }, "save") : /*#__PURE__*/React.createElement(Box, {
-    "data-testid": "loadingIndicator",
-    sx: {
-      width: '117px',
-      height: '40px',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      marginLeft: '16px!important'
-    }
-  }, /*#__PURE__*/React.createElement(CircularProgress, {
-    size: 35
-  }))));
+  }, "save")))));
+};
+
+var ServicePopupWrapper = function ServicePopupWrapper(_a) {
+  var props = __rest(_a, []);
+
+  return /*#__PURE__*/React.createElement(ReactHookFormProvider, {
+    options: defaultFormOptions
+  }, /*#__PURE__*/React.createElement(ServicePopup, Object.assign({}, props)));
 };
 
 /* *
@@ -11670,74 +11949,28 @@ var ServicePopupConnect = function ServicePopupConnect(_ref) {
   var serviceSetLayers = React__default.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
-  return /*#__PURE__*/React__default.createElement(ServicePopup, {
+  var activeService = useSelector(function (store) {
+    return getActiveServiceById(store, serviceId);
+  });
+  var showSnackbar = React__default.useCallback(function (message) {
+    dispatch(snackbarActions.openSnackbar({
+      message: message
+    }));
+  }, [dispatch]);
+  return /*#__PURE__*/React__default.createElement(ServicePopupWrapper, {
     servicePopupVariant: servicePopupVariant,
     hideBackdrop: hideBackdrop,
     isOpen: isOpen,
     closePopup: closePopup,
-    serviceId: serviceId,
     services: services,
     serviceSetLayers: serviceSetLayers,
-    url: url
+    serviceUrl: url || (activeService === null || activeService === void 0 ? void 0 : activeService.serviceUrl),
+    serviceName: activeService === null || activeService === void 0 ? void 0 : activeService.serviceName,
+    serviceAbstracts: activeService === null || activeService === void 0 ? void 0 : activeService["abstract"],
+    showSnackbar: showSnackbar
   });
 };
 
-var isURL = function isURL(string) {
-  return /^https?:\/\//.test(string);
-};
-
-var SearchFieldButtonContainer = function SearchFieldButtonContainer(_ref) {
-  var localSearchString = _ref.localSearchString,
-      onClickClear = _ref.onClickClear;
-
-  var _React$useState = React__default.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isPopupOpen = _React$useState2[0],
-      setPopupOpen = _React$useState2[1];
-
-  React__default.useEffect(function () {
-    if (isPopupOpen === false) {
-      onClickClear();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isPopupOpen]);
-  var ClearButton = /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Clear",
-    placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    edge: "end",
-    onClick: function onClick() {
-      onClickClear();
-    },
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Clear, null)));
-  if (isURL(localSearchString)) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      marginRight: '15px'
-    }
-  }, ClearButton), /*#__PURE__*/React__default.createElement(Button, {
-    variant: "tertiary",
-    onClick: function onClick() {
-      return setPopupOpen(true);
-    }
-  }, "Save"), /*#__PURE__*/React__default.createElement(ServicePopupConnect, {
-    servicePopupVariant: "save",
-    isOpen: isPopupOpen,
-    closePopup: function closePopup() {
-      return setPopupOpen(false);
-    },
-    url: localSearchString
-  }));
-  if (localSearchString) return ClearButton;
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Search",
-    placement: "top"
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    edge: "end",
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Search, null)));
-};
-
 var SearchField = function SearchField(_ref) {
   var searchFilter = _ref.searchFilter,
       setSearchFilter = _ref.setSearchFilter;
@@ -11745,13 +11978,18 @@ var SearchField = function SearchField(_ref) {
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       localSearchString = _React$useState2[0],
-      setLocalSearchString = _React$useState2[1]; // mirror store unless typing a URL
+      setLocalSearchString = _React$useState2[1];
 
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      urlIsValid = _React$useState4[0],
+      setUrlIsValid = _React$useState4[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      popupIsOpen = _React$useState6[0],
+      setPopupIsOpen = _React$useState6[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  React.useEffect(function () {
-    if (isURL(localSearchString)) return;
-    setLocalSearchString(searchFilter); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchFilter]); // eslint-disable-next-line react-hooks/exhaustive-deps
 
   var setSearchFilterDebounced = React.useCallback(debounce(setSearchFilter, 300), []);
 
@@ -11760,7 +11998,33 @@ var SearchField = function SearchField(_ref) {
     if (!isURL(text)) setSearchFilterDebounced(text);else if (searchFilter) setSearchFilterDebounced('');
   };
 
-  return /*#__PURE__*/React.createElement(TextField, {
+  React.useEffect(function () {
+    if (isURL(localSearchString)) {
+      setUrlIsValid(true);
+    }
+  }, [localSearchString]);
+  React.useEffect(function () {
+    var keyDownHandler = function keyDownHandler(event) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+
+        if (urlIsValid) {
+          setPopupIsOpen(true);
+        }
+      }
+    };
+
+    document.addEventListener('keydown', keyDownHandler);
+    return function () {
+      document.removeEventListener('keydown', keyDownHandler);
+    };
+  }, [urlIsValid]); // mirror store unless typing a URL
+
+  React.useEffect(function () {
+    if (isURL(localSearchString)) return;
+    setLocalSearchString(searchFilter); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchFilter]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, {
     variant: "filled",
     label: "Search through services or enter a service URL",
     value: localSearchString,
@@ -11773,6 +12037,7 @@ var SearchField = function SearchField(_ref) {
       endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
         position: "end"
       }, /*#__PURE__*/React.createElement(SearchFieldButtonContainer, {
+        setPopupIsOpen: setPopupIsOpen,
         localSearchString: localSearchString,
         onClickClear: function onClickClear() {
           setLocalSearchString('');
@@ -11780,7 +12045,259 @@ var SearchField = function SearchField(_ref) {
         }
       }))
     }
+  }), /*#__PURE__*/React.createElement(ServicePopupConnect, {
+    servicePopupVariant: "save",
+    isOpen: popupIsOpen,
+    closePopup: function closePopup() {
+      setPopupIsOpen(false);
+      setLocalSearchString('');
+    },
+    url: localSearchString
+  }));
+};
+
+/* *
+ * 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 SearchFieldConnect = function SearchFieldConnect() {
+  var dispatch = useDispatch();
+  var searchFilter = useSelector(function (store) {
+    return getSearchFilter(store);
+  });
+  return /*#__PURE__*/React.createElement(SearchField, {
+    setSearchFilter: function setSearchFilter(filterText) {
+      dispatch(layerSelectActions.setSearchFilter({
+        filterText: filterText
+      }));
+    },
+    searchFilter: searchFilter
+  });
+};
+
+/* *
+ * 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 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 "group-".concat(group);
+      }).concat(layer.keywords.map(function (keyword) {
+        return "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.text) === 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;
+  });
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
+  var layer = _ref.layer,
+      layerIndex = _ref.layerIndex,
+      serviceUrl = _ref.serviceUrl,
+      addLayer = _ref.addLayer,
+      deleteLayer = _ref.deleteLayer,
+      mapLayers = _ref.mapLayers;
+  var foundLayer = mapLayers.find(function (lr) {
+    return lr.name === layer.name && lr.service === serviceUrl;
+  });
+  return /*#__PURE__*/React.createElement(CustomToggleButton, {
+    "data-testid": "layerAddRemoveButton-".concat(layer.name),
+    onClick: function onClick() {
+      !foundLayer ? addLayer({
+        serviceUrl: serviceUrl,
+        layerName: layer.name
+      }) : deleteLayer({
+        layerId: foundLayer.id,
+        layerIndex: layerIndex
+      });
+    },
+    selected: !!foundLayer,
+    variant: "tool",
+    fullWidth: true,
+    sx: {
+      fontSize: '12px'
+    }
+  }, !foundLayer ? 'Add' : 'Remove');
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * 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 LayerInfoButtonConnect = function LayerInfoButtonConnect(_ref) {
+  var layer = _ref.layer,
+      mapId = _ref.mapId,
+      serviceName = _ref.serviceName,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source;
+  var dispatch = useDispatch();
+  var currentActiveMapId = useSelector(function (store) {
+    return getDialogMapId(store, DialogTypes.LayerInfo);
+  });
+  var isOpenInStore = useSelector(function (store) {
+    return getisDialogOpen(store, DialogTypes.LayerInfo);
   });
+  var currentLayerInfo = useSelector(function (store) {
+    return getActiveLayerInfo(store);
+  });
+  var isActive = layer.name === (currentLayerInfo === null || currentLayerInfo === void 0 ? void 0 : currentLayerInfo.name) && serviceName === (currentLayerInfo === null || currentLayerInfo === void 0 ? void 0 : currentLayerInfo.serviceName);
+  var toggleInfoDialog = React__default.useCallback(function () {
+    dispatch(uiActions.setActiveMapIdForDialog({
+      type: DialogTypes.LayerInfo,
+      mapId: mapId,
+      setOpen: currentActiveMapId !== mapId ? true : !isOpenInStore,
+      source: source
+    }));
+  }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
+  var setActiveLayerInfo = React__default.useCallback(function () {
+    dispatch(layerSelectActions.setActiveLayerInfo({
+      layer: Object.assign(Object.assign({}, layer), {
+        serviceName: serviceName
+      })
+    }));
+  }, [dispatch, layer, serviceName]);
+
+  var onClick = function onClick() {
+    if (isActive) {
+      toggleInfoDialog();
+    }
+
+    if (!isActive && isOpenInStore) {
+      setActiveLayerInfo();
+    }
+
+    if (!isActive && !isOpenInStore) {
+      setActiveLayerInfo();
+      toggleInfoDialog();
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement(ToolButton, {
+    variant: "icon",
+    active: isActive && isOpenInStore,
+    onClick: onClick,
+    id: "layerInfoButton",
+    "aria-label": "layer info"
+  }, /*#__PURE__*/React__default.createElement(Info, null));
+};
+
+/* *
+ * 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 textStyle$1 = {
+  lineHeight: '20px',
+  letterSpacing: '0.25px'
+};
+var textStyleWithMargin = Object.assign(Object.assign({}, textStyle$1), {
+  marginBottom: 1
+});
+
+var LayerInfoText = function LayerInfoText(_ref) {
+  var label = _ref.label,
+      value = _ref.value;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "subtitle2",
+    sx: textStyle$1
+  }, label), /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "body2",
+    sx: textStyleWithMargin
+  }, value));
 };
 
 /* *
@@ -11796,23 +12313,54 @@ var SearchField = function SearchField(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
+var textStyle = {
+  lineHeight: '20px',
+  letterSpacing: '0.25px'
+};
+var valueStyle = Object.assign(Object.assign({}, textStyle), {
+  overflowWrap: 'break-word'
+});
 
-var SearchFieldConnect = function SearchFieldConnect() {
-  var dispatch = useDispatch();
-  var searchFilter = useSelector(function (store) {
-    return getSearchFilter(store);
-  });
-  return /*#__PURE__*/React.createElement(SearchField, {
-    setSearchFilter: function setSearchFilter(filterText) {
-      dispatch(layerSelectActions.setSearchFilter({
-        filterText: filterText
-      }));
-    },
-    searchFilter: searchFilter
-  });
+var LayerInfoList = function LayerInfoList(_ref) {
+  var label = _ref.label,
+      list = _ref.list;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "subtitle2",
+    sx: textStyle
+  }, label), /*#__PURE__*/React__default.createElement(Grid$1, {
+    container: true,
+    direction: "column"
+  }, list.map(function (item) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: item.name
+    }, /*#__PURE__*/React__default.createElement(Grid$1, {
+      item: true,
+      container: true,
+      direction: "row"
+    }, item.icon, /*#__PURE__*/React__default.createElement(Grid$1, {
+      item: true,
+      sx: {
+        marginLeft: '10px'
+      }
+    }, /*#__PURE__*/React__default.createElement(Typography$1, {
+      variant: "body2",
+      sx: textStyle
+    }, item.name, ":"))), /*#__PURE__*/React__default.createElement(Grid$1, {
+      item: true,
+      container: true,
+      direction: "row",
+      sx: {
+        marginBottom: 1,
+        paddingLeft: '34px'
+      }
+    }, /*#__PURE__*/React__default.createElement(Typography$1, {
+      variant: "body2",
+      sx: valueStyle
+    }, item.value)));
+  })));
 };
 
 /* *
@@ -11828,32 +12376,47 @@ var SearchFieldConnect = function SearchFieldConnect() {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var filterLayersFromService = function filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString) {
-  var mapStoreService = services[serviceId];
-  if (!mapStoreService) return [];
+var getLayerStyles = function getLayerStyles(layer) {
+  if (!layer.styles) {
+    return '-';
+  }
 
-  if (searchString === '' && allKeywordsActive) {
-    return mapStoreService.layers.filter(function (layer) {
-      return layer.leaf;
-    });
+  var styles = layer.styles.map(function (style) {
+    return style.title;
+  });
+
+  if (!styles.length) {
+    return '-';
   }
 
-  var searchStringArray = searchString.split(' ');
-  return mapStoreService.layers.filter(function (layer) {
-    return searchStringArray.every(function (search) {
-      var layerPathAndKeywords = layer.path.concat(layer.keywords);
-      return (!!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
-        return !keywordIds.includes(keyword);
-      }) || allKeywordsActive) && (!!layer.name && layer.name.toLowerCase().includes(search.toLowerCase()) || !!layer.text && layer.text.toLowerCase().includes(search.toLowerCase()) || !!layer["abstract"] && layer["abstract"].toLowerCase().includes(search.toLowerCase()) || !!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
-        return !keyword.toLowerCase().includes(search.toLowerCase());
-      }) || mapStoreService.name.toLowerCase().includes(search.toLowerCase()));
-    });
-  }).filter(function (layer) {
-    return layer.leaf;
+  return styles.join(', ');
+};
+var getDimensionValue = function getDimensionValue(name, layer, breakAt) {
+  var includeUnit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+  var _a;
+
+  var dimension = (_a = layer.dimensions) === null || _a === void 0 ? void 0 : _a.find(function (dimension) {
+    return dimension.name.toLowerCase() === name;
   });
+
+  if (!dimension) {
+    return '-';
+  }
+
+  var dimValue = dimension === null || dimension === void 0 ? void 0 : dimension.currentValue.split(breakAt).join("".concat(breakAt, " "));
+
+  if (includeUnit) {
+    return "".concat(dimValue, " ").concat(dimension.units);
+  }
+
+  return dimValue;
+};
+var getLayerBbox = function getLayerBbox(layer) {
+  return layer.geographicBoundingBox ? "west ".concat(layer.geographicBoundingBox.west, ", east ").concat(layer.geographicBoundingBox.east, ", north ").concat(layer.geographicBoundingBox.north, ", south ").concat(layer.geographicBoundingBox.south) : '-';
 };
 
 /* *
@@ -11873,31 +12436,89 @@ var filterLayersFromService = function filterLayersFromService(serviceId, servic
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
-  var layer = _ref.layer,
-      layerIndex = _ref.layerIndex,
-      serviceUrl = _ref.serviceUrl,
-      addLayer = _ref.addLayer,
-      deleteLayer = _ref.deleteLayer,
-      mapLayers = _ref.mapLayers;
-  var foundLayer = mapLayers.find(function (lr) {
-    return lr.name === layer.name && lr.service === serviceUrl;
-  });
-  return /*#__PURE__*/React.createElement(CustomToggleButton, {
-    "data-testid": "layerAddRemoveButton-".concat(layer.name),
-    onClick: function onClick() {
-      !foundLayer ? addLayer({
-        serviceUrl: serviceUrl,
-        layerName: layer.name
-      }) : deleteLayer({
-        layerId: foundLayer.id,
-        layerIndex: layerIndex
-      });
+var LayerInfoDialog = function LayerInfoDialog(_ref) {
+  var onClose = _ref.onClose,
+      layer = _ref.layer,
+      isOpen = _ref.isOpen,
+      _ref$onMouseDown = _ref.onMouseDown,
+      onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$source = _ref.source,
+      source = _ref$source === void 0 ? 'app' : _ref$source,
+      dialogHeight = _ref.dialogHeight;
+
+  var _a;
+
+  var styles = getLayerStyles(layer);
+  var bbox = getLayerBbox(layer);
+  var timeValue = getDimensionValue('time', layer, '/');
+  var refTimeValue = getDimensionValue('reference_time', layer, ',');
+  var elevationValue = getDimensionValue('elevation', layer, ',', true);
+  return /*#__PURE__*/React__default.createElement(ToolContainerDraggable, {
+    onClose: onClose,
+    headerSize: "xs",
+    startSize: {
+      width: 288,
+      height: dialogHeight || 650
     },
-    selected: !!foundLayer,
-    variant: "tool",
-    fullWidth: true
-  }, !foundLayer ? 'Add' : 'Remove');
+    startPosition: {
+      top: 150,
+      left: 900
+    },
+    title: "Layer Info",
+    isOpen: isOpen,
+    onMouseDown: onMouseDown,
+    order: order,
+    source: source
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    sx: {
+      padding: 2
+    }
+  }, /*#__PURE__*/React__default.createElement(LayerInfoText, {
+    label: "Title",
+    value: layer.text
+  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
+    label: "Name",
+    value: layer.name
+  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
+    label: "Service",
+    value: layer.serviceName
+  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
+    label: "Abstract",
+    value: layer["abstract"] || '-'
+  }), /*#__PURE__*/React__default.createElement(LayerInfoList, {
+    label: "Dimensions",
+    list: [{
+      name: 'Time',
+      value: timeValue,
+      icon: /*#__PURE__*/React__default.createElement(DimensionsTime, null)
+    }, {
+      name: 'Reference Time',
+      value: refTimeValue,
+      icon: /*#__PURE__*/React__default.createElement(DimensionsRefTime, null)
+    }, {
+      name: 'Elevation',
+      value: elevationValue,
+      icon: /*#__PURE__*/React__default.createElement(DimensionsElevation, null)
+    }, {
+      name: 'Other dimensions',
+      value: '-',
+      icon: /*#__PURE__*/React__default.createElement(DimensionsOther, null)
+    }]
+  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
+    label: "Styles",
+    value: styles
+  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
+    label: "Bounding Box",
+    value: bbox
+  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
+    label: "Groups",
+    value: layer.path.join('/') || '-'
+  }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
+    label: "Keywords",
+    value: ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.join(', ')) || '-'
+  })));
 };
 
 /* *
@@ -11916,15 +12537,24 @@ var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
+var layerInfoStyle = {
+  fontSize: '10px',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
 
 var LayerListRow = function LayerListRow(_ref) {
   var layer = _ref.layer,
       layerIndex = _ref.layerIndex,
       service = _ref.service,
-      serviceUrl = _ref.serviceUrl,
       addLayer = _ref.addLayer,
       deleteLayer = _ref.deleteLayer,
-      mapLayers = _ref.mapLayers;
+      mapLayers = _ref.mapLayers,
+      mapId = _ref.mapId;
+
+  var _a, _b, _c;
+
   return /*#__PURE__*/React__default.createElement(Grid, {
     "data-testid": "layerListLayerRow",
     container: true,
@@ -11934,9 +12564,9 @@ var LayerListRow = function LayerListRow(_ref) {
     alignItems: "center",
     sx: {
       backgroundColor: 'geowebColors.cards.cardContainer',
-      paddingLeft: '12px',
+      padding: '8px',
       marginBottom: '4px',
-      height: '64px',
+      height: '68px',
       border: 'solid 1px',
       borderColor: 'geowebColors.cards.cardContainerBorder'
     }
@@ -11951,8 +12581,8 @@ var LayerListRow = function LayerListRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       fontSize: '12px',
-      height: '24px',
-      lineHeight: '24px',
+      height: '14px',
+      lineHeight: '14px',
       fontWeight: 500,
       WebkitLineClamp: 1,
       display: '-webkit-box',
@@ -11963,34 +12593,50 @@ var LayerListRow = function LayerListRow(_ref) {
   }, layer.text)), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
-    xs: 4
+    xs: 4,
+    direction: "column"
   }, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       fontSize: '12px',
-      height: '24px',
-      lineHeight: '24px',
+      height: '18px',
+      lineHeight: '18px',
       WebkitLineClamp: 1,
       display: '-webkit-box',
       WebkitBoxOrient: 'vertical',
       textOverflow: 'ellipsis',
       overflow: 'hidden'
     }
-  }, service.name)), layer["abstract"] ? /*#__PURE__*/React__default.createElement(Grid, {
+  }, service.name), /*#__PURE__*/React__default.createElement(LayerInfoButtonConnect, {
+    layer: layer,
+    mapId: mapId,
+    serviceName: service.name
+  })), layer["abstract"] || ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.length) || layer.path.length ? /*#__PURE__*/React__default.createElement(Grid, {
     "data-testid": "layerAbstract",
     container: true,
     item: true,
     xs: 8,
     sx: {
-      fontSize: '10px',
-      height: '30px',
+      height: '45px',
       paddingLeft: '20px',
       WebkitLineClamp: 2,
       display: '-webkit-box',
-      WebkitBoxOrient: 'vertical',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden'
+      WebkitBoxOrient: 'vertical'
     }
-  }, layer["abstract"]) : null), /*#__PURE__*/React__default.createElement(Grid, {
+  }, layer["abstract"] && /*#__PURE__*/React__default.createElement(Typography, {
+    sx: Object.assign(Object.assign({}, layerInfoStyle), {
+      height: 15
+    })
+  }, layer["abstract"]), layer.path.length > 0 && /*#__PURE__*/React__default.createElement(Typography, {
+    sx: Object.assign(Object.assign({}, layerInfoStyle), {
+      height: ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.length) ? 15 : 30
+    })
+  }, "Groups: ", layer.path.join(' / ')), ((_c = layer.keywords) === null || _c === void 0 ? void 0 : _c.length) > 0 && /*#__PURE__*/React__default.createElement(Typography, {
+    sx: Object.assign(Object.assign({}, layerInfoStyle), {
+      height: layer.path.length ? 15 : 30
+    })
+  }, "Keywords:", ' ', layer.keywords.slice().sort(function (a, b) {
+    return a.localeCompare(b);
+  }).join(', '))) : null), /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
     xs: 2,
@@ -12000,13 +12646,12 @@ var LayerListRow = function LayerListRow(_ref) {
     sx: {
       width: '80px',
       height: '48px',
-      marginRight: '8px',
-      paddingTop: '4px'
+      marginRight: '8px'
     }
   }, /*#__PURE__*/React__default.createElement(LayerAddRemoveButton, {
     layer: layer,
     layerIndex: layerIndex,
-    serviceUrl: serviceUrl,
+    serviceUrl: service.serviceUrl,
     addLayer: addLayer,
     deleteLayer: deleteLayer,
     mapLayers: mapLayers
@@ -12017,13 +12662,15 @@ var LayerList = function LayerList(_ref) {
   var services = _ref.services,
       serviceIds = _ref.serviceIds,
       layerSelectHeight = _ref.layerSelectHeight,
+      serviceListHeight = _ref.serviceListHeight,
       addLayer = _ref.addLayer,
       deleteLayer = _ref.deleteLayer,
       searchString = _ref.searchString,
       mapLayers = _ref.mapLayers,
-      keywordIds = _ref.keywordIds,
-      allKeywordsActive = _ref.allKeywordsActive;
-  var layerSelectFilterHeight = 199;
+      filterIds = _ref.filterIds,
+      allFiltersActive = _ref.allFiltersActive,
+      mapId = _ref.mapId;
+  var layerSelectFilterHeight = 155 + serviceListHeight;
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -12037,16 +12684,16 @@ var LayerList = function LayerList(_ref) {
 
   React.useEffect(function () {
     setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
-      return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
+      return totalNumberOfLayers + filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString).length;
     }, 0));
     setLayersFilteredFromService(serviceIds.reduce(function (layerList, serviceId) {
-      return layerList.concat(filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer) {
+      return layerList.concat(filterLayersFromService(serviceId, services, filterIds, allFiltersActive, searchString).map(function (layer) {
         return Object.assign(Object.assign({}, layer), {
           serviceId: serviceId
         });
       }));
     }, []));
-  }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
+  }, [serviceIds, filterIds, services, searchString, allFiltersActive]);
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -12057,21 +12704,21 @@ var LayerList = function LayerList(_ref) {
   }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(FixedSizeList, {
     height: layerSelectHeight - layerSelectFilterHeight,
     itemCount: numberOfLayers,
-    itemSize: 68
+    itemSize: 72
   }, function (_ref2) {
     var index = _ref2.index,
         style = _ref2.style;
     return /*#__PURE__*/React.createElement("div", {
       style: style,
       key: layersFilteredFromService[index].name
-    }, /*#__PURE__*/React.createElement(LayerListRow, {
+    }, services[layersFilteredFromService[index].serviceId] && /*#__PURE__*/React.createElement(LayerListRow, {
       layer: layersFilteredFromService[index],
       layerIndex: index,
       service: services[layersFilteredFromService[index].serviceId],
-      serviceUrl: services[layersFilteredFromService[index].serviceId].serviceUrl,
       addLayer: addLayer,
       deleteLayer: deleteLayer,
-      mapLayers: mapLayers
+      mapLayers: mapLayers,
+      mapId: mapId
     }));
   }));
 };
@@ -12089,13 +12736,14 @@ var LayerList = function LayerList(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
 var LayerListConnect = function LayerListConnect(_ref) {
   var mapId = _ref.mapId,
-      layerSelectHeight = _ref.layerSelectHeight;
+      layerSelectHeight = _ref.layerSelectHeight,
+      serviceListHeight = _ref.serviceListHeight;
   var services = useSelector(function (store) {
     return getServices(store);
   });
@@ -12145,11 +12793,11 @@ var LayerListConnect = function LayerListConnect(_ref) {
       origin: LayerActionOrigin.layerManager
     }));
   }, [dispatch, mapId]);
-  var checkedKeywordIds = useSelector(function (store) {
-    return getCheckedKeywordIds(store);
+  var checkedFilterIds = useSelector(function (store) {
+    return getCheckedFilterIds(store);
   });
-  var allKeywordsActive = useSelector(function (store) {
-    return isAllKeywordsChecked(store);
+  var allFiltersActive = useSelector(function (store) {
+    return isAllFiltersChecked(store);
   });
   var searchString = useSelector(function (store) {
     return getSearchFilter(store);
@@ -12158,12 +12806,14 @@ var LayerListConnect = function LayerListConnect(_ref) {
     services: services,
     serviceIds: enabledServiceIds,
     layerSelectHeight: layerSelectHeight,
+    serviceListHeight: serviceListHeight,
     addLayer: addLayer,
     deleteLayer: deleteLayer,
-    keywordIds: checkedKeywordIds,
-    allKeywordsActive: allKeywordsActive,
+    filterIds: checkedFilterIds,
+    allFiltersActive: allFiltersActive,
     searchString: searchString,
-    mapLayers: mapLayers
+    mapLayers: mapLayers,
+    mapId: mapId
   });
 };
 
@@ -12180,8 +12830,8 @@ var LayerListConnect = function LayerListConnect(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var style = {
   borderRadius: '20px!important',
@@ -12190,7 +12840,8 @@ var style = {
   height: '32px!important',
   padding: '5px 12px!important',
   textTransform: 'none!important',
-  fontWeight: 'normal'
+  fontWeight: 'normal',
+  marginBottom: '5px'
 };
 
 var ServiceChip = function ServiceChip(_ref) {
@@ -12200,7 +12851,9 @@ var ServiceChip = function ServiceChip(_ref) {
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
       toggleChip = _ref.toggleChip;
-  return /*#__PURE__*/React.createElement(CustomToggleButton, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: ".concat(service["abstract"]) : ''
+  }, /*#__PURE__*/React.createElement(CustomToggleButton, {
     variant: "boxed",
     selected: isSelected,
     tabIndex: 0,
@@ -12213,7 +12866,7 @@ var ServiceChip = function ServiceChip(_ref) {
     },
     disabled: isDisabled,
     sx: style
-  }, service ? service.serviceName : 'All');
+  }, service ? service.serviceName : 'All'));
 };
 
 var ServiceChipConnect = function ServiceChipConnect(_ref) {
@@ -12222,56 +12875,79 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
       serviceId = _ref.serviceId,
       service = _ref.service,
       isSelected = _ref.isSelected,
+      isAllSelected = _ref.isAllSelected,
       isDisabled = _ref.isDisabled;
   var dispatch = useDispatch();
   var activeServices = useSelector(function (store) {
     return getActiveServices(store);
   });
 
+  var setAllServicesEnabled = function setAllServicesEnabled(allServicesEnabled) {
+    dispatch(layerSelectActions.setAllServicesEnabled({
+      allServicesEnabled: allServicesEnabled
+    }));
+  };
+
+  var hasSelectedStyle = !isAllSelected && isSelected || isAllSelected && service === 'all';
+
   var toggleChip = function toggleChip(service) {
     if (service === 'all') {
       if (isSelected) {
-        for (var _i = 0, _Object$entries = Object.entries(activeServices); _i < _Object$entries.length; _i++) {
-          var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-              key = _Object$entries$_i[0],
-              value = _Object$entries$_i[1];
-
-          var serviceID = key;
-          var _service = value;
+        setAllServicesEnabled(false);
+        Object.entries(activeServices).forEach(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+              serviceID = _ref3[0],
+              service = _ref3[1];
 
-          if (_service.enabled) {
+          if (service.enabled) {
             dispatch(layerSelectActions.disableActiveService({
               serviceId: serviceID,
-              keywords: _service.keywordsPerService
+              filters: service.filterIds
             }));
           }
-        }
+        });
       } else {
-        for (var _i2 = 0, _Object$entries2 = Object.entries(activeServices); _i2 < _Object$entries2.length; _i2++) {
-          var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
-              _key = _Object$entries2$_i[0],
-              _value = _Object$entries2$_i[1];
+        setAllServicesEnabled(true);
+        Object.entries(activeServices).forEach(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2),
+              serviceID = _ref5[0],
+              service = _ref5[1];
 
-          var _serviceID = _key;
-          var _service2 = _value;
-
-          if (!_service2.enabled) {
+          if (!service.enabled) {
             dispatch(layerSelectActions.enableActiveService({
-              serviceId: _serviceID,
-              keywords: _service2.keywordsPerService
+              serviceId: serviceID,
+              filters: service.filterIds
             }));
           }
-        }
+        });
       }
     } else if (isSelected) {
-      dispatch(layerSelectActions.disableActiveService({
-        serviceId: serviceId,
-        keywords: activeServices[serviceId].keywordsPerService
-      }));
+      if (isAllSelected) {
+        setAllServicesEnabled(false);
+        Object.entries(activeServices).forEach(function (_ref6) {
+          var _ref7 = _slicedToArray(_ref6, 2),
+              serviceID = _ref7[0],
+              service = _ref7[1];
+
+          var shouldDisable = service.enabled && serviceID !== serviceId;
+
+          if (shouldDisable) {
+            dispatch(layerSelectActions.disableActiveService({
+              serviceId: serviceID,
+              filters: service.filterIds
+            }));
+          }
+        });
+      } else {
+        dispatch(layerSelectActions.disableActiveService({
+          serviceId: serviceId,
+          filters: activeServices[serviceId].filterIds
+        }));
+      }
     } else {
       dispatch(layerSelectActions.enableActiveService({
         serviceId: serviceId,
-        keywords: activeServices[serviceId].keywordsPerService
+        filters: activeServices[serviceId].filterIds
       }));
     }
   };
@@ -12280,123 +12956,49 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
     service: service,
     all: all,
     toggleChip: toggleChip,
-    isSelected: isSelected,
+    isSelected: hasSelectedStyle,
     isDisabled: isDisabled
   });
 };
 
 var ServiceList = function ServiceList(_ref) {
-  var layerSelectWidth = _ref.layerSelectWidth,
-      activeServices = _ref.activeServices;
+  var activeServices = _ref.activeServices,
+      setHeight = _ref.setHeight;
+  var ref = React.useRef(null);
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      margin = _React$useState2[0],
-      setMargin = _React$useState2[1];
-
-  var _React$useState3 = React.useState(0),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      width = _React$useState4[0],
-      setWidth = _React$useState4[1];
-
-  var _React$useState5 = React.useState(null),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      intervalId = _React$useState6[0],
-      setIntervalId = _React$useState6[1];
-
-  var ref = React.useRef(null);
-  var scrollSpeed = 5;
-  var maxWidthValue = ref && ref.current && ref.current.scrollWidth && ref.current.scrollWidth >= layerSelectWidth - margin && ref.current.scrollWidth || layerSelectWidth - 50;
-
-  var onMouseWheelScroll = function onMouseWheelScroll(e) {
-    var delta = e.deltaY;
-    var scrollSpeed = 0.1;
-    if (delta > 0) setMargin(Math.min(Math.max(margin + scrollSpeed * delta, 0), width - layerSelectWidth));else setMargin(Math.min(Math.max(margin + scrollSpeed * delta, 0), width - layerSelectWidth));
-  };
-
-  var onLeftChevronPressed = function onLeftChevronPressed() {
-    setMargin(function (prevMargin) {
-      return Math.max(prevMargin - scrollSpeed, 0);
-    });
-    setIntervalId(setInterval(function () {
-      setMargin(function (prevMargin) {
-        return Math.max(prevMargin - scrollSpeed, 0);
-      });
-    }, 20));
-  };
-
-  var onRightChevronPressed = React.useCallback(function () {
-    setMargin(function (prevMargin) {
-      return Math.min(prevMargin + scrollSpeed, width - layerSelectWidth);
-    });
-    setIntervalId(setInterval(function () {
-      setMargin(function (prevMargin) {
-        return Math.min(prevMargin + scrollSpeed, width - layerSelectWidth);
-      });
-    }, 20));
-  }, [width, layerSelectWidth]);
-
-  var onChevronMouseUp = function onChevronMouseUp() {
-    clearInterval(intervalId);
-    setIntervalId(null);
-  };
+      serviceListHeight = _React$useState2[0],
+      setServiceListHeight = _React$useState2[1];
 
+  var clientHeight = ref && ref.current && ref.current.clientHeight && ref.current.clientHeight;
   React.useEffect(function () {
-    setWidth(ref.current.scrollWidth + 50);
-    setMargin(Math.max(0, Math.min(width - layerSelectWidth, margin)));
-
-    if ((margin === 0 || layerSelectWidth + margin === width) && intervalId != null) {
-      clearInterval(intervalId);
-      setIntervalId(null);
+    if (ref && ref.current && ref.current.clientHeight) {
+      setServiceListHeight(ref.current.clientHeight);
     }
-  }, [activeServices, layerSelectWidth, width, margin, intervalId]);
+  }, [activeServices, clientHeight]);
+  React.useEffect(function () {
+    setHeight(serviceListHeight);
+  }, [serviceListHeight, setHeight]);
   var isAllSelected = Object.values(activeServices).every(function (activeService) {
     return activeService.enabled;
   });
   return /*#__PURE__*/React.createElement(Box, {
     sx: {
-      height: '32px',
       marginTop: '8px',
       width: '100%',
       overflow: 'hidden'
     },
-    "data-testid": "serviceList",
-    onWheel: onMouseWheelScroll
-  }, margin !== 0 && /*#__PURE__*/React.createElement(ChevronLeft, {
-    onMouseDown: onLeftChevronPressed,
-    onMouseUp: onChevronMouseUp,
-    "data-testid": "leftScrollArrow",
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    sx: function sx(theme) {
-      return {
-        width: '100px',
-        marginBottom: '-12px',
-        height: '34px',
-        backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
-        cursor: 'pointer',
-        marginRight: '-120px',
-        paddingTop: '6px',
-        paddingBottom: '6px',
-        "float": 'left',
-        zIndex: 1,
-        position: 'relative',
-        color: 'geowebColors.buttons.tertiary.default.color',
-        '&:hover': {
-          color: 'geowebColors.buttons.tertiary.activeMouseOver.color'
-        }
-      };
-    }
-  }), /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "serviceList"
+  }, /*#__PURE__*/React.createElement(Box, {
     sx: {
       width: '100%',
-      display: 'inline-flex',
+      display: 'block',
       alignItems: 'center',
-      overflowX: 'visible',
       "float": 'left',
       paddingLeft: '40px',
-      marginRight: "".concat(margin, "px"),
-      marginLeft: "".concat(-margin, "px"),
-      maxWidth: maxWidthValue,
+      paddingRight: '30px',
+      marginBottom: '5px',
       fontSize: '0.875rem'
     },
     ref: ref
@@ -12413,32 +13015,39 @@ var ServiceList = function ServiceList(_ref) {
       serviceId: serviceId,
       service: service,
       isSelected: (_a = activeServices[serviceId]) === null || _a === void 0 ? void 0 : _a.enabled,
+      isAllSelected: isAllSelected,
       isDisabled: activeServices[serviceId] === undefined
     });
-  })), layerSelectWidth + margin < width && /*#__PURE__*/React.createElement(ChevronRight // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  , {
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    sx: function sx(theme) {
-      return {
-        width: '100px',
-        marginBottom: '-12px',
-        height: '34px',
-        paddingTop: '6px',
-        paddingBottom: '6px',
-        backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(theme.palette.geowebColors.background.surfaceApp, " 51%)"),
-        right: '0px',
-        position: 'fixed',
-        cursor: 'pointer',
-        color: 'geowebColors.buttons.tertiary.default.color',
-        '&:hover': {
-          color: 'geowebColors.buttons.tertiary.activeMouseOver.color'
-        }
-      };
-    },
-    onMouseDown: onRightChevronPressed,
-    onMouseUp: onChevronMouseUp,
-    "data-testid": "rightScrollArrow"
-  }));
+  })));
+};
+
+var sortByService = function sortByService(serviceObj) {
+  return Object.entries(serviceObj).sort(function (_ref, _ref2) {
+    var _ref3 = _slicedToArray(_ref, 2),
+        a = _ref3[1];
+
+    var _ref4 = _slicedToArray(_ref2, 2),
+        b = _ref4[1];
+
+    return a.serviceName.localeCompare(b.serviceName);
+  }).reduce(function (r, _ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+        key = _ref6[0],
+        value = _ref6[1];
+
+    return Object.assign(Object.assign({}, r), _defineProperty({}, key, value));
+  }, {});
+};
+
+var ServiceListConnect = function ServiceListConnect(_ref7) {
+  var setHeight = _ref7.setHeight;
+  var activeServices = useSelector(function (store) {
+    return getActiveServices(store);
+  });
+  return /*#__PURE__*/React.createElement(ServiceList, {
+    setHeight: setHeight,
+    activeServices: sortByService(activeServices)
+  });
 };
 
 /* *
@@ -12454,21 +13063,9 @@ var ServiceList = function ServiceList(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-
-var ServiceListConnect = function ServiceListConnect(_ref) {
-  var layerSelectWidth = _ref.layerSelectWidth;
-  var activeServices = useSelector(function (store) {
-    return getActiveServices(store);
-  });
-  return /*#__PURE__*/React.createElement(ServiceList, {
-    layerSelectWidth: layerSelectWidth,
-    activeServices: activeServices
-  });
-};
-
 var styles$1 = {
   servicesContainer: {
     width: '300px',
@@ -12505,45 +13102,62 @@ var styles$1 = {
 
 var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   var services = _ref.services,
-      mapStoreRemoveService = _ref.mapStoreRemoveService;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      addServiceIsOpen = _React$useState2[0],
-      setAddServiceIsOpen = _React$useState2[1];
-
-  var _React$useState3 = React.useState({
-    isOpen: false,
-    serviceId: '',
-    serviceUrl: ''
-  }),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      editServiceIsOpen = _React$useState4[0],
-      setEditServiceIsOpen = _React$useState4[1];
+      layerSelectRemoveService = _ref.layerSelectRemoveService,
+      selectedLayers = _ref.selectedLayers,
+      setServicePopupInfo = _ref.setServicePopupInfo;
 
   var openAddService = function openAddService() {
-    setAddServiceIsOpen(true);
-  };
-
-  var closePopup = function closePopup() {
-    setAddServiceIsOpen(false);
-    setEditServiceIsOpen({
-      isOpen: false,
-      serviceId: '',
-      serviceUrl: ''
+    setServicePopupInfo({
+      isOpen: true,
+      popupVariant: 'add'
     });
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     sx: styles$1.servicesContainer,
     "data-testid": "ServiceDialog"
   }, /*#__PURE__*/React.createElement(Box, {
     sx: styles$1.header
-  }, "Services"), /*#__PURE__*/React.createElement(List, {
+  }, "Services"), /*#__PURE__*/React.createElement(Rows, {
+    services: services,
+    layerSelectRemoveService: layerSelectRemoveService,
+    setServicePopupInfo: setServicePopupInfo,
+    selectedLayers: selectedLayers
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: styles$1.footer
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: openAddService,
+    "data-testid": "openAddServiceButton",
+    sx: styles$1.button,
+    variant: "tertiary",
+    startIcon: /*#__PURE__*/React.createElement(Add, null)
+  }, "Add a new service")));
+};
+
+var Rows = function Rows(_ref2) {
+  var services = _ref2.services,
+      layerSelectRemoveService = _ref2.layerSelectRemoveService,
+      setServicePopupInfo = _ref2.setServicePopupInfo,
+      selectedLayers = _ref2.selectedLayers;
+
+  var checkIfServiceHasActiveLayers = function checkIfServiceHasActiveLayers(serviceUrl) {
+    var foundService = selectedLayers.find(function (object) {
+      return object.service === serviceUrl;
+    });
+    if (foundService) return true;
+    return false;
+  };
+
+  return /*#__PURE__*/React.createElement(List, {
     disablePadding: true
   }, Object.keys(services).map(function (serviceId) {
+    var _services$serviceId = services[serviceId],
+        serviceUrl = _services$serviceId.serviceUrl,
+        serviceName = _services$serviceId.serviceName,
+        isUserAddedService = _services$serviceId.isUserAddedService;
+    var serviceHasActiveLayers = checkIfServiceHasActiveLayers(serviceUrl);
     return /*#__PURE__*/React.createElement(ListItem, {
-      key: services[serviceId].serviceUrl
+      key: serviceUrl
     }, /*#__PURE__*/React.createElement(ListItemText, {
       style: {
         fontSize: '16px'
@@ -12554,53 +13168,59 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
         textOverflow: 'ellipsis',
         paddingRight: '60px'
       }
-    }, services[serviceId].serviceName)), /*#__PURE__*/React.createElement(ListItemSecondaryAction, {
+    }, serviceName)), /*#__PURE__*/React.createElement(ListItemSecondaryAction, {
       style: {
-        marginRight: '-10px'
-      }
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      title: "Edit Service",
-      disableHoverListener: !services[serviceId].isUserAddedService
+        marginRight: '-10px',
+        width: 90
+      }
+    }, /*#__PURE__*/React.createElement(Grid, {
+      container: true
+    }, /*#__PURE__*/React.createElement(Grid, {
+      item: true,
+      xs: 6
+    }, isUserAddedService ? /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Edit Service"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
-      disabled: !services[serviceId].isUserAddedService,
+      "aria-label": "edit service",
       "data-testid": "openEditServiceButton",
       size: "large",
       onClick: function onClick() {
-        setEditServiceIsOpen({
+        setServicePopupInfo({
           isOpen: true,
           serviceId: serviceId,
-          serviceUrl: services[serviceId].serviceUrl
+          serviceUrl: serviceUrl,
+          popupVariant: 'edit'
         });
       }
-    }, /*#__PURE__*/React.createElement(Edit, null)))), /*#__PURE__*/React.createElement(Tooltip, {
-      title: "Delete Service",
-      disableHoverListener: !services[serviceId].isUserAddedService
+    }, /*#__PURE__*/React.createElement(Edit, null)))) : /*#__PURE__*/React.createElement(Tooltip, {
+      title: "Show Service"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
+      "aria-label": "show service",
+      "data-testid": "openShowServiceButton",
       size: "large",
-      disabled: !services[serviceId].isUserAddedService,
       onClick: function onClick() {
-        return mapStoreRemoveService(serviceId, services[serviceId].serviceUrl);
-      },
-      "data-testid": "removeServiceButton"
-    }, /*#__PURE__*/React.createElement(Delete, null))))));
-  })), /*#__PURE__*/React.createElement(Box, {
-    sx: styles$1.footer
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: openAddService,
-    "data-testid": "openAddServiceButton",
-    sx: styles$1.button,
-    variant: "tertiary",
-    startIcon: /*#__PURE__*/React.createElement(Add, null)
-  }, "Add a new service"))), addServiceIsOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
-    servicePopupVariant: "add",
-    isOpen: addServiceIsOpen,
-    closePopup: closePopup
-  }), editServiceIsOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
-    servicePopupVariant: "edit",
-    isOpen: editServiceIsOpen.isOpen,
-    closePopup: closePopup,
-    serviceId: editServiceIsOpen.serviceId,
-    url: editServiceIsOpen.serviceUrl
+        setServicePopupInfo({
+          isOpen: true,
+          serviceId: serviceId,
+          serviceUrl: serviceUrl,
+          popupVariant: 'show'
+        });
+      }
+    }, /*#__PURE__*/React.createElement(Visibility, null))))), /*#__PURE__*/React.createElement(Grid, {
+      item: true,
+      xs: 6
+    }, isUserAddedService && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Tooltip, {
+      title: serviceHasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service',
+      "data-testid": "removeServiceTooltip"
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
+      "data-testid": "removeServiceButton",
+      "aria-label": "delete service",
+      size: "large",
+      disabled: serviceHasActiveLayers,
+      onClick: function onClick() {
+        return layerSelectRemoveService(serviceId, serviceUrl);
+      }
+    }, /*#__PURE__*/React.createElement(Delete, null)))))))));
   }));
 };
 
@@ -12621,45 +13241,59 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
-var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect() {
+var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
+  var mapId = _ref.mapId,
+      setServicePopupInfo = _ref.setServicePopupInfo;
   var dispatch = useDispatch();
-  var mapStoreRemoveService = React.useCallback(function (serviceId, serviceUrl) {
-    dispatch(serviceActions.mapStoreRemoveService({
-      id: serviceId,
+  var layerSelectRemoveService = React.useCallback(function (serviceId, serviceUrl) {
+    dispatch(layerSelectActions.layerSelectRemoveService({
+      serviceId: serviceId,
       serviceUrl: serviceUrl
     }));
   }, [dispatch]);
   var services = useSelector(function (store) {
     return getActiveServices(store);
   });
+  var selectedLayers = useSelector(function (store) {
+    return getMapLayers(store, mapId);
+  });
   return /*#__PURE__*/React.createElement(ServiceOptionsDialog, {
+    selectedLayers: selectedLayers,
     services: services,
-    mapStoreRemoveService: mapStoreRemoveService
+    layerSelectRemoveService: layerSelectRemoveService,
+    setServicePopupInfo: setServicePopupInfo
   });
 };
 
-/* *
- * 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 ServiceOptionsButton = function ServiceOptionsButton(_ref) {
+  var mapId = _ref.mapId;
 
-var ServiceOptionsButton = function ServiceOptionsButton() {
-  return /*#__PURE__*/React.createElement(ToggleMenu, {
+  var _React$useState = React.useState({
+    isOpen: false
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      servicePopupInfo = _React$useState2[0],
+      setServicePopupInfo = _React$useState2[1];
+
+  var closePopup = function closePopup() {
+    setServicePopupInfo({
+      isOpen: false
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleMenu, {
     buttonTestId: "serviceOptionsButton",
     menuPosition: "bottom"
-  }, /*#__PURE__*/React.createElement(ServiceOptionsDialogConnect, null));
+  }, /*#__PURE__*/React.createElement(ServiceOptionsDialogConnect, {
+    setServicePopupInfo: setServicePopupInfo,
+    mapId: mapId
+  })), /*#__PURE__*/React.createElement(ServicePopupConnect, {
+    servicePopupVariant: servicePopupInfo.popupVariant,
+    isOpen: servicePopupInfo.isOpen,
+    closePopup: closePopup,
+    serviceId: servicePopupInfo.serviceId,
+    url: servicePopupInfo.serviceUrl
+  }));
 };
 
 var LayerSelect = function LayerSelect(_ref) {
@@ -12675,6 +13309,7 @@ var LayerSelect = function LayerSelect(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'module' : _ref$source;
+  var initialServiceListHeight = 37;
 
   var _React$useState = React.useState(500),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -12686,6 +13321,11 @@ var LayerSelect = function LayerSelect(_ref) {
       width = _React$useState4[0],
       setWidth = _React$useState4[1];
 
+  var _React$useState5 = React.useState(initialServiceListHeight),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      serviceListHeight = _React$useState6[0],
+      setServiceListHeight = _React$useState6[1];
+
   var onChangeSize = function onChangeSize(_ref2) {
     var height = _ref2.height,
         width = _ref2.width;
@@ -12693,6 +13333,12 @@ var LayerSelect = function LayerSelect(_ref) {
     setWidth(width);
   };
 
+  var handleHeightChange = function handleHeightChange(height) {
+    if (height > initialServiceListHeight) {
+      setServiceListHeight(height);
+    }
+  };
+
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: showTitle ? "Layer Select ".concat(mapId) : 'Layer Select',
     startSize: {
@@ -12733,52 +13379,156 @@ var LayerSelect = function LayerSelect(_ref) {
       margin: '12px 0 0 calc(100% - 36px)',
       zIndex: 2
     }
-  }, /*#__PURE__*/React.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      height: '48px'
-    }
-  }, /*#__PURE__*/React.createElement(ServiceListConnect, {
-    layerSelectWidth: width
+  }, /*#__PURE__*/React.createElement(ServiceOptionsButton, {
+    mapId: mapId
+  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ServiceListConnect, {
+    setHeight: handleHeightChange
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
       padding: '0 8px'
     }
   }, /*#__PURE__*/React.createElement(LayerListConnect, {
     mapId: mapId,
-    layerSelectHeight: height
+    layerSelectHeight: height,
+    serviceListHeight: serviceListHeight
   })));
 };
 
+/* *
+ * 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 useSetupDialog = function useSetupDialog(dialogType) {
+  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
+    }));
+  }, [dialogType, dispatch]);
+  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);
+  });
+  return {
+    setDialogOrder: setDialogOrder,
+    dialogOrder: dialogOrder,
+    onCloseDialog: onCloseDialog,
+    uiSource: uiSource,
+    isDialogOpen: isDialogOpen
+  };
+};
+
 var FilterListItem = function FilterListItem(_ref) {
-  var keyword = _ref.keyword,
-      toggleKeywords = _ref.toggleKeywords,
-      enableOnlyOneKeyword = _ref.enableOnlyOneKeyword;
+  var filter = _ref.filter,
+      toggleFilter = _ref.toggleFilter,
+      enableOnlyOneFilter = _ref.enableOnlyOneFilter;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      hovering = _React$useState2[0],
-      setHovering = _React$useState2[1];
+      isHovering = _React$useState2[0],
+      setIsHovering = _React$useState2[1];
 
-  var handleMouseOver = React.useCallback(function () {
-    setHovering(true);
+  var handleMouseEnter = React.useCallback(function () {
+    setIsHovering(true);
   }, []);
   var handleMouseLeave = React.useCallback(function () {
-    setHovering(false);
+    setIsHovering(false);
   }, []);
 
-  var selectOnlyOne = function selectOnlyOne(keyword) {
-    enableOnlyOneKeyword(keyword);
+  var selectOnlyOne = function selectOnlyOne(filterId) {
+    enableOnlyOneFilter(filterId);
   };
 
-  var toggleCheckbox = function toggleCheckbox(keyword) {
-    toggleKeywords([keyword]);
+  var toggleCheckbox = function toggleCheckbox(filterId) {
+    toggleFilter([filterId]);
+  };
+
+  var mouseMoveRef = React.useRef(null);
+  React.useEffect(function () {
+    window.addEventListener('mousemove', checkHover, true);
+    return function () {
+      window.removeEventListener('mousemove', checkHover, true);
+    };
+  });
+
+  var checkHover = function checkHover(e) {
+    if (mouseMoveRef.current) {
+      var mouseOver = mouseMoveRef.current.contains(e.target);
+
+      if (!isHovering && mouseOver) {
+        handleMouseEnter();
+      }
+
+      if (isHovering && !mouseOver) {
+        handleMouseLeave();
+      }
+    }
   };
 
-  if (keyword.amountVisible !== 0) {
+  if (filter.amountVisible !== 0) {
     return /*#__PURE__*/React.createElement("div", {
-      onMouseOver: handleMouseOver,
+      ref: mouseMoveRef,
+      onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      onFocus: handleMouseOver,
+      onFocus: handleMouseEnter,
       onBlur: handleMouseLeave,
       "data-testid": "filterResultListItem"
     }, /*#__PURE__*/React.createElement(ListItem, {
@@ -12796,9 +13546,9 @@ var FilterListItem = function FilterListItem(_ref) {
       }
     }, /*#__PURE__*/React.createElement(Checkbox, {
       color: "secondary",
-      checked: keyword.checked,
+      checked: filter.checked,
       onChange: function onChange() {
-        return toggleCheckbox(keyword.id);
+        return toggleCheckbox(filter.id);
       },
       sx: {
         paddingTop: '6px',
@@ -12814,14 +13564,14 @@ var FilterListItem = function FilterListItem(_ref) {
         whiteSpace: 'nowrap',
         overflow: 'hidden'
       }
-    }, keyword.id), hovering ? /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
+    }, filter.name, " (", filter.amountVisible, ")"), isHovering ? /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(IconButton, {
       style: {
         backgroundColor: 'transparent'
       },
       edge: "end",
       size: "small",
       onClick: function onClick() {
-        return selectOnlyOne(keyword.id);
+        return selectOnlyOne(filter.id);
       },
       "data-testid": "onlyButton"
     }, /*#__PURE__*/React.createElement(Typography, {
@@ -12854,25 +13604,22 @@ var FilterListItem = function FilterListItem(_ref) {
  * */
 
 var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemConnect(_ref) {
-  var keyword = _ref.keyword;
+  var filter = _ref.filter;
   var dispatch = useDispatch();
-  var toggleKeywords = React.useCallback(function (keywords) {
-    dispatch(layerSelectActions.toggleKeywords({
-      keywords: keywords
+  var toggleFilter = React.useCallback(function (filterIds) {
+    dispatch(layerSelectActions.toggleFilter({
+      filterIds: filterIds
     }));
   }, [dispatch]);
-  var enableOnlyOneKeyword = React.useCallback(function (keyword) {
-    dispatch(layerSelectActions.enableOnlyOneKeyword({
-      keyword: keyword
+  var enableOnlyOneFilter = React.useCallback(function (filterId) {
+    dispatch(layerSelectActions.enableOnlyOneFilter({
+      filterId: filterId
     }));
   }, [dispatch]);
-  var keywordObject = useSelector(function (store) {
-    return getKeywordObjectById(store, keyword);
-  });
   return /*#__PURE__*/React.createElement(FilterListItem, {
-    keyword: keywordObject,
-    toggleKeywords: toggleKeywords,
-    enableOnlyOneKeyword: enableOnlyOneKeyword
+    filter: filter,
+    toggleFilter: toggleFilter,
+    enableOnlyOneFilter: enableOnlyOneFilter
   });
 };
 
@@ -12895,54 +13642,37 @@ var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemC
 
 var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchConnect() {
   var dispatch = useDispatch();
-  var allKeywordsActive = useSelector(function (store) {
-    return isAllKeywordsChecked(store);
+  var allFiltersActive = useSelector(function (store) {
+    return isAllFiltersChecked(store);
   });
-  var allKeywordIds = useSelector(function (store) {
-    return getAllKeywordIds(store);
+  var allFilterIds = useSelector(function (store) {
+    return getAllFilterIds(store);
   });
-  var checkedKeywordIds = useSelector(function (store) {
-    return getCheckedKeywordIds(store);
+  var checkedFilterIds = useSelector(function (store) {
+    return getCheckedFilterIds(store);
   });
-  var toggleKeywords = React.useCallback(function () {
-    var keywords = allKeywordsActive ? checkedKeywordIds : allKeywordIds.filter(function (id) {
-      return !checkedKeywordIds.includes(id);
+  var toggleFilters = React.useCallback(function () {
+    var filterIds = allFiltersActive ? checkedFilterIds : allFilterIds.filter(function (id) {
+      return !checkedFilterIds.includes(id);
     });
-    dispatch(layerSelectActions.toggleKeywords({
-      keywords: keywords
+    dispatch(layerSelectActions.toggleFilter({
+      filterIds: filterIds
     }));
-  }, [allKeywordIds, allKeywordsActive, checkedKeywordIds, dispatch]);
+  }, [allFilterIds, allFiltersActive, checkedFilterIds, dispatch]);
   return /*#__PURE__*/React.createElement(Switch, {
-    checked: allKeywordsActive,
-    onChange: toggleKeywords,
+    checked: allFiltersActive,
+    onChange: toggleFilters,
     "data-testid": "customSwitch"
   });
 };
 
-/* *
- * 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 DIALOG_TITLE = 'Groups & Keywords';
 
 var KeywordFilterResults = function KeywordFilterResults(_ref) {
-  var allKeywordIds = _ref.allKeywordIds,
-      mapId = _ref.mapId,
+  var filters = _ref.filters,
       bounds = _ref.bounds,
       _ref$onClose = _ref.onClose,
       onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      showTitle = _ref.showTitle,
       isOpen = _ref.isOpen,
       _ref$onMouseDown = _ref.onMouseDown,
       onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
@@ -12950,8 +13680,26 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'module' : _ref$source;
+
+  var _a, _b;
+
+  var filtersGroupedByType = groupBy(filters, function (filter) {
+    return filter.type;
+  });
+  var groups = (_a = filtersGroupedByType['group']) !== null && _a !== void 0 ? _a : [];
+
+  var groupsSorted = _toConsumableArray(groups).sort(function (a, b) {
+    return a.name.localeCompare(b.name);
+  });
+
+  var keywords = (_b = filtersGroupedByType['keyword']) !== null && _b !== void 0 ? _b : [];
+
+  var keywordsSorted = _toConsumableArray(keywords).sort(function (a, b) {
+    return a.name.localeCompare(b.name);
+  });
+
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    title: showTitle ? "Filter Results ".concat(mapId) : 'Filter Results',
+    title: DIALOG_TITLE,
     "data-testid": "keywordFilterResults",
     startSize: {
       width: 349,
@@ -13002,10 +13750,15 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
     style: {
       padding: '0px'
     }
-  }, allKeywordIds.map(function (keywordId) {
+  }, /*#__PURE__*/React.createElement(ListSubheader, null, "Groups"), groupsSorted.map(function (group) {
+    return /*#__PURE__*/React.createElement(KeywordFilterResultsListItemConnect, {
+      key: group.id,
+      filter: group
+    });
+  }), /*#__PURE__*/React.createElement(ListSubheader, null, "Keywords"), keywordsSorted.map(function (keyword) {
     return /*#__PURE__*/React.createElement(KeywordFilterResultsListItemConnect, {
-      key: keywordId,
-      keyword: keywordId
+      key: keyword.id,
+      filter: keyword
     });
   })));
 };
@@ -13028,78 +13781,63 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
  * */
 
 var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
-  var bounds = _ref.bounds,
-      _ref$showTitle = _ref.showTitle,
-      showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle;
-  var dispatch = useDispatch();
-  var mapId = useSelector(function (store) {
-    return getDialogMapId(store, 'keywordFilter');
-  });
-  var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'keywordFilter');
-  });
-  var onClose = React.useCallback(function () {
-    return dispatch(uiActions.setToggleOpenDialog({
-      type: 'keywordFilter',
-      setOpen: false
-    }));
-  }, [dispatch]);
-  var isMapPresent = useSelector(function (store) {
-    return getIsMapPresent(store, mapId);
-  });
-  var uiOrder = useSelector(function (store) {
-    return getDialogOrder(store, 'keywordFilter');
-  });
-  var uiSource = useSelector(function (store) {
-    return getDialogSource(store, 'keywordFilter');
-  });
-  var uiIsOrderedOnTop = useSelector(function (store) {
-    return getDialogIsOrderedOnTop(store, 'keywordFilter');
-  }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
+  var bounds = _ref.bounds;
 
-  React.useEffect(function () {
-    if (mapId !== '' && !isMapPresent) {
-      onClose();
-    }
-  }, [mapId, isMapPresent, onClose]);
-  var registerDialog = React.useCallback(function () {
-    return dispatch(uiActions.registerDialog({
-      type: 'keywordFilter',
-      setOpen: false
-    }));
-  }, [dispatch]);
-  var unregisterDialog = React.useCallback(function () {
-    return dispatch(uiActions.unregisterDialog({
-      type: 'keywordFilter'
-    }));
-  }, [dispatch]);
-  var onOrderDialog = React.useCallback(function () {
-    if (!uiIsOrderedOnTop) {
-      dispatch(uiActions.orderDialog({
-        type: 'keywordFilter'
-      }));
-    }
-  }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
+  var _useSetupDialog = useSetupDialog('keywordFilter'),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      onCloseDialog = _useSetupDialog.onCloseDialog,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      isDialogOpen = _useSetupDialog.isDialogOpen,
+      uiSource = _useSetupDialog.uiSource;
 
-  React.useEffect(function () {
-    registerDialog();
-    return function () {
-      unregisterDialog();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  var allKeywordIds = useSelector(function (store) {
-    return getAllKeywordIds(store);
-  });
+  var filters = useSelector(getAllFilters);
   return /*#__PURE__*/React.createElement(KeywordFilterResults, {
-    allKeywordIds: allKeywordIds,
-    mapId: mapId,
     bounds: bounds,
-    isOpen: isOpenInStore,
-    onClose: onClose,
-    showTitle: showTitle,
-    onMouseDown: onOrderDialog,
-    order: uiOrder,
-    source: uiSource
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource,
+    filters: filters
+  });
+};
+
+/* *
+ * 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 LayerInfoDialogConnect = function LayerInfoDialogConnect() {
+  var layer = useSelector(function (store) {
+    return getActiveLayerInfo(store);
+  });
+
+  var _useSetupDialog = useSetupDialog(DialogTypes.LayerInfo),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      onCloseDialog = _useSetupDialog.onCloseDialog,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      uiSource = _useSetupDialog.uiSource,
+      isDialogOpen = _useSetupDialog.isDialogOpen;
+
+  return /*#__PURE__*/React__default.createElement(LayerInfoDialog, {
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource,
+    layer: layer
   });
 };
 
@@ -13127,72 +13865,43 @@ var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
  * ``` <LayerSelectConnect />```
  */
 
-var LayerSelectConnect = function LayerSelectConnect(_ref) {
-  var bounds = _ref.bounds,
-      _ref$showTitle = _ref.showTitle,
-      showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
-      _ref$preloadedService = _ref.preloadedServices,
-      preloadedServices = _ref$preloadedService === void 0 ? preloadedDefaultMapServices : _ref$preloadedService;
+var LayerSelectConnect = function LayerSelectConnect(_ref) {
+  var bounds = _ref.bounds,
+      _ref$showTitle = _ref.showTitle,
+      showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle;
+  var mapId = useSelector(function (store) {
+    return getDialogMapId(store, 'layerSelect');
+  });
+
+  var _useSetupDialog = useSetupDialog('layerSelect'),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      isDialogOpen = _useSetupDialog.isDialogOpen,
+      onCloseDialog = _useSetupDialog.onCloseDialog,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      uiSource = _useSetupDialog.uiSource;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LayerSelect, {
+    mapId: mapId,
+    bounds: bounds,
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
+    showTitle: showTitle,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
+    source: uiSource
+  }), /*#__PURE__*/React.createElement(KeywordFilterResultsConnect, null), /*#__PURE__*/React.createElement(LayerInfoDialogConnect, null));
+};
+
+var useFetchServices = function useFetchServices(dialogType) {
+  var preloadedServices = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : preloadedDefaultMapServices;
   var dispatch = useDispatch();
 
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
 
-  var mapId = useSelector(function (store) {
-    return getDialogMapId(store, 'layerSelect');
-  });
   var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'layerSelect');
-  });
-  var onClose = React.useCallback(function () {
-    return dispatch(uiActions.setToggleOpenDialog({
-      type: 'layerSelect',
-      setOpen: false
-    }));
-  }, [dispatch]);
-  var isMapPresent = useSelector(function (store) {
-    return getIsMapPresent(store, mapId);
-  });
-  var uiOrder = useSelector(function (store) {
-    return getDialogOrder(store, 'layerSelect');
-  });
-  var uiSource = useSelector(function (store) {
-    return getDialogSource(store, 'layerSelect');
+    return getisDialogOpen(store, dialogType);
   });
-  var uiIsOrderedOnTop = useSelector(function (store) {
-    return getDialogIsOrderedOnTop(store, 'layerSelect');
-  }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
-
-  React.useEffect(function () {
-    if (mapId !== '' && !isMapPresent) {
-      onClose();
-    }
-  }, [mapId, isMapPresent, onClose]);
-  var registerDialog = React.useCallback(function () {
-    return dispatch(uiActions.registerDialog({
-      type: 'layerSelect',
-      setOpen: false
-    }));
-  }, [dispatch]);
-  var unregisterDialog = React.useCallback(function () {
-    return dispatch(uiActions.unregisterDialog({
-      type: 'layerSelect'
-    }));
-  }, [dispatch]);
-  var onOrderDialog = React.useCallback(function () {
-    if (!uiIsOrderedOnTop) {
-      dispatch(uiActions.orderDialog({
-        type: 'layerSelect'
-      }));
-    }
-  }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
-
-  React.useEffect(function () {
-    registerDialog();
-    return function () {
-      unregisterDialog();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   var serviceSetLayers = React.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
@@ -13212,7 +13921,9 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
               name: service.name,
               serviceUrl: service.url,
               layers: layers,
-              isUserAddedService: checkIfUserAddedService(service)
+              isUserAddedService: checkIfUserAddedService(service),
+              // first try to load the user abstract, otherwise the service abstract
+              "abstract": service["abstract"] || wmService["abstract"]
             });
           }
         })["catch"](function () {
@@ -13222,16 +13933,11 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [isOpenInStore, preloadedServices, serviceSetLayers]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LayerSelect, {
-    mapId: mapId,
-    bounds: bounds,
-    isOpen: isOpenInStore,
-    onClose: onClose,
-    showTitle: showTitle,
-    onMouseDown: onOrderDialog,
-    order: uiOrder,
-    source: uiSource
-  }), /*#__PURE__*/React.createElement(KeywordFilterResultsConnect, null));
+};
+var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
+  return Object.values(Object.assign(Object.assign({}, presets.reduce(function (byUrl, preset) {
+    return Object.assign(Object.assign({}, byUrl), _defineProperty({}, preset.url, preset));
+  }, {})), userAddedServices));
 };
 
 /* *
@@ -13250,6 +13956,7 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
+var dialogType = 'layerManager';
 /**
  * Layer Managerconnected to the store displaying the layers forthe active map Id
  * Please note that in order to use this and open/close the dialog, every map on the screen that should be able to show
@@ -13273,87 +13980,41 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect,
       _ref$leftComponent = _ref.leftComponent,
       leftComponent = _ref$leftComponent === void 0 ? null : _ref$leftComponent;
-  var dispatch = useDispatch();
-  var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'layerManager');
-  });
   var mapId = useSelector(function (store) {
-    return getDialogMapId(store, 'layerManager');
-  });
-  var onClose = React.useCallback(function () {
-    return dispatch(uiActions.setToggleOpenDialog({
-      type: 'layerManager',
-      setOpen: false
-    }));
-  }, [dispatch]);
-  var isMapPresent = useSelector(function (store) {
-    return getIsMapPresent(store, mapId);
-  });
-  var uiOrder = useSelector(function (store) {
-    return getDialogOrder(store, 'layerManager');
-  });
-  var uiSource = useSelector(function (store) {
-    return getDialogSource(store, 'layerManager');
-  });
-  var uiIsOrderedOnTop = useSelector(function (store) {
-    return getDialogIsOrderedOnTop(store, 'layerManager');
+    return getDialogMapId(store, dialogType);
   });
   var isMapPresetLoading = useSelector(function (store) {
     return getIsMapPresetLoading(store, mapId);
   });
   var mapPresetError = useSelector(function (store) {
     return getMapPresetError(store, mapId);
-  }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
+  });
 
-  React.useEffect(function () {
-    if (mapId !== '' && !isMapPresent) {
-      onClose();
-    }
-  }, [mapId, isMapPresent, onClose]);
-  var registerDialog = React.useCallback(function () {
-    return dispatch(uiActions.registerDialog({
-      type: 'layerManager',
-      setOpen: false
-    }));
-  }, [dispatch]);
-  var unregisterDialog = React.useCallback(function () {
-    return dispatch(uiActions.unregisterDialog({
-      type: 'layerManager'
-    }));
-  }, [dispatch]);
-  var onOrderDialog = React.useCallback(function () {
-    if (!uiIsOrderedOnTop) {
-      dispatch(uiActions.orderDialog({
-        type: 'layerManager'
-      }));
-    }
-  }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
+  var _useSetupDialog = useSetupDialog(dialogType),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      onCloseDialog = _useSetupDialog.onCloseDialog,
+      isDialogOpen = _useSetupDialog.isDialogOpen,
+      uiSource = _useSetupDialog.uiSource;
 
-  React.useEffect(function () {
-    registerDialog();
-    return function () {
-      unregisterDialog();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  useFetchServices(dialogType, preloadedMapServices);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LayerManager, {
     mapId: mapId,
     preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
     preloadedMapServices: preloadedMapServices,
     preloadedBaseServices: preloadedBaseServices,
     bounds: bounds,
-    isOpen: isOpenInStore,
-    onClose: onClose,
+    isOpen: isDialogOpen,
+    onClose: onCloseDialog,
     showTitle: showTitle,
-    onMouseDown: onOrderDialog,
-    order: uiOrder,
+    onMouseDown: setDialogOrder,
+    order: dialogOrder,
     source: uiSource,
     layerSelect: layerSelect,
     leftComponent: leftComponent,
     isLoading: isMapPresetLoading,
     error: mapPresetError
-  }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectConnect, {
-    preloadedServices: preloadedMapServices
-  }));
+  }), layerSelect && /*#__PURE__*/React.createElement(LayerSelectConnect, null));
 };
 
 /* *
@@ -13595,7 +14256,7 @@ var getDimensionIcon = function getDimensionIcon(iconType) {
     return Equalizer;
   }
 
-  return Sort;
+  return DimensionsElevation;
 };
 
 /* *
@@ -13885,7 +14546,7 @@ var DimensionSelectDialogConnect = function DimensionSelectDialogConnect(_ref) {
       _ref$order = _ref.order,
       order = _ref$order === void 0 ? 0 : _ref$order,
       onMouseDown = _ref.onMouseDown,
-      onToggleDialog = _ref.onToggleDialog,
+      onCloseDialog = _ref.onCloseDialog,
       _ref$index = _ref.index,
       index = _ref$index === void 0 ? 0 : _ref$index,
       _ref$source = _ref.source,
@@ -13940,9 +14601,7 @@ var DimensionSelectDialogConnect = function DimensionSelectDialogConnect(_ref) {
     headerSize: "small",
     isOpen: isOpen,
     "data-testid": "multidimensionContent-".concat(title),
-    onClose: function onClose() {
-      return onToggleDialog(false);
-    },
+    onClose: onCloseDialog,
     bounds: "parent",
     onMouseDown: onMouseDown,
     order: order,
@@ -13989,71 +14648,26 @@ var getDimensionType = function getDimensionType(dimensionName) {
 var MultiMapSingleDimensionSelectConnect = function MultiMapSingleDimensionSelectConnect(_ref) {
   var dimensionName = _ref.dimensionName,
       index = _ref.index;
-  var dispatch = useDispatch();
   var uiDialogType = getDimensionType(dimensionName);
   var mapId = useSelector(function (store) {
     return getDialogMapId(store, uiDialogType);
   });
-  var uiOrder = useSelector(function (store) {
-    return getDialogOrder(store, uiDialogType);
-  });
-  var uiSource = useSelector(function (store) {
-    return getDialogSource(store, uiDialogType);
-  });
-  var uiIsOrderedOnTop = useSelector(function (store) {
-    return getDialogIsOrderedOnTop(store, uiDialogType);
-  });
-  var isOpen = useSelector(function (store) {
-    return getisDialogOpen(store, uiDialogType);
-  });
-  var isMapPresent = useSelector(function (store) {
-    return getIsMapPresent(store, mapId);
-  });
-  var onOrderDialog = React.useCallback(function () {
-    if (!uiIsOrderedOnTop) {
-      dispatch(uiActions.orderDialog({
-        type: uiDialogType
-      }));
-    }
-  }, [dispatch, uiDialogType, uiIsOrderedOnTop]);
-  var onToggleDialog = React.useCallback(function (setOpen) {
-    dispatch(uiActions.setToggleOpenDialog({
-      type: uiDialogType,
-      setOpen: setOpen
-    }));
-  }, [dispatch, uiDialogType]);
-  var registerDialog = React.useCallback(function (activeMapId) {
-    return dispatch(uiActions.registerDialog({
-      type: uiDialogType,
-      mapId: activeMapId
-    }));
-  }, [dispatch, uiDialogType]);
-  var unregisterDialog = React.useCallback(function () {
-    return dispatch(uiActions.unregisterDialog({
-      type: uiDialogType
-    }));
-  }, [dispatch, uiDialogType]); // Check to ensure the currently active map is still present on screen - if not, close the dialog
 
-  React.useEffect(function () {
-    if (mapId !== '' && !isMapPresent) {
-      onToggleDialog(false);
-    }
-  }, [mapId, isMapPresent, onToggleDialog]); // Register this dialog in the store
+  var _useSetupDialog = useSetupDialog(uiDialogType),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      isDialogOpen = _useSetupDialog.isDialogOpen,
+      onCloseDialog = _useSetupDialog.onCloseDialog,
+      setDialogOrder = _useSetupDialog.setDialogOrder,
+      uiSource = _useSetupDialog.uiSource;
 
-  React.useEffect(function () {
-    registerDialog(mapId);
-    return function () {
-      unregisterDialog();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   return /*#__PURE__*/React.createElement(DimensionSelectDialogConnect, {
     mapId: mapId,
     dimensionName: dimensionName,
-    onMouseDown: onOrderDialog,
-    onToggleDialog: onToggleDialog,
-    order: uiOrder,
+    onMouseDown: setDialogOrder,
+    onCloseDialog: onCloseDialog,
+    order: dialogOrder,
     source: uiSource,
-    isOpen: isOpen,
+    isOpen: isDialogOpen,
     index: index
   });
 };
@@ -14225,214 +14839,230 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
   }))));
 };
 
-var speedTooltipTitle = 'Speed';
-
-var SpeedButton = function SpeedButton(_ref) {
-  var animationDelay = _ref.animationDelay,
-      setMapAnimationDelay = _ref.setMapAnimationDelay;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      open = _React$useState2[0],
-      setOpen = _React$useState2[1];
-
-  var marks = speedFactors.map(function (speedFactor, i) {
-    return {
-      delay: getSpeedDelay(speedFactor),
-      markPos: i,
-      text: "".concat(speedFactor, "x")
-    };
-  });
-  var max = marks.length - 1;
-  var min = 0;
-  var currentValue = marks.findIndex(function (info) {
-    return info.delay === animationDelay;
+var TimeSliderMenu = function TimeSliderMenu(_ref) {
+  var marks = _ref.marks,
+      value = _ref.value,
+      isOpenByDefault = _ref.isOpenByDefault,
+      handleMenuItemClick = _ref.handleMenuItemClick,
+      isDisabled = _ref.isDisabled,
+      handleAutoClick = _ref.handleAutoClick,
+      isAutoSelected = _ref.isAutoSelected,
+      title = _ref.title,
+      icon = _ref.icon;
+  var currentMark = marks.find(function (mark) {
+    return mark.value === value;
   });
 
-  var getAnimationDelayValue = function getAnimationDelayValue(markPos) {
-    return marks[markPos].delay || marks[0].delay;
-  };
-
-  var onClickButton = function onClickButton() {
-    setOpen(!open);
-  };
-
-  var onChangeSlider = function onChangeSlider(event, value) {
-    var newValue = getAnimationDelayValue(value);
-
-    if (event.type !== 'keydown') {
-      setMapAnimationDelay(newValue);
-    }
-  };
-
-  var onKeyDown = function onKeyDown(event) {
-    // disable default Slider behavior
-    event.stopPropagation();
-    event.preventDefault(); // custom logic
-
-    if (event.key === 'Tab') {
-      setOpen(!open);
-    }
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      anchorRef = _React$useState2[0],
+      setAnchorRef = _React$useState2[1];
 
-    var newValue = getValueFromKeyboardEvent(event, currentValue, min, max);
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
 
-    if (newValue !== null) {
-      setMapAnimationDelay(getAnimationDelayValue(newValue));
+  React.useEffect(function () {
+    if (anchorRef && isOpenByDefault) {
+      setOpen(true);
     }
-  };
-
-  var text = marks[currentValue].text;
+  }, [anchorRef, isOpenByDefault]);
   return /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      height: '24px',
-      width: '24px',
-      position: 'relative'
+    onKeyDown: function onKeyDown(event) {
+      event.stopPropagation();
     }
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: speedTooltipTitle
+    title: title
   }, /*#__PURE__*/React.createElement(ToolButton, {
-    onClick: onClickButton,
+    onClick: function onClick() {
+      setOpen(true);
+    },
+    ref: setAnchorRef,
     active: true,
-    "data-testid": "speedButton"
-  }, /*#__PURE__*/React.createElement(TextIcon, {
-    text: text
-  }))), open ? /*#__PURE__*/React.createElement(Box, {
+    width: "58px"
+  }, icon, /*#__PURE__*/React.createElement(TextIcon, {
+    text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
+  }))), /*#__PURE__*/React.createElement(Menu, {
+    anchorEl: anchorRef,
+    open: open,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    BackdropProps: {
+      sx: {
+        backgroundColor: 'transparent'
+      }
+    },
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    disabled: true,
     sx: {
-      padding: '0 0 60px 0',
-      backgroundColor: 'geowebColors.background.surface',
-      width: '95px',
-      height: '150px',
-      position: 'absolute',
-      bottom: '35px'
+      fontSize: '12px',
+      opacity: 0.67,
+      padding: '0px 12px',
+      '&.MuiMenuItem-root': {
+        minHeight: '30px!important'
+      }
     }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: sliderHeaderStyle
-  }, "Speed"), /*#__PURE__*/React.createElement(CustomSlider, {
-    "data-testid": "speedSlider",
-    orientation: "vertical",
-    value: currentValue,
-    step: null,
-    max: max,
-    min: min,
-    marks: marks.map(function (_ref2) {
-      var markPos = _ref2.markPos,
-          text = _ref2.text;
-      return {
-        value: markPos,
-        label: text
-      };
-    }),
-    onChange: onChangeSlider,
-    onKeyDown: onKeyDown
-  })) : null);
+  }, title), marks.map(function (mark) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      onClick: function onClick() {
+        handleMenuItemClick(mark);
+        setOpen(false);
+      },
+      key: mark.value,
+      selected: (currentMark === null || currentMark === void 0 ? void 0 : currentMark.value) === mark.value,
+      disabled: isDisabled
+    }, mark.label || mark.text);
+  }), handleAutoClick && /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: function onClick() {
+      handleAutoClick();
+      setOpen(false);
+    },
+    selected: isAutoSelected,
+    disabled: isDisabled
+  }, "Auto")));
+};
+
+var speedTooltipTitle = 'Speed';
+
+var SpeedButton = function SpeedButton(_ref) {
+  var animationDelay = _ref.animationDelay,
+      setMapAnimationDelay = _ref.setMapAnimationDelay;
+
+  var sorted = _toConsumableArray(speedFactors).sort(function (a, b) {
+    return b - a;
+  });
+
+  var marks = sorted.map(function (speedFactor) {
+    return {
+      value: getSpeedDelay(speedFactor),
+      text: "x".concat(speedFactor),
+      label: "x".concat(speedFactor)
+    };
+  });
+  return /*#__PURE__*/React.createElement(TimeSliderMenu, {
+    handleMenuItemClick: function handleMenuItemClick(mark) {
+      setMapAnimationDelay(mark.value);
+    },
+    icon: /*#__PURE__*/React.createElement(Speed, null),
+    marks: marks,
+    title: speedTooltipTitle,
+    value: animationDelay
+  });
 };
 
-var timeStepMarks = [{
-  value: 1,
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * */
+var marks$1 = [{
   label: '1 min',
-  timeStepValue: 1,
+  value: 1,
   text: '1m'
 }, {
-  value: 2,
   label: '2 min',
-  timeStepValue: 2,
+  value: 2,
   text: '2m'
 }, {
-  value: 3,
   label: '5 min',
-  timeStepValue: 5,
+  value: 5,
   text: '5m'
 }, {
-  value: 4,
   label: '10 min',
-  timeStepValue: 10,
+  value: 10,
   text: '10m'
 }, {
-  value: 5,
   label: '15 min',
-  timeStepValue: 15,
+  value: 15,
   text: '15m'
 }, {
-  value: 6,
   label: '30 min',
-  timeStepValue: 30,
+  value: 30,
   text: '30m'
 }, {
-  value: 7,
   label: '1 h',
-  timeStepValue: 60,
+  value: 60,
   text: '1h'
 }, {
-  value: 8,
   label: '2 h',
-  timeStepValue: 120,
+  value: 120,
   text: '2h'
 }, {
-  value: 9,
   label: '3 h',
-  timeStepValue: 180,
+  value: 180,
   text: '3h'
 }, {
-  value: 10,
   label: '6 h',
-  timeStepValue: 360,
+  value: 360,
   text: '6h'
 }, {
-  value: 11,
   label: '12 h',
-  timeStepValue: 720,
+  value: 720,
   text: '12h'
 }, {
-  value: 12,
   label: '24 h',
-  timeStepValue: 1440,
+  value: 1440,
   text: '24h'
 }, {
-  value: 13,
   label: '48 h',
-  timeStepValue: 2880,
+  value: 2880,
   text: '48h'
 }, {
-  value: 14,
   label: '72 h',
-  timeStepValue: 4320,
+  value: 4320,
   text: '72h'
 }, {
-  value: 15,
   label: '1 week',
-  timeStepValue: 10080,
+  value: 10080,
   text: '1w'
 }, {
-  value: 16,
   label: '2 weeks',
-  timeStepValue: 20160,
+  value: 20160,
   text: '2w'
 }, {
-  value: 17,
   label: '1 month',
-  timeStepValue: 40320,
+  value: 40320,
   text: '4w'
 }, {
-  value: 18,
   label: '2 months',
-  timeStepValue: 80640,
+  value: 80640,
   text: '8w'
 }, {
-  value: 19,
   label: '6 months',
-  timeStepValue: 241920,
+  value: 241920,
   text: '24w'
 }, {
-  value: 20,
   label: '1 year',
-  timeStepValue: 525600,
+  value: 525600,
   text: '1y'
 }, {
-  value: 21,
   label: '10 years',
-  timeStepValue: 5256000,
+  value: 5256000,
   text: '10y'
-}];
+}].sort(function (a, b) {
+  return b.value - a.value;
+});
 var timeStepTitle = 'Time step';
 
 var TimeStepButton = function TimeStepButton(_ref) {
@@ -14450,88 +15080,31 @@ var TimeStepButton = function TimeStepButton(_ref) {
       _ref$isOpenByDefault = _ref.isOpenByDefault,
       isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault;
   var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
-  var currentMark = timeStepMarks.find(function (mark) {
-    return mark.timeStepValue === timeStep;
-  });
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     if (isTimestepAuto) {
       onChangeTimeStep(timeStepFromLayer);
     }
   }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
 
-  var _React$useState = React__default.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      anchorRef = _React$useState2[0],
-      setAnchorRef = _React$useState2[1];
-
-  var _React$useState3 = React__default.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      open = _React$useState4[0],
-      setOpen = _React$useState4[1];
-
-  React__default.useEffect(function () {
-    if (anchorRef && isOpenByDefault) {
-      setOpen(true);
-    }
-  }, [anchorRef, isOpenByDefault]);
-  return /*#__PURE__*/React__default.createElement(Box, {
-    onKeyDown: function onKeyDown(event) {
-      event.stopPropagation();
-    }
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: timeStepTitle
-  }, /*#__PURE__*/React__default.createElement(ToolButton, {
-    onClick: function onClick() {
-      setOpen(true);
-    },
-    ref: setAnchorRef,
-    active: true,
-    width: "58px"
-  }, /*#__PURE__*/React__default.createElement(FastForward, null), /*#__PURE__*/React__default.createElement(TextIcon, {
-    text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
-  }))), /*#__PURE__*/React__default.createElement(Menu, {
-    anchorEl: anchorRef,
-    open: open,
-    onClose: function onClose() {
-      return setOpen(false);
-    },
-    BackdropProps: {
-      sx: {
-        backgroundColor: 'transparent'
-      }
-    },
-    anchorOrigin: {
-      vertical: 'top',
-      horizontal: 'center'
-    },
-    transformOrigin: {
-      vertical: 'bottom',
-      horizontal: 'center'
+  var handleMenuItemClick = function handleMenuItemClick(mark) {
+    if (isTimestepAuto) {
+      onToggleTimestepAuto();
     }
-  }, timeStepMarks.sort(function (a, b) {
-    return b.timeStepValue - a.timeStepValue;
-  }).map(function (time) {
-    return /*#__PURE__*/React__default.createElement(MenuItem, {
-      onClick: function onClick() {
-        if (isTimestepAuto) {
-          onToggleTimestepAuto();
-        }
 
-        onChangeTimeStep(time.timeStepValue, MapActionOrigin.map);
-        setOpen(false);
-      },
-      key: time.timeStepValue,
-      selected: (currentMark === null || currentMark === void 0 ? void 0 : currentMark.timeStepValue) === time.timeStepValue,
-      disabled: disabled
-    }, time.label);
-  }), /*#__PURE__*/React__default.createElement(MenuItem, {
-    onClick: function onClick() {
-      onToggleTimestepAuto();
-      setOpen(false);
-    },
-    selected: isTimestepAuto,
-    disabled: disabled
-  }, "Auto")));
+    onChangeTimeStep(mark.value, MapActionOrigin.map);
+  };
+
+  return /*#__PURE__*/React.createElement(TimeSliderMenu, {
+    title: timeStepTitle,
+    isOpenByDefault: isOpenByDefault,
+    marks: marks$1,
+    value: timeStep,
+    handleMenuItemClick: handleMenuItemClick,
+    isDisabled: disabled,
+    isAutoSelected: isTimestepAuto,
+    handleAutoClick: onToggleTimestepAuto,
+    icon: /*#__PURE__*/React.createElement(FastForward, null)
+  });
 };
 
 var OptionsPopOver = styled(Popover)(function (_ref) {
@@ -16250,7 +16823,7 @@ var useTimeSliderKeyBoardControl = function useTimeSliderKeyBoardControl(mapIsAc
     var handleKeyDown = function handleKeyDown(event) {
       var target = event.target;
 
-      if (target.tagName !== 'INPUT' && event.key === 't' && mapIsActive) {
+      if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && event.key === 't' && mapIsActive) {
         onToggleTimeSlider(!isVisible);
       }
     };
@@ -16331,14 +16904,14 @@ var TimeSlider = function TimeSlider(_ref) {
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$4 = connect(function (store, props) {
+var connectRedux$3 = connect(function (store, props) {
   return {
     isAutoUpdating: isAutoUpdating(store, props.mapId)
   };
 }, {
   toggleAutoUpdate: mapActions$1.toggleAutoUpdate
 });
-var AutoUpdateButtonConnectComponent = connectRedux$4(function (_ref) {
+var AutoUpdateButtonConnectComponent = connectRedux$3(function (_ref) {
   var mapId = _ref.mapId,
       isAutoUpdating = _ref.isAutoUpdating,
       toggleAutoUpdate = _ref.toggleAutoUpdate;
@@ -16357,7 +16930,7 @@ var AutoUpdateButtonConnectComponent = connectRedux$4(function (_ref) {
     disabled: false
   });
 });
-var AutoUpdateButtonConnect = connectRedux$4(AutoUpdateButtonConnectComponent);
+var AutoUpdateButtonConnect = connectRedux$3(AutoUpdateButtonConnectComponent);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -16375,31 +16948,27 @@ var AutoUpdateButtonConnect = connectRedux$4(AutoUpdateButtonConnectComponent);
  * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2020 - Finnish Meteorological Institute (FMI)
  * */
-var connectRedux$3 = connect(function (store, props) {
-  return {
-    animationDelay: getMapAnimationDelay(store, props.mapId)
-  };
-}, {
-  setMapAnimationDelay: mapActions$1.setAnimationDelay
-});
-var SpeedButtonConnect = connectRedux$3(function (_ref) {
-  var animationDelay = _ref.animationDelay,
-      mapId = _ref.mapId,
-      setMapAnimationDelay = _ref.setMapAnimationDelay;
 
-  var onSetAnimationDelay = function onSetAnimationDelay(_animationDelay) {
-    setMapAnimationDelay({
+var SpeedButtonConnect = function SpeedButtonConnect(_ref) {
+  var mapId = _ref.mapId;
+  var animationDelay = useSelector(function (store) {
+    return getMapAnimationDelay(store, mapId);
+  });
+  var dispatch = useDispatch();
+
+  var onSetAnimationDelay = function onSetAnimationDelay(animationDelay) {
+    dispatch(mapActions$1.setAnimationDelay({
       mapId: mapId,
-      animationDelay: _animationDelay,
+      animationDelay: animationDelay,
       origin: MapActionOrigin.map
-    });
+    }));
   };
 
   return /*#__PURE__*/React.createElement(SpeedButton, {
     animationDelay: animationDelay,
     setMapAnimationDelay: onSetAnimationDelay
   });
-});
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -17420,13 +17989,14 @@ var getCurrentDimensionValue = function getCurrentDimensionValue() {
 var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSInstance, mapProperties, onUpdateLayerInformation) {
   var origin = LayerActionOrigin.ReactMapViewParseLayer;
   var service = WMGetServiceFromStore(wmLayer.service);
+  var serviceName = mapProperties.services[service.id].name;
   /* Update list of layers for service */
 
   var done = function done(layers) {
     var updateObject = {
       origin: origin,
       serviceLayers: {
-        name: wmLayer.title,
+        name: serviceName,
         id: service.id,
         serviceUrl: wmLayer.service,
         layers: layers,
@@ -21159,6 +21729,9 @@ var MapViewConnect = function MapViewConnect(_a) {
   var displayMapPin = useSelector(function (store) {
     return getDisplayMapPin(store, mapId);
   });
+  var services = useSelector(function (store) {
+    return getServices(store);
+  });
   var dispatch = useDispatch();
   var map = getWMJSMapById(mapId);
   var mapChangeDimension = React.useCallback(function (mapDimensionPayload) {
@@ -21246,6 +21819,7 @@ var MapViewConnect = function MapViewConnect(_a) {
     animationDelay: animationDelay,
     displayMapPin: displayMapPin,
     disableMapPin: disableMapPin,
+    services: services,
     onMapChangeDimension: function onMapChangeDimension(mapDimensionPayload) {
       if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
         setTime({
@@ -22180,55 +22754,23 @@ var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
   var syncGroupRemoveTarget = React.useCallback(function (payload) {
     dispatch(actions.syncGroupRemoveTarget(payload));
   }, [dispatch]);
-  var isOpenInStore = useSelector(function (store) {
-    return getisDialogOpen(store, 'syncGroups');
-  });
-  var onClose = React.useCallback(function () {
-    return dispatch(uiActions.setToggleOpenDialog({
-      type: 'syncGroups',
-      setOpen: false
-    }));
-  }, [dispatch]);
-  var uiOrder = useSelector(function (store) {
-    return getDialogOrder(store, 'syncGroups');
-  });
-  var uiIsOrderedOnTop = useSelector(function (store) {
-    return getDialogIsOrderedOnTop(store, 'syncGroups');
-  });
-  var registerDialog = React.useCallback(function () {
-    return dispatch(uiActions.registerDialog({
-      type: 'syncGroups',
-      setOpen: false
-    }));
-  }, [dispatch]);
-  var unregisterDialog = React.useCallback(function () {
-    return dispatch(uiActions.unregisterDialog({
-      type: 'syncGroups'
-    }));
-  }, [dispatch]);
-  var onOrderDialog = React.useCallback(function () {
-    if (!uiIsOrderedOnTop) {
-      dispatch(uiActions.orderDialog({
-        type: 'syncGroups'
-      }));
-    }
-  }, [dispatch, uiIsOrderedOnTop]);
-  React.useEffect(function () {
-    registerDialog();
-    return function () {
-      unregisterDialog();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+  var _useSetupDialog = useSetupDialog('syncGroups'),
+      dialogOrder = _useSetupDialog.dialogOrder,
+      isDialogOpen = _useSetupDialog.isDialogOpen,
+      onCloseDialog = _useSetupDialog.onCloseDialog,
+      setDialogOrder = _useSetupDialog.setDialogOrder;
+
   return /*#__PURE__*/React.createElement(SyncGroupViewer, {
-    onClose: onClose,
-    isOpen: isOpenInStore,
+    onClose: onCloseDialog,
+    isOpen: isDialogOpen,
     syncGroupViewState: viewState,
     syncGroupAddTarget: syncGroupAddTarget,
     syncGroupRemoveTarget: syncGroupRemoveTarget,
     syncGroupAddGroup: syncGroupAddGroup,
     syncGroupRemoveGroup: syncGroupRemoveGroup,
-    order: uiOrder,
-    onMouseDown: onOrderDialog
+    order: dialogOrder,
+    onMouseDown: setDialogOrder
   });
 };
 
@@ -22369,57 +22911,6 @@ var testLayers = /*#__PURE__*/Object.freeze({
   simplePolygonGeoJSON: simplePolygonGeoJSON
 });
 
-/* *
- * 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)
- * */
-/**
- * A Provider component which provides the GeoWeb theme
- * @param children
- * @returns
- */
-
-var CoreThemeProvider = function CoreThemeProvider(_ref) {
-  var children = _ref.children,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? lightTheme : _ref$theme;
-  return /*#__PURE__*/React__default.createElement(ThemeWrapper, {
-    theme: theme
-  }, children);
-};
-/**
- * A Provider component which provides the GeoWeb theme and store for the core.
- * Note: Should only be used with core components, as the provided store is only for core.
- * @param children
- * @returns
- */
-
-var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
-  var children = _ref2.children,
-      _ref2$theme = _ref2.theme,
-      theme = _ref2$theme === void 0 ? lightTheme : _ref2$theme,
-      store = _ref2.store;
-  return /*#__PURE__*/React__default.createElement(Provider, {
-    store: store
-  }, /*#__PURE__*/React__default.createElement(DynamicModuleLoader, {
-    modules: coreModuleConfig
-  }, /*#__PURE__*/React__default.createElement(CoreThemeProvider, {
-    theme: theme
-  }, children)));
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22504,6 +22995,57 @@ var SnackbarWrapperConnect = function SnackbarWrapperConnect(_a) {
   }, props)));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+/**
+ * A Provider component which provides the GeoWeb theme
+ * @param children
+ * @returns
+ */
+
+var CoreThemeProvider = function CoreThemeProvider(_ref) {
+  var children = _ref.children,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? lightTheme : _ref$theme;
+  return /*#__PURE__*/React__default.createElement(ThemeWrapper, {
+    theme: theme
+  }, children);
+};
+/**
+ * A Provider component which provides the GeoWeb theme and store for the core.
+ * Note: Should only be used with core components, as the provided store is only for core.
+ * @param children
+ * @returns
+ */
+
+var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
+  var children = _ref2.children,
+      _ref2$theme = _ref2.theme,
+      theme = _ref2$theme === void 0 ? lightTheme : _ref2$theme,
+      store = _ref2.store;
+  return /*#__PURE__*/React__default.createElement(Provider, {
+    store: store
+  }, /*#__PURE__*/React__default.createElement(DynamicModuleLoader, {
+    modules: coreModuleConfig
+  }, /*#__PURE__*/React__default.createElement(CoreThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React__default.createElement(SnackbarWrapperConnect, null, children))));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22571,4 +23113,4 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
  * */
 var mapActions = Object.assign(Object.assign(Object.assign({}, layerActions), mapActions$1), serviceActions);
 
-export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$6 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes };
+export { ConfigurableMapConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MapWarningProperties, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SnackbarWrapperConnect, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultBbox, defaultConfigurations, filterLayers, filterMapPresets, filterNonTimeDimensions, filterServices, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getInitialAppPresets, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, layerActions, reducer$6 as layerReducer, mapActions, moduleConfig as mapModuleConfig, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, parseBoolean, parseLayer, publicLayers, publicServices, registerWMJSMap, registerWMLayer, snackbarActions, store, genericActions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, synchronizationGroupConfig as synchronizationGroupsConfig, testLayers, uiActions, uiModuleConfig, selectors$1 as uiSelectors, types as uiTypes, useSetupDialog };