front: add waypoint menu in manchette

front/public/locales/en/simulation.json

@@ -84,6 +84,9 @@
  },
  "trainList": "Train list",
  "waiting": "Loading...",
+ "waypointMenu": {
+ "hide": "Hide this OP"
+ },
  "waypointsPanel": {
  "name": "name",
  "secondaryCode": "CH",

front/public/locales/fr/simulation.json

@@ -84,6 +84,9 @@
  },
  "trainList": "Liste des trains",
  "waiting": "Chargement en cours…",
+ "waypointMenu": {
+ "hide": "Masquer ce PR"
+ },
  "waypointsPanel": {
  "name": "nom",
  "secondaryCode": "CH",

front/src/common/OSRDMenu.tsx

@@ -9,10 +9,11 @@ export type OSRDMenuItem = {
 type OSRDMenuProps = {
  menuRef: React.RefObject<HTMLDivElement>;
  items: OSRDMenuItem[];
+ style?: React.CSSProperties;
 };
 
-const OSRDMenu = ({ menuRef, items }: OSRDMenuProps) => (
- <div ref={menuRef} className="osrd-menu">
+const OSRDMenu = ({ menuRef, items, style }: OSRDMenuProps) => (
+ <div ref={menuRef} className="osrd-menu" style={style}>
  {items.map(({ title, icon, onClick }) => (
  <button key={title} type="button" className="menu-item" onClick={onClick}>
  <span className="icon">{icon}</span>

front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 import { KebabHorizontal } from '@osrd-project/ui-icons';
 import { Manchette } from '@osrd-project/ui-manchette';
@@ -7,10 +7,12 @@ import { ConflictLayer, PathLayer, SpaceTimeChart } from '@osrd-project/ui-space
 import type { Conflict } from '@osrd-project/ui-spacetimechart';
 
 import type { OperationalPoint, TrainSpaceTimeData } from 'applications/operationalStudies/types';
+import OSRDMenu from 'common/OSRDMenu';
 import type { WaypointsPanelData } from 'modules/simulationResult/types';
 
 import SettingsPanel from './SettingsPanel';
 import ManchetteMenuButton from '../SpaceTimeChart/ManchetteMenuButton';
+import useWaypointMenu from '../SpaceTimeChart/useWaypointMenu';
 import WaypointsPanel from '../SpaceTimeChart/WaypointsPanel';
 
 type ManchetteWithSpaceTimeChartProps = {
@@ -29,9 +31,11 @@ const ManchetteWithSpaceTimeChartWrapper = ({
  waypointsPanelData,
  conflicts = [],
 }: ManchetteWithSpaceTimeChartProps) => {
- const [heightOfManchetteWithSpaceTimeChart] = useState(DEFAULT_HEIGHT);
  const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
 
+ const [heightOfManchetteWithSpaceTimeChart] = useState(DEFAULT_HEIGHT);
+ const [showSettingsPanel, setShowSettingsPanel] = useState(false);
+ const [settings, setSettings] = useState({ showConflicts: false });
  const [waypointsPanelIsOpen, setWaypointsPanelIsOpen] = useState(false);
 
  const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchettesWithSpaceTimeChart(
@@ -41,8 +45,22 @@ const ManchetteWithSpaceTimeChartWrapper = ({
  selectedTrainScheduleId
  );
 
- const [showSettingsPanel, setShowSettingsPanel] = useState(false);
- const [settings, setSettings] = useState({ showConflicts: false });
+ const waypointMenuData = useWaypointMenu(
+ manchetteWithSpaceTimeChartRef,
+ waypointsPanelData?.setFilteredWaypoints
+ );
+
+ const manchettePropsWithWaypointMenu = useMemo(
+ () => ({
+ ...manchetteProps,
+ operationalPoints: manchetteProps.operationalPoints.map((op) => ({
+ ...op,
+ onClick: waypointMenuData.handleWaypointClick,
+ })),
+ activeOperationalPointId: waypointMenuData.activeOperationalPointId,
+ }),
+ [manchetteProps, waypointMenuData]
+ );
 
  return (
  <div className="manchette-space-time-chart-wrapper">
@@ -64,7 +82,18 @@ const ManchetteWithSpaceTimeChartWrapper = ({
  style={{ height: `${heightOfManchetteWithSpaceTimeChart}px` }}
  onScroll={handleScroll}
  >
- <Manchette {...manchetteProps} />
+ <Manchette {...manchettePropsWithWaypointMenu}>
+ {waypointMenuData.menuPosition && (
+ <OSRDMenu
+ menuRef={waypointMenuData.menuRef}
+ items={waypointMenuData.menuItems}
+ style={{
+ top: waypointMenuData.menuPosition.top,
+ left: waypointMenuData.menuPosition.left,
+ }}
+ />
+ )}
+ </Manchette>
  <div
  className="space-time-chart-container"
  style={{

front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx

@@ -0,0 +1,64 @@
+import React, { useRef, useState, type Dispatch, type SetStateAction } from 'react';
+
+import { EyeClosed } from '@osrd-project/ui-icons';
+import { useTranslation } from 'react-i18next';
+
+import type { OperationalPoint } from 'applications/operationalStudies/types';
+import type { OSRDMenuItem } from 'common/OSRDMenu';
+import useModalFocusTrap from 'utils/hooks/useModalFocusTrap';
+import useOutsideClick from 'utils/hooks/useOutsideClick';
+
+const SPACETIME_CHART_HEADER_HEIGHT = 40;
+
+const useWaypointMenu = (
+ manchetteWrapperRef: React.RefObject<HTMLDivElement>,
+ setFilteredWaypoints?: Dispatch<SetStateAction<OperationalPoint[]>>
+) => {
+ const { t } = useTranslation('simulation');
+
+ const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>();
+ const [activeOperationalPointId, setActiveOperationalPointId] = useState<string>();
+
+ const menuRef = useRef<HTMLDivElement>(null);
+
+ const closeMenu = () => {
+ setMenuPosition(undefined);
+ setActiveOperationalPointId(undefined);
+ };
+
+ useOutsideClick(menuRef, closeMenu);
+ useModalFocusTrap(menuRef, closeMenu);
+
+ const menuItems: OSRDMenuItem[] = [
+ {
+ title: t('waypointMenu.hide'),
+ icon: <EyeClosed />,
+ onClick: () => {
+ closeMenu();
+ if (setFilteredWaypoints) {
+ setFilteredWaypoints((filteredWaypoints) =>
+ filteredWaypoints.filter((waypoint) => waypoint.id !== activeOperationalPointId)
+ );
+ }
+ },
+ },
+ ];
+
+ const handleWaypointClick = (id: string, ref: HTMLDivElement | null) => {
+ if (!ref || !manchetteWrapperRef.current) return;
+ const position = ref.getBoundingClientRect();
+ const manchetteWrapperPosition = manchetteWrapperRef.current.getBoundingClientRect();
+
+ // The position of the clicked waypoint is relative to the viewport so we need to
+ // substract the position of the manchetteWrapper to get the accurate position
+ setMenuPosition({
+ top: position.bottom - manchetteWrapperPosition.top + SPACETIME_CHART_HEADER_HEIGHT,
+ left: position.left - manchetteWrapperPosition.left,
+ });
+ setActiveOperationalPointId(id);
+ };
+
+ return { menuRef, menuPosition, menuItems, activeOperationalPointId, handleWaypointClick };
+};
+
+export default useWaypointMenu;

front/src/modules/simulationResult/types.ts

@@ -1,3 +1,5 @@
+import type { Dispatch, SetStateAction } from 'react';
+
 import type {
  LayerData,
  PowerRestrictionValues,
@@ -38,6 +40,6 @@ export type ProjectionData = {
 
 export type WaypointsPanelData = {
  filteredWaypoints: OperationalPoint[];
- setFilteredWaypoints: (waypoints: OperationalPoint[]) => void;
+ setFilteredWaypoints: Dispatch<SetStateAction<OperationalPoint[]>>;
  projectionPath: TrainScheduleBase['path'];
 };

front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss

@@ -37,6 +37,22 @@
  .manchette {
  overflow-y: auto;
  overflow-x: hidden;
+
+ .osrd-menu {
+ width: 305px;
+ margin-top: -2px;
+ }
+
+ // TODO : remove this two styles when https://github.com/OpenRailAssociation/osrd-ui/issues/654 is fixed
+ .op {
+ height: 2rem;
+ line-height: 1.5rem;
+ padding-block: 0.1875rem 0.3125rem;
+
+ &::after {
+ bottom: 0.9844rem;
+ }
+ }
  }
 
  .space-time-chart-container {