AliceO2Group · NarrowsProjects · Apr 24, 2026 · Apr 25, 2026 · Apr 25, 2026 · Apr 27, 2026
@@ -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}
+     */
+    setFilterFromURL() {
+        const { params: { page = '', filter } } = this._router;
+
+        if (this._pageIdentifier !== page) {
+            return;
+        }
+
+        if (filter) {
+            for (const [key, value] of Object.entries(filter)) {
+                if (key in this._filters) {
+                    this._filters[key].normalized = value;
+                }
+            }
+        } else {
+            this.reset();
+        }
+
+        this.notify();
+    }
+
     /**
      * Add new filter
      *

@@ -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)',
                         )),
                 ],

@@ -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;

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

@@ -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 });
     }
 
     /**

@@ -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);
     }
 
     /**

@@ -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();

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

@@ -73,6 +73,9 @@ export class RunsWithQcModel extends RunsOverviewModel {
     constructor(model, pageIdentifier) {
         super(model, pageIdentifier);
 
+        this._detectorsNotBadFractionRegistered = false;
+        this._detectorsForQcFlagRegistered = 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 +148,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 +172,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 +181,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 +194,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();

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

@@ -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;

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

@@ -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;

@@ -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();

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

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