From 2b521c9d29290bce4985427e963aaea69f3d31d9 Mon Sep 17 00:00:00 2001
From: SharglutDev <p.filimon75@gmail.com>
Date: Mon, 21 Oct 2024 08:48:28 +0200
Subject: [PATCH 1/4] front: add style props to osrd menu

Signed-off-by: SharglutDev <p.filimon75@gmail.com>
---
 front/src/common/OSRDMenu.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/front/src/common/OSRDMenu.tsx b/front/src/common/OSRDMenu.tsx
index ca0ae9f2fb9..3d2d4556b88 100644
--- a/front/src/common/OSRDMenu.tsx
+++ b/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>

From 589c8f7a3380e0e2f63b591795c22e08a65b25f3 Mon Sep 17 00:00:00 2001
From: SharglutDev <p.filimon75@gmail.com>
Date: Mon, 21 Oct 2024 08:48:50 +0200
Subject: [PATCH 2/4] 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>
---
 front/public/locales/en/simulation.json       |  3 +
 front/public/locales/fr/simulation.json       |  3 +
 .../ManchetteWithSpaceTimeChart.tsx           | 43 +++++++++--
 .../SpaceTimeChart/useWaypointMenu.tsx        | 71 +++++++++++++++++++
 .../_manchetteWithSpaceTimeChart.scss         | 11 +++
 5 files changed, 126 insertions(+), 5 deletions(-)
 create mode 100644 front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx

diff --git a/front/public/locales/en/simulation.json b/front/public/locales/en/simulation.json
index 35626ce68e2..ebb7a10f083 100644
--- a/front/public/locales/en/simulation.json
+++ b/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",
diff --git a/front/public/locales/fr/simulation.json b/front/public/locales/fr/simulation.json
index b23527b586b..873f57cde7f 100644
--- a/front/public/locales/fr/simulation.json
+++ b/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",
diff --git a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx b/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
index 4fa9ae55e67..7035d012a78 100644
--- a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
+++ b/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 = {
@@ -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,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={{
diff --git a/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx b/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx
new file mode 100644
index 00000000000..868f6e49e6c
--- /dev/null
+++ b/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;
diff --git a/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss b/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss
index 7dc48d8a2e4..57c609958bb 100644
--- a/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss
+++ b/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss
@@ -37,6 +37,17 @@
   .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;
+      line-height: 1.5rem;
+      padding-block: 0.1875rem 0.3125rem;
+
+      &::after {
+        bottom: 0.9844rem;
+      }
+    }
   }
 
   .space-time-chart-container {

From 5e0bb57b3dc425a64e1086b8dac6fe99184c0f43 Mon Sep 17 00:00:00 2001
From: SharglutDev <p.filimon75@gmail.com>
Date: Wed, 23 Oct 2024 10:00:37 +0200
Subject: [PATCH 3/4] fixup! front: add waypoint menu in manchette

---
 .../ManchetteWithSpaceTimeChart.tsx                  |  9 +++------
 .../components/SpaceTimeChart/useWaypointMenu.tsx    | 12 +++++-------
 front/src/modules/simulationResult/types.ts          |  4 +++-
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx b/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
index 7035d012a78..f53fe6f9575 100644
--- a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
+++ b/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
@@ -7,7 +7,7 @@ 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 OSRDMenu from 'common/OSRDMenu';
 import type { WaypointsPanelData } from 'modules/simulationResult/types';
 
 import SettingsPanel from './SettingsPanel';
@@ -47,7 +47,6 @@ const ManchetteWithSpaceTimeChartWrapper = ({
 
   const waypointMenuData = useWaypointMenu(
     manchetteWithSpaceTimeChartRef,
-    waypointsPanelData?.filteredWaypoints,
     waypointsPanelData?.setFilteredWaypoints
   );
 
@@ -56,9 +55,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
       ...manchetteProps,
       operationalPoints: manchetteProps.operationalPoints.map((op) => ({
         ...op,
-        onClick: (id: string, ref: HTMLDivElement | null) => {
-          waypointMenuData.handleWaypointClick(id, ref);
-        },
+        onClick: waypointMenuData.handleWaypointClick,
       })),
       activeOperationalPointId: waypointMenuData.activeOperationalPointId,
     }),
@@ -87,7 +84,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
       >
         <Manchette {...manchettePropsWithWaypointMenu}>
           {waypointMenuData.menuPosition && (
-            <WaypointMenu
+            <OSRDMenu
               menuRef={waypointMenuData.menuRef}
               items={waypointMenuData.menuItems}
               style={{
diff --git a/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx b/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx
index 868f6e49e6c..1ea82fcaed1 100644
--- a/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx
+++ b/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type Dispatch, type SetStateAction } from 'react';
 
 import { EyeClosed } from '@osrd-project/ui-icons';
 import { useTranslation } from 'react-i18next';
@@ -13,8 +13,7 @@ const WAYPOINT_MENU_OFFSET = 2;
 
 const useWaypointMenu = (
   manchetteWrapperRef: React.RefObject<HTMLDivElement>,
-  filteredWaypoints?: OperationalPoint[],
-  setFilteredWaypoints?: (waypoints: OperationalPoint[]) => void
+  setFilteredWaypoints?: Dispatch<SetStateAction<OperationalPoint[]>>
 ) => {
   const { t } = useTranslation('simulation');
 
@@ -36,10 +35,9 @@ const useWaypointMenu = (
       title: t('waypointMenu.hide'),
       icon: <EyeClosed />,
       onClick: () => {
-        setMenuPosition(undefined);
-        setActiveOperationalPointId(undefined);
-        if (filteredWaypoints && setFilteredWaypoints) {
-          setFilteredWaypoints(
+        closeMenu();
+        if (setFilteredWaypoints) {
+          setFilteredWaypoints((filteredWaypoints) =>
             filteredWaypoints.filter((waypoint) => waypoint.id !== activeOperationalPointId)
           );
         }
diff --git a/front/src/modules/simulationResult/types.ts b/front/src/modules/simulationResult/types.ts
index 08f0e501d22..3757a69e605 100644
--- a/front/src/modules/simulationResult/types.ts
+++ b/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'];
 };

From bd08fcae1f6c768f7524afb7720b9c855254e609 Mon Sep 17 00:00:00 2001
From: SharglutDev <p.filimon75@gmail.com>
Date: Wed, 23 Oct 2024 10:21:16 +0200
Subject: [PATCH 4/4] fixup! front: add waypoint menu in manchette

---
 .../ManchetteWithSpaceTimeChart.tsx                        | 1 -
 .../components/SpaceTimeChart/useWaypointMenu.tsx          | 7 +------
 .../common/components/_manchetteWithSpaceTimeChart.scss    | 5 +++++
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx b/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
index f53fe6f9575..49129165db1 100644
--- a/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
+++ b/front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx
@@ -88,7 +88,6 @@ const ManchetteWithSpaceTimeChartWrapper = ({
               menuRef={waypointMenuData.menuRef}
               items={waypointMenuData.menuItems}
               style={{
-                width: '305px',
                 top: waypointMenuData.menuPosition.top,
                 left: waypointMenuData.menuPosition.left,
               }}
diff --git a/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx b/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx
index 1ea82fcaed1..a1b39cece82 100644
--- a/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx
+++ b/front/src/modules/simulationResult/components/SpaceTimeChart/useWaypointMenu.tsx
@@ -9,7 +9,6 @@ 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>,
@@ -53,11 +52,7 @@ const useWaypointMenu = (
     // 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,
+      top: position.bottom - manchetteWrapperPosition.top + SPACETIME_CHART_HEADER_HEIGHT,
       left: position.left - manchetteWrapperPosition.left,
     });
     setActiveOperationalPointId(id);
diff --git a/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss b/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss
index 57c609958bb..a64fab6565c 100644
--- a/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss
+++ b/front/src/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss
@@ -38,6 +38,11 @@
     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;