front: display conflicts on the space time chart

Signed-off-by: Simon Ser <[email protected]>
Closes: #8683

front/src/applications/operationalStudies/components/Scenario/ScenarioContent.tsx

@@ -225,6 +225,7 @@ const ScenarioContent = ({
                     simulationResults={simulationResults}
                     infraId={infra.id}
                     timetableTrainNb={timetable.train_ids.length}
+                    conflicts={conflicts}
                   />
                 )
               )}

front/src/applications/operationalStudies/views/SimulationResults.tsx

@@ -5,11 +5,13 @@ import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 import type { SimulationResultsData } from 'applications/operationalStudies/types';
+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';
 import TimeButtons from 'modules/simulationResult/components/TimeButtons';
 import TrainDetails from 'modules/simulationResult/components/TrainDetails';
@@ -30,6 +32,7 @@ type SimulationResultsProps = {
   simulationResults: SimulationResultsData;
   projectionData?: ProjectionData;
   timetableTrainNb: number;
+  conflicts?: Conflict[];
 };
 
 const SimulationResults = ({
@@ -45,6 +48,7 @@ const SimulationResults = ({
   },
   projectionData,
   timetableTrainNb,
+  conflicts = [],
 }: SimulationResultsProps) => {
   const { t } = useTranslation('simulation');
   const dispatch = useAppDispatch();
@@ -89,6 +93,8 @@ const SimulationResults = ({
     [projectionData]
   );
 
+  const conflictZones = useProjectedConflicts(infraId, conflicts, projectionData?.path);
+
   useEffect(() => {
     if (extViewport !== undefined) {
       dispatch(
@@ -153,6 +159,7 @@ const SimulationResults = ({
                   operationalPoints={projectedOperationalPoints}
                   projectPathTrainResult={projectPathTrainResult}
                   selectedTrainScheduleId={selectedTrainSchedule?.id}
+                  conflicts={conflictZones}
                 />
               </div>
             </div>

front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx

@@ -2,7 +2,8 @@ import { useRef, useState } from 'react';
 
 import { Manchette } from '@osrd-project/ui-manchette';
 import { useManchettesWithSpaceTimeChart } from '@osrd-project/ui-manchette-with-spacetimechart';
-import { SpaceTimeChart, PathLayer } from '@osrd-project/ui-spacetimechart';
+import { ConflictLayer, SpaceTimeChart, PathLayer } from '@osrd-project/ui-spacetimechart';
+import type { Conflict } from '@osrd-project/ui-spacetimechart';
 
 import type { TrainSpaceTimeData } from 'applications/operationalStudies/types';
 import type { OperationalPointExtensions, OperationalPointPart } from 'common/api/osrdEditoastApi';
@@ -16,13 +17,15 @@ type ManchetteWithSpaceTimeChartProps = {
   }[];
   projectPathTrainResult: TrainSpaceTimeData[];
   selectedTrainScheduleId?: number;
+  conflicts?: Conflict[];
 };
 const DEFAULT_HEIGHT = 561;
 
 const ManchetteWithSpaceTimeChartWrapper = ({
   operationalPoints,
   projectPathTrainResult,
   selectedTrainScheduleId,
+  conflicts = [],
 }: ManchetteWithSpaceTimeChartProps) => {
   const [heightOfManchetteWithSpaceTimeChart] = useState(DEFAULT_HEIGHT);
   const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
@@ -66,6 +69,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
             {spaceTimeChartProps.paths.map((path) => (
               <PathLayer key={path.id} path={path} color={path.color} />
             ))}
+            <ConflictLayer conflicts={conflicts} />
           </SpaceTimeChart>
         </div>
       </div>

front/src/modules/simulationResult/components/SpaceTimeChart/useProjectedConflicts.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState, useMemo } from 'react';
+
+import { formatDatetimeForSpaceTimeChart } from 'applications/operationalStudies/helpers/upsertNewProjectedTrains';
+import type {
+  Conflict,
+  PathProperties,
+  PathfindingResultSuccess,
+} from 'common/api/osrdEditoastApi';
+import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
+
+const useProjectedConflicts = (
+  infraId: number | undefined,
+  conflicts: Conflict[],
+  path: PathfindingResultSuccess | undefined
+) => {
+  const [postPathProperties] =
+    osrdEditoastApi.endpoints.postInfraByInfraIdPathProperties.useMutation();
+
+  const [projectedZones, setProjectedZones] = useState<PathProperties['zones']>();
+  useEffect(() => {
+    const fetchProjectedZones = async ({ track_section_ranges }: PathfindingResultSuccess) => {
+      const { zones } = await postPathProperties({
+        infraId: infraId!,
+        props: ['zones'],
+        pathPropertiesInput: {
+          track_section_ranges,
+        },
+      }).unwrap();
+      setProjectedZones(zones);
+    };
+
+    setProjectedZones(undefined);
+    if (path) {
+      fetchProjectedZones(path);
+    }
+  }, [path]);
+
+  const conflictReqsByZone = useMemo(() => {
+    const reqs = conflicts.flatMap((conflict) => conflict.requirements);
+    return new Map(reqs.map((req) => [req.zone, req]));
+  }, [conflicts]);
+
+  const conflictZones = useMemo(() => {
+    if (!projectedZones) {
+      return [];
+    }
+
+    const boundaries = [0, ...projectedZones.boundaries, path!.length];
+    return projectedZones.values.flatMap((zone, index) => {
+      const req = conflictReqsByZone.get(zone);
+      if (!req) {
+        return [];
+      }
+
+      return [
+        {
+          timeStart: +new Date(formatDatetimeForSpaceTimeChart(req.start_time)),
+          timeEnd: +new Date(formatDatetimeForSpaceTimeChart(req.end_time)),
+          spaceStart: boundaries[index],
+          spaceEnd: boundaries[index + 1],
+        },
+      ];
+    });
+  }, [conflictReqsByZone, projectedZones]);
+
+  return conflictZones;
+};
+
+export default useProjectedConflicts;