[O2B-536] Improve runs overview LHC periods filter

Author: martinboulais

…mponents/Filters/RunsFilter/lhcPeriod.js …s/Filters/RunsFilter/lhcPeriodsFilter.jslib/public/components/Filters/RunsFilter/lhcPeriod.js renamed to lib/public/components/Filters/RunsFilter/lhcPeriodsFilter.js lib/public/components/Filters/RunsFilter/lhcPeriod.js renamed to lib/public/components/Filters/RunsFilter/lhcPeriodsFilter.js

@@ -14,18 +14,21 @@
 import { h } from '/js/src/index.js';
 
 /**
- * Returns the lhc period filter component.
- * @param {RunsOverviewModel} runModel The run model object
- * @return {vnode} A text box that lets the user look for logs with a specific author
+ * Returns the lhc periods filter component.
+ *
+ * @param {RawTextFilterModel} lhcPeriodsFilterModel the filter model
+ * @return {Component} the LHC periods filter component
  */
-const lhcPeriodsFilter = (runModel) => h('input.w-75.mt1', {
-    type: 'lhcPeriod',
-    id: 'lhcPeriods',
-    placeholder: 'e.g. LHC22b, LHC22a...',
-    value: runModel.lhcPeriodsFilter,
-    oninput: (e) => {
-        runModel.lhcPeriodsFilter = e.target.value;
+export const lhcPeriodsFilter = (lhcPeriodsFilterModel) => h(
+    'input.w-75.mt1',
+    {
+        type: 'lhcPeriod',
+        id: 'lhcPeriods',
+        placeholder: 'e.g. LHC22b, LHC22a...',
+        value: lhcPeriodsFilterModel.value,
+        oninput: (e) => {
+            lhcPeriodsFilterModel.value = e.target.value;
+        },
     },
-}, '');
-
-export default lhcPeriodsFilter;
+    '',
+);

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

@@ -28,7 +28,7 @@ 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 lhcPeriodsFilter from '../../../components/Filters/RunsFilter/lhcPeriod.js';
+import { lhcPeriodsFilter } from '../../../components/Filters/RunsFilter/lhcPeriodsFilter.js';
 import { formatRunType } from '../../../utilities/formatting/formatRunType.js';
 import { runDefinitionFilter } from '../../../components/Filters/RunsFilter/runDefinitionFilter.js';
 import { profiles } from '../../../components/common/table/profiles.js';
@@ -195,7 +195,14 @@ export const runsActiveColumns = {
         profiles: [profiles.none, 'lhcFill', 'environment', 'home'],
         classes: 'w-5 f6',
         format: (lhcPeriod, run) => lhcPeriod && run.lhcBeamMode === BeamModes.STABLE_BEAMS ? lhcPeriod : '-',
-        filter: lhcPeriodsFilter,
+
+        /**
+         * LHC Periods filter
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the filter component
+         */
+        filter: (runsOverviewModel) => lhcPeriodsFilter(runsOverviewModel.filteringModel.get('lhcPeriods')),
     },
     timeO2Start: {
         name: 'Start',

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

@@ -60,6 +60,7 @@ export class RunsOverviewModel extends OverviewPageModel {
                 ],
             ),
             fillNumbers: new RawTextFilterModel(),
+            lhcPeriods: new RawTextFilterModel(),
             o2start: new TimeRangeFilterModel(),
             o2end: new TimeRangeFilterModel(),
             definitions: new RunDefinitionFilterModel(),
@@ -172,8 +173,6 @@ export class RunsOverviewModel extends OverviewPageModel {
 
         this._runDurationFilter = null;
 
-        this._lhcPeriodsFilter = null;
-
         this.environmentIdsFilter = '';
 
         this.runQualitiesFilters = [];
@@ -206,7 +205,6 @@ export class RunsOverviewModel extends OverviewPageModel {
     isAnyFilterActive() {
         return this._filteringModel.isAnyFilterActive()
                || this._runDurationFilter !== null
-               || this._lhcPeriodsFilter !== null
                || this.environmentIdsFilter !== ''
                || this.runQualitiesFilters.length !== 0
                || this._triggerValuesFilters.size !== 0
@@ -503,24 +501,6 @@ export class RunsOverviewModel extends OverviewPageModel {
         this._applyFilters();
     }
 
-    /**
-     * Gets the lhc period filter value
-     * @return {string} lhc period filter value
-     */
-    get lhcPeriodsFilter() {
-        return this._lhcPeriodsFilter;
-    }
-
-    /**
-     * Sets the lhc period filter value
-     * @param {string} value The lhc period value to filter on
-     * @return {undefined}
-     */
-    set lhcPeriodsFilter(value) {
-        this._lhcPeriodsFilter = value;
-        this._applyFilters();
-    }
-
     /**
      * Return all the runs currently filtered, without paging
      *
@@ -561,9 +541,6 @@ export class RunsOverviewModel extends OverviewPageModel {
                 // Convert filter to milliseconds
                 'filter[runDuration][limit]': this._runDurationFilter.limit * 60 * 1000,
             },
-            ...this._lhcPeriodsFilter && {
-                'filter[lhcPeriods]': this._lhcPeriodsFilter,
-            },
             ...this.environmentIdsFilter && {
                 'filter[environmentIds]': this.environmentIdsFilter,
             },