[ORCT-138] Detector list

.nycrc

@@ -5,7 +5,8 @@
         "app/**/*.js"
     ],
     "exclude": [
-        "test/**"
+        "test/**",
+        "app/public/views/**"
     ],
     "reporter": [
         "html",

.vscode/settings.json

@@ -10,7 +10,7 @@
     "files.exclude": {
         ".eslintrc": true,
         ".nycrc": true,
-        // ".github": true,
+        ".github": true,
         "codecov.yml": true,
 
         "LICENSE": true,

app/public/components/about/about.js

@@ -17,10 +17,10 @@ import { h } from '/js/src/index.js';
 export default function about() {
     const title = h('h3.text-primary', 'About');
 
-    return h('', [
-        h('.flex.bottom-20.justify-center.items-center',
+    return h('.p-1em', [
+        h('.flex.p-bottom-1em.justify-center.items-center',
             h('.settings-40-primary'),
-            h('.inline.top-15.left-10',
+            h('.p-left-1em',
                 title)),
 
         h('.flex-wrap.justify-between.items-center',

app/public/components/detectors/detectorIcon.js

@@ -18,19 +18,25 @@ import { RCT } from '../../config.js';
 import { showModal } from '../../views/modal/modal.js';
 const { runBasedQuality } = RCT.quality;
 
-export default function detectorIcon(navigation, item, index, detectorName, timeBased = false) {
+export default function detectorIcon(navigation, item, index, detectorName, timeBased = false, qualityChangePossible = false) {
     const runDetectorId = `${index}-${item.run_number}-${detectorName}`;
     const runBasedQcModalId = `${runDetectorId}-qc-modal`;
     return [
-        h('.modal', { id: runBasedQcModalId },
-            h('.modal-content.abs-center.p3', {
-                id: `${runBasedQcModalId}-content`,
-            }, qcTypeSelection(navigation, () => {
-                document.getElementById(runBasedQcModalId).style.display = 'none';
-            }, item, index, detectorName, runDetectorId, timeBased))),
+        qualityChangePossible
+            ? h('.modal', { id: runBasedQcModalId },
+                h('.modal-content.abs-center.p3', {
+                    id: `${runBasedQcModalId}-content`,
+                }, qcTypeSelection(navigation, () => {
+                    document.getElementById(runBasedQcModalId).style.display = 'none';
+                }, item, index, detectorName, runDetectorId, timeBased)))
+            : '',
         h('button.btn.no-border-bottom.pointer.run-quality.good', {
             id: runDetectorId,
-            onclick: () => showModal(runBasedQcModalId),
+            onclick: () => {
+                if (qualityChangePossible) {
+                    showModal(runBasedQcModalId);
+                }
+            },
         },
         runBasedQuality.good),
     ];

app/public/components/flags/flagsVisualization.js

@@ -59,13 +59,13 @@ export default function flagsVisualization(runData, flagsData) {
         h('.w-10', flagReason),
         flagVisualization(flagsGroupedByFlagReason[flagReason], time_start, time_end, flagColor(flagReason)));
 
-    return [
+    return h('.p-top-05em', [
         h('.relative', distinctFlagReasons.map((flagReason) => flagReasonVisualization(flagReason))),
         h('.relative',
             h('.flex-wrap.justify-between.items-center.pv1',
                 h('.w-10', ''),
                 h('.w-90.flex-wrap.justify-between.items-center',
                     h('', dateFormatter(time_start), h('.skinny', 'START')),
                     h('', dateFormatter(time_end), h('.skinny', 'END'))))),
-    ];
+    ]);
 }

app/public/components/sidebar/sidebar.js

@@ -32,6 +32,7 @@ export default function sidebar(model) {
     },
     modal(modalIds.about.modal),
     modal(modalIds.pageSettings.modal, model),
+    modal(modalIds.detectors.modal, model),
     h('.logo.ph3.hide-on-close'),
     h('.flex-column.gap-20',
         h('.sidebar-section',
@@ -54,7 +55,7 @@ export default function sidebar(model) {
                 h('.title-text.vertical-center.hide-on-close', 'Page settings'))),
 
             h('button.sidebar-item-button', {
-                onclick: () => showModal(modalIds.about.modal),
+                onclick: () => showModal(modalIds.detectors.modal),
             }, h('.page-title',
                 h('.detector-15-off-white.vertical-center'),
                 h('.title-text.vertical-center.hide-on-close', 'Detectors')))),

app/public/model/DataAccessModel.js

@@ -18,6 +18,7 @@ import { defaultIndex, defaultIndexString } from '../utils/defaults.js';
 import Navigation from './navigation/Navigation.js';
 import ServiceUnavailable from './ServiceUnavailable.js';
 import { RCT } from '../config.js';
+import UserPreferences from './UserPreferences.js';
 const { messageTimeout } = RCT;
 const { states } = RCT.dataAccess;
 
@@ -28,6 +29,7 @@ export default class DataAccessModel extends Observable {
         this.parent = parent;
         this.router = this.parent.router;
 
+        this.userPreferences = new UserPreferences(this);
         this.serviceUnavailable = new ServiceUnavailable(parent);
         this.fetchedData = new FetchedDataManager(this.router, this);
 

app/public/model/UserPreferences.js

@@ -0,0 +1,61 @@
+/**
+ * @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.
+ */
+
+import { Observable } from '/js/src/index.js';
+import { replaceUrlParams } from '../utils/url/urlUtils.js';
+import { RCT } from '../config.js';
+const { dataReqParams } = RCT;
+
+const defaultRowsOnSite = 50;
+
+export const sidebarPreferences = {
+    visible: 'visible',
+    collapsible: 'collapsible',
+};
+
+/**
+ * Observable responsible for handling and providing user preferences:
+ * number of rows on site, UI theme, sidebar preferenes, detector list and predefined filters
+ */
+
+export default class UserPreferences extends Observable {
+    constructor(parent) {
+        super();
+        this.parent = parent;
+        this.rowsOnSite = defaultRowsOnSite;
+        this.uiTheme = RCT.themes.rct;
+        this.sidebarPreference = sidebarPreferences.collapsible;
+        this.detectorList = RCT.detectors.reduce((acc, detector) => ({ ...acc, [detector]: true }), {});
+    }
+
+    setRowsOnSite(rowsOnSite) {
+        this.rowsOnSite = rowsOnSite;
+        const url = this.parent.router.getUrl();
+        const newUrl = replaceUrlParams(url, { [dataReqParams.rowsOnSite]: this.rowsOnSite });
+        this.parent.router.go(newUrl);
+    }
+
+    setUiTheme(uiTheme) {
+        this.uiTheme = uiTheme;
+    }
+
+    setSidebarPreference(sidebarPreference) {
+        this.sidebarPreference = sidebarPreference;
+    }
+
+    changeDetectorVisibility(detector) {
+        this.detectorList[detector] = !this.detectorList[detector];
+        this.parent.notify();
+    }
+}

app/public/model/data/FetchedData.js

@@ -12,10 +12,10 @@
  * or submit itself to any jurisdiction.
  */
 
-const defaultRowsOnSite = 50;
 const defaultSite = 1;
 
 import { RCT } from '../../../config.js';
+import { shouldDisplayDetectorField } from '../../utils/dataProcessing/dataProcessingUtils.js';
 const DRF = RCT.dataResponseFields;
 
 /**
@@ -27,8 +27,10 @@ const DRF = RCT.dataResponseFields;
  */
 
 export default class FetchedData {
-    constructor(url, content, totalRecordsNumber = null) {
+    constructor(url, content, userPreferences, totalRecordsNumber = null) {
         this.url = url;
+        this.rowsOnSite = userPreferences.rowsOnSite;
+        this.detectorList = userPreferences.detectorList;
 
         this.sorting = {
             field: null,
@@ -49,8 +51,7 @@ export default class FetchedData {
     useUrlParams(url) {
         const params = Object.fromEntries(url.searchParams.entries());
         const DRP = RCT.dataReqParams;
-        // TODO examine why it not works;
-        this.rowsOnSite = params['rows-on-site'] ? params['rows-on-site'] : defaultRowsOnSite;
+        this.rowsOnSite = params['rows-on-site'] ?? this.rowsOnSite;
         this.site = params[DRP.site] ? params[DRP.site] : defaultSite;
         if (params['sorting']) {
             const { sorting } = params;
@@ -65,15 +66,10 @@ export default class FetchedData {
     }
 
     parseFetchedFields(content) {
-        const { length } = content.data.fields;
-        this.fields = content.data.fields.map((item) => {
-            item.marked =
-                length < 5
-                || content.data.rows.length == 0
-                || content.data.rows.some((r) => r[item.name]); // TODO
-
-            return item;
-        });
+        this.fields = content.data.fields.map((field) => ({
+            ...field,
+            marked: shouldDisplayDetectorField(field.name, this.detectorList) || content.data.rows.some((r) => r[field.name]),
+        }));
     }
 
     parseFetchedRows(content) {

app/public/model/data/FetchedDataManager.js

@@ -17,7 +17,7 @@ import { RemoteData, Loader } from '/js/src/index.js';
 import FetchedData from './FetchedData.js';
 import { replaceUrlParams } from '../../utils/url/urlUtils.js';
 import { RCT } from '../../config.js';
-const { dataReqParams, defaultDataReqParams, pageNames, dataAccess } = RCT;
+const { dataReqParams, pageNames, dataAccess } = RCT;
 
 /**
  * Object of this class provide organization of many FetchedData objects,
@@ -30,8 +30,6 @@ export default class FetchedDataManager {
         this.router = router;
         this.loader = new Loader();
 
-        this.rowsOnSite = defaultDataReqParams.rowsOnSite;
-
         for (const n in pageNames) {
             if (Object.prototype.hasOwnProperty.call(pageNames, n)) {
                 this[n] = {};
@@ -50,6 +48,12 @@ export default class FetchedDataManager {
     async reqForData(force = false, url = null) {
         if (url === null) {
             url = this.router.getUrl();
+            if (!url.searchParams.has(dataReqParams.rowsOnSite)) {
+                url = new URL(`${url.href}&${dataReqParams.rowsOnSite}=${this.model.userPreferences.rowsOnSite}`);
+            }
+            if (!url.searchParams.has(dataReqParams.site)) {
+                url = new URL(`${url.href}&${dataReqParams.site}=1`);
+            }
         }
         const { page, index } = this.model.getDataPointerFromUrl(url);
         const data = this[page][index];
@@ -93,7 +97,7 @@ export default class FetchedDataManager {
         await this.model.parent._tokenExpirationHandler(status);
 
         if (ok) {
-            const s = RemoteData.Success(new FetchedData(url, result, totalRecordsNumber));
+            const s = RemoteData.Success(new FetchedData(url, result, this.model.userPreferences, totalRecordsNumber));
             this[page][index] = s;
             previous?.match({
                 NotAsked: () => {},
@@ -132,10 +136,9 @@ export default class FetchedDataManager {
         this.router.go(newUrl);
     }
 
-    changeRowsOnSite(rowsOnSite) {
+    changeRowsOnSite() {
         const url = this.router.getUrl();
-        this.rowsOnSite = rowsOnSite;
-        const newUrl = replaceUrlParams(url, { [dataReqParams.rowsOnSite]: this.rowsOnSite });
+        const newUrl = replaceUrlParams(url, { [dataReqParams.rowsOnSite]: this.model.userPreferences.rowsOnSite });
         this.router.go(newUrl);
     }
 

app/public/model/navigation/Navigation.js

@@ -37,7 +37,6 @@ export default class Navigation extends Observable {
         this.router.observe(this.routerCallback);
         this.router.bubbleTo(this);
 
-        this.rowsOnSite = defaultDataReqParams.rowsOnSite;
         this.site = defaultDataReqParams.site;
 
         this.handleLocationChange();
@@ -98,7 +97,14 @@ export default class Navigation extends Observable {
     }
 
     siteReqParamsPhrase() {
-        return `&${dataReqParams.rowsOnSite}=${this.rowsOnSite}&${dataReqParams.site}=${this.site}`;
+        return `&${dataReqParams.rowsOnSite}=${this.parent.userPreferences.rowsOnSite}&${dataReqParams.site}=${this.site}`;
+    }
+
+    siteReqParams() {
+        return {
+            [dataReqParams.rowsOnSite]: this.parent.userPreferences.rowsOnSite,
+            [dataReqParams.site]: this.site,
+        };
     }
 
     handleLinkEvent(e) {