[O2B-1556] Configure filtering model observability to set active filters to the url (#2142)

Notable changes for users:
- When configuring a filter a string version will then appear in the URL

Notable changes for developers:
- FilteringModel now has a router argument for its constructor.
- All pages that use a filteringModel must explicitly set filteringModel.pageIdentifier. This identifier determines if this specific filteringModel instance should sync its active filters to the URL, and which page’s URL should be used to initialize the filter values for that filteringModel.
  - This is currently done by passing the identifier page identifier via the constructor
- All overview page reset() functions have gained a clearUrl boolean argument, that determines if running the reset function should also remove the filters from the url.

Author: NarrowsProjects

lib/public/Model.js

@@ -95,21 +95,27 @@ export default class Model extends Observable {
         this._appConfiguration$ = new Observable();
         this._inputDebounceTime = INPUT_DEBOUNCE_TIME;
 
+        // Setup router
+        this.router = new QueryRouter();
+        this.router.observe(this.handleLocationChange.bind(this));
+        this.router.bubbleTo(this);
+        registerFrontLinkListener((e) => this.router.handleLinkEvent(e));
+
         // Models
 
         this.home = new HomePageModel(this);
         this.home.bubbleTo(this);
 
-        this.lhcPeriods = new LhcPeriodsModel(this);
+        this.lhcPeriods = new LhcPeriodsModel(this.router);
         this.lhcPeriods.bubbleTo(this);
 
-        this.dataPasses = new DataPassesModel(this);
+        this.dataPasses = new DataPassesModel(this.router);
         this.dataPasses.bubbleTo(this);
 
         this.qcFlags = new QcFlagsModel(this);
         this.qcFlags.bubbleTo(this);
 
-        this.simulationPasses = new SimulationPassesModel(this);
+        this.simulationPasses = new SimulationPassesModel(this.router);
         this.simulationPasses.bubbleTo(this);
 
         this.qcFlagTypes = new QcFlagTypesModel(this);
@@ -178,12 +184,6 @@ export default class Model extends Observable {
         this.errorModel = new ErrorModel();
         this.errorModel.bubbleTo(this);
 
-        // Setup router
-        this.router = new QueryRouter();
-        this.router.observe(this.handleLocationChange.bind(this));
-        this.router.bubbleTo(this);
-        registerFrontLinkListener((e) => this.router.handleLinkEvent(e));
-
         // Init pages
         this.handleLocationChange();
         this.window.addEventListener('resize', debounce(() => this.notify(), 100));

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

@@ -14,7 +14,7 @@
 import { expandQueryLikeNestedKey } from '../../../utilities/expandNestedKey.js';
 import { SelectionModel } from '../../common/selection/SelectionModel.js';
 import { FilterModel } from './FilterModel.js';
-import { Observable } from '/js/src/index.js';
+import { buildUrl, Observable } from '/js/src/index.js';
 
 /**
  * Model representing a filtering system, including filter inputs visibility, filters values and so on
@@ -23,32 +23,52 @@ export class FilteringModel extends Observable {
     /**
      * Constructor
      *
+     * @param {QueryRouter} router router that controls the application's page navigation
      * @param {Object<string, FilterModel>} filters the filters with their label and model
      */
-    constructor(filters) {
+    constructor(router, filters) {
         super();
-
         this._visualChange$ = new Observable();
+        this._pageIdentifier = null;
 
+        this._router = router;
         this._filters = {};
         this._filterModels = [];
         Object.entries(filters).forEach(([key, model]) => this.put(key, model));
     }
 
+    /**
+     * Sets the page identifiers
+     *
+     * @param {string} identifier a string identifies a page from the router params.
+     * Used to prevent unneeded reads/writes from/to the url
+     * @returns {void}
+     */
+    set pageIdentifier(identifier) {
+        this._pageIdentifier = identifier;
+    }
+
     /**
      * Reset the filters
      *
      * @param {boolean} [notify=false] if true the model notifies its observers
+     * @param {boolean} [clearUrl=false] if true filters will be removed from the url
      * @return {void}
      */
-    reset(notify = false) {
+    reset(notify = false, clearUrl = false) {
         for (const model of this._filterModels) {
             model.reset();
         }
 
         if (notify) {
             this.notify();
         }
+
+        if (clearUrl) {
+            const { params } = this._router;
+            delete params.filter;
+            this._router.go(buildUrl('?', params), false, true);
+        }
     }
 
     /**
@@ -104,6 +124,22 @@ export class FilteringModel extends Observable {
         return this._filters[key];
     }
 
+    /**
+     * When the user updates the displayed Objects, the filters should be placed in the URL as well
+     * @returns {undefined}
+     */
+    setFilterToURL() {
+        const { params } = this._router;
+        const newParams = { ...params };
+        newParams.filter = this.normalized;
+
+        if (this._pageIdentifier === params.page) {
+            this._router.go(buildUrl('?', newParams), false, true);
+        }
+
+        this.notify();
+    }
+
     /**
      * Add new filter
      *
@@ -123,7 +159,7 @@ export class FilteringModel extends Observable {
 
         this._filters[key] = filter;
         this._filterModels.push(filter);
-        filter.bubbleTo(this);
+        filter.observe(() => this.setFilterToURL());
         filter.visualChange$?.bubbleTo(this._visualChange$);
     }
 }

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

@@ -48,8 +48,8 @@ const filtersToggleContentHeader = (filteringModel) => h('.flex-row.justify-betw
         'button#reset-filters.btn.btn-danger',
         {
             onclick: () => filteringModel.resetFiltering
-                ? filteringModel.resetFiltering()
-                : filteringModel.reset(true),
+                ? filteringModel.resetFiltering(true, true)
+                : filteringModel.reset(true, true),
             disabled: !filteringModel.isAnyFilterActive(),
         },
         'Reset all filters',

lib/public/views/DataPasses/DataPassesModel.js

@@ -21,14 +21,15 @@ import { DataPassesPerSimulationPassOverviewModel } from './PerSimulationPassOve
 export class DataPassesModel extends Observable {
     /**
      * The constructor of the model
+     * @param {QueryRouter} router router that controls the application's page navigation
      */
-    constructor() {
+    constructor(router) {
         super();
 
-        this._perLhcPeriodOverviewModel = new DataPassesPerLhcPeriodOverviewModel();
+        this._perLhcPeriodOverviewModel = new DataPassesPerLhcPeriodOverviewModel(router, 'data-passes-per-lhc-period-overview');
         this._perLhcPeriodOverviewModel.bubbleTo(this);
 
-        this._perSimulationPassOverviewModel = new DataPassesPerSimulationPassOverviewModel();
+        this._perSimulationPassOverviewModel = new DataPassesPerSimulationPassOverviewModel(router, 'data-passes-per-simulation-pass-overview');
         this._perSimulationPassOverviewModel.bubbleTo(this);
     }
 

lib/public/views/DataPasses/DataPassesOverviewModel.js

@@ -22,16 +22,22 @@ import { OverviewPageModel } from '../../models/OverviewModel.js';
 export class DataPassesOverviewModel extends OverviewPageModel {
     /**
      * Constructor
+     * @param {QueryRouter} router router that controls the application's page navigation
+     * @param {string} pageIdentifier string that indicates what page this model represents
      */
-    constructor() {
+    constructor(router, pageIdentifier) {
         super();
-        this._filteringModel = new FilteringModel({
-            names: new TextTokensFilterModel(),
-            'include[byName]': new SelectionFilterModel({
-                availableOptions: NON_PHYSICS_PRODUCTIONS_NAMES_WORDS.map((word) => ({ label: word.toUpperCase(), value: word })),
-            }),
-        });
+        this._filteringModel = new FilteringModel(
+            router,
+            {
+                names: new TextTokensFilterModel(),
+                'include[byName]': new SelectionFilterModel({
+                    availableOptions: NON_PHYSICS_PRODUCTIONS_NAMES_WORDS.map((word) => ({ label: word.toUpperCase(), value: word })),
+                }),
+            },
+        );
 
+        this._filteringModel.pageIdentifier = pageIdentifier;
         this._filteringModel.visualChange$.bubbleTo(this);
         this._filteringModel.observe(() => {
             this._pagination.currentPage = 1;
@@ -51,10 +57,12 @@ export class DataPassesOverviewModel extends OverviewPageModel {
     /**
      * Reset this model to its default
      *
-     * @returns {void}
+     * @param {boolean} _fetch Whether to refetch all data after filters have been reset
+     * @param {boolean} [clearUrl=false] if true filters will be removed from the url
+     * @return {void}
      */
-    reset() {
-        this._filteringModel.reset();
+    reset(_fetch = true, clearUrl = false) {
+        this._filteringModel.reset(false, clearUrl);
         super.reset();
     }
 

lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewModel.js

@@ -19,9 +19,11 @@ import { buildUrl } from '/js/src/index.js';
 export class DataPassesPerLhcPeriodOverviewModel extends DataPassesOverviewModel {
     /**
      * Constructor
+     * @param {QueryRouter} router router that controls the application's page navigation
+     * @param {string} pageIdentifier string that indicates what page this model represents
      */
-    constructor() {
-        super();
+    constructor(router, pageIdentifier) {
+        super(router, pageIdentifier);
         this._lhcPeriodId = null;
     }
 

lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewModel.js

@@ -21,9 +21,11 @@ import { DataPassesOverviewModel } from '../DataPassesOverviewModel.js';
 export class DataPassesPerSimulationPassOverviewModel extends DataPassesOverviewModel {
     /**
      * Constructor
+     * @param {QueryRouter} router router that controls the application's page navigation
+     * @param {string} pageIdentifier string that indicates what page this model represents
      */
-    constructor() {
-        super();
+    constructor(router, pageIdentifier) {
+        super(router, pageIdentifier);
         this._simulationPass = new ObservableData(RemoteData.notAsked());
         this._simulationPass.bubbleTo(this);
     }

lib/public/views/Environments/EnvironmentModel.js

@@ -29,7 +29,7 @@ export class EnvironmentModel extends Observable {
         super();
 
         // Sub-models
-        this._overviewModel = new EnvironmentOverviewModel(model);
+        this._overviewModel = new EnvironmentOverviewModel(model, 'env-overview');
         this._overviewModel.bubbleTo(this);
 
         this._detailsModel = new EnvironmentDetailsModel();

lib/public/views/Environments/Overview/EnvironmentOverviewModel.js

@@ -28,24 +28,29 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
     /**
      * Constructor
      * @param {Model} model global model
+     * @param {string} pageIdentifier string that indicates what page this model represents
      */
-    constructor(model) {
+    constructor(model, pageIdentifier) {
         super();
 
-        this._filteringModel = new FilteringModel({
-            created: new TimeRangeInputModel(),
-            runNumbers: new RawTextFilterModel(),
-            statusHistory: new RawTextFilterModel(),
-            currentStatus: new SelectionFilterModel({
-                availableOptions: Object.keys(StatusAcronym).map((status) => ({
-                    value: status,
-                    label: coloredEnvironmentStatusComponent(status),
-                    rawLabel: status,
-                })),
-            }),
-            ids: new RawTextFilterModel(),
-        });
+        this._filteringModel = new FilteringModel(
+            model.router,
+            {
+                created: new TimeRangeInputModel(),
+                runNumbers: new RawTextFilterModel(),
+                statusHistory: new RawTextFilterModel(),
+                currentStatus: new SelectionFilterModel({
+                    availableOptions: Object.keys(StatusAcronym).map((status) => ({
+                        value: status,
+                        label: coloredEnvironmentStatusComponent(status),
+                        rawLabel: status,
+                    })),
+                }),
+                ids: new RawTextFilterModel(),
+            },
+        );
 
+        this._filteringModel.pageIdentifier = pageIdentifier;
         this._filteringModel.observe(() => this._applyFilters(true));
         this._filteringModel.visualChange$?.bubbleTo(this);
 
@@ -87,10 +92,11 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
     /**
      * Reset all filtering models
      * @param {boolean} fetch Whether to refetch all data after filters have been reset
+     * @param {boolean} [clearUrl=false] if true filters will be removed from the url
      * @return {void}
      */
-    resetFiltering(fetch = true) {
-        this._filteringModel.reset();
+    resetFiltering(fetch = true, clearUrl = false) {
+        this._filteringModel.reset(false, clearUrl);
 
         if (fetch) {
             this._applyFilters(true);

lib/public/views/Home/Overview/HomePageModel.js

@@ -26,13 +26,13 @@ export class HomePageModel extends Observable {
      */
     constructor(model) {
         super();
-        this._runsOverviewModel = new RunsOverviewModel(model);
+        this._runsOverviewModel = new RunsOverviewModel(model, 'home');
         this._runsOverviewModel.bubbleTo(this);
 
-        this._logsOverviewModel = new LogsOverviewModel(model, true);
+        this._logsOverviewModel = new LogsOverviewModel(model, true, 'home');
         this._logsOverviewModel.bubbleTo(this);
 
-        this._lhcFillsOverviewModel = new LhcFillsOverviewModel(true);
+        this._lhcFillsOverviewModel = new LhcFillsOverviewModel(model.router, true, 'home');
         this._lhcFillsOverviewModel.bubbleTo(this);
     }