@opengeoweb/core 9.34.0 → 9.35.0

package/index.esm.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useState, useCallback, useRef } from 'react';
-import { Grid2, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Button, circularProgressClasses, ListItemIcon, Checkbox, Select } from '@mui/material';
-import { SHARED_NAMESPACE, sharedTranslations, CustomIconButton, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, CustomTooltip, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, ToolContainerDraggable, useDebounce, dateUtils, withEggs, ErrorBoundary } from '@opengeoweb/shared';
-import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, ExitDomain, Info, Search, Exclamation, MyLocation, Close, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
+import { Grid2, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, Button, circularProgressClasses, ListItemIcon, Checkbox, Switch, Select } from '@mui/material';
+import { SHARED_NAMESPACE, sharedTranslations, CustomIconButton, CustomTooltip, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, useDebounce, dateUtils, withEggs, ErrorBoundary } from '@opengeoweb/shared';
+import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, ExitDomain, Info, Search, Exclamation, MyLocation, Close, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { initReactI18next, useTranslation, I18nextProvider } from 'react-i18next';
 import { TIMESLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, TIME_SLIDER_LEGEND_HEIGHT, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSlider, onsetNewDateDebounced, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/timeslider';
@@ -11,14 +11,14 @@ import { WEBMAP_REACT_NAMESPACE, webmapReactTranslations, WEBMAP_NAMESPACE, webm
 import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
 import { ReactSortable } from 'react-sortablejs';
 import Sortable from 'sortablejs';
-import { layerTypes, layerUtils, mapSelectors, layerActions, layerSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericActions, drawtoolSelectors, syncConstants, loadingIndicatorActions, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelectors, syncGroupsSelector, coreModuleConfig, routerUtils, routerModuleConfig } from '@opengeoweb/store';
+import { layerTypes, layerUtils, mapSelectors, layerActions, layerSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericSelectors, genericActions, drawtoolSelectors, syncConstants, loadingIndicatorActions, syncGroupsSelectors, defaultLayers, mapStoreActions, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, coreModuleConfig, routerUtils, routerModuleConfig } from '@opengeoweb/store';
 import { webmapUtils, WMGetServiceFromStore, getCapabilities, LayerType, handleDateUtilsISOString, wmServiceListener, EVENT_GETCAPABILITIES_START, EVENT_GETCAPABILITIES_READY, getWMSGetFeatureInfoRequestURL, WMLayer } from '@opengeoweb/webmap';
 import { Box as Box$1, styled as styled$1 } from '@mui/system';
 import _, { isEqual, range } from 'lodash';
 import { LayerSelectButtonConnect, LayerSelectConnect, layerSelectConfig } from '@opengeoweb/layer-select';
 import axios from 'axios';
 import DOMPurify from 'dompurify';
-import { SnackbarWrapperConnect } from '@opengeoweb/snackbar';
+import { snackbarTypes, snackbarActions, SnackbarWrapperConnect } from '@opengeoweb/snackbar';
 import { useNavigate } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
 
@@ -86,7 +86,14 @@ var en = {
 	"layermanager-dimensions-none": "Layer has no time dimension",
 	feature_info_marker_info: "Event marker info",
 	feature_info_location_info: "Get information for a specific location",
-	"language-select": "Language"
+	"language-select": "Language",
+	"column-expand": "Expand {{title}}",
+	"column-collapse": "Collapse",
+	"workspace-time-scroll-off": "Workspace time scroll OFF",
+	"workspace-time-scroll-on": "ON",
+	"workspace-time-scroll-info": "This feature affects all views in this workspace",
+	"workspace-time-scroll-toggle-on": "Workspace time scroll ON",
+	"workspace-time-scroll-toggle-off": "Workspace time scroll OFF"
 };
 var fi = {
 	feature_info_title: "Napsauta karttaa nähdäksesi lisätietoja.",
@@ -152,7 +159,14 @@ var fi = {
 	"layermanager-dimensions-none": "Karttatasolla ei ole aika dimensioita",
 	feature_info_marker_info: "Karttamerkin tiedot",
 	feature_info_location_info: "Hae tietoja tietystä sijainnista",
-	"language-select": "Kieli"
+	"language-select": "Kieli",
+	"column-expand": "Laajenna {{title}}",
+	"column-collapse": "Kutista",
+	"workspace-time-scroll-off": "Työtilan aika scrollaus POIS PÄÄLTÄ",
+	"workspace-time-scroll-on": "PÄÄLLÄ",
+	"workspace-time-scroll-info": "Tämä ominaisuus vaikuttaa kaikkiin näkymiin tämän työtilan sisällä",
+	"workspace-time-scroll-toggle-on": "Työtilan aika scrollaus PÄÄLLÄ",
+	"workspace-time-scroll-toggle-off": "Työtilan aika scrollaus POIS PÄÄLTÄ"
 };
 var no = {
 	feature_info_title: "Klikk på kartet for å få mer informasjon.",
@@ -218,7 +232,14 @@ var no = {
 	"layermanager-dimensions-none": "Laget har ingen tidsdimensjon",
 	feature_info_marker_info: "Hendelse markør info",
 	feature_info_location_info: "Få informasjon for en spesifikk lokasjon",
-	"language-select": "Språk"
+	"language-select": "Språk",
+	"column-expand": "Ekspander {{title}}",
+	"column-collapse": "Kollaps",
+	"workspace-time-scroll-off": "ikke oversatt",
+	"workspace-time-scroll-on": "ikke oversatt",
+	"workspace-time-scroll-info": "ikke oversatt",
+	"workspace-time-scroll-toggle-on": "ikke oversatt",
+	"workspace-time-scroll-toggle-off": "ikke oversatt"
 };
 var nl = {
 	feature_info_title: "Klik op de kaart voor informatie.",
@@ -284,7 +305,14 @@ var nl = {
 	"layermanager-dimensions-none": "Laag heeft geen tijd dimensie",
 	feature_info_marker_info: "Locatie informatie",
 	feature_info_location_info: "Zie informatie voor een specifieke locatie",
-	"language-select": "Taal"
+	"language-select": "Taal",
+	"column-expand": "{{title}} uitklappen",
+	"column-collapse": "Inklappen",
+	"workspace-time-scroll-off": "niet vertaald",
+	"workspace-time-scroll-on": "niet vertaald",
+	"workspace-time-scroll-info": "niet vertaald",
+	"workspace-time-scroll-toggle-on": "niet vertaald",
+	"workspace-time-scroll-toggle-off": "niet vertaald"
 };
 var coreTranslations = {
 	en: en,
@@ -804,7 +832,10 @@ var columnClasses = {
   column6: 'column-6',
   column7: 'column-7',
   acceptanceTime: 'column-acceptanceTime',
-  loadDuration: 'column-loadDuration'
+  loadDuration: 'column-loadDuration',
+  columnHeader: 'columnHeader',
+  baseLayer: 'baseLayer',
+  columnTarget: 'columnTarget'
 };
 var DRAG_VISIBILITY_LEADING_BUTTONS = 3;
 var DELETE_MORE_BUTTONS = 3;
@@ -820,33 +851,67 @@ var leftButtonsStyle = {
   display: 'flex',
   background: 'transparent'
 };
+var columnCollapseStyle = {
+  height: 'inherit',
+  alignContent: 'center',
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'space-between',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  color: 'geowebColors.buttons.icon.default.color',
+  flexGrow: 1
+};
 var layerManagerStyle = {
+  '.column-hover-icon': {
+    display: 'none'
+  },
+  '.columnHeader:hover': {
+    backgroundColor: 'geowebColors.buttons.icon.mouseOver.fill',
+    cursor: 'default',
+    '.column-hover-icon': {
+      display: 'block'
+    }
+  },
   '.layerManagerContainer': {
     containerType: 'inline-size'
   },
+  '.descriptionRow': {
+    height: '32px',
+    marginTop: '4px',
+    marginBottom: '2px'
+  },
   // disable overflow while dragging to prevent issues with scrollbar
   '.is-dragging header+.MuiBox-root': {
     overflow: 'hidden'
   },
-  // layer
-  '.column-2': {
+  // baselayer & projection
+  '.baseLayer': {
     width: "calc(" + flexibleAreaWidth + " * 0.25)"
   },
+  // layerName
+  '.column-2': Object.assign({
+    width: "calc(" + flexibleAreaWidth + " * 0.25)"
+  }, columnCollapseStyle),
   // style
-  '.column-3': {
+  '.column-3': Object.assign({
     width: "calc(" + flexibleAreaWidth + " * 0.25)"
-  },
+  }, columnCollapseStyle),
   // opacity
-  '.column-4': {
+  '.column-4': Object.assign({
     width: "calc(" + flexibleAreaWidth + " * 0.15)"
-  },
+  }, columnCollapseStyle, {
+    flexGrow: 0
+  }),
   // dimensions
-  '.column-5': {
+  '.column-5': Object.assign({
     width: "calc(" + flexibleAreaWidth + " * 0.35)"
-  },
-  '.column-acceptanceTime': {
+  }, columnCollapseStyle),
+  '.column-acceptanceTime': Object.assign({
     width: acceptanceTimeWidth
-  },
+  }, columnCollapseStyle, {
+    flexGrow: 0
+  }),
   '.column-loadDuration': {
     width: loadDurationWidth,
     paddingLeft: 1,
@@ -859,7 +924,7 @@ var layerManagerStyle = {
   },
   // layer missing warning
   '.column-7': {
-    width: "calc(" + flexibleAreaWidth + " * 0.75 + " + acceptanceTimeWidth + "px)"
+    width: "calc(" + flexibleAreaWidth + " * 0.75 + " + acceptanceTimeWidth + "px + " + loadDurationWidth + "px)"
   },
   // sizes: mini
   '.enable-btn-mini': {
@@ -885,11 +950,11 @@ var layerManagerStyle = {
       '.activateLayer-btn, .enable-btn, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
         display: 'none'
       },
-      '#mappresets-menubutton, .addLayer-column, .setProjection-column': {
+      '.addLayer-column, .setProjection-column': {
         display: 'none'
       },
       '.descriptionRow': {
-        height: 6,
+        height: 0,
         '.MuiButtonBase-root': {
           display: 'none'
         }
@@ -916,10 +981,10 @@ var layerManagerStyle = {
   // sizes: medium
   '@container (max-width: 600px)': {
     '.layermanager': {
-      '.column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
+      '.column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
         display: 'none'
       },
-      '.column-2': {
+      '.columnLayerName, .baseLayer': {
         width: "calc((100% - " + leftButtonsWidth + "px) )"
       }
     },
@@ -995,7 +1060,41 @@ var LayerSelectButton = function LayerSelectButton(_ref) {
   });
 };
 
-var _excluded$6 = ["settings", "addLayerComponent"];
+var _excluded$6 = ["settings", "addLayerComponent", "onToggleCollapsed", "collapsedColumns"];
+var RowItemCollapse$1 = function RowItemCollapse(_ref) {
+  var className = _ref.className,
+    title = _ref.title,
+    collapsedColumns = _ref.collapsedColumns,
+    _ref$onToggleCollapse = _ref.onToggleCollapsed,
+    onToggleCollapsed = _ref$onToggleCollapse === void 0 ? function () {} : _ref$onToggleCollapse;
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var hoverId = columnClasses.columnHeader + "-" + className;
+  return jsx(CustomTooltip, {
+    title: collapsedColumns != null && collapsedColumns[className] ? t('column-expand', {
+      title: title
+    }) : t('column-collapse'),
+    children: jsx(Grid2, {
+      id: hoverId,
+      className: columnClasses.columnHeader + " " + className,
+      style: Object.assign({}, (collapsedColumns == null ? void 0 : collapsedColumns[className]) && {
+        width: '24px',
+        flexGrow: 0
+      }),
+      onClick: function onClick() {
+        onToggleCollapsed(className);
+      },
+      children: collapsedColumns != null && collapsedColumns[className] ? jsx(ColumnCollapsed, {}) : jsxs(Fragment, {
+        children: [jsx(Box, {
+          sx: styles$3.text,
+          children: title
+        }), jsx(ColumnCollapse, {
+          className: "column-hover-icon"
+        })]
+      })
+    })
+  }, collapsedColumns != null && collapsedColumns[className] ? 'Expand' : 'Collapse');
+};
 var styles$3 = {
   text: function text(theme) {
     return Object.assign({
@@ -1003,22 +1102,25 @@ var styles$3 = {
       fontSize: '12px',
       fontFamily: 'Roboto',
       opacity: 0.67
-    }, theme.palette.geowebColors.layerManager.headerRowText);
+    }, theme.palette.geowebColors.layerManager.headerRowText, {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    });
   }
 };
-var DescriptionRow = function DescriptionRow(_ref) {
-  var _settings$addLayer, _settings$addLayer2, _settings$layerName$t, _settings$layerName, _settings$layerStyle$, _settings$layerStyle, _settings$opacity$tit, _settings$opacity, _settings$dimensions$, _settings$dimensions, _settings$acceptanceT, _settings$acceptanceT2;
-  var settings = _ref.settings,
-    addLayerComponent = _ref.addLayerComponent,
-    gridProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  var _useCoreTranslation = useCoreTranslation(),
-    t = _useCoreTranslation.t;
+var DescriptionRow = function DescriptionRow(_ref2) {
+  var _settings$addLayer, _settings$addLayer2, _settings$layerName$t, _settings$layerName, _settings$layerName$t2, _settings$layerName2, _settings$layerStyle$, _settings$layerStyle, _settings$opacity$tit, _settings$opacity, _settings$dimensions$, _settings$dimensions, _settings$acceptanceT, _settings$acceptanceT2;
+  var settings = _ref2.settings,
+    addLayerComponent = _ref2.addLayerComponent,
+    _ref2$onToggleCollaps = _ref2.onToggleCollapsed,
+    onToggleCollapsed = _ref2$onToggleCollaps === void 0 ? function () {} : _ref2$onToggleCollaps,
+    collapsedColumns = _ref2.collapsedColumns,
+    gridProps = _objectWithoutPropertiesLoose(_ref2, _excluded$6);
+  var _useCoreTranslation2 = useCoreTranslation(),
+    t = _useCoreTranslation2.t;
   return jsxs(Grid2, Object.assign({
     container: true,
     "data-testid": "descriptionRow",
-    sx: {
-      height: 40
-    },
     className: "descriptionRow",
     alignItems: "center"
   }, gridProps, {
@@ -1033,37 +1135,36 @@ var DescriptionRow = function DescriptionRow(_ref) {
         icon: settings == null || (_settings$addLayer2 = settings.addLayer) == null ? void 0 : _settings$addLayer2.icon
       })
     }), jsx(Grid2, {
-      className: columnClasses.column2,
+      className: "medium-layermanager columnLayerName",
       children: jsx(Box, {
         sx: styles$3.text,
         children: (_settings$layerName$t = settings == null || (_settings$layerName = settings.layerName) == null ? void 0 : _settings$layerName.title) != null ? _settings$layerName$t : t('layermanager-layer')
       })
-    }), jsx(Grid2, {
+    }), jsx(RowItemCollapse$1, {
+      className: columnClasses.column2,
+      title: (_settings$layerName$t2 = settings == null || (_settings$layerName2 = settings.layerName) == null ? void 0 : _settings$layerName2.title) != null ? _settings$layerName$t2 : t('layermanager-layer'),
+      onToggleCollapsed: onToggleCollapsed,
+      collapsedColumns: collapsedColumns
+    }), jsx(RowItemCollapse$1, {
       className: columnClasses.column3,
-      children: jsx(Box, {
-        sx: styles$3.text,
-        children: (_settings$layerStyle$ = settings == null || (_settings$layerStyle = settings.layerStyle) == null ? void 0 : _settings$layerStyle.title) != null ? _settings$layerStyle$ : t('layermanager-style-title')
-      })
-    }), jsx(Grid2, {
+      title: (_settings$layerStyle$ = settings == null || (_settings$layerStyle = settings.layerStyle) == null ? void 0 : _settings$layerStyle.title) != null ? _settings$layerStyle$ : t('layermanager-style-title'),
+      onToggleCollapsed: onToggleCollapsed,
+      collapsedColumns: collapsedColumns
+    }), jsx(RowItemCollapse$1, {
       className: columnClasses.column4,
-      children: jsx(Box, {
-        sx: styles$3.text,
-        children: (_settings$opacity$tit = settings == null || (_settings$opacity = settings.opacity) == null ? void 0 : _settings$opacity.title) != null ? _settings$opacity$tit : t('layermanager-opacity-title')
-      })
-    }), jsx(Grid2, {
+      title: (_settings$opacity$tit = settings == null || (_settings$opacity = settings.opacity) == null ? void 0 : _settings$opacity.title) != null ? _settings$opacity$tit : t('layermanager-opacity-title'),
+      onToggleCollapsed: onToggleCollapsed,
+      collapsedColumns: collapsedColumns
+    }), jsx(RowItemCollapse$1, {
       className: columnClasses.column5,
-      children: jsx(Box, {
-        sx: styles$3.text,
-        children: (_settings$dimensions$ = settings == null || (_settings$dimensions = settings.dimensions) == null ? void 0 : _settings$dimensions.title) != null ? _settings$dimensions$ : t('layermanager-dimensions-title')
-      })
-    }), jsx(Grid2, {
+      title: (_settings$dimensions$ = settings == null || (_settings$dimensions = settings.dimensions) == null ? void 0 : _settings$dimensions.title) != null ? _settings$dimensions$ : t('layermanager-dimensions-title'),
+      onToggleCollapsed: onToggleCollapsed,
+      collapsedColumns: collapsedColumns
+    }), jsx(RowItemCollapse$1, {
       className: columnClasses.acceptanceTime,
-      children: jsx(Box, {
-        sx: [styles$3.text, {
-          whiteSpace: 'nowrap'
-        }],
-        children: (_settings$acceptanceT = settings == null || (_settings$acceptanceT2 = settings.acceptanceTime) == null ? void 0 : _settings$acceptanceT2.title) != null ? _settings$acceptanceT : t('layermanager-acceptance-time')
-      })
+      title: (_settings$acceptanceT = settings == null || (_settings$acceptanceT2 = settings.acceptanceTime) == null ? void 0 : _settings$acceptanceT2.title) != null ? _settings$acceptanceT : t('layermanager-acceptance-time'),
+      onToggleCollapsed: onToggleCollapsed,
+      collapsedColumns: collapsedColumns
     }), jsx(Grid2, {
       className: columnClasses.loadDuration,
       children: jsx(Box, {
@@ -1263,43 +1364,36 @@ var DimensionSelect = function DimensionSelect(_ref) {
   var defaultValueTooltip = (_defaultDimensionValu = defaultDimensionValueTooltip(t, selectedDimension)) != null ? _defaultDimensionValu : '';
   var nameTooltip = (_tooltipGenerator = tooltipGenerator == null ? void 0 : tooltipGenerator(t, selectedDimension)) != null ? _tooltipGenerator : defaultNameTooltip;
   var valueTooltip = (_tooltipGenerator2 = tooltipGenerator == null ? void 0 : tooltipGenerator(t, selectedDimension, true)) != null ? _tooltipGenerator2 : defaultValueTooltip;
-  return jsx(Grid2, {
-    container: true,
-    direction: "row",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    children: jsxs(Grid2, {
-      size: 12,
-      children: [collapseDimensionDropdown ? jsx(SingleValueComponent, Object.assign({}, layerDimensions[0], {
-        nameMappings: nameMappings,
-        valueMappings: valueMappings,
-        position: "dimension"
-      })) : jsx(DimensionSelectName, {
-        selectedDimensionName: selectedDimensionName,
-        setSelectedDimensionName: setSelectedDimensionName,
-        dimensionNames: dimensionNames,
-        tooltip: nameTooltip,
-        isEnabled: isEnabled,
-        icon: icon,
-        nameMappings: nameMappings,
-        skipLocalStyling: skipLocalStyling
-      }), collapseValueDropdown ? jsx(SingleValueComponent, Object.assign({}, layerDimensions[0], {
-        nameMappings: nameMappings,
-        valueMappings: valueMappings,
-        position: "value"
-      })) : jsx(DimensionSelectValue, {
-        selectedDimension: selectedDimension,
-        onLayerChangeDimension: onLayerChangeDimension,
-        tooltip: valueTooltip,
-        isEnabled: isEnabled,
-        hideLatestDuplicate: hideLatestDuplicate,
-        icon: icon,
-        valueMappings: valueMappings,
-        setUseLatestReferenceTime: setUseLatestReferenceTime,
-        useLatestReferenceTime: useLatestReferenceTime,
-        skipLocalStyling: skipLocalStyling
-      })]
-    })
+  return jsxs(Fragment, {
+    children: [collapseDimensionDropdown ? jsx(SingleValueComponent, Object.assign({}, layerDimensions[0], {
+      nameMappings: nameMappings,
+      valueMappings: valueMappings,
+      position: "dimension"
+    })) : jsx(DimensionSelectName, {
+      selectedDimensionName: selectedDimensionName,
+      setSelectedDimensionName: setSelectedDimensionName,
+      dimensionNames: dimensionNames,
+      tooltip: nameTooltip,
+      isEnabled: isEnabled,
+      icon: icon,
+      nameMappings: nameMappings,
+      skipLocalStyling: skipLocalStyling
+    }), collapseValueDropdown ? jsx(SingleValueComponent, Object.assign({}, layerDimensions[0], {
+      nameMappings: nameMappings,
+      valueMappings: valueMappings,
+      position: "value"
+    })) : jsx(DimensionSelectValue, {
+      selectedDimension: selectedDimension,
+      onLayerChangeDimension: onLayerChangeDimension,
+      tooltip: valueTooltip,
+      isEnabled: isEnabled,
+      hideLatestDuplicate: hideLatestDuplicate,
+      icon: icon,
+      valueMappings: valueMappings,
+      setUseLatestReferenceTime: setUseLatestReferenceTime,
+      useLatestReferenceTime: useLatestReferenceTime,
+      skipLocalStyling: skipLocalStyling
+    })]
   });
 };
 
@@ -1499,6 +1593,7 @@ var OpacitySelect = function OpacitySelect(_ref) {
       disableFocusRipple: true,
       sx: {
         '&.MuiIconButton-root': Object.assign({
+          justifyContent: 'normal',
           width: '100%!important',
           height: '100%!important',
           borderRadius: '0',
@@ -2100,41 +2195,75 @@ var Acceptance = function Acceptance(_ref6) {
     onChangeAcceptanceTime: onChangeAcceptanceTime
   });
 };
-var LayerRowUnstyled = function LayerRowUnstyled(_ref7) {
-  var layerId = _ref7.layerId,
-    layer = _ref7.layer,
-    layerName = _ref7.layerName,
-    services = _ref7.services,
-    mapId = _ref7.mapId,
-    _ref7$onLayerRowClick = _ref7.onLayerRowClick,
-    onLayerRowClick = _ref7$onLayerRowClick === void 0 ? function () {} : _ref7$onLayerRowClick,
-    _ref7$isEnabled = _ref7.isEnabled,
-    isEnabled = _ref7$isEnabled === void 0 ? true : _ref7$isEnabled,
-    _ref7$isLayerMissing = _ref7.isLayerMissing,
-    isLayerMissing = _ref7$isLayerMissing === void 0 ? false : _ref7$isLayerMissing,
-    onLayerEnable = _ref7.onLayerEnable,
-    onLayerChangeName = _ref7.onLayerChangeName,
-    onLayerChangeStyle = _ref7.onLayerChangeStyle,
-    onLayerChangeOpacity = _ref7.onLayerChangeOpacity,
-    _onLayerChangeDimension = _ref7.onLayerChangeDimension,
-    onLayerDelete = _ref7.onLayerDelete,
-    onLayerDuplicate = _ref7.onLayerDuplicate,
-    onChangeAcceptanceTime = _ref7.onChangeAcceptanceTime,
-    layerEnableLayout = _ref7.layerEnableLayout,
-    layerServicesLayout = _ref7.layerServicesLayout,
-    layerStylesLayout = _ref7.layerStylesLayout,
-    layerOpacityLayout = _ref7.layerOpacityLayout,
-    layerDimensionLayout = _ref7.layerDimensionLayout,
-    layerDeleteLayout = _ref7.layerDeleteLayout,
-    layerShowLayerInfoLayout = _ref7.layerShowLayerInfoLayout,
-    layerMenuLayout = _ref7.layerMenuLayout,
-    layerActiveLayout = _ref7.layerActiveLayout,
-    disableActivateLayer = _ref7.disableActivateLayer,
-    dragHandle = _ref7.dragHandle,
-    layerAcceptanceTimeLayout = _ref7.layerAcceptanceTimeLayout,
-    layerMissingDataLayout = _ref7.layerMissingDataLayout,
-    layerLoadDurationLayout = _ref7.layerLoadDurationLayout,
-    className = _ref7.className;
+var RowItemCollapse = function RowItemCollapse(_ref7) {
+  var className = _ref7.className,
+    collapsedColumns = _ref7.collapsedColumns,
+    children = _ref7.children;
+  var theme = useTheme();
+  var hoverId = columnClasses.columnHeader + "-" + className;
+  var hoverElement = document.getElementById(hoverId);
+  hoverElement == null || hoverElement.addEventListener('mouseenter', function () {
+    var targetElements = document.getElementsByClassName(className);
+    Array.from(targetElements).forEach(function (element) {
+      // eslint-disable-next-line no-param-reassign
+      element.style.backgroundColor = theme.palette.geowebColors.buttons.icon.mouseOver.fill || 'inherit';
+    });
+  });
+  hoverElement == null || hoverElement.addEventListener('mouseleave', function () {
+    var targetElements = document.getElementsByClassName(className);
+    Array.from(targetElements).forEach(function (element) {
+      // eslint-disable-next-line no-param-reassign
+      element.style.backgroundColor = 'inherit';
+    });
+  });
+  return jsx(Grid2, {
+    className: className,
+    style: Object.assign({
+      height: '32px'
+    }, (collapsedColumns == null ? void 0 : collapsedColumns[className]) && {
+      width: '24px',
+      flexGrow: 0,
+      contentVisibility: 'hidden'
+    }),
+    children: children
+  });
+};
+var LayerRowUnstyled = function LayerRowUnstyled(_ref8) {
+  var layerId = _ref8.layerId,
+    layer = _ref8.layer,
+    layerName = _ref8.layerName,
+    services = _ref8.services,
+    mapId = _ref8.mapId,
+    _ref8$onLayerRowClick = _ref8.onLayerRowClick,
+    onLayerRowClick = _ref8$onLayerRowClick === void 0 ? function () {} : _ref8$onLayerRowClick,
+    _ref8$isEnabled = _ref8.isEnabled,
+    isEnabled = _ref8$isEnabled === void 0 ? true : _ref8$isEnabled,
+    _ref8$isLayerMissing = _ref8.isLayerMissing,
+    isLayerMissing = _ref8$isLayerMissing === void 0 ? false : _ref8$isLayerMissing,
+    onLayerEnable = _ref8.onLayerEnable,
+    onLayerChangeName = _ref8.onLayerChangeName,
+    onLayerChangeStyle = _ref8.onLayerChangeStyle,
+    onLayerChangeOpacity = _ref8.onLayerChangeOpacity,
+    _onLayerChangeDimension = _ref8.onLayerChangeDimension,
+    onLayerDelete = _ref8.onLayerDelete,
+    onLayerDuplicate = _ref8.onLayerDuplicate,
+    onChangeAcceptanceTime = _ref8.onChangeAcceptanceTime,
+    layerEnableLayout = _ref8.layerEnableLayout,
+    layerServicesLayout = _ref8.layerServicesLayout,
+    layerStylesLayout = _ref8.layerStylesLayout,
+    layerOpacityLayout = _ref8.layerOpacityLayout,
+    layerDimensionLayout = _ref8.layerDimensionLayout,
+    layerDeleteLayout = _ref8.layerDeleteLayout,
+    layerShowLayerInfoLayout = _ref8.layerShowLayerInfoLayout,
+    layerMenuLayout = _ref8.layerMenuLayout,
+    layerActiveLayout = _ref8.layerActiveLayout,
+    disableActivateLayer = _ref8.disableActivateLayer,
+    dragHandle = _ref8.dragHandle,
+    layerAcceptanceTimeLayout = _ref8.layerAcceptanceTimeLayout,
+    layerMissingDataLayout = _ref8.layerMissingDataLayout,
+    layerLoadDurationLayout = _ref8.layerLoadDurationLayout,
+    className = _ref8.className,
+    collapsedColumns = _ref8.collapsedColumns;
   var _useCoreTranslation2 = useCoreTranslation(),
     t = _useCoreTranslation2.t;
   var onClickRow = function onClickRow() {
@@ -2232,8 +2361,9 @@ var LayerRowUnstyled = function LayerRowUnstyled(_ref7) {
             onChangeEnable: changeEnable,
             onChangeActive: onClickRow
           })
-        }), jsx(Grid2, {
+        }), jsx(RowItemCollapse, {
           className: columnClasses.column2,
+          collapsedColumns: collapsedColumns,
           children: layerServicesLayout || jsx(RenderLayers, {
             layerName: layer.name,
             layers: services && layer.service && services[layer.service] && services[layer.service].layers || [],
@@ -2251,20 +2381,23 @@ var LayerRowUnstyled = function LayerRowUnstyled(_ref7) {
             isCompact: true
           })
         }) : jsxs(Fragment, {
-          children: [jsx(Grid2, {
+          children: [jsx(RowItemCollapse, {
             className: columnClasses.column3,
+            collapsedColumns: collapsedColumns,
             children: layerStylesLayout || jsx(Styles, {
               style: layer.style,
               onChangeStyle: changeStyle
             })
-          }), jsx(Grid2, {
+          }), jsx(RowItemCollapse, {
             className: columnClasses.column4,
+            collapsedColumns: collapsedColumns,
             children: layerOpacityLayout || jsx(Opacity, {
               opacity: layer.opacity,
               onChangeOpacity: changeOpacity
             })
-          }), jsx(Grid2, {
+          }), jsx(RowItemCollapse, {
             className: columnClasses.column5,
+            collapsedColumns: collapsedColumns,
             children: layerDimensionLayout || jsx(DimensionSelect, {
               layerDimensions: layerUtils.filterNonTimeDimensions(layer.dimensions),
               onLayerChangeDimension: function onLayerChangeDimension(dimensionName, dimensionValue) {
@@ -2279,8 +2412,9 @@ var LayerRowUnstyled = function LayerRowUnstyled(_ref7) {
                 });
               }
             })
-          }), jsx(Grid2, {
+          }), jsx(RowItemCollapse, {
             className: columnClasses.acceptanceTime,
+            collapsedColumns: collapsedColumns,
             children: layerAcceptanceTimeLayout || jsx(Acceptance, {
               acceptanceTime: layer.acceptanceTimeInMinutes,
               onChangeAcceptanceTime: changeAcceptanceTime
@@ -2311,10 +2445,10 @@ var LayerRowUnstyled = function LayerRowUnstyled(_ref7) {
     })
   );
 };
-var LayerRow = styled(LayerRowUnstyled)(function (_ref8) {
-  var theme = _ref8.theme,
-    _ref8$isEnabled = _ref8.isEnabled,
-    isEnabled = _ref8$isEnabled === void 0 ? true : _ref8$isEnabled;
+var LayerRow = styled(LayerRowUnstyled)(function (_ref9) {
+  var theme = _ref9.theme,
+    _ref9$isEnabled = _ref9.isEnabled,
+    isEnabled = _ref9$isEnabled === void 0 ? true : _ref9$isEnabled;
   return {
     '& .MuiInputBase-root': Object.assign({}, tooltipContainerStyles(theme, isEnabled)),
     '& .layerRow': {
@@ -2322,20 +2456,20 @@ var LayerRow = styled(LayerRowUnstyled)(function (_ref8) {
       border: '1px solid',
       borderColor: isEnabled ? theme.palette.geowebColors.layerManager.tableRowDefaultCardContainer.borderColor : theme.palette.geowebColors.layerManager.tableRowDisabledCardContainer.borderColor,
       borderRadius: 1 * theme.shape.borderRadius,
-      marginBottom: theme.spacing(0.5),
-      minHeight: '34px'
+      marginBottom: theme.spacing(0.25),
+      minHeight: '32px'
     }
   };
 });
-var Accordion = function Accordion(_ref9) {
-  var Styles = _ref9.Styles,
-    Acceptance = _ref9.Acceptance,
-    ShowLayerInfo = _ref9.ShowLayerInfo,
-    DeleteLayer = _ref9.DeleteLayer,
-    Opacity = _ref9.Opacity,
-    layerName = _ref9.layerName,
-    LeftButtons = _ref9.LeftButtons,
-    LoadDuration = _ref9.LoadDuration;
+var Accordion = function Accordion(_ref10) {
+  var Styles = _ref10.Styles,
+    Acceptance = _ref10.Acceptance,
+    ShowLayerInfo = _ref10.ShowLayerInfo,
+    DeleteLayer = _ref10.DeleteLayer,
+    Opacity = _ref10.Opacity,
+    layerName = _ref10.layerName,
+    LeftButtons = _ref10.LeftButtons,
+    LoadDuration = _ref10.LoadDuration;
   var _useCoreTranslation3 = useCoreTranslation(),
     t = _useCoreTranslation3.t;
   return jsx(CustomAccordion, {
@@ -3147,7 +3281,7 @@ var LayerInfoDialogConnect = function LayerInfoDialogConnect() {
 
 // Whenever a new layer is added index is updated in the dragHandle, which modifies the testing text. Below we ignore this text, as it serves no other purpose.
 var areEqual = function areEqual(prevProps, nextProps) {
-  if (prevProps.layerId === nextProps.layerId && prevProps.mapId === nextProps.mapId && prevProps.settings === nextProps.settings && prevProps.dragHandle.props.isDisabled === nextProps.dragHandle.props.isDisabled && prevProps.dragHandle.props.toolTipTitle === nextProps.dragHandle.props.toolTipTitle) {
+  if (prevProps.layerId === nextProps.layerId && prevProps.mapId === nextProps.mapId && prevProps.settings === nextProps.settings && prevProps.dragHandle.props.isDisabled === nextProps.dragHandle.props.isDisabled && prevProps.dragHandle.props.toolTipTitle === nextProps.dragHandle.props.toolTipTitle && prevProps.collapsedColumns === nextProps.collapsedColumns) {
     return true;
   }
   return false;
@@ -3157,7 +3291,8 @@ var LayerRowConnect = /*#__PURE__*/React.memo(function (_ref) {
   var layerId = _ref.layerId,
     mapId = _ref.mapId,
     dragHandle = _ref.dragHandle,
-    settings = _ref.settings;
+    settings = _ref.settings,
+    collapsedColumns = _ref.collapsedColumns;
   var isEnabled = useSelector(function (store) {
     return layerSelectors.getLayerEnabled(store, layerId);
   });
@@ -3249,7 +3384,8 @@ var LayerRowConnect = /*#__PURE__*/React.memo(function (_ref) {
       layerId: layerId
     }),
     disableActivateLayer: settings == null || (_settings$activateLay2 = settings.activateLayer) == null ? void 0 : _settings$activateLay2.isDisabled,
-    dragHandle: dragHandle
+    dragHandle: dragHandle,
+    collapsedColumns: collapsedColumns
   });
 }, areEqual);
 
@@ -3293,10 +3429,11 @@ var DragHandle = function DragHandle(_ref) {
   });
 };
 
-var _excluded$4 = ["mapId", "settings"];
+var _excluded$4 = ["mapId", "settings", "collapsedColumns"];
 var LayerContainerRow = /*#__PURE__*/React.memo(function (_ref) {
   var mapId = _ref.mapId,
     settings = _ref.settings,
+    collapsedColumns = _ref.collapsedColumns,
     gridProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var dispatch = useDispatch();
   var _React$useState = React.useState(false),
@@ -3395,7 +3532,8 @@ var LayerContainerRow = /*#__PURE__*/React.memo(function (_ref) {
         icon: settings == null || (_settings$dragHandle = settings.dragHandle) == null ? void 0 : _settings$dragHandle.icon,
         tooltipTitle: settings == null || (_settings$dragHandle2 = settings.dragHandle) == null ? void 0 : _settings$dragHandle2.tooltipTitle
       }),
-      settings: settings
+      settings: settings,
+      collapsedColumns: collapsedColumns
     }, "layerRowConnect-" + layerId);
   });
   React.useEffect(function () {
@@ -4366,7 +4504,6 @@ var BaseLayerRow = function BaseLayerRow(_ref2) {
     }, theme.palette.geowebColors.layerManager.baseLayerRow.root)
   }, gridProps, {
     children: [jsxs(Grid2, {
-      className: columnClasses.column1,
       sx: [{
         marginTop: '-2px'
       }, leftButtonsStyle],
@@ -4382,7 +4519,7 @@ var BaseLayerRow = function BaseLayerRow(_ref2) {
         }
       }), settings == null || (_settings$baseLayerRo2 = settings.baseLayerRow) == null ? void 0 : _settings$baseLayerRo2.title]
     }), jsx(Grid2, {
-      className: columnClasses.column2,
+      className: columnClasses.baseLayer,
       children: jsx(BaseLayersConnect, {
         mapId: mapId,
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
@@ -4507,7 +4644,6 @@ var ProjectionSelect = function ProjectionSelect(_ref) {
       height: '36px'
     },
     children: [jsx(Grid2, {
-      className: columnClasses.column1,
       sx: [{
         marginTop: '-2px'
       }, leftButtonsStyle],
@@ -4520,7 +4656,7 @@ var ProjectionSelect = function ProjectionSelect(_ref) {
         children: jsx(WorldMapProjection, {})
       })
     }), jsx(Grid2, {
-      className: columnClasses.column2,
+      className: columnClasses.baseLayer,
       children: jsx(FormControl, {
         style: {
           width: '100%'
@@ -4640,7 +4776,9 @@ var LayerManager = function LayerManager(_ref) {
     settings = _ref.settings,
     _ref$headerSize = _ref.headerSize,
     headerSize = _ref$headerSize === void 0 ? 'medium' : _ref$headerSize,
-    addLayerComponent = _ref.addLayerComponent;
+    addLayerComponent = _ref.addLayerComponent,
+    _ref$defaultCollapsed = _ref.defaultCollapsedColumns,
+    defaultCollapsedColumns = _ref$defaultCollapsed === void 0 ? {} : _ref$defaultCollapsed;
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
   var minSize = {
@@ -4655,6 +4793,10 @@ var LayerManager = function LayerManager(_ref) {
     sizeInState = _React$useState[0],
     setSizeInState = _React$useState[1];
   var dataSize = getLayerManagerSizeValue(sizeInState);
+  var _React$useState2 = React.useState(defaultCollapsedColumns),
+    collapsedColumns = _React$useState2[0],
+    setCollapsedColumns = _React$useState2[1];
+  var stopWheelEventPropagationRef = useWheelStopPropagation();
   return jsx(ToolContainerDraggable, {
     title: nonEmptyTitle,
     startSize: sizeInState,
@@ -4700,6 +4842,7 @@ var LayerManager = function LayerManager(_ref) {
       }
     },
     children: jsxs(Box, {
+      ref: stopWheelEventPropagationRef,
       onKeyDown: function onKeyDown(event) {
         event.stopPropagation();
       },
@@ -4727,10 +4870,16 @@ var LayerManager = function LayerManager(_ref) {
           children: [jsx(DescriptionRow, {
             source: source,
             settings: settings == null ? void 0 : settings.header,
-            addLayerComponent: addLayerComponent
+            addLayerComponent: addLayerComponent,
+            onToggleCollapsed: function onToggleCollapsed(name) {
+              var _Object$assign;
+              return setCollapsedColumns(Object.assign({}, collapsedColumns, (_Object$assign = {}, _Object$assign[name] = !collapsedColumns[name], _Object$assign)));
+            },
+            collapsedColumns: collapsedColumns
           }), jsx(LayerContainerRow, {
             mapId: mapId,
-            settings: settings == null ? void 0 : settings.content
+            settings: settings == null ? void 0 : settings.content,
+            collapsedColumns: collapsedColumns
           }), jsx(BaseLayerRow, {
             mapId: mapId,
             tooltip: t('layermanager-baselayers-tooltip'),
@@ -5472,6 +5621,10 @@ var MapViewConnect = function MapViewConnect(_ref) {
   var featureLayers = useSelector(function (store) {
     return mapSelectors.getMapFeatureLayers(store, mapId);
   });
+  var linkedFeatures = useSelector(function (store) {
+    var _store$syncronization;
+    return genericSelectors.selectLinkedFeatures((_store$syncronization = store.syncronizationGroupStore) == null ? void 0 : _store$syncronization.linkedState, mapId);
+  });
   var bbox = useSelector(function (store) {
     return mapSelectors.getBbox(store, mapId);
   });
@@ -5622,6 +5775,7 @@ var MapViewConnect = function MapViewConnect(_ref) {
       isGetCapabilitiesLoading: false
     }));
   }, [dispatch, mapId]);
+  var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
   return jsx("div", {
     style: {
       height: '100%'
@@ -5629,6 +5783,7 @@ var MapViewConnect = function MapViewConnect(_ref) {
     ref: mapRef,
     children: jsxs(MapView, Object.assign({}, props, {
       mapId: mapId,
+      isTimeScrollingEnabled: isTimeScrollingEnabled,
       srs: srs,
       bbox: bbox,
       mapPinLocation: displayMapPin ? mapPinLocation : undefined,
@@ -5695,6 +5850,11 @@ var MapViewConnect = function MapViewConnect(_ref) {
             });
           }
         }, layer), layer.id);
+      }), linkedFeatures == null ? void 0 : linkedFeatures.map(function (feature) {
+        return jsx(MapViewLayer, {
+          id: "feature-" + (feature == null ? void 0 : feature.id),
+          geojson: feature == null ? void 0 : feature.geoJSON
+        }, feature == null ? void 0 : feature.id);
       }), featureLayers.map(function (layer) {
         return jsx(MapViewLayer, Object.assign({
           id: "featurelayer-" + layer.id,
@@ -6027,6 +6187,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedlayerListString]);
   var hasLayers = layers && layers.length > 0;
+  var stopWheelEventPropagationRef = useWheelStopPropagation();
   return jsx(ToolContainerDraggable, {
     startPosition: {
       right: 10,
@@ -6048,6 +6209,7 @@ var GetFeatureInfoDialog = function GetFeatureInfoDialog(_ref) {
       },
       children: [isOpen && hasLayers && isInitialMapLocationChanged && jsx(Box, {
         "data-testid": "GetFeatureInfoList",
+        ref: stopWheelEventPropagationRef,
         children: layerToUpdateList.map(function (layer) {
           var layerId = layer.layerId,
             title = layer.title,
@@ -6945,7 +7107,9 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
   var mapId = _ref.mapId,
     onSetTimeSliderSpan = _ref.onSetTimeSliderSpan,
     unfilteredSelectedTime = _ref.unfilteredSelectedTime,
-    setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime;
+    setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
+    mapWindowRef = _ref.mapWindowRef;
+  var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
   var centerTime = useSelector(function (store) {
     return mapSelectors.getMapTimeSliderCenterTime(store, mapId);
   });
@@ -7009,6 +7173,8 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
   };
   return jsx(TimeSliderLegend, {
     mapId: mapId,
+    isTimeScrollingEnabled: isTimeScrollingEnabled,
+    mapWindowRef: mapWindowRef,
     centerTime: centerTime,
     timeSliderWidth: timeSliderWidth,
     secondsPerPx: secondsPerPx,
@@ -7161,7 +7327,8 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
   var sourceId = _ref.sourceId,
     mapId = _ref.mapId,
     _ref$isAlwaysVisible = _ref.isAlwaysVisible,
-    isAlwaysVisible = _ref$isAlwaysVisible === void 0 ? false : _ref$isAlwaysVisible;
+    isAlwaysVisible = _ref$isAlwaysVisible === void 0 ? false : _ref$isAlwaysVisible,
+    mapWindowRef = _ref.mapWindowRef;
   var isTimeSliderHoverOn = useSelector(function (store) {
     return mapSelectors.isTimeSliderHoverOn(store, mapId);
   });
@@ -7324,7 +7491,8 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
       mapId: mapId,
       onSetTimeSliderSpan: onSetTimeSliderSpan,
       unfilteredSelectedTime: unfilteredSelectedTime,
-      setUnfilteredSelectedTime: setUnfilteredSelectedTime
+      setUnfilteredSelectedTime: setUnfilteredSelectedTime,
+      mapWindowRef: mapWindowRef
     }),
     mapIsActive: mapIsActive,
     onToggleTimeSlider: onToggleTimeSliderVisibility,
@@ -7396,7 +7564,7 @@ var TimeSliderClockConnect = function TimeSliderClockConnect(_ref) {
   });
 };
 
-var _excluded = ["id", "dockedLayerManagerSize", "title", "layers", "dimensions", "shouldAutoUpdate", "shouldAnimate", "shouldAutoFetch", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "shouldDisplayDrawControls", "displaySearchButtonInMap", "mapControls", "children", "shouldDisablePrefetching"];
+var _excluded = ["id", "dockedLayerManagerSize", "title", "layers", "dimensions", "shouldAutoUpdate", "shouldAnimate", "shouldAutoFetch", "bbox", "srs", "shouldShowZoomControls", "displayMapPin", "showTimeSlider", "disableTimeSlider", "displayTimeInMap", "displayLayerManagerAndLegendButtonInMap", "displayDimensionSelectButtonInMap", "multiLegend", "shouldShowLayerManager", "shouldShowDockedLayerManager", "showClock", "displayGetFeatureInfoButtonInMap", "shouldDisplayDrawControls", "displaySearchButtonInMap", "mapControls", "children", "shouldDisablePrefetching", "tileServerSettings"];
 var titleStyle = function titleStyle(theme) {
   return {
     position: 'absolute',
@@ -7463,12 +7631,14 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
     mapControls = _ref.mapControls,
     children = _ref.children,
     shouldDisablePrefetching = _ref.shouldDisablePrefetching,
+    tileServerSettings = _ref.tileServerSettings,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var dispatch = useDispatch();
   var mapId = React__default.useRef(id || webmapUtils.generateMapId()).current;
   var customLayers = useSelector(function (store) {
     return mapSelectors.getdefaultMapSettingsLayers(store);
   });
+  var mapWindowRef = React__default.useRef(null);
   React__default.useEffect(function () {
     var addBaselayer = !(layers != null && layers.find(function (layer) {
       return layer.layerType === LayerType.baseLayer;
@@ -7541,6 +7711,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
   return React__default.useMemo(function () {
     renderCounter.count(ConfigurableMapConnect.name + "_" + mapId);
     return jsxs(Box, {
+      ref: mapWindowRef,
       sx: {
         width: '100%',
         height: '100%',
@@ -7581,7 +7752,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
         },
         children: jsx(TimeSliderConnect, {
           mapId: id,
-          sourceId: id
+          sourceId: id,
+          mapWindowRef: mapWindowRef
         })
       }), jsx(MapViewConnect, {
         controls: {},
@@ -7590,6 +7762,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
         shouldAutoFetch: shouldAutoFetch,
         mapId: mapId,
         shouldDisablePrefetching: shouldDisablePrefetching,
+        tileServerSettings: tileServerSettings,
         children: children
       }), multiLegend && jsx(LegendConnect, {
         showMapId: true,
@@ -7608,7 +7781,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_ref) {
         isDocked: true
       })]
     });
-  }, [children, disableTimeSlider, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, displayLayerManagerAndLegendButtonInMap, displaySearchButtonInMap, displayTimeInMap, id, mapControls, mapControlsPositionTop, mapId, multiLegend, showClock, shouldAutoFetch, title, shouldDisablePrefetching]);
+  }, [mapId, title, mapControlsPositionTop, displaySearchButtonInMap, id, displayLayerManagerAndLegendButtonInMap, multiLegend, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, tileServerSettings, mapControls, disableTimeSlider, displayTimeInMap, shouldAutoFetch, shouldDisablePrefetching, children, showClock]);
 };
 
 var mapBoxStyle = function mapBoxStyle(theme) {
@@ -7632,6 +7805,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
     multiLegend = _ref$multiLegend === void 0 ? false : _ref$multiLegend,
     _ref$showClock = _ref.showClock,
     showClock = _ref$showClock === void 0 ? true : _ref$showClock;
+  var multiMapWindowRef = React__default.useRef(null);
   var dispatch = useDispatch();
   var syncGroupAddTarget = React__default.useCallback(function (payload) {
     dispatch(genericActions.syncGroupAddTarget(payload));
@@ -7671,6 +7845,7 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       position: 'relative'
     },
     "data-testid": "MultiMapViewSliderConnect",
+    ref: multiMapWindowRef,
     children: [jsx("div", {
       style: {
         position: 'absolute',
@@ -7682,7 +7857,8 @@ var MultiMapViewConnect = function MultiMapViewConnect(_ref) {
       children: showTimeSlider && jsx(TimeSliderConnect, {
         sourceId: firstMapId,
         mapId: firstMapId,
-        isAlwaysVisible: true
+        isAlwaysVisible: true,
+        mapWindowRef: multiMapWindowRef
       })
     }), !multiLegend && jsx(LegendConnect, {
       showMapId: true,
@@ -8108,15 +8284,11 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
     syncGroupRemoveGroup = _ref.syncGroupRemoveGroup,
     onMouseDown = _ref.onMouseDown,
     _ref$order = _ref.order,
-    order = _ref$order === void 0 ? 0 : _ref$order;
+    order = _ref$order === void 0 ? 0 : _ref$order,
+    isTimeScrollingEnabled = _ref.isTimeScrollingEnabled,
+    toggleTimeScroll = _ref.toggleTimeScroll;
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
-  /*
-      _____ Handle Toggle _____
-        - Handles checking, unchecking and toggling between in groups
-        1. If checkbox is checked      -> uncheck it
-        2. If checkbox is not checked  -> check if its checked elsewhere and uncheck it if found
-  */
   var _handleToggle = function handleToggle(groupCategory, groupId, sourceId) {
     var _syncGroupViewState$g = syncGroupViewState[groupCategory].groups.find(function (groupObject) {
         return groupObject.id === groupId;
@@ -8131,7 +8303,6 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
       });
     } else {
       var groups = syncGroupViewState[groupCategory].groups;
-      // Check all other groups and if checkmark is found -> uncheck it
       for (var _iterator = _createForOfIteratorHelperLoose(groups), _step; !(_step = _iterator()).done;) {
         var group = _step.value;
         if (group.id !== groupId && group.selected.includes(sourceId)) {
@@ -8142,7 +8313,6 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
           });
         }
       }
-      // Add new checkmark
       syncGroupAddTarget({
         groupId: String(groupId),
         targetId: String(sourceId),
@@ -8150,11 +8320,6 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
       });
     }
   };
-  /*
-      _____ Add new group _____
-        - Called when user clicks on + in the sidepane
-        - Sends an action to add a new group in Redux
-  */
   var _addNewGroup = function addNewGroup(groupCategory, groupId) {
     syncGroupsSelector.groupTypes.forEach(function (_ref2) {
       var title = _ref2.title,
@@ -8170,11 +8335,6 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
       }
     });
   };
-  /*
-      _____ Remove Group _____
-        - Called when user clicks on the trashcan icon in sidepane
-        - Send an action to remove the group in Redux
-  */
   var _removeGroup = function removeGroup(groupCategory, groupId) {
     syncGroupsSelector.groupTypes.forEach(function (_ref3) {
       var groupType = _ref3.groupType;
@@ -8188,7 +8348,7 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
   if (!syncGroupViewState) {
     return null;
   }
-  return jsx(ToolContainerDraggable, {
+  return jsxs(ToolContainerDraggable, {
     title: t('syncgroups-title'),
     startSize: {
       width: 349,
@@ -8199,7 +8359,39 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
     "data-testid": "syncGroupViewer",
     onMouseDown: onMouseDown,
     order: order,
-    children: jsxs("div", {
+    children: [jsxs(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      children: [jsx(Typography, {
+        sx: {
+          fontSize: 12
+        },
+        children: t('workspace-time-scroll-off')
+      }), jsx(Switch, {
+        checked: isTimeScrollingEnabled,
+        onChange: function onChange() {
+          return toggleTimeScroll({
+            isTimeScrollingEnabled: !isTimeScrollingEnabled
+          });
+        }
+      }), jsx(Typography, {
+        sx: {
+          fontSize: 12
+        },
+        children: t('workspace-time-scroll-on')
+      }), jsx(Tooltip, {
+        title: t('workspace-time-scroll-info'),
+        placement: "bottom-start",
+        children: jsx(CustomIconButton, {
+          variant: "flat",
+          "aria-label": "time scroll info",
+          children: jsx(Info, {})
+        })
+      })]
+    }), jsxs("div", {
       children: [jsx(SyncGroupList, {
         viewStateData: syncGroupViewState.zoompane,
         title: t('syncgroups-zoom'),
@@ -8237,16 +8429,16 @@ var SyncGroupViewer = function SyncGroupViewer(_ref) {
           return _removeGroup('level', groupId);
         }
       })]
-    })
+    })]
   });
 };
 
 var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
   var dispatch = useDispatch();
-  // TODO
-  // Improve the selector to prevent re-renders
-  // For example dusting anination syncgroups should not re-render
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
   var viewState = useSelector(syncGroupsSelectors.syncGroupGetViewState);
+  var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
   var syncGroupAddGroup = React.useCallback(function (payload) {
     dispatch(genericActions.syncGroupAddGroup(payload));
   }, [dispatch]);
@@ -8264,6 +8456,14 @@ var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
     isDialogOpen = _useSetupDialog.isDialogOpen,
     onCloseDialog = _useSetupDialog.onCloseDialog,
     setDialogOrder = _useSetupDialog.setDialogOrder;
+  var toggleTimeScroll = React.useCallback(function (payload) {
+    var message = {
+      type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+      key: payload.isTimeScrollingEnabled === true ? t('workspace-time-scroll-toggle-on') : t('workspace-time-scroll-toggle-off')
+    };
+    dispatch(snackbarActions.openSnackbar(message));
+    dispatch(syncGroupsActions.syncGroupToggleIsTimeScrollingEnabled(payload));
+  }, [dispatch, t]);
   return jsx(SyncGroupViewer, {
     onClose: onCloseDialog,
     isOpen: isDialogOpen,
@@ -8273,7 +8473,9 @@ var SyncGroupViewerConnect = function SyncGroupViewerConnect() {
     syncGroupAddGroup: syncGroupAddGroup,
     syncGroupRemoveGroup: syncGroupRemoveGroup,
     order: dialogOrder,
-    onMouseDown: setDialogOrder
+    onMouseDown: setDialogOrder,
+    isTimeScrollingEnabled: isTimeScrollingEnabled,
+    toggleTimeScroll: toggleTimeScroll
   });
 };