front: insert div in manchette with space time chart

Signed-off-by: theocrsb <[email protected]>

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: '100px', backgroundColor: '#EFF3F5' }} />;
 
 export const Default: Story = {
   args: {

ui-manchette-with-spacetimechart/src/components/ManchetteWithSpaceTimeChart.tsx

@@ -4,17 +4,19 @@ import Manchette, {
   type ProjectPathTrainResult,
   type Waypoint,
   type ManchetteProps,
+  InteractiveWaypoint,
 } from '@osrd-project/ui-manchette';
 import {
   PathLayer,
   SpaceTimeChart,
+  isInteractiveWaypoint,
   type SpaceTimeChartProps,
 } from '@osrd-project/ui-spacetimechart';
 
 import useManchetteWithSpaceTimeChart from '../hooks/useManchetteWithSpaceTimeChart';
 
 export type ManchetteWithSpaceTimeChartProps = {
-  waypoints: Waypoint[];
+  contents: (InteractiveWaypoint | React.ReactNode)[];
   projectPathTrainResult: ProjectPathTrainResult[];
   selectedTrain?: number;
   height?: number;
@@ -31,7 +33,7 @@ export type ManchetteWithSpaceTimeChartProps = {
  * and space time chart, the useManchetteWithSpaceTimeChart() hook can be used.
  */
 const ManchetteWithSpaceTimeChart = ({
-  waypoints,
+  contents,
   projectPathTrainResult,
   selectedTrain,
   height = 561,
@@ -44,14 +46,17 @@ const ManchetteWithSpaceTimeChart = ({
   const spaceTimeChartRef = useRef<HTMLDivElement>(null);
 
   const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchetteWithSpaceTimeChart(
-    waypoints,
+    contents,
     projectPathTrainResult,
     manchetteWithSpaceTimeChartRef,
     selectedTrain,
     height,
     spaceTimeChartRef
   );
 
+  console.log('spaceTimeChartProps', spaceTimeChartProps);
+  console.log('manchetteProps', manchetteProps);
+
   return (
     <div className="manchette-space-time-chart-wrapper">
       <div
@@ -79,9 +84,13 @@ const ManchetteWithSpaceTimeChart = ({
             {...spaceTimeChartProps}
             {...additionalSpaceTimeChartProps}
           >
-            {spaceTimeChartProps.paths.map((path) => (
-              <PathLayer key={path.id} path={path} color={path.color} level={path.level} />
-            ))}
+            {spaceTimeChartProps.paths.map((path, index) =>
+              path.id ? (
+                <PathLayer key={path.id} path={path} color={path.color} level={path.level} />
+              ) : (
+                <div key={index}>{'coucou'}</div>
+              )
+            )}
             {children}
           </SpaceTimeChart>
         </div>

ui-manchette-with-spacetimechart/src/helpers.ts

@@ -41,6 +41,11 @@ 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[],
   { height, isProportional, yZoom }: WaypointsOptions

ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts

@@ -1,6 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { 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';
 
@@ -28,8 +33,17 @@ type State = {
   scales: SpaceScale[];
 };
 
+type SimplifiedWaypoint = {
+  id: string;
+  label: string;
+  position: number;
+  importanceLevel: number;
+};
+
+type SimplifiedWaypoints = (SimplifiedWaypoint | React.ReactNode)[];
+
 const useManchettesWithSpaceTimeChart = (
-  waypoints: Waypoint[],
+  contents: (InteractiveWaypoint | React.ReactNode)[],
   projectPathTrainResult: ProjectPathTrainResult[],
   manchetteWithSpaceTimeChartContainer: React.RefObject<HTMLDivElement>,
   selectedTrain?: number,
@@ -48,6 +62,7 @@ const useManchettesWithSpaceTimeChart = (
     waypointsChart: [],
     scales: [],
   });
+  const waypoints = useMemo(() => contents.filter(isInteractiveWaypoint), [contents]);
 
   const { xZoom, yZoom, xOffset, yOffset, scrollTo, panning, isProportional } = state;
 
@@ -149,6 +164,18 @@ const useManchettesWithSpaceTimeChart = (
     [simplifiedWaypoints, height, isProportional, yZoom]
   );
 
+  const contentsToDisplay = useMemo(
+    () =>
+      contents.map((content) =>
+        isInteractiveWaypoint(content)
+          ? waypointsToDisplay.find((wp) => wp.id === content.id) || content
+          : content
+      ),
+    [contents, waypointsToDisplay]
+  );
+
+  console.log('contentsToDisplay', contentsToDisplay);
+
   const manchetteProps = useMemo(
     () => ({
       contents: waypointsToDisplay,
@@ -175,7 +202,7 @@ const useManchettesWithSpaceTimeChart = (
 
   const spaceTimeChartProps = useMemo(
     () => ({
-      operationalPoints: simplifiedWaypoints,
+      contents: simplifiedWaypoints,
       spaceScales: computedScales,
       timeScale: zoomValueToTimeScale(xZoom),
       paths,

ui-manchette-with-spacetimechart/src/stories/simple.stories.tsx

@@ -16,7 +16,7 @@ export default meta;
 
 export const Default = {
   args: {
-    waypoints: SAMPLE_WAYPOINTS,
+    contents: SAMPLE_WAYPOINTS,
     projectPathTrainResult: SAMPLE_PATHS_DATA,
     selectedTrain: 1,
   },

ui-manchette-with-spacetimechart/src/stories/split.stories.tsx

@@ -0,0 +1,34 @@
+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,
+};
+
+const customDiv = <div style={{ height: '100', backgroundColor: '#EFF3F5' }} />;
+
+const allWaypoints = SAMPLE_WAYPOINTS.map((waypoint, index) => {
+  if (index === 0 || index === 1 || index === 3) {
+    return [waypoint, customDiv];
+  }
+  return waypoint;
+}).flat();
+
+export default meta;
+
+export const Default = {
+  args: {
+    contents: allWaypoints,
+    projectPathTrainResult: SAMPLE_PATHS_DATA,
+    selectedTrain: 1,
+  },
+};

ui-spacetimechart/src/components/PathLayer.tsx

@@ -8,11 +8,12 @@ import {
   type DataPoint,
   DEFAULT_PATH_END,
   type DrawingFunction,
-  type OperationalPoint,
   type PathData,
   type PickingDrawingFunction,
   type Point,
   type SpaceTimeChartContextType,
+  InteractiveWaypoint,
+  OperationalPoint,
 } from '../lib/types';
 import {
   drawAliasedDisc,
@@ -68,6 +69,20 @@ export type PathLayerProps = {
   level?: PathLevel;
 };
 
+export const isInteractiveWaypoint = (
+  item: InteractiveWaypoint | React.ReactNode
+): item is InteractiveWaypoint | OperationalPoint =>
+  item != null && typeof item === 'object' && 'id' in item && 'position' in item;
+
+export const isOp = (
+  item: InteractiveWaypoint | React.ReactNode | OperationalPoint
+): item is OperationalPoint =>
+  item != null &&
+  typeof item === 'object' &&
+  'id' in item &&
+  'position' in item &&
+  'importanceLevel' in item;
+
 /**
  * This component handles drawing a Path inside a SpaceTimeChart. It renders:
  * - The path itself
@@ -134,6 +149,7 @@ export const PathLayer = ({
     },
     [path]
   );
+
   /**
    * This function returns the list of important points, where the mouse can snap.
    */
@@ -143,10 +159,11 @@ export const PathLayer = ({
       getSpacePixel,
       timeAxis,
       spaceAxis,
-      operationalPoints,
+      contents,
     }: SpaceTimeChartContextType): Point[] => {
       const res: Point[] = [];
-      const stopPositions = new Set(operationalPoints.map((p) => p.position));
+      const waypoints = contents.filter(isInteractiveWaypoint);
+      const stopPositions = new Set(waypoints.map((p) => p.position));
       path.points.forEach(({ position, time }) => {
         if (stopPositions.has(position))
           res.push({
@@ -163,8 +180,9 @@ export const PathLayer = ({
    * This function draws the stops of the path on the operational points.
    */
   const drawPauses = useCallback<DrawingFunction>(
-    (ctx, { getTimePixel, getSpacePixel, operationalPoints, swapAxis }) => {
-      const stopPositions = new Set(operationalPoints.map((p) => p.position));
+    (ctx, { getTimePixel, getSpacePixel, contents, swapAxis }) => {
+      const waypoints = contents.filter(isInteractiveWaypoint);
+      const stopPositions = new Set(waypoints.map((p) => p.position));
       path.points.forEach(({ position, time }, i, a) => {
         if (i) {
           const { position: prevPosition, time: prevTime } = a[i - 1];
@@ -309,11 +327,12 @@ export const PathLayer = ({
   );
 
   const computePathLength = useCallback(
-    (operationalPoints: OperationalPoint[], segments: Point[]) => {
+    (contents: (InteractiveWaypoint | React.ReactNode)[], segments: Point[]) => {
       let totalLength = 0;
+      const waypoints = contents.filter(isInteractiveWaypoint);
 
       // Compute length of pauses
-      const stopPositions = new Set(operationalPoints.map((p) => p.position));
+      const stopPositions = new Set(waypoints.map((p) => p.position));
       path.points.forEach(({ position, time }, i, pointsArray) => {
         if (i > 0) {
           const { position: prevPosition, time: prevTime } = pointsArray[i - 1];
@@ -371,7 +390,7 @@ export const PathLayer = ({
 
       // Draw label:
       if (!stcContext.hidePathsLabels) {
-        const pathLength = computePathLength(stcContext.operationalPoints, segments);
+        const pathLength = computePathLength(stcContext.contents, segments);
         drawLabel(ctx, stcContext, path.label, color, segments, pathLength);
       }
     },

ui-spacetimechart/src/components/SpaceGraduations.tsx

@@ -4,6 +4,7 @@ import { useDraw } from '../hooks/useCanvas';
 import { type DrawingFunction } from '../lib/types';
 import { getCrispLineCoordinate } from '../utils/canvas';
 import { getSpacePixels } from '../utils/paths';
+import { isInteractiveWaypoint, isOp } from './PathLayer';
 
 const SpaceGraduations = () => {
   const drawingFunction = useCallback<DrawingFunction>(
@@ -12,7 +13,7 @@ const SpaceGraduations = () => {
       {
         timePixelOffset,
         getSpacePixel,
-        operationalPoints,
+        contents,
         swapAxis,
         width,
         height,
@@ -21,6 +22,9 @@ const SpaceGraduations = () => {
     ) => {
       const axisSize = !swapAxis ? width : height;
 
+      const waypoints = contents.filter(isInteractiveWaypoint);
+      const operationalPoints = waypoints.filter(isOp);
+
       // Draw operational point lines:
       operationalPoints.forEach((point) => {
         const styles = spaceGraduationsStyles[point.importanceLevel || 0];

ui-spacetimechart/src/components/SpaceTimeChart.tsx

@@ -31,7 +31,7 @@ import { snapPosition } from '../utils/snapping';
 
 export const SpaceTimeChart = (props: SpaceTimeChartProps) => {
   const {
-    operationalPoints,
+    contents,
     spaceOrigin,
     spaceScales,
     timeOrigin,
@@ -63,7 +63,7 @@ export const SpaceTimeChart = (props: SpaceTimeChartProps) => {
   const fingerprint = useMemo(
     () =>
       JSON.stringify({
-        operationalPoints,
+        contents,
         width,
         height,
         spaceOrigin,
@@ -78,7 +78,7 @@ export const SpaceTimeChart = (props: SpaceTimeChartProps) => {
         showTicks,
       }),
     [
-      operationalPoints,
+      contents,
       width,
       height,
       spaceOrigin,
@@ -140,7 +140,7 @@ export const SpaceTimeChart = (props: SpaceTimeChartProps) => {
       pickingElements,
       resetPickingElements,
       registerPickingElement,
-      operationalPoints,
+      contents,
       spaceOrigin,
       spaceScaleTree,
       timeOrigin,