[O2B-1641] Improve the UX of the LHC fills overview table

lib/database/seeders/20220503120937-lhc-fills.js

@@ -21,7 +21,7 @@ module.exports = {
                         stable_beams_start: '2022-03-21 13:00:00',
                         stable_beams_end: '2022-03-22 15:00:00',
                         stable_beams_duration: 100,
-                        beam_type: 'p-p',
+                        beam_type: 'PROTON - PROTON',
                         filling_scheme_name: '25ns_2352b_2340_2004_2133_108bpi_24inj',
                         created_at: new Date('2019-08-09 16:00:00'),
                         updated_at: new Date('2019-08-09 16:00:00'),
@@ -32,7 +32,7 @@ module.exports = {
                         stable_beams_start: '2022-03-21 13:00:00',
                         stable_beams_end: '2022-03-22 15:00:00',
                         stable_beams_duration: 100,
-                        beam_type: 'p-Pb',
+                        beam_type: 'PROTON - O8',
                         filling_scheme_name: 'schemename',
                         created_at: new Date('2019-08-09 17:00:00'),
                         updated_at: new Date('2019-08-09 17:00:00'),
@@ -42,28 +42,29 @@ module.exports = {
                         stable_beams_start: '2022-03-21 13:00:00',
                         stable_beams_end: '2022-03-22 15:00:00',
                         stable_beams_duration: 100,
-                        beam_type: 'Pb-Pb',
+                        beam_type: 'PB82 - PB82',
                         filling_scheme_name: 'schemename',
                         created_at: new Date('2019-08-09 18:00:00'),
                         updated_at: new Date('2019-08-09 18:00:00'),
                     },
                     {
                         fill_number: 4,
-                        beam_type: 'p-p',
+                        beam_type: 'PROTON - PROTON',
                         filling_scheme_name: 'schemename',
                         created_at: new Date('2019-08-09 19:00:00'),
                         updated_at: new Date('2019-08-09 19:00:00'),
                     },
                     {
                         fill_number: 5,
+                        beam_type: 'NE10 - NE10',
                         stable_beams_start: '2022-03-21 13:00:00',
                         filling_scheme_name: 'schemename',
                         created_at: new Date('2019-08-09 20:00:00'),
                         updated_at: new Date('2019-08-09 20:00:00'),
                     },
                     {
                         fill_number: 6,
-                        beam_type: 'PROTON-PROTON ',
+                        beam_type: 'O8 - O8',
                         stable_beams_start: '2019-08-08 11:00:00',
                         stable_beams_end: '2019-08-08 23:00:00',
                         stable_beams_duration: 60 * 60 * 12,

lib/public/app.css

@@ -6,7 +6,7 @@ html, body {
 
 .cell-xs { max-width: 2rem; }
 .cell-s { max-width: 4rem; }
-.cell-m { max-width: 8rem; }
+.cell-m { max-width: 9rem; }
 .cell-l { max-width: 16rem; }
 .cell-xl { max-width: 32rem; }
 .cell-f { width: 40%; }
@@ -864,15 +864,23 @@ 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 {
+/* runs and LHC fills overviews: labels of the timing lines have the same width so that the times are aligned, and digits have a fixed width */
+.timing-label {
     min-width: 2.8em;
 }
 
-.runs-timing-label + * {
+.timing-label + * {
     font-variant-numeric: tabular-nums;
 }
 
+.efficiency-label {
+    min-width: 6.5em;
+}
+
+.runs-duration-label {
+    min-width: 3em;
+}
+
 .invisible {
     visibility: hidden;
 }
@@ -922,14 +930,132 @@ label {
 
 /* 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;
+    width: 9rem;
     flex-shrink: 0;
 }
 
 .run-definition-legend-description {
     text-align: left;
 }
 
+/*
+ * Columns of the LHC fills overview: the columns whose content has a known width have a fixed one, the scheme name takes a part of the screen
+ * and the runs, which have the most variable content, take all the remaining width
+ */
+.w-lhc-fills-fill-column {
+    width: 9.5rem;
+}
+
+.w-lhc-fills-stable-beams-column {
+    width: 14rem;
+}
+
+.w-lhc-fills-sb-duration-column {
+    width: 7rem;
+}
+
+.w-lhc-fills-efficiency-column {
+    width: 16rem;
+}
+
+.w-lhc-fills-runs-duration-column {
+    width: 8rem;
+}
+
+/*
+ * Beam types of the LHC fills overview, by what collides: only shapes and neutral shades are used, as colors are reserved to states
+ */
+.beam-type {
+    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;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+
+.beam-type-lead-lead {
+    background: color-mix(in srgb, var(--color-black) 75%, var(--color-white));
+    color: var(--color-white);
+}
+
+.beam-type-proton-proton {
+    border: 1.5px solid var(--color-black);
+}
+
+.beam-type-proton-ion {
+    border: 1px solid var(--color-gray-dark);
+}
+
+.beam-type-ion-ion {
+    border: 1px solid var(--color-gray-dark);
+    border-left: 4px solid var(--color-black);
+}
+
+.beam-type-unknown {
+    padding: 0;
+}
+
+.beam-type-legend-label {
+    width: 9rem;
+    flex-shrink: 0;
+}
+
+.beam-type-legend-description {
+    text-align: left;
+}
+
+/*
+ * Efficiency of the LHC fills overview: from the best to the worst level, solid green, soft green, yellow, orange and red. No efficiency has no style
+ */
+.efficiency {
+    display: inline-block;
+    padding: 0.1em 0.45em;
+    border-radius: 0.25rem;
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+.efficiency-great {
+    background: var(--color-success);
+    color: var(--color-white);
+}
+
+.efficiency-good {
+    background: color-mix(in srgb, var(--color-success) 25%, var(--color-white));
+    color: var(--color-success-dark);
+}
+
+.efficiency-fair {
+    background: #fbf0b8;
+    color: #6b5600;
+}
+
+.efficiency-poor {
+    background: color-mix(in srgb, var(--color-warning) 28%, var(--color-white));
+    color: var(--color-warning-darker);
+}
+
+.efficiency-bad {
+    background: color-mix(in srgb, var(--color-danger) 15%, var(--color-white));
+    color: var(--color-danger-dark);
+}
+
+.efficiency-legend-label {
+    width: 6rem;
+    flex-shrink: 0;
+}
+
+.efficiency-legend-description {
+    text-align: left;
+}
+
 /* Bold text */
 .bold {
     font-weight: 700;

lib/public/components/common/formatting/labelledLine.js

@@ -0,0 +1,31 @@
+/**
+ * @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 { overflowBalloon } from '../popover/overflowBalloon.js';
+
+/**
+ * Display a value preceded by a small label, on its own line
+ *
+ * @param {string} id the id of the element containing the value
+ * @param {string} label the label of the line
+ * @param {Component|string} content the content of the line
+ * @param {object} [options] the display options
+ * @param {string} [options.labelClass] extra css classes of the label, to align the values of several lines for example
+ * @param {boolean} [options.balloon] if false, the content is not wrapped in a balloon, as it already has its own popover (default true)
+ * @return {Component} the line
+ */
+export const labelledLine = (id, label, content, { labelClass = '', balloon = true } = {}) => h('.flex-row.items-baseline.g1', [
+    h('span.f7.gray-darker.flex-shrink-0', { class: labelClass }, label),
+    h(`#${id}.min-w-0`, balloon ? overflowBalloon(content) : content),
+]);

lib/public/components/common/selection/infoLoggerButtonGroup/linkWithActionsDropdown.js

@@ -0,0 +1,34 @@
+/**
+ * @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 { DropdownComponent, h } from '/js/src/index.js';
+import { iconCaretBottom } from '/js/src/icons.js';
+import { frontLink } from '../../navigation/frontLink.js';
+
+/**
+ * Display a bold link, followed by a discreet caret opening a dropdown with the actions available on the target of the link
+ *
+ * @param {string} id the id of the component
+ * @param {string|number} linkContent the content of the link
+ * @param {string} page the target page of the link
+ * @param {Object} parameters the url parameters of the link
+ * @param {Component[]} actions the actions displayed in the dropdown
+ * @return {Component} the link with its actions
+ */
+export const linkWithActionsDropdown = (id, linkContent, page, parameters, actions) => h(`#${id}.flex-row.items-center.g1.f5`, [
+    frontLink(linkContent, page, parameters, { class: 'bold' }),
+    DropdownComponent(
+        h('.clickable.gray-darker.ph1', iconCaretBottom()),
+        h('.flex-column.p2.g2', actions),
+    ),
+]);

lib/public/utilities/formatting/formatTimestampAlignedWith.js

@@ -0,0 +1,37 @@
+/**
+ * @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 { formatTimestamp } from './formatTimestamp.js';
+import { userPreferencesStore } from '../userPreferencesStore.js';
+import { getLocaleDateAndTime, getLocaleDateAndTimeWithMilliseconds } from '../dateUtils.mjs';
+
+/**
+ * Format the given timestamp inline, hiding its date, but keeping its space, if it is the same day as a reference timestamp, so that when
+ * displayed below the formatted reference, the times are aligned and a different day is visible. Raw timestamps are displayed as is
+ *
+ * @param {number|null} timestamp the timestamp to format (in milliseconds)
+ * @param {number|null} [referenceTimestamp] the timestamp to compare the day to
+ * @param {boolean} [displayMilliseconds] if true, the time will include milliseconds
+ * @return {Component|string} the formatted timestamp
+ */
+export const formatTimestampAlignedWith = (timestamp, referenceTimestamp, displayMilliseconds = false) => {
+    if (timestamp && referenceTimestamp && !userPreferencesStore.rawTimestamps) {
+        const getDateAndTime = displayMilliseconds ? getLocaleDateAndTimeWithMilliseconds : getLocaleDateAndTime;
+        const { date, time } = getDateAndTime(timestamp);
+        if (date === getLocaleDateAndTime(referenceTimestamp).date) {
+            return h('span', [h('span.invisible', `${date}, `), time]);
+        }
+    }
+    return formatTimestamp(timestamp, true, displayMilliseconds);
+};

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

@@ -21,12 +21,12 @@ import { formatRunsList } from '../../Runs/format/formatRunsList.js';
 import { formatLhcFillsTimeLoss } from '../format/formatLhcFillsTimeLoss.js';
 import { buttonLinkWithDropdown } from '../../../components/common/selection/infoLoggerButtonGroup/buttonLinkWithDropdown.js';
 import { infologgerLinksComponents } from '../../../components/common/externalLinks/infologgerLinksComponents.js';
-import { selectionDropdown } from '../../../components/common/selection/dropdown/selectionDropdown.js';
 import { formatBeamType } from '../../../utilities/formatting/formatBeamType.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
 import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
 import { durationFilter } from '../../../components/Filters/LhcFillsFilter/durationFilter.js';
 import { timeRangeFilter } from '../../../components/Filters/common/filters/timeRangeFilter.js';
+import { beamTypeSelectionDropdown } from '../format/beamTypeSelectionDropdown.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
 /**
@@ -188,10 +188,7 @@ export const lhcFillsActiveColumns = {
         visible: true,
         size: 'w-8',
         format: (value) => formatBeamType(value),
-        filter: (lhcFillModel) => selectionDropdown(
-            lhcFillModel.filteringModel.get('beamTypes'),
-            { selectorPrefix: 'beam-types' },
-        ),
+        filter: (lhcFillModel) => beamTypeSelectionDropdown(lhcFillModel.filteringModel.get('beamTypes')),
     },
     collidingBunches: {
         name: 'Colliding bunches',