@opengeoweb/time-series 20.2.0 → 21.0.0-nightly-20261031

package/dist/index.esm.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useCallback, useMemo, useState, useEffect, memo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { CustomIconButton, dateUtils, TooltipSelect, referenceTimeUtils, CustomAccordion, CustomTooltip, CustomToggleButton, ToolContainerDraggable, ToggleMenu, CustomDialog, SearchField, SearchHighlight, AlertBanner, useConfirmationDialog, SwitchButton, LegendToggleButton, useResizeObserver } from '@opengeoweb/shared';
+import { CustomIconButton, dateUtils, TooltipSelect, referenceTimeUtils, CustomAccordion, CustomTooltip, CustomToggleButton, ToggleMenu, ToolContainerDraggable, CustomDialog, SearchField, SearchHighlight, AlertBanner, useConfirmationDialog, SwitchButton, ResizablePanel, SortablePanels, LegendToggleButton, useResizeObserver } from '@opengeoweb/shared';
 import { snackbarActions, snackbarTypes, snackbarListener, snackbarReducer } from '@opengeoweb/snackbar';
 import { mapUtils, selectorMemoizationOptions, genericSelectors, uiSelectors, uiTypes, uiActions, useSetupDialog, mapSelectors, mapListener, serviceListener, layersListener, syncGroupsListener, genericListener, openlayersListener, uiReducer, syncGroupsReducer, layerReducer, serviceReducer, mapReducer, loadingIndicatorActions, useRegisterFeatureSyncSource, useUpdateFeatureSyncLayers, useSyncgroupTimeState, mapActions, layerActions } from '@opengeoweb/store';
 import { useTheme, MenuItem, LinearProgress, Grid, Box, Typography, ClickAwayListener, Input, Collapse, Button, List, ListItem, ListItemText, InputAdornment, ListItemButton, styled, Card, Stack, Tooltip, ListItemIcon, Checkbox } from '@mui/material';
 import { isString, trim, trimStart, compact, chain, groupBy, countBy, sortBy, uniqBy, isEqual } from 'lodash';
 import { ReactSortable } from 'react-sortablejs';
-import { Info, ArrowDropDownDown, Copy, Delete, Visibility, VisibilityOff, TimeSeriesSelect as TimeSeriesSelect$1, DragHandle, ChevronUp, ChevronDown, Add, DimensionsTime, DrawRegion, Cached, Edit, Location, useThemeContext, EChartsDarkTheme, EChartsLightTheme, Layers, LockLocked, LockUnlocked } from '@opengeoweb/theme';
+import { Info, ArrowDropDownDown, Copy, Delete, Visibility, VisibilityOff, TimeSeriesSelect as TimeSeriesSelect$1, DragHandle, ChevronUp, ChevronDown, Options, Add, DimensionsTime, DrawRegion, Cached, Edit, Location, EChartsDarkTheme, EChartsLightTheme, Layers, LockLocked, LockUnlocked } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';
 import '@opengeoweb/core';
@@ -63,6 +63,8 @@ var en = {
 	"timeseries-plot": "Plot",
 	"timeseries-remove": "Remove",
 	"timeseries-remove-confirm": "Are you sure you want to remove plot \"{{ id }}\"?",
+	"timeseries-plot-options": "Options",
+	"timeseries-plot-copy-title": "{{title}} (copy {{count}})",
 	"timeseries-duplicate": "Duplicate",
 	"timeseries-drag": "Drag",
 	"timeseries-edit-title": "Edit title",
@@ -178,6 +180,8 @@ var fi = {
 	"timeseries-plot": "Kuvaaja",
 	"timeseries-remove": "Poista",
 	"timeseries-remove-confirm": "Oletko varma, että haluat poistaa kuvaajan: {{ id }}",
+	"timeseries-plot-options": "Valinnat",
+	"timeseries-plot-copy-title": "{{title}} (copy {{count}})",
 	"timeseries-duplicate": "Monista",
 	"timeseries-drag": "Raahaa",
 	"timeseries-edit-title": "Muokkaa otsikkoa",
@@ -292,6 +296,8 @@ var no = {
 	"timeseries-plot": "Plott",
 	"timeseries-remove": "Fjern",
 	"timeseries-remove-confirm": "Er du sikker på at du vil fjerne plott \"{{ id }}\"?",
+	"timeseries-plot-options": "Alternativer",
+	"timeseries-plot-copy-title": "{{title}} (copy {{count}})",
 	"timeseries-duplicate": "Dupliser",
 	"timeseries-drag": "Dra",
 	"timeseries-edit-title": "Endre tittel",
@@ -410,6 +416,8 @@ var nl = {
 	"timeseries-plot": "Plot",
 	"timeseries-remove": "Verwijderen",
 	"timeseries-remove-confirm": "Weet je zeker dat je plot \"{{ id }}\" wilt verwijderen?",
+	"timeseries-plot-options": "Opties",
+	"timeseries-plot-copy-title": "{{title}} (copy {{count}})",
 	"timeseries-duplicate": "Dupliceren",
 	"timeseries-drag": "Slepen",
 	"timeseries-edit-title": "Titel bewerken",
@@ -1208,6 +1216,55 @@ var panelSlice = createSlice({
         plotId: generateTimeSeriesId()
       });
     },
+    setPlotIsOpen: function setPlotIsOpen(draft, action) {
+      var _draft$plotPreset;
+      var plot = (_draft$plotPreset = draft.plotPreset) == null ? void 0 : _draft$plotPreset.plots.find(function (item) {
+        return item.plotId === action.payload.plotId;
+      });
+      if (plot) {
+        plot.isOpen = action.payload.isOpen;
+      }
+    },
+    setPlotSize: function setPlotSize(draft, action) {
+      draft.plotPreset.plots = draft.plotPreset.plots.map(function (plot) {
+        if (plot.plotId === action.payload.plotId) {
+          return Object.assign({}, plot, {
+            customSize: action.payload.size
+          });
+        }
+        return plot;
+      });
+    },
+    duplicatePlot: function duplicatePlot(draft, action) {
+      var _preset$parameters;
+      var preset = draft.plotPreset;
+      var sourceIndex = preset ? preset.plots.findIndex(function (plot) {
+        return plot.plotId === action.payload.plotId;
+      }) : -1;
+      if (!preset || sourceIndex < 0) {
+        return;
+      }
+      var source = preset.plots[sourceIndex];
+      var newPlotId = generateTimeSeriesId();
+      var duplicatedPlot = Object.assign({}, source, {
+        title: action.payload.title,
+        plotId: newPlotId
+      });
+      var duplicatedParameters = preset.parameters.filter(function (parameter) {
+        return parameter.plotId === source.plotId;
+      }).map(function (parameter) {
+        return Object.assign({}, parameter, {
+          id: generateParameterId(),
+          plotId: newPlotId
+        }, parameter.dimensions ? {
+          dimensions: parameter.dimensions.map(function (dimension) {
+            return Object.assign({}, dimension);
+          })
+        } : {});
+      });
+      preset.plots.splice(sourceIndex + 1, 0, duplicatedPlot);
+      (_preset$parameters = preset.parameters).push.apply(_preset$parameters, duplicatedParameters);
+    },
     deleteParameter: function deleteParameter(draft, action) {
       draft.plotPreset.parameters = draft.plotPreset.parameters.filter(function (parameter) {
         return parameter.id !== action.payload.parameterId;
@@ -1249,8 +1306,8 @@ var panelSlice = createSlice({
       });
     },
     updateTitle: function updateTitle(draft, action) {
-      var _draft$plotPreset;
-      var plot = (_draft$plotPreset = draft.plotPreset) == null ? void 0 : _draft$plotPreset.plots.find(function (elem) {
+      var _draft$plotPreset2;
+      var plot = (_draft$plotPreset2 = draft.plotPreset) == null ? void 0 : _draft$plotPreset2.plots.find(function (elem) {
         return elem.plotId === action.payload.plotId;
       });
       if (plot) {
@@ -1264,15 +1321,43 @@ var panelSlice = createSlice({
       }
     },
     movePlot: function movePlot(draft, action) {
-      var _draft$plotPreset2;
+      var _draft$plotPreset3;
       var _action$payload = action.payload,
         oldIndex = _action$payload.oldIndex,
         newIndex = _action$payload.newIndex;
-      if (!((_draft$plotPreset2 = draft.plotPreset) != null && _draft$plotPreset2.plots)) {
+      if (!((_draft$plotPreset3 = draft.plotPreset) != null && _draft$plotPreset3.plots)) {
         return;
       }
       draft.plotPreset.plots = mapUtils.moveArrayElements(draft.plotPreset.plots, oldIndex, newIndex);
     },
+    reorderPlots: function reorderPlots(draft, action) {
+      var _draft$plotPreset4;
+      var newOrder = action.payload.newOrder;
+      if (!((_draft$plotPreset4 = draft.plotPreset) != null && _draft$plotPreset4.plots)) {
+        return;
+      }
+      var plotsById = new Map(draft.plotPreset.plots.map(function (plot) {
+        return [plot.plotId, plot];
+      }));
+      var orderedPlots = Array.from(new Set(newOrder)).map(function (id) {
+        return plotsById.get(id);
+      }).filter(function (plot) {
+        return plot !== undefined;
+      });
+      var reorderedIds = new Set(orderedPlots.map(function (plot) {
+        return plot.plotId;
+      }));
+      var nextIndex = 0;
+      // Hidden plots are absent from the sortable list and retain their position.
+      draft.plotPreset.plots = draft.plotPreset.plots.map(function (plot) {
+        if (!reorderedIds.has(plot.plotId)) {
+          return plot;
+        }
+        var reorderedPlot = orderedPlots[nextIndex];
+        nextIndex += 1;
+        return reorderedPlot;
+      });
+    },
     moveParameter: function moveParameter(draft, action) {
       var _action$payload2 = action.payload,
         oldIndex = _action$payload2.oldIndex,
@@ -1864,6 +1949,20 @@ var getPlotState = function getPlotState(state, panelId) {
   var _getPanelState;
   return (_getPanelState = getPanelState(state, panelId)) == null ? void 0 : _getPanelState.plotPreset;
 };
+var getPlotById = function getPlotById(state, panelId, plotId) {
+  var _getPlotState;
+  return (_getPlotState = getPlotState(state, panelId)) == null ? void 0 : _getPlotState.plots.find(function (plot) {
+    return plot.plotId === plotId;
+  });
+};
+var getPlotIsOpen = function getPlotIsOpen(state, panelId, plotId) {
+  var plot = getPlotById(state, panelId, plotId);
+  return !!plot && plot.isOpen !== false;
+};
+var getPlotCustomSize = function getPlotCustomSize(state, panelId, plotId) {
+  var _getPlotById;
+  return (_getPlotById = getPlotById(state, panelId, plotId)) == null ? void 0 : _getPlotById.customSize;
+};
 var getTimeSeriesState = function getTimeSeriesState(state, panelId) {
   return getPanelState(state, panelId);
 };
@@ -2166,6 +2265,9 @@ var selectors = /*#__PURE__*/Object.freeze({
   getParameterById: getParameterById,
   getParameterInfoParameter: getParameterInfoParameter,
   getParametersInUse: getParametersInUse,
+  getPlotById: getPlotById,
+  getPlotCustomSize: getPlotCustomSize,
+  getPlotIsOpen: getPlotIsOpen,
   getPlotState: getPlotState,
   getPlotWithParameters: getPlotWithParameters,
   getSearchFilter: getSearchFilter,
@@ -4115,6 +4217,7 @@ var PlotRows = function PlotRows(_ref) {
     rowIndex = _ref.rowIndex,
     showTooltip = _ref.showTooltip,
     deletePlot = _ref.deletePlot,
+    duplicatePlot = _ref.duplicatePlot,
     togglePlot = _ref.togglePlot,
     deleteParameter = _ref.deleteParameter,
     selectPlotId = _ref.selectPlotId,
@@ -4153,17 +4256,10 @@ var PlotRows = function PlotRows(_ref) {
       actions: jsxs(Grid, {
         container: true,
         sx: {
-          justifyContent: 'space-between'
+          alignItems: 'center',
+          justifyContent: 'flex-end'
         },
         children: [jsx(CustomIconButton, {
-          "data-testid": "deleteButton",
-          onClick: function onClick() {
-            deletePlot(plot.plotId);
-          },
-          shouldShowAsDisabled: !plotIsEnabled,
-          tooltipTitle: t('timeseries-remove') + " " + plot.title,
-          children: jsx(Delete, {})
-        }), jsx(CustomIconButton, {
           "data-testid": "openParameterListButton",
           onClick: function onClick(event) {
             event.stopPropagation();
@@ -4171,6 +4267,30 @@ var PlotRows = function PlotRows(_ref) {
           },
           tooltipTitle: t('timeseries-open-param-list'),
           children: openParameterList ? jsx(ChevronUp, {}) : jsx(ChevronDown, {})
+        }), jsx(ToggleMenu, {
+          buttonIcon: jsx(Options, {}),
+          buttonSx: {
+            margin: '0 2px',
+            '&.MuiButtonBase-root': {
+              backgroundColor: 'transparent'
+            }
+          },
+          buttonTestId: "duplicatePlotMenu_" + plot.plotId,
+          menuItems: [{
+            text: t('timeseries-duplicate'),
+            action: function action() {
+              return duplicatePlot(plot.plotId);
+            },
+            icon: jsx(Copy, {})
+          }, {
+            text: t('timeseries-remove'),
+            action: function action() {
+              return deletePlot(plot.plotId);
+            },
+            icon: jsx(Delete, {})
+          }],
+          tooltipTitle: t('timeseries-plot-options'),
+          variant: "flat"
         })]
       }),
       collection: jsx(TimeSeriesSelectButtonConnect, {
@@ -4371,6 +4491,7 @@ var TimeSeriesManager = function TimeSeriesManager(_ref) {
     plotState = _ref.plotState,
     addPlot = _ref.addPlot,
     deletePlot = _ref.deletePlot,
+    duplicatePlot = _ref.duplicatePlot,
     togglePlot = _ref.togglePlot,
     addParameter = _ref.addParameter,
     deleteParameter = _ref.deleteParameter,
@@ -4500,6 +4621,7 @@ var TimeSeriesManager = function TimeSeriesManager(_ref) {
             addParameter: addParameter,
             deleteParameter: deleteParameter,
             deletePlot: deletePlot,
+            duplicatePlot: duplicatePlot,
             moveParameter: moveParameter,
             panelId: panelId,
             patchParameter: patchParameter,
@@ -6334,6 +6456,41 @@ var TimeSeriesSelectConnect = function TimeSeriesSelectConnect(_ref) {
 
 var DIALOG_TYPE_MANAGER = uiTypes.DialogTypes.TimeSeriesManager;
 var origin = TimeSeriesActionOrigin.timeSeriesManager;
+var getNextPlotCopyTitle = function getNextPlotCopyTitle(sourceTitle, plots, t) {
+  var _sourceCopy$baseTitle, _sourceCopy$copyNumbe;
+  var titleToken = '__PLOT_TITLE__';
+  var countToken = '__COPY_NUMBER__';
+  var template = t('timeseries-plot-copy-title', {
+    title: titleToken,
+    count: countToken
+  });
+  var titleTokenIndex = template.indexOf(titleToken);
+  var countTokenIndex = template.indexOf(countToken);
+  var prefix = template.slice(0, titleTokenIndex);
+  var numberPrefix = template.slice(titleTokenIndex + titleToken.length, countTokenIndex);
+  var suffix = template.slice(countTokenIndex + countToken.length);
+  var copyTitlePattern = new RegExp("^" + escapeRegExp(prefix) + "(.*?)" + escapeRegExp(numberPrefix) + "(\\d+)" + escapeRegExp(suffix) + "$");
+  var getCopyTitleParts = function getCopyTitleParts(title) {
+    var match = title.match(copyTitlePattern);
+    return match ? {
+      baseTitle: match[1],
+      copyNumber: Number(match[2])
+    } : undefined;
+  };
+  var sourceCopy = getCopyTitleParts(sourceTitle);
+  var baseTitle = (_sourceCopy$baseTitle = sourceCopy == null ? void 0 : sourceCopy.baseTitle) != null ? _sourceCopy$baseTitle : sourceTitle;
+  var highestCopyNumber = plots.reduce(function (highest, plot) {
+    var plotCopy = getCopyTitleParts(plot.title);
+    return (plotCopy == null ? void 0 : plotCopy.baseTitle) === baseTitle ? Math.max(highest, plotCopy.copyNumber) : highest;
+  }, (_sourceCopy$copyNumbe = sourceCopy == null ? void 0 : sourceCopy.copyNumber) != null ? _sourceCopy$copyNumbe : 0);
+  return t('timeseries-plot-copy-title', {
+    title: baseTitle,
+    count: highestCopyNumber + 1
+  });
+};
+var escapeRegExp = function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};
 var TimeSeriesManagerConnect = function TimeSeriesManagerConnect(_ref) {
   var preloadedTimeseriesServices = _ref.preloadedTimeseriesServices;
   var panelId = useSelector(function (store) {
@@ -6397,6 +6554,20 @@ var TimeSeriesManagerConnect = function TimeSeriesManagerConnect(_ref) {
       title: title
     }));
   };
+  var duplicatePlot = function duplicatePlot(plotId) {
+    var plot = plotState == null ? void 0 : plotState.plots.find(function (item) {
+      return item.plotId === plotId;
+    });
+    if (!plot || !plotState) {
+      return;
+    }
+    dispatch(timeSeriesActions.duplicatePlot({
+      panelId: panelId,
+      origin: origin,
+      plotId: plotId,
+      title: getNextPlotCopyTitle(plot.title, plotState.plots, t)
+    }));
+  };
   var deleteParameter = function deleteParameter(parameterId) {
     dispatch(timeSeriesActions.deleteParameter({
       panelId: panelId,
@@ -6460,6 +6631,7 @@ var TimeSeriesManagerConnect = function TimeSeriesManagerConnect(_ref) {
       addPlot: addPlot,
       deleteParameter: deleteParameter,
       deletePlot: deletePlot,
+      duplicatePlot: duplicatePlot,
       isOpen: isDialogOpen,
       moveParameter: moveParameter,
       movePlot: movePlot,
@@ -7308,18 +7480,16 @@ var getYAxis = function getYAxis(plotCharts) {
         parameters = _ref[1];
       var position = unitIndex % 2 === 0 ? 'left' : 'right';
       var offset = Math.floor(unitIndex / 2) * Y_AXIS_OFFSET;
-      var name = unitIndex === 0 ? plotChart.title : undefined;
       var allValues = parameters.flatMap(function (parameter) {
         return parameter.value;
       }).filter(function (value) {
         return value !== null && !isNaN(value);
       });
       if (allValues.length === 0) {
-        // still show the axis and plot name, but without min/max if there is no data
+        // still show the axis, but without min/max if there is no data
         return {
           type: 'value',
           position: position,
-          name: name,
           axisTick: {
             show: false
           },
@@ -7354,7 +7524,6 @@ var getYAxis = function getYAxis(plotCharts) {
       return {
         type: 'value',
         position: position,
-        name: name,
         axisTick: {
           show: true
         },
@@ -7431,15 +7600,105 @@ var roundDecimalValues = function roundDecimalValues(value) {
   }
   return Number.isInteger(value) ? value.toString() : value.toFixed(1);
 };
-var getOption = function getOption(plotsWithData, shouldShowLegend) {
+/** Shared category order for panel charts and their zoom preview. */
+var getSharedTimesteps = function getSharedTimesteps(plots) {
+  // Keep the time domain stable when collapsing a panel; only its preview contribution changes.
+  var timesteps = new Map();
+  plots.filter(function (plot) {
+    return plot.enabled !== false;
+  }).forEach(function (plot) {
+    plot.parametersWithData.forEach(function (parameter) {
+      parameter.timestep.forEach(function (time) {
+        if (Number.isFinite(time.getTime())) {
+          timesteps.set(time.getTime(), time);
+        }
+      });
+    });
+  });
+  return Array.from(timesteps.values()).sort(function (first, second) {
+    return first.getTime() - second.getTime();
+  });
+};
+/** Build a unit-independent overview from visible, open plots and enabled parameters. */
+var getZoomPreviewPlot = function getZoomPreviewPlot(plots) {
+  var visiblePlots = plots.filter(function (plot) {
+    return plot.enabled !== false;
+  });
+  var contributions = new Map();
+  visiblePlots.filter(function (plot) {
+    return plot.isOpen !== false;
+  }).forEach(function (plot) {
+    var plotValues = new Map();
+    plot.parametersWithData.filter(function (parameter) {
+      return parameter.enabled !== false;
+    }).forEach(function (parameter) {
+      var values = parameter.value.filter(Number.isFinite);
+      if (!values.length) {
+        return;
+      }
+      var minimum = Math.min.apply(Math, values);
+      var range = Math.max.apply(Math, values) - minimum;
+      parameter.timestep.forEach(function (time, index) {
+        var _plotValues$get;
+        var value = parameter.value[index];
+        if (!Number.isFinite(value) || !Number.isFinite(time.getTime())) {
+          return;
+        }
+        var normalized = range ? (value - minimum) / range : 0.5;
+        var samples = (_plotValues$get = plotValues.get(time.getTime())) != null ? _plotValues$get : [];
+        samples.push(normalized);
+        plotValues.set(time.getTime(), samples);
+      });
+    });
+    // Give each plot equal weight, regardless of how many parameters it contains.
+    plotValues.forEach(function (values, time) {
+      var _contributions$get;
+      var samples = (_contributions$get = contributions.get(time)) != null ? _contributions$get : [];
+      samples.push(values.reduce(function (sum, value) {
+        return sum + value;
+      }, 0) / values.length);
+      contributions.set(time, samples);
+    });
+  });
+  var timestep = getSharedTimesteps(plots);
+  var plotId = 'zoom-preview';
+  return {
+    plotId: plotId,
+    title: '',
+    parametersWithData: [{
+      id: plotId,
+      plotId: plotId,
+      propertyName: 'preview',
+      plotType: 'line',
+      serviceId: '',
+      collectionId: '',
+      unit: '',
+      opacity: 100,
+      timestep: timestep,
+      value: timestep.map(function (time) {
+        var values = contributions.get(time.getTime());
+        return values != null && values.length ? values.reduce(function (sum, value) {
+          return sum + value;
+        }, 0) / values.length : NaN;
+      })
+    }]
+  };
+};
+var getOption = function getOption(plotsWithData, shouldShowLegend, sharedTimesteps) {
   if (shouldShowLegend === void 0) {
     shouldShowLegend = true;
   }
   var parameterNames = createParameterNames(plotsWithData);
   var plotCharts = getPlotCharts(plotsWithData);
-  var xAxis = getXAxis(plotCharts);
+  var xAxis = getXAxis(plotCharts).map(function (axis) {
+    return Object.assign({}, axis, sharedTimesteps && {
+      data: sharedTimesteps.map(function (time) {
+        return time.toISOString();
+      })
+    });
+  });
   var yAxis = getYAxis(plotCharts);
-  var series = getSeries(plotCharts, parameterNames);
+  var series = getSeries(plotCharts, parameterNames, sharedTimesteps);
   var grid = getGrid(plotCharts);
   var tooltip = {
     trigger: 'axis',
@@ -7602,7 +7861,7 @@ var getEChartsSeriesDataByTimestep = function getEChartsSeriesDataByTimestep(tim
   });
   return data;
 };
-var getSeries = function getSeries(plotCharts, parameterNames) {
+var getSeries = function getSeries(plotCharts, parameterNames, sharedTimesteps) {
   var allTimesteps = plotCharts.flatMap(function (plotChart) {
     return Object.values(plotChart.parametersByUnit).flatMap(function (parameters) {
       return parameters.flatMap(function (parameter) {
@@ -7623,7 +7882,7 @@ var getSeries = function getSeries(plotCharts, parameterNames) {
         var color = (_COLOR_NAME_TO_HEX_MA = COLOR_NAME_TO_HEX_MAP[parameter.color]) != null ? _COLOR_NAME_TO_HEX_MA : COLOR_NAME_TO_HEX_MAP[COLOR_MAP[parameter.propertyName]];
         var type = parameter.plotType === 'area' ? 'line' : parameter.plotType;
         return Object.assign({
-          data: getEChartsSeriesDataByTimestep(uniqueTimesteps, parameter),
+          data: getEChartsSeriesDataByTimestep(sharedTimesteps != null ? sharedTimesteps : uniqueTimesteps, parameter),
           name: (_parameterNames$find = parameterNames.find(function (pName) {
             return pName.id === getParameterKey$1(parameter);
           })) == null ? void 0 : _parameterNames$find.name,
@@ -7691,6 +7950,177 @@ function getPlotCharts(plotsWithData) {
   return plotCharts;
 }
 
+/** One clock per view; standalone charts can use their own clock. Times are milliseconds. */
+var useCurrentTime = function useCurrentTime(enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
+  var _React$useState = React.useState(Date.now),
+    now = _React$useState[0],
+    setNow = _React$useState[1];
+  React.useEffect(function () {
+    if (!enabled) {
+      return undefined;
+    }
+    var update = function update() {
+      return setNow(Date.now());
+    };
+    update();
+    var timer = window.setInterval(update, 60000);
+    return function () {
+      return window.clearInterval(timer);
+    };
+  }, [enabled]);
+  return now;
+};
+/** Fractional category index, preserving the spacing of the chart's time axis. */
+var getCurrentTimeIndex = function getCurrentTimeIndex(timestamps, currentTime) {
+  if (!Number.isFinite(currentTime) || !timestamps.length || currentTime < timestamps[0] || currentTime > timestamps[timestamps.length - 1]) {
+    return undefined;
+  }
+  var next = timestamps.findIndex(function (time) {
+    return time >= currentTime;
+  });
+  if (next < 0) {
+    return undefined;
+  }
+  if (next === 0 || timestamps[next] === currentTime) {
+    return next;
+  }
+  return next - 1 + (currentTime - timestamps[next - 1]) / (timestamps[next] - timestamps[next - 1]);
+};
+var getCurrentTimeLines = function getCurrentTimeLines(instance, currentTime, showPlots, showZoom) {
+  if (instance.isDisposed()) {
+    return [];
+  }
+  var api = instance;
+  var model = api.getModel();
+  if (!model) {
+    return [];
+  }
+  var lines = [];
+  model.eachComponent('xAxis', function (axis) {
+    var timestamps = axis.getCategories().map(function (time) {
+      return Date.parse(time);
+    });
+    var index = getCurrentTimeIndex(timestamps, currentTime);
+    if (index === undefined) {
+      return;
+    }
+    var _axis$axis$scale$getE = axis.axis.scale.getExtent(),
+      min = _axis$axis$scale$getE[0],
+      max = _axis$axis$scale$getE[1];
+    if (showPlots && index >= min && index <= max) {
+      var _model$getComponent;
+      var rect = (_model$getComponent = model.getComponent('grid', axis.get('gridIndex'))) == null || (_model$getComponent = _model$getComponent.coordinateSystem) == null ? void 0 : _model$getComponent.getRect();
+      var lower = Math.floor(index);
+      var upper = Math.ceil(index);
+      var left = instance.convertToPixel({
+        xAxisIndex: axis.componentIndex
+      }, lower);
+      var right = instance.convertToPixel({
+        xAxisIndex: axis.componentIndex
+      }, upper);
+      var x = left + (right - left) * (index - lower);
+      if (rect && Number.isFinite(x) && x >= rect.x && x <= rect.x + rect.width) {
+        lines.push({
+          id: "plot-" + axis.componentIndex,
+          x: x,
+          y: rect.y,
+          height: rect.height
+        });
+      }
+    }
+    if (showZoom && axis.componentIndex === 0) {
+      var _displayables$sliderG;
+      var zoom = model.getComponent('dataZoom', 0);
+      var view = zoom && zoom.get('show') && api.getViewOfComponentModel(zoom);
+      var _ref = view || {},
+        displayables = _ref._displayables;
+      var background = displayables == null || (_displayables$sliderG = displayables.sliderGroup) == null ? void 0 : _displayables$sliderG.childAt(0);
+      if (background) {
+        background.getComputedTransform();
+        var start = background.transformCoordToGlobal(0, 0);
+        var end = background.transformCoordToGlobal(background.shape.width, background.shape.height);
+        var fraction = timestamps.length === 1 ? 0.5 : index / (timestamps.length - 1);
+        lines.push({
+          id: 'zoom',
+          x: start[0] + fraction * (end[0] - start[0]),
+          y: Math.min(start[1], end[1]),
+          height: Math.abs(end[1] - start[1])
+        });
+      }
+    }
+  });
+  return lines;
+};
+var CurrentTime = function CurrentTime(_ref2) {
+  var instance = _ref2.instance,
+    currentTime = _ref2.currentTime,
+    showPlots = _ref2.showPlots,
+    showZoom = _ref2.showZoom;
+  var theme = useTheme();
+  var _React$useState2 = React.useState([]),
+    lines = _React$useState2[0],
+    setLines = _React$useState2[1];
+  React.useEffect(function () {
+    if (!instance) {
+      return undefined;
+    }
+    var update = function update() {
+      var next = getCurrentTimeLines(instance, currentTime, showPlots, showZoom);
+      setLines(function (previous) {
+        return JSON.stringify(previous) === JSON.stringify(next) ? previous : next;
+      });
+    };
+    update();
+    instance.on('rendered', update);
+    return function () {
+      if (!instance.isDisposed()) {
+        instance.off('rendered', update);
+      }
+    };
+  }, [instance, currentTime, showPlots, showZoom]);
+  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
+    playerNeedleTime = _theme$palette$geoweb.playerNeedleTime,
+    playerNeedleTimeTop = _theme$palette$geoweb.playerNeedleTimeTop;
+  return jsx("svg", {
+    "aria-hidden": "true",
+    "data-testid": "CurrentTime",
+    style: {
+      position: 'absolute',
+      inset: 0,
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none',
+      overflow: 'hidden'
+    },
+    children: lines.map(function (_ref3) {
+      var id = _ref3.id,
+        x = _ref3.x,
+        y = _ref3.y,
+        height = _ref3.height;
+      return jsxs("g", {
+        children: [jsx("line", {
+          stroke: playerNeedleTime.rgba,
+          strokeWidth: 7,
+          x1: x,
+          x2: x,
+          y1: y,
+          y2: y + height
+        }), jsx("line", {
+          stroke: playerNeedleTimeTop.rgba,
+          strokeWidth: 2,
+          x1: x,
+          x2: x,
+          y1: y,
+          y2: y + height
+        })]
+      }, id);
+    })
+  });
+};
+
 // Guard: mocked ReactECharts (forwardRef) has no real prototype chain.
 var reactEChartsProto = ReactECharts.prototype;
 var echartsReactCoreProto = reactEChartsProto ? Object.getPrototypeOf(reactEChartsProto) : null;
@@ -7733,10 +8163,20 @@ var useChartHeight = function useChartHeight(_ref) {
   var plotsWithData = _ref.plotsWithData,
     shouldShowLegend = _ref.shouldShowLegend,
     option = _ref.option,
-    onLegendHeightChange = _ref.onLegendHeightChange;
-  var getDefaultHeight = function getDefaultHeight(plotsWithData) {
+    _ref$fitToContainer = _ref.fitToContainer,
+    fitToContainer = _ref$fitToContainer === void 0 ? false : _ref$fitToContainer,
+    _ref$shouldShowZoom = _ref.shouldShowZoom,
+    shouldShowZoom = _ref$shouldShowZoom === void 0 ? true : _ref$shouldShowZoom,
+    controlsOnly = _ref.controlsOnly;
+  var getDefaultHeight = React.useCallback(function (plotsWithData) {
+    if (controlsOnly === 'legend') {
+      return 32;
+    }
+    if (controlsOnly === 'zoom') {
+      return 52;
+    }
     return 100 + PLOT_HEIGHT * plotsWithData.length;
-  };
+  }, [controlsOnly]);
   var _React$useState = React.useState(getDefaultHeight(plotsWithData)),
     chartHeight = _React$useState[0],
     setChartHeight = _React$useState[1];
@@ -7745,6 +8185,12 @@ var useChartHeight = function useChartHeight(_ref) {
     if (echartsInstance.isDisposed()) {
       return;
     }
+    // Use the current container size before measuring a wrapped legend.
+    // This also clears explicit dimensions captured during async init.
+    echartsInstance.resize({
+      width: 'auto',
+      height: 'auto'
+    });
     var legendApi = echartsInstance;
     if (legendApi.getModel() !== null) {
       var _option$grid;
@@ -7752,14 +8198,17 @@ var useChartHeight = function useChartHeight(_ref) {
       var legendView = legendApi.getViewOfComponentModel(legend);
       var _legendView$group$get = legendView.group.getBoundingRect(),
         height = _legendView$group$get.height;
-      onLegendHeightChange == null || onLegendHeightChange(shouldShowLegend ? height : 0);
       var grid = (_option$grid = option.grid) != null ? _option$grid : [];
       var gridArray = Array.isArray(grid) ? grid : [];
       // eslint-disable-next-line @typescript-eslint/no-unsafe-return
       var newGrid = gridArray.map(function (grid) {
         return Object.assign({}, grid, {
           top: shouldShowLegend ? parseInt(grid.top, 10) + height + "px" : grid.top
-        });
+        }, fitToContainer ? {
+          top: shouldShowLegend ? 20 + height : 8,
+          height: 'auto',
+          bottom: shouldShowZoom ? 75 : 24
+        } : {});
       });
       echartsInstance.setOption({
         legend: {
@@ -7767,13 +8216,14 @@ var useChartHeight = function useChartHeight(_ref) {
           height: shouldShowLegend ? height : 0,
           show: shouldShowLegend
         },
-        grid: newGrid
+        grid: controlsOnly ? gridArray : newGrid
       });
       var newHeight = getDefaultHeight(plotsWithData) + (shouldShowLegend ? height : 0);
-      setChartHeight(newHeight);
-      echartsInstance.resize();
+      if (!fitToContainer) {
+        setChartHeight(controlsOnly === 'legend' ? Math.ceil(height) : newHeight);
+      }
     }
-  }, [option.grid, plotsWithData, shouldShowLegend, onLegendHeightChange]);
+  }, [option.grid, plotsWithData, shouldShowLegend, fitToContainer, controlsOnly, getDefaultHeight, shouldShowZoom]);
   React.useEffect(function () {
     var _chartRef$current;
     var instance = (_chartRef$current = chartRef.current) == null ? void 0 : _chartRef$current.getEchartsInstance();
@@ -7788,6 +8238,9 @@ var useChartHeight = function useChartHeight(_ref) {
     }
   }, [shouldShowLegend, updateHeight]);
   React.useEffect(function () {
+    if ((fitToContainer || controlsOnly) && typeof ResizeObserver !== 'undefined') {
+      return undefined;
+    }
     var onHeight = function onHeight() {
       var _chartRef$current2;
       var instance = (_chartRef$current2 = chartRef.current) == null ? void 0 : _chartRef$current2.getEchartsInstance();
@@ -7799,13 +8252,78 @@ var useChartHeight = function useChartHeight(_ref) {
     return function () {
       window.removeEventListener('resize', onHeight);
     };
-  }, [updateHeight]);
+  }, [fitToContainer, controlsOnly, updateHeight]);
   return {
     chartHeight: chartHeight,
     chartRef: chartRef,
     updateHeight: updateHeight
   };
 };
+var useChartSynchronization = function useChartSynchronization() {
+  var instances = React.useRef(new Map());
+  var zoomState = React.useRef(null);
+  return React.useMemo(function () {
+    return {
+      zoomState: zoomState,
+      register: function register(instance, syncPointer) {
+        if (syncPointer === void 0) {
+          syncPointer = true;
+        }
+        instances.current.set(instance, syncPointer);
+        if (zoomState.current && !instance.isDisposed()) {
+          instance.dispatchAction(Object.assign({
+            type: 'dataZoom'
+          }, zoomState.current), {
+            silent: true
+          });
+        }
+      },
+      unregister: function unregister(instance) {
+        instances.current["delete"](instance);
+      },
+      zoom: function zoom(state, source) {
+        zoomState.current = state;
+        instances.current.forEach(function (_syncPointer, instance) {
+          if (instance !== source && !instance.isDisposed()) {
+            instance.dispatchAction(Object.assign({
+              type: 'dataZoom'
+            }, state), {
+              silent: true
+            });
+          }
+        });
+      },
+      pointer: function pointer(event, source) {
+        var _event$axesInfo;
+        var axis = (_event$axesInfo = event.axesInfo) == null ? void 0 : _event$axesInfo.find(function (_ref2) {
+          var axisDim = _ref2.axisDim;
+          return axisDim === 'x';
+        });
+        instances.current.forEach(function (syncPointer, instance) {
+          if (syncPointer && instance !== source && !instance.isDisposed()) {
+            instance.dispatchAction(axis ? {
+              type: 'updateAxisPointer',
+              x: instance.convertToPixel({
+                xAxisIndex: 0
+              }, axis.value),
+              y: instance.getHeight() / 2,
+              axesInfo: [{
+                axisDim: 'x',
+                axisIndex: 0,
+                value: axis.value
+              }]
+            } : {
+              type: 'updateAxisPointer',
+              currTrigger: 'leave'
+            }, {
+              silent: true
+            });
+          }
+        });
+      }
+    };
+  }, []);
+};
 var applyDataZoomState = function applyDataZoomState(option, dataZoomState) {
   if (!dataZoomState || !(option != null && option.dataZoom) || !Array.isArray(option.dataZoom)) {
     return option;
@@ -7834,17 +8352,36 @@ var extractDataZoomState = function extractDataZoomState(params) {
   }
   return null;
 };
-var TimeSeriesChart = function TimeSeriesChart(_ref2) {
-  var plotsWithData = _ref2.plotsWithData,
-    _ref2$animation = _ref2.animation,
-    animation = _ref2$animation === void 0 ? false : _ref2$animation,
-    _ref2$shouldShowLegen = _ref2.shouldShowLegend,
-    shouldShowLegend = _ref2$shouldShowLegen === void 0 ? true : _ref2$shouldShowLegen,
-    onToggleLegendParam = _ref2.onToggleLegendParam,
-    onLegendHeightChange = _ref2.onLegendHeightChange;
-  var _useThemeContext = useThemeContext(),
-    namedTheme = _useThemeContext.namedTheme;
-  var isDark = (namedTheme == null ? void 0 : namedTheme.theme.palette.mode) === 'dark';
+var TimeSeriesChart = function TimeSeriesChart(_ref3) {
+  var plotsWithData = _ref3.plotsWithData,
+    _ref3$animation = _ref3.animation,
+    animation = _ref3$animation === void 0 ? false : _ref3$animation,
+    _ref3$shouldShowLegen = _ref3.shouldShowLegend,
+    shouldShowLegend = _ref3$shouldShowLegen === void 0 ? true : _ref3$shouldShowLegen,
+    onToggleLegendParam = _ref3.onToggleLegendParam,
+    _ref3$fitToContainer = _ref3.fitToContainer,
+    fitToContainer = _ref3$fitToContainer === void 0 ? false : _ref3$fitToContainer,
+    _ref3$shouldShowZoom = _ref3.shouldShowZoom,
+    shouldShowZoom = _ref3$shouldShowZoom === void 0 ? true : _ref3$shouldShowZoom,
+    controlsOnly = _ref3.controlsOnly,
+    synchronization = _ref3.synchronization,
+    sharedTimesteps = _ref3.sharedTimesteps,
+    currentTime = _ref3.currentTime;
+  var now = useCurrentTime(currentTime === undefined && controlsOnly !== 'legend');
+  var _React$useState2 = React.useState(null),
+    indicatorInstance = _React$useState2[0],
+    setIndicatorInstance = _React$useState2[1];
+  var theme = useTheme();
+  var isDark = theme.palette.mode === 'dark';
+  var containerRef = React.useRef(null);
+  var registeredInstance = React.useRef(null);
+  React.useEffect(function () {
+    return function () {
+      if (registeredInstance.current) {
+        synchronization == null || synchronization.unregister(registeredInstance.current);
+      }
+    };
+  }, [synchronization]);
   var dataZoomStateRef = React.useRef(null);
   var lastLegendEventRef = React.useRef(null);
   var enabledPlots = React.useMemo(function () {
@@ -7853,34 +8390,153 @@ var TimeSeriesChart = function TimeSeriesChart(_ref2) {
     });
   }, [plotsWithData]);
   var option = React.useMemo(function () {
-    return getOption(enabledPlots, shouldShowLegend);
-  }, [enabledPlots, shouldShowLegend]);
+    var base = getOption(controlsOnly === 'zoom' ? [getZoomPreviewPlot(enabledPlots)] : enabledPlots, shouldShowLegend, sharedTimesteps);
+    var dataZoom = Array.isArray(base.dataZoom) ? base.dataZoom : [];
+    if (!controlsOnly) {
+      return Object.assign({}, base, {
+        dataZoom: dataZoom.map(function (zoom) {
+          return Object.assign({}, zoom, {
+            show: shouldShowZoom
+          });
+        })
+      });
+    }
+    return Object.assign({}, base, {
+      tooltip: {
+        show: false
+      },
+      axisPointer: {
+        show: false
+      },
+      grid: (Array.isArray(base.grid) ? base.grid : []).map(function (grid) {
+        return Object.assign({}, grid, {
+          top: 0,
+          height: 0
+        });
+      }),
+      xAxis: (Array.isArray(base.xAxis) ? base.xAxis : []).map(function (axis) {
+        return Object.assign({}, axis, {
+          show: false
+        });
+      }),
+      yAxis: (Array.isArray(base.yAxis) ? base.yAxis : []).map(function (axis) {
+        return Object.assign({}, axis, {
+          show: false
+        });
+      }),
+      series: (Array.isArray(base.series) ? base.series : []).map(function (series) {
+        return Object.assign({}, series, {
+          // The slider needs real values to render its data preview. Hide the
+          // supporting series rather than replacing their values with nulls.
+          data: controlsOnly === 'legend' ? [] : series.data
+        }, controlsOnly === 'zoom' && {
+          lineStyle: {
+            opacity: 0
+          },
+          areaStyle: {
+            opacity: 0
+          },
+          itemStyle: {
+            opacity: 0
+          },
+          label: {
+            show: false
+          },
+          showSymbol: false,
+          emphasis: {
+            disabled: true
+          }
+        }, {
+          silent: true
+        });
+      }),
+      dataZoom: controlsOnly === 'zoom' ? dataZoom.map(function (zoom) {
+        return Object.assign({}, zoom, {
+          top: 4,
+          bottom: undefined,
+          showDataShadow: true
+        });
+      }) : []
+    });
+  }, [enabledPlots, shouldShowLegend, shouldShowZoom, controlsOnly, sharedTimesteps]);
   var optionWithZoom = React.useMemo(function () {
-    return applyDataZoomState(option, dataZoomStateRef.current);
-  }, [option]);
+    var _synchronization$zoom;
+    return applyDataZoomState(option, (_synchronization$zoom = synchronization == null ? void 0 : synchronization.zoomState.current) != null ? _synchronization$zoom : dataZoomStateRef.current);
+  }, [option, synchronization]);
   var _useChartHeight = useChartHeight({
       plotsWithData: enabledPlots,
       shouldShowLegend: shouldShowLegend,
       option: optionWithZoom,
-      onLegendHeightChange: onLegendHeightChange
+      fitToContainer: fitToContainer,
+      shouldShowZoom: shouldShowZoom,
+      controlsOnly: controlsOnly
     }),
     chartHeight = _useChartHeight.chartHeight,
     chartRef = _useChartHeight.chartRef,
     updateHeight = _useChartHeight.updateHeight;
-  return option ? jsx("div", {
-    "data-testid": "TimeSeriesChart",
-    children: jsx(ReactECharts, {
+  var observesContainer = (fitToContainer || !!controlsOnly) && typeof ResizeObserver !== 'undefined';
+  React.useEffect(function () {
+    var container = containerRef.current;
+    if (!observesContainer || !container) {
+      return undefined;
+    }
+    var observer = new ResizeObserver(function () {
+      var instance = registeredInstance.current;
+      if (instance && !instance.isDisposed() && container.clientWidth > 0 && container.clientHeight > 0) {
+        updateHeight(instance);
+      }
+    });
+    observer.observe(container);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [observesContainer, updateHeight]);
+  return option ? jsxs("div", {
+    "data-testid": controlsOnly ? {
+      legend: 'TimeSeriesLegend',
+      zoom: 'TimeSeriesZoom'
+    }[controlsOnly] : 'TimeSeriesChart',
+    ref: containerRef,
+    style: fitToContainer ? {
+      position: 'relative',
+      height: '100%',
+      width: '100%',
+      minHeight: 0
+    } : {
+      position: 'relative'
+    },
+    children: [jsx(ReactECharts, {
+      autoResize: !observesContainer,
       notMerge: true,
-      onChartReady: updateHeight,
+      onChartReady: function onChartReady(instance) {
+        if (registeredInstance.current) {
+          synchronization == null || synchronization.unregister(registeredInstance.current);
+        }
+        registeredInstance.current = instance;
+        if (controlsOnly !== 'legend') {
+          synchronization == null || synchronization.register(instance, controlsOnly !== 'zoom');
+        }
+        updateHeight(instance);
+        setIndicatorInstance(instance);
+      },
       // noop, prevent flickering when toggling legend
       onEvents: {
         finished: function finished() {},
         datazoom: function datazoom(params) {
           var newState = extractDataZoomState(params);
           if (newState) {
+            var _registeredInstance$c;
             dataZoomStateRef.current = newState;
+            synchronization == null || synchronization.zoom(newState, (_registeredInstance$c = registeredInstance.current) != null ? _registeredInstance$c : undefined);
           }
         },
+        updateAxisPointer: function updateAxisPointer(event) {
+          var _registeredInstance$c2;
+          if (controlsOnly) {
+            return;
+          }
+          synchronization == null || synchronization.pointer(event, (_registeredInstance$c2 = registeredInstance.current) != null ? _registeredInstance$c2 : undefined);
+        },
         legendselectchanged: function legendselectchanged(params) {
           if (!option.legend) {
             return;
@@ -7899,68 +8555,217 @@ var TimeSeriesChart = function TimeSeriesChart(_ref2) {
         }
       },
       option: Object.assign({}, optionWithZoom, {
+        backgroundColor: 'transparent',
         animation: animation
       }),
       ref: chartRef,
       style: {
-        background: 'white',
-        height: chartHeight,
-        minWidth: MIN_GRAPH_WIDTH
+        background: 'transparent',
+        height: fitToContainer ? '100%' : chartHeight,
+        minWidth: fitToContainer ? 0 : MIN_GRAPH_WIDTH
       },
       theme: isDark ? EChartsDarkTheme : EChartsLightTheme
-    })
+    }), controlsOnly !== 'legend' && jsx(CurrentTime, {
+      currentTime: currentTime != null ? currentTime : now,
+      instance: indicatorInstance,
+      showPlots: !controlsOnly,
+      showZoom: controlsOnly === 'zoom' || shouldShowZoom
+    })]
   }) : null;
 };
 
+var TIME_SERIES_PANEL_MIN_HEIGHT = 90;
+var TimeSeriesPanelConnect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var plotId = _ref.panelId,
+    viewId = _ref.viewId,
+    name = _ref.name,
+    children = _ref.children,
+    headerAction = _ref.headerAction,
+    isDisplayed = _ref.isDisplayed,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
+    handleButtonComponent = _ref.handleButtonComponent,
+    onOpenChange = _ref.onOpenChange,
+    onResizeStart = _ref.onResizeStart,
+    onResizeEnd = _ref.onResizeEnd,
+    initialSize = _ref.initialSize,
+    allowOverflow = _ref.allowOverflow,
+    onSizeChange = _ref.onSizeChange;
+  if (!plotId || !viewId) {
+    throw new Error('TimeSeriesPanelConnect requires both `plotId` and `viewId` props. ' + 'Use it inside a SortablePanels that has `viewId` set, or pass both directly.');
+  }
+  var dispatch = useDispatch();
+  var isOpen = useSelector(function (store) {
+    return getPlotIsOpen(store, viewId, plotId);
+  });
+  var customSize = useSelector(function (store) {
+    return getPlotCustomSize(store, viewId, plotId);
+  });
+  var handleSetIsOpen = React.useCallback(function (open) {
+    if (isOpen === open) {
+      return;
+    }
+    dispatch(timeSeriesActions.setPlotIsOpen({
+      plotId: plotId,
+      panelId: viewId,
+      origin: TimeSeriesActionOrigin.timeSeriesManager,
+      isOpen: open
+    }));
+    onOpenChange == null || onOpenChange(open);
+  }, [isOpen, dispatch, plotId, viewId, onOpenChange]);
+  var handleSetCustomSize = React.useCallback(function (size) {
+    onSizeChange == null || onSizeChange(size);
+    dispatch(timeSeriesActions.setPlotSize({
+      plotId: plotId,
+      panelId: viewId,
+      origin: TimeSeriesActionOrigin.timeSeriesManager,
+      size: size
+    }));
+  }, [dispatch, plotId, viewId, onSizeChange]);
+  return jsx(ResizablePanel, {
+    allowOverflow: allowOverflow,
+    customWidth: customSize,
+    direction: "vertical",
+    handleButtonComponent: handleButtonComponent,
+    headerAction: headerAction,
+    initialSize: initialSize,
+    isDisplayed: isDisplayed,
+    isOpen: isOpen,
+    maxWidth: maxWidth,
+    minWidth: minWidth != null ? minWidth : TIME_SERIES_PANEL_MIN_HEIGHT,
+    name: name,
+    onResizeEnd: onResizeEnd,
+    onResizeStart: onResizeStart,
+    onSetCustomWidth: handleSetCustomSize,
+    onSetIsOpen: handleSetIsOpen,
+    ref: ref,
+    children: children
+  });
+});
+
+var TimeSeriesPanelsConnect = function TimeSeriesPanelsConnect(_ref) {
+  var viewId = _ref.viewId,
+    _ref$panelComponent = _ref.panelComponent,
+    panelComponent = _ref$panelComponent === void 0 ? TimeSeriesPanelConnect : _ref$panelComponent,
+    renderPlot = _ref.renderPlot;
+  var dispatch = useDispatch();
+  var panelsInOrder = useSelector(function (store) {
+    var _getPlotState;
+    return ((_getPlotState = getPlotState(store, viewId)) == null ? void 0 : _getPlotState.plots) || [];
+  });
+  var handleOrderChange = function handleOrderChange(newOrder) {
+    var visiblePlots = panelsInOrder.filter(function (plot) {
+      return plot.enabled !== false;
+    });
+    if (newOrder.length === visiblePlots.length && newOrder.every(function (_ref2, index) {
+      var id = _ref2.id;
+      return id === visiblePlots[index].plotId;
+    })) {
+      return;
+    }
+    dispatch(timeSeriesActions.reorderPlots({
+      panelId: viewId,
+      origin: TimeSeriesActionOrigin.timeSeriesManager,
+      newOrder: newOrder.map(function (_ref3) {
+        var id = _ref3.id;
+        return id;
+      })
+    }));
+  };
+  var panels = panelsInOrder.filter(function (plot) {
+    return plot.enabled !== false;
+  }).map(function (_ref4) {
+    var id = _ref4.plotId,
+      name = _ref4.title,
+      isOpen = _ref4.isOpen,
+      customSize = _ref4.customSize;
+    return {
+      id: id,
+      name: name,
+      isDisplayed: true,
+      isOpen: isOpen !== false,
+      customSize: customSize,
+      minWidth: TIME_SERIES_PANEL_MIN_HEIGHT,
+      render: function render() {
+        return renderPlot(id);
+      }
+    };
+  });
+  return jsx(SortablePanels, {
+    allowOverflow: true,
+    direction: "vertical",
+    onOrderChange: handleOrderChange,
+    panelComponent: panelComponent,
+    panels: panels,
+    sizing: "untilManualResize",
+    viewId: viewId
+  }, viewId);
+};
+
 var getParameterKey = function getParameterKey(param) {
   return param.serviceId + "|" + param.collectionId + "|" + param.propertyName;
 };
-var PlotErrorBanners = function PlotErrorBanners(_ref) {
-  var plotsWithData = _ref.plotsWithData,
+var getErrorTitle = function getErrorTitle(parameters) {
+  var propertyNames = parameters.map(function (param) {
+    return param.propertyName;
+  });
+  if (propertyNames.length > 1) {
+    return "\"" + propertyNames.join('", "') + "\"";
+  }
+  return "\"" + (propertyNames[0] || '') + "\"";
+};
+var getErrorTranslationKey = function getErrorTranslationKey(errorKey, parameterCount) {
+  // Use plural translation only when multiple parameters fail with error-message-general
+  return errorKey === 'error-message-general' && parameterCount > 1 ? 'error-message-general-plural' : errorKey;
+};
+var TimeSeriesPlot = function TimeSeriesPlot(_ref) {
+  var _plot$failedParameter, _plot$failedParameter2, _plot$errors;
+  var plot = _ref.plot,
     parametersFailingInAllPlots = _ref.parametersFailingInAllPlots,
-    legendHeight = _ref.legendHeight,
-    getErrorTitle = _ref.getErrorTitle,
-    getErrorTranslationKey = _ref.getErrorTranslationKey,
-    t = _ref.t;
-  return jsx(Fragment, {
-    children: plotsWithData.map(function (plot, index) {
-      var _plot$failedParameter, _plot$errors;
-      var parametersFailingKeys = new Set(parametersFailingInAllPlots.map(getParameterKey));
-      var plotSpecificFailedParameters = ((_plot$failedParameter = plot.failedParameters) == null ? void 0 : _plot$failedParameter.filter(function (param) {
-        return !parametersFailingKeys.has(getParameterKey(param));
-      })) || [];
-      if (plotSpecificFailedParameters.length === 0) {
-        return null;
-      }
-      var errorTitle = getErrorTitle(plotSpecificFailedParameters);
-      var errorKey = ((_plot$errors = plot.errors) == null ? void 0 : _plot$errors[0]) || 'error-message-general';
-      var translationKey = getErrorTranslationKey(errorKey, plotSpecificFailedParameters.length);
-      var errorInfo = t(translationKey);
-      return jsx(Box, {
-        sx: {
-          position: 'absolute',
-          top: legendHeight + PLOT_HEIGHT * index + 35,
-          left: 0,
-          right: 0,
-          zIndex: 10,
-          pointerEvents: 'none'
-        },
-        children: jsx(Box, {
-          sx: {
-            pointerEvents: 'auto'
-          },
-          children: jsx(AlertBanner, {
-            info: errorInfo,
-            shouldClose: true,
-            title: errorTitle
-          })
-        })
-      }, "error-" + plot.plotId);
-    })
+    synchronization = _ref.synchronization,
+    sharedTimesteps = _ref.sharedTimesteps,
+    currentTime = _ref.currentTime;
+  var _useTimeseriesTransla = useTimeseriesTranslation(),
+    t = _useTimeseriesTransla.t;
+  var commonKeys = new Set(parametersFailingInAllPlots.map(getParameterKey));
+  var failedParameters = (_plot$failedParameter = (_plot$failedParameter2 = plot.failedParameters) == null ? void 0 : _plot$failedParameter2.filter(function (parameter) {
+    return !commonKeys.has(getParameterKey(parameter));
+  })) != null ? _plot$failedParameter : [];
+  var errorKey = ((_plot$errors = plot.errors) == null ? void 0 : _plot$errors[0]) || 'error-message-general';
+  var errorInfo = t(getErrorTranslationKey(errorKey, failedParameters.length));
+  var errorTitle = getErrorTitle(failedParameters);
+  return jsxs(Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%',
+      minHeight: 0
+    },
+    children: [!!failedParameters.length && jsx(AlertBanner, {
+      info: errorInfo,
+      shouldClose: true,
+      title: errorTitle
+    }), jsx(Box, {
+      sx: {
+        flex: 1,
+        minHeight: 0
+      },
+      children: jsx(TimeSeriesChart, {
+        currentTime: currentTime,
+        fitToContainer: true,
+        plotsWithData: [plot],
+        sharedTimesteps: sharedTimesteps,
+        shouldShowLegend: false,
+        shouldShowZoom: false,
+        synchronization: synchronization
+      })
+    })]
   });
 };
 var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref2) {
-  var plotPreset = _ref2.plotPreset,
+  var viewId = _ref2.viewId,
+    plotPreset = _ref2.plotPreset,
     selectedLocation = _ref2.selectedLocation,
     services = _ref2.services,
     splitGeoJsonByCollection = _ref2.splitGeoJsonByCollection,
@@ -7969,32 +8774,21 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref2) {
     shouldShowLegend = _ref2$shouldShowLegen === void 0 ? true : _ref2$shouldShowLegen,
     onToggleLegendParam = _ref2.onToggleLegendParam,
     syncgroupTimeState = _ref2.syncgroupTimeState;
-  var _useTimeseriesTransla = useTimeseriesTranslation(),
-    t = _useTimeseriesTransla.t;
-  var _React$useState = React.useState(0),
-    legendHeight = _React$useState[0],
-    setLegendHeight = _React$useState[1];
+  var _useTimeseriesTransla2 = useTimeseriesTranslation(),
+    t = _useTimeseriesTransla2.t;
+  var synchronization = useChartSynchronization();
+  var currentTime = useCurrentTime();
   var _useGetPlotsWithData = useGetPlotsWithData(plotPreset, selectedLocation, services, splitGeoJsonByCollection, t, syncgroupTimeState),
     plotsWithData = _useGetPlotsWithData.data,
     isFetchingPlots = _useGetPlotsWithData.isFetching;
+  var sharedTimesteps = React.useMemo(function () {
+    return getSharedTimesteps(plotsWithData != null ? plotsWithData : []);
+  }, [plotsWithData]);
   React.useEffect(function () {
     if (isLoading) {
       isLoading(isFetchingPlots);
     }
   }, [isFetchingPlots, isLoading]);
-  var getErrorTitle = function getErrorTitle(parameters) {
-    var propertyNames = parameters.map(function (param) {
-      return param.propertyName;
-    });
-    if (propertyNames.length > 1) {
-      return "\"" + propertyNames.join('", "') + "\"";
-    }
-    return "\"" + (propertyNames[0] || '') + "\"";
-  };
-  var getErrorTranslationKey = function getErrorTranslationKey(errorKey, parameterCount) {
-    // Use plural translation only when multiple parameters fail with error-message-general
-    return errorKey === 'error-message-general' && parameterCount > 1 ? 'error-message-general-plural' : errorKey;
-  };
   var getCombinedErrorInfo = React.useCallback(function (parametersFailingInAllPlots, plotsWithData, totalPlotCount) {
     var _plotsWithData$;
     if (parametersFailingInAllPlots.length === 0 || totalPlotCount === 0) {
@@ -8011,8 +8805,8 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref2) {
     }
     var parameterCounts = {};
     plotsWithData.forEach(function (plot) {
-      var _plot$failedParameter2;
-      (_plot$failedParameter2 = plot.failedParameters) == null || _plot$failedParameter2.forEach(function (param) {
+      var _plot$failedParameter3;
+      (_plot$failedParameter3 = plot.failedParameters) == null || _plot$failedParameter3.forEach(function (param) {
         var key = getParameterKey(param);
         if (parameterCounts[key]) {
           parameterCounts[key].count += 1;
@@ -8041,8 +8835,28 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref2) {
   var combinedErrorInfo = React.useMemo(function () {
     return hasParametersFailingInAllPlots ? getCombinedErrorInfo(parametersFailingInAllPlots, plotsWithData, totalPlotCount) : '';
   }, [getCombinedErrorInfo, hasParametersFailingInAllPlots, parametersFailingInAllPlots, plotsWithData, totalPlotCount]);
-  return jsxs(Box, {
+  var renderPlot = function renderPlot(plotId) {
+    var plot = plotsWithData == null ? void 0 : plotsWithData.find(function (item) {
+      return item.plotId === plotId;
+    });
+    return plot ? jsx(TimeSeriesPlot, {
+      currentTime: currentTime,
+      parametersFailingInAllPlots: parametersFailingInAllPlots,
+      plot: plot,
+      sharedTimesteps: sharedTimesteps,
+      synchronization: synchronization
+    }) : null;
+  };
+  return jsxs(Card, {
     "data-testid": "TimeSeriesView",
+    sx: {
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 1
+    },
     children: [hasParametersFailingInAllPlots ? jsx(Card, {
       sx: {
         border: 'solid 1px',
@@ -8057,37 +8871,53 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref2) {
           title: combinedErrorTitle
         })
       })
-    }) : null, !!plotsWithData && plotsWithData.length > 0 && jsxs(Card, {
+    }) : null, !!(plotsWithData != null && plotsWithData.length) && !!shouldShowLegend && jsx(Box, {
       sx: {
-        border: 'solid 1px',
-        borderColor: 'geowebColors.cards.cardContainerBorder',
-        boxShadow: 'none',
-        position: 'relative'
+        flex: '0 0 auto',
+        mb: -1
       },
-      children: [!!plotsWithData && plotsWithData.length > 0 && jsx(PlotErrorBanners, {
-        getErrorTitle: getErrorTitle,
-        getErrorTranslationKey: getErrorTranslationKey,
-        legendHeight: legendHeight,
-        parametersFailingInAllPlots: parametersFailingInAllPlots,
-        plotsWithData: plotsWithData,
-        t: t
-      }), jsx(TimeSeriesChart, {
-        onLegendHeightChange: setLegendHeight,
+      children: jsx(TimeSeriesChart, {
+        controlsOnly: "legend",
         onToggleLegendParam: onToggleLegendParam,
         plotsWithData: plotsWithData,
-        shouldShowLegend: shouldShowLegend
-      })]
+        shouldShowZoom: false
+      })
+    }), !!(plotsWithData != null && plotsWithData.length) && jsx(Box, {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        width: '100%',
+        overflow: 'auto'
+      },
+      children: jsx(TimeSeriesPanelsConnect, {
+        renderPlot: renderPlot,
+        viewId: viewId
+      })
+    }), !!(plotsWithData != null && plotsWithData.length) && jsx(Box, {
+      sx: {
+        flex: '0 0 auto'
+      },
+      children: jsx(TimeSeriesChart, {
+        controlsOnly: "zoom",
+        currentTime: currentTime,
+        plotsWithData: plotsWithData,
+        sharedTimesteps: sharedTimesteps,
+        shouldShowLegend: false,
+        synchronization: synchronization
+      })
     })]
   });
 }, function (previousProps, nextProps) {
   var _previousProps$syncgr, _nextProps$syncgroupT, _previousProps$syncgr2, _nextProps$syncgroupT2;
+  var sameView = previousProps.viewId === nextProps.viewId;
+  var sameCallbacks = previousProps.isLoading === nextProps.isLoading && previousProps.onToggleLegendParam === nextProps.onToggleLegendParam;
   var samePreset = previousProps.plotPreset === nextProps.plotPreset;
   var sameLocation = isEqual(previousProps.selectedLocation, nextProps.selectedLocation);
   var sameGeoJson = isEqual(previousProps.splitGeoJsonByCollection, nextProps.splitGeoJsonByCollection);
   var sameLegend = previousProps.shouldShowLegend === nextProps.shouldShowLegend;
   var sameServices = isEqual(previousProps.services, nextProps.services);
   var sameTime = ((_previousProps$syncgr = previousProps.syncgroupTimeState) == null ? void 0 : _previousProps$syncgr.start) === ((_nextProps$syncgroupT = nextProps.syncgroupTimeState) == null ? void 0 : _nextProps$syncgroupT.start) && ((_previousProps$syncgr2 = previousProps.syncgroupTimeState) == null ? void 0 : _previousProps$syncgr2.end) === ((_nextProps$syncgroupT2 = nextProps.syncgroupTimeState) == null ? void 0 : _nextProps$syncgroupT2.end);
-  return samePreset && sameLocation && sameGeoJson && sameLegend && sameServices && sameTime;
+  return sameView && sameCallbacks && samePreset && sameLocation && sameGeoJson && sameLegend && sameServices && sameTime;
 });
 
 /* *
@@ -8466,7 +9296,8 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref2) {
       })
     }), !!timeSeriesLocation && !!plotPresetState && jsx(Box, {
       sx: {
-        overflow: 'auto'
+        flex: 1,
+        minHeight: 0
       },
       children: !!plotPresetState && jsx(TimeSeriesView, {
         isLoading: isLoading,
@@ -8476,7 +9307,8 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref2) {
         services: services,
         shouldShowLegend: shouldShowLegend,
         splitGeoJsonByCollection: splitGeoJsonByCollection,
-        syncgroupTimeState: syncgroupTimeState
+        syncgroupTimeState: syncgroupTimeState,
+        viewId: panelId
       })
     })]
   });