[O2B-1558] Set filters from url upon page reload

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

@@ -140,6 +140,30 @@ export class FilteringModel extends Observable {
         this.notify();
     }
 
+    /**
+     * Look for parameters used for filtering in URL and apply them in the layout if it exists
+     * @returns {undefined}
+     */
+    async setFilterFromURL() {
+        const { params: { page = '', filter = {} } } = this._router;
+
+        if (!(this._pageIdentifier === page)) {
+            return;
+        }
+
+        for (const [key, value] of Object.entries(filter)) {
+            const filterModel = this._filters[key];
+
+            if (!filterModel) {
+                continue;
+            }
+
+            filterModel.normalized = value;
+        }
+
+        this.notify();
+    }
+
     /**
      * Add new filter
      *

lib/public/components/runEorReasons/runEorReasonSelection.js

@@ -22,6 +22,7 @@ import { h } from '/js/src/index.js';
  */
 export const eorReasonFilterComponent = (eorReasonFilterModel, eorReasonTypes) => {
     const eorReasonsCategories = [...new Set(eorReasonTypes.map(({ category }) => category))];
+    const { category: currentCategory, title: currentTitle } = eorReasonFilterModel;
 
     return [
         h('.flex-row', [
@@ -36,7 +37,7 @@ export const eorReasonFilterComponent = (eorReasonFilterModel, eorReasonTypes) =
                     h('option', { selected: eorReasonFilterModel.category === '', value: '' }, '-'),
                     eorReasonsCategories.map((category, index) => h(
                         `option#eorCategory${index}`,
-                        { key: category, value: category },
+                        { key: category, value: category, selected: category === currentCategory },
                         category,
                     )),
                 ],
@@ -54,7 +55,7 @@ export const eorReasonFilterComponent = (eorReasonFilterModel, eorReasonTypes) =
                         .filter((reason) => reason.category === eorReasonFilterModel.category)
                         .map(({ title }, index) => h(
                             `option#eorTitle${index}`,
-                            { key: title, value: title },
+                            { key: title, value: title, selected: title === currentTitle },
                             title || '(empty)',
                         )),
                 ],

lib/public/views/DataPasses/ActiveColumns/dataPassesActiveColumns.js

@@ -20,7 +20,7 @@ import { h } from '/js/src/index.js';
 import { formatDataPassName } from '../format/formatDataPassName.js';
 import { formatDataPassStatusHistory } from '../format/formatStatusHistory.js';
 import { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js';
-import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
+import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
 
 /**
  * List of active columns for a generic data passes table
@@ -35,7 +35,7 @@ export const dataPassesActiveColumns = {
         visible: true,
         sortable: true,
         format: (_, dataPass) => formatDataPassName(dataPass),
-        filter: (filteringModel) => textInputFilter(filteringModel, 'names', 'e.g. LHC22a_apass1, ...', 'w-75'),
+        filter: (filteringModel) => textFilter(filteringModel.get('names'), { class: 'w-75 mt1', placeholder: 'e.g. LHC22a, lhc23b, ...' }),
         balloon: true,
         classes: 'w-20',
     },

lib/public/views/DataPasses/DataPassesOverviewModel.js

@@ -38,6 +38,7 @@ export class DataPassesOverviewModel extends OverviewPageModel {
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;
+        this._filteringModel.setFilterFromURL();
         this._filteringModel.visualChange$.bubbleTo(this);
         this._filteringModel.observe(() => {
             this._pagination.currentPage = 1;

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

@@ -51,10 +51,10 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;
+        this._filteringModel.setFilterFromURL();
         this._filteringModel.observe(() => this._applyFilters(true));
         this._filteringModel.visualChange$?.bubbleTo(this);
 
-        this.reset(false);
         const updateDebounceTime = () => {
             this._debouncedLoad = debounce(this.load.bind(this), model.inputDebounceTime);
         };
@@ -92,7 +92,7 @@ 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
+     * @param {boolean} resetUrl Whether to remove all the active filters from the urls
      * @return {void}
      */
     resetFiltering(fetch = true, clearUrl = false) {

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

@@ -52,10 +52,9 @@ export class LhcFillsOverviewModel extends OverviewPageModel {
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;
+        this._filteringModel.setFilterFromURL();
         this._filteringModel.observe(() => this._applyFilters());
         this._filteringModel.visualChange$.bubbleTo(this);
-
-        this.reset(false);
     }
 
     /**
@@ -72,10 +71,7 @@ export class LhcFillsOverviewModel extends OverviewPageModel {
      * @inheritDoc
      */
     getRootEndpoint() {
-        const params = {
-            filter: this.filteringModel.normalized,
-        };
-        return buildUrl('/api/lhcFills', params);
+        return buildUrl('/api/lhcFills', { filter: this.filteringModel.normalized });
     }
 
     /**

lib/public/views/Logs/Overview/LogsOverviewModel.js

@@ -53,30 +53,30 @@ export class LogsOverviewModel extends Observable {
             },
         );
 
-        this._filteringModel.pageIdentifier = pageIdentifier;
+        this._overviewSortModel = new SortModel();
+        this._pagination = new PaginationModel();
+        const updateDebounceTime = () => {
+            this._debouncedFetchAllLogs = debounce(this.fetchLogs.bind(this), model.inputDebounceTime);
+        };
+
+        updateDebounceTime();
+        model.appConfiguration$.observe(() => updateDebounceTime());
+
+        // Filters
+        this.filteringModel.pageIdentifier = pageIdentifier;
+        excludeAnonymous && this._filteringModel.get('author').update('!Anonymous');
+        this._filteringModel.setFilterFromURL();
         this._filteringModel.observe(() => this._applyFilters());
         this._filteringModel.visualChange$.bubbleTo(this);
 
         // Sub-models
-        this._overviewSortModel = new SortModel();
         this._overviewSortModel.observe(() => this._applyFilters(true));
         this._overviewSortModel.visualChange$.bubbleTo(this);
 
-        this._pagination = new PaginationModel();
         this._pagination.observe(() => this.fetchLogs());
         this._pagination.itemsPerPageSelector$.observe(() => this.notify());
 
         this._logs = RemoteData.NotAsked();
-
-        const updateDebounceTime = () => {
-            this._debouncedFetchAllLogs = debounce(this.fetchLogs.bind(this), model.inputDebounceTime);
-        };
-        model.appConfiguration$.observe(() => updateDebounceTime());
-        updateDebounceTime();
-
-        excludeAnonymous && this._filteringModel.get('author').update('!Anonymous');
-
-        this.reset(false);
     }
 
     /**

lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js

@@ -39,6 +39,7 @@ export class QcFlagTypesOverviewModel extends OverviewPageModel {
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;
+        this._filteringModel.setFilterFromURL();
         this._filteringModel.observe(() => {
             this._pagination.silentlySetCurrentPage(1);
             this.load();

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

@@ -106,7 +106,6 @@ export class RunsOverviewModel extends OverviewPageModel {
         this._filteringModel.observe(() => this._applyFilters(true));
         this._filteringModel.visualChange$.bubbleTo(this);
 
-        this.reset(false);
         const updateDebounceTime = () => {
             this._debouncedLoad = debounce(this.load.bind(this), model.inputDebounceTime);
         };

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

@@ -73,6 +73,10 @@ export class RunsWithQcModel extends RunsOverviewModel {
     constructor(model, pageIdentifier) {
         super(model, pageIdentifier);
 
+        this._detectorsNotBadFractionRegistered = false;
+        this._detectorsForQcFlagRegistered = false;
+        this._qcSummaryObservableRegistered = false;
+
         this._observablesQcFlagsSummaryDependsOn$ = null;
         // This filter instance will be added as a sub-filter for a MultiCompositionFilter and a GaqFilter later.
         this._mcReproducibleAsNotBad = new ToggleFilterModel();
@@ -145,9 +149,17 @@ export class RunsWithQcModel extends RunsOverviewModel {
                 Success: (detectors) => detectors.forEach(({ id }) =>
                     detectorsQcNotBadFraction.putFilter(`_${id}`, new NumericalComparisonFilterModel({ scale: 0.01, integer: false }))),
             });
+
+            if (current?.isSuccess() && !this._detectorsNotBadFractionRegistered) {
+                this.filteringModel.setFilterFromURL();
+                this._detectorsNotBadFractionRegistered = true;
+            }
         };
-        detectors$.observe(callback);
-        callback(detectors$);
+
+        if (!this._detectorsNotBadFractionRegistered) {
+            detectors$.observe(callback.bind(this));
+            callback(detectors$);
+        }
     }
 
     /**
@@ -161,6 +173,7 @@ export class RunsWithQcModel extends RunsOverviewModel {
             const current = observableData.getCurrent();
             current?.apply({
                 Success: (detectors) => {
+                    this._detectorsForQcFlagRegistered = true;
                     this._exportModel.setDataExportConfiguration({
                         ...baseDataExportConfiguration,
                         ...qcFlagsExportConfigurationFactory(detectors),
@@ -169,9 +182,11 @@ export class RunsWithQcModel extends RunsOverviewModel {
                 Other: () => null,
             });
         };
-        detectors$.observe(callback);
-        // Also trigger immediately if detectors are already loaded
-        callback(detectors$);
+
+        if (!this._detectorsForQcFlagRegistered) {
+            detectors$.observe(callback.bind(this));
+            callback(detectors$);
+        }
     }
 
     /**
@@ -180,6 +195,10 @@ export class RunsWithQcModel extends RunsOverviewModel {
      * @param {ObservableData<RemoteData<Detector>>} detectors$ observable data which QC flags fetching operation success depends on
      */
     registerObservablesQcSummaryDependsOn(detectors$) {
+        if (detectors$ === this._observablesQcFlagsSummaryDependsOn$) {
+            return;
+        }
+
         this._observablesQcFlagsSummaryDependsOn$ = detectors$;
         const callback = (observableData) => {
             const current = observableData.getCurrent();

lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js

@@ -52,6 +52,9 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
                 }))
             .build();
 
+        this._filteringModel.put('gaq', new GaqFilterModel(this._mcReproducibleAsNotBad));
+        this._filteringModel.setFilterFromURL();
+
         this._detectors$.bubbleTo(this);
 
         this._markAsSkimmableRequestResult$ = new ObservableData(RemoteData.notAsked());
@@ -66,8 +69,6 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
         this._skimmableRuns$ = new ObservableData(RemoteData.notAsked());
         this._skimmableRuns$.bubbleTo(this);
 
-        this._filteringModel.put('gaq', new GaqFilterModel(this._mcReproducibleAsNotBad));
-
         this._freezeOrUnfreezeActionState$ = new ObservableData(RemoteData.notAsked());
         this._freezeOrUnfreezeActionState$.bubbleTo(this);
 
@@ -149,8 +150,8 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
     /**
      * @inheritdoc
      */
-    resetFiltering(fetch = true, clearUrl = false) {
-        super.resetFiltering(fetch, clearUrl);
+    resetFiltering(fetch = true, resetUrl = false) {
+        super.resetFiltering(fetch, resetUrl);
     }
 
     /**
@@ -272,7 +273,7 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
      * @param {number} dataPassId id of Data Pass
      */
     set dataPassId(dataPassId) {
-        if (dataPassId !== this._dataPassId) {
+        if (this._dataPassId && dataPassId !== this._dataPassId) {
             this.reset(false);
         }
         this._dataPassId = dataPassId;

lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js

@@ -56,6 +56,7 @@ export class RunsPerLhcPeriodOverviewModel extends FixedPdpBeamTypeRunsOverviewM
 
         this._tabbedPanelModel = new RunsPerLhcPeriodTabbedPanelModel(this._qcSummary$);
         this._tabbedPanelModel.bubbleTo(this);
+        this._filteringModel.setFilterFromURL();
     }
 
     /**
@@ -96,13 +97,8 @@ export class RunsPerLhcPeriodOverviewModel extends FixedPdpBeamTypeRunsOverviewM
      * @inheritdoc
      */
     getRootEndpoint() {
-        return buildUrl(super.getRootEndpoint(), {
-            filter: {
-                lhcPeriodIds: [this._lhcPeriodId],
-                runQualities: 'good',
-                definitions: 'PHYSICS',
-            },
-        });
+        const filter = { lhcPeriodIds: [this._lhcPeriodId], runQualities: 'good', definitions: 'PHYSICS' };
+        return buildUrl(super.getRootEndpoint(), { filter });
     }
 
     /**
@@ -152,7 +148,7 @@ export class RunsPerLhcPeriodOverviewModel extends FixedPdpBeamTypeRunsOverviewM
      * @param {string} lhcPeriodId id of a LHC period
      */
     set lhcPeriodId(lhcPeriodId) {
-        if (lhcPeriodId !== this._lhcPeriodId) {
+        if (this._lhcPeriodId && lhcPeriodId !== this._lhcPeriodId) {
             this.reset(false);
         }
         this._lhcPeriodId = lhcPeriodId;

lib/public/views/Runs/RunsModel.js

@@ -49,6 +49,12 @@ export class RunsModel extends Observable {
     loadOverview() {
         if (! this._overviewModel.pagination.isInfiniteScrollEnabled) {
             this._overviewModel.load();
+
+            /**
+             * This is done outside the constructor because the child classes need to set their filters after their filters are ready setting up.
+             * Putting it in the constructor would cause duplicate api calls
+             */
+            this._overviewModel.filteringModel.setFilterFromURL();
         }
     }
 

lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js

@@ -34,6 +34,7 @@ export class RunsPerSimulationPassOverviewModel extends FixedPdpBeamTypeRunsOver
 
         this._detectors$.bubbleTo(this);
         this._simulationPass$.bubbleTo(this);
+        this._filteringModel.setFilterFromURL();
     }
 
     /**
@@ -75,21 +76,16 @@ export class RunsPerSimulationPassOverviewModel extends FixedPdpBeamTypeRunsOver
      * @inheritdoc
      */
     getRootEndpoint() {
-        const params = {
-            filter: {
-                simulationPassIds: [this._simulationPassId],
-            },
-        };
-
-        return buildUrl(super.getRootEndpoint(), params);
+        const filter = { simulationPassIds: [this._simulationPassId] };
+        return buildUrl(super.getRootEndpoint(), { filter });
     }
 
     /**
      * Set id of current simulation pass which runs are fetched
      * @param {number} simulationPassId simulation pass id
      */
     set simulationPassId(simulationPassId) {
-        if (simulationPassId !== this._simulationPassId) {
+        if (this._simulationPassId && simulationPassId !== this._simulationPassId) {
             this.reset(false);
         }
         this._simulationPassId = simulationPassId;

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

@@ -32,6 +32,7 @@ export class AnchoredSimulationPassesOverviewModel extends OverviewPageModel {
         this._filteringModel = new FilteringModel(router, { names: new TextTokensFilterModel() });
 
         this._filteringModel.pageIdentifier = pageIdentifier;
+        this._filteringModel.setFilterFromURL();
         this._filteringModel.observe(() => {
             this._pagination.silentlySetCurrentPage(1);
             this.load();

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

@@ -32,6 +32,7 @@ export class SimulationPassesPerLhcPeriodOverviewModel extends OverviewPageModel
         this._filteringModel = new FilteringModel(router, { names: new TextTokensFilterModel() });
 
         this._filteringModel.pageIdentifier = pageIdentifier;
+        this._filteringModel.setFilterFromURL();
         this._filteringModel.visualChange$.bubbleTo(this);
         this._filteringModel.observe(() => {
             this._pagination.silentlySetCurrentPage(1);

lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js

@@ -40,6 +40,7 @@ export class LhcPeriodsOverviewModel extends OverviewPageModel {
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;
+        this._filteringModel.setFilterFromURL();
         this._filteringModel.visualChange$.bubbleTo(this);
         this._filteringModel.observe(() => {
             this._pagination.silentlySetCurrentPage(1);