s

OpenRailAssociation · Feb 11, 2025 · f01cdb4 · f01cdb4
1 parent 95549e8
commit f01cdb4
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 29 deletions.
diff --git a/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts b/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts
@@ -1,12 +1,12 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, useTransition } from 'react';
 
 import type { ProjectPathTrainResult, Waypoint } from '@osrd-project/ui-manchette/dist/types';
 import type {
   SpaceScale,
   SpaceTimeChartProps,
 } from '@osrd-project/ui-spacetimechart/dist/lib/types';
 
-import usePaths from './usePaths';
+import computePaths from './usePaths';
 import { MAX_ZOOM_Y, MIN_ZOOM_Y, ZOOM_Y_DELTA, DEFAULT_ZOOM_MS_PER_PX } from '../consts';
 import {
   computeWaypointsToDisplay,
@@ -39,6 +39,7 @@ const useManchettesWithSpaceTimeChart = (
   height = 561,
   spaceTimeChartRef?: React.RefObject<HTMLDivElement>
 ) => {
+  const [loading, startTransition] = useTransition();
   const [isShiftPressed, setIsShiftPressed] = useState(false);
   const [state, setState] = useState<State>({
     xZoom: timeScaleToZoomValue(DEFAULT_ZOOM_MS_PER_PX),
@@ -54,7 +55,13 @@ const useManchettesWithSpaceTimeChart = (
 
   const { xZoom, yZoom, xOffset, yOffset, scrollTo, panning, isProportional } = state;
 
-  const paths = usePaths(projectPathTrainResult, selectedTrain);
+  const [paths, setPaths] = useState(() => computePaths(projectPathTrainResult, selectedTrain));
+  useEffect(() => {
+    console.log('transition');
+    startTransition(() => {
+      setPaths(computePaths(projectPathTrainResult, selectedTrain));
+    });
+  }, [projectPathTrainResult, selectedTrain]);
 
   const waypointsToDisplay = useMemo(
     () => computeWaypointsToDisplay(waypoints, { height, isProportional, yZoom }),

diff --git a/ui-manchette-with-spacetimechart/src/hooks/usePaths.ts b/ui-manchette-with-spacetimechart/src/hooks/usePaths.ts
@@ -1,5 +1,4 @@
 /* eslint-disable import/no-unresolved */
-import { useMemo } from 'react';
 
 import { type ProjectPathTrainResult } from '@osrd-project/ui-manchette/dist/types';
 import { type PathLevel } from '@osrd-project/ui-spacetimechart';
@@ -12,25 +11,21 @@ const transformCurve = (curve: ProjectPathTrainResult['spaceTimeCurves'][0], dep
     position,
   }));
 
-const usePaths = (projectPathTrainResult: ProjectPathTrainResult[], selectedTrain?: number) =>
-  useMemo(
-    () =>
-      projectPathTrainResult.flatMap((path) =>
-        path.spaceTimeCurves.map<{
-          id: string;
-          label: string;
-          color: string;
-          level: PathLevel;
-          points: { time: number; position: number }[];
-        }>((spaceTimeCurve, ind) => ({
-          id: `${path.id}-${ind}`,
-          label: path.name,
-          color: PATH_COLOR_DEFAULT,
-          level: selectedTrain && selectedTrain === path.id ? 1 : 2,
-          points: transformCurve(spaceTimeCurve, path.departureTime),
-        }))
-      ),
-    [projectPathTrainResult, selectedTrain]
+const computePaths = (projectPathTrainResult: ProjectPathTrainResult[], selectedTrain?: number) =>
+  projectPathTrainResult.flatMap((path) =>
+    path.spaceTimeCurves.map<{
+      id: string;
+      label: string;
+      color: string;
+      level: PathLevel;
+      points: { time: number; position: number }[];
+    }>((spaceTimeCurve, ind) => ({
+      id: `${path.id}-${ind}`,
+      label: path.name,
+      color: PATH_COLOR_DEFAULT,
+      level: selectedTrain && selectedTrain === path.id ? 1 : 2,
+      points: transformCurve(spaceTimeCurve, path.departureTime),
+    }))
   );
 
-export default usePaths;
+export default computePaths;
diff --git a/ui-manchette/src/components/Manchette.tsx b/ui-manchette/src/components/Manchette.tsx
@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { memo, useLayoutEffect, useRef, useState } from 'react';
 
 import { ZoomIn, ZoomOut } from '@osrd-project/ui-icons';
 import cx from 'classnames';
@@ -50,6 +50,7 @@ const Manchette = ({
 
   return (
     <div className="manchette-container">
+      MANCHETTE
       {waypointMenuData?.menu && waypointMenuData.activeWaypointId && (
         <div className="menu-wrapper" style={{ top: menuPosition }}>
           {waypointMenuData.menu}
@@ -105,4 +106,4 @@ const Manchette = ({
   );
 };
 
-export default Manchette;
+export default memo(Manchette);
diff --git a/ui-spacetimechart/src/components/SpaceTimeChart.tsx b/ui-spacetimechart/src/components/SpaceTimeChart.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, memo } from 'react';
 
 import cx from 'classnames';
 
@@ -29,7 +29,7 @@ import {
 } from '../utils/scales';
 import { snapPosition } from '../utils/snapping';
 
-export const SpaceTimeChart = (props: SpaceTimeChartProps) => {
+export const SpaceTimeChart = memo((props: SpaceTimeChartProps) => {
   const {
     operationalPoints,
     spaceOrigin,
@@ -198,6 +198,7 @@ export const SpaceTimeChart = (props: SpaceTimeChartProps) => {
       className={cx('relative space-time-chart', attr.className)}
       style={{ background: fullTheme.background }}
     >
+      SPACE_TIME
       <div ref={setCanvasesRoot} className="absolute inset-0" />
       <SpaceTimeChartContext.Provider value={contextState}>
         <CanvasContext.Provider value={canvasContext}>
@@ -215,4 +216,4 @@ export const SpaceTimeChart = (props: SpaceTimeChartProps) => {
       </SpaceTimeChartContext.Provider>
     </div>
   );
-};
+});
diff --git a/ui-speedspacechart/src/components/SpeedSpaceChart.tsx b/ui-speedspacechart/src/components/SpeedSpaceChart.tsx
@@ -142,6 +142,7 @@ const SpeedSpaceChart = ({
       }}
       tabIndex={0}
     >
+      SPEED_SPACE
       <div
         className="flex justify-end absolute base-margin-top"
         style={{ width: adjustedWidthRightAxis }}