From b40143197dedce7c6ada91c00d22669069a81030 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Tue, 13 Feb 2024 07:19:05 -0800 Subject: [PATCH] refactor to allow custom temporal dimension into time slider --- ...ckage-time-slider2-config-time-slider.json | 52 ++++++++++++++++++- .../time-slider-state.ts | 44 +++++++++++++++- .../src/time-slider-types.tsx | 10 ++++ .../geoview-time-slider/src/time-slider.tsx | 6 ++- 4 files changed, 108 insertions(+), 4 deletions(-) diff --git a/packages/geoview-core/public/configs/package-time-slider2-config-time-slider.json b/packages/geoview-core/public/configs/package-time-slider2-config-time-slider.json index 89ad2aca7f0..5d4a30fb9e7 100644 --- a/packages/geoview-core/public/configs/package-time-slider2-config-time-slider.json +++ b/packages/geoview-core/public/configs/package-time-slider2-config-time-slider.json @@ -12,7 +12,57 @@ }, "locked": true, "reversed": true, - "defaultValue": "" + "defaultValue": "", + "temporalDimension": { + "field": "datetime", + "default": "1696-01-01T05:00:00Z", + "unitSymbol": "", + "range": [ + "1696-01-01T05:00:00Z", + "1704-01-01T05:00:00Z", + "1712-01-01T05:00:00Z", + "1720-01-01T05:00:00Z", + "1728-01-01T05:00:00Z", + "1736-01-01T05:00:00Z", + "1744-01-01T05:00:00Z", + "1752-01-01T05:00:00Z", + "1760-01-01T05:00:00Z", + "1768-01-01T05:00:00Z", + "1776-01-01T05:00:00Z", + "1784-01-01T05:00:00Z", + "1792-01-01T05:00:00Z", + "1800-01-01T05:00:00Z", + "1808-01-01T05:00:00Z", + "1816-01-01T05:00:00Z", + "1824-01-01T05:00:00Z", + "1832-01-01T05:00:00Z", + "1840-01-01T05:00:00Z", + "1848-01-01T05:00:00Z", + "1856-01-01T05:00:00Z", + "1864-01-01T05:00:00Z", + "1872-01-01T05:00:00Z", + "1880-01-01T05:00:00Z", + "1888-01-01T04:47:32Z", + "1896-01-01T04:47:32Z", + "1904-01-01T04:47:32Z", + "1912-01-01T04:47:32Z", + "1920-01-01T04:47:32Z", + "1928-01-01T04:47:32Z", + "1936-01-01T04:47:32Z", + "1944-01-01T03:47:32Z", + "1952-01-01T04:47:32Z", + "1960-01-01T04:47:32Z", + "1968-01-01T04:47:32Z", + "1976-01-01T04:47:32Z", + "1984-01-01T04:47:32Z", + "1992-01-01T04:47:32Z", + "2000-01-01T04:47:32Z", + "2008-01-01T04:47:32Z", + "2016-01-01T04:47:32Z" + ], + "nearestValues": "discrete", + "singleHandle": true + } }, { "layerPaths": ["wmsLYR1-spatiotemporel/RADAR_1KM_RSNO"], diff --git a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/time-slider-state.ts b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/time-slider-state.ts index 05c7476bbfa..0241e621ed3 100644 --- a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/time-slider-state.ts +++ b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/time-slider-state.ts @@ -8,6 +8,16 @@ export type TimeSliderLayerSet = { [layerPath: string]: TypeTimeSliderValues; }; +export type TemporalDimensionProps = { + field: string; + default: string; + unitSymbol: string; + range: string[]; + nearestValues: string; + singleHandle: boolean; +}; + +// #region INTERFACES export interface TypeTimeSliderValues { title?: string; description?: string; @@ -23,6 +33,9 @@ export interface TypeTimeSliderValues { delay: number; locked?: boolean; reversed?: boolean; + nearestValues?: string; + unitSymbol?: string; + temporalDimension?: TemporalDimensionProps | null; } export interface ITimeSliderState { @@ -40,6 +53,8 @@ export interface ITimeSliderState { setReversed: (layerPath: string, locked: boolean) => void; setDefaultValue: (layerPath: string, defaultValue: string) => void; setValues: (layerPath: string, values: number[]) => void; + setVisibleTimeSliderLayers: (visibleLayerPaths: string[]) => void; + setTemporalDimension: (layerPath: string, temporalDimension: TemporalDimensionProps | null) => void; }; } // #endregion INTERFACES @@ -156,6 +171,34 @@ export function initializeTimeSliderState(set: TypeSetStore, get: TypeGetStore): get().timeSliderState.actions.applyFilters(layerPath, values); }, // #endregion ACTIONS + setTemporalDimension(layerPath: string, temporalDimension: TemporalDimensionProps | null): void { + const sliderLayers = get().timeSliderState.timeSliderLayers; + if (temporalDimension?.field) { + sliderLayers[layerPath].field = temporalDimension.field; + } + if (temporalDimension?.default) { + sliderLayers[layerPath].defaultValue = temporalDimension.default; + } + if (temporalDimension?.singleHandle) { + sliderLayers[layerPath].singleHandle = temporalDimension.singleHandle; + } + if (temporalDimension?.nearestValues) { + sliderLayers[layerPath].nearestValues = temporalDimension.nearestValues; + } + if (temporalDimension?.unitSymbol) { + sliderLayers[layerPath].unitSymbol = temporalDimension.unitSymbol; + } + if (temporalDimension?.range) { + sliderLayers[layerPath].range = temporalDimension.range; + } + sliderLayers[layerPath].temporalDimension = temporalDimension; + set({ + timeSliderState: { + ...get().timeSliderState, + timeSliderLayers: { ...sliderLayers }, + }, + }); + }, }, } as ITimeSliderState; @@ -166,5 +209,4 @@ export function initializeTimeSliderState(set: TypeSetStore, get: TypeGetStore): // Layer state selectors // ********************************************************** export const useTimeSliderLayers = () => useStore(useGeoViewStore(), (state) => state.timeSliderState.timeSliderLayers); - export const useTimeSliderStoreActions = () => useStore(useGeoViewStore(), (state) => state.timeSliderState.actions); diff --git a/packages/geoview-time-slider/src/time-slider-types.tsx b/packages/geoview-time-slider/src/time-slider-types.tsx index bf74cd4d56a..1f4e77a8eaf 100644 --- a/packages/geoview-time-slider/src/time-slider-types.tsx +++ b/packages/geoview-time-slider/src/time-slider-types.tsx @@ -1,5 +1,14 @@ import { TypeLocalizedString } from 'geoview-core/src/geo/map/map-schema-types'; +export type TemporalDimensionProps = { + field: string; + default: string; + unitSymbol: string; + range: string[]; + nearestValues: string; + singleHandle: boolean; +}; + export type SliderProps = { layerPaths: string[]; title: TypeLocalizedString; @@ -7,6 +16,7 @@ export type SliderProps = { locked: boolean; reversed: boolean; defaultValue: string; + temporalDimension: TemporalDimensionProps | null; }; export type ConfigProps = { diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index c20b378c0fd..81add28114c 100644 --- a/packages/geoview-time-slider/src/time-slider.tsx +++ b/packages/geoview-time-slider/src/time-slider.tsx @@ -51,7 +51,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { // Get actions and states from store // TODO: evaluate best option to set value by layer path.... trough a getter? - const { setTitle, setDescription, setDefaultValue, setValues, setLocked, setReversed, setDelay, setFiltering } = + const { setTitle, setDescription, setDefaultValue, setValues, setLocked, setReversed, setDelay, setFiltering, setTemporalDimension } = useTimeSliderStoreActions(); // TODO: check performance as we should technically have one selector by constant @@ -70,6 +70,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { delay, locked, reversed, + temporalDimension, } = useTimeSliderLayers()[layerPath]; // slider config @@ -81,11 +82,12 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { if (defaultValue === undefined) setDefaultValue(layerPath, sliderConfig?.defaultValue || ''); if (locked === undefined) setLocked(layerPath, sliderConfig?.locked !== undefined ? sliderConfig?.locked : false); if (reversed === undefined) setReversed(layerPath, sliderConfig?.reversed !== undefined ? sliderConfig?.reversed : false); + if (temporalDimension === undefined) + setTemporalDimension(layerPath, sliderConfig?.temporalDimension !== undefined ? sliderConfig?.temporalDimension : null); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const timeStampRange = range.map((entry: string | number | Date) => new Date(entry).getTime()); - // Check if range occurs in a single day or year const timeDelta = minAndMax[1] - minAndMax[0]; const dayDelta = new Date(minAndMax[1]).getDate() - new Date(minAndMax[0]).getDate();