[O2B-1556] Configure filtering model observability to set active filters to the url

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);
     }
 

lib/public/views/LhcFills/LhcFills.js

@@ -29,7 +29,7 @@ export default class LhcFills extends Observable {
         this.model = model;
 
         // Sub-models
-        this._overviewModel = new LhcFillsOverviewModel(true);
+        this._overviewModel = new LhcFillsOverviewModel(model.router, true, 'lhc-fill-overview');
         this._overviewModel.bubbleTo(this);
 
         this._detailsModel = new LhcFillDetailsModel();

lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js

@@ -30,22 +30,28 @@ export class LhcFillsOverviewModel extends OverviewPageModel {
     /**
      * Constructor
      *
+     * @param {QueryRouter} router router that controls the application's page navigation
      * @param {boolean} [stableBeamsOnly=false] if true, overview will load stable beam only
+     * @param {string} pageIdentifier string that indicates what page this model represents
      */
-    constructor(stableBeamsOnly = false) {
+    constructor(router, stableBeamsOnly = false, pageIdentifier) {
         super();
 
-        this._filteringModel = new FilteringModel({
-            fillNumbers: new RawTextFilterModel(),
-            beamDuration: new TextComparisonFilterModel(),
-            runDuration: new TextComparisonFilterModel(),
-            hasStableBeams: new ToggleFilterModel(stableBeamsOnly),
-            stableBeamsStart: new TimeRangeFilterModel(),
-            stableBeamsEnd: new TimeRangeFilterModel(),
-            beamTypes: new BeamTypeFilterModel(),
-            schemeName: new RawTextFilterModel(),
-        });
+        this._filteringModel = new FilteringModel(
+            router,
+            {
+                fillNumbers: new RawTextFilterModel(),
+                beamDuration: new TextComparisonFilterModel(),
+                runDuration: new TextComparisonFilterModel(),
+                hasStableBeams: new ToggleFilterModel(stableBeamsOnly),
+                stableBeamsStart: new TimeRangeFilterModel(),
+                stableBeamsEnd: new TimeRangeFilterModel(),
+                beamTypes: new BeamTypeFilterModel(),
+                schemeName: new RawTextFilterModel(),
+            },
+        );
 
+        this._filteringModel.pageIdentifier = pageIdentifier;
         this._filteringModel.observe(() => this._applyFilters());
         this._filteringModel.visualChange$.bubbleTo(this);
 
@@ -85,10 +91,11 @@ export class LhcFillsOverviewModel 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();