[O2B-536] Clean selection model

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

@@ -11,15 +11,15 @@
  * or submit itself to any jurisdiction.
  */
 
-import { checkboxes } from '../common/filters/checkboxFilter.js';
+import { expandedSelectionFilter } from '../common/filters/checkboxFilter.js';
 
 /**
  * Renders a list of checkboxes that lets the user look for runs with specific definition
  *
  * @param {RunDefinitionFilterModel} runDefinitionFilterModel run definition filter model
  * @return {Component} the filter
  */
-export const runDefinitionFilter = (runDefinitionFilterModel) => checkboxes(
+export const runDefinitionFilter = (runDefinitionFilterModel) => expandedSelectionFilter(
     runDefinitionFilterModel.selectionModel,
     { selector: 'run-definition' },
 );

lib/public/components/Filters/common/FilterModel.js

@@ -78,6 +78,6 @@
      */
     _addSubmodel(subModel) {
         subModel.bubbleTo(this);
-        subModel?.visualChange$.bubbleTo(this._visualChange$);
+        subModel.visualChange$?.bubbleTo(this._visualChange$);
     }
 }

lib/public/components/Filters/common/TagFilterModel.js

@@ -23,7 +23,7 @@ export class TagFilterModel extends FilterModel {
      * Constructor
      *
      * @param {ObservableData<RemoteData<Tag[], ApiError>>} tags$ observable remote data of tags list
-     * @param {SelectionOption} [operators] optionally the list of available operators for the filter
+     * @param {SelectionOption[]} [operators] optionally the list of available operators for the filter
      * @constructor
      */
     constructor(tags$, operators) {

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

@@ -11,7 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
-import { SelectionDropdownModel } from '../../../common/selection/dropdown/SelectionDropdownModel.js';
+import { SelectionModel } from '../../../common/selection/SelectionModel.js';
 
 const numericalComparisonOptions = Object.freeze([
     { value: '<' },
@@ -24,7 +24,7 @@ const numericalComparisonOptions = Object.freeze([
 /**
  * Model storing state of a selection of comparison operator
  */
-export class ComparisonSelectionModel extends SelectionDropdownModel {
+export class ComparisonSelectionModel extends SelectionModel {
     /**
      * Constructor
      */

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

@@ -31,14 +31,6 @@
         const { useOperatorAsNormalizationKey, scale = 1, integer = false } = 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 = integer ? parseInt(raw, 10) : parseFloat(raw);
@@ -48,8 +40,10 @@
                 return number * scale;
             },
         });
-        this._operandInputModel.visualChange$.bubbleTo(this._visualChange$);
-        this._operandInputModel.bubbleTo(this);
+        this._addSubmodel(this._operandInputModel);
+
+        this._operatorSelectionModel = new ComparisonSelectionModel();
+        this._operatorSelectionModel.observe(() => this._operandInputModel.raw ? this.notify() : this._visualChange$.notify());
     }
 
     /**

lib/public/components/Filters/common/filters/SelectionFilterModel.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/common/filters/checkboxFilter.js

@@ -13,6 +13,7 @@
  */
 
 import { h } from '/js/src/index.js';
+import { selectionOptions } from '../../../common/selection/selectionOptions.js';
 
 /**
  * A general component for generating checkboxes.
@@ -47,19 +48,7 @@
  * @param {string} [additionalProperties.selector] input identifiers prefix
  * @return {Component} filter component
  */
-export const checkboxes = (selectionModel, additionalProperties = {}) => {
-    const { selector = 'checkboxes' } = additionalProperties;
-
-    return h('.flex-row.flex-wrap', selectionModel.options.map((option) => h('.form-check.flex-grow', [
-        h('input.form-check-input', {
-            id: `${selector}-checkbox-${option.value}`,
-            type: 'checkbox',
-            checked: selectionModel.isSelected(option),
-            onchange: () => selectionModel.isSelected(option) ? selectionModel.deselect(option) : selectionModel.select(option),
-            ...additionalProperties,
-        }),
-        h('label.form-check-label', {
-            for: `${selector}-checkbox-${option.value}`,
-        }, option.label || option.value),
-    ])));
-};
+export const expandedSelectionFilter = (selectionModel, additionalProperties = {}) => h(
+    '.flex-row.flex-wrap.gc4',
+    selectionOptions(selectionModel, { selectorPrefix: additionalProperties.selector }),
+);