[O2B-1552] Move ad hoc filters inside runs overview model to filtering model

lib/public/components/Filters/common/RadioButtonFilterModel.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 { SelectionModel } from '../../common/selection/SelectionModel.js';
+
+/**
+ * Model for managing a radiobutton view and state
+ */
+export class RadioButtonFilterModel extends SelectionModel {
+    /**
+     * Constructor
+     *
+     * @param {SelectionOption[]} [availableOptions] the list of possible operators
+     * @param {function} [setDefault] function that selects the default from the list of available options. Selects first entry by default
+     */
+    constructor(availableOptions, setDefault = (options) => [options[0]]) {
+        super({
+            availableOptions,
+            defaultSelection: setDefault(availableOptions),
+            multiple: false,
+            allowEmpty: false,
+        });
+    }
+}

lib/public/components/Filters/common/filters/checkboxFilter.js

@@ -14,32 +14,6 @@
 
 import { h } from '/js/src/index.js';
 
-/**
- * A general component for generating checkboxes.
- *
- * @param {string} name The general name of the element.
- * @param {Array<String>} values the list of options to display
- * @param {function} isChecked true if the checkbox is checked, else false
- * @param {function} onChange the handler called once the checkbox state changes (change event is passed as first parameter, value as second)
- * @param {Object} [additionalProperties] Additional options that can be given to the class.
- * @returns {vnode} An object that has one or multiple checkboxes.
- * @deprecated use checkboxes
- */
-export const checkboxFilter = (name, values, isChecked, onChange, additionalProperties) =>
-    h('.flex-row.flex-wrap', values.map((value) => h('.form-check.flex-grow', [
-        h('input.form-check-input', {
-            id: `${name}Checkbox${value}`,
-            class: name,
-            type: 'checkbox',
-            checked: isChecked(value),
-            onchange: (e) => onChange(e, value),
-            ...additionalProperties || {},
-        }),
-        h('label.form-check-label', {
-            for: `${name}Checkbox${value}`,
-        }, value.toUpperCase()),
-    ])));
-
 /**
  * Display a filter composed of checkbox listing pre-defined options
  * @param {SelectionModel} selectionModel filter model

lib/public/components/Filters/QcFlagTypesFilter/bad.js → lib/public/components/Filters/common/filters/radioButtonFilter.js

@@ -11,16 +11,18 @@
  * or submit itself to any jurisdiction.
  */
 
-import { radioButton } from '../../common/form/inputs/radioButton.js';
+import { radioButton } from '../../../common/form/inputs/radioButton.js';
 import { h } from '/js/src/index.js';
 
 /**
- * Radiobutton filter for the qcFlag 'bad' filter
- * @param {SelectionModel} selectionModel the a selectionmodel
+ * Radiobutton filter component
+ *
+ * @param {RadioSelectionModel} selectionModel the a selectionmodel
+ * @param {string} filterName the name of the filter
  * @return {vnode} A number of radiobuttons corresponding with the selection options
  */
-const badFilterRadioButtons = (selectionModel) => {
-    const name = 'badFilterRadio';
+const radioButtonFilter = (selectionModel, filterName) => {
+    const name = `${filterName}FilterRadio`;
     return h(
         '.form-group-header.flex-row.w-100',
         selectionModel.options.map((option) => {
@@ -33,4 +35,4 @@ const badFilterRadioButtons = (selectionModel) => {
     );
 };
 
-export default badFilterRadioButtons;
+export default radioButtonFilter;

lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js

@@ -15,7 +15,7 @@ import { h } from '/js/src/index.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
 import { qcFlagTypeColoredBadge } from '../../../components/qcFlags/qcFlagTypeColoredBadge.js';
-import badFilterRadioButtons from '../../../components/Filters/QcFlagTypesFilter/bad.js';
+import radioButtonFilter from '../../../components/Filters/common/filters/radioButtonFilter.js';
 
 /**
  * List of active columns for a QC Flag Types table
@@ -54,7 +54,7 @@ export const qcFlagTypesActiveColumns = {
         name: 'Bad',
         visible: true,
         sortable: true,
-        filter: ({ filteringModel }) => badFilterRadioButtons(filteringModel.get('bad')),
+        filter: ({ filteringModel }) => radioButtonFilter(filteringModel.get('bad'), 'bad'),
         classes: 'f6 w-5',
         format: (bad) => bad ? h('.danger', 'Yes') : h('.success', 'No'),
     },

lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js

@@ -13,9 +13,9 @@
 
 import { TextTokensFilterModel } from '../../../components/Filters/common/filters/TextTokensFilterModel.js';
 import { OverviewPageModel } from '../../../models/OverviewModel.js';
-import { SelectionModel } from '../../../components/common/selection/SelectionModel.js';
 import { buildUrl } from '/js/src/index.js';
 import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
+import { RadioButtonFilterModel } from '../../../components/Filters/common/RadioButtonFilterModel.js';
 
 /**
  * QcFlagTypesOverviewModel
@@ -30,12 +30,7 @@ export class QcFlagTypesOverviewModel extends OverviewPageModel {
         this._filteringModel = new FilteringModel({
             names: new TextTokensFilterModel(),
             methods: new TextTokensFilterModel(),
-            bad: new SelectionModel({
-                availableOptions: [{ label: 'Any' }, { label: 'Bad', value: true }, { label: 'Not Bad', value: false }],
-                defaultSelection: [{ label: 'Any' }],
-                allowEmpty: false,
-                multiple: false,
-            }),
+            bad: new RadioButtonFilterModel([{ label: 'Any' }, { label: 'Bad', value: true }, { label: 'Not Bad', value: false }]),
         });
 
         this._filteringModel.observe(() => {

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

@@ -14,9 +14,6 @@
 import { CopyToClipboardComponent, h } from '/js/src/index.js';
 import { runNumbersFilter } from '../../../components/Filters/RunsFilter/runNumbersFilter.js';
 import { displayRunEorReasonsOverview } from '../format/displayRunEorReasonOverview.js';
-import ddflpFilter from '../../../components/Filters/RunsFilter/ddflp.js';
-import dcsFilter from '../../../components/Filters/RunsFilter/dcs.js';
-import epnFilter from '../../../components/Filters/RunsFilter/epn.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 import { displayRunDuration } from '../format/displayRunDuration.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
@@ -47,7 +44,7 @@ import { timeRangeFilter } from '../../../components/Filters/common/filters/time
 import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js';
 import { numericalComparisonFilter } from '../../../components/Filters/common/filters/numericalComparisonFilter.js';
 import { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js';
-import { triggerValueFilter } from '../../../components/Filters/RunsFilter/triggerValueFilter.js';
+import radioButtonFilter from '../../../components/Filters/common/filters/radioButtonFilter.js';
 
 /**
  * List of active columns for a generic runs table
@@ -525,7 +522,7 @@ export const runsActiveColumns = {
         classes: 'w-2 f6 w-wrapped',
         format: (boolean) => boolean ? 'On' : 'Off',
         exportFormat: (boolean) => boolean ? 'On' : 'Off',
-        filter: ddflpFilter,
+        filter: ({ filteringModel }) => radioButtonFilter(filteringModel.get('ddflp'), 'ddFlp'),
     },
     dcs: {
         name: 'DCS',
@@ -534,14 +531,21 @@ export const runsActiveColumns = {
         classes: 'w-2 f6 w-wrapped',
         format: (boolean) => boolean ? 'On' : 'Off',
         exportFormat: (boolean) => boolean ? 'On' : 'Off',
-        filter: dcsFilter,
+        filter: ({ filteringModel }) => radioButtonFilter(filteringModel.get('dcs'), 'dcs'),
     },
     triggerValue: {
         name: 'TRG',
         visible: true,
         profiles: [profiles.none, 'lhcFill', 'environment'],
         classes: 'w-5 f6 w-wrapped',
-        filter: triggerValueFilter,
+
+        /**
+         * TriggerValue filter component
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the trigger value filter component
+         */
+        filter: ({ filteringModel }) => checkboxes(filteringModel.get('triggerValues')),
         format: (trgValue) => trgValue ? trgValue : '-',
     },
     epn: {
@@ -551,7 +555,7 @@ export const runsActiveColumns = {
         classes: 'w-2 f6 w-wrapped',
         format: (boolean) => boolean ? 'On' : 'Off',
         exportFormat: (boolean) => boolean ? 'On' : 'Off',
-        filter: epnFilter,
+        filter: ({ filteringModel }) => radioButtonFilter(filteringModel.get('epn'), 'epn'),
     },
     epnTopology: {
         name: 'EPN Topology',