[O2B-532] Improve runs overview detectors filter

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

@@ -10,14 +10,14 @@
  * granted to it by virtue of its status as an Intergovernmental Organization
  * or submit itself to any jurisdiction.
  */
-import { Observable } from '/js/src/index.js';
 import { CombinationOperator, CombinationOperatorChoiceModel } from '../common/CombinationOperatorChoiceModel.js';
 import { DetectorSelectionDropdownModel } from '../../detector/DetectorSelectionDropdownModel.js';
+import { FilterModel } from '../common/FilterModel.js';
 
 /**
  * Model to store the state of the filtering on a detectors list
  */
-export class DetectorsFilterModel extends Observable {
+export class DetectorsFilterModel extends FilterModel {
     /**
      * Constructor
      *
@@ -26,42 +26,54 @@ export class DetectorsFilterModel extends Observable {
     constructor(observableDetectors) {
         super();
         this._dropdownModel = new DetectorSelectionDropdownModel(observableDetectors);
-        this._dropdownModel.bubbleTo(this);
+        this._addSubmodel(this._dropdownModel);
 
         this._combinationOperatorModel = new CombinationOperatorChoiceModel([
             CombinationOperator.AND,
             CombinationOperator.OR,
             CombinationOperator.NONE,
         ]);
-        this._combinationOperatorModel.bubbleTo(this);
+        this._addSubmodel(this._combinationOperatorModel);
     }
 
+    // eslint-disable-next-line valid-jsdoc
     /**
-     * States if the filter has no tags selected
-     *
-     * @return {boolean} true if no tags are selected
+     * @inheritDoc
      */
-    isEmpty() {
-        return this.selected.length === 0 && !this.isNone();
+    reset() {
+        this._dropdownModel.reset();
+        this._combinationOperatorModel.reset();
     }
 
+    // eslint-disable-next-line valid-jsdoc
     /**
-     * Return true if the current combination operator is none
-     *
-     * @return {boolean} true if the current combination operator is none
+     * @inheritDoc
      */
-    isNone() {
-        return this.combinationOperator === CombinationOperator.NONE.value;
+    get isEmpty() {
+        return this._dropdownModel.isEmpty && !this.isNone();
     }
 
+    // eslint-disable-next-line valid-jsdoc
     /**
-     * Reset the model to its default state
+     * @inheritDoc
+     */
+    get normalized() {
+        const normalized = {
+            operator: this._combinationOperatorModel.current,
+        };
+        if (!this.isNone()) {
+            normalized.values = this._dropdownModel.selected.join();
+        }
+        return normalized;
+    }
+
+    /**
+     * Return true if the current combination operator is none
      *
-     * @return {void}
+     * @return {boolean} true if the current combination operator is none
      */
-    reset() {
-        this._dropdownModel.reset();
-        this._combinationOperatorModel.reset();
+    isNone() {
+        return this._combinationOperatorModel.current === CombinationOperator.NONE.value;
     }
 
     /**
@@ -73,13 +85,6 @@ export class DetectorsFilterModel extends Observable {
         return this._dropdownModel;
     }
 
-    /**
-     * Shortcut to get the list of selected detectors
-     */
-    get selected() {
-        return this._dropdownModel.selected;
-    }
-
     /**
      * Return the model storing the combination operator to apply on the list of detectors
      *
@@ -88,22 +93,4 @@ export class DetectorsFilterModel extends Observable {
     get combinationOperatorModel() {
         return this._combinationOperatorModel;
     }
-
-    /**
-     * Shortcut to get the current combination operator
-     *
-     * @return {string} the current operator
-     */
-    get combinationOperator() {
-        return this._combinationOperatorModel.current;
-    }
-
-    /**
-     * Returns an observable notified any time a visual change occurs that has no impact on the actual selection
-     *
-     * @return {Observable} the visual change observable
-     */
-    get visualChange$() {
-        return this._dropdownModel.visualChange$;
-    }
 }

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

@@ -15,11 +15,12 @@ import { selectionDropdown } from '../../common/selection/dropdown/selectionDrop
 import { combinationOperatorChoiceComponent } from '../common/combinationOperatorChoiceComponent.js';
 
 /**
- * Returns the author filter component
- * @param {RunsOverviewModel} runModel the run model object
- * @return {Component} A text box that lets the user look for logs with a specific author
+ * Returns the detectors filter component
+ *
+ * @param {DetectorsFilterModel} detectorsFilterModel the detectors filter model
+ * @return {Component} the detectors filtering component
  */
-export const detectorsFilterComponent = ({ detectorsFilterModel }) => [
+export const detectorsFilterComponent = (detectorsFilterModel) => [
     combinationOperatorChoiceComponent(detectorsFilterModel.combinationOperatorModel, { selectorPrefix: 'detector-filter' }),
     !detectorsFilterModel.isNone() && selectionDropdown(detectorsFilterModel.dropdownModel, { selectorPrefix: 'detector-filter' }),
 ];

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

@@ -18,7 +18,6 @@ import nDetectorsFilter from '../../../components/Filters/RunsFilter/nDetectors.
 import nFlpsFilter from '../../../components/Filters/RunsFilter/nFlps.js';
 import odcTopologyFullName from '../../../components/Filters/RunsFilter/odcTopologyFullName.js';
 import { displayRunEorReasonsOverview } from '../format/displayRunEorReasonOverview.js';
-import { detectorsFilterComponent } from '../../../components/Filters/RunsFilter/detectorsFilterComponent.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';
@@ -56,6 +55,7 @@ import { o2StartFilter } from '../../../components/Filters/RunsFilter/o2StartFil
 import { o2StopFilter } from '../../../components/Filters/RunsFilter/o2StopFilter.js';
 import { isRunConsideredRunning } from '../../../services/run/isRunConsideredRunning.js';
 import { aliEcsEnvironmentLinkComponent } from '../../../components/common/externalLinks/aliEcsEnvironmentLinkComponent.js';
+import { detectorsFilterComponent } from '../../../components/Filters/RunsFilter/detectorsFilterComponent.js';
 
 /**
  * List of active columns for a generic runs table
@@ -119,7 +119,14 @@ export const runsActiveColumns = {
         },
         size: 'w-15 f6',
         format: (_, run) => formatRunDetectorsInline(run.detectorsQualities, run.nDetectors),
-        filter: detectorsFilterComponent,
+
+        /**
+         * Detectors filter component
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the filter component
+         */
+        filter: (runsOverviewModel) => detectorsFilterComponent(runsOverviewModel.filteringModel.get('detectors')),
         balloon: true,
     },
     tags: {

lib/public/views/Runs/Overview/RunsOverviewModel.js

@@ -43,17 +43,14 @@ export class RunsOverviewModel extends OverviewPageModel {
         super();
 
         this._filteringModel = new FilteringModel({
+            detectors: new DetectorsFilterModel(detectorsProvider.dataTaking$),
             tags: new TagFilterModel([
                 CombinationOperator.AND,
                 CombinationOperator.OR,
                 CombinationOperator.NONE_OF,
             ]),
         });
 
-        this._detectorsFilterModel = new DetectorsFilterModel(detectorsProvider.dataTaking$);
-        this._detectorsFilterModel.observe(() => this._applyFilters(true));
-        this._detectorsFilterModel.visualChange$.bubbleTo(this);
-
         this._listingRunTypesFilterModel = new RunTypesSelectionDropdownModel();
         this._listingRunTypesFilterModel.observe(() => this._applyFilters(true));
         this._listingRunTypesFilterModel.visualChange$.bubbleTo(this);
@@ -195,7 +192,6 @@ export class RunsOverviewModel extends OverviewPageModel {
         this.runFilterValues = '';
         this._runDefinitionFilter = [];
 
-        this._detectorsFilterModel.reset();
         this._listingRunTypesFilterModel.reset();
         this._eorReasonsFilterModel.reset();
         this._o2StartFilterModel.reset();
@@ -251,7 +247,6 @@ export class RunsOverviewModel extends OverviewPageModel {
                || !this._eorReasonsFilterModel.isEmpty()
                || !this._o2StartFilterModel.isEmpty
                || !this._o2StopFilterModel.isEmpty
-               || !this._detectorsFilterModel.isEmpty()
                || this._listingRunTypesFilterModel.selected.length !== 0
                || this._aliceL3AndDipoleCurrentFilter.selected.length !== 0
                || this._fillNumbersFilter !== ''
@@ -670,15 +665,6 @@ export class RunsOverviewModel extends OverviewPageModel {
         this._applyFilters();
     }
 
-    /**
-     * Returns the model handling the filtering on detectors
-     *
-     * @return {DetectorsFilterModel} the detectors filtering model
-     */
-    get detectorsFilterModel() {
-        return this._detectorsFilterModel;
-    }
-
     /**
      * Return all the runs currently filtered, without paging
      *
@@ -823,10 +809,6 @@ export class RunsOverviewModel extends OverviewPageModel {
                 'filter[runNumbers]': this.runFilterValues,
             },
             ...!this._eorReasonsFilterModel.isEmpty() && this._eorReasonsFilterModel.getFilterQueryParams(),
-            ...!this._detectorsFilterModel.isEmpty() && {
-                'filter[detectors][operator]': this._detectorsFilterModel.combinationOperator,
-                ...!this._detectorsFilterModel.isNone() && { 'filter[detectors][values]': this._detectorsFilterModel.selected.join() },
-            },
             ...this._runDefinitionFilter.length > 0 && {
                 'filter[definitions]': this._runDefinitionFilter.join(','),
             },