From ee1124cdc486effae899e2aed36d92640b187b28 Mon Sep 17 00:00:00 2001 From: emilijadunoska Date: Thu, 29 Aug 2024 14:25:44 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=F0=9F=AA=B2Refactor=20step=20conte?= =?UTF-8?q?nt=20of=20district=20map=20and=20fix=20bug=20of=20district=20ma?= =?UTF-8?q?p=20color=20not=20reflecting=20currently=20selected=20scenario?= =?UTF-8?q?=20after=20tour=20is=20finished?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/locales/de-onboarding.json5 | 2 +- frontend/locales/en-onboarding.json5 | 2 +- .../TourComponents/TourSteps.tsx | 12 ++++++------ 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/locales/de-onboarding.json5 b/frontend/locales/de-onboarding.json5 index 63f353ee..abd461f9 100644 --- a/frontend/locales/de-onboarding.json5 +++ b/frontend/locales/de-onboarding.json5 @@ -68,7 +68,7 @@ step3: { target: '#side-bar-heat-legend', title: 'Schritt 3', - content: 'Die Karte verfügt außerdem über eine anpassbare Farblegende. Sie können hier zwischen unterschiedlichen Farbschemata auswählen. Die Farblegende zeigt, in welchen Regionen Fallzahlen sehr hoch, moderat oder niedrig sind. Die Fallzahlen in der Karte beziehen sich immer auf einen bestimmten Infektionsstatus, welcher rechts neben der Karte gewählt werden, sowie ein bestimmtes Datum, welches im Liniendiagramm mit Hilfe der blau-lila Linie ausgewählt werden kann.', + content: 'Die Karte verfügt außerdem über eine anpassbare Farblegende. Sie können hier zwischen unterschiedlichen Farbschemata auswählen. Die Farblegende zeigt, in welchen Regionen Fallzahlen sehr hoch, moderat oder niedrig sind. Sie können den Maximalwert der Legende auch sperren, indem Sie auf das Schlosszeichen klicken. Die Fallzahlen in der Karte beziehen sich immer auf einen bestimmten Infektionsstatus, welcher rechts neben der Karte gewählt werden, sowie ein bestimmtes Datum, welches im Liniendiagramm mit Hilfe der blau-lila Linie ausgewählt werden kann.', disableBeacon: true, showProgress: true, placement: 'right', diff --git a/frontend/locales/en-onboarding.json5 b/frontend/locales/en-onboarding.json5 index f24e5a39..a2b176f5 100644 --- a/frontend/locales/en-onboarding.json5 +++ b/frontend/locales/en-onboarding.json5 @@ -68,7 +68,7 @@ step3: { target: '#side-bar-heat-legend', title: 'Step 3', - content: 'The map also has a customisable colour legend. You can choose between different colour schemes here. The colour legend shows in which regions case numbers are very high, moderate or low. The case numbers in the map always refer to a specific infection status, which can be selected to the right of the map, as well as a specific date, which can be selected in the line chart using the blue-purple line. ', + content: 'The map also has a customisable colour legend. You can choose between different colour schemes here. The colour legend shows in which regions case numbers are very high, moderate or low. You can also lock the maximum value of the legend by clicking the lock sign. The case numbers in the map always refer to a specific infection status, which can be selected to the right of the map, as well as a specific date, which can be selected in the line chart using the blue-purple line.', disableBeacon: true, showProgress: true, placement: 'right', diff --git a/frontend/src/components/OnboardingComponents/TourComponents/TourSteps.tsx b/frontend/src/components/OnboardingComponents/TourComponents/TourSteps.tsx index a99d1b73..2b410fa1 100644 --- a/frontend/src/components/OnboardingComponents/TourComponents/TourSteps.tsx +++ b/frontend/src/components/OnboardingComponents/TourComponents/TourSteps.tsx @@ -48,7 +48,7 @@ export default function TourSteps(): JSX.Element { const scenarioList = useAppSelector((state) => state.scenarioList.scenarios); const previousSimulationStart = useRef(simulationStart); // to keep track of the previous simulation start date for the scenario controlled tour - const savedPreferences = useRef(null); // to keep track of the original data selection before starting the tour + const savedUserDataSelection = useRef(null); // to keep track of the original data selection before starting the tour /** * this useMemo gets the localized tour steps and returns them as an array of step objects to use in the Joyride component @@ -69,8 +69,8 @@ export default function TourSteps(): JSX.Element { */ useEffect(() => { if (activeTour && !showPopover && !showWelcomeDialog && !run) { - if (!savedPreferences.current) { - savedPreferences.current = dataSelection; // save the current data selection of the user so we can override it with different values during the tour + if (!savedUserDataSelection.current) { + savedUserDataSelection.current = dataSelection; // save the current data selection of the user so we can override it with different values during the tour const maxDate = dataSelection.maxDate || '2024-07-08'; // get the maximum date from the data selection dispatch(selectDate(maxDate)); // set the simulation start date (purple line) to the maximum date @@ -166,9 +166,9 @@ export default function TourSteps(): JSX.Element { action === ACTIONS.CLOSE || action === ACTIONS.STOP ) { - dispatch(selectDate(savedPreferences.current?.date || '2024-07-08')); // restore the original date in the data selection - dispatch(selectScenario(savedPreferences.current?.scenario || 1)); // restore the original selected scenario in the data selection - savedPreferences.current = null; // reset the saved preferences after the tour is completed + dispatch(selectDate(savedUserDataSelection.current?.date || '2024-07-08')); // restore the original date in the data selection + dispatch(selectScenario(savedUserDataSelection.current?.scenario || 0)); // restore the original selected scenario in the data selection + savedUserDataSelection.current = null; // reset the saved preferences after the tour is completed // if the tour was finished and not skipped, mark as completed if (status === STATUS.FINISHED && activeTour) {