[O2B-532] Improve runs overview run number filter

AliceO2Group · Jan 8, 2025 · e1f2b03 · e1f2b03
1 parent 97a32c4
commit e1f2b03
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 41 deletions.
diff --git a/...omponents/Filters/RunsFilter/runNumber.js → ...nts/Filters/RunsFilter/runNumberFilter.js b/...omponents/Filters/RunsFilter/runNumber.js → ...nts/Filters/RunsFilter/runNumberFilter.js
@@ -14,16 +14,19 @@
 import { h } from '/js/src/index.js';
 
 /**
- * Returns the author filter component
- * @param {RunsOverviewModel} runsOverviewModel the runs overview model
- * @return {vnode} A text box that lets the user look for logs with a specific author
+ * Component to filter runs on run number
+ * @param {RawTextFilterModel} runNumberFilterModel the filter model
+ * @return {Component} the filter
  */
-const runNumberFilter = (runsOverviewModel) => h('input', {
-    type: 'text',
-    id: 'runNumber',
-    value: runsOverviewModel.getRunNumberFilter(),
-    placeholder: 'e.g. 534454, 534455...',
-    oninput: (e) => runsOverviewModel.setRunsFilter(e.target.value),
-}, '');
-
-export default runNumberFilter;
+export const runNumberFilter = (runNumberFilterModel) => h(
+    'input',
+    {
+        type: 'text',
+        id: 'runNumber',
+        value: runNumberFilterModel.value,
+        placeholder: 'e.g. 534454, 534455...',
+        oninput: (e) => {
+            runNumberFilterModel.value = e.target.value;
+        },
+    },
+);
diff --git a/lib/public/components/Filters/common/filters/RawTextFilterModel.js b/lib/public/components/Filters/common/filters/RawTextFilterModel.js
@@ -0,0 +1,58 @@
+import { FilterModel } from '../FilterModel.js';
+
+const EMPTY_VALUE = '';
+
+/**
+ * Filtering model to handle raw text value
+ */
+export class RawTextFilterModel extends FilterModel {
+    /**
+     * Constructor
+     */
+    constructor() {
+        super();
+        this._value = EMPTY_VALUE;
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    reset() {
+        this._value = EMPTY_VALUE;
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    get isEmpty() {
+        return this._value === EMPTY_VALUE;
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    get normalized() {
+        return this._value;
+    }
+
+    /**
+     * Return the filter current value
+     *
+     * @return {string} the current value
+     */
+    get value() {
+        return this._value;
+    }
+
+    /**
+     * Sets the filter current value
+     *
+     * @param {string} value the current value
+     */
+    set value(value) {
+        this._value = value;
+    }
+}
diff --git a/lib/public/views/Runs/ActiveColumns/runsActiveColumns.js b/lib/public/views/Runs/ActiveColumns/runsActiveColumns.js
@@ -12,7 +12,7 @@
  */
 
 import { h } from '/js/src/index.js';
-import runNumberFilter from '../../../components/Filters/RunsFilter/runNumber.js';
+import { runNumberFilter } from '../../../components/Filters/RunsFilter/runNumberFilter.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';
@@ -70,7 +70,14 @@ export const runsActiveColumns = {
         visible: true,
         classes: 'w-10 f6 w-wrapped',
         sortable: true,
-        filter: runNumberFilter,
+
+        /**
+         * Run number filter component
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the filter component
+         */
+        filter: (runsOverviewModel) => runNumberFilter(runsOverviewModel.filteringModel.get('runNumber')),
         format: (runNumber, run) => buttonLinkWithDropdown(
             runNumber,
             'run-detail',

diff --git a/lib/public/views/Runs/Overview/RunsOverviewModel.js b/lib/public/views/Runs/Overview/RunsOverviewModel.js
@@ -28,6 +28,7 @@ import { MagnetsFilteringModel } from '../../../components/Filters/RunsFilter/Ma
 import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
 import { buildUrl } from '../../../utilities/fetch/buildUrl.js';
 import { TimeRangeFilterModel } from '../../../components/Filters/RunsFilter/TimeRangeFilter.js';
+import { RawTextFilterModel } from '../../../components/Filters/common/filters/RawTextFilterModel.js';
 
 /**
  * Model representing handlers for runs page
@@ -43,6 +44,7 @@ export class RunsOverviewModel extends OverviewPageModel {
         super();
 
         this._filteringModel = new FilteringModel({
+            runNumber: new RawTextFilterModel(),
             detectors: new DetectorsFilterModel(detectorsProvider.dataTaking$),
             tags: new TagFilterModel([
                 CombinationOperator.AND,
@@ -158,8 +160,6 @@ export class RunsOverviewModel extends OverviewPageModel {
     resetFiltering(fetch = true) {
         this._filteringModel.reset();
 
-        this.runFilterOperation = 'AND';
-        this.runFilterValues = '';
         this._runDefinitionFilter = [];
 
         this._fillNumbersFilter = '';
@@ -199,7 +199,6 @@ export class RunsOverviewModel extends OverviewPageModel {
      */
     isAnyFilterActive() {
         return this._filteringModel.isAnyFilterActive()
-               || this.runFilterValues !== ''
                || this._runDefinitionFilter.length > 0
                || this._fillNumbersFilter !== ''
                || this._runDurationFilter !== null
@@ -213,7 +212,7 @@ export class RunsOverviewModel extends OverviewPageModel {
                || this.ddflpFilter !== ''
                || this.dcsFilter !== ''
                || this.epnFilter !== ''
-               || this._odcTopologyFullNameFilter !== ''
+               || this._odcTopologyFullNameFilter !== '';
     }
 
     /**
@@ -248,24 +247,6 @@ export class RunsOverviewModel extends OverviewPageModel {
         this.notify();
     }
 
-    /**
-     * Returns the current runNumber substring filter
-     * @return {String} The current runNumber substring filter
-     */
-    getRunNumberFilter() {
-        return this.runFilterValues;
-    }
-
-    /**
-     * Sets the run Number substring filter if no new inputs were detected for 200 milliseconds
-     * @param {string} runs The number of the run to apply to the filter
-     * @return {undefined}
-     */
-    setRunsFilter(runs) {
-        this.runFilterValues = runs.trim();
-        this._applyFilters();
-    }
-
     /**
      * States if the given definition is currently in the run definition filter, and it's the only one
      *

diff --git a/lib/public/views/Runs/Overview/RunsOverviewPage.js b/lib/public/views/Runs/Overview/RunsOverviewPage.js
@@ -18,7 +18,7 @@ import { filtersPanelPopover } from '../../../components/Filters/common/filtersP
 import { paginationComponent } from '../../../components/Pagination/paginationComponent.js';
 import { runsActiveColumns } from '../ActiveColumns/runsActiveColumns.js';
 import { table } from '../../../components/common/table/table.js';
-import runNumberFilter from '../../../components/Filters/RunsFilter/runNumber.js';
+import { runNumberFilter } from '../../../components/Filters/RunsFilter/runNumberFilter.js';
 import { switchInput } from '../../../components/common/form/switchInput.js';
 import { RunDefinition } from '../../../domain/enums/RunDefinition.js';
 
@@ -54,7 +54,7 @@ export const RunsOverviewPage = ({ runs: { overviewModel: runsOverviewModel }, m
     return h('', [
         h('.flex-row.header-container.g2.pv2', [
             filtersPanelPopover(runsOverviewModel, runsActiveColumns),
-            h('.pl2#runOverviewFilter', runNumberFilter(runsOverviewModel)),
+            h('.pl2#runOverviewFilter', runNumberFilter(runsOverviewModel.filteringModel.get('runNumber'))),
             togglePhysicsOnlyFilter(runsOverviewModel),
             exportRunsTriggerAndModal(runsOverviewModel, modalModel),
         ]),

diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -24,7 +24,7 @@ import { createRunDetectorsAsyncQcActiveColumns } from '../ActiveColumns/runDete
 import { inelasticInteractionRateActiveColumnsForPbPb } from '../ActiveColumns/inelasticInteractionRateActiveColumnsForPbPb.js';
 import { inelasticInteractionRateActiveColumnsForProtonProton } from '../ActiveColumns/inelasticInteractionRateActiveColumnsForProtonProton.js';
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
-import runNumberFilter from '../../../components/Filters/RunsFilter/runNumber.js';
+import { runNumberFilter } from '../../../components/Filters/RunsFilter/runNumberFilter.js';
 import { qcSummaryLegendTooltip } from '../../../components/qcFlags/qcSummaryLegendTooltip.js';
 import { isRunNotSubjectToQc } from '../../../components/qcFlags/isRunSubjectToQc.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
@@ -94,7 +94,7 @@ const skimmableControl = (dataPass, onclick, requestResult) => {
 /**
  * Render Runs Per LHC Period overview page
  * @param {Model} model The overall model object.
- * @param {Model} [model.runs.perDataPassOverviewModel] model holding state for of the page
+ * @param {RunsPerDataPassOverviewModel} [model.runs.perDataPassOverviewModel] model holding state for of the page
  * @return {Component} The overview page
  */
 export const RunsPerDataPassOverviewPage = ({
@@ -205,7 +205,7 @@ export const RunsPerDataPassOverviewPage = ({
     return h('', { onremove: () => perDataPassOverviewModel.reset(false) }, [
         h('.flex-row.justify-between.items-center.g2', [
             filtersPanelPopover(perDataPassOverviewModel, activeColumns, { profile: 'runsPerDataPass' }),
-            h('.pl2#runOverviewFilter', runNumberFilter(perDataPassOverviewModel)),
+            h('.pl2#runOverviewFilter', runNumberFilter(perDataPassOverviewModel.filteringModel.get('runNumber'))),
             h(
                 '.flex-row.g1.items-center',
                 remoteDataPass.match({