now selected query done in model

Author: Jaden505

lib/public/components/qcFlags/qcFlagsPagesButtons.js

@@ -34,7 +34,7 @@ export const qcFlagCreationPanelLink = (
     remoteRun,
     dplDetectorId,
     remoteDplDetectorsUserHasAccessTo,
-    { noPermissionContent = null, linkClasses = [], displayCheckbox = true } = {},
+    { noPermissionContent = null, displayCheckbox = true, overviewModel = null } = {},
 ) => {
     const content = [h('.flex-row.items-center.g1', [h('small', iconPlus()), 'QC'])];
     let options = {};
@@ -75,6 +75,7 @@ export const qcFlagCreationPanelLink = (
                                 id: `qc-flag-checkbox-${run.runNumber}`,
                                 runNumber: run.runNumber,
                                 dplDetectorId: dplDetectorId,
+                                onchange: (e) => overviewModel && overviewModel.addToSelected(run.runNumber, dplDetectorId, e.target.checked),
                                 class: 'mr2',
                             }),
                             h('div.qc-link-wrapper', {

lib/public/views/QcFlags/ForDataPass/QcFlagsForDataPassOverviewPage.js

@@ -76,7 +76,13 @@ export const QcFlagsForDataPassOverviewPage = ({
         [
             h('.flex-row.justify-between.items-center', [
                 qcFlagsBreadcrumbs({ remoteDataPass, remoteRun, remoteDplDetector }),
-                qcFlagCreationPanelLink({ dataPassId }, remoteRun, dplDetectorId, remoteDplDetectorsUserHasAccessTo, { displayCheckbox: false }),
+                qcFlagCreationPanelLink(
+                    { dataPassId },
+                    remoteRun,
+                    dplDetectorId,
+                    remoteDplDetectorsUserHasAccessTo,
+                    { displayCheckbox: false },
+                ),
             ]),
             remoteRun.match({
                 Failure: (errors) => errorAlert(errors),

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

@@ -59,7 +59,7 @@ export const createRunDetectorsAsyncQcActiveColumns = (
     dplDetectors,
     remoteDplDetectorsUserHasAccessTo,
     { dataPassId, simulationPassId },
-    { profiles, qcSummary } = {},
+    { profiles, qcSummary, overviewModel } = {},
 ) =>
     Object.fromEntries(dplDetectors?.map(({ name: detectorName, id: dplDetectorId }) => [
         detectorName,
@@ -95,6 +95,7 @@ export const createRunDetectorsAsyncQcActiveColumns = (
                                     'No QC flag was assigned. You have no permission to manage QC flag for this detector',
                                 )),
                                 linkClasses: ['w-100'],
+                                overviewModel,
                             },
                         );
                 }

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

@@ -53,7 +53,8 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
         this._gaqNotBadFractionFilterModel.observe(() => this._applyFilters());
         this._gaqNotBadFractionFilterModel.visualChange$.bubbleTo(this);
 
-        this._selectedDetectors = new ObservableData(RemoteData.NotAsked());
+        this._selectedRunDetectors = {};
+        this._selectedQueryString = '';
 
         this.patchDisplayOptions({ horizontalScrollEnabled: true });
     }
@@ -228,6 +229,46 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
         }
     }
 
+    /**
+     * Creates a query string to call the flag creation
+     * @return {String} for flag creation query param
+     */
+    generateSelectedQueryString() {
+        return Object.entries(this._selectedRunDetectors)
+            .map(([runNumber, detectorIds]) => `${runNumber}:${detectorIds.join(',')}`)
+            .join(';');
+    }
+
+    /**
+     * Add detector id to selected run detectors and update the selected query string
+     * And creates a query string to call the flag creation
+     * @param {number} key run number
+     * @param {number} value detector id
+     * @param {boolean} check whether the box got checked or unchecked
+     * @return {void}
+     */
+    addToSelected(key, value, check) {
+        if (check) {
+            this._selectedRunDetectors[key] = [...this._selectedRunDetectors[key] || [], value];
+        } else {
+            this._selectedRunDetectors[key] = this._selectedRunDetectors[key].filter((id) => id !== value);
+            if (this._selectedRunDetectors[key].length === 0) {
+                delete this._selectedRunDetectors[key];
+            }
+        }
+
+        this._selectedQueryString = Object.entries(this._selectedRunDetectors)
+            .map(([runNumber, detectorIds]) => `${runNumber}:${detectorIds.join(',')}`)
+            .join(';');
+    }
+
+    /**
+     * Get current selected query string
+     */
+    get selectedQueryString() {
+        return this._selectedQueryString;
+    }
+
     /**
      * Result of request for marking current data pass as skimmable
      * @return {RemoteData} remote data

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

@@ -91,27 +91,6 @@ const skimmableControl = (dataPass, onclick, requestResult) => {
     }
 };
 
-/**
- * Creates a query string to call the flag creation
- * @return {String} for flag creation query param
- */
-export function generateSelectedQueryString() {
-    const detectors = Array.from(document.querySelectorAll('.select-multi-flag:checked'));
-    const runNumberMap = detectors.reduce((acc, detector) => {
-        const runNumber = parseInt(detector.getAttribute('runNumber'), 10);
-        const detectorId = parseInt(detector.getAttribute('dplDetectorId'), 10);
-
-        acc[runNumber] = acc[runNumber] || [];
-        acc[runNumber].push(detectorId);
-
-        return acc;
-    }, {});
-
-    return Object.entries(runNumberMap)
-        .map(([runNumber, detectorIds]) => `${runNumber}:${detectorIds.join(',')}`)
-        .join(';');
-}
-
 /**
  * Render Runs Per LHC Period overview page
  * @param {Model} model The overall model object.
@@ -217,14 +196,13 @@ export const RunsPerDataPassOverviewPage = ({
                     Other: () => null,
                 }),
                 mcReproducibleAsNotBad,
+                overviewModel: perDataPassOverviewModel,
             },
         ),
     };
 
     const commonTitle = h('h2#breadcrumb-header', { style: 'white-space: nowrap;' }, 'Physics Runs');
 
-    const selectedQueryString = generateSelectedQueryString();
-
     return h('', { onremove: () => perDataPassOverviewModel.reset(false) }, [
         h('.flex-row.justify-between.items-center.g2', [
             filtersPanelPopover(perDataPassOverviewModel, activeColumns, { profile: 'runsPerDataPass' }),
@@ -258,11 +236,11 @@ export const RunsPerDataPassOverviewPage = ({
             exportRunsTriggerAndModal(perDataPassOverviewModel, modalModel, { autoMarginLeft: false }),
             frontLink(
                 h('button.btn.btn-primary.w-100.h2}#set-qc-flags-trigger', {
-                    disabled: selectedQueryString.length < 1,
+                    disabled: perDataPassOverviewModel.selectedQueryString.length < 1,
                 }, 'Set QC Flags'),
                 'qc-flag-creation-for-data-pass',
                 {
-                    runNumberDetectorMap: selectedQueryString,
+                    runNumberDetectorMap: perDataPassOverviewModel.selectedQueryString,
                     dataPassId,
                 },
             ),

lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js

@@ -27,7 +27,6 @@ import { qcSummaryLegendTooltip } from '../../../components/qcFlags/qcSummaryLeg
 import { isRunNotSubjectToQc } from '../../../components/qcFlags/isRunSubjectToQc.js';
 import { PdpBeamType } from '../../../domain/enums/PdpBeamType.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
-import { generateSelectedQueryString } from '../RunPerDataPass/RunsPerDataPassOverviewPage.js';
 
 const TABLEROW_HEIGHT = 59;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -93,13 +92,13 @@ export const RunsPerSimulationPassOverviewPage = ({
                     Success: (qcSummary) => qcSummary,
                     Other: () => null,
                 }),
+                overviewModel: perSimulationPassOverviewModel,
             },
         ),
     };
 
     const commonTitle = h('h2', 'Runs per MC');
-    const selectedQueryString = generateSelectedQueryString();
-  
+
     return h('', [
         h('.flex-row.justify-between.items-center.g2', [
             h(
@@ -115,11 +114,11 @@ export const RunsPerSimulationPassOverviewPage = ({
             exportRunsTriggerAndModal(perSimulationPassOverviewModel, modalModel, { autoMarginLeft: false }),
             frontLink(
                 h('button.btn.btn-primary.w-100.h2}#set-qc-flags-trigger', {
-                    disabled: selectedQueryString.length < 1,
+                    disabled: perSimulationPassOverviewModel.selectedQueryString.length < 1,
                 }, 'Set QC Flags'),
                 'qc-flag-creation-for-simulation-pass',
                 {
-                    runNumberDetectorMap: selectedQueryString,
+                    runNumberDetectorMap: perSimulationPassOverviewModel.selectedQueryString,
                     simulationPassId,
                 },
             ),