front: fix selected track display

Signed-off-by: theocrsb <[email protected]>

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

@@ -102,7 +102,12 @@ const ManageTrainSchedule = ({ trainIdToEdit }: ManageTrainScheduleProps) => {
         <div className="floating-itinerary">
           <Itinerary />
         </div>
-        <Map pathProperties={pathProperties} simulationPathSteps={compact(pathSteps)}>
+
+        <Map
+          pathProperties={pathProperties}
+          simulationPathSteps={compact(pathSteps)}
+          pathStepsAndSuggestedOPs={pathStepsAndSuggestedOPs}
+        >
           <IncompatibleConstraints pathProperties={pathProperties} />
         </Map>
       </div>

front/src/modules/trainschedule/components/ManageTrainSchedule/ManageTrainScheduleMap/ItineraryMarkers.tsx

@@ -1,28 +1,22 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import cx from 'classnames';
 import type { Position } from 'geojson';
 import type { Map } from 'maplibre-gl';
 import { Marker } from 'react-map-gl/maplibre';
 
+import { useScenarioContext } from 'applications/operationalStudies/hooks/useScenarioContext';
 import destinationSVG from 'assets/pictures/destination.svg';
 import stdcmDestination from 'assets/pictures/mapMarkers/destination.svg';
 import stdcmVia from 'assets/pictures/mapMarkers/intermediate-point.svg';
 import stdcmOrigin from 'assets/pictures/mapMarkers/start.svg';
 import originSVG from 'assets/pictures/origin.svg';
 import viaSVG from 'assets/pictures/via.svg';
-import { getNearestTrack } from 'utils/mapHelper';
-
-export type MarkerInformation = {
-  name?: string;
-  coordinates?: number[] | Position;
-  metadata?: {
-    lineCode: number;
-    lineName: string;
-    trackName: string;
-    trackNumber: number;
-  };
-};
+import type { TrackSection } from 'common/api/osrdEditoastApi';
+import { matchPathStepAndOp } from 'modules/pathfinding/utils';
+import type { PathStep } from 'reducers/osrdconf/types';
+
+import type { SuggestedOP } from '../types';
 
 enum MARKER_TYPE {
   ORIGIN = 'origin',
@@ -31,7 +25,8 @@ enum MARKER_TYPE {
 }
 
 type MarkerProperties = {
-  marker: MarkerInformation;
+  op: SuggestedOP;
+  pathStep: PathStep;
   coordinates: number[] | Position;
   imageSource: string;
 } & (
@@ -46,7 +41,8 @@ type MarkerProperties = {
 
 type ItineraryMarkersProps = {
   map: Map;
-  simulationPathSteps: MarkerInformation[];
+  simulationPathSteps: PathStep[];
+  pathStepsAndSuggestedOPs?: SuggestedOP[];
   showStdcmAssets: boolean;
 };
 
@@ -65,46 +61,83 @@ const formatPointWithNoName = (
   </>
 );
 
-const extractMarkerInformation = (pathSteps: MarkerInformation[], showStdcmAssets: boolean) =>
-  pathSteps.reduce((acc, cur, index) => {
-    if (cur && cur.coordinates) {
-      if (index === 0) {
-        acc.push({
-          coordinates: cur.coordinates,
-          type: MARKER_TYPE.ORIGIN,
-          marker: cur,
-          imageSource: showStdcmAssets ? stdcmOrigin : originSVG,
-        });
-      } else if (index > 0 && index < pathSteps.length - 1) {
-        acc.push({
-          coordinates: cur.coordinates,
-          type: MARKER_TYPE.VIA,
-          marker: cur,
-          imageSource: showStdcmAssets ? stdcmVia : viaSVG,
-          index,
-        });
-      } else if (index === pathSteps.length - 1) {
-        acc.push({
-          coordinates: cur.coordinates,
-          type: MARKER_TYPE.DESTINATION,
-          marker: cur,
-          imageSource: showStdcmAssets ? stdcmDestination : destinationSVG,
-        });
+const extractMarkerInformation = (
+  pathSteps: PathStep[],
+  showStdcmAssets: boolean,
+  suggestedOP: SuggestedOP[]
+): MarkerProperties[] =>
+  pathSteps
+    .map((pathStep, index): MarkerProperties | null => {
+      const matchingOp = suggestedOP.find((op) => matchPathStepAndOp(pathStep, op));
+
+      if (!matchingOp) return null;
+
+      if (pathStep && pathStep.coordinates) {
+        if (index === 0) {
+          return {
+            coordinates: pathStep.coordinates,
+            type: MARKER_TYPE.ORIGIN,
+            imageSource: showStdcmAssets ? stdcmOrigin : originSVG,
+            op: matchingOp,
+            pathStep,
+          };
+        }
+        if (index > 0 && index < pathSteps.length - 1) {
+          return {
+            coordinates: pathStep.coordinates,
+            type: MARKER_TYPE.VIA,
+            imageSource: showStdcmAssets ? stdcmVia : viaSVG,
+            index,
+            op: matchingOp,
+            pathStep,
+          };
+        }
+        if (index === pathSteps.length - 1) {
+          return {
+            coordinates: pathStep.coordinates,
+            type: MARKER_TYPE.DESTINATION,
+            imageSource: showStdcmAssets ? stdcmDestination : destinationSVG,
+            op: matchingOp,
+            pathStep,
+          };
+        }
       }
-    }
-    return acc;
-  }, [] as MarkerProperties[]);
+      return null;
+    })
+    .filter((marker): marker is MarkerProperties => marker !== null);
+
+const ItineraryMarkers = ({
+  map,
+  simulationPathSteps,
+  pathStepsAndSuggestedOPs,
+  showStdcmAssets,
+}: ItineraryMarkersProps) => {
+  const [suggestedOP, setSuggestedOP] = useState<SuggestedOP[]>([]);
+  const { getTrackSectionsByIds } = useScenarioContext();
+
+  useEffect(() => {
+    if (pathStepsAndSuggestedOPs) setSuggestedOP(pathStepsAndSuggestedOPs);
+  }, [simulationPathSteps]);
 
-const ItineraryMarkers = ({ map, simulationPathSteps, showStdcmAssets }: ItineraryMarkersProps) => {
   const markersInformation = useMemo(
-    () => extractMarkerInformation(simulationPathSteps, showStdcmAssets),
+    () => extractMarkerInformation(simulationPathSteps, showStdcmAssets, suggestedOP),
     [simulationPathSteps, showStdcmAssets]
   );
 
+  const [trackSections, setTrackSections] = useState<Record<string, TrackSection>>({});
+
+  useEffect(() => {
+    const fetchTrackSections = async () => {
+      const trackId = markersInformation.map((markerInfo) => markerInfo.op.track);
+      setTrackSections(await getTrackSectionsByIds(trackId));
+    };
+    fetchTrackSections();
+  }, [markersInformation]);
+
   const getMarkerDisplayInformation = useCallback(
     (markerInfo: MarkerProperties) => {
       const {
-        marker: { coordinates: markerCoordinates, metadata: markerMetadata },
+        pathStep: { metadata: markerMetadata },
         type: markerType,
       } = markerInfo;
 
@@ -117,70 +150,62 @@ const ItineraryMarkers = ({ map, simulationPathSteps, showStdcmAssets }: Itinera
         return formatPointWithNoName(markerLineCode, markerLineName, markerTrackName, markerType);
       }
 
-      if (!markerCoordinates) return null;
+      const { op } = markerInfo;
+      const trackId = op.track;
+      const trackSection = trackSections[trackId];
 
-      const trackResult = getNearestTrack(markerCoordinates, map);
-      if (trackResult) {
-        const {
-          track: { properties: trackProperties },
-        } = trackResult;
-        if (trackProperties) {
-          const {
-            extensions_sncf_line_code: lineCode,
-            extensions_sncf_line_name: lineName,
-            extensions_sncf_track_name: trackName,
-          } = trackProperties;
-          if (lineCode && lineName && trackName)
-            return formatPointWithNoName(lineCode, lineName, trackName, markerType);
-        }
+      const metadataFromSuggestedOp = trackSection?.extensions?.sncf;
+
+      if (!metadataFromSuggestedOp) return null;
+
+      const { line_code, line_name, track_name } = metadataFromSuggestedOp;
+
+      if (metadataFromSuggestedOp) {
+        if (line_code && line_name && track_name)
+          return formatPointWithNoName(line_code, line_name, track_name, markerInfo.type);
       }
 
       return null;
     },
     [map]
   );
 
-  const Markers = useMemo(
-    () =>
-      markersInformation.map((markerInfo) => {
-        const isDestination = markerInfo.type === MARKER_TYPE.DESTINATION;
-        const isVia = markerInfo.type === MARKER_TYPE.VIA;
-
-        const markerName = (
-          <div className={`map-pathfinding-marker ${markerInfo.type}-name`}>
-            {markerInfo.marker.name
-              ? markerInfo.marker.name
-              : getMarkerDisplayInformation(markerInfo)}
-          </div>
-        );
-        return (
-          <Marker
-            longitude={markerInfo.coordinates[0]}
-            latitude={markerInfo.coordinates[1]}
-            offset={isDestination && !showStdcmAssets ? [0, -24] : [0, -12]}
-            key={isVia ? `via-${markerInfo.index}` : markerInfo.type}
+  return markersInformation.map((markerInfo) => {
+    const isDestination = markerInfo.type === MARKER_TYPE.DESTINATION;
+    const isVia = markerInfo.type === MARKER_TYPE.VIA;
+    const markerName = (
+      <div className={`map-pathfinding-marker ${markerInfo.type}-name`}>
+        {markerInfo?.pathStep?.name
+          ? markerInfo.pathStep?.name
+          : getMarkerDisplayInformation(markerInfo)}
+      </div>
+    );
+
+    return (
+      <Marker
+        longitude={markerInfo.coordinates[0]}
+        latitude={markerInfo.coordinates[1]}
+        offset={isDestination && !showStdcmAssets ? [0, -24] : [0, -12]}
+        key={isVia ? `via-${markerInfo.index}` : markerInfo.type}
+      >
+        <img
+          src={markerInfo.imageSource}
+          alt={markerInfo.type}
+          style={showStdcmAssets ? {} : { height: isDestination ? '3rem' : '1.5rem' }}
+        />
+        {isVia && (
+          <span
+            className={cx('map-pathfinding-marker', 'via-number', {
+              'stdcm-via': isVia && showStdcmAssets,
+            })}
           >
-            <img
-              src={markerInfo.imageSource}
-              alt={markerInfo.type}
-              style={showStdcmAssets ? {} : { height: isDestination ? '3rem' : '1.5rem' }}
-            />
-            {isVia && (
-              <span
-                className={cx('map-pathfinding-marker', 'via-number', {
-                  'stdcm-via': isVia && showStdcmAssets,
-                })}
-              >
-                {markerInfo.index}
-              </span>
-            )}
-            {!showStdcmAssets && markerName}
-          </Marker>
-        );
-      }),
-    [markersInformation, showStdcmAssets]
-  );
-  return Markers;
+            {markerInfo.index}
+          </span>
+        )}
+        {!showStdcmAssets && markerName}
+      </Marker>
+    );
+  });
 };
 
 export default ItineraryMarkers;

front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx

@@ -38,15 +38,14 @@ import AddPathStepPopup from 'modules/trainschedule/components/ManageTrainSchedu
 import { updateViewport } from 'reducers/map';
 import type { Viewport } from 'reducers/map';
 import { getMap, getTerrain3DExaggeration } from 'reducers/map/selectors';
+import type { PathStep } from 'reducers/osrdconf/types';
 import { useAppDispatch } from 'store';
 import { getMapMouseEventNearestFeature } from 'utils/mapHelper';
 
 import OPERATIONAL_POINT_LAYERS from './consts';
 import ItineraryLayer from './ManageTrainScheduleMap/ItineraryLayer';
-import ItineraryMarkers, {
-  type MarkerInformation,
-} from './ManageTrainScheduleMap/ItineraryMarkers';
-import type { FeatureInfoClick } from './types';
+import ItineraryMarkers from './ManageTrainScheduleMap/ItineraryMarkers';
+import type { FeatureInfoClick, SuggestedOP } from './types';
 
 type MapProps = {
   pathProperties?: ManageTrainSchedulePathProperties;
@@ -56,7 +55,8 @@ type MapProps = {
   hideItinerary?: boolean;
   preventPointSelection?: boolean;
   mapId?: string;
-  simulationPathSteps: MarkerInformation[];
+  simulationPathSteps: PathStep[];
+  pathStepsAndSuggestedOPs?: SuggestedOP[];
   showStdcmAssets?: boolean;
   isFeasible?: boolean;
 };
@@ -70,6 +70,7 @@ const Map = ({
   preventPointSelection = false,
   mapId = 'map-container',
   simulationPathSteps,
+  pathStepsAndSuggestedOPs,
   showStdcmAssets = false,
   isFeasible = true,
   children,
@@ -336,6 +337,7 @@ const Map = ({
         {mapRef.current && (
           <ItineraryMarkers
             simulationPathSteps={simulationPathSteps}
+            pathStepsAndSuggestedOPs={pathStepsAndSuggestedOPs}
             map={mapRef.current.getMap()}
             showStdcmAssets={showStdcmAssets}
           />