diff --git a/frontend/src/__tests__/store/UserPreferenceSlice.test.ts b/frontend/src/__tests__/store/UserPreferenceSlice.test.ts index 3abfbd3a..f8ceaa1a 100644 --- a/frontend/src/__tests__/store/UserPreferenceSlice.test.ts +++ b/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, }); }); }); diff --git a/frontend/src/components/ScenarioComponents/ScenarioContainer.tsx b/frontend/src/components/ScenarioComponents/ScenarioContainer.tsx index 581da5f5..9cc6609f 100644 --- a/frontend/src/components/ScenarioComponents/ScenarioContainer.tsx +++ b/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 | undefined>(); const [filterValues, setFilterValues] = useState | 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 diff --git a/frontend/src/store/UserPreferenceSlice.ts b/frontend/src/store/UserPreferenceSlice.ts index 5af01e0f..7459ca91 100644 --- a/frontend/src/store/UserPreferenceSlice.ts +++ b/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) { state.selectedTab = action.payload; }, + /** Set users initial visit to the application */ + setInitialVisit(state, action: PayloadAction) { + state.isInitialVisit = action.payload; + }, }, }); -export const {selectHeatmapLegend, selectTab} = UserPreferenceSlice.actions; +export const {selectHeatmapLegend, selectTab, setInitialVisit} = UserPreferenceSlice.actions; export default UserPreferenceSlice.reducer;