From 5af0b691699b10c9fdbd8edc05a2aee97fd55194 Mon Sep 17 00:00:00 2001
From: Clara Ni <clara.ni@outlook.fr>
Date: Mon, 21 Oct 2024 17:39:07 +0200
Subject: [PATCH] front: clean simulation map style (scenario results)

Signed-off-by: Clara Ni <clara.ni@outlook.fr>
---
 .../views/SimulationResults.tsx               | 45 ++++++++-----------
 .../SimulationResultsMap.tsx                  |  2 +-
 .../_simulationresults.scss                   | 13 +++++-
 front/tests/pages/op-timetable-page-model.ts  |  2 +-
 4 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/front/src/applications/operationalStudies/views/SimulationResults.tsx b/front/src/applications/operationalStudies/views/SimulationResults.tsx
index 7ec8c737e4e..61f7ef18d93 100644
--- a/front/src/applications/operationalStudies/views/SimulationResults.tsx
+++ b/front/src/applications/operationalStudies/views/SimulationResults.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, useMemo } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 
 import { ChevronLeft, ChevronRight } from '@osrd-project/ui-icons';
 import cx from 'classnames';
@@ -22,7 +22,6 @@ import { useFormattedOperationalPoints } from 'modules/trainschedule/useFormatte
 import { updateViewport, type Viewport } from 'reducers/map';
 import { useAppDispatch } from 'store';
 
-const MAP_MIN_HEIGHT = 450;
 const SPEED_SPACE_CHART_HEIGHT = 521.5;
 const HANDLE_TAB_RESIZE_HEIGHT = 20;
 
@@ -53,13 +52,11 @@ const SimulationResults = ({
   const { t } = useTranslation('simulation');
   const dispatch = useAppDispatch();
 
-  const timeTableRef = useRef<HTMLDivElement | null>(null);
-  const [extViewport, setExtViewport] = useState<Viewport | undefined>(undefined);
+  const [extViewport, setExtViewport] = useState<Viewport>();
   const [showWarpedMap, setShowWarpedMap] = useState(false);
 
   const [speedSpaceChartContainerHeight, setSpeedSpaceChartContainerHeight] =
     useState(SPEED_SPACE_CHART_HEIGHT);
-  const [heightOfSimulationMap] = useState(MAP_MIN_HEIGHT);
 
   const {
     operationalPoints,
@@ -191,6 +188,23 @@ const SimulationResults = ({
         </div>
       )}
 
+      {/* SIMULATION : MAP */}
+      <div className="simulation-map">
+        <SimulationResultsMap
+          setExtViewport={setExtViewport}
+          geometry={pathProperties?.geometry}
+          trainSimulation={
+            selectedTrainSchedule && trainSimulation
+              ? {
+                  ...trainSimulation,
+                  trainId: selectedTrainSchedule.id,
+                  startTime: selectedTrainSchedule.start_time,
+                }
+              : undefined
+          }
+        />
+      </div>
+
       {/* TIME STOPS TABLE */}
       {selectedTrainSchedule &&
         trainSimulation.status === 'success' &&
@@ -209,27 +223,6 @@ const SimulationResults = ({
           </div>
         )}
 
-      {/* SIMULATION : MAP */}
-      <div ref={timeTableRef}>
-        <div className="osrd-simulation-container mb-2">
-          <div className="osrd-simulation-map" style={{ height: `${heightOfSimulationMap}px` }}>
-            <SimulationResultsMap
-              setExtViewport={setExtViewport}
-              geometry={pathProperties?.geometry}
-              trainSimulation={
-                selectedTrainSchedule && trainSimulation
-                  ? {
-                      ...trainSimulation,
-                      trainId: selectedTrainSchedule.id,
-                      startTime: selectedTrainSchedule.start_time,
-                    }
-                  : undefined
-              }
-            />
-          </div>
-        </div>
-      </div>
-
       {/* TRAIN : DRIVER TRAIN SCHEDULE */}
       {selectedTrainSchedule &&
         trainSimulation &&
diff --git a/front/src/modules/simulationResult/components/SimulationResultsMap/SimulationResultsMap.tsx b/front/src/modules/simulationResult/components/SimulationResultsMap/SimulationResultsMap.tsx
index a395a3fe1bc..6b77496c4e1 100644
--- a/front/src/modules/simulationResult/components/SimulationResultsMap/SimulationResultsMap.tsx
+++ b/front/src/modules/simulationResult/components/SimulationResultsMap/SimulationResultsMap.tsx
@@ -197,7 +197,7 @@ const SimulationResultMap = ({ geometry, trainSimulation }: SimulationResultMapP
         {...viewport}
         cursor="pointer"
         ref={mapRef}
-        style={{ width: '100%', height: '100%' }}
+        style={{ width: '100%', height: '100%', borderRadius: '10px' }}
         mapStyle={mapBlankStyle}
         onMove={(e) => updateViewportChange(e.viewState)}
         attributionControl={false} // Defined below
diff --git a/front/src/styles/scss/applications/operationalStudies/_simulationresults.scss b/front/src/styles/scss/applications/operationalStudies/_simulationresults.scss
index b7bf41e6693..8fffa70294a 100644
--- a/front/src/styles/scss/applications/operationalStudies/_simulationresults.scss
+++ b/front/src/styles/scss/applications/operationalStudies/_simulationresults.scss
@@ -43,10 +43,21 @@
     border-radius: 4px;
 
     &.speedspacechart-container {
-      background-color: rgb(247, 246, 238);
+      margin-bottom: 41px;
     }
   }
 
+  .simulation-map {
+    position: relative;
+    height: 720px;
+    margin: 0 30px 56px 38px;
+    border-radius: 10px;
+    box-shadow:
+      0 1px 0 rgba(255, 255, 255, 1) inset,
+      0 4px 7px -3px rgba(255, 171, 88, 0.17),
+      0 2px 4px rgba(0, 0, 0, 0.22);
+  }
+
   /* MAP */
   .train-speed-label {
     text-shadow: 0 0 3px #fff;
diff --git a/front/tests/pages/op-timetable-page-model.ts b/front/tests/pages/op-timetable-page-model.ts
index d887a8866ab..4f817f3dd78 100644
--- a/front/tests/pages/op-timetable-page-model.ts
+++ b/front/tests/pages/op-timetable-page-model.ts
@@ -53,7 +53,7 @@ class OperationalStudiesTimetablePage {
     this.speedSpaceChart = page.locator('#container-SpeedSpaceChart');
     this.spaceTimeChart = page.locator('.space-time-chart-container');
     this.timeStopsDataSheet = page.locator('.time-stops-datasheet');
-    this.simulationMap = page.locator('.osrd-simulation-map');
+    this.simulationMap = page.locator('.simulation-map');
     this.simulationDriverTrainSchedule = page.locator('.simulation-driver-train-schedule');
     this.timetableFilterButton = page.getByTestId('timetable-filter-button');
     this.timetableFilterButtonClose = page.getByTestId('timetable-filter-button-close');