fix(slider): Step with esriImage (#2578)

* fix(slider): Step with esriImage Closes #2574 * fix rebase
Canadian-Geospatial-Platform · Nov 6, 2024 · 0768201 · 0768201
1 parent c0ca085
commit 0768201
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 6 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/geoview-core/package.json b/packages/geoview-core/package.json
@@ -135,7 +135,7 @@
     "css-loader": "^7.1.2",
     "file-loader": "^6.2.0",
     "gh-pages": "^6.2.0",
-    "glob": "^7.2.0",
+    "glob": "^7.2.3",
     "html-loader": "~5.1.0",
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",

diff --git a/packages/geoview-core/public/configs/navigator/10-package-time-slider.json b/packages/geoview-core/public/configs/navigator/10-package-time-slider.json
@@ -10,6 +10,10 @@
       "labeled": true
     },
     "listOfGeoviewLayerConfig": [
+      {
+        "geoviewLayerId": "7f835844-3774-4323-b20e-a898c9f20136",
+        "geoviewLayerType": "geoCore"
+      },
       {
         "geoviewLayerId": "napl",
         "geoviewLayerName": "NAPL",

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
@@ -24,6 +24,7 @@ export interface ITimeSliderState {
     setLocked: (layerPath: string, locked: boolean) => void;
     setReversed: (layerPath: string, locked: boolean) => void;
     setSelectedLayerPath: (layerPath: string) => void;
+    setStep: (layerPath: string, step: number) => void;
     setDefaultValue: (layerPath: string, defaultValue: string) => void;
     setValues: (layerPath: string, values: number[]) => void;
     setDisplayPattern: (layerPath: string, value: [DatePrecision, TimePrecision]) => void;
@@ -40,6 +41,7 @@ export interface ITimeSliderState {
     setReversed: (layerPath: string, locked: boolean) => void;
     setSelectedLayerPath: (layerPath: string) => void;
     setSliderFilters: (newSliderFilters: Record<string, string>) => void;
+    setStep: (layerPath: string, step: number) => void;
     setDefaultValue: (layerPath: string, defaultValue: string) => void;
     setValues: (layerPath: string, values: number[]) => void;
     setDisplayPattern: (layerPath: string, value: [DatePrecision, TimePrecision]) => void;
@@ -95,6 +97,10 @@ export function initializeTimeSliderState(set: TypeSetStore, get: TypeGetStore):
         // Redirect to setter
         get().timeSliderState.setterActions.setSelectedLayerPath(layerPath);
       },
+      setStep(layerPath: string, step: number): void {
+        // Redirect to setter
+        get().timeSliderState.setterActions.setStep(layerPath, step);
+      },
       setDefaultValue(layerPath: string, defaultValue: string): void {
         // Redirect to setter
         get().timeSliderState.setterActions.setDefaultValue(layerPath, defaultValue);
@@ -205,6 +211,16 @@ export function initializeTimeSliderState(set: TypeSetStore, get: TypeGetStore):
           },
         });
       },
+      setStep(layerPath: string, step: number): void {
+        const sliderLayers = get().timeSliderState.timeSliderLayers;
+        sliderLayers[layerPath].step = step;
+        set({
+          timeSliderState: {
+            ...get().timeSliderState,
+            timeSliderLayers: { ...sliderLayers },
+          },
+        });
+      },
       setDefaultValue(layerPath: string, defaultValue: string): void {
         const sliderLayers = get().timeSliderState.timeSliderLayers;
         sliderLayers[layerPath].defaultValue = defaultValue;

diff --git a/packages/geoview-time-slider/src/index.tsx b/packages/geoview-time-slider/src/index.tsx
@@ -69,7 +69,13 @@ class TimeSliderPlugin extends FooterPlugin {
           back: 'Back',
           forward: 'Forward',
           changeDirection: 'Change animation direction',
-          timeDelay: 'Animation time delay',
+          timeDelay: 'Animation delay',
+          stepValue: 'Step value',
+          hour: 'Hour',
+          day: 'Day',
+          week: 'Week',
+          month: 'Month',
+          year: 'Year',
           temporalField: 'Temporal Field: ',
         },
       },
@@ -93,6 +99,12 @@ class TimeSliderPlugin extends FooterPlugin {
           forward: 'En avant',
           changeDirection: `Changer la direction de l'animation`,
           timeDelay: `Délai d'animation`,
+          stepValue: 'Valeur du saut',
+          hour: 'Heure',
+          day: 'Jour',
+          week: 'Semaine',
+          month: 'Mois',
+          year: 'Année',
           temporalField: 'Champ temporel: ',
         },
       },
@@ -114,6 +126,7 @@ class TimeSliderPlugin extends FooterPlugin {
           nearestValues: obj.temporalDimension.nearestValues,
           range: DateMgt.createRangeOGC(obj.temporalDimension.range as unknown as string),
           singleHandle: obj.temporalDimension.singleHandle,
+          displayPattern: obj.temporalDimension.displayPattern,
         };
 
         // TODO: Check concurrency between plugin creation and setting temporal dimensions

diff --git a/packages/geoview-time-slider/src/time-slider.tsx b/packages/geoview-time-slider/src/time-slider.tsx
@@ -64,7 +64,7 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element {
 
   // Get actions and states from store
   // TODO: evaluate best option to set value by layer path.... trough a getter?
-  const { setTitle, setDefaultValue, setDescription, setValues, setLocked, setReversed, setDelay, setFiltering } =
+  const { setTitle, setDefaultValue, setDescription, setValues, setLocked, setReversed, setDelay, setStep, setFiltering } =
     useTimeSliderStoreActions();
   const displayLanguage = useAppDisplayLanguage();
 
@@ -147,7 +147,7 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element {
 
     // Handle single handle case with discrete values
     if (singleHandle) {
-      const interval = (minAndMax[1] - minAndMax[0]) / 20;
+      const interval = step || (minAndMax[1] - minAndMax[0]) / 20;
       const newPosition = values[0] + interval * stepMove;
       // eslint-disable-next-line no-nested-ternary
       setValues(layerPath, [newPosition > minAndMax[1] ? minAndMax[0] : newPosition < minAndMax[0] ? minAndMax[1] : newPosition]);
@@ -313,6 +313,10 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element {
     setDelay(layerPath, event.target.value as unknown as number);
   }
 
+  function handleStepChange(event: React.ChangeEvent<HTMLSelectElement>): void {
+    setStep(layerPath, Number(event.target.value));
+  }
+
   function handleCheckbox(newValue: boolean): void {
     setFiltering(layerPath, newValue);
     if (!newValue) {
@@ -472,7 +476,7 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element {
             </IconButton>
 
             <Box component="span" sx={{ paddingLeft: '10px' }}>
-              <FormControl sx={{ width: '150px' }}>
+              <FormControl sx={{ width: '100px' }}>
                 <InputLabel variant="standard">{getLocalizedMessage('timeSlider.slider.timeDelay', displayLanguage)}</InputLabel>
                 <NativeSelect
                   defaultValue={delay}
@@ -491,6 +495,26 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element {
                 </NativeSelect>
               </FormControl>
             </Box>
+            {singleHandle && discreteValues && (
+              <Box component="span" sx={{ paddingLeft: '10px' }}>
+                <FormControl sx={{ width: '100px' }}>
+                  <InputLabel variant="standard">{getLocalizedMessage('timeSlider.slider.stepValue', displayLanguage)}</InputLabel>
+                  <NativeSelect
+                    defaultValue={step}
+                    inputProps={{
+                      name: 'timeStep',
+                      onChange: (event) => handleStepChange(event),
+                    }}
+                  >
+                    <option value={3600000}>{getLocalizedMessage('timeSlider.slider.hour', displayLanguage)}</option>
+                    <option value={86400000}>{getLocalizedMessage('timeSlider.slider.day', displayLanguage)}</option>
+                    <option value={604800000}>{getLocalizedMessage('timeSlider.slider.week', displayLanguage)}</option>
+                    <option value={2592000000}>{getLocalizedMessage('timeSlider.slider.month', displayLanguage)}</option>
+                    <option value={31536000000}>{getLocalizedMessage('timeSlider.slider.year', displayLanguage)}</option>
+                  </NativeSelect>
+                </FormControl>
+              </Box>
+            )}
           </Box>
         </Grid>
         {description && (