Skip to content

Commit 4542460

Browse files
SharglutDevSharglutDev
committed
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]>
1 parent 9199b00 commit 4542460

16 files changed

+440
-178
lines changed

‎ui-manchette-with-spacetimechart/src/assets/sampleData.ts

+174-54
Original file line numberDiff line numberDiff line change
@@ -3,106 +3,226 @@ import { type ProjectPathTrainResult, type Waypoint } from '@osrd-project/ui-man
33

44
export const SAMPLE_WAYPOINTS: Waypoint[] = [
55
{
6-
id: 'South_West_station',
7-
name: 'South_West_station',
8-
secondaryCode: 'BV',
6+
id: '1',
97
position: 0,
8+
name: 'Brest',
9+
secondaryCode: 'BV',
10+
},
11+
{
12+
id: '2',
13+
position: 3983000,
14+
name: 'Le Rody',
15+
secondaryCode: '00',
1016
},
1117
{
12-
id: 'Mid_West_station',
13-
name: 'Mid_West_station',
18+
id: '3',
19+
position: 7349000,
20+
name: 'Kerhuon',
1421
secondaryCode: 'BV',
15-
position: 13000000,
1622
},
1723
{
18-
id: 'Mid_East_station',
19-
name: 'Mid_East_station',
24+
id: '4',
25+
position: 13882000,
26+
name: 'La Forest',
27+
secondaryCode: '00',
28+
},
29+
{
30+
id: '5',
31+
position: 18756000,
32+
name: 'Landerneau',
2033
secondaryCode: 'BV',
21-
position: 27550000,
2234
},
2335
{
24-
id: 'North_East_station',
25-
name: 'North_East_station',
36+
id: '6',
37+
position: 23358000,
38+
name: 'La Roche',
39+
secondaryCode: '00',
40+
},
41+
{
42+
id: '7',
43+
position: 33219000,
44+
name: 'Landivisiau',
45+
secondaryCode: '00',
46+
},
47+
{
48+
id: '8',
49+
position: 40612000,
50+
name: 'Guimiliau',
51+
secondaryCode: '00',
52+
},
53+
{
54+
id: '9',
55+
position: 44960000,
56+
name: 'St-Thégonnec',
57+
secondaryCode: '00',
58+
},
59+
{
60+
id: '10',
61+
position: 50471000,
62+
name: 'Pleyber-Christ',
63+
secondaryCode: '00',
64+
},
65+
{
66+
id: '11',
67+
position: 59554000,
68+
name: 'Morlaix',
69+
secondaryCode: 'BV',
70+
},
71+
{
72+
id: '12',
73+
position: 68903000,
74+
name: 'Plouigneau',
75+
secondaryCode: '00',
76+
},
77+
{
78+
id: '13',
79+
position: 83194000,
80+
name: 'Plounérin',
81+
secondaryCode: '00',
82+
},
83+
{
84+
id: '14',
85+
position: 91392000,
86+
name: 'Plouaret',
87+
secondaryCode: '00',
88+
},
89+
{
90+
id: '15',
91+
position: 102478000,
92+
name: 'Belle-Isle-Bégard',
93+
secondaryCode: '00',
94+
},
95+
{
96+
id: '16',
97+
position: 117570000,
98+
name: 'Guingamp',
99+
secondaryCode: '00',
100+
},
101+
{
102+
id: '17',
103+
position: 130463000,
104+
name: 'Châtelaudren-Plouagat',
105+
secondaryCode: 'BV',
106+
},
107+
{
108+
id: '18',
109+
position: 137315000,
110+
name: 'Plouvara-Plerneuf',
111+
secondaryCode: '00',
112+
},
113+
{
114+
id: '19',
115+
position: 141157000,
116+
name: 'La Méaugon',
117+
secondaryCode: '00',
118+
},
119+
{
120+
id: '20',
121+
position: 147745000,
122+
name: 'St-Brieuc',
123+
secondaryCode: 'BV',
124+
},
125+
{
126+
id: '21',
127+
position: 157361000,
128+
name: 'Yffiniac',
129+
secondaryCode: '00',
130+
},
131+
{
132+
id: '22',
133+
position: 168056000,
134+
name: 'Lamballe',
26135
secondaryCode: 'BV',
27-
position: 47050000,
28136
},
29137
];
30138

31139
export const SAMPLE_PATHS_DATA: ProjectPathTrainResult[] = [
32140
{
33141
id: 1,
34142
name: 'Train 1',
35-
departureTime: new Date('2024-06-26T13:57:56Z'),
143+
departureTime: new Date('2024-10-23T09:00:00Z'),
36144
spaceTimeCurves: [
37145
{
38146
positions: [
39-
0, 2387, 8642, 17449, 28163, 68719, 118795, 196855, 406366, 706610, 1102281, 1593458,
40-
2283409, 3769056, 6017136, 6717050, 7000182, 9027079, 9707244, 9996142, 12098691,
41-
12253708, 12305708, 12368708, 12400708, 12424708, 12440708, 12445708, 12448708, 12449708,
42-
12449708, 12452095, 12458350, 12467157, 12490130, 12534192, 12586918, 12734703, 12960612,
43-
13274175, 13680049, 14178452, 14981343, 15960690, 18996492, 19991990, 20987213, 22014758,
44-
22841279, 23850682, 26994761, 28007168, 29005477, 30000065, 32001426, 34522793, 44638554,
45-
44776040, 44832040, 44901040, 44937040, 44976040, 44992040, 44997040, 45000040, 45001040,
147+
0, 973, 3888, 8737, 24205, 47311, 96148, 138058, 214779, 307916, 417225, 587701, 785672,
148+
1189417, 1740630, 18354735, 18756000, 33419000, 33941065, 46298000, 46456685, 46704905,
149+
47993924, 57127089, 57572008, 57918672, 58233336, 58516000, 59423000, 59568935, 59686000,
150+
59902000, 60254993, 60721538, 61496476, 62320048, 68922269, 69447000, 82202000, 83877014,
151+
85097789, 85140266, 89756800, 90298672, 90868000, 117770000, 118043180, 118327970,
152+
119238293, 120110374, 121572153, 126517715, 127501896, 128277000, 140917870, 141157000,
153+
156005000, 156818235, 157861414, 158428394, 159444615, 164321446, 165140000, 165940000,
154+
166535000, 166831000, 167095000, 167272000, 167480000, 167656000, 167800000, 167912000,
155+
167956000, 167992000, 168020000, 168040000, 168052000, 168055000, 168056000,
46156
],
47157
times: [
48-
0, 42000, 44000, 46000, 48000, 54000, 60000, 68000, 86000, 108000, 134000, 164000, 204000,
49-
286000, 406000, 442000, 456000, 558000, 594000, 610000, 724159, 733630, 737630, 743630,
50-
747630, 751630, 755630, 757630, 759630, 761630, 821630, 823630, 825630, 827630, 831630,
51-
837630, 843630, 857630, 875630, 897630, 923630, 953630, 999630, 1053630, 1215630, 1269630,
52-
1327630, 1389630, 1437630, 1493630, 1661630, 1713630, 1761630, 1807630, 1903630, 2031630,
53-
2561539, 2569617, 2573617, 2579617, 2583617, 2589617, 2593617, 2595617, 2597617, 2599617,
158+
0, 2000, 4000, 6000, 10000, 14000, 20000, 24000, 30000, 36000, 42000, 50000, 58000, 72000,
159+
87695, 514914, 526026, 965920, 980356, 1298104, 1302104, 1308104, 1336119, 1518782,
160+
1528116, 1536116, 1544116, 1552116, 1579327, 1583595, 1587019, 1593499, 1603499, 1615499,
161+
1633499, 1650729, 1782773, 1793885, 2080876, 2114460, 2136460, 2137226, 2220323, 2230547,
162+
2242547, 2847848, 2853848, 2859848, 2877848, 2893848, 2918783, 2999711, 3017045, 3033045,
163+
3317467, 3323021, 3679370, 3697370, 3717370, 3727370, 3744455, 3824258, 3838480, 3854480,
164+
3868480, 3876480, 3884480, 3890480, 3898480, 3906480, 3914480, 3922480, 3926480, 3930480,
165+
3934480, 3938480, 3942480, 3944480, 3946480,
54166
],
55167
},
56168
],
57169
},
58170
{
59171
id: 2,
60172
name: 'Train 2',
61-
departureTime: new Date('2024-06-26T13:42:56Z'),
173+
departureTime: new Date('2024-10-23T09:15:00Z'),
62174
spaceTimeCurves: [
63175
{
64176
positions: [
65-
0, 2387, 8642, 17449, 28163, 68719, 118795, 196855, 406366, 706610, 1102281, 1593458,
66-
2283409, 3769056, 6017136, 6717050, 7000182, 9027079, 9707244, 9996142, 12098691,
67-
12253708, 12305708, 12368708, 12400708, 12424708, 12440708, 12445708, 12448708, 12449708,
68-
12449708, 12452095, 12458350, 12467157, 12490130, 12534192, 12586918, 12734703, 12960612,
69-
13274175, 13680049, 14178452, 14981343, 15960690, 18996492, 19991990, 20987213, 22014758,
70-
22841279, 23850682, 26994761, 28007168, 29005477, 30000065, 32001426, 34522793, 44638554,
71-
44776040, 44832040, 44901040, 44937040, 44976040, 44992040, 44997040, 45000040, 45001040,
177+
0, 973, 3888, 8737, 24205, 47311, 96148, 138058, 214779, 307916, 417225, 587701, 785672,
178+
1189417, 1740630, 18354735, 18756000, 33419000, 33941065, 46298000, 46456685, 46704905,
179+
47993924, 57127089, 57572008, 57918672, 58233336, 58516000, 59423000, 59568935, 59686000,
180+
59902000, 60254993, 60721538, 61496476, 62320048, 68922269, 69447000, 82202000, 83877014,
181+
85097789, 85140266, 89756800, 90298672, 90868000, 117770000, 118043180, 118327970,
182+
119238293, 120110374, 121572153, 126517715, 127501896, 128277000, 140917870, 141157000,
183+
156005000, 156818235, 157861414, 158428394, 159444615, 164321446, 165140000, 165940000,
184+
166535000, 166831000, 167095000, 167272000, 167480000, 167656000, 167800000, 167912000,
185+
167956000, 167992000, 168020000, 168040000, 168052000, 168055000, 168056000,
72186
],
73187
times: [
74-
0, 42000, 44000, 46000, 48000, 54000, 60000, 68000, 86000, 108000, 134000, 164000, 204000,
75-
286000, 406000, 442000, 456000, 558000, 594000, 610000, 724159, 733630, 737630, 743630,
76-
747630, 751630, 755630, 757630, 759630, 761630, 821630, 823630, 825630, 827630, 831630,
77-
837630, 843630, 857630, 875630, 897630, 923630, 953630, 999630, 1053630, 1215630, 1269630,
78-
1327630, 1389630, 1437630, 1493630, 1661630, 1713630, 1761630, 1807630, 1903630, 2031630,
79-
2561539, 2569617, 2573617, 2579617, 2583617, 2589617, 2593617, 2595617, 2597617, 2599617,
188+
0, 2000, 4000, 6000, 10000, 14000, 20000, 24000, 30000, 36000, 42000, 50000, 58000, 72000,
189+
87695, 514914, 526026, 965920, 980356, 1298104, 1302104, 1308104, 1336119, 1518782,
190+
1528116, 1536116, 1544116, 1552116, 1579327, 1583595, 1587019, 1593499, 1603499, 1615499,
191+
1633499, 1650729, 1782773, 1793885, 2080876, 2114460, 2136460, 2137226, 2220323, 2230547,
192+
2242547, 2847848, 2853848, 2859848, 2877848, 2893848, 2918783, 2999711, 3017045, 3033045,
193+
3317467, 3323021, 3679370, 3697370, 3717370, 3727370, 3744455, 3824258, 3838480, 3854480,
194+
3868480, 3876480, 3884480, 3890480, 3898480, 3906480, 3914480, 3922480, 3926480, 3930480,
195+
3934480, 3938480, 3942480, 3944480, 3946480,
80196
],
81197
},
82198
],
83199
},
84200
{
85201
id: 3,
86202
name: 'Train 3',
87-
departureTime: new Date('2024-06-26T14:12:56Z'),
203+
departureTime: new Date('2024-10-23T09:30:00Z'),
88204
spaceTimeCurves: [
89205
{
90206
positions: [
91-
0, 2387, 8642, 17449, 28163, 68719, 118795, 196855, 406366, 706610, 1102281, 1593458,
92-
2283409, 3769056, 6017136, 6717050, 7000182, 9027079, 9707244, 9996142, 12098691,
93-
12253708, 12305708, 12368708, 12400708, 12424708, 12440708, 12445708, 12448708, 12449708,
94-
12449708, 12452095, 12458350, 12467157, 12490130, 12534192, 12586918, 12734703, 12960612,
95-
13274175, 13680049, 14178452, 14981343, 15960690, 18996492, 19991990, 20987213, 22014758,
96-
22841279, 23850682, 26994761, 28007168, 29005477, 30000065, 32001426, 34522793, 44638554,
97-
44776040, 44832040, 44901040, 44937040, 44976040, 44992040, 44997040, 45000040, 45001040,
207+
0, 973, 3888, 8737, 24205, 47311, 96148, 138058, 214779, 307916, 417225, 587701, 785672,
208+
1189417, 1740630, 18354735, 18756000, 33419000, 33941065, 46298000, 46456685, 46704905,
209+
47993924, 57127089, 57572008, 57918672, 58233336, 58516000, 59423000, 59568935, 59686000,
210+
59902000, 60254993, 60721538, 61496476, 62320048, 68922269, 69447000, 82202000, 83877014,
211+
85097789, 85140266, 89756800, 90298672, 90868000, 117770000, 118043180, 118327970,
212+
119238293, 120110374, 121572153, 126517715, 127501896, 128277000, 140917870, 141157000,
213+
156005000, 156818235, 157861414, 158428394, 159444615, 164321446, 165140000, 165940000,
214+
166535000, 166831000, 167095000, 167272000, 167480000, 167656000, 167800000, 167912000,
215+
167956000, 167992000, 168020000, 168040000, 168052000, 168055000, 168056000,
98216
],
99217
times: [
100-
0, 42000, 44000, 46000, 48000, 54000, 60000, 68000, 86000, 108000, 134000, 164000, 204000,
101-
286000, 406000, 442000, 456000, 558000, 594000, 610000, 724159, 733630, 737630, 743630,
102-
747630, 751630, 755630, 757630, 759630, 761630, 821630, 823630, 825630, 827630, 831630,
103-
837630, 843630, 857630, 875630, 897630, 923630, 953630, 999630, 1053630, 1215630, 1269630,
104-
1327630, 1389630, 1437630, 1493630, 1661630, 1713630, 1761630, 1807630, 1903630, 2031630,
105-
2561539, 2569617, 2573617, 2579617, 2583617, 2589617, 2593617, 2595617, 2597617, 2599617,
218+
0, 2000, 4000, 6000, 10000, 14000, 20000, 24000, 30000, 36000, 42000, 50000, 58000, 72000,
219+
87695, 514914, 526026, 965920, 980356, 1298104, 1302104, 1308104, 1336119, 1518782,
220+
1528116, 1536116, 1544116, 1552116, 1579327, 1583595, 1587019, 1593499, 1603499, 1615499,
221+
1633499, 1650729, 1782773, 1793885, 2080876, 2114460, 2136460, 2137226, 2220323, 2230547,
222+
2242547, 2847848, 2853848, 2859848, 2877848, 2893848, 2918783, 2999711, 3017045, 3033045,
223+
3317467, 3323021, 3679370, 3697370, 3717370, 3727370, 3744455, 3824258, 3838480, 3854480,
224+
3868480, 3876480, 3884480, 3890480, 3898480, 3906480, 3914480, 3922480, 3926480, 3930480,
225+
3934480, 3938480, 3942480, 3944480, 3946480,
106226
],
107227
},
108228
],

‎ui-manchette/src/stories/components/Menu.tsx ‎ui-manchette-with-spacetimechart/src/stories/Menu.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@ import React from 'react';
33
export type MenuItem = {
44
title: string;
55
icon: React.ReactNode;
6-
onClick: () => void;
6+
onClick: (e: React.MouseEvent) => void;
77
};
88

99
type MenuProps = {
10-
menuRef: React.RefObject<HTMLDivElement>;
1110
items: MenuItem[];
12-
style?: React.CSSProperties;
1311
};
1412

15-
const Menu = ({ menuRef, items, style }: MenuProps) => (
16-
<div ref={menuRef} className="menu" style={style}>
13+
/**
14+
* Example of waypoint menu that could be passed to the manchette as props
15+
*/
16+
const Menu = ({ items }: MenuProps) => (
17+
<div className="menu">
1718
{items.map(({ title, icon, onClick }) => (
1819
<button key={title} type="button" className="menu-item" onClick={onClick}>
1920
<span className="icon">{icon}</span>

0 commit comments

Comments
 (0)