front: space time horizontal zoom with slider

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

Author: anisometropie

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

@@ -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,
@@ -50,6 +55,7 @@ type ManchetteWithSpaceTimeChartProps = {
 export const MANCHETTE_WITH_SPACE_TIME_CHART_DEFAULT_HEIGHT = 561;
 const BOTTOM_TOOLBAR_HEIGHT = 40;
 const SPACE_TIME_CHART_DIFF_HEIGHT = 8;
+const DEFAULT_ZOOM_MS_PER_PX = 7500;
 
 const ManchetteWithSpaceTimeChartWrapper = ({
   operationalPoints,
@@ -63,6 +69,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 +166,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 +260,7 @@ const ManchetteWithSpaceTimeChartWrapper = ({
       >
         <Manchette {...manchettePropsWithWaypointMenu} height={height - BOTTOM_TOOLBAR_HEIGHT} />
         <div
+          ref={spaceTimeChartRef}
           className="space-time-chart-container"
           style={{
             bottom: 0,
@@ -260,6 +270,12 @@ const ManchetteWithSpaceTimeChartWrapper = ({
           }}
         >
           <div className="toolbar">
+            <button
+              type="button"
+              onClick={() => handleXZoom(timeScaleToZoomValue(DEFAULT_ZOOM_MS_PER_PX))}
+            >
+              <Iterations />
+            </button>
             <button type="button" onClick={() => setShowSettingsPanel(true)}>
               <KebabHorizontal />
             </button>
@@ -301,7 +317,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/styles/scss/common/components/_manchetteWithSpaceTimeChart.scss

@@ -1,56 +1,65 @@
-.manchette-space-time-chart-wrapper {
-  border-radius: 10px;
-  box-shadow:
-    0 4px 9px rgba(0, 0, 0, 0.06),
-    0 1px 2px rgba(0, 0, 0, 0.19);
-  background-color: var(--white100);
-  position: relative;
-
-  .header {
+  .manchette-space-time-chart-wrapper {
+    width: 100%;
+    border-radius: 10px;
+    box-shadow:
+      0 4px 9px rgba(0, 0, 0, 0.06),
+      0 1px 2px rgba(0, 0, 0, 0.19);
+    background-color: var(--white100);
     position: relative;
-    height: 40px;
-    border-radius: 10px 10px 0 0;
-    box-shadow: inset 0 1px 0 var(--white100);
-    padding: 4px;
-    background-color: var(--ambiantB5);
-    border-bottom: 1px solid var(--black25);
-
-    .manchette-menu-button {
-      border-radius: 8px;
-      width: 40px;
-      height: 32px;
-      margin-bottom: -8px;
-
-      &:hover {
-        background-color: var(--black10);
+  
+    .header {
+      position: relative;
+      height: 40px;
+      border-radius: 10px 10px 0 0;
+      box-shadow: inset 0 1px 0 var(--white100);
+      padding: 4px;
+      background-color: var(--ambiantB5);
+      border-bottom: 1px solid var(--black25);
+  
+      .manchette-menu-button {
+        border-radius: 8px;
+        width: 40px;
+        height: 32px;
+        margin-bottom: -8px;
+  
+        &:hover {
+          background-color: var(--black10);
+        }
+  
+        &.menu-open {
+          background-color: var(--black5);
+        }
       }
-
-      &.menu-open {
-        background-color: var(--black5);
+    }
+    .header-separator {
+      height: 1px;
+      background-color: var(--white100);
+    }
+  
+    .manchette {
+      overflow-y: auto;
+      overflow-x: hidden;
+  
+      &.no-scroll {
+        overflow-y: clip;
+      }
+  
+      .osrd-menu {
+        width: 305px;
+        transform: translateY(-2px);
       }
     }
-  }
-  .header-separator {
-    height: 1px;
-    background-color: var(--white100);
-  }
-
-  .manchette {
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    &.no-scroll {
-      overflow-y: clip;
+  
+    .space-time-chart-container {
+      width: 100%;
+      position: sticky;
     }
 
-    .osrd-menu {
-      width: 305px;
-      transform: translateY(-2px);
-    }
-  }
+    .space-time-h-slider-container {
 
-  .space-time-chart-container {
-    width: 100%;
-    position: sticky;
+      position: absolute;
+      right: 10px;
+      bottom: -21px;
+      z-index: 10;
+    }
   }
-}