front: stdcm: result table adjustments

Signed-off-by: SarahBellaha <sarah.bellaha@sncf.fr>
OpenRailAssociation · Oct 9, 2024 · f1b814e · f1b814e
1 parent a3ca1b7
commit f1b814e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/front/src/applications/stdcmV2/components/StdcmResults/StdcmResultsTable.tsx b/front/src/applications/stdcmV2/components/StdcmResults/StdcmResultsTable.tsx
@@ -48,7 +48,10 @@ const StcdmResultsTable = ({
             const isFirstStep = index === 0;
             const isLastStep = index === operationalPointsList.length - 1;
             const prevStep = operationalPointsList[index - 1];
-            const shouldRenderRow = isFirstStep || step.duration > 0 || isLastStep;
+            const isRequestedPathStep = stdcmData.simulationPathSteps.some(
+              (pathStep) => pathStep?.name === step.name && pathStep?.ch === step.ch
+            );
+            const shouldRenderRow = isFirstStep || isRequestedPathStep || isLastStep;
             if (showAllOP || shouldRenderRow) {
               return (
                 <tr key={index}>
@@ -61,10 +64,11 @@ const StcdmResultsTable = ({
                   >
                     {index + 1}
                   </td>
-                  <td>
+                  <td style={{ color: 'rgb(49, 46, 43)' }}>
                     {!isFirstStep &&
                     !isLastStep &&
                     step.name === prevStep.name &&
+                    !isRequestedPathStep &&
                     step.duration === 0
                       ? '='
                       : step.name || 'Unknown'}
@@ -93,12 +97,12 @@ const StcdmResultsTable = ({
                   <td className="stop">
                     {isFirstStep || step.duration > 0 ? step.stopEndTime : ''}
                   </td>
-                  <td className="weight" style={{ color: isLastStep ? '#797671' : '#312E2B' }}>
+                  <td className="weight" style={{ color: !isFirstStep ? '#797671' : '#312E2B' }}>
                     {!isFirstStep && !isLastStep
                       ? '='
                       : `${Math.floor(stdcmData.rollingStock.mass / 1000)}t`}
                   </td>
-                  <td style={{ color: isLastStep ? '#797671' : '#312E2B' }}>
+                  <td style={{ color: !isFirstStep ? '#797671' : '#312E2B' }}>
                     {!isFirstStep && !isLastStep ? '=' : stdcmData.rollingStock.metadata?.reference}
                   </td>
                 </tr>

diff --git a/front/src/applications/stdcmV2/views/StdcmViewV2.tsx b/front/src/applications/stdcmV2/views/StdcmViewV2.tsx
@@ -84,11 +84,13 @@ const StdcmViewV2 = () => {
   }, [selectedSimulation]);
 
   useEffect(() => {
-    setShowBtnToLaunchSimulation(!isEqual(currentSimulationInputs, selectedSimulation?.inputs));
+    if (!isDebugMode) {
+      setShowBtnToLaunchSimulation(!isEqual(currentSimulationInputs, selectedSimulation?.inputs));
+    }
   }, [currentSimulationInputs]);
 
   useEffect(() => {
-    if (isPending) {
+    if (isPending && !isDebugMode) {
       setShowBtnToLaunchSimulation(false);
     }
   }, [isPending]);

diff --git a/front/src/styles/scss/applications/stdcmV2/_results.scss b/front/src/styles/scss/applications/stdcmV2/_results.scss
@@ -22,7 +22,7 @@
       .scroll-btn {
         position: absolute;
         border-radius: 0.375rem;
-        box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1) inset;
+        box-shadow: 0rem 0rem 0rem 0.125rem rgba(255, 255, 255, 1) inset;
         background-color: rgba(246, 248, 249, 1);
         width: 3rem;
         height: 3rem;
@@ -132,13 +132,23 @@
       flex-direction: column;
       width: 70%;
 
+      .table-container::-webkit-scrollbar {
+        display: none; /* Safari and Chrome */
+      }
+
       .table-container {
         margin-right: 2rem;
 
         .table-results {
           border-radius: 0.375rem;
           background-color: rgba(0, 0, 0, 0.05);
 
+          thead {
+            position: sticky;
+            top: 0;
+            background-color: #dde3e6;
+          }
+
           th {
             height: 2rem;
             font-size: 0.875rem;
@@ -191,7 +201,7 @@
           }
           .weight {
             padding-left: 2.063rem;
-            color: '#312E2B';
+            color: '#797671';
 
             &.lastStep {
               color: '#797671';
@@ -202,8 +212,10 @@
           }
         }
         .results-buttons {
+          position: sticky;
+          bottom: 0;
           height: 6.5rem;
-          background-color: rgba(0, 0, 0, 0.05);
+          background-color: #dde3e6;
           display: flex;
           justify-content: space-between;
           border-bottom-left-radius: 0.375rem;
@@ -321,6 +333,8 @@
     }
 
     .map-results {
+      position: sticky;
+      top: 0;
       width: 40%;
       height: 33.75rem;
       margin-right: 2rem;