front: synchronize speed space and space curves slopes charts

Author: SarahBellaha

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

@@ -22,13 +22,15 @@ import SimulationWarpedMap from 'common/Map/WarpedMap/SimulationWarpedMap';
 import { osrdEditoastApi, SimulationReport } from 'common/api/osrdEditoastApi';
 
 import SimulationResultsMap from 'modules/simulationResult/components/SimulationResultsMap';
-import SpaceCurvesSlopes from 'modules/simulationResult/components/SpaceCurvesSlopes';
-import SpaceTimeChartIsolated from 'modules/simulationResult/components/SpaceTimeChart/withOSRDData';
-import SpeedSpaceChart from 'modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChart';
 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 SpeedSpaceChart from 'modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChart';
+import SpaceTimeChartIsolated from 'modules/simulationResult/components/SpaceTimeChart/withOSRDData';
+import { PositionScaleDomain } from 'modules/simulationResult/components/simulationResultsConsts';
 
 const MAP_MIN_HEIGHT = 450;
 
@@ -62,6 +64,13 @@ export default function SimulationResults({
   const [initialHeightOfSpaceCurvesSlopesChart, setInitialHeightOfSpaceCurvesSlopesChart] =
     useState(heightOfSpaceCurvesSlopesChart);
 
+  // X scale domain shared between SpeedSpace and SpaceCurvesSlopes charts.
+  const [positionScaleDomain, setPositionScaleDomain] = useState<PositionScaleDomain>({
+    initial: [],
+    current: [],
+    source: undefined,
+  });
+
   const { data: selectedTrainSchedule } = osrdEditoastApi.endpoints.getTrainScheduleById.useQuery(
     {
       id: selectedTrain?.id as number,
@@ -106,6 +115,17 @@ export default function SimulationResults({
     }
   }, [extViewport]);
 
+  useEffect(() => {
+    if (selectedTrain) {
+      const positions = selectedTrain.base.speeds.map((speed) => speed.position);
+      const newPositionsScaleDomain = getScaleDomainFromValues(positions);
+      setPositionScaleDomain({
+        initial: newPositionsScaleDomain,
+        current: newPositionsScaleDomain,
+      });
+    }
+  }, [selectedTrain]);
+
   return simulation.trains.length === 0 && !isUpdating ? (
     <h1 className="text-center mt-5">{t('noData')}</h1>
   ) : (
@@ -176,6 +196,8 @@ export default function SimulationResults({
               selectedTrain={selectedTrain}
               timePosition={timePosition}
               trainRollingStock={selectedTrainRollingStock}
+              sharedXScaleDomain={positionScaleDomain}
+              setSharedXScaleDomain={setPositionScaleDomain}
             />
           </div>
         </div>
@@ -210,6 +232,8 @@ export default function SimulationResults({
                 selectedTrain={selectedTrain}
                 timePosition={timePosition}
                 positionValues={positionValues}
+                sharedXScaleDomain={positionScaleDomain}
+                setSharedXScaleDomain={setPositionScaleDomain}
               />
             </Rnd>
           )}

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

@@ -12,8 +12,10 @@ import {
   isSpaceTimeChart,
 } from 'modules/simulationResult/components/ChartHelpers/ChartHelpers';
 import {
+  CHART_AXES,
   ChartAxes,
   LIST_VALUES,
+  PositionScaleDomain,
 } from 'modules/simulationResult/components/simulationResultsConsts';
 import drawGuideLines from 'modules/simulationResult/components/ChartHelpers/drawGuideLines';
 import { dateIsInRange } from 'utils/date';
@@ -257,6 +259,7 @@ export const enableInteractivity = <
   simulationIsPlaying: boolean,
   dispatchUpdateTimePositionValues: (newTimePositionValues: Date) => void,
   chartDimensions: [Date, Date],
+  setSharedXScaleDomain?: React.Dispatch<React.SetStateAction<PositionScaleDomain>>,
   additionalValues: ChartAxes[] = [] // more values to display on the same chart
 ) => {
   if (!chart) return;
@@ -271,6 +274,12 @@ export const enableInteractivity = <
       event.sourceEvent.preventDefault();
       const zoomFunctions = updateChart(chart, keyValues, additionalValues, rotate, event);
       const newChart = { ...chart, x: zoomFunctions.newX, y: zoomFunctions.newY };
+      if (setSharedXScaleDomain)
+        setSharedXScaleDomain((prevState) => ({
+          ...prevState,
+          current: newChart.x.domain() as number[],
+          source: keyValues === CHART_AXES.SPACE_SPEED ? 'SpeedSpaceChart' : 'SpaceCurvesSlopes',
+        }));
       setChart(newChart);
     })
     .filter(

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

@@ -0,0 +1,10 @@
+import * as d3 from 'd3';
+import { defineLinear } from './ChartHelpers';
+
+const getScaleDomainFromValues = (values: number[]) => {
+  const maxX = d3.max(values) as number;
+  const scaleX = defineLinear(maxX + 100);
+  return scaleX.domain();
+};
+
+export default getScaleDomainFromValues;

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

@@ -3,7 +3,10 @@ import { useDispatch, useSelector } from 'react-redux';
 import * as d3 from 'd3';
 import { CgLoadbar } from 'react-icons/cg';
 
-import { CHART_AXES } from 'modules/simulationResult/components/simulationResultsConsts';
+import {
+  CHART_AXES,
+  PositionScaleDomain,
+} from 'modules/simulationResult/components/simulationResultsConsts';
 import {
   defineLinear,
   interpolateOnPosition,
@@ -93,19 +96,24 @@ type SpaceCurvesSlopesProps = {
   positionValues: PositionsSpeedTimes<Date>;
   selectedTrain: Train;
   timePosition: Date;
+  sharedXScaleDomain?: PositionScaleDomain;
+  setSharedXScaleDomain?: React.Dispatch<React.SetStateAction<PositionScaleDomain>>;
 };
 
 const SpaceCurvesSlopes = ({
   initialHeight,
   positionValues,
   selectedTrain,
   timePosition,
+  sharedXScaleDomain,
+  setSharedXScaleDomain,
 }: SpaceCurvesSlopesProps) => {
   const dispatch = useDispatch();
   const simulationIsPlaying = useSelector(getIsPlaying);
 
   const [chart, setChart] = useState<SpeedSpaceChart | undefined>(undefined);
   const [height, setHeight] = useState(initialHeight);
+  const [initialYScaleDomain, setInitialYScaleDomain] = useState<number[]>([]);
 
   const ref = useRef<HTMLDivElement>(null);
   const rotate = false;
@@ -165,6 +173,9 @@ const SpaceCurvesSlopes = ({
     const yMax = d3.max(trainData.slopesHistogram, (d) => d.gradient) || 0;
     const defineY = chart === undefined ? defineLinear(yMax, 0, yMin) : chart.y;
 
+    if (chart === undefined) {
+      setInitialYScaleDomain(defineY.domain());
+    }
     const width = parseInt(d3.select(`#container-${CHART_ID}`).style('width'), 10);
     return defineChart(
       width,
@@ -255,8 +266,10 @@ const SpaceCurvesSlopes = ({
       simulationIsPlaying,
       dispatchUpdateTimePositionValues,
       timeScaleRange,
+      setSharedXScaleDomain,
       [CHART_AXES.SPACE_GRADIENT, CHART_AXES.SPACE_RADIUS, CHART_AXES.SPACE_HEIGHT]
     );
+
     setChart(chartLocal);
   };
 
@@ -265,7 +278,21 @@ const SpaceCurvesSlopes = ({
     setHeight(newHeight);
   };
 
-  useEffect(() => drawTrain(), [trainData, height]);
+  useEffect(() => {
+    drawTrain();
+  }, [trainData, height]);
+
+  useEffect(() => {
+    if (chart && sharedXScaleDomain && sharedXScaleDomain.source !== CHART_ID) {
+      const newChart = { ...chart };
+      newChart.x.domain(sharedXScaleDomain.current);
+      if (sharedXScaleDomain.initial === sharedXScaleDomain.current) {
+        newChart.y.domain(initialYScaleDomain);
+      }
+      setChart(newChart);
+      drawTrain();
+    }
+  }, [sharedXScaleDomain]);
 
   useEffect(() => setHeight(initialHeight), [initialHeight]);
 

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

@@ -8,7 +8,11 @@ import {
   enableInteractivity,
   traceVerticalLine,
 } from 'modules/simulationResult/components/ChartHelpers/enableInteractivity';
-import { CHART_AXES, ChartAxes } from 'modules/simulationResult/components/simulationResultsConsts';
+import {
+  CHART_AXES,
+  ChartAxes,
+  PositionScaleDomain,
+} from 'modules/simulationResult/components/simulationResultsConsts';
 import {
   createChart,
   drawTrain,
@@ -46,6 +50,8 @@ export type SpeedSpaceChartProps = {
   selectedTrain: SimulationReport | Train;
   timePosition: Date;
   trainRollingStock?: LightRollingStock;
+  sharedXScaleDomain?: PositionScaleDomain;
+  setSharedXScaleDomain?: React.Dispatch<React.SetStateAction<PositionScaleDomain>>;
 };
 
 /**
@@ -64,6 +70,8 @@ export default function SpeedSpaceChart({
   timePosition,
   positionValues,
   trainRollingStock,
+  sharedXScaleDomain,
+  setSharedXScaleDomain,
 }: SpeedSpaceChartProps) {
   const simulationIsPlaying = useSelector(getIsPlaying);
   const speedSpaceSettings = useSelector(getSpeedSpaceSettings);
@@ -121,6 +129,7 @@ export default function SpeedSpaceChart({
       ref,
       chart
     ) as SpeedSpaceChart;
+
     setChart(localChart);
     drawTrain(trainSimulation, rotate, localSettings, localChart);
     setHasJustRotated(false);
@@ -156,6 +165,15 @@ export default function SpeedSpaceChart({
     createChartAndTrain();
   }, [rotate, localSettings, chartHeight]);
 
+  useEffect(() => {
+    if (chart && sharedXScaleDomain && sharedXScaleDomain.source !== CHART_ID) {
+      const newChart = { ...chart };
+      newChart.x.domain(sharedXScaleDomain.current);
+      setChart(newChart);
+      createChartAndTrain();
+    }
+  }, [sharedXScaleDomain]);
+
   /**
    * reset chart (only if resetChart is true)
    */
@@ -164,6 +182,12 @@ export default function SpeedSpaceChart({
       if (rotate) {
         // cancel rotation and redraw the train
         toggleRotation();
+      } else if (chart && setSharedXScaleDomain) {
+        setSharedXScaleDomain((prevState) => ({
+          ...prevState,
+          current: prevState.initial,
+          source: undefined,
+        }));
       } else {
         createChartAndTrain();
       }
@@ -200,6 +224,7 @@ export default function SpeedSpaceChart({
       simulationIsPlaying,
       dispatchUpdateTimePositionValues,
       timeScaleRange,
+      setSharedXScaleDomain,
       additionalAxes
     );
   }, [chart, additionalAxes]);

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

@@ -44,3 +44,9 @@ export type AllListValues = ArrayElement<ListValues>;
 export const SIGNAL_BASE_DEFAULT = 'BAL3';
 
 export const LIST_VALUES_SIGNAL_BASE = ['BAL3'];
+
+export type PositionScaleDomain = {
+  initial: number[];
+  current: number[];
+  source?: 'SpeedSpaceChart' | 'SpaceCurvesSlopes';
+};