front: add waypoint menu in manchette

- When clicking on a waypoint in the manchette, display a menu with some
actions
- Only action for now is to hide the waypoint in the manchette

Signed-off-by: SharglutDev <p.filimon75@gmail.com>

Author: SharglutDev

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/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 WaypointMenu 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 = {
@@ -32,6 +34,8 @@ const ManchetteWithSpaceTimeChartWrapper = ({
   const [heightOfManchetteWithSpaceTimeChart] = useState(DEFAULT_HEIGHT);
   const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
 
+  const [showSettingsPanel, setShowSettingsPanel] = useState(false);
+  const [settings, setSettings] = useState({ showConflicts: false });
   const [waypointsPanelIsOpen, setWaypointsPanelIsOpen] = useState(false);
 
   const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchettesWithSpaceTimeChart(
@@ -41,8 +45,25 @@ const ManchetteWithSpaceTimeChartWrapper = ({
     selectedTrainScheduleId
   );
 
-  const [showSettingsPanel, setShowSettingsPanel] = useState(false);
-  const [settings, setSettings] = useState({ showConflicts: false });
+  const waypointMenuData = useWaypointMenu(
+    manchetteWithSpaceTimeChartRef,
+    waypointsPanelData?.filteredWaypoints,
+    waypointsPanelData?.setFilteredWaypoints
+  );
+
+  const manchettePropsWithWaypointMenu = useMemo(
+    () => ({
+      ...manchetteProps,
+      operationalPoints: manchetteProps.operationalPoints.map((op) => ({
+        ...op,
+        onClick: (id: string, ref: HTMLDivElement | null) => {
+          waypointMenuData.handleWaypointClick(id, ref);
+        },
+      })),
+      activeOperationalPointId: waypointMenuData.activeOperationalPointId,
+    }),
+    [manchetteProps, waypointMenuData]
+  );
 
   return (
     <div className="manchette-space-time-chart-wrapper">
@@ -64,7 +85,19 @@ const ManchetteWithSpaceTimeChartWrapper = ({
         style={{ height: `${heightOfManchetteWithSpaceTimeChart}px` }}
         onScroll={handleScroll}
       >
-        <Manchette {...manchetteProps} />
+        <Manchette {...manchettePropsWithWaypointMenu}>
+          {waypointMenuData.menuPosition && (
+            <WaypointMenu
+              menuRef={waypointMenuData.menuRef}
+              items={waypointMenuData.menuItems}
+              style={{
+                width: '305px',
+                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,71 @@
+import React, { useRef, useState } 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 WAYPOINT_MENU_OFFSET = 2;
+
+const useWaypointMenu = (
+  manchetteWrapperRef: React.RefObject<HTMLDivElement>,
+  filteredWaypoints?: OperationalPoint[],
+  setFilteredWaypoints?: (waypoints: OperationalPoint[]) => void
+) => {
+  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: () => {
+        setMenuPosition(undefined);
+        setActiveOperationalPointId(undefined);
+        if (filteredWaypoints && setFilteredWaypoints) {
+          setFilteredWaypoints(
+            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 -
+        WAYPOINT_MENU_OFFSET,
+      left: position.left - manchetteWrapperPosition.left,
+    });
+    setActiveOperationalPointId(id);
+  };
+
+  return { menuRef, menuPosition, menuItems, activeOperationalPointId, handleWaypointClick };
+};
+
+export default useWaypointMenu;

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

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