From 50219231fe504927640bf62cbed1ff09562ac191 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Tue, 13 Feb 2024 07:19:05 -0800 Subject: [PATCH 01/17] 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(); From b50c94805859cf75480f78da62ac55cea9d88428 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Fri, 16 Feb 2024 00:10:28 -0800 Subject: [PATCH 02/17] add time dimension config in custom config json --- ...ckage-time-slider2-config-time-slider.json | 42 +++++++++---------- .../time-slider-state.ts | 39 ----------------- .../geoview-layers/abstract-geoview-layers.ts | 11 +++++ .../geoview-time-slider/src/time-slider.tsx | 7 +--- 4 files changed, 34 insertions(+), 65 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 5d4a30fb9e7..c8c1033a0dd 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 @@ -15,27 +15,27 @@ "defaultValue": "", "temporalDimension": { "field": "datetime", - "default": "1696-01-01T05:00:00Z", + "default": ["1950-01-01T05:00:00Z", "1970-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", + "1900-01-01T05:00:00Z", + "1905-01-01T05:00:00Z", + "1910-01-01T05:00:00Z", + "1915-01-01T05:00:00Z", + "1920-01-01T05:00:00Z", + "1930-01-01T05:00:00Z", + "1940-01-01T05:00:00Z", + "1945-01-01T05:00:00Z", + "1950-01-01T05:00:00Z", + "1955-01-01T05:00:00Z", + "1960-01-01T05:00:00Z", + "1965-01-01T05:00:00Z", + "1970-01-01T05:00:00Z", + "1975-01-01T05:00:00Z", + "1980-01-01T05:00:00Z", + "1985-01-01T05:00:00Z", + "1990-01-01T05:00:00Z", + "1995-01-01T05:00:00Z", "1840-01-01T05:00:00Z", "1848-01-01T05:00:00Z", "1856-01-01T05:00:00Z", @@ -58,9 +58,9 @@ "1992-01-01T04:47:32Z", "2000-01-01T04:47:32Z", "2008-01-01T04:47:32Z", - "2016-01-01T04:47:32Z" + "2000-01-01T04:47:32Z" ], - "nearestValues": "discrete", + "nearestValues": "absolute", "singleHandle": true } }, 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 0241e621ed3..c6cb4a92cc7 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,15 +8,6 @@ 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; @@ -35,7 +26,6 @@ export interface TypeTimeSliderValues { reversed?: boolean; nearestValues?: string; unitSymbol?: string; - temporalDimension?: TemporalDimensionProps | null; } export interface ITimeSliderState { @@ -54,7 +44,6 @@ export interface ITimeSliderState { 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 @@ -171,34 +160,6 @@ 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; diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts index ac9f73b04ca..8a192b02053 100644 --- a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts +++ b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts @@ -437,6 +437,17 @@ export abstract class AbstractGeoViewLayer { if (layerStatus === 'processed') this.setLayerPhase('processed', layerPath); } + /** *************************************************************************************************************************** + * Change the layer temporal dimension property and emit an event to update existing layer sets. + * + * @param {TimeDimension} timeDimension The value to assign to the layer temporal dimension property. + * @param {string} layerPath The layer path to the layer's configuration affected by the change. + */ + setLayerTemporalDimension(timeDimension: TimeDimension, layerPath?: string) { + layerPath = layerPath || this.layerPathAssociatedToTheGeoviewLayer; + this.layerTemporalDimension[layerPath] = timeDimension; + } + /** *************************************************************************************************************************** * Process recursively the list of layer entries to see if all of them are processed. * diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index 81add28114c..271261e3b2c 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, setTemporalDimension } = + const { setTitle, setDescription, setDefaultValue, setValues, setLocked, setReversed, setDelay, setFiltering } = useTimeSliderStoreActions(); // TODO: check performance as we should technically have one selector by constant @@ -69,8 +69,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { values, delay, locked, - reversed, - temporalDimension, + reversed } = useTimeSliderLayers()[layerPath]; // slider config @@ -82,8 +81,6 @@ 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 }, []); From 50cce108cfc83ab4053a36e3d47e5c4b18b4869e Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Fri, 16 Feb 2024 00:14:57 -0800 Subject: [PATCH 03/17] code cleanup --- .../time-slider-state.ts | 3 --- .../layer/geoview-layers/abstract-geoview-layers.ts | 11 ----------- .../geoview-time-slider/src/time-slider-types.tsx | 12 ++---------- 3 files changed, 2 insertions(+), 24 deletions(-) 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 c6cb4a92cc7..90495fd2425 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 @@ -24,8 +24,6 @@ export interface TypeTimeSliderValues { delay: number; locked?: boolean; reversed?: boolean; - nearestValues?: string; - unitSymbol?: string; } export interface ITimeSliderState { @@ -43,7 +41,6 @@ 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; }; } // #endregion INTERFACES diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts index 8a192b02053..ac9f73b04ca 100644 --- a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts +++ b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts @@ -437,17 +437,6 @@ export abstract class AbstractGeoViewLayer { if (layerStatus === 'processed') this.setLayerPhase('processed', layerPath); } - /** *************************************************************************************************************************** - * Change the layer temporal dimension property and emit an event to update existing layer sets. - * - * @param {TimeDimension} timeDimension The value to assign to the layer temporal dimension property. - * @param {string} layerPath The layer path to the layer's configuration affected by the change. - */ - setLayerTemporalDimension(timeDimension: TimeDimension, layerPath?: string) { - layerPath = layerPath || this.layerPathAssociatedToTheGeoviewLayer; - this.layerTemporalDimension[layerPath] = timeDimension; - } - /** *************************************************************************************************************************** * Process recursively the list of layer entries to see if all of them are processed. * diff --git a/packages/geoview-time-slider/src/time-slider-types.tsx b/packages/geoview-time-slider/src/time-slider-types.tsx index 1f4e77a8eaf..3bfc37d7a53 100644 --- a/packages/geoview-time-slider/src/time-slider-types.tsx +++ b/packages/geoview-time-slider/src/time-slider-types.tsx @@ -1,14 +1,6 @@ +import { TimeDimension } from 'geoview-core'; 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; @@ -16,7 +8,7 @@ export type SliderProps = { locked: boolean; reversed: boolean; defaultValue: string; - temporalDimension: TemporalDimensionProps | null; + temporalDimension: TimeDimension; }; export type ConfigProps = { From 3d071e337d64a2645294cffffca64af8b42c4729 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Fri, 16 Feb 2024 05:47:54 -0800 Subject: [PATCH 04/17] override time dimension with custom if preset --- ...ckage-time-slider2-config-time-slider.json | 86 ++++++++----------- .../geoview-layers/abstract-geoview-layers.ts | 12 +++ packages/geoview-time-slider/src/index.tsx | 9 +- .../geoview-time-slider/src/time-slider.tsx | 3 +- 4 files changed, 57 insertions(+), 53 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 c8c1033a0dd..529d2bd5a12 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 @@ -10,58 +10,45 @@ "en": "Custom description", "fr": "Descriptif personnalisé" }, - "locked": true, - "reversed": true, - "defaultValue": "", + "locked": false, + "reversed": false, "temporalDimension": { "field": "datetime", - "default": ["1950-01-01T05:00:00Z", "1970-01-01T05:00:00Z"], + "default": ["1940-01-01T05:00:00Z", "1980-01-01T05:00:00Z"], "unitSymbol": "", - "range": [ - "1900-01-01T05:00:00Z", - "1905-01-01T05:00:00Z", - "1910-01-01T05:00:00Z", - "1915-01-01T05:00:00Z", - "1920-01-01T05:00:00Z", - "1930-01-01T05:00:00Z", - "1940-01-01T05:00:00Z", - "1945-01-01T05:00:00Z", - "1950-01-01T05:00:00Z", - "1955-01-01T05:00:00Z", - "1960-01-01T05:00:00Z", - "1965-01-01T05:00:00Z", - "1970-01-01T05:00:00Z", - "1975-01-01T05:00:00Z", - "1980-01-01T05:00:00Z", - "1985-01-01T05:00:00Z", - "1990-01-01T05:00:00Z", - "1995-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", - "2000-01-01T04:47:32Z" - ], + "range": { + "type": "absolute", + "range": [ + "1900-01-01T05:00:00Z", + "1904-01-01T05:00:00Z", + "1908-01-01T05:00:00Z", + "1912-01-01T05:00:00Z", + "1916-01-01T05:00:00Z", + "1920-01-01T05:00:00Z", + "1924-01-01T05:00:00Z", + "1928-01-01T05:00:00Z", + "1932-01-01T05:00:00Z", + "1936-01-01T05:00:00Z", + "1940-01-01T05:00:00Z", + "1944-01-01T05:00:00Z", + "1948-01-01T05:00:00Z", + "1952-01-01T05:00:00Z", + "1956-01-01T05:00:00Z", + "1960-01-01T05:00:00Z", + "1964-01-01T05:00:00Z", + "1968-01-01T05:00:00Z", + "1972-01-01T05:00:00Z", + "1976-01-01T05:00:00Z", + "1980-01-01T05:00:00Z", + "1984-01-01T05:00:00Z", + "1988-01-01T05:00:00Z", + "1992-01-01T05:00:00Z", + "1996-01-01T05:00:00Z", + "2000-01-01T05:00:00Z" + ] + }, "nearestValues": "absolute", - "singleHandle": true + "singleHandle": false } }, { @@ -75,8 +62,7 @@ "fr": "Descriptif personnalisé" }, "locked": true, - "reversed": true, - "defaultValue": "" + "reversed": true }, { "layerPaths": ["MSI/msi-94-or-more"] diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts index ac9f73b04ca..b3b1623cb7a 100644 --- a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts +++ b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts @@ -1499,6 +1499,18 @@ export abstract class AbstractGeoViewLayer { return this.layerTemporalDimension[layerPath]; } + /** *************************************************************************************************************************** + * Change the layer phase property and emit an event to update existing layer sets. + * Change the layer temporal dimension property and emit an event to update existing layer sets. + * + * @param {string} layerPath The layer path to the layer's configuration affected by the change. + * @param {TimeDimension} timeDimension The value to assign to the layer temporal dimension property. + */ + setTemporalDimension(layerPath: string, timeDimension: TimeDimension): void { + layerPath = layerPath || this.layerPathAssociatedToTheGeoviewLayer; + this.layerTemporalDimension[layerPath] = timeDimension; + } + /** *************************************************************************************************************************** * Get the bounds of the layer represented in the layerConfig pointed to by the cached layerPath, returns updated bounds * diff --git a/packages/geoview-time-slider/src/index.tsx b/packages/geoview-time-slider/src/index.tsx index 70f4f6d7e42..b2a4de41652 100644 --- a/packages/geoview-time-slider/src/index.tsx +++ b/packages/geoview-time-slider/src/index.tsx @@ -1,4 +1,4 @@ -import { AnySchemaObject, Cast, toJsonObject, TypeJsonObject, TypeTabs } from 'geoview-core'; +import { AnySchemaObject, api, Cast, toJsonObject, TypeJsonObject, TypeTabs } from 'geoview-core'; import { TimeSliderIcon } from 'geoview-core/src/ui'; import { FooterPlugin } from 'geoview-core/src/api/plugin/footer-plugin'; @@ -96,6 +96,13 @@ class TimeSliderPlugin extends FooterPlugin { }); onCreateContentProps = (): TypeTabs => { + // Set custom time dimension if applicable + this.configObj.sliders.forEach((obj: any) => { + if (obj.temporalDimension) { + api.maps[this.pluginProps.mapId].layer.geoviewLayer(obj.layerPaths[0]).setTemporalDimension(obj.layerPaths[0], obj.temporalDimension) + } + }); + return { id: 'time-slider', value: this.value!, diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index 271261e3b2c..fe160a6f5ac 100644 --- a/packages/geoview-time-slider/src/time-slider.tsx +++ b/packages/geoview-time-slider/src/time-slider.tsx @@ -78,7 +78,6 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { const sliderConfig = config?.sliders?.find((o: { layerPaths: string[] }) => o.layerPaths.includes(layerPath)); if (title === undefined) setTitle(layerPath, getLocalizedValue(sliderConfig?.title, mapId) || ''); if (description === undefined) setDescription(layerPath, getLocalizedValue(sliderConfig?.description, mapId) || ''); - 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); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -331,7 +330,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { style={{ width: '80%', color: 'primary' }} min={minAndMax[0]} max={minAndMax[1]} - defaultValue={Number(defaultValue)} + defaultValue={defaultValue} value={values} valueLabelFormat={(value) => valueLabelFormat(value)} marks={sliderMarks} From 888afe8f14dedcacc11550c84acaf04d887b9940 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Fri, 16 Feb 2024 05:53:52 -0800 Subject: [PATCH 05/17] fix warnings --- packages/geoview-time-slider/src/index.tsx | 7 +++++-- packages/geoview-time-slider/src/time-slider.tsx | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/geoview-time-slider/src/index.tsx b/packages/geoview-time-slider/src/index.tsx index b2a4de41652..b969aa3c034 100644 --- a/packages/geoview-time-slider/src/index.tsx +++ b/packages/geoview-time-slider/src/index.tsx @@ -5,6 +5,7 @@ import { FooterPlugin } from 'geoview-core/src/api/plugin/footer-plugin'; import { TimeSliderPanel } from './time-slider-panel'; import schema from '../schema.json'; import defaultConfig from '../default-config-time-slider-panel.json'; +import { SliderProps } from './time-slider-types'; export interface LayerProps { layerPath: string; @@ -97,9 +98,11 @@ class TimeSliderPlugin extends FooterPlugin { onCreateContentProps = (): TypeTabs => { // Set custom time dimension if applicable - this.configObj.sliders.forEach((obj: any) => { + this.configObj.sliders.forEach((obj: SliderProps) => { if (obj.temporalDimension) { - api.maps[this.pluginProps.mapId].layer.geoviewLayer(obj.layerPaths[0]).setTemporalDimension(obj.layerPaths[0], obj.temporalDimension) + api.maps[this.pluginProps.mapId].layer + .geoviewLayer(obj.layerPaths[0]) + .setTemporalDimension(obj.layerPaths[0], obj.temporalDimension); } }); diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index fe160a6f5ac..5d412dc149c 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, setValues, setLocked, setReversed, setDelay, setFiltering } = useTimeSliderStoreActions(); // TODO: check performance as we should technically have one selector by constant @@ -69,7 +69,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { values, delay, locked, - reversed + reversed, } = useTimeSliderLayers()[layerPath]; // slider config From bfb4838ed64e3348424e530c5a051c97003effd2 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Tue, 20 Feb 2024 03:28:57 -0800 Subject: [PATCH 06/17] fix range items autogenerated using createRangeOGC util --- ...ckage-time-slider2-config-time-slider.json | 32 +------------------ .../time-slider-event-processor.ts | 8 ++++- .../geoview-layers/abstract-geoview-layers.ts | 10 +++++- .../geoview-time-slider/src/time-slider.tsx | 4 +-- 4 files changed, 18 insertions(+), 36 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 529d2bd5a12..b944db591bb 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 @@ -16,37 +16,7 @@ "field": "datetime", "default": ["1940-01-01T05:00:00Z", "1980-01-01T05:00:00Z"], "unitSymbol": "", - "range": { - "type": "absolute", - "range": [ - "1900-01-01T05:00:00Z", - "1904-01-01T05:00:00Z", - "1908-01-01T05:00:00Z", - "1912-01-01T05:00:00Z", - "1916-01-01T05:00:00Z", - "1920-01-01T05:00:00Z", - "1924-01-01T05:00:00Z", - "1928-01-01T05:00:00Z", - "1932-01-01T05:00:00Z", - "1936-01-01T05:00:00Z", - "1940-01-01T05:00:00Z", - "1944-01-01T05:00:00Z", - "1948-01-01T05:00:00Z", - "1952-01-01T05:00:00Z", - "1956-01-01T05:00:00Z", - "1960-01-01T05:00:00Z", - "1964-01-01T05:00:00Z", - "1968-01-01T05:00:00Z", - "1972-01-01T05:00:00Z", - "1976-01-01T05:00:00Z", - "1980-01-01T05:00:00Z", - "1984-01-01T05:00:00Z", - "1988-01-01T05:00:00Z", - "1992-01-01T05:00:00Z", - "1996-01-01T05:00:00Z", - "2000-01-01T05:00:00Z" - ] - }, + "range": "1900-01-01T05:00:00Z/2000-01-01T05:00:00Z/P1Y", "nearestValues": "absolute", "singleHandle": false } diff --git a/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts b/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts index 09550af7c3c..290a991e62e 100644 --- a/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts +++ b/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts @@ -121,7 +121,13 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor { const fieldIndex = localizedOutFields ? localizedOutFields.indexOf(field) : -1; if (fieldIndex !== -1 && localizedAliasFields?.length === localizedOutFields?.length) fieldAlias = localizedAliasFields![fieldIndex]; - const values = singleHandle ? [new Date(temporalDimensionInfo.default).getTime()] : [...minAndMax]; + // eslint-disable-next-line no-nested-ternary + const values = singleHandle + ? [new Date(temporalDimensionInfo.default).getTime()] + : defaultValue + ? [new Date(defaultValue[0]).getTime(), new Date(defaultValue[1]).getTime()] + : [...minAndMax]; + const sliderData: TimeSliderLayerSet = { [layerPath]: { name, diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts index b3b1623cb7a..30627f54db6 100644 --- a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts +++ b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts @@ -1506,8 +1506,16 @@ export abstract class AbstractGeoViewLayer { * @param {string} layerPath The layer path to the layer's configuration affected by the change. * @param {TimeDimension} timeDimension The value to assign to the layer temporal dimension property. */ - setTemporalDimension(layerPath: string, timeDimension: TimeDimension): void { + setTemporalDimension(layerPath: string, temporalDimension: TimeDimension): void { layerPath = layerPath || this.layerPathAssociatedToTheGeoviewLayer; + const timeDimension: TimeDimension = { + field: temporalDimension.field, + default: temporalDimension.default, + unitSymbol: temporalDimension.unitSymbol, + nearestValues: temporalDimension.nearestValues, + range: api.dateUtilities.createRangeOGC(temporalDimension.range as unknown as string), + singleHandle: temporalDimension.singleHandle, + }; this.layerTemporalDimension[layerPath] = timeDimension; } diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index 5d412dc149c..f31ccbe5b7f 100644 --- a/packages/geoview-time-slider/src/time-slider.tsx +++ b/packages/geoview-time-slider/src/time-slider.tsx @@ -51,8 +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, setValues, setLocked, setReversed, setDelay, setFiltering } = - useTimeSliderStoreActions(); + const { setTitle, setDescription, setValues, setLocked, setReversed, setDelay, setFiltering } = useTimeSliderStoreActions(); // TODO: check performance as we should technically have one selector by constant const { @@ -330,7 +329,6 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { style={{ width: '80%', color: 'primary' }} min={minAndMax[0]} max={minAndMax[1]} - defaultValue={defaultValue} value={values} valueLabelFormat={(value) => valueLabelFormat(value)} marks={sliderMarks} From b0108aa37a8e790ded9a715bc54a786ed41623fa Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Tue, 20 Feb 2024 03:32:04 -0800 Subject: [PATCH 07/17] fix default value --- .../public/configs/package-time-slider2-config-time-slider.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b944db591bb..05f5e42ca3d 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 @@ -14,7 +14,7 @@ "reversed": false, "temporalDimension": { "field": "datetime", - "default": ["1940-01-01T05:00:00Z", "1980-01-01T05:00:00Z"], + "default": ["1940-01-01T05:00:00Z", "1960-01-01T05:00:00Z"], "unitSymbol": "", "range": "1900-01-01T05:00:00Z/2000-01-01T05:00:00Z/P1Y", "nearestValues": "absolute", From 8c8dffd921ecd86d61d85db0e1bcf02804b09147 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Tue, 20 Feb 2024 06:38:36 -0800 Subject: [PATCH 08/17] remove default value logic --- .../time-slider-event-processor.ts | 8 ++------ .../time-slider-state.ts | 1 - .../geo/layer/geoview-layers/abstract-geoview-layers.ts | 5 ++--- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts b/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts index 290a991e62e..6efe62f1fb6 100644 --- a/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts +++ b/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts @@ -112,6 +112,7 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor { const defaultValue = temporalDimensionInfo.default; const minAndMax: number[] = [new Date(range[0]).getTime(), new Date(range[range.length - 1]).getTime()]; const { field, singleHandle } = temporalDimensionInfo; + // If the field type has an alias, use that as a label let fieldAlias = field; const { featureInfo } = api.maps[mapId].layer.registeredLayers[layerPath].source!; @@ -121,12 +122,7 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor { const fieldIndex = localizedOutFields ? localizedOutFields.indexOf(field) : -1; if (fieldIndex !== -1 && localizedAliasFields?.length === localizedOutFields?.length) fieldAlias = localizedAliasFields![fieldIndex]; - // eslint-disable-next-line no-nested-ternary - const values = singleHandle - ? [new Date(temporalDimensionInfo.default).getTime()] - : defaultValue - ? [new Date(defaultValue[0]).getTime(), new Date(defaultValue[1]).getTime()] - : [...minAndMax]; + const values = singleHandle ? [new Date(temporalDimensionInfo.default).getTime()] : [...minAndMax]; const sliderData: TimeSliderLayerSet = { [layerPath]: { 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 90495fd2425..9816b9f18c6 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,7 +8,6 @@ export type TimeSliderLayerSet = { [layerPath: string]: TypeTimeSliderValues; }; -// #region INTERFACES export interface TypeTimeSliderValues { title?: string; description?: string; diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts index 30627f54db6..0bc22047626 100644 --- a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts +++ b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts @@ -1500,11 +1500,10 @@ export abstract class AbstractGeoViewLayer { } /** *************************************************************************************************************************** - * Change the layer phase property and emit an event to update existing layer sets. - * Change the layer temporal dimension property and emit an event to update existing layer sets. + * Set the layerTemporalDimension for the layer identified by specified layerPath. * * @param {string} layerPath The layer path to the layer's configuration affected by the change. - * @param {TimeDimension} timeDimension The value to assign to the layer temporal dimension property. + * @param {TimeDimension} temporalDimension The value to assign to the layer temporal dimension property. */ setTemporalDimension(layerPath: string, temporalDimension: TimeDimension): void { layerPath = layerPath || this.layerPathAssociatedToTheGeoviewLayer; From a93d58d1ea293d4f9237dfb54c6aeb9166401086 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Tue, 20 Feb 2024 07:24:53 -0800 Subject: [PATCH 09/17] fix default value is array vs single value --- .../time-slider-event-processor.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts b/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts index 6efe62f1fb6..95151f8153d 100644 --- a/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts +++ b/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts @@ -109,7 +109,8 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor { const name = getLocalizedValue(api.maps[mapId].layer.geoviewLayers[layerPath.split('/')[0]].geoviewLayerName, mapId) || layerPath; const temporalDimensionInfo = api.maps[mapId].layer.geoviewLayer(layerPath).getTemporalDimension(); const { range } = temporalDimensionInfo.range; - const defaultValue = temporalDimensionInfo.default; + const defaultValueIsArray = Array.isArray(temporalDimensionInfo.default); + const defaultValue = defaultValueIsArray ? temporalDimensionInfo.default[0] : temporalDimensionInfo.default; const minAndMax: number[] = [new Date(range[0]).getTime(), new Date(range[range.length - 1]).getTime()]; const { field, singleHandle } = temporalDimensionInfo; @@ -122,7 +123,12 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor { const fieldIndex = localizedOutFields ? localizedOutFields.indexOf(field) : -1; if (fieldIndex !== -1 && localizedAliasFields?.length === localizedOutFields?.length) fieldAlias = localizedAliasFields![fieldIndex]; - const values = singleHandle ? [new Date(temporalDimensionInfo.default).getTime()] : [...minAndMax]; + // eslint-disable-next-line no-nested-ternary + const values = singleHandle + ? [new Date(temporalDimensionInfo.default).getTime()] + : defaultValueIsArray + ? [new Date(temporalDimensionInfo.default[0]).getTime(), new Date(temporalDimensionInfo.default[1]).getTime()] + : [...minAndMax]; const sliderData: TimeSliderLayerSet = { [layerPath]: { From 4ea154898f4c389641682cfdf4260507b601c88a Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Tue, 20 Feb 2024 10:18:38 -0800 Subject: [PATCH 10/17] fix default value override from slider config --- ...ckage-time-slider2-config-time-slider.json | 6 ++++-- .../geoview-time-slider/src/time-slider.tsx | 19 +++++++++++++++++-- 2 files changed, 21 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 05f5e42ca3d..8fd1cdb2797 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 @@ -32,10 +32,12 @@ "fr": "Descriptif personnalisé" }, "locked": true, - "reversed": true + "reversed": true, + "defaultValue": "2024-02-20T15:48:00Z" }, { - "layerPaths": ["MSI/msi-94-or-more"] + "layerPaths": ["MSI/msi-94-or-more"], + "defaultValue": "2011-08-15T00:00:00Z" } ], "suportedLanguages": ["en", "fr"] diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index f31ccbe5b7f..c7146e6c0bd 100644 --- a/packages/geoview-time-slider/src/time-slider.tsx +++ b/packages/geoview-time-slider/src/time-slider.tsx @@ -51,7 +51,8 @@ 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, setValues, setLocked, setReversed, setDelay, setFiltering } = useTimeSliderStoreActions(); + const { setTitle, setDefaultValue, setDescription, setValues, setLocked, setReversed, setDelay, setFiltering } = + useTimeSliderStoreActions(); // TODO: check performance as we should technically have one selector by constant const { @@ -79,9 +80,23 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { if (description === undefined) setDescription(layerPath, getLocalizedValue(sliderConfig?.description, mapId) || ''); if (locked === undefined) setLocked(layerPath, sliderConfig?.locked !== undefined ? sliderConfig?.locked : false); if (reversed === undefined) setReversed(layerPath, sliderConfig?.reversed !== undefined ? sliderConfig?.reversed : false); + if (defaultValue === undefined) setDefaultValue(layerPath, sliderConfig?.defaultValue || ''); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + useEffect(() => { + const sliderConfig = config?.sliders?.find((o: { layerPaths: string[] }) => o.layerPaths.includes(layerPath)); + if (sliderConfig?.defaultValue) { + // update values based on slider's default value + const defaultValueIsArray = Array.isArray(sliderConfig?.defaultValue); + if (defaultValueIsArray) { + setValues(layerPath, [new Date(sliderConfig?.defaultValue[0]).getTime(), new Date(sliderConfig?.defaultValue[1]).getTime()]); + } else { + setValues(layerPath, [new Date(sliderConfig?.defaultValue).getTime()]); + } + } + }, [config, layerPath, setValues]); + 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]; @@ -293,7 +308,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { : getLocalizedMessage(mapId, 'timeSlider.slider.lockLeft'); return text; } - + console.log('DEFE: ', range, defaultValue); return (
From 533ee60ecc4fffc74bd63166472cd409a9b523c2 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Wed, 21 Feb 2024 06:30:28 -0800 Subject: [PATCH 11/17] fix layer data visibility on slider change --- .../public/configs/package-time-slider2-config-time-slider.json | 2 +- packages/geoview-time-slider/src/time-slider.tsx | 2 +- 2 files changed, 2 insertions(+), 2 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 8fd1cdb2797..75cd337b376 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 @@ -13,7 +13,7 @@ "locked": false, "reversed": false, "temporalDimension": { - "field": "datetime", + "field": "time_slider_date", "default": ["1940-01-01T05:00:00Z", "1960-01-01T05:00:00Z"], "unitSymbol": "", "range": "1900-01-01T05:00:00Z/2000-01-01T05:00:00Z/P1Y", diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index c7146e6c0bd..49cd06899ea 100644 --- a/packages/geoview-time-slider/src/time-slider.tsx +++ b/packages/geoview-time-slider/src/time-slider.tsx @@ -308,7 +308,7 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { : getLocalizedMessage(mapId, 'timeSlider.slider.lockLeft'); return text; } - console.log('DEFE: ', range, defaultValue); + return (
From 035558d1fc32b57b1f0b56b8bd536652d7c94f70 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Wed, 21 Feb 2024 07:19:17 -0800 Subject: [PATCH 12/17] fix default value data for spatiotemporal layer --- .../configs/package-time-slider2-config-time-slider.json | 2 +- packages/geoview-time-slider/src/time-slider.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 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 75cd337b376..13df8aa475d 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 @@ -33,7 +33,7 @@ }, "locked": true, "reversed": true, - "defaultValue": "2024-02-20T15:48:00Z" + "defaultValue": "2024-02-21T12:54:00Z" }, { "layerPaths": ["MSI/msi-94-or-more"], diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index 49cd06899ea..586ad2d3242 100644 --- a/packages/geoview-time-slider/src/time-slider.tsx +++ b/packages/geoview-time-slider/src/time-slider.tsx @@ -91,11 +91,13 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { const defaultValueIsArray = Array.isArray(sliderConfig?.defaultValue); if (defaultValueIsArray) { setValues(layerPath, [new Date(sliderConfig?.defaultValue[0]).getTime(), new Date(sliderConfig?.defaultValue[1]).getTime()]); - } else { + } else if (range.includes(sliderConfig?.defaultValue)) { setValues(layerPath, [new Date(sliderConfig?.defaultValue).getTime()]); + } else { + setValues(layerPath, [new Date(range[0]).getTime()]); } } - }, [config, layerPath, setValues]); + }, [config, layerPath, range, setValues]); const timeStampRange = range.map((entry: string | number | Date) => new Date(entry).getTime()); // Check if range occurs in a single day or year From c396f93bb805546bfeeb0177ab25ee142c5a3686 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Wed, 21 Feb 2024 09:16:18 -0800 Subject: [PATCH 13/17] fix default filter for custom temporal dimension for time slider --- ...ckage-time-slider2-config-time-slider.json | 2 +- .../geoview-time-slider/src/time-slider.tsx | 23 +++++++++++-------- 2 files changed, 14 insertions(+), 11 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 13df8aa475d..e7b61758e95 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 @@ -33,7 +33,7 @@ }, "locked": true, "reversed": true, - "defaultValue": "2024-02-21T12:54:00Z" + "defaultValue": "2024-02-21T14:54:00Z" }, { "layerPaths": ["MSI/msi-94-or-more"], diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index 586ad2d3242..bb0d709054b 100644 --- a/packages/geoview-time-slider/src/time-slider.tsx +++ b/packages/geoview-time-slider/src/time-slider.tsx @@ -86,18 +86,21 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { useEffect(() => { const sliderConfig = config?.sliders?.find((o: { layerPaths: string[] }) => o.layerPaths.includes(layerPath)); - if (sliderConfig?.defaultValue) { - // update values based on slider's default value - const defaultValueIsArray = Array.isArray(sliderConfig?.defaultValue); - if (defaultValueIsArray) { - setValues(layerPath, [new Date(sliderConfig?.defaultValue[0]).getTime(), new Date(sliderConfig?.defaultValue[1]).getTime()]); - } else if (range.includes(sliderConfig?.defaultValue)) { - setValues(layerPath, [new Date(sliderConfig?.defaultValue).getTime()]); - } else { - setValues(layerPath, [new Date(range[0]).getTime()]); + if (sliderConfig?.defaultValue || sliderConfig?.temporalDimension) { + setFiltering(layerPath, true); + if (sliderConfig?.defaultValue) { + // update values based on slider's default value + const defaultValueIsArray = Array.isArray(sliderConfig?.defaultValue); + if (defaultValueIsArray) { + setValues(layerPath, [new Date(sliderConfig?.defaultValue[0]).getTime(), new Date(sliderConfig?.defaultValue[1]).getTime()]); + } else if (range.includes(sliderConfig?.defaultValue)) { + setValues(layerPath, [new Date(sliderConfig?.defaultValue).getTime()]); + } else { + setValues(layerPath, [new Date(range[0]).getTime()]); + } } } - }, [config, layerPath, range, setValues]); + }, [config, layerPath, range, setFiltering, setValues]); const timeStampRange = range.map((entry: string | number | Date) => new Date(entry).getTime()); // Check if range occurs in a single day or year From eebf65b742378bb3c01ebfc2c751a0420dfb0d74 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Wed, 21 Feb 2024 12:37:05 -0800 Subject: [PATCH 14/17] fix default filters applied for map --- .../time-slider-event-processor.ts | 3 +++ .../geoview-time-slider/src/time-slider.tsx | 21 ++++++++----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts b/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts index 95151f8153d..cd4308b37cf 100644 --- a/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts +++ b/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts @@ -32,6 +32,9 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor { initialTimeSliderLayerPaths.forEach((layerPath) => { const timeSliderLayer = TimeSliderEventProcessor.getInitialTimeSliderValues(mapId, layerPath); store.getState().timeSliderState.actions.addTimeSliderLayer(timeSliderLayer); + + const { defaultValue, field, filtering, minAndMax, values } = timeSliderLayer[layerPath]; + TimeSliderEventProcessor.applyFilters(mapId, layerPath, defaultValue, field, filtering, minAndMax, values); }); } }, diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx index bb0d709054b..86352344355 100644 --- a/packages/geoview-time-slider/src/time-slider.tsx +++ b/packages/geoview-time-slider/src/time-slider.tsx @@ -86,18 +86,15 @@ export function TimeSlider(TimeSliderPanelProps: TimeSliderPanelProps) { useEffect(() => { const sliderConfig = config?.sliders?.find((o: { layerPaths: string[] }) => o.layerPaths.includes(layerPath)); - if (sliderConfig?.defaultValue || sliderConfig?.temporalDimension) { - setFiltering(layerPath, true); - if (sliderConfig?.defaultValue) { - // update values based on slider's default value - const defaultValueIsArray = Array.isArray(sliderConfig?.defaultValue); - if (defaultValueIsArray) { - setValues(layerPath, [new Date(sliderConfig?.defaultValue[0]).getTime(), new Date(sliderConfig?.defaultValue[1]).getTime()]); - } else if (range.includes(sliderConfig?.defaultValue)) { - setValues(layerPath, [new Date(sliderConfig?.defaultValue).getTime()]); - } else { - setValues(layerPath, [new Date(range[0]).getTime()]); - } + if (sliderConfig?.defaultValue) { + // update values based on slider's default value + const defaultValueIsArray = Array.isArray(sliderConfig?.defaultValue); + if (defaultValueIsArray) { + setValues(layerPath, [new Date(sliderConfig?.defaultValue[0]).getTime(), new Date(sliderConfig?.defaultValue[1]).getTime()]); + } else if (range.includes(sliderConfig?.defaultValue)) { + setValues(layerPath, [new Date(sliderConfig?.defaultValue).getTime()]); + } else { + setValues(layerPath, [new Date(range[0]).getTime()]); } } }, [config, layerPath, range, setFiltering, setValues]); From 9f727a4773b3bb2478ea367ae6ed20ac95050457 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Thu, 22 Feb 2024 11:41:55 -0800 Subject: [PATCH 15/17] override default value inside temporal dimension --- .../geoview-layers/abstract-geoview-layers.ts | 24 +++++++++++-------- packages/geoview-time-slider/src/index.tsx | 21 +++++++++++++--- 2 files changed, 32 insertions(+), 13 deletions(-) diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts index 0bc22047626..e04d4c711d6 100644 --- a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts +++ b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts @@ -1505,17 +1505,21 @@ export abstract class AbstractGeoViewLayer { * @param {string} layerPath The layer path to the layer's configuration affected by the change. * @param {TimeDimension} temporalDimension The value to assign to the layer temporal dimension property. */ - setTemporalDimension(layerPath: string, temporalDimension: TimeDimension): void { + setTemporalDimension(layerPath: string, temporalDimension: TimeDimension, override: boolean): void { layerPath = layerPath || this.layerPathAssociatedToTheGeoviewLayer; - const timeDimension: TimeDimension = { - field: temporalDimension.field, - default: temporalDimension.default, - unitSymbol: temporalDimension.unitSymbol, - nearestValues: temporalDimension.nearestValues, - range: api.dateUtilities.createRangeOGC(temporalDimension.range as unknown as string), - singleHandle: temporalDimension.singleHandle, - }; - this.layerTemporalDimension[layerPath] = timeDimension; + if (override) { + const timeDimension: TimeDimension = { + field: temporalDimension.field, + default: temporalDimension.default, + unitSymbol: temporalDimension.unitSymbol, + nearestValues: temporalDimension.nearestValues, + range: api.dateUtilities.createRangeOGC(temporalDimension.range as unknown as string), + singleHandle: temporalDimension.singleHandle, + }; + this.layerTemporalDimension[layerPath] = timeDimension; + } else { + this.layerTemporalDimension[layerPath] = temporalDimension; + } } /** *************************************************************************************************************************** diff --git a/packages/geoview-time-slider/src/index.tsx b/packages/geoview-time-slider/src/index.tsx index b969aa3c034..807258c6078 100644 --- a/packages/geoview-time-slider/src/index.tsx +++ b/packages/geoview-time-slider/src/index.tsx @@ -100,9 +100,24 @@ class TimeSliderPlugin extends FooterPlugin { // Set custom time dimension if applicable this.configObj.sliders.forEach((obj: SliderProps) => { if (obj.temporalDimension) { - api.maps[this.pluginProps.mapId].layer - .geoviewLayer(obj.layerPaths[0]) - .setTemporalDimension(obj.layerPaths[0], obj.temporalDimension); + api.maps[this.pluginProps.mapId].layer.geoviewLayer(obj.layerPaths[0]).setTemporalDimension(obj.layerPaths[0], { + ...obj.temporalDimension, + }, + true + ); + } + // Set override default value under time dimension if applicable + if (obj.defaultValue) { + const layerPath = obj.layerPaths[0]; + const timeDimension = api.maps[this.pluginProps.mapId].layer.geoviewLayer(layerPath).layerTemporalDimension[layerPath]; + api.maps[this.pluginProps.mapId].layer.geoviewLayer(layerPath).setTemporalDimension( + layerPath, + { + ...timeDimension, + default: obj.defaultValue, + }, + false + ); } }); From fdd8401bca7ff1d7fca60f53af412e2b3ff4df62 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Thu, 22 Feb 2024 12:22:20 -0800 Subject: [PATCH 16/17] add doc & rename variable --- .../src/geo/layer/geoview-layers/abstract-geoview-layers.ts | 5 +++-- packages/geoview-time-slider/src/index.tsx | 4 +++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts index e04d4c711d6..367be5f3fe3 100644 --- a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts +++ b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts @@ -1504,10 +1504,11 @@ export abstract class AbstractGeoViewLayer { * * @param {string} layerPath The layer path to the layer's configuration affected by the change. * @param {TimeDimension} temporalDimension The value to assign to the layer temporal dimension property. + * @param {boolean} custom Flag allow's to customize the layer's temporal dimension property. */ - setTemporalDimension(layerPath: string, temporalDimension: TimeDimension, override: boolean): void { + setTemporalDimension(layerPath: string, temporalDimension: TimeDimension, custom: boolean): void { layerPath = layerPath || this.layerPathAssociatedToTheGeoviewLayer; - if (override) { + if (custom) { const timeDimension: TimeDimension = { field: temporalDimension.field, default: temporalDimension.default, diff --git a/packages/geoview-time-slider/src/index.tsx b/packages/geoview-time-slider/src/index.tsx index 807258c6078..8c744814041 100644 --- a/packages/geoview-time-slider/src/index.tsx +++ b/packages/geoview-time-slider/src/index.tsx @@ -100,7 +100,9 @@ class TimeSliderPlugin extends FooterPlugin { // Set custom time dimension if applicable this.configObj.sliders.forEach((obj: SliderProps) => { if (obj.temporalDimension) { - api.maps[this.pluginProps.mapId].layer.geoviewLayer(obj.layerPaths[0]).setTemporalDimension(obj.layerPaths[0], { + api.maps[this.pluginProps.mapId].layer.geoviewLayer(obj.layerPaths[0]).setTemporalDimension( + obj.layerPaths[0], + { ...obj.temporalDimension, }, true From ebb608eaeefe55a284df8d3a68496705f45afb84 Mon Sep 17 00:00:00 2001 From: Mayur Marakana Date: Thu, 22 Feb 2024 12:40:42 -0800 Subject: [PATCH 17/17] refactor to use custom config logic to time slider plugin --- .../geoview-layers/abstract-geoview-layers.ts | 17 ++-------- packages/geoview-time-slider/src/index.tsx | 31 +++++++++---------- 2 files changed, 17 insertions(+), 31 deletions(-) diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts index 367be5f3fe3..4b4fbd25768 100644 --- a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts +++ b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts @@ -1504,23 +1504,10 @@ export abstract class AbstractGeoViewLayer { * * @param {string} layerPath The layer path to the layer's configuration affected by the change. * @param {TimeDimension} temporalDimension The value to assign to the layer temporal dimension property. - * @param {boolean} custom Flag allow's to customize the layer's temporal dimension property. */ - setTemporalDimension(layerPath: string, temporalDimension: TimeDimension, custom: boolean): void { + setTemporalDimension(layerPath: string, temporalDimension: TimeDimension): void { layerPath = layerPath || this.layerPathAssociatedToTheGeoviewLayer; - if (custom) { - const timeDimension: TimeDimension = { - field: temporalDimension.field, - default: temporalDimension.default, - unitSymbol: temporalDimension.unitSymbol, - nearestValues: temporalDimension.nearestValues, - range: api.dateUtilities.createRangeOGC(temporalDimension.range as unknown as string), - singleHandle: temporalDimension.singleHandle, - }; - this.layerTemporalDimension[layerPath] = timeDimension; - } else { - this.layerTemporalDimension[layerPath] = temporalDimension; - } + this.layerTemporalDimension[layerPath] = temporalDimension; } /** *************************************************************************************************************************** diff --git a/packages/geoview-time-slider/src/index.tsx b/packages/geoview-time-slider/src/index.tsx index 8c744814041..0b2efafcce3 100644 --- a/packages/geoview-time-slider/src/index.tsx +++ b/packages/geoview-time-slider/src/index.tsx @@ -1,4 +1,4 @@ -import { AnySchemaObject, api, Cast, toJsonObject, TypeJsonObject, TypeTabs } from 'geoview-core'; +import { AnySchemaObject, api, Cast, TimeDimension, toJsonObject, TypeJsonObject, TypeTabs } from 'geoview-core'; import { TimeSliderIcon } from 'geoview-core/src/ui'; import { FooterPlugin } from 'geoview-core/src/api/plugin/footer-plugin'; @@ -100,26 +100,25 @@ class TimeSliderPlugin extends FooterPlugin { // Set custom time dimension if applicable this.configObj.sliders.forEach((obj: SliderProps) => { if (obj.temporalDimension) { - api.maps[this.pluginProps.mapId].layer.geoviewLayer(obj.layerPaths[0]).setTemporalDimension( - obj.layerPaths[0], - { - ...obj.temporalDimension, - }, - true - ); + const timeDimension: TimeDimension = { + field: obj.temporalDimension.field, + default: obj.temporalDimension.default, + unitSymbol: obj.temporalDimension.unitSymbol, + nearestValues: obj.temporalDimension.nearestValues, + range: api.dateUtilities.createRangeOGC(obj.temporalDimension.range as unknown as string), + singleHandle: obj.temporalDimension.singleHandle, + }; + api.maps[this.pluginProps.mapId].layer.geoviewLayer(obj.layerPaths[0]).setTemporalDimension(obj.layerPaths[0], timeDimension); } + // Set override default value under time dimension if applicable if (obj.defaultValue) { const layerPath = obj.layerPaths[0]; const timeDimension = api.maps[this.pluginProps.mapId].layer.geoviewLayer(layerPath).layerTemporalDimension[layerPath]; - api.maps[this.pluginProps.mapId].layer.geoviewLayer(layerPath).setTemporalDimension( - layerPath, - { - ...timeDimension, - default: obj.defaultValue, - }, - false - ); + api.maps[this.pluginProps.mapId].layer.geoviewLayer(layerPath).setTemporalDimension(layerPath, { + ...timeDimension, + default: obj.defaultValue, + }); } });