@opengeoweb/core 4.1.0 → 4.2.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('react-window'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@opengeoweb/webmap', 'react-sortablejs', 'react-window', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.webmap, global.reactSortablejs, global.reactWindow, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
-})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, webmap, reactSortablejs, reactWindow, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@reduxjs/toolkit'), require('immer'), require('moment'), require('react'), require('lodash'), require('redux-saga/effects'), require('react-redux'), require('@mui/material'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('@opengeoweb/webmap'), require('react-sortablejs'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-window'), require('@mui/material/Box'), require('@mui/material/Typography'), require('@mui/material/Grid'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('@turf/turf'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@reduxjs/toolkit', 'immer', 'moment', 'react', 'lodash', 'redux-saga/effects', 'react-redux', '@mui/material', '@opengeoweb/shared', '@opengeoweb/theme', '@opengeoweb/webmap', 'react-sortablejs', '@opengeoweb/form-fields', 'react-hook-form', 'react-window', '@mui/material/Box', '@mui/material/Typography', '@mui/material/Grid', 'throttle-debounce', 'lodash.clonedeep', 'proj4', '@turf/turf', 'redux-dynamic-modules', 'redux-dynamic-modules-saga'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.toolkit, global.produce, global.moment, global.React, global._, global.effects, global.reactRedux, global.material, global.shared, global.theme, global.webmap, global.reactSortablejs, global.formFields, global.reactHookForm, global.reactWindow, global.Box, global.Typography, global.Grid, global.throttleDebounce, global.cloneDeep, global.proj4, global.turf, global.reduxDynamicModules, global.reduxDynamicModulesSaga));
+})(this, (function (exports, toolkit, produce, moment, React, _, effects, reactRedux, material, shared, theme, webmap, reactSortablejs, formFields, reactHookForm, reactWindow, Box, Typography, Grid, throttleDebounce, cloneDeep, proj4, turf, reduxDynamicModules, reduxDynamicModulesSaga) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,6 +29,9 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+    var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
+    var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+    var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
     var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
     var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
     var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
@@ -1812,7 +1815,7 @@
      * @returns {array} returnType: Style[] - array containing layer styles
      */
 
-    var getLayerStyles = toolkit.createSelector(getLayerFromService, function (layer) {
+    var getLayerStyles$1 = toolkit.createSelector(getLayerFromService, function (layer) {
       return layer && layer.styles ? layer.styles : [];
     }, selectorMemoizationOptions);
     /**
@@ -4296,10 +4299,18 @@
           byId: {},
           allIds: []
         },
-        keywords: {
+        filters: {
           byId: {},
           allIds: []
         }
+      },
+      allServicesEnabled: true,
+      activeLayerInfo: {
+        name: '',
+        text: '',
+        leaf: true,
+        path: [],
+        serviceName: ''
       }
     };
     var slice$1 = toolkit.createSlice({
@@ -4310,65 +4321,71 @@
           var filterText = action.payload.filterText;
           draft.filters.searchFilter = filterText;
         },
-        addKeywordsAndActiveServices: function addKeywordsAndActiveServices(draft, action) {
-          var e_1, _a;
-
-          var _b = action.payload,
-              serviceId = _b.serviceId,
-              serviceName = _b.serviceName,
-              serviceUrl = _b.serviceUrl,
-              keywords = _b.keywords,
-              isUserAddedService = _b.isUserAddedService;
+        setAllServicesEnabled: function setAllServicesEnabled(draft, action) {
+          var allServicesEnabled = action.payload.allServicesEnabled;
+          draft.allServicesEnabled = allServicesEnabled;
+        },
+        addFiltersAndActiveServices: function addFiltersAndActiveServices(draft, action) {
+          var _a = action.payload,
+              serviceId = _a.serviceId,
+              serviceName = _a.serviceName,
+              serviceUrl = _a.serviceUrl,
+              _abstract = _a["abstract"],
+              keywords = _a.keywords,
+              isUserAddedService = _a.isUserAddedService,
+              groups = _a.groups;
 
           if (!draft.filters.activeServices.byId[serviceId]) {
             draft.filters.activeServices.byId[serviceId] = {};
 
-            try {
-              for (var keywords_1 = __values(keywords), keywords_1_1 = keywords_1.next(); !keywords_1_1.done; keywords_1_1 = keywords_1.next()) {
-                var keyword = keywords_1_1.value;
+            var addFilters = function addFilters(filterNames, filterType) {
+              filterNames.forEach(function (filterName) {
+                var id = filterType + "-" + filterName;
 
-                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 (e_1_1) {
-              e_1 = {
-                error: e_1_1
-              };
-            } finally {
-              try {
-                if (keywords_1_1 && !keywords_1_1.done && (_a = keywords_1["return"])) _a.call(keywords_1);
-              } finally {
-                if (e_1) throw e_1.error;
-              }
-            }
+              });
+            };
+
+            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-" + group;
+          }).concat(keywords.map(function (keyword) {
+            return "keyword-" + 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) {
-          var e_2, _a;
-
+        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];
+          var foundService = draft.filters.activeServices.byId[serviceId]; // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
 
-          var _loop_1 = function _loop_1(keyword) {
-            var foundObject = draft.filters.keywords.byId[keyword];
+          foundService.filterIds.forEach(function (filterId) {
+            var foundObject = draft.filters.filters.byId[filterId];
 
             if (foundObject && foundObject.amount) {
               foundObject.amount -= 1;
@@ -4376,32 +4393,12 @@
             }
 
             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;
+              delete draft.filters.filters.byId[filterId];
+              draft.filters.filters.allIds = draft.filters.filters.allIds.filter(function (serviceId) {
+                return serviceId !== filterId;
               });
             }
-          };
-
-          try {
-            // 2. Go through all keywords for removed service, and decrement the amount of all found keywords
-            for (var _b = __values(foundService.keywordsPerService), _c = _b.next(); !_c.done; _c = _b.next()) {
-              var keyword = _c.value;
-
-              _loop_1(keyword);
-            }
-          } catch (e_2_1) {
-            e_2 = {
-              error: e_2_1
-            };
-          } finally {
-            try {
-              if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
-            } finally {
-              if (e_2) throw e_2.error;
-            }
-          } // Finally remove object from activeServices, so if the service is added again later on, new object and keywords will be re-added
-
+          }); // 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) {
@@ -4409,83 +4406,71 @@
           });
         },
         enableActiveService: function enableActiveService(draft, action) {
-          var e_3, _a;
+          var e_1, _a;
 
           var _b = action.payload,
               serviceId = _b.serviceId,
-              keywords = _b.keywords;
+              keywords = _b.filters;
           draft.filters.activeServices.byId[serviceId].enabled = true;
 
           try {
-            for (var keywords_2 = __values(keywords), keywords_2_1 = keywords_2.next(); !keywords_2_1.done; keywords_2_1 = keywords_2.next()) {
-              var keyword = keywords_2_1.value;
-              draft.filters.keywords.byId[keyword].amountVisible += 1;
+            for (var keywords_1 = __values(keywords), keywords_1_1 = keywords_1.next(); !keywords_1_1.done; keywords_1_1 = keywords_1.next()) {
+              var keyword = keywords_1_1.value;
+              draft.filters.filters.byId[keyword].amountVisible += 1;
             }
-          } catch (e_3_1) {
-            e_3 = {
-              error: e_3_1
+          } catch (e_1_1) {
+            e_1 = {
+              error: e_1_1
             };
           } finally {
             try {
-              if (keywords_2_1 && !keywords_2_1.done && (_a = keywords_2["return"])) _a.call(keywords_2);
+              if (keywords_1_1 && !keywords_1_1.done && (_a = keywords_1["return"])) _a.call(keywords_1);
             } finally {
-              if (e_3) throw e_3.error;
+              if (e_1) throw e_1.error;
             }
           }
         },
         disableActiveService: function disableActiveService(draft, action) {
-          var e_4, _a;
+          var e_2, _a;
 
           var _b = action.payload,
               serviceId = _b.serviceId,
-              keywords = _b.keywords;
+              keywords = _b.filters;
           draft.filters.activeServices.byId[serviceId].enabled = false;
 
           try {
-            for (var keywords_3 = __values(keywords), keywords_3_1 = keywords_3.next(); !keywords_3_1.done; keywords_3_1 = keywords_3.next()) {
-              var keyword = keywords_3_1.value;
-              draft.filters.keywords.byId[keyword].amountVisible -= 1;
+            for (var keywords_2 = __values(keywords), keywords_2_1 = keywords_2.next(); !keywords_2_1.done; keywords_2_1 = keywords_2.next()) {
+              var keyword = keywords_2_1.value;
+              draft.filters.filters.byId[keyword].amountVisible -= 1;
             }
-          } catch (e_4_1) {
-            e_4 = {
-              error: e_4_1
+          } catch (e_2_1) {
+            e_2 = {
+              error: e_2_1
             };
           } finally {
             try {
-              if (keywords_3_1 && !keywords_3_1.done && (_a = keywords_3["return"])) _a.call(keywords_3);
+              if (keywords_2_1 && !keywords_2_1.done && (_a = keywords_2["return"])) _a.call(keywords_2);
             } finally {
-              if (e_4) throw e_4.error;
+              if (e_2) throw e_2.error;
             }
           }
         },
-        toggleKeywords: function toggleKeywords(draft, action) {
-          var e_5, _a;
-
-          var keywords = action.payload.keywords;
-
-          try {
-            for (var keywords_4 = __values(keywords), keywords_4_1 = keywords_4.next(); !keywords_4_1.done; keywords_4_1 = keywords_4.next()) {
-              var keyword = keywords_4_1.value;
-              draft.filters.keywords.byId[keyword].checked = !draft.filters.keywords.byId[keyword].checked;
-            }
-          } catch (e_5_1) {
-            e_5 = {
-              error: e_5_1
-            };
-          } finally {
-            try {
-              if (keywords_4_1 && !keywords_4_1.done && (_a = keywords_4["return"])) _a.call(keywords_4);
-            } finally {
-              if (e_5) throw e_5.error;
-            }
-          }
+        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;
         }
       }
     });
@@ -4537,6 +4522,21 @@
 
       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
      *
@@ -4563,18 +4563,18 @@
      * @returns {array} returnType: array of keyword ids that are checked
      */
 
-    var getCheckedKeywordIds = toolkit.createSelector(layerSelectStore, function (store) {
+    var getCheckedFilterIds = toolkit.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);
     /**
@@ -4585,11 +4585,28 @@
      * @returns {array} returnType: array of all keyword ids
      */
 
-    var getAllKeywordIds = toolkit.createSelector(layerSelectStore, function (store) {
+    var getAllFilterIds = toolkit.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 = toolkit.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
      *
@@ -4598,29 +4615,26 @@
      * @returns {array} returnType: boolean if all keywords are checked
      */
 
-    var isAllKeywordsChecked = toolkit.createSelector(layerSelectStore, function (store) {
+    var isAllFiltersChecked = toolkit.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 = toolkit.createSelector(layerSelectStore, function (store) {
+      return store === null || store === void 0 ? void 0 : store.activeLayerInfo;
+    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4694,8 +4708,15 @@
       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; }
     });
 
     /* *
@@ -6074,7 +6095,7 @@
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
     var animationIntervalDefault = 5;
-    var connectRedux$6 = reactRedux.connect(function (store, props) {
+    var connectRedux$5 = reactRedux.connect(function (store, props) {
       return {
         animationStartTime: getAnimationStartTime(store, props.mapId),
         animationEndTime: getAnimationEndTime(store, props.mapId),
@@ -6085,7 +6106,7 @@
       mapStartAnimation: mapActions$1.mapStartAnimation,
       mapStopAnimation: mapActions$1.mapStopAnimation
     });
-    var PlayButtonConnect = connectRedux$6(function (_a) {
+    var PlayButtonConnect = connectRedux$5(function (_a) {
       var mapId = _a.mapId,
           animationStartTime = _a.animationStartTime,
           animationEndTime = _a.animationEndTime,
@@ -8448,34 +8469,6 @@
       return _typeof(obj);
     }
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * 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 mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
-      return Object.values(__assign(__assign({}, presets.reduce(function (byUrl, preset) {
-        var _a;
-
-        return __assign(__assign({}, byUrl), (_a = {}, _a[preset.url] = preset, _a));
-      }, {})), 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');
@@ -8508,6 +8501,11 @@
       }
     };
 
+    var isNoIdService = function isNoIdService(param) {
+      var serviceParam = param;
+      return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -8525,23 +8523,41 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     function newServiceAddedSaga(capturedAction) {
-      var addedService, id, serviceUrl, name, isUserAddedService, keywords;
+      var addedService, id, serviceUrl, name, isUserAddedService, _abstract, keywords, groups;
+
       return __generator(this, function (_a) {
         switch (_a.label) {
           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;
             }, []);
             return [4
             /*yield*/
-            , effects.put(layerSelectActions.addKeywordsAndActiveServices({
+            , effects.put(layerSelectActions.addFiltersAndActiveServices({
               serviceId: id,
               serviceName: name,
               serviceUrl: serviceUrl,
               keywords: keywords,
-              isUserAddedService: isUserAddedService
+              isUserAddedService: isUserAddedService,
+              groups: groups,
+              "abstract": _abstract
             }))];
 
           case 1:
@@ -8553,20 +8569,53 @@
         }
       });
     }
-    function layerSelectServiceRemovedSaga(capturedAction) {
-      var removedService, serviceId;
+    function layerSelectRemoveServiceSaga(capturedAction) {
+      var removedService, serviceId, serviceUrl, results, services, servicesEnabled;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
             removedService = capturedAction.payload;
-            serviceId = removedService.id;
+            serviceId = removedService.serviceId, serviceUrl = removedService.serviceUrl;
             return [4
             /*yield*/
-            , effects.put(layerSelectActions.layerSelectServiceRemoved({
-              serviceId: serviceId
-            }))];
+            , effects.select(getActiveServices)];
 
           case 1:
+            results = _a.sent();
+            services = results;
+            servicesEnabled = Object.values(services).find(function (service) {
+              return service.enabled;
+            });
+            if (!(servicesEnabled === undefined)) return [3
+            /*break*/
+            , 3];
+            return [4
+            /*yield*/
+            , effects.all(Object.entries(services).map(function (_a) {
+              var _b = __read(_a, 2),
+                  serviceId = _b[0],
+                  service = _b[1];
+
+              return effects.put(layerSelectActions.enableActiveService({
+                serviceId: serviceId,
+                filters: service.filterIds
+              }));
+            }))];
+
+          case 2:
+            _a.sent();
+
+            _a.label = 3;
+
+          case 3:
+            return [4
+            /*yield*/
+            , effects.put(serviceActions.mapStoreRemoveService({
+              id: serviceId,
+              serviceUrl: serviceUrl
+            }))];
+
+          case 4:
             _a.sent();
 
             return [2
@@ -8581,12 +8630,14 @@
       var payload = _a.payload;
       var isUserAddedService = payload.isUserAddedService,
           name = payload.name,
-          serviceUrl = payload.serviceUrl;
+          serviceUrl = payload.serviceUrl,
+          _abstract2 = payload["abstract"];
       if (!isUserAddedService) return;
       var localStorageServices = getUserAddedServices();
       setUserAddedServices(__assign(__assign({}, localStorageServices), (_b = {}, _b[serviceUrl] = {
         name: name,
-        url: serviceUrl
+        url: serviceUrl,
+        "abstract": _abstract2
       }, _b)));
     }
     function removeServiceFromLocalStorageSaga(_a) {
@@ -8613,7 +8664,7 @@
 
             return [4
             /*yield*/
-            , effects.takeEvery(serviceActions.mapStoreRemoveService.type, layerSelectServiceRemovedSaga)];
+            , effects.takeEvery(layerSelectActions.layerSelectRemoveService.type, layerSelectRemoveServiceSaga)];
 
           case 2:
             _a.sent();
@@ -8842,7 +8893,9 @@
         children: [],
         keywords: nodesToRecur.keywords || [],
         "abstract": nodesToRecur["abstract"] || '',
-        styles: nodesToRecur.styles || []
+        styles: nodesToRecur.styles || [],
+        dimensions: nodesToRecur.dimensions || [],
+        geographicBoundingBox: nodesToRecur.geographicBoundingBox || null
       };
 
       if (nodesToRecur.children) {
@@ -9119,7 +9172,7 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var connectRedux$5 = reactRedux.connect(function (store, props) {
+    var connectRedux$4 = reactRedux.connect(function (store, props) {
       return {
         loadedLayers: getMapLayers(store, props.mapId)
       };
@@ -9183,7 +9236,7 @@
       });
     };
 
-    var WMSLayerTreeConnect = connectRedux$5(ConnectedTree);
+    var WMSLayerTreeConnect = connectRedux$4(ConnectedTree);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -9391,7 +9444,7 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
-    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;
@@ -9456,7 +9509,7 @@
           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
@@ -10180,7 +10233,7 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var marks$1 = [{
+    var marks$2 = [{
       value: 0,
       label: '0 %'
     }, {
@@ -10305,7 +10358,7 @@
         step: 0.01,
         max: 1,
         min: 0,
-        marks: marks$1,
+        marks: marks$2,
         onChange: function onChange(event, newValue) {
           event.stopPropagation();
           onLayerChangeOpacity(newValue);
@@ -10863,7 +10916,7 @@
         return getLayerName(store, layerId);
       });
       var layerStyles = reactRedux.useSelector(function (store) {
-        return getLayerStyles(store, layerService, layerName);
+        return getLayerStyles$1(store, layerService, layerName);
       });
       var currentLayerStyle = reactRedux.useSelector(function (store) {
         return getLayerStyle(store, layerId);
@@ -11598,6 +11651,16 @@
         boxSizing: 'border-box'
       }
     };
+    var calculateStartSize = function calculateStartSize(minSize, prefSize, startPosition) {
+      var _a = shared.calculateDialogSizeAndPosition(),
+          calcWidth = _a.width,
+          calcHeight = _a.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(_a) {
       var mapId = _a.mapId,
@@ -11623,8 +11686,21 @@
           _h = _a.isLoading,
           isLoading = _h === void 0 ? false : _h,
           error = _a.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 _j = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
+      var _j = __read(React__namespace.useState(widthToWidthClass(startSize.width)), 2),
           layerManagerWidth = _j[0],
           setLayerManagerWidth = _j[1];
 
@@ -11635,16 +11711,10 @@
 
       return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
         title: showTitle ? "Layer Manager " + 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,
@@ -11755,124 +11825,267 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var style$1 = {
-      dialogTitle: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        padding: '16px 16px 20px 16px',
-        ' span': {
-          fontSize: '2.125rem'
+    var isURL = function isURL(string) {
+      return /^https?:\/\//.test(string);
+    };
+
+    var SearchFieldButtonContainer = function SearchFieldButtonContainer(_a) {
+      var localSearchString = _a.localSearchString,
+          onClickClear = _a.onClickClear,
+          setPopupIsOpen = _a.setPopupIsOpen;
+
+      var ClearButton = function ClearButton() {
+        return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+          title: "Clear",
+          placement: "top"
+        }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+          edge: "end",
+          onClick: function onClick() {
+            onClickClear();
+          },
+          size: "large"
+        }, /*#__PURE__*/React__default["default"].createElement(theme.Clear, null)));
+      };
+
+      if (isURL(localSearchString)) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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'
-        };
-      },
-      textField: {
-        width: '100%'
-      },
-      dialogContent: {
-        padding: '8px 16px'
-      },
-      footerContent: {
-        padding: '16px'
+      }, /*#__PURE__*/React__default["default"].createElement(ClearButton, null)), /*#__PURE__*/React__default["default"].createElement(material.Button, {
+        variant: "tertiary",
+        onClick: function onClick() {
+          return setPopupIsOpen(true);
+        }
+      }, "Save"));
+      if (localSearchString) return /*#__PURE__*/React__default["default"].createElement(ClearButton, null);
+      return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: "Search",
+        placement: "top"
+      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+        edge: "end",
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(theme.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, ownServiceName) {
+      if (ownServiceName === void 0) {
+        ownServiceName = '';
       }
+
+      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 ADD_HEADING = 'Add a new service';
-    var EDIT_HEADING = 'Edit service';
-    var SAVE_HEADING = 'Save service';
 
-    var getTitleForVariant = function getTitleForVariant(variant) {
-      switch (variant) {
-        case 'add':
-          return ADD_HEADING;
+    var isValidUrl = function isValidUrl(url) {
+      if (url === '' || url === null || typeof url === 'undefined') {
+        return false;
+      }
 
-        case 'edit':
-          return EDIT_HEADING;
+      var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
 
-        default:
-          return SAVE_HEADING;
+      if (!matcher.test(url)) {
+        return false;
       }
+
+      return true;
     };
 
-    var ServicePopup = function ServicePopup(_a) {
-      var servicePopupVariant = _a.servicePopupVariant,
-          _b = _a.hideBackdrop,
-          hideBackdrop = _b === void 0 ? false : _b,
-          isOpen = _a.isOpen,
-          closePopup = _a.closePopup,
-          serviceId = _a.serviceId,
-          url = _a.url,
-          services = _a.services,
-          serviceSetLayers = _a.serviceSetLayers;
+    var validateServiceUrl = function validateServiceUrl(value, services) {
+      var serviceUrl = value; // validate valid url
 
-      var _c = __read(React__namespace.useState(''), 2),
-          serviceName = _c[0],
-          setServiceName = _c[1];
+      var isServiceUrlValid = isValidUrl(serviceUrl);
 
-      var _d = __read(React__namespace.useState(''), 2),
-          serviceUrl = _d[0],
-          setServiceUrl = _d[1];
+      if (!isServiceUrlValid) {
+        return VALIDATIONS_SERVICE_VALID_URL;
+      } // check url existing
 
-      var _e = __read(React__namespace.useState(''), 2),
-          _abstract = _e[0],
-          setAbstract = _e[1];
 
-      var _f = __read(React__namespace.useState(false), 2),
-          disableButton = _f[0],
-          setDisableButton = _f[1];
+      var foundUrl = Object.keys(services).find(function (serviceId) {
+        return services[serviceId].serviceUrl === serviceUrl;
+      });
 
-      var _g = __read(React__namespace.useState(false), 2),
-          isLoading = _g[0],
-          setIsLoading = _g[1];
+      if (foundUrl) {
+        return VALIDATIONS_SERVICE_EXISTING;
+      }
 
-      var _h = __read(React__namespace.useState(false), 2),
-          serviceNameHasError = _h[0],
-          setServiceNameHasError = _h[1];
+      return true;
+    };
 
-      var _j = __read(React__namespace.useState(''), 2),
-          serviceNameHelperText = _j[0],
-          setServiceNameHelperText = _j[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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var style$1 = {
+      textField: {
+        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 \"" + serviceName + "\" has been saved succesfully";
+    };
 
-      var _k = __read(React__namespace.useState(false), 2),
-          serviceUrlHasError = _k[0],
-          setServiceUrlHasError = _k[1];
+    var getTitleForVariant = function getTitleForVariant(variant) {
+      switch (variant) {
+        case 'add':
+          return ADD_HEADING;
+
+        case 'edit':
+          return EDIT_HEADING;
+
+        case 'save':
+          return SAVE_HEADING;
+
+        default:
+          return 'Service';
+      }
+    };
 
-      var _l = __read(React__namespace.useState(''), 2),
-          serviceUrlHelperText = _l[0],
-          setServiceUrlHelperText = _l[1];
+    var fields = {
+      serviceUrl: {
+        name: 'serviceUrl',
+        label: 'This service refers to this URL'
+      },
+      serviceName: {
+        name: 'serviceName',
+        label: 'Service name'
+      },
+      serviceAbstracts: {
+        name: 'serviceAbstracts',
+        label: 'Abstracts'
+      }
+    };
 
+    var InitialValidationsTrigger = function InitialValidationsTrigger(_a) {
+      var trigger = _a.trigger,
+          getValues = _a.getValues,
+          onValidField = _a.onValidField;
       React__namespace.useEffect(function () {
-        var _a;
+        var value = getValues(fields.serviceUrl.name);
 
-        if (servicePopupVariant === 'edit') {
-          setServiceName(((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName) || '');
-          setServiceUrl(url || '');
-        }
+        if (value) {
+          trigger(fields.serviceUrl.name).then(function (isValid) {
+            return isValid && onValidField(value);
+          });
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-        if (servicePopupVariant === 'save') {
-          setServiceUrl(url || '');
-        }
-      }, [serviceId, services, url, servicePopupVariant, isOpen]);
+      }, []);
+      return null;
+    };
 
-      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;
+    var ServicePopup = function ServicePopup(_a) {
+      var servicePopupVariant = _a.servicePopupVariant,
+          _b = _a.hideBackdrop,
+          hideBackdrop = _b === void 0 ? false : _b,
+          isOpen = _a.isOpen,
+          closePopup = _a.closePopup,
+          services = _a.services,
+          serviceSetLayers = _a.serviceSetLayers,
+          serviceUrl = _a.serviceUrl,
+          serviceName = _a.serviceName,
+          serviceAbstracts = _a.serviceAbstracts,
+          _c = _a.showSnackbar,
+          showSnackbar = _c === void 0 ? function () {} : _c;
+
+      var _d = reactHookForm.useFormContext(),
+          reset = _d.reset,
+          errors = _d.formState.errors,
+          handleSubmit = _d.handleSubmit,
+          setError = _d.setError,
+          clearErrors = _d.clearErrors,
+          watch = _d.watch,
+          trigger = _d.trigger,
+          getValues = _d.getValues,
+          setValue = _d.setValue;
+
+      var _e = __read(React__namespace.useState(false), 2),
+          isLoading = _e[0],
+          setIsLoading = _e[1];
+
+      var fetchServiceData = function fetchServiceData(newServiceUrl) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var service;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                _a.trys.push([0, 2,, 3]);
+
+                setIsLoading(true);
+                return [4
+                /*yield*/
+                , getLayersFromService(newServiceUrl)];
+
+              case 1:
+                _a.sent();
+
+                service = webmap.WMGetServiceFromStore(newServiceUrl);
+                setValue(fields.serviceName.name, service.title);
+                setValue(fields.serviceAbstracts.name, service["abstract"]);
+                setIsLoading(false);
+                return [3
+                /*break*/
+                , 3];
+
+              case 2:
+                _a.sent();
+                setIsLoading(false);
+                setError(fields.serviceUrl.name, {
+                  message: VALIDATIONS_REQUEST_FAILED,
+                  type: 'SYSTEM'
+                });
+                return [3
+                /*break*/
+                , 3];
+
+              case 3:
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
       };
 
-      var addNewService = function addNewService() {
+      var addNewService = function addNewService(formValues) {
         return __awaiter(void 0, void 0, void 0, function () {
           var layers, serviceLayers, _a, _b, object, service;
 
@@ -11881,10 +12094,7 @@
           return __generator(this, function (_d) {
             switch (_d.label) {
               case 0:
-                setServiceUrlHasError(false);
-                if (!validateServiceUrl(serviceUrl)) return [3
-                /*break*/
-                , 4];
+                clearErrors(fields.serviceUrl.name);
                 setIsLoading(true);
                 _d.label = 1;
 
@@ -11893,7 +12103,7 @@
 
                 return [4
                 /*yield*/
-                , getLayersFromService(serviceUrl)];
+                , getLayersFromService(formValues.serviceUrl)];
 
               case 2:
                 layers = _d.sent();
@@ -11911,7 +12121,9 @@
                         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 (e_1_1) {
@@ -11926,16 +12138,18 @@
                     }
                   }
 
-                  service = webmap.WMGetServiceFromStore(serviceUrl);
+                  service = webmap.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();
                 }
 
                 return [3
@@ -11945,8 +12159,10 @@
               case 3:
                 _d.sent();
                 setIsLoading(false);
-                setServiceUrlHasError(true);
-                setServiceUrlHelperText('Error: Download failed. Check the URL.');
+                setError(fields.serviceUrl.name, {
+                  message: VALIDATIONS_REQUEST_FAILED,
+                  type: 'SYSTEM'
+                });
                 return [3
                 /*break*/
                 , 4];
@@ -11960,166 +12176,216 @@
         });
       };
 
-      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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement(material.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__namespace.createElement("form", {
+        onSubmit: handleSubmit(addNewService)
       }, /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
-        sx: style$1.dialogTitle
+        sx: {
+          alignItems: 'center',
+          padding: '16px 16px 24px 16px'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          ' span': {
+            fontSize: '1rem',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            lineHeight: '1.38',
+            letterSpacing: '0.12px'
+          }
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "h5",
         component: "span"
       }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        "aria-label": "close",
         size: "small",
-        onClick: closePopupAndResetState,
+        onClick: closePopup,
         "data-testid": "closePopupButtonCross",
-        sx: style$1.closeBtn
-      }, /*#__PURE__*/React__namespace.createElement(theme.Close, null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-        sx: style$1.dialogContent
-      }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
+        sx: {
+          color: 'geowebColors.captions.captionDisabled.color',
+          marginTop: 'auto',
+          marginBottom: 'auto'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(theme.Close, null))), isLoading && /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          position: 'relative'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.LinearProgress, {
+        "data-testid": "loadingIndicator",
+        color: "secondary",
+        sx: {
+          position: 'absolute',
+          width: '100%',
+          top: 8
+        }
+      }))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
+        sx: {
+          padding: '8px 16px'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(formFields.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: __assign({}, !isServiceUrlDisabled && {
+            onValidateServiceUrl: onValidateServiceUrl
+          })
         },
-        value: serviceName,
-        inputProps: {
-          'data-testid': 'serviceNameTextField'
+        disabled: isServiceUrlDisabled || isLoading,
+        InputProps: {
+          readOnly: isShowPopup,
+          disableUnderline: isShowPopup,
+          endAdornment: isShowPopup && /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
+            position: "end"
+          }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+            "aria-label": "copy url",
+            onClick: function onClick() {
+              navigator.clipboard.writeText(serviceUrl);
+              showSnackbar(COPY_URL_MESSAGE);
+            }
+          }, /*#__PURE__*/React__namespace.createElement(theme.Copy, null)))
         },
-        error: serviceNameHasError,
-        helperText: serviceNameHelperText
-      })), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-        sx: style$1.dialogContent
-      }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
-        sx: style$1.textField,
-        variant: "filled",
-        label: "Service URL",
-        onChange: function onChange(event) {
-          return setServiceUrl(event.target.value);
+        defaultValue: serviceUrl
+      }), /*#__PURE__*/React__namespace.createElement(formFields.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__namespace.createElement(material.DialogContent, {
-        sx: style$1.dialogContent
-      }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
         sx: style$1.textField,
-        variant: "filled",
+        defaultValue: serviceName
+      }), /*#__PURE__*/React__namespace.createElement(formFields.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__namespace.createElement(InitialValidationsTrigger, {
+        trigger: trigger,
+        getValues: getValues,
+        onValidField: fetchServiceData
       })), /*#__PURE__*/React__namespace.createElement(material.DialogActions, {
-        sx: style$1.footerContent
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        onClick: closePopupAndResetState,
+        sx: {
+          padding: 2
+        }
+      }, isShowPopup ? /*#__PURE__*/React__namespace.createElement(material.Button, {
+        onClick: function onClick() {
+          return closePopup();
+        },
+        variant: "tertiary",
+        sx: {
+          width: '117px'
+        }
+      }, "close") : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Button, {
+        onClick: closePopup,
         "data-testid": "closePopupButtonCancel",
         variant: "tertiary",
         sx: {
           width: '117px'
         }
-      }, "cancel"), !isLoading ? /*#__PURE__*/React__namespace.createElement(material.Button, {
+      }, "cancel"), /*#__PURE__*/React__namespace.createElement(material.Button, {
+        type: "submit",
         variant: "primary",
-        disabled: disableButton,
-        onClick: addNewService,
+        disabled: isSubmitDisabled || isLoading,
         "data-testid": "saveServiceButton",
         sx: {
           width: '117px',
           marginLeft: '16px!important'
         }
-      }, "save") : /*#__PURE__*/React__namespace.createElement(material.Box, {
-        "data-testid": "loadingIndicator",
-        sx: {
-          width: '117px',
-          height: '40px',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          marginLeft: '16px!important'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
-        size: 35
-      }))));
+      }, "save")))));
+    };
+
+    var ServicePopupWrapper = function ServicePopupWrapper(_a) {
+      var props = __rest(_a, []);
+
+      return /*#__PURE__*/React__namespace.createElement(formFields.ReactHookFormProvider, {
+        options: formFields.defaultFormOptions
+      }, /*#__PURE__*/React__namespace.createElement(ServicePopup, __assign({}, props)));
     };
 
     /* *
@@ -12153,15 +12419,25 @@
       var serviceSetLayers = React__default["default"].useCallback(function (payload) {
         dispatch(serviceActions.serviceSetLayers(payload));
       }, [dispatch]);
-      return /*#__PURE__*/React__default["default"].createElement(ServicePopup, {
+      var activeService = reactRedux.useSelector(function (store) {
+        return getActiveServiceById(store, serviceId);
+      });
+      var showSnackbar = React__default["default"].useCallback(function (message) {
+        dispatch(snackbarActions.openSnackbar({
+          message: message
+        }));
+      }, [dispatch]);
+      return /*#__PURE__*/React__default["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
       });
     };
 
@@ -12181,59 +12457,87 @@
      * 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(_a) {
-      var localSearchString = _a.localSearchString,
-          onClickClear = _a.onClickClear;
+    var SearchField = function SearchField(_a) {
+      var searchFilter = _a.searchFilter,
+          setSearchFilter = _a.setSearchFilter;
 
-      var _b = __read(React__default["default"].useState(false), 2),
-          isPopupOpen = _b[0],
-          setPopupOpen = _b[1];
+      var _b = __read(React__namespace.useState(''), 2),
+          localSearchString = _b[0],
+          setLocalSearchString = _b[1];
 
-      React__default["default"].useEffect(function () {
-        if (isPopupOpen === false) {
-          onClickClear();
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
+      var _c = __read(React__namespace.useState(false), 2),
+          urlIsValid = _c[0],
+          setUrlIsValid = _c[1];
 
-      }, [isPopupOpen]);
-      var ClearButton = /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-        title: "Clear",
-        placement: "top"
-      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-        edge: "end",
-        onClick: function onClick() {
-          onClickClear();
-        },
-        size: "large"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.Clear, null)));
-      if (isURL(localSearchString)) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-        style: {
-          marginRight: '15px'
+      var _d = __read(React__namespace.useState(false), 2),
+          popupIsOpen = _d[0],
+          setPopupIsOpen = _d[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+      var setSearchFilterDebounced = React__namespace.useCallback(_.debounce(setSearchFilter, 300), []);
+
+      var handleChange = function handleChange(text) {
+        setLocalSearchString(text);
+        if (!isURL(text)) setSearchFilterDebounced(text);else if (searchFilter) setSearchFilterDebounced('');
+      };
+
+      React__namespace.useEffect(function () {
+        if (isURL(localSearchString)) {
+          setUrlIsValid(true);
         }
-      }, ClearButton), /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        variant: "tertiary",
-        onClick: function onClick() {
-          return setPopupOpen(true);
+      }, [localSearchString]);
+      React__namespace.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__namespace.useEffect(function () {
+        if (isURL(localSearchString)) return;
+        setLocalSearchString(searchFilter); // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [searchFilter]);
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.TextField, {
+        variant: "filled",
+        label: "Search through services or enter a service URL",
+        value: localSearchString,
+        onChange: function onChange(e) {
+          handleChange(e.target.value);
+        },
+        autoFocus: true,
+        fullWidth: true,
+        InputProps: {
+          endAdornment: /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
+            position: "end"
+          }, /*#__PURE__*/React__namespace.createElement(SearchFieldButtonContainer, {
+            setPopupIsOpen: setPopupIsOpen,
+            localSearchString: localSearchString,
+            onClickClear: function onClickClear() {
+              setLocalSearchString('');
+              setSearchFilterDebounced('');
+            }
+          }))
         }
-      }, "Save"), /*#__PURE__*/React__default["default"].createElement(ServicePopupConnect, {
+      }), /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
         servicePopupVariant: "save",
-        isOpen: isPopupOpen,
+        isOpen: popupIsOpen,
         closePopup: function closePopup() {
-          return setPopupOpen(false);
+          setPopupIsOpen(false);
+          setLocalSearchString('');
         },
         url: localSearchString
       }));
-      if (localSearchString) return ClearButton;
-      return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-        title: "Search",
-        placement: "top"
-      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
-        edge: "end",
-        size: "large"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.Search, null)));
     };
 
     /* *
@@ -12253,48 +12557,232 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var SearchField = function SearchField(_a) {
-      var searchFilter = _a.searchFilter,
-          setSearchFilter = _a.setSearchFilter;
+    var SearchFieldConnect = function SearchFieldConnect() {
+      var dispatch = reactRedux.useDispatch();
+      var searchFilter = reactRedux.useSelector(function (store) {
+        return getSearchFilter(store);
+      });
+      return /*#__PURE__*/React__namespace.createElement(SearchField, {
+        setSearchFilter: function setSearchFilter(filterText) {
+          dispatch(layerSelectActions.setSearchFilter({
+            filterText: filterText
+          }));
+        },
+        searchFilter: searchFilter
+      });
+    };
 
-      var _b = __read(React__namespace.useState(''), 2),
-          localSearchString = _b[0],
-          setLocalSearchString = _b[1]; // mirror store unless typing a URL
+    /* *
+     * 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;
+        });
+      }
 
-      React__namespace.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 searchStringArray = searchString.split(' ');
+      return mapStoreService.layers.filter(function (layer) {
+        return searchStringArray.every(function (search) {
+          var _a, _b, _c;
 
-      var setSearchFilterDebounced = React__namespace.useCallback(_.debounce(setSearchFilter, 300), []);
+          var searchLowercase = search.toLowerCase();
+          var layerFilterIds = layer.path.map(function (group) {
+            return "group-" + group;
+          }).concat(layer.keywords.map(function (keyword) {
+            return "keyword-" + 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;
+      });
+    };
 
-      var handleChange = function handleChange(text) {
-        setLocalSearchString(text);
-        if (!isURL(text)) setSearchFilterDebounced(text);else if (searchFilter) setSearchFilterDebounced('');
+    /* *
+     * 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(_a) {
+      var layer = _a.layer,
+          layerIndex = _a.layerIndex,
+          serviceUrl = _a.serviceUrl,
+          addLayer = _a.addLayer,
+          deleteLayer = _a.deleteLayer,
+          mapLayers = _a.mapLayers;
+      var foundLayer = mapLayers.find(function (lr) {
+        return lr.name === layer.name && lr.service === serviceUrl;
+      });
+      return /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
+        "data-testid": "layerAddRemoveButton-" + 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(_a) {
+      var layer = _a.layer,
+          mapId = _a.mapId,
+          serviceName = _a.serviceName,
+          _b = _a.source,
+          source = _b === void 0 ? 'app' : _b;
+      var dispatch = reactRedux.useDispatch();
+      var currentActiveMapId = reactRedux.useSelector(function (store) {
+        return getDialogMapId(store, DialogTypes.LayerInfo);
+      });
+      var isOpenInStore = reactRedux.useSelector(function (store) {
+        return getisDialogOpen(store, DialogTypes.LayerInfo);
+      });
+      var currentLayerInfo = reactRedux.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["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["default"].useCallback(function () {
+        dispatch(layerSelectActions.setActiveLayerInfo({
+          layer: __assign(__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__namespace.createElement(material.TextField, {
-        variant: "filled",
-        label: "Search through services or enter a service URL",
-        value: localSearchString,
-        onChange: function onChange(e) {
-          handleChange(e.target.value);
-        },
-        autoFocus: true,
-        fullWidth: true,
-        InputProps: {
-          endAdornment: /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
-            position: "end"
-          }, /*#__PURE__*/React__namespace.createElement(SearchFieldButtonContainer, {
-            localSearchString: localSearchString,
-            onClickClear: function onClickClear() {
-              setLocalSearchString('');
-              setSearchFilterDebounced('');
-            }
-          }))
-        }
-      });
+      return /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+        variant: "icon",
+        active: isActive && isOpenInStore,
+        onClick: onClick,
+        id: "layerInfoButton",
+        "aria-label": "layer info"
+      }, /*#__PURE__*/React__default["default"].createElement(theme.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 = __assign(__assign({}, textStyle$1), {
+      marginBottom: 1
+    });
+
+    var LayerInfoText = function LayerInfoText(_a) {
+      var label = _a.label,
+          value = _a.value;
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+        variant: "subtitle2",
+        sx: textStyle$1
+      }, label), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+        variant: "body2",
+        sx: textStyleWithMargin
+      }, value));
     };
 
     /* *
@@ -12310,23 +12798,55 @@
      * 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 SearchFieldConnect = function SearchFieldConnect() {
-      var dispatch = reactRedux.useDispatch();
-      var searchFilter = reactRedux.useSelector(function (store) {
-        return getSearchFilter(store);
-      });
-      return /*#__PURE__*/React__namespace.createElement(SearchField, {
-        setSearchFilter: function setSearchFilter(filterText) {
-          dispatch(layerSelectActions.setSearchFilter({
-            filterText: filterText
-          }));
-        },
-        searchFilter: searchFilter
-      });
+    var valueStyle = __assign(__assign({}, textStyle), {
+      overflowWrap: 'break-word'
+    });
+
+    var LayerInfoList = function LayerInfoList(_a) {
+      var label = _a.label,
+          list = _a.list;
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+        variant: "subtitle2",
+        sx: textStyle
+      }, label), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
+        container: true,
+        direction: "column"
+      }, list.map(function (item) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: item.name
+        }, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
+          item: true,
+          container: true,
+          direction: "row"
+        }, item.icon, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
+          item: true,
+          sx: {
+            marginLeft: '10px'
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+          variant: "body2",
+          sx: textStyle
+        }, item.name, ":"))), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
+          item: true,
+          container: true,
+          direction: "row",
+          sx: {
+            marginBottom: 1,
+            paddingLeft: '34px'
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+          variant: "body2",
+          sx: valueStyle
+        }, item.value)));
+      })));
     };
 
     /* *
@@ -12342,32 +12862,49 @@
      * 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, includeUnit) {
+      var _a;
+
+      if (includeUnit === void 0) {
+        includeUnit = false;
+      }
+
+      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(breakAt + " ");
+
+      if (includeUnit) {
+        return dimValue + " " + dimension.units;
+      }
+
+      return dimValue;
+    };
+    var getLayerBbox = function getLayerBbox(layer) {
+      return layer.geographicBoundingBox ? "west " + layer.geographicBoundingBox.west + ", east " + layer.geographicBoundingBox.east + ", north " + layer.geographicBoundingBox.north + ", south " + layer.geographicBoundingBox.south : '-';
     };
 
     /* *
@@ -12387,31 +12924,88 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
-    var LayerAddRemoveButton = function LayerAddRemoveButton(_a) {
-      var layer = _a.layer,
-          layerIndex = _a.layerIndex,
-          serviceUrl = _a.serviceUrl,
-          addLayer = _a.addLayer,
-          deleteLayer = _a.deleteLayer,
-          mapLayers = _a.mapLayers;
-      var foundLayer = mapLayers.find(function (lr) {
-        return lr.name === layer.name && lr.service === serviceUrl;
-      });
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
-        "data-testid": "layerAddRemoveButton-" + layer.name,
-        onClick: function onClick() {
-          !foundLayer ? addLayer({
-            serviceUrl: serviceUrl,
-            layerName: layer.name
-          }) : deleteLayer({
-            layerId: foundLayer.id,
-            layerIndex: layerIndex
-          });
+    var LayerInfoDialog = function LayerInfoDialog(_a) {
+      var _b;
+
+      var onClose = _a.onClose,
+          layer = _a.layer,
+          isOpen = _a.isOpen,
+          _c = _a.onMouseDown,
+          onMouseDown = _c === void 0 ? function () {} : _c,
+          _d = _a.order,
+          order = _d === void 0 ? 0 : _d,
+          _e = _a.source,
+          source = _e === void 0 ? 'app' : _e,
+          dialogHeight = _a.dialogHeight;
+      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["default"].createElement(shared.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["default"].createElement(Box__default["default"], {
+        sx: {
+          padding: 2
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
+        label: "Title",
+        value: layer.text
+      }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
+        label: "Name",
+        value: layer.name
+      }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
+        label: "Service",
+        value: layer.serviceName
+      }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
+        label: "Abstract",
+        value: layer["abstract"] || '-'
+      }), /*#__PURE__*/React__default["default"].createElement(LayerInfoList, {
+        label: "Dimensions",
+        list: [{
+          name: 'Time',
+          value: timeValue,
+          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsTime, null)
+        }, {
+          name: 'Reference Time',
+          value: refTimeValue,
+          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsRefTime, null)
+        }, {
+          name: 'Elevation',
+          value: elevationValue,
+          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsElevation, null)
+        }, {
+          name: 'Other dimensions',
+          value: '-',
+          icon: /*#__PURE__*/React__default["default"].createElement(theme.DimensionsOther, null)
+        }]
+      }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
+        label: "Styles",
+        value: styles
+      }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
+        label: "Bounding Box",
+        value: bbox
+      }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
+        label: "Groups",
+        value: layer.path.join('/') || '-'
+      }), /*#__PURE__*/React__default["default"].createElement(LayerInfoText, {
+        label: "Keywords",
+        value: ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.join(', ')) || '-'
+      })));
     };
 
     /* *
@@ -12430,15 +13024,23 @@
      * 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(_a) {
+      var _b, _c, _d;
+
       var layer = _a.layer,
           layerIndex = _a.layerIndex,
           service = _a.service,
-          serviceUrl = _a.serviceUrl,
           addLayer = _a.addLayer,
           deleteLayer = _a.deleteLayer,
-          mapLayers = _a.mapLayers;
+          mapLayers = _a.mapLayers,
+          mapId = _a.mapId;
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         "data-testid": "layerListLayerRow",
         container: true,
@@ -12448,9 +13050,9 @@
         alignItems: "center",
         sx: {
           backgroundColor: 'geowebColors.cards.cardContainer',
-          paddingLeft: '12px',
+          padding: '8px',
           marginBottom: '4px',
-          height: '64px',
+          height: '68px',
           border: 'solid 1px',
           borderColor: 'geowebColors.cards.cardContainerBorder'
         }
@@ -12465,8 +13067,8 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
           fontSize: '12px',
-          height: '24px',
-          lineHeight: '24px',
+          height: '14px',
+          lineHeight: '14px',
           fontWeight: 500,
           WebkitLineClamp: 1,
           display: '-webkit-box',
@@ -12477,34 +13079,50 @@
       }, layer.text)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         item: true,
-        xs: 4
+        xs: 4,
+        direction: "column"
       }, /*#__PURE__*/React__default["default"].createElement(material.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["default"].createElement(material.Grid, {
+      }, service.name), /*#__PURE__*/React__default["default"].createElement(LayerInfoButtonConnect, {
+        layer: layer,
+        mapId: mapId,
+        serviceName: service.name
+      })), layer["abstract"] || ((_b = layer.keywords) === null || _b === void 0 ? void 0 : _b.length) || layer.path.length ? /*#__PURE__*/React__default["default"].createElement(material.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["default"].createElement(material.Grid, {
+      }, layer["abstract"] && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: __assign(__assign({}, layerInfoStyle), {
+          height: 15
+        })
+      }, layer["abstract"]), layer.path.length > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: __assign(__assign({}, layerInfoStyle), {
+          height: ((_c = layer.keywords) === null || _c === void 0 ? void 0 : _c.length) ? 15 : 30
+        })
+      }, "Groups: ", layer.path.join(' / ')), ((_d = layer.keywords) === null || _d === void 0 ? void 0 : _d.length) > 0 && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: __assign(__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["default"].createElement(material.Grid, {
         container: true,
         item: true,
         xs: 2,
@@ -12514,13 +13132,12 @@
         sx: {
           width: '80px',
           height: '48px',
-          marginRight: '8px',
-          paddingTop: '4px'
+          marginRight: '8px'
         }
       }, /*#__PURE__*/React__default["default"].createElement(LayerAddRemoveButton, {
         layer: layer,
         layerIndex: layerIndex,
-        serviceUrl: serviceUrl,
+        serviceUrl: service.serviceUrl,
         addLayer: addLayer,
         deleteLayer: deleteLayer,
         mapLayers: mapLayers
@@ -12548,13 +13165,15 @@
       var services = _a.services,
           serviceIds = _a.serviceIds,
           layerSelectHeight = _a.layerSelectHeight,
+          serviceListHeight = _a.serviceListHeight,
           addLayer = _a.addLayer,
           deleteLayer = _a.deleteLayer,
           searchString = _a.searchString,
           mapLayers = _a.mapLayers,
-          keywordIds = _a.keywordIds,
-          allKeywordsActive = _a.allKeywordsActive;
-      var layerSelectFilterHeight = 199;
+          filterIds = _a.filterIds,
+          allFiltersActive = _a.allFiltersActive,
+          mapId = _a.mapId;
+      var layerSelectFilterHeight = 155 + serviceListHeight;
 
       var _b = __read(React__namespace.useState(0), 2),
           numberOfLayers = _b[0],
@@ -12566,16 +13185,16 @@
 
       React__namespace.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 __assign(__assign({}, layer), {
               serviceId: serviceId
             });
           }));
         }, []));
-      }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
+      }, [serviceIds, filterIds, services, searchString, allFiltersActive]);
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         "data-testid": "layerList"
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -12586,21 +13205,21 @@
       }, numberOfLayers, " results"), /*#__PURE__*/React__namespace.createElement(reactWindow.FixedSizeList, {
         height: layerSelectHeight - layerSelectFilterHeight,
         itemCount: numberOfLayers,
-        itemSize: 68
+        itemSize: 72
       }, function (_a) {
         var index = _a.index,
             style = _a.style;
         return /*#__PURE__*/React__namespace.createElement("div", {
           style: style,
           key: layersFilteredFromService[index].name
-        }, /*#__PURE__*/React__namespace.createElement(LayerListRow, {
+        }, services[layersFilteredFromService[index].serviceId] && /*#__PURE__*/React__namespace.createElement(LayerListRow, {
           layer: layersFilteredFromService[index],
           layerIndex: index,
           service: services[layersFilteredFromService[index].serviceId],
-          serviceUrl: services[layersFilteredFromService[index].serviceId].serviceUrl,
           addLayer: addLayer,
           deleteLayer: deleteLayer,
-          mapLayers: mapLayers
+          mapLayers: mapLayers,
+          mapId: mapId
         }));
       }));
     };
@@ -12618,13 +13237,14 @@
      * 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(_a) {
       var mapId = _a.mapId,
-          layerSelectHeight = _a.layerSelectHeight;
+          layerSelectHeight = _a.layerSelectHeight,
+          serviceListHeight = _a.serviceListHeight;
       var services = reactRedux.useSelector(function (store) {
         return getServices(store);
       });
@@ -12674,11 +13294,11 @@
           origin: LayerActionOrigin.layerManager
         }));
       }, [dispatch, mapId]);
-      var checkedKeywordIds = reactRedux.useSelector(function (store) {
-        return getCheckedKeywordIds(store);
+      var checkedFilterIds = reactRedux.useSelector(function (store) {
+        return getCheckedFilterIds(store);
       });
-      var allKeywordsActive = reactRedux.useSelector(function (store) {
-        return isAllKeywordsChecked(store);
+      var allFiltersActive = reactRedux.useSelector(function (store) {
+        return isAllFiltersChecked(store);
       });
       var searchString = reactRedux.useSelector(function (store) {
         return getSearchFilter(store);
@@ -12687,12 +13307,14 @@
         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
       });
     };
 
@@ -12709,8 +13331,8 @@
      * 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',
@@ -12719,7 +13341,8 @@
       height: '32px!important',
       padding: '5px 12px!important',
       textTransform: 'none!important',
-      fontWeight: 'normal'
+      fontWeight: 'normal',
+      marginBottom: '5px'
     };
 
     var ServiceChip = function ServiceChip(_a) {
@@ -12729,7 +13352,9 @@
           isSelected = _a.isSelected,
           isDisabled = _a.isDisabled,
           toggleChip = _a.toggleChip;
-      return /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: (service === null || service === void 0 ? void 0 : service["abstract"]) ? "Abstract: " + service["abstract"] : ''
+      }, /*#__PURE__*/React__namespace.createElement(shared.CustomToggleButton, {
         variant: "boxed",
         selected: isSelected,
         tabIndex: 0,
@@ -12742,7 +13367,7 @@
         },
         disabled: isDisabled,
         sx: style
-      }, service ? service.serviceName : 'All');
+      }, service ? service.serviceName : 'All'));
     };
 
     /* *
@@ -12768,82 +13393,79 @@
           serviceId = _a.serviceId,
           service = _a.service,
           isSelected = _a.isSelected,
+          isAllSelected = _a.isAllSelected,
           isDisabled = _a.isDisabled;
       var dispatch = reactRedux.useDispatch();
       var activeServices = reactRedux.useSelector(function (store) {
         return getActiveServices(store);
       });
 
-      var toggleChip = function toggleChip(service) {
-        var e_1, _a, e_2, _b;
+      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) {
-            try {
-              for (var _c = __values(Object.entries(activeServices)), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var _e = __read(_d.value, 2),
-                    key = _e[0],
-                    value = _e[1];
-
-                var serviceID = key;
-                var service_1 = value;
-
-                if (service_1.enabled) {
-                  dispatch(layerSelectActions.disableActiveService({
-                    serviceId: serviceID,
-                    keywords: service_1.keywordsPerService
-                  }));
-                }
+            setAllServicesEnabled(false);
+            Object.entries(activeServices).forEach(function (_a) {
+              var _b = __read(_a, 2),
+                  serviceID = _b[0],
+                  service = _b[1];
+
+              if (service.enabled) {
+                dispatch(layerSelectActions.disableActiveService({
+                  serviceId: serviceID,
+                  filters: service.filterIds
+                }));
               }
-            } catch (e_1_1) {
-              e_1 = {
-                error: e_1_1
-              };
-            } finally {
-              try {
-                if (_d && !_d.done && (_a = _c["return"])) _a.call(_c);
-              } finally {
-                if (e_1) throw e_1.error;
-              }
-            }
+            });
           } else {
-            try {
-              for (var _f = __values(Object.entries(activeServices)), _g = _f.next(); !_g.done; _g = _f.next()) {
-                var _h = __read(_g.value, 2),
-                    key = _h[0],
-                    value = _h[1];
-
-                var serviceID = key;
-                var service_2 = value;
-
-                if (!service_2.enabled) {
-                  dispatch(layerSelectActions.enableActiveService({
-                    serviceId: serviceID,
-                    keywords: service_2.keywordsPerService
-                  }));
-                }
+            setAllServicesEnabled(true);
+            Object.entries(activeServices).forEach(function (_a) {
+              var _b = __read(_a, 2),
+                  serviceID = _b[0],
+                  service = _b[1];
+
+              if (!service.enabled) {
+                dispatch(layerSelectActions.enableActiveService({
+                  serviceId: serviceID,
+                  filters: service.filterIds
+                }));
               }
-            } catch (e_2_1) {
-              e_2 = {
-                error: e_2_1
-              };
-            } finally {
-              try {
-                if (_g && !_g.done && (_b = _f["return"])) _b.call(_f);
-              } finally {
-                if (e_2) throw e_2.error;
-              }
-            }
+            });
           }
         } else if (isSelected) {
-          dispatch(layerSelectActions.disableActiveService({
-            serviceId: serviceId,
-            keywords: activeServices[serviceId].keywordsPerService
-          }));
+          if (isAllSelected) {
+            setAllServicesEnabled(false);
+            Object.entries(activeServices).forEach(function (_a) {
+              var _b = __read(_a, 2),
+                  serviceID = _b[0],
+                  service = _b[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
           }));
         }
       };
@@ -12852,7 +13474,7 @@
         service: service,
         all: all,
         toggleChip: toggleChip,
-        isSelected: isSelected,
+        isSelected: hasSelectedStyle,
         isDisabled: isDisabled
       });
     };
@@ -12875,114 +13497,42 @@
      * */
 
     var ServiceList = function ServiceList(_a) {
-      var layerSelectWidth = _a.layerSelectWidth,
-          activeServices = _a.activeServices;
-
-      var _b = __read(React__namespace.useState(0), 2),
-          margin = _b[0],
-          setMargin = _b[1];
-
-      var _c = __read(React__namespace.useState(0), 2),
-          width = _c[0],
-          setWidth = _c[1];
-
-      var _d = __read(React__namespace.useState(null), 2),
-          intervalId = _d[0],
-          setIntervalId = _d[1];
-
+      var activeServices = _a.activeServices,
+          setHeight = _a.setHeight;
       var ref = React__namespace.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__namespace.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);
-      };
+      var _b = __read(React__namespace.useState(0), 2),
+          serviceListHeight = _b[0],
+          setServiceListHeight = _b[1];
 
+      var clientHeight = ref && ref.current && ref.current.clientHeight && ref.current.clientHeight;
       React__namespace.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__namespace.useEffect(function () {
+        setHeight(serviceListHeight);
+      }, [serviceListHeight, setHeight]);
       var isAllSelected = Object.values(activeServices).every(function (activeService) {
         return activeService.enabled;
       });
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
-          height: '32px',
           marginTop: '8px',
           width: '100%',
           overflow: 'hidden'
         },
-        "data-testid": "serviceList",
-        onWheel: onMouseWheelScroll
-      }, margin !== 0 && /*#__PURE__*/React__namespace.createElement(theme.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), " + 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__namespace.createElement(material.Box, {
+        "data-testid": "serviceList"
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           width: '100%',
-          display: 'inline-flex',
+          display: 'block',
           alignItems: 'center',
-          overflowX: 'visible',
           "float": 'left',
           paddingLeft: '40px',
-          marginRight: margin + "px",
-          marginLeft: -margin + "px",
-          maxWidth: maxWidthValue,
+          paddingRight: '30px',
+          marginBottom: '5px',
           fontSize: '0.875rem'
         },
         ref: ref
@@ -12999,32 +13549,10 @@
           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__namespace.createElement(theme.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), " + 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"
-      }));
+      })));
     };
 
     /* *
@@ -13040,18 +13568,37 @@
      * 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 sortByService = function sortByService(serviceObj) {
+      return Object.entries(serviceObj).sort(function (_a, _b) {
+        var _c = __read(_a, 2),
+            a = _c[1];
+
+        var _d = __read(_b, 2),
+            b = _d[1];
+
+        return a.serviceName.localeCompare(b.serviceName);
+      }).reduce(function (r, _a) {
+        var _b;
+
+        var _c = __read(_a, 2),
+            key = _c[0],
+            value = _c[1];
+
+        return __assign(__assign({}, r), (_b = {}, _b[key] = value, _b));
+      }, {});
+    };
 
     var ServiceListConnect = function ServiceListConnect(_a) {
-      var layerSelectWidth = _a.layerSelectWidth;
+      var setHeight = _a.setHeight;
       var activeServices = reactRedux.useSelector(function (store) {
         return getActiveServices(store);
       });
       return /*#__PURE__*/React__namespace.createElement(ServiceList, {
-        layerSelectWidth: layerSelectWidth,
-        activeServices: activeServices
+        setHeight: setHeight,
+        activeServices: sortByService(activeServices)
       });
     };
 
@@ -13107,43 +13654,62 @@
 
     var ServiceOptionsDialog = function ServiceOptionsDialog(_a) {
       var services = _a.services,
-          mapStoreRemoveService = _a.mapStoreRemoveService;
-
-      var _b = __read(React__namespace.useState(false), 2),
-          addServiceIsOpen = _b[0],
-          setAddServiceIsOpen = _b[1];
-
-      var _c = __read(React__namespace.useState({
-        isOpen: false,
-        serviceId: '',
-        serviceUrl: ''
-      }), 2),
-          editServiceIsOpen = _c[0],
-          setEditServiceIsOpen = _c[1];
+          layerSelectRemoveService = _a.layerSelectRemoveService,
+          selectedLayers = _a.selectedLayers,
+          setServicePopupInfo = _a.setServicePopupInfo;
 
       var openAddService = function openAddService() {
-        setAddServiceIsOpen(true);
+        setServicePopupInfo({
+          isOpen: true,
+          popupVariant: 'add'
+        });
       };
 
-      var closePopup = function closePopup() {
-        setAddServiceIsOpen(false);
-        setEditServiceIsOpen({
-          isOpen: false,
-          serviceId: '',
-          serviceUrl: ''
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$1.servicesContainer,
+        "data-testid": "ServiceDialog"
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$1.header
+      }, "Services"), /*#__PURE__*/React__namespace.createElement(Rows, {
+        services: services,
+        layerSelectRemoveService: layerSelectRemoveService,
+        setServicePopupInfo: setServicePopupInfo,
+        selectedLayers: selectedLayers
+      }), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: styles$1.footer
+      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
+        onClick: openAddService,
+        "data-testid": "openAddServiceButton",
+        sx: styles$1.button,
+        variant: "tertiary",
+        startIcon: /*#__PURE__*/React__namespace.createElement(theme.Add, null)
+      }, "Add a new service")));
+    };
+
+    var Rows = function Rows(_a) {
+      var services = _a.services,
+          layerSelectRemoveService = _a.layerSelectRemoveService,
+          setServicePopupInfo = _a.setServicePopupInfo,
+          selectedLayers = _a.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$1.servicesContainer,
-        "data-testid": "ServiceDialog"
-      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$1.header
-      }, "Services"), /*#__PURE__*/React__namespace.createElement(material.List, {
+      return /*#__PURE__*/React__namespace.createElement(material.List, {
         disablePadding: true
       }, Object.keys(services).map(function (serviceId) {
+        var _a = services[serviceId],
+            serviceUrl = _a.serviceUrl,
+            serviceName = _a.serviceName,
+            isUserAddedService = _a.isUserAddedService;
+        var serviceHasActiveLayers = checkIfServiceHasActiveLayers(serviceUrl);
         return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
-          key: services[serviceId].serviceUrl
+          key: serviceUrl
         }, /*#__PURE__*/React__namespace.createElement(material.ListItemText, {
           style: {
             fontSize: '16px'
@@ -13154,53 +13720,59 @@
             textOverflow: 'ellipsis',
             paddingRight: '60px'
           }
-        }, services[serviceId].serviceName)), /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, {
+        }, serviceName)), /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, {
           style: {
-            marginRight: '-10px'
-          }
-        }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-          title: "Edit Service",
-          disableHoverListener: !services[serviceId].isUserAddedService
+            marginRight: '-10px',
+            width: 90
+          }
+        }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
+          container: true
+        }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
+          item: true,
+          xs: 6
+        }, isUserAddedService ? /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+          title: "Edit Service"
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(theme.Edit, null)))), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-          title: "Delete Service",
-          disableHoverListener: !services[serviceId].isUserAddedService
+        }, /*#__PURE__*/React__namespace.createElement(theme.Edit, null)))) : /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+          title: "Show Service"
         }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(theme.Delete, null))))));
-      })), /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: styles$1.footer
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        onClick: openAddService,
-        "data-testid": "openAddServiceButton",
-        sx: styles$1.button,
-        variant: "tertiary",
-        startIcon: /*#__PURE__*/React__namespace.createElement(theme.Add, null)
-      }, "Add a new service"))), addServiceIsOpen && /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
-        servicePopupVariant: "add",
-        isOpen: addServiceIsOpen,
-        closePopup: closePopup
-      }), editServiceIsOpen && /*#__PURE__*/React__namespace.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__namespace.createElement(theme.Visibility, null))))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+          item: true,
+          xs: 6
+        }, isUserAddedService && /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+          title: serviceHasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service',
+          "data-testid": "removeServiceTooltip"
+        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+          "data-testid": "removeServiceButton",
+          "aria-label": "delete service",
+          size: "large",
+          disabled: serviceHasActiveLayers,
+          onClick: function onClick() {
+            return layerSelectRemoveService(serviceId, serviceUrl);
+          }
+        }, /*#__PURE__*/React__namespace.createElement(theme.Delete, null)))))))));
       }));
     };
 
@@ -13221,20 +13793,27 @@
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
-    var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect() {
+    var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_a) {
+      var mapId = _a.mapId,
+          setServicePopupInfo = _a.setServicePopupInfo;
       var dispatch = reactRedux.useDispatch();
-      var mapStoreRemoveService = React__namespace.useCallback(function (serviceId, serviceUrl) {
-        dispatch(serviceActions.mapStoreRemoveService({
-          id: serviceId,
+      var layerSelectRemoveService = React__namespace.useCallback(function (serviceId, serviceUrl) {
+        dispatch(layerSelectActions.layerSelectRemoveService({
+          serviceId: serviceId,
           serviceUrl: serviceUrl
         }));
       }, [dispatch]);
       var services = reactRedux.useSelector(function (store) {
         return getActiveServices(store);
       });
+      var selectedLayers = reactRedux.useSelector(function (store) {
+        return getMapLayers(store, mapId);
+      });
       return /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialog, {
+        selectedLayers: selectedLayers,
         services: services,
-        mapStoreRemoveService: mapStoreRemoveService
+        layerSelectRemoveService: layerSelectRemoveService,
+        setServicePopupInfo: setServicePopupInfo
       });
     };
 
@@ -13255,11 +13834,34 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var ServiceOptionsButton = function ServiceOptionsButton() {
-      return /*#__PURE__*/React__namespace.createElement(shared.ToggleMenu, {
+    var ServiceOptionsButton = function ServiceOptionsButton(_a) {
+      var mapId = _a.mapId;
+
+      var _b = __read(React__namespace.useState({
+        isOpen: false
+      }), 2),
+          servicePopupInfo = _b[0],
+          setServicePopupInfo = _b[1];
+
+      var closePopup = function closePopup() {
+        setServicePopupInfo({
+          isOpen: false
+        });
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(shared.ToggleMenu, {
         buttonTestId: "serviceOptionsButton",
         menuPosition: "bottom"
-      }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialogConnect, null));
+      }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsDialogConnect, {
+        setServicePopupInfo: setServicePopupInfo,
+        mapId: mapId
+      })), /*#__PURE__*/React__namespace.createElement(ServicePopupConnect, {
+        servicePopupVariant: servicePopupInfo.popupVariant,
+        isOpen: servicePopupInfo.isOpen,
+        closePopup: closePopup,
+        serviceId: servicePopupInfo.serviceId,
+        url: servicePopupInfo.serviceUrl
+      }));
     };
 
     /* *
@@ -13292,6 +13894,7 @@
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
           source = _e === void 0 ? 'module' : _e;
+      var initialServiceListHeight = 37;
 
       var _f = __read(React__namespace.useState(500), 2),
           height = _f[0],
@@ -13301,6 +13904,10 @@
           width = _g[0],
           setWidth = _g[1];
 
+      var _h = __read(React__namespace.useState(initialServiceListHeight), 2),
+          serviceListHeight = _h[0],
+          setServiceListHeight = _h[1];
+
       var onChangeSize = function onChangeSize(_a) {
         var height = _a.height,
             width = _a.width;
@@ -13308,6 +13915,12 @@
         setWidth(width);
       };
 
+      var handleHeightChange = function handleHeightChange(height) {
+        if (height > initialServiceListHeight) {
+          setServiceListHeight(height);
+        }
+      };
+
       return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
         title: showTitle ? "Layer Select " + mapId : 'Layer Select',
         startSize: {
@@ -13348,22 +13961,103 @@
           margin: '12px 0 0 calc(100% - 36px)',
           zIndex: 2
         }
-      }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsButton, null)), /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: {
-          height: '48px'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(ServiceListConnect, {
-        layerSelectWidth: width
+      }, /*#__PURE__*/React__namespace.createElement(ServiceOptionsButton, {
+        mapId: mapId
+      })), /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(ServiceListConnect, {
+        setHeight: handleHeightChange
       })), /*#__PURE__*/React__namespace.createElement(material.Box, {
         sx: {
           padding: '0 8px'
         }
       }, /*#__PURE__*/React__namespace.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 = reactRedux.useDispatch();
+      var onCloseDialog = React.useCallback(function () {
+        dispatch(uiActions.setToggleOpenDialog({
+          type: dialogType,
+          setOpen: false
+        }));
+      }, [dialogType, dispatch]);
+      var mapId = reactRedux.useSelector(function (store) {
+        return getDialogMapId(store, dialogType);
+      });
+      var isMapPresent = reactRedux.useSelector(function (store) {
+        return getIsMapPresent(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) {
+          onCloseDialog();
+        }
+      }, [mapId, isMapPresent, onCloseDialog]);
+      var registerDialog = React.useCallback(function () {
+        dispatch(uiActions.registerDialog({
+          type: dialogType,
+          setOpen: false
+        }));
+      }, [dialogType, dispatch]);
+      var unregisterDialog = React.useCallback(function () {
+        dispatch(uiActions.unregisterDialog({
+          type: dialogType
+        }));
+      }, [dialogType, dispatch]); // Register this dialog in the store
+
+      React.useEffect(function () {
+        registerDialog();
+        return function () {
+          unregisterDialog();
+        }; // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+      var uiIsOrderedOnTop = reactRedux.useSelector(function (store) {
+        return getDialogIsOrderedOnTop(store, dialogType);
+      });
+      var setDialogOrder = React.useCallback(function () {
+        if (!uiIsOrderedOnTop) {
+          dispatch(uiActions.orderDialog({
+            type: dialogType
+          }));
+        }
+      }, [dialogType, dispatch, uiIsOrderedOnTop]);
+      var dialogOrder = reactRedux.useSelector(function (store) {
+        return getDialogOrder(store, dialogType);
+      });
+      var uiSource = reactRedux.useSelector(function (store) {
+        return getDialogSource(store, dialogType);
+      });
+      var isDialogOpen = reactRedux.useSelector(function (store) {
+        return getisDialogOpen(store, dialogType);
+      });
+      return {
+        setDialogOrder: setDialogOrder,
+        dialogOrder: dialogOrder,
+        onCloseDialog: onCloseDialog,
+        uiSource: uiSource,
+        isDialogOpen: isDialogOpen
+      };
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -13382,34 +14076,57 @@
      * */
 
     var FilterListItem = function FilterListItem(_a) {
-      var keyword = _a.keyword,
-          toggleKeywords = _a.toggleKeywords,
-          enableOnlyOneKeyword = _a.enableOnlyOneKeyword;
+      var filter = _a.filter,
+          toggleFilter = _a.toggleFilter,
+          enableOnlyOneFilter = _a.enableOnlyOneFilter;
 
       var _b = __read(React__namespace.useState(false), 2),
-          hovering = _b[0],
-          setHovering = _b[1];
+          isHovering = _b[0],
+          setIsHovering = _b[1];
 
-      var handleMouseOver = React__namespace.useCallback(function () {
-        setHovering(true);
+      var handleMouseEnter = React__namespace.useCallback(function () {
+        setIsHovering(true);
       }, []);
       var handleMouseLeave = React__namespace.useCallback(function () {
-        setHovering(false);
+        setIsHovering(false);
       }, []);
 
-      var selectOnlyOne = function selectOnlyOne(keyword) {
-        enableOnlyOneKeyword(keyword);
+      var selectOnlyOne = function selectOnlyOne(filterId) {
+        enableOnlyOneFilter(filterId);
+      };
+
+      var toggleCheckbox = function toggleCheckbox(filterId) {
+        toggleFilter([filterId]);
       };
 
-      var toggleCheckbox = function toggleCheckbox(keyword) {
-        toggleKeywords([keyword]);
+      var mouseMoveRef = React__namespace.useRef(null);
+      React__namespace.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__namespace.createElement("div", {
-          onMouseOver: handleMouseOver,
+          ref: mouseMoveRef,
+          onMouseEnter: handleMouseEnter,
           onMouseLeave: handleMouseLeave,
-          onFocus: handleMouseOver,
+          onFocus: handleMouseEnter,
           onBlur: handleMouseLeave,
           "data-testid": "filterResultListItem"
         }, /*#__PURE__*/React__namespace.createElement(material.ListItem, {
@@ -13427,9 +14144,9 @@
           }
         }, /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
           color: "secondary",
-          checked: keyword.checked,
+          checked: filter.checked,
           onChange: function onChange() {
-            return toggleCheckbox(keyword.id);
+            return toggleCheckbox(filter.id);
           },
           sx: {
             paddingTop: '6px',
@@ -13445,14 +14162,14 @@
             whiteSpace: 'nowrap',
             overflow: 'hidden'
           }
-        }, keyword.id), hovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+        }, filter.name, " (", filter.amountVisible, ")"), isHovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
           style: {
             backgroundColor: 'transparent'
           },
           edge: "end",
           size: "small",
           onClick: function onClick() {
-            return selectOnlyOne(keyword.id);
+            return selectOnlyOne(filter.id);
           },
           "data-testid": "onlyButton"
         }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
@@ -13485,25 +14202,22 @@
      * */
 
     var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemConnect(_a) {
-      var keyword = _a.keyword;
+      var filter = _a.filter;
       var dispatch = reactRedux.useDispatch();
-      var toggleKeywords = React__namespace.useCallback(function (keywords) {
-        dispatch(layerSelectActions.toggleKeywords({
-          keywords: keywords
+      var toggleFilter = React__namespace.useCallback(function (filterIds) {
+        dispatch(layerSelectActions.toggleFilter({
+          filterIds: filterIds
         }));
       }, [dispatch]);
-      var enableOnlyOneKeyword = React__namespace.useCallback(function (keyword) {
-        dispatch(layerSelectActions.enableOnlyOneKeyword({
-          keyword: keyword
+      var enableOnlyOneFilter = React__namespace.useCallback(function (filterId) {
+        dispatch(layerSelectActions.enableOnlyOneFilter({
+          filterId: filterId
         }));
       }, [dispatch]);
-      var keywordObject = reactRedux.useSelector(function (store) {
-        return getKeywordObjectById(store, keyword);
-      });
       return /*#__PURE__*/React__namespace.createElement(FilterListItem, {
-        keyword: keywordObject,
-        toggleKeywords: toggleKeywords,
-        enableOnlyOneKeyword: enableOnlyOneKeyword
+        filter: filter,
+        toggleFilter: toggleFilter,
+        enableOnlyOneFilter: enableOnlyOneFilter
       });
     };
 
@@ -13526,26 +14240,26 @@
 
     var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchConnect() {
       var dispatch = reactRedux.useDispatch();
-      var allKeywordsActive = reactRedux.useSelector(function (store) {
-        return isAllKeywordsChecked(store);
+      var allFiltersActive = reactRedux.useSelector(function (store) {
+        return isAllFiltersChecked(store);
       });
-      var allKeywordIds = reactRedux.useSelector(function (store) {
-        return getAllKeywordIds(store);
+      var allFilterIds = reactRedux.useSelector(function (store) {
+        return getAllFilterIds(store);
       });
-      var checkedKeywordIds = reactRedux.useSelector(function (store) {
-        return getCheckedKeywordIds(store);
+      var checkedFilterIds = reactRedux.useSelector(function (store) {
+        return getCheckedFilterIds(store);
       });
-      var toggleKeywords = React__namespace.useCallback(function () {
-        var keywords = allKeywordsActive ? checkedKeywordIds : allKeywordIds.filter(function (id) {
-          return !checkedKeywordIds.includes(id);
+      var toggleFilters = React__namespace.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__namespace.createElement(material.Switch, {
-        checked: allKeywordsActive,
-        onChange: toggleKeywords,
+        checked: allFiltersActive,
+        onChange: toggleFilters,
         "data-testid": "customSwitch"
       });
     };
@@ -13566,23 +14280,39 @@
      * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
+    var DIALOG_TITLE = 'Groups & Keywords';
 
     var KeywordFilterResults = function KeywordFilterResults(_a) {
-      var allKeywordIds = _a.allKeywordIds,
-          mapId = _a.mapId,
+      var _b, _c;
+
+      var filters = _a.filters,
           bounds = _a.bounds,
-          _b = _a.onClose,
-          onClose = _b === void 0 ? function () {} : _b,
-          showTitle = _a.showTitle,
+          _d = _a.onClose,
+          onClose = _d === void 0 ? function () {} : _d,
           isOpen = _a.isOpen,
-          _c = _a.onMouseDown,
-          onMouseDown = _c === void 0 ? function () {} : _c,
-          _d = _a.order,
-          order = _d === void 0 ? 0 : _d,
-          _e = _a.source,
-          source = _e === void 0 ? 'module' : _e;
+          _e = _a.onMouseDown,
+          onMouseDown = _e === void 0 ? function () {} : _e,
+          _f = _a.order,
+          order = _f === void 0 ? 0 : _f,
+          _g = _a.source,
+          source = _g === void 0 ? 'module' : _g;
+      var filtersGroupedByType = _.groupBy(filters, function (filter) {
+        return filter.type;
+      });
+      var groups = (_b = filtersGroupedByType['group']) !== null && _b !== void 0 ? _b : [];
+
+      var groupsSorted = __spreadArray([], __read(groups)).sort(function (a, b) {
+        return a.name.localeCompare(b.name);
+      });
+
+      var keywords = (_c = filtersGroupedByType['keyword']) !== null && _c !== void 0 ? _c : [];
+
+      var keywordsSorted = __spreadArray([], __read(keywords)).sort(function (a, b) {
+        return a.name.localeCompare(b.name);
+      });
+
       return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
-        title: showTitle ? "Filter Results " + mapId : 'Filter Results',
+        title: DIALOG_TITLE,
         "data-testid": "keywordFilterResults",
         startSize: {
           width: 349,
@@ -13633,10 +14363,15 @@
         style: {
           padding: '0px'
         }
-      }, allKeywordIds.map(function (keywordId) {
+      }, /*#__PURE__*/React__namespace.createElement(material.ListSubheader, null, "Groups"), groupsSorted.map(function (group) {
+        return /*#__PURE__*/React__namespace.createElement(KeywordFilterResultsListItemConnect, {
+          key: group.id,
+          filter: group
+        });
+      }), /*#__PURE__*/React__namespace.createElement(material.ListSubheader, null, "Keywords"), keywordsSorted.map(function (keyword) {
         return /*#__PURE__*/React__namespace.createElement(KeywordFilterResultsListItemConnect, {
-          key: keywordId,
-          keyword: keywordId
+          key: keyword.id,
+          filter: keyword
         });
       })));
     };
@@ -13659,78 +14394,63 @@
      * */
 
     var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_a) {
-      var bounds = _a.bounds,
-          _b = _a.showTitle,
-          showTitle = _b === void 0 ? false : _b;
-      var dispatch = reactRedux.useDispatch();
-      var mapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'keywordFilter');
-      });
-      var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, 'keywordFilter');
-      });
-      var onClose = React__namespace.useCallback(function () {
-        return dispatch(uiActions.setToggleOpenDialog({
-          type: 'keywordFilter',
-          setOpen: false
-        }));
-      }, [dispatch]);
-      var isMapPresent = reactRedux.useSelector(function (store) {
-        return getIsMapPresent(store, mapId);
-      });
-      var uiOrder = reactRedux.useSelector(function (store) {
-        return getDialogOrder(store, 'keywordFilter');
-      });
-      var uiSource = reactRedux.useSelector(function (store) {
-        return getDialogSource(store, 'keywordFilter');
-      });
-      var uiIsOrderedOnTop = reactRedux.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 = _a.bounds;
 
-      React__namespace.useEffect(function () {
-        if (mapId !== '' && !isMapPresent) {
-          onClose();
-        }
-      }, [mapId, isMapPresent, onClose]);
-      var registerDialog = React__namespace.useCallback(function () {
-        return dispatch(uiActions.registerDialog({
-          type: 'keywordFilter',
-          setOpen: false
-        }));
-      }, [dispatch]);
-      var unregisterDialog = React__namespace.useCallback(function () {
-        return dispatch(uiActions.unregisterDialog({
-          type: 'keywordFilter'
-        }));
-      }, [dispatch]);
-      var onOrderDialog = React__namespace.useCallback(function () {
-        if (!uiIsOrderedOnTop) {
-          dispatch(uiActions.orderDialog({
-            type: 'keywordFilter'
-          }));
-        }
-      }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
+      var _b = useSetupDialog('keywordFilter'),
+          dialogOrder = _b.dialogOrder,
+          onCloseDialog = _b.onCloseDialog,
+          setDialogOrder = _b.setDialogOrder,
+          isDialogOpen = _b.isDialogOpen,
+          uiSource = _b.uiSource;
 
-      React__namespace.useEffect(function () {
-        registerDialog();
-        return function () {
-          unregisterDialog();
-        }; // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
-      var allKeywordIds = reactRedux.useSelector(function (store) {
-        return getAllKeywordIds(store);
-      });
+      var filters = reactRedux.useSelector(getAllFilters);
       return /*#__PURE__*/React__namespace.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 = reactRedux.useSelector(function (store) {
+        return getActiveLayerInfo(store);
+      });
+
+      var _a = useSetupDialog(DialogTypes.LayerInfo),
+          dialogOrder = _a.dialogOrder,
+          onCloseDialog = _a.onCloseDialog,
+          setDialogOrder = _a.setDialogOrder,
+          uiSource = _a.uiSource,
+          isDialogOpen = _a.isDialogOpen;
+
+      return /*#__PURE__*/React__default["default"].createElement(LayerInfoDialog, {
+        isOpen: isDialogOpen,
+        onClose: onCloseDialog,
+        onMouseDown: setDialogOrder,
+        order: dialogOrder,
+        source: uiSource,
+        layer: layer
       });
     };
 
@@ -13758,69 +14478,59 @@
      * ``` <LayerSelectConnect />```
      */
 
-    var LayerSelectConnect = function LayerSelectConnect(_a) {
-      var bounds = _a.bounds,
-          _b = _a.showTitle,
-          showTitle = _b === void 0 ? false : _b,
-          _c = _a.preloadedServices,
-          preloadedServices = _c === void 0 ? preloadedDefaultMapServices : _c;
+    var LayerSelectConnect = function LayerSelectConnect(_a) {
+      var bounds = _a.bounds,
+          _b = _a.showTitle,
+          showTitle = _b === void 0 ? false : _b;
+      var mapId = reactRedux.useSelector(function (store) {
+        return getDialogMapId(store, 'layerSelect');
+      });
+
+      var _c = useSetupDialog('layerSelect'),
+          dialogOrder = _c.dialogOrder,
+          isDialogOpen = _c.isDialogOpen,
+          onCloseDialog = _c.onCloseDialog,
+          setDialogOrder = _c.setDialogOrder,
+          uiSource = _c.uiSource;
+
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(LayerSelect, {
+        mapId: mapId,
+        bounds: bounds,
+        isOpen: isDialogOpen,
+        onClose: onCloseDialog,
+        showTitle: showTitle,
+        onMouseDown: setDialogOrder,
+        order: dialogOrder,
+        source: uiSource
+      }), /*#__PURE__*/React__namespace.createElement(KeywordFilterResultsConnect, null), /*#__PURE__*/React__namespace.createElement(LayerInfoDialogConnect, 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 useFetchServices = function useFetchServices(dialogType, preloadedServices) {
+      if (preloadedServices === void 0) {
+        preloadedServices = preloadedDefaultMapServices;
+      }
+
       var dispatch = reactRedux.useDispatch();
       var isMounted = shared.useIsMounted().isMounted;
-      var mapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'layerSelect');
-      });
       var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, 'layerSelect');
-      });
-      var onClose = React__namespace.useCallback(function () {
-        return dispatch(uiActions.setToggleOpenDialog({
-          type: 'layerSelect',
-          setOpen: false
-        }));
-      }, [dispatch]);
-      var isMapPresent = reactRedux.useSelector(function (store) {
-        return getIsMapPresent(store, mapId);
+        return getisDialogOpen(store, dialogType);
       });
-      var uiOrder = reactRedux.useSelector(function (store) {
-        return getDialogOrder(store, 'layerSelect');
-      });
-      var uiSource = reactRedux.useSelector(function (store) {
-        return getDialogSource(store, 'layerSelect');
-      });
-      var uiIsOrderedOnTop = reactRedux.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__namespace.useEffect(function () {
-        if (mapId !== '' && !isMapPresent) {
-          onClose();
-        }
-      }, [mapId, isMapPresent, onClose]);
-      var registerDialog = React__namespace.useCallback(function () {
-        return dispatch(uiActions.registerDialog({
-          type: 'layerSelect',
-          setOpen: false
-        }));
-      }, [dispatch]);
-      var unregisterDialog = React__namespace.useCallback(function () {
-        return dispatch(uiActions.unregisterDialog({
-          type: 'layerSelect'
-        }));
-      }, [dispatch]);
-      var onOrderDialog = React__namespace.useCallback(function () {
-        if (!uiIsOrderedOnTop) {
-          dispatch(uiActions.orderDialog({
-            type: 'layerSelect'
-          }));
-        }
-      }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
-
-      React__namespace.useEffect(function () {
-        registerDialog();
-        return function () {
-          unregisterDialog();
-        }; // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
       var serviceSetLayers = React__namespace.useCallback(function (payload) {
         dispatch(serviceActions.serviceSetLayers(payload));
       }, [dispatch]);
@@ -13840,7 +14550,9 @@
                   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 () {
@@ -13850,16 +14562,13 @@
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
       }, [isOpenInStore, preloadedServices, serviceSetLayers]);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(LayerSelect, {
-        mapId: mapId,
-        bounds: bounds,
-        isOpen: isOpenInStore,
-        onClose: onClose,
-        showTitle: showTitle,
-        onMouseDown: onOrderDialog,
-        order: uiOrder,
-        source: uiSource
-      }), /*#__PURE__*/React__namespace.createElement(KeywordFilterResultsConnect, null));
+    };
+    var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices(presets, userAddedServices) {
+      return Object.values(__assign(__assign({}, presets.reduce(function (byUrl, preset) {
+        var _a;
+
+        return __assign(__assign({}, byUrl), (_a = {}, _a[preset.url] = preset, _a));
+      }, {})), userAddedServices));
     };
 
     /* *
@@ -13878,6 +14587,7 @@
      * 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
@@ -13901,87 +14611,41 @@
           layerSelect = _c === void 0 ? false : _c,
           _d = _a.leftComponent,
           leftComponent = _d === void 0 ? null : _d;
-      var dispatch = reactRedux.useDispatch();
-      var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, 'layerManager');
-      });
       var mapId = reactRedux.useSelector(function (store) {
-        return getDialogMapId(store, 'layerManager');
-      });
-      var onClose = React__namespace.useCallback(function () {
-        return dispatch(uiActions.setToggleOpenDialog({
-          type: 'layerManager',
-          setOpen: false
-        }));
-      }, [dispatch]);
-      var isMapPresent = reactRedux.useSelector(function (store) {
-        return getIsMapPresent(store, mapId);
-      });
-      var uiOrder = reactRedux.useSelector(function (store) {
-        return getDialogOrder(store, 'layerManager');
-      });
-      var uiSource = reactRedux.useSelector(function (store) {
-        return getDialogSource(store, 'layerManager');
-      });
-      var uiIsOrderedOnTop = reactRedux.useSelector(function (store) {
-        return getDialogIsOrderedOnTop(store, 'layerManager');
+        return getDialogMapId(store, dialogType);
       });
       var isMapPresetLoading = reactRedux.useSelector(function (store) {
         return getIsMapPresetLoading(store, mapId);
       });
       var mapPresetError = reactRedux.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__namespace.useEffect(function () {
-        if (mapId !== '' && !isMapPresent) {
-          onClose();
-        }
-      }, [mapId, isMapPresent, onClose]);
-      var registerDialog = React__namespace.useCallback(function () {
-        return dispatch(uiActions.registerDialog({
-          type: 'layerManager',
-          setOpen: false
-        }));
-      }, [dispatch]);
-      var unregisterDialog = React__namespace.useCallback(function () {
-        return dispatch(uiActions.unregisterDialog({
-          type: 'layerManager'
-        }));
-      }, [dispatch]);
-      var onOrderDialog = React__namespace.useCallback(function () {
-        if (!uiIsOrderedOnTop) {
-          dispatch(uiActions.orderDialog({
-            type: 'layerManager'
-          }));
-        }
-      }, [dispatch, uiIsOrderedOnTop]); // Register this dialog in the store
+      var _e = useSetupDialog(dialogType),
+          dialogOrder = _e.dialogOrder,
+          setDialogOrder = _e.setDialogOrder,
+          onCloseDialog = _e.onCloseDialog,
+          isDialogOpen = _e.isDialogOpen,
+          uiSource = _e.uiSource;
 
-      React__namespace.useEffect(function () {
-        registerDialog();
-        return function () {
-          unregisterDialog();
-        }; // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
+      useFetchServices(dialogType, preloadedMapServices);
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.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__namespace.createElement(LayerSelectConnect, {
-        preloadedServices: preloadedMapServices
-      }));
+      }), layerSelect && /*#__PURE__*/React__namespace.createElement(LayerSelectConnect, null));
     };
 
     /* *
@@ -14223,7 +14887,7 @@
         return theme.Equalizer;
       }
 
-      return theme.Sort;
+      return theme.DimensionsElevation;
     };
 
     /* *
@@ -14527,7 +15191,7 @@
           _b = _a.order,
           order = _b === void 0 ? 0 : _b,
           onMouseDown = _a.onMouseDown,
-          onToggleDialog = _a.onToggleDialog,
+          onCloseDialog = _a.onCloseDialog,
           _c = _a.index,
           index = _c === void 0 ? 0 : _c,
           _d = _a.source,
@@ -14582,9 +15246,7 @@
         headerSize: "small",
         isOpen: isOpen,
         "data-testid": "multidimensionContent-" + title,
-        onClose: function onClose() {
-          return onToggleDialog(false);
-        },
+        onClose: onCloseDialog,
         bounds: "parent",
         onMouseDown: onMouseDown,
         order: order,
@@ -14631,71 +15293,26 @@
     var MultiMapSingleDimensionSelectConnect = function MultiMapSingleDimensionSelectConnect(_a) {
       var dimensionName = _a.dimensionName,
           index = _a.index;
-      var dispatch = reactRedux.useDispatch();
       var uiDialogType = getDimensionType(dimensionName);
       var mapId = reactRedux.useSelector(function (store) {
         return getDialogMapId(store, uiDialogType);
       });
-      var uiOrder = reactRedux.useSelector(function (store) {
-        return getDialogOrder(store, uiDialogType);
-      });
-      var uiSource = reactRedux.useSelector(function (store) {
-        return getDialogSource(store, uiDialogType);
-      });
-      var uiIsOrderedOnTop = reactRedux.useSelector(function (store) {
-        return getDialogIsOrderedOnTop(store, uiDialogType);
-      });
-      var isOpen = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, uiDialogType);
-      });
-      var isMapPresent = reactRedux.useSelector(function (store) {
-        return getIsMapPresent(store, mapId);
-      });
-      var onOrderDialog = React__namespace.useCallback(function () {
-        if (!uiIsOrderedOnTop) {
-          dispatch(uiActions.orderDialog({
-            type: uiDialogType
-          }));
-        }
-      }, [dispatch, uiDialogType, uiIsOrderedOnTop]);
-      var onToggleDialog = React__namespace.useCallback(function (setOpen) {
-        dispatch(uiActions.setToggleOpenDialog({
-          type: uiDialogType,
-          setOpen: setOpen
-        }));
-      }, [dispatch, uiDialogType]);
-      var registerDialog = React__namespace.useCallback(function (activeMapId) {
-        return dispatch(uiActions.registerDialog({
-          type: uiDialogType,
-          mapId: activeMapId
-        }));
-      }, [dispatch, uiDialogType]);
-      var unregisterDialog = React__namespace.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__namespace.useEffect(function () {
-        if (mapId !== '' && !isMapPresent) {
-          onToggleDialog(false);
-        }
-      }, [mapId, isMapPresent, onToggleDialog]); // Register this dialog in the store
+      var _b = useSetupDialog(uiDialogType),
+          dialogOrder = _b.dialogOrder,
+          isDialogOpen = _b.isDialogOpen,
+          onCloseDialog = _b.onCloseDialog,
+          setDialogOrder = _b.setDialogOrder,
+          uiSource = _b.uiSource;
 
-      React__namespace.useEffect(function () {
-        registerDialog(mapId);
-        return function () {
-          unregisterDialog();
-        }; // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
       return /*#__PURE__*/React__namespace.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
       });
     };
@@ -14880,108 +15497,142 @@
      * 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)
+     * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var speedTooltipTitle = 'Speed';
-
-    var SpeedButton = function SpeedButton(_a) {
-      var animationDelay = _a.animationDelay,
-          setMapAnimationDelay = _a.setMapAnimationDelay;
-
-      var _b = __read(React__namespace.useState(false), 2),
-          open = _b[0],
-          setOpen = _b[1];
-
-      var marks = speedFactors.map(function (speedFactor, i) {
-        return {
-          delay: getSpeedDelay(speedFactor),
-          markPos: i,
-          text: speedFactor + "x"
-        };
-      });
-      var max = marks.length - 1;
-      var min = 0;
-      var currentValue = marks.findIndex(function (info) {
-        return info.delay === animationDelay;
+    var TimeSliderMenu = function TimeSliderMenu(_a) {
+      var marks = _a.marks,
+          value = _a.value,
+          isOpenByDefault = _a.isOpenByDefault,
+          handleMenuItemClick = _a.handleMenuItemClick,
+          isDisabled = _a.isDisabled,
+          handleAutoClick = _a.handleAutoClick,
+          isAutoSelected = _a.isAutoSelected,
+          title = _a.title,
+          icon = _a.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 _b = __read(React__namespace.useState(null), 2),
+          anchorRef = _b[0],
+          setAnchorRef = _b[1];
 
-      var onChangeSlider = function onChangeSlider(event, value) {
-        var newValue = getAnimationDelayValue(value);
+      var _c = __read(React.useState(false), 2),
+          open = _c[0],
+          setOpen = _c[1];
 
-        if (event.type !== 'keydown') {
-          setMapAnimationDelay(newValue);
+      React__namespace.useEffect(function () {
+        if (anchorRef && isOpenByDefault) {
+          setOpen(true);
         }
-      };
-
-      var onKeyDown = function onKeyDown(event) {
-        // disable default Slider behavior
-        event.stopPropagation();
-        event.preventDefault(); // custom logic
-
-        if (event.key === 'Tab') {
-          setOpen(!open);
+      }, [anchorRef, isOpenByDefault]);
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        onKeyDown: function onKeyDown(event) {
+          event.stopPropagation();
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: title
+      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
+        onClick: function onClick() {
+          setOpen(true);
+        },
+        ref: setAnchorRef,
+        active: true,
+        width: "58px"
+      }, icon, /*#__PURE__*/React__namespace.createElement(theme.TextIcon, {
+        text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
+      }))), /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(material.MenuItem, {
+        disabled: true,
+        sx: {
+          fontSize: '12px',
+          opacity: 0.67,
+          padding: '0px 12px',
+          '&.MuiMenuItem-root': {
+            minHeight: '30px!important'
+          }
         }
+      }, title), marks.map(function (mark) {
+        return /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(material.MenuItem, {
+        onClick: function onClick() {
+          handleAutoClick();
+          setOpen(false);
+        },
+        selected: isAutoSelected,
+        disabled: isDisabled
+      }, "Auto")));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var speedTooltipTitle = 'Speed';
 
-        var newValue = getValueFromKeyboardEvent(event, currentValue, min, max);
+    var SpeedButton = function SpeedButton(_a) {
+      var animationDelay = _a.animationDelay,
+          setMapAnimationDelay = _a.setMapAnimationDelay;
 
-        if (newValue !== null) {
-          setMapAnimationDelay(getAnimationDelayValue(newValue));
-        }
-      };
+      var sorted = __spreadArray([], __read(speedFactors)).sort(function (a, b) {
+        return b - a;
+      });
 
-      var text = marks[currentValue].text;
-      return /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: {
-          height: '24px',
-          width: '24px',
-          position: 'relative'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: speedTooltipTitle
-      }, /*#__PURE__*/React__namespace.createElement(shared.ToolButton, {
-        onClick: onClickButton,
-        active: true,
-        "data-testid": "speedButton"
-      }, /*#__PURE__*/React__namespace.createElement(theme.TextIcon, {
-        text: text
-      }))), open ? /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: {
-          padding: '0 0 60px 0',
-          backgroundColor: 'geowebColors.background.surface',
-          width: '95px',
-          height: '150px',
-          position: 'absolute',
-          bottom: '35px'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
-        sx: shared.sliderHeaderStyle
-      }, "Speed"), /*#__PURE__*/React__namespace.createElement(shared.CustomSlider, {
-        "data-testid": "speedSlider",
-        orientation: "vertical",
-        value: currentValue,
-        step: null,
-        max: max,
-        min: min,
-        marks: marks.map(function (_a) {
-          var markPos = _a.markPos,
-              text = _a.text;
-          return {
-            value: markPos,
-            label: text
-          };
-        }),
-        onChange: onChangeSlider,
-        onKeyDown: onKeyDown
-      })) : null);
+      var marks = sorted.map(function (speedFactor) {
+        return {
+          value: getSpeedDelay(speedFactor),
+          text: "x" + speedFactor,
+          label: "x" + speedFactor
+        };
+      });
+      return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
+        handleMenuItemClick: function handleMenuItemClick(mark) {
+          setMapAnimationDelay(mark.value);
+        },
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Speed, null),
+        marks: marks,
+        title: speedTooltipTitle,
+        value: animationDelay
+      });
     };
 
     /* *
@@ -15000,112 +15651,93 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var timeStepMarks = [{
-      value: 1,
+    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(_a) {
@@ -15123,86 +15755,31 @@
           _e = _a.isOpenByDefault,
           isOpenByDefault = _e === void 0 ? false : _e;
       var timeStepFromLayer = getActiveLayerTimeStep(timeDimension) || timeStep;
-      var currentMark = timeStepMarks.find(function (mark) {
-        return mark.timeStepValue === timeStep;
-      });
-      React__default["default"].useEffect(function () {
+      React__namespace.useEffect(function () {
         if (isTimestepAuto) {
           onChangeTimeStep(timeStepFromLayer);
         }
       }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
 
-      var _f = __read(React__default["default"].useState(null), 2),
-          anchorRef = _f[0],
-          setAnchorRef = _f[1];
-
-      var _g = __read(React__default["default"].useState(false), 2),
-          open = _g[0],
-          setOpen = _g[1];
-
-      React__default["default"].useEffect(function () {
-        if (anchorRef && isOpenByDefault) {
-          setOpen(true);
-        }
-      }, [anchorRef, isOpenByDefault]);
-      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
-        onKeyDown: function onKeyDown(event) {
-          event.stopPropagation();
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-        title: timeStepTitle
-      }, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
-        onClick: function onClick() {
-          setOpen(true);
-        },
-        ref: setAnchorRef,
-        active: true,
-        width: "58px"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.FastForward, null), /*#__PURE__*/React__default["default"].createElement(theme.TextIcon, {
-        text: currentMark === null || currentMark === void 0 ? void 0 : currentMark.text
-      }))), /*#__PURE__*/React__default["default"].createElement(material.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["default"].createElement(material.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["default"].createElement(material.MenuItem, {
-        onClick: function onClick() {
-          onToggleTimestepAuto();
-          setOpen(false);
-        },
-        selected: isTimestepAuto,
-        disabled: disabled
-      }, "Auto")));
+        onChangeTimeStep(mark.value, MapActionOrigin.map);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(TimeSliderMenu, {
+        title: timeStepTitle,
+        isOpenByDefault: isOpenByDefault,
+        marks: marks$1,
+        value: timeStep,
+        handleMenuItemClick: handleMenuItemClick,
+        isDisabled: disabled,
+        isAutoSelected: isTimestepAuto,
+        handleAutoClick: onToggleTimestepAuto,
+        icon: /*#__PURE__*/React__namespace.createElement(theme.FastForward, null)
+      });
     };
 
     /* *
@@ -16966,7 +17543,7 @@
         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);
           }
         };
@@ -17047,14 +17624,14 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var connectRedux$4 = reactRedux.connect(function (store, props) {
+    var connectRedux$3 = reactRedux.connect(function (store, props) {
       return {
         isAutoUpdating: isAutoUpdating(store, props.mapId)
       };
     }, {
       toggleAutoUpdate: mapActions$1.toggleAutoUpdate
     });
-    var AutoUpdateButtonConnectComponent = connectRedux$4(function (_a) {
+    var AutoUpdateButtonConnectComponent = connectRedux$3(function (_a) {
       var mapId = _a.mapId,
           isAutoUpdating = _a.isAutoUpdating,
           toggleAutoUpdate = _a.toggleAutoUpdate;
@@ -17073,7 +17650,7 @@
         disabled: false
       });
     });
-    var AutoUpdateButtonConnect = connectRedux$4(AutoUpdateButtonConnectComponent);
+    var AutoUpdateButtonConnect = connectRedux$3(AutoUpdateButtonConnectComponent);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -17091,31 +17668,27 @@
      * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2020 - Finnish Meteorological Institute (FMI)
      * */
-    var connectRedux$3 = reactRedux.connect(function (store, props) {
-      return {
-        animationDelay: getMapAnimationDelay(store, props.mapId)
-      };
-    }, {
-      setMapAnimationDelay: mapActions$1.setAnimationDelay
-    });
-    var SpeedButtonConnect = connectRedux$3(function (_a) {
-      var animationDelay = _a.animationDelay,
-          mapId = _a.mapId,
-          setMapAnimationDelay = _a.setMapAnimationDelay;
 
-      var onSetAnimationDelay = function onSetAnimationDelay(_animationDelay) {
-        setMapAnimationDelay({
+    var SpeedButtonConnect = function SpeedButtonConnect(_a) {
+      var mapId = _a.mapId;
+      var animationDelay = reactRedux.useSelector(function (store) {
+        return getMapAnimationDelay(store, mapId);
+      });
+      var dispatch = reactRedux.useDispatch();
+
+      var onSetAnimationDelay = function onSetAnimationDelay(animationDelay) {
+        dispatch(mapActions$1.setAnimationDelay({
           mapId: mapId,
-          animationDelay: _animationDelay,
+          animationDelay: animationDelay,
           origin: MapActionOrigin.map
-        });
+        }));
       };
 
       return /*#__PURE__*/React__namespace.createElement(SpeedButton, {
         animationDelay: animationDelay,
         setMapAnimationDelay: onSetAnimationDelay
       });
-    });
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -18160,13 +18733,14 @@
     var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSInstance, mapProperties, onUpdateLayerInformation) {
       var origin = LayerActionOrigin.ReactMapViewParseLayer;
       var service = webmap.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,
@@ -21825,6 +22399,9 @@
       var displayMapPin = reactRedux.useSelector(function (store) {
         return getDisplayMapPin(store, mapId);
       });
+      var services = reactRedux.useSelector(function (store) {
+        return getServices(store);
+      });
       var dispatch = reactRedux.useDispatch();
       var map = getWMJSMapById(mapId);
       var mapChangeDimension = React__namespace.useCallback(function (mapDimensionPayload) {
@@ -21912,6 +22489,7 @@
         animationDelay: animationDelay,
         displayMapPin: displayMapPin,
         disableMapPin: disableMapPin,
+        services: services,
         onMapChangeDimension: function onMapChangeDimension(mapDimensionPayload) {
           if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
             setTime({
@@ -22918,55 +23496,23 @@
       var syncGroupRemoveTarget = React__namespace.useCallback(function (payload) {
         dispatch(actions.syncGroupRemoveTarget(payload));
       }, [dispatch]);
-      var isOpenInStore = reactRedux.useSelector(function (store) {
-        return getisDialogOpen(store, 'syncGroups');
-      });
-      var onClose = React__namespace.useCallback(function () {
-        return dispatch(uiActions.setToggleOpenDialog({
-          type: 'syncGroups',
-          setOpen: false
-        }));
-      }, [dispatch]);
-      var uiOrder = reactRedux.useSelector(function (store) {
-        return getDialogOrder(store, 'syncGroups');
-      });
-      var uiIsOrderedOnTop = reactRedux.useSelector(function (store) {
-        return getDialogIsOrderedOnTop(store, 'syncGroups');
-      });
-      var registerDialog = React__namespace.useCallback(function () {
-        return dispatch(uiActions.registerDialog({
-          type: 'syncGroups',
-          setOpen: false
-        }));
-      }, [dispatch]);
-      var unregisterDialog = React__namespace.useCallback(function () {
-        return dispatch(uiActions.unregisterDialog({
-          type: 'syncGroups'
-        }));
-      }, [dispatch]);
-      var onOrderDialog = React__namespace.useCallback(function () {
-        if (!uiIsOrderedOnTop) {
-          dispatch(uiActions.orderDialog({
-            type: 'syncGroups'
-          }));
-        }
-      }, [dispatch, uiIsOrderedOnTop]);
-      React__namespace.useEffect(function () {
-        registerDialog();
-        return function () {
-          unregisterDialog();
-        }; // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
+
+      var _a = useSetupDialog('syncGroups'),
+          dialogOrder = _a.dialogOrder,
+          isDialogOpen = _a.isDialogOpen,
+          onCloseDialog = _a.onCloseDialog,
+          setDialogOrder = _a.setDialogOrder;
+
       return /*#__PURE__*/React__namespace.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
       });
     };
 
@@ -23107,57 +23653,6 @@
         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(_a) {
-      var children = _a.children,
-          _b = _a.theme,
-          theme$1 = _b === void 0 ? theme.lightTheme : _b;
-      return /*#__PURE__*/React__default["default"].createElement(theme.ThemeWrapper, {
-        theme: theme$1
-      }, 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(_a) {
-      var children = _a.children,
-          _b = _a.theme,
-          theme$1 = _b === void 0 ? theme.lightTheme : _b,
-          store = _a.store;
-      return /*#__PURE__*/React__default["default"].createElement(reactRedux.Provider, {
-        store: store
-      }, /*#__PURE__*/React__default["default"].createElement(reduxDynamicModules.DynamicModuleLoader, {
-        modules: coreModuleConfig
-      }, /*#__PURE__*/React__default["default"].createElement(CoreThemeProvider, {
-        theme: theme$1
-      }, children)));
-    };
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -23242,6 +23737,57 @@
       }, 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(_a) {
+      var children = _a.children,
+          _b = _a.theme,
+          theme$1 = _b === void 0 ? theme.lightTheme : _b;
+      return /*#__PURE__*/React__default["default"].createElement(theme.ThemeWrapper, {
+        theme: theme$1
+      }, 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(_a) {
+      var children = _a.children,
+          _b = _a.theme,
+          theme$1 = _b === void 0 ? theme.lightTheme : _b,
+          store = _a.store;
+      return /*#__PURE__*/React__default["default"].createElement(reactRedux.Provider, {
+        store: store
+      }, /*#__PURE__*/React__default["default"].createElement(reduxDynamicModules.DynamicModuleLoader, {
+        modules: coreModuleConfig
+      }, /*#__PURE__*/React__default["default"].createElement(CoreThemeProvider, {
+        theme: theme$1
+      }, /*#__PURE__*/React__default["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.
@@ -23378,6 +23924,7 @@
     exports.uiModuleConfig = uiModuleConfig;
     exports.uiSelectors = selectors$1;
     exports.uiTypes = types;
+    exports.useSetupDialog = useSetupDialog;
 
     Object.defineProperty(exports, '__esModule', { value: true });