front: stdcm: change map

Author: SarahBellaha

front/src/applications/stdcm/hooks/useStdcm.ts

@@ -77,6 +77,7 @@ const useStdcm = () => {
             rollingStock: stdcmRollingStock,
             creationDate: new Date(),
             speedLimitByTag,
+            simulationPathSteps: osrdconf.pathSteps,
           } as StdcmV2SuccessResponse);
 
           const stdcmTrain: TrainScheduleResult = {
@@ -131,6 +132,7 @@ const useStdcm = () => {
     pathProperties,
     setPathProperties,
     isPending,
+    simulationPathSteps: stdcmV2Response?.simulationPathSteps,
   };
 };
 

front/src/applications/stdcm/types.ts

@@ -14,6 +14,7 @@ import type {
   RollingStockWithLiveries,
   SimulationResponse,
 } from 'common/api/osrdEditoastApi';
+import type { PathStep } from 'reducers/osrdconf/types';
 import type { ValueOf } from 'utils/types';
 
 export type StdcmRequestStatus = ValueOf<typeof STDCM_REQUEST_STATUS>;
@@ -26,6 +27,7 @@ export type StdcmV2SuccessResponse = Omit<
   rollingStock: LightRollingStock;
   creationDate: Date;
   speedLimitByTag?: string;
+  simulationPathSteps: PathStep[];
 };
 
 export type SimulationReportSheetProps = {

front/src/applications/stdcmV2/components/StdcmConfig.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 
 import { Button } from '@osrd-project/ui-core';
 import { Alert } from '@osrd-project/ui-icons';
@@ -21,7 +21,6 @@ import type { StdcmSimulationResult } from '../types';
 
 type StdcmConfigProps = {
   currentSimulationInputs: StdcmSimulationResult['input'] | undefined;
-  pathProperties?: ManageTrainSchedulePathProperties;
   isPending: boolean;
   launchStdcmRequest: () => Promise<void>;
   cancelStdcmRequest: () => void;
@@ -32,7 +31,6 @@ type StdcmConfigProps = {
 
 const StdcmConfig = ({
   currentSimulationInputs,
-  pathProperties,
   isPending,
   launchStdcmRequest,
   cancelStdcmRequest,
@@ -45,7 +43,8 @@ const StdcmConfig = ({
   const { updateGridMarginAfter, updateGridMarginBefore, updateStdcmStandardAllowance } =
     useOsrdConfActions() as StdcmConfSliceActions;
 
-  const { pathfindingState } = usePathfindingV2(undefined, pathProperties);
+  const [pathProperties, setPathProperties] = useState<ManageTrainSchedulePathProperties>();
+  const { pathfindingState } = usePathfindingV2(setPathProperties, pathProperties);
 
   const clickOnSimulation = () => {
     if (pathfindingState.done) {

front/src/applications/stdcmV2/components/StdcmResults/StdcmResults.tsx

@@ -13,6 +13,7 @@ import {
   getOperationalPointsWithTimes,
 } from 'applications/stdcm/utils/formatSimulationReportSheet';
 import { Map } from 'modules/trainschedule/components/ManageTrainSchedule';
+import type { PathStep } from 'reducers/osrdconf/types';
 import { dateTimeFormatting } from 'utils/date';
 
 import StcdmResultsTable from './StdcmResultsTable';
@@ -22,11 +23,13 @@ type StcdmResultsV2Props = {
   stdcmData: StdcmV2SuccessResponse;
   pathProperties?: ManageTrainSchedulePathProperties;
   setInteractedResultsElements: (interactedResultsElements: boolean) => void;
+  simulationPathSteps?: PathStep[];
 };
 
 const StcdmResults = ({
   stdcmData,
   pathProperties,
+  simulationPathSteps,
   setInteractedResultsElements,
 }: StcdmResultsV2Props) => {
   const { t } = useTranslation('stdcm');
@@ -51,7 +54,7 @@ const StcdmResults = ({
 
   return (
     <main className="stdcm-v2-results">
-      <div className="simuation-banner">
+      <div className="simulation-banner">
         <div
           className="simulation-validated"
           style={{ color: isSimulationSelected ? '#0B723C' : '' }}
@@ -65,7 +68,7 @@ const StcdmResults = ({
         </div>
         <div className="creation-date">{date}</div>
       </div>
-      <div className="simuation-results">
+      <div className="simulation-results">
         <div className="results-and-sheet">
           <StcdmResultsTable
             stdcmData={stdcmData}
@@ -97,7 +100,13 @@ const StcdmResults = ({
           )}
         </div>
         <div className="osrd-config-item-container osrd-config-item-container-map map-results">
-          <Map hideAttribution setMapCanvas={setMapCanvas} pathProperties={pathProperties} />
+          <Map
+            mapId="map-result"
+            hideAttribution
+            setMapCanvas={setMapCanvas}
+            pathProperties={pathProperties}
+            simulationPathSteps={simulationPathSteps}
+          />
         </div>
       </div>
     </main>

front/src/applications/stdcmV2/views/StdcmViewV2.tsx

@@ -14,8 +14,14 @@ import type { StdcmSimulationResult } from '../types';
 
 const StdcmViewV2 = () => {
   const { t } = useTranslation('stdcm');
-  const { launchStdcmRequest, cancelStdcmRequest, isPending, stdcmV2Results, pathProperties } =
-    useStdcm();
+  const {
+    launchStdcmRequest,
+    cancelStdcmRequest,
+    isPending,
+    stdcmV2Results,
+    pathProperties,
+    simulationPathSteps,
+  } = useStdcm();
   const { getScenarioID } = useOsrdConfSelectors();
   const scenarioID = useSelector(getScenarioID);
 
@@ -41,7 +47,7 @@ const StdcmViewV2 = () => {
         {scenarioID && (
           <StdcmConfig
             currentSimulationInputs={currentSimulationInputs}
-            pathProperties={pathProperties}
+            // pathProperties={pathProperties}
             isPending={isPending}
             launchStdcmRequest={launchStdcmRequest}
             cancelStdcmRequest={cancelStdcmRequest}
@@ -59,6 +65,7 @@ const StdcmViewV2 = () => {
             stdcmData={stdcmV2Results.stdcmResponse}
             pathProperties={pathProperties}
             setInteractedResultsElements={setInteractedResultsElements}
+            simulationPathSteps={simulationPathSteps}
           />
         )}
       </div>

front/src/modules/pathfinding/hook/usePathfinding.ts

@@ -134,7 +134,7 @@ function init({
 }
 
 export const usePathfindingV2 = (
-  setPathProperties?: (pathProperties?: ManageTrainSchedulePathProperties) => void | null,
+  setPathProperties: (pathProperties?: ManageTrainSchedulePathProperties) => void | null,
   pathProperties?: ManageTrainSchedulePathProperties
 ) => {
   const { t } = useTranslation(['operationalStudies/manageTrainSchedule']);
@@ -175,7 +175,7 @@ export const usePathfindingV2 = (
   const { updatePathSteps } = useOsrdConfActions();
 
   const generatePathfindingParams = (): PostV2InfraByInfraIdPathfindingBlocksApiArg | null => {
-    setPathProperties?.(undefined);
+    setPathProperties(undefined);
     return getPathfindingQuery({ infraId, rollingStock, origin, destination, pathSteps });
   };
 
@@ -284,7 +284,7 @@ export const usePathfindingV2 = (
                 compact(updatedPathSteps)
               );
 
-              setPathProperties?.({
+              setPathProperties({
                 electrifications,
                 geometry,
                 suggestedOperationalPoints,

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

@@ -78,11 +78,20 @@ const extractMarkerInformation = (pathSteps: (PathStep | null)[]) =>
     return acc;
   }, [] as MarkerInformation[]);
 
-const ItineraryMarkers = ({ map }: { map: Map }) => {
+const ItineraryMarkers = ({
+  map,
+  simulationPathSteps,
+}: {
+  map: Map;
+  simulationPathSteps?: PathStep[];
+}) => {
   const { getPathSteps } = useOsrdConfSelectors();
   const pathSteps = useSelector(getPathSteps);
 
-  const markersInformation = useMemo(() => extractMarkerInformation(pathSteps), [pathSteps]);
+  const markersInformation = useMemo(
+    () => extractMarkerInformation(simulationPathSteps || pathSteps),
+    [simulationPathSteps, pathSteps]
+  );
 
   const getMarkerDisplayInformation = useCallback(
     (markerInfo: MarkerInformation) => {

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

@@ -47,6 +47,7 @@ import RenderPopup from 'modules/trainschedule/components/ManageTrainSchedule/Ma
 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';
 
@@ -58,13 +59,17 @@ type MapProps = {
   setMapCanvas?: (mapCanvas: string) => void;
   hideAttribution?: boolean;
   hideItinerary?: boolean;
+  mapId?: string;
+  simulationPathSteps?: PathStep[];
 };
 
 const Map = ({
   pathProperties,
   setMapCanvas,
   hideAttribution = false,
   hideItinerary = false,
+  mapId = 'map-container',
+  simulationPathSteps,
 }: MapProps) => {
   const mapBlankStyle = useMapBlankStyle();
 
@@ -189,24 +194,14 @@ const Map = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    if (pathProperties) {
-      if (setMapCanvas) {
-        setShowLayers(false);
-      }
-      const newViewport = computeBBoxViewport(bbox(pathProperties.geometry), viewport);
-      dispatch(updateViewport(newViewport));
-    }
-  }, [pathProperties]);
-
   const captureMap = async () => {
     if (!pathProperties) return;
 
     const itineraryViewport = computeBBoxViewport(bbox(pathProperties.geometry), viewport);
 
     if (setMapCanvas && !showLayers && isEqual(viewport, itineraryViewport)) {
       try {
-        const mapElement = document.getElementById('map-container');
+        const mapElement = document.getElementById(mapId);
         if (mapElement) {
           const canvas = await html2canvas(mapElement);
           setMapCanvas(canvas.toDataURL());
@@ -219,6 +214,17 @@ const Map = ({
     }
   };
 
+  useEffect(() => {
+    if (pathProperties) {
+      if (setMapCanvas) {
+        setShowLayers(false);
+        captureMap();
+      }
+      const newViewport = computeBBoxViewport(bbox(pathProperties.geometry), viewport);
+      dispatch(updateViewport(newViewport));
+    }
+  }, [pathProperties]);
+
   return (
     <>
       <MapButtons
@@ -258,7 +264,7 @@ const Map = ({
         }}
         onIdle={() => captureMap()}
         preserveDrawingBuffer
-        id="map-container"
+        id={mapId}
       >
         <VirtualLayers />
         {!hideAttribution && (
@@ -379,7 +385,12 @@ const Map = ({
               geometry={pathProperties?.geometry}
               hideItineraryLine={hideItinerary}
             />
-            {mapRef.current && <ItineraryMarkersV2 map={mapRef.current.getMap()} />}
+            {mapRef.current && (
+              <ItineraryMarkersV2
+                simulationPathSteps={simulationPathSteps}
+                map={mapRef.current.getMap()}
+              />
+            )}
           </>
         )}
         {mapSearchMarker && <SearchMarker data={mapSearchMarker} colors={colors[mapStyle]} />}

front/src/styles/scss/applications/stdcmV2/_home.scss

@@ -96,17 +96,24 @@
     }
 
     .stdcm-v2-map {
-      border-radius: 8px;
-      border: 1px solid rgba(255, 255, 255, 1);
+      border-radius: 0.5rem;
+      border: 0.063rem solid rgba(255, 255, 255, 1);
       box-shadow:
-        0px 0px 0px 2px rgba(255, 255, 255, 0.75) inset,
-        0px 0px 0px 1px rgba(0, 0, 0, 0.25) inset;
+        0rem 0rem 0rem 0.125rem rgba(255, 255, 255, 0.75) inset,
+        0rem 0rem 0rem 0.063rem rgba(0, 0, 0, 0.25) inset;
       height: auto;
       min-height: 540px;
       margin-left: 0.85rem;
       width: 100%;
       height: calc(100vh - 64px);
+
+      & .results {
+        margin: 2.313rem 2rem 0 0.85rem;
+        width: 100%;
+        height: 540px;
+      }
     }
+    
   }
   .stdcm-container {
     position: relative;
@@ -144,7 +151,7 @@
 
   .stdcm-v2-results {
     background-color: rgb(233, 239, 242);
-    .simuation-banner {
+    .simulation-banner {
       color: rgb(0, 0, 0);
       font-weight: 600;
       font-size: 1.125rem;
@@ -169,9 +176,19 @@
         }
       }
     }
-    .simuation-results {
+    .simulation-results {
       display: flex;
       justify-content: space-between;
+      .map-results {
+        border: 0.063rem solid rgba(255, 255, 255, 1);
+        border-radius: 0.5rem;
+        box-shadow:
+          0rem 0rem 0rem 0.125rem rgba(255, 255, 255, 0.75) inset,
+          0rem 0rem 0rem 0.063rem rgba(0, 0, 0, 0.25) inset;
+        height: 33.75rem;
+        margin: 2rem 2rem 0 0.85rem;
+        width: 100%;
+      }
       .results-and-sheet {
         display: flex;
         flex-direction: column;
@@ -320,16 +337,5 @@
         padding-left: 12.938rem;
       }
     }
-    .map-results {
-      width: 33.75rem;
-      height: 33.75rem;
-      margin-top: 2.313rem;
-      margin-right: 2rem;
-      border-radius: 0.5rem;
-      border: 0.063rem solid rgba(255, 255, 255, 1);
-      box-shadow:
-        0rem 0rem 0rem 0.125rem rgba(255, 255, 255, 0.75) inset,
-        0rem 0rem 0rem 0.063rem rgba(0, 0, 0, 0.25) inset;
-    }
   }
 }