[O2B-1087] Set-up reusable OverviewPageModel (#1292)

* [O2B-1087] Set-up reusable OverviewPageModel

* Fix linter

* Removed unnecessary error throwing

* Improve builder reset

* Improve docblocks

* Rename observableData builder map to apply

Author: martinboulais

lib/public/models/OverviewModel.js

@@ -11,6 +11,12 @@
  * or submit itself to any jurisdiction.
  */
 
+import { Observable, RemoteData } from '/js/src/index.js';
+import { ObservableData } from '../utilities/ObservableData.js';
+import { PaginatedRemoteDataSource } from '../utilities/fetch/PaginatedRemoteDataSource.js';
+import { PaginationModel } from '../components/Pagination/PaginationModel.js';
+import { buildUrl } from '../utilities/fetch/buildUrl.js';
+
 /**
  * Interface of a model representing an overview page state
  *
@@ -20,3 +26,120 @@
 /**
  * @property {PaginationModel} OverviewModel#pagination pagination model of the overview
  */
+
+/**
+ * Base model for an overview page
+ *
+ * @template T the type of data displayed in the overview page
+ */
+export class OverviewPageModel extends Observable {
+    /**
+     * Constructor
+     */
+    constructor() {
+        super();
+
+        this._pagination = new PaginationModel();
+        this._pagination.observe(() => this.load());
+        this._pagination.itemsPerPageSelector$.observe(() => this.notify());
+
+        const dataSourceObservable = ObservableData.builder().initialValue(RemoteData.loading()).build();
+        dataSourceObservable.observe(() => this.parseApiRemoteData(dataSourceObservable.getCurrent()));
+
+        this._dataSource = new PaginatedRemoteDataSource();
+        this._dataSource.pipe(dataSourceObservable);
+
+        this._observableItems = ObservableData.builder().initialValue(RemoteData.loading()).build();
+        this._observableItems.bubbleTo(this);
+    }
+
+    /**
+     * Return the root endpoint for the model to use to fetch data
+     *
+     * @return {string} the endpoint
+     * @abstract
+     */
+    getRootEndpoint() {
+        throw new Error('Abstract function call');
+    }
+
+    /**
+     * Reset this model to its default
+     *
+     * @returns {void}
+     */
+    reset() {
+        this._observableItems.setCurrent(RemoteData.notAsked());
+        this._pagination.reset();
+    }
+
+    /**
+     * Parse the API remote data to extract the list of items to display and update the pagination
+     *
+     * @param {RemoteData<{items: T[], totalCount: number}, *>} remoteData the API remote data
+     * @return {void}
+     */
+    parseApiRemoteData(remoteData) {
+        /*
+         * When fetching data, to avoid concurrency issues, save a flag stating if the fetched data should be concatenated with the current one
+         * (infinite scroll) or if they should replace them
+         */
+        const keepExisting = this._pagination.currentPage > 1 && this._pagination.isInfiniteScrollEnabled;
+
+        remoteData.match({
+            NotAsked: () => this._observableItems.setCurrent(RemoteData.notAsked()),
+            Loading: () => this._pagination.isInfiniteScrollEnabled ? null : this._observableItems.setCurrent(RemoteData.loading()),
+            Success: ({ items, totalCount }) => {
+                const concatenateWith = keepExisting ? this.items.match({
+                    Success: (payload) => payload,
+                    Other: () => [],
+                }) : [];
+                this._pagination.itemsCount = totalCount;
+                this._observableItems.setCurrent(RemoteData.success([...concatenateWith, ...this.processItems(items)]));
+            },
+            Failure: (error) => this._observableItems.setCurrent(RemoteData.failure(error)),
+        });
+    }
+
+    /**
+     * Apply a processing on each provided items and return the result
+     *
+     * @param {T[]} items the items to process
+     * @return {T[]} The list of processed items
+     */
+    processItems(items) {
+        return items;
+    }
+
+    /**
+     * Fetch all the relevant items from the API
+     *
+     * @return {Promise<void>} void
+     */
+    async load() {
+        const params = {
+            'page[offset]': this._pagination.firstItemOffset,
+            'page[limit]': this._pagination.itemsPerPage,
+        };
+
+        await this._dataSource.fetch(buildUrl(this.getRootEndpoint(), params));
+    }
+
+    /**
+     * Return the current items remote data
+     *
+     * @return {RemoteData<T[]>} the items
+     */
+    get items() {
+        return this._observableItems.getCurrent();
+    }
+
+    /**
+     * Returns the overview pagination
+     *
+     * @return {PaginationModel} the pagination
+     */
+    get pagination() {
+        return this._pagination;
+    }
+}

lib/public/services/lhcFill/addStatisticsToLhcFill.js

@@ -33,7 +33,7 @@ export const addStatisticsToLhcFill = (lhcFill, statistics = null, override = fa
     }
 
     for (const key in statistics) {
-        if (override || !Object.prototype.hasOwnProperty.call(lhcFill, key)) {
+        if (override || !Object.hasOwn(lhcFill, key)) {
             lhcFill[key] = statistics[key];
         }
     }

lib/public/utilities/ObservableData.js

@@ -27,20 +27,111 @@ export class ObservableData extends Observable {
         this._current = initial;
     }
 
+    /**
+     * Returns a builder to create a new observable data
+     *
+     * @return {ObservableDataBuilder} the builder
+     */
+    static builder() {
+        return new ObservableDataBuilder();
+    }
+
     /**
      * Returns the current value of the data
      * @return {T} the current value
      */
-    get current() {
+    getCurrent() {
         return this._current;
     }
 
     /**
      * Set the current value of the data and notify
      * @param {T} value the current value
+     * @return {void}
      */
-    set current(value) {
+    setCurrent(value) {
         this._current = value;
         this.notify();
     }
 }
+
+/**
+ * Observable data that applies a processing on every value that is pushed into it
+ */
+class ObservableDataWithProcessing extends ObservableData {
+    /**
+     * Constructor
+     *
+     * @param {initialValue} initialValue the initial value of the observable data
+     * @param {function[]} processors the list of processing to apply to the values (processors must be chainable)
+     */
+    constructor(initialValue, processors) {
+        super(initialValue);
+
+        this._processors = processors;
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    setCurrent(value) {
+        let processedValue = value;
+
+        for (const processor of this._processors) {
+            processedValue = processor(processedValue);
+        }
+
+        super.setCurrent(processedValue);
+    }
+}
+
+/**
+ * Builder to create instance of observable data
+ *
+ * @template T
+ */
+class ObservableDataBuilder {
+    /**
+     * Constructor
+     */
+    constructor() {
+        this._initialValue = null;
+        this._processors = [];
+    }
+
+    /**
+     * Set the initial value of the observable data
+     *
+     * @param {T} initialValue the initial value of the observable data
+     * @return {this} the builder instance
+     */
+    initialValue(initialValue) {
+        this._initialValue = initialValue;
+        return this;
+    }
+
+    /**
+     * Adds a processing function that will be applied to the observable data (map functions will be called in the same
+     * order as they have been registered)
+     *
+     * @param {function} processor the function to apply to observable data
+     * @return {this} the builder instance
+     */
+    apply(processor) {
+        this._processors.push(processor);
+        return this;
+    }
+
+    /**
+     * Ends the building process and return the built observable data
+     *
+     * @return {ObservableData} the build observable data
+     */
+    build() {
+        const observableData = new ObservableDataWithProcessing(this._initialValue, this._processors);
+        this._processors = [];
+        this._initialValue = null;
+        return observableData;
+    }
+}

lib/public/utilities/fetch/PaginatedRemoteDataSource.js

@@ -0,0 +1,28 @@
+/**
+ *  @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 { RemoteDataSource } from './RemoteDataSource.js';
+import { getRemoteDataSlice } from './getRemoteDataSlice.js';
+
+/**
+ * Data source fetching paginated remote data
+ */
+export class PaginatedRemoteDataSource extends RemoteDataSource {
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     * @return {Promise<{data: *, totalCount: number}>}
+     */
+    async getRemoteData(endpoint) {
+        return getRemoteDataSlice(endpoint, { signal: this._abortController.signal });
+    }
+}

lib/public/utilities/fetch/RemoteDataSource.js

@@ -10,60 +10,71 @@
  *  granted to it by virtue of its status as an Intergovernmental Organization
  *  or submit itself to any jurisdiction.
  */
-import { Observable, RemoteData } from '/js/src/index.js';
+import { RemoteData } from '/js/src/index.js';
 import { getRemoteData } from './getRemoteData.js';
-import { ObservableData } from '../ObservableData.js';
 
 /**
  * Service class providing observable data fetching process
  */
-export class RemoteDataSource extends Observable {
+export class RemoteDataSource {
     /**
      * Constructor
      */
     constructor() {
-        super();
-
         /**
-         * @type {ObservableData<RemoteData>}
+         * @type {ObservableData<RemoteData> | null}
          * @private
          */
-        this._observableData = new ObservableData(RemoteData.notAsked());
+        this._observableData = null;
         this._abortController = null;
     }
 
+    /**
+     * Sets the observable data to which source's data should be pushed to
+     *
+     * @param {ObservableData} observableData the observable data to which data should be pushed
+     * @return {void}
+     */
+    pipe(observableData) {
+        this._observableData = observableData;
+    }
+
     /**
      * Fetch the given endpoint to fill current data
      *
      * @param {string} endpoint the endpoint to fetch
      * @return {Promise<void>} resolves once the data fetching has ended
      */
     async fetch(endpoint) {
-        this._observableData.current = RemoteData.loading();
+        if (!this._observableData) {
+            return null;
+        }
+
+        this._observableData.setCurrent(RemoteData.loading());
 
         const abortController = new AbortController();
         try {
             if (this._abortController) {
                 this._abortController.abort();
             }
             this._abortController = abortController;
-            const { data } = await getRemoteData(endpoint, { signal: this._abortController.signal });
-            this._observableData.current = RemoteData.success(data);
+            const data = await this.getRemoteData(endpoint);
+            this._observableData.setCurrent(RemoteData.success(data));
         } catch (error) {
             // Use local variable because the class member (this._abortController) may already have been override in another call
             if (!abortController.signal.aborted) {
-                this._observableData.current = RemoteData.failure(error);
+                this._observableData.setCurrent(RemoteData.failure(error));
             }
-            throw error;
         }
     }
 
     /**
-     * Return the observable remote data provided by this source
+     * Fetch the endpoint and return the result
      *
-     * @return {ObservableData<RemoteData>} the observable remote data
+     * @param {string} endpoint the endpoint to fetch
+     * @return {Promise<*>} the result
      */
-    get observableData() {
-        return this._observableData;
+    async getRemoteData(endpoint) {
+        return getRemoteData(endpoint, { signal: this._abortController.signal });
     }
 }

lib/public/views/LhcFills/LhcFills.js

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