From 79ba07e6c7a87aaea02f0ac81a4615d88f6fc3b2 Mon Sep 17 00:00:00 2001
From: Clara Ni <clara.ni@outlook.fr>
Date: Mon, 21 Oct 2024 17:39:38 +0200
Subject: [PATCH] front: small improvements on scenario page

Signed-off-by: Clara Ni <clara.ni@outlook.fr>
---
 .../operationalStudies/views/SimulationResults.tsx  |  6 +++---
 .../operationalStudies/_simulationresults.scss      | 13 ++++++++++++-
 front/tests/011-op-times-and-stops-tab.spec.ts      |  2 +-
 front/tests/012-op-simulation-settings-tab.spec.ts  |  8 ++++----
 front/tests/pages/op-output-table-page-model.ts     |  2 +-
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/front/src/applications/operationalStudies/views/SimulationResults.tsx b/front/src/applications/operationalStudies/views/SimulationResults.tsx
index 61f7ef18d93..1cf08985604 100644
--- a/front/src/applications/operationalStudies/views/SimulationResults.tsx
+++ b/front/src/applications/operationalStudies/views/SimulationResults.tsx
@@ -169,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={{
@@ -211,7 +211,7 @@ const SimulationResults = ({
         pathProperties &&
         operationalPoints &&
         infraId && (
-          <div className="osrd-simulation-container mb-2">
+          <div className="time-stop-outputs">
             <TimesStopsOutput
               simulatedTrain={trainSimulation}
               pathProperties={pathProperties}
@@ -230,7 +230,7 @@ const SimulationResults = ({
         selectedTrainRollingStock &&
         operationalPoints &&
         infraId && (
-          <div className="osrd-simulation-container mb-2 bg-white">
+          <div className="driver-train-schedule">
             <DriverTrainSchedule
               train={selectedTrainSchedule}
               simulatedTrain={trainSimulation}
diff --git a/front/src/styles/scss/applications/operationalStudies/_simulationresults.scss b/front/src/styles/scss/applications/operationalStudies/_simulationresults.scss
index 8fffa70294a..5095ce4f8e8 100644
--- a/front/src/styles/scss/applications/operationalStudies/_simulationresults.scss
+++ b/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;
@@ -58,6 +58,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;
diff --git a/front/tests/011-op-times-and-stops-tab.spec.ts b/front/tests/011-op-times-and-stops-tab.spec.ts
index 6586707d076..8f81794bb20 100644
--- a/front/tests/011-op-times-and-stops-tab.spec.ts
+++ b/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);
   });
 
diff --git a/front/tests/012-op-simulation-settings-tab.spec.ts b/front/tests/012-op-simulation-settings-tab.spec.ts
index 14762ce5e1e..5561557ec6a 100644
--- a/front/tests/012-op-simulation-settings-tab.spec.ts
+++ b/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);
   });
 });
diff --git a/front/tests/pages/op-output-table-page-model.ts b/front/tests/pages/op-output-table-page-model.ts
index 7b37727329e..e6a2d8b6a57 100644
--- a/front/tests/pages/op-output-table-page-model.ts
+++ b/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