front: enhance pathfinding loading state management

Author: SarahBellaha

front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx

@@ -24,7 +24,7 @@ import StdcmConsist from './StdcmConsist';
 import StdcmDestination from './StdcmDestination';
 import StdcmLinkedTrainSearch from './StdcmLinkedTrainSearch';
 import StdcmOrigin from './StdcmOrigin';
-import useStaticPathfinding from '../../hooks/useStaticPathfinding';
+import useStdcmPathfinding from '../../hooks/useStdcmPathfinding';
 import type { StdcmConfigErrors } from '../../types';
 import StdcmSimulationParams from '../StdcmSimulationParams';
 import StdcmVias from './StdcmVias';
@@ -82,8 +82,8 @@ const StdcmConfig = ({
   const totalMass = useSelector(getTotalMass);
   const totalLength = useSelector(getTotalLength);
   const maxSpeed = useSelector(getMaxSpeed);
+  const { isPathfindingLoading, pathfinding } = useStdcmPathfinding(infra);
 
-  const pathfinding = useStaticPathfinding(infra);
   const formRef = useRef<HTMLDivElement>(null);
 
   const [formErrors, setFormErrors] = useState<StdcmConfigErrors>();
@@ -250,6 +250,7 @@ const StdcmConfig = ({
             id="stdcm-map-config"
             hideAttribution
             hideItinerary
+            isPathfindingLoading={isPathfindingLoading}
             preventPointSelection
             pathGeometry={pathfinding?.geometry}
             showStdcmAssets

front/src/applications/stdcm/hooks/useStaticPathfinding.ts front/src/applications/stdcm/hooks/useStdcmPathfinding.ts

@@ -3,11 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { compact, isEqual } from 'lodash';
 import { useSelector } from 'react-redux';
 
-import {
-  osrdEditoastApi,
-  type InfraWithState,
-  type PathfindingResult,
-} from 'common/api/osrdEditoastApi';
+import { osrdEditoastApi, type InfraWithState } from 'common/api/osrdEditoastApi';
 import { useOsrdConfSelectors } from 'common/osrdContext';
 import usePathProperties from 'modules/pathfinding/hooks/usePathProperties';
 import { getPathfindingQuery } from 'modules/pathfinding/utils';
@@ -24,17 +20,12 @@ function pathStepsToLocations(
   return compact(pathSteps.map((s) => s.location));
 }
 
-const useStaticPathfinding = (infra?: InfraWithState) => {
+const useStdcmPathfinding = (infra?: InfraWithState) => {
   const { getStdcmPathSteps } = useOsrdConfSelectors() as StdcmConfSelectors;
   const pathSteps = useSelector(getStdcmPathSteps);
   const [pathStepsLocations, setPathStepsLocations] = useState(pathStepsToLocations(pathSteps));
   const { rollingStock } = useStoreDataForRollingStockSelector();
 
-  const [pathfinding, setPathfinding] = useState<PathfindingResult>();
-
-  const [postPathfindingBlocks] =
-    osrdEditoastApi.endpoints.postInfraByInfraIdPathfindingBlocks.useLazyQuery();
-
   // When pathSteps changed
   // => update the pathStepsLocations (if needed by doing a deep comparison).
   useEffect(() => {
@@ -45,46 +36,40 @@ const useStaticPathfinding = (infra?: InfraWithState) => {
     });
   }, [pathSteps]);
 
+  const pathfindingPayload = useMemo(() => {
+    if (infra?.state !== 'CACHED' || pathStepsLocations.length < 2) {
+      return null;
+    }
+    return getPathfindingQuery({
+      infraId: infra.id,
+      rollingStock,
+      pathSteps: pathStepsLocations,
+    });
+  }, [pathStepsLocations, rollingStock, infra]);
+
+  const { data: pathfinding, isFetching } =
+    osrdEditoastApi.endpoints.postInfraByInfraIdPathfindingBlocks.useQuery(pathfindingPayload!, {
+      skip: !pathfindingPayload,
+    });
+
   const pathProperties = usePathProperties(
     infra?.id,
     pathfinding?.status === 'success' ? pathfinding : undefined,
     ['geometry']
   );
 
-  useEffect(() => {
-    const launchPathfinding = async () => {
-      setPathfinding(undefined);
-      if (infra?.state !== 'CACHED' || !rollingStock || pathStepsLocations.length < 2) {
-        return;
-      }
-
-      const payload = getPathfindingQuery({
-        infraId: infra.id,
-        rollingStock,
-        pathSteps: pathStepsLocations,
-      });
-
-      if (payload === null) {
-        return;
-      }
-
-      const pathfindingResult = await postPathfindingBlocks(payload).unwrap();
-
-      setPathfinding(pathfindingResult);
-    };
-
-    launchPathfinding();
-  }, [pathStepsLocations, rollingStock, infra]);
-
-  const result = useMemo(
+  const pathfindingResult = useMemo(
     () =>
       pathfinding
-        ? { status: pathfinding.status, geometry: pathProperties?.geometry ?? undefined }
+        ? {
+            status: pathfinding.status,
+            geometry: pathProperties?.geometry ?? undefined,
+          }
         : null,
     [pathfinding, pathProperties]
   );
 
-  return result;
+  return { isPathfindingLoading: isFetching, pathfinding: pathfindingResult };
 };
 
-export default useStaticPathfinding;
+export default useStdcmPathfinding;

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

@@ -80,7 +80,6 @@ const Map = ({
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
   const { viewport, mapSearchMarker, mapStyle, showOSM, layersSettings } = useSelector(getMap);
   const mapRef = useRef<MapRef | null>(null);
-  const mapContainer = useMemo(() => mapRef.current?.getContainer(), [mapRef.current]);
 
   const pathGeometry = useMemo(
     () => geometry || pathProperties?.geometry,
@@ -210,14 +209,10 @@ const Map = ({
       type: 'LineString',
     };
     if (points.coordinates.length > 2) {
-      const newViewport = computeBBoxViewport(bbox(points), viewport, {
-        width: mapContainer?.clientWidth,
-        height: mapContainer?.clientHeight,
-        padding: 60,
-      });
+      const newViewport = computeBBoxViewport(bbox(points), viewport);
       dispatch(updateViewport(newViewport));
     }
-  }, [pathGeometry, simulationPathSteps, mapContainer]);
+  }, [pathGeometry, simulationPathSteps]);
 
   return (
     <>

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

@@ -11,6 +11,7 @@ import { useParams } from 'react-router-dom';
 import captureMap from 'applications/operationalStudies/helpers/captureMap';
 import type { ManageTrainSchedulePathProperties } from 'applications/operationalStudies/types';
 import type { PathProperties } from 'common/api/osrdEditoastApi';
+import { LoaderFill } from 'common/Loaders';
 import MapButtons from 'common/Map/Buttons/MapButtons';
 import { CUSTOM_ATTRIBUTION } from 'common/Map/const';
 import colors from 'common/Map/Consts/colors';
@@ -53,6 +54,7 @@ type MapProps = {
   setMapCanvas?: (mapCanvas: string) => void;
   hideAttribution?: boolean;
   hideItinerary?: boolean;
+  isPathfindingLoading?: boolean;
   preventPointSelection?: boolean;
   id: string;
   simulationPathSteps: MarkerInformation[];
@@ -73,6 +75,7 @@ const NewMap = ({
   setMapCanvas,
   hideAttribution = false,
   hideItinerary = false,
+  isPathfindingLoading = false,
   preventPointSelection = false,
   id,
   simulationPathSteps,
@@ -99,6 +102,14 @@ const NewMap = ({
     [pathProperties, geometry]
   );
 
+  const mapRef = useRef<MapRef | null>(null);
+  const mapContainer = useMemo(() => mapRef.current?.getContainer(), [mapRef.current]);
+
+  const mapViewport = useMemo(
+    () => (pathGeometry ? computeBBoxViewport(bbox(pathGeometry), viewport) : viewport),
+    [pathGeometry, viewport]
+  );
+
   const [mapIsLoaded, setMapIsLoaded] = useState(false);
 
   const [snappedPoint, setSnappedPoint] = useState<Feature<Point> | undefined>();
@@ -116,8 +127,6 @@ const NewMap = ({
     []
   );
 
-  const mapRef = useRef<MapRef | null>(null);
-
   const scaleControlStyle = {
     left: 20,
     bottom: 20,
@@ -228,14 +237,19 @@ const NewMap = ({
       coordinates: compact(simulationPathSteps.map((step) => step.coordinates)),
       type: 'LineString',
     };
-    if (points.coordinates.length > 2) {
-      const newViewport = computeBBoxViewport(bbox(points), viewport);
+    if (points.coordinates.length > 2 && !isPathfindingLoading) {
+      const newViewport = computeBBoxViewport(bbox(points), mapViewport, {
+        width: mapContainer?.clientWidth,
+        height: mapContainer?.clientHeight,
+        padding: 60,
+      });
       updateViewportChange(newViewport);
     }
-  }, [pathGeometry, simulationPathSteps]);
+  }, [pathGeometry, simulationPathSteps, mapContainer, isPathfindingLoading]);
 
   return (
     <>
+      {isPathfindingLoading && <LoaderFill />}
       <MapButtons
         zoomIn={zoomIn}
         zoomOut={zoomOut}