front: stdcm: change map

Author: SarahBellaha

front/public/locales/en/stdcm.json

@@ -58,7 +58,7 @@
   "speedSpaceChart": "Speed Space Chart",
   "stdcmComputation": "Search for a train path",
   "stdcmErrors": {
-    "bothOriginAndDestinationScheduled": "The calculation cannot take into account both an origin and a destination schedule. You have to choose one or the other:",
+    "bothPointAreScheduled": "The calculation cannot take into account both an origin and a destination schedule. You have to choose one or the other:",
     "noPaths": "Incompatibility with other train paths.",
     "noResults": "No path found",
     "noScheduledPoint": "The calculation requires either the origin or destination schedule.",

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

@@ -95,6 +95,7 @@ const useStdcm = (showFailureNotification: boolean = true) => {
             rollingStock: stdcmRollingStock,
             creationDate: new Date(),
             speedLimitByTag,
+            simulationPathSteps: osrdconf.pathSteps,
           } as StdcmV2SuccessResponse);
 
           const stdcmTrain: TrainScheduleResult = {

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/StdcmResults/StdcmResults.tsx

@@ -112,12 +112,14 @@ const StcdmResults = ({
             <span className="change-criteria">{t('changeCriteria')}</span>
           </div>
         )}
-        <div className="osrd-config-item-container osrd-config-item-container-map map-results">
+        <div className="osrd-config-item-container osrd-config-item-container-map map-results no-pointer-events">
           <Map
+            mapId="map-result"
+            isReadOnly
             hideAttribution
-            preventPointSelection
             setMapCanvas={setMapCanvas}
             pathProperties={selectedSimulation.outputs?.pathProperties}
+            simulationPathSteps={selectedSimulation.outputs?.results.simulationPathSteps}
           />
         </div>
       </div>

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

@@ -136,7 +136,6 @@ const StdcmViewV2 = () => {
           <StdcmConfig
             selectedSimulation={selectedSimulation}
             currentSimulationInputs={currentSimulationInputs}
-            pathProperties={pathProperties}
             isPending={isPending}
             showBtnToLaunchSimulation={showBtnToLaunchSimulation}
             retainedSimulationIndex={retainedSimulationIndex}

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

@@ -55,6 +55,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';
 
@@ -64,27 +65,39 @@ import ItineraryMarkersV2 from './ManageTrainScheduleMap/ItineraryMarkersV2';
 type MapProps = {
   pathProperties?: ManageTrainSchedulePathProperties;
   setMapCanvas?: (mapCanvas: string) => void;
+  isReadOnly?: boolean;
   hideAttribution?: boolean;
   hideItinerary?: boolean;
   preventPointSelection?: boolean;
+  mapId?: string;
+  simulationPathSteps?: PathStep[];
 };
 
 const Map: FC<PropsWithChildren<MapProps>> = ({
   pathProperties,
   setMapCanvas,
+  isReadOnly = false,
   hideAttribution = false,
   hideItinerary = false,
   preventPointSelection = false,
+  mapId = 'map-container',
+  simulationPathSteps,
   children,
 }) => {
   const mapBlankStyle = useMapBlankStyle();
 
   const infraID = useInfraID();
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
   const { viewport, mapSearchMarker, mapStyle, showOSM, layersSettings } = useSelector(getMap);
+  const mapViewport = useMemo(
+    () =>
+      isReadOnly && pathProperties
+        ? computeBBoxViewport(bbox(pathProperties?.geometry), viewport)
+        : viewport,
+    [isReadOnly, pathProperties, viewport]
+  );
 
   const [mapIsLoaded, setMapIsLoaded] = useState(false);
-  const [showLayers, setShowLayers] = useState(true);
 
   const [snappedPoint, setSnappedPoint] = useState<Feature<Point> | undefined>();
   const { urlLat = '', urlLon = '', urlZoom = '', urlBearing = '', urlPitch = '' } = useParams();
@@ -119,15 +132,14 @@ const Map: FC<PropsWithChildren<MapProps>> = ({
 
   const resetPitchBearing = () => {
     updateViewportChange({
-      ...viewport,
+      ...mapViewport,
       bearing: 0,
       pitch: 0,
     });
   };
 
   const onFeatureClick = (e: MapLayerMouseEvent) => {
     if (preventPointSelection) return;
-
     const result = getMapMouseEventNearestFeature(e, { layersId: ['chartis/tracks-geo/main'] });
     if (
       result &&
@@ -155,7 +167,6 @@ const Map: FC<PropsWithChildren<MapProps>> = ({
 
   const onMoveGetFeature = (e: MapLayerMouseEvent) => {
     if (preventPointSelection) return;
-
     const result = getMapMouseEventNearestFeature(e, { layersId: ['chartis/tracks-geo/main'] });
     if (
       result &&
@@ -193,7 +204,7 @@ const Map: FC<PropsWithChildren<MapProps>> = ({
   useEffect(() => {
     if (urlLat) {
       updateViewportChange({
-        ...viewport,
+        ...mapViewport,
         latitude: parseFloat(urlLat),
         longitude: parseFloat(urlLon),
         zoom: parseFloat(urlZoom),
@@ -206,60 +217,63 @@ const Map: FC<PropsWithChildren<MapProps>> = ({
 
   useEffect(() => {
     if (pathProperties) {
-      if (setMapCanvas) {
-        setShowLayers(false);
-      }
-      const newViewport = computeBBoxViewport(bbox(pathProperties.geometry), viewport);
+      const newViewport = computeBBoxViewport(bbox(pathProperties.geometry), mapViewport);
       dispatch(updateViewport(newViewport));
     }
   }, [pathProperties]);
 
   const captureMap = async () => {
     if (!pathProperties) return;
 
-    const itineraryViewport = computeBBoxViewport(bbox(pathProperties.geometry), viewport);
+    const itineraryViewport = computeBBoxViewport(bbox(pathProperties.geometry), mapViewport);
 
-    if (setMapCanvas && !showLayers && isEqual(viewport, itineraryViewport)) {
+    if (setMapCanvas && isEqual(mapViewport, itineraryViewport)) {
       try {
-        const mapElement = document.getElementById('map-container');
+        const mapElement = document.getElementById(mapId);
         if (mapElement) {
           const canvas = await html2canvas(mapElement);
           setMapCanvas(canvas.toDataURL());
         }
       } catch (error) {
         console.error('Error capturing map:', error);
-      } finally {
-        setShowLayers(true);
       }
     }
   };
 
   return (
     <>
-      <MapButtons
-        map={mapRef.current ?? undefined}
-        resetPitchBearing={resetPitchBearing}
-        closeFeatureInfoClickPopup={closeFeatureInfoClickPopup}
-        bearing={viewport.bearing}
-        withMapKeyButton
-        viewPort={viewport}
-      />
+      {!isReadOnly && (
+        <MapButtons
+          map={mapRef.current ?? undefined}
+          resetPitchBearing={resetPitchBearing}
+          closeFeatureInfoClickPopup={closeFeatureInfoClickPopup}
+          bearing={mapViewport.bearing}
+          withMapKeyButton
+          viewPort={mapViewport}
+        />
+      )}
       <ReactMapGL
+        dragPan={false}
+        scrollZoom={false}
         ref={mapRef}
-        {...viewport}
+        {...mapViewport}
         style={{ width: '100%', height: '100%' }}
-        cursor={preventPointSelection ? 'default' : 'pointer'}
+        cursor={isReadOnly || preventPointSelection ? 'default' : 'pointer'}
         mapStyle={mapBlankStyle}
-        onMove={(e) => updateViewportChange(e.viewState)}
-        onMouseMove={onMoveGetFeature}
         attributionControl={false} // Defined below
-        onClick={onFeatureClick}
-        onResize={(e) => {
-          updateViewportChange({
-            width: e.target.getContainer().offsetWidth,
-            height: e.target.getContainer().offsetHeight,
-          });
-        }}
+        {...(!isReadOnly && {
+          dragPan: true,
+          scrollZoom: true,
+          onMove: (e) => updateViewportChange(e.viewState),
+          onMouseMove: onMoveGetFeature,
+          onClick: onFeatureClick,
+          onResize: (e) => {
+            updateViewportChange({
+              width: e.target.getContainer().offsetWidth,
+              height: e.target.getContainer().offsetHeight,
+            });
+          },
+        })}
         interactiveLayerIds={interactiveLayerIds}
         touchZoomRotate
         maxPitch={85}
@@ -271,9 +285,11 @@ const Map: FC<PropsWithChildren<MapProps>> = ({
         onLoad={() => {
           setMapIsLoaded(true);
         }}
-        onIdle={() => captureMap()}
+        onIdle={() => {
+          captureMap();
+        }}
         preserveDrawingBuffer
-        id="map-container"
+        id={mapId}
       >
         <VirtualLayers />
         {!hideAttribution && (
@@ -325,7 +341,7 @@ const Map: FC<PropsWithChildren<MapProps>> = ({
           layerOrder={LAYER_GROUPS_ORDER[LAYERS.ROUTES.GROUP]}
           infraID={infraID}
         />
-        {showLayers && (
+        {!isReadOnly && (
           <>
             {layersSettings.operationalpoints && (
               <OperationalPoints
@@ -384,17 +400,22 @@ const Map: FC<PropsWithChildren<MapProps>> = ({
               layerOrder={LAYER_GROUPS_ORDER[LAYERS.LINE_SEARCH.GROUP]}
               infraID={infraID}
             />
+            <RenderPopup pathProperties={pathProperties} />
           </>
         )}
-        <RenderPopup pathProperties={pathProperties} />
         {mapIsLoaded && (
           <>
             <ItineraryLayer
               layerOrder={LAYER_GROUPS_ORDER[LAYERS.ITINERARY.GROUP]}
               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

@@ -190,8 +190,8 @@
     }
 
     .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;

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

@@ -342,6 +342,9 @@
       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;
+      &.no-pointer-events {
+        pointer-events: none;
+      }
     }
   }
 }