[O2B-536] Improve runs overview inelastic interaction rates filtering

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

@@ -14,11 +14,11 @@
 import { SelectionDropdownModel } from '../../../common/selection/dropdown/SelectionDropdownModel.js';
 
 const numericalComparisonOptions = Object.freeze([
-    { value: '<', selector: 'lt' },
-    { value: '<=', selector: 'le' },
-    { value: '=', selector: 'eq' },
-    { value: '>=', selector: 'ge' },
-    { value: '>', selector: 'gt' },
+    { value: '<' },
+    { value: '<=' },
+    { value: '=' },
+    { value: '>=' },
+    { value: '>' },
 ]);
 
 /**

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

@@ -0,0 +1,105 @@
+/**
+ * @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 { ComparisonSelectionModel } from './ComparisonSelectionModel.js';
+import { FilterModel } from '../FilterModel.js';
+import { ProcessedTextInputModel } from './ProcessedTextInputModel.js';
+
+/**
+ * NumericalComparisonFilterModel
+ */
+export class NumericalComparisonFilterModel extends FilterModel {
+    /**
+     * Constructor
+     * @param {object} [options] options of the filter
+     * @param {boolean} [options.useOperatorAsNormalizationKey] if true, operator value will be used as normalization key, else operator will be
+     *     passed with key `operator` and `operand` will be passed as `limit`
+     * @param {number} [options.scale] scale applied on the value of the operand in normalization
+     */
+    constructor(options) {
+        super();
+        const { useOperatorAsNormalizationKey, scale = 1 } = options || {};
+        this._useOperatorAsNormalizationKey = Boolean(useOperatorAsNormalizationKey);
+
+        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) => {
+                const number = parseInt(raw, 10);
+                if (isNaN(number)) {
+                    throw new Error('Expected a number');
+                }
+                return number * scale;
+            },
+        });
+        this._operandInputModel.visualChange$.bubbleTo(this._visualChange$);
+        this._operandInputModel.bubbleTo(this);
+    }
+
+    /**
+     * Return raw text filter model
+     *
+     * @return {ProcessedTextInputModel} operand input model
+     */
+    get operandInputModel() {
+        return this._operandInputModel;
+    }
+
+    /**
+     * Get operator selection model
+     *
+     * @return {ComparisonSelectionModel} selection model
+     */
+    get operatorSelectionModel() {
+        return this._operatorSelectionModel;
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    reset() {
+        this._operandInputModel.reset();
+        this._operatorSelectionModel.reset();
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    get normalized() {
+        if (this._useOperatorAsNormalizationKey) {
+            return {
+                [this._operatorSelectionModel.current]: this._operandInputModel.value,
+            };
+        } else {
+            return {
+                operator: this._operatorSelectionModel.current,
+                limit: this._operandInputModel.value,
+            };
+        }
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    get isEmpty() {
+        return !this._operandInputModel.raw;
+    }
+}

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

@@ -0,0 +1,99 @@
+import { Observable } from '/js/src/index.js';
+
+/**
+ * Model to store raw and processed value of a form input
+ *
+ * @template T
+ */
+export class ProcessedTextInputModel extends Observable {
+    /**
+     * @callback parseCallback
+     *
+     * @param {string} raw the raw value
+     * @return {T} the parsed value
+     */
+
+    /**
+     * Constructor
+     *
+     * @param {object} [options] eventual options
+     * @param {parseCallback} [options.parse] function called to extract new value from raw value. If function throws, new value will not be
+     *     applied
+     */
+    constructor(options) {
+        super();
+
+        const { parse } = options || {};
+
+        this._raw = '';
+        this._value = null;
+
+        this._parse = parse;
+
+        this._visualChange$ = new Observable();
+    }
+
+    /**
+     * Returns the raw value of the input
+     *
+     * @return {string} the raw value
+     */
+    get raw() {
+        return this._raw;
+    }
+
+    /**
+     * Returns the processed value of the input
+     *
+     * @return {T} the current value
+     */
+    get value() {
+        return this._value;
+    }
+
+    /**
+     * Update the raw value and eventually parse the new value from it
+     *
+     * @param {string} raw the new raw value
+     * @param {boolean} parseValue if true, new raw value will be parsed to extract the new value (applied only if parse succeed)
+     * @return {void}
+     */
+    update(raw, parseValue = false) {
+        this._raw = raw;
+
+        if (parseValue && this._parse) {
+            try {
+                const value = this._parse(raw);
+                if (this._value !== value) {
+                    this._value = value;
+                    this.notify();
+                    // Do not trigger visual change
+                    return;
+                }
+            } catch (_) {
+                // For now, simply ignore the new value if invalid
+            }
+        }
+
+        this._visualChange$.notify();
+    }
+
+    /**
+     * Resets the model to its initial state (without notification)
+     *
+     * @return {void}
+     */
+    reset() {
+        this._raw = '';
+        this._value = null;
+    }
+
+    /**
+     * Return the visual change observable
+     *
+     * @return {Observable} the visual change observable
+     */
+    get visualChange$() {
+        return this._visualChange$;
+    }
+}

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

@@ -16,7 +16,7 @@ import { h } from '/js/src/index.js';
 
 /**
  * @callback filterChangeHandler
- * @param {{operator: string, limit: (number|number)}|null} newFilter the new filter value
+ * @param {{operator: string, limit: (number|null)}} newFilter the new filter value
  */
 
 /**