From d02c9afe9cdf827ee51ba3f18b01a1de4f532849 Mon Sep 17 00:00:00 2001
From: Clara Ni <clara.ni@outlook.fr>
Date: Thu, 17 Oct 2024 16:22:48 +0200
Subject: [PATCH 1/2] ui-manchette-with-spacetimechart: add resetZoom callback

Signed-off-by: Clara Ni <clara.ni@outlook.fr>
---
 .../src/hooks/useManchetteWithSpaceTimeChart.ts            | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts b/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts
index 25066476c..0c109f472 100644
--- a/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts
+++ b/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts
@@ -100,6 +100,10 @@ const useManchettesWithSpaceTimeChart = (
     }
   }, [yZoom]);
 
+  const resetZoom = useCallback(() => {
+    setState((prev) => ({ ...prev, yZoom: 1 }));
+  }, []);
+
   const handleScroll = useCallback(() => {
     if (!isShiftPressed && manchetteWithSpaceTimeChartContainer.current) {
       const { scrollTop } = manchetteWithSpaceTimeChartContainer.current;
@@ -146,11 +150,12 @@ const useManchettesWithSpaceTimeChart = (
       operationalPoints: operationalPointsWithHeight,
       zoomYIn,
       zoomYOut,
+      resetZoom,
       toggleMode,
       yZoom,
       isProportional,
     }),
-    [operationalPointsWithHeight, zoomYIn, zoomYOut, toggleMode, yZoom, isProportional]
+    [operationalPointsWithHeight, zoomYIn, zoomYOut, resetZoom, toggleMode, yZoom, isProportional]
   );
 
   // Memoize spaceTimeChartProps separately

From 5ee4d9fd34325dd2f1922f7f335b9201442c34d8 Mon Sep 17 00:00:00 2001
From: Clara Ni <clara.ni@outlook.fr>
Date: Thu, 17 Oct 2024 16:11:19 +0200
Subject: [PATCH 2/2] ui-manchette: add fit button

Signed-off-by: Clara Ni <clara.ni@outlook.fr>
---
 ui-manchette/src/components/Manchette.tsx     | 25 ++++++-------
 .../src/stories/Manchette.stories.tsx         |  1 +
 ui-manchette/src/styles/manchette.css         | 36 ++++++++++++++-----
 3 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/ui-manchette/src/components/Manchette.tsx b/ui-manchette/src/components/Manchette.tsx
index 185635d39..6d060f5e6 100644
--- a/ui-manchette/src/components/Manchette.tsx
+++ b/ui-manchette/src/components/Manchette.tsx
@@ -12,6 +12,7 @@ type ManchetteProps = {
   activeOperationalPointId?: string;
   zoomYIn: () => void;
   zoomYOut: () => void;
+  resetZoom: () => void;
   height?: number;
   yZoom?: number;
   children?: React.ReactNode;
@@ -22,6 +23,7 @@ type ManchetteProps = {
 const Manchette = ({
   zoomYIn,
   zoomYOut,
+  resetZoom,
   yZoom = 1,
   operationalPoints,
   activeOperationalPointId,
@@ -31,7 +33,7 @@ const Manchette = ({
 }: ManchetteProps) => (
   <div className="manchette-container">
     <div
-      className=" bg-ambientB-10 border-r border-grey-30"
+      className="bg-ambientB-10 border-r border-grey-30"
       style={{ minHeight: `${INITIAL_OP_LIST_HEIGHT}px` }}
     >
       <OperationalPointList
@@ -40,24 +42,17 @@ const Manchette = ({
       />
       {children}
     </div>
-    <div className="manchette-actions flex items-center">
-      <div className=" flex items-center ">
-        <button
-          className="h-full px-3 w-full zoom-out"
-          onClick={zoomYOut}
-          disabled={yZoom <= MIN_ZOOM_Y}
-        >
+    <div className="manchette-actions">
+      <div className="zoom-buttons">
+        <button className="zoom-out" onClick={zoomYOut} disabled={yZoom <= MIN_ZOOM_Y}>
           <ZoomOut />
         </button>
-      </div>
-      <div className=" flex items-center  border-x border-black-25  h-full">
-        <button
-          className="h-full px-3 w-full zoom-in"
-          disabled={yZoom >= MAX_ZOOM_Y}
-          onClick={zoomYIn}
-        >
+        <button className="zoom-in" onClick={zoomYIn} disabled={yZoom >= MAX_ZOOM_Y}>
           <ZoomIn />
         </button>
+        <button className="zoom-reset" onClick={resetZoom}>
+          Fit
+        </button>
       </div>
       <div className="flex items-center ml-auto text-sans font-semibold">
         <button className="toggle-mode" onClick={toggleMode}>
diff --git a/ui-manchette/src/stories/Manchette.stories.tsx b/ui-manchette/src/stories/Manchette.stories.tsx
index 218ebea82..c09475bbf 100644
--- a/ui-manchette/src/stories/Manchette.stories.tsx
+++ b/ui-manchette/src/stories/Manchette.stories.tsx
@@ -74,6 +74,7 @@ const ManchetteWithWaypointMenu = () => {
       }))}
       zoomYIn={() => {}}
       zoomYOut={() => {}}
+      resetZoom={() => {}}
       toggleMode={() => {}}
       activeOperationalPointId={activeOperationalPointId}
     >
diff --git a/ui-manchette/src/styles/manchette.css b/ui-manchette/src/styles/manchette.css
index 32cb29105..155f92228 100644
--- a/ui-manchette/src/styles/manchette.css
+++ b/ui-manchette/src/styles/manchette.css
@@ -1,6 +1,12 @@
 .manchette-container {
   .manchette-actions {
+    align-items: center;
     background-color: rgba(250, 249, 245, 0.6);
+    border-top: solid 1px;
+    border-right: solid 1px;
+    border-radius: 0 0 0 10px;
+    @apply border-black-25;
+    display: flex;
     height: 2.5rem;
     width: inherit;
     position: sticky;
@@ -9,17 +15,29 @@
     width: 100%;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
-    border-top: solid 1px;
-    border-right: solid 1px;
-    @apply border-black-25;
-    border-radius: 0px 0px 0px 10px;
 
-    .zoom-out:disabled {
-      opacity: 0.4;
-    }
 
-    .zoom-in:disabled {
-      opacity: 0.4;
+    .zoom-buttons {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      button {
+        border-right: solid 1px theme('colors.grey.20');
+        border-top: solid 1px white;
+        height: 100%;
+        padding-inline: 12px;
+      }
+
+      button:disabled {
+        @apply text-grey-30;
+      }
+
+      .zoom-reset {
+        @apply text-grey-50;
+        font-weight: 600;
+        font-size: 14px;
+      }
     }
 
     .toggle-mode {