@opengeoweb/core 2.1.4 → 2.2.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('reselect'), require('moment'), require('react'), require('immer'), require('redux-saga/effects'), require('@opengeoweb/webmap'), require('@mui/material'), require('@mui/styles/makeStyles'), require('react-redux'), require('@opengeoweb/shared'), require('lodash'), require('@mui/icons-material'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga'), require('@opengeoweb/theme')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'reselect', 'moment', 'react', 'immer', 'redux-saga/effects', '@opengeoweb/webmap', '@mui/material', '@mui/styles/makeStyles', 'react-redux', '@opengeoweb/shared', 'lodash', '@mui/icons-material', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', 'redux-dynamic-modules', 'redux-dynamic-modules-saga', '@opengeoweb/theme'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.reselect, global.moment, global.React, global.produce, global.effects, global.webmap, global.material, global.makeStyles, global.reactRedux, global.shared, global._, global.iconsMaterial, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
-})(this, (function (exports, reselect, moment, React, produce, effects, webmap, material, makeStyles, reactRedux, shared, _, iconsMaterial, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('reselect'), require('lodash'), require('moment'), require('react'), require('immer'), require('redux-saga/effects'), require('@opengeoweb/webmap'), require('@mui/material'), require('@mui/styles/makeStyles'), require('react-redux'), require('@opengeoweb/shared'), require('@mui/icons-material'), require('react-sortablejs'), require('@mui/styles/createStyles'), require('@mui/styles/withStyles'), require('throttle-debounce'), require('lodash.clonedeep'), require('proj4'), require('redux-dynamic-modules'), require('redux-dynamic-modules-saga'), require('@opengeoweb/theme')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'reselect', 'lodash', 'moment', 'react', 'immer', 'redux-saga/effects', '@opengeoweb/webmap', '@mui/material', '@mui/styles/makeStyles', 'react-redux', '@opengeoweb/shared', '@mui/icons-material', 'react-sortablejs', '@mui/styles/createStyles', '@mui/styles/withStyles', 'throttle-debounce', 'lodash.clonedeep', 'proj4', 'redux-dynamic-modules', 'redux-dynamic-modules-saga', '@opengeoweb/theme'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Core = {}, global.reselect, global._, global.moment, global.React, global.produce, global.effects, global.webmap, global.material, global.makeStyles, global.reactRedux, global.shared, global.iconsMaterial, global.reactSortablejs, global.createStyles, global.withStyles, global.throttleDebounce, global.cloneDeep, global.proj4, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
+})(this, (function (exports, reselect, _, moment, React, produce, effects, webmap, material, makeStyles, reactRedux, shared, iconsMaterial, reactSortablejs, createStyles, withStyles, throttleDebounce, cloneDeep, proj4, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,12 +24,12 @@
     return Object.freeze(n);
   }
 
+  var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var produce__default = /*#__PURE__*/_interopDefaultLegacy(produce);
   var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
-  var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
   var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
   var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
   var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
@@ -824,11 +824,6 @@
     generatedTimesliderIds += 1;
     return "timesliderid_" + generatedTimesliderIds;
   };
-  var generatedScreenIds = 0;
-  var generateScreenId = function generateScreenId() {
-    generatedScreenIds += 1;
-    return "screen_" + generatedScreenIds;
-  };
   /**
    * Map for registering wmlayers with their id's
    */
@@ -1969,6 +1964,14 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
+  /* TODO:, move this to a right place https://gitlab.com/opengeoweb/opengeoweb/-/issues/1802 */
+
+  var selectorMemoizationOptions = {
+    memoizeOptions: {
+      maxSize: 1000,
+      resultEqualityCheck: _.isEqual
+    }
+  };
   /**
    * Gets the map state by mapId
    *
@@ -2068,7 +2071,7 @@
     return layerIds.map(function (layerId) {
       return layers[layerId];
     });
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets an array of baselayers ids for a map
    *
@@ -2094,7 +2097,7 @@
     return layerIds.map(function (layerId) {
       return layers[layerId];
     });
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets and array of overLayers ids for a map
    *
@@ -2120,7 +2123,7 @@
     return layerIds.map(function (layerId) {
       return layers[layerId];
     });
-  });
+  }, selectorMemoizationOptions);
   /**
    * Gets map dimensions
    *
@@ -3830,6 +3833,7 @@
               linked = _a.linked;
 
           if (!draft.groups.byId[groupId]) {
+            console.warn("SYNCGROUPS_ADD_TARGET: Group " + groupId + " does not exist.");
             return;
           }
 
@@ -4433,23 +4437,18 @@
         layerDimensions: {
           origin: origin,
           layerId: wmLayer.id,
-          dimensions: wmLayer.dimensions.map(function (_a) {
-            var name = _a.name,
-                units = _a.units,
-                currentValue = _a.currentValue,
-                dimMinValue = _a.dimMinValue,
-                dimMaxValue = _a.dimMaxValue,
-                dimTimeInterval = _a.dimTimeInterval,
-                values = _a.values,
-                synced = _a.synced;
+          dimensions: wmLayer.dimensions.map(function (dim) {
+            var name = dim.name,
+                units = dim.units,
+                synced = dim.synced;
             return {
               name: name,
               units: units,
-              currentValue: currentValue,
-              maxValue: dimMaxValue,
-              minValue: dimMinValue,
-              timeInterval: dimTimeInterval,
-              values: values,
+              currentValue: dim.getValue(),
+              minValue: dim.getFirstValue(),
+              maxValue: dim.getLastValue(),
+              timeInterval: dim.getDimInterval(),
+              values: dim.getValues(),
               synced: synced
             };
           })
@@ -5078,7 +5077,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$J = makeStyles__default["default"](function (theme) {
+  var useStyles$I = makeStyles__default["default"](function (theme) {
     return {
       select: {
         '& ul': {
@@ -5134,7 +5133,7 @@
         tooltipOpen = _f[0],
         setTooltipOpen = _f[1];
 
-    var classes = useStyles$J();
+    var classes = useStyles$I();
 
     var preventDefault = function preventDefault(event) {
       event.preventDefault();
@@ -6879,9 +6878,11 @@
   var initialState = {
     filters: {
       searchFilter: '',
-      activeServices: [],
-      keywords: [],
-      addedServices: []
+      activeServices: {
+        byId: {},
+        allIds: []
+      },
+      keywords: []
     }
   };
   var reducer = function reducer(state, action) {
@@ -6898,63 +6899,25 @@
           });
         }
 
-      case 'LAYER_SELECT_SET_ACTIVE_SERVICES':
-        {
-          var activeServices_1 = action.payload.activeServices;
-          return produce__default["default"](state, function (draft) {
-            activeServices_1.forEach(function (service) {
-              if (draft.filters.activeServices.filter(function (s) {
-                return s.id === service;
-              }).length === 0) draft.filters.activeServices.push({
-                id: service,
-                enabled: true
-              });
-            });
-          });
-        }
-
-      case 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE':
-        {
-          var service_1 = action.payload.service;
-          return produce__default["default"](state, function (draft) {
-            var index = draft.filters.activeServices.findIndex(function (s) {
-              return s.id === service_1;
-            });
-            draft.filters.activeServices[index].enabled = true;
-          });
-        }
-
-      case 'LAYER_SELECT_DISABLE_ACTIVE_SERVICE':
-        {
-          var service_2 = action.payload.service;
-          return produce__default["default"](state, function (draft) {
-            var index = draft.filters.activeServices.findIndex(function (s) {
-              return s.id === service_2;
-            });
-            draft.filters.activeServices[index].enabled = false;
-          });
-        }
-
-      case 'LAYER_SELECT_ADD_NEW_KEYWORDS':
+      case 'LAYER_SELECT_ADD_KEYWORDS_AND_ACTIVE_SERVICES':
         {
+          var _a = action.payload,
+              serviceUrl_1 = _a.serviceUrl,
+              keywords_1 = _a.keywords;
           return produce__default["default"](state, function (draft) {
             var e_1, _a;
 
-            var _b = action.payload,
-                serviceName = _b.serviceName,
-                keywords = _b.keywords; // If store does not contain keywords from a service, add keywords and service Name
-
-            if (!draft.filters.addedServices.includes(serviceName)) {
-              draft.filters.addedServices.push(serviceName);
+            if (!draft.filters.activeServices.byId[serviceUrl_1]) {
+              draft.filters.activeServices.byId[serviceUrl_1] = {};
 
               var _loop_1 = function _loop_1(keyword) {
-                var foundObject = draft.filters.keywords.find(function (object) {
+                var foundKeyword = draft.filters.keywords.find(function (object) {
                   return object.id === keyword;
                 });
 
-                if (foundObject) {
-                  foundObject.amount += 1;
-                  foundObject.amountVisible += 1;
+                if (foundKeyword) {
+                  foundKeyword.amount += 1;
+                  foundKeyword.amountVisible += 1;
                 } else {
                   var newKeywordObject = {
                     id: keyword,
@@ -6967,8 +6930,8 @@
               };
 
               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;
+                for (var keywords_2 = __values(keywords_1), keywords_2_1 = keywords_2.next(); !keywords_2_1.done; keywords_2_1 = keywords_2.next()) {
+                  var keyword = keywords_2_1.value;
 
                   _loop_1(keyword);
                 }
@@ -6978,12 +6941,105 @@
                 };
               } finally {
                 try {
-                  if (keywords_1_1 && !keywords_1_1.done && (_a = keywords_1["return"])) _a.call(keywords_1);
+                  if (keywords_2_1 && !keywords_2_1.done && (_a = keywords_2["return"])) _a.call(keywords_2);
                 } finally {
                   if (e_1) throw e_1.error;
                 }
               }
             }
+
+            draft.filters.activeServices.byId[serviceUrl_1].id = serviceUrl_1;
+            draft.filters.activeServices.byId[serviceUrl_1].enabled = true;
+            draft.filters.activeServices.byId[serviceUrl_1].keywordsPerService = keywords_1;
+            if (!draft.filters.activeServices.allIds.includes(serviceUrl_1)) draft.filters.activeServices.allIds.push(serviceUrl_1);
+          });
+        }
+
+      case 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE':
+        {
+          var _b = action.payload,
+              serviceUrl_2 = _b.serviceUrl,
+              keywords_3 = _b.keywords;
+          return produce__default["default"](state, function (draft) {
+            var e_2, _a;
+
+            draft.filters.activeServices.byId[serviceUrl_2].enabled = true;
+
+            var _loop_2 = function _loop_2(keyword) {
+              var foundObject = draft.filters.keywords.find(function (object) {
+                return object.id === keyword;
+              });
+
+              if (foundObject) {
+                foundObject.amountVisible += 1;
+              }
+            };
+
+            try {
+              for (var keywords_4 = __values(keywords_3), keywords_4_1 = keywords_4.next(); !keywords_4_1.done; keywords_4_1 = keywords_4.next()) {
+                var keyword = keywords_4_1.value;
+
+                _loop_2(keyword);
+              }
+            } catch (e_2_1) {
+              e_2 = {
+                error: e_2_1
+              };
+            } finally {
+              try {
+                if (keywords_4_1 && !keywords_4_1.done && (_a = keywords_4["return"])) _a.call(keywords_4);
+              } finally {
+                if (e_2) throw e_2.error;
+              }
+            }
+          });
+        }
+
+      case 'LAYER_SELECT_DISABLE_ACTIVE_SERVICE':
+        {
+          var _c = action.payload,
+              serviceUrl_3 = _c.serviceUrl,
+              keywords_5 = _c.keywords;
+          return produce__default["default"](state, function (draft) {
+            var e_3, _a;
+
+            draft.filters.activeServices.byId[serviceUrl_3].enabled = false;
+
+            var _loop_3 = function _loop_3(keyword) {
+              var foundObject = draft.filters.keywords.find(function (object) {
+                return object.id === keyword;
+              });
+
+              if (foundObject && foundObject.amountVisible > 0) {
+                foundObject.amountVisible -= 1;
+              }
+            };
+
+            try {
+              for (var keywords_6 = __values(keywords_5), keywords_6_1 = keywords_6.next(); !keywords_6_1.done; keywords_6_1 = keywords_6.next()) {
+                var keyword = keywords_6_1.value;
+
+                _loop_3(keyword);
+              }
+            } catch (e_3_1) {
+              e_3 = {
+                error: e_3_1
+              };
+            } finally {
+              try {
+                if (keywords_6_1 && !keywords_6_1.done && (_a = keywords_6["return"])) _a.call(keywords_6);
+              } finally {
+                if (e_3) throw e_3.error;
+              }
+            }
+          });
+        }
+
+      case 'LAYER_SELECT_UPDATE_KEYWORDS':
+        {
+          return produce__default["default"](state, function (draft) {
+            var keywords = action.payload.keywords;
+            draft.filters.keywords = keywords;
           });
         }
 
@@ -7009,10 +7065,10 @@
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
   var LAYER_SELECT_SET_SEARCH_FILTER = 'LAYER_SELECT_SET_SEARCH_FILTER';
-  var LAYER_SELECT_SET_ACTIVE_SERVICES = 'LAYER_SELECT_SET_ACTIVE_SERVICES';
   var LAYER_SELECT_DISABLE_ACTIVE_SERVICE = 'LAYER_SELECT_DISABLE_ACTIVE_SERVICE';
   var LAYER_SELECT_ENABLE_ACTIVE_SERVICE = 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE';
-  var LAYER_SELECT_ADD_NEW_KEYWORDS = 'LAYER_SELECT_ADD_NEW_KEYWORDS';
+  var LAYER_SELECT_ADD_KEYWORDS_AND_ACTIVE_SERVICES = 'LAYER_SELECT_ADD_KEYWORDS_AND_ACTIVE_SERVICES';
+  var LAYER_SELECT_UPDATE_KEYWORDS = 'LAYER_SELECT_UPDATE_KEYWORDS';
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7043,19 +7099,6 @@
       payload: payload
     };
   };
-  /**
-   * Sets the given array of string as active services
-   *
-   * Example: setActiveServices({ activeServices: ['service-1', 'service-2'] })
-   * @param {string} payload { activeServices: string[] }
-   */
-
-  var setActiveServices = function setActiveServices(payload) {
-    return {
-      type: LAYER_SELECT_SET_ACTIVE_SERVICES,
-      payload: payload
-    };
-  };
   /**
    * Activates given service in the activeServices array
    *
@@ -7085,13 +7128,19 @@
   /*
    * Sets the given keywords to Layer Select store
    *
-   * Example: addNewKeywords({ keywords: ['keyword1', 'keyword2'] })
-   * @param {string[]} payload { keywords: string[] }
+   * Example: addKeywordsAndActiveServices({ serviceUrl: 'https://service.wms', keywords: ['keyword1', 'keyword2'] })
+   * @param {string, string[]} payload {serviceUrl: string  keywords: string[] }
    */
 
-  var addNewKeywords = function addNewKeywords(payload) {
+  var addKeywordsAndActiveServices = function addKeywordsAndActiveServices(payload) {
+    return {
+      type: LAYER_SELECT_ADD_KEYWORDS_AND_ACTIVE_SERVICES,
+      payload: payload
+    };
+  };
+  var updateKeywords = function updateKeywords(payload) {
     return {
-      type: LAYER_SELECT_ADD_NEW_KEYWORDS,
+      type: LAYER_SELECT_UPDATE_KEYWORDS,
       payload: payload
     };
   };
@@ -7112,62 +7161,26 @@
    * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2022 - Finnish Meteorological Institute (FMI)
    * */
-  function newServiceAddedSagaUpdateKeywords(capturedAction) {
-    var addedService, serviceName, keywords;
+  function newServiceAddedSaga(capturedAction) {
+    var addedService, service, keywords;
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
           addedService = capturedAction.payload;
-          serviceName = addedService.name;
+          service = addedService.service;
           keywords = addedService.layers.reduce(function (keywordAccumulator, layer) {
-            if (!layer.keywords) {
-              return keywordAccumulator;
-            }
-
-            return keywordAccumulator.concat(layer.keywords);
+            return keywordAccumulator.concat(layer.path, layer.keywords);
           }, []);
-          if (!(keywords.length > 0)) return [3
-          /*break*/
-          , 2];
           return [4
           /*yield*/
-          , effects.put(addNewKeywords({
-            serviceName: serviceName,
+          , effects.put(addKeywordsAndActiveServices({
+            serviceUrl: service,
             keywords: keywords
           }))];
 
         case 1:
           _a.sent();
 
-          _a.label = 2;
-
-        case 2:
-          return [2
-          /*return*/
-          ];
-      }
-    });
-  }
-  function newServiceAddedSagaUpdateActiveServices() {
-    var services;
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          return [4
-          /*yield*/
-          , effects.select(getServiceIds)];
-
-        case 1:
-          services = _a.sent();
-          return [4
-          /*yield*/
-          , effects.put(setActiveServices({
-            activeServices: services
-          }))];
-
-        case 2:
-          _a.sent();
-
           return [2
           /*return*/
           ];
@@ -7180,18 +7193,11 @@
         case 0:
           return [4
           /*yield*/
-          , effects.takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSagaUpdateKeywords)];
+          , effects.takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSaga)];
 
         case 1:
           _a.sent();
 
-          return [4
-          /*yield*/
-          , effects.takeLatest(MAP_SERVICES_SET_LAYERS, newServiceAddedSagaUpdateActiveServices)];
-
-        case 2:
-          _a.sent();
-
           return [2
           /*return*/
           ];
@@ -7267,7 +7273,7 @@
       leaf: nodesToRecur.leaf,
       name: nodesToRecur.name,
       title: nodesToRecur.text,
-      path: nodesToRecur.path ? nodesToRecur.path.split('/') : [],
+      path: nodesToRecur.path || [],
       children: [],
       keywords: nodesToRecur.keywords || [],
       "abstract": nodesToRecur["abstract"] || ''
@@ -7303,20 +7309,20 @@
     });
   };
   /**
-   * Returns a promise with a webmapjs node structure layers from the WMS GetCapabilities document.
+   * Returns a promise with an array of flattened layerobjects from the WMS GetCapabilities document.
    * @param serviceUrl The URL of the WMS service
    * @param {boolean} forceReload **optional** forceReload: boolean, true will force the layers to be reloaded from the service, defaults to false
    */
 
-  var getLayerNodesFromService = function getLayerNodesFromService(serviceUrl, forceReload) {
+  var getLayersFlattenedFromService = function getLayersFlattenedFromService(serviceUrl, forceReload) {
     if (forceReload === void 0) {
       forceReload = false;
     }
 
     return new Promise(function (resolve, reject) {
       var serviceObject = webmap.WMGetServiceFromStore(serviceUrl);
-      serviceObject.getNodes(function (nodes) {
-        resolve(nodes.children);
+      serviceObject.getLayerObjectsFlat(function (layers) {
+        resolve(layers);
       }, function (error) {
         reject(new Error(error));
       }, forceReload);
@@ -8256,7 +8262,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$I = makeStyles__default["default"]({
+  var useStyles$H = makeStyles__default["default"]({
     buttonDiv: {
       position: 'relative'
     },
@@ -8292,7 +8298,7 @@
         handleClose = _a.handleClose,
         _e = _a.layerType,
         layerType = _e === void 0 ? LayerType.mapLayer : _e;
-    var classes = useStyles$I();
+    var classes = useStyles$H();
 
     var _f = __read(React__namespace.useState(''), 2),
         serviceURL = _f[0],
@@ -8457,7 +8463,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$H = makeStyles__default["default"](function (theme) {
+  var useStyles$G = makeStyles__default["default"](function (theme) {
     return {
       buttonDiv: {
         position: 'relative'
@@ -8492,7 +8498,7 @@
         _f = _a.shouldFocus,
         shouldFocus = _f === void 0 ? false : _f;
     var ref = React__namespace.useRef(null);
-    var classes = useStyles$H();
+    var classes = useStyles$G();
 
     var _g = __read(React__namespace.useState(false), 2),
         open = _g[0],
@@ -8617,7 +8623,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$G = makeStyles__default["default"](function (theme) {
+  var useStyles$F = makeStyles__default["default"](function (theme) {
     return {
       button: {
         width: '24px',
@@ -8634,7 +8640,7 @@
         _b = _a.source,
         source = _b === void 0 ? 'app' : _b;
     var dispatch = reactRedux.useDispatch();
-    var classes = useStyles$G();
+    var classes = useStyles$F();
     var currentActiveMapId = reactRedux.useSelector(function (store) {
       return getDialogMapId(store, 'layerSelect');
     });
@@ -8677,7 +8683,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$F = makeStyles__default["default"]({
+  var useStyles$E = makeStyles__default["default"]({
     row: {
       height: '32px'
     },
@@ -8701,7 +8707,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _e = _a.layerSelect,
         layerSelect = _e === void 0 ? false : _e;
-    var classes = useStyles$F();
+    var classes = useStyles$E();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -8975,7 +8981,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$E = makeStyles__default["default"](function (theme) {
+  var useStyles$D = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       button: {
         height: 28,
@@ -9037,7 +9043,7 @@
         testId = _a.testId,
         props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId"]);
 
-    var classes = useStyles$E({
+    var classes = useStyles$D({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -9077,7 +9083,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$D = makeStyles__default["default"](function (theme) {
+  var useStyles$C = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       checkbox: {
         color: 'inherit',
@@ -9100,7 +9106,7 @@
     var isEnabled = _a.isEnabled,
         title = _a.title,
         onChangeEnableLayer = _a.onChangeEnableLayer;
-    var classes = useStyles$D(isEnabled);
+    var classes = useStyles$C(isEnabled);
 
     var onClick = function onClick() {
       onChangeEnableLayer(!isEnabled);
@@ -9156,7 +9162,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$C = makeStyles__default["default"](function (theme) {
+  var useStyles$B = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       dropdownEmpty: {
         paddingLeft: 8,
@@ -9179,7 +9185,7 @@
         layers = _b === void 0 ? [] : _b,
         _c = _a.isEnabled,
         isEnabled = _c === void 0 ? true : _c;
-    var classes = useStyles$C();
+    var classes = useStyles$B();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
     if (!layers || !layers.length) {
@@ -9252,7 +9258,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$B = makeStyles__default["default"](function (theme) {
+  var useStyles$A = makeStyles__default["default"](function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -9313,7 +9319,7 @@
         onLayerChangeOpacity = _a.onLayerChangeOpacity,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$B();
+    var classes = useStyles$A();
     var sliderClasses = shared.sliderStyles();
     var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -9423,7 +9429,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$A = makeStyles__default["default"](function (theme) {
+  var useStyles$z = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       icon: {
         minWidth: 32,
@@ -9440,7 +9446,7 @@
     var title = _a.title,
         tooltipTitle = _a.tooltipTitle,
         icon = _a.icon;
-    var classes = useStyles$A();
+    var classes = useStyles$z();
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, {
       className: classes.icon + " icon"
     }, icon), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
@@ -9468,7 +9474,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$z = makeStyles__default["default"](function (theme) {
+  var useStyles$y = makeStyles__default["default"](function (theme) {
     return {
       menu: {
         backgroundColor: theme.palette.geowebColors.background.surface,
@@ -9486,7 +9492,7 @@
         onLayerDuplicate = _a.onLayerDuplicate,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$z();
+    var classes = useStyles$y();
 
     var _c = __read(React__namespace.useState(null), 2),
         anchorEl = _c[0],
@@ -9610,7 +9616,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$y = makeStyles__default["default"](function () {
+  var useStyles$x = makeStyles__default["default"](function () {
     return createStyles__default["default"]({
       icon: {
         width: 20,
@@ -9624,7 +9630,7 @@
         onClickDelete = _a.onClickDelete,
         _b = _a.isEnabled,
         isEnabled = _b === void 0 ? true : _b;
-    var classes = useStyles$y();
+    var classes = useStyles$x();
     return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
       tooltipTitle: tooltipTitle,
       onClick: onClickDelete,
@@ -9652,7 +9658,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$x = makeStyles__default["default"](function (theme) {
+  var useStyles$w = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       icon: {
         width: 18,
@@ -9689,7 +9695,7 @@
         isActive = _c === void 0 ? false : _c,
         _d = _a.isEnabled,
         isEnabled = _d === void 0 ? true : _d;
-    var classes = useStyles$x({
+    var classes = useStyles$w({
       isActive: isActive,
       isEnabled: isEnabled
     });
@@ -9738,7 +9744,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$w = makeStyles__default["default"](function (theme) {
+  var useStyles$v = makeStyles__default["default"](function (theme) {
     return createStyles__default["default"]({
       row: {
         background: function background(isEnabled) {
@@ -9790,7 +9796,7 @@
         layerActiveLayout = _a.layerActiveLayout,
         layerManagerWidth = _a.layerManagerWidth,
         dragHandle = _a.dragHandle;
-    var classes = useStyles$w(isEnabled);
+    var classes = useStyles$v(isEnabled);
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
     var onClickRow = function onClickRow() {
@@ -10372,7 +10378,7 @@
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
   var TOOLTIP_TITLE = 'Drag a layer up or down';
-  var useStyles$v = makeStyles__default["default"](function (theme) {
+  var useStyles$u = makeStyles__default["default"](function (theme) {
     return {
       dragHandle: {
         cursor: 'grab',
@@ -10396,7 +10402,7 @@
         index = _c === void 0 ? undefined : _c,
         _d = _a.hideTooltip,
         hideTooltip = _d === void 0 ? false : _d;
-    var classes = useStyles$v({
+    var classes = useStyles$u({
       isDisabled: isDisabled
     });
     var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
@@ -10429,7 +10435,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$u = makeStyles__default["default"](function () {
+  var useStyles$t = makeStyles__default["default"](function () {
     return {
       layerRows: {
         width: '100%',
@@ -10495,7 +10501,7 @@
 
     var isSorting = activeDragIndex !== null;
     var isDragDisabled = layerIds.length === 1;
-    var classes = useStyles$u(isSorting);
+    var classes = useStyles$t(isSorting);
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
@@ -10705,7 +10711,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$t = makeStyles__default["default"]({
+  var useStyles$s = makeStyles__default["default"]({
     layerRow: {
       width: '100%',
       height: '36px'
@@ -10728,7 +10734,7 @@
         layerManagerWidth = _a.layerManagerWidth,
         _d = _a.tooltip,
         tooltip = _d === void 0 ? '' : _d;
-    var classes = useStyles$t();
+    var classes = useStyles$s();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
     return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
@@ -10773,7 +10779,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$s = makeStyles__default["default"]({
+  var useStyles$r = makeStyles__default["default"]({
     layerRowContainer: {
       position: 'relative',
       width: '100%',
@@ -10808,7 +10814,7 @@
         layerSelect = _e === void 0 ? false : _e,
         _f = _a.showAddLayersTooltip,
         showAddLayersTooltip = _f === void 0 ? true : _f;
-    var classes = useStyles$s();
+    var classes = useStyles$r();
 
     var _g = __read(React__namespace.useState(LayerManagerWidth.lg), 2),
         layerManagerWidth = _g[0],
@@ -11035,7 +11041,7 @@
   var getActiveServices = reselect.createSelector(layerSelectStore, function (store) {
     var _a;
 
-    return store ? (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices : [];
+    return store ? (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId : {};
   });
   /**
    * Returns all ids of enabled services
@@ -11048,11 +11054,15 @@
   var getEnabledServiceIds = reselect.createSelector(layerSelectStore, function (store) {
     var _a, _b;
 
-    var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.filter(function (service) {
-      return service.enabled;
+    var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.allIds.filter(function (service) {
+      var _a;
+
+      return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId[service].enabled;
     })) !== null && _b !== void 0 ? _b : [];
     return enabledServices.map(function (service) {
-      return service.id;
+      var _a;
+
+      return (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.byId[service].id;
     });
   });
   /**
@@ -11083,41 +11093,39 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$r = makeStyles__default["default"](function (theme) {
-    return createStyles__default["default"]({
-      dialogTitle: {
-        display: 'flex',
-        justifyContent: 'space-between'
-      },
-      textField: {
-        width: '100%'
-      },
-      button: {
-        '&.MuiButton-containedPrimary': {
-          backgroundColor: theme.palette.geowebColors.buttons.primary.fill
-        },
-        '&.MuiButton-outlined': {
-          color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
-        },
-        color: theme.palette.common.white
-      },
-      cancelButton: {
-        border: "1px solid " + theme.palette.action.disabled,
-        color: theme.palette.text.secondary,
-        '&:hover': {
-          border: "1px solid " + theme.palette.action.disabled
-        }
-      },
-      container: {
+  var style = {
+    dialogTitle: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '16px 16px 20px 16px',
+      ' span': {
+        fontSize: '2.125rem'
+      }
+    },
+    container: function container(theme) {
+      return {
         '& .MuiDialog-paper': {
           backgroundColor: theme.palette.geowebColors.cards.cardContainer
         }
-      },
-      dialogContent: {
-        padding: '8px 24px'
-      }
-    });
-  });
+      };
+    },
+    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'
+    }
+  };
   var ADD_HEADING = 'Add a new service';
   var EDIT_HEADING = 'Edit service';
   var SAVE_HEADING = 'Save service';
@@ -11143,54 +11151,60 @@
         closePopup = _a.closePopup,
         _c = _a.url,
         url = _c === void 0 ? '' : _c;
-    var classes = useStyles$r();
     return /*#__PURE__*/React__namespace.createElement(material.Dialog, {
       open: isOpen,
       hideBackdrop: hideBackdrop,
       fullWidth: true,
       maxWidth: "xs",
-      className: classes.container
+      sx: style.container
     }, /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
-      className: classes.dialogTitle
+      sx: style.dialogTitle
     }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
       variant: "h5",
       component: "span"
     }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       size: "small",
       onClick: closePopup,
-      "data-testid": "ClosePopupButtonCross"
+      "data-testid": "ClosePopupButtonCross",
+      sx: style.closeBtn
     }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-      className: classes.dialogContent
+      sx: style.dialogContent
     }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
-      className: classes.textField,
+      sx: style.textField,
       variant: "filled",
       label: "Service name"
     })), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-      className: classes.dialogContent
+      sx: style.dialogContent
     }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
-      className: classes.textField,
+      sx: style.textField,
       variant: "filled",
       label: "Service URL",
       defaultValue: url,
       id: "service-url"
     })), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-      className: classes.dialogContent
+      sx: style.dialogContent
     }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
-      className: classes.textField,
+      sx: style.textField,
       variant: "filled",
       multiline: true,
       rows: 4,
       label: "Abstracts",
       helperText: "Short description of what this service does"
-    })), /*#__PURE__*/React__namespace.createElement(material.DialogActions, null, /*#__PURE__*/React__namespace.createElement(material.Button, {
-      variant: "outlined",
-      className: classes.cancelButton,
+    })), /*#__PURE__*/React__namespace.createElement(material.DialogActions, {
+      sx: style.footerContent
+    }, /*#__PURE__*/React__namespace.createElement(material.Button, {
+      variant: "tertiary",
       onClick: closePopup,
-      "data-testid": "ClosePopupButtonCancel"
+      "data-testid": "ClosePopupButtonCancel",
+      sx: {
+        width: '117px'
+      }
     }, "cancel"), /*#__PURE__*/React__namespace.createElement(material.Button, {
-      variant: "contained",
-      color: "primary",
-      className: classes.button
+      sx: {
+        width: '117px',
+        marginLeft: '16px!important'
+      },
+      variant: "primary"
     }, "save")));
   };
 
@@ -11390,6 +11404,56 @@
     });
   };
 
+  /* *
+   * 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, keywords, searchString) {
+    var activeKeywords = keywords.filter(function (keyword) {
+      return keyword.checked;
+    });
+    var keywordList = activeKeywords.map(function (keyword) {
+      return keyword.id;
+    });
+    var allKeywordsActive = keywords.every(function (keyword) {
+      return keyword.checked;
+    });
+
+    if (searchString === '' && allKeywordsActive) {
+      return services[serviceId].layers.filter(function (layer) {
+        return layer.leaf;
+      });
+    }
+
+    var searchStringArray = searchString.split(' ');
+    return services[serviceId].layers.filter(function (layer) {
+      return searchStringArray.every(function (search) {
+        var layerPathAndKeywords = layer.path.concat(layer.keywords);
+        return (!!layerPathAndKeywords && !layerPathAndKeywords.every(function (keyword) {
+          return !keywordList.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());
+        }) || !!layer.path && !layer.path.every(function (group) {
+          return !group.toLowerCase().includes(search.toLowerCase());
+        }) || services[serviceId].name.toLowerCase().includes(search.toLowerCase()));
+      });
+    }).filter(function (layer) {
+      return layer.leaf;
+    });
+  };
+
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
@@ -11453,27 +11517,19 @@
     var services = _a.services,
         serviceIds = _a.serviceIds,
         layerSelectHeight = _a.layerSelectHeight,
-        searchString = _a.searchString;
+        searchString = _a.searchString,
+        keywords = _a.keywords;
     var classes = useStyles$p();
 
     var _b = __read(React__namespace.useState(0), 2),
         numberOfLayers = _b[0],
         setNumberOfLayers = _b[1];
 
-    var filterLayersFromService = React__namespace.useCallback(function (serviceId) {
-      if (searchString === '') {
-        return services[serviceId].layers;
-      }
-
-      return services[serviceId].layers.filter(function (layer) {
-        return searchString === '' || !!layer.name && layer.name.toLowerCase().includes(searchString.toLowerCase()) || !!layer.text && layer.text.toLowerCase().includes(searchString.toLowerCase()) || !!layer["abstract"] && layer["abstract"].toLowerCase().includes(searchString.toLowerCase());
-      });
-    }, [services, searchString]);
     React__namespace.useEffect(function () {
       setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
-        return totalNumberOfLayers + filterLayersFromService(serviceId).length;
+        return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywords, searchString).length;
       }, 0));
-    }, [serviceIds, filterLayersFromService]);
+    }, [serviceIds, keywords, services, searchString]);
     return /*#__PURE__*/React__namespace.createElement("div", {
       "data-testid": "layerList"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -11484,7 +11540,7 @@
         overflow: 'auto'
       }
     }, serviceIds.map(function (serviceId) {
-      return filterLayersFromService(serviceId).map(function (layer) {
+      return filterLayersFromService(serviceId, services, keywords, searchString).map(function (layer) {
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: serviceId + "-" + layer.name,
           className: classes.layerRow,
@@ -11528,6 +11584,9 @@
     var enabledServiceIds = reactRedux.useSelector(function (store) {
       return getEnabledServiceIds(store);
     });
+    var keywords = reactRedux.useSelector(function (store) {
+      return getKeywords(store);
+    });
     var searchString = reactRedux.useSelector(function (store) {
       return getSearchFilter(store);
     });
@@ -11535,6 +11594,7 @@
       services: services,
       serviceIds: enabledServiceIds,
       layerSelectHeight: layerSelectHeight,
+      keywords: keywords,
       searchString: searchString
     });
   };
@@ -11642,29 +11702,31 @@
     });
 
     var toggleChip = function toggleChip(service) {
-      var _a;
-
       if (service === 'all') {
-        if (activeServices.every(function (activeService) {
-          return activeService.enabled;
-        })) activeServices.forEach(function (s) {
-          if (s.enabled) dispatch(disableActiveService({
-            service: s.id
-          }));
-        });else activeServices.forEach(function (s) {
-          if (!s.enabled) dispatch(enableActiveService({
-            service: s.id
-          }));
-        });
-      } else if ((_a = activeServices.find(function (activeService) {
-        return activeService.id === service;
-      })) === null || _a === void 0 ? void 0 : _a.enabled) {
+        if (isEnabled) {
+          Object.values(activeServices).forEach(function (s) {
+            if (s.enabled) dispatch(disableActiveService({
+              serviceUrl: s.id,
+              keywords: s.keywordsPerService
+            }));
+          });
+        } else {
+          Object.values(activeServices).forEach(function (s) {
+            if (!s.enabled) dispatch(enableActiveService({
+              serviceUrl: s.id,
+              keywords: s.keywordsPerService
+            }));
+          });
+        }
+      } else if (isEnabled) {
         dispatch(disableActiveService({
-          service: service
+          serviceUrl: service,
+          keywords: activeServices[service].keywordsPerService
         }));
       } else {
         dispatch(enableActiveService({
-          service: service
+          serviceUrl: service,
+          keywords: activeServices[service].keywordsPerService
         }));
       }
     };
@@ -11774,7 +11836,7 @@
       setWidth(ref.current.scrollWidth + 50);
       setMargin(Math.max(0, Math.min(width - layerSelectWidth, margin)));
     }, [services, layerSelectWidth, width, margin]);
-    var isAllEnabled = activeServices.every(function (activeService) {
+    var isAllEnabled = Object.values(activeServices).every(function (activeService) {
       return activeService.enabled;
     });
     return /*#__PURE__*/React__namespace.createElement("div", {
@@ -11794,13 +11856,10 @@
     }), Object.keys(services).map(function (service) {
       var _a;
 
-      var isServiceEnabled = (_a = activeServices.find(function (activeService) {
-        return activeService.id === services[service].service;
-      })) === null || _a === void 0 ? void 0 : _a.enabled;
       return /*#__PURE__*/React__namespace.createElement(ServiceChipConnect, {
         key: services[service].id,
         service: services[service],
-        isEnabled: isServiceEnabled
+        isEnabled: (_a = activeServices[service]) === null || _a === void 0 ? void 0 : _a.enabled
       });
     })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronRight, {
       className: classes.scrollArrowRight,
@@ -12036,7 +12095,7 @@
           color: theme.palette.geowebColors.customSlider.thumb
         },
         '&$checked + $track': {
-          backgroundColor: theme.palette.geowebColors.buttons.primary.fill
+          backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
         }
       },
       checked: {},
@@ -12074,7 +12133,7 @@
         fontSize: '12px'
       },
       onlyByttonText: {
-        color: theme.palette.geowebColors.buttons.primary.fill,
+        color: theme.palette.geowebColors.buttons.primary["default"].fill,
         fontSize: '14px',
         fontWeight: 500
       },
@@ -12184,7 +12243,7 @@
   });
 
   var KeywordFilterResults = function KeywordFilterResults(_a) {
-    var arrayOfKeywordObjects = _a.arrayOfKeywordObjects,
+    var keywordObjects = _a.keywordObjects,
         mapId = _a.mapId,
         bounds = _a.bounds,
         _b = _a.onClose,
@@ -12196,25 +12255,22 @@
         _d = _a.order,
         order = _d === void 0 ? 0 : _d,
         _e = _a.source,
-        source = _e === void 0 ? 'module' : _e;
+        source = _e === void 0 ? 'module' : _e,
+        updateKeywords = _a.updateKeywords;
     var classes = useStyles$j();
 
     var _f = __read(React__namespace.useState(true), 2),
         allSelected = _f[0],
         setAllSelected = _f[1];
 
-    var _g = __read(React__namespace.useState(arrayOfKeywordObjects), 2),
-        keywordObjects = _g[0],
-        setKeywordObjects = _g[1];
-
     var toggleSelectAll = function toggleSelectAll() {
       var editedKeywords = keywordObjects.map(function (object) {
         return __assign(__assign({}, object), {
           checked: !allSelected
         });
       });
-      setKeywordObjects(editedKeywords);
       setAllSelected(!allSelected);
+      updateKeywords(editedKeywords);
     };
 
     var toggleCheckbox = function toggleCheckbox(listIndex) {
@@ -12223,7 +12279,7 @@
           checked: !object.checked
         }) : object;
       });
-      setKeywordObjects(editedKeywords);
+      updateKeywords(editedKeywords);
     };
 
     var selectOnlyOne = function selectOnlyOne(listIndex) {
@@ -12234,7 +12290,7 @@
           checked: false
         });
       });
-      setKeywordObjects(editedKeywords);
+      updateKeywords(editedKeywords);
     }; // If even one checkbox is unchecked, switch toggleAll off
     // If all checkboxes becomes checked, switch toggleAll on
 
@@ -12245,9 +12301,6 @@
       });
       setAllSelected(checked);
     }, [keywordObjects]);
-    React__namespace.useEffect(function () {
-      setKeywordObjects(arrayOfKeywordObjects);
-    }, [arrayOfKeywordObjects]);
     return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
       title: showTitle ? "Filter Results " + mapId : 'Filter Results',
       "data-testid": "keywordFilterResults",
@@ -12296,7 +12349,9 @@
       }
     }, keywordObjects.map(function (_a, index) {
       var id = _a.id,
-          checked = _a.checked;
+          checked = _a.checked,
+          amountVisible = _a.amountVisible;
+      if (amountVisible === 0) return null;
       return /*#__PURE__*/React__namespace.createElement(FilterListItem, {
         key: id + "-" + index,
         index: index,
@@ -12353,7 +12408,12 @@
     });
     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 updateKeywords$1 = React__namespace.useCallback(function (keywords) {
+      dispatch(updateKeywords({
+        keywords: keywords
+      }));
+    }, [dispatch]); // Check to ensure the currently active map is still present on screen - if not, close the dialog
 
     React__namespace.useEffect(function () {
       if (mapId !== '' && !isMapPresent) {
@@ -12389,7 +12449,7 @@
       return getKeywords(store);
     });
     return /*#__PURE__*/React__namespace.createElement(KeywordFilterResults, {
-      arrayOfKeywordObjects: keywords,
+      keywordObjects: keywords,
       mapId: mapId,
       bounds: bounds,
       isOpen: isOpenInStore,
@@ -12397,7 +12457,8 @@
       showTitle: showTitle,
       onMouseDown: onOrderDialog,
       order: uiOrder,
-      source: uiSource
+      source: uiSource,
+      updateKeywords: updateKeywords$1
     });
   };
 
@@ -12494,7 +12555,7 @@
     React__namespace.useEffect(function () {
       if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
         preloadedServices.forEach(function (service) {
-          getLayerNodesFromService(service.url).then(function (layers) {
+          getLayersFlattenedFromService(service.url).then(function (layers) {
             if (isMounted.current) {
               serviceSetLayers$1({
                 id: service.id,
@@ -21170,7 +21231,7 @@
     return /*#__PURE__*/React__namespace.createElement(shared.ToolContainerDraggable, {
       startPosition: {
         right: 20,
-        top: 20
+        top: 50
       },
       minWidth: 100,
       onClose: onClose,
@@ -22785,7 +22846,6 @@
   exports.filterNonTimeDimensions = filterNonTimeDimensions;
   exports.generateLayerId = generateLayerId;
   exports.generateMapId = generateMapId;
-  exports.generateScreenId = generateScreenId;
   exports.generateTimesliderId = generateTimesliderId;
   exports.getFirstTimeStepForLayerId = getFirstTimeStepForLayerId;
   exports.getLastTimeStepForLayerId = getLastTimeStepForLayerId;