front: fix incorrect input saving when switching simulations during a running calculation

When a different simulation is selected while a calculation is still running,
the new simulation’s inputs overwrite the inputs of the ongoing calculation.
This causes a mismatch between the inputs used for the calculation and the results.

To maintain a good UX, the following improvements have been made:
- prevent display pathfinding status message when change the current simulation
- prevent visual jump on current simulation change
- prevent animation after switching simulation and clearing a via input

Signed-off-by: nncluzu <ngamenichaka@yahoo.fr>

Author: kmer2016

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

@@ -5,11 +5,17 @@ import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import useStdcmForm from 'applications/stdcm/hooks/useStdcmForm';
 import { extractMarkersInfo } from 'applications/stdcm/utils';
 import DefaultBaseMap from 'common/Map/DefaultBaseMap';
 import { useOsrdConfSelectors } from 'common/osrdContext';
 import useInfraStatus from 'modules/pathfinding/hooks/useInfraStatus';
-import { resetMargins, restoreStdcmConfig, updateStdcmPathStep } from 'reducers/osrdconf/stdcmConf';
+import {
+  resetMargins,
+  restoreStdcmConfig,
+  updateStdcmPathStep,
+  addStdcmSimulation,
+} from 'reducers/osrdconf/stdcmConf';
 import {
   getStdcmDestination,
   getStdcmOrigin,
@@ -44,19 +50,23 @@ declare global {
 type StdcmConfigProps = {
   isDebugMode: boolean;
   isPending: boolean;
-  launchStdcmRequest: () => Promise<void>;
   retainedSimulationIndex?: number;
   showBtnToLaunchSimulation: boolean;
+  skipPathfindingStatusMessage: boolean;
+  launchStdcmRequest: () => Promise<void>;
   cancelStdcmRequest: () => void;
+  setSkipPathfindingStatusMessage: (value: boolean) => void;
 };
 
 const StdcmConfig = ({
   isDebugMode,
   isPending,
-  launchStdcmRequest,
   retainedSimulationIndex,
   showBtnToLaunchSimulation,
+  skipPathfindingStatusMessage,
+  setSkipPathfindingStatusMessage,
   cancelStdcmRequest,
+  launchStdcmRequest,
 }: StdcmConfigProps) => {
   const { t } = useTranslation('stdcm');
   const launchButtonRef = useRef<HTMLDivElement>(null);
@@ -81,13 +91,16 @@ const StdcmConfig = ({
 
   const [formErrors, setFormErrors] = useState<StdcmConfigErrors>();
 
+  const currentSimulationInputs = useStdcmForm();
+
   const disabled = isPending || retainedSimulationIndex !== undefined;
 
   const markersInfo = useMemo(() => extractMarkersInfo(pathSteps), [pathSteps]);
 
-  const startSimulation = () => {
+  const startSimulation = async () => {
     const formErrorsStatus = checkStdcmConfigErrors(pathSteps, t, pathfinding?.status);
     if (pathfinding?.status === 'success' && !formErrorsStatus) {
+      dispatch(addStdcmSimulation(currentSimulationInputs));
       launchStdcmRequest();
     } else {
       // The console error is only for debugging the user tests (temporary)
@@ -101,12 +114,15 @@ const StdcmConfig = ({
       updateStdcmPathStep({ id: origin.id, updates: { arrivalType: ArrivalTimeTypes.ASAP } })
     );
   };
+
   const removeDestinationArrivalTime = () => {
     dispatch(
       updateStdcmPathStep({ id: destination.id, updates: { arrivalType: ArrivalTimeTypes.ASAP } })
     );
   };
 
+  const onItineraryChange = () => setSkipPathfindingStatusMessage(false);
+
   const getStatusMessage = () => {
     if (isPathFindingLoading) {
       return t('pathfindingStatus.calculating');
@@ -141,14 +157,14 @@ const StdcmConfig = ({
   }, []);
 
   useEffect(() => {
-    if (isPathFindingLoading) {
+    if (!skipPathfindingStatusMessage && isPathFindingLoading) {
       setShowMessage(true);
     }
 
     if (pathfinding?.status === 'failure') {
       setShowMessage(false);
     }
-  }, [isPathFindingLoading, pathfinding?.status]);
+  }, [isPathFindingLoading, pathfinding?.status, skipPathfindingStatusMessage]);
 
   useLayoutEffect(() => {
     const handleAnimationEnd = () => {
@@ -185,9 +201,13 @@ const StdcmConfig = ({
             </div>
             <div className="stdcm__separator" />
             <div ref={formRef} className="stdcm-simulation-itinerary">
-              <StdcmOrigin disabled={disabled} />
-              <StdcmVias disabled={disabled} />
-              <StdcmDestination disabled={disabled} />
+              <StdcmOrigin disabled={disabled} onItineraryChange={onItineraryChange} />
+              <StdcmVias
+                disabled={disabled}
+                skipAnimation={skipPathfindingStatusMessage}
+                onItineraryChange={onItineraryChange}
+              />
+              <StdcmDestination disabled={disabled} onItineraryChange={onItineraryChange} />
               <StdcmLinkedTrainSearch
                 disabled={disabled}
                 linkedTrainType="posterior"

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

@@ -7,9 +7,9 @@ import { getStdcmDestination } from 'reducers/osrdconf/stdcmConf/selectors';
 import StdcmCard from './StdcmCard';
 import StdcmOperationalPoint from './StdcmOperationalPoint';
 import StdcmOpSchedule from './StdcmOpSchedule';
-import type { StdcmConfigCardProps } from '../../types';
+import type { StdcmItineraryProps } from '../../types';
 
-const StdcmDestination = ({ disabled = false }: StdcmConfigCardProps) => {
+const StdcmDestination = ({ disabled = false, onItineraryChange }: StdcmItineraryProps) => {
   const { t } = useTranslation('stdcm');
 
   const destination = useSelector(getStdcmDestination);
@@ -26,6 +26,7 @@ const StdcmDestination = ({ disabled = false }: StdcmConfigCardProps) => {
         location={destination.location}
         pathStepId={destination.id}
         disabled={disabled}
+        onItineraryChange={onItineraryChange}
       />
       <StdcmOpSchedule pathStep={destination} disabled={disabled} opId="destination-arrival" />
     </StdcmCard>

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

@@ -14,6 +14,7 @@ type StdcmOperationalPointProps = {
   location?: StdcmPathStep['location'];
   pathStepId: string;
   disabled?: boolean;
+  onItineraryChange: () => void;
 };
 
 type CIOption = StdcmPathStep['location'] & { label: string };
@@ -37,7 +38,12 @@ const extractChCodes = (searchResults: SearchResultItemOperationalPoint[], selec
       return acc;
     }, [] as CHOption[]);
 
-const StdcmOperationalPoint = ({ location, pathStepId, disabled }: StdcmOperationalPointProps) => {
+const StdcmOperationalPoint = ({
+  location,
+  pathStepId,
+  disabled,
+  onItineraryChange,
+}: StdcmOperationalPointProps) => {
   const { t } = useTranslation('stdcm');
   const dispatch = useAppDispatch();
 
@@ -106,6 +112,7 @@ const StdcmOperationalPoint = ({ location, pathStepId, disabled }: StdcmOperatio
 
   const handleCiSelect = async (selectedSuggestion?: CIOption) => {
     dispatch(updateStdcmPathStep({ id: pathStepId, updates: { location: selectedSuggestion } }));
+    onItineraryChange();
     if (selectedSuggestion) {
       const operationalPointParts = await searchOperationalPointsByTrigram(
         selectedSuggestion.trigram
@@ -131,6 +138,7 @@ const StdcmOperationalPoint = ({ location, pathStepId, disabled }: StdcmOperatio
           },
         })
       );
+      onItineraryChange();
     }
   };
 

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

@@ -7,9 +7,9 @@ import { getStdcmOrigin } from 'reducers/osrdconf/stdcmConf/selectors';
 import StdcmCard from './StdcmCard';
 import StdcmOperationalPoint from './StdcmOperationalPoint';
 import StdcmOpSchedule from './StdcmOpSchedule';
-import type { StdcmConfigCardProps } from '../../types';
+import type { StdcmItineraryProps } from '../../types';
 
-const StdcmOrigin = ({ disabled = false }: StdcmConfigCardProps) => {
+const StdcmOrigin = ({ disabled = false, onItineraryChange }: StdcmItineraryProps) => {
   const { t } = useTranslation('stdcm');
 
   const origin = useSelector(getStdcmOrigin);
@@ -26,6 +26,7 @@ const StdcmOrigin = ({ disabled = false }: StdcmConfigCardProps) => {
         location={origin.location}
         pathStepId={origin.id}
         disabled={disabled}
+        onItineraryChange={onItineraryChange}
       />
       <StdcmOpSchedule pathStep={origin} disabled={disabled} opId="origin-arrival" isOrigin />
     </StdcmCard>

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

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useMemo, useState } from 'react';
 
 import { Location } from '@osrd-project/ui-icons';
+import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
@@ -16,9 +17,13 @@ import StdcmOperationalPoint from './StdcmOperationalPoint';
 import StdcmStopType from './StdcmStopType';
 import StopDurationInput from './StopDurationInput';
 import { StdcmStopTypes } from '../../types';
-import type { StdcmConfigCardProps } from '../../types';
+import type { StdcmItineraryProps } from '../../types';
 
-const StdcmVias = ({ disabled = false }: StdcmConfigCardProps) => {
+type StdcmViasProps = StdcmItineraryProps & {
+  skipAnimation: boolean;
+};
+
+const StdcmVias = ({ disabled = false, skipAnimation, onItineraryChange }: StdcmViasProps) => {
   const { t } = useTranslation('stdcm');
   const dispatch = useAppDispatch();
   const pathSteps = useSelector(getStdcmPathSteps);
@@ -89,11 +94,13 @@ const StdcmVias = ({ disabled = false }: StdcmConfigCardProps) => {
 
   const deleteViaOnClick = (pathStepId: string) => {
     dispatch(deleteStdcmVia(pathStepId));
+    onItineraryChange();
   };
 
   const addViaOnClick = (pathStepIndex: number) => {
     dispatch(addStdcmVia(pathStepIndex));
     setNewIntermediateOpIndex(pathStepIndex);
+    onItineraryChange();
   };
 
   return (
@@ -102,7 +109,12 @@ const StdcmVias = ({ disabled = false }: StdcmConfigCardProps) => {
         if (!pathStep.isVia) return null;
         const pathStepIndex = index + 1;
         return (
-          <div className="stdcm-vias-bundle" key={pathStep.id}>
+          <div
+            className={cx('stdcm-vias-bundle', {
+              animated: pathStepIndex === newIntermediateOpIndex && !skipAnimation,
+            })}
+            key={pathStep.id}
+          >
             <StdcmDefaultCard
               hasTip
               text={t('trainPath.addVia')}
@@ -135,6 +147,7 @@ const StdcmVias = ({ disabled = false }: StdcmConfigCardProps) => {
                 location={pathStep.location}
                 pathStepId={pathStep.id}
                 disabled={disabled}
+                onItineraryChange={onItineraryChange}
               />
               <StdcmStopType
                 stopTypes={pathStep.stopType}