ORCT-114 ORCT-103 ORCT-100 UI improvements

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

@@ -12,20 +12,22 @@
  * or submit itself to any jurisdiction.
  */
 
+import { h } from '/js/src/index.js';
+
 const runsViews = {
     name: 'Name',
-    run_number: 'Run number',
+    run_number: 'Run',
     time_start: 'Start time',
     time_end: 'End time',
     time_trg_start: 'Trg. start',
     time_trg_end: 'Trg. end',
-    center_of_mass_energy: 'Center of mass energy [GeV]',
+    center_of_mass_energy: h('.center-of-mass-energy'),
     ir: 'IR [Hz]',
     filling_scheme: 'Filling scheme',
     triggers_conf: 'Triggers conf.',
-    fill_number: 'Fill number',
+    fill_number: 'Fill',
     run_type: 'Run type',
-    mu: 'Mu',
+    mu: '\u03BC',
     l3_current: 'L3 curr. [A]',
     dipole_current: 'Dipole curr. [A]',
 };
@@ -36,7 +38,7 @@ const dpViews = {
     pass_type: 'Type',
     jira: 'Jira',
     ml: 'ML',
-    number_of_events: 'Events number',
+    number_of_events: 'Events',
     software_version: 'Soft. version',
     size: 'Size',
 };
@@ -47,7 +49,7 @@ const mcViews = {
     jira: 'Jira',
     ml: 'ML',
     pwg: 'PWG',
-    number_of_events: 'Events number',
+    number_of_events: 'Events',
 };
 
 const headersSpecials = {

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

@@ -81,9 +81,8 @@ pagesCellsSpecials[PN.periods] = {
 
 pagesCellsSpecials[PN.dataPasses] = {
     name: (model, item) => [
-        item.name,
-        '  ',
-        viewButton(
+        h('td', item.name),
+        h('td', viewButton(
             model,
             'runs',
             (e) => model.handleClick(e),
@@ -98,7 +97,7 @@ pagesCellsSpecials[PN.dataPasses] = {
             '',
             // eslint-disable-next-line max-len
             `/?page=${PN.anchoragePerDatapass}&index=${item.name}&${DRP.rowsOnSite}=50&${DRP.site}=1&sorting=-name`,
-        ),
+        )),
     ],
     size: (model, item) => getReadableFileSizeString(Number(item.size)),
 };

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

@@ -97,7 +97,6 @@ const createClickableLabel = (model, field) =>
             },
             className: field.marked ? 'active' : '',
         },
-        h(`${field.marked ? '.eye-20' : '.hide-20'}`),
         getHeaderSpecial(model, field),
         h('span.tooltiptext', field.marked ? 'hide' : 'display')));
 

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

@@ -13,43 +13,28 @@
  */
 
 import { h } from '/js/src/index.js';
-import { filterApplicableHeader, getHeaderSpecial, headerSpecPresent, nonDisplayable } from '../headersSpecials.js';
-import { sort } from '../../../../utils/sort.js';
+import { getHeaderSpecial, headerSpecPresent, nonDisplayable } from '../headersSpecials.js';
 
 export default function tableHeader(visibleFields, data, model) {
     return h('thead',
         h('tr', [rowsOptions(model, data)].concat(columnsHeadersArray(visibleFields, data, model))));
 }
 
 const columnsHeadersArray = (visibleFields, data, model) =>
-    visibleFields.map((f) => h(`th.${model.getCurrentDataPointer().page}-${f.name.includes('detector') ? 'detector' : f.name}-header`, {
-        scope: 'col',
-    }, h('.relative', [
-        headerSpecPresent(model, f) !== nonDisplayable ? [
-            h('.inline', getHeaderSpecial(model, f)),
-            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'
-                                : '',
-                        })))
+    visibleFields.map((f) => [
+        h(`th.${model.getCurrentDataPointer().page}-${f.name.includes('detector') ? 'detector' : f.name}-header`, {
+            scope: 'col',
+        }, h('.relative', [
+            headerSpecPresent(model, f) !== nonDisplayable ?
+                h('.inline', getHeaderSpecial(model, f))
                 : '',
-        ] : '',
-    ])));
+        ])),
+    ]);
 
 const rowsOptions = (model, data) =>
     h('th', { scope: 'col' },
         h('.relative',
-            h(`input.abs-center${data.rows.every((r) => r.marked) ? '.ticked' : ''}`, {
+            h(`input.hidden.abs-center${data.rows.every((r) => r.marked) ? '.ticked' : ''}`, {
                 type: 'checkbox',
                 onclick: (e) => {
                     for (const row of data.rows) {

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

@@ -61,7 +61,7 @@ export default function noDataView(
     const noDataMessage = h('h3', 'No data found');
     const noDataExplanation = h('h5', `${
         dataPointer.page === pagesNames.periods
-            ? 'Please sysnchronize with outer services'
+            ? 'Please synchronize with outer services'
             : 'There is no data to be displayed here'
     }`);
 

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

@@ -18,26 +18,27 @@ import { reduceSerialIf } from '../../../../utils/utils.js';
 // eslint-disable-next-line no-unused-vars
 const detectorIcon = (model, item, n) =>
     h('.tooltip.noBorderBottom.pointer',
-        h('svg', { width: '50px', height: '50px' },
+        h('svg', { width: '20px', height: '20px' },
             h('circle',
                 {
                     cx: '50%',
                     cy: '50%',
-                    r: '15px',
+                    r: '8px', //
 
                     /*
                      *Stroke: '#F7B538', strokes for the limited acceptance flags only
                      *'stroke-width': '3',
                      */
                     fill: '#8CB369',
+                    // Content: '99',
                 })),
         h('span.detector-tooltip-field', `run_det_id: ${item[n]}`));
 
 export default function row(
     model, visibleFields, data, item, cellsSpecials,
 ) {
     const rowDivDef = reduceSerialIf(
-        'tr.track', ['', '.d-none'], ['.row-selected-color-alpha', ''],
+        'tr.track', ['.row-unselected-color-alpha', '.d-none'], ['.row-selected-color-alpha', ''],
         [!item.marked, data.hideMarkedRecords && item.marked], (a, b) => a + b,
     );
 

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

@@ -0,0 +1,54 @@
+/**
+ * @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';
+import { filterApplicableHeader, headerSpecPresent } from '../headersSpecials.js';
+import { sort } from '../../../../utils/sort.js';
+
+export default function sortingRow(visibleFields, data, model) {
+    return h('thead',
+        h('tr', [rowsOptions(model, data)].concat(columnsHeadersArray(visibleFields, data, model))));
+}
+
+const columnsHeadersArray = (visibleFields, data, model) =>
+    visibleFields.map((f) => [
+        h(`th.${model.getCurrentDataPointer().page}-${f.name.includes('detector') ? 'detector' : f.name}-header`, {
+            scope: 'col',
+        }, h('.relative', [
+            headerSpecPresent(model, f) === filterApplicableHeader ? [
+                h('.inline', data.sorting.order === -1 ?
+                    h('div.sort-up-20.pointer', {
+                        onclick: () => sort(f.name, data, model, -data.sorting.order),
+                    }) :
+
+                    h('div.sort-down-20.pointer', {
+                        onclick: () => sort(f.name, data, model, -data.sorting.order),
+                    })),
+            ] : '',
+        ])),
+    ]);
+
+const rowsOptions = (model, data) =>
+    h('th', { scope: 'col' },
+        h('.relative',
+            h(`input.abs-center${data.rows.every((r) => r.marked) ? '.ticked' : ''}`, {
+                type: 'checkbox',
+                onclick: (e) => {
+                    for (const row of data.rows) {
+                        row.marked = e.target.checked;
+                    }
+                    model.notify();
+                },
+                checked: data.rows.every((r) => r.marked),
+            })));

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

@@ -24,6 +24,7 @@ import filter from './filter.js';
 import noDataView from './noDataView.js';
 
 import { RCT } from '../../../../config.js';
+import sortingRow from './sortingRow.js';
 const { pagesNames } = RCT;
 
 /**
@@ -67,6 +68,7 @@ export default function tablePanel(model) {
                                         : ''}`,
                     }, [
                         tableHeader(visibleFields, data, model),
+                        sortingRow(visibleFields, data, model),
                         tableBody(model, visibleFields, data, cellsSpecials, dataPointer.page),
                     ])),
                 pager(model, data, 2))

app/public/components/userView/sidebar/multiButtonController.js

@@ -12,7 +12,7 @@
  * or submit itself to any jurisdiction.
  */
 
-import { h, iconShareBoxed, iconReload, iconTrash } from '/js/src/index.js';
+import { h, iconShareBoxed, iconReload, iconX } from '/js/src/index.js';
 
 export function multiButtonController(model, pageName, index) {
     const page = model.fetchedData[pageName];
@@ -106,7 +106,7 @@ const deletePageButton = (model, pageName, index) => h('a.menu-item', {
         model.fetchedData.delete(pageName, index);
         model.notify();
     },
-}, iconTrash());
+}, iconX());
 
 const reloadPageButton = (model, pageName, index, url) => h('a.menu-item', {
     onclick: () => {

app/public/index.html

@@ -15,8 +15,9 @@
 
 <!doctype html>
 <head>
-	<title>RCT prototype</title>
 	<link rel="stylesheet/less" type="text/css" href="styles/styles.less">
+	<link rel="icon" href="styles/images/favicon/favicon.ico">
 	<script src="scripts/less.js" type="text/javascript"></script>
 	<script type="module" src="index.js"></script>
+	<title>RCT prototype</title>
 </head>

app/public/styles/custom.css

@@ -138,11 +138,13 @@
     display: block !important;
     cursor: pointer;
     padding: 10px;
+    color: grey;
 }
 
 .clickable-label.active {
     background-color: var(--active-color);
     border-radius: 10px;
+    color: #1D3557;
 }
 
 .no-spacing {

app/public/styles/custom/filter/filter.css

@@ -4,6 +4,7 @@
     padding-top: 10px;
     background-color: var(--color-white);
     z-index: 2 !important;
+    font-size: xx-small;
 }
 
 .filter-panel-content {

app/public/styles/custom/table.css

@@ -29,10 +29,15 @@
     position: relative !important;
 }
 
-.track:hover {
+.track.row-unselected-color-alpha:hover {
     background-color: var(--active-color) !important;
 }
 
+.track.row-unselected-color-alpha:hover td {
+    background-color: var(--active-color) !important;
+}
+
+
 .track.row-selected-color-alpha:hover {
     background-color: var(--focus-color) !important;
 }
@@ -41,8 +46,23 @@ table tbody tr.row-selected-color-alpha {
     background-color: var(--row-selected-color);
 }
 
+
+tbody tr.track.row-unselected-color-alpha:nth-child(odd) td {
+    background-color: var(--color-gray-lighter);
+}
+
 table.data-table thead {
-    height: 50px;
+    height: 50px !important;
+    font-size: x-small;
+}
+
+table.data-table tbody tr {
+    max-height: 20px !important;
+
+    margin: 0em !important;
+    padding: 0em !important;
+
+    font-size: xx-small !important;
 }
 
 input[type="checkbox"] {
@@ -56,6 +76,7 @@ input[type="checkbox"] {
     border: 0.15em solid var(--color-gray) !important;
     display: grid;
     place-content: center;
+    cursor: pointer;
 }
 
 input[type="checkbox"].ticked {

app/public/styles/custom/tables/data-passes.css

@@ -46,6 +46,10 @@
     text-align: left;
 }
 
+.data-passes-table .dataPasses-name-cell :first-child {
+    margin-left: 80px;
+}
+
 /* Description */
 .data-passes-table .dataPasses-description-cell, .data-passes-table .dataPasses-description-header {
     min-width: 300px;

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

@@ -46,12 +46,6 @@
     text-align: left;
 }
 
-/*
-.periods-table .periods-name-cell a {
-    background-color: var(--focus-color);
-}
-*/
-
 .periods-table .periods-name-cell :first-child {
     margin-left: 80px;
 }