fixup! ui-manchette: highlight selected train

Author: Math-R

ui-manchette/src/components/Manchette.tsx

@@ -23,7 +23,7 @@ import { useIsOverflow } from '../hooks/useIsOverFlow';
 type ManchetteProps = {
   operationalPoints: OperationalPointType[];
   projectPathTrainResult: ProjectPathTrainResult[];
-  selectedProjection: number;
+  selectedProjection?: number;
 };
 import usePaths from '../hooks/usePaths';
 import type {

ui-manchette/src/hooks/usePaths.ts

@@ -8,12 +8,15 @@ const transformCurve = (curve: SpaceTimeCurves, departureTime: string) =>
     position,
   }));
 
-const usePaths = (projectPathTrainResult: ProjectPathTrainResult[], selectedProjection: number) => {
+const usePaths = (
+  projectPathTrainResult: ProjectPathTrainResult[],
+  selectedProjection?: number
+) => {
   return useMemo(() => {
     return projectPathTrainResult.map((path) => ({
       id: `${path.id}`,
       label: path.name,
-      color: selectedProjection === path.id ? '#201EDE' : '#000000',
+      color: selectedProjection && selectedProjection === path.id ? '#201EDE' : '#000000',
       points: path.space_time_curves.flatMap((curve) => transformCurve(curve, path.departure_time)),
     }));
   }, [projectPathTrainResult, selectedProjection]);

ui-manchette/src/stories/Manchette.stories.ts

@@ -24,7 +24,7 @@ const meta: Meta<typeof Manchette> = {
       },
     },
     selectedProjection: {
-      options: SAMPLE_PATHS_DATA.map((path) => path.id),
+      options: [undefined, ...SAMPLE_PATHS_DATA.map((path) => path.id)],
       control: {
         type: 'select',
       },