ui-charts: display a GOV in a GET in Storybook

front/ui/storybook/.storybook/preview.ts

@@ -1,7 +1,5 @@
 import type { Preview } from '@storybook/react';
 
-import '../styles/global.css';
-
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },

front/ui/storybook/stories/ui-charts/manchetteWithSpaceTimeChart/assets/sampleData.ts

@@ -159,7 +159,7 @@ export const SAMPLE_WAYPOINTS: Waypoint[] = [
 
 export const SAMPLE_PATHS_DATA: ProjectPathTrainResult[] = [
   {
-    id: 1,
+    id: '1',
     name: 'Train 1',
     departureTime: new Date('2024-10-23T09:00:00Z'),
     spaceTimeCurves: [
@@ -189,7 +189,7 @@ export const SAMPLE_PATHS_DATA: ProjectPathTrainResult[] = [
     ],
   },
   {
-    id: 2,
+    id: '2',
     name: 'Train 2',
     departureTime: new Date('2024-10-23T09:15:00Z'),
     spaceTimeCurves: [
@@ -219,7 +219,7 @@ export const SAMPLE_PATHS_DATA: ProjectPathTrainResult[] = [
     ],
   },
   {
-    id: 3,
+    id: '3',
     name: 'Train 3',
     departureTime: new Date('2024-10-23T09:30:00Z'),
     spaceTimeCurves: [

front/ui/storybook/stories/ui-charts/manchetteWithSpaceTimeChart/assets/trackOccupancyData.ts

@@ -0,0 +1,8 @@
+export const TRACKS = [
+  { id: '1', name: 'EV', line: '123456' },
+  { id: '2', name: '2', line: '456123' },
+  { id: '3', name: '2bis', line: '135246' },
+  { id: '4', name: 'Z', line: '654321' },
+  { id: '5', name: '1bis', line: '615243' },
+  { id: '6', name: '1', line: '523416' },
+];

front/ui/storybook/stories/ui-charts/manchetteWithSpaceTimeChart/split.stories.tsx

@@ -106,7 +106,7 @@ const SplitManchetteWithSpaceTimeChartWrapper = ({
   const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
   const spaceTimeChartRef = useRef<HTMLDivElement>(null);
 
-  const paths = usePaths(projectPathTrainResult, selectedTrain);
+  const paths = usePaths(projectPathTrainResult);
   const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchetteWithSpaceTimeChart({
     waypoints,
     manchetteWithSpaceTimeChartRef,
@@ -128,7 +128,12 @@ const SplitManchetteWithSpaceTimeChartWrapper = ({
         <div className="space-time-chart-container w-full sticky" ref={spaceTimeChartRef}>
           <SpaceTimeChart className="inset-0 absolute h-full" {...spaceTimeChartProps}>
             {paths.map((path) => (
-              <PathLayer key={path.id} path={path} color={path.color} level={path.level} />
+              <PathLayer
+                key={path.id}
+                path={path}
+                color={path.color}
+                level={path.id === selectedTrain + '' ? 1 : 2}
+              />
             ))}
           </SpaceTimeChart>
         </div>

front/ui/storybook/stories/ui-charts/manchetteWithSpaceTimeChart/track-occupancy.stories.tsx

@@ -0,0 +1,189 @@
+import React, { useMemo, useRef, useState } from 'react';
+
+import {
+  Manchette,
+  PathLayer,
+  SpaceTimeChart,
+  TrackOccupancyCanvas,
+  TrackOccupancyManchette,
+  useManchetteWithSpaceTimeChart,
+  WaypointComponent,
+  TRACK_HEIGHT_CONTAINER,
+  type OccupancyZone,
+  type Track,
+  isInteractiveWaypoint,
+  type OccupancyZonePickingElement,
+  isPointPickingElement,
+  isSegmentPickingElement,
+} from '@osrd-project/ui-charts';
+import '@osrd-project/ui-charts/dist/theme.css';
+import '@osrd-project/ui-core/dist/theme.css';
+import type { Meta } from '@storybook/react';
+
+import {
+  getOccupancyZonesFromPathAtGivenWaypoint,
+  OPERATIONAL_POINTS,
+  PATHS,
+} from '../spaceTimeChart/helpers/paths';
+
+const BASE_WAYPOINT_HEIGHT = 32;
+
+/**
+ * This story shows how to render a Manchette with a SpaceTimeChart, and showing a
+ * TrackOccupancyDiagram layer when selecting an operational point.
+ */
+
+/**
+ * This component shows how to use the useManchetteWithSpaceTimeChart hook with track-occupancy
+ * diagrams:
+ */
+const TrackOccupancyDiagramWithinSpaceTimeChartWrapper = ({ height = 561 }: { height: number }) => {
+  // TODO: Restore trains selection from GOV
+  const [selectedTrain, setSelectedTrain] = useState<string>();
+  const [selectedWaypoint, setSelectedWaypoint] = useState<undefined | string>(
+    OPERATIONAL_POINTS[2].id
+  );
+  const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
+  const spaceTimeChartRef = useRef<HTMLDivElement>(null);
+  const operationalPoints = OPERATIONAL_POINTS;
+  const paths = PATHS;
+
+  const splitPoints = useMemo(() => {
+    const operationalPoint = operationalPoints.find((wp) => wp.id === selectedWaypoint);
+    if (!operationalPoint) return [];
+
+    // Fake tracks:
+    const tracks: Track[] = [
+      { id: '1', name: 'EV', line: 'line' },
+      { id: '2', name: '2', line: 'line' },
+      { id: '3', name: '2bis', line: 'line' },
+    ];
+    const occupancyZones: OccupancyZone[] = paths.flatMap((path, i) =>
+      getOccupancyZonesFromPathAtGivenWaypoint(path.points, operationalPoint.position, {
+        trainId: path.id,
+        trackId: tracks[i % tracks.length].id, // (i.e. pick some random track)
+        arrivalTrainName: 'foo',
+        departureTrainName: 'bar',
+        color: path.color,
+      })
+    );
+
+    return [
+      {
+        id: operationalPoint.id,
+        position: operationalPoint.position,
+        size: tracks.length * TRACK_HEIGHT_CONTAINER + BASE_WAYPOINT_HEIGHT,
+        spaceTimeChartNode: (
+          <TrackOccupancyCanvas
+            position={operationalPoint.position}
+            tracks={tracks}
+            occupancyZones={occupancyZones}
+            selectedTrainId={selectedTrain}
+            onClose={() => setSelectedWaypoint(undefined)}
+            topPadding={BASE_WAYPOINT_HEIGHT}
+          />
+        ),
+        manchetteNode: (
+          <TrackOccupancyManchette tracks={tracks}>
+            <div className="waypoint-wrapper flex justify-start">
+              <WaypointComponent
+                waypoint={{
+                  id: operationalPoint.id,
+                  name: operationalPoint.label,
+                  position: operationalPoint.position,
+                  onClick: () => setSelectedWaypoint(undefined),
+                }}
+                isActive={false}
+                isMenuActive={false}
+              />
+            </div>
+          </TrackOccupancyManchette>
+        ),
+      },
+    ];
+  }, [paths, selectedTrain, selectedWaypoint, operationalPoints]);
+
+  const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchetteWithSpaceTimeChart({
+    waypoints: operationalPoints.map((op) => ({
+      id: op.id,
+      position: op.position,
+      name: op.label,
+      weight: op.importanceLevel,
+    })),
+    manchetteWithSpaceTimeChartRef,
+    height,
+    spaceTimeChartRef,
+    splitPoints,
+    defaultTimeOrigin: Math.min(...paths.map((p) => +p.points[0].time)),
+  });
+
+  return (
+    <div className="manchette-space-time-chart-wrapper">
+      <div
+        ref={manchetteWithSpaceTimeChartRef}
+        className="manchette flex"
+        style={{ height: `${height}px` }}
+        onScroll={handleScroll}
+      >
+        <Manchette
+          {...manchetteProps}
+          contents={manchetteProps.contents.map((content) =>
+            isInteractiveWaypoint(content)
+              ? { ...content, onClick: (waypointId) => setSelectedWaypoint(waypointId) }
+              : content
+          )}
+        />
+        <div className="space-time-chart-container w-full sticky" ref={spaceTimeChartRef}>
+          <SpaceTimeChart
+            className="inset-0 absolute h-full"
+            {...spaceTimeChartProps}
+            onClick={({ hoveredItem }) => {
+              // Handle clicking the occupancyZone items (on the TrackOccupancyCanvas layer):
+              if (
+                hoveredItem?.layer === 'overlay' &&
+                hoveredItem.element.type === 'occupancyZone'
+              ) {
+                const newId = (hoveredItem.element as OccupancyZonePickingElement).trainId;
+                setSelectedTrain(newId === selectedTrain ? undefined : newId);
+              }
+
+              // Handle clicking the path items (on the Path layers):
+              else if (
+                hoveredItem?.layer === 'paths' &&
+                (isPointPickingElement(hoveredItem.element) ||
+                  isSegmentPickingElement(hoveredItem.element))
+              ) {
+                const newId = hoveredItem.element.pathId;
+                setSelectedTrain(newId === selectedTrain ? undefined : newId);
+              }
+              // Handle clicking the stage:
+              else {
+                setSelectedTrain(undefined);
+              }
+            }}
+          >
+            {paths.map((path) => (
+              <PathLayer
+                key={path.id}
+                path={path}
+                color={path.color}
+                level={selectedTrain === path.id ? 1 : 2}
+              />
+            ))}
+          </SpaceTimeChart>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof TrackOccupancyDiagramWithinSpaceTimeChartWrapper> = {
+  title: 'Manchette with SpaceTimeChart/Track-occupancy display',
+  component: TrackOccupancyDiagramWithinSpaceTimeChartWrapper,
+};
+
+export default meta;
+
+export const Default = {
+  args: {},
+};

front/ui/storybook/stories/ui-charts/spaceTimeChart/helpers/components.tsx

@@ -5,8 +5,8 @@ import {
   SpaceTimeChartContext,
   type DataPoint,
   type Point,
+  positionMmToKm,
 } from '@osrd-project/ui-charts';
-import { round } from 'lodash';
 
 import { WHITE_75 } from './consts';
 import { formatTimeLength } from './utils';
@@ -90,12 +90,12 @@ const DataLabel = ({
       {isDiff ? (
         <>
           <div>Time difference: {formatTimeLength(new Date(data.time))}</div>
-          <div>Distance to mark: {round(data.position).toLocaleString()} m</div>
+          <div>Distance to mark: {positionMmToKm(data.position).toLocaleString()} km</div>
         </>
       ) : (
         <>
           <div>Time: {new Date(data.time).toLocaleTimeString()}</div>
-          <div>Distance: {round(data.position).toLocaleString()} m</div>
+          <div>Distance: {positionMmToKm(data.position).toLocaleString()} km</div>
         </>
       )}
     </div>

front/ui/storybook/stories/ui-charts/spaceTimeChart/helpers/consts.ts

@@ -19,5 +19,5 @@ export const SECOND = 1000;
 export const MINUTE = 60 * SECOND;
 export const HOUR = 60 * MINUTE;
 
-// Same for distances in meters:
-export const KILOMETER = 1000;
+// Same for distances in millimeters:
+export const KILOMETER = 1000000;