Toto

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

@@ -14,6 +14,7 @@ import { Observable } from '/js/src/index.js';
 
 /**
  * Model storing the state of a given filter
+ *
  * @abstract
  */
 export class FilterModel extends Observable {
@@ -49,7 +50,7 @@ export class FilterModel extends Observable {
     /**
      * Returns the normalized value of the filter, that can be used as URL parameter
      *
-     * @return {string|number|object|array|null} the normalized value
+     * @return {string|number|object|string[]|number[]|null} the normalized value
      * @abstract
      */
     get normalized() {

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

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { Observable } from '/js/src/index.js';
+
+/**
+ * @typedef FilteringItem
+ * @property {FilterModel} model the model of the filter
+ * @property {string} label the label of the filter
+ */
+
+/**
+ * Model representing a filtering system, including filter inputs visibility, filters values and so on
+ */
+export class FilteringModel extends Observable {
+    /**
+     * Constructor
+     *
+     * @param {Object<string, FilteringItem>} filters the filters with their label and model
+     */
+    constructor(filters) {
+        super();
+
+        this._visualChange$ = new Observable();
+
+        this._filters = filters;
+        this._filterModels = Object.values(filters).map(({ model }) => model);
+        for (const model of this._filterModels) {
+            model.bubbleTo(this);
+            model.visualChange$?.bubbleTo(this._visualChange$);
+        }
+    }
+
+    /**
+     * Reset the filters
+     *
+     * @return {void}
+     */
+    reset() {
+        for (const model of this._filterModels) {
+            model.reset();
+        }
+    }
+
+    /**
+     * Returns the normalized value of all the filters, without null values
+     *
+     * @return {object} the normalized values
+     */
+    get normalized() {
+        const ret = {};
+        for (const [filterKey, { model: filter }] of Object.entries(this._filters)) {
+            if (filter && !filter.isEmpty) {
+                ret[filterKey] = filter.normalized;
+            }
+        }
+        return ret;
+    }
+
+    /**
+     * States if there is currently at least one filter active
+     *
+     * @return {boolean} true if at least one filter is active
+     */
+    isAnyFilterActive() {
+        for (const model of this._filterModels) {
+            if (!model.isEmpty) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Returns the observable notified any time there is a visual change which has no impact on the actual filtering
+     *
+     * @return {Observable} the filters visibility observable
+     */
+    get visualChange$() {
+        return this._visualChange$;
+    }
+
+    /**
+     * Return the filter model for a given key
+     *
+     * @param {string} key the key of the filtering model
+     * @return {FilteringModel} the filtering model
+     */
+    get(key) {
+        if (!(key in this._filters)) {
+            throw new Error(`No filter found with key ${key}`);
+        }
+
+        return this._filters[key].model;
+    }
+}

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

@@ -10,14 +10,14 @@
  * granted to it by virtue of its status as an Intergovernmental Organization
  * or submit itself to any jurisdiction.
  */
-import { Observable } from '/js/src/index.js';
 import { CombinationOperatorChoiceModel } from './CombinationOperatorChoiceModel.js';
 import { TagSelectionDropdownModel } from '../../tag/TagSelectionDropdownModel.js';
+import { FilterModel } from './FilterModel.js';
 
 /**
  * Model to handle the state of a tags filter
  */
-export class TagFilterModel extends Observable {
+export class TagFilterModel extends FilterModel {
     /**
      * Constructor
      *
@@ -28,28 +28,38 @@ export class TagFilterModel extends Observable {
         super();
         this._selectionModel = new TagSelectionDropdownModel({ includeArchived: true });
         this._selectionModel.bubbleTo(this);
+        this._selectionModel.visualChange$.bubbleTo(this.visualChange$);
 
         this._combinationOperatorModel = new CombinationOperatorChoiceModel(operators);
         this._combinationOperatorModel.bubbleTo(this);
     }
 
+    // eslint-disable-next-line valid-jsdoc
     /**
-     * States if the filter has no tags selected
-     *
-     * @return {boolean} true if no tags are selected
+     * @inheritDoc
      */
-    isEmpty() {
+    reset() {
+        this._selectionModel.reset();
+        this._combinationOperatorModel.reset();
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    get isEmpty() {
         return this.selected.length === 0;
     }
 
+    // eslint-disable-next-line valid-jsdoc
     /**
-     * Reset the model to its default state
-     *
-     * @return {void}
+     * @inheritDoc
      */
-    reset() {
-        this._selectionModel.reset();
-        this._combinationOperatorModel.reset();
+    get normalized() {
+        return {
+            values: this.selected.join(),
+            operation: this.combinationOperator,
+        };
     }
 
     /**
@@ -87,13 +97,4 @@ export class TagFilterModel extends Observable {
     get combinationOperator() {
         return this._combinationOperatorModel.current;
     }
-
-    /**
-     * Returns an observable notified any time a visual change occurs that has no impact on the actual selection
-     *
-     * @return {Observable} the visual change observable
-     */
-    get visualChange$() {
-        return this._selectionModel.visualChange$;
-    }
 }

lib/public/views/Logs/ActiveColumns/logsActiveColumns.js

@@ -134,6 +134,12 @@ export const logsActiveColumns = {
         sortable: true,
         size: 'w-15',
         format: (tags) => formatTagsList(tags),
+
+        /**
+         * Tag filter component
+         * @param {LogsOverviewModel} logsModel the log model
+         * @return {Component} the filter component
+         */
         filter: (logsModel) => tagFilter(logsModel.listingTagsFilterModel),
         balloon: true,
         profiles: [profiles.none, 'embeded'],

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

@@ -158,7 +158,7 @@ export class LogsOverviewModel extends Observable {
             || !this._authorFilter.isEmpty
             || this.createdFilterFrom !== ''
             || this.createdFilterTo !== ''
-            || !this.listingTagsFilterModel.isEmpty()
+            || !this.listingTagsFilterModel.isEmpty
             || this.runFilterValues.length !== 0
             || this.environmentFilterValues.length !== 0
             || this.lhcFillFilterValues.length !== 0
@@ -395,7 +395,7 @@ export class LogsOverviewModel extends Observable {
                 'filter[created][to]':
                     new Date(`${this.createdFilterTo.replace(/\//g, '-')}T23:59:59.999`).getTime(),
             },
-            ...!this.listingTagsFilterModel.isEmpty() && {
+            ...!this.listingTagsFilterModel.isEmpty && {
                 'filter[tags][values]': this.listingTagsFilterModel.selected.join(),
                 'filter[tags][operation]': this.listingTagsFilterModel.combinationOperator,
             },

lib/public/views/Runs/ActiveColumns/runsActiveColumns.js

@@ -134,7 +134,13 @@ export const runsActiveColumns = {
         classes: 'w-5 f6',
         format: (tags) => formatTagsList(tags),
         exportFormat: (tags) => tags?.length ? tags.map(({ text }) => text).join('-') : '-',
-        filter: (runModel) => tagFilter(runModel.listingTagsFilterModel),
+
+        /**
+         * Tag filter component
+         * @param {RunsOverviewModel} runModel the runs overview model
+         * @return {Component} the filter component
+         */
+        filter: (runModel) => tagFilter(runModel.filteringModel.get('tags')),
         balloon: (tags) => tags && tags.length > 0,
     },
     fillNumber: {