space-time, manchette performance

rollup-base.config.js

@@ -1,5 +1,5 @@
-import process from 'process';
 import path from 'path';
+import process from 'process';
 
 import eslint from '@rollup/plugin-eslint';
 import nodeResolve from '@rollup/plugin-node-resolve';
@@ -30,7 +30,7 @@ const generateRollupBaseConfig = () => ({
       sourceMap: true,
       plugins: [],
     }),
-    terser(),
+    // terser(),
     process.env.ROLLUP_WATCH &&
       livereload({
         watch: 'dist',

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 [, 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 }),
@@ -176,6 +183,47 @@ const useManchettesWithSpaceTimeChart = (
     [spaceTimeChartRef]
   );
 
+  const handleZoom = useCallback(
+    ({ delta, position }: Parameters<NonNullable<SpaceTimeChartProps['onZoom']>>[0]) => {
+      if (isShiftPressed) {
+        handleXZoom(xZoom + delta, position.x);
+      }
+    },
+    [handleXZoom, isShiftPressed, xZoom]
+  );
+  const handlePan = useCallback(
+    (payload: {
+      initialPosition: { x: number; y: number };
+      position: { x: number; y: number };
+      isPanning: boolean;
+    }) => {
+      const diff = getDiff(payload.initialPosition, payload.position);
+      const newState = { ...state };
+
+      if (!payload.isPanning) {
+        newState.panning = null;
+      } else if (!panning) {
+        newState.panning = { initialOffset: { x: xOffset, y: yOffset } };
+      } else {
+        const { initialOffset } = panning;
+        newState.xOffset = initialOffset.x + diff.x;
+
+        const newYPos = initialOffset.y - diff.y;
+        if (
+          manchetteWithSpaceTimeChartContainer.current &&
+          newYPos >= 0 &&
+          newYPos + manchetteWithSpaceTimeChartContainer.current.offsetHeight <
+            manchetteWithSpaceTimeChartContainer.current.scrollHeight
+        ) {
+          newState.yOffset = newYPos;
+          manchetteWithSpaceTimeChartContainer.current.scrollTop = newYPos;
+        }
+      }
+      setState(newState);
+    },
+    [manchetteWithSpaceTimeChartContainer, panning, state, xOffset, yOffset]
+  );
+
   const spaceTimeChartProps = useMemo(
     () => ({
       operationalPoints: simplifiedWaypoints,
@@ -184,54 +232,10 @@ const useManchettesWithSpaceTimeChart = (
       paths,
       xOffset,
       yOffset: -yOffset + 14,
-      onZoom: ({ delta, position }: Parameters<NonNullable<SpaceTimeChartProps['onZoom']>>[0]) => {
-        if (isShiftPressed) {
-          handleXZoom(xZoom + delta, position.x);
-        }
-      },
-      onPan: (payload: {
-        initialPosition: { x: number; y: number };
-        position: { x: number; y: number };
-        isPanning: boolean;
-      }) => {
-        const diff = getDiff(payload.initialPosition, payload.position);
-        const newState = { ...state };
-
-        if (!payload.isPanning) {
-          newState.panning = null;
-        } else if (!panning) {
-          newState.panning = { initialOffset: { x: xOffset, y: yOffset } };
-        } else {
-          const { initialOffset } = panning;
-          newState.xOffset = initialOffset.x + diff.x;
-
-          const newYPos = initialOffset.y - diff.y;
-          if (
-            manchetteWithSpaceTimeChartContainer.current &&
-            newYPos >= 0 &&
-            newYPos + manchetteWithSpaceTimeChartContainer.current.offsetHeight <
-              manchetteWithSpaceTimeChartContainer.current.scrollHeight
-          ) {
-            newState.yOffset = newYPos;
-            manchetteWithSpaceTimeChartContainer.current.scrollTop = newYPos;
-          }
-        }
-        setState(newState);
-      },
+      onZoom: handleZoom,
+      onPan: handlePan,
     }),
-    [
-      simplifiedWaypoints,
-      computedScales,
-      xZoom,
-      paths,
-      xOffset,
-      isShiftPressed,
-      state,
-      panning,
-      yOffset,
-      manchetteWithSpaceTimeChartContainer,
-      handleXZoom,
-    ]
+    [simplifiedWaypoints, computedScales, xZoom, paths, xOffset, yOffset, handleZoom, handlePan]
   );
 
   return useMemo(

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;

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 @@
 
   return (
     <div className="manchette-container">
+      MANCHETTE NO MEMO
       {waypointMenuData?.menu && waypointMenuData.activeWaypointId && (
         <div className="menu-wrapper" style={{ top: menuPosition }}>
           {waypointMenuData.menu}

ui-spacetimechart/src/components/SpaceGraduations.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, memo } from 'react';
 
 import { useDraw } from '../hooks/useCanvas';
 import { type DrawingFunction } from '../lib/types';

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';
 
@@ -198,6 +198,7 @@
       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}>

ui-spacetimechart/src/components/TimeGraduations.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, memo } from 'react';
 
 import { useDraw } from '../hooks/useCanvas';
 import { MINUTE } from '../lib/consts';

ui-spacetimechart/src/hooks/useCanvas.ts

@@ -51,7 +51,7 @@
   /**
    * This function renders all picking layers:
    */
   const drawPicking = useCallback(
     (stcContext: SpaceTimeChartContextType, layers?: Set<LayerType>) => {
       stcContext.resetPickingElements();
       PICKING_LAYERS.forEach((layer) => {
@@ -96,7 +96,10 @@
    */
   const draw = useCallback(() => {
     drawRendering(stcContextRef.current);
-    drawPicking(stcContextRef.current);
+    // TODO: expensive, 300ms for each frame
+    // can’t we detect the mouse is close to an element with just its euclidian distance from the point?
+    // do we really need super fine interaction (to know that the mouse is over an element with precision down to the pixel?
+    // drawPicking(stcContextRef.current);
 
     if (scheduledRef.current) {
       window.cancelAnimationFrame(scheduledRef.current.frameId);

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 }}