Skip to content

Commit

Permalink
front: add lazy loader message on GET in stdcm
Browse files Browse the repository at this point in the history
Signed-off-by: Clara Ni <clara.ni@outlook.fr>
  • Loading branch information
clarani committed Nov 18, 2024
1 parent 9109693 commit a4daa6d
Show file tree
Hide file tree
Showing 7 changed files with 36 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const ScenarioContent = ({
selectedTrainId,
trainScheduleSummaries,
trainSchedules,
projectionData: projection,
projectionData,
simulationResults,
conflicts,
upsertTrainSchedules,
Expand Down Expand Up @@ -225,10 +225,9 @@ const ScenarioContent = ({
<SimulationResults
scenarioData={{ name: scenario.name, infraName: scenario.infra_name }}
collapsedTimetable={collapsedTimetable}
projectionData={projection}
projectionData={projectionData}
simulationResults={simulationResults}
infraId={infra.id}
timetableTrainNb={timetable.train_ids.length}
conflicts={conflicts}
/>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,10 @@ const useScenarioData = (
trainSchedule: trainScheduleUsedForProjection,
...projectionPath,
projectedTrains,
allTrainsProjected,
projectionLoaderData: {
allTrainsProjected,
totalTrains: timetable.train_ids.length,
},
}
: undefined,
simulationResults,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import type { Conflict } from 'common/api/osrdEditoastApi';
import SimulationWarpedMap from 'common/Map/WarpedMap/SimulationWarpedMap';
import ManchetteWithSpaceTimeChartWrapper from 'modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart';
import SimulationResultsMap from 'modules/simulationResult/components/SimulationResultsMap/SimulationResultsMap';
import ProjectionLoadingMessage from 'modules/simulationResult/components/SpaceTimeChart/ProjectionLoadingMessage';
import useGetProjectedTrainOperationalPoints from 'modules/simulationResult/components/SpaceTimeChart/useGetProjectedTrainOperationalPoints';
import useProjectedConflicts from 'modules/simulationResult/components/SpaceTimeChart/useProjectedConflicts';
import SpeedSpaceChartContainer from 'modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChartContainer';
Expand All @@ -31,7 +30,6 @@ type SimulationResultsProps = {
infraId?: number;
simulationResults: SimulationResultsData;
projectionData?: ProjectionData;
timetableTrainNb: number;
conflicts?: Conflict[];
};

Expand All @@ -48,7 +46,6 @@ const SimulationResults = ({
path,
},
projectionData,
timetableTrainNb,
conflicts = [],
}: SimulationResultsProps) => {
const { t } = useTranslation('simulation');
Expand Down Expand Up @@ -142,12 +139,6 @@ const SimulationResults = ({

<div className="osrd-simulation-container d-flex flex-grow-1 flex-shrink-1">
<div className="chart-container">
{!projectionData.allTrainsProjected && (
<ProjectionLoadingMessage
projectedTrainsNb={projectionData.projectedTrains.length}
totalTrains={timetableTrainNb}
/>
)}
<ManchetteWithSpaceTimeChartWrapper
operationalPoints={projectedOperationalPoints}
projectPathTrainResult={projectionData?.projectedTrains}
Expand All @@ -158,6 +149,7 @@ const SimulationResults = ({
projectionPath: projectionData.trainSchedule.path,
}}
conflicts={conflictZones}
projectionLoaderData={projectionData.projectionLoaderData}
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const StdcmDebugResults = ({
useState(SPEED_SPACE_CHART_HEIGHT);
const tWithoutPrefix = i18n.getFixedT(null, 'stdcm');

const spaceTimeData = useProjectedTrainsForStdcm(results);
const projectedData = useProjectedTrainsForStdcm(results);

const { data: workSchedules } = osrdEditoastApi.endpoints.postWorkSchedulesProjectPath.useQuery(
{
Expand All @@ -45,15 +45,16 @@ const StdcmDebugResults = ({

return (
<>
{spaceTimeData && spaceTimeData.length > 0 && pathProperties.manchetteOperationalPoints && (
{projectedData && pathProperties.manchetteOperationalPoints && (
<div className="osrd-simulation-container mb-2">
<p className="mt-2 mb-3 ml-4 font-weight-bold">{tWithoutPrefix('spaceTimeGraphic')}</p>
<div className="chart-container mt-2">
<ManchetteWithSpaceTimeChartWrapper
operationalPoints={pathProperties.manchetteOperationalPoints}
projectPathTrainResult={spaceTimeData}
projectPathTrainResult={projectedData.spaceTimeData}
selectedTrainScheduleId={STDCM_TRAIN_ID}
workSchedules={workSchedules}
projectionLoaderData={projectedData.projectionLoaderData}
/>
</div>
</div>
Expand Down
13 changes: 9 additions & 4 deletions front/src/applications/stdcm/hooks/useProjectedTrainsForStdcm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ const useProjectedTrainsForStdcm = (stdcmResponse?: StdcmSuccessResponse) => {
}
);

const trainIds = timetable?.train_ids;
const trainIds = useMemo(() => timetable?.train_ids || [], [timetable]);
const { currentData: trainSchedules } = osrdEditoastApi.endpoints.postTrainSchedule.useQuery(
{
body: {
ids: trainIds!,
ids: trainIds,
},
},
{
skip: !trainIds || !trainIds.length,
skip: !trainIds.length,
}
);

Expand All @@ -42,6 +42,8 @@ const useProjectedTrainsForStdcm = (stdcmResponse?: StdcmSuccessResponse) => {
[stdcmResponse]
);

const allTrainsProjected = useMemo(() => trainIdsToProject.size === 0, [trainIdsToProject]);

const { projectedTrainsById: projectedTimetableTrainsById } = useLazyProjectTrains({
infraId,
trainIdsToProject,
Expand All @@ -65,7 +67,10 @@ const useProjectedTrainsForStdcm = (stdcmResponse?: StdcmSuccessResponse) => {

if (!infraId || !stdcmResponse) return null;

return spaceTimeData;
return {
spaceTimeData,
projectionLoaderData: { allTrainsProjected, totalTrains: trainIds.length },
};
};

export default useProjectedTrainsForStdcm;
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import type {

import SettingsPanel from './SettingsPanel';
import ManchetteMenuButton from '../SpaceTimeChart/ManchetteMenuButton';
import ProjectionLoadingMessage from '../SpaceTimeChart/ProjectionLoadingMessage';
import WaypointsPanel from '../SpaceTimeChart/WaypointsPanel';

type ManchetteWithSpaceTimeChartProps = {
Expand All @@ -35,6 +36,10 @@ type ManchetteWithSpaceTimeChartProps = {
waypointsPanelData?: WaypointsPanelData;
conflicts?: Conflict[];
workSchedules?: PostWorkSchedulesProjectPathApiResponse;
projectionLoaderData: {
totalTrains: number;
allTrainsProjected: boolean;
};
};
const DEFAULT_HEIGHT = 561;

Expand All @@ -45,6 +50,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
waypointsPanelData,
conflicts = [],
workSchedules,
projectionLoaderData: { totalTrains, allTrainsProjected },
}: ManchetteWithSpaceTimeChartProps) => {
const [heightOfManchetteWithSpaceTimeChart] = useState(DEFAULT_HEIGHT);
const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -176,6 +182,12 @@ const ManchetteWithSpaceTimeChartWrapper = ({
)}
</>
)}
{!allTrainsProjected && (
<ProjectionLoadingMessage
projectedTrainsNb={projectPathTrainResult.length}
totalTrains={totalTrains}
/>
)}
</div>
<div className="header-separator" />
<div
Expand Down
5 changes: 4 additions & 1 deletion front/src/modules/simulationResult/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,10 @@ export type ProjectionData = {
projectedTrains: TrainSpaceTimeData[];
path: PathfindingResultSuccess;
geometry: PathProperties['geometry'];
allTrainsProjected: boolean;
projectionLoaderData: {
allTrainsProjected: boolean;
totalTrains: number;
};
};

export type WaypointsPanelData = {
Expand Down

0 comments on commit a4daa6d

Please sign in to comment.