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

Author: martinboulais

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

@@ -33,11 +33,6 @@ 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) => {
@@ -50,6 +45,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/nEpns.js

@@ -13,8 +13,6 @@
 
 import { h } from '/js/src/index.js';
 import { runNumbersFilter } from '../../../components/Filters/RunsFilter/runNumbersFilter.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';
@@ -23,7 +21,6 @@ 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';
-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';
@@ -450,7 +447,17 @@ export const runsActiveColumns = {
         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 #',
@@ -459,14 +466,28 @@ 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',

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

@@ -75,6 +75,9 @@ export class RunsOverviewModel extends OverviewPageModel {
                     value: quality,
                 })),
             }),
+            nDetectors: new NumericalComparisonFilterModel({ integer: true }),
+            nEpns: new NumericalComparisonFilterModel({ integer: true }),
+            nFlps: new NumericalComparisonFilterModel({ integer: true }),
             eorReason: new EorReasonFilterModel(eorReasonTypeProvider.items$),
             magnets: new MagnetsFilteringModel(magnetsCurrentLevelsProvider.items$),
             muInelasticInteractionRate: new NumericalComparisonFilterModel({ useOperatorAsNormalizationKey: true }),
@@ -183,12 +186,6 @@ export class RunsOverviewModel extends OverviewPageModel {
 
         this._triggerValuesFilters = new Set();
 
-        this.nDetectorsFilter = null;
-
-        this._nEpnsFilter = null;
-
-        this.nFlpsFilter = null;
-
         this.ddflpFilter = '';
 
         this.dcsFilter = '';
@@ -209,9 +206,6 @@ export class RunsOverviewModel extends OverviewPageModel {
     isAnyFilterActive() {
         return this._filteringModel.isAnyFilterActive()
                || this._triggerValuesFilters.size !== 0
-               || this.nDetectorsFilter !== null
-               || this._nEpnsFilter !== null
-               || this.nFlpsFilter !== null
                || this.ddflpFilter !== ''
                || this.dcsFilter !== ''
                || this.epnFilter !== ''
@@ -268,67 +262,6 @@ export class RunsOverviewModel extends OverviewPageModel {
         this._applyFilters();
     }
 
-    /**
-     * Returns the amount of detectors filters
-     * @return {{operator: string, limit: (number|null)}|null} The current amount of detectors filters
-     */
-    getNDetectorsFilter() {
-        return this.nDetectorsFilter;
-    }
-
-    /**
-     * Sets the limit of detectors and the comparison operator to filter if no new inputs were detected for 200
-     * milliseconds
-     *
-     * @param {{operator: string, limit: (number|null)}|null} newNDetectors The new filter value
-     *
-     * @return {void}
-     */
-    setNDetectorsFilter(newNDetectors) {
-        this.nDetectorsFilter = newNDetectors;
-        this._applyFilters();
-    }
-
-    /**
-     * Returns the current amount of epns filter
-     * @return {{operator: string, limit: (number|null)}|null} The current amount of epns filters
-     */
-    get nEpnsFilter() {
-        return this._nEpnsFilter;
-    }
-
-    /**
-     * Returns the current amount of flps filter
-     * @return {{operator: string, limit: (number|null)}|null} The current amount of flps filters
-     */
-    getNFlpsFilter() {
-        return this.nFlpsFilter;
-    }
-
-    /**
-     * Sets the limit of epns and the comparison operator to filter if no new inputs were detected for 200 milliseconds
-     *
-     * @param {{operator: string, limit: (number|null)}|null} newNEpns The new filter value
-     *
-     * @return {void}
-     */
-    set nEpnsFilter(newNEpns) {
-        this._nEpnsFilter = newNEpns;
-        this._applyFilters();
-    }
-
-    /**
-     * Sets the limit of flps and the comparison operator to filter if no new inputs were detected for 200 milliseconds
-     *
-     * @param {{operator: string, limit: (number|null)}|null} newNFlps The new filter value
-     *
-     * @return {void}
-     */
-    setNFlpsFilter(newNFlps) {
-        this.nFlpsFilter = newNFlps;
-        this._applyFilters();
-    }
-
     /**
      * Returns the boolean of ddflp
      * @return {Boolean} if ddflp is on
@@ -467,18 +400,6 @@ export class RunsOverviewModel extends OverviewPageModel {
             ...this._triggerValuesFilters.size !== 0 && {
                 'filter[triggerValues]': Array.from(this._triggerValuesFilters).join(),
             },
-            ...this.nDetectorsFilter && this.nDetectorsFilter.limit !== null && {
-                'filter[nDetectors][operator]': this.nDetectorsFilter.operator,
-                'filter[nDetectors][limit]': this.nDetectorsFilter.limit,
-            },
-            ...this.nFlpsFilter && this.nFlpsFilter.limit !== null && {
-                'filter[nFlps][operator]': this.nFlpsFilter.operator,
-                'filter[nFlps][limit]': this.nFlpsFilter.limit,
-            },
-            ...this.nEpnsFilter && this.nEpnsFilter.limit !== null && {
-                'filter[nEpns][operator]': this.nEpnsFilter.operator,
-                'filter[nEpns][limit]': this.nEpnsFilter.limit,
-            },
             ...(this.ddflpFilter === true || this.ddflpFilter === false) && {
                 'filter[ddflp]': this.ddflpFilter,
             },

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

@@ -723,7 +723,7 @@ module.exports = () => {
         await expectInputValue(page, '#nDetectors-operator', '=');
 
         await page.select('#nDetectors-operator', '<=');
-        await fillInput(page, '#nDetectors-limit', '1');
+        await fillInput(page, '#nDetectors-operand', '1', ['change']);
         await waitForTableLength(page, 6);
 
         const nDetectorsList = await page.evaluate(() => Array.from(document.querySelectorAll('tbody tr')).map((row) => {
@@ -743,7 +743,7 @@ module.exports = () => {
         await expectInputValue(page, '#nFlps-operator', '=');
 
         await page.select('#nFlps-operator', '<=');
-        await fillInput(page, '#nFlps-limit', '10');
+        await fillInput(page, '#nFlps-operand', '10', ['change']);
         await waitForTableLength(page, 5);
 
         const nFlpsList = await page.evaluate(() => Array.from(document.querySelectorAll('tbody tr')).map((row) => {
@@ -761,7 +761,7 @@ module.exports = () => {
         await expectInputValue(page, '#nEpns-operator', '=');
 
         await page.select('#nEpns-operator', '<=');
-        await fillInput(page, '#nEpns-limit', '10');
+        await fillInput(page, '#nEpns-operand', '10', ['change']);
         await waitForTableLength(page, 5);
 
         await expectColumnValues(page, 'nEpns', ['10', '10', 'OFF', 'OFF', '10']);