[O2B-1640] Improve the UX of the run overview table

lib/public/app.css

@@ -864,6 +864,87 @@ label {
     }
 }
 
+/* runs overview: labels of the timing lines have the same width so that the times are aligned, and digits have a fixed width */
+.runs-timing-label {
+    min-width: 2.8em;
+}
+
+.runs-timing-label + * {
+    font-variant-numeric: tabular-nums;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+/*
+ * Run definitions of the runs overview: only shapes, weights and neutral shades are used, as colors are reserved to states
+ */
+.run-definition {
+    display: inline-block;
+    padding: 0.2em 0.45em;
+    border-radius: 0.25rem;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+}
+
+.run-definition-physics {
+    background: color-mix(in srgb, var(--color-black) 75%, var(--color-white));
+    color: var(--color-white);
+}
+
+.run-definition-cosmics {
+    border: 1.5px solid var(--color-black);
+}
+
+.run-definition-technical {
+    background: var(--color-gray);
+}
+
+.run-definition-synthetic {
+    border: 1px dashed var(--color-gray-darker);
+    font-weight: 400;
+}
+
+.run-definition-calibration {
+    border: 1px solid var(--color-gray-dark);
+    border-left: 4px solid var(--color-black);
+}
+
+.run-definition-commissioning {
+    padding: 0;
+    text-decoration: underline dotted;
+    text-underline-offset: 3px;
+}
+
+/* Legend of the run definitions: the labels have the same width and the descriptions are aligned on their left */
+.run-definition-legend-label {
+    width: 8rem;
+    flex-shrink: 0;
+}
+
+.run-definition-legend-description {
+    text-align: left;
+}
+
+/* Bold text */
+.bold {
+    font-weight: 700;
+}
+
+/* Compact calibration status badge of the runs overview */
+.runs-calibration-status {
+    font-size: 0.625rem;
+}
+
+/* Lets a flex item shrink below its content width, so its content can be truncated with an ellipsis */
+.min-w-0 {
+    min-width: 0;
+}
+
 /* logs table: the created, passes and tags columns have a content of a fixed size, so they leave more space to the title on wide screens */
 .w-logs-title-column {
     width: 35%;

lib/public/views/Runs/ActiveColumns/runsActiveColumns.js

@@ -34,7 +34,7 @@ import { formatAliceCurrent } from '../format/formatAliceCurrent.js';
 import { formatTagsList } from '../../Tags/format/formatTagsList.js';
 import { buttonLinkWithDropdown } from '../../../components/common/selection/infoLoggerButtonGroup/buttonLinkWithDropdown.js';
 import { infologgerLinksComponents } from '../../../components/common/externalLinks/infologgerLinksComponents.js';
-import { RunQualities } from '../../../domain/enums/RunQualities.js';
+import { getRunQualityColor } from '../format/getRunQualityColor.js';
 import { qcGuiLinkComponent } from '../../../components/common/externalLinks/qcGuiLinkComponent.js';
 import { isRunConsideredRunning } from '../../../services/run/isRunConsideredRunning.js';
 import { aliEcsEnvironmentLinkComponent } from '../../../components/common/externalLinks/aliEcsEnvironmentLinkComponent.js';
@@ -45,6 +45,29 @@ import { checkboxes } from '../../../components/Filters/common/filters/checkboxF
 import radioButtonFilter from '../../../components/Filters/common/filters/radioButtonFilter.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
+/**
+ * Returns the actions available on a run (copy of its number, links to InfoLogger, QC GUI and AliECS GUI)
+ *
+ * @param {number} runNumber the run number
+ * @param {Run} run the run
+ * @return {Component[]} the actions components
+ */
+export const runActionsComponents = (runNumber, run) => [
+    h(
+        CopyToClipboardComponent,
+        {
+            value: runNumber,
+            id: runNumber,
+        },
+        'Copy Run Number',
+    ),
+    ...infologgerLinksComponents({ runNumbers: [runNumber], environmentId: run.environmentId }),
+    qcGuiLinkComponent(run),
+    isRunConsideredRunning(run)
+        ? aliEcsEnvironmentLinkComponent(run.environmentId)
+        : null,
+];
+
 /**
  * List of active columns for a generic runs table
  */
@@ -72,21 +95,7 @@ export const runsActiveColumns = {
             runNumber,
             'run-detail',
             { runNumber },
-            [
-                h(
-                    CopyToClipboardComponent,
-                    {
-                        value: runNumber,
-                        id: runNumber,
-                    },
-                    'Copy Run Number',
-                ),
-                ...infologgerLinksComponents({ runNumbers: [runNumber], environmentId: run.environmentId }),
-                qcGuiLinkComponent(run),
-                isRunConsideredRunning(run)
-                    ? aliEcsEnvironmentLinkComponent(run.environmentId)
-                    : null,
-            ],
+            runActionsComponents(runNumber, run),
         ),
         profiles: {
             home: true,
@@ -422,16 +431,7 @@ export const runsActiveColumns = {
             environment: true,
             rcTemplate: {
                 classes: '',
-                format: (runQuality) => h('.btn.white', {
-                    class: (() => {
-                        if (runQuality === RunQualities.GOOD) {
-                            return 'bg-success';
-                        } else if (runQuality === RunQualities.BAD) {
-                            return 'bg-danger';
-                        }
-                        return 'bg-gray-darker';
-                    })(),
-                }, runQuality),
+                format: (runQuality) => h('.btn.white', { class: `bg-${getRunQualityColor(runQuality)}` }, runQuality),
             },
         },