[O2B-1502] Filtering with Stable Beams Only works, radioButton element extracted and reused.

Houwie7000 · Houwie7000 · commit 094e6c55d275 · 2025-11-26T15:25:45.000+01:00
diff --git a/lib/public/components/Filters/LhcFillsFilter/stableBeamFilter.js b/lib/public/components/Filters/LhcFillsFilter/stableBeamFilter.js
@@ -11,17 +11,40 @@
  * or submit itself to any jurisdiction.
  */
 
+import { h } from '/js/src/index.js';
 import { switchInput } from '../../common/form/switchInput.js';
+import radiobutton from '../../common/form/inputs/RadioButton.js';
 
 /**
  * Display a toggle switch to display stable beams only
  *
  * @param {LhcFillsOverviewModel} lhcFillsOverviewModel the overview model
+ * @param radioButtonMode
  * @returns {Component} the toggle switch
  */
-export const toggleStableBeamOnlyFilter = (lhcFillsOverviewModel) => {
+export const toggleStableBeamOnlyFilter = (lhcFillsOverviewModel, radioButtonMode = false) => {
     const isStableBeamsOnly = lhcFillsOverviewModel.getStableBeamsOnly();
-    return switchInput(isStableBeamsOnly, (newState) => {
-        lhcFillsOverviewModel.setStableBeamsFilter(newState);
-    }, { labelAfter: 'STABLE BEAM ONLY' });
+    const name = 'stableBeamsOnlyRadio';
+    const label1 = 'OFF';
+    const label2 = 'ON';
+    if (radioButtonMode) {
+        return h('.form-group-header.flex-row.w-100', [
+            radiobutton({
+                label: label1,
+                isChecked: isStableBeamsOnly === false,
+                action: () => lhcFillsOverviewModel.setStableBeamsFilter(false),
+                name: name,
+            }),
+            radiobutton({
+                label: label2,
+                isChecked: isStableBeamsOnly === true,
+                action: () => lhcFillsOverviewModel.setStableBeamsFilter(true),
+                name: name,
+            }),
+        ]);
+    } else {
+        return switchInput(isStableBeamsOnly, (newState) => {
+            lhcFillsOverviewModel.setStableBeamsFilter(newState);
+        }, { labelAfter: 'STABLE BEAM ONLY' });
+    }
 };
diff --git a/lib/public/components/Filters/RunsFilter/dcs.js b/lib/public/components/Filters/RunsFilter/dcs.js
@@ -11,6 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
+import radiobutton from '../../common/form/inputs/RadioButton.js';
 import { h } from '/js/src/index.js';
 
 /**
@@ -20,33 +21,30 @@ import { h } from '/js/src/index.js';
  */
 const dcsOperationRadioButtons = (runModel) => {
     const state = runModel.getDcsFilterOperation();
+    const name = 'dcsFilterRadio';
+    const label1 = 'ANY';
+    const label2 = 'OFF';
+    const label3 = 'ON';
     return h('.form-group-header.flex-row.w-100', [
-        radioButton('ANY', state === '', () => runModel.removeDcs()),
-        radioButton('OFF', state === false, () => runModel.setDcsFilterOperation(false)),
-        radioButton('ON', state === true, () => runModel.setDcsFilterOperation(true)),
+        radiobutton({
+            label: label1,
+            isChecked: state === '',
+            action: () => runModel.removeDcs(),
+            name: name,
+        }),
+        radiobutton({
+            label: label2,
+            isChecked: state === false,
+            action: () => runModel.setDcsFilterOperation(false),
+            name: name,
+        }),
+        radiobutton({
+            label: label3,
+            isChecked: state === true,
+            action: () => runModel.setDcsFilterOperation(true),
+            name: name,
+        }),
     ]);
 };
 
-/**
- * Build a radio button with its configuration and actions
- * @param {string} label - label to be displayed to the user for radio button
- * @param {boolean} isChecked - is radio button selected or not
- * @param {Function} action - action to be followed on user click
- * @return {vnode} - radio button with label associated
- */
-const radioButton = (label, isChecked, action) => h('.w-33.form-check', [
-    h('input.form-check-input', {
-        onchange: action,
-        type: 'radio',
-        id: `dcsFilterRadio${label}`,
-        name: 'dcsFilterRadio',
-        value: label,
-        checked: isChecked,
-    }, ''),
-    h('label.form-check-label', {
-        style: 'cursor: pointer;',
-        for: `dcsFilterRadio${label}`,
-    }, label),
-]);
-
 export default dcsOperationRadioButtons;
diff --git a/lib/public/components/Filters/RunsFilter/ddflp.js b/lib/public/components/Filters/RunsFilter/ddflp.js
@@ -11,6 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
+import radioButton from '../../common/form/inputs/RadioButton.js';
 import { h } from '/js/src/index.js';
 
 /**
@@ -20,33 +21,30 @@ import { h } from '/js/src/index.js';
  */
 const ddflpOperationRadioButtons = (runModel) => {
     const state = runModel.getDdflpFilterOperation();
+    const name = 'ddFlpFilterRadio';
+    const label1 = 'ANY';
+    const label2 = 'OFF';
+    const label3 = 'ON';
     return h('.form-group-header.flex-row.w-100', [
-        radioButton('ANY', state === '', () => runModel.removeDdflp()),
-        radioButton('OFF', state === false, () => runModel.setDdflpFilterOperation(false)),
-        radioButton('ON', state === true, () => runModel.setDdflpFilterOperation(true)),
+        radioButton({
+            label: label1,
+            isChecked: state === '',
+            action: () => runModel.removeDdflp(),
+            name: name,
+        }),
+        radioButton({
+            label: label2,
+            isChecked: state === false,
+            action: () => runModel.setDdflpFilterOperation(false),
+            name: name,
+        }),
+        radioButton({
+            label: label3,
+            isChecked: state === true,
+            action: () => runModel.setDdflpFilterOperation(true),
+            name: name,
+        }),
     ]);
 };
 
-/**
- * Build a radio button with its configuration and actions
- * @param {string} label - label to be displayed to the user for radio button
- * @param {boolean} isChecked - is radio button selected or not
- * @param {Function} action - action to be followed on user click
- * @return {vnode} - radio button with label associated
- */
-const radioButton = (label, isChecked, action) => h('.w-33.form-check', [
-    h('input.form-check-input', {
-        onchange: action,
-        type: 'radio',
-        id: `ddFlpFilterRadio${label}`,
-        name: 'ddFlpFilterRadio',
-        value: label,
-        checked: isChecked,
-    }, ''),
-    h('label.form-check-label', {
-        style: 'cursor: pointer;',
-        for: `ddFlpFilterRadio${label}`,
-    }, label),
-]);
-
 export default ddflpOperationRadioButtons;
diff --git a/lib/public/components/Filters/RunsFilter/epn.js b/lib/public/components/Filters/RunsFilter/epn.js
@@ -11,6 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
+import radiobutton from '../../common/form/inputs/RadioButton.js';
 import { h } from '/js/src/index.js';
 
 /**
@@ -20,33 +21,30 @@ import { h } from '/js/src/index.js';
  */
 const epnOperationRadioButtons = (runModel) => {
     const state = runModel.getEpnFilterOperation();
+    const name = 'epnFilterRadio';
+    const label1 = 'ANY';
+    const label2 = 'OFF';
+    const label3 = 'ON';
     return h('.form-group-header.flex-row.w-100', [
-        radioButton('ANY', state === '', () => runModel.removeEpn()),
-        radioButton('OFF', state === false, () => runModel.setEpnFilterOperation(false)),
-        radioButton('ON', state === true, () => runModel.setEpnFilterOperation(true)),
+        radiobutton({
+            label: label1,
+            isChecked: state === '',
+            action: () => runModel.removeEpn(),
+            name: name,
+        }),
+        radiobutton({
+            label: label2,
+            isChecked: state === false,
+            action: () => runModel.setEpnFilterOperation(false),
+            name: name,
+        }),
+        radiobutton({
+            label: label3,
+            isChecked: state === true,
+            action: () => runModel.setEpnFilterOperation(true),
+            name: name,
+        }),
     ]);
 };
 
-/**
- * Build a radio button with its configuration and actions
- * @param {string} label - label to be displayed to the user for radio button
- * @param {boolean} isChecked - is radio button selected or not
- * @param {Function} action - action to be followed on user click
- * @return {vnode} - radio button with label associated
- */
-const radioButton = (label, isChecked, action) => h('.w-33.form-check', [
-    h('input.form-check-input', {
-        onchange: action,
-        type: 'radio',
-        id: `epnFilterRadio${label}`,
-        name: 'epnFilterRadio',
-        value: label,
-        checked: isChecked,
-    }, ''),
-    h('label.form-check-label', {
-        style: 'cursor: pointer;',
-        for: `epnFilterRadio${label}`,
-    }, label),
-]);
-
 export default epnOperationRadioButtons;
diff --git a/lib/public/components/common/form/inputs/RadioButton.js b/lib/public/components/common/form/inputs/RadioButton.js
@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE Trg. 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-Trg.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';
+
+/**
+ * @typedef radioButtonConfig - configration object for radioButton.
+ *
+ * @property {string} label - label to be displayed to the user for radio button
+ * @property {boolean} isChecked - is radio button selected or not
+ * @property {function} action - action to be followed on user click
+ * @property {string} id - id of the radiobutton element
+ * @property {string} name - name of the radiobutton element
+ * @property {string} style - label style property
+ */
+
+/**
+ * Build a radio button with its configuration and actions
+ * @param {radioButtonConfig} configuration - configration object for radioButton.
+ * @return {vnode} - radio button with associated label.
+ */
+const radiobutton = (configuration = {}) => {
+    const {
+        label = 'radio',
+        isChecked = false,
+        action = () => { },
+        name = 'value',
+        id = `${name}${label}`,
+        style = 'cursor: pointer;',
+    } = configuration;
+    return h('.w-33.form-check', [
+        h('input.form-check-input', {
+            onchange: action,
+            type: 'radio',
+            id: id,
+            name: name,
+            value: label,
+            checked: isChecked,
+        }, ''),
+        h('label.form-check-label', {
+            style: style,
+            for: `${name}${label}`,
+        }, label),
+    ]);
+};
+
+export default radiobutton;
diff --git a/lib/public/views/LhcFills/ActiveColumns/lhcFillsActiveColumns.js b/lib/public/views/LhcFills/ActiveColumns/lhcFillsActiveColumns.js
@@ -86,10 +86,10 @@ export const lhcFillsActiveColumns = {
         },
     },
     stableBeams: {
-        name: 'Stable beams',
+        name: 'Stable Beams Only',
         visible: false,
         format: (boolean) => boolean ? 'On' : 'Off',
-        filter: toggleStableBeamOnlyFilter,
+        filter: (lhcFillModel) => toggleStableBeamOnlyFilter(lhcFillModel, true),
     },
     stableBeamsDuration: {
         name: 'SB Duration',
diff --git a/lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js b/lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js
@@ -129,17 +129,6 @@ export class LhcFillsOverviewModel extends OverviewPageModel {
         return this._filteringModel;
     }
 
-    /**
-     * Returns the list of URL params corresponding to the currently applied filter
-     *
-     * @return {Object} the URL params
-     *
-     * @private
-     */
-    _getFilterQueryParams() {
-        return {};
-    }
-
     /**
      * Apply the current filtering and update the remote data list
      *
diff --git a/test/public/lhcFills/overview.test.js b/test/public/lhcFills/overview.test.js
@@ -31,6 +31,8 @@ const { expect } = chai;
 const percentageRegex = new RegExp(/\d{1,2}.\d{2}%/);
 const durationRegex = new RegExp(/\d{2}:\d{2}:\d{2}/);
 
+const filterButtonSellector= '#openFilterToggle';
+
 const defaultViewPort = {
     width: 700,
     height: 763,
@@ -265,14 +267,25 @@ module.exports = () => {
     });
 
     it('should successfully display filter elements', async () => {
-        const efficiencyExpect = { selector: 'tbody tr:nth-child(1) td:nth-child(8)', value: '41.67%' };
-
+        const filterSBExpect = { selector: '.w-30', value: 'Stable Beams Only' };
         await goToPage(page, 'lhc-fill-overview');
+        await pressElement(page, filterButtonSellector);
+        await expectInnerText(page, filterSBExpect.selector, filterSBExpect.value);
+    });
 
-        await expectInnerText(page, beamTypeExpect.selector, beamTypeExpect.value);
+
+     it('should successfully un-apply Stable Beam filter menu', async () => {
+        const filterButtonSBOnlySellector= '#stableBeamsOnlyRadioOFF';
+        const filterSBExpect = { selector: '.w-30', value: 'Stable Beams Only' };
+        await goToPage(page, 'lhc-fill-overview');
+        await waitForTableLength(page, 5);
+        await pressElement(page, filterButtonSellector);
+        await pressElement(page, filterButtonSBOnlySellector);
+        await waitForTableLength(page, 6);
     });
 
-    it('should successfully toggle to stable beam only', async () => {
+    it('should successfully turn off stable beam only from header', async () => {
+        await goToPage(page, 'lhc-fill-overview');
         await waitForTableLength(page, 5);
         await pressElement(page, '.slider.round');
         await waitForTableLength(page, 6);
