[O2B-1326] Add GAQ explanation (#1863)

* [O2B-1326] Add GAQ explanation

* Attempt at fixing test

Author: martinboulais

lib/public/components/common/table/headers.js

@@ -11,8 +11,9 @@
  * or submit itself to any jurisdiction.
  */
 
-import { h } from '/js/src/index.js';
+import { h, info } from '/js/src/index.js';
 import { iconCaretTop, iconCaretBottom, iconX } from '/js/src/icons.js';
+import { tooltip } from '../popover/tooltip.js';
 
 /**
  * @typedef TableModels the list of models that handle an eventual table state
@@ -36,11 +37,13 @@ export const headers = (columns, models) => {
         const classes = [size || null, column.classes || null];
 
         // Name needs to be empty for a popover, otherwise the name when hovering will be blocking the popover.
-        const attributes = {
-            scope: 'col',
-            title: information || undefined,
-        };
+        const attributes = { scope: 'col' };
         let content = [name];
+
+        if (information) {
+            content.push(tooltip(info(), information));
+        }
+
         if (sortModel && sortable) {
             attributes.onmouseenter = () => {
                 sortModel.previewOn = key;
@@ -67,31 +70,37 @@ export const headers = (columns, models) => {
             classes.push('clickable');
 
             const sortIndicator = h(
-                `.ml2${preview ? '.gray-dark' : ''}`,
+                preview ? '.gray-dark' : '',
                 { id: `${key}-sort${preview ? '-preview' : ''}` },
                 icon,
             );
             content.push(sortIndicator);
+        }
 
+        if (content.length > 1) {
             // Wrap content in a row container
-            content = h('.flex-row.items-center', content);
-        } else if (inlineFilter) {
+            content = h('.flex-row.items-center.g1', content);
+        }
+
+        if (inlineFilter) {
             const {
                 getValue = null,
                 onChange = () => {
                     // Simple default which does nothing
                 },
                 placeholder = '',
             } = inlineFilter;
-            content.push(h('input.form-control', {
-                type: 'text',
-                placeholder,
-                oninput: (e) => onChange(e.target.value, filterModel),
-                ...getValue ? { value: getValue(filterModel) } : {},
-            }));
 
             // Wrap content in a column container
-            content = h('.flex-column.justify-between.gr2', content);
+            content = h('.flex-column.justify-between.gr2', [
+                content,
+                h('input.form-control', {
+                    type: 'text',
+                    placeholder,
+                    oninput: (e) => onChange(e.target.value, filterModel),
+                    ...getValue ? { value: getValue(filterModel) } : {},
+                }),
+            ]);
         }
 
         return h(`th#${key}.${classes.filter((item) => Boolean(item)).join(' ')}`, attributes, content);

lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js

@@ -167,6 +167,11 @@ export const RunsPerDataPassOverviewPage = ({
             Success: (gaqSummary) => ({
                 globalAggregatedQuality: {
                     name: 'GAQ',
+                    information: h(
+                        '',
+                        h('', 'Global aggregated flag based on critical detectors.'),
+                        h('', 'Default detectors: FT0, ITS, TPC (and ZDC for heavy-ion runs)'),
+                    ),
                     visible: true,
                     format: (_, { runNumber }) => {
                         const runGaqSummary = gaqSummary[runNumber];

test/public/runs/runsPerDataPass.overview.test.js

@@ -171,6 +171,12 @@ module.exports = () => {
             .to.be.equal('Missing 3 verifications');
     });
 
+    it('should successfully display tooltip information on GAQ column', async () => {
+        const popoverContent = await getPopoverContent(await page.waitForSelector('#globalAggregatedQuality .popover-trigger'));
+        expect(popoverContent).to.equal('Global aggregated flag based on critical detectors.' +
+            'Default detectors: FT0, ITS, TPC (and ZDC for heavy-ion runs)');
+    });
+
     it('should switch mcReproducibleAsNotBad', async () => {
         await pressElement(page, '#mcReproducibleAsNotBadToggle input', true);
         await waitForTableLength(page, 3);