ui-manchette: fix waypoint menu positioning

- Move the menu next to its related waypoint so it can always be positioned relatively to it - To keep osrd-ui as neutral as possible, the menu has no styles, they need to be passed by props - Add a custom hook using the intersection observer api. This will allow the menu to hide when its waypoint is hidden on scroll - This hook will remain in osrd-ui to prevent a user to have the implement this necessary logic when adding a waypoint menu to the manchette Signed-off-by: SharglutDev <[email protected]>
OpenRailAssociation · Dec 5, 2024 · f3bb01f · f3bb01f
1 parent de3e20e
commit f3bb01f
Show file tree

Hide file tree

Showing 16 changed files with 440 additions and 178 deletions.
diff --git a/ui-manchette-with-spacetimechart/src/assets/sampleData.ts b/ui-manchette-with-spacetimechart/src/assets/sampleData.ts
@@ -3,106 +3,226 @@ import { type ProjectPathTrainResult, type Waypoint } from '@osrd-project/ui-man
 
 export const SAMPLE_WAYPOINTS: Waypoint[] = [
   {
-    id: 'South_West_station',
-    name: 'South_West_station',
-    secondaryCode: 'BV',
+    id: '1',
     position: 0,
+    name: 'Brest',
+    secondaryCode: 'BV',
+  },
+  {
+    id: '2',
+    position: 3983000,
+    name: 'Le Rody',
+    secondaryCode: '00',
   },
   {
-    id: 'Mid_West_station',
-    name: 'Mid_West_station',
+    id: '3',
+    position: 7349000,
+    name: 'Kerhuon',
     secondaryCode: 'BV',
-    position: 13000000,
   },
   {
-    id: 'Mid_East_station',
-    name: 'Mid_East_station',
+    id: '4',
+    position: 13882000,
+    name: 'La Forest',
+    secondaryCode: '00',
+  },
+  {
+    id: '5',
+    position: 18756000,
+    name: 'Landerneau',
     secondaryCode: 'BV',
-    position: 27550000,
   },
   {
-    id: 'North_East_station',
-    name: 'North_East_station',
+    id: '6',
+    position: 23358000,
+    name: 'La Roche',
+    secondaryCode: '00',
+  },
+  {
+    id: '7',
+    position: 33219000,
+    name: 'Landivisiau',
+    secondaryCode: '00',
+  },
+  {
+    id: '8',
+    position: 40612000,
+    name: 'Guimiliau',
+    secondaryCode: '00',
+  },
+  {
+    id: '9',
+    position: 44960000,
+    name: 'St-Thégonnec',
+    secondaryCode: '00',
+  },
+  {
+    id: '10',
+    position: 50471000,
+    name: 'Pleyber-Christ',
+    secondaryCode: '00',
+  },
+  {
+    id: '11',
+    position: 59554000,
+    name: 'Morlaix',
+    secondaryCode: 'BV',
+  },
+  {
+    id: '12',
+    position: 68903000,
+    name: 'Plouigneau',
+    secondaryCode: '00',
+  },
+  {
+    id: '13',
+    position: 83194000,
+    name: 'Plounérin',
+    secondaryCode: '00',
+  },
+  {
+    id: '14',
+    position: 91392000,
+    name: 'Plouaret',
+    secondaryCode: '00',
+  },
+  {
+    id: '15',
+    position: 102478000,
+    name: 'Belle-Isle-Bégard',
+    secondaryCode: '00',
+  },
+  {
+    id: '16',
+    position: 117570000,
+    name: 'Guingamp',
+    secondaryCode: '00',
+  },
+  {
+    id: '17',
+    position: 130463000,
+    name: 'Châtelaudren-Plouagat',
+    secondaryCode: 'BV',
+  },
+  {
+    id: '18',
+    position: 137315000,
+    name: 'Plouvara-Plerneuf',
+    secondaryCode: '00',
+  },
+  {
+    id: '19',
+    position: 141157000,
+    name: 'La Méaugon',
+    secondaryCode: '00',
+  },
+  {
+    id: '20',
+    position: 147745000,
+    name: 'St-Brieuc',
+    secondaryCode: 'BV',
+  },
+  {
+    id: '21',
+    position: 157361000,
+    name: 'Yffiniac',
+    secondaryCode: '00',
+  },
+  {
+    id: '22',
+    position: 168056000,
+    name: 'Lamballe',
     secondaryCode: 'BV',
-    position: 47050000,
   },
 ];
 
 export const SAMPLE_PATHS_DATA: ProjectPathTrainResult[] = [
   {
     id: 1,
     name: 'Train 1',
-    departureTime: new Date('2024-06-26T13:57:56Z'),
+    departureTime: new Date('2024-10-23T09:00:00Z'),
     spaceTimeCurves: [
       {
         positions: [
-          0, 2387, 8642, 17449, 28163, 68719, 118795, 196855, 406366, 706610, 1102281, 1593458,
-          2283409, 3769056, 6017136, 6717050, 7000182, 9027079, 9707244, 9996142, 12098691,
-          12253708, 12305708, 12368708, 12400708, 12424708, 12440708, 12445708, 12448708, 12449708,
-          12449708, 12452095, 12458350, 12467157, 12490130, 12534192, 12586918, 12734703, 12960612,
-          13274175, 13680049, 14178452, 14981343, 15960690, 18996492, 19991990, 20987213, 22014758,
-          22841279, 23850682, 26994761, 28007168, 29005477, 30000065, 32001426, 34522793, 44638554,
-          44776040, 44832040, 44901040, 44937040, 44976040, 44992040, 44997040, 45000040, 45001040,
+          0, 973, 3888, 8737, 24205, 47311, 96148, 138058, 214779, 307916, 417225, 587701, 785672,
+          1189417, 1740630, 18354735, 18756000, 33419000, 33941065, 46298000, 46456685, 46704905,
+          47993924, 57127089, 57572008, 57918672, 58233336, 58516000, 59423000, 59568935, 59686000,
+          59902000, 60254993, 60721538, 61496476, 62320048, 68922269, 69447000, 82202000, 83877014,
+          85097789, 85140266, 89756800, 90298672, 90868000, 117770000, 118043180, 118327970,
+          119238293, 120110374, 121572153, 126517715, 127501896, 128277000, 140917870, 141157000,
+          156005000, 156818235, 157861414, 158428394, 159444615, 164321446, 165140000, 165940000,
+          166535000, 166831000, 167095000, 167272000, 167480000, 167656000, 167800000, 167912000,
+          167956000, 167992000, 168020000, 168040000, 168052000, 168055000, 168056000,
         ],
         times: [
-          0, 42000, 44000, 46000, 48000, 54000, 60000, 68000, 86000, 108000, 134000, 164000, 204000,
-          286000, 406000, 442000, 456000, 558000, 594000, 610000, 724159, 733630, 737630, 743630,
-          747630, 751630, 755630, 757630, 759630, 761630, 821630, 823630, 825630, 827630, 831630,
-          837630, 843630, 857630, 875630, 897630, 923630, 953630, 999630, 1053630, 1215630, 1269630,
-          1327630, 1389630, 1437630, 1493630, 1661630, 1713630, 1761630, 1807630, 1903630, 2031630,
-          2561539, 2569617, 2573617, 2579617, 2583617, 2589617, 2593617, 2595617, 2597617, 2599617,
+          0, 2000, 4000, 6000, 10000, 14000, 20000, 24000, 30000, 36000, 42000, 50000, 58000, 72000,
+          87695, 514914, 526026, 965920, 980356, 1298104, 1302104, 1308104, 1336119, 1518782,
+          1528116, 1536116, 1544116, 1552116, 1579327, 1583595, 1587019, 1593499, 1603499, 1615499,
+          1633499, 1650729, 1782773, 1793885, 2080876, 2114460, 2136460, 2137226, 2220323, 2230547,
+          2242547, 2847848, 2853848, 2859848, 2877848, 2893848, 2918783, 2999711, 3017045, 3033045,
+          3317467, 3323021, 3679370, 3697370, 3717370, 3727370, 3744455, 3824258, 3838480, 3854480,
+          3868480, 3876480, 3884480, 3890480, 3898480, 3906480, 3914480, 3922480, 3926480, 3930480,
+          3934480, 3938480, 3942480, 3944480, 3946480,
         ],
       },
     ],
   },
   {
     id: 2,
     name: 'Train 2',
-    departureTime: new Date('2024-06-26T13:42:56Z'),
+    departureTime: new Date('2024-10-23T09:15:00Z'),
     spaceTimeCurves: [
       {
         positions: [
-          0, 2387, 8642, 17449, 28163, 68719, 118795, 196855, 406366, 706610, 1102281, 1593458,
-          2283409, 3769056, 6017136, 6717050, 7000182, 9027079, 9707244, 9996142, 12098691,
-          12253708, 12305708, 12368708, 12400708, 12424708, 12440708, 12445708, 12448708, 12449708,
-          12449708, 12452095, 12458350, 12467157, 12490130, 12534192, 12586918, 12734703, 12960612,
-          13274175, 13680049, 14178452, 14981343, 15960690, 18996492, 19991990, 20987213, 22014758,
-          22841279, 23850682, 26994761, 28007168, 29005477, 30000065, 32001426, 34522793, 44638554,
-          44776040, 44832040, 44901040, 44937040, 44976040, 44992040, 44997040, 45000040, 45001040,
+          0, 973, 3888, 8737, 24205, 47311, 96148, 138058, 214779, 307916, 417225, 587701, 785672,
+          1189417, 1740630, 18354735, 18756000, 33419000, 33941065, 46298000, 46456685, 46704905,
+          47993924, 57127089, 57572008, 57918672, 58233336, 58516000, 59423000, 59568935, 59686000,
+          59902000, 60254993, 60721538, 61496476, 62320048, 68922269, 69447000, 82202000, 83877014,
+          85097789, 85140266, 89756800, 90298672, 90868000, 117770000, 118043180, 118327970,
+          119238293, 120110374, 121572153, 126517715, 127501896, 128277000, 140917870, 141157000,
+          156005000, 156818235, 157861414, 158428394, 159444615, 164321446, 165140000, 165940000,
+          166535000, 166831000, 167095000, 167272000, 167480000, 167656000, 167800000, 167912000,
+          167956000, 167992000, 168020000, 168040000, 168052000, 168055000, 168056000,
         ],
         times: [
-          0, 42000, 44000, 46000, 48000, 54000, 60000, 68000, 86000, 108000, 134000, 164000, 204000,
-          286000, 406000, 442000, 456000, 558000, 594000, 610000, 724159, 733630, 737630, 743630,
-          747630, 751630, 755630, 757630, 759630, 761630, 821630, 823630, 825630, 827630, 831630,
-          837630, 843630, 857630, 875630, 897630, 923630, 953630, 999630, 1053630, 1215630, 1269630,
-          1327630, 1389630, 1437630, 1493630, 1661630, 1713630, 1761630, 1807630, 1903630, 2031630,
-          2561539, 2569617, 2573617, 2579617, 2583617, 2589617, 2593617, 2595617, 2597617, 2599617,
+          0, 2000, 4000, 6000, 10000, 14000, 20000, 24000, 30000, 36000, 42000, 50000, 58000, 72000,
+          87695, 514914, 526026, 965920, 980356, 1298104, 1302104, 1308104, 1336119, 1518782,
+          1528116, 1536116, 1544116, 1552116, 1579327, 1583595, 1587019, 1593499, 1603499, 1615499,
+          1633499, 1650729, 1782773, 1793885, 2080876, 2114460, 2136460, 2137226, 2220323, 2230547,
+          2242547, 2847848, 2853848, 2859848, 2877848, 2893848, 2918783, 2999711, 3017045, 3033045,
+          3317467, 3323021, 3679370, 3697370, 3717370, 3727370, 3744455, 3824258, 3838480, 3854480,
+          3868480, 3876480, 3884480, 3890480, 3898480, 3906480, 3914480, 3922480, 3926480, 3930480,
+          3934480, 3938480, 3942480, 3944480, 3946480,
         ],
       },
     ],
   },
   {
     id: 3,
     name: 'Train 3',
-    departureTime: new Date('2024-06-26T14:12:56Z'),
+    departureTime: new Date('2024-10-23T09:30:00Z'),
     spaceTimeCurves: [
       {
         positions: [
-          0, 2387, 8642, 17449, 28163, 68719, 118795, 196855, 406366, 706610, 1102281, 1593458,
-          2283409, 3769056, 6017136, 6717050, 7000182, 9027079, 9707244, 9996142, 12098691,
-          12253708, 12305708, 12368708, 12400708, 12424708, 12440708, 12445708, 12448708, 12449708,
-          12449708, 12452095, 12458350, 12467157, 12490130, 12534192, 12586918, 12734703, 12960612,
-          13274175, 13680049, 14178452, 14981343, 15960690, 18996492, 19991990, 20987213, 22014758,
-          22841279, 23850682, 26994761, 28007168, 29005477, 30000065, 32001426, 34522793, 44638554,
-          44776040, 44832040, 44901040, 44937040, 44976040, 44992040, 44997040, 45000040, 45001040,
+          0, 973, 3888, 8737, 24205, 47311, 96148, 138058, 214779, 307916, 417225, 587701, 785672,
+          1189417, 1740630, 18354735, 18756000, 33419000, 33941065, 46298000, 46456685, 46704905,
+          47993924, 57127089, 57572008, 57918672, 58233336, 58516000, 59423000, 59568935, 59686000,
+          59902000, 60254993, 60721538, 61496476, 62320048, 68922269, 69447000, 82202000, 83877014,
+          85097789, 85140266, 89756800, 90298672, 90868000, 117770000, 118043180, 118327970,
+          119238293, 120110374, 121572153, 126517715, 127501896, 128277000, 140917870, 141157000,
+          156005000, 156818235, 157861414, 158428394, 159444615, 164321446, 165140000, 165940000,
+          166535000, 166831000, 167095000, 167272000, 167480000, 167656000, 167800000, 167912000,
+          167956000, 167992000, 168020000, 168040000, 168052000, 168055000, 168056000,
         ],
         times: [
-          0, 42000, 44000, 46000, 48000, 54000, 60000, 68000, 86000, 108000, 134000, 164000, 204000,
-          286000, 406000, 442000, 456000, 558000, 594000, 610000, 724159, 733630, 737630, 743630,
-          747630, 751630, 755630, 757630, 759630, 761630, 821630, 823630, 825630, 827630, 831630,
-          837630, 843630, 857630, 875630, 897630, 923630, 953630, 999630, 1053630, 1215630, 1269630,
-          1327630, 1389630, 1437630, 1493630, 1661630, 1713630, 1761630, 1807630, 1903630, 2031630,
-          2561539, 2569617, 2573617, 2579617, 2583617, 2589617, 2593617, 2595617, 2597617, 2599617,
+          0, 2000, 4000, 6000, 10000, 14000, 20000, 24000, 30000, 36000, 42000, 50000, 58000, 72000,
+          87695, 514914, 526026, 965920, 980356, 1298104, 1302104, 1308104, 1336119, 1518782,
+          1528116, 1536116, 1544116, 1552116, 1579327, 1583595, 1587019, 1593499, 1603499, 1615499,
+          1633499, 1650729, 1782773, 1793885, 2080876, 2114460, 2136460, 2137226, 2220323, 2230547,
+          2242547, 2847848, 2853848, 2859848, 2877848, 2893848, 2918783, 2999711, 3017045, 3033045,
+          3317467, 3323021, 3679370, 3697370, 3717370, 3727370, 3744455, 3824258, 3838480, 3854480,
+          3868480, 3876480, 3884480, 3890480, 3898480, 3906480, 3914480, 3922480, 3926480, 3930480,
+          3934480, 3938480, 3942480, 3944480, 3946480,
         ],
       },
     ],

diff --git a/ui-manchette/src/stories/components/Menu.tsx → ...-with-spacetimechart/src/stories/Menu.tsx b/ui-manchette/src/stories/components/Menu.tsx → ...-with-spacetimechart/src/stories/Menu.tsx
@@ -3,17 +3,18 @@ import React from 'react';
 export type MenuItem = {
   title: string;
   icon: React.ReactNode;
-  onClick: () => void;
+  onClick: (e: React.MouseEvent) => void;
 };
 
 type MenuProps = {
-  menuRef: React.RefObject<HTMLDivElement>;
   items: MenuItem[];
-  style?: React.CSSProperties;
 };
 
-const Menu = ({ menuRef, items, style }: MenuProps) => (
-  <div ref={menuRef} className="menu" style={style}>
+/**
+ * Example of waypoint menu that could be passed to the manchette as props
+ */
+const Menu = ({ items }: MenuProps) => (
+  <div className="menu">
     {items.map(({ title, icon, onClick }) => (
       <button key={title} type="button" className="menu-item" onClick={onClick}>
         <span className="icon">{icon}</span>