🔧 Implement baseline scenario day selection for initial scenario list

frontend/src/components/Scenario/DataCardList.tsx

@@ -3,9 +3,9 @@
 
 import Box from '@mui/material/Box';
 import {CaseDataCard} from './CaseDataCard';
-import {selectScenario, setMinMaxDates, setStartDate, toggleScenario} from '../../store/DataSelectionSlice';
+import {selectDate, selectScenario, setMinMaxDates, setStartDate, toggleScenario} from '../../store/DataSelectionSlice';
 import {ScenarioCard} from './ScenarioCard';
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {dateToISOString} from '../../util/util';
 import {useAppDispatch, useAppSelector} from '../../store/hooks';
 import {useTheme} from '@mui/material/styles';
@@ -28,6 +28,7 @@ export default function DataCardList(): JSX.Element {
   const selectedScenario = useAppSelector((state) => state.dataSelection.scenario);
 
   const [simulationModelKey, setSimulationModelKey] = useState<string>('unset');
+  const initialUpdateRef = useRef(false); // to keep track of first update
 
   const {data: scenarioListData} = useGetSimulationsQuery();
   const {data: simulationModelsData} = useGetSimulationModelsQuery();
@@ -40,6 +41,18 @@ export default function DataCardList(): JSX.Element {
 
   const startValues = useGetSimulationStartValues();
 
+  // Function to get start and end dates from startDay and numberOfDays from scenario data
+  const calculateStartAndEndDates = (startDay: string, numberOfDays: number): {startDay: Date; endDay: Date} => {
+    // The simulation data (results) are only available one day after the start day onward.
+    const simulationStartDay = new Date(startDay);
+    simulationStartDay.setUTCDate(simulationStartDay.getUTCDate() + 1);
+
+    const simulationEndDay = new Date(simulationStartDay);
+    simulationEndDay.setDate(simulationEndDay.getDate() + numberOfDays - 1);
+
+    return {startDay: simulationStartDay, endDay: simulationEndDay};
+  };
+
   useEffect(() => {
     if (simulationModelsData && simulationModelsData.results.length > 0) {
       const {key} = simulationModelsData.results[0];
@@ -71,12 +84,10 @@ export default function DataCardList(): JSX.Element {
       }
 
       if (scenarios.length > 0) {
-        // The simulation data (results) are only available one day after the start day onward.
-        const startDay = new Date(scenarioListData.results[0].startDay);
-        startDay.setUTCDate(startDay.getUTCDate() + 1);
-
-        const endDay = new Date(startDay);
-        endDay.setDate(endDay.getDate() + scenarioListData.results[0].numberOfDays - 1);
+        const {startDay, endDay} = calculateStartAndEndDates(
+          scenarioListData.results[0].startDay,
+          scenarioListData.results[0].numberOfDays
+        );
 
         minDate = dateToISOString(startDay);
         maxDate = dateToISOString(endDay);
@@ -120,6 +131,31 @@ export default function DataCardList(): JSX.Element {
     }
   }, [activeScenarios, selectedScenario, dispatch]);
 
+  //effect to toggle first scenario as active assuming it to be Baseline Scenario
+  useEffect(() => {
+    const updateScenario = () => {
+      if (!scenarioListData) return;
+
+      const baselineScenarioData = scenarioListData.results[0]; // assuming baseline scenario to be always the first scenario in the list
+      if (!baselineScenarioData) return;
+
+      if (!activeScenarios?.includes(baselineScenarioData.id)) {
+        dispatch(toggleScenario(baselineScenarioData.id));
+      }
+
+      dispatch(selectScenario(baselineScenarioData.id));
+
+      const {endDay} = calculateStartAndEndDates(baselineScenarioData.startDay, baselineScenarioData.numberOfDays);
+      dispatch(selectDate(dateToISOString(endDay)));
+    };
+
+    // Checking whether this is the initial render
+    if (!initialUpdateRef.current && scenarioListData) {
+      updateScenario();
+      initialUpdateRef.current = true;
+    }
+  }, [activeScenarios, scenarioListData, dispatch]);
+
   return (
     <Box
       id='scenario-view-scenario-card-list'