@opengeoweb/time-series 15.2.0 → 15.3.0

package/index.esm.js

@@ -3,7 +3,7 @@ import React, { useCallback, useState, useMemo, 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';
@@ -1120,9 +1120,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];
@@ -3248,7 +3254,7 @@ var useGetCollectionsAndInstanceDetails = function useGetCollectionsAndInstanceD
     }
   });
 };
-var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selectedLocation, services, splitGeoJsonByCollection, t) {
+var useGetPlotsWithData = function useGetPlotsWithData(plotsWithoutData, selectedLocation, services, splitGeoJsonByCollection, t, syncgroupTimeState) {
   var _useState = useState([]),
     plotsWithData = _useState[0],
     setPlotsWithData = _useState[1];
@@ -3281,7 +3287,7 @@ 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']),
         queryFn: function () {
@@ -3320,7 +3326,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) {
@@ -7660,6 +7666,34 @@ 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,
@@ -7670,14 +7704,18 @@ var TimeSeriesChart = function TimeSeriesChart(_ref2) {
   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
     }),
     chartHeight = _useChartHeight.chartHeight,
     chartRef = _useChartHeight.chartRef,
@@ -7690,6 +7728,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 +7746,7 @@ var TimeSeriesChart = function TimeSeriesChart(_ref2) {
           }
         }
       },
-      option: Object.assign({}, option, {
+      option: Object.assign({}, optionWithZoom, {
         animation: animation
       }),
       ref: chartRef,
@@ -7724,10 +7768,11 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref) {
     isLoading = _ref.isLoading,
     _ref$shouldShowLegend = _ref.shouldShowLegend,
     shouldShowLegend = _ref$shouldShowLegend === void 0 ? true : _ref$shouldShowLegend,
-    onToggleLegendParam = _ref.onToggleLegendParam;
+    onToggleLegendParam = _ref.onToggleLegendParam,
+    syncgroupTimeState = _ref.syncgroupTimeState;
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
-  var _useGetPlotsWithData = useGetPlotsWithData(plotPreset, selectedLocation, services, splitGeoJsonByCollection, t),
+  var _useGetPlotsWithData = useGetPlotsWithData(plotPreset, selectedLocation, services, splitGeoJsonByCollection, t, syncgroupTimeState),
     plotsWithData = _useGetPlotsWithData.data,
     isFetchingPlots = _useGetPlotsWithData.isFetching,
     error = _useGetPlotsWithData.error;
@@ -7754,11 +7799,13 @@ var TimeSeriesView = /*#__PURE__*/React.memo(function (_ref) {
     })]
   });
 }, 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 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 && sameTime;
 });
 
 var TOOLTIP_TITLE = 'Timeseries Manager';
@@ -8089,6 +8136,7 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref3) {
       panelId: panelId
     }));
   };
+  var syncgroupTimeState = useSyncgroupTimeState(panelId, 1000);
   return jsxs(Stack, {
     "data-testid": "TimeSeriesConnect",
     sx: {
@@ -8152,7 +8200,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": "15.3.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": "15.3.0",
     "@reduxjs/toolkit": "^2.6.1",
     "react-redux": "^9.2.0",
-    "@opengeoweb/webmap": "15.2.0",
-    "@opengeoweb/webmap-react": "15.2.0",
+    "@opengeoweb/webmap": "15.3.0",
+    "@opengeoweb/webmap-react": "15.3.0",
     "lodash": "^4.17.21",
-    "@opengeoweb/api": "15.2.0",
-    "@opengeoweb/theme": "15.2.0",
-    "@opengeoweb/store": "15.2.0",
+    "@opengeoweb/api": "15.3.0",
+    "@opengeoweb/theme": "15.3.0",
+    "@opengeoweb/store": "15.3.0",
     "echarts-for-react": "^3.0.2",
     "echarts": "^5.4.3",
     "react-sortablejs": "^6.1.4",
-    "@opengeoweb/snackbar": "15.2.0",
+    "@opengeoweb/snackbar": "15.3.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": "15.3.0",
+    "@opengeoweb/form-fields": "15.3.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

@@ -10,6 +10,19 @@ export declare const useChartHeight: ({ plotsWithData, shouldShowLegend, option,
     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;

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/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';
@@ -51,7 +52,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;