front: clean simulation map style (scenario results)

Signed-off-by: Clara Ni <clara.ni@outlook.fr>
OpenRailAssociation · Oct 21, 2024 · b15f237 · b15f237
1 parent a6a907c
commit b15f237
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/front/src/applications/operationalStudies/views/SimulationResults.tsx b/front/src/applications/operationalStudies/views/SimulationResults.tsx
@@ -53,13 +53,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,
@@ -217,24 +215,20 @@ const SimulationResults = ({
         )}
 
       {/* 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 className="simulation-map">
+        <SimulationResultsMap
+          setExtViewport={setExtViewport}
+          geometry={pathProperties?.geometry}
+          trainSimulation={
+            selectedTrainSchedule && trainSimulation
+              ? {
+                  ...trainSimulation,
+                  trainId: selectedTrainSchedule.id,
+                  startTime: selectedTrainSchedule.start_time,
+                }
+              : undefined
+          }
+        />
       </div>
 
       {/* TRAIN : DRIVER TRAIN SCHEDULE */}

diff --git 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
@@ -47,6 +47,14 @@
     }
   }
 
+  .simulation-map {
+    position: relative;
+    height: 450px;
+    margin: 0 30px 56px 30px;
+    border-radius: 20px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  }
+
   /* MAP */
   .train-speed-label {
     text-shadow: 0 0 3px #fff;