From 0c08e8c1e46890074cae5220e164bcf840c63acd Mon Sep 17 00:00:00 2001
From: Will Gislason <8203830+gislawill@users.noreply.github.com>
Date: Mon, 1 Jul 2024 15:27:38 -0500
Subject: [PATCH] Adding expected data lag days option

---
 README.md                                     |  2 +-
 .../MapView/Layers/CompositeLayer/index.tsx   |  7 ++++--
 frontend/src/config/jordan/layers.json        |  1 +
 frontend/src/config/types.ts                  |  3 +++
 frontend/src/utils/useDefaultDate.ts          | 22 +++++++++++++++----
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 210fb9c40..a7170e780 100644
--- a/README.md
+++ b/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
diff --git a/frontend/src/components/MapView/Layers/CompositeLayer/index.tsx b/frontend/src/components/MapView/Layers/CompositeLayer/index.tsx
index eb7ec9648..812fc8f5f 100644
--- a/frontend/src/components/MapView/Layers/CompositeLayer/index.tsx
+++ b/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);
 
diff --git a/frontend/src/config/jordan/layers.json b/frontend/src/config/jordan/layers.json
index dae3a64e2..94d01da0b 100644
--- a/frontend/src/config/jordan/layers.json
+++ b/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": {
diff --git a/frontend/src/config/types.ts b/frontend/src/config/types.ts
index 5b45e9b30..4c64ea315 100644
--- a/frontend/src/config/types.ts
+++ b/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 {
diff --git a/frontend/src/utils/useDefaultDate.ts b/frontend/src/utils/useDefaultDate.ts
index ed1d0a386..8ea51cdc6 100644
--- a/frontend/src/utils/useDefaultDate.ts
+++ b/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.