front: update column styles in time stops table

Signed-off-by: Alice Khoudli <[email protected]>
OpenRailAssociation · Oct 25, 2024 · 8e3a731 · 8e3a731
1 parent 90c537c
commit 8e3a731
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 48 deletions.
diff --git a/front/public/locales/en/timesStops.json b/front/public/locales/en/timesStops.json
@@ -4,13 +4,13 @@
   "calculatedDepartureTime": "calculated departure time",
   "dayCounter": "D+{{count}}",
   "departureTime": "requested departure time",
-  "diffMargins": "margins diff. (s)",
+  "diffMargins": "margins diff. (s)",
   "name": "CI",
-  "ch": "ch",
+  "ch": "CH",
   "noPathLoaded": "No path loaded",
-  "realMargin": "real margin (s)",
+  "realMargin": "real margin (s)",
   "receptionOnClosedSignal": "reception on closed signal",
-  "shortSlipDistance": "Short Slip Distance",
+  "shortSlipDistance": "short slip distance",
   "stopTime": "stopping time (s)",
   "theoreticalMargin": "theoretical margin",
   "theoreticalMarginPlaceholder": "% or min/100km",

diff --git a/front/public/locales/fr/timesStops.json b/front/public/locales/fr/timesStops.json
@@ -4,16 +4,16 @@
   "calculatedDepartureTime": "départ calculé",
   "dayCounter": "J+{{count}}",
   "departureTime": "départ demandé",
-  "diffMargins": "diff. marges (s)",
+  "diffMargins": "diff. marges (s)",
   "name": "CI",
-  "ch": "ch",
+  "ch": "CH",
   "noPathLoaded": "Aucun chemin chargé",
-  "shortSlipDistance": "Faible glissement",
-  "realMargin": "marge réelle (s)",
+  "realMargin": "marge réelle (s)",
   "receptionOnClosedSignal": "réception sur signal fermé",
+  "shortSlipDistance": "faible glissement",
   "stopTime": "temps d'arrêt (s)",
   "theoreticalMargin": "marge théorique",
   "theoreticalMarginPlaceholder": "% ou min/100km",
-  "theoreticalMarginSeconds": "marge théorique linéaire (s)",
+  "theoreticalMarginSeconds": "marge linéaire théorique (s)",
   "waypoint": "Via {{id}}"
 }
diff --git a/front/src/modules/timesStops/TimesStopsOutput.tsx b/front/src/modules/timesStops/TimesStopsOutput.tsx
@@ -48,7 +48,7 @@ const TimesStopsOutput = ({
     <TimesStops
       rows={enrichedOperationalPoints}
       tableType={TableType.Output}
-      cellClassName={({ rowData: rowData_ }) => {
+      cellClassName={({ rowData: rowData_, columnId }) => {
         const rowData = rowData_ as TimeStopsRow;
         const arrivalScheduleNotRespected = rowData.arrival?.time
           ? rowData.calculatedArrival !== rowData.arrival.time
@@ -57,9 +57,10 @@ const TimesStopsOutput = ({
         return cx({
           'warning-schedule': arrivalScheduleNotRespected,
           'warning-margin': negativeDiffMargins,
+          'secondary-code-column': columnId === 'ch',
         });
       }}
-      headerRowHeight={65}
+      headerRowHeight={50}
     />
   );
 };

diff --git a/...s/timesStops/hooks/useTimeStopsColumns.ts → .../timesStops/hooks/useTimeStopsColumns.tsx b/...s/timesStops/hooks/useTimeStopsColumns.ts → .../timesStops/hooks/useTimeStopsColumns.tsx
@@ -38,28 +38,29 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
       isOutputTable
         ? [
             {
-              ...disabledTextColumn('theoreticalMarginSeconds', t('theoreticalMarginSeconds'), {
-                alignRight: true,
-              }),
+              ...disabledTextColumn('theoreticalMarginSeconds', t('theoreticalMarginSeconds')),
+              headerClassName: 'padded-header',
               ...fixedWidth(110),
             },
             {
-              ...disabledTextColumn('calculatedMargin', t('realMargin'), {
-                alignRight: true,
-              }),
-              ...fixedWidth(120),
+              ...disabledTextColumn('calculatedMargin', t('realMargin')),
+              headerClassName: 'padded-header',
+              ...fixedWidth(90),
             },
             {
-              ...disabledTextColumn('diffMargins', t('diffMargins'), { alignRight: true }),
-              ...fixedWidth(120),
+              ...disabledTextColumn('diffMargins', t('diffMargins')),
+              headerClassName: 'padded-header',
+              ...fixedWidth(90),
             },
             {
               ...disabledTextColumn('calculatedArrival', t('calculatedArrivalTime')),
-              ...fixedWidth(95),
+              headerClassName: 'padded-header',
+              ...fixedWidth(105),
             },
             {
               ...disabledTextColumn('calculatedDeparture', t('calculatedDepartureTime')),
-              ...fixedWidth(97),
+              headerClassName: 'padded-header',
+              ...fixedWidth(105),
             },
           ]
         : []
@@ -69,56 +70,69 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
       {
         ...keyColumn('name', createTextColumn()),
         title: t('name'),
+        ...(isOutputTable && {
+          component: ({ rowData }) => (
+            <span title={rowData.name} className="ml-1 text-nowrap overflow-hidden">
+              {rowData.name}
+            </span>
+          ),
+        }),
         disabled: true,
-        minWidth: isOutputTable ? 180 : 300,
+        minWidth: isOutputTable ? undefined : 300,
+        maxWidth: isOutputTable ? 560 : undefined,
       },
       {
         ...keyColumn('ch', createTextColumn()),
         title: t('ch'),
         disabled: true,
-        maxWidth: 45,
+        ...fixedWidth(45),
       },
       {
         ...keyColumn('arrival', timeColumn(isOutputTable)),
-        alignRight: true,
         title: t('arrivalTime'),
+        headerClassName: 'padded-header',
+        ...fixedWidth(105),
 
         // We should not be able to edit the arrival time of the origin
         disabled: ({ rowIndex }) => isOutputTable || rowIndex === 0,
       },
-      {
-        ...keyColumn('departure', timeColumn(isOutputTable)),
-        title: t('departureTime'),
-
-        // We should not be able to edit the departure time of the origin
-        disabled: ({ rowIndex }) => isOutputTable || rowIndex === 0,
-      },
       {
         ...keyColumn(
           'stopFor',
           createTextColumn({
             continuousUpdates: false,
-            alignRight: true,
           })
         ),
         title: t('stopTime'),
+        headerClassName: 'padded-header',
         disabled: isOutputTable,
-        maxWidth: isOutputTable ? 90 : undefined,
+        maxWidth: isOutputTable ? 100 : undefined,
         grow: 0.6,
       },
+      {
+        ...keyColumn('departure', timeColumn(isOutputTable)),
+        title: t('departureTime'),
+        headerClassName: 'padded-header',
+        ...fixedWidth(105),
+
+        // We should not be able to edit the departure time of the origin
+        disabled: ({ rowIndex }) => isOutputTable || rowIndex === 0,
+      },
       {
         ...keyColumn('onStopSignal', checkboxColumn as Partial<Column<boolean | undefined>>),
         title: t('receptionOnClosedSignal'),
+        headerClassName: 'padded-header',
+        ...fixedWidth(97),
 
         // We should not be able to edit the reception on close signal if stopFor is not filled
         // except for the destination
-        ...fixedWidth(94),
         disabled: ({ rowData, rowIndex }) =>
           isOutputTable || (rowIndex !== allWaypoints.length - 1 && !rowData.stopFor),
       },
       {
         ...keyColumn('shortSlipDistance', checkboxColumn as Partial<Column<boolean | undefined>>),
         title: t('shortSlipDistance'),
+        headerClassName: 'padded-header',
         ...fixedWidth(94),
         disabled: ({ rowData, rowIndex }) =>
           isOutputTable || (rowIndex !== allWaypoints.length - 1 && !rowData.onStopSignal),
@@ -128,7 +142,6 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
           'theoreticalMargin',
           createTextColumn({
             continuousUpdates: false,
-            alignRight: true,
             placeholder: !isOutputTable ? t('theoreticalMarginPlaceholder') : '',
             formatBlurredInput: (value) => {
               if (!value || value === '0%') return '';
@@ -142,8 +155,10 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
         cellClassName: ({ rowData }) =>
           cx({ invalidCell: !isOutputTable && !rowData.isMarginValid }),
         title: t('theoreticalMargin'),
+        headerClassName: 'padded-header',
+        minWidth: 100,
+        maxWidth: 140,
         disabled: ({ rowIndex }) => isOutputTable || rowIndex === allWaypoints.length - 1,
-        ...fixedWidth(110),
       },
       ...extraOutputColumns,
     ] as Column<T>[];

diff --git a/front/src/modules/timesStops/styles/_readOnlyTime.scss b/front/src/modules/timesStops/styles/_readOnlyTime.scss
@@ -1,6 +1,5 @@
 .read-only-time {
   // using px to conform with the padding in the react-datasheet-grid library class .dsg-input
   padding: 0 10px;
-  text-align: right;
   width: 100%;
 }
diff --git a/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss b/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss
@@ -14,11 +14,21 @@
   .activeRow {
     font-weight: semibold;
     color: var(--black100);
-    .dsg-cell-gutter {
+    .dsg-cell-gutter,
+    .secondary-code-column {
       font-weight: normal;
     }
   }
 
+  .padded-header > * {
+    padding-left: 8px;
+    padding-right: 16px;
+  }
+
+  .secondary-code-column {
+    color: var(--grey50);
+  }
+
   .invalidCell {
     color: red !important;
   }

diff --git a/front/tests/011-op-times-and-stops-tab.spec.ts b/front/tests/011-op-times-and-stops-tab.spec.ts
@@ -110,8 +110,8 @@ test.describe('Times and Stops Tab Verification', () => {
       translations.name,
       translations.ch,
       translations.arrivalTime,
-      translations.departureTime,
       translations.stopTime,
+      translations.departureTime,
       translations.receptionOnClosedSignal,
       translations.shortSlipDistance,
       translations.theoreticalMargin,

diff --git a/front/tests/assets/operationStudies/timesAndStops/expectedInputsCellsData.json b/front/tests/assets/operationStudies/timesAndStops/expectedInputsCellsData.json
@@ -5,14 +5,14 @@
   },
   {
     "row": 2,
-    "values": ["Mid_West_station", "BV", "11:47:40", "11:52:40", "300", "1min/100km"]
+    "values": ["Mid_West_station", "BV", "11:47:40", "300", "11:52:40", "1min/100km"]
   },
   {
     "row": 3,
-    "values": ["Mid_East_station", "BV", "12:05:21", "12:07:25", "124", ""]
+    "values": ["Mid_East_station", "BV", "12:05:21", "124", "12:07:25", ""]
   },
   {
     "row": 4,
-    "values": ["North_East_station", "BV", "", "", "0", ""]
+    "values": ["North_East_station", "BV", "", "0", "", ""]
   }
 ]
diff --git a/front/tests/assets/operationStudies/timesAndStops/updatedInputsCellsData.json b/front/tests/assets/operationStudies/timesAndStops/updatedInputsCellsData.json
@@ -9,10 +9,10 @@
   },
   {
     "row": 3,
-    "values": ["Mid_East_station", "BV", "13:58:19", "13:58:40", "21", ""]
+    "values": ["Mid_East_station", "BV", "13:58:19", "21", "13:58:40", ""]
   },
   {
     "row": 4,
-    "values": ["North_East_station", "BV", "", "", "0", ""]
+    "values": ["North_East_station", "BV", "", "0", "", ""]
   }
 ]
diff --git a/front/tests/pages/op-output-table-page-model.ts b/front/tests/pages/op-output-table-page-model.ts
@@ -14,7 +14,7 @@ class OperationalStudiesOutputTablePage {
   constructor(page: Page) {
     this.page = page;
     this.columnHeaders = page.locator(
-      '[class="dsg-cell dsg-cell-header"] .dsg-cell-header-container'
+      '.dsg-cell.dsg-cell-header:not(.dsg-cell-gutter) .dsg-cell-header-container'
     );
     this.tableRows = page.locator('.osrd-simulation-container .time-stops-datasheet .dsg-row');
   }
@@ -69,9 +69,12 @@ class OperationalStudiesOutputTablePage {
         calculatedDeparture,
       ] = await Promise.all([
         await OperationalStudiesOutputTablePage.getCellValue(
-          cells.nth(headerIndexMap[translations.name])
+          cells.nth(headerIndexMap[translations.name]),
+          false
+        ),
+        await OperationalStudiesOutputTablePage.getCellValue(
+          cells.nth(headerIndexMap[translations.ch])
         ),
-        await OperationalStudiesOutputTablePage.getCellValue(cells.nth(headerIndexMap.Ch)),
         await OperationalStudiesOutputTablePage.getCellValue(
           cells.nth(headerIndexMap[translations.arrivalTime]),
           false