ui-manchette: highlight selected train

Author: Math-R

ui-manchette/src/components/Manchette.tsx

@@ -23,6 +23,7 @@ import { useIsOverflow } from '../hooks/useIsOverFlow';
 type ManchetteProps = {
   operationalPoints: OperationalPointType[];
   projectPathTrainResult: ProjectPathTrainResult[];
+  selectedProjection?: number;
 };
 import usePaths from '../hooks/usePaths';
 import type {
@@ -32,7 +33,11 @@ import type {
 } from '../types';
 import { getDiff } from '../utils/vector';
 
-const Manchette: FC<ManchetteProps> = ({ operationalPoints, projectPathTrainResult }) => {
+const Manchette: FC<ManchetteProps> = ({
+  operationalPoints,
+  projectPathTrainResult,
+  selectedProjection,
+}) => {
   const manchette = useRef<HTMLDivElement>(null);
 
   const [state, setState] = useState<{
@@ -74,7 +79,7 @@ const Manchette: FC<ManchetteProps> = ({ operationalPoints, projectPathTrainResu
     scales,
   } = state;
 
-  const paths = usePaths(projectPathTrainResult);
+  const paths = usePaths(projectPathTrainResult, selectedProjection);
 
   const zoomYIn = useCallback(() => {
     if (yZoom < MAX_ZOOM_Y) setState((prev) => ({ ...prev, yZoom: yZoom + ZOOM_Y_DELTA }));

ui-manchette/src/hooks/usePaths.ts

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

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

@@ -23,6 +23,12 @@ const meta: Meta<typeof Manchette> = {
         type: 'object',
       },
     },
+    selectedProjection: {
+      options: [undefined, ...SAMPLE_PATHS_DATA.map((path) => path.id)],
+      control: {
+        type: 'select',
+      },
+    },
   },
 };
 
@@ -33,5 +39,6 @@ export const Default: Story = {
   args: {
     operationalPoints: OperationalPointListData,
     projectPathTrainResult: PathData,
+    selectedProjection: 3,
   },
 };

ui-manchette/src/stories/assets/sampleData.ts

@@ -186,6 +186,8 @@ export const SAMPLE_PATH_PROPERTIES_DATA: PathProperties = {
 
 export const SAMPLE_PATHS_DATA: ProjectPathTrainResult[] = [
   {
+    id: 1,
+    name: 'Train 1',
     departure_time: '2024-06-26T13:57:56Z',
     rolling_stock_length: 26070,
     space_time_curves: [
@@ -623,6 +625,8 @@ export const SAMPLE_PATHS_DATA: ProjectPathTrainResult[] = [
     ],
   },
   {
+    id: 2,
+    name: 'Train 2',
     departure_time: '2024-06-26T13:42:56Z',
     rolling_stock_length: 26070,
     space_time_curves: [
@@ -1060,6 +1064,8 @@ export const SAMPLE_PATHS_DATA: ProjectPathTrainResult[] = [
     ],
   },
   {
+    id: 3,
+    name: 'Train 3',
     departure_time: '2024-06-26T14:12:56Z',
     rolling_stock_length: 26070,
     space_time_curves: [

ui-manchette/src/types.ts

@@ -89,6 +89,10 @@ export type StyledOperationalPointType = OperationalPointType & {
 };
 
 export type ProjectPathTrainResult = {
+  /*Name of train */
+  name: string;
+  /*Id of train */
+  id: number;
   /** List of signal updates along the path */
   signal_updates: {
     /** The labels of the new aspect */