front: insert div in manchette with space time chart

Signed-off-by: theocrsb <[email protected]>
OpenRailAssociation · Mar 6, 2025 · 8309bcf · 8309bcf
1 parent 1066a18
commit 8309bcf
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 25 deletions.
diff --git a/storybook/stories/ManchetteSplit/ManchetteSplit.stories.tsx b/storybook/stories/ManchetteSplit/ManchetteSplit.stories.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 
 import '@osrd-project/ui-core/dist/theme.css';
 import '@osrd-project/ui-manchette/dist/theme.css';
+import Manchette from '@osrd-project/ui-manchette';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import Manchette from '@osrd-project/ui-manchette';
 import { SAMPLE_WAYPOINTS } from '../../../ui-manchette/src/stories/assets/sampleData';
 
 const meta: Meta<typeof Manchette> = {
@@ -17,11 +17,7 @@ const meta: Meta<typeof Manchette> = {
 export default meta;
 type Story = StoryObj<typeof Manchette>;
 
-const customDiv = (
-  <div style={{ height: 'auto', minHeight: 24, backgroundColor: 'rgba(152, 192, 245, 1)' }}>
-    Hello World
-  </div>
-);
+const customDiv = <div style={{ height: 'auto', minHeight: 24, backgroundColor: '#EFF3F5' }}></div>;
 
 export const Default: Story = {
   args: {

diff --git a/ui-manchette-with-spacetimechart/src/components/ManchetteWithSpaceTimeChart.tsx b/ui-manchette-with-spacetimechart/src/components/ManchetteWithSpaceTimeChart.tsx
@@ -4,6 +4,7 @@ import Manchette, {
   type ProjectPathTrainResult,
   type Waypoint,
   type ManchetteProps,
+  InteractiveWaypoint,
 } from '@osrd-project/ui-manchette';
 import {
   PathLayer,
@@ -14,7 +15,11 @@ import {
 import useManchetteWithSpaceTimeChart from '../hooks/useManchetteWithSpaceTimeChart';
 
 export type ManchetteWithSpaceTimeChartProps = {
-  waypoints: Waypoint[];
+  contents: (InteractiveWaypoint | React.ReactNode)[];
+  // split :
+  scaleWithZoom: boolean;
+  swapAxis: boolean;
+  //
   projectPathTrainResult: ProjectPathTrainResult[];
   selectedTrain?: number;
   height?: number;
@@ -31,7 +36,9 @@ export type ManchetteWithSpaceTimeChartProps = {
  * and space time chart, the useManchetteWithSpaceTimeChart() hook can be used.
  */
 const ManchetteWithSpaceTimeChart = ({
-  waypoints,
+  contents,
+  scaleWithZoom,
+  swapAxis,
   projectPathTrainResult,
   selectedTrain,
   height = 561,
@@ -44,14 +51,16 @@ const ManchetteWithSpaceTimeChart = ({
   const spaceTimeChartRef = useRef<HTMLDivElement>(null);
 
   const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchetteWithSpaceTimeChart(
-    waypoints,
+    contents,
     projectPathTrainResult,
     manchetteWithSpaceTimeChartRef,
     selectedTrain,
     height,
     spaceTimeChartRef
   );
 
+  console.log('manchetteProps', manchetteProps);
+
   return (
     <div className="manchette-space-time-chart-wrapper">
       <div

diff --git a/ui-manchette-with-spacetimechart/src/helpers.ts b/ui-manchette-with-spacetimechart/src/helpers.ts
@@ -41,24 +41,37 @@ export const filterVisibleElements = (
   return displayedElements.sort((a, b) => a.position - b.position);
 };
 
+export const isInteractiveWaypoint = (
+  item: InteractiveWaypoint | React.ReactNode
+): item is InteractiveWaypoint =>
+  item != null && typeof item === 'object' && 'id' in item && 'position' in item;
+
 export const computeWaypointsToDisplay = (
-  waypoints: Waypoint[],
+  contents: (InteractiveWaypoint | React.ReactNode)[],
   { height, isProportional, yZoom }: WaypointsOptions
-): InteractiveWaypoint[] => {
-  if (waypoints.length < 2) return [];
+): (InteractiveWaypoint | React.ReactNode)[] => {
+  const waypoints = contents.filter(isInteractiveWaypoint);
+  const notWaypoints = contents.filter((content) => !isInteractiveWaypoint(content));
+
+  if (waypoints.length < 2) return notWaypoints;
 
   const totalDistance = calcTotalDistance(waypoints);
   const heightWithoutFinalWaypoint = getHeightWithoutLastWaypoint(height);
 
   // display all waypoints in linear mode
   if (!isProportional) {
-    return waypoints.map((waypoint, index) => {
+    const styledWaypoints = waypoints.map((waypoint, index) => {
       const nextWaypoint = waypoints.at(index + 1);
       return {
         ...waypoint,
         styles: { height: `${BASE_WAYPOINT_HEIGHT * (nextWaypoint ? yZoom : 1)}px` },
       };
     });
+    return contents.map((content) =>
+      isInteractiveWaypoint(content)
+        ? styledWaypoints.find((wp) => wp.id === content.id) || content
+        : content
+    );
   }
 
   // in proportional mode, hide some waypoints to avoid collisions
@@ -71,21 +84,27 @@ export const computeWaypointsToDisplay = (
     minSpace
   );
 
-  return filteredWaypoints.map((waypoint, index) => {
+  const styledFilteredWaypoints = filteredWaypoints.map((waypoint, index) => {
     const nextWaypoint = filteredWaypoints.at(index + 1);
     return {
       ...waypoint,
       styles: {
         height: !nextWaypoint
           ? `${BASE_WAYPOINT_HEIGHT}px`
-          : `${
-              ((nextWaypoint.position - waypoint.position) / totalDistance) *
+          : `$
+              {((nextWaypoint.position - waypoint.position) / totalDistance) *
               heightWithoutFinalWaypoint *
               yZoom
             }px`,
       },
     };
   });
+
+  return contents.map((content) =>
+    isInteractiveWaypoint(content)
+      ? styledFilteredWaypoints.find((wp) => wp.id === content.id) || content
+      : content
+  );
 };
 
 export const getScales = (

diff --git a/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts b/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts
@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import type { ProjectPathTrainResult, Waypoint } from '@osrd-project/ui-manchette';
+import type {
+  InteractiveWaypoint,
+  ProjectPathTrainResult,
+  Waypoint,
+} from '@osrd-project/ui-manchette';
 import type { SpaceScale, SpaceTimeChartProps } from '@osrd-project/ui-spacetimechart';
 
 import usePaths from './usePaths';
@@ -11,6 +15,7 @@ import {
   zoomX,
   zoomValueToTimeScale,
   timeScaleToZoomValue,
+  isInteractiveWaypoint,
 } from '../helpers';
 import { getDiff } from '../utils/point';
 
@@ -29,7 +34,7 @@ type State = {
 };
 
 const useManchettesWithSpaceTimeChart = (
-  waypoints: Waypoint[],
+  contents: (InteractiveWaypoint | React.ReactNode)[],
   projectPathTrainResult: ProjectPathTrainResult[],
   manchetteWithSpaceTimeChartContainer: React.RefObject<HTMLDivElement>,
   selectedTrain?: number,
@@ -53,20 +58,24 @@ const useManchettesWithSpaceTimeChart = (
 
   const paths = usePaths(projectPathTrainResult, selectedTrain);
 
-  const waypointsToDisplay = useMemo(
-    () => computeWaypointsToDisplay(waypoints, { height, isProportional, yZoom }),
-    [waypoints, height, isProportional, yZoom]
+  console.log(contents);
+
+  const contentsToDisplay = useMemo(
+    () => computeWaypointsToDisplay(contents, { height, isProportional, yZoom }),
+    [contents, height, isProportional, yZoom]
   );
 
+  console.log(contentsToDisplay);
+
   const simplifiedWaypoints = useMemo(
     () =>
-      waypointsToDisplay.map((point) => ({
+      contentsToDisplay.filter(isInteractiveWaypoint).map((point) => ({
         id: point.id,
         label: point.id,
         position: point.position,
         importanceLevel: 1,
       })),
-    [waypointsToDisplay]
+    [contentsToDisplay]
   );
 
   const zoomYIn = useCallback(() => {
@@ -151,7 +160,7 @@ const useManchettesWithSpaceTimeChart = (
 
   const manchetteProps = useMemo(
     () => ({
-      contents: waypointsToDisplay,
+      contents: contentsToDisplay,
       zoomYIn,
       zoomYOut,
       resetZoom,
@@ -160,7 +169,7 @@ const useManchettesWithSpaceTimeChart = (
       isProportional,
       yOffset,
     }),
-    [waypointsToDisplay, zoomYIn, zoomYOut, resetZoom, toggleMode, yZoom, isProportional, yOffset]
+    [contentsToDisplay, zoomYIn, zoomYOut, resetZoom, toggleMode, yZoom, isProportional, yOffset]
   );
 
   const handleXZoom = useCallback(

diff --git a/ui-manchette-with-spacetimechart/src/stories/split.stories.tsx b/ui-manchette-with-spacetimechart/src/stories/split.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+
+import '@osrd-project/ui-core/dist/theme.css';
+import '@osrd-project/ui-manchette/dist/theme.css';
+import '@osrd-project/ui-manchette-with-spacetimechart/dist/theme.css';
+
+import { SAMPLE_WAYPOINTS, SAMPLE_PATHS_DATA } from '../assets/sampleData';
+import ManchetteWithSpaceTimeChart from '../components/ManchetteWithSpaceTimeChart';
+
+const meta: Meta<typeof ManchetteWithSpaceTimeChart> = {
+  title: 'Manchette with SpaceTimeChart/split',
+  component: ManchetteWithSpaceTimeChart,
+};
+
+export default meta;
+
+const customDiv = <div style={{ height: '100px', backgroundColor: '#EFF3F5' }}></div>;
+
+export const Default = {
+  args: {
+    contents: [
+      SAMPLE_WAYPOINTS[0],
+      customDiv,
+      SAMPLE_WAYPOINTS[1],
+      SAMPLE_WAYPOINTS[2],
+      customDiv,
+      SAMPLE_WAYPOINTS[3],
+      customDiv,
+    ],
+    projectPathTrainResult: SAMPLE_PATHS_DATA,
+    selectedTrain: 1,
+    scaleWithZoom: false,
+    swapAxis: false,
+  },
+};