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

lib/public/components/Filters/RunsFilter/MultiCompositionFilterModel.js

@@ -75,6 +75,13 @@ export class MultiCompositionFilterModel extends FilterModel {
         return Object.values(this._filters).every((filter) => filter.isEmpty);
     }
 
+    /**
+     * @inheritDoc
+     */
+    get isInactive() {
+        return Object.values(this._filters).every((filter) => filter.isInactive);
+    }
+
     /**
      * @inheritDoc
      */

lib/public/components/Filters/RunsFilter/RunDefinitionFilterModel.js

@@ -31,7 +31,6 @@ export class RunDefinitionFilterModel extends SelectionModel {
         if (!this.isPhysicsOnly()) {
             this.selectedOptions = [];
             this.select(RunDefinition.Physics);
-            this.notify();
         }
     }
 

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

@@ -77,6 +77,15 @@ export class FilterModel extends Observable {
         return this._visualChange$;
     }
 
+    /**
+     * States if the filter is active. By default this is equivalent to isEmpty
+     *
+     * @return {boolean} true if the filter is active
+     */
+    get isInactive() {
+        return this.isEmpty;
+    }
+
     /**
      * Utility function to register a filter model as sub-filter model
      *

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

@@ -66,7 +66,7 @@ export class FilteringModel extends Observable {
 
         if (clearUrl) {
             const { params } = this._router;
-            delete params.filter;
+            params.filter = this.normalized;
             this._router.go(buildUrl('?', params), false, true);
         }
     }
@@ -93,12 +93,7 @@ export class FilteringModel extends Observable {
      * @return {boolean} true if at least one filter is active
      */
     isAnyFilterActive() {
-        for (const model of this._filterModels) {
-            if (!model.isEmpty) {
-                return true;
-            }
-        }
-        return false;
+        return !this._filterModels.every((model) => model.isInactive);
     }
 
     /**
@@ -140,6 +135,32 @@ export class FilteringModel extends Observable {
         this.notify();
     }
 
+    /**
+     * Look for parameters used for filtering in URL and apply them in the layout if it exists
+     *
+     * @param {boolean} notify if observers should be notified after setting the filters
+     * @returns {undefined}
+     */
+    setFilterFromURL(notify = false) {
+        const { params: { page = '', filter } } = this._router;
+
+        if (this._pageIdentifier === page) {
+            if (filter) {
+                for (const [key, value] of Object.entries(filter)) {
+                    if (key in this._filters) {
+                        this._filters[key].normalized = value;
+                    }
+                }
+            } else {
+                this.reset();
+            }
+        }
+
+        if (notify) {
+            this.notify();
+        }
+    }
+
     /**
      * Add new filter
      *

lib/public/components/Filters/common/filters/ToggleFilterModel.js

@@ -19,17 +19,17 @@ export class ToggleFilterModel extends SelectionModel {
     /**
      * Constructor
      * @param {boolean} toggledByDefault If the filter should be toggled by default
-     * @param {boolean} untoggledIsEmpty if true, will treat the untoggled state (false) as empty.
+     * @param {boolean} defaultIsInactive if true, will treat the untoggled state (false) as empty.
      */
-    constructor(toggledByDefault = false, untoggledIsEmpty = false) {
+    constructor(toggledByDefault = false, defaultIsInactive = false) {
         super({
             availableOptions: [{ value: true }, { value: false }],
             defaultSelection: [{ value: toggledByDefault }],
             multiple: false,
             allowEmpty: false,
         });
 
-        this._untoggledIsEmpty = untoggledIsEmpty;
+        this._defaultIsInactive = defaultIsInactive;
     }
 
     /**
@@ -51,15 +51,22 @@ export class ToggleFilterModel extends SelectionModel {
     }
 
     /**
-     * Determines whether the current value should be considered empty.
-     * When this._untoggledIsEmpty is set to 'true', then untoggled states (false) will be treated as an empty filter
+     * Toggles are always filled, as 'false' / untoggled is also considered a value
      *
-     * @return {boolean} `true` if the current value is considered empty,
-     * otherwise `false`.
+     * @return {boolean} `false`
      */
     get isEmpty() {
-        if (this._untoggledIsEmpty) {
-            return this.isToggled === false;
+        return false;
+    }
+
+    /**
+     * Returns if the toggle filter is considered 'inactive'
+     *
+     * @return {boolean}
+     */
+    get isInactive() {
+        if (this._defaultIsInactive) {
+            return this.hasOnlyDefaultSelection();
         }
 
         return false;

lib/public/components/common/selection/SelectionModel.js

@@ -113,6 +113,15 @@ export class SelectionModel extends Observable {
         return selected.length === defaultSelection.length && selected.every((item) => defaultSelection.includes(item));
     }
 
+    /**
+     * States if the filter is active. By default this is equivalent to isEmpty
+     *
+     * @return {boolean} true if the filter is active
+     */
+    get isInactive() {
+        return this.isEmpty;
+    }
+
     /**
      * Reset the selection to the default
      *
@@ -358,9 +367,19 @@ export class SelectionModel extends Observable {
      */
     set normalized(value) {
         const options = value.split(',').map((option) => ({ value: option.trim() }));
-        const postponeSelection = this.options instanceof RemoteData || !this.options?.length;
-
-        if (postponeSelection) {
+        const isRemoteData = this.options instanceof RemoteData;
+        const noOptions = !this.options?.length;
+
+        if (isRemoteData) {
+            this._availableOptions.match({
+                Success: (_) => {
+                    this.selectedOptions = options;
+                },
+                Other: () => {
+                    this._selectionBacklog = options;
+                },
+            });
+        } else if (noOptions) {
             this._selectionBacklog = options;
         } else {
             this.selectedOptions = options;

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/DataPassesModel.js

@@ -40,6 +40,7 @@ export class DataPassesModel extends Observable {
      * @returns {void}
      */
     loadPerLhcPeriodOverview({ lhcPeriodId }) {
+        this._perLhcPeriodOverviewModel.setFilterFromURL(false);
         this._perLhcPeriodOverviewModel.load({ lhcPeriodId });
     }
 
@@ -68,6 +69,7 @@ export class DataPassesModel extends Observable {
      */
     loadPerSimulationPassOverview({ simulationPassId }) {
         this._perSimulationPassOverviewModel.simulationPassId = parseInt(simulationPassId, 10);
+        this._perSimulationPassOverviewModel.setFilterFromURL(false);
         this._perSimulationPassOverviewModel.load();
     }
 

lib/public/views/DataPasses/DataPassesOverviewModel.js

@@ -54,6 +54,15 @@ export class DataPassesOverviewModel extends OverviewPageModel {
         return this._filteringModel.normalized;
     }
 
+    /**
+     * Set underlying FilteringModel's filters from the query parameters in the URL
+     *
+     * @param {boolean} notify if the FilteringModel should notify it's observers after finishing setting the filters
+     */
+    setFilterFromURL(notify) {
+        this._filteringModel.setFilterFromURL(notify);
+    }
+
     /**
      * Reset this model to its default
      *

lib/public/views/Environments/EnvironmentModel.js

@@ -42,6 +42,7 @@ export class EnvironmentModel extends Observable {
      */
     loadOverview() {
         if (!this._overviewModel.pagination.isInfiniteScrollEnabled) {
+            this._overviewModel.setFilterFromURL(false);
             this._overviewModel.load();
         }
     }

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

@@ -54,7 +54,6 @@ export class EnvironmentOverviewModel 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);
         };
@@ -70,6 +69,15 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
         return buildUrl('/api/environments', { filter: this.filteringModel.normalized });
     }
 
+    /**
+     * Set underlying FilteringModel's filters from the query parameters in the URL
+     *
+     * @param {boolean} notify if the FilteringModel should notify it's observers after finishing setting the filters
+     */
+    setFilterFromURL(notify) {
+        this._filteringModel.setFilterFromURL(notify);
+    }
+
     /**
      * Returns the current environments list as remote data
      *

lib/public/views/LhcFills/LhcFills.js

@@ -42,6 +42,7 @@ export default class LhcFills extends Observable {
      * @returns {void}
      */
     loadOverview() {
+        this._overviewModel.setFilterFromURL(false);
         this._overviewModel.load();
     }
 

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

@@ -54,8 +54,6 @@ export class LhcFillsOverviewModel extends OverviewPageModel {
         this._filteringModel.pageIdentifier = pageIdentifier;
         this._filteringModel.observe(() => this._applyFilters());
         this._filteringModel.visualChange$.bubbleTo(this);
-
-        this.reset(false);
     }
 
     /**
@@ -72,10 +70,16 @@ 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 });
+    }
+
+    /**
+     * Set underlying FilteringModel's filters from the query parameters in the URL
+     *
+     * @param {boolean} notify if the FilteringModel should notify it's observers after finishing setting the filters
+     */
+    setFilterFromURL(notify) {
+        this._filteringModel.setFilterFromURL(notify);
     }
 
     /**

lib/public/views/Logs/LogsModel.js

@@ -55,6 +55,7 @@ export class LogsModel extends Observable {
      */
     loadOverview() {
         if (!this._overviewModel.pagination.isInfiniteScrollEnabled) {
+            this._overviewModel.setFilterFromURL(false);
             this._overviewModel.fetchLogs();
         }
     }

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

@@ -53,30 +53,38 @@ 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.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);
+    /**
+     * Set underlying FilteringModel's filters from the query parameters in the URL
+     *
+     * @param {boolean} notify if the FilteringModel should notify it's observers after finishing setting the filters
+     */
+    setFilterFromURL(notify) {
+        this._filteringModel.setFilterFromURL(notify);
     }
 
     /**