[ORCT-144] Update periods API

app/config/rct-data/viewFieldNames/periodFieldNames.js

@@ -18,18 +18,22 @@ const periodFieldNames = {
         fieldName: 'Name',
         filterInput: filterInputTypes.text,
     },
+    beamType: {
+        fieldName: 'Beam',
+        filterInput: filterInputTypes.text,
+    },
     year: {
         fieldName: 'Year',
         filterInput: filterInputTypes.number,
     },
-    beam: {
-        fieldName: 'Beam',
-        filterInput: filterInputTypes.text,
-    },
-    energy: {
+    avgEnergy: {
         fieldName: 'Mean energy [GeV]',
         filterInput: filterInputTypes.number,
     },
+    distinctEnergies: {
+        fieldName: 'Run energies [GeV]',
+        filterInput: filterInputTypes.number,
+    },
 };
 
 module.exports = periodFieldNames;

app/lib/utils/obj-utils.js

@@ -67,10 +67,6 @@ function switchCase(caseName, cases, opts) {
             opts.default ? opts.default : (() => { throw new Error('not last found option, no case, no default case'); })();
 }
 
-function delay(time) {
-    return new Promise((resolve) => setTimeout(resolve, time));
-}
-
 function replaceAll(s, pattern, replace) {
     const p = s.split(pattern);
     return p.join(replace);
@@ -122,7 +118,6 @@ module.exports = {
     reversePrimitiveObject,
     filterObject,
     switchCase,
-    delay,
     replaceAll,
     arrayToChunks,
     applyOptsToObj,

app/public/Model.js

@@ -18,7 +18,9 @@ import { RCT } from './config.js';
 import Flags from './views/flags/Flags.js';
 import Detectors from './views/detectors/Detectors.js';
 import Runs from './views/runs/Runs.js';
-const { roles, dataAccess } = RCT;
+import PeriodsModel from './views/periods/PeriodsModel.js';
+import UserPreferences from './model/UserPreferences.js';
+const { roles, dataAccess, pageNames } = RCT;
 
 export default class Model extends Observable {
     constructor() {
@@ -34,6 +36,12 @@ export default class Model extends Observable {
 
         this.loader = new Loader();
 
+        this.userPreferences = new UserPreferences(this);
+        this.userPreferences.bubbleTo(this);
+
+        this.periods = new PeriodsModel(this);
+        this.periods.bubbleTo(this);
+
         this.runs = new Runs(this);
         this.runs.bubbleTo(this);
 
@@ -49,6 +57,22 @@ export default class Model extends Observable {
 
         this.loginEndpoint = `/api${RCT.endpoints.login}`;
         this.login('physicist');
+
+        this.handleLocationChange();
+    }
+
+    /**
+     * Delegates sub-model actions depending on new location of the page
+     * @returns {void}
+     */
+    async handleLocationChange() {
+        switch (this.router.params.page) {
+            case pageNames.periods:
+                await this.periods.fetchCurrentPagePeriods();
+                break;
+            default:
+                break;
+        }
     }
 
     async login(username) {

app/public/components/buttons/copyLinkButton.js

@@ -36,7 +36,7 @@ export default function copyLinkButton(url) {
                     snackbar.style.display = 'flex';
 
                     document.addEventListener('click', (event) => {
-                        if (thisButton != event.target && thisButtonContent != event.target) {
+                        if (thisButton !== event.target && thisButtonContent !== event.target) {
                             snackbar.style.display = 'none';
                         }
                     });

app/public/components/buttons/dataActionButtons.js

@@ -13,12 +13,14 @@
  */
 
 import { h, iconDataTransferDownload, iconReload } from '/js/src/index.js';
-import downloadCSV from '../../utils/csvExport.js';
+import obsoleteDownloadCSV from '../../utils/obsoleteCsvExport.js';
 import copyLinkButton from './copyLinkButton.js';
+import { modalIds, showModal } from '../../views/modal/modal.js';
 
 export const dataActions = {
     hide: 'Hide',
     reload: 'Reload',
+    obsoleteDownloadCSV: 'Download CSV (obsolete)',
     downloadCSV: 'Download CSV',
     copyLink: 'Copy link',
     showFilteringPanel: 'Filter',
@@ -35,10 +37,18 @@ export default function dataActionButtons(model, applicableDataActions) {
             }, iconReload())
             : '',
 
+        applicableDataActions[dataActions.obsoleteDownloadCSV]
+            ? h('button.btn.btn-secondary.icon-only-button', {
+                onclick: () => {
+                    obsoleteDownloadCSV(model);
+                },
+            }, iconDataTransferDownload())
+            : '',
+
         applicableDataActions[dataActions.downloadCSV]
             ? h('button.btn.btn-secondary.icon-only-button', {
                 onclick: () => {
-                    downloadCSV(model);
+                    showModal(modalIds.dataExport.modal);
                 },
             }, iconDataTransferDownload())
             : '',

app/public/components/common/pageTitle.js

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * 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.
+ */
+
+export const pageTitle = (page, pageNames) => {
+    switch (page) {
+        case pageNames.periods: return 'Periods';
+        case pageNames.runsPerPeriod: return 'Runs per period';
+        case pageNames.runsPerDataPass: return 'Runs per data pass';
+        case pageNames.dataPasses: return 'Data passes per period';
+        case pageNames.mc: return 'Monte Carlo';
+        case pageNames.flags: return 'Quality flags';
+        case pageNames.anchoragePerDatapass: return 'Anchorage per data pass';
+        case pageNames.anchoredPerMC: return 'Anchored per MC';
+        default: return page;
+    }
+};

app/public/components/common/quantityInput.js

@@ -14,7 +14,7 @@
 
 import { h } from '/js/src/index.js';
 
-export default function quantityInput(id, defaultQuantity, callback) {
+export default function quantityInput(id, defaultQuantity) {
     function handleInput(e) {
         e.preventDefault();
         if (e.key === '1'
@@ -53,7 +53,6 @@ export default function quantityInput(id, defaultQuantity, callback) {
         quantity += change;
         quantity = Math.max(quantity, 1);
         document.getElementById(id).value = quantity;
-        () => callback(quantity);
     };
 
     const increaseButton = h('button.btn.btn-secondary', {

app/public/components/messagePanel/messages.js

@@ -19,26 +19,69 @@ import spinner from '../common/spinner.js';
 const goBack = 'Go back';
 const nothingFound = 'Nothing found';
 
-const requestButton = (model) => h('button.btn.btn-primary.m3', {
+/**
+ * Uses deprecated data request.
+ * Please use the `requestButton` with the specific dataModel (e.g. `periodsModel`) instead.
+ * @deprecated
+ * @param {DataAccessModel} model dataAccessModel
+ * @returns {button} button that enables user to request data
+ */
+const obsoleteRequestButton = (model) => h('button.btn.btn-primary.m3', {
     onclick: () => model.fetchedData.reqForData(true),
 }, 'Reload');
 
+const requestButton = (dataModel) => h('button.btn.btn-primary.m3', {
+    onclick: () => dataModel.fetchCurrentPageData(),
+}, 'Reload');
+
 const removeCurrentDataButton = (model, label) => h('button.btn.btn-primary.m3', {
     onclick: () => model.removeCurrentData(),
 }, label);
 
-export const failure = (model, status) => messagePanel(
+/**
+ * Uses deprecated `obsoleteRequestButton`.
+ * Please use the `failureWithMessage` with the specific dataModel (e.g. `periodsModel`) and errorObject instead.
+ * @deprecated
+ * @param {DataAccessModel} model dataAccessModel
+ * @param {number} status request status
+ * @returns {messagePanel} messagePanel informing the user about an unknown error.
+ */
+export const failureWithStatus = (model, status) => messagePanel(
     'no-network-90',
     'Failed to load data',
     `The services are unavailable (status: ${status ? status : 'unknown'})`,
-    requestButton(model),
+    obsoleteRequestButton(model),
 );
 
-export const unknown = (model) => messagePanel(
+export const failureWithMessage = (dataModel, errorObject) => {
+    const { detail, title } = errorObject.find((e) => Boolean(e));
+    return messagePanel(
+        'no-network-90',
+        detail,
+        title,
+        requestButton(dataModel),
+    );
+};
+
+/**
+ * Uses deprecated `obsoleteRequestButton`.
+ * Please use the `unknown` with the specific dataModel (e.g. `periodsModel`) instead.
+ * @deprecated
+ * @param {DataAccessModel} model dataAccessModel
+ * @returns {messagePanel} messagePanel informing the user about an unknown error.
+ */
+export const obsoleteUnknown = (model) => messagePanel(
+    'unexpected-90',
+    'Unknown error',
+    'Request could not be handled properly',
+    obsoleteRequestButton(model),
+);
+
+export const unknown = (dataModel) => messagePanel(
     'unexpected-90',
     'Unknown error',
     'Request could not be handled properly',
-    requestButton(model),
+    requestButton(dataModel),
 );
 
 export const sessionError = (model) => messagePanel(
@@ -72,13 +115,19 @@ export const noMatchingData = (model, page) => messagePanel(
     ],
 );
 
+/**
+ * Uses deprecated `obsoleteRequestButton`.
+ * @deprecated
+ * @param {DataAccessModel} model dataAccessModel
+ * @returns {messagePanel} messagePanel informing the user about an unknown error.
+ */
 export const noDataFound = (model) => messagePanel(
     'nothing-found-90',
     nothingFound,
     'There is no data to be displayed here',
     [
         removeCurrentDataButton(model, goBack),
-        requestButton(model),
+        obsoleteRequestButton(model),
     ],
 );
 

app/public/components/sidebar/sidebar.js

@@ -16,7 +16,7 @@ import { h } from '/js/src/index.js';
 import { RCT } from '../../config.js';
 import sidebarItem from './sidebarItem.js';
 import { modal, modalIds, showModal } from '../../views/modal/modal.js';
-import { pageTitle } from '../table/title.js';
+import { pageTitle } from '../common/pageTitle.js';
 const { pageNames } = RCT;
 
 /**
@@ -27,24 +27,26 @@ const { pageNames } = RCT;
  */
 
 export default function sidebar(model) {
+    const { userPreferences } = model.parent;
     return h('.sidebar.sidebar-collapsible', {
         id: 'sidebar',
     },
     modal(modalIds.about.modal),
-    modal(modalIds.pageSettings.modal, model),
-    modal(modalIds.detectors.modal, model),
+    modal(modalIds.pageSettings.modal, null, userPreferences),
+    modal(modalIds.detectors.modal, null, userPreferences),
+    modal(modalIds.dataExport.modal, model.parent.periods, userPreferences),
     h('.logo.ph3.hide-on-close'),
     h('.flex-column.gap-20',
         h('.sidebar-section',
             h('.sidebar-section-title.ph2.hide-on-close', 'Pages'),
-            sidebarItem(model, pageNames.periods, pageTitle(pageNames.periods)),
-            sidebarItem(model, pageNames.dataPasses, pageTitle(pageNames.dataPasses)),
-            sidebarItem(model, pageNames.anchoragePerDatapass, pageTitle(pageNames.anchoragePerDatapass)),
-            sidebarItem(model, pageNames.mc, pageTitle(pageNames.mc)),
-            sidebarItem(model, pageNames.anchoredPerMC, pageTitle(pageNames.anchoredPerMC)),
-            sidebarItem(model, pageNames.runsPerPeriod, pageTitle(pageNames.runsPerPeriod)),
-            sidebarItem(model, pageNames.runsPerDataPass, pageTitle(pageNames.runsPerDataPass)),
-            sidebarItem(model, pageNames.flags, pageTitle(pageNames.flags))),
+            sidebarItem(model, pageNames.periods, pageTitle(pageNames.periods, pageNames)),
+            sidebarItem(model, pageNames.dataPasses, pageTitle(pageNames.dataPasses, pageNames)),
+            sidebarItem(model, pageNames.anchoragePerDatapass, pageTitle(pageNames.anchoragePerDatapass, pageNames)),
+            sidebarItem(model, pageNames.mc, pageTitle(pageNames.mc, pageNames)),
+            sidebarItem(model, pageNames.anchoredPerMC, pageTitle(pageNames.anchoredPerMC, pageNames)),
+            sidebarItem(model, pageNames.runsPerPeriod, pageTitle(pageNames.runsPerPeriod, pageNames)),
+            sidebarItem(model, pageNames.runsPerDataPass, pageTitle(pageNames.runsPerDataPass, pageNames)),
+            sidebarItem(model, pageNames.flags, pageTitle(pageNames.flags, pageNames))),
 
         h('.sidebar-section',
             h('.sidebar-section-title.ph2.hide-on-close', 'Preferences'),

app/public/utils/utils.js → app/public/components/table/itemsCounter.js

@@ -12,15 +12,13 @@
  * or submit itself to any jurisdiction.
  */
 
-export const zip = (a, b) => Array.from(Array(Math.max(b.length, a.length)), (_, i) => [a[i], b[i]]);
+export default function itemsCounter(paginationModel) {
+    const { currentPage, itemsPerPage, itemsCount } = paginationModel;
 
-export function getReadableFileSizeString(fileSizeInBytes) {
-    let i = -1;
-    const byteUnits = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    do {
-        fileSizeInBytes /= 1024;
-        i++;
-    } while (fileSizeInBytes > 1024);
+    const firstItemIndex = (currentPage - 1) * itemsPerPage + 1;
+    const lastItemIndex = currentPage * itemsPerPage > itemsCount
+        ? itemsCount
+        : currentPage * itemsPerPage;
 
-    return `${Math.max(fileSizeInBytes, 0.1).toFixed(1)}  ${byteUnits[i]}`;
+    return `${firstItemIndex}-${lastItemIndex} of ${itemsCount}`;
 }