front: restore miniGET sync by storing scale domain

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

@@ -20,13 +20,13 @@ import TimeButtons from 'modules/simulationResult/components/TimeButtons';
 // TIMELINE DISABLED // import TimeLine from 'modules/simulationResult/components/TimeLine/TimeLine';
 import TrainDetails from 'modules/simulationResult/components/TrainDetails';
 import DriverTrainSchedule from 'modules/trainschedule/components/DriverTrainSchedule/DriverTrainSchedule';
-import getScaleDomainFromValues from 'modules/simulationResult/components/ChartHelpers/getScaleDomainFromValues';
 import SpaceCurvesSlopes from 'modules/simulationResult/components/SpaceCurvesSlopes';
 import SpaceTimeChart from 'modules/simulationResult/components/SpaceTimeChart/SpaceTimeChart';
 import SpeedSpaceChart from 'modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChart';
-import type { PositionScaleDomain } from 'modules/simulationResult/consts';
+import type { PositionScaleDomain, TimeScaleDomain } from 'modules/simulationResult/types';
 import { Train } from 'reducers/osrdsimulation/types';
 import { useStoreDataForSpaceTimeChart } from 'modules/simulationResult/components/SpaceTimeChart/useStoreDataForSpaceTimeChart';
+import getScaleDomainFromValues from 'modules/simulationResult/components/ChartHelpers/getScaleDomainFromValues';
 
 const MAP_MIN_HEIGHT = 450;
 
@@ -58,6 +58,11 @@ export default function SimulationResults({
   const [initialHeightOfSpaceCurvesSlopesChart, setInitialHeightOfSpaceCurvesSlopesChart] =
     useState(heightOfSpaceCurvesSlopesChart);
 
+  const [timeScaleDomain, setTimeScaleDomain] = useState<TimeScaleDomain>({
+    range: undefined,
+    source: undefined,
+  });
+
   // X scale domain shared between SpeedSpace and SpaceCurvesSlopes charts.
   const [positionScaleDomain, setPositionScaleDomain] = useState<PositionScaleDomain>({
     initial: [],
@@ -151,13 +156,15 @@ export default function SimulationResults({
       </div>
 
       {/* SIMULATION: TIMELINE — TEMPORARILY DISABLED
-      {simulation.trains.length && chart && (
+      {simulation.trains.length && (
         <TimeLine
-          chart={chart}
+          timeScaleDomain={timeScaleDomain}
           selectedTrainId={selectedTrain?.id || simulation.trains[0].id}
           trains={simulation.trains as SimulationReport[]}
+          onTimeScaleDomainChange={setTimeScaleDomain}
         />
-      )} */}
+      )}
+      */}
 
       {/* SIMULATION : SPACE TIME CHART */}
       <div className="simulation-warped-map d-flex flex-row align-items-stretch mb-2 bg-white">
@@ -185,6 +192,8 @@ export default function SimulationResults({
                 dispatchUpdateSelectedTrainId={dispatchUpdateSelectedTrainId}
                 dispatchPersistentUpdateSimulation={dispatchPersistentUpdateSimulation}
                 setTrainResultsToFetch={setTrainResultsToFetch}
+                timeScaleDomain={timeScaleDomain}
+                setTimeScaleDomain={setTimeScaleDomain}
               />
             )}
           </div>

front/src/modules/simulationResult/components/ChartHelpers/ChartHelpers.ts

@@ -17,15 +17,7 @@ import {
   SimulationD3Scale,
   PositionsSpeedTimes,
 } from 'reducers/osrdsimulation/types';
-import {
-  ChartAxes,
-  GRADIENT,
-  ListValues,
-  TIME,
-  XAxis,
-  Y2Axis,
-  YAxis,
-} from 'modules/simulationResult/consts';
+import { ChartAxes, ListValues, XAxis, Y2Axis, YAxis } from 'modules/simulationResult/consts';
 
 export function sec2d3datetime(time: number) {
   return d3.timeParse('%H:%M:%S')(sec2time(time));
@@ -383,9 +375,9 @@ const specificInterpolateOnTime =
     return positionInterpolated;
   };
 
-export const isSpaceTimeChart = (keyValues: ChartAxes) => keyValues[0] === TIME;
+export const isSpaceTimeChart = (keyValues: ChartAxes) => keyValues[0] === 'time';
 
-export const isSpaceSlopesCurves = (keyValues: ChartAxes) => keyValues[1] === GRADIENT;
+export const isSpaceSlopesCurves = (keyValues: ChartAxes) => keyValues[1] === 'gradient';
 
 export function trainWithDepartureAndArrivalTimes(train: Train, dragOffset = 0) {
   const firstStop = train.base.stops[0];

front/src/modules/simulationResult/components/ChartHelpers/enableInteractivity.tsx

@@ -12,12 +12,8 @@ import {
   getAxis,
   isSpaceTimeChart,
 } from 'modules/simulationResult/components/ChartHelpers/ChartHelpers';
-import {
-  CHART_AXES,
-  LIST_VALUES,
-  type ChartAxes,
-  type PositionScaleDomain,
-} from 'modules/simulationResult/consts';
+import { CHART_AXES, LIST_VALUES, type ChartAxes } from 'modules/simulationResult/consts';
+import type { PositionScaleDomain } from 'modules/simulationResult/types';
 import drawGuideLines from 'modules/simulationResult/components/ChartHelpers/drawGuideLines';
 import type { SpaceCurvesSlopesData } from 'modules/simulationResult/components/SpaceCurvesSlopes';
 import type {

front/src/modules/simulationResult/components/SpaceCurvesSlopes.tsx

@@ -3,7 +3,8 @@ import { useSelector } from 'react-redux';
 import * as d3 from 'd3';
 import { CgLoadbar } from 'react-icons/cg';
 
-import { CHART_AXES, type PositionScaleDomain } from 'modules/simulationResult/consts';
+import { CHART_AXES } from 'modules/simulationResult/consts';
+import type { PositionScaleDomain } from 'modules/simulationResult/types';
 import {
   defineLinear,
   interpolateOnPosition,

front/src/modules/simulationResult/components/SpaceTimeChart/SpaceTimeChart.tsx

@@ -1,10 +1,11 @@
 import { noop } from 'lodash';
-import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { CgLoadbar } from 'react-icons/cg';
 import { GiResize } from 'react-icons/gi';
 import { Rnd } from 'react-rnd';
 
 import { CHART_AXES } from 'modules/simulationResult/consts';
+import type { TimeScaleDomain } from 'modules/simulationResult/types';
 import {
   enableInteractivity,
   traceVerticalLine,
@@ -51,11 +52,13 @@ export type SpaceTimeChartProps = {
   selectedProjection?: OsrdSimulationState['selectedProjection'];
   simulation?: SimulationSnapshot;
   simulationIsPlaying?: boolean;
+  timeScaleDomain?: TimeScaleDomain;
   isDisplayed?: boolean;
   onSetBaseHeight?: (newHeight: number) => void;
   dispatchUpdateSelectedTrainId: DispatchUpdateSelectedTrainId;
   dispatchPersistentUpdateSimulation: DispatchPersistentUpdateSimulation;
   setTrainResultsToFetch?: (trainSchedulesIDs?: number[]) => void;
+  setTimeScaleDomain?: (newTimeScaleDomain: TimeScaleDomain) => void;
 };
 
 export default function SpaceTimeChart(props: SpaceTimeChartProps) {
@@ -69,11 +72,13 @@ export default function SpaceTimeChart(props: SpaceTimeChartProps) {
     selectedProjection,
     simulation,
     simulationIsPlaying = false,
+    timeScaleDomain,
     isDisplayed = true,
     onSetBaseHeight = noop,
     dispatchUpdateSelectedTrainId,
     dispatchPersistentUpdateSimulation,
     setTrainResultsToFetch = noop,
+    setTimeScaleDomain,
   } = props;
 
   const [baseHeight, setBaseHeight] = useState(initialHeight);
@@ -88,15 +93,14 @@ export default function SpaceTimeChart(props: SpaceTimeChartProps) {
     SimulationSnapshot['trains'] | undefined
   >(undefined);
 
-  const timeScaleRange: [Date, Date] = useMemo(() => {
-    if (chart) return (rotate ? chart.y.domain() : chart.x.domain()) as [Date, Date];
-    return [new Date(), new Date()];
-  }, [chart]);
-
   /* coordinate the vertical cursors with other graphs (GEV for instance) */
   const { timePosition, updateTimePosition } = useChartSynchronizer(
     (newTimePosition, positionValues) => {
-      if (dateIsInRange(newTimePosition, timeScaleRange)) {
+      if (
+        timeScaleDomain &&
+        timeScaleDomain.range &&
+        dateIsInRange(newTimePosition, timeScaleDomain.range)
+      ) {
         traceVerticalLine(chart, CHART_AXES.SPACE_TIME, positionValues, newTimePosition, rotate);
       }
     },
@@ -182,7 +186,8 @@ export default function SpaceTimeChart(props: SpaceTimeChartProps) {
       const trainsToDraw = trainSimulations.map((train) =>
         createTrain(CHART_AXES.SPACE_TIME, train as Train)
       );
-      drawAllTrains(
+
+      const newDrawnedChart = drawAllTrains(
         allowancesSettings,
         chart,
         CHART_ID,
@@ -193,11 +198,11 @@ export default function SpaceTimeChart(props: SpaceTimeChartProps) {
         rotate,
         selectedProjection,
         selectedTrain as Train,
-        setChart,
         setDragOffset,
         trainSimulations as Train[],
         trainsToDraw
       );
+      setChart(newDrawnedChart);
       setResetChart(false);
     }
   };
@@ -211,9 +216,29 @@ export default function SpaceTimeChart(props: SpaceTimeChartProps) {
     redrawChart();
   }, [resetChart, rotate, selectedTrain, trainSimulations, height]);
 
+  /* redraw the trains if the time scale range has changed from Timeline */
+  useEffect(() => {
+    if (chart && timeScaleDomain && timeScaleDomain.source !== 'SpaceTimeChart') {
+      const currentTimeRange = timeScaleDomain.range;
+      if (currentTimeRange) {
+        chart.x.domain(currentTimeRange);
+        redrawChart();
+      }
+    }
+  }, [timeScaleDomain]);
+
   /* add behaviour on zoom and mousemove/mouseover/wheel on the new chart each time the chart changes */
   useEffect(() => {
-    if (trainSimulations && selectedTrain) {
+    if (chart && selectedTrain) {
+      const newTimeScaleRange = (rotate ? chart.y.domain() : chart.x.domain()) as [Date, Date];
+
+      if (setTimeScaleDomain) {
+        setTimeScaleDomain({
+          range: newTimeScaleRange,
+          source: 'SpaceTimeChart',
+        });
+      }
+
       const dataSimulation = createTrain(CHART_AXES.SPACE_TIME, selectedTrain as Train);
       enableInteractivity(
         chart,
@@ -223,7 +248,7 @@ export default function SpaceTimeChart(props: SpaceTimeChartProps) {
         setChart,
         simulationIsPlaying,
         updateTimePosition,
-        timeScaleRange
+        newTimeScaleRange
       );
     }
   }, [chart]);

front/src/modules/simulationResult/components/SpaceTimeChart/d3Helpers.ts

@@ -59,7 +59,6 @@ const drawAllTrains = (
   rotate: boolean,
   selectedProjection: OsrdSimulationState['selectedProjection'],
   selectedTrain: Train,
-  setChart: React.Dispatch<React.SetStateAction<Chart | undefined>>,
   setDragOffset: React.Dispatch<React.SetStateAction<number>>,
   simulationTrains: Train[],
   trainsToDraw: SimulationTrain[]
@@ -96,7 +95,7 @@ const drawAllTrains = (
       train
     );
   });
-  setChart(chartLocal);
+  return chartLocal;
 };
 
 export { drawOPs, drawAllTrains };

front/src/modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChart.tsx

@@ -5,11 +5,8 @@ import { GiResize } from 'react-icons/gi';
 import { Rnd } from 'react-rnd';
 
 import { LightRollingStock, SimulationReport } from 'common/api/osrdEditoastApi';
-import {
-  CHART_AXES,
-  type PositionScaleDomain,
-  type ChartAxes,
-} from 'modules/simulationResult/consts';
+import { CHART_AXES, type ChartAxes } from 'modules/simulationResult/consts';
+import type { PositionScaleDomain } from 'modules/simulationResult/types';
 import {
   enableInteractivity,
   traceVerticalLine,

front/src/modules/simulationResult/components/SpeedSpaceChart/d3Helpers.ts

@@ -6,7 +6,7 @@ import {
   createPowerRestrictionSegment,
   DRAWING_KEYS,
 } from 'applications/operationalStudies/consts';
-import { POSITION, SPEED, HEIGHT, CHART_AXES } from 'modules/simulationResult/consts';
+import { CHART_AXES } from 'modules/simulationResult/consts';
 import drawArea from 'modules/simulationResult/components/ChartHelpers/drawArea';
 import drawCurve from 'modules/simulationResult/components/ChartHelpers/drawCurve';
 import defineChart from 'modules/simulationResult/components/ChartHelpers/defineChart';
@@ -39,19 +39,19 @@ function createChart(
   let scaleY2: d3.ScaleLinear<number, number, never> = defineLinear(0, 0, 0);
 
   if (chart === undefined || resetChart) {
-    const maxX = d3.max(trainSimulation.speed, (speedObject) => speedObject[POSITION]) as number;
+    const maxX = d3.max(trainSimulation.speed, (speedObject) => speedObject.position) as number;
     scaleX = defineLinear(maxX + 100);
 
-    const maxY = d3.max(trainSimulation.speed, (speedObject) => speedObject[SPEED]) as number;
+    const maxY = d3.max(trainSimulation.speed, (speedObject) => speedObject.speed) as number;
     scaleY = defineLinear(maxY);
 
     const minY2 = d3.min(
       trainSimulation.slopesCurve,
-      (speedObject) => speedObject[HEIGHT]
+      (speedObject) => speedObject.height
     ) as number;
     const maxY2 = d3.max(
       trainSimulation.slopesCurve,
-      (speedObject) => speedObject[HEIGHT]
+      (speedObject) => speedObject.height
     ) as number;
     scaleY2 = chart === undefined ? defineLinear(maxY2, 0, minY2) : chart.y2;
   } else {