Merge pull request #70 from AliceO2Group/ui-improvement

UI improvement part 4

Author: Ehevi

app/public/Model.js

@@ -22,10 +22,10 @@ export default class Model extends Observable {
         super();
 
         this.session = sessionService.get();
-        this.session.personid = parseInt(this.session.personid, 10); // cast, sessionService has only strings
+        this.session.personid = parseInt(this.session.personid, 10); // Cast, sessionService has only strings
         // TODO if no personid then it is a computer so we need to parse it respectively
         this.session.roles = this.getRoles();
-        
+
         this.router = new QueryRouter();
         this.router.bubbleTo(this);
         this.loader = new Loader();
@@ -59,19 +59,19 @@ export default class Model extends Observable {
 
     getRoles() {
         if (this.session.access.includes(ROLES.Admin)) {
-          return [ ROLES.Admin ];
+            return [ROLES.Admin];
         } else if (this.session.access.includes(ROLES.Global)) {
-          return [ ROLES.Global ];
+            return [ROLES.Global];
         } else if (this.session.access.some((role) => this.isDetectorRole(role))) {
             const roles = [];
-            Object.values(ROLES).filter(role => this.isDetectorRole(role)).forEach((detectorRole) => {
+            Object.values(ROLES).filter((role) => this.isDetectorRole(role)).forEach((detectorRole) => {
                 if (this.session.access.includes(detectorRole)) {
                     roles.push(detectorRole);
                 }
             });
             return roles;
         }
-        return [ ROLES.Guest ];
+        return [ROLES.Guest];
     }
 
     setServiceUnavailable(result) {

app/public/components/common/header.js

@@ -64,6 +64,6 @@ const functionalities = (model) => h('.button-group.text-right',
     }, iconDataTransferDownload()),
 
     h('button.btn.filter-button', {
-        className: model.searchFieldsVisible ? 'active' : '',
+        className: model.searchFieldsVisible ? 'selected' : '',
         onclick: () => model.changeSearchFieldsVisibility(),
     }, h('.filter-20.icon')));

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

@@ -55,7 +55,7 @@ const headersSpecials = {
         name: 'Name',
         year: 'Year',
         beam: 'Beam type',
-        energy: 'Energy [GeV]',
+        energy: 'Mean energy [GeV]',
     },
     runsPerPeriod: runsViews,
     mc: mcViews,
@@ -86,4 +86,12 @@ export const getHeaderSpecial = (model, f) => {
     }
 };
 
-export const headerSpecPresent = (model, f) => Boolean(headersSpecials[model.getCurrentDataPointer().page][f.name]);
+export const filterApplicableHeader = 'filterApplicableHeader';
+export const filterNonApplicableHeader = 'filterNonApplicableHeader';
+export const nonDisplayable = 'nonDisplayable';
+
+export const headerSpecPresent = (model, f) => headersSpecials[model.getCurrentDataPointer().page][f.name]
+    ? filterApplicableHeader
+    : /.*detector/.test(f.name)
+        ? filterNonApplicableHeader
+        : nonDisplayable;

app/public/components/userView/data/table/header.js

@@ -13,7 +13,7 @@
  */
 
 import { h } from '/js/src/index.js';
-import { getHeaderSpecial, headerSpecPresent } from '../headersSpecials.js';
+import { filterApplicableHeader, getHeaderSpecial, headerSpecPresent, nonDisplayable } from '../headersSpecials.js';
 import { sort } from '../../../../utils/sort.js';
 
 export default function tableHeader(visibleFields, data, model) {
@@ -25,22 +25,24 @@ const columnsHeadersArray = (visibleFields, data, model) =>
     visibleFields.map((f) => h(`th.${model.getCurrentDataPointer().page}-${f.name}-header`, {
         scope: 'col',
     }, h('.relative', [
-        headerSpecPresent(model, f) ? [
+        headerSpecPresent(model, f) !== nonDisplayable ? [
             h('.inline', getHeaderSpecial(model, f)),
-            h('.inline',
-                h('.vertical-center',
-                    h('div.sort-up-20', {
-                        onclick: () => sort(f.name, data, model, -1),
-                        class: data.sorting.order === -1 && data.sorting.field === f.name
-                            ? 'selected' :
-                            '',
-                    }),
-                    h('div.sort-down-20', {
-                        onclick: () => sort(f.name, data, model, 1),
-                        class: data.sorting.order === 1 && data.sorting.field === f.name
-                            ? 'selected'
-                            : '',
-                    }))),
+            headerSpecPresent(model, f) === filterApplicableHeader
+                ? h('.inline',
+                    h('.vertical-center',
+                        h('div.sort-up-20.pointer', {
+                            onclick: () => sort(f.name, data, model, -1),
+                            class: data.sorting.order === -1 && data.sorting.field === f.name
+                                ? 'selected' :
+                                '',
+                        }),
+                        h('div.sort-down-20.pointer', {
+                            onclick: () => sort(f.name, data, model, 1),
+                            class: data.sorting.order === 1 && data.sorting.field === f.name
+                                ? 'selected'
+                                : '',
+                        })))
+                : '',
         ] : '',
     ])));
 

app/public/styles/custom.css

@@ -213,7 +213,11 @@
     background-color: #577590 !important;
 }
 
-.btn:active {
-    background-color: #577590 !important;
+.btn.selected {
+    background-color: var(--color-gray-dark) !important;
+    color: var(--color-white) !important;
 }
 
+.pointer {
+    cursor: pointer !important;
+}

app/public/styles/custom/tables/periods.css

@@ -68,7 +68,7 @@
     text-align: right;
 }
 
-/* Energy */
+/* Mean energy */
 .periods-table .periods-energy-cell, .periods-table .periods-energy-header {
     min-width: 60px;
     text-align: right;

app/public/styles/custom/tables/runs.css

@@ -60,6 +60,40 @@
     text-align: right;
 }
 
+/* Energy per beam */
+.runs-table .runsPerPeriod-energy_per_beam-cell, .runs-table .runsPerPeriod-energy_per_beam-header,
+.runs-table .runsPerDataPass-energy_per_beam-cell, .runs-table .runsPerDataPass-energy_per_beam-header {
+    min-width: 100px;
+    text-align: right;
+}
+
+/* Fill number */
+.runs-table .runsPerPeriod-fill_number-cell, .runs-table .runsPerPeriod-fill_number-header,
+.runs-table .runsPerDataPass-fill_number-cell, .runs-table .runsPerDataPass-fill_number-header {
+    min-width: 100px;
+    text-align: right;
+}
+
+/* L3 current */
+.runs-table .runsPerPeriod-l3_current-cell, .runs-table .runsPerPeriod-l3_current-header,
+.runs-table .runsPerDataPass-l3_current-cell, .runs-table .runsPerDataPass-l3_current-header {
+    min-width: 100px;
+    text-align: right;
+}
+
+/* Dipole current */
+.runs-table .runsPerPeriod-dipole_current-cell, .runs-table .runsPerPeriod-dipole_current-header,
+.runs-table .runsPerDataPass-dipole_current-cell, .runs-table .runsPerDataPass-dipole_current-header {
+    min-width: 100px;
+    text-align: right;
+}
+
+/* Tof detector
+.runsPerPeriod-tof_detector-header {
+    min-width: 100px;
+}
+*/
+
 .runs-table td:last-child, .runs-table th:last-child {
     padding-right: 2em;
 }

app/public/views/serviceUnavailableView.js

@@ -14,7 +14,7 @@
 import { h } from '/js/src/index.js';
 
 export default function serviceUnavailablePanel(model) {
-    let submodel = model.submodels[model.mode];
+    const submodel = model.submodels[model.mode];
     const retryBtn = h('button.btn.btn-primary.m3', { onclick: () => submodel.retry() }, 'Retry');
     const title = h('h1.primary', 'Run Condition Table');
     const subtitle = h('h3', 'Service temporarily unavailable');

app/public/views/userView.js

@@ -16,10 +16,9 @@ import { h } from '/js/src/index.js';
 import header from '../components/common/header.js';
 import dataPanel from '../components/userView/data/dataPanel.js';
 import sidebar from '../components/userView/sidebar/sidebar.js';
-import { PREFIX, ROLES } from '../workflow/constants.js';
 
 export default function userPanel(model) {
-    let submodel = model.submodels[model.mode];
+    const submodel = model.submodels[model.mode];
     return h('.flex-column.absolute-fill', [
         h('header.shadow-level2.level2', [header(submodel)]),
         h('.flex-grow.flex-row.outline-gray', [

app/public/workflow/constants.js

@@ -10,33 +10,32 @@
  * 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.
-*/
+ */
 
 const PREFIX = {
-  SSO_DET_ROLE: 'det-'
+    SSO_DET_ROLE: 'det-',
 };
 
 const ROLES = Object.freeze({
-  Admin: 'admin',
-  Global: 'global',
-  DetectorCPV: 'det-cpv',
-  DetectorEMC: 'det-emc',
-  DetectorFFD: 'det-fdd',
-  DetectorFT0: 'det-ft0',
-  DetectorFV0: 'det-fv0',
-  DetectorGLO: 'det-glo',
-  DetectorHMP: 'det-hmp',
-  DetectorITS: 'det-its',
-  DetectorMCH: 'det-mch',
-  DetectorMFT: 'det-mft',
-  DetectorMID: 'det-mid',
-  DetectorPHS: 'det-phs',
-  DetectorTOF: 'det-tof',
-  DetectorTPC: 'det-tpc',
-  DetectorTRD: 'det-trd',
-  DetectorZDC: 'det-zdc',
-  Guest: 'guest'
+    Admin: 'admin',
+    Global: 'global',
+    DetectorCPV: 'det-cpv',
+    DetectorEMC: 'det-emc',
+    DetectorFFD: 'det-fdd',
+    DetectorFT0: 'det-ft0',
+    DetectorFV0: 'det-fv0',
+    DetectorGLO: 'det-glo',
+    DetectorHMP: 'det-hmp',
+    DetectorITS: 'det-its',
+    DetectorMCH: 'det-mch',
+    DetectorMFT: 'det-mft',
+    DetectorMID: 'det-mid',
+    DetectorPHS: 'det-phs',
+    DetectorTOF: 'det-tof',
+    DetectorTPC: 'det-tpc',
+    DetectorTRD: 'det-trd',
+    DetectorZDC: 'det-zdc',
+    Guest: 'guest',
 });
-  
-export {PREFIX, ROLES};
-  
+
+export { PREFIX, ROLES };