refactor to allow custom temporal dimension into time slider

Canadian-Geospatial-Platform · Feb 16, 2024 · b401431 · b401431
1 parent 0205253
commit b401431
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 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
@@ -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
@@ -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
@@ -1,12 +1,22 @@
 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;
   description: TypeLocalizedString;
   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
@@ -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();