Alternative UI proposal

app/config/services.js

@@ -33,7 +33,7 @@ const services = {
     },
 
     batchSize: {
-        ML: ResProvider.envOrDef('RCT_ML_BATCH_SIZE', 2),
+        ML: ResProvider.envOrDef('RCT_ML_BATCH_SIZE', 1),
     },
 };
 

app/public/components/common/actionChip.js

@@ -0,0 +1,47 @@
+/**
+ * @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 { h } from '/js/src/index.js';
+
+export default function actionChip(
+    model,
+    label,
+    onclickAction,
+    id = '',
+    href = undefined,
+    classes = '',
+    margin = '.m1',
+    force = false,
+) {
+    let chipClasses = `.btn.chip${classes}${margin}`;
+
+    if (model.router && href !== undefined) {
+        const url = model.router.getUrl();
+        if (href === url.pathname + url.search || href['href'] && href.href === url.href) {
+            chipClasses += ' highlight-blue';
+        }
+    }
+
+    if (typeof href !== 'undefined' && !force) {
+        return h(`a${chipClasses}.no-text-decoration`, {
+            id: id,
+            onclick: onclickAction,
+            href: href,
+        }, label);
+    }
+    return h(`button${chipClasses}`, {
+        id: id,
+        onclick: onclickAction,
+    }, label);
+}

app/public/components/common/modal.js

@@ -14,17 +14,17 @@
 
 import { h } from '/js/src/index.js';
 
-window.addEventListener('click', (event) => {
-    const modalContent = document.getElementsByClassName('modal-content');
-    const modal = document.getElementsByClassName('modal');
-    if ((Array.from(modalContent).find((e) => e == event.target)
-        || Array.from(modal).find((e) => e == event.target))
-        && document.getElementById('myModal')) {
-        document.getElementById('myModal').style.display = 'none';
-    }
-});
-
 export default function modal(content, modalId = 'myModal') {
+    document.addEventListener('click', (event) => {
+        const modalContent = document.getElementsByClassName('modal-content');
+        const modal = document.getElementsByClassName('modal');
+        if ((Array.from(modalContent).find((e) => e == event.target)
+            || Array.from(modal).find((e) => e == event.target))
+            && document.getElementById('myModal')) {
+            document.getElementById('myModal').style.display = 'none';
+        }
+    });
+
     return h('.modal', { id: modalId },
-        h('.modal-content', content));
+        h('.modal-content.p4', content));
 }

app/public/components/common/quantityInput.js

@@ -0,0 +1,75 @@
+/**
+ * @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 { h } from '/js/src/index.js';
+
+export default function quantityInput(id, defaultQuantity, callback) {
+    function handleInput(e) {
+        e.preventDefault();
+        if (e.key === '1'
+            || e.key === '2'
+            || e.key === '3'
+            || e.key === '4'
+            || e.key === '5'
+            || e.key === '6'
+            || e.key === '7'
+            || e.key === '8'
+            || e.key === '9'
+            || e.key === '0'
+            || e.key === 'Backspace') {
+            document.getElementById(id).value = document.getElementById(id).value + e.key;
+        }
+
+        if (e.key === 'Enter') {
+            changeQuantity(0);
+        }
+    }
+
+    const inputComponent = h('input', {
+        id: id,
+        value: defaultQuantity,
+        placeholder: defaultQuantity,
+        type: 'number',
+        pattern: '[0-9]+',
+        onkeydown: (e) => handleInput(e),
+    });
+
+    const changeQuantity = (change) => {
+        let quantity = Number(document.getElementById(id).value);
+        if (isNaN(quantity)) {
+            quantity = defaultQuantity;
+        }
+        quantity += change;
+        quantity = Math.max(quantity, 1);
+        document.getElementById(id).value = quantity;
+        () => callback(quantity);
+    };
+
+    const increaseButton = h('button.btn.btn-secondary', {
+        onclick: () => {
+            changeQuantity(1);
+        },
+    }, '+');
+
+    const decreaseButton = h('button.btn.btn-secondary', {
+        onclick: () => {
+            changeQuantity(-1);
+        },
+    }, '-');
+
+    return h('.quantity-input.flex-wrap.items-center.justify-between',
+        decreaseButton,
+        inputComponent,
+        increaseButton);
+}

app/public/components/userView/data/headersSpecials.js

@@ -14,7 +14,14 @@
 
 import { h } from '/js/src/index.js';
 
-const runsViews = {
+const periodFields = {
+    name: 'Name',
+    year: 'Year',
+    beam: 'Beam type',
+    energy: 'Mean energy [GeV]',
+};
+
+const runFields = {
     name: 'Name',
     run_number: 'Run',
     time_start: 'Start time',
@@ -28,11 +35,29 @@ const runsViews = {
     fill_number: 'Fill',
     run_type: 'Run type',
     mu: '\u03BC',
-    l3_current: 'L3 curr. [A]',
-    dipole_current: 'Dipole curr. [A]',
+    l3_current: 'L3 [A]',
+    dipole_current: 'Dipole [A]',
+};
+
+const runFieldNames = {
+    name: 'Name',
+    run_number: 'Run',
+    time_start: 'Start time',
+    time_end: 'End time',
+    time_trg_start: 'Trigger start',
+    time_trg_end: 'Trigger end',
+    center_of_mass_energy: 'Center of mass energy',
+    ir: 'IR [Hz]',
+    filling_scheme: 'Filling scheme',
+    triggers_conf: 'Triggers configuration',
+    fill_number: 'Fill number',
+    run_type: 'Run type',
+    mu: '\u03BC',
+    l3_current: 'L3 current [A]',
+    dipole_current: 'Dipole current [A]',
 };
 
-const dpViews = {
+const dpFields = {
     name: 'Name',
     description: 'Description',
     pass_type: 'Type',
@@ -43,7 +68,18 @@ const dpViews = {
     size: 'Size',
 };
 
-const mcViews = {
+const dpFieldNames = {
+    name: 'Name',
+    description: 'Description',
+    pass_type: 'Type',
+    jira: 'Jira',
+    ml: 'ML',
+    number_of_events: 'Events',
+    software_version: 'Software version',
+    size: 'Size',
+};
+
+const mcFields = {
     name: 'Name',
     description: 'Description',
     jira: 'Jira',
@@ -52,28 +88,35 @@ const mcViews = {
     number_of_events: 'Events',
 };
 
+const flagFields = {
+    start: 'Start time',
+    end: 'End time',
+    flag: 'Flag',
+    comment: 'Comment',
+    production_id: 'Prod. id',
+    name: 'Name',
+};
+
 const headersSpecials = {
-    periods: {
-        name: 'Name',
-        year: 'Year',
-        beam: 'Beam type',
-        energy: 'Mean energy [GeV]',
-    },
-    runsPerPeriod: runsViews,
-    mc: mcViews,
-    dataPasses: dpViews,
-    anchoredPerMC: dpViews,
-    anchoragePerDatapass: mcViews,
-    runsPerDataPass: runsViews,
+    periods: periodFields,
+    runsPerPeriod: runFields,
+    mc: mcFields,
+    dataPasses: dpFields,
+    anchoredPerMC: dpFields,
+    anchoragePerDatapass: mcFields,
+    runsPerDataPass: runFields,
+    flags: flagFields,
+};
 
-    flags: {
-        start: 'Start time',
-        end: 'End time',
-        flag: 'Flag',
-        comment: 'Comment',
-        production_id: 'Prod. id',
-        name: 'Name',
-    },
+const fieldNames = {
+    periods: periodFields,
+    runsPerPeriod: runFieldNames,
+    mc: mcFields,
+    dataPasses: dpFieldNames,
+    anchoredPerMC: dpFieldNames,
+    anchoragePerDatapass: mcFields,
+    runsPerDataPass: runFieldNames,
+    flags: flagFields,
 };
 
 export const getHeaderSpecial = (model, f) => {
@@ -88,6 +131,18 @@ export const getHeaderSpecial = (model, f) => {
     }
 };
 
+export const getFieldName = (model, f) => {
+    if (/.*_detector/.test(f.name)) {
+        return null;
+    }
+    const n = fieldNames[model.getCurrentDataPointer().page][f.name];
+    if (n) {
+        return n;
+    } else {
+        return f.name;
+    }
+};
+
 export const filterApplicableHeader = 'filterApplicableHeader';
 export const filterNonApplicableHeader = 'filterNonApplicableHeader';
 export const nonDisplayable = 'nonDisplayable';

app/public/components/userView/data/pageSettings/pageSettings.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 { h, iconChevronBottom } from '/js/src/index.js';
+import quantityInput from '../../../common/quantityInput.js';
+
+export default function pageSettings(model, close) {
+    const rowsPerPageInputId = 'rows-per-page-input-id-modal';
+    const title = h('h3', 'Page settings');
+
+    function onclickSetRowsOnSite(model) {
+        const input = document.getElementById(rowsPerPageInputId);
+        let rowsOnSite = input.value === '' ? input.placeholder : input.value;
+        if (rowsOnSite < 1 || rowsOnSite > 200) {
+            alert('incorrect number of rows on page: must be in range of [1, 200]');
+            input.value = 50;
+            rowsOnSite = 50;
+        }
+        model.fetchedData.changeRowsOnSite(rowsOnSite);
+        close();
+        // CLOSE MODAL HERE document.getElementsByClassName('modal').display=none
+    }
+
+    return h('.pageSettings', [
+        h('.flex.bottom-20.justify-center.items-center',
+            h('.settings-40'),
+            h('.inline.top-15.left-10',
+                title)),
+
+        h('.flex-wrap.justify-between.items-center',
+            h('', 'Rows per page'),
+            quantityInput(rowsPerPageInputId,
+                model.router.params['rows-on-site'],
+                model.fetchedData.changeRowsOnSite)),
+
+        h('.flex-wrap.justify-between.items-center',
+            h('', 'Color theme'),
+            h('select.select.color-theme', { id: 'showOptions', name: 'showOptions' }, [
+                h('option', 'Ehevi'),
+                h('option', 'WebUI'),
+                h('option', 'Alice'),
+                h('option', 'Chiara'),
+            ], iconChevronBottom())),
+
+        h('.flex-wrap.justify-center.items-center',
+            h('button.btn.btn-primary.m1', {
+                onclick: () => onclickSetRowsOnSite(model),
+            }, 'Apply changes')),
+    ]);
+}