@opengeoweb/core 2.13.0 → 3.0.0

package/index.esm.js

@@ -7,12 +7,13 @@ import _, { isEqual, debounce, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, all, takeEvery } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { Tooltip, Paper, Typography, Grid, InputLabel, IconButton, Box, CircularProgress, List, ListSubheader, ListItem, ListItemText, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, MenuItem, FormControl, LinearProgress, InputAdornment, ListItemSecondaryAction, ListItemIcon, Checkbox, Switch, Slider, FormControlLabel, Popover, useMediaQuery, useTheme, SliderThumb } from '@mui/material';
-import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, sliderStyles, tooltipContainerStyles, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
+import { ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, ManagerButton, EnableButton, AlertBanner, ManagerDeleteButton, CustomToggleButton, useIsMounted } from '@opengeoweb/shared';
 import { Pause, Play, Cached, Add, Copy, Flag, DragHandle as DragHandle$1, Filter, Close, Search, Clear, ChevronLeft, ChevronRight, Edit, Delete, Home, Minus, Layers, Equalizer, Sort, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, TextIcon, FastForward, Options, SliderThumb as SliderThumb$1, List as List$1, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import makeStyles from '@mui/styles/makeStyles';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
 import { Sortable, ReactSortable } from 'react-sortablejs';
 import createStyles from '@mui/styles/createStyles';
+import { FixedSizeList } from 'react-window';
 import withStyles from '@mui/styles/withStyles';
 import { debounce as debounce$1 } from 'throttle-debounce';
 import cloneDeep from 'lodash.clonedeep';
@@ -971,6 +972,8 @@ var createMap = function createMap(_ref) {
       activeMapPresetId = _ref$activeMapPresetI === void 0 ? null : _ref$activeMapPresetI,
       _ref$displayMapPin = _ref.displayMapPin,
       displayMapPin = _ref$displayMapPin === void 0 ? false : _ref$displayMapPin,
+      _ref$disableMapPin = _ref.disableMapPin,
+      disableMapPin = _ref$disableMapPin === void 0 ? false : _ref$disableMapPin,
       _ref$shouldShowZoomCo = _ref.shouldShowZoomControls,
       shouldShowZoomControls = _ref$shouldShowZoomCo === void 0 ? true : _ref$shouldShowZoomCo;
   return {
@@ -998,6 +1001,7 @@ var createMap = function createMap(_ref) {
     isTimeSliderVisible: isTimeSliderVisible,
     activeMapPresetId: activeMapPresetId,
     displayMapPin: displayMapPin,
+    disableMapPin: disableMapPin,
     shouldShowZoomControls: shouldShowZoomControls
   };
 };
@@ -1662,6 +1666,17 @@ var slice$5 = createSlice({
         draft.availableBaseLayers.allIds.push(layer.id);
       });
     },
+    setAvailableBaseLayers: function setAvailableBaseLayers(draft, action) {
+      var layers = action.payload.layers;
+      draft.availableBaseLayers.byId = {};
+      draft.availableBaseLayers.allIds = []; // add new available baselayers
+
+      layers.forEach(function (layer) {
+        if (layer.layerType !== LayerType.baseLayer || !layer.mapId) return;
+        draft.availableBaseLayers.byId[layer.id] = createLayer(Object.assign({}, layer));
+        draft.availableBaseLayers.allIds.push(layer.id);
+      });
+    },
     onUpdateLayerInformation: function onUpdateLayerInformation(draft, action) {
       var _action$payload11 = action.payload,
           layerStyle = _action$payload11.layerStyle,
@@ -1945,12 +1960,13 @@ var getLayerStyles = createSelector(getLayerFromService, function (layer) {
  * @returns {array} returnType: [] - array containing services
  */
 
-var getServicesInArray = createSelector(servicesStore, function (store) {
+createSelector(servicesStore, function (store) {
   var services = store ? store.byId : {};
   var arrayOfServiceObjects = Object.keys(services).map(function (key) {
     return {
       name: services[key].name,
-      serviceUrl: services[key].serviceUrl
+      serviceUrl: services[key].serviceUrl,
+      isUserAddedService: services[key].isUserAddedService
     };
   });
   return arrayOfServiceObjects;
@@ -4150,11 +4166,11 @@ var getPinLocation = createSelector(getMapById, function (store) {
  * Example getDisableMapPin(store);
  * @param {object} store store: object - store object
  * @param {string} mapId mapId: string - Id of the map
- * @returns {boolean} returnType: boolean or undefined
+ * @returns {boolean} returnType: boolean
  */
 
 var getDisableMapPin = createSelector(getMapById, function (store) {
-  return store ? store.disableMapPin : undefined;
+  return store ? store.disableMapPin : false;
 });
 /**
  * Returns the diplay map pin boolean for the current map
@@ -4369,7 +4385,8 @@ var slice = createSlice({
           serviceId = _action$payload.serviceId,
           serviceName = _action$payload.serviceName,
           serviceUrl = _action$payload.serviceUrl,
-          keywords = _action$payload.keywords;
+          keywords = _action$payload.keywords,
+          isUserAddedService = _action$payload.isUserAddedService;
 
       if (!draft.filters.activeServices.byId[serviceId]) {
         draft.filters.activeServices.byId[serviceId] = {};
@@ -4404,6 +4421,7 @@ var slice = createSlice({
       draft.filters.activeServices.byId[serviceId].serviceName = serviceName;
       draft.filters.activeServices.byId[serviceId].serviceUrl = serviceUrl;
       draft.filters.activeServices.byId[serviceId].enabled = true;
+      draft.filters.activeServices.byId[serviceId].isUserAddedService = isUserAddedService;
       draft.filters.activeServices.byId[serviceId].keywordsPerService = keywords;
       if (!draft.filters.activeServices.allIds.includes(serviceId)) draft.filters.activeServices.allIds.push(serviceId);
     },
@@ -7307,7 +7325,7 @@ var LegendDialog = function LegendDialog(_ref) {
   }, "No layers")));
 };
 
-var IS_LEGEND_OPEN_BY_DEFAULT = true;
+var IS_LEGEND_OPEN_BY_DEFAULT = false;
 
 var LegendConnectComponent = function LegendConnectComponent(_ref) {
   var _ref$showMapId = _ref.showMapId,
@@ -7349,7 +7367,7 @@ var LegendConnectComponent = function LegendConnectComponent(_ref) {
   });
 
   var onClose = function onClose() {
-    return dispatch(uiActions.setToggleOpenDialog({
+    dispatch(uiActions.setToggleOpenDialog({
       type: legendType,
       setOpen: false,
       origin: MapActionOrigin.map,
@@ -8194,7 +8212,7 @@ var mergePresetsAndUserAddedServices = function mergePresetsAndUserAddedServices
 };
 var isService = function isService(param) {
   var serviceParam = param;
-  return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.id) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url));
+  return !!((serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.id) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.name) && (serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.url), serviceParam === null || serviceParam === void 0 ? void 0 : serviceParam.isUserAddedService);
 };
 
 var getUserAddedServices = function getUserAddedServices() {
@@ -8203,6 +8221,13 @@ var getUserAddedServices = function getUserAddedServices() {
     var parsedData = JSON.parse(storedString);
 
     if (parsedData && _typeof(parsedData) === 'object') {
+      Object.values(parsedData).forEach(function (value) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (value.hasOwnProperty('url') && value.hasOwnProperty('id')) {
+          var service = value;
+          service.isUserAddedService = true;
+        }
+      });
       return Object.entries(parsedData).reduce(function (userServices, _ref) {
         var _ref2 = _slicedToArray(_ref, 2),
             serviceUrl = _ref2[0],
@@ -8229,39 +8254,26 @@ var _marked = /*#__PURE__*/regeneratorRuntime.mark(newServiceAddedSaga),
     _marked2 = /*#__PURE__*/regeneratorRuntime.mark(layerSelectServiceRemovedSaga),
     _marked3 = /*#__PURE__*/regeneratorRuntime.mark(rootSaga);
 function newServiceAddedSaga(capturedAction) {
-  var addedService, id, serviceUrl, name, keywords, services, findServiceName;
+  var addedService, id, serviceUrl, name, isUserAddedService, keywords;
   return regeneratorRuntime.wrap(function newServiceAddedSaga$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
           addedService = capturedAction.payload;
-          id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name;
+          id = addedService.id, serviceUrl = addedService.serviceUrl, name = addedService.name, isUserAddedService = addedService.isUserAddedService;
           keywords = addedService.layers.reduce(function (keywordAccumulator, layer) {
             return keywordAccumulator.concat(layer.path, layer.keywords);
           }, []);
           _context.next = 5;
-          return select(getServicesInArray);
-
-        case 5:
-          services = _context.sent;
-
-          findServiceName = function findServiceName() {
-            var foundService = services.find(function (object) {
-              return (object === null || object === void 0 ? void 0 : object.url) === serviceUrl;
-            });
-            if (foundService) return foundService.name;
-            return name;
-          };
-
-          _context.next = 9;
           return put(layerSelectActions.addKeywordsAndActiveServices({
             serviceId: id,
-            serviceName: findServiceName(),
+            serviceName: name,
             serviceUrl: serviceUrl,
-            keywords: keywords
+            keywords: keywords,
+            isUserAddedService: isUserAddedService
           }));
 
-        case 9:
+        case 5:
         case "end":
           return _context.stop();
       }
@@ -8931,10 +8943,7 @@ var validateServiceUrl = function validateServiceUrl(url) {
 };
 
 var AddLayersPopup = function AddLayersPopup(_ref) {
-  var onClickService = _ref.onClickService,
-      onRenderTree = _ref.onRenderTree,
-      _ref$highlightedLayer = _ref.highlightedLayers,
-      highlightedLayers = _ref$highlightedLayer === void 0 ? [] : _ref$highlightedLayer,
+  var onRenderTree = _ref.onRenderTree,
       _ref$preloadedService = _ref.preloadedServices,
       preloadedServices = _ref$preloadedService === void 0 ? preloadedDefaultMapServices : _ref$preloadedService,
       _ref$open = _ref.open,
@@ -9015,6 +9024,12 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     }
   };
 
+  React.useEffect(function () {
+    if (!isEqual(preloadedServices, services)) {
+      setServices(preloadedServices);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [preloadedServices]);
   return /*#__PURE__*/React.createElement(Dialog, {
     fullWidth: true,
     maxWidth: "md",
@@ -9085,9 +9100,8 @@ var AddLayersPopup = function AddLayersPopup(_ref) {
     item: true,
     xs: 8
   }, onRenderTree ? onRenderTree(activeService) : /*#__PURE__*/React.createElement(WMSLayerTreeConnect, {
+    mapId: "",
     service: activeService,
-    onClickLayer: onClickService,
-    highlightedLayers: highlightedLayers,
     layerType: layerType
   }))))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
     onClick: handleClose,
@@ -9114,12 +9128,9 @@ var styles$2 = {
 };
 
 var AddLayersButton = function AddLayersButton(_ref) {
-  var onClickService = _ref.onClickService,
-      onRenderTree = _ref.onRenderTree,
+  var onRenderTree = _ref.onRenderTree,
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip,
-      _ref$highlightedLayer = _ref.highlightedLayers,
-      highlightedLayers = _ref$highlightedLayer === void 0 ? [] : _ref$highlightedLayer,
       _ref$preloadedService = _ref.preloadedServices,
       preloadedServices = _ref$preloadedService === void 0 ? preloadedDefaultMapServices : _ref$preloadedService,
       _ref$layerType = _ref.layerType,
@@ -9133,10 +9144,22 @@ var AddLayersButton = function AddLayersButton(_ref) {
       open = _React$useState2[0],
       setOpen = _React$useState2[1];
 
+  var _React$useState3 = React.useState(shouldFocus),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isTooltipDisabled = _React$useState4[0],
+      setTooltipDisabled = _React$useState4[1];
+
   var handleClose = function handleClose() {
     setOpen(!open);
   };
 
+  var onBlurTooltip = function onBlurTooltip(event) {
+    // enable tooltip again after user blurs
+    if (event.relatedTarget) {
+      setTooltipDisabled(false);
+    }
+  };
+
   React.useEffect(function () {
     if (shouldFocus && ref.current) {
       ref.current.focus();
@@ -9144,7 +9167,9 @@ var AddLayersButton = function AddLayersButton(_ref) {
 
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltip
+    title: tooltip,
+    disableFocusListener: isTooltipDisabled,
+    onBlur: onBlurTooltip
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleClose,
     sx: styles$2.button,
@@ -9155,9 +9180,7 @@ var AddLayersButton = function AddLayersButton(_ref) {
   }, /*#__PURE__*/React.createElement(Add, null))), /*#__PURE__*/React.createElement(AddLayersPopup, {
     open: open,
     handleClose: handleClose,
-    onClickService: onClickService,
     onRenderTree: onRenderTree,
-    highlightedLayers: highlightedLayers,
     preloadedServices: preloadedServices,
     layerType: layerType
   }));
@@ -9708,7 +9731,6 @@ var OpacitySelect = function OpacitySelect(_ref) {
       _ref$isEnabled = _ref.isEnabled,
       isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
   var classes = useStyles$n();
-  var sliderClasses = sliderStyles();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9774,8 +9796,8 @@ var OpacitySelect = function OpacitySelect(_ref) {
     onBlur: onBlur
   }, currentOpacityText)), open ? /*#__PURE__*/React.createElement("div", {
     className: classes.sliderBackground
-  }, /*#__PURE__*/React.createElement("div", {
-    className: sliderClasses.sliderHeader
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: sliderHeaderStyle
   }, "Opacity"), /*#__PURE__*/React.createElement(CustomSlider, {
     "data-testid": "opacitySlider",
     orientation: "vertical",
@@ -10796,7 +10818,11 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
     "data-testid": "layerContainerRow"
   }, /*#__PURE__*/React.createElement(ReactSortable, {
     tag: "div",
-    list: layerIds,
+    list: layerIds.map(function (layerId) {
+      return {
+        id: layerId
+      };
+    }),
     setList: onSetList,
     animation: 200,
     onSort: onSortEnd,
@@ -10944,6 +10970,15 @@ var constructListAvailableBaseLayers = function constructListAvailableBaseLayers
     }));
   }, baseLayersWithMapId);
 };
+var areAvailableBaseLayersSame = function areAvailableBaseLayersSame(availableBaseLayerList, newBaseLayerList) {
+  var availableList = availableBaseLayerList.map(function (layer) {
+    return layer.name;
+  });
+  var newList = newBaseLayerList.map(function (layer) {
+    return layer.name;
+  });
+  return isEqual(availableList, newList);
+};
 
 var BaseLayersConnect = function BaseLayersConnect(_ref) {
   var mapId = _ref.mapId,
@@ -10957,14 +10992,16 @@ var BaseLayersConnect = function BaseLayersConnect(_ref) {
   });
   React.useEffect(function () {
     // Set initial availableBaseLayers only if none set for that map yet
-    if (currentAvailableBaseLayers.length < 1) {
-      var availableBaseLayersToBeAdded = constructListAvailableBaseLayers(selectedBaseLayers, preloadedAvailableBaseLayers, mapId);
-      dispatch(layerActions.addAvailableBaseLayers({
+    var availableBaseLayersToBeAdded = constructListAvailableBaseLayers(selectedBaseLayers, preloadedAvailableBaseLayers, mapId);
+    var areBaseLayersSame = areAvailableBaseLayersSame(availableBaseLayersToBeAdded, currentAvailableBaseLayers);
+
+    if (!areBaseLayersSame) {
+      dispatch(layerActions.setAvailableBaseLayers({
         layers: availableBaseLayersToBeAdded
       }));
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [mapId]);
+  }, [mapId, preloadedAvailableBaseLayers]);
 
   var onChangeBaseLayers = function onChangeBaseLayers(newSelectedLayerId) {
     var newBaseLayer = currentAvailableBaseLayers.filter(function (layer) {
@@ -11264,23 +11301,22 @@ var ServicePopup = function ServicePopup(_ref) {
       hideBackdrop = _ref$hideBackdrop === void 0 ? false : _ref$hideBackdrop,
       isOpen = _ref.isOpen,
       closePopup = _ref.closePopup,
+      serviceId = _ref.serviceId,
       url = _ref.url,
       services = _ref.services,
       serviceSetLayers = _ref.serviceSetLayers;
 
-  var _a, _b;
-
-  var _React$useState = React.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_a = services[url]) === null || _a === void 0 ? void 0 : _a.name),
+  var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       serviceName = _React$useState2[0],
       setServiceName = _React$useState2[1];
 
-  var _React$useState3 = React.useState(servicePopupVariant === 'add' || url === undefined ? '' : url),
+  var _React$useState3 = React.useState(''),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       serviceUrl = _React$useState4[0],
       setServiceUrl = _React$useState4[1];
 
-  var _React$useState5 = React.useState(servicePopupVariant !== 'edit' || services === undefined ? '' : (_b = services[url]) === null || _b === void 0 ? void 0 : _b["abstract"]),
+  var _React$useState5 = React.useState(''),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       _abstract = _React$useState6[0],
       setAbstract = _React$useState6[1];
@@ -11315,6 +11351,19 @@ var ServicePopup = function ServicePopup(_ref) {
       serviceUrlHelperText = _React$useState18[0],
       setServiceUrlHelperText = _React$useState18[1];
 
+  React.useEffect(function () {
+    var _a;
+
+    if (servicePopupVariant === 'edit') {
+      setServiceName(((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName) || '');
+      setServiceUrl(url || '');
+    }
+
+    if (servicePopupVariant === 'save') {
+      setServiceUrl(url || '');
+    }
+  }, [serviceId, services, url, servicePopupVariant, isOpen]);
+
   var validateServiceUrl = function validateServiceUrl(url) {
     if (url === '' || url === null || typeof url === 'undefined') return false;
     var matcher = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|[0-9a-zA-Z]+[:?\d]*)\S*$/;
@@ -11401,11 +11450,10 @@ var ServicePopup = function ServicePopup(_ref) {
 
   var ServiceNameInRedux = function ServiceNameInRedux() {
     if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
-      for (var service in services) {
-        if (services && services[service].name.toLowerCase() === serviceName.toLowerCase()) return true;
-      }
-
-      return false;
+      var foundName = Object.keys(services).find(function (serviceId) {
+        return services[serviceId].serviceName.toLowerCase() === (serviceName === null || serviceName === void 0 ? void 0 : serviceName.toLowerCase());
+      });
+      return foundName !== undefined;
     }
 
     return false;
@@ -11413,11 +11461,10 @@ var ServicePopup = function ServicePopup(_ref) {
 
   var UrlInRedux = function UrlInRedux() {
     if (servicePopupVariant === 'add' || servicePopupVariant === 'save') {
-      if (services && services[serviceUrl]) {
-        return true;
-      }
-
-      return false;
+      var foundUrl = Object.keys(services).find(function (serviceId) {
+        return services[serviceId].serviceUrl === serviceUrl;
+      });
+      return foundUrl !== undefined;
     }
 
     return false;
@@ -11425,6 +11472,7 @@ var ServicePopup = function ServicePopup(_ref) {
 
 
   React.useEffect(function () {
+    if (serviceName === undefined) return;
     setServiceNameHelperText('');
 
     if (ServiceNameInRedux()) {
@@ -11440,7 +11488,7 @@ var ServicePopup = function ServicePopup(_ref) {
   React.useEffect(function () {
     setServiceUrlHelperText('');
 
-    if (serviceUrl.length > 0 && !validateServiceUrl(serviceUrl)) {
+    if (serviceUrl && serviceUrl.length > 0 && !validateServiceUrl(serviceUrl)) {
       setServiceUrlHasError(true);
       setServiceUrlHelperText('Error: Not a valid URL.');
     } else if (UrlInRedux()) {
@@ -11527,7 +11575,8 @@ var ServicePopup = function ServicePopup(_ref) {
       return setAbstract(event.target.value);
     },
     value: _abstract,
-    "data-testid": "abstractTextField"
+    "data-testid": "abstractTextField",
+    disabled: true
   })), /*#__PURE__*/React.createElement(DialogActions, {
     sx: style$1.footerContent
   }, /*#__PURE__*/React.createElement(Button, {
@@ -11583,10 +11632,11 @@ var ServicePopupConnect = function ServicePopupConnect(_ref) {
       hideBackdrop = _ref.hideBackdrop,
       isOpen = _ref.isOpen,
       closePopup = _ref.closePopup,
+      serviceId = _ref.serviceId,
       url = _ref.url;
   var dispatch = useDispatch();
   var services = useSelector(function (store) {
-    return getServices(store);
+    return getActiveServices(store);
   });
   var serviceSetLayers = React__default.useCallback(function (payload) {
     dispatch(serviceActions.serviceSetLayers(payload));
@@ -11596,9 +11646,10 @@ var ServicePopupConnect = function ServicePopupConnect(_ref) {
     hideBackdrop: hideBackdrop,
     isOpen: isOpen,
     closePopup: closePopup,
-    url: url,
+    serviceId: serviceId,
     services: services,
-    serviceSetLayers: serviceSetLayers
+    serviceSetLayers: serviceSetLayers,
+    url: url
   });
 };
 
@@ -11727,7 +11778,7 @@ var SearchFieldConnect = function SearchFieldConnect() {
   });
   return /*#__PURE__*/React.createElement(SearchField, {
     setSearchFilter: function setSearchFilter(filterText) {
-      return dispatch(layerSelectActions.setSearchFilter({
+      dispatch(layerSelectActions.setSearchFilter({
         filterText: filterText
       }));
     },
@@ -11943,16 +11994,29 @@ var LayerList = function LayerList(_ref) {
       mapLayers = _ref.mapLayers,
       keywordIds = _ref.keywordIds,
       allKeywordsActive = _ref.allKeywordsActive;
+  var layerSelectFilterHeight = 199;
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       numberOfLayers = _React$useState2[0],
       setNumberOfLayers = _React$useState2[1];
 
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      layersFilteredFromService = _React$useState4[0],
+      setLayersFilteredFromService = _React$useState4[1];
+
   React.useEffect(function () {
     setNumberOfLayers(serviceIds.reduce(function (totalNumberOfLayers, serviceId) {
       return totalNumberOfLayers + filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).length;
     }, 0));
+    setLayersFilteredFromService(serviceIds.reduce(function (layerList, serviceId) {
+      return layerList.concat(filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer) {
+        return Object.assign(Object.assign({}, layer), {
+          serviceId: serviceId
+        });
+      }));
+    }, []));
   }, [serviceIds, keywordIds, services, searchString, allKeywordsActive]);
   return /*#__PURE__*/React.createElement(Box, {
     "data-testid": "layerList"
@@ -11961,25 +12025,26 @@ var LayerList = function LayerList(_ref) {
       marginBottom: '4px',
       fontSize: '12px'
     }
-  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      height: layerSelectHeight - 199,
-      overflow: 'auto'
-    }
-  }, serviceIds.map(function (serviceId) {
-    return filterLayersFromService(serviceId, services, keywordIds, allKeywordsActive, searchString).map(function (layer, layerIndex) {
-      return /*#__PURE__*/React.createElement(LayerListRow, {
-        key: layer.name,
-        layer: layer,
-        layerIndex: layerIndex,
-        service: services[serviceId],
-        serviceUrl: services[serviceId].serviceUrl,
-        addLayer: addLayer,
-        deleteLayer: deleteLayer,
-        mapLayers: mapLayers
-      });
-    });
-  })));
+  }, numberOfLayers, " results"), /*#__PURE__*/React.createElement(FixedSizeList, {
+    height: layerSelectHeight - layerSelectFilterHeight,
+    itemCount: numberOfLayers,
+    itemSize: 68
+  }, function (_ref2) {
+    var index = _ref2.index,
+        style = _ref2.style;
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
+      key: layersFilteredFromService[index].name
+    }, /*#__PURE__*/React.createElement(LayerListRow, {
+      layer: layersFilteredFromService[index],
+      layerIndex: index,
+      service: services[layersFilteredFromService[index].serviceId],
+      serviceUrl: services[layersFilteredFromService[index].serviceId].serviceUrl,
+      addLayer: addLayer,
+      deleteLayer: deleteLayer,
+      mapLayers: mapLayers
+    }));
+  }));
 };
 
 /* *
@@ -12426,28 +12491,32 @@ var styles = {
 
 var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
   var services = _ref.services,
-      mapStoreRemoveService = _ref.mapStoreRemoveService,
-      _ref$layers = _ref.layers,
-      layers = _ref$layers === void 0 ? [] : _ref$layers;
+      mapStoreRemoveService = _ref.mapStoreRemoveService;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      addServiceisOpen = _React$useState2[0],
+      addServiceIsOpen = _React$useState2[0],
       setAddServiceIsOpen = _React$useState2[1];
 
+  var _React$useState3 = React.useState({
+    isOpen: false,
+    serviceId: '',
+    serviceUrl: ''
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      editServiceIsOpen = _React$useState4[0],
+      setEditServiceIsOpen = _React$useState4[1];
+
   var openAddService = function openAddService() {
     setAddServiceIsOpen(true);
   };
 
   var closePopup = function closePopup() {
     setAddServiceIsOpen(false);
-  };
-
-  var isDisabled = function isDisabled(service) {
-    return layers.some(function (layer) {
-      return layer.service && layer.service.includes(service);
-    }) || preloadedDefaultMapServices.some(function (defaultMapService) {
-      return defaultMapService.url && defaultMapService.url.includes(service);
+    setEditServiceIsOpen({
+      isOpen: false,
+      serviceId: '',
+      serviceUrl: ''
     });
   };
 
@@ -12476,16 +12545,25 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
         marginRight: '-10px'
       }
     }, /*#__PURE__*/React.createElement(Tooltip, {
-      title: "Edit Service"
+      title: "Edit Service",
+      disableHoverListener: !services[serviceId].isUserAddedService
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
-      disabled: isDisabled(services[serviceId].serviceUrl),
+      disabled: !services[serviceId].isUserAddedService,
       "data-testid": "openEditServiceButton",
-      size: "large"
+      size: "large",
+      onClick: function onClick() {
+        setEditServiceIsOpen({
+          isOpen: true,
+          serviceId: serviceId,
+          serviceUrl: services[serviceId].serviceUrl
+        });
+      }
     }, /*#__PURE__*/React.createElement(Edit, null)))), /*#__PURE__*/React.createElement(Tooltip, {
-      title: "Delete Service"
+      title: "Delete Service",
+      disableHoverListener: !services[serviceId].isUserAddedService
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
       size: "large",
-      disabled: isDisabled(services[serviceId].serviceUrl),
+      disabled: !services[serviceId].isUserAddedService,
       onClick: function onClick() {
         return mapStoreRemoveService(serviceId, services[serviceId].serviceUrl);
       },
@@ -12499,10 +12577,16 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
     sx: styles.button,
     variant: "tertiary",
     startIcon: /*#__PURE__*/React.createElement(Add, null)
-  }, "Add a new service"))), addServiceisOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
+  }, "Add a new service"))), addServiceIsOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
     servicePopupVariant: "add",
-    isOpen: addServiceisOpen,
+    isOpen: addServiceIsOpen,
     closePopup: closePopup
+  }), editServiceIsOpen && /*#__PURE__*/React.createElement(ServicePopupConnect, {
+    servicePopupVariant: "edit",
+    isOpen: editServiceIsOpen.isOpen,
+    closePopup: closePopup,
+    serviceId: editServiceIsOpen.serviceId,
+    url: editServiceIsOpen.serviceUrl
   }));
 };
 
@@ -12525,9 +12609,6 @@ var ServiceOptionsDialog = function ServiceOptionsDialog(_ref) {
 
 var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect() {
   var dispatch = useDispatch();
-  var allLayers = useSelector(function (store) {
-    return getAllLayers(store);
-  });
   var mapStoreRemoveService = React.useCallback(function (serviceId, serviceUrl) {
     dispatch(serviceActions.mapStoreRemoveService({
       id: serviceId,
@@ -12539,7 +12620,6 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect() {
   });
   return /*#__PURE__*/React.createElement(ServiceOptionsDialog, {
     services: services,
-    layers: allLayers,
     mapStoreRemoveService: mapStoreRemoveService
   });
 };
@@ -12801,40 +12881,6 @@ var KeywordFilterResultsListItemConnect = function KeywordFilterResultsListItemC
   });
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var CustomSwitch = withStyles(function (theme) {
-  return {
-    switchBase: {
-      '&$checked': {
-        color: theme.palette.geowebColors.customSlider.thumb
-      },
-      '&$checked + $track': {
-        backgroundColor: theme.palette.geowebColors.buttons.primary["default"].fill
-      }
-    },
-    checked: {},
-    track: {
-      backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-      opacity: '1 !important'
-    }
-  };
-})(Switch);
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -12871,7 +12917,7 @@ var KeywordFilterSelectAllSwitchConnect = function KeywordFilterSelectAllSwitchC
       keywords: keywords
     }));
   }, [allKeywordIds, allKeywordsActive, checkedKeywordIds, dispatch]);
-  return /*#__PURE__*/React.createElement(CustomSwitch, {
+  return /*#__PURE__*/React.createElement(Switch, {
     checked: allKeywordsActive,
     onChange: toggleKeywords,
     "data-testid": "customSwitch"
@@ -13161,8 +13207,13 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var serviceSetLayers = React.useCallback(function (payload) {
-    return dispatch(serviceActions.serviceSetLayers(payload));
+    dispatch(serviceActions.serviceSetLayers(payload));
   }, [dispatch]);
+
+  var checkIfUserAddedService = function checkIfUserAddedService(service) {
+    return !!service.isUserAddedService;
+  };
+
   React.useEffect(function () {
     if (isOpenInStore && preloadedServices && preloadedServices.length > 0) {
       mergePresetsAndUserAddedServices(preloadedServices, getUserAddedServices()).forEach(function (service) {
@@ -13174,7 +13225,7 @@ var LayerSelectConnect = function LayerSelectConnect(_ref) {
               name: service.name,
               serviceUrl: service.url,
               layers: layers,
-              isUserAddedService: false
+              isUserAddedService: checkIfUserAddedService(service)
             });
           }
         })["catch"](function () {
@@ -14226,7 +14277,6 @@ var SpeedButton = function SpeedButton(_ref) {
   var animationDelay = _ref.animationDelay,
       setMapAnimationDelay = _ref.setMapAnimationDelay;
   var classes = useStyles$c();
-  var sliderClasses = sliderStyles();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14291,8 +14341,8 @@ var SpeedButton = function SpeedButton(_ref) {
     text: text
   })))), open ? /*#__PURE__*/React.createElement("div", {
     className: classes.sliderBackground
-  }, /*#__PURE__*/React.createElement("div", {
-    className: sliderClasses.sliderHeader
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: sliderHeaderStyle
   }, "Speed"), /*#__PURE__*/React.createElement(CustomSlider, {
     "data-testid": "speedSlider",
     orientation: "vertical",
@@ -14453,31 +14503,6 @@ var useStyles$b = makeStyles(function (theme) {
     disabled: {}
   };
 });
-var TimeStepSwitch = withStyles(function (theme) {
-  return {
-    root: {
-      marginLeft: '18px'
-    },
-    thumb: {
-      width: 20,
-      height: 20,
-      margin: '0 0 0 0'
-    },
-    switchBase: {
-      '&$checked': {
-        color: theme.palette.geowebColors.customSlider.thumb
-      },
-      '&$checked + $track': {
-        backgroundColor: theme.palette.geowebColors.customSlider.switchTrack
-      }
-    },
-    checked: {},
-    track: {
-      backgroundColor: theme.palette.geowebColors.customSlider.switchTrackDisabled,
-      opacity: '1 !important'
-    }
-  };
-})(Switch);
 
 var TimeStepButton = function TimeStepButton(_ref) {
   var timeStep = _ref.timeStep,
@@ -14492,7 +14517,6 @@ var TimeStepButton = function TimeStepButton(_ref) {
     return null;
   } : _ref$onToggleTimestep;
   var classes = useStyles$b();
-  var sliderClasses = sliderStyles();
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14561,8 +14585,8 @@ var TimeStepButton = function TimeStepButton(_ref) {
     "data-testid": "timeStepButtonText"
   })))), open ? /*#__PURE__*/React.createElement("div", {
     className: classes.sliderBackground
-  }, /*#__PURE__*/React.createElement("div", {
-    className: sliderClasses.sliderHeader
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: sliderHeaderStyle
   }, "Time step"), /*#__PURE__*/React.createElement(CustomSlider, {
     "data-testid": "timeStepButtonSlider",
     orientation: "vertical",
@@ -14580,14 +14604,17 @@ var TimeStepButton = function TimeStepButton(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     "data-testid": "timestepAutoSwitchTooltip"
   }, /*#__PURE__*/React.createElement(FormControlLabel, {
-    control: /*#__PURE__*/React.createElement(TimeStepSwitch, {
+    control: /*#__PURE__*/React.createElement(Switch, {
       checked: isTimestepAuto,
       onChange: function onChange() {
         return onToggleTimestepAuto();
       },
       disabled: disabled,
       id: "timestepAutoSwitch",
-      disableRipple: true
+      disableRipple: true,
+      sx: {
+        marginLeft: '18px'
+      }
     }),
     label: "Auto",
     labelPlacement: "end",
@@ -20410,8 +20437,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
 
 
       if (!prevProps || prevProps.disableMapPin !== props.disableMapPin) {
-        if (!(props.disableMapPin === undefined)) {
-          this.adaguc.webMapJS.getMapPin().toggleDisableMapPin();
+        if (props.disableMapPin === true) {
+          this.adaguc.webMapJS.getMapPin().setMapPinDisabled();
+        } else if (props.disableMapPin === false) {
+          this.adaguc.webMapJS.getMapPin().setMapPinEnabled();
         }
       }
       /* Change the animation delay */
@@ -20756,7 +20785,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         _this4.onUpdateBBoxListener(newBbox);
       }, true);
       this.adaguc.webMapJS.addListener('onsetmappin', function (mapPinLatLonCoordinate) {
-        if (onMapPinChangeLocation) {
+        // only change location when mapPin is visible and enabled
+        if (onMapPinChangeLocation && // eslint-disable-next-line react/destructuring-assignment
+        _this4.props.displayMapPin && // eslint-disable-next-line react/destructuring-assignment
+        !_this4.props.disableMapPin) {
           onMapPinChangeLocation({
             mapPinLocation: {
               lat: mapPinLatLonCoordinate.lat,
@@ -20871,6 +20903,7 @@ ReactMapView.defaultProps = {
   },
   shouldAutoFetch: true,
   displayMapPin: false,
+  disableMapPin: false,
   onMount: function onMount() {
     return null;
   },
@@ -21116,28 +21149,28 @@ var MapViewConnect = function MapViewConnect(_a) {
     dispatch(layerActions.onUpdateLayerInformation(payload));
   }, [dispatch]);
   var registerMap = React.useCallback(function (payload) {
-    return dispatch(mapActions$1.registerMap(payload));
+    dispatch(mapActions$1.registerMap(payload));
   }, [dispatch]);
   var unregisterMap = React.useCallback(function (payload) {
-    return dispatch(mapActions$1.unregisterMap(payload));
+    dispatch(mapActions$1.unregisterMap(payload));
   }, [dispatch]);
   var genericSetBbox = React.useCallback(function (payload) {
-    return dispatch(genericActions.setBbox(payload));
+    dispatch(genericActions.setBbox(payload));
   }, [dispatch]);
   var syncGroupAddSource = React.useCallback(function (payload) {
-    return dispatch(genericActions.syncGroupAddSource(payload));
+    dispatch(genericActions.syncGroupAddSource(payload));
   }, [dispatch]);
   var syncGroupRemoveSource = React.useCallback(function (payload) {
-    return dispatch(genericActions.syncGroupRemoveSource(payload));
+    dispatch(genericActions.syncGroupRemoveSource(payload));
   }, [dispatch]);
   var layerError = React.useCallback(function (payload) {
-    return dispatch(layerActions.layerError(payload));
+    dispatch(layerActions.layerError(payload));
   }, [dispatch]);
   var mapPinChangeLocation = React.useCallback(function (payload) {
-    return dispatch(mapActions$1.setMapPinLocation(payload));
+    dispatch(mapActions$1.setMapPinLocation(payload));
   }, [dispatch]);
   var setSelectedFeature = React.useCallback(function (payload) {
-    return dispatch(mapActions$1.setSelectedFeature(payload));
+    dispatch(mapActions$1.setSelectedFeature(payload));
   }, [dispatch]);
   useKeyboardZoomAndPan(mapId);
   return /*#__PURE__*/React.createElement("div", {
@@ -21395,7 +21428,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
       displayDimensionSelectButtonInMap = _a$displayDimensionSe === void 0 ? true : _a$displayDimensionSe,
       _a$multiLegend = _a.multiLegend,
       multiLegend = _a$multiLegend === void 0 ? true : _a$multiLegend,
-      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend"]);
+      shouldShowLayerManager = _a.shouldShowLayerManager,
+      props = __rest(_a, ["id", "title", "layers", "shouldAutoUpdate", "shouldAnimate", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager"]);
 
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || generateMapId()).current;
@@ -21424,7 +21458,17 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     dispatch(mapActions$1.setMapPreset({
       mapId: mapId,
       initialProps: initialProps
-    })); // eslint-disable-next-line react-hooks/exhaustive-deps
+    }));
+
+    if (shouldShowLayerManager !== undefined) {
+      dispatch(uiActions.setActiveMapIdForDialog({
+        type: 'layerManager',
+        mapId: mapId,
+        setOpen: shouldShowLayerManager,
+        source: 'app'
+      }));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
   return /*#__PURE__*/React__default.createElement(Box, {
     sx: {
@@ -21514,7 +21558,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
   var classes = useStyles$2();
   var dispatch = useDispatch();
   var syncGroupAddTarget = React__default.useCallback(function (payload) {
-    return dispatch(genericActions.syncGroupAddTarget(payload));
+    dispatch(genericActions.syncGroupAddTarget(payload));
   }, [dispatch]);
   React__default.useEffect(function () {
     maps.forEach(function (map) {
@@ -22157,16 +22201,16 @@ var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
 
   var viewState = useSelector(syncGroupGetViewState);
   var syncGroupAddGroup = React.useCallback(function (payload) {
-    return dispatch(actions.syncGroupAddGroup(payload));
+    dispatch(actions.syncGroupAddGroup(payload));
   }, [dispatch]);
   var syncGroupRemoveGroup = React.useCallback(function (payload) {
-    return dispatch(actions.syncGroupRemoveGroup(payload));
+    dispatch(actions.syncGroupRemoveGroup(payload));
   }, [dispatch]);
   var syncGroupAddTarget = React.useCallback(function (payload) {
-    return dispatch(actions.syncGroupAddTarget(payload));
+    dispatch(actions.syncGroupAddTarget(payload));
   }, [dispatch]);
   var syncGroupRemoveTarget = React.useCallback(function (payload) {
-    return dispatch(actions.syncGroupRemoveTarget(payload));
+    dispatch(actions.syncGroupRemoveTarget(payload));
   }, [dispatch]);
   var isOpenInStore = useSelector(function (store) {
     return getisDialogOpen(store, 'syncGroups');
@@ -22442,21 +22486,17 @@ var MapWarningProperties = function MapWarningProperties(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement("h1", {
     "data-testid": "map-warning-properties-title"
-  }, selectedFeatureProperties.country), selectedFeatureProperties.details[0].event && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "Event: ", selectedFeatureProperties.details[0].event), selectedFeatureProperties.details[0].sent && /*#__PURE__*/React__default.createElement("pre", {
-    "data-testid": "map-warning-properties-row"
-  }, "Sent:", ' ', moment.utc(selectedFeatureProperties.details[0].sent).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].expires && /*#__PURE__*/React__default.createElement("pre", {
+  }, selectedFeatureProperties.areaDesc), selectedFeatureProperties.areaDesc && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.details[0].expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.details[0].web && /*#__PURE__*/React__default.createElement("pre", {
+  }, "event: ", selectedFeatureProperties.languages[2].event), selectedFeatureProperties.onset && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Web: ", selectedFeatureProperties.details[0].web), selectedFeatureProperties.details[0].sender && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Sent:", ' ', moment.utc(selectedFeatureProperties.onset).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.expires && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Sender: ", selectedFeatureProperties.details[0].sender), selectedFeatureProperties.details[0].identifier && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Expires:", ' ', moment.utc(selectedFeatureProperties.expires).format('DD MMM YYYY, HH:mm'), ' ', "UTC"), selectedFeatureProperties.languages[2].senderName && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "Identifier: ", selectedFeatureProperties.details[0].identifier), selectedFeatureProperties.details[0].area && /*#__PURE__*/React__default.createElement("pre", {
+  }, "Sender: ", selectedFeatureProperties.languages[2].senderName), selectedFeatureProperties.identifier && /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, "area: ", selectedFeatureProperties.details[0].area));
+  }, "Identifier: ", selectedFeatureProperties.identifier));
 };
 
 /* *