front: add a new util function to determine the style of an hovered path

Signed-off-by: Math_R_ <[email protected]>
OpenRailAssociation · Jan 16, 2025 · 51a7a73 · 51a7a73
1 parent 04d380d
commit 51a7a73
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/...s/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx b/...s/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
@@ -39,7 +39,7 @@ import { updateSelectedTrainId } from 'reducers/simulationResults';
 import { useAppDispatch } from 'store';
 
 import SettingsPanel from './SettingsPanel';
-import { getIdFromTrainPath } from './utils';
+import { getIdFromTrainPath, getPathStyle } from './utils';
 import ManchetteMenuButton from '../SpaceTimeChart/ManchetteMenuButton';
 import ProjectionLoadingMessage from '../SpaceTimeChart/ProjectionLoadingMessage';
 import useWaypointMenu from '../SpaceTimeChart/useWaypointMenu';
@@ -393,7 +393,11 @@ const ManchetteWithSpaceTimeChartWrapper = ({
             onHoveredChildUpdate={handleHoveredChildUpdate}
           >
             {spaceTimeChartProps.paths.map((path) => (
-              <PathLayer key={path.id} path={path} color={path.color} />
+              <PathLayer
+                key={path.id}
+                path={path}
+                {...getPathStyle(hoveredItem, path, !!draggingState)}
+              />
             ))}
             {workSchedules && (
               <WorkScheduleLayer

diff --git a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/utils.ts b/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/utils.ts
@@ -1,2 +1,18 @@
+import type { PathLevel } from '@osrd-project/ui-spacetimechart';
+import type { HoveredItem } from '@osrd-project/ui-spacetimechart/dist/lib/types';
+
+import { PATH_COLORS } from 'modules/simulationResult/consts';
+
 /* eslint-disable import/prefer-default-export */
 export const getIdFromTrainPath = (trainPath: string): number => +trainPath.split('-')[0];
+
+export const getPathStyle = (
+  hovered: HoveredItem | null,
+  path: { color: string; id: string },
+  dragging: boolean
+): { color: string; level?: PathLevel } => {
+  if (hovered && 'pathId' in hovered.element && path.id === hovered?.element.pathId && !dragging) {
+    return { color: PATH_COLORS.HOVERED_PATH, level: 1 };
+  }
+  return { color: path.color };
+};
diff --git a/front/src/modules/simulationResult/consts.ts b/front/src/modules/simulationResult/consts.ts
@@ -65,3 +65,7 @@ export const ASPECT_LABELS_COLORS: Record<AspectLabel, string> = {
   '080A': OCCUPANCY_BLOCKS_COLORS.GREY,
   '000': OCCUPANCY_BLOCKS_COLORS.GREY,
 };
+
+export const PATH_COLORS = {
+  HOVERED_PATH: '#6B532E',
+};