Skip to content

Commit 892da7c

Browse files
anisometropieanisometropie
committed
front: space time horizontal zoom with slider
Signed-off-by: Valentin Chanas <anisometropie@gmail.com>
1 parent 46bea7d commit 892da7c

File tree

5 files changed

+143
-126
lines changed

5 files changed

+143
-126
lines changed

‎front/package-lock.json

+29-62
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎front/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
"@openapi-contrib/openapi-schema-to-json-schema": "^5.1.0",
1010
"@osrd-project/netzgrafik-frontend": "0.0.0-snapshot.37949a66933e8e1552c9b8e54f702ec491afd415",
1111
"@osrd-project/ui-core": "^0.0.61",
12-
"@osrd-project/ui-icons": "^0.0.59",
13-
"@osrd-project/ui-manchette": "^0.0.59",
14-
"@osrd-project/ui-manchette-with-spacetimechart": "^0.0.59",
15-
"@osrd-project/ui-spacetimechart": "^0.0.59",
16-
"@osrd-project/ui-speedspacechart": "^0.0.59",
12+
"@osrd-project/ui-icons": "^0.0.61",
13+
"@osrd-project/ui-manchette": "^0.0.61",
14+
"@osrd-project/ui-manchette-with-spacetimechart": "^0.0.61",
15+
"@osrd-project/ui-spacetimechart": "^0.0.61",
16+
"@osrd-project/ui-speedspacechart": "^0.0.61",
1717
"@react-pdf/renderer": "^4.1.6",
1818
"@redux-devtools/extension": "^3.3.0",
1919
"@reduxjs/toolkit": "^2.5.0",

‎front/src/modules/simulationResult/components/ManchetteWithSpaceTimeChart/ManchetteWithSpaceTimeChart.tsx

+34-9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import { useMemo, useRef, useState } from 'react';
22

3-
import { KebabHorizontal } from '@osrd-project/ui-icons';
3+
import { Slider } from '@osrd-project/ui-core';
4+
import { KebabHorizontal, Iterations } from '@osrd-project/ui-icons';
45
import Manchette, { type WaypointMenuData } from '@osrd-project/ui-manchette';
5-
import { useManchettesWithSpaceTimeChart } from '@osrd-project/ui-manchette-with-spacetimechart';
6+
import {
7+
useManchettesWithSpaceTimeChart,
8+
timeScaleToZoomValue,
9+
DEFAULT_ZOOM_MS_PER_PX,
10+
} from '@osrd-project/ui-manchette-with-spacetimechart';
611
import {
712
ConflictLayer,
813
PathLayer,
@@ -63,6 +68,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
6368
}: ManchetteWithSpaceTimeChartProps) => {
6469
const manchetteWithSpaceTimeCharWrappertRef = useRef<HTMLDivElement>(null);
6570
const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
71+
const spaceTimeChartRef = useRef<HTMLDivElement>(null);
6672

6773
const [waypointsPanelIsOpen, setWaypointsPanelIsOpen] = useState(false);
6874

@@ -159,13 +165,15 @@ const ManchetteWithSpaceTimeChartWrapper = ({
159165
}));
160166
}, [waypointsPanelData, operationalPoints]);
161167

162-
const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchettesWithSpaceTimeChart(
163-
manchetteWaypoints,
164-
cutProjectedTrains,
165-
manchetteWithSpaceTimeChartRef,
166-
selectedTrainScheduleId,
167-
height
168-
);
168+
const { manchetteProps, spaceTimeChartProps, handleScroll, handleXZoom, xZoom } =
169+
useManchettesWithSpaceTimeChart(
170+
manchetteWaypoints,
171+
cutProjectedTrains,
172+
manchetteWithSpaceTimeChartRef,
173+
selectedTrainScheduleId,
174+
height,
175+
spaceTimeChartRef
176+
);
169177

170178
const [showSettingsPanel, setShowSettingsPanel] = useState(false);
171179
const [settings, setSettings] = useState({
@@ -251,6 +259,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
251259
>
252260
<Manchette {...manchettePropsWithWaypointMenu} height={height - BOTTOM_TOOLBAR_HEIGHT} />
253261
<div
262+
ref={spaceTimeChartRef}
254263
className="space-time-chart-container"
255264
style={{
256265
bottom: 0,
@@ -260,6 +269,13 @@ const ManchetteWithSpaceTimeChartWrapper = ({
260269
}}
261270
>
262271
<div className="toolbar">
272+
<button
273+
type="button"
274+
className="reset-button"
275+
onClick={() => handleXZoom(timeScaleToZoomValue(DEFAULT_ZOOM_MS_PER_PX))}
276+
>
277+
<Iterations />
278+
</button>
263279
<button type="button" onClick={() => setShowSettingsPanel(true)}>
264280
<KebabHorizontal />
265281
</button>
@@ -301,7 +317,16 @@ const ManchetteWithSpaceTimeChartWrapper = ({
301317
</SpaceTimeChart>
302318
</div>
303319
</div>
320+
<Slider
321+
containerClassName="space-time-h-slider-container"
322+
className="space-time-h-slider"
323+
value={xZoom}
324+
onChange={(e) => {
325+
handleXZoom(Number(e.target.value));
326+
}}
327+
/>
304328
</div>
329+
/* TODO use margin or absolute to align with handle */
305330
);
306331
};
307332

‎front/src/modules/simulationResult/styles/manchetteWithSpaceTimeChart.scss

+18-2
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,30 @@
1111
right: 7px;
1212
top: 7px;
1313
z-index: 10;
14+
border: 1px solid var(--black10);
15+
border-radius: 5px;
1416

1517
button {
16-
border: 1px solid var(--black10);
17-
border-radius: 5px;
18+
outline: none;
1819
background: var(--white100);
1920
color: var(--black100);
2021
padding: 0 7px;
2122
}
23+
24+
button:not(:last-child) {
25+
border-radius: 5px 0 0 5px;
26+
border-right: 1px solid var(--black10);
27+
}
28+
29+
button:last-child {
30+
border-radius: 5px;
31+
}
32+
33+
.reset-button {
34+
svg {
35+
transform: rotate(180deg) translate(0, 2px);
36+
}
37+
}
2238
}
2339

2440
.settings-panel {

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

+57-48
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,65 @@
1-
.manchette-space-time-chart-wrapper {
2-
border-radius: 10px;
3-
box-shadow:
4-
0 4px 9px rgba(0, 0, 0, 0.06),
5-
0 1px 2px rgba(0, 0, 0, 0.19);
6-
background-color: var(--white100);
7-
position: relative;
8-
9-
.header {
1+
.manchette-space-time-chart-wrapper {
2+
width: 100%;
3+
border-radius: 10px;
4+
box-shadow:
5+
0 4px 9px rgba(0, 0, 0, 0.06),
6+
0 1px 2px rgba(0, 0, 0, 0.19);
7+
background-color: var(--white100);
108
position: relative;
11-
height: 40px;
12-
border-radius: 10px 10px 0 0;
13-
box-shadow: inset 0 1px 0 var(--white100);
14-
padding: 4px;
15-
background-color: var(--ambiantB5);
16-
border-bottom: 1px solid var(--black25);
17-
18-
.manchette-menu-button {
19-
border-radius: 8px;
20-
width: 40px;
21-
height: 32px;
22-
margin-bottom: -8px;
23-
24-
&:hover {
25-
background-color: var(--black10);
9+
10+
.header {
11+
position: relative;
12+
height: 40px;
13+
border-radius: 10px 10px 0 0;
14+
box-shadow: inset 0 1px 0 var(--white100);
15+
padding: 4px;
16+
background-color: var(--ambiantB5);
17+
border-bottom: 1px solid var(--black25);
18+
19+
.manchette-menu-button {
20+
border-radius: 8px;
21+
width: 40px;
22+
height: 32px;
23+
margin-bottom: -8px;
24+
25+
&:hover {
26+
background-color: var(--black10);
27+
}
28+
29+
&.menu-open {
30+
background-color: var(--black5);
31+
}
2632
}
27-
28-
&.menu-open {
29-
background-color: var(--black5);
33+
}
34+
.header-separator {
35+
height: 1px;
36+
background-color: var(--white100);
37+
}
38+
39+
.manchette {
40+
overflow-y: auto;
41+
overflow-x: hidden;
42+
43+
&.no-scroll {
44+
overflow-y: clip;
45+
}
46+
47+
.osrd-menu {
48+
width: 305px;
49+
transform: translateY(-2px);
3050
}
3151
}
32-
}
33-
.header-separator {
34-
height: 1px;
35-
background-color: var(--white100);
36-
}
37-
38-
.manchette {
39-
overflow-y: auto;
40-
overflow-x: hidden;
41-
42-
&.no-scroll {
43-
overflow-y: clip;
52+
53+
.space-time-chart-container {
54+
width: 100%;
55+
position: sticky;
4456
}
4557

46-
.osrd-menu {
47-
width: 305px;
48-
transform: translateY(-2px);
49-
}
50-
}
58+
.space-time-h-slider-container {
5159

52-
.space-time-chart-container {
53-
width: 100%;
54-
position: sticky;
60+
position: absolute;
61+
right: 24px;
62+
bottom: -21px;
63+
z-index: 10;
64+
}
5565
}
56-
}

0 commit comments

Comments
 (0)