@opengeoweb/time-series 15.2.0 → 16.0.0

package/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useCallback, useState, useMemo, useEffect, memo } from 'react';
+import React, { useCallback, useMemo, useState, useEffect, memo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { CustomIconButton, dateUtils, TooltipSelect, CustomAccordion, CustomTooltip, CustomToggleButton, ToolContainerDraggable, ToggleMenu, CustomDialog, SearchField, SearchHighlight, AlertBanner, useConfirmationDialog, SwitchButton, 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, syncGroupsActions, genericActions, mapActions, layerActions } from '@opengeoweb/store';
+import { mapUtils, selectorMemoizationOptions, genericSelectors, uiSelectors, uiTypes, uiActions, useSetupDialog, mapSelectors, mapListener, serviceListener, layersListener, syncGroupsListener, genericListener, openlayersListener, uiReducer, syncGroupsReducer, layerReducer, serviceReducer, mapReducer, loadingIndicatorActions, syncGroupsActions, genericActions, 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';
@@ -17,7 +17,7 @@ import { v4 } from 'uuid';
 import { center } from '@turf/turf';
 import { MapFeatureClass } from '@opengeoweb/webmap-react';
 import { useQueries, useQueryClient, useQuery, queryOptions } from '@tanstack/react-query';
-import { handleResponse } from '@opengeoweb/api';
+import { handleResponse, withJsonFormat } from '@opengeoweb/api';
 import Box$1 from '@mui/material/Box';
 import { useFormContext } from 'react-hook-form';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField, ReactHookFormSelect } from '@opengeoweb/form-fields';
@@ -138,8 +138,10 @@ var en = {
 	"timeseries-legend": "Legend",
 	"timeseries-legend-tooltip-show": "Show legend",
 	"timeseries-legend-tooltip-hide": "Hide legend",
-	"error-title": "Some parameters could not be loaded.",
+	"error-message-general": "This parameter could not be loaded.",
+	"error-message-general-plural": "These parameters could not be loaded.",
 	"error-message-missing-collection-or-service": "No collection and/or service found for parameter.",
+	"all-plots": "All plots",
 	"timeseries-add-plot": "Add plot"
 };
 var fi = {
@@ -250,8 +252,10 @@ var fi = {
 	"timeseries-legend": "Selite",
 	"timeseries-legend-tooltip-show": "Näytä selite",
 	"timeseries-legend-tooltip-hide": "Piilota selite",
-	"error-title": "Joitain parametreja ei pystytty lataamaan",
+	"error-message-general": "Tätä parametria ei voitu ladata.",
+	"error-message-general-plural": "Näitä parametreja ei voitu ladata.",
 	"error-message-missing-collection-or-service": "Parametrille ei löytynyt kokoelmaa ja/tai palvelua",
+	"all-plots": "Kaikki kaaviot",
 	"timeseries-add-plot": "Lisää kaavio"
 };
 var no = {
@@ -362,8 +366,10 @@ var no = {
 	"timeseries-legend": "Forklaring",
 	"timeseries-legend-tooltip-show": "Vis forklaring",
 	"timeseries-legend-tooltip-hide": "Skjul forklaring",
-	"error-title": "Noen parametere kunne ikke lastes.",
+	"error-message-general": "Denne parameteren kunne ikke lastes.",
+	"error-message-general-plural": "Disse parametrene kunne ikke lastes.",
 	"error-message-missing-collection-or-service": "Ingen kolleksjon og/eller tjeneste funnet for parameter.",
+	"all-plots": "Alle diagrammer",
 	"timeseries-add-plot": "Legg til plott"
 };
 var nl = {
@@ -479,8 +485,10 @@ var nl = {
 	"timeseries-legend": "Legenda",
 	"timeseries-legend-tooltip-show": "Toon legenda",
 	"timeseries-legend-tooltip-hide": "Verberg legenda",
-	"error-title": "Sommige parameters konden niet worden geladen.",
+	"error-message-general": "Deze parameter kon niet worden geladen.",
+	"error-message-general-plural": "Deze parameters konden niet worden geladen.",
 	"error-message-missing-collection-or-service": "Geen collectie en/of service gevonden voor parameter.",
+	"all-plots": "Alle grafieken",
 	"timeseries-add-plot": "Grafiek toevoegen"
 };
 var timeseriesTranslations = {
@@ -1120,9 +1128,15 @@ date) {
 };
 // 1 day to past, 10 days to future
 var clipInterval = [1 * 24, 10 * 24];
-var constructTimeInterval = function constructTimeInterval(collection, instance, parameter) {
+var constructTimeInterval = function constructTimeInterval(collection, instance, syncgroupTimeState) {
   var _instance$extent$temp, _instance$extent2, _collection$extent4;
   var interval = (_instance$extent$temp = (_instance$extent2 = instance.extent) == null || (_instance$extent2 = _instance$extent2.temporal) == null ? void 0 : _instance$extent2.interval[0]) != null ? _instance$extent$temp : collection == null || (_collection$extent4 = collection.extent) == null || (_collection$extent4 = _collection$extent4.temporal) == null ? void 0 : _collection$extent4.interval[0];
+  // If syncgroupTimeState is set, use this instead of the fixed timerange.
+  if ((syncgroupTimeState == null ? void 0 : syncgroupTimeState.start) !== undefined && (syncgroupTimeState == null ? void 0 : syncgroupTimeState.end) !== undefined) {
+    var timeRangeStartIso = dateUtils.dateToString(dateUtils.fromUnix(syncgroupTimeState.start));
+    var timeRangeEndIso = dateUtils.dateToString(dateUtils.fromUnix(syncgroupTimeState.end));
+    return timeRangeStartIso + "/" + timeRangeEndIso;
+  }
   var _clipEdrInterval = clipEdrInterval(interval, clipInterval[0], clipInterval[1]),
     start = _clipEdrInterval[0],
     end = _clipEdrInterval[1];
@@ -2701,13 +2715,15 @@ var getNearbyLocation = function getNearbyLocation(parameter, service, selectedL
   }
   return null;
 };
-var getPlotsWithParameters = function getPlotsWithParameters(plots, parameters) {
+var getPlotsWithParameters = function getPlotsWithParameters(plots, parameters, plotErrors, failedParameters) {
   var parametersByPlotId = groupBy(parameters, function (parameter) {
     return parameter.plotId;
   });
   var plotsWithParameters = plots.map(function (plot) {
     return Object.assign({}, plot, {
-      parametersWithData: parametersByPlotId[plot.plotId]
+      parametersWithData: parametersByPlotId[plot.plotId] || [],
+      errors: plotErrors == null ? void 0 : plotErrors[plot.plotId],
+      failedParameters: failedParameters == null ? void 0 : failedParameters[plot.plotId]
     });
   }).filter(function (plot) {
     var _plot$parametersWithD;
@@ -2784,7 +2800,7 @@ var getLocations = /*#__PURE__*/function () {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          url = createUrl(serviceUrl, "/collections/" + collectionId + "/locations");
+          url = withJsonFormat(createUrl(serviceUrl, "/collections/" + collectionId + "/locations"));
           return _context.abrupt("return", fetch(url).then(handleResponse));
         case 2:
         case "end":
@@ -2802,7 +2818,7 @@ var getServiceInformation = /*#__PURE__*/function () {
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          url = createUrl(serviceUrl);
+          url = withJsonFormat(createUrl(serviceUrl));
           return _context2.abrupt("return", fetch(url).then(handleResponse));
         case 2:
         case "end":
@@ -2820,7 +2836,7 @@ var getCollections = /*#__PURE__*/function () {
     return _regeneratorRuntime().wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          url = createUrl(serviceUrl, '/collections');
+          url = withJsonFormat(createUrl(serviceUrl, '/collections'));
           return _context3.abrupt("return", fetch(url).then(handleResponse));
         case 2:
         case "end":
@@ -2838,7 +2854,7 @@ var getCollection = /*#__PURE__*/function () {
     return _regeneratorRuntime().wrap(function _callee4$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
-          url = createUrl(serviceUrl, "/collections/" + collectionId);
+          url = withJsonFormat(createUrl(serviceUrl, "/collections/" + collectionId));
           return _context4.abrupt("return", fetch(url).then(handleResponse));
         case 2:
         case "end":
@@ -2856,7 +2872,7 @@ var getInstances = /*#__PURE__*/function () {
     return _regeneratorRuntime().wrap(function _callee5$(_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
-          url = createUrl(serviceUrl, "/collections/" + collectionId + "/instances");
+          url = withJsonFormat(createUrl(serviceUrl, "/collections/" + collectionId + "/instances"));
           return _context5.abrupt("return", fetch(url).then(handleResponse));
         case 2:
         case "end":
@@ -2907,8 +2923,8 @@ var getPosition = /*#__PURE__*/function () {
     return _ref7.apply(this, arguments);
   };
 }();
-var getErrorMessage = function getErrorMessage(parameter) {
-  return parameter.propertyName + " - " + parameter.collectionId;
+var getErrorMessage = function getErrorMessage() {
+  return 'error-message-general';
 };
 var fetchEdrParameter = /*#__PURE__*/function () {
   var _ref8 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8(parameter, location, service, geojsonMap, intervalParam, collection, instance) {
@@ -2940,7 +2956,7 @@ var fetchEdrParameter = /*#__PURE__*/function () {
         case 11:
           _context8.prev = 11;
           _context8.t0 = _context8["catch"](5);
-          throw new Error(getErrorMessage(parameter));
+          throw new Error(getErrorMessage());
         case 14:
           _context8.prev = 14;
           if (!((_instance$data_querie2 = instance.data_queries) != null && _instance$data_querie2.position || (_collection$dataQueri2 = collection.dataQueries) != null && _collection$dataQueri2.position)) {
@@ -2974,11 +2990,11 @@ var fetchEdrParameter = /*#__PURE__*/function () {
         case 31:
           _context8.prev = 31;
           _context8.t2 = _context8["catch"](25);
-          throw new Error(getErrorMessage(parameter));
+          throw new Error(getErrorMessage());
         case 34:
-          throw new Error(getErrorMessage(parameter));
+          throw new Error(getErrorMessage());
         case 35:
-          throw new Error(getErrorMessage(parameter));
+          throw new Error(getErrorMessage());
         case 36:
         case "end":
           return _context8.stop();
@@ -3248,10 +3264,7 @@ var useGetCollectionsAndInstanceDetails = function useGetCollectionsAndInstanceD
     }
   });
 };
-var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selectedLocation, services, splitGeoJsonByCollection, t) {
-  var _useState = useState([]),
-    plotsWithData = _useState[0],
-    setPlotsWithData = _useState[1];
+var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selectedLocation, services, splitGeoJsonByCollection, t, syncgroupTimeState) {
   // Create array of collections we need to query for the data
   var collectionsList = useMemo(function () {
     return extractUsedCollections(plotsWithoutData, services);
@@ -3281,9 +3294,9 @@ var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selecte
       };
       // Construct timeinterval that needs to be fetched
       // Create here so if new data is advertised by the collection/instance a new request is made
-      var intervalParam = constructTimeInterval(collection, instanceInfo);
+      var intervalParam = constructTimeInterval(collection, instanceInfo, syncgroupTimeState);
       return {
-        queryKey: generateTimeSeriesQueryKeys(['get-parameter-data', parameter.propertyName, parameter.serviceId, parameter.collectionId, parameter.instanceId || 'undefined', ((_parameter$dimension = parameter.dimension) == null ? void 0 : _parameter$dimension.value) || 'undefined', intervalParam, selectedLocation.lat.toString() || 'undefined', selectedLocation.lon.toString() || 'undefined']),
+        queryKey: generateTimeSeriesQueryKeys(['get-parameter-data', parameter.plotId, parameter.propertyName, parameter.serviceId, parameter.collectionId, parameter.instanceId || 'undefined', ((_parameter$dimension = parameter.dimension) == null ? void 0 : _parameter$dimension.value) || 'undefined', intervalParam, selectedLocation.lat.toString() || 'undefined', selectedLocation.lon.toString() || 'undefined']),
         queryFn: function () {
           var _queryFn7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
             var edrResponse;
@@ -3320,7 +3333,7 @@ var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selecte
         retry: false
       };
     });
-  }, [collectionDetails, geojsonMap, plotsWithoutData.parameters, selectedLocation, collectionsList, isDetailsFetching]);
+  }, [plotsWithoutData.parameters, collectionsList, collectionDetails, syncgroupTimeState, selectedLocation, isDetailsFetching, geojsonMap]);
   var results = useQueries({
     queries: queries,
     combine: function combine(results) {
@@ -3332,9 +3345,16 @@ var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selecte
       var isFetching = results.some(function (result) {
         return result.isFetching;
       });
-      var errorsWithCount = countBy(results.map(function (result) {
+      var parameterErrors = {};
+      results.forEach(function (result, index) {
         var _result$error;
-        return result == null || (_result$error = result.error) == null ? void 0 : _result$error.message;
+        if ((_result$error = result.error) != null && _result$error.message) {
+          parameterErrors[index] = result.error.message;
+        }
+      });
+      var errorsWithCount = countBy(results.map(function (result) {
+        var _result$error2;
+        return result == null || (_result$error2 = result.error) == null ? void 0 : _result$error2.message;
       }).filter(Boolean));
       var errorMessage = Object.entries(errorsWithCount).map(function (_ref) {
         var message = _ref[0],
@@ -3345,17 +3365,38 @@ var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selecte
       return {
         data: data,
         isFetching: isFetching,
-        error: error
+        error: error,
+        parameterErrors: parameterErrors
       };
     }
   });
-  // Combine fetched data with parameters and plots
-  useEffect(function () {
+  // Combine fetched data with parameters and plots, including errors per plot
+  var plotsWithData = useMemo(function () {
     var _results$data;
     var data = (_results$data = results.data) != null && _results$data.length ? results.data : [];
-    var result = getPlotsWithParameters(plotsWithoutData.plots, combineParametersWithData(plotsWithoutData.parameters, data));
-    setPlotsWithData(result);
-  }, [plotsWithoutData.parameters, plotsWithoutData.plots, results.data]);
+    // Create maps of parameter errors and failed parameter names by plotId
+    var plotErrors = {};
+    var failedParametersByPlotId = {};
+    plotsWithoutData.parameters.forEach(function (parameter, index) {
+      var _results$parameterErr;
+      var errorMessage = (_results$parameterErr = results.parameterErrors) == null ? void 0 : _results$parameterErr[index];
+      if (errorMessage) {
+        if (!plotErrors[parameter.plotId]) {
+          plotErrors[parameter.plotId] = [];
+          failedParametersByPlotId[parameter.plotId] = [];
+        }
+        if (!plotErrors[parameter.plotId].includes(errorMessage)) {
+          plotErrors[parameter.plotId].push(errorMessage);
+        }
+        failedParametersByPlotId[parameter.plotId].push({
+          propertyName: parameter.propertyName,
+          serviceId: parameter.serviceId,
+          collectionId: parameter.collectionId
+        });
+      }
+    });
+    return getPlotsWithParameters(plotsWithoutData.plots, combineParametersWithData(plotsWithoutData.parameters, data), plotErrors, failedParametersByPlotId);
+  }, [plotsWithoutData.parameters, plotsWithoutData.plots, results.data, results.parameterErrors]);
   return Object.assign({}, results, {
     data: plotsWithData
   });
@@ -7595,7 +7636,8 @@ var CalculateTimeSpan = function CalculateTimeSpan(plotsWithData) {
 var useChartHeight = function useChartHeight(_ref) {
   var plotsWithData = _ref.plotsWithData,
     shouldShowLegend = _ref.shouldShowLegend,
-    option = _ref.option;
+    option = _ref.option,
+    onLegendHeightChange = _ref.onLegendHeightChange;
   var getDefaultHeight = function getDefaultHeight(plotsWithData) {
     return 100 + PLOT_HEIGHT * plotsWithData.length;
   };
@@ -7621,6 +7663,7 @@ var useChartHeight = function useChartHeight(_ref) {
     var legendView = echartsInstance.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
@@ -7640,7 +7683,7 @@ var useChartHeight = function useChartHeight(_ref) {
     var newHeight = getDefaultHeight(plotsWithData) + (shouldShowLegend ? height : 0);
     setChartHeight(newHeight);
     echartsInstance.resize();
-  }, [option.grid, plotsWithData, shouldShowLegend]);
+  }, [option.grid, plotsWithData, shouldShowLegend, onLegendHeightChange]);
   React.useEffect(function () {
     var onHeight = function onHeight() {
       var _chartRef$current2;
@@ -7660,24 +7703,58 @@ var useChartHeight = function useChartHeight(_ref) {
     updateHeight: updateHeight
   };
 };
+var applyDataZoomState = function applyDataZoomState(option, dataZoomState) {
+  if (!dataZoomState || !(option != null && option.dataZoom) || !Array.isArray(option.dataZoom)) {
+    return option;
+  }
+  return Object.assign({}, option, {
+    dataZoom: option.dataZoom.map(function (dz) {
+      return Object.assign({}, dz, {
+        start: dataZoomState.start,
+        end: dataZoomState.end
+      });
+    })
+  });
+};
+var extractDataZoomState = function extractDataZoomState(params) {
+  if (params.batch && params.batch.length > 0) {
+    return {
+      start: params.batch[0].start,
+      end: params.batch[0].end
+    };
+  }
+  if (params.start !== undefined && params.end !== undefined) {
+    return {
+      start: params.start,
+      end: params.end
+    };
+  }
+  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;
+    onToggleLegendParam = _ref2.onToggleLegendParam,
+    onLegendHeightChange = _ref2.onLegendHeightChange;
   var _useThemeContext = useThemeContext(),
     namedTheme = _useThemeContext.namedTheme;
   var isDark = (namedTheme == null ? void 0 : namedTheme.theme.palette.mode) === 'dark';
+  var dataZoomStateRef = React.useRef(null);
   var enabledPlots = plotsWithData.filter(function (plot) {
     return plot.enabled === undefined || plot.enabled;
   });
   var option = getOption(enabledPlots);
+  var optionWithZoom = React.useMemo(function () {
+    return applyDataZoomState(option, dataZoomStateRef.current);
+  }, [option]);
   var _useChartHeight = useChartHeight({
       plotsWithData: enabledPlots,
       shouldShowLegend: shouldShowLegend,
-      option: option
+      option: optionWithZoom,
+      onLegendHeightChange: onLegendHeightChange
     }),
     chartHeight = _useChartHeight.chartHeight,
     chartRef = _useChartHeight.chartRef,
@@ -7690,6 +7767,12 @@ var TimeSeriesChart = function TimeSeriesChart(_ref2) {
       // noop, prevent flickering when toggling legend
       onEvents: {
         finished: function finished() {},
+        datazoom: function datazoom(params) {
+          var newState = extractDataZoomState(params);
+          if (newState) {
+            dataZoomStateRef.current = newState;
+          }
+        },
         legendselectchanged: function legendselectchanged(params) {
           if (!option.legend) {
             return;
@@ -7702,7 +7785,7 @@ var TimeSeriesChart = function TimeSeriesChart(_ref2) {
           }
         }
       },
-      option: Object.assign({}, option, {
+      option: Object.assign({}, optionWithZoom, {
         animation: animation
       }),
       ref: chartRef,
@@ -7716,49 +7799,182 @@ var TimeSeriesChart = function TimeSeriesChart(_ref2) {
   }) : null;
 };
 
-var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref) {
-  var plotPreset = _ref.plotPreset,
-    selectedLocation = _ref.selectedLocation,
-    services = _ref.services,
-    splitGeoJsonByCollection = _ref.splitGeoJsonByCollection,
-    isLoading = _ref.isLoading,
-    _ref$shouldShowLegend = _ref.shouldShowLegend,
-    shouldShowLegend = _ref$shouldShowLegend === void 0 ? true : _ref$shouldShowLegend,
-    onToggleLegendParam = _ref.onToggleLegendParam;
+var getParameterKey = function getParameterKey(param) {
+  return param.serviceId + "|" + param.collectionId + "|" + param.propertyName;
+};
+var PlotErrorBanners = function PlotErrorBanners(_ref) {
+  var plotsWithData = _ref.plotsWithData,
+    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);
+    })
+  });
+};
+var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref2) {
+  var plotPreset = _ref2.plotPreset,
+    selectedLocation = _ref2.selectedLocation,
+    services = _ref2.services,
+    splitGeoJsonByCollection = _ref2.splitGeoJsonByCollection,
+    isLoading = _ref2.isLoading,
+    _ref2$shouldShowLegen = _ref2.shouldShowLegend,
+    shouldShowLegend = _ref2$shouldShowLegen === void 0 ? true : _ref2$shouldShowLegen,
+    onToggleLegendParam = _ref2.onToggleLegendParam,
+    syncgroupTimeState = _ref2.syncgroupTimeState;
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
-  var _useGetPlotsWithData = useGetPlotsWithData(plotPreset, selectedLocation, services, splitGeoJsonByCollection, t),
+  var _React$useState = React.useState(0),
+    legendHeight = _React$useState[0],
+    setLegendHeight = _React$useState[1];
+  var _useGetPlotsWithData = useGetPlotsWithData(plotPreset, selectedLocation, services, splitGeoJsonByCollection, t, syncgroupTimeState),
     plotsWithData = _useGetPlotsWithData.data,
-    isFetchingPlots = _useGetPlotsWithData.isFetching,
-    error = _useGetPlotsWithData.error;
+    isFetchingPlots = _useGetPlotsWithData.isFetching;
   React.useEffect(function () {
     if (isLoading) {
       isLoading(isFetchingPlots);
     }
   }, [isFetchingPlots, isLoading]);
-  return jsxs(Card, {
+  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) {
+      return '';
+    }
+    var errorKey = (plotsWithData == null || (_plotsWithData$ = plotsWithData[0]) == null || (_plotsWithData$ = _plotsWithData$.errors) == null ? void 0 : _plotsWithData$[0]) || 'error-message-general';
+    var translationKey = getErrorTranslationKey(errorKey, parametersFailingInAllPlots.length);
+    var errorMessage = t(translationKey);
+    return totalPlotCount === 1 ? errorMessage : t('all-plots') + ": " + errorMessage;
+  }, [t]);
+  var getParametersFailingInAllPlots = function getParametersFailingInAllPlots(plotsWithData, totalPlotCount) {
+    if (!plotsWithData || totalPlotCount === 0) {
+      return [];
+    }
+    var parameterCounts = {};
+    plotsWithData.forEach(function (plot) {
+      var _plot$failedParameter2;
+      (_plot$failedParameter2 = plot.failedParameters) == null || _plot$failedParameter2.forEach(function (param) {
+        var key = getParameterKey(param);
+        if (parameterCounts[key]) {
+          parameterCounts[key].count += 1;
+        } else {
+          parameterCounts[key] = {
+            count: 1,
+            param: param
+          };
+        }
+      });
+    });
+    return Object.values(parameterCounts).filter(function (_ref3) {
+      var count = _ref3.count;
+      return count === totalPlotCount;
+    }).map(function (_ref4) {
+      var param = _ref4.param;
+      return param;
+    });
+  };
+  var totalPlotCount = (plotsWithData == null ? void 0 : plotsWithData.length) || 0;
+  var parametersFailingInAllPlots = React.useMemo(function () {
+    return getParametersFailingInAllPlots(plotsWithData, totalPlotCount);
+  }, [plotsWithData, totalPlotCount]);
+  var hasParametersFailingInAllPlots = parametersFailingInAllPlots.length > 0;
+  var combinedErrorTitle = getErrorTitle(parametersFailingInAllPlots);
+  var combinedErrorInfo = React.useMemo(function () {
+    return hasParametersFailingInAllPlots ? getCombinedErrorInfo(parametersFailingInAllPlots, plotsWithData, totalPlotCount) : '';
+  }, [getCombinedErrorInfo, hasParametersFailingInAllPlots, parametersFailingInAllPlots, plotsWithData, totalPlotCount]);
+  return jsxs(Box, {
     "data-testid": "TimeSeriesView",
-    sx: {
-      border: 'solid 1px',
-      borderColor: 'geowebColors.cards.cardContainerBorder',
-      boxShadow: 'none'
-    },
-    children: [!!error && jsx(AlertBanner, {
-      info: "" + error.message,
-      shouldClose: true,
-      title: t('error-title')
-    }), !!plotsWithData && jsx(TimeSeriesChart, {
-      onToggleLegendParam: onToggleLegendParam,
-      plotsWithData: plotsWithData,
-      shouldShowLegend: shouldShowLegend
+    children: [hasParametersFailingInAllPlots ? jsx(Card, {
+      sx: {
+        border: 'solid 1px',
+        borderColor: 'geowebColors.cards.cardContainerBorder',
+        boxShadow: 'none'
+      },
+      children: jsx(Box, {
+        "data-testid": "TimeSeriesView-alert-banner",
+        children: jsx(AlertBanner, {
+          info: combinedErrorInfo,
+          shouldClose: true,
+          title: combinedErrorTitle
+        })
+      })
+    }) : null, !!plotsWithData && plotsWithData.length > 0 && jsxs(Card, {
+      sx: {
+        border: 'solid 1px',
+        borderColor: 'geowebColors.cards.cardContainerBorder',
+        boxShadow: 'none',
+        position: 'relative'
+      },
+      children: [!!plotsWithData && plotsWithData.length > 0 && jsx(PlotErrorBanners, {
+        getErrorTitle: getErrorTitle,
+        getErrorTranslationKey: getErrorTranslationKey,
+        legendHeight: legendHeight,
+        parametersFailingInAllPlots: parametersFailingInAllPlots,
+        plotsWithData: plotsWithData,
+        t: t
+      }), jsx(TimeSeriesChart, {
+        onLegendHeightChange: setLegendHeight,
+        onToggleLegendParam: onToggleLegendParam,
+        plotsWithData: plotsWithData,
+        shouldShowLegend: shouldShowLegend
+      })]
     })]
   });
 }, function (previousProps, nextProps) {
+  var _previousProps$syncgr, _nextProps$syncgroupT, _previousProps$syncgr2, _nextProps$syncgroupT2;
   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;
-  return samePreset && sameLocation && sameGeoJson && sameLegend;
+  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;
 });
 
 var TOOLTIP_TITLE = 'Timeseries Manager';
@@ -8089,6 +8305,7 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
       panelId: panelId
     }));
   };
+  var syncgroupTimeState = useSyncgroupTimeState(panelId, 1000);
   return jsxs(Stack, {
     "data-testid": "TimeSeriesConnect",
     sx: {
@@ -8152,7 +8369,8 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
         selectedLocation: timeSeriesLocation,
         services: services,
         shouldShowLegend: shouldShowLegend,
-        splitGeoJsonByCollection: geoJSONWithService || []
+        splitGeoJsonByCollection: geoJSONWithService || [],
+        syncgroupTimeState: syncgroupTimeState
       })
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/time-series",
-  "version": "15.2.0",
+  "version": "16.0.0",
   "description": "GeoWeb time-series library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -9,25 +9,25 @@
   },
   "dependencies": {
     "immer": "^10.0.3",
-    "@opengeoweb/shared": "15.2.0",
+    "@opengeoweb/shared": "16.0.0",
     "@reduxjs/toolkit": "^2.6.1",
     "react-redux": "^9.2.0",
-    "@opengeoweb/webmap": "15.2.0",
-    "@opengeoweb/webmap-react": "15.2.0",
+    "@opengeoweb/webmap": "16.0.0",
+    "@opengeoweb/webmap-react": "16.0.0",
     "lodash": "^4.17.21",
-    "@opengeoweb/api": "15.2.0",
-    "@opengeoweb/theme": "15.2.0",
-    "@opengeoweb/store": "15.2.0",
+    "@opengeoweb/api": "16.0.0",
+    "@opengeoweb/theme": "16.0.0",
+    "@opengeoweb/store": "16.0.0",
     "echarts-for-react": "^3.0.2",
     "echarts": "^5.4.3",
     "react-sortablejs": "^6.1.4",
-    "@opengeoweb/snackbar": "15.2.0",
+    "@opengeoweb/snackbar": "16.0.0",
     "react-window": "^2.2.6",
     "msw": "^2.7.3",
     "i18next": "^25.0.1",
     "react-i18next": "^15.1.1",
-    "@opengeoweb/core": "15.2.0",
-    "@opengeoweb/form-fields": "15.2.0",
+    "@opengeoweb/core": "16.0.0",
+    "@opengeoweb/form-fields": "16.0.0",
     "@mui/material": "^7.0.1",
     "react-hook-form": "^7.61.1",
     "uuid": "^10.0.0",

package/src/lib/TimeSeriesDemo.stories.d.ts

@@ -35,6 +35,7 @@ export declare const TimeSeriesEDRNetherlandsObsDemo: {
         }[];
     };
 };
+export declare const TimeSeriesEDRNetherlandsObsDemoWithSyncGroup: () => React.ReactElement;
 export declare const TimeSeriesUKDemo: () => React.ReactElement;
 declare const _default: {
     title: string;

package/src/lib/components/TimeSeries/TimeSeriesChart.d.ts

@@ -1,18 +1,33 @@
 import type { EChartsInstance, EChartsOption } from 'echarts-for-react';
 import React from 'react';
 import type { PlotWithData } from './types';
-export declare const useChartHeight: ({ plotsWithData, shouldShowLegend, option, }: {
+export declare const useChartHeight: ({ plotsWithData, shouldShowLegend, option, onLegendHeightChange, }: {
     plotsWithData: PlotWithData[];
     shouldShowLegend: boolean;
     option: EChartsOption;
+    onLegendHeightChange?: (height: number) => void;
 }) => {
     chartHeight: number;
     chartRef: React.RefObject<EChartsInstance>;
     updateHeight: (echartsInstance: EChartsInstance) => void;
 };
+export interface DataZoomState {
+    start: number;
+    end: number;
+}
+export declare const applyDataZoomState: (option: EChartsOption, dataZoomState: DataZoomState | null) => EChartsOption;
+export declare const extractDataZoomState: (params: {
+    start?: number;
+    end?: number;
+    batch?: {
+        start: number;
+        end: number;
+    }[];
+}) => DataZoomState | null;
 export declare const TimeSeriesChart: React.FC<{
     plotsWithData: PlotWithData[];
     animation?: boolean;
     shouldShowLegend?: boolean;
     onToggleLegendParam?: (legendId: string) => void;
+    onLegendHeightChange?: (height: number) => void;
 }>;

package/src/lib/components/TimeSeries/TimeSeriesView.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { PlotPreset, TimeSeriesService } from '@opengeoweb/shared';
+import type { TimeSliderStartEndStep } from '@opengeoweb/store';
 import type { PointerLocation, GeoJsonWithService } from './types';
 interface TimeSeriesViewProps {
     plotPreset: PlotPreset;
@@ -9,6 +10,7 @@ interface TimeSeriesViewProps {
     isLoading?: (startOrFinish: boolean) => void;
     shouldShowLegend?: boolean;
     onToggleLegendParam?: (legendId: string) => void;
+    syncgroupTimeState?: TimeSliderStartEndStep;
 }
 export declare const TimeSeriesView: React.FC<TimeSeriesViewProps>;
 export {};

package/src/lib/components/TimeSeries/types.d.ts

@@ -10,6 +10,11 @@ export interface Properties {
     propertyName: string;
     values: number[];
 }
+export interface FailedParameterInfo {
+    propertyName: string;
+    serviceId: string;
+    collectionId: string;
+}
 export interface UseGetLocationReturnTypeProperties {
     name?: string;
     detail?: string;
@@ -47,6 +52,8 @@ export interface Plot {
 }
 export interface PlotWithData extends Plot {
     parametersWithData: ParameterWithData[];
+    errors?: string[];
+    failedParameters?: FailedParameterInfo[];
 }
 export type PlotType = 'bar' | 'line' | 'scatter';
 export interface Parameter {

package/src/lib/components/TimeSeries/utils.d.ts

@@ -1,12 +1,16 @@
 import type { FeatureCollection, GeometryObject } from 'geojson';
 import type { Plot, PlotParameter, PlotPreset, TimeSeriesService } from '@opengeoweb/shared';
 import type { syncGroupsTypes } from '@opengeoweb/store';
-import type { EDRPositionResponse, EDRPositionResponseCoverageCollection, GeoJsonWithService, Parameter, ParameterWithData, PlotWithData, PointerLocation, TimeSeriesLocation, UseGetLocationReturnTypeProperties } from './types';
+import type { EDRPositionResponse, EDRPositionResponseCoverageCollection, FailedParameterInfo, GeoJsonWithService, Parameter, ParameterWithData, PlotWithData, PointerLocation, TimeSeriesLocation, UseGetLocationReturnTypeProperties } from './types';
+/** Maps plot ID to array of error message strings */
+export type PlotErrorsMap = Record<Plot['plotId'], string[]>;
+/** Maps plot ID to array of failed parameter information */
+export type FailedParametersMap = Record<Plot['plotId'], FailedParameterInfo[]>;
 export declare const createGeoJsonArrays: (locations: (FeatureCollection<GeometryObject, UseGetLocationReturnTypeProperties> | undefined)[], services: TimeSeriesService[] | undefined, hideFeatures: boolean, memoizedSelectedFeature: TimeSeriesLocation | null) => {
     combinedGeoJson: FeatureCollection<GeometryObject, syncGroupsTypes.PotentialDataProperties>;
 };
 export declare const getNearbyLocation: (parameter: Parameter, service: TimeSeriesService, selectedLocation: PointerLocation, geojsonMap: Map<string, GeoJsonWithService>) => TimeSeriesLocation | null;
-export declare const getPlotsWithParameters: (plots: Plot[], parameters: ParameterWithData[]) => PlotWithData[];
+export declare const getPlotsWithParameters: (plots: Plot[], parameters: ParameterWithData[], plotErrors?: PlotErrorsMap, failedParameters?: FailedParametersMap) => PlotWithData[];
 export declare function consolidateFeatures<P>(features: {
     id: string;
     geoJSON: FeatureCollection<GeometryObject, P>;

package/src/lib/utils/edrUtils.d.ts

@@ -1,5 +1,6 @@
 import type { Feature, Geometry, GeometryObject, Position } from 'geojson';
-import type { PlotParameter, TimeSeriesService } from '@opengeoweb/shared';
+import type { TimeSeriesService } from '@opengeoweb/shared';
+import type { TimeSliderStartEndStep } from '@opengeoweb/store';
 import { MapFeatureClass } from '@opengeoweb/webmap-react';
 import type { EDRCollection, EDRInstance, EDRParameter, Parameter, PointerLocation, SelectParameter } from '../components/TimeSeries/types';
 import type { TimeseriesCollectionDetail } from '../components/TimeSeriesSelect/utils';
@@ -44,7 +45,7 @@ export declare const getDetailsForCollectionId: (collections: TimeseriesCollecti
  * @returns Clipped EDR interval, e.g. ["startdate_as_isostring","enddate_as_isostring"]
  */
 export declare const clipEdrInterval: (interval: string[] | undefined, maxHoursBefore?: number, maxHoursAfter?: number, date?: number) => [string, string];
-export declare const constructTimeInterval: (collection: TimeseriesCollectionDetail | undefined, instance: EDRInstance, parameter: PlotParameter) => string;
+export declare const constructTimeInterval: (collection: TimeseriesCollectionDetail | undefined, instance: EDRInstance, syncgroupTimeState?: TimeSliderStartEndStep) => string;
 /**
  * Find nearest point to the target location in timeseries.
  * Uses equirectangular distance approximation which is not accurate for long

package/src/lib/utils/timeseries-api/hooks.d.ts

@@ -2,6 +2,7 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import type { FeatureCollection, Geometry } from 'geojson';
 import type { TFunction } from 'i18next';
 import type { PlotPreset, TimeSeriesService } from '@opengeoweb/shared';
+import type { TimeSliderStartEndStep } from '@opengeoweb/store';
 import type { EDRServiceInformation } from './api';
 import type { EDRCollection, EDRInstance, GeoJsonWithService, PlotWithData, PointerLocation, UseGetLocationReturnTypeProperties } from '../../components/TimeSeries/types';
 import type { ParameterCollectionQueryData } from '../../components/TimeSeries/utils';
@@ -10,6 +11,7 @@ interface CombinedResult<T> {
     data: T | undefined;
     isFetching: boolean;
     error: Error | null | undefined;
+    parameterErrors?: Record<number, string>;
 }
 export declare const timeseriesEDRQueryOptions: {
     readonly getServiceInformationQuery: (serviceUrl: string) => import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<EDRServiceInformation, Error, EDRServiceInformation, string[]>, "queryFn"> & {
@@ -51,7 +53,7 @@ export declare const useGetDetailsForCollection: (service: TimeSeriesService, co
 export declare const useGetInstances: (serviceUrl: string, collectionId: string, supportsInstances?: boolean) => UseQueryResult<EDRInstance[]>;
 export declare const useGetServiceCollectionDetails: (services: TimeSeriesService[], isOpen: boolean) => CombinedResult<TimeseriesCollectionDetail[]>;
 export declare const useGetCollectionsAndInstanceDetails: (queryData: Record<string, ParameterCollectionQueryData>) => CombinedResult<TimeseriesCollectionDetail[]>;
-export declare const useGetPlotsWithData: (plotsWithoutData: PlotPreset, selectedLocation: PointerLocation, services: TimeSeriesService[], splitGeoJsonByCollection: GeoJsonWithService[], t: TFunction) => {
+export declare const useGetPlotsWithData: (plotsWithoutData: PlotPreset, selectedLocation: PointerLocation, services: TimeSeriesService[], splitGeoJsonByCollection: GeoJsonWithService[], t: TFunction, syncgroupTimeState?: TimeSliderStartEndStep) => {
     data: PlotWithData[] | undefined;
     isFetching: boolean;
     error: Error | null | undefined;