[O2B-1352] Comments in popover of QC summary (#1984)

xsalonx · web-flow · commit f2a477a557f4 · 2025-09-26T16:14:22.000+02:00
* cherry-pick

* test

* cleanup

* fix

* a

* cleanup

* rename

* fix

* fix
diff --git a/lib/domain/entities/QcFlagType.js b/lib/domain/entities/QcFlagType.js
@@ -30,3 +30,10 @@
  * @property {QcFlagVerification[]} verifications
  * @property {User} lastUpdatedBy
  */
+
+/**
+ * @typedef MinifiedQcFlagType
+ *
+ * @property {string} name
+ * @property {string} color as hex
+ */
diff --git a/lib/domain/entities/QcSummary.js b/lib/domain/entities/QcSummary.js
@@ -1,10 +1,19 @@
+/**
+ * @typedef MinifiedQcSummaryFlag
+ *
+ * @property {number} id - QC flag identifier
+ * @property {string} comment - QC flag comment
+ * @property {MinifiedQcFlagType} flagType - flag type
+ */
+
 /**
  * @typedef RunDetectorQcSummary
  *
  * @property {number} badEffectiveRunCoverage - fraction of run's data, marked explicitly with bad QC flag
  * @property {number} explicitlyNotBadEffectiveRunCoverage - fraction of run's data, marked explicitly with good QC flag
  * @property {boolean} mcReproducible - if true states that some Limited Acceptance MC Reproducible flag was assigned
  * @property {number} missingVerificationsCount - number of QC flags that are unverified and have not been discarded
+ * @property {MinifiedQcSummaryFlag[]} minifiedFlags - flag with only necessary properties for QC summary display
  */
 
 /**
diff --git a/lib/domain/enums/QcSummaryProperties.js b/lib/domain/enums/QcSummaryProperties.js
@@ -16,5 +16,6 @@ exports.QcSummarProperties = {
     EXPLICITELY_NOT_BAD_EFFECTIVE_RUN_COVERAGE: 'explicitlyNotBadEffectiveRunCoverage',
     MISSING_VERIFICATIONS: 'missingVerificationsCount',
     MC_REPRODUCIBLE: 'mcReproducible',
+    MINIFIED_FLAGS: 'minifiedFlags',
     UNDEFINED_QUALITY_PERIODS_COUNT: 'undefinedQualityPeriodsCount',
 };
diff --git a/lib/public/components/common/popover/overflowBalloon.js b/lib/public/components/common/popover/overflowBalloon.js
@@ -31,19 +31,22 @@ const doesElementOverflow = (element) => {
 /**
  * Return a component containing the given content, with a popover displayed on hover if the content overflow from its parent
  *
- * @param {Component} content the content of the component to create
- * @param {Object|null} [options=null] a restricted set of popover options
+ * @param {Component} trigger baloon trigger
+ * @param {Component} content baloon content
+ * @param {object} [options] a restricted set of popover options
  * @param {boolean} [options.stretch=false] if true, the balloon will be displayed when hovering the element in which this component is displayed
- * @return {vnode} the component
+ * @param {function<triggerNode, boolean>} [options.showCondition=(()=>true)] content show condition
+ * @param {number} [options.anchor=PopoverAnchors.TOP_MIDDLE] popover anchor
+ * @return {Component} the component
  */
-export const overflowBalloon = (content, options = null) => {
-    const { stretch = false } = options || {};
+export const balloon = (trigger, content, options = null) => {
+    const { stretch = false, showCondition = null, anchor = PopoverAnchors.TOP_MIDDLE } = options || {};
 
     return popover(
-        h('.w-wrapped', content),
+        trigger,
         content,
         {
-            anchor: PopoverAnchors.TOP_MIDDLE,
+            anchor,
             popoverClass: ['p2'],
 
             /**
@@ -96,8 +99,27 @@ export const overflowBalloon = (content, options = null) => {
              * @returns {boolean} true if visible, false otherwise
              */
             showCondition: function () {
-                return doesElementOverflow(this.triggerNode.querySelector('.w-wrapped'));
+                return showCondition
+                    ? showCondition(this.triggerNode)
+                    : true;
             },
         },
     );
 };
+
+/**
+ * Return a component containing the given content, with a popover displayed on hover if the content overflow from its parent
+ *
+ * @param {Component} content the content of the component to create
+ * @param {object} [options] a restricted set of popover options
+ * @param {boolean} [options.stretch=false] if true, the balloon will be displayed when hovering the element in which this component is displayed
+ * @return {Component} the component
+ */
+export const overflowBalloon = (content, options = null) => balloon(
+    h('.w-wrapped', content),
+    content,
+    {
+        showCondition: (triggerNode) => doesElementOverflow(triggerNode.querySelector('.w-wrapped')),
+        ...options,
+    },
+);
diff --git a/lib/public/views/Runs/ActiveColumns/getQcSummaryDisplay.js b/lib/public/views/Runs/ActiveColumns/getQcSummaryDisplay.js
@@ -11,11 +11,19 @@
  * or submit itself to any jurisdiction.
  */
 
-import { h, iconWarning, iconBolt } from '/js/src/index.js';
+import {
+    h,
+    iconWarning,
+    iconBolt,
+    PopoverAnchors,
+    PopoverTriggerPreConfiguration,
+} from '/js/src/index.js';
 import { formatFloat } from '../../../utilities/formatting/formatFloat.js';
 import { QcSummaryColors } from '../../../components/qcFlags/qcSummaryColors.js';
 import { tooltip } from '../../../components/common/popover/tooltip.js';
 import { getContrastColor } from '../../../components/common/colors.js';
+import { balloon } from '../../../components/common/popover/overflowBalloon.js';
+import { qcFlagTypeColoredBadge } from '../../../components/qcFlags/qcFlagTypeColoredBadge.js';
 
 const FULL_COVERAGE = 1;
 
@@ -31,6 +39,7 @@ export const getQcSummaryDisplay = (summary) => {
         explicitlyNotBadEffectiveRunCoverage,
         missingVerificationsCount,
         mcReproducible,
+        minifiedFlags = [],
     } = summary;
 
     const missingVerificationDisplay = missingVerificationsCount
@@ -102,5 +111,25 @@ export const getQcSummaryDisplay = (summary) => {
         );
     }
 
+    if (minifiedFlags.length > 0) {
+        const commentsContent = h(
+            '.p2.flex-column.g2',
+            minifiedFlags.map(({ id, comment, flagType }) => h('.flex-column.g1', { key: id }, [
+                h('.f7.gray.flex-row.g1', [`Flag ${id}`, qcFlagTypeColoredBadge(flagType)]),
+                h('.f6', { style: { whiteSpace: 'pre-wrap' } }, comment),
+                h('.section-divider'),
+            ])),
+        );
+
+        qcSummaryDisplay = balloon(
+            qcSummaryDisplay,
+            commentsContent,
+            {
+                ...PopoverTriggerPreConfiguration.hover,
+                anchor: PopoverAnchors.BOTTOM_MIDDLE,
+            },
+        );
+    }
+
     return qcSummaryDisplay;
 };
diff --git a/lib/server/services/qualityControlFlag/QcFlagSummaryService.js b/lib/server/services/qualityControlFlag/QcFlagSummaryService.js
@@ -166,17 +166,44 @@ class QcFlagSummaryService {
                     ? Math.min(1, Math.max(0, parseFloat(effectiveRunCoverageString)))
                     : null;
 
+                const flagIds = (summaryDb.get('flagIds')?.split(',') ?? [])
+                    .map((id) => parseInt(id, 10))
+                    .filter(Number.isFinite)
+                    .sort((a, b) => a - b);
+
                 return {
                     runNumber: summaryDb.runNumber,
                     detectorId: summaryDb.detectorId,
                     effectiveRunCoverage,
                     bad: Boolean(summaryDb.get('bad')),
-                    flagIds: (summaryDb.get('flagIds')?.split(',') ?? []).map((id) => parseInt(id, 10)),
+                    flagIds,
                     mcReproducible: Boolean(summaryDb.get('mcReproducible')),
                 };
             });
 
         const allFlagsIds = new Set(runDetectorSummaryList.flatMap(({ flagIds }) => flagIds));
+
+        const miniCommentedFlagByFlagId = new Map();
+        if (allFlagsIds.size > 0) {
+            const flagsWithComments = await QcFlagRepository.findAll({
+                attributes: ['id', 'comment'],
+                where: { id: { [Op.in]: [...allFlagsIds] } },
+                include: [{ association: 'flagType' }],
+            });
+
+            for (const { id, comment, flagType: { name, color } } of flagsWithComments) {
+                if (comment?.trim()) {
+                    miniCommentedFlagByFlagId.set(id, { comment, flagType: { name, color } });
+                }
+            }
+        }
+
+        for (const summaryUnit of runDetectorSummaryList) {
+            summaryUnit.minifiedFlags = summaryUnit.flagIds
+                .map((id) => ({ id, ...miniCommentedFlagByFlagId.get(id) }))
+                .filter(({ comment }) => Boolean(comment));
+        }
+
         const notVerifiedFlagsIds = new Set((await QcFlagRepository.findAll({
             attributes: ['id'],
             include: [{ association: 'verifications', required: false, attributes: [] }],
@@ -194,21 +221,39 @@ class QcFlagSummaryService {
                 runNumber,
                 detectorId,
                 flagIds,
+                minifiedFlags,
             } = runDetectorSummaryForFlagTypesClass;
             const missingVerificationsCount = flagIds.filter((id) => notVerifiedFlagsIds.has(id)).length;
 
             if (!summary[runNumber]) {
                 summary[runNumber] = {};
             }
             if (!summary[runNumber][detectorId]) {
-                summary[runNumber][detectorId] = { [QcSummarProperties.MC_REPRODUCIBLE]: false };
+                summary[runNumber][detectorId] = {
+                    [QcSummarProperties.MC_REPRODUCIBLE]: false,
+                    [QcSummarProperties.MINIFIED_FLAGS]: [],
+                };
             }
 
             const runDetectorSummary = summary[runNumber][detectorId];
 
             runDetectorSummary[QcSummarProperties.MISSING_VERIFICATIONS] =
                 (runDetectorSummary[QcSummarProperties.MISSING_VERIFICATIONS] ?? 0) + missingVerificationsCount;
 
+            if (!runDetectorSummary[QcSummarProperties.MINIFIED_FLAGS]) {
+                runDetectorSummary[QcSummarProperties.MINIFIED_FLAGS] = [];
+            }
+            if (minifiedFlags.length > 0) {
+                const existingFlagComments = runDetectorSummary[QcSummarProperties.MINIFIED_FLAGS];
+                const existingIds = new Set(existingFlagComments.map(({ id }) => id));
+                for (const miniCommentedFlagByFlagId of minifiedFlags) {
+                    if (!existingIds.has(miniCommentedFlagByFlagId.id)) {
+                        existingFlagComments.push(miniCommentedFlagByFlagId);
+                        existingIds.add(miniCommentedFlagByFlagId.id);
+                    }
+                }
+            }
+
             QcFlagSummaryService.mergeIntoSummaryUnit(runDetectorSummary, runDetectorSummaryForFlagTypesClass);
         }
 
diff --git a/test/api/qcFlags.test.js b/test/api/qcFlags.test.js
diff --git a/test/lib/server/services/qualityControlFlag/QcFlagService.test.js b/test/lib/server/services/qualityControlFlag/QcFlagService.test.js
diff --git a/test/public/runs/runsPerDataPass.overview.test.js b/test/public/runs/runsPerDataPass.overview.test.js
