ui-charts: restores clicking trains in the gov

Details:
- Implements back clicks detection in the TrackOccupancy diagram, using
  the picking framework from the SpaceTimeDiagram
- Adds an example showing how it works in the
  trackOccupancyDiagram/rendering story

Signed-off-by: Alexis Jacomy <[email protected]>

Author: jacomyal

storybook/stories/ui-charts/trackOccupancyDiagram/rendering.stories.tsx

@@ -30,6 +30,7 @@ const TrackOccupancyDiagramStory = ({
         tracks={TRACKS}
         occupancyZones={OCCUPANCY_ZONES}
         selectedTrainId={selectedTrainId}
+        onSelectedTrainIdChange={setSelectedTrainId}
         height={autoHeight ? undefined : 500}
       />
     </div>

ui-charts/src/spaceTimeChart/lib/types.ts

@@ -93,7 +93,7 @@ export type PointToData = (point: Point) => DataPoint;
 export type DataToPoint = (data: DataPoint) => Point;
 
 // CANVAS SPECIFIC TYPES:
-export const PICKING_LAYERS = ['paths'] as const;
+export const PICKING_LAYERS = ['paths', 'overlay'] as const;
 export type PickingLayerType = (typeof PICKING_LAYERS)[number];
 export const LAYERS = ['background', 'graduations', 'paths', 'overlay', 'captions'] as const;
 export type LayerType = (typeof LAYERS)[number];

ui-charts/src/trackOccupancyDiagram/components/TrackOccupancyStandalone.tsx

@@ -5,7 +5,7 @@ import { KebabHorizontal } from '@osrd-project/ui-icons';
 import { TRACK_HEIGHT_CONTAINER } from './consts';
 import TrackOccupancyCanvas from './TrackOccupancyCanvas';
 import TrackOccupancyManchette from './TrackOccupancyManchette';
-import type { OccupancyZone, Track } from './types';
+import type { OccupancyZone, OccupancyZonePickingElement, Track } from './types';
 import { Manchette, useManchetteWithSpaceTimeChart } from '../../manchette';
 import { SpaceTimeChart } from '../../spaceTimeChart';
 import { HOUR } from '../../spaceTimeChart/lib/consts';
@@ -14,11 +14,13 @@ const TrackOccupancyStandalone = ({
   tracks,
   occupancyZones,
   selectedTrainId,
+  onSelectedTrainIdChange,
   height = TRACK_HEIGHT_CONTAINER * tracks.length,
 }: {
   tracks: Track[];
   occupancyZones: OccupancyZone[];
   selectedTrainId?: string;
+  onSelectedTrainIdChange?: (selectedTrainId?: string) => void;
   height?: number;
 }) => {
   const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
@@ -94,7 +96,24 @@ const TrackOccupancyStandalone = ({
         >
           <Manchette {...manchetteProps} />
           <div className="space-time-chart-container w-full sticky" ref={spaceTimeChartRef}>
-            <SpaceTimeChart className="inset-0 absolute h-full" {...spaceTimeChartProps} />
+            <SpaceTimeChart
+              className="inset-0 absolute h-full"
+              {...spaceTimeChartProps}
+              onClick={
+                onSelectedTrainIdChange &&
+                (({ hoveredItem }) => {
+                  if (
+                    hoveredItem?.layer === 'overlay' &&
+                    hoveredItem.element.type === 'occupancyZone'
+                  ) {
+                    const newId = (hoveredItem.element as OccupancyZonePickingElement).trainId;
+                    onSelectedTrainIdChange(newId === selectedTrainId ? undefined : newId);
+                  } else {
+                    onSelectedTrainIdChange(undefined);
+                  }
+                })
+              }
+            />
           </div>
         </div>
       </div>

ui-charts/src/trackOccupancyDiagram/components/helpers/drawElements/drawOccupancyZones.ts

@@ -1,22 +1,13 @@
 import { drawOccupancyZonesTexts } from './drawOccupancyZonesTexts';
-import type { SpaceTimeChartContextType } from '../../../../spaceTimeChart';
-import {
-  TRACK_HEIGHT_CONTAINER,
-  CANVAS_PADDING,
-  OCCUPANCY_ZONE_Y_START,
-  OCCUPANCY_ZONE_HEIGHT,
-  FONTS,
-  COLORS,
-} from '../../consts';
-import type { OccupancyZone, Track } from '../../types';
+import { getCrispLineCoordinate, type SpaceTimeChartContextType } from '../../../../spaceTimeChart';
+import { OCCUPANCY_ZONE_Y_START, OCCUPANCY_ZONE_HEIGHT, FONTS, COLORS } from '../../consts';
+import type { OccupancyZone } from '../../types';
 
 const { SANS } = FONTS;
 const { REMAINING_TRAINS_BACKGROUND, WHITE_100, SELECTION_20 } = COLORS;
 const REMAINING_TRAINS_WIDTH = 70;
 const REMAINING_TRAINS_HEIGHT = 24;
 const REMAINING_TEXT_OFFSET = 12;
-const Y_OFFSET_INCREMENT = 4;
-const MAX_ZONES = 9;
 const X_BACKGROUND_PADDING = 4;
 const X_TROUGHTRAIN_BACKGROUND_PADDING = 8;
 const BACKGROUND_HEIGHT = 40;
@@ -61,48 +52,50 @@ const drawThroughTrain = (ctx: CanvasRenderingContext2D, x: number, y: number) =
   ctx.stroke();
 };
 
-const drawRemainingTrainsBox = ({
-  ctx,
-  remainingTrainsNb,
-  xPosition,
-  yPosition,
-}: {
-  ctx: CanvasRenderingContext2D;
-  remainingTrainsNb: number;
-  xPosition: number;
-  yPosition: number;
-}) => {
-  const textY = yPosition + OCCUPANCY_ZONE_Y_START - REMAINING_TEXT_OFFSET;
+export const drawRemainingTrainsBox = (
+  ctx: CanvasRenderingContext2D,
+  { getTimePixel, getSpacePixel }: SpaceTimeChartContextType,
+  {
+    time,
+    position,
+    yOffset,
+    remainingTrainsNb,
+  }: {
+    time: number;
+    position: number;
+    yOffset: number;
+    remainingTrainsNb: number;
+  }
+) => {
+  const x = getTimePixel(time);
+  const y = getSpacePixel(position) + yOffset;
+  const textY = y + OCCUPANCY_ZONE_Y_START - REMAINING_TEXT_OFFSET;
 
   ctx.fillStyle = REMAINING_TRAINS_BACKGROUND;
   ctx.beginPath();
-  ctx.rect(xPosition, textY, REMAINING_TRAINS_WIDTH, REMAINING_TRAINS_HEIGHT);
+  ctx.rect(x - REMAINING_TRAINS_WIDTH / 2, textY, REMAINING_TRAINS_WIDTH, REMAINING_TRAINS_HEIGHT);
   ctx.fill();
   ctx.stroke();
   ctx.fillStyle = WHITE_100;
   ctx.font = SANS;
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';
-  ctx.fillText(
-    `+${remainingTrainsNb} trains`,
-    xPosition + REMAINING_TRAINS_WIDTH / 2,
-    textY + REMAINING_TRAINS_HEIGHT / 2
-  );
+  ctx.fillText(`+${remainingTrainsNb} trains`, x, textY + REMAINING_TRAINS_HEIGHT / 2);
 };
 
-const drawOccupationZone = (
+export const drawOccupationZone = (
   ctx: CanvasRenderingContext2D,
   stcContext: SpaceTimeChartContextType,
   {
     zone,
+    yOffset,
     position,
-    yZone,
-    selectedTrainId,
+    isSelected,
   }: {
     zone: OccupancyZone;
+    yOffset: number;
     position: number;
-    yZone: number;
-    selectedTrainId?: string;
+    isSelected?: boolean;
   }
 ) => {
   const isThroughTrain = zone.arrivalTime === zone.departureTime;
@@ -114,12 +107,13 @@ const drawOccupationZone = (
   ctx.font = '400 10px IBM Plex Mono';
 
   const { getTimePixel, getSpacePixel } = stcContext;
-  const yStart = getSpacePixel(position);
+  const yStart = getCrispLineCoordinate(getSpacePixel(position), BACKGROUND_HEIGHT);
+  const y = yStart + yOffset;
   const yEnd = getSpacePixel(position, true);
   const arrivalTimePixel = getTimePixel(zone.arrivalTime);
   const departureTimePixel = getTimePixel(zone.departureTime);
 
-  if (selectedTrainId === zone.trainId) {
+  if (isSelected) {
     const extraWidth = isThroughTrain ? X_TROUGHTRAIN_BACKGROUND_PADDING : X_BACKGROUND_PADDING;
     const originTextLength = ctx.measureText(zone.originStation || '--').width;
     const destinationTextLength = ctx.measureText(zone.destinationStation || '--').width;
@@ -128,7 +122,7 @@ const drawOccupationZone = (
     ctx.beginPath();
     ctx.roundRect(
       arrivalTimePixel - originTextLength - extraWidth,
-      yZone - BACKGROUND_HEIGHT / 2,
+      y - BACKGROUND_HEIGHT / 2,
       departureTimePixel -
         arrivalTimePixel +
         originTextLength +
@@ -140,12 +134,13 @@ const drawOccupationZone = (
     ctx.fill();
   }
 
+  ctx.fillStyle = zone.color;
   if (isThroughTrain) {
-    drawThroughTrain(ctx, arrivalTimePixel, yZone);
+    drawThroughTrain(ctx, arrivalTimePixel, y);
   } else {
     drawDefaultZone(ctx, {
       x: arrivalTimePixel,
-      y: yZone,
+      y,
       width: departureTimePixel - arrivalTimePixel,
     });
   }
@@ -156,13 +151,13 @@ const drawOccupationZone = (
   ctx.setLineDash([1, 4]);
   if (zone.arrivalDirection) {
     ctx.beginPath();
-    ctx.moveTo(arrivalTimePixel, yZone);
+    ctx.moveTo(arrivalTimePixel, y);
     ctx.lineTo(arrivalTimePixel, zone.arrivalDirection === 'up' ? yStart : yEnd);
     ctx.stroke();
   }
   if (zone.departureDirection) {
     ctx.beginPath();
-    ctx.moveTo(departureTimePixel, yZone);
+    ctx.moveTo(departureTimePixel, y);
     ctx.lineTo(departureTimePixel, zone.departureDirection === 'up' ? yStart : yEnd);
     ctx.stroke();
   }
@@ -175,121 +170,7 @@ const drawOccupationZone = (
     arrivalTimePixel,
     departureTimePixel,
     isThroughTrain,
-    selectedTrainId,
-    yPosition: yZone,
-  });
-};
-
-export const drawOccupancyZones = (
-  ctx: CanvasRenderingContext2D,
-  stcContext: SpaceTimeChartContextType,
-  {
-    occupancyZones,
-    tracks,
-    position,
-    selectedTrainId,
-    topPadding = 0,
-  }: {
-    occupancyZones: OccupancyZone[];
-    tracks: Track[];
-    position: number;
-    selectedTrainId?: string;
-    topPadding?: number;
-  }
-) => {
-  if (!tracks || !occupancyZones || occupancyZones.length === 0) return;
-
-  const { getTimePixel, getSpacePixel } = stcContext;
-  const baseY = getSpacePixel(position) + topPadding;
-
-  const sortedOccupancyZones = occupancyZones.sort((a, b) => a.arrivalTime - b.arrivalTime);
-
-  tracks.forEach((track, index) => {
-    const trackY = baseY + CANVAS_PADDING + index * TRACK_HEIGHT_CONTAINER;
-
-    const filteredOccupancyZones = sortedOccupancyZones.filter((zone) => zone.trackId === track.id);
-
-    let primaryArrivalTime = 0;
-    let primaryDepartureTime = 0;
-    let lastDepartureTime = primaryDepartureTime;
-    let yPosition = OCCUPANCY_ZONE_Y_START;
-    let yOffset = Y_OFFSET_INCREMENT;
-    let zoneCounter = 0;
-    let zoneIndex = 0;
-
-    while (zoneIndex < filteredOccupancyZones.length) {
-      const zone = filteredOccupancyZones[zoneIndex];
-      const { arrivalTime, departureTime } = zone;
-
-      // * if the zone is not overlapping with any previous one, draw it in the center of the track
-      // * and reset the primary values
-      // *
-      // * if the zone is overlapping with the previous one, draw it below or above the previous one
-      // * depending on the overlapping counter
-      // *
-      // * if the zone is overlapping with the previous one and the counter is higher than the max zones
-      // * draw the remaining trains box
-      // *
-      if (arrivalTime > lastDepartureTime) {
-        // reset to initial value if the zone is not overlapping
-        yPosition = OCCUPANCY_ZONE_Y_START;
-        primaryArrivalTime = arrivalTime;
-        primaryDepartureTime = departureTime;
-        lastDepartureTime = departureTime;
-        yOffset = Y_OFFSET_INCREMENT;
-        zoneCounter = 1;
-
-        drawOccupationZone(ctx, stcContext, {
-          zone,
-          position,
-          selectedTrainId,
-          yZone: trackY + yPosition,
-        });
-
-        zoneIndex++;
-
-        continue;
-      }
-
-      if (zoneCounter < MAX_ZONES) {
-        // if so and it's an even index, move it to the bottom, if it's an odd index, move it to the top
-        if (arrivalTime >= primaryArrivalTime) {
-          if (zoneCounter % 2 === 0) {
-            yPosition -= yOffset;
-          } else {
-            yPosition += yOffset;
-          }
-        }
-
-        // update the last departure time if the current zone is longer
-        if (departureTime >= lastDepartureTime) lastDepartureTime = departureTime;
-
-        drawOccupationZone(ctx, stcContext, {
-          zone,
-          position,
-          yZone: trackY + yPosition,
-          selectedTrainId,
-        });
-
-        zoneCounter++;
-        yOffset += Y_OFFSET_INCREMENT;
-        zoneIndex++;
-
-        continue;
-      }
-
-      const nextIndex = filteredOccupancyZones.findIndex(
-        (filteredZone, i) => i > zoneIndex && filteredZone.arrivalTime >= lastDepartureTime
-      );
-
-      const remainingTrainsNb = nextIndex - zoneIndex;
-
-      const xPosition =
-        getTimePixel((primaryArrivalTime + lastDepartureTime) / 2) - REMAINING_TRAINS_WIDTH / 2;
-
-      drawRemainingTrainsBox({ ctx, remainingTrainsNb, xPosition, yPosition: trackY });
-
-      zoneIndex += remainingTrainsNb;
-    }
+    yPosition: y,
+    isSelected,
   });
 };

ui-charts/src/trackOccupancyDiagram/components/helpers/drawElements/drawOccupancyZonesTexts.ts

@@ -28,15 +28,15 @@ export const drawOccupancyZonesTexts = ({
   departureTimePixel,
   yPosition,
   isThroughTrain,
-  selectedTrainId,
+  isSelected,
 }: {
   ctx: CanvasRenderingContext2D;
   zone: OccupancyZone;
   arrivalTimePixel: number;
   departureTimePixel: number;
   yPosition: number;
   isThroughTrain: boolean;
-  selectedTrainId?: string;
+  isSelected?: boolean;
 }) => {
   const zoneOccupancyLength = departureTimePixel - arrivalTimePixel - STROKE_WIDTH;
 
@@ -66,12 +66,12 @@ export const drawOccupancyZonesTexts = ({
   const xDeparturePosition = isBelowBreakpoint('small') ? 'left' : 'center';
 
   const textStroke = {
-    color: selectedTrainId === zone.trainId ? 'transparent' : WHITE_100,
+    color: isSelected ? 'transparent' : WHITE_100,
     width: STROKE_WIDTH,
   };
 
   // train name
-  if (selectedTrainId === zone.trainId) {
+  if (isSelected) {
     const { xSelectedTrainNameBackground, ySelectedTrainNameBackground } = isBelowBreakpoint(
       'medium'
     )