[O2B-1549] Migrate anchored simulation passes overview model and simulation passes per lhc period overview model to use filtering model pattern (#2104)

Notable changes for developers:

The AnchoredSimulationPasses and SimulationPassesPerLhcPeriod overview models now store their filter in a FilteringModel instance.
The names filter must now be accessed through the FilteringModel.get function

Author: NarrowsProjects

lib/public/views/SimulationPasses/ActiveColumns/simulationPassesActiveColumns.js

@@ -31,8 +31,8 @@ export const simulationPassesActiveColumns = {
         name: 'Name',
         visible: true,
         sortable: true,
-        filter: ({ namesFilterModel }) => textFilter(
-            namesFilterModel,
+        filter: ({ filteringModel }) => textFilter(
+            filteringModel.get('names'),
             { class: 'w-75 mt1', placeholder: 'e.g. LHC23k5, ...' },
         ),
         classes: 'w-10 f6',

lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewModel.js

@@ -15,6 +15,7 @@ import { TextTokensFilterModel } from '../../../components/Filters/common/filter
 import { OverviewPageModel } from '../../../models/OverviewModel.js';
 import { getRemoteData } from '../../../utilities/fetch/getRemoteData.js';
 import { ObservableData } from '../../../utilities/ObservableData.js';
+import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
 
 /**
  * Simulation Passes Per Data Pass overview model
@@ -25,8 +26,15 @@ export class AnchoredSimulationPassesOverviewModel extends OverviewPageModel {
      */
     constructor() {
         super();
-        this._namesFilterModel = new TextTokensFilterModel();
-        this._registerFilter(this._namesFilterModel);
+
+        this._filteringModel = new FilteringModel({ names: new TextTokensFilterModel() });
+
+        this._filteringModel.observe(() => {
+            this._pagination.silentlySetCurrentPage(1);
+            this.load();
+        });
+
+        this._filteringModel.visualChange$.bubbleTo(this);
 
         this._dataPass = new ObservableData(RemoteData.notAsked());
     }
@@ -57,14 +65,8 @@ export class AnchoredSimulationPassesOverviewModel extends OverviewPageModel {
      * @inheritdoc
      */
     getRootEndpoint() {
-        const params = {
-            filter: {
-                names: this._namesFilterModel.normalized,
-                dataPassIds: [this._dataPassId],
-            },
-        };
-
-        return buildUrl('/api/simulationPasses', params);
+        const filter = { ...this._filteringModel.normalized, dataPassIds: [this._dataPassId] };
+        return buildUrl('/api/simulationPasses', { filter });
     }
 
     /**
@@ -73,10 +75,19 @@ export class AnchoredSimulationPassesOverviewModel extends OverviewPageModel {
      * @returns {void}
      */
     reset() {
-        this._namesFilterModel.reset();
+        this._filteringModel.reset();
         super.reset();
     }
 
+    /**
+     * Return the model managing all filters
+     *
+     * @return {FilteringModel} the filtering model
+     */
+    get filteringModel() {
+        return this._filteringModel;
+    }
+
     /**
      * Set id of current data pass which simulation passes are fetched
      * @param {number} dataPassId data pass id
@@ -92,33 +103,11 @@ export class AnchoredSimulationPassesOverviewModel extends OverviewPageModel {
         return this._dataPass.getCurrent();
     }
 
-    /**
-     * Returns data passes names filter model
-     * @return {TextTokensFilterModel} data passes names filter model
-     */
-    get namesFilterModel() {
-        return this._namesFilterModel;
-    }
-
-    /**
-     * Register a new filter model
-     * @param {FilterModel} filterModel the filter model to register
-     * @return {void}
-     * @private
-     */
-    _registerFilter(filterModel) {
-        filterModel.visualChange$.bubbleTo(this);
-        filterModel.observe(() => {
-            this._pagination.silentlySetCurrentPage(1);
-            this.load();
-        });
-    }
-
     /**
      * States whether any filter is active
      * @return {boolean} true if any filter is active
      */
     isAnyFilterActive() {
-        return !this._namesFilterModel.isEmpty;
+        return this._filteringModel.isAnyFilterActive();
     }
 }

lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewModel.js

@@ -15,6 +15,7 @@ import { OverviewPageModel } from '../../../models/OverviewModel.js';
 import { buildUrl, RemoteData } from '/js/src/index.js';
 import { ObservableData } from '../../../utilities/ObservableData.js';
 import { getRemoteData } from '../../../utilities/fetch/getRemoteData.js';
+import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
 
 /**
  * Simulation Passes Per LHC Period overview model
@@ -26,8 +27,12 @@ export class SimulationPassesPerLhcPeriodOverviewModel extends OverviewPageModel
     constructor() {
         super();
 
-        this._namesFilterModel = new TextTokensFilterModel();
-        this._registerFilter(this._namesFilterModel);
+        this._filteringModel = new FilteringModel({ names: new TextTokensFilterModel() });
+        this._filteringModel.visualChange$.bubbleTo(this);
+        this._filteringModel.observe(() => {
+            this._pagination.silentlySetCurrentPage(1);
+            this.load();
+        });
 
         this._lhcPeriod = new ObservableData(RemoteData.notAsked());
         this._lhcPeriod.bubbleTo(this);
@@ -49,6 +54,15 @@ export class SimulationPassesPerLhcPeriodOverviewModel extends OverviewPageModel
         }
     }
 
+    /**
+     * Return the model managing all filters
+     *
+     * @return {FilteringModel} the filtering model
+     */
+    get filteringModel() {
+        return this._filteringModel;
+    }
+
     /**
      * @inheritdoc
      */
@@ -61,14 +75,8 @@ export class SimulationPassesPerLhcPeriodOverviewModel extends OverviewPageModel
      * @inheritdoc
      */
     getRootEndpoint() {
-        const params = {
-            filter: {
-                names: this._namesFilterModel.normalized,
-                lhcPeriodIds: [this._lhcPeriodId],
-            },
-        };
-
-        return buildUrl('/api/simulationPasses', params);
+        const filter = { ...this._filteringModel.normalized, lhcPeriodIds: [this._lhcPeriodId] };
+        return buildUrl('/api/simulationPasses', { filter });
     }
 
     /**
@@ -77,7 +85,7 @@ export class SimulationPassesPerLhcPeriodOverviewModel extends OverviewPageModel
      * @returns {void}
      */
     reset() {
-        this._namesFilterModel.reset();
+        this._filteringModel.reset();
         super.reset();
     }
 
@@ -96,33 +104,11 @@ export class SimulationPassesPerLhcPeriodOverviewModel extends OverviewPageModel
         return this._lhcPeriod.getCurrent();
     }
 
-    /**
-     * Returns simulation passes names filter model
-     * @return {TextTokensFilterModel} simulation passes names filter model
-     */
-    get namesFilterModel() {
-        return this._namesFilterModel;
-    }
-
-    /**
-     * Register a new filter model
-     * @param {FilterModel} filterModel the filter model to register
-     * @return {void}
-     * @private
-     */
-    _registerFilter(filterModel) {
-        filterModel.visualChange$.bubbleTo(this);
-        filterModel.observe(() => {
-            this._pagination.silentlySetCurrentPage(1);
-            this.load();
-        });
-    }
-
     /**
      * States whether any filter is active
      * @return {boolean} true if any filter is active
      */
     isAnyFilterActive() {
-        return !this._namesFilterModel.isEmpty;
+        return this._filteringModel.isAnyFilterActive();
     }
 }