front: space time horizontal zoom with slider

Signed-off-by: Valentin Chanas <anisometropie@gmail.com>

Author: anisometropie

front/package-lock.json

@@ -9,10 +9,10 @@
     "@openapi-contrib/openapi-schema-to-json-schema": "^5.1.0",
     "@osrd-project/netzgrafik-frontend": "0.0.0-snapshot.37949a66933e8e1552c9b8e54f702ec491afd415",
     "@osrd-project/ui-core": "^0.0.61",
-    "@osrd-project/ui-icons": "^0.0.59",
-    "@osrd-project/ui-manchette": "^0.0.59",
-    "@osrd-project/ui-manchette-with-spacetimechart": "^0.0.59",
-    "@osrd-project/ui-spacetimechart": "^0.0.59",
+    "@osrd-project/ui-icons": "^0.0.61",
+    "@osrd-project/ui-manchette": "^0.0.61",
+    "@osrd-project/ui-manchette-with-spacetimechart": "^0.0.61",
+    "@osrd-project/ui-spacetimechart": "^0.0.61",
     "@osrd-project/ui-speedspacechart": "^0.0.59",
     "@react-pdf/renderer": "^4.1.6",
     "@redux-devtools/extension": "^3.3.0",

front/package.json

@@ -1,8 +1,13 @@
 import { useMemo, useRef, useState } from 'react';
 
-import { KebabHorizontal } from '@osrd-project/ui-icons';
+import { Slider } from '@osrd-project/ui-core';
+import { KebabHorizontal, Iterations } from '@osrd-project/ui-icons';
 import Manchette, { type WaypointMenuData } from '@osrd-project/ui-manchette';
-import { useManchettesWithSpaceTimeChart } from '@osrd-project/ui-manchette-with-spacetimechart';
+import {
+  useManchettesWithSpaceTimeChart,
+  timeScaleToZoomValue,
+  DEFAULT_ZOOM_MS_PER_PX,
+} from '@osrd-project/ui-manchette-with-spacetimechart';
 import {
   ConflictLayer,
   PathLayer,
@@ -63,6 +68,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
 }: ManchetteWithSpaceTimeChartProps) => {
   const manchetteWithSpaceTimeCharWrappertRef = useRef<HTMLDivElement>(null);
   const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
+  const spaceTimeChartRef = useRef<HTMLDivElement>(null);
 
   const [waypointsPanelIsOpen, setWaypointsPanelIsOpen] = useState(false);
 
@@ -159,13 +165,15 @@ const ManchetteWithSpaceTimeChartWrapper = ({
     }));
   }, [waypointsPanelData, operationalPoints]);
 
-  const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchettesWithSpaceTimeChart(
-    manchetteWaypoints,
-    cutProjectedTrains,
-    manchetteWithSpaceTimeChartRef,
-    selectedTrainScheduleId,
-    height
-  );
+  const { manchetteProps, spaceTimeChartProps, handleScroll, handleXZoom, xZoom } =
+    useManchettesWithSpaceTimeChart(
+      manchetteWaypoints,
+      cutProjectedTrains,
+      manchetteWithSpaceTimeChartRef,
+      selectedTrainScheduleId,
+      height,
+      spaceTimeChartRef
+    );
 
   const [showSettingsPanel, setShowSettingsPanel] = useState(false);
   const [settings, setSettings] = useState({
@@ -251,6 +259,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
       >
         <Manchette {...manchettePropsWithWaypointMenu} height={height - BOTTOM_TOOLBAR_HEIGHT} />
         <div
+          ref={spaceTimeChartRef}
           className="space-time-chart-container"
           style={{
             bottom: 0,
@@ -260,7 +269,18 @@ const ManchetteWithSpaceTimeChartWrapper = ({
           }}
         >
           <div className="toolbar">
-            <button type="button" onClick={() => setShowSettingsPanel(true)}>
+            <button
+              type="button"
+              className="reset-button"
+              onClick={() => handleXZoom(timeScaleToZoomValue(DEFAULT_ZOOM_MS_PER_PX))}
+            >
+              <Iterations />
+            </button>
+            <button
+              type="button"
+              className="menu-button"
+              onClick={() => setShowSettingsPanel(true)}
+            >
               <KebabHorizontal />
             </button>
           </div>
@@ -301,7 +321,16 @@ const ManchetteWithSpaceTimeChartWrapper = ({
           </SpaceTimeChart>
         </div>
       </div>
+      <Slider
+        containerClassName="space-time-h-slider-container"
+        className="space-time-h-slider"
+        value={xZoom}
+        onChange={(e) => {
+          handleXZoom(Number(e.target.value));
+        }}
+      />
     </div>
+    /* TODO use margin or absolute to align with handle */
   );
 };
 

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

@@ -11,14 +11,36 @@
     right: 7px;
     top: 7px;
     z-index: 10;
+    border: 1px solid var(--black10);
+    border-radius: 5px;
 
     button {
-      border: 1px solid var(--black10);
-      border-radius: 5px;
+      outline: none;
       background: var(--white100);
       color: var(--black100);
       padding: 0 7px;
     }
+
+    button:not(:last-child) {
+      border-radius: 5px 0 0 5px;
+      border-right: 1px solid var(--black10);
+    }
+
+    button:last-child {
+      border-radius: 5px;
+    }
+
+    .reset-button {
+      svg {
+        transform: rotate(180deg) translate(0, 2px);
+      }
+    }
+
+    .menu-button {
+      svg {
+        transform: translate(0, -1px);
+      }
+    }
   }
 
   .settings-panel {

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

@@ -1,4 +1,5 @@
 .manchette-space-time-chart-wrapper {
+  width: 100%;
   border-radius: 10px;
   box-shadow:
     0 4px 9px rgba(0, 0, 0, 0.06),
@@ -53,4 +54,11 @@
     width: 100%;
     position: sticky;
   }
+
+  .space-time-h-slider-container {
+    position: absolute;
+    right: 24px;
+    bottom: -21px;
+    z-index: 10;
+  }
 }