From 3b19a4013baa0872877fcadb4769a275184a3d0c Mon Sep 17 00:00:00 2001 From: Alice Khoudli Date: Sat, 23 Nov 2024 00:00:09 +0100 Subject: [PATCH 1/2] front: add memoization to use scenario data and sub hooks Signed-off-by: Alice Khoudli --- .../hooks/useScenarioData.ts | 58 ++++++++++++------- .../hooks/useSimulationResults.ts | 22 ++++--- .../SpeedSpaceChart/useSpeedSpaceChart.ts | 32 +++++----- 3 files changed, 68 insertions(+), 44 deletions(-) diff --git a/front/src/applications/operationalStudies/hooks/useScenarioData.ts b/front/src/applications/operationalStudies/hooks/useScenarioData.ts index e5e85113d43..5055fa42c40 100644 --- a/front/src/applications/operationalStudies/hooks/useScenarioData.ts +++ b/front/src/applications/operationalStudies/hooks/useScenarioData.ts @@ -163,27 +163,43 @@ const useScenarioData = ( }); }, []); - return { - selectedTrainId, - trainScheduleSummaries, - trainSchedules, - projectionData: - trainScheduleUsedForProjection && projectionPath - ? { - trainSchedule: trainScheduleUsedForProjection, - ...projectionPath, - projectedTrains, - projectionLoaderData: { - allTrainsProjected, - totalTrains: timetable.train_ids.length, - }, - } - : undefined, - simulationResults, - conflicts, - removeTrains, - upsertTrainSchedules, - }; + return useMemo( + () => ({ + selectedTrainId, + trainScheduleSummaries, + trainSchedules, + projectionData: + trainScheduleUsedForProjection && projectionPath + ? { + trainSchedule: trainScheduleUsedForProjection, + ...projectionPath, + projectedTrains, + projectionLoaderData: { + allTrainsProjected, + totalTrains: timetable.train_ids.length, + }, + } + : undefined, + simulationResults, + conflicts, + removeTrains, + upsertTrainSchedules, + }), + [ + selectedTrainId, + trainScheduleSummaries, + trainSchedules, + trainScheduleUsedForProjection, + projectionPath, + projectedTrains, + allTrainsProjected, + timetable.train_ids.length, + simulationResults, + conflicts, + removeTrains, + upsertTrainSchedules, + ] + ); }; export default useScenarioData; diff --git a/front/src/applications/operationalStudies/hooks/useSimulationResults.ts b/front/src/applications/operationalStudies/hooks/useSimulationResults.ts index 46f64439b53..3afaeed0ff7 100644 --- a/front/src/applications/operationalStudies/hooks/useSimulationResults.ts +++ b/front/src/applications/operationalStudies/hooks/useSimulationResults.ts @@ -6,6 +6,7 @@ import useSpeedSpaceChart from 'modules/simulationResult/components/SpeedSpaceCh import { getSelectedTrainId } from 'reducers/simulationResults/selectors'; import type { SimulationResultsData } from '../types'; +import { useMemo } from 'react'; /** * Prepare data to be used in simulation results @@ -50,15 +51,18 @@ const useSimulationResults = (): SimulationResultsData => { selectedTrainPowerRestrictions: [], }; - return { - selectedTrainSchedule, - selectedTrainRollingStock: speedSpaceChart?.rollingStock, - selectedTrainPowerRestrictions: speedSpaceChart?.formattedPowerRestrictions || [], - trainSimulation: speedSpaceChart?.simulation, - pathProperties: speedSpaceChart?.formattedPathProperties, - pathLength: path?.length, - path, - }; + return useMemo( + () => ({ + selectedTrainSchedule, + selectedTrainRollingStock: speedSpaceChart?.rollingStock, + selectedTrainPowerRestrictions: speedSpaceChart?.formattedPowerRestrictions || [], + trainSimulation: speedSpaceChart?.simulation, + pathProperties: speedSpaceChart?.formattedPathProperties, + pathLength: path?.length, + path, + }), + [selectedTrainSchedule, speedSpaceChart, path] + ); }; export default useSimulationResults; diff --git a/front/src/modules/simulationResult/components/SpeedSpaceChart/useSpeedSpaceChart.ts b/front/src/modules/simulationResult/components/SpeedSpaceChart/useSpeedSpaceChart.ts index 3d6cad8908d..d530585ea15 100644 --- a/front/src/modules/simulationResult/components/SpeedSpaceChart/useSpeedSpaceChart.ts +++ b/front/src/modules/simulationResult/components/SpeedSpaceChart/useSpeedSpaceChart.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import type { LayerData, @@ -94,19 +94,23 @@ const useSpeedSpaceChart = ( } }, [simulation, trainScheduleResult, rollingStock, departureTime]); - return trainScheduleResult && - rollingStock && - simulation?.status === 'success' && - formattedPathProperties && - departureTime - ? { - rollingStock, - formattedPowerRestrictions, - simulation, - formattedPathProperties, - departureTime, - } - : null; + return useMemo( + () => + trainScheduleResult && + rollingStock && + simulation?.status === 'success' && + formattedPathProperties && + departureTime + ? { + rollingStock, + formattedPowerRestrictions, + simulation, + formattedPathProperties, + departureTime, + } + : null, + [rollingStock, formattedPowerRestrictions, simulation, formattedPathProperties, departureTime] + ); }; export default useSpeedSpaceChart; From 1cdf3b178d9e5724128adf1634bca45401a01fb0 Mon Sep 17 00:00:00 2001 From: Alice Khoudli Date: Sat, 23 Nov 2024 00:05:02 +0100 Subject: [PATCH 2/2] front: turn non async useeffect + usestate to usememo in usespeedspacechart Signed-off-by: Alice Khoudli --- .../hooks/useSimulationResults.ts | 3 +- .../SpeedSpaceChart/useSpeedSpaceChart.ts | 51 +++++++++---------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/front/src/applications/operationalStudies/hooks/useSimulationResults.ts b/front/src/applications/operationalStudies/hooks/useSimulationResults.ts index 3afaeed0ff7..c8cce375467 100644 --- a/front/src/applications/operationalStudies/hooks/useSimulationResults.ts +++ b/front/src/applications/operationalStudies/hooks/useSimulationResults.ts @@ -1,3 +1,5 @@ +import { useMemo } from 'react'; + import { useSelector } from 'react-redux'; import { osrdEditoastApi } from 'common/api/osrdEditoastApi'; @@ -6,7 +8,6 @@ import useSpeedSpaceChart from 'modules/simulationResult/components/SpeedSpaceCh import { getSelectedTrainId } from 'reducers/simulationResults/selectors'; import type { SimulationResultsData } from '../types'; -import { useMemo } from 'react'; /** * Prepare data to be used in simulation results diff --git a/front/src/modules/simulationResult/components/SpeedSpaceChart/useSpeedSpaceChart.ts b/front/src/modules/simulationResult/components/SpeedSpaceChart/useSpeedSpaceChart.ts index d530585ea15..c1c8be240e7 100644 --- a/front/src/modules/simulationResult/components/SpeedSpaceChart/useSpeedSpaceChart.ts +++ b/front/src/modules/simulationResult/components/SpeedSpaceChart/useSpeedSpaceChart.ts @@ -1,12 +1,7 @@ -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo } from 'react'; -import type { - LayerData, - PowerRestrictionValues, -} from '@osrd-project/ui-speedspacechart/dist/types/chartTypes'; import { useTranslation } from 'react-i18next'; -import type { PathPropertiesFormatted } from 'applications/operationalStudies/types'; import { preparePathPropertiesData } from 'applications/operationalStudies/utils'; import { osrdEditoastApi, @@ -31,10 +26,6 @@ const useSpeedSpaceChart = ( const { t } = useTranslation('simulation'); const infraId = useInfraID(); - const [formattedPathProperties, setFormattedPathProperties] = useState(); - const [formattedPowerRestrictions, setFormattedPowerRestrictions] = - useState[]>(); - const rollingStockName = trainScheduleResult?.rolling_stock_name; const { data: rollingStock } = osrdEditoastApi.endpoints.getRollingStockNameByRollingStockName.useQuery( @@ -53,8 +44,8 @@ const useSpeedSpaceChart = ( ]); // retrieve and format pathfinding properties - useEffect(() => { - const getPathProperties = async () => { + const formattedPathProperties = useMemo(() => { + try { if ( infraId && trainScheduleResult && @@ -63,28 +54,36 @@ const useSpeedSpaceChart = ( simulation?.status === 'success' && pathProperties ) { - const formattedPathProps = preparePathPropertiesData( + return preparePathPropertiesData( simulation.electrical_profiles, pathProperties, pathfindingResult, trainScheduleResult.path, t ); - - setFormattedPathProperties(formattedPathProps); - - // Format power restrictions - const powerRestrictions = formatPowerRestrictionRangesWithHandled({ - selectedTrainSchedule: trainScheduleResult, - selectedTrainRollingStock: rollingStock, - pathfindingResult, - pathProperties: formattedPathProps, - }); - setFormattedPowerRestrictions(powerRestrictions); } - }; + return undefined; + } catch (err) { + return undefined; + } + }, [pathProperties, infraId, rollingStock]); - getPathProperties(); + const formattedPowerRestrictions = useMemo(() => { + if ( + infraId && + trainScheduleResult && + rollingStock && + pathfindingResult && + formattedPathProperties + ) { + return formatPowerRestrictionRangesWithHandled({ + selectedTrainSchedule: trainScheduleResult, + selectedTrainRollingStock: rollingStock, + pathfindingResult, + pathProperties: formattedPathProperties, + }); + } + return undefined; }, [pathProperties, infraId, rollingStock]); // setup chart synchronizer