@opengeoweb/core 4.13.0 → 4.14.1

package/index.esm.js

@@ -6,7 +6,7 @@ import React__default, { Component, useRef, useState, useEffect, useCallback } f
 import _, { debounce, isEqual, escapeRegExp, groupBy, throttle, range } from 'lodash';
 import { takeLatest, put, select, call, takeEvery, all, delay } from 'redux-saga/effects';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
-import { CustomTooltip, ToolButton, ToolContainerDraggable, IS_JEST, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, EnableButton, ManagerDeleteButton, AlertBanner, ManagerButton, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
+import { CustomTooltip, ToolButton, ToolContainerDraggable, TooltipSelect, AlertIcon, useControlledTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomAccordion, EnableButton, ManagerDeleteButton, AlertBanner, ManagerButton, calculateDialogSizeAndPosition, useIsMounted, CustomToggleButton, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
 import { Pause, Play, CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, Both, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Visibility, Delete, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateActive, AutoUpdateInActive, Speed, FastForward, Clock, Now, Animation, Options, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { Paper, Box, Typography, IconButton, Grid, MenuItem, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, List, ListItem, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, LinearProgress, InputAdornment, Backdrop, ListItemSecondaryAction, Checkbox, Switch, styled, Slider, Menu, useTheme, Snackbar } from '@mui/material';
 import { legendImageStore, WMImageEventType, getLegendGraphicURLForLayer, WMGetServiceFromStore, LayerType as LayerType$1, clearImageCache, getMapImageStore, WMBBOX, debug, DebugType, WMJSMap, WMLayer } from '@opengeoweb/webmap';
@@ -5417,6 +5417,9 @@ var getTargetGroups = function getTargetGroups(state, payload, actionType) {
 var syncGroupGetViewState = createSelector(syncGroupStore, function (store) {
   return store.viewState;
 });
+var getSyncedMapIdsForTimeslider = createSelector(syncGroupStore, function (store) {
+  return store.viewState.timeslider.groups[0].selected;
+}, selectorMemoizationOptions);
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8210,7 +8213,7 @@ function updateAnimation(mapId, maxValue) {
   }, _marked4$1);
 }
 function setLayerDimensionsSaga(_ref4) {
-  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, shouldEndTimeOverride, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, isTimestepAuto$1, newTimeStep;
+  var payload, layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, shouldEndTimeOverride, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, isTimestepAuto$1, newTimeStep, syncedMapIds;
   return regeneratorRuntime.wrap(function setLayerDimensionsSaga$(_context5) {
     while (1) {
       switch (_context5.prev = _context5.next) {
@@ -8305,7 +8308,7 @@ function setLayerDimensionsSaga(_ref4) {
         case 41:
           if (!(isActiveLayer && // only update the active layer
           shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue && !shouldEndTimeOverride)) {
-            _context5.next = 49;
+            _context5.next = 55;
             break;
           }
 
@@ -8326,40 +8329,61 @@ function setLayerDimensionsSaga(_ref4) {
 
         case 45:
           _context5.next = 47;
-          return call(updateAnimation, mapId, newTimeDimension.maxValue);
+          return select(getSyncedMapIdsForTimeslider);
 
         case 47:
-          _context5.next = 52;
+          syncedMapIds = _context5.sent;
+
+          if (!syncedMapIds) {
+            _context5.next = 51;
+            break;
+          }
+
+          _context5.next = 51;
+          return all(syncedMapIds.map(function (syncedMapId) {
+            return put(setTime({
+              origin: 'mapStore saga',
+              sourceId: syncedMapId,
+              value: newTimeDimension.maxValue
+            }));
+          }));
+
+        case 51:
+          _context5.next = 53;
+          return call(updateAnimation, mapId, newTimeDimension.maxValue);
+
+        case 53:
+          _context5.next = 58;
           break;
 
-        case 49:
+        case 55:
           if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue && !shouldEndTimeOverride)) {
-            _context5.next = 52;
+            _context5.next = 58;
             break;
           }
 
-          _context5.next = 52;
+          _context5.next = 58;
           return call(updateAnimation, mapId, newTimeDimension.maxValue);
 
-        case 52:
-          _context5.next = 57;
+        case 58:
+          _context5.next = 63;
           break;
 
-        case 54:
-          _context5.prev = 54;
+        case 60:
+          _context5.prev = 60;
           _context5.t0 = _context5["catch"](1);
           // eslint-disable-next-line no-console
           console.warn(_context5.t0);
 
-        case 57:
+        case 63:
         case "end":
           return _context5.stop();
       }
     }
-  }, _marked5, null, [[1, 54]]);
+  }, _marked5, null, [[1, 60]]);
 }
 function toggleAutoUpdateSaga(_ref5) {
-  var payload, shouldAutoUpdate, mapId, layerId, timeDimension;
+  var payload, shouldAutoUpdate, mapId, layerId, timeDimension, syncedMapIds, payloads;
   return regeneratorRuntime.wrap(function toggleAutoUpdateSaga$(_context6) {
     while (1) {
       switch (_context6.prev = _context6.next) {
@@ -8369,7 +8393,7 @@ function toggleAutoUpdateSaga(_ref5) {
           shouldAutoUpdate = payload.shouldAutoUpdate, mapId = payload.mapId;
 
           if (!shouldAutoUpdate) {
-            _context6.next = 15;
+            _context6.next = 25;
             break;
           }
 
@@ -8385,7 +8409,7 @@ function toggleAutoUpdateSaga(_ref5) {
           timeDimension = _context6.sent;
 
           if (!(timeDimension && timeDimension.maxValue)) {
-            _context6.next = 15;
+            _context6.next = 25;
             break;
           }
 
@@ -8401,24 +8425,68 @@ function toggleAutoUpdateSaga(_ref5) {
 
         case 13:
           _context6.next = 15;
-          return call(updateAnimation, mapId, timeDimension.maxValue);
+          return select(getSyncedMapIdsForTimeslider);
 
         case 15:
-          _context6.next = 20;
+          syncedMapIds = _context6.sent;
+
+          if (!(syncedMapIds.length > 0)) {
+            _context6.next = 23;
+            break;
+          }
+
+          _context6.next = 19;
+          return all(syncedMapIds.map(function (syncedMapId) {
+            return put(setTime({
+              origin: 'mapStore saga',
+              sourceId: syncedMapId,
+              value: timeDimension.maxValue
+            }));
+          }));
+
+        case 19:
+          // When timesliders are synced by syncgrous autoupdate is toggled on, toggle autoupdate off for other timesliders
+          payloads = syncedMapIds.reduce(function (syncedMapIdList, syncedMapId) {
+            if (syncedMapId !== mapId) {
+              return syncedMapIdList.concat({
+                mapId: syncedMapId,
+                shouldAutoUpdate: false
+              });
+            }
+
+            return syncedMapIdList;
+          }, []);
+
+          if (!(payloads.length > 0)) {
+            _context6.next = 23;
+            break;
+          }
+
+          _context6.next = 23;
+          return all(payloads.map(function (payload) {
+            return put(mapActions$1.toggleAutoUpdate(payload));
+          }));
+
+        case 23:
+          _context6.next = 25;
+          return call(updateAnimation, mapId, timeDimension.maxValue);
+
+        case 25:
+          _context6.next = 30;
           break;
 
-        case 17:
-          _context6.prev = 17;
+        case 27:
+          _context6.prev = 27;
           _context6.t0 = _context6["catch"](1);
           // eslint-disable-next-line no-console
           console.warn(_context6.t0);
 
-        case 20:
+        case 30:
         case "end":
           return _context6.stop();
       }
     }
-  }, _marked6, null, [[1, 17]]);
+  }, _marked6, null, [[1, 27]]);
 }
 function handleBaseLayersSaga(mapId, baseLayers) {
   var baseLayer, currentAvailableBaseLayers, activeAvailableBaseLayer, activeBaseLayerId, baseLayersWithActiveId;
@@ -9434,9 +9502,6 @@ var HeaderOptions = function HeaderOptions(_ref) {
     onClick: function onClick() {
       return onChangeSize(sizeSmall);
     },
-    onTouchEnd: function onTouchEnd() {
-      return onChangeSize(sizeSmall);
-    },
     sx: iconStyle,
     className: "collapseSmall-btn"
   }, /*#__PURE__*/React.createElement(CollapseSmall, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
@@ -9447,9 +9512,6 @@ var HeaderOptions = function HeaderOptions(_ref) {
     onClick: function onClick() {
       return onChangeSize(sizeMedium);
     },
-    onTouchEnd: function onTouchEnd() {
-      return onChangeSize(sizeMedium);
-    },
     sx: iconStyle,
     className: "collapseMedium-btn"
   }, /*#__PURE__*/React.createElement(CollapseMedium, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
@@ -9460,9 +9522,6 @@ var HeaderOptions = function HeaderOptions(_ref) {
     onClick: function onClick() {
       return onChangeSize(sizeLarge);
     },
-    onTouchEnd: function onTouchEnd() {
-      return onChangeSize(sizeLarge);
-    },
     sx: iconStyle,
     className: "collapseLarge-btn"
   }, /*#__PURE__*/React.createElement(CollapseLarge, null))), /*#__PURE__*/React.createElement(CustomTooltip, {
@@ -9474,9 +9533,6 @@ var HeaderOptions = function HeaderOptions(_ref) {
     sx: iconStyle,
     onClick: function onClick() {
       return onClickDockButton();
-    },
-    onTouchEnd: function onTouchEnd() {
-      return onClickDockButton();
     }
   }, isDockedLayerManager ? /*#__PURE__*/React.createElement(CollapseWindow, {
     "data-testid": "dockedLayerManager-collapse"
@@ -9512,7 +9568,7 @@ var columnClasses = {
   column6: 'column-6',
   column7: 'column-7'
 };
-var layerManagerStyle = Object.assign({
+var layerManagerStyle = {
   '.layerManagerContainer': {
     containerType: 'inline-size'
   },
@@ -9560,8 +9616,7 @@ var layerManagerStyle = Object.assign({
   },
   '.collapseLarge-btn': {
     display: 'none'
-  }
-}, !IS_JEST && {
+  },
   '@container (max-width: 320px)': {
     '.layermanager': {
       '.column-1': {
@@ -9660,7 +9715,7 @@ var layerManagerStyle = Object.assign({
       }
     }
   }
-});
+};
 var returnCorrectSize = function returnCorrectSize(sizeResult) {
   if (sizeResult === 'sizeSmall') return sizeSmall;
   if (sizeResult === 'sizeMedium') return sizeMedium;
@@ -13196,7 +13251,8 @@ var LayerAddRemoveButton = function LayerAddRemoveButton(_ref) {
     fullWidth: true,
     sx: {
       fontSize: '12px'
-    }
+    },
+    className: "layerAddRemoveButton"
   }, !foundLayer ? 'Add' : 'Remove');
 };
 
@@ -13248,6 +13304,9 @@ var LayerInfoButtonConnect = function LayerInfoButtonConnect(_ref) {
         serviceName: serviceName
       })
     }));
+    dispatch(uiActions.orderDialog({
+      type: DialogTypes.LayerInfo
+    }));
   }, [dispatch, layer, serviceName]);
 
   var onClick = function onClick() {
@@ -13270,7 +13329,8 @@ var LayerInfoButtonConnect = function LayerInfoButtonConnect(_ref) {
     active: isActive && isOpenInStore,
     onClick: onClick,
     id: "layerInfoButton",
-    "aria-label": "layer info"
+    "aria-label": "layer info",
+    className: "layerInfoButton"
   }, /*#__PURE__*/React__default.createElement(Info, null));
 };
 
@@ -14802,7 +14862,7 @@ var LayerSelect = function LayerSelect(_ref) {
       showTitle = _ref.showTitle,
       isOpen = _ref.isOpen,
       _ref$onMouseDown = _ref.onMouseDown,
-      onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+      _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
       _ref$order = _ref.order,
       order = _ref$order === void 0 ? 0 : _ref$order,
       _ref$source = _ref.source,
@@ -14812,6 +14872,7 @@ var LayerSelect = function LayerSelect(_ref) {
     width: 750,
     height: 500
   } : _ref$startSize;
+
   var initialServiceListHeight = 37;
 
   var _React$useState = React.useState(startSize.height),
@@ -14867,7 +14928,18 @@ var LayerSelect = function LayerSelect(_ref) {
     headerSize: "small",
     bounds: bounds,
     "data-testid": "layerSelectWindow",
-    onMouseDown: onMouseDown,
+    onMouseDown: function onMouseDown(event) {
+      var target = event.target;
+      var isButtonInScrollableList = target.closest('.layerInfoButton') || target.closest('.layerAddRemoveButton'); // don't propagate when clicking on layerInfoButton or addRemoveButton
+
+      if (isButtonInScrollableList) {
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+
+      _onMouseDown(event);
+    },
     order: order,
     source: source
   }, /*#__PURE__*/React.createElement(Box, {
@@ -16121,7 +16193,7 @@ var SmallFontSlider = styled(Slider)(function () {
 
 var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
   var marks = _ref.marks,
-      layerName = _ref.layerName,
+      layerTitle = _ref.layerTitle,
       _ref$reverse = _ref.reverse,
       reverse = _ref$reverse === void 0 ? false : _ref$reverse,
       _ref$isDisabled = _ref.isDisabled,
@@ -16191,7 +16263,7 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
       if (!managedValue) setCurrentIndex(val);
     }
   }))), /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: layerName
+    title: layerTitle
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "body2",
     sx: {
@@ -16200,7 +16272,7 @@ var DimensionSelectSlider = function DimensionSelectSlider(_ref) {
       overflow: 'hidden',
       textOverflow: 'ellipsis'
     }
-  }, layerName)));
+  }, layerTitle)));
 };
 
 /* *
@@ -16300,7 +16372,7 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
     return null;
   }
 
-  var layerName = wmLayer.getLayerName();
+  var layerTitle = wmLayer.title;
   var marks = marksByDimension(wmsDimension);
   var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
   var tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
@@ -16328,7 +16400,7 @@ var DimensionSelectSliderConnect = function DimensionSelectSliderConnect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(Icon, null))), /*#__PURE__*/React.createElement(DimensionSelectSlider, {
     marks: marks,
-    layerName: layerName,
+    layerTitle: layerTitle,
     reverse: dimConfig ? dimConfig.reversed : false,
     managedValue: Number(layerDimension.currentValue) || layerDimension.currentValue,
     onChangeDimensionValue: function onChangeDimensionValue(value) {

package/index.umd.js

@@ -5363,6 +5363,9 @@
     var syncGroupGetViewState = toolkit.createSelector(syncGroupStore, function (store) {
       return store.viewState;
     });
+    var getSyncedMapIdsForTimeslider = toolkit.createSelector(syncGroupStore, function (store) {
+      return store.viewState.timeslider.groups[0].selected;
+    }, selectorMemoizationOptions);
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -8347,12 +8350,12 @@
       });
     }
     function setLayerDimensionsSaga(_a) {
-      var layerDimensions, dimensions, layerId, layer, newTimeDimension, mapId, activeLayerId, shouldAutoUpdate, shouldEndTimeOverride, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, isTimestepAuto$1, newTimeStep, error_1;
+      var layerDimensions, dimensions, layerId, layer, newTimeDimension_1, mapId, activeLayerId, shouldAutoUpdate, shouldEndTimeOverride, prevTimeDimension, isAnimating$1, webmapInstance, isActiveLayer, timeStep, isTimestepAuto$1, newTimeStep, syncedMapIds, error_1;
       var payload = _a.payload;
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
-            _b.trys.push([0, 17,, 18]);
+            _b.trys.push([0, 20,, 21]);
 
             layerDimensions = payload.layerDimensions;
             if (!layerDimensions) return [2
@@ -8368,7 +8371,7 @@
             if (!layer) return [2
             /*return*/
             ];
-            newTimeDimension = dimensions.find(function (dimension) {
+            newTimeDimension_1 = dimensions.find(function (dimension) {
               return dimension.name === 'time';
             });
             mapId = layer.mapId;
@@ -8416,10 +8419,10 @@
 
           case 8:
             isTimestepAuto$1 = _b.sent();
-            if (!(isTimestepAuto$1 && isActiveLayer && timeStep === undefined && newTimeDimension)) return [3
+            if (!(isTimestepAuto$1 && isActiveLayer && timeStep === undefined && newTimeDimension_1)) return [3
             /*break*/
             , 10];
-            newTimeStep = getActiveLayerTimeStep(newTimeDimension);
+            newTimeStep = getActiveLayerTimeStep(newTimeDimension_1);
             if (!newTimeStep) return [3
             /*break*/
             , 10];
@@ -8437,9 +8440,9 @@
 
           case 10:
             if (!(isActiveLayer && // only update the active layer
-            shouldAutoUpdate && newTimeDimension && newTimeDimension.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension.maxValue && !shouldEndTimeOverride)) return [3
+            shouldAutoUpdate && newTimeDimension_1 && newTimeDimension_1.maxValue && prevTimeDimension && prevTimeDimension.currentValue && prevTimeDimension.currentValue !== newTimeDimension_1.maxValue && !shouldEndTimeOverride)) return [3
             /*break*/
-            , 14];
+            , 17];
             if (!!isAnimating$1) return [3
             /*break*/
             , 12];
@@ -8450,7 +8453,7 @@
               origin: LayerActionOrigin.setLayerDimensionSaga,
               dimension: {
                 name: 'time',
-                currentValue: newTimeDimension.maxValue
+                currentValue: newTimeDimension_1.maxValue
               }
             }))];
 
@@ -8462,42 +8465,69 @@
           case 12:
             return [4
             /*yield*/
-            , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
+            , effects.select(getSyncedMapIdsForTimeslider)];
 
           case 13:
+            syncedMapIds = _b.sent();
+            if (!syncedMapIds) return [3
+            /*break*/
+            , 15]; // Change time value for all other timesliders
+
+            return [4
+            /*yield*/
+            , effects.all(syncedMapIds.map(function (syncedMapId) {
+              return effects.put(setTime({
+                origin: 'mapStore saga',
+                sourceId: syncedMapId,
+                value: newTimeDimension_1.maxValue
+              }));
+            }))];
+
+          case 14:
+            // Change time value for all other timesliders
+            _b.sent();
+
+            _b.label = 15;
+
+          case 15:
+            return [4
+            /*yield*/
+            , effects.call(updateAnimation, mapId, newTimeDimension_1.maxValue)];
+
+          case 16:
             _b.sent();
 
             return [3
             /*break*/
-            , 16];
+            , 19];
 
-          case 14:
-            if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension && newTimeDimension.maxValue && !shouldEndTimeOverride)) return [3
+          case 17:
+            if (!(isAnimating$1 && !webmapInstance.isAnimating && newTimeDimension_1 && newTimeDimension_1.maxValue && !shouldEndTimeOverride)) return [3
             /*break*/
-            , 16];
+            , 19];
             return [4
             /*yield*/
-            , effects.call(updateAnimation, mapId, newTimeDimension.maxValue)];
+            , effects.call(updateAnimation, mapId, newTimeDimension_1.maxValue)];
 
-          case 15:
+          case 18:
             _b.sent();
 
-            _b.label = 16;
+            _b.label = 19;
 
-          case 16:
+          case 19:
             return [3
             /*break*/
-            , 18];
+            , 21];
 
-          case 17:
+          case 20:
             error_1 = _b.sent(); // eslint-disable-next-line no-console
 
             console.warn(error_1);
             return [3
             /*break*/
-            , 18];
+            , 21];
 
-          case 18:
+          case 21:
             return [2
             /*return*/
             ];
@@ -8505,20 +8535,20 @@
       });
     }
     function toggleAutoUpdateSaga(_a) {
-      var shouldAutoUpdate, mapId, layerId, timeDimension, error_2;
+      var shouldAutoUpdate, mapId_1, layerId, timeDimension_1, syncedMapIds, payloads, error_2;
       var payload = _a.payload;
       return __generator(this, function (_b) {
         switch (_b.label) {
           case 0:
-            _b.trys.push([0, 6,, 7]);
+            _b.trys.push([0, 10,, 11]);
 
-            shouldAutoUpdate = payload.shouldAutoUpdate, mapId = payload.mapId;
+            shouldAutoUpdate = payload.shouldAutoUpdate, mapId_1 = payload.mapId;
             if (!shouldAutoUpdate) return [3
             /*break*/
-            , 5];
+            , 9];
             return [4
             /*yield*/
-            , effects.select(getActiveLayerId, mapId)];
+            , effects.select(getActiveLayerId, mapId_1)];
 
           case 1:
             layerId = _b.sent();
@@ -8527,10 +8557,10 @@
             , effects.select(getLayerTimeDimension, layerId)];
 
           case 2:
-            timeDimension = _b.sent();
-            if (!(timeDimension && timeDimension.maxValue)) return [3
+            timeDimension_1 = _b.sent();
+            if (!(timeDimension_1 && timeDimension_1.maxValue)) return [3
             /*break*/
-            , 5];
+            , 9];
             return [4
             /*yield*/
             , effects.put(layerActions.layerChangeDimension({
@@ -8538,7 +8568,7 @@
               origin: LayerActionOrigin.toggleAutoUpdateSaga,
               dimension: {
                 name: 'time',
-                currentValue: timeDimension.maxValue
+                currentValue: timeDimension_1.maxValue
               }
             }))];
 
@@ -8547,27 +8577,74 @@
 
             return [4
             /*yield*/
-            , effects.call(updateAnimation, mapId, timeDimension.maxValue)];
+            , effects.select(getSyncedMapIdsForTimeslider)];
 
           case 4:
+            syncedMapIds = _b.sent();
+            if (!(syncedMapIds.length > 0)) return [3
+            /*break*/
+            , 7];
+            return [4
+            /*yield*/
+            , effects.all(syncedMapIds.map(function (syncedMapId) {
+              return effects.put(setTime({
+                origin: 'mapStore saga',
+                sourceId: syncedMapId,
+                value: timeDimension_1.maxValue
+              }));
+            }))];
+
+          case 5:
             _b.sent();
 
-            _b.label = 5;
+            payloads = syncedMapIds.reduce(function (syncedMapIdList, syncedMapId) {
+              if (syncedMapId !== mapId_1) {
+                return syncedMapIdList.concat({
+                  mapId: syncedMapId,
+                  shouldAutoUpdate: false
+                });
+              }
 
-          case 5:
-            return [3
+              return syncedMapIdList;
+            }, []);
+            if (!(payloads.length > 0)) return [3
             /*break*/
             , 7];
+            return [4
+            /*yield*/
+            , effects.all(payloads.map(function (payload) {
+              return effects.put(mapActions$1.toggleAutoUpdate(payload));
+            }))];
 
           case 6:
+            _b.sent();
+
+            _b.label = 7;
+
+          case 7:
+            return [4
+            /*yield*/
+            , effects.call(updateAnimation, mapId_1, timeDimension_1.maxValue)];
+
+          case 8:
+            _b.sent();
+
+            _b.label = 9;
+
+          case 9:
+            return [3
+            /*break*/
+            , 11];
+
+          case 10:
             error_2 = _b.sent(); // eslint-disable-next-line no-console
 
             console.warn(error_2);
             return [3
             /*break*/
-            , 7];
+            , 11];
 
-          case 7:
+          case 11:
             return [2
             /*return*/
             ];
@@ -9793,9 +9870,6 @@
         onClick: function onClick() {
           return onChangeSize(sizeSmall);
         },
-        onTouchEnd: function onTouchEnd() {
-          return onChangeSize(sizeSmall);
-        },
         sx: iconStyle,
         className: "collapseSmall-btn"
       }, /*#__PURE__*/React__namespace.createElement(theme.CollapseSmall, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
@@ -9806,9 +9880,6 @@
         onClick: function onClick() {
           return onChangeSize(sizeMedium);
         },
-        onTouchEnd: function onTouchEnd() {
-          return onChangeSize(sizeMedium);
-        },
         sx: iconStyle,
         className: "collapseMedium-btn"
       }, /*#__PURE__*/React__namespace.createElement(theme.CollapseMedium, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
@@ -9819,9 +9890,6 @@
         onClick: function onClick() {
           return onChangeSize(sizeLarge);
         },
-        onTouchEnd: function onTouchEnd() {
-          return onChangeSize(sizeLarge);
-        },
         sx: iconStyle,
         className: "collapseLarge-btn"
       }, /*#__PURE__*/React__namespace.createElement(theme.CollapseLarge, null))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
@@ -9833,9 +9901,6 @@
         sx: iconStyle,
         onClick: function onClick() {
           return onClickDockButton();
-        },
-        onTouchEnd: function onTouchEnd() {
-          return onClickDockButton();
         }
       }, isDockedLayerManager ? /*#__PURE__*/React__namespace.createElement(theme.CollapseWindow, {
         "data-testid": "dockedLayerManager-collapse"
@@ -9871,7 +9936,7 @@
       column6: 'column-6',
       column7: 'column-7'
     };
-    var layerManagerStyle = __assign({
+    var layerManagerStyle = {
       '.layerManagerContainer': {
         containerType: 'inline-size'
       },
@@ -9919,8 +9984,7 @@
       },
       '.collapseLarge-btn': {
         display: 'none'
-      }
-    }, !shared.IS_JEST && {
+      },
       '@container (max-width: 320px)': {
         '.layermanager': {
           '.column-1': {
@@ -10019,7 +10083,7 @@
           }
         }
       }
-    });
+    };
     var returnCorrectSize = function returnCorrectSize(sizeResult) {
       if (sizeResult === 'sizeSmall') return sizeSmall;
       if (sizeResult === 'sizeMedium') return sizeMedium;
@@ -13747,7 +13811,8 @@
         fullWidth: true,
         sx: {
           fontSize: '12px'
-        }
+        },
+        className: "layerAddRemoveButton"
       }, !foundLayer ? 'Add' : 'Remove');
     };
 
@@ -13799,6 +13864,9 @@
             serviceName: serviceName
           })
         }));
+        dispatch(uiActions.orderDialog({
+          type: DialogTypes.LayerInfo
+        }));
       }, [dispatch, layer, serviceName]);
 
       var onClick = function onClick() {
@@ -13821,7 +13889,8 @@
         active: isActive && isOpenInStore,
         onClick: onClick,
         id: "layerInfoButton",
-        "aria-label": "layer info"
+        "aria-label": "layer info",
+        className: "layerInfoButton"
       }, /*#__PURE__*/React__default["default"].createElement(theme.Info, null));
     };
 
@@ -15447,7 +15516,7 @@
           showTitle = _a.showTitle,
           isOpen = _a.isOpen,
           _c = _a.onMouseDown,
-          onMouseDown = _c === void 0 ? function () {} : _c,
+          _onMouseDown = _c === void 0 ? function () {} : _c,
           _d = _a.order,
           order = _d === void 0 ? 0 : _d,
           _e = _a.source,
@@ -15457,6 +15526,7 @@
         width: 750,
         height: 500
       } : _f;
+
       var initialServiceListHeight = 37;
 
       var _g = __read(React__namespace.useState(startSize.height), 2),
@@ -15509,7 +15579,18 @@
         headerSize: "small",
         bounds: bounds,
         "data-testid": "layerSelectWindow",
-        onMouseDown: onMouseDown,
+        onMouseDown: function onMouseDown(event) {
+          var target = event.target;
+          var isButtonInScrollableList = target.closest('.layerInfoButton') || target.closest('.layerAddRemoveButton'); // don't propagate when clicking on layerInfoButton or addRemoveButton
+
+          if (isButtonInScrollableList) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+          }
+
+          _onMouseDown(event);
+        },
         order: order,
         source: source
       }, /*#__PURE__*/React__namespace.createElement(material.Box, {
@@ -16838,7 +16919,7 @@
 
     var DimensionSelectSlider = function DimensionSelectSlider(_a) {
       var marks = _a.marks,
-          layerName = _a.layerName,
+          layerTitle = _a.layerTitle,
           _b = _a.reverse,
           reverse = _b === void 0 ? false : _b,
           _c = _a.isDisabled,
@@ -16907,7 +16988,7 @@
           if (!managedValue) setCurrentIndex(val);
         }
       }))), /*#__PURE__*/React__namespace.createElement(shared.CustomTooltip, {
-        title: layerName
+        title: layerTitle
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body2",
         sx: {
@@ -16916,7 +16997,7 @@
           overflow: 'hidden',
           textOverflow: 'ellipsis'
         }
-      }, layerName)));
+      }, layerTitle)));
     };
 
     /* *
@@ -17015,7 +17096,7 @@
         return null;
       }
 
-      var layerName = wmLayer.getLayerName();
+      var layerTitle = wmLayer.title;
       var marks = marksByDimension(wmsDimension);
       var isLayerDimensionSynced = layerDimension.synced !== undefined && layerDimension.synced === true;
       var tooltipTitle = isLayerDimensionSynced ? 'Click to disconnect layer' : 'Click to connect layer';
@@ -17043,7 +17124,7 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(Icon, null))), /*#__PURE__*/React__namespace.createElement(DimensionSelectSlider, {
         marks: marks,
-        layerName: layerName,
+        layerTitle: layerTitle,
         reverse: dimConfig ? dimConfig.reversed : false,
         managedValue: Number(layerDimension.currentValue) || layerDimension.currentValue,
         onChangeDimensionValue: function onChangeDimensionValue(value) {

package/lib/components/LayerManager/LayerManager.stories.d.ts

@@ -23,7 +23,10 @@ export declare const DockedLayerManagerLightTheme: {
     };
     storyName: string;
 };
-export declare const LayerManagerLightThemeSmall: () => React.ReactElement;
+export declare const LayerManagerLightThemeSmall: {
+    (): React.ReactElement;
+    storyName: string;
+};
 export declare const LayerManagerLightThemeMedium: {
     (): React.ReactElement;
     parameters: {
@@ -32,6 +35,7 @@ export declare const LayerManagerLightThemeMedium: {
             link: string;
         }[];
     };
+    storyName: string;
 };
 export declare const LayerManagerDarkTheme: {
     (): React.ReactElement;
@@ -53,7 +57,10 @@ export declare const DockedLayerManagerDarkTheme: {
     };
     storyName: string;
 };
-export declare const LayerManagerDarkThemeSmall: () => React.ReactElement;
+export declare const LayerManagerDarkThemeSmall: {
+    (): React.ReactElement;
+    storyName: string;
+};
 export declare const LayerManagerDarkThemeMedium: {
     (): React.ReactElement;
     parameters: {
@@ -62,6 +69,7 @@ export declare const LayerManagerDarkThemeMedium: {
             link: string;
         }[];
     };
+    storyName: string;
 };
 export declare const LayerManagerLoadingState: () => React.ReactElement;
 export declare const LayerManagerWithErrorLight: {

package/lib/components/LayerManager/LayerManagerUtils.d.ts

@@ -10,7 +10,52 @@ export declare const columnClasses: {
     column7: string;
 };
 export declare const layerManagerStyle: {
-    '@container (max-width: 320px)'?: {
+    '.layerManagerContainer': {
+        containerType: string;
+    };
+    '.is-dragging header+.MuiBox-root': {
+        overflow: string;
+    };
+    '.column-1': {
+        width: number;
+        display: string;
+        background: string;
+    };
+    '.column-2': {
+        width: string;
+    };
+    '.column-3': {
+        width: string;
+    };
+    '.column-4': {
+        width: string;
+    };
+    '.column-5': {
+        width: string;
+    };
+    '.column-6': {
+        width: number;
+        display: string;
+    };
+    '.column-7': {
+        width: string;
+    };
+    '.enable-btn-mini': {
+        display: string;
+    };
+    '.header-layermanager': {
+        containerType: string;
+    };
+    '.header-mapPresets': {
+        display: string;
+    };
+    '.medium-layermanager': {
+        display: string;
+    };
+    '.collapseLarge-btn': {
+        display: string;
+    };
+    '@container (max-width: 320px)': {
         '.layermanager': {
             '.column-1': {
                 width: string;
@@ -48,8 +93,8 @@ export declare const layerManagerStyle: {
                 display: string;
             };
         };
-    } | undefined;
-    '@container (max-width: 600px)'?: {
+    };
+    '@container (max-width: 600px)': {
         '.layermanager': {
             '.column-3, .column-4, .column-5, .column-6, .column-7': {
                 display: string;
@@ -78,8 +123,8 @@ export declare const layerManagerStyle: {
                 display: string;
             };
         };
-    } | undefined;
-    '@container (max-width: 600px) and (min-width: 321px)'?: {
+    };
+    '@container (max-width: 600px) and (min-width: 321px)': {
         '.layermanager': {
             '.medium-layermanager': {
                 display: string;
@@ -104,51 +149,6 @@ export declare const layerManagerStyle: {
                 display: string;
             };
         };
-    } | undefined;
-    '.layerManagerContainer': {
-        containerType: string;
-    };
-    '.is-dragging header+.MuiBox-root': {
-        overflow: string;
-    };
-    '.column-1': {
-        width: number;
-        display: string;
-        background: string;
-    };
-    '.column-2': {
-        width: string;
-    };
-    '.column-3': {
-        width: string;
-    };
-    '.column-4': {
-        width: string;
-    };
-    '.column-5': {
-        width: string;
-    };
-    '.column-6': {
-        width: number;
-        display: string;
-    };
-    '.column-7': {
-        width: string;
-    };
-    '.enable-btn-mini': {
-        display: string;
-    };
-    '.header-layermanager': {
-        containerType: string;
-    };
-    '.header-mapPresets': {
-        display: string;
-    };
-    '.medium-layermanager': {
-        display: string;
-    };
-    '.collapseLarge-btn': {
-        display: string;
     };
 };
 export declare const returnCorrectSize: (sizeResult: DockedLayerManagerSize | undefined) => Size;

package/lib/components/LayerManager/LayerSelect/LayerSelect.d.ts

@@ -5,7 +5,7 @@ interface LayerSelectProps {
     bounds?: string;
     showTitle?: boolean;
     onClose?: () => void;
-    onMouseDown?: () => void;
+    onMouseDown?: (event: MouseEvent) => void;
     isOpen: boolean;
     order?: number;
     source?: Source;

package/lib/components/MultiMapDimensionSelect/DimensionSelectSlider.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Mark } from '../../utils/dimensionUtils';
 interface DimensionSelectSliderProps {
     marks: Mark[];
-    layerName: string;
+    layerTitle: string;
     reverse?: boolean;
     isDisabled?: boolean;
     managedValue?: number | string;

package/lib/components/SyncGroups/types.d.ts

@@ -1,6 +1,6 @@
 export interface Group {
     id: string;
-    selected: number[];
+    selected: string[];
 }
 export interface SourceById {
     id: string;

package/lib/store/generic/synchronizationGroups/selectors.d.ts

@@ -38,3 +38,15 @@ export declare const syncGroupGetViewState: ((state: {
 }> & {
     clearCache: () => void;
 };
+export declare const getSyncedMapIdsForTimeslider: ((state: {
+    syncronizationGroupStore?: SynchronizationGroupState | undefined;
+    ui?: import("../../ui/types").UIStoreType | undefined;
+    webmap?: import("../../mapStore/types").WebMapState | undefined;
+    services?: import("../../mapStore/types").ServiceState | undefined;
+    layers?: import("../../mapStore/types").LayerState | undefined;
+    layerSelect?: import("../../layerSelect/types").LayerSelectStoreType | undefined;
+}) => string[]) & import("reselect").OutputSelectorFields<((args_0: SynchronizationGroupState) => string[]) & {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};

package/lib/utils/testUtils.d.ts

@@ -5,7 +5,7 @@ export declare const createLayersState: (layerId: string, props?: {}) => LayerSt
 export declare const createMultipleLayersState: (layers: Layer[], mapId: string) => LayerState;
 export declare const createMapDimensionsState: (dimensions?: Dimension[] | undefined, ...mapIds: string[]) => WebMapState;
 export declare const mockStateMapWithLayer: (layer: Layer, mapId: string) => AppStore;
-export declare const mockStateMapWithMultipleLayers: (layers: Layer[], mapId: string) => WebMapStateModuleState;
+export declare const mockStateMapWithMultipleLayers: (layers: Layer[], mapId: string) => AppStore;
 export declare const mockStateMapWithDimensions: (layer: Layer, mapId: string) => WebMapStateModuleState;
 export declare const mockStateMapWithDimensionsWithoutLayers: (mapId: string) => WebMapStateModuleState;
 export declare const mockStateMapWithTimeSliderScaleWithoutLayers: (mapId: string, timeSliderScale: Scale) => WebMapStateModuleState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "4.13.0",
+  "version": "4.14.1",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -13,30 +13,30 @@
   "dependencies": {},
   "peerDependencies": {
     "react": "^18.2.0",
-    "@opengeoweb/shared": "4.13.0",
+    "@opengeoweb/shared": "4.14.1",
     "@mui/material": "^5.10.8",
-    "@opengeoweb/theme": "4.13.0",
+    "@opengeoweb/theme": "4.14.1",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "@redux-eggs/core": "^2.2.0",
     "react-redux": "^8.0.4",
-    "@opengeoweb/form-fields": "4.13.0",
-    "react-hook-form": "^7.41.5",
-    "moment": "^2.29.0",
-    "moment-timezone": "^0.5.31",
-    "@mui/x-date-pickers": "^5.0.4",
     "lodash": "^4.17.20",
     "axios": "^0.25.0",
     "date-fns": "^2.29.3",
-    "@opengeoweb/webmap": "4.13.0",
+    "moment": "^2.29.0",
+    "@opengeoweb/webmap": "4.14.1",
     "throttle-debounce": "^3.0.1",
     "proj4": "^2.6.2",
-    "@opengeoweb/api": "4.13.0",
+    "@opengeoweb/api": "4.14.1",
     "react-intl": "^5.17.5",
     "react-sortablejs": "^6.1.4",
     "sortablejs": "^1.15.0",
     "immer": "^9.0.15",
     "react-window": "^1.8.7",
+    "@opengeoweb/form-fields": "4.14.1",
+    "react-hook-form": "^7.41.5",
+    "moment-timezone": "^0.5.31",
+    "@mui/x-date-pickers": "^5.0.4",
     "@reduxjs/toolkit": "^1.8.3",
     "lodash.clonedeep": "^4.5.0",
     "@turf/turf": "^5.1.6",