Adding expected data lag days option

README.md

@@ -343,7 +343,7 @@ cd frontend
 yarn clean
 yarn install
 yarn setup:common
-REACT_APP_COUNTRY=jordan REACT_APP_USE_LOCAL_HIP_SERVICE=http://localhost:3001/q_multi_geojson docker compose up
+REACT_APP_COUNTRY=cambodia yarn start
 ```
 
 ### Available Scripts

frontend/src/components/MapView/Layers/CompositeLayer/index.tsx

@@ -43,11 +43,14 @@ const paintProps: (
 const CompositeLayer = ({ layer, before }: Props) => {
   // look to refacto with impactLayer and maybe other layers
   const [adminBoundaryLimitPolygon, setAdminBoundaryPolygon] = useState(null);
-  const selectedDate = useDefaultDate(layer.dateLayer);
+  const selectedDate = useDefaultDate(
+    layer.dateLayer,
+    layer.expectedDataLagDays,
+  );
+  console.log('selectedDate', selectedDate);
   const serverAvailableDates = useSelector(availableDatesSelector);
   const opacityState = useSelector(opacitySelector(layer.id));
   const dispatch = useDispatch();
-
   const layerAvailableDates = serverAvailableDates[layer.dateLayer];
   const queryDate = getRequestDate(layerAvailableDates, selectedDate);
 

frontend/src/config/jordan/layers.json

@@ -4197,6 +4197,7 @@
     "aggregation": "pixel",
     "date_layer": "spi_1m",
     "start_date": "2020-12-01",
+    "expected_data_lag_days": 55,
     "opacity": 0.7
   },
   "daily_rainfall_forecast": {

frontend/src/config/types.ts

@@ -487,6 +487,9 @@ export class CompositeLayerProps extends CommonLayerProps {
 
   @optional
   endDate?: string;
+
+  @optional
+  expectedDataLagDays?: number;
 }
 
 export class StaticRasterLayerProps extends CommonLayerProps {

frontend/src/utils/useDefaultDate.ts

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { isMainLayer, LayerKey } from 'config/types';
 import { availableDatesSelector } from 'context/serverStateSlice';
 import {
@@ -15,7 +15,10 @@ import { getFormattedDate } from './date-utils';
  * Returns either the user selected date or the default date, dispatching it to the date picker beforehand. Can also return undefined if no default date is available.
  * @param availableDatesLookupKey key to lookup in AvailableDates
  */
-export function useDefaultDate(layerId: LayerKey): number | undefined {
+export function useDefaultDate(
+  layerId: LayerKey,
+  expectedDataLagDays?: number,
+): number | undefined {
   const dispatch = useDispatch();
   const selectedLayers = useSelector(layersSelector);
   // check layer without group or main layer in group
@@ -25,10 +28,21 @@ export function useDefaultDate(layerId: LayerKey): number | undefined {
   const { updateHistory } = useUrlHistory();
 
   // TODO - use getPossibleDatesForLayer
+  // Update on 2024-07-01: getPossibleDatesForLayer would give us the first possible layer date, we want the _last_ possible date.
   const possibleDates = useSelector(availableDatesSelector)[layerId];
 
-  const defaultDate: number | undefined =
-    possibleDates?.[possibleDates?.length - 1]?.displayDate;
+  const soonestAvailableDate =
+    new Date().getTime() - (expectedDataLagDays ?? 0) * 24 * 60 * 60 * 1000;
+
+  const defaultDate = useMemo(() => {
+    let index = possibleDates?.length - 1;
+    let defaultDate = possibleDates?.[index]?.displayDate;
+    while (defaultDate && defaultDate > soonestAvailableDate) {
+      index -= 1;
+      defaultDate = possibleDates?.[index]?.displayDate;
+    }
+    return defaultDate;
+  }, [possibleDates, soonestAvailableDate]);
 
   // React doesn't allow updating other components within another component
   // useEffect removes this error and updates DateSelector correctly in the lifecycle.