@opengeoweb/core 2.1.3 → 2.1.4

package/{core.umd.js → 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('@material-ui/core'), require('react-redux'), require('@opengeoweb/shared'), require('lodash'), require('@material-ui/icons'), require('react-sortablejs'), require('@material-ui/lab'), 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', '@material-ui/core', 'react-redux', '@opengeoweb/shared', 'lodash', '@material-ui/icons', 'react-sortablejs', '@material-ui/lab', '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.core, global.reactRedux, global.shared, global._, global.icons, global.reactSortablejs, global.lab, global.throttleDebounce, global.cloneDeep, global.proj4, global.reduxDynamicModules, global.reduxDynamicModulesSaga, global.theme));
-})(this, (function (exports, reselect, moment, React, produce, effects, webmap, core, reactRedux, shared, _, icons, reactSortablejs, lab, throttleDebounce, cloneDeep, proj4, reduxDynamicModules, reduxDynamicModulesSaga, theme) { 'use strict';
+  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';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,7 +28,10 @@
   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);
   var proj4__default = /*#__PURE__*/_interopDefaultLegacy(proj4);
 
@@ -400,7 +403,6 @@
   var WEBMAP_LAYER_CHANGE_STYLE = 'WEBMAP_LAYER_CHANGE_STYLE';
   var WEBMAP_LAYER_CHANGE_DIMENSION = 'WEBMAP_LAYER_CHANGE_DIMENSION';
   var WEBMAP_LAYER_SET_DIMENSIONS = 'WEBMAP_LAYER_SET_DIMENSIONS';
-  var WEBMAP_LAYER_SET_STYLES = 'WEBMAP_LAYER_SET_STYLES';
   var WEBMAP_LAYER_CHANGE_ENABLED = 'WEBMAP_LAYER_CHANGE_ENABLED';
   var WEBMAP_LAYER_DELETE = 'WEBMAP_LAYER_DELETE';
   var WEBMAP_LAYER_ERROR = 'WEBMAP_LAYER_ERROR';
@@ -411,6 +413,7 @@
   var WEBMAP_ADD_BASELAYER = 'WEBMAP_ADD_BASELAYER';
   var WEBMAP_ADD_AVAILABLE_BASELAYER = 'WEBMAP_ADD_AVAILABLE_BASELAYER';
   var WEBMAP_ADD_AVAILABLE_BASELAYERS = 'WEBMAP_ADD_AVAILABLE_BASELAYERS';
+  var WEBMAP_UPDATE_LAYER_INFO = 'WEBMAP_UPDATE_LAYER_INFO';
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -549,19 +552,6 @@
       payload: payload
     };
   };
-  /**
-   * Action layerSetStyles is used automatically after calling the setLayers action. Contents is based on WMS GetCapabilities
-   *
-   * Example: layerSetStyles({service: someService,  name: 'layerName', styles: styleArray})
-   * @param {object} payload consisting of service: string, name: string, styles: Style[]
-   */
-
-  var layerSetStyles = function layerSetStyles(payload) {
-    return {
-      type: WEBMAP_LAYER_SET_STYLES,
-      payload: payload
-    };
-  };
   /**
    * Changes the name of the layer
    *
@@ -657,6 +647,12 @@
       payload: payload
     };
   };
+  var onUpdateLayerInformation = function onUpdateLayerInformation(payload) {
+    return {
+      type: WEBMAP_UPDATE_LAYER_INFO,
+      payload: payload
+    };
+  };
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -755,7 +751,6 @@
     layerChangeEnabled: layerChangeEnabled,
     layerChangeDimension: layerChangeDimension,
     layerSetDimensions: layerSetDimensions,
-    layerSetStyles: layerSetStyles,
     layerChangeName: layerChangeName,
     layerChangeStyle: layerChangeStyle,
     layerDelete: layerDelete,
@@ -763,6 +758,7 @@
     layerError: layerError,
     addAvailableBaseLayer: addAvailableBaseLayer,
     addAvailableBaseLayers: addAvailableBaseLayers,
+    onUpdateLayerInformation: onUpdateLayerInformation,
     serviceSetLayers: serviceSetLayers
   });
 
@@ -1110,18 +1106,6 @@
       return layer.layerType === LayerType.overLayer;
     });
   });
-  /**
-   * Gets styles of the passed layer
-   *
-   * Example: layerStyles = getLayerStyles(store, 'layerId_1')
-   * @param {object} store store: object - object from which the layers state will be extracted
-   * @param {string} layerId layerId: string - Id of the layer
-   * @returns {array} returnType: Style[] - array containing layer styles
-   */
-
-  var getLayerStyles = reselect.createSelector(getLayerById, function (layer) {
-    return layer && layer.styles ? layer.styles : [];
-  });
   /**
    * Gets dimensions of the passed layer
    *
@@ -1384,10 +1368,14 @@
       return ar;
   }
 
-  function __spreadArray(to, from) {
-      for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-          to[j] = from[i];
-      return to;
+  function __spreadArray(to, from, pack) {
+      if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+          if (ar || !(i in from)) {
+              if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+              ar[i] = from[i];
+          }
+      }
+      return to.concat(ar || Array.prototype.slice.call(from));
   }
 
   /* *
@@ -2510,8 +2498,8 @@
    */
 
 
-  var getServiceIds = reselect.createSelector(servicesStore, function (store) {
-    return store ? store.allIds : [];
+  var getServiceIds = reselect.createSelector(servicesStore, function (serviceState) {
+    return serviceState ? serviceState.allIds : [];
   });
   /**
    * Gets map services
@@ -2525,20 +2513,75 @@
     return store ? store.byId : {};
   });
   /**
-   * Gets map layers from servicename
+   * Gets the service object by its url
    *
-   * Example: layers = getServices(store, 'serviceName')
+   * Example: service = getServiceByName(store, 'serviceName')
    * @param {object} store store: object - Store object
-   * @returns {array} returnType: ServiceLayer[]
+   * @returns {Service} returnType: Service
    */
 
-  var getServiceLayersByName = function getServiceLayersByName(store, serviceName) {
-    if (store && store.services && store.services.byId && store.services.byId[serviceName] && store.services.byId[serviceName].layers) {
-      return store.services.byId[serviceName].layers;
+  var getServiceByName = reselect.createSelector([servicesStore, function (state, serviceName) {
+    return serviceName;
+  }], function (serviceState, serviceName) {
+    if (serviceState && serviceState.byId && serviceState.byId[serviceName]) {
+      return serviceState.byId[serviceName];
     }
 
     return null;
-  };
+  });
+  /**
+   * Gets the layer from the store using the serviceUrl and layerName
+   *
+   * Example: layers = getLayersFromService(store, 'https://geoservices.knmi.nl/...')
+   * @param {object} store store: object - object from which the layers state will be extracted
+   * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+   * @returns {arrayr} returnType: ServiceLayer[] - All layers within the service object.
+   */
+
+  var getLayersFromService$1 = reselect.createSelector(getServiceByName, function (service) {
+    return service && service.layers || null;
+  });
+  /**
+   * Gets the layer from the store using the serviceUrl and layerName
+   *
+   * Example: layer = getLayerFromService(store, 'https://geoservices.knmi.nl/...', 'radar')
+   * @param {object} store store: object - The application store
+   * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+   * @param {string}  layerName layerName: string - Name of the layer in the service
+   * @returns {ServiceLayer} returnType: ServiceLayer - The layer from the service object.
+   */
+
+  var getLayerFromService = reselect.createSelector(function (store, serviceUrl) {
+    return getLayersFromService$1(store, serviceUrl);
+  }, function (store, serviceUrl) {
+    return serviceUrl;
+  }, function (store, serviceUrl, layerName) {
+    return layerName;
+  }, function (layers, serviceUrl, layerName) {
+    if (!layers) return null;
+    var index = layers.findIndex(function (serviceLayer) {
+      return serviceLayer.name === layerName;
+    });
+
+    if (index === -1) {
+      return null;
+    }
+
+    return layers[index];
+  });
+  /**
+   * Gets the layers stylelist from the servicestore using the serviceUrl and layerName
+   *
+   * Example: layerStyles = getLayerStyles(store, layerService, layerName);
+   * @param {object} store store: object - store from which the layers state will be extracted
+   * @param {string}  serviceUrl serviceUrl: string - Url of the service where the layer belongs to
+   * @param {string}  layerName layerName: string - Name of the layer in the service
+   * @returns {array} returnType: Style[] - array containing layer styles
+   */
+
+  var getLayerStyles = reselect.createSelector(getLayerFromService, function (layer) {
+    return layer && layer.styles ? layer.styles : [];
+  });
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2602,7 +2645,6 @@
     getLayers: getLayers,
     getBaseLayers: getBaseLayers,
     getOverLayers: getOverLayers,
-    getLayerStyles: getLayerStyles,
     getLayerDimensions: getLayerDimensions,
     getLayerNonTimeDimensions: getLayerNonTimeDimensions,
     getLayerTimeDimension: getLayerTimeDimension,
@@ -2616,7 +2658,10 @@
     getAvailableBaseLayersForMap: getAvailableBaseLayersForMap,
     getServiceIds: getServiceIds,
     getServices: getServices,
-    getServiceLayersByName: getServiceLayersByName
+    getServiceByName: getServiceByName,
+    getLayersFromService: getLayersFromService$1,
+    getLayerFromService: getLayerFromService,
+    getLayerStyles: getLayerStyles
   });
 
   /* *
@@ -2665,7 +2710,6 @@
     WEBMAP_LAYER_CHANGE_STYLE: WEBMAP_LAYER_CHANGE_STYLE,
     WEBMAP_LAYER_CHANGE_DIMENSION: WEBMAP_LAYER_CHANGE_DIMENSION,
     WEBMAP_LAYER_SET_DIMENSIONS: WEBMAP_LAYER_SET_DIMENSIONS,
-    WEBMAP_LAYER_SET_STYLES: WEBMAP_LAYER_SET_STYLES,
     WEBMAP_LAYER_CHANGE_ENABLED: WEBMAP_LAYER_CHANGE_ENABLED,
     WEBMAP_LAYER_DELETE: WEBMAP_LAYER_DELETE,
     WEBMAP_LAYER_ERROR: WEBMAP_LAYER_ERROR,
@@ -2676,6 +2720,7 @@
     WEBMAP_ADD_BASELAYER: WEBMAP_ADD_BASELAYER,
     WEBMAP_ADD_AVAILABLE_BASELAYER: WEBMAP_ADD_AVAILABLE_BASELAYER,
     WEBMAP_ADD_AVAILABLE_BASELAYERS: WEBMAP_ADD_AVAILABLE_BASELAYERS,
+    WEBMAP_UPDATE_LAYER_INFO: WEBMAP_UPDATE_LAYER_INFO,
     MAP_SERVICES_SET_LAYERS: MAP_SERVICES_SET_LAYERS
   });
 
@@ -3600,18 +3645,6 @@
           });
         }
 
-      case WEBMAP_LAYER_SET_STYLES:
-        {
-          var _m = action.payload,
-              styles_1 = _m.styles,
-              layerId_10 = _m.layerId;
-          return produce__default["default"](state, function (draft) {
-            if (draft.byId[layerId_10]) {
-              draft.byId[layerId_10].styles = styles_1;
-            }
-          });
-        }
-
       case WEBMAP_ADD_AVAILABLE_BASELAYER:
         {
           var layer_3 = action.payload.layer;
@@ -3643,6 +3676,23 @@
           });
         }
 
+      case WEBMAP_UPDATE_LAYER_INFO:
+        {
+          var _m = action.payload,
+              layerStyle = _m.layerStyle,
+              layerDimensions = _m.layerDimensions;
+          var layerStyleAction = {
+            payload: layerStyle,
+            type: WEBMAP_LAYER_CHANGE_STYLE
+          };
+          var intermediateState = layerStyle === null ? state : reducer(state, layerStyleAction);
+          var dimensionsAction = {
+            payload: layerDimensions,
+            type: WEBMAP_LAYER_SET_DIMENSIONS
+          };
+          return layerDimensions === null ? intermediateState : reducer(intermediateState, dimensionsAction);
+        }
+
       default:
         return state;
     }
@@ -4340,82 +4390,72 @@
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
   var ORIGIN_REACTMAPVIEWPARSELAYER = 'ReactMapViewParseLayer';
-  var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSInstance, mapProperties, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions) {
+  var setServiceMetadata = function setServiceMetadata(wmLayer, mapId, webMapJSInstance, mapProperties, onUpdateLayerInformation) {
     var origin = ORIGIN_REACTMAPVIEWPARSELAYER;
     var service = webmap.WMGetServiceFromStore(wmLayer.service);
     /* Update list of layers for service */
 
     var done = function done(layers) {
-      onServiceSetLayers && onServiceSetLayers({
-        id: wmLayer.service,
-        name: wmLayer.title,
-        service: wmLayer.service,
-        layers: layers
-      });
-      /* Update style information in services for a layer */
-
-      onLayerSetStyles && onLayerSetStyles({
-        origin: origin,
-        layerId: wmLayer.id,
-        styles: wmLayer.getStyles()
-      });
-      /* Select first style in service for a layer */
-
-      onLayerChangeStyle && onLayerChangeStyle({
-        origin: origin,
-        layerId: wmLayer.ReactWMJSLayerId,
-        style: wmLayer.currentStyle // || wmjsLayer.getStyles().length > 0 ? wmjsLayer.getStyles()[0].Name.value : 'default'
-
-      });
-      /* Trigger update of all map dimensions */
-
-      onMapUpdateAllDimensions && onMapUpdateAllDimensions({
-        origin: origin,
-        mapId: mapId,
-        dimensions: webMapJSInstance.mapdimensions.map(function (_a) {
-          var name = _a.name,
-              units = _a.units,
-              currentValue = _a.currentValue,
-              synced = _a.synced;
-          var reactDim = mapProperties.dimensions && mapProperties.dimensions.find(function (dim) {
-            return dim.name === name;
-          });
-          var newDimValue = reactDim && reactDim.currentValue || currentValue;
-          var newDimSynced = reactDim && reactDim.synced || synced;
-          return {
-            name: name,
-            units: units,
-            currentValue: newDimValue,
-            synced: newDimSynced
-          };
-        })
-      });
-      /* Trigger update layer dimensions */
-
-      onLayerSetDimensions && onLayerSetDimensions({
-        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;
-          return {
-            name: name,
-            units: units,
-            currentValue: currentValue,
-            maxValue: dimMaxValue,
-            minValue: dimMinValue,
-            timeInterval: dimTimeInterval,
-            values: values,
-            synced: synced
-          };
-        })
-      });
+      var updateObject = {
+        origin: ORIGIN_REACTMAPVIEWPARSELAYER,
+        serviceLayers: {
+          id: wmLayer.service,
+          name: wmLayer.title,
+          service: wmLayer.service,
+          layers: layers
+        },
+        layerStyle: {
+          origin: origin,
+          layerId: wmLayer.ReactWMJSLayerId,
+          style: wmLayer.currentStyle
+        },
+        mapDimensions: {
+          origin: origin,
+          mapId: mapId,
+          dimensions: webMapJSInstance.mapdimensions.map(function (_a) {
+            var name = _a.name,
+                units = _a.units,
+                currentValue = _a.currentValue,
+                synced = _a.synced;
+            var reactDim = mapProperties.dimensions && mapProperties.dimensions.find(function (dim) {
+              return dim.name === name;
+            });
+            var newDimValue = reactDim && reactDim.currentValue || currentValue;
+            var newDimSynced = reactDim && reactDim.synced || synced;
+            return {
+              name: name,
+              units: units,
+              currentValue: newDimValue,
+              synced: newDimSynced
+            };
+          })
+        },
+        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;
+            return {
+              name: name,
+              units: units,
+              currentValue: currentValue,
+              maxValue: dimMaxValue,
+              minValue: dimMinValue,
+              timeInterval: dimTimeInterval,
+              values: values,
+              synced: synced
+            };
+          })
+        }
+      };
+      onUpdateLayerInformation && onUpdateLayerInformation(updateObject);
     };
 
     service.getLayerObjectsFlat(done, function () {// do nothing
@@ -5038,7 +5078,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$J = core.makeStyles(function (theme) {
+  var useStyles$J = makeStyles__default["default"](function (theme) {
     return {
       select: {
         '& ul': {
@@ -5083,6 +5123,9 @@
         onChangeMouseWheel = _d === void 0 ? function () {} : _d,
         props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel"]);
 
+    props.disableUnderline;
+        var otherProps = __rest(props, ["disableUnderline"]);
+
     var _e = __read(React__namespace.useState(false), 2),
         selectOpen = _e[0],
         setSelectOpen = _e[1];
@@ -5135,11 +5178,11 @@
       enableScroll();
       setTooltipOpen(false);
     }, [enableScroll]);
-    return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: tooltip,
       placement: "top",
       open: tooltipOpen
-    }, /*#__PURE__*/React__namespace.createElement(core.Select, __assign({
+    }, /*#__PURE__*/React__namespace.createElement(material.Select, __assign({
       onOpen: onOpen,
       onClose: onClose,
       onMouseEnter: onMouseEnter,
@@ -5152,7 +5195,7 @@
           paper: classes.select
         }
       }
-    }, props)));
+    }, otherProps)));
   };
 
   /* *
@@ -6285,6 +6328,17 @@
           }, state);
         }
 
+      case WEBMAP_UPDATE_LAYER_INFO:
+        {
+          var mapDimensions = action.payload.mapDimensions;
+          if (mapDimensions === null) return state;
+          var mapAction = {
+            payload: mapDimensions,
+            type: WEBMAP_MAP_UPDATE_ALL_DIMENSIONS
+          };
+          return reducer(state, mapAction);
+        }
+
       default:
         return state;
     }
@@ -6326,6 +6380,17 @@
           if (!draft.allIds.includes(action.payload.service)) draft.allIds.push(action.payload.service);
         });
 
+      case WEBMAP_UPDATE_LAYER_INFO:
+        {
+          var serviceLayers = action.payload.serviceLayers;
+          if (serviceLayers === null) return state;
+          var mapAction = {
+            payload: serviceLayers,
+            type: MAP_SERVICES_SET_LAYERS
+          };
+          return reducer(state, mapAction);
+        }
+
       default:
         return state;
     }
@@ -6535,14 +6600,18 @@
     });
   }
   function setLayerDimensionsSaga(_a) {
-    var dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, error_1;
+    var layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, prevTimeDimension, isAnimating$1, webmapInstance, error_1;
     var payload = _a.payload;
     return __generator(this, function (_b) {
       switch (_b.label) {
         case 0:
           _b.trys.push([0, 12,, 13]);
 
-          dimensions = payload.dimensions, layerId = payload.layerId;
+          layerDimensions = payload.layerDimensions;
+          if (!layerDimensions) return [2
+          /*return*/
+          ];
+          dimensions = layerDimensions.dimensions, layerId = layerDimensions.layerId;
           return [4
           /*yield*/
           , effects.select(getLayerById, layerId)];
@@ -6746,7 +6815,7 @@
 
           return [4
           /*yield*/
-          , effects.takeLatest(WEBMAP_LAYER_SET_DIMENSIONS, setLayerDimensionsSaga)];
+          , effects.takeLatest(WEBMAP_UPDATE_LAYER_INFO, setLayerDimensionsSaga)];
 
         case 4:
           _a.sent();
@@ -6810,6 +6879,7 @@
   var initialState = {
     filters: {
       searchFilter: '',
+      activeServices: [],
       keywords: [],
       addedServices: []
     }
@@ -6828,6 +6898,43 @@
           });
         }
 
+      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':
         {
           return produce__default["default"](state, function (draft) {
@@ -6902,6 +7009,9 @@
    * 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';
 
   /* *
@@ -6934,6 +7044,45 @@
     };
   };
   /**
+   * 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
+   *
+   * Example: enableActiveService({ serviceId: 'service-1' })
+   * @param {string} payload { serviceId: string }
+   */
+
+  var enableActiveService = function enableActiveService(payload) {
+    return {
+      type: LAYER_SELECT_ENABLE_ACTIVE_SERVICE,
+      payload: payload
+    };
+  };
+  /**
+   * Disables given service in the activeServices array
+   *
+   * Example: disableActiveService({ serviceId: 'service-1' })
+   * @param {string} payload { serviceId: string }
+   */
+
+  var disableActiveService = function disableActiveService(payload) {
+    return {
+      type: LAYER_SELECT_DISABLE_ACTIVE_SERVICE,
+      payload: payload
+    };
+  };
+  /*
    * Sets the given keywords to Layer Select store
    *
    * Example: addNewKeywords({ keywords: ['keyword1', 'keyword2'] })
@@ -6963,7 +7112,7 @@
    * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2022 - Finnish Meteorological Institute (FMI)
    * */
-  function newServiceAddedSaga(capturedAction) {
+  function newServiceAddedSagaUpdateKeywords(capturedAction) {
     var addedService, serviceName, keywords;
     return __generator(this, function (_a) {
       switch (_a.label) {
@@ -6999,17 +7148,50 @@
       }
     });
   }
+  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*/
+          ];
+      }
+    });
+  }
   function rootSaga() {
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
           return [4
           /*yield*/
-          , effects.takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSaga)];
+          , effects.takeEvery(MAP_SERVICES_SET_LAYERS, newServiceAddedSagaUpdateKeywords)];
 
         case 1:
           _a.sent();
 
+          return [4
+          /*yield*/
+          , effects.takeLatest(MAP_SERVICES_SET_LAYERS, newServiceAddedSagaUpdateActiveServices)];
+
+        case 2:
+          _a.sent();
+
           return [2
           /*return*/
           ];
@@ -7161,29 +7343,30 @@
   var WMSLayerTreeHeader = function WMSLayerTreeHeader(_a) {
     var serviceName = _a.serviceName,
         onClickReload = _a.onClickReload;
-    return /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       direction: "row",
       spacing: 1,
-      justify: "space-between"
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
-    }, /*#__PURE__*/React__namespace.createElement(core.InputLabel, {
+    }, /*#__PURE__*/React__namespace.createElement(material.InputLabel, {
       shrink: true,
       htmlFor: "select-multiple-native"
-    }, "Available layers for ", serviceName)), onClickReload && /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, "Available layers for ", serviceName)), onClickReload && /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
-    }, /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Reload layers from service",
       placement: "top"
-    }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+    }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       "data-testid": "reloadLayers",
       color: "primary",
       style: {
         padding: 3
       },
-      onClick: onClickReload
-    }, /*#__PURE__*/React__namespace.createElement(icons.Cached, {
+      onClick: onClickReload,
+      size: "large"
+    }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Cached, {
       fontSize: "small"
     })))));
   };
@@ -7265,13 +7448,13 @@
     if ((!layerTree.children || !layerTree.children.length) && !isLoading) {
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(WMSLayerTreeHeader, {
         serviceName: service.name
-      }), /*#__PURE__*/React__namespace.createElement(core.Paper, {
+      }), /*#__PURE__*/React__namespace.createElement(material.Paper, {
         "data-testid": "message",
         style: paperStyle
-      }, /*#__PURE__*/React__namespace.createElement(core.Box, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
         p: 2,
         display: "flex"
-      }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body2"
       }, "No data"))));
     } // Base case where there exists at least one layer
@@ -7305,13 +7488,13 @@
       onClickReload: function onClickReload() {
         return setForceReload(true);
       }
-    }), /*#__PURE__*/React__namespace.createElement(core.Paper, {
+    }), /*#__PURE__*/React__namespace.createElement(material.Paper, {
       style: paperStyle
-    }, isLoading ? /*#__PURE__*/React__namespace.createElement(core.Box, {
+    }, isLoading ? /*#__PURE__*/React__namespace.createElement(material.Box, {
       p: 4,
       display: "flex",
       justifyContent: "center"
-    }, /*#__PURE__*/React__namespace.createElement(core.CircularProgress, null)) : /*#__PURE__*/React__namespace.createElement(core.List, {
+    }, /*#__PURE__*/React__namespace.createElement(material.CircularProgress, null)) : /*#__PURE__*/React__namespace.createElement(material.List, {
       "data-testid": "layer-list",
       dense: true,
       style: {
@@ -7323,7 +7506,7 @@
       }, category === '' ? '' // Do not render a subheader if category is empty
       :
       /*#__PURE__*/
-      React__namespace.createElement(core.ListSubheader, {
+      React__namespace.createElement(material.ListSubheader, {
         key: category
       }, /*#__PURE__*/React__namespace.createElement("div", {
         style: {
@@ -7334,7 +7517,7 @@
           textOverflow: 'ellipsis'
         }
       }, category)), layerMap[category].map(function (layer) {
-        return layer.leaf ? /*#__PURE__*/React__namespace.createElement(core.ListItem, {
+        return layer.leaf ? /*#__PURE__*/React__namespace.createElement(material.ListItem, {
           "data-testid": "selectableLayer",
           key: layer.name,
           button: true,
@@ -7342,7 +7525,7 @@
           onClick: function onClick() {
             return handleInternalSelect(layer.name);
           }
-        }, /*#__PURE__*/React__namespace.createElement(core.ListItemText, {
+        }, /*#__PURE__*/React__namespace.createElement(material.ListItemText, {
           id: layer.name,
           primary: layer.title
         })) : null; // Do not list subcategories as layers
@@ -7457,27 +7640,27 @@
       handleChangeService(index);
     };
 
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       direction: "row",
       spacing: 1,
       style: {
         height: '34px'
       }
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
-    }, /*#__PURE__*/React__namespace.createElement(core.InputLabel, {
+    }, /*#__PURE__*/React__namespace.createElement(material.InputLabel, {
       shrink: true,
       htmlFor: "select-multiple-native"
-    }, "Available services"))), /*#__PURE__*/React__namespace.createElement(core.Paper, {
+    }, "Available services"))), /*#__PURE__*/React__namespace.createElement(material.Paper, {
       style: {
         height: 200,
         overflow: 'auto'
       }
-    }, /*#__PURE__*/React__namespace.createElement(core.List, {
+    }, /*#__PURE__*/React__namespace.createElement(material.List, {
       dense: true
     }, availableServices.map(function (service, index) {
-      return /*#__PURE__*/React__namespace.createElement(core.ListItem, {
+      return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
         "data-testid": "service-item",
         key: service.url,
         selected: service === activeService,
@@ -7485,7 +7668,7 @@
         onClick: function onClick(event) {
           handleListItemClick(event, index);
         }
-      }, /*#__PURE__*/React__namespace.createElement(core.ListItemText, {
+      }, /*#__PURE__*/React__namespace.createElement(material.ListItemText, {
         primary: service.name
       }));
     }))));
@@ -7732,7 +7915,7 @@
     name: 'RAD_NL25_PCP_CM',
     format: 'image/png',
     enabled: true,
-    style: 'knmiradar/nearest',
+    style: 'radar/nearest',
     id: generateLayerId(),
     layerType: LayerType.mapLayer
   };
@@ -8073,7 +8256,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$I = core.makeStyles({
+  var useStyles$I = makeStyles__default["default"]({
     buttonDiv: {
       position: 'relative'
     },
@@ -8177,25 +8360,25 @@
       }
     };
 
-    return /*#__PURE__*/React__namespace.createElement(core.Dialog, {
+    return /*#__PURE__*/React__namespace.createElement(material.Dialog, {
       fullWidth: true,
       maxWidth: "md",
       open: open,
       onClose: handleClose,
       "aria-labelledby": "form-dialog-title",
       "data-testid": "addLayersPopup"
-    }, /*#__PURE__*/React__namespace.createElement(core.DialogTitle, {
+    }, /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
       id: "form-dialog-title"
-    }, "Load WMS layer(s)"), /*#__PURE__*/React__namespace.createElement(core.DialogContent, null, /*#__PURE__*/React__namespace.createElement(core.DialogContentText, null, "Please enter a wms server, or select one from the list."), /*#__PURE__*/React__namespace.createElement(core.Box, {
+    }, "Load WMS layer(s)"), /*#__PURE__*/React__namespace.createElement(material.DialogContent, null, /*#__PURE__*/React__namespace.createElement(material.DialogContentText, null, "Please enter a wms server, or select one from the list."), /*#__PURE__*/React__namespace.createElement(material.Box, {
       m: 2
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       direction: "row",
       alignItems: "center"
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: 10
-    }, /*#__PURE__*/React__namespace.createElement(core.TextField, {
+    }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
       margin: "dense",
       id: "serviceurl",
       label: "Service URL",
@@ -8215,34 +8398,36 @@
       fullWidth: true,
       disabled: loading,
       error: urlError !== '',
-      helperText: urlError
-    })), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+      helperText: urlError,
+      variant: "standard"
+    })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: 2,
       className: classes.buttonDiv
-    }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+    }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       "data-testid": "add-service",
       onClick: handleAddServiceURL,
       color: "primary",
-      disabled: loading
-    }, /*#__PURE__*/React__namespace.createElement(icons.Add, null)), loading && /*#__PURE__*/React__namespace.createElement(core.CircularProgress, {
+      disabled: loading,
+      size: "large"
+    }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Add, null)), loading && /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
       size: 35,
       className: classes.loadingButton
-    })))), /*#__PURE__*/React__namespace.createElement(core.Box, {
+    })))), /*#__PURE__*/React__namespace.createElement(material.Box, {
       m: 2
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       direction: "row",
       alignItems: "center",
       spacing: 3
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: 4
     }, /*#__PURE__*/React__namespace.createElement(WMSServerList, {
       availableServices: services,
       service: activeService,
       handleChangeService: handleChangeService
-    })), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: 8
     }, onRenderTree ? onRenderTree(activeService) : /*#__PURE__*/React__namespace.createElement(WMSLayerTreeConnect, {
@@ -8250,7 +8435,7 @@
       onClickLayer: onClickService,
       highlightedLayers: highlightedLayers,
       layerType: layerType
-    }))))), /*#__PURE__*/React__namespace.createElement(core.DialogActions, null, /*#__PURE__*/React__namespace.createElement(core.Button, {
+    }))))), /*#__PURE__*/React__namespace.createElement(material.DialogActions, null, /*#__PURE__*/React__namespace.createElement(material.Button, {
       onClick: handleClose,
       color: "primary"
     }, "Close")));
@@ -8272,7 +8457,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$H = core.makeStyles(function (theme) {
+  var useStyles$H = makeStyles__default["default"](function (theme) {
     return {
       buttonDiv: {
         position: 'relative'
@@ -8323,15 +8508,16 @@
       } // eslint-disable-next-line react-hooks/exhaustive-deps
 
     }, []);
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: tooltip
-    }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+    }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       onClick: handleClose,
       className: classes.button,
       disableRipple: true,
       "data-testid": "addLayersButton",
-      ref: ref
-    }, /*#__PURE__*/React__namespace.createElement(icons.Add, null))), /*#__PURE__*/React__namespace.createElement(AddLayersPopup, {
+      ref: ref,
+      size: "large"
+    }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Add, null))), /*#__PURE__*/React__namespace.createElement(AddLayersPopup, {
       open: open,
       handleClose: handleClose,
       onClickService: onClickService,
@@ -8360,7 +8546,7 @@
    * */
   var iconButtonSize = 30;
   var totalButtons = 5;
-  var LayerManagerColumnsLarge = core.makeStyles({
+  var LayerManagerColumnsLarge = makeStyles__default["default"]({
     column1: {
       width: iconButtonSize * 3,
       display: 'flex'
@@ -8382,7 +8568,7 @@
       display: 'inline-flex'
     }
   });
-  var LayerManagerColumnsSmall = core.makeStyles({
+  var LayerManagerColumnsSmall = makeStyles__default["default"]({
     column1: {
       width: iconButtonSize * 3
     },
@@ -8431,7 +8617,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$G = core.makeStyles(function (theme) {
+  var useStyles$G = makeStyles__default["default"](function (theme) {
     return {
       button: {
         width: '24px',
@@ -8463,15 +8649,16 @@
         source: source
       }));
     }, [currentActiveMapId, dispatch, isOpenInStore, mapId, source]);
-    return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Layer Select"
-    }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+    }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       onClick: openLayerSelectDialog,
       className: classes.button,
       id: "layerSelectButton",
       "data-testid": "layerSelectButton",
-      disableRipple: true
-    }, /*#__PURE__*/React__namespace.createElement(icons.Add, null)));
+      disableRipple: true,
+      size: "large"
+    }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Add, null)));
   };
 
   /* *
@@ -8490,7 +8677,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$F = core.makeStyles({
+  var useStyles$F = makeStyles__default["default"]({
     row: {
       height: '32px'
     },
@@ -8516,12 +8703,12 @@
         layerSelect = _e === void 0 ? false : _e;
     var classes = useStyles$F();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
-    return /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
       "data-testid": "descriptionRow",
       className: classes.row
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       className: columnSizes.column1
     }, /*#__PURE__*/React__namespace.createElement(AddLayersButton, {
@@ -8537,23 +8724,23 @@
       shouldFocus: true
     }), layerSelect && /*#__PURE__*/React__namespace.createElement(LayerSelectButtonConnect, {
       mapId: mapId
-    })), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       className: columnSizes.column2
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.text
-    }, "Layer")), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, "Layer")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       className: columnSizes.column3
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.text
-    }, "Style")), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, "Style")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       className: columnSizes.column4
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.text
-    }, "Opacity")), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, "Opacity")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       className: columnSizes.column5
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.text
-    }, "Dimensions")), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, "Dimensions")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       className: columnSizes.column6
     }));
   };
@@ -8574,8 +8761,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useTooltipContainerStyles = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useTooltipContainerStyles = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       textContainer: {
         width: '100%',
         height: 32,
@@ -8584,6 +8771,12 @@
         color: function color(isEnabled) {
           return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultText.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledText.rgba;
         },
+        '& .MuiOutlinedInput-input': {
+          padding: '6px 24px 6px 8px'
+        },
+        '& .MuiOutlinedInput-notchedOutline': {
+          borderColor: 'transparent!important'
+        },
         '&:hover .MuiSelect-select': {
           backgroundColor: theme.palette.geowebColors.layerManager.tableRowMouseover.rgba
         },
@@ -8703,12 +8896,12 @@
       return value === activeDim.currentValue;
     });
     if (dimValueCurrentIndex === -1) return null;
-    return /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       direction: "row",
-      justify: "flex-start",
+      justifyContent: "flex-start",
       alignItems: "center"
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: 12
     }, /*#__PURE__*/React__namespace.createElement(TooltipSelect, {
@@ -8730,10 +8923,10 @@
       style: {
         maxWidth: '50%'
       }
-    }, /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
     }, "Select dimension"), layerDimensions.map(function (dimension) {
-      return /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: dimension.name,
         value: dimension.name
       }, dimension.name);
@@ -8756,10 +8949,10 @@
       style: {
         maxWidth: '50%'
       }
-    }, /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
     }, "Select dimension value. (", valuesToDisplay.length, " options)"), valuesToDisplay.map(function (dimValue) {
-      return /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: dimValue,
         value: dimValue
       }, "" + dimValue, /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, "\xA0", /*#__PURE__*/React__namespace.createElement("i", null, "" + activeDim.units)));
@@ -8782,8 +8975,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$E = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$E = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       button: {
         height: 28,
         width: 28,
@@ -8824,6 +9017,9 @@
             return isActive ? theme.palette.geowebColors.buttons.primaryMouseover.fill : theme.palette.geowebColors.layerManager.tableRowMouseover.rgba;
           }
         }
+      },
+      popper: {
+        pointerEvents: 'none'
       }
     });
   });
@@ -8850,10 +9046,13 @@
       onClick(event);
     };
 
-    return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: tooltipTitle,
-      placement: "top"
-    }, /*#__PURE__*/React__namespace.createElement(core.IconButton, __assign({
+      placement: "top",
+      classes: {
+        popper: classes.popper
+      }
+    }, /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
       size: "small",
       onClick: handleClick,
       "data-testid": testId,
@@ -8878,8 +9077,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$D = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$D = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       checkbox: {
         color: 'inherit',
         padding: 4,
@@ -8907,14 +9106,14 @@
       onChangeEnableLayer(!isEnabled);
     };
 
-    var visibilityIcon = /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+    var visibilityIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
       width: 24,
       height: 24,
       fill: "transparent"
     }), /*#__PURE__*/React__namespace.createElement("path", {
       d: "M14.4980749,15.8618431 C15.8661433,15.0851043 16.779689,13.6936347 16.779689,12.1014551 C16.779689,10.5092755 15.8661433,9.11870594 14.4980749,8.34106705 C17.6257313,9.18620931 19.3529176,11.4300215 19.8092405,12.1014551 C19.3529176,12.7719886 17.6266313,15.0167008 14.4980749,15.8618431 L14.4980749,15.8618431 Z M4.18985949,12.1014551 C4.64618231,11.4300215 6.37336867,9.18710936 9.49922496,8.3419671 C8.13295665,9.11870594 7.21851093,10.5101755 7.21851093,12.1014551 C7.21851093,13.6936347 8.13295665,15.0842042 9.49922496,15.8618431 C6.37336867,15.0167008 4.64618231,12.7728886 4.18985949,12.1014551 L4.18985949,12.1014551 Z M11.99955,13.8583429 C10.9950998,13.8583429 10.180559,13.0717036 10.180559,12.1014551 C10.180559,11.1312066 10.9950998,10.3445672 11.99955,10.3445672 C13.0031002,10.3445672 13.8176409,11.1312066 13.8176409,12.1014551 C13.8176409,13.0717036 13.0031002,13.8583429 11.99955,13.8583429 L11.99955,13.8583429 Z M20.7983899,11.7666383 C20.6813841,11.5713286 17.8696435,7 11.99955,7 C6.12945647,7 3.31681584,11.5713286 3.19980999,11.7666383 L3,12.1014551 L3.19980999,12.4362718 C3.31681584,12.6306815 6.12945647,17.2020101 11.99955,17.2020101 C17.8696435,17.2020101 20.6813841,12.6306815 20.7983899,12.4362718 L21,12.1014551 L20.7983899,11.7666383 Z"
     }));
-    var visibilityOffIcon = /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+    var visibilityOffIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
       style: {
         marginTop: 2
       }
@@ -8928,7 +9127,7 @@
     return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
       tooltipTitle: title,
       onClick: onClick,
-      icon: /*#__PURE__*/React__namespace.createElement(core.Checkbox, {
+      icon: /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
         className: classes.checkbox,
         icon: visibilityOffIcon,
         checkedIcon: visibilityIcon,
@@ -8957,8 +9156,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$C = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$C = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       dropdownEmpty: {
         paddingLeft: 8,
         height: 32,
@@ -8986,7 +9185,7 @@
     if (!layers || !layers.length) {
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.dropdownEmpty
-      }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body1",
         className: classes.emptyText
       }, "No service available"));
@@ -9026,10 +9225,10 @@
       onChangeMouseWheel: function onChangeMouseWheel(e) {
         return onChangeLayerName(e.value);
       }
-    }, /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
     }, "Select layer"), layers.map(function (layerFromServiceLayers) {
-      return /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: layerFromServiceLayers.name,
         value: layerFromServiceLayers.name,
         disabled: !layerFromServiceLayers.leaf
@@ -9053,7 +9252,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$B = core.makeStyles(function (theme) {
+  var useStyles$B = makeStyles__default["default"](function (theme) {
     return {
       opacityDiv: {
         height: 'calc(100% - 5px)',
@@ -9173,12 +9372,12 @@
       className: classes.opacityDiv,
       onWheel: onWheel,
       "data-testid": "scrollOpacity"
-    }, /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: tooltipTitle,
       className: containerClass.textContainer,
       placement: "top",
       open: tooltipOpen
-    }, /*#__PURE__*/React__namespace.createElement(core.Button, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Button, {
       tabIndex: 0,
       className: classes.opacityButton,
       onClick: onClickButton,
@@ -9188,7 +9387,7 @@
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
       onBlur: onBlur
-    }, /*#__PURE__*/React__namespace.createElement("div", null, Math.round(currentOpacity * 100), " %"))), open ? /*#__PURE__*/React__namespace.createElement("div", {
+    }, Math.round(currentOpacity * 100) + "  %")), open ? /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.sliderBackground
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: sliderClasses.sliderHeader
@@ -9224,8 +9423,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$A = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$A = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       icon: {
         minWidth: 32,
         color: theme.palette.geowebColors.layerManager.tableRowDefaultIcon.rgba
@@ -9242,12 +9441,12 @@
         tooltipTitle = _a.tooltipTitle,
         icon = _a.icon;
     var classes = useStyles$A();
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(core.ListItemIcon, {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, {
       className: classes.icon + " icon"
-    }, icon), /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    }, icon), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: tooltipTitle,
       placement: "top"
-    }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
       className: classes.text,
       variant: "inherit"
     }, title)));
@@ -9269,7 +9468,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$z = core.makeStyles(function (theme) {
+  var useStyles$z = makeStyles__default["default"](function (theme) {
     return {
       menu: {
         backgroundColor: theme.palette.geowebColors.background.surface,
@@ -9312,10 +9511,10 @@
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
       tooltipTitle: tooltipTitle,
       onClick: handleClick,
-      icon: /*#__PURE__*/React__namespace.createElement(icons.MoreVert, null),
+      icon: /*#__PURE__*/React__namespace.createElement(iconsMaterial.MoreVert, null),
       testId: "openMenuButton",
       isEnabled: isEnabled
-    }), /*#__PURE__*/React__namespace.createElement(core.Menu, {
+    }), /*#__PURE__*/React__namespace.createElement(material.Menu, {
       anchorEl: anchorEl,
       keepMounted: true,
       open: Boolean(anchorEl),
@@ -9323,13 +9522,13 @@
       PaperProps: {
         className: classes.menu
       }
-    }, /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       "data-testid": "duplicateLayerButton",
       onClick: onClickDuplicate
     }, /*#__PURE__*/React__namespace.createElement(MenuItemButton, {
       title: "Duplicate layer",
       tooltipTitle: "Duplicate layer",
-      icon: /*#__PURE__*/React__namespace.createElement(icons.FileCopy, {
+      icon: /*#__PURE__*/React__namespace.createElement(iconsMaterial.FileCopy, {
         fontSize: "small"
       })
     }))));
@@ -9385,10 +9584,10 @@
       onChangeMouseWheel: function onChangeMouseWheel(e) {
         return onChangeLayerStyle(e.value);
       }
-    }, /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
     }, "Select style"), styles.map(function (styleFromlayer) {
-      return /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: styleFromlayer.name,
         value: styleFromlayer.name
       }, styleFromlayer.title);
@@ -9411,8 +9610,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$y = core.makeStyles(function () {
-    return core.createStyles({
+  var useStyles$y = makeStyles__default["default"](function () {
+    return createStyles__default["default"]({
       icon: {
         width: 20,
         height: 20
@@ -9429,7 +9628,7 @@
     return /*#__PURE__*/React__namespace.createElement(LayerManagerButton, {
       tooltipTitle: tooltipTitle,
       onClick: onClickDelete,
-      icon: /*#__PURE__*/React__namespace.createElement(icons.Delete, {
+      icon: /*#__PURE__*/React__namespace.createElement(iconsMaterial.Delete, {
         className: classes.icon
       }),
       testId: "deleteButton",
@@ -9453,8 +9652,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$x = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$x = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       icon: {
         width: 18,
         height: 18,
@@ -9496,7 +9695,7 @@
     });
 
     var Icon = function Icon() {
-      return /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
         className: classes.icon
       }, /*#__PURE__*/React__namespace.createElement("g", {
         id: "Concept-3",
@@ -9539,8 +9738,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$w = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$w = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       row: {
         background: function background(isEnabled) {
           return isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultCardContainer.fill : theme.palette.geowebColors.layerManager.tableRowDisabledCardContainer.fill;
@@ -9598,12 +9797,12 @@
       return onLayerRowClick(layerId);
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+    return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       className: classes.row,
       item: true,
       container: true,
       "data-testid": "layerRow-" + layerId
-    }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+    }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: columnSizes.column1
     }, dragHandle, layerEnableLayout || /*#__PURE__*/React__default["default"].createElement(EnableLayer, {
@@ -9617,7 +9816,7 @@
       }
     }), layerActiveLayout || /*#__PURE__*/React__default["default"].createElement(ActivateLayer, {
       onClickActivate: onClickRow
-    })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+    })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: "" + columnSizes.column2
     }, layerServicesLayout || /*#__PURE__*/React__default["default"].createElement(RenderLayers, {
@@ -9629,7 +9828,7 @@
           name: name
         });
       }
-    })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+    })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: "" + columnSizes.column3
     }, layerStylesLayout || /*#__PURE__*/React__default["default"].createElement(RenderStyles, {
@@ -9642,7 +9841,7 @@
           style: style
         });
       }
-    })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+    })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: "" + columnSizes.column4
     }, layerOpacityLayout || /*#__PURE__*/React__default["default"].createElement(OpacitySelect, {
@@ -9654,7 +9853,7 @@
           opacity: _opacity
         });
       }
-    })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+    })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: "" + columnSizes.column5
     }, layerDimensionLayout || /*#__PURE__*/React__default["default"].createElement(DimensionSelect, {
@@ -9672,7 +9871,7 @@
           dimension: dimension
         });
       }
-    })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+    })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
       item: true,
       className: columnSizes.column6
     }, layerDeleteLayout || /*#__PURE__*/React__default["default"].createElement(DeleteButton, {
@@ -9894,11 +10093,14 @@
   var RenderStylesConnect = function RenderStylesConnect(_a) {
     var layerId = _a.layerId;
     var dispatch = reactRedux.useDispatch();
+    var layerService = reactRedux.useSelector(function (store) {
+      return getLayerService(store, layerId);
+    });
     var layerName = reactRedux.useSelector(function (store) {
       return getLayerName(store, layerId);
     });
     var layerStyles = reactRedux.useSelector(function (store) {
-      return getLayerStyles(store, layerId);
+      return getLayerStyles(store, layerService, layerName);
     });
     var currentLayerStyle = reactRedux.useSelector(function (store) {
       return getLayerStyle(store, layerId);
@@ -9951,7 +10153,7 @@
       return getLayerEnabled(store, layerId);
     });
     var layers = reactRedux.useSelector(function (store) {
-      return getServiceLayersByName(store, layerService);
+      return getLayersFromService$1(store, layerService);
     });
     var layerChangeName$1 = React__namespace.useCallback(function (_a) {
       var layerId = _a.layerId,
@@ -10170,7 +10372,7 @@
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
   var TOOLTIP_TITLE = 'Drag a layer up or down';
-  var useStyles$v = core.makeStyles(function (theme) {
+  var useStyles$v = makeStyles__default["default"](function (theme) {
     return {
       dragHandle: {
         cursor: 'grab',
@@ -10178,6 +10380,7 @@
         '&:hover': {
           backgroundColor: 'inherit'
         },
+        height: 32,
         color: function color(_a) {
           var isDisabled = _a.isDisabled;
           return isDisabled ? theme.palette.geowebColors.layerManager.tableRowDefaultIcon.rgba : theme.palette.geowebColors.layerManager.tableRowDisabledIcon.fill;
@@ -10199,7 +10402,7 @@
     var tooltipTitle = hideTooltip ? '' : TOOLTIP_TITLE;
     return /*#__PURE__*/React__default["default"].createElement(LayerManagerButton, {
       tooltipTitle: tooltipTitle,
-      icon: /*#__PURE__*/React__default["default"].createElement(icons.DragIndicator, null),
+      icon: /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null),
       testId: "dragHandle" + (index !== undefined ? "-" + index : ''),
       className: classes.dragHandle + " handle",
       tabIndex: -1,
@@ -10226,7 +10429,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$u = core.makeStyles(function () {
+  var useStyles$u = makeStyles__default["default"](function () {
     return {
       layerRows: {
         width: '100%',
@@ -10293,7 +10496,7 @@
     var isSorting = activeDragIndex !== null;
     var isDragDisabled = layerIds.length === 1;
     var classes = useStyles$u(isSorting);
-    return /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
       className: classes.layerRows,
@@ -10363,7 +10566,7 @@
     var currentIndex = availableBaseLayers.findIndex(function (layer) {
       return selectedBaseLayerId === layer.id;
     });
-    return /*#__PURE__*/React__namespace.createElement(core.FormControl, {
+    return /*#__PURE__*/React__namespace.createElement(material.FormControl, {
       style: {
         width: '100%'
       }
@@ -10388,10 +10591,10 @@
       onChangeMouseWheel: function onChangeMouseWheel(e) {
         return onChangeBaseLayers(e.value);
       }
-    }, /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+    }, /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
       disabled: true
     }, "Select base layer"), availableBaseLayers.map(function (baseLayer) {
-      return /*#__PURE__*/React__namespace.createElement(core.MenuItem, {
+      return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
         key: baseLayer.id,
         value: baseLayer.id
       }, baseLayer.name);
@@ -10502,7 +10705,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$t = core.makeStyles({
+  var useStyles$t = makeStyles__default["default"]({
     layerRow: {
       width: '100%',
       height: '36px'
@@ -10527,12 +10730,12 @@
         tooltip = _d === void 0 ? '' : _d;
     var classes = useStyles$t();
     var columnSizes = layerManagerWidth === LayerManagerWidth.sm ? LayerManagerColumnsSmall() : LayerManagerColumnsLarge();
-    return /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
       className: classes.layerRow,
       "data-testid": "baseLayerRow"
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       className: columnSizes.column1 + " " + classes.addBaseLayers
     }, /*#__PURE__*/React__namespace.createElement(AddLayersButton, {
@@ -10545,7 +10748,7 @@
           layerType: LayerType.baseLayer
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       className: "" + columnSizes.column2
     }, /*#__PURE__*/React__namespace.createElement(BaseLayersConnect, {
@@ -10570,7 +10773,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$s = core.makeStyles({
+  var useStyles$s = makeStyles__default["default"]({
     layerRowContainer: {
       position: 'relative',
       width: '100%',
@@ -10639,7 +10842,7 @@
       source: source
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.layerManagerContainer
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       "data-testid": "layerManagerRowContainer",
       className: classes.layerRowContainer
@@ -10677,8 +10880,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useButtonStyles = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useButtonStyles = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       button: {
         height: '24px',
         width: function width(_a) {
@@ -10699,7 +10902,8 @@
           backgroundColor: theme.palette.geowebColors.buttons.disabled.fill,
           '& svg path, svg text': {
             fill: theme.palette.geowebColors.typographyAndIcons.iconLinkDisabled
-          }
+          },
+          border: "1px solid " + theme.palette.geowebColors.buttons.disabled.fill
         },
         '&.Mui-selected': {
           backgroundColor: theme.palette.geowebColors.buttons.primaryActive.fill,
@@ -10721,16 +10925,18 @@
     var active = _a.active,
         width = _a.width,
         children = _a.children,
-        props = __rest(_a, ["active", "width", "children"]);
+        _b = _a.value,
+        value = _b === void 0 ? 0 : _b,
+        props = __rest(_a, ["active", "width", "children", "value"]);
 
     var classes = useButtonStyles({
       width: width
     });
-    return /*#__PURE__*/React__namespace.createElement(lab.ToggleButton, __assign({
+    return /*#__PURE__*/React__namespace.createElement(material.ToggleButton, __assign({
       className: classes.button,
       disableRipple: true,
       selected: active,
-      value: 0
+      value: value
     }, props), children);
   };
 
@@ -10776,7 +10982,7 @@
       id: "keywordFilterButton",
       "data-testid": "keywordFilterButton",
       disableRipple: true
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
@@ -10806,10 +11012,57 @@
   var layerSelectStore = function layerSelectStore(store) {
     return store && store.layerSelect ? store.layerSelect : null;
   };
+  /**
+   * Returns search filter string
+   *
+   * Example getSearchFilter(store);
+   * @param {object} store store: object - store object
+   * @returns {array} returnType: string
+   */
+
 
   var getSearchFilter = reselect.createSelector(layerSelectStore, function (store) {
     return store ? store.filters.searchFilter : '';
   });
+  /**
+   * Returns active services array
+   *
+   * Example getActiveServices(store);
+   * @param {object} store store: object - store object
+   * @returns {array} returnType: array of active services
+   */
+
+  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 : [];
+  });
+  /**
+   * Returns all ids of enabled services
+   *
+   * Example getEnabledServiceIds(store);
+   * @param {object} store store: object - store object
+   * @returns {array} returnType: array of service ids that are enabled
+   */
+
+  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;
+    })) !== null && _b !== void 0 ? _b : [];
+    return enabledServices.map(function (service) {
+      return service.id;
+    });
+  });
+  /**
+   * Returns all keywords
+   *
+   * Example getKeywords(store);
+   * @param {object} store store: object - store object
+   * @returns {array} returnType: array of keyword objects
+   */
+
   var getKeywords = reselect.createSelector(layerSelectStore, function (store) {
     return store ? store.filters.keywords : [];
   });
@@ -10830,8 +11083,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$r = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$r = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       dialogTitle: {
         display: 'flex',
         justifyContent: 'space-between'
@@ -10845,12 +11098,23 @@
         },
         '&.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: {
         '& .MuiDialog-paper': {
           backgroundColor: theme.palette.geowebColors.cards.cardContainer
         }
+      },
+      dialogContent: {
+        padding: '8px 24px'
       }
     });
   });
@@ -10880,45 +11144,50 @@
         _c = _a.url,
         url = _c === void 0 ? '' : _c;
     var classes = useStyles$r();
-    return /*#__PURE__*/React__namespace.createElement(core.Dialog, {
+    return /*#__PURE__*/React__namespace.createElement(material.Dialog, {
       open: isOpen,
-      disableBackdropClick: true,
       hideBackdrop: hideBackdrop,
       fullWidth: true,
       maxWidth: "xs",
       className: classes.container
-    }, /*#__PURE__*/React__namespace.createElement(core.DialogTitle, {
-      className: classes.dialogTitle,
-      disableTypography: true
-    }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
-      variant: "h5"
-    }, getTitleForVariant(servicePopupVariant)), /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+    }, /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
+      className: classes.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"
-    }, /*#__PURE__*/React__namespace.createElement(icons.Close, null))), /*#__PURE__*/React__namespace.createElement(core.DialogContent, null, /*#__PURE__*/React__namespace.createElement(core.TextField, {
+    }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
+      className: classes.dialogContent
+    }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
       className: classes.textField,
       variant: "filled",
       label: "Service name"
-    })), /*#__PURE__*/React__namespace.createElement(core.DialogContent, null, /*#__PURE__*/React__namespace.createElement(core.TextField, {
+    })), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
+      className: classes.dialogContent
+    }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
       className: classes.textField,
       variant: "filled",
       label: "Service URL",
       defaultValue: url,
       id: "service-url"
-    })), /*#__PURE__*/React__namespace.createElement(core.DialogContent, null, /*#__PURE__*/React__namespace.createElement(core.TextField, {
+    })), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
+      className: classes.dialogContent
+    }, /*#__PURE__*/React__namespace.createElement(material.TextField, {
       className: classes.textField,
       variant: "filled",
       multiline: true,
       rows: 4,
       label: "Abstracts",
       helperText: "Short description of what this service does"
-    })), /*#__PURE__*/React__namespace.createElement(core.DialogActions, null, /*#__PURE__*/React__namespace.createElement(core.Button, {
+    })), /*#__PURE__*/React__namespace.createElement(material.DialogActions, null, /*#__PURE__*/React__namespace.createElement(material.Button, {
       variant: "outlined",
-      className: classes.button,
+      className: classes.cancelButton,
       onClick: closePopup,
       "data-testid": "ClosePopupButtonCancel"
-    }, "cancel"), /*#__PURE__*/React__namespace.createElement(core.Button, {
+    }, "cancel"), /*#__PURE__*/React__namespace.createElement(material.Button, {
       variant: "contained",
       color: "primary",
       className: classes.button
@@ -10944,7 +11213,7 @@
   var isURL = function isURL(string) {
     return /^https?:\/\//.test(string);
   };
-  var useStyles$q = core.makeStyles(function (theme) {
+  var useStyles$q = makeStyles__default["default"](function (theme) {
     return {
       iconButton: {
         color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat
@@ -10957,7 +11226,7 @@
     };
   });
   var clearIconPath = 'M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M15.44426,7.26697571 L12.0002861,10.7110482 L8.55573996,7.26697571 C8.19978253,6.9110081 7.62292549,6.9110081 7.26696807,7.26697571 C6.91101064,7.62294331 6.91101064,8.19981687 7.26696807,8.55578447 L10.7115142,11.9998569 L7.26696807,15.4445017 C6.91101064,15.8004693 6.91101064,16.3767705 7.26696807,16.7333104 C7.44494678,16.910722 7.67843653,17 7.91192629,17 C8.14484377,17 8.37776125,16.910722 8.55573996,16.7333104 L12.0002861,13.289238 L15.44426,16.7333104 C15.6222388,16.910722 15.8551562,17 16.088646,17 C16.3221357,17 16.5550532,16.910722 16.7330319,16.7333104 C17.0889894,16.3767705 17.0889894,15.8004693 16.7330319,15.4445017 L13.289058,11.9998569 L16.7330319,8.55578447 C17.0889894,8.19981687 17.0889894,7.62294331 16.7330319,7.26697571 C16.3770745,6.9110081 15.8002175,6.9110081 15.44426,7.26697571 Z';
-  var clearIcon = /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+  var clearIcon = /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
     style: {
       width: '24px',
       height: '24px'
@@ -10968,7 +11237,7 @@
     d: clearIconPath
   }));
   var searchIconPath = 'M7.81701445,12.5845372 L7.81701445,12.5845372 C7.17924024,11.946763 6.82932049,11.100321 6.82932049,10.1993044 C6.82932049,9.29828785 7.17924024,8.45077582 7.81701445,7.8140717 C8.47405029,7.15703585 9.3376137,6.82851792 10.2022472,6.82851792 C11.0658106,6.82851792 11.929374,7.15703585 12.5874799,7.8140717 C13.9026217,9.12921348 13.9026217,11.2693954 12.5874799,12.5845372 C11.9497057,13.2212413 11.1021937,13.5722311 10.2022472,13.5722311 C9.3012306,13.5722311 8.45371857,13.2212413 7.81701445,12.5845372 M19.5858748,17.581862 L15.4681648,13.465222 C16.9513109,11.0735688 16.6613162,7.88683788 14.5874799,5.81300161 C12.1690744,3.39566613 8.23434992,3.39566613 5.81594436,5.81300161 C4.64419476,6.9847512 4,8.54280364 4,10.1993044 C4,11.8558052 4.64419476,13.4138577 5.81594436,14.5845372 C6.98769395,15.7562868 8.5446763,16.4015516 10.2022472,16.4015516 C11.376137,16.4015516 12.4965222,16.0719636 13.4681648,15.4662921 L17.5837346,19.582932 C17.8608882,19.8590155 18.2225789,19.9970572 18.5853398,19.9970572 C18.9470305,19.9970572 19.3087212,19.8590155 19.5858748,19.582932 C20.1380417,19.029695 20.1380417,18.135099 19.5858748,17.581862';
-  var searchIcon = /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
+  var searchIcon = /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
     style: {
       width: '24px',
       height: '24px'
@@ -10988,21 +11257,22 @@
         setPopupOpen = _b[1];
 
     var classes = useStyles$q();
-    var ClearButton = /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
+    var ClearButton = /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
       title: "Clear",
       placement: "top"
-    }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+    }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
       className: classes.iconButton,
       edge: "end",
       onClick: function onClick() {
         onClickClear();
-      }
+      },
+      size: "large"
     }, clearIcon));
     if (isURL(localSearchString)) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         marginRight: '15px'
       }
-    }, ClearButton), /*#__PURE__*/React__default["default"].createElement(core.Button, {
+    }, ClearButton), /*#__PURE__*/React__default["default"].createElement(material.Button, {
       variant: "outlined",
       onClick: function onClick() {
         return setPopupOpen(true);
@@ -11017,12 +11287,13 @@
       url: localSearchString
     }));
     if (localSearchString) return ClearButton;
-    return /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
+    return /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
       title: "Search",
       placement: "top"
-    }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+    }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
       className: classes.iconButton,
-      edge: "end"
+      edge: "end",
+      size: "large"
     }, searchIcon));
   };
 
@@ -11064,7 +11335,7 @@
       if (!isURL(text)) setSearchFilterDebounced(text);else if (searchFilter) setSearchFilterDebounced('');
     };
 
-    return /*#__PURE__*/React__namespace.createElement(core.TextField, {
+    return /*#__PURE__*/React__namespace.createElement(material.TextField, {
       variant: "filled",
       label: "Search through services or enter a service URL",
       value: localSearchString,
@@ -11074,7 +11345,7 @@
       autoFocus: true,
       fullWidth: true,
       InputProps: {
-        endAdornment: /*#__PURE__*/React__namespace.createElement(core.InputAdornment, {
+        endAdornment: /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
           position: "end"
         }, /*#__PURE__*/React__namespace.createElement(SearchFieldButtonContainer, {
           localSearchString: localSearchString,
@@ -11135,7 +11406,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$p = core.makeStyles(function (theme) {
+  var useStyles$p = makeStyles__default["default"](function (theme) {
     return {
       layerRow: {
         background: theme.palette.geowebColors.background.surface,
@@ -11181,18 +11452,28 @@
   var LayerList = function LayerList(_a) {
     var services = _a.services,
         serviceIds = _a.serviceIds,
-        layerSelectHeight = _a.layerSelectHeight;
+        layerSelectHeight = _a.layerSelectHeight,
+        searchString = _a.searchString;
     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 + services[serviceId].layers.length;
+        return totalNumberOfLayers + filterLayersFromService(serviceId).length;
       }, 0));
-    }, [serviceIds, services]);
+    }, [serviceIds, filterLayersFromService]);
     return /*#__PURE__*/React__namespace.createElement("div", {
       "data-testid": "layerList"
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -11203,7 +11484,7 @@
         overflow: 'auto'
       }
     }, serviceIds.map(function (serviceId) {
-      return services[serviceId].layers.map(function (layer) {
+      return filterLayersFromService(serviceId).map(function (layer) {
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: serviceId + "-" + layer.name,
           className: classes.layerRow,
@@ -11241,16 +11522,20 @@
 
   var LayerListConnect = function LayerListConnect(_a) {
     var layerSelectHeight = _a.layerSelectHeight;
-    var allServiceIds = reactRedux.useSelector(function (store) {
-      return getServiceIds(store);
-    });
-    var allServices = reactRedux.useSelector(function (store) {
+    var services = reactRedux.useSelector(function (store) {
       return getServices(store);
     });
+    var enabledServiceIds = reactRedux.useSelector(function (store) {
+      return getEnabledServiceIds(store);
+    });
+    var searchString = reactRedux.useSelector(function (store) {
+      return getSearchFilter(store);
+    });
     return /*#__PURE__*/React__namespace.createElement(LayerList, {
-      services: allServices,
-      serviceIds: allServiceIds,
-      layerSelectHeight: layerSelectHeight
+      services: services,
+      serviceIds: enabledServiceIds,
+      layerSelectHeight: layerSelectHeight,
+      searchString: searchString
     });
   };
 
@@ -11270,20 +11555,36 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$o = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$o = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       chip: {
         height: '32px',
         margin: '0 8px 0 0',
         padding: '5px 12px 7px',
         borderRadius: '20px',
-        border: "solid 1px " + theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
-        backgroundColor: theme.palette.geowebColors.buttons.surfaceIconDefault.fill,
-        color: theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat,
+        border: function border(_a) {
+          var isEnabled = _a.isEnabled;
+          return isEnabled ? "solid 1px " + theme.palette.geowebColors.buttons.primaryActive.fill : "solid 1px " + theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat;
+        },
+        backgroundColor: function backgroundColor(_a) {
+          var isEnabled = _a.isEnabled;
+          return isEnabled ? theme.palette.geowebColors.buttons.primaryActive.fill : theme.palette.geowebColors.buttons.surfaceIconDefault.fill;
+        },
+        color: function color(_a) {
+          var isEnabled = _a.isEnabled;
+          return isEnabled ? theme.palette.geowebColors.typographyAndIcons.buttonIcon : theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat;
+        },
         "float": 'left',
         whiteSpace: 'nowrap',
         '&:hover': {
-          backgroundColor: theme.palette.geowebColors.buttons.flatMouseover.fill,
+          backgroundColor: function backgroundColor(_a) {
+            var isEnabled = _a.isEnabled;
+            return isEnabled ? theme.palette.geowebColors.buttons.primaryMouseover.fill : theme.palette.geowebColors.buttons.flatMouseover.fill;
+          },
+          border: function border(_a) {
+            var isEnabled = _a.isEnabled;
+            return isEnabled ? "solid 1px " + theme.palette.geowebColors.buttons.primaryMouseover.fill : "solid 1px " + theme.palette.geowebColors.typographyAndIcons.buttonIconTertiaryFlat;
+          },
           cursor: 'pointer'
         }
       }
@@ -11293,25 +11594,86 @@
   var ServiceChip = function ServiceChip(_a) {
     var _b = _a.all,
         all = _b === void 0 ? false : _b,
-        service = _a.service;
-    var classes = useStyles$o();
+        service = _a.service,
+        isEnabled = _a.isEnabled,
+        toggleChip = _a.toggleChip;
+    var classes = useStyles$o({
+      isEnabled: isEnabled
+    });
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      className: classes.chip,
+      "data-testid": all ? 'serviceChipAll' : 'serviceChip',
+      onClick: function onClick() {
+        return toggleChip(all ? 'all' : service && service.service);
+      },
+      onKeyPress: function onKeyPress() {
+        return toggleChip(all ? 'all' : service && service.service);
+      }
+    }, service ? service.name : 'All');
+  };
 
-    if (all) {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.chip,
-        "data-testid": "serviceChipAll"
-      }, "All");
-    }
+  /* *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   *     http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+   * Copyright 2022 - Finnish Meteorological Institute (FMI)
+   * */
 
-    if (service && service.name) {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.chip,
-        "data-testid": "serviceChip"
-      }, service.name);
-    }
+  var ServiceChipConnect = function ServiceChipConnect(_a) {
+    var _b = _a.all,
+        all = _b === void 0 ? false : _b,
+        service = _a.service,
+        isEnabled = _a.isEnabled;
+    var dispatch = reactRedux.useDispatch();
+    var activeServices = reactRedux.useSelector(function (store) {
+      return getActiveServices(store);
+    });
 
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: classes.chip
+    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) {
+        dispatch(disableActiveService({
+          service: service
+        }));
+      } else {
+        dispatch(enableActiveService({
+          service: service
+        }));
+      }
+    };
+
+    return /*#__PURE__*/React__namespace.createElement(ServiceChip, {
+      service: service,
+      all: all,
+      toggleChip: toggleChip,
+      isEnabled: isEnabled
     });
   };
 
@@ -11331,8 +11693,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$n = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$n = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       serviceChips: {
         width: '100%',
         display: 'inline-flex',
@@ -11351,7 +11713,8 @@
         maxWidth: function maxWidth(_a) {
           var maxWidthValue = _a.maxWidthValue;
           return maxWidthValue;
-        }
+        },
+        fontSize: '0.875rem'
       },
       scrollArrowLeft: {
         width: '120px',
@@ -11384,7 +11747,8 @@
 
   var ServiceList = function ServiceList(_a) {
     var layerSelectWidth = _a.layerSelectWidth,
-        services = _a.services;
+        services = _a.services,
+        activeServices = _a.activeServices;
 
     var _b = __read(React__namespace.useState(0), 2),
         margin = _b[0],
@@ -11410,25 +11774,35 @@
       setWidth(ref.current.scrollWidth + 50);
       setMargin(Math.max(0, Math.min(width - layerSelectWidth, margin)));
     }, [services, layerSelectWidth, width, margin]);
+    var isAllEnabled = activeServices.every(function (activeService) {
+      return activeService.enabled;
+    });
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.serviceList,
       "data-testid": "serviceList"
-    }, margin !== 0 && /*#__PURE__*/React__namespace.createElement(icons.ChevronLeft, {
+    }, margin !== 0 && /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronLeft, {
       className: classes.scrollArrowLeft,
       onClick: onLeftArrowClick,
       "data-testid": "leftScrollArrow"
     }), /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.serviceChips,
       ref: ref
-    }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React__namespace.createElement(ServiceChip, {
+    }, services && Object.keys(services) && Object.keys(services).length > 0 && /*#__PURE__*/React__namespace.createElement(ServiceChipConnect, {
       key: "All",
-      all: true
+      all: true,
+      isEnabled: isAllEnabled
     }), Object.keys(services).map(function (service) {
-      return /*#__PURE__*/React__namespace.createElement(ServiceChip, {
+      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]
+        service: services[service],
+        isEnabled: isServiceEnabled
       });
-    })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(icons.ChevronRight, {
+    })), layerSelectWidth + margin < width && /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronRight, {
       className: classes.scrollArrowRight,
       onClick: onRightArrowClick,
       "data-testid": "rightScrollArrow"
@@ -11457,9 +11831,13 @@
     var services = reactRedux.useSelector(function (store) {
       return getServices(store);
     });
+    var activeServices = reactRedux.useSelector(function (store) {
+      return getActiveServices(store);
+    });
     return /*#__PURE__*/React__namespace.createElement(ServiceList, {
       layerSelectWidth: layerSelectWidth,
-      services: services
+      services: services,
+      activeServices: activeServices
     });
   };
 
@@ -11479,8 +11857,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$m = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$m = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       servicesContainer: {
         width: '300px',
         height: '380px',
@@ -11512,17 +11890,17 @@
       onClick: toggleContainer,
       active: containerOpen,
       "data-testid": "serviceOptionsButton"
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
       d: "M12 16c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0-2c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm0-6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z",
       fill: "#FFF",
       fillRule: "evenodd"
-    })))), containerOpen ? /*#__PURE__*/React__namespace.createElement(core.Box, {
+    })))), containerOpen ? /*#__PURE__*/React__namespace.createElement(material.Box, {
       className: classes.servicesContainer,
       "data-testid": "container"
-    }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
       className: classes.servicesText
     }, "Services")) : null);
   };
@@ -11543,7 +11921,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$l = core.makeStyles({
+  var useStyles$l = makeStyles__default["default"]({
     serviceList: {
       height: '48px'
     },
@@ -11651,7 +12029,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var CustomSwitch = core.withStyles(function (theme) {
+  var CustomSwitch = withStyles__default["default"](function (theme) {
     return {
       switchBase: {
         '&$checked': {
@@ -11667,7 +12045,7 @@
         opacity: '1 !important'
       }
     };
-  })(core.Switch);
+  })(material.Switch);
 
   /* *
    * Licensed under the Apache License, Version 2.0 (the "License");
@@ -11685,8 +12063,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$k = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$k = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       listItem: {
         width: '100%',
         minWidth: '300px',
@@ -11742,20 +12120,21 @@
       onFocus: handleMouseOver,
       onBlur: handleMouseLeave,
       "data-testid": "filterResultListItem"
-    }, /*#__PURE__*/React__namespace.createElement(core.ListItem, {
+    }, /*#__PURE__*/React__namespace.createElement(material.ListItem, {
       className: classes.listItem
-    }, /*#__PURE__*/React__namespace.createElement(core.ListItemIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, {
       className: classes.listItemIcon
-    }, /*#__PURE__*/React__namespace.createElement(core.Checkbox, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
+      color: "secondary",
       checked: checked,
       onChange: function onChange() {
         return toggleCheckbox(index);
       },
       className: classes.checkbox
-    })), /*#__PURE__*/React__namespace.createElement(core.Typography, {
+    })), /*#__PURE__*/React__namespace.createElement(material.Typography, {
       variant: "body2",
       className: classes.listItemText
-    }, text), hovering ? /*#__PURE__*/React__namespace.createElement(core.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+    }, text), hovering ? /*#__PURE__*/React__namespace.createElement(material.ListItemSecondaryAction, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       style: {
         backgroundColor: 'transparent'
       },
@@ -11763,8 +12142,9 @@
       size: "small",
       onClick: function onClick() {
         return selectOnlyOne(index);
-      }
-    }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      },
+      "data-testid": "onlyButton"
+    }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
       className: classes.onlyByttonText
     }, "ONLY"))) : null));
   };
@@ -11785,8 +12165,8 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$j = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$j = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       selectAll: {
         padding: '15px',
         paddingLeft: '20px'
@@ -11884,31 +12264,32 @@
       onMouseDown: onMouseDown,
       order: order,
       source: source
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
       xs: 12,
-      justify: "space-between",
+      justifyContent: "space-between",
       alignItems: "center",
       className: classes.selectAllContainer
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
       xs: 6,
-      justify: "flex-start",
+      justifyContent: "flex-start",
       alignItems: "center",
       className: classes.selectAll
-    }, "Select all"), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, "Select all"), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       item: true,
       xs: 6,
-      justify: "flex-end",
+      justifyContent: "flex-end",
       alignContent: "center",
       className: classes["switch"]
     }, /*#__PURE__*/React__namespace.createElement(CustomSwitch, {
       checked: allSelected,
-      onChange: toggleSelectAll
-    }))), /*#__PURE__*/React__namespace.createElement(core.List, {
+      onChange: toggleSelectAll,
+      "data-testid": "customSwitch"
+    }))), /*#__PURE__*/React__namespace.createElement(material.List, {
       dense: true,
       style: {
         padding: '0px'
@@ -12284,7 +12665,7 @@
     return /*#__PURE__*/React__namespace.createElement(ToggleIconButton, __assign({
       onClick: onClick,
       active: isActive
-    }, props), /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    }, props), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       className: classes.button,
       placement: placement,
       title: title
@@ -12307,7 +12688,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$i = core.makeStyles(function () {
+  var useStyles$i = makeStyles__default["default"](function () {
     return {
       container: {
         '& > button': {
@@ -12333,7 +12714,7 @@
     var classes = useStyles$i();
     return /*#__PURE__*/React__namespace.createElement("div", __assign({
       className: classes.wrapper
-    }, props), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, props), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       className: classes.container,
       container: true,
       direction: "column"
@@ -12370,7 +12751,7 @@
       title: "Reset zoom",
       "data-testid": "zoom-reset",
       onClick: onZoomReset
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
       style: {
         width: 20,
         height: 20
@@ -12381,7 +12762,7 @@
       title: "Zoom in",
       "data-testid": "zoom-in",
       onClick: onZoomIn
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
       style: {
         width: 20,
         height: 20
@@ -12392,7 +12773,7 @@
       title: "Zoom out",
       "data-testid": "zoom-out",
       onClick: onZoomOut
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
       style: {
         width: 22,
         height: 22
@@ -12487,7 +12868,7 @@
       "data-testid": "layerManagerButton",
       onClick: openLayerManagerDialog,
       isActive: isOpen
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
       style: {
         width: 22,
         height: 22
@@ -12498,7 +12879,7 @@
   };
 
   var IconLevels = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
-    return /*#__PURE__*/React__namespace.createElement(core.SvgIcon, __assign({}, props, {
+    return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props, {
       ref: ref,
       style: {
         width: 20,
@@ -12509,7 +12890,7 @@
     }));
   });
   var IconEnsemble = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
-    return /*#__PURE__*/React__namespace.createElement(core.SvgIcon, __assign({}, props, {
+    return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props, {
       ref: ref,
       style: {
         width: 20,
@@ -12603,13 +12984,14 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$h = core.makeStyles(function () {
+  var useStyles$h = makeStyles__default["default"](function () {
     return {
       verticalLevelDimensionSelectContainer: {
         height: '320px',
         margin: '10px',
         marginLeft: '-5px',
-        minWidth: 120
+        minWidth: 120,
+        fontSize: '90%'
       },
       layerName: {
         paddingLeft: '10px',
@@ -12619,11 +13001,11 @@
       }
     };
   });
-  var SmallFontSlider = core.withStyles({
+  var SmallFontSlider = withStyles__default["default"]({
     markLabel: {
       fontSize: '80%'
     }
-  })(core.Slider);
+  })(material.Slider);
 
   var DimensionSelectSlider = function DimensionSelectSlider(_a) {
     var marks = _a.marks,
@@ -12649,11 +13031,10 @@
       return null;
     }
 
-    var sortedMarks = __spreadArray([], __read(marks));
-
-    sortedMarks = sortedMarks.sort(function (a, b) {
+    var sortedMarks = __spreadArray([], __read(marks)).sort(function (a, b) {
       return typeof a.value === 'number' && typeof b.value === 'number' && a.value - b.value;
     });
+
     var adaptedMarks = reverse ? sortedMarks.reverse() : sortedMarks;
     var values = adaptedMarks.map(function (m) {
       return m.value;
@@ -12671,7 +13052,7 @@
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.verticalLevelDimensionSelectContainer,
       "data-testid": "slider-dimensionSelect"
-    }, /*#__PURE__*/React__namespace.createElement(core.Box, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
       component: "span",
       m: 1
     }, /*#__PURE__*/React__namespace.createElement(SmallFontSlider, {
@@ -12691,9 +13072,9 @@
         onChangeDimensionValue(values[val].toString());
         if (!managedValue) setCurrentIndex(val);
       }
-    }))), /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    }))), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: layerName
-    }, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
       variant: "body2",
       className: classes.layerName
     }, layerName)));
@@ -12798,27 +13179,30 @@
     var layerName = wmLayer.getLayerName();
     var marks = marksByDimension(wmsDimension);
     var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
-    return /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    var tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
+
+    var Icon = function Icon() {
+      return isLayerDimensionSynced ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.Link, {
+        "data-testid": "syncIcon"
+      }) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.LinkOff, {
+        "data-testid": "syncDisIcon"
+      });
+    };
+
+    return /*#__PURE__*/React__namespace.createElement(material.Grid, {
       key: layerId,
       item: true,
       xs: "auto"
-    }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+      title: tooltipTitle,
+      placement: "top"
+    }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
       "data-testid": "syncButton",
       size: "small",
       onClick: function onClick() {
         return handleSyncChanged(layerId, dimensionName, layerDimension.currentValue, !layerDimension.synced);
       }
-    }, isLayerDimensionSynced ? /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
-      title: "Click to disconnect layer",
-      placement: "top"
-    }, /*#__PURE__*/React__namespace.createElement(icons.Link, {
-      "data-testid": "syncIcon"
-    })) : /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
-      title: "Click to connect layer",
-      placement: "top"
-    }, /*#__PURE__*/React__namespace.createElement(icons.LinkOff, {
-      "data-testid": "syncDisIcon"
-    }))), /*#__PURE__*/React__namespace.createElement(DimensionSelectSlider, {
+    }, /*#__PURE__*/React__namespace.createElement(Icon, null))), /*#__PURE__*/React__namespace.createElement(DimensionSelectSlider, {
       marks: marks,
       layerName: layerName,
       reverse: dimConfig ? dimConfig.reversed : false,
@@ -12920,7 +13304,7 @@
       style: {
         padding: 4
       }
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       direction: "row"
     }, layerIds.map(function (layerId) {
@@ -13186,7 +13570,7 @@
         _d = _a.disabled,
         disabled = _d === void 0 ? false : _d;
     var autoUpdateButton = isAutoUpdating ? autoUpdateButtonActive : autoUpdateButtonInactive;
-    return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: autoUpdateButton.title
     }, /*#__PURE__*/React__namespace.createElement("span", {
       "data-testid": "autoUpdateButtonTooltip"
@@ -13197,7 +13581,7 @@
         return toggleAutoUpdate();
       },
       "data-testid": "autoUpdateButton"
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("g", {
       transform: "translate(-3 -3)"
     }, /*#__PURE__*/React__namespace.createElement("rect", {
       width: 24,
@@ -13252,7 +13636,7 @@
       return null;
     } : _d;
     var loopButtonPath = isLooping ? svgLoopOffPath : svgLoopPath;
-    return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: loopButtonPath.title
     }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
       onClick: function onClick() {
@@ -13261,7 +13645,7 @@
       active: isLooping,
       disabled: isDisabled,
       "data-testid": "loopButton"
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
       width: 24,
       height: 24,
       fill: "transparent"
@@ -13287,7 +13671,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$g = core.makeStyles(function (theme) {
+  var useStyles$g = makeStyles__default["default"](function (theme) {
     return {
       speedButtonDiv: {
         height: '24px',
@@ -13346,6 +13730,10 @@
     };
 
     var onKeyDown = function onKeyDown(event) {
+      // disable default Slider behavior
+      event.stopPropagation();
+      event.preventDefault(); // custom logic
+
       if (event.key === 'Tab') {
         setOpen(!open);
       }
@@ -13360,13 +13748,13 @@
     var text = marks[currentValue].text;
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.speedButtonDiv
-    }, /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Speed"
     }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
       onClick: onClickButton,
       active: true,
       "data-testid": "speedButton"
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
       width: 24,
       height: 24,
       fill: "transparent"
@@ -13529,7 +13917,7 @@
     timeStepValue: 5256000,
     text: '10y'
   }];
-  var useStyles$f = core.makeStyles(function (theme) {
+  var useStyles$f = makeStyles__default["default"](function (theme) {
     return {
       timeStepDiv: {
         width: '58px',
@@ -13557,7 +13945,7 @@
       disabled: {}
     };
   });
-  var TimeStepSwitch = core.withStyles(function (theme) {
+  var TimeStepSwitch = withStyles__default["default"](function (theme) {
     return {
       root: {
         marginLeft: '18px'
@@ -13581,7 +13969,7 @@
         opacity: '1 !important'
       }
     };
-  })(core.Switch);
+  })(material.Switch);
 
   var TimeStepButton = function TimeStepButton(_a) {
     var timeStep = _a.timeStep,
@@ -13630,6 +14018,10 @@
     };
 
     var onKeyDown = function onKeyDown(event) {
+      // disable default Slider behavior
+      event.stopPropagation();
+      event.preventDefault(); // custom logic
+
       if (event.key === 'Tab') {
         setOpen(!open);
       }
@@ -13648,17 +14040,17 @@
     }, [timeStepFromLayer, isTimestepAuto, onChangeTimeStep]);
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.timeStepDiv
-    }, /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Time step"
     }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
       active: true,
       onClick: onClickButton,
       "data-testid": "timeStepButton",
       width: 58
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("path", {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("path", {
       id: "lvnl598lea",
       d: "M12.1 5.86c.247 0 .5.089.745.267l6.008 4.316c.368.265.58.65.58 1.057 0 .408-.211.793-.581 1.058l-6.005 4.316c-.248.177-.5.267-.747.267-.466 0-.967-.36-.967-1.147v-3.016l-5.419 3.896c-.207.148-.417.234-.624.26l-.124.007c-.465 0-.966-.36-.966-1.147V7.006c0-.787.5-1.147.966-1.147.247 0 .5.09.746.268l5.421 3.894V7.006c0-.735.436-1.097.873-1.142z"
-    })), /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("text", {
+    })), /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("text", {
       "data-testid": "timeStepButtonText",
       fontFamily: "Roboto-Black, Roboto",
       fontSize: 12
@@ -13684,11 +14076,11 @@
       onChange: onChangeSlider,
       onKeyDown: onKeyDown,
       shouldAutoFocus: true
-    }), /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    }), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: timestepAutoSwitch.title
     }, /*#__PURE__*/React__namespace.createElement("span", {
       "data-testid": "timestepAutoSwitchTooltip"
-    }, /*#__PURE__*/React__namespace.createElement(core.FormControlLabel, {
+    }, /*#__PURE__*/React__namespace.createElement(material.FormControlLabel, {
       control: /*#__PURE__*/React__namespace.createElement(TimeStepSwitch, {
         checked: isTimestepAuto,
         onChange: function onChange() {
@@ -13722,7 +14114,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var OptionsPopOver = core.withStyles(function (theme) {
+  var OptionsPopOver = withStyles__default["default"](function (theme) {
     return {
       paper: {
         height: '24px',
@@ -13732,7 +14124,7 @@
         backgroundColor: theme.palette.geowebColors.background.surface
       }
     };
-  })(core.Popover);
+  })(material.Popover);
 
   var OptionsMenuButton = function OptionsMenuButton(_a) {
     var autoUpdateBtn = _a.autoUpdateBtn,
@@ -13754,13 +14146,13 @@
 
     var open = Boolean(anchorEl);
     var id = open ? 'simple-popover' : undefined;
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: "Options"
     }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
       onClick: onClickButton,
       "data-testid": "optionsMenuButton",
       active: open
-    }, /*#__PURE__*/React__namespace.createElement(icons.MoreVert, {
+    }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.MoreVert, {
       "data-testid": "moreVertIcon",
       fontSize: "small"
     })))), /*#__PURE__*/React__namespace.createElement(OptionsPopOver, {
@@ -13777,10 +14169,10 @@
         vertical: 'bottom',
         horizontal: 'left'
       }
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       spacing: 1
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: "auto"
     }, timeStepBtn || /*#__PURE__*/React__namespace.createElement(TimeStepButton, {
@@ -13788,7 +14180,7 @@
       onChangeTimeStep: function onChangeTimeStep() {
         return null;
       }
-    })), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: "auto"
     }, speedBtn || /*#__PURE__*/React__namespace.createElement(SpeedButton, {
@@ -13796,10 +14188,10 @@
       setMapAnimationDelay: function setMapAnimationDelay() {
         return null;
       }
-    })), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: "auto"
-    }, loopBtn || /*#__PURE__*/React__namespace.createElement(LoopButton, null)), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, loopBtn || /*#__PURE__*/React__namespace.createElement(LoopButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       xs: "auto"
     }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)))));
@@ -13843,14 +14235,14 @@
     };
 
     var playButtonPath = isAnimating ? pausePath : playPath;
-    return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+    return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
       title: playButtonPath.title
     }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(ToggleIconButton, {
       onClick: onTogglePlay,
       disabled: isDisabled,
       "data-testid": "playButton",
       active: isAnimating
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
       width: 24,
       height: 24,
       fill: "transparent"
@@ -13877,7 +14269,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$e = core.makeStyles({
+  var useStyles$e = makeStyles__default["default"]({
     buttonContainerBig: {
       padding: '20px 0px 0px 12px',
       width: '210px'
@@ -13896,40 +14288,40 @@
         speedBtn = _a.speedBtn,
         timeStepBtn = _a.timeStepBtn;
     var classes = useStyles$e();
-    var matches = core.useMediaQuery('(min-width:600px)');
+    var matches = material.useMediaQuery('(min-width:600px)');
     return /*#__PURE__*/React__namespace.createElement("div", {
       "data-testid": "timeSliderButtons"
-    }, matches ? /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, matches ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       spacing: 1,
       className: classes.buttonContainerBig
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
     }, timeStepBtn || /*#__PURE__*/React__namespace.createElement(TimeStepButton, {
       timeStep: 5,
       onChangeTimeStep: function onChangeTimeStep() {
         return null;
       }
-    })), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
     }, speedBtn || /*#__PURE__*/React__namespace.createElement(SpeedButton, {
       animationDelay: defaultAnimationDelayAtStart,
       setMapAnimationDelay: function setMapAnimationDelay() {
         return null;
       }
-    })), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    })), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
-    }, loopBtn || /*#__PURE__*/React__namespace.createElement(LoopButton, null)), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, loopBtn || /*#__PURE__*/React__namespace.createElement(LoopButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
-    }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, autoUpdateBtn || /*#__PURE__*/React__namespace.createElement(AutoUpdateButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
-    }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton, null))) : /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton, null))) : /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       spacing: 1,
       className: classes.buttonContainerSmall
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
-    }, optionsMenuBtn || /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, null)), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, optionsMenuBtn || /*#__PURE__*/React__namespace.createElement(OptionsMenuButton, null)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
     }, playBtn || /*#__PURE__*/React__namespace.createElement(PlayButton, null))));
   };
@@ -15007,7 +15399,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$d = core.makeStyles({
+  var useStyles$d = makeStyles__default["default"]({
     timeSliderLegend: {
       height: '50px'
     }
@@ -15087,7 +15479,7 @@
       setNewRoundedTime(x, centerTime, width, secondsPerPx, timeStep, dataStartTime, dataEndTime, onSetNewDate);
     };
 
-    var theme = core.useTheme();
+    var theme = material.useTheme();
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.timeSliderLegend,
       "data-testid": "timeSliderLegend"
@@ -15170,7 +15562,7 @@
   var scaleSliderOtherSettings = {
     LEFT_PADDING: '10%'
   };
-  var useStyles$c = core.makeStyles(function (theme) {
+  var useStyles$c = makeStyles__default["default"](function (theme) {
     return {
       Background: {
         backgroundColor: theme.palette.geowebColors.background.surface,
@@ -15191,17 +15583,16 @@
   });
 
   var thumbComponent = function thumbComponent(props) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      React__namespace.createElement("span", __assign({}, props, {
-        "data-testid": "scaleSliderSliderThumb",
-        tabIndex: 0
-      }), /*#__PURE__*/React__namespace.createElement(core.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("polygon", {
-        transform: "translate(6.5 5.5)",
-        points: "6,0 11,5 11,12 0,12 0,5"
-      })))
-    );
+    var children = props.children,
+        other = __rest(props, ["children"]);
+
+    return /*#__PURE__*/React__namespace.createElement(material.SliderThumb, __assign({}, other, {
+      "data-testid": "scaleSliderSliderThumb",
+      tabIndex: 0
+    }), children, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("polygon", {
+      transform: "translate(6.5 5.5)",
+      points: "6,0 11,5 11,12 0,12 0,5"
+    })));
   };
 
   var marks = [{
@@ -15247,7 +15638,7 @@
     return valueNew;
   };
 
-  var GeoWebScaleSlider = core.withStyles(function (theme) {
+  var GeoWebScaleSlider = withStyles__default["default"](function (theme) {
     return {
       root: {
         height: 4,
@@ -15257,9 +15648,14 @@
       thumb: {
         backgroundColor: 'rgba(0,0,0,0)',
         marginTop: 0,
+        width: 12,
+        height: 12,
         color: theme.palette.geowebColors.timeSlider.timeScalePointer.fill,
         '& svg polygon': {
           filter: theme.palette.geowebColors.timeSlider.timeScaleShadowButtonScale.filter
+        },
+        '&:before': {
+          display: 'none'
         }
       },
       valueLabel: {
@@ -15301,7 +15697,7 @@
         }
       }
     };
-  })(core.Slider);
+  })(material.Slider);
   var RAIL_GUTTER_OFFSET = 0.4;
 
   var TimeSliderScaleSlider = function TimeSliderScaleSlider(_a) {
@@ -15374,7 +15770,9 @@
       onChange: onChange,
       onKeyDown: onKeyDown,
       "aria-labelledby": "scale-slider",
-      ThumbComponent: thumbComponent,
+      components: {
+        Thumb: thumbComponent
+      },
       marks: marks,
       track: false
     })));
@@ -15582,7 +15980,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$b = core.makeStyles({
+  var useStyles$b = makeStyles__default["default"]({
     timeSliderRail: {
       '& div': {
         outline: 'none'
@@ -15837,7 +16235,7 @@
       } // eslint-disable-next-line react-hooks/exhaustive-deps
 
     }, [selectedTimeUnix]);
-    var theme = core.useTheme();
+    var theme = material.useTheme();
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: classes.timeSliderRail,
       style: {
@@ -15903,7 +16301,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$a = core.makeStyles({
+  var useStyles$a = makeStyles__default["default"]({
     container: {
       display: 'grid',
       gridTemplateColumns: 'minmax(100px, 210px) minmax(66%, 1fr)',
@@ -15950,17 +16348,17 @@
         legend = _a.legend;
     var styles = useStyles$a();
     var openTimeSlider = useTimeSlider();
-    return openTimeSlider ? /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    return openTimeSlider ? /*#__PURE__*/React__namespace.createElement(material.Grid, {
       container: true,
       className: styles.container,
       "data-testid": "timeSlider"
-    }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
-    }, " ", buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }, " ", buttons || /*#__PURE__*/React__namespace.createElement(TimeSliderButtons, null), " "), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
     }, rail || /*#__PURE__*/React__namespace.createElement(TimeSliderRail, __assign({}, defaultProps, {
       selectedTime: defaultProps.selectedTime
-    })), ' '), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    })), ' '), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true,
       className: styles.scaleSlider
     }, scaleSlider || /*#__PURE__*/React__namespace.createElement(TimeSliderScaleSlider, __assign({}, defaultProps, {
@@ -15969,7 +16367,7 @@
       onChangeTimeSliderScale: function onChangeTimeSliderScale() {
         return null;
       }
-    }))), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+    }))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
       item: true
     }, legend || /*#__PURE__*/React__namespace.createElement(TimeSliderLegend, __assign({}, defaultProps, {
       selectedTime: defaultProps.selectedTime.unix()
@@ -16790,7 +17188,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$9 = core.makeStyles({
+  var useStyles$9 = makeStyles__default["default"]({
     MapViewLayer: {
       width: '100%',
       padding: '2px',
@@ -19426,6 +19824,7 @@
   };
 
   var ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
+  var ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO = 'ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO';
 
   var ReactMapView =
   /** @class */
@@ -19468,7 +19867,7 @@
 
           layers.forEach(function (layer) {
             if (layer.enabled !== false) {
-              _this.parseWMJSLayer(layer, true, 'onlydims');
+              _this.parseWMJSLayer(layer, true);
             }
           });
         }, fetchSpeed);
@@ -19480,25 +19879,12 @@
         }
       };
 
-      _this.parseWMJSLayer = function (wmLayer, forceReload, updateStrategy, child) {
+      _this.parseWMJSLayer = function (wmLayer, forceReload, child) {
         var callback = function callback() {
-          if (updateStrategy === 'all') {
-            var _a = _this.props,
-                onMapUpdateAllDimensions = _a.onMapUpdateAllDimensions,
-                onLayerChangeStyle = _a.onLayerChangeStyle,
-                onLayerSetDimensions = _a.onLayerSetDimensions,
-                onServiceSetLayers = _a.onServiceSetLayers,
-                onLayerSetStyles = _a.onLayerSetStyles,
-                mapId = _a.mapId;
-            setServiceMetadata(wmLayer, mapId, _this.adaguc.webMapJS, _this.props, onMapUpdateAllDimensions, onLayerChangeStyle, onServiceSetLayers, onLayerSetStyles, onLayerSetDimensions);
-          }
-
-          if (updateStrategy === 'onlydims') {
-            var _b = _this.props,
-                onLayerSetDimensions = _b.onLayerSetDimensions,
-                mapId = _b.mapId;
-            setServiceMetadata(wmLayer, mapId, _this.adaguc.webMapJS, _this.props, null, null, null, null, onLayerSetDimensions);
-          }
+          var _a = _this.props,
+              onUpdateLayerInformation = _a.onUpdateLayerInformation,
+              mapId = _a.mapId;
+          setServiceMetadata(wmLayer, mapId, _this.adaguc.webMapJS, _this.props, onUpdateLayerInformation);
 
           if (child) {
             if (wmLayer.hasError) {
@@ -19511,7 +19897,7 @@
           }
         };
 
-        wmLayer.parseLayer(callback, forceReload);
+        wmLayer.parseLayer(callback, forceReload, 'ReactMapView parseWMJSLayer');
       };
 
       _this.state = {
@@ -19567,6 +19953,7 @@
       if (typeof this.adaguc.webMapJS.stopAnimating === 'function') {
         this.adaguc.webMapJS.stopAnimating();
         this.adaguc.webMapJS.destroy();
+        this.adaguc.webMapJSCreated = false;
       }
 
       this.clearRefetchTimer();
@@ -19760,8 +20147,6 @@
           this.adaguc.webMapJS.showLayerInfo = props.showLayerInfo;
         }
       }
-      /* Check children */
-
 
       var children = props.children;
 
@@ -19796,23 +20181,29 @@
             wmjsLayers_1[l].remove();
             /* Trigger update of all map dimensions */
 
-            var onMapUpdateAllDimensions = props.onMapUpdateAllDimensions,
+            var onUpdateLayerInformation = props.onUpdateLayerInformation,
                 mapId = props.mapId;
-            onMapUpdateAllDimensions && onMapUpdateAllDimensions({
-              origin: origin,
-              mapId: mapId,
-              dimensions: this_1.adaguc.webMapJS.mapdimensions.map(function (_a) {
-                var name = _a.name,
-                    units = _a.units,
-                    currentValue = _a.currentValue,
-                    synced = _a.synced;
-                return {
-                  name: name,
-                  units: units,
-                  currentValue: currentValue,
-                  synced: synced
-                };
-              })
+            onUpdateLayerInformation && onUpdateLayerInformation({
+              origin: ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO,
+              serviceLayers: null,
+              layerStyle: null,
+              layerDimensions: null,
+              mapDimensions: {
+                origin: origin,
+                mapId: mapId,
+                dimensions: this_1.adaguc.webMapJS.mapdimensions.map(function (_a) {
+                  var name = _a.name,
+                      units = _a.units,
+                      currentValue = _a.currentValue,
+                      synced = _a.synced;
+                  return {
+                    name: name,
+                    units: units,
+                    currentValue: currentValue,
+                    synced: synced
+                  };
+                })
+              }
             });
             this_1.checkNewProps(prevProps, props);
             return {
@@ -19910,7 +20301,7 @@
                 }
 
                 if (!isBaselayer) {
-                  this_3.parseWMJSLayer(newWMLayer, false, 'all', child);
+                  this_3.parseWMJSLayer(newWMLayer, false, child);
                 }
 
                 needsRedraw = true;
@@ -19918,7 +20309,7 @@
                 /* Set the name of the ADAGUC WMJSLayer */
                 if (child.props.name !== undefined && wmLayer_1.name !== child.props.name) {
                   wmLayer_1.setName(child.props.name).then(function () {
-                    _this.parseWMJSLayer(wmLayer_1, false, 'all', child);
+                    _this.parseWMJSLayer(wmLayer_1, false, child);
                   });
                   needsRedraw = true;
                 }
@@ -20176,22 +20567,7 @@
       onMapChangeDimension: function onMapChangeDimension() {
         /* nothing */
       },
-      onMapUpdateAllDimensions: function onMapUpdateAllDimensions() {
-        /* nothing */
-      },
-      onLayerChangeStyle: function onLayerChangeStyle() {
-        /* nothing */
-      },
-      onLayerChangeDimension: function onLayerChangeDimension() {
-        /* nothing */
-      },
-      onLayerSetDimensions: function onLayerSetDimensions() {
-        /* nothing */
-      },
-      onServiceSetLayers: function onServiceSetLayers() {
-        /* nothing */
-      },
-      onLayerSetStyles: function onLayerSetStyles() {
+      onUpdateLayerInformation: function onUpdateLayerInformation() {
         /* nothing */
       },
       onMapZoomEnd: function onMapZoomEnd() {
@@ -20217,7 +20593,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$8 = core.makeStyles(function () {
+  var useStyles$8 = makeStyles__default["default"](function () {
     return {
       mapTimeContainer: {
         zIndex: 10,
@@ -20255,7 +20631,7 @@
     return /*#__PURE__*/React__namespace.createElement("div", {
       "data-testid": "map-time",
       className: classes.mapTimeContainer
-    }, /*#__PURE__*/React__namespace.createElement(core.Box, null, /*#__PURE__*/React__namespace.createElement(core.Typography, {
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, null, /*#__PURE__*/React__namespace.createElement(material.Typography, {
       variant: "caption",
       className: classes.mapTimeText
     }, mapTime)));
@@ -20277,7 +20653,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$7 = core.makeStyles(function () {
+  var useStyles$7 = makeStyles__default["default"](function () {
     return {
       mapViewContainer: {
         display: 'grid',
@@ -20348,6 +20724,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
+  var ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION';
   /**
    * Connected component used to display the map and selected layers.
    * Includes options to disable the map controls and legend.
@@ -20396,29 +20773,28 @@
       return getPinLocation(store, mapId);
     });
     var dispatch = reactRedux.useDispatch();
+    var map = getWMJSMapById(mapId);
     var mapChangeDimension$1 = React__namespace.useCallback(function (mapDimensionPayload) {
-      return dispatch(mapChangeDimension(mapDimensionPayload));
-    }, [dispatch]);
+      if (mapDimensionPayload.dimension) {
+        var dimension = map.getDimension(mapDimensionPayload.dimension.name);
+
+        if (dimension && dimension.currentValue === mapDimensionPayload.dimension.currentValue) {
+          return;
+        }
+      }
+
+      dispatch(mapChangeDimension(mapDimensionPayload));
+    }, [dispatch, map]);
     var setTime$1 = React__namespace.useCallback(function (setTimePayload) {
-      return dispatch(setTime(setTimePayload));
-    }, [dispatch]);
-    var layerChangeStyle$1 = React__namespace.useCallback(function (payload) {
-      return dispatch(layerChangeStyle(payload));
-    }, [dispatch]);
-    var layerChangeDimension$1 = React__namespace.useCallback(function (payload) {
-      return dispatch(layerChangeDimension(payload));
-    }, [dispatch]);
-    var layerSetDimensions$1 = React__namespace.useCallback(function (payload) {
-      return dispatch(layerSetDimensions(payload));
-    }, [dispatch]);
-    var mapUpdateAllDimensions = React__namespace.useCallback(function (payload) {
-      return dispatch(mapUpdateAllMapDimensions(payload));
-    }, [dispatch]);
-    var serviceSetLayers$1 = React__namespace.useCallback(function (payload) {
-      return dispatch(serviceSetLayers(payload));
-    }, [dispatch]);
-    var layerSetStyles$1 = React__namespace.useCallback(function (payload) {
-      return dispatch(layerSetStyles(payload));
+      /* Check if the map not already has this value set, otherwise this component will re-render */
+      if (map.getDimension('time').currentValue === setTimePayload.value) {
+        return;
+      }
+
+      dispatch(setTime(setTimePayload));
+    }, [dispatch, map]);
+    var updateLayerInformation = React__namespace.useCallback(function (payload) {
+      dispatch(onUpdateLayerInformation(payload));
     }, [dispatch]);
     var registerMap$1 = React__namespace.useCallback(function (payload) {
       return dispatch(registerMap(payload));
@@ -20471,33 +20847,14 @@
         if (mapDimensionPayload && mapDimensionPayload.dimension && mapDimensionPayload.dimension.name && mapDimensionPayload.dimension.name === 'time') {
           setTime$1({
             sourceId: mapId,
-            origin: mapDimensionPayload.origin + "==> MapViewConnect, 184",
+            origin: mapDimensionPayload.origin + "==> " + ORIGIN_REACTMAPVIEWCONNECT_ONMAPCHANGEDIMENSION,
             value: handleMomentISOString(mapDimensionPayload.dimension.currentValue)
           });
         } else {
           mapChangeDimension$1(mapDimensionPayload);
         }
       },
-      onMapUpdateAllDimensions: function onMapUpdateAllDimensions(mapDimensionPayload) {
-        /* Always update all dimensions */
-        mapUpdateAllDimensions(mapDimensionPayload);
-        /* Additionally trigger the setTime action */
-
-        mapDimensionPayload.dimensions.forEach(function (dimension) {
-          if (dimension.name && dimension.name === 'time') {
-            setTime$1({
-              sourceId: mapId,
-              origin: 'MapViewConnect, 220',
-              value: handleMomentISOString(dimension.currentValue)
-            });
-          }
-        });
-      },
-      onLayerChangeStyle: layerChangeStyle$1,
-      onLayerChangeDimension: layerChangeDimension$1,
-      onLayerSetDimensions: layerSetDimensions$1,
-      onServiceSetLayers: serviceSetLayers$1,
-      onLayerSetStyles: layerSetStyles$1,
+      onUpdateLayerInformation: updateLayerInformation,
       onMapPinChangeLocation: mapPinChangeLocation,
       onMapZoomEnd: function onMapZoomEnd(a) {
         genericSetBbox({
@@ -20561,7 +20918,7 @@
   var defaultCanvasWidth = 150;
   var defaultCanvasHeight = 30; // TODO: remove fontFamily styles after theming is fully implemented
 
-  var useStyles$6 = core.makeStyles(function (theme) {
+  var useStyles$6 = makeStyles__default["default"](function (theme) {
     return {
       legendCanvas: {
         margin: '10px 0px 10px 0px'
@@ -20673,7 +21030,7 @@
     like a title and the WMS legendgraphic url */
 
     var wmLayer = getWMLayerById(layer.id);
-    return /*#__PURE__*/React__default["default"].createElement(core.Paper, {
+    return /*#__PURE__*/React__default["default"].createElement(material.Paper, {
       "data-testid": "legend",
       className: classes.legendComponent
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20681,10 +21038,10 @@
       style: {
         maxWidth: canvasContainerWidth
       }
-    }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+    }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
       className: classes.legendTitle,
       variant: "h3"
-    }, wmLayer && wmLayer.title)), /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
+    }, wmLayer && wmLayer.title)), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
       title: wmLayer && wmLayer.title || 'loading',
       placement: "top"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20781,7 +21138,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$5 = core.makeStyles(function () {
+  var useStyles$5 = makeStyles__default["default"](function () {
     return {
       legendList: {
         display: 'flex',
@@ -20836,7 +21193,7 @@
         key: layer.id,
         layer: layer
       });
-    })) : /*#__PURE__*/React__namespace.createElement(core.Typography, {
+    })) : /*#__PURE__*/React__namespace.createElement(material.Typography, {
       "data-testid": "NoLayers",
       variant: "body1",
       style: {
@@ -21001,7 +21358,7 @@
       "data-testid": "open-Legend",
       onClick: openLegendDialog,
       isActive: isOpen
-    }, /*#__PURE__*/React__namespace.createElement(core.SvgIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
       style: {
         width: 22,
         height: 22
@@ -21067,7 +21424,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$4 = core.makeStyles(function (theme) {
+  var useStyles$4 = makeStyles__default["default"](function (theme) {
     return {
       mapTitle: {
         position: 'absolute',
@@ -21189,7 +21546,7 @@
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: className || classes.mapContainer,
       "data-testid": "configurableConnectedMap"
-    }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+    }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
       "data-testid": "mapTitle",
       className: classes.mapTitle
     }, title || mapId), /*#__PURE__*/React__default["default"].createElement(MapControls, {
@@ -21228,7 +21585,7 @@
    * Copyright 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2020 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$3 = core.makeStyles(function (theme) {
+  var useStyles$3 = makeStyles__default["default"](function (theme) {
     return {
       box: {
         boxSizing: 'border-box',
@@ -21569,7 +21926,7 @@
    * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
    * Copyright 2021 - Finnish Meteorological Institute (FMI)
    * */
-  var useStyles$2 = core.makeStyles(function () {
+  var useStyles$2 = makeStyles__default["default"](function () {
     return {
       zoomControls: {
         position: 'absolute',
@@ -21772,7 +22129,7 @@
       var isNotCheckedElseWhere = viewStateData.groups.every(function (group) {
         return !(group.id !== groupId && group.selected.includes(source.id));
       });
-      return /*#__PURE__*/React__namespace.createElement(core.ListItem, {
+      return /*#__PURE__*/React__namespace.createElement(material.ListItem, {
         key: source.id,
         dense: true,
         button: true,
@@ -21780,7 +22137,7 @@
           return handleToggle(source.id);
         },
         className: classes.listItem
-      }, /*#__PURE__*/React__namespace.createElement(core.ListItemIcon, null, /*#__PURE__*/React__namespace.createElement(core.Checkbox, {
+      }, /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
         edge: "start",
         checked: isChecked,
         tabIndex: -1,
@@ -21790,13 +22147,13 @@
         },
         className: isNotCheckedElseWhere ? classes.checkboxIsActive : classes.isDisabled,
         color: "default"
-      })), /*#__PURE__*/React__namespace.createElement(core.Typography, {
+      })), /*#__PURE__*/React__namespace.createElement(material.Typography, {
         className: isNotCheckedElseWhere ? classes.isActive : classes.isDisabled
       }, source.name));
     }));
   };
-  var useStyles$1 = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles$1 = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       listItem: {
         width: '80%',
         borderRadius: '5px'
@@ -21836,17 +22193,17 @@
         addNewGroup = _a.addNewGroup,
         removeGroup = _a.removeGroup;
     var classes = useStyles();
-    return /*#__PURE__*/React__namespace.createElement(core.List, {
+    return /*#__PURE__*/React__namespace.createElement(material.List, {
       disablePadding: true
     }, viewStateData.groups.map(function (groupObject, index) {
-      return /*#__PURE__*/React__namespace.createElement(core.Box, {
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
         key: groupObject.id,
         className: index === 0 ? null : classes.childListItem
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: classes.syncGroupHeader
-      }, /*#__PURE__*/React__namespace.createElement(core.Typography, null, title), /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, null, title), /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: index === 0 ? 'Add new group to list' : 'Remove group from list'
-      }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         style: {
           right: '10px'
         },
@@ -21855,10 +22212,11 @@
           return addNewGroup(groupObject.id);
         } : function () {
           return removeGroup(groupObject.id);
-        }
-      }, index === 0 ? /*#__PURE__*/React__namespace.createElement(icons.Add, {
+        },
+        size: "large"
+      }, index === 0 ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.Add, {
         className: classes.iconColor
-      }) : /*#__PURE__*/React__namespace.createElement(icons.DeleteForever, {
+      }) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.DeleteForever, {
         className: classes.iconColor
       })))), /*#__PURE__*/React__namespace.createElement(SyncGroupListItem, {
         viewStateData: viewStateData,
@@ -21871,8 +22229,8 @@
       }));
     }));
   };
-  var useStyles = core.makeStyles(function (theme) {
-    return core.createStyles({
+  var useStyles = makeStyles__default["default"](function (theme) {
+    return createStyles__default["default"]({
       syncGroupHeader: {
         display: 'flex',
         flexDirection: 'row',