[O2B-1071] Improvements on LHC Fills Overview page (#1275)

* small user-interface improvements readibility for the LHC Fill table

Author: DKR2002

lib/public/views/LhcFills/ActiveColumns/lhcFillsActiveColumns.js

@@ -18,6 +18,7 @@ import { frontLink } from '../../../components/common/navigation/frontLink.js';
 import { formatPercentage } from '../../../utilities/formatting/formatPercentage.js';
 import { h } from '/js/src/index.js';
 import { formatRunsList } from '../../Runs/format/formatRunsList.js';
+import { formatLhcFillsTimeLoss } from '../format/formatLhcFillsTimeLoss.js';
 
 /**
  * List of active columns for a lhc fills table
@@ -31,19 +32,19 @@ export const lhcFillsActiveColumns = {
         format: (fillNumber) => frontLink(fillNumber, 'lhc-fill-details', { fillNumber: fillNumber }),
     },
     stableBeamsStart: {
-        name: 'Stable beams start',
+        name: 'SB START',
         visible: true,
         size: 'w-8',
-        format: (timestamp) => formatTimestamp(timestamp),
+        format: (timestamp) => formatTimestamp(timestamp, false),
     },
     stableBeamsEnd: {
-        name: 'Stable beams end',
+        name: 'SB END',
         visible: true,
         size: 'w-8',
-        format: (timestamp) => formatTimestamp(timestamp),
+        format: (timestamp) => formatTimestamp(timestamp, false),
     },
     stableBeamsDuration: {
-        name: 'Beams Duration',
+        name: 'SB Duration',
         visible: true,
         size: 'w-8',
         format: (time, { stableBeamsStart, stableBeamsEnd }) => {
@@ -74,13 +75,13 @@ export const lhcFillsActiveColumns = {
         name: 'Before 1st run',
         visible: true,
         size: 'w-8',
-        format: (duration, lhcFill) => duration ? `${formatDuration(duration)} (${formatPercentage(lhcFill.efficiencyLossAtStart)})` : '-',
+        format: (duration, lhcFill) => formatLhcFillsTimeLoss(duration, lhcFill.efficiencyLossAtStart, false),
     },
     timeLossAtEnd: {
         name: 'After last run',
         visible: true,
         size: 'w-8',
-        format: (duration, lhcFill) => duration ? `${formatDuration(duration)} (${formatPercentage(lhcFill.efficiencyLossAtEnd)})` : '-',
+        format: (duration, lhcFill) => formatLhcFillsTimeLoss(duration, lhcFill.efficiencyLossAtEnd, false),
     },
     meanRunDuration: {
         name: 'Mean run duration',
@@ -99,6 +100,7 @@ export const lhcFillsActiveColumns = {
         visible: true,
         size: 'w-10',
         format: (value) => value ? value : '-',
+        balloon: true,
     },
     runs: {
         name: 'Runs',

lib/public/views/LhcFills/format/formatLhcFillsTimeLoss.js

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { h } from '/js/src/index.js';
+import { formatDuration } from '../../../utilities/formatting/formatDuration.mjs';
+import { formatPercentage } from '../../../utilities/formatting/formatPercentage.js';
+
+/**
+ * Formats the duration and loss percentage to display, with the option of
+ * separating the duration and percentage by a newline or not.
+ *
+ * @param {number} duration the duration to display, in milliseconds.
+ * @param {number} efficiencyLoss the percentage to display, normalized between 0 and 1.
+ * @param {boolean} [inline] if true, the duration and loss will be returned as a string.
+ *      Else, a component will be returned, where the duration and loss are separated by a newline.
+ * @returns {vnode|string} the formatted duration and percentage.
+ */
+export const formatLhcFillsTimeLoss = (duration, efficiencyLoss, inline = true) => {
+    if (!duration) {
+        return '-';
+    }
+
+    const formattedDuration = formatDuration(duration);
+    const formattedEfficiencyLossPercentage = formatPercentage(efficiencyLoss);
+
+    if (inline) {
+        return `${formattedDuration} (${formattedEfficiencyLossPercentage})`;
+    }
+
+    return h('', [formattedDuration, h('br'), `(${formattedEfficiencyLossPercentage})`]);
+};

test/public/lhcFills/overview.test.js

@@ -70,9 +70,9 @@ module.exports = () => {
             statusMessage: (string) => typeof string == 'string',
             efficiency: (efficiency) => efficiency === '-' || efficiency.match(percentageRegex) !== null,
             timeLossAtStart: (data) => data === '-'
-                || data.match(new RegExp(`${durationRegex.source} \\(${percentageRegex.source}\\)`)) !== null,
+                || data.match(new RegExp(`${durationRegex.source}\n\\(${percentageRegex.source}\\)`)) !== null,
             timeLossAtEnd: (data) => data === '-'
-                || data.match(new RegExp(`${durationRegex.source} \\(${percentageRegex.source}\\)`)) !== null,
+                || data.match(new RegExp(`${durationRegex.source}\n\\(${percentageRegex.source}\\)`)) !== null,
             meanRunDuration: (duration) => duration === '-' || duration.match(durationRegex) !== null,
             runsCoverage: (duration) => duration === '-' || duration.match(durationRegex) !== null,
             runs: (string) => typeof string == 'string',