diff --git a/frontend/src/components/Scenario/DataCardList.tsx b/frontend/src/components/Scenario/DataCardList.tsx index d6bf4c17..bffa618f 100644 --- a/frontend/src/components/Scenario/DataCardList.tsx +++ b/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('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 (