[O2B-536] Improve several runs filters (#1859)

* [O2B-536] Improve runs overview environment ID filter

* [O2B-536] Improve runs overview run quality filter

* [O2B-536] Improve run overview nFLPs, nEPNs and nDetectors filters

* [O2B-536] Improve runs overview ODC topology filter

* Attempt at improving balloon randomly failing tests

* Fix behavior when clearing the filter

* Fix topology filter size

* Uniformize format

Author: martinboulais

lib/public/components/Filters/RunsFilter/environmentId.js

@@ -33,14 +33,14 @@ export class NumericalComparisonFilterModel extends FilterModel {
 
         this._operatorSelectionModel = new ComparisonSelectionModel();
         this._operatorSelectionModel.visualChange$.bubbleTo(this._visualChange$);
-        this._operatorSelectionModel.observe(() => {
-            if (!this._operandInputModel.isEmpty) {
-                this.notify();
-            }
-        });
 
         this._operandInputModel = new ProcessedTextInputModel({
             parse: (raw) => {
+                // Empty the filter
+                if (raw === '') {
+                    return null;
+                }
+
                 const number = integer ? parseInt(raw, 10) : parseFloat(raw);
                 if (isNaN(number)) {
                     throw new Error('Expected a number');
@@ -50,6 +50,8 @@ export class NumericalComparisonFilterModel extends FilterModel {
         });
         this._operandInputModel.visualChange$.bubbleTo(this._visualChange$);
         this._operandInputModel.bubbleTo(this);
+
+        this._operatorSelectionModel.observe(() => this._operandInputModel.raw ? this.notify() : this._visualChange$.notify());
     }
 
     /**

lib/public/components/Filters/RunsFilter/nDetectors.js

@@ -10,6 +10,7 @@
  *  granted to it by virtue of its status as an Intergovernmental Organization
  *  or submit itself to any jurisdiction.
  */
+
 import { FilterModel } from '../FilterModel.js';
 import { SelectionModel } from '../../../common/selection/SelectionModel.js';
 

lib/public/components/Filters/RunsFilter/nEpns.js

@@ -13,20 +13,13 @@
 
 import { h } from '/js/src/index.js';
 import { runNumbersFilter } from '../../../components/Filters/RunsFilter/runNumbersFilter.js';
-import environmentIdFilter from '../../../components/Filters/RunsFilter/environmentId.js';
-import nDetectorsFilter from '../../../components/Filters/RunsFilter/nDetectors.js';
-import nFlpsFilter from '../../../components/Filters/RunsFilter/nFlps.js';
-import odcTopologyFullName from '../../../components/Filters/RunsFilter/odcTopologyFullName.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 runQualityFilter from '../../../components/Filters/RunsFilter/runQuality.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 import { displayRunDuration } from '../format/displayRunDuration.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
-import nEpnsFilter from '../../../components/Filters/RunsFilter/nEpns.js';
-import { triggerValueFilter } from '../../../components/Filters/RunsFilter/triggerValueFilter.js';
 import { formatRunType } from '../../../utilities/formatting/formatRunType.js';
 import { runDefinitionFilter } from '../../../components/Filters/RunsFilter/runDefinitionFilter.js';
 import { profiles } from '../../../components/common/table/profiles.js';
@@ -54,6 +47,8 @@ import { detectorsFilterComponent } from '../../../components/Filters/RunsFilter
 import { timeRangeFilter } from '../../../components/Filters/common/filters/timeRangeFilter.js';
 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';
 
 /**
  * List of active columns for a generic runs table
@@ -386,7 +381,17 @@ export const runsActiveColumns = {
         visible: true,
         profiles: [profiles.none, 'lhcFill', 'environment', 'home'],
         classes: 'w-10 f6 w-wrapped',
-        filter: environmentIdFilter,
+
+        /**
+         * Environment ids filter component
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the environment ids filter component
+         */
+        filter: (runsOverviewModel) => rawTextFilter(
+            runsOverviewModel.filteringModel.get('environmentIds'),
+            { classes: ['environment-ids-filter', 'w-100'], placeholder: 'e.g. Dxi029djX, TDI59So3d...' },
+        ),
         format: (id) => id ? frontLink(id, 'env-details', { environmentId: id }) : '-',
     },
     runType: {
@@ -428,13 +433,30 @@ export const runsActiveColumns = {
                 }, runQuality),
             },
         },
-        filter: runQualityFilter,
+
+        /**
+         * Run quality filter component
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the run quality filter component
+         */
+        filter: (runsOverviewModel) => checkboxes(runsOverviewModel.filteringModel.get('runQualities').selectionModel),
     },
     nDetectors: {
         name: 'DETs #',
         visible: false,
         classes: 'w-2 f6 w-wrapped',
-        filter: nDetectorsFilter,
+
+        /**
+         * Filter on amount of detectors in runs
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the number of detectors filter component
+         */
+        filter: (runsOverviewModel) => numericalComparisonFilter(
+            runsOverviewModel.filteringModel.get('nDetectors'),
+            { selectorPrefix: 'nDetectors' },
+        ),
     },
     nEpns: {
         name: 'EPNs #',
@@ -443,14 +465,34 @@ export const runsActiveColumns = {
         classes: 'w-2 f6 w-wrapped',
         // eslint-disable-next-line no-extra-parens
         format: (nEpns, run) => run.epn ? (typeof nEpns === 'number' ? nEpns : 'ON') : 'OFF',
-        filter: nEpnsFilter,
+
+        /**
+         * Filter on amount of EPNs in runs
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the number of EPNs filter component
+         */
+        filter: (runsOverviewModel) => numericalComparisonFilter(
+            runsOverviewModel.filteringModel.get('nEpns'),
+            { selectorPrefix: 'nEpns' },
+        ),
     },
     nFlps: {
         name: 'FLPs #',
         visible: true,
         profiles: [profiles.none, 'lhcFill', 'environment'],
         classes: 'w-2 f6 w-wrapped',
-        filter: nFlpsFilter,
+
+        /**
+         * Filter on amount of FLPs in runs
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the number of FLPs filter component
+         */
+        filter: (runsOverviewModel) => numericalComparisonFilter(
+            runsOverviewModel.filteringModel.get('nFlps'),
+            { selectorPrefix: 'nFlps' },
+        ),
     },
     nSubtimeframes: {
         name: '# of STFs',
@@ -508,7 +550,17 @@ export const runsActiveColumns = {
         classes: 'w-15 f6',
         visible: false,
         profiles: [profiles.none, 'lhcFill', 'environment'],
-        filter: odcTopologyFullName,
+
+        /**
+         * ODC topology full name filter component
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the filter component
+         */
+        filter: (runsOverviewModel) => rawTextFilter(
+            runsOverviewModel.filteringModel.get('odcTopologyFullName'),
+            { classes: ['w-100'] },
+        ),
         balloon: true,
     },
     eorReasons: {