[O2B-1558] Set filters from url upon page reload (#2144)

Notable changes for users:
- When a filters on overview pages are set, the active filters will appear in the url, when reloading the page, these filters will be applied automatically.
- Users can now 'undo' filters by pressing the go-back button in the browser

Notable changes for developers:
- The eorReason filter component has been changed to match its reasonType and Category with its model
- A textInputFilter has been replaced by a textFilter as the model that controls it is a TextTokenFilterModel.
  - This prevented it from being set by the url as their state is different.
- A guard has been added in the registerObservablesQcSummaryDependsOn function to prevent continual re-registration
- A new getter has been added to filterModel and selectionModel called isInactive that will by default act as an alias for the isEmpty getter
  - The distinction is that isEmpty is used to determine if the filter should be added to requests or be set to the url while isInactive determines if specific ui interactions should happen (e.g. toggles being considered inactive despite being filled with 'false', thus being added urls, but not enabling the reset-filter button, as you can't reset an already untoggled toggle)
- The NumericalComparisonFilter normalized setter has been changed to separate raw value from parsed value.

- ToggleFilters will now ALWAYS be filled, meaning that they will always be added to the query parameters.
  - This was already the case for all toggles except for HasStableBeams, which would only be added if it was true.
  - The change does not change page behaviour as the back-end checks hasStableBeams for being truethy, and both false and undefined (which it was before this change) rule as falsely.

Author: NarrowsProjects

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

@@ -92,10 +92,11 @@ export class NumericalComparisonFilterModel extends FilterModel {
      * @inheritDoc
      */
     set normalized({ operator, limit }) {
-        const parsedLimit = parseFloat(limit) / this._scale;
+        const numericLimit = parseFloat(limit);
+        const scaledLimit = numericLimit / this._scale;
 
-        if (!isNaN(parsedLimit)) {
-            this._operandInputModel.normalized = parsedLimit;
+        if (!isNaN(numericLimit) || !isNaN(scaledLimit)) {
+            this._operandInputModel.normalized = { value: numericLimit, raw: scaledLimit };
         }
 
         this._operatorSelectionModel.normalized = operator;

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

@@ -109,13 +109,14 @@ export class ProcessedTextInputModel extends Observable {
     /**
      * Sets filters from normalised values.
      *
-     * @param {string} value The value used to set filters
+     * @param {string} value The value used to set the parsed value
+     * @param {string} raw The value used to set the raw value
      * @return {void}
      * @abstract
      */
-    set normalized(value) {
+    set normalized({ value, raw }) {
         this._value = value;
-        this._raw = value;
+        this._raw = raw;
     }
 
     /**

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',
     },