🔧 Implement baseline scenario day selection for initial scenar…

frontend/src/__tests__/store/UserPreferenceSlice.test.ts

@@ -3,7 +3,12 @@
 
 import {describe, test, expect} from 'vitest';
 
-import reducer, {selectHeatmapLegend, selectTab, UserPreference} from '../../store/UserPreferenceSlice';
+import reducer, {
+  selectHeatmapLegend,
+  selectTab,
+  setInitialVisit,
+  UserPreference,
+} from '../../store/UserPreferenceSlice';
 import {HeatmapLegend} from '../../types/heatmapLegend';
 
 describe('DataSelectionSlice', () => {
@@ -17,6 +22,7 @@ describe('DataSelectionSlice', () => {
       ],
     },
     selectedTab: '1',
+    isInitialVisit: true,
   };
 
   test('Initial State', () => {
@@ -35,6 +41,7 @@ describe('DataSelectionSlice', () => {
     expect(reducer(initialState, selectHeatmapLegend({legend: legend}))).toEqual({
       selectedHeatmap: legend,
       selectedTab: '1',
+      isInitialVisit: true,
     });
   });
 
@@ -49,6 +56,37 @@ describe('DataSelectionSlice', () => {
         ],
       },
       selectedTab: '2',
+      isInitialVisit: true,
+    });
+  });
+
+  test('Set initialVisit to true', () => {
+    expect(reducer(initialState, setInitialVisit(true))).toEqual({
+      selectedHeatmap: {
+        name: 'uninitialized',
+        isNormalized: true,
+        steps: [
+          {color: 'rgb(255,255,255)', value: 0},
+          {color: 'rgb(255,255,255)', value: 1},
+        ],
+      },
+      selectedTab: '1',
+      isInitialVisit: true,
+    });
+  });
+
+  test('Set initialVisit to false', () => {
+    expect(reducer(initialState, setInitialVisit(false))).toEqual({
+      selectedHeatmap: {
+        name: 'uninitialized',
+        isNormalized: true,
+        steps: [
+          {color: 'rgb(255,255,255)', value: 0},
+          {color: 'rgb(255,255,255)', value: 1},
+        ],
+      },
+      selectedTab: '1',
+      isInitialVisit: false,
     });
   });
 });

frontend/src/components/ScenarioComponents/ScenarioContainer.tsx

@@ -32,6 +32,7 @@ import {CaseDataByNode} from 'types/caseData';
 import {useAppDispatch, useAppSelector} from 'store/hooks';
 import {GroupCategories, GroupSubcategories} from 'store/services/groupApi';
 import {CardValue, FilterValue} from 'types/card';
+import {setInitialVisit} from 'store/UserPreferenceSlice';
 
 interface ScenarioContainerProps {
   /** The minimum number of compartment rows.*/
@@ -94,6 +95,7 @@ export default function ScenarioContainer({minCompartmentsRows = 4, maxCompartme
   const compartments = useAppSelector((state) => state.scenarioList.compartments);
   const storeSelectedCompartment = useAppSelector((state) => state.dataSelection.compartment);
   const storeStartDay = useAppSelector((state) => state.dataSelection.simulationStart);
+  const isInitialUserVisit = useAppSelector((state) => state.userPreference.isInitialVisit);
 
   const [cardValues, setCardValues] = useState<Dictionary<CardValue> | undefined>();
   const [filterValues, setFilterValues] = useState<Dictionary<FilterValue[]> | undefined>();
@@ -297,6 +299,12 @@ export default function ScenarioContainer({minCompartmentsRows = 4, maxCompartme
         minDate = dateToISOString(startDay);
         maxDate = dateToISOString(endDay);
       }
+
+      if (isInitialUserVisit && scenarios.length > 0) {
+        const baselineScenarioId = scenarios[0].id;
+        setActiveScenarios((prevScenarios) => [...(prevScenarios ?? []), baselineScenarioId]);
+        setSelectedScenario(baselineScenarioId);
+      }
     }
     if (caseScenarioSimulationData) {
       const entries = caseScenarioSimulationData.results.map((entry) => entry.day).sort((a, b) => a.localeCompare(b));
@@ -318,7 +326,12 @@ export default function ScenarioContainer({minCompartmentsRows = 4, maxCompartme
     if (minDate && maxDate) {
       dispatch(setMinMaxDates({minDate, maxDate}));
     }
-  }, [activeScenarios, scenarioListData, dispatch, caseScenarioSimulationData]);
+
+    // Setting the initial user visit to the data and
+    if (isInitialUserVisit && scenarioListData !== undefined) {
+      dispatch(setInitialVisit(false));
+    }
+  }, [activeScenarios, scenarioListData, dispatch, caseScenarioSimulationData, isInitialUserVisit]);
 
   /*
    * This useEffect hook is utilized to enable the connection between the dashed border line of the box

frontend/src/store/UserPreferenceSlice.ts

@@ -7,6 +7,7 @@ import {HeatmapLegend} from '../types/heatmapLegend';
 export interface UserPreference {
   selectedHeatmap: HeatmapLegend;
   selectedTab?: string;
+  isInitialVisit: boolean;
 }
 
 const initialState: UserPreference = {
@@ -20,6 +21,7 @@ const initialState: UserPreference = {
     ],
   },
   selectedTab: '1',
+  isInitialVisit: true,
 };
 
 /**
@@ -36,8 +38,12 @@ export const UserPreferenceSlice = createSlice({
     selectTab(state, action: PayloadAction<string>) {
       state.selectedTab = action.payload;
     },
+    /** Set users initial visit to the application */
+    setInitialVisit(state, action: PayloadAction<boolean>) {
+      state.isInitialVisit = action.payload;
+    },
   },
 });
 
-export const {selectHeatmapLegend, selectTab} = UserPreferenceSlice.actions;
+export const {selectHeatmapLegend, selectTab, setInitialVisit} = UserPreferenceSlice.actions;
 export default UserPreferenceSlice.reducer;