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

@@ -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 = {
@@ -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={{

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,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 {