Flag view refactor

app/public/Model.js

@@ -16,6 +16,8 @@ import { Observable, sessionService, QueryRouter, Loader } from '/js/src/index.j
 import PrimaryModel from './model/PrimaryModel.js';
 import ServiceUnavailableModel from './model/ServiceUnavailableModel.js';
 import { RCT } from './config.js';
+import Flags from './views/flags/Flags.js';
+import Detectors from './views/detectors/Detectors.js';
 const { roles } = RCT;
 
 export default class Model extends Observable {
@@ -35,6 +37,12 @@ export default class Model extends Observable {
         this.mode = null;
         this.submodels = {};
 
+        this.flags = new Flags(this);
+        this.flags.bubbleTo(this);
+
+        this.detectors = new Detectors(this);
+        this.detectors.bubbleTo(this);
+
         this.logginEndpoint = '/api/login/';
         this.login('physicist');
     }

app/public/components/userView/data/table/indexChip.js → app/public/components/chips/indexChip.js

@@ -13,7 +13,7 @@
  */
 
 import { h } from '/js/src/index.js';
-import { RCT } from '../../../../config.js';
+import { RCT } from '../../config.js';
 const { dataReqParams, pageNames } = RCT;
 
 export default function indexChip(model, index) {

app/public/components/detectors/detectorIcon.js

@@ -0,0 +1,38 @@
+/**
+ * @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 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]}`));
+}

app/public/components/common/flagBreadcrumbs.js → app/public/components/flags/flagBreadcrumbs.js

@@ -13,8 +13,8 @@
  */
 
 import { h } from '/js/src/index.js';
-import flagsIndexChip from '../userView/data/table/flagsIndexChip.js';
-import title from '../userView/data/table/title.js';
+import flagsIndexChip from './flagsIndexChip.js';
+import title from '../../views/userView/data/table/title.js';
 
 export default function flagBreadCrumbs(model, dataPass, run, detector) {
     return [

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

@@ -13,7 +13,7 @@
  */
 
 import { h } from '/js/src/index.js';
-import { RCT } from '../../../config.js';
+import { RCT } from '../../config.js';
 import sidebarItem from './sidebarItem.js';
 const { pageNames } = RCT;
 

app/public/components/userView/data/pager.js → app/public/components/table/pager.js

@@ -12,11 +12,11 @@
  * or submit itself to any jurisdiction.
  */
 
-import viewButton from '../../common/viewButton.js';
-import { replaceUrlParams } from '../../../utils/utils.js';
+import viewButton from '../common/viewButton.js';
+import { replaceUrlParams } from '../../utils/utils.js';
 import { h, iconChevronBottom } from '/js/src/index.js';
-import itemsCounter from './table/items-counter.js';
-import { RCT } from '../../../config.js';
+import itemsCounter from '../../views/userView/data/table/items-counter.js';
+import { RCT } from '../../config.js';
 
 const { site } = RCT.dataReqParams;
 

app/public/views/detectors/Detectors.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * 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, RemoteData } from '/js/src/index.js';
+import { RCT } from '../../config.js';
+const { detectors } = RCT;
+
+/**
+ * Model representing handlers for the detectors page
+ *
+ * @implements {OverviewModel}
+ */
+export default class Detectors extends Observable {
+    /**
+     * The constructor of the Overview model object
+     *
+     * @param {Model} model Pass the model to access the defined functions
+     */
+    constructor(model) {
+        super();
+        this.model = model;
+        this._detectors = RemoteData.NotAsked();
+    }
+
+    getDetectors() {
+        return this._detectors;
+    }
+
+    getDetectorName(detectorCode) {
+        if (!detectorCode) {
+            return 'no detector code';
+        }
+        const [detectorName] = detectorCode.split('_');
+        const known = detectors.find((detector) => detector === detectorName.toUpperCase());
+        return known ? known : `${detectorName.toUpperCase()}-unknown`;
+    }
+}

app/public/views/flags/Flags.js

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * 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, RemoteData } from '/js/src/index.js';
+import { RCT } from '../../config.js';
+const { pageNames: PN } = RCT;
+
+/**
+ * Model representing handlers for the flags page
+ *
+ * @implements {OverviewModel}
+ */
+export default class Flags extends Observable {
+    /**
+     * The constructor of the Overview model object
+     *
+     * @param {Model} model Pass the model to access the defined functions
+     */
+    constructor(model) {
+        super();
+        this.model = model;
+        this._flags = RemoteData.NotAsked();
+    }
+
+    /*
+     *Async fetchAllFlags() {
+     *    this.notify();
+     *}
+     */
+
+    getAllFlags() {
+        const submodel = this.model.submodels[this.model.mode];
+        const [flagsDataIndex] = Object.keys(submodel.fetchedData[PN.flags]);
+        return submodel.fetchedData[PN.flags][flagsDataIndex].payload.rows;
+    }
+
+    /*
+     *GetFlags() {
+     *    return this._flags;
+     *}
+     */
+
+    getFlags(runNumber, detector) {
+        const allFlags = this.getAllFlags();
+        const flags = Array.isArray(allFlags) ? allFlags : [];
+        return flags.filter((e) => e.detector === detector && e.run_number.toString() === runNumber.toString());
+    }
+}

app/public/components/userView/data/flags/flagsPanel.js → app/public/views/flags/overview/flagsPanel.js

@@ -13,23 +13,25 @@
  */
 
 import { h, iconDataTransferDownload, iconReload, iconShareBoxed } from '/js/src/index.js';
-import filter from '../table/filtering/filter.js';
+import filter from '../../userView/data/table/filtering/filter.js';
 import downloadCSV from '../../../../utils/csvExport.js';
-import pageSettings from '../pageSettings/pageSettings.js';
-import flagsVisualization from './flagsVisualization.js';
+import pageSettings from '../../userView/data/pageSettings/pageSettings.js';
+import flagsVisualization from '../visualization/flagsVisualization.js';
 import flagsTable from './flagsTable.js';
-import flagBreadCrumbs from '../../../common/flagBreadcrumbs.js';
-import detectorName from './detectorName.js';
+import flagBreadCrumbs from '../../../../components/flags/flagBreadcrumbs.js';
 import { defaultRunNumbers } from '../../../../utils/defaults.js';
-import noSubPageSelected from '../table/noSubPageSelected.js';
+import noSubPageSelected from '../../userView/data/table/noSubPageSelected.js';
 
-export default function flagsPanel(model) {
+export default function flagsPanel(model, detectors, flags) {
     const urlParams = model.router.getUrl().searchParams;
 
     const dataPassName = urlParams.get('data_pass_name');
     const run = urlParams.get('run_numbers');
     const detector = urlParams.get('detector');
 
+    const detectorName = detectors.getDetectorName(detector);
+    const flagsData = flags.getFlags(run, detectorName);
+
     const functionalities = (model) => h('.btn-group',
         h('button.btn.btn-secondary.icon-only-button', {
             onclick: () => {
@@ -63,7 +65,7 @@ export default function flagsPanel(model) {
         ? h('div.main-content', [
             h('div.flex-wrap.justify-between.items-center',
                 h('div.flex-wrap.justify-between.items-center',
-                    flagBreadCrumbs(model, dataPassName, run, detectorName(detector)),
+                    flagBreadCrumbs(model, dataPassName, run, detectorName),
                     h('button.btn.btn-secondary', {
                         onclick: () => {
                             document.getElementById('pageSettingsModal').style.display = 'block';
@@ -82,8 +84,8 @@ export default function flagsPanel(model) {
                 h('div', functionalities(model))),
             model.searchFieldsVisible ? filter(model) : '',
 
-            flagsVisualization(model, dataPassName, run, detectorName(detector)),
-            flagsTable(model, run, detectorName(detector)),
+            flagsVisualization(model, dataPassName, run, flagsData),
+            flagsTable(model, flagsData),
             h('.modal', { id: 'pageSettingsModal' },
                 h('.modal-content.abs-center.p3', {
                     id: 'pageSettingsModalContent',

app/public/components/userView/data/flags/flagsTable.js → app/public/views/flags/overview/flagsTable.js

@@ -14,22 +14,14 @@
 
 import { h } from '/js/src/index.js';
 import { RCT } from '../../../../config.js';
-import flagsTableHeader from './table/flagsTableHeader.js';
-import flagsTableRow from './table/flagsTableRow.js';
-import pagesCellsSpecials from '../pagesCellsSpecials.js';
+import flagsTableHeader from '../table/flagsTableHeader.js';
+import flagsTableRow from '../table/flagsTableRow.js';
+import pagesCellsSpecials from '../../userView/data/pagesCellsSpecials.js';
 const { pageNames: PN } = RCT;
 
-export default function flagsTable(model, run, detector) {
-    const [flagsDataIndex] = Object.keys(model.fetchedData[PN.flags]);
-    const { rows } = model.fetchedData[PN.flags][flagsDataIndex].payload;
+export default function flagsTable(model, flagsData) {
     const cellsSpecials = pagesCellsSpecials[PN.flags];
 
-    if (!Array.isArray(rows)) {
-        return '';
-    }
-
-    const flagsData = rows.filter((e) => e.detector === detector && e.run_number.toString() === run.toString());
-
     return flagsData.length > 0
         ? h('.p-top-10',
             h('.x-scrollable-table.border-sh',
@@ -41,7 +33,7 @@ export default function flagsTable(model, run, detector) {
 
                     h('tbody', { id: 'table-body-flagsData' },
                         flagsData.map((item) => flagsTableRow(
-                            model, item, cellsSpecials,
+                            PN.flags, item, cellsSpecials,
                         ))),
                 ])))
         : '';

app/public/components/userView/data/flags/table/flagsTableHeader.js → app/public/views/flags/table/flagsTableHeader.js

@@ -13,7 +13,7 @@
  */
 
 import { h } from '/js/src/index.js';
-import { getHeaderSpecial, headerSpecPresent, nonDisplayable } from '../../headersSpecials.js';
+import { getHeaderSpecial, headerSpecPresent, nonDisplayable } from '../../userView/data/headersSpecials.js';
 import fields from './fields.js';
 
 export default function flagsTableHeader(model) {

app/public/components/userView/data/flags/table/flagsTableRow.js → app/public/views/flags/table/flagsTableRow.js

@@ -16,17 +16,17 @@ import { h } from '/js/src/index.js';
 import fields from './fields.js';
 
 export default function flagsTableRow(
-    model, item, cellsSpecials,
+    page, item, cellsSpecials,
 ) {
     const displayedFields = fields.filter((e) => e.display === true);
 
     const dataCells = displayedFields.map((field) =>
-        h(`td.${model.getCurrentDataPointer().page}-${field.name}-cell.text-ellipsis`,
+        h(`td.${page}-${field.name}-cell.text-ellipsis`,
             item[field.name]
                 ? cellsSpecials[field.name]
-                    ? cellsSpecials[field.name](model, item)
+                    ? cellsSpecials[field.name](item)
                     : item[field.name]
-                : '..'));
+                : ''));
 
     return h('tr.track.row-not-selected', dataCells);
 }

app/public/components/userView/data/flags/flagsVisualization.js → app/public/views/flags/visualization/flagsVisualization.js

@@ -12,8 +12,8 @@
  * or submit itself to any jurisdiction.
  */
 
-import flagVisualization from './flagVisualization.js';
 import { h } from '/js/src/index.js';
+import flagVisualization from '../../../components/flags/flagVisualization.js';
 import { RCT } from '../../../../config.js';
 const { pageNames: PN } = RCT;
 
@@ -30,20 +30,11 @@ const dateFormatter = (sec) => {
     return h('', h('.skinny', dateString), timeString);
 };
 
-export default function flagsVisualization(model, dataPass, run, detector) {
+export default function flagsVisualization(model, dataPass, run, flagsData) {
     const runData = model.fetchedData[PN.runsPerDataPass][dataPass].payload.rows.find((e) => e.run_number.toString() === run.toString());
     const { time_start, time_end } = runData;
 
-    const [flagsDataIndex] = Object.keys(model.fetchedData[PN.flags]);
-    const flagsData = model.fetchedData[PN.flags][flagsDataIndex].payload.rows;
-
-    if (!Array.isArray(flagsData)) {
-        return '';
-    }
-
-    const filteredFlagsData = flagsData.filter((e) => e.detector === detector && e.run_number.toString() === run.toString());
-
-    const distinctFlagReasons = filterDistinct(filteredFlagsData.map((flag) => flag.flag_reason.replace(/\s+/g, '')));
+    const distinctFlagReasons = filterDistinct(flagsData.map((flag) => flag.flag_reason.replace(/\s+/g, '')));
 
     const flagsGroupedByFlagReason = distinctFlagReasons.reduce((prev, curr) => {
         prev[curr] = flagsData.filter((flag) => flag.flag_reason.replace(/\s+/g, '') === curr);