ORCT-126 Flags assignment dialog

app/config/public.js

@@ -12,14 +12,14 @@
  * or submit itself to any jurisdiction.
  */
 
-const { roles, flags: flagsTypes, detectors, pageNames, filterTypes, filterInputTypes, fieldNames } = require('./rct-data');
+const { roles, detectors, pageNames, filterTypes, filterInputTypes, fieldNames, quality } = require('./rct-data');
 
 module.exports = { // Properties that will be provided to frontend in the public folder
     filterTypes: filterTypes,
     filterInputTypes: filterInputTypes,
 
     roles,
-    flagsTypes,
+    quality,
     endpoints: {
         login: '/login/',
         logout: '/logout/',
@@ -58,21 +58,9 @@ module.exports = { // Properties that will be provided to frontend in the public
     pageNames: pageNames,
     fieldNames: fieldNames,
 
-    operationsNames: {
-        flag_insert: 'flags_insert',
-        flag_delete: 'flag_delete',
-        flag_update: 'flag_update',
-        verification_insert: 'verification_insert',
-    },
-
     detectors: detectors,
     themes: {
         ehevi: 'ehevi',
         webui: 'webui',
     },
-    flagReasonColors: {
-        neutral: '277DA1',
-        bad: '922C40',
-        limitedAcceptance: 'DC9750',
-    },
 };

app/config/rct-data/healthcheckQueries.js

@@ -13,7 +13,7 @@
  */
 
 const detectors = require('./detectors.js').sort();
-const flags = require('./flags.json');
+const flags = require('./quality/flags.json');
 const physicalParticlesData = require('./physicalParticlesData.js');
 
 const checkStaticData = {

app/config/rct-data/index.js

@@ -17,11 +17,11 @@ const { viewTypes, pagesViewGroups } = require('./viewTypes.js');
 const fieldNames = require('./fieldNames.js');
 const { filterTypes, filterInputTypes } = require('./filterTypes.js');
 const detectors = require('./detectors.js').sort();
-const flags = require('./flags.json');
 const roles = require('./roles.js');
 const physicalParticlesData = require('./physicalParticlesData.js');
 const beamTypesMappings = require('./beamTypesMappings.js');
 const healthcheckQueries = require('./healthcheckQueries.js');
+const quality = require('./quality');
 
 module.exports = {
     pageNames,
@@ -32,7 +32,7 @@ module.exports = {
     filterInputTypes,
     detectors,
     roles,
-    flags,
+    quality,
     physicalParticlesData,
     beamTypesMappings,
     ...healthcheckQueries,

app/config/rct-data/quality/flagReasonColors.js

@@ -0,0 +1,21 @@
+/**
+ * @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.
+ */
+
+const flagReasonColors = {
+    neutral: '277DA1',
+    bad: '922C40',
+    limitedAcceptance: 'DC9750',
+};
+
+module.exports = flagReasonColors;

app/config/rct-data/quality/index.js

@@ -0,0 +1,23 @@
+/**
+ * @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.
+ */
+
+const flags = require('./flags.json');
+const runBasedQuality = require('./quality.js');
+const flagReasonColors = require('./flagReasonColors.js');
+
+module.exports = {
+    runBasedQuality: runBasedQuality,
+    flags: flags,
+    flagReasonColors: flagReasonColors,
+};

app/config/rct-data/quality/quality.js

@@ -0,0 +1,20 @@
+/**
+ * @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.
+ */
+
+const runBasedQuality = {
+    good: 'good',
+    bad: 'bad',
+};
+
+module.exports = runBasedQuality;

app/public/components/chips/linkChip.js

@@ -0,0 +1,22 @@
+/**
+ * @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 linkChip(navigation, label, href) {
+    return h('a.btn.chip.m1.no-text-decoration', {
+        onclick: (e) => navigation.handleLinkEvent(e),
+        href: href,
+    }, label);
+}

app/public/components/detectors/detectorIcon.js

@@ -12,27 +12,35 @@
  * or submit itself to any jurisdiction.
  */
 
+import qcTypeSelection from '../../views/runs/runsPerDataPass/overview/qcTypeSelection.js';
 import { h } from '/js/src/index.js';
+import { RCT } from '../../config.js';
+const { runBasedQuality } = RCT.quality;
 
-export default function detectorIcon(model, item, n, index, detectorName) {
-    const flagsUrl = `/?page=flags&data_pass_name=${index}&run_numbers=${item.run_number}&detector=${detectorName}&rows-on-site=50&site=1`;
-
-    return h('button.btn.transparent.tooltip.no-border-bottom.pointer', {
-        onclick: () => {
-            model.router.go(flagsUrl);
-        } },
-    h('svg', { width: '20px', height: '20px' },
-        h('circle',
-            {
-                cx: '50%',
-                cy: '50%',
-                r: '8px', //
-
-                /*
-                 *Stroke: '#F7B538', strokes for the limited acceptance flags only
-                 *'stroke-width': '3',
-                 */
-                fill: '#8CB369',
-            })),
-    h('span.detector-tooltip-field', `run_det_id: ${item[n]}`));
+export default function detectorIcon(navigation, item, index, detectorName, timeBased = 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))),
+        h('button.btn.no-border-bottom.pointer.run-quality.good', {
+            id: runDetectorId,
+            onclick: () => {
+                document.getElementById(runBasedQcModalId).style.display = 'block';
+                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(runBasedQcModalId)) {
+                        document.getElementById(runBasedQcModalId).style.display = 'none';
+                    }
+                });
+            } },
+        runBasedQuality.good),
+    ];
 }

app/public/components/flags/flagsVisualization.js

@@ -15,7 +15,7 @@
 import { h } from '/js/src/index.js';
 import flagVisualization from './flagVisualization.js';
 import { RCT } from '../../../../config.js';
-const { flagReasonColors } = RCT;
+const { flagReasonColors } = RCT.quality;
 
 function filterDistinct(a) {
     return a.filter((value, index, array) => array.indexOf(value) === index);

app/public/components/sidebar/sidebarItem.js

@@ -13,23 +13,25 @@
  */
 
 import { h } from '/js/src/index.js';
-import subPagesCount from './subPagesCount.js';
 
 export default function sidebarItem(model, pageName, label) {
+    const subPagesCount = model.getSubPagesCount(pageName);
+    const displayedSubPagesCount = subPagesCount > 0 ? ` (${subPagesCount})` : '';
+
     return h('.flex-wrap', [
         h('.page-title', {
             class: model.router.params.page === pageName ? 'selected' : '',
-            onclick: () => model.goToDefaultPageUrl(pageName),
+            onclick: () => model.navigation.goToDefaultPageUrl(pageName),
         },
         model.router.params.page === pageName
             ? h('div',
                 h('.vertical-center',
                     h('.current-page',
                         h('.title-text-relative.hidden', label))),
                 h('.folder-20.vertical-center'),
-                h('.title-text.vertical-center', label, subPagesCount(model, pageName)))
+                h('.title-text.vertical-center', label, displayedSubPagesCount))
             : h('div',
                 h('.folder-20.vertical-center'),
-                h('.title-text.vertical-center', label, subPagesCount(model, pageName)))),
+                h('.title-text.vertical-center', label, displayedSubPagesCount))),
     ]);
 }