front: clean scenario page

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,
@@ -128,7 +125,7 @@ const SimulationResults = ({
       )}
 
       {/* SIMULATION : SPACE TIME CHART */}
-      <div className="simulation-warped-map d-flex flex-row align-items-stretch mb-2 bg-white">
+      <div className="simulation-warped-map d-flex flex-row align-items-stretch mb-2">
         {projectionData && projectionData.projectedTrains.length > 0 && pathProperties && (
           <>
             <button
@@ -172,7 +169,7 @@ const SimulationResults = ({
 
       {/* TRAIN : SPACE SPEED CHART */}
       {selectedTrainRollingStock && trainSimulation && pathProperties && selectedTrainSchedule && (
-        <div className="osrd-simulation-container d-flex mb-2 speedspacechart-container">
+        <div className="osrd-simulation-container speedspacechart-container">
           <div
             className="chart-container"
             style={{
@@ -191,13 +188,30 @@ 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' &&
         pathProperties &&
         operationalPoints &&
         infraId && (
-          <div className="osrd-simulation-container mb-2">
+          <div className="time-stop-outputs">
             <TimesStopsOutput
               simulatedTrain={trainSimulation}
               pathProperties={pathProperties}
@@ -209,35 +223,14 @@ 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 &&
         pathProperties &&
         selectedTrainRollingStock &&
         operationalPoints &&
         infraId && (
-          <div className="osrd-simulation-container mb-2">
+          <div className="driver-train-schedule">
             <DriverTrainSchedule
               train={selectedTrainSchedule}
               simulatedTrain={trainSimulation}

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

front/src/styles/scss/applications/operationalStudies/_simulationresults.scss

@@ -7,7 +7,7 @@
     border-radius: 4px;
     width: 100%;
     background: var(--secondary);
-    z-index: 2;
+    z-index: 10;
     top: 0;
     left: 0;
     padding: 0.5rem;
@@ -39,15 +39,36 @@
 
   .osrd-simulation-container {
     position: relative;
-    background-color: white;
     padding: 1rem;
     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);
+  }
+
+  .time-stop-outputs {
+    margin: 0 30px 27px 38px;
+  }
+
+  .driver-train-schedule {
+    background-color: white;
+    padding: 1rem;
+    border-radius: 4px;
+    margin-inline: 38px 30px;
+  }
+
   /* MAP */
   .train-speed-label {
     text-shadow: 0 0 3px #fff;

front/tests/011-op-times-and-stops-tab.spec.ts

@@ -161,7 +161,7 @@ test.describe('Times and Stops Tab Verification', () => {
     await opTimetablePage.clickOnScenarioCollapseButton();
     await opTimetablePage.verifyTimeStopsDataSheetVisibility();
     // Scroll and extract data from output table
-    await scrollContainer(page, '.osrd-simulation-container .time-stops-datasheet .dsg-container');
+    await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(outputExpectedCellData, selectedLanguage);
   });
 

front/tests/012-op-simulation-settings-tab.spec.ts

@@ -169,7 +169,7 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.verifyTimeStopsDataSheetVisibility();
     await opTimetablePage.getTrainArrivalTime('11:52');
     await opTimetablePage.clickOnScenarioCollapseButton();
-    await scrollContainer(page, '.osrd-simulation-container .time-stops-datasheet .dsg-container');
+    await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(
       expectedCellDataElectricalProfileON,
       selectedLanguage
@@ -230,7 +230,7 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.verifyTimeStopsDataSheetVisibility();
     await opTimetablePage.getTrainArrivalTime('12:02');
     await opTimetablePage.clickOnScenarioCollapseButton();
-    await scrollContainer(page, '.osrd-simulation-container .time-stops-datasheet .dsg-container');
+    await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataCodeCompoON, selectedLanguage);
     await opTimetablePage.clickOnTimetableCollapseButton();
     // Remove the composition code option and verify the changes
@@ -294,7 +294,7 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.verifyTimeStopsDataSheetVisibility();
     await opTimetablePage.getTrainArrivalTime('11:54');
     await opTimetablePage.clickOnScenarioCollapseButton();
-    await scrollContainer(page, '.osrd-simulation-container .time-stops-datasheet .dsg-container');
+    await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataLinearMargin, selectedLanguage);
     await opTimetablePage.clickOnTimetableCollapseButton();
     // Modify the margin to 'Mareco' and verify the changes
@@ -359,7 +359,7 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.verifyTimeStopsDataSheetVisibility();
     await opTimetablePage.getTrainArrivalTime('12:05');
     await opTimetablePage.clickOnScenarioCollapseButton();
-    await scrollContainer(page, '.osrd-simulation-container .time-stops-datasheet .dsg-container');
+    await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataForAllSettings, selectedLanguage);
   });
 });

front/tests/pages/op-output-table-page-model.ts

@@ -16,7 +16,7 @@ class OperationalStudiesOutputTablePage {
     this.columnHeaders = page.locator(
       '[class="dsg-cell dsg-cell-header"] .dsg-cell-header-container'
     );
-    this.tableRows = page.locator('.osrd-simulation-container .time-stops-datasheet .dsg-row');
+    this.tableRows = page.locator('.time-stop-outputs .time-stops-datasheet .dsg-row');
   }
 
   // Retrieve the cell value based on the locator type

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');