@opengeoweb/core 2.1.4 → 2.2.0

package/index.esm.js

@@ -1,4 +1,5 @@
 import { createSelector } from 'reselect';
+import _, { isEqual, debounce } from 'lodash';
 import moment from 'moment';
 import * as React from 'react';
 import React__default, { useState, Component, useRef, useEffect } from 'react';
@@ -9,7 +10,6 @@ import { Tooltip, Select, Grid, InputLabel, IconButton, Paper, Box, Typography,
 import makeStyles from '@mui/styles/makeStyles';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { sliderStyles, CustomSlider, ToolContainerDraggable, useIsMounted } from '@opengeoweb/shared';
-import _, { debounce } from 'lodash';
 import { Cached, Add, MoreVert, FileCopy, Delete, DragIndicator, Close, ChevronLeft, ChevronRight, Link, LinkOff, DeleteForever } from '@mui/icons-material';
 import { Sortable, ReactSortable } from 'react-sortablejs';
 import createStyles from '@mui/styles/createStyles';
@@ -810,11 +810,6 @@ var generateTimesliderId = function generateTimesliderId() {
   generatedTimesliderIds += 1;
   return "timesliderid_".concat(generatedTimesliderIds);
 };
-var generatedScreenIds = 0;
-var generateScreenId = function generateScreenId() {
-  generatedScreenIds += 1;
-  return "screen_".concat(generatedScreenIds);
-};
 /**
  * Map for registering wmlayers with their id's
  */
@@ -2092,6 +2087,14 @@ var utils = /*#__PURE__*/Object.freeze({
  * 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
  *
@@ -2191,7 +2194,7 @@ var getMapLayers = createSelector(getLayerIds, getLayersById, function (layerIds
   return layerIds.map(function (layerId) {
     return layers[layerId];
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Gets an array of baselayers ids for a map
  *
@@ -2217,7 +2220,7 @@ var getMapBaseLayers = createSelector(getMapBaseLayersIds, getLayersById, functi
   return layerIds.map(function (layerId) {
     return layers[layerId];
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Gets and array of overLayers ids for a map
  *
@@ -2243,7 +2246,7 @@ var getMapOverLayers = createSelector(getMapOverLayersIds, getLayersById, functi
   return layerIds.map(function (layerId) {
     return layers[layerId];
   });
-});
+}, selectorMemoizationOptions);
 /**
  * Gets map dimensions
  *
@@ -3964,6 +3967,7 @@ var reducer$4 = function reducer() {
             linked = _action$payload2.linked;
 
         if (!draft.groups.byId[groupId]) {
+          console.warn("SYNCGROUPS_ADD_TARGET: Group ".concat(groupId, " does not exist."));
           return;
         }
 
@@ -4566,23 +4570,18 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSIns
       layerDimensions: {
         origin: origin,
         layerId: wmLayer.id,
-        dimensions: wmLayer.dimensions.map(function (_ref2) {
-          var name = _ref2.name,
-              units = _ref2.units,
-              currentValue = _ref2.currentValue,
-              dimMinValue = _ref2.dimMinValue,
-              dimMaxValue = _ref2.dimMaxValue,
-              dimTimeInterval = _ref2.dimTimeInterval,
-              values = _ref2.values,
-              synced = _ref2.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
           };
         })
@@ -4599,7 +4598,7 @@ var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSIns
 
 var _marked$4 = /*#__PURE__*/regeneratorRuntime.mark(setTimeSaga),
     _marked2$4 = /*#__PURE__*/regeneratorRuntime.mark(setBBoxSaga),
-    _marked3$4 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
+    _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(layerActionsSaga),
     _marked4$2 = /*#__PURE__*/regeneratorRuntime.mark(addLayerActionsSaga),
     _marked5$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerActionsSaga),
     _marked6$1 = /*#__PURE__*/regeneratorRuntime.mark(moveLayerActionsSaga),
@@ -4709,7 +4708,7 @@ function layerActionsSaga(_ref3) {
           return _context3.stop();
       }
     }
-  }, _marked3$4);
+  }, _marked3$3);
 }
 function addLayerActionsSaga(_ref4) {
   var payload, type, targets;
@@ -4949,7 +4948,7 @@ function rootSaga$4() {
 
 var _marked$3 = /*#__PURE__*/regeneratorRuntime.mark(updateSourceValueWhenLinkingComponentToGroupSaga),
     _marked2$3 = /*#__PURE__*/regeneratorRuntime.mark(addGroupTargetSaga),
-    _marked3$3 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
+    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(linkGroupTargetSaga),
     _marked4$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$3);
 function updateSourceValueWhenLinkingComponentToGroupSaga(groupId, targetToUpdate) {
   var group;
@@ -5065,7 +5064,7 @@ function linkGroupTargetSaga(_ref2) {
           return _context3.stop();
       }
     }
-  }, _marked3$3);
+  }, _marked3$2);
 }
 
 function rootSaga$3() {
@@ -5112,7 +5111,7 @@ var synchronizationGroupConfig = {
   sagas: [rootSaga$4, rootSaga$3]
 };
 
-var useStyles$J = makeStyles(function (theme) {
+var useStyles$I = makeStyles(function (theme) {
   return {
     select: {
       '& ul': {
@@ -5170,7 +5169,7 @@ var TooltipSelect = function TooltipSelect(_a) {
       tooltipOpen = _React$useState4[0],
       setTooltipOpen = _React$useState4[1];
 
-  var classes = useStyles$J();
+  var classes = useStyles$I();
 
   var preventDefault = function preventDefault(event) {
     event.preventDefault();
@@ -5516,7 +5515,7 @@ var getDialogSource = createSelector(getDialogDetailsByType, function (details)
 
 var _marked$2 = /*#__PURE__*/regeneratorRuntime.mark(registerMapUISaga),
     _marked2$2 = /*#__PURE__*/regeneratorRuntime.mark(unregisterUIMapSaga),
-    _marked3$2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
+    _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga$2);
 function registerMapUISaga() {
   var fields, source;
   return regeneratorRuntime.wrap(function registerMapUISaga$(_context) {
@@ -5623,7 +5622,7 @@ function rootSaga$2() {
           return _context3.stop();
       }
     }
-  }, _marked3$2);
+  }, _marked3$1);
 }
 
 /* *
@@ -6365,7 +6364,7 @@ var reducer$1 = function reducer() {
 
 var _marked$1 = /*#__PURE__*/regeneratorRuntime.mark(startAnimationSaga),
     _marked2$1 = /*#__PURE__*/regeneratorRuntime.mark(stopAnimationSaga),
-    _marked3$1 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
+    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(deleteLayerSaga),
     _marked4 = /*#__PURE__*/regeneratorRuntime.mark(updateAnimation),
     _marked5 = /*#__PURE__*/regeneratorRuntime.mark(setLayerDimensionsSaga),
     _marked6 = /*#__PURE__*/regeneratorRuntime.mark(toggleAutoUpdateSaga),
@@ -6468,7 +6467,7 @@ function deleteLayerSaga(_ref3) {
           return _context3.stop();
       }
     }
-  }, _marked3$1);
+  }, _marked3);
 }
 function updateAnimation(mapId, maxValue) {
   var animationStart, animationStartUnix, animationEnd, animationEndUnix, t, deltaT, start, end, isAnimating$1, timeStep;
@@ -6774,9 +6773,11 @@ var moduleConfig = {
 var initialState = {
   filters: {
     searchFilter: '',
-    activeServices: [],
-    keywords: [],
-    addedServices: []
+    activeServices: {
+      byId: {},
+      allIds: []
+    },
+    keywords: []
   }
 };
 var reducer = function reducer() {
@@ -6792,52 +6793,14 @@ var reducer = function reducer() {
         });
       }
 
-    case 'LAYER_SELECT_SET_ACTIVE_SERVICES':
-      {
-        var activeServices = action.payload.activeServices;
-        return produce(state, function (draft) {
-          activeServices.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 = action.payload.service;
-        return produce(state, function (draft) {
-          var index = draft.filters.activeServices.findIndex(function (s) {
-            return s.id === service;
-          });
-          draft.filters.activeServices[index].enabled = true;
-        });
-      }
-
-    case 'LAYER_SELECT_DISABLE_ACTIVE_SERVICE':
-      {
-        var _service = action.payload.service;
-        return produce(state, function (draft) {
-          var index = draft.filters.activeServices.findIndex(function (s) {
-            return s.id === _service;
-          });
-          draft.filters.activeServices[index].enabled = false;
-        });
-      }
-
-    case 'LAYER_SELECT_ADD_NEW_KEYWORDS':
+    case 'LAYER_SELECT_ADD_KEYWORDS_AND_ACTIVE_SERVICES':
       {
+        var _action$payload = action.payload,
+            serviceUrl = _action$payload.serviceUrl,
+            keywords = _action$payload.keywords;
         return produce(state, function (draft) {
-          var _action$payload = action.payload,
-              serviceName = _action$payload.serviceName,
-              keywords = _action$payload.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]) {
+            draft.filters.activeServices.byId[serviceUrl] = {};
 
             var _iterator = _createForOfIteratorHelper(keywords),
                 _step;
@@ -6845,13 +6808,13 @@ var reducer = function reducer() {
             try {
               var _loop = function _loop() {
                 var keyword = _step.value;
-                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,
@@ -6872,6 +6835,87 @@ var reducer = function reducer() {
               _iterator.f();
             }
           }
+
+          draft.filters.activeServices.byId[serviceUrl].id = serviceUrl;
+          draft.filters.activeServices.byId[serviceUrl].enabled = true;
+          draft.filters.activeServices.byId[serviceUrl].keywordsPerService = keywords;
+          if (!draft.filters.activeServices.allIds.includes(serviceUrl)) draft.filters.activeServices.allIds.push(serviceUrl);
+        });
+      }
+
+    case 'LAYER_SELECT_ENABLE_ACTIVE_SERVICE':
+      {
+        var _action$payload2 = action.payload,
+            _serviceUrl = _action$payload2.serviceUrl,
+            _keywords = _action$payload2.keywords;
+        return produce(state, function (draft) {
+          draft.filters.activeServices.byId[_serviceUrl].enabled = true;
+
+          var _iterator2 = _createForOfIteratorHelper(_keywords),
+              _step2;
+
+          try {
+            var _loop2 = function _loop2() {
+              var keyword = _step2.value;
+              var foundObject = draft.filters.keywords.find(function (object) {
+                return object.id === keyword;
+              });
+
+              if (foundObject) {
+                foundObject.amountVisible += 1;
+              }
+            };
+
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              _loop2();
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        });
+      }
+
+    case 'LAYER_SELECT_DISABLE_ACTIVE_SERVICE':
+      {
+        var _action$payload3 = action.payload,
+            _serviceUrl2 = _action$payload3.serviceUrl,
+            _keywords2 = _action$payload3.keywords;
+        return produce(state, function (draft) {
+          draft.filters.activeServices.byId[_serviceUrl2].enabled = false;
+
+          var _iterator3 = _createForOfIteratorHelper(_keywords2),
+              _step3;
+
+          try {
+            var _loop3 = function _loop3() {
+              var keyword = _step3.value;
+              var foundObject = draft.filters.keywords.find(function (object) {
+                return object.id === keyword;
+              });
+
+              if (foundObject && foundObject.amountVisible > 0) {
+                foundObject.amountVisible -= 1;
+              }
+            };
+
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              _loop3();
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
+        });
+      }
+
+    case 'LAYER_SELECT_UPDATE_KEYWORDS':
+      {
+        return produce(state, function (draft) {
+          var keywords = action.payload.keywords;
+          draft.filters.keywords = keywords;
         });
       }
 
@@ -6897,10 +6941,10 @@ var reducer = function reducer() {
  * 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");
@@ -6931,19 +6975,6 @@ var setSearchFilter = function setSearchFilter(payload) {
     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
  *
@@ -6973,96 +7004,64 @@ var disableActiveService = function disableActiveService(payload) {
 /*
  * 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
   };
 };
 
-var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSagaUpdateKeywords),
-    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSagaUpdateActiveServices),
-    _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
-function newServiceAddedSagaUpdateKeywords(capturedAction) {
-  var addedService, serviceName, keywords;
-  return regeneratorRuntime.wrap(function newServiceAddedSagaUpdateKeywords$(_context) {
+var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
+    _marked2 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
+function newServiceAddedSaga(capturedAction) {
+  var addedService, service, keywords;
+  return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         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)) {
-            _context.next = 6;
-            break;
-          }
-
-          _context.next = 6;
-          return put(addNewKeywords({
-            serviceName: serviceName,
+          _context.next = 5;
+          return put(addKeywordsAndActiveServices({
+            serviceUrl: service,
             keywords: keywords
           }));
 
-        case 6:
+        case 5:
         case "end":
           return _context.stop();
       }
     }
   }, _marked);
 }
-function newServiceAddedSagaUpdateActiveServices() {
-  var services;
-  return regeneratorRuntime.wrap(function newServiceAddedSagaUpdateActiveServices$(_context2) {
+function rootSaga() {
+  return regeneratorRuntime.wrap(function rootSaga$(_context2) {
     while (1) {
       switch (_context2.prev = _context2.next) {
         case 0:
           _context2.next = 2;
-          return select(getServiceIds);
+          return takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSaga);
 
         case 2:
-          services = _context2.sent;
-          _context2.next = 5;
-          return put(setActiveServices({
-            activeServices: services
-          }));
-
-        case 5:
         case "end":
           return _context2.stop();
       }
     }
   }, _marked2);
 }
-function rootSaga() {
-  return regeneratorRuntime.wrap(function rootSaga$(_context3) {
-    while (1) {
-      switch (_context3.prev = _context3.next) {
-        case 0:
-          _context3.next = 2;
-          return takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSagaUpdateKeywords);
-
-        case 2:
-          _context3.next = 4;
-          return takeLatest(MAP_SERVICES_SET_LAYERS, newServiceAddedSagaUpdateActiveServices);
-
-        case 4:
-        case "end":
-          return _context3.stop();
-      }
-    }
-  }, _marked3);
-}
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7132,7 +7131,7 @@ var recurseNodes = function recurseNodes(nodesToRecur) {
     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"] || ''
@@ -7165,17 +7164,17 @@ var getLayersFromService = function getLayersFromService(serviceUrl) {
   });
 };
 /**
- * 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) {
+var getLayersFlattenedFromService = function getLayersFlattenedFromService(serviceUrl) {
   var forceReload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return new Promise(function (resolve, reject) {
     var serviceObject = WMGetServiceFromStore(serviceUrl);
-    serviceObject.getNodes(function (nodes) {
-      resolve(nodes.children);
+    serviceObject.getLayerObjectsFlat(function (layers) {
+      resolve(layers);
     }, function (error) {
       reject(new Error(error));
     }, forceReload);
@@ -8086,7 +8085,7 @@ var defaultConfigurations = /*#__PURE__*/Object.freeze({
   preloadedDefaultMapServices: preloadedDefaultMapServices
 });
 
-var useStyles$I = makeStyles({
+var useStyles$H = makeStyles({
   buttonDiv: {
     position: 'relative'
   },
@@ -8122,7 +8121,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
       handleClose = _ref.handleClose,
       _ref$layerType = _ref.layerType,
       layerType = _ref$layerType === void 0 ? LayerType.mapLayer : _ref$layerType;
-  var classes = useStyles$I();
+  var classes = useStyles$H();
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8276,7 +8275,7 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
   }, "Close")));
 };
 
-var useStyles$H = makeStyles(function (theme) {
+var useStyles$G = makeStyles(function (theme) {
   return {
     buttonDiv: {
       position: 'relative'
@@ -8311,7 +8310,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
       _ref$shouldFocus = _ref.shouldFocus,
       shouldFocus = _ref$shouldFocus === void 0 ? false : _ref$shouldFocus;
   var ref = React.useRef(null);
-  var classes = useStyles$H();
+  var classes = useStyles$G();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8437,7 +8436,7 @@ var widthToWidthClass = function widthToWidthClass(w) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$G = makeStyles(function (theme) {
+var useStyles$F = makeStyles(function (theme) {
   return {
     button: {
       width: '24px',
@@ -8454,7 +8453,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
       _ref$source = _ref.source,
       source = _ref$source === void 0 ? 'app' : _ref$source;
   var dispatch = useDispatch();
-  var classes = useStyles$G();
+  var classes = useStyles$F();
   var currentActiveMapId = useSelector(function (store) {
     return getDialogMapId(store, 'layerSelect');
   });
@@ -8497,7 +8496,7 @@ var LayerSelectButtonConnect = function LayerSelectButtonConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$F = makeStyles({
+var useStyles$E = makeStyles({
   row: {
     height: '32px'
   },
@@ -8521,7 +8520,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$layerSelect = _ref.layerSelect,
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect;
-  var classes = useStyles$F();
+  var classes = useStyles$E();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -8779,7 +8778,7 @@ var DimensionSelect = function DimensionSelect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$E = makeStyles(function (theme) {
+var useStyles$D = makeStyles(function (theme) {
   return createStyles({
     button: {
       height: 28,
@@ -8841,7 +8840,7 @@ var LayerManagerButton = function LayerManagerButton(_a) {
       testId = _a.testId,
       props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId"]);
 
-  var classes = useStyles$E({
+  var classes = useStyles$D({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -8881,7 +8880,7 @@ var LayerManagerButton = function LayerManagerButton(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$D = makeStyles(function (theme) {
+var useStyles$C = makeStyles(function (theme) {
   return createStyles({
     checkbox: {
       color: 'inherit',
@@ -8904,7 +8903,7 @@ var EnableLayer = function EnableLayer(_ref) {
   var isEnabled = _ref.isEnabled,
       title = _ref.title,
       onChangeEnableLayer = _ref.onChangeEnableLayer;
-  var classes = useStyles$D(isEnabled);
+  var classes = useStyles$C(isEnabled);
 
   var onClick = function onClick() {
     onChangeEnableLayer(!isEnabled);
@@ -8960,7 +8959,7 @@ var EnableLayer = function EnableLayer(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$C = makeStyles(function (theme) {
+var useStyles$B = makeStyles(function (theme) {
   return createStyles({
     dropdownEmpty: {
       paddingLeft: 8,
@@ -8983,7 +8982,7 @@ var RenderLayers = function RenderLayers(_ref) {
       layers = _ref$layers === void 0 ? [] : _ref$layers,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$C();
+  var classes = useStyles$B();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
   if (!layers || !layers.length) {
@@ -9040,7 +9039,7 @@ var RenderLayers = function RenderLayers(_ref) {
   }));
 };
 
-var useStyles$B = makeStyles(function (theme) {
+var useStyles$A = makeStyles(function (theme) {
   return {
     opacityDiv: {
       height: 'calc(100% - 5px)',
@@ -9101,7 +9100,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       onLayerChangeOpacity = _ref.onLayerChangeOpacity,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$B();
+  var classes = useStyles$A();
   var sliderClasses = sliderStyles();
   var containerClass = useTooltipContainerStyles(isEnabled);
 
@@ -9213,7 +9212,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$A = makeStyles(function (theme) {
+var useStyles$z = makeStyles(function (theme) {
   return createStyles({
     icon: {
       minWidth: 32,
@@ -9230,7 +9229,7 @@ var MenuItemButton = function MenuItemButton(_ref) {
   var title = _ref.title,
       tooltipTitle = _ref.tooltipTitle,
       icon = _ref.icon;
-  var classes = useStyles$A();
+  var classes = useStyles$z();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItemIcon, {
     className: "".concat(classes.icon, " icon")
   }, icon), /*#__PURE__*/React.createElement(Tooltip, {
@@ -9242,7 +9241,7 @@ var MenuItemButton = function MenuItemButton(_ref) {
   }, title)));
 };
 
-var useStyles$z = makeStyles(function (theme) {
+var useStyles$y = makeStyles(function (theme) {
   return {
     menu: {
       backgroundColor: theme.palette.geowebColors.background.surface,
@@ -9260,7 +9259,7 @@ var LayerManagerMenuButton = function LayerManagerMenuButton(_ref) {
       onLayerDuplicate = _ref.onLayerDuplicate,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$z();
+  var classes = useStyles$y();
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9385,7 +9384,7 @@ var RenderStyles = function RenderStyles(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$y = makeStyles(function () {
+var useStyles$x = makeStyles(function () {
   return createStyles({
     icon: {
       width: 20,
@@ -9399,7 +9398,7 @@ var DeleteButton = function DeleteButton(_ref) {
       onClickDelete = _ref.onClickDelete,
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  var classes = useStyles$y();
+  var classes = useStyles$x();
   return /*#__PURE__*/React.createElement(LayerManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickDelete,
@@ -9427,7 +9426,7 @@ var DeleteButton = function DeleteButton(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$x = makeStyles(function (theme) {
+var useStyles$w = makeStyles(function (theme) {
   return createStyles({
     icon: {
       width: 18,
@@ -9464,7 +9463,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
       isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
       _ref2$isEnabled = _ref2.isEnabled,
       isEnabled = _ref2$isEnabled === void 0 ? true : _ref2$isEnabled;
-  var classes = useStyles$x({
+  var classes = useStyles$w({
     isActive: isActive,
     isEnabled: isEnabled
   });
@@ -9513,7 +9512,7 @@ var ActivateLayer = function ActivateLayer(_ref2) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$w = makeStyles(function (theme) {
+var useStyles$v = makeStyles(function (theme) {
   return createStyles({
     row: {
       background: function background(isEnabled) {
@@ -9564,7 +9563,7 @@ var LayerRow = function LayerRow(_ref) {
       layerActiveLayout = _ref.layerActiveLayout,
       layerManagerWidth = _ref.layerManagerWidth,
       dragHandle = _ref.dragHandle;
-  var classes = useStyles$w(isEnabled);
+  var classes = useStyles$v(isEnabled);
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
 
   var onClickRow = function onClickRow() {
@@ -10146,7 +10145,7 @@ var LayerRowConnect = function LayerRowConnect(_ref) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 var TOOLTIP_TITLE = 'Drag a layer up or down';
-var useStyles$v = makeStyles(function (theme) {
+var useStyles$u = makeStyles(function (theme) {
   return {
     dragHandle: {
       cursor: 'grab',
@@ -10170,7 +10169,7 @@ var DragHandle = function DragHandle(_ref2) {
       index = _ref2$index === void 0 ? undefined : _ref2$index,
       _ref2$hideTooltip = _ref2.hideTooltip,
       hideTooltip = _ref2$hideTooltip === void 0 ? false : _ref2$hideTooltip;
-  var classes = useStyles$v({
+  var classes = useStyles$u({
     isDisabled: isDisabled
   });
   var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
@@ -10187,7 +10186,7 @@ var DragHandle = function DragHandle(_ref2) {
   });
 };
 
-var useStyles$u = makeStyles(function () {
+var useStyles$t = makeStyles(function () {
   return {
     layerRows: {
       width: '100%',
@@ -10254,7 +10253,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
 
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerIds.length === 1;
-  var classes = useStyles$u(isSorting);
+  var classes = useStyles$t(isSorting);
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     item: true,
@@ -10464,7 +10463,7 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$t = makeStyles({
+var useStyles$s = makeStyles({
   layerRow: {
     width: '100%',
     height: '36px'
@@ -10487,7 +10486,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
       layerManagerWidth = _ref.layerManagerWidth,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  var classes = useStyles$t();
+  var classes = useStyles$s();
   var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -10516,7 +10515,7 @@ var BaseLayerRow = function BaseLayerRow(_ref) {
   })));
 };
 
-var useStyles$s = makeStyles({
+var useStyles$r = makeStyles({
   layerRowContainer: {
     position: 'relative',
     width: '100%',
@@ -10551,7 +10550,7 @@ var LayerManager = function LayerManager(_ref) {
       layerSelect = _ref$layerSelect === void 0 ? false : _ref$layerSelect,
       _ref$showAddLayersToo = _ref.showAddLayersTooltip,
       showAddLayersTooltip = _ref$showAddLayersToo === void 0 ? true : _ref$showAddLayersToo;
-  var classes = useStyles$s();
+  var classes = useStyles$r();
 
   var _React$useState = React.useState(LayerManagerWidth.lg),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -10779,7 +10778,7 @@ var getSearchFilter = createSelector(layerSelectStore, function (store) {
 var getActiveServices = 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
@@ -10792,11 +10791,15 @@ var getActiveServices = createSelector(layerSelectStore, function (store) {
 var getEnabledServiceIds = createSelector(layerSelectStore, function (store) {
   var _a, _b;
 
-  var enabledServices = (_b = (_a = store === null || store === void 0 ? void 0 : store.filters) === null || _a === void 0 ? void 0 : _a.activeServices.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;
   });
 });
 /**
@@ -10827,41 +10830,39 @@ var getKeywords = createSelector(layerSelectStore, function (store) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$r = makeStyles(function (theme) {
-  return createStyles({
-    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 ".concat(theme.palette.action.disabled),
-      color: theme.palette.text.secondary,
-      '&:hover': {
-        border: "1px solid ".concat(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';
@@ -10887,54 +10888,60 @@ var ServicePopup = function ServicePopup(_ref) {
       closePopup = _ref.closePopup,
       _ref$url = _ref.url,
       url = _ref$url === void 0 ? '' : _ref$url;
-  var classes = useStyles$r();
   return /*#__PURE__*/React.createElement(Dialog, {
     open: isOpen,
     hideBackdrop: hideBackdrop,
     fullWidth: true,
     maxWidth: "xs",
-    className: classes.container
+    sx: style.container
   }, /*#__PURE__*/React.createElement(DialogTitle, {
-    className: classes.dialogTitle
+    sx: style.dialogTitle
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h5",
     component: "span"
   }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React.createElement(IconButton, {
     size: "small",
     onClick: closePopup,
-    "data-testid": "ClosePopupButtonCross"
+    "data-testid": "ClosePopupButtonCross",
+    sx: style.closeBtn
   }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
-    className: classes.dialogContent
+    sx: style.dialogContent
   }, /*#__PURE__*/React.createElement(TextField, {
-    className: classes.textField,
+    sx: style.textField,
     variant: "filled",
     label: "Service name"
   })), /*#__PURE__*/React.createElement(DialogContent, {
-    className: classes.dialogContent
+    sx: style.dialogContent
   }, /*#__PURE__*/React.createElement(TextField, {
-    className: classes.textField,
+    sx: style.textField,
     variant: "filled",
     label: "Service URL",
     defaultValue: url,
     id: "service-url"
   })), /*#__PURE__*/React.createElement(DialogContent, {
-    className: classes.dialogContent
+    sx: style.dialogContent
   }, /*#__PURE__*/React.createElement(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.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-    variant: "outlined",
-    className: classes.cancelButton,
+  })), /*#__PURE__*/React.createElement(DialogActions, {
+    sx: style.footerContent
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "tertiary",
     onClick: closePopup,
-    "data-testid": "ClosePopupButtonCancel"
+    "data-testid": "ClosePopupButtonCancel",
+    sx: {
+      width: '117px'
+    }
   }, "cancel"), /*#__PURE__*/React.createElement(Button, {
-    variant: "contained",
-    color: "primary",
-    className: classes.button
+    sx: {
+      width: '117px',
+      marginLeft: '16px!important'
+    },
+    variant: "primary"
   }, "save")));
 };
 
@@ -11103,6 +11110,56 @@ var SearchFieldConnect = function SearchFieldConnect() {
   });
 };
 
+/* *
+ * 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;
+  });
+};
+
 var useStyles$p = makeStyles(function (theme) {
   return {
     layerRow: {
@@ -11150,7 +11207,8 @@ var LayerList = function LayerList(_ref) {
   var services = _ref.services,
       serviceIds = _ref.serviceIds,
       layerSelectHeight = _ref.layerSelectHeight,
-      searchString = _ref.searchString;
+      searchString = _ref.searchString,
+      keywords = _ref.keywords;
   var classes = useStyles$p();
 
   var _React$useState = React.useState(0),
@@ -11158,20 +11216,11 @@ var LayerList = function LayerList(_ref) {
       numberOfLayers = _React$useState2[0],
       setNumberOfLayers = _React$useState2[1];
 
-  var filterLayersFromService = React.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.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.createElement("div", {
     "data-testid": "layerList"
   }, /*#__PURE__*/React.createElement("div", {
@@ -11182,7 +11231,7 @@ var LayerList = function LayerList(_ref) {
       overflow: 'auto'
     }
   }, serviceIds.map(function (serviceId) {
-    return filterLayersFromService(serviceId).map(function (layer) {
+    return filterLayersFromService(serviceId, services, keywords, searchString).map(function (layer) {
       return /*#__PURE__*/React.createElement("div", {
         key: "".concat(serviceId, "-").concat(layer.name),
         className: classes.layerRow,
@@ -11226,6 +11275,9 @@ var LayerListConnect = function LayerListConnect(_ref) {
   var enabledServiceIds = useSelector(function (store) {
     return getEnabledServiceIds(store);
   });
+  var keywords = useSelector(function (store) {
+    return getKeywords(store);
+  });
   var searchString = useSelector(function (store) {
     return getSearchFilter(store);
   });
@@ -11233,6 +11285,7 @@ var LayerListConnect = function LayerListConnect(_ref) {
     services: services,
     serviceIds: enabledServiceIds,
     layerSelectHeight: layerSelectHeight,
+    keywords: keywords,
     searchString: searchString
   });
 };
@@ -11340,29 +11393,31 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
   });
 
   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
       }));
     }
   };
@@ -11458,7 +11513,7 @@ var ServiceList = function ServiceList(_ref4) {
     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.createElement("div", {
@@ -11478,13 +11533,10 @@ var ServiceList = function ServiceList(_ref4) {
   }), 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.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.createElement(ChevronRight, {
     className: classes.scrollArrowRight,
@@ -11691,7 +11743,7 @@ var CustomSwitch = withStyles(function (theme) {
         color: theme.palette.geowebColors.customSlider.thumb
       },
       '&$checked + $track': {
-        backgroundColor: theme.palette.geowebColors.buttons.primary.fill
+        backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
       }
     },
     checked: {},
@@ -11713,7 +11765,7 @@ var useStyles$k = makeStyles(function (theme) {
       fontSize: '12px'
     },
     onlyByttonText: {
-      color: theme.palette.geowebColors.buttons.primary.fill,
+      color: theme.palette.geowebColors.buttons.primary["default"].fill,
       fontSize: '14px',
       fontWeight: 500
     },
@@ -11808,7 +11860,7 @@ var useStyles$j = makeStyles(function (theme) {
 });
 
 var KeywordFilterResults = function KeywordFilterResults(_ref) {
-  var arrayOfKeywordObjects = _ref.arrayOfKeywordObjects,
+  var keywordObjects = _ref.keywordObjects,
       mapId = _ref.mapId,
       bounds = _ref.bounds,
       _ref$onClose = _ref.onClose,
@@ -11820,7 +11872,8 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
       _ref$order = _ref.order,
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
-      source = _ref$source === void 0 ? 'module' : _ref$source;
+      source = _ref$source === void 0 ? 'module' : _ref$source,
+      updateKeywords = _ref.updateKeywords;
   var classes = useStyles$j();
 
   var _React$useState = React.useState(true),
@@ -11828,19 +11881,14 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
       allSelected = _React$useState2[0],
       setAllSelected = _React$useState2[1];
 
-  var _React$useState3 = React.useState(arrayOfKeywordObjects),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      keywordObjects = _React$useState4[0],
-      setKeywordObjects = _React$useState4[1];
-
   var toggleSelectAll = function toggleSelectAll() {
     var editedKeywords = keywordObjects.map(function (object) {
       return Object.assign(Object.assign({}, object), {
         checked: !allSelected
       });
     });
-    setKeywordObjects(editedKeywords);
     setAllSelected(!allSelected);
+    updateKeywords(editedKeywords);
   };
 
   var toggleCheckbox = function toggleCheckbox(listIndex) {
@@ -11849,7 +11897,7 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
         checked: !object.checked
       }) : object;
     });
-    setKeywordObjects(editedKeywords);
+    updateKeywords(editedKeywords);
   };
 
   var selectOnlyOne = function selectOnlyOne(listIndex) {
@@ -11860,7 +11908,7 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
         checked: false
       });
     });
-    setKeywordObjects(editedKeywords);
+    updateKeywords(editedKeywords);
   }; // If even one checkbox is unchecked, switch toggleAll off
   // If all checkboxes becomes checked, switch toggleAll on
 
@@ -11871,9 +11919,6 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
     });
     setAllSelected(checked);
   }, [keywordObjects]);
-  React.useEffect(function () {
-    setKeywordObjects(arrayOfKeywordObjects);
-  }, [arrayOfKeywordObjects]);
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: showTitle ? "Filter Results ".concat(mapId) : 'Filter Results',
     "data-testid": "keywordFilterResults",
@@ -11922,7 +11967,9 @@ var KeywordFilterResults = function KeywordFilterResults(_ref) {
     }
   }, keywordObjects.map(function (_ref2, index) {
     var id = _ref2.id,
-        checked = _ref2.checked;
+        checked = _ref2.checked,
+        amountVisible = _ref2.amountVisible;
+    if (amountVisible === 0) return null;
     return /*#__PURE__*/React.createElement(FilterListItem, {
       key: "".concat(id, "-").concat(index),
       index: index,
@@ -11979,7 +12026,12 @@ var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
   });
   var uiIsOrderedOnTop = useSelector(function (store) {
     return getDialogIsOrderedOnTop(store, 'keywordFilter');
-  }); // Check to ensure the currently active map is still present on screen - if not, close the dialog
+  });
+  var updateKeywords$1 = React.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.useEffect(function () {
     if (mapId !== '' && !isMapPresent) {
@@ -12015,7 +12067,7 @@ var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
     return getKeywords(store);
   });
   return /*#__PURE__*/React.createElement(KeywordFilterResults, {
-    arrayOfKeywordObjects: keywords,
+    keywordObjects: keywords,
     mapId: mapId,
     bounds: bounds,
     isOpen: isOpenInStore,
@@ -12023,7 +12075,8 @@ var KeywordFilterResultsConnect = function KeywordFilterResultsConnect(_ref) {
     showTitle: showTitle,
     onMouseDown: onOrderDialog,
     order: uiOrder,
-    source: uiSource
+    source: uiSource,
+    updateKeywords: updateKeywords$1
   });
 };
 
@@ -12123,7 +12176,7 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
   React.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,
@@ -20748,7 +20801,7 @@ var LegendDialog = function LegendDialog(_ref) {
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startPosition: {
       right: 20,
-      top: 20
+      top: 50
     },
     minWidth: 100,
     onClose: onClose,
@@ -22257,4 +22310,4 @@ var CoreThemeStoreProvider = function CoreThemeStoreProvider(_ref2) {
   }, children)));
 };
 
-export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterNonTimeDimensions, generateLayerId, generateMapId, generateScreenId, generateTimesliderId, getFirstTimeStepForLayerId, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants$1 as mapConstants, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, testLayers, actions$2 as uiActions, types$1 as uiTypes, useStyles$3 as useStyles };
+export { ConfigurableConnectedMap, ConfigurableMapWithSliderConnect, CoreThemeProvider, CoreThemeStoreProvider, HarmRefTimePreset, HarmonieTempAndPrecipPreset, LayerManagerConnect, LayerManagerMapButtonConnect, Legend, LegendConnect, LegendMapButtonConnect, MapControls, MapView, MapViewConnect, MapViewLayer, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, ReactMapView, ReactMapViewLayer, SyncGroupViewerConnect, index as SyncGroups, TimeSliderConnect, TooltipSelect, ZoomControlConnect, ZoomControls, componentsLookUp, coreModuleConfig, dateFormat, defaultConfigurations, filterNonTimeDimensions, generateLayerId, generateMapId, generateTimesliderId, getFirstTimeStepForLayerId, getLastTimeStepForLayerId, getNextTimeStepForLayerId, getPreviousTimeStepForLayerId, getWMJSDimensionForLayerAndDimension, getWMJSMapById, getWMJSTimeDimensionForLayerId, getWMLayerById, reducer$6 as layerReducer, makeMapPreset, actions$3 as mapActions, constants$1 as mapConstants, selectors as mapSelectors, types$2 as mapTypes, utils as mapUtils, publicLayers, publicServices, registerWMJSMap, registerWMLayer, store, actions as syncGroupActions, synchronizationGroupConfig as synchronizationGroupModuleConfig, testLayers, actions$2 as uiActions, types$1 as uiTypes, useStyles$3 as useStyles };