AliceO2Group · xsalonx · Jul 11, 2023 · Jul 11, 2023 · Jul 11, 2023 · Jul 11, 2023
diff --git a/app/lib/database/views/anchorage_per_data_pass_view.js b/app/lib/database/views/anchorage_per_data_pass_view.js
@@ -29,4 +29,4 @@ const anchorage_per_data_pass_view = (query) => `
         WHERE dp.name = '${query.index}'
     `;
 
-module.exports = anchorage_per_data_pass_view;
+module.exports = anchorage_per_data_pass_view;
diff --git a/app/lib/database/views/anchored_per_mc_view.js b/app/lib/database/views/anchored_per_mc_view.js
@@ -30,4 +30,4 @@ const anchored_per_mc_view = (query) => `
         WHERE sp.name = '${query.index}'
     `;
 
-module.exports = anchored_per_mc_view;
+module.exports = anchored_per_mc_view;
diff --git a/app/lib/database/views/data_passes_view.js b/app/lib/database/views/data_passes_view.js
@@ -26,4 +26,4 @@ const data_passes_view = (query) => `
         WHERE dp.period_id = (SELECT id from periods WHERE name ='${query.index}')
         `;
 
-module.exports = data_passes_view;
+module.exports = data_passes_view;
diff --git a/app/lib/database/views/flags_view.js b/app/lib/database/views/flags_view.js
@@ -21,7 +21,7 @@ const flags_view = (query) => {
     } else if (typeof(rn) === 'string') {
         rn_sql = rn
     } else {
-        throw `run_number seems to be incorrect ${rn}`
+        throw `run_numbers seems to be incorrect ${rn}`
     }
 
     let det_sql = "";
@@ -62,4 +62,4 @@ const flags_view = (query) => {
     `;
 }
 
-module.exports = flags_view;
+module.exports = flags_view;
diff --git a/app/lib/database/views/mc_view.js b/app/lib/database/views/mc_view.js
@@ -34,4 +34,4 @@ const mc_view = (query) => `
                 )
         `;
 
-module.exports = mc_view;
+module.exports = mc_view;
diff --git a/app/public/components/userView/data/dataPanel.js b/app/public/components/userView/data/dataPanel.js
@@ -17,6 +17,9 @@ import tablePanel from './table/tablePanel.js';
 import spinnerAndReloadView from './fetchingStates/loading.js';
 import failureStatusAndReload from './fetchingStates/failure.js';
 import unknownError from './fetchingStates/unknown.js';
+import { RCT } from '../../../config.js';
+import flagsPanel from './flags/flagsPanel.js';
+const { pagesNames } = RCT;
 
 /**
  * Create vnode tablePanel if data are fetched otherwise shows spinner
@@ -31,7 +34,7 @@ export default function dataPanel(model) {
     return data ? data.match({
         NotAsked: () => h('', 'not asked'),
         Loading: () => spinnerAndReloadView(model),
-        Success: () => tablePanel(model),
+        Success: () => page === pagesNames.flags ? flagsPanel(model) : tablePanel(model),
         Failure: (status) => failureStatusAndReload(model, status),
     }) : unknownError(model);
 }
diff --git a/app/public/components/userView/data/flags/flagsPanel.js b/app/public/components/userView/data/flags/flagsPanel.js
@@ -0,0 +1,95 @@
+/**
+ * @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, iconDataTransferDownload, iconReload, iconShareBoxed } from '/js/src/index.js';
+import filter from '../table/filtering/filter.js';
+import downloadCSV from '../../../../utils/csvExport.js';
+import pageSettings from '../pageSettings/pageSettings.js';
+import flagsVisualization from './flagsVisualization.js';
+import flagsTable from './flagsTable.js';
+import flagBreadCrumbs from '../../../common/flagBreadcrumbs.js';
+import detectorName from './detectorName.js';
+import { defaultRunNumbers } from '../../../../utils/defaults.js';
+import noSubPageSelected from '../table/noSubPageSelected.js';
+
+export default function flagsPanel(model) {
+    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 functionalities = (model) => h('.btn-group',
+        h('button.btn.btn-secondary.icon-only-button', {
+            onclick: () => {
+                model.fetchedData.reqForData(true);
+                model.notify();
+            },
+        }, iconReload()),
+
+        h('button.btn.btn-secondary.icon-only-button', {
+            onclick: () => {
+                downloadCSV(model);
+            },
+        }, iconDataTransferDownload()),
+
+        h('button.btn.btn-secondary.icon-only-button', {
+            onclick: () => {
+                navigator.clipboard.writeText(model.router.getUrl().toString())
+                    .then(() => {
+                    })
+                    .catch(() => {
+                    });
+            },
+        }, iconShareBoxed()),
+
+        h('button.btn.icon-only-button', {
+            className: model.searchFieldsVisible ? 'btn-primary' : 'btn-secondary',
+            onclick: () => model.changeSearchFieldsVisibility(),
+        }, model.searchFieldsVisible ? h('.slider-20-off-white.abs-center') : h('.slider-20-primary.abs-center')));
+
+    return run > defaultRunNumbers
+        ? 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)),
+                    h('button.btn.btn-secondary', {
+                        onclick: () => {
+                            document.getElementById('pageSettingsModal').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('pageSettingsModal')) {
+                                    document.getElementById('pageSettingsModal').style.display = 'none';
+                                }
+                            });
+                        },
+                    }, h('.settings-20'))),
+
+                h('div', functionalities(model))),
+            model.searchFieldsVisible ? filter(model) : '',
+
+            flagsVisualization(model, dataPassName, run, detectorName(detector)),
+            flagsTable(model, run, detectorName(detector)),
+            h('.modal', { id: 'pageSettingsModal' },
+                h('.modal-content.abs-center.p3', {
+                    id: 'pageSettingsModalContent',
+                }, pageSettings(model, () => {
+                    document.getElementById('pageSettingsModal').style.display = 'none';
+                }))),
+        ])
+        : noSubPageSelected(model);
+}
diff --git a/app/public/components/userView/data/flags/flagsTable.js b/app/public/components/userView/data/flags/flagsTable.js
@@ -21,7 +21,7 @@ const { pagesNames: PN } = RCT;
 
 export default function flagsTable(model, run, detector) {
     const [flagsDataIndex] = Object.keys(model.fetchedData[PN.flags]);
-    const { fields, rows } = model.fetchedData[PN.flags][flagsDataIndex].payload;
+    const { rows } = model.fetchedData[PN.flags][flagsDataIndex].payload;
     const cellsSpecials = pagesCellsSpecials[PN.flags];
 
     if (!Array.isArray(rows)) {
@@ -37,13 +37,12 @@ export default function flagsTable(model, run, detector) {
                     id: 'flags-data-table',
                     className: 'flags-table',
                 }, [
-                    flagsTableHeader(fields, flagsData, model),
+                    flagsTableHeader(model),
 
                     h('tbody', { id: 'table-body-flagsData' },
-                        [''].concat(flagsData.map((item) => flagsTableRow(
-                            model, fields, flagsData, item, cellsSpecials,
-                        )))),
-
+                        flagsData.map((item) => flagsTableRow(
+                            model, item, cellsSpecials,
+                        ))),
                 ])))
         : '';
 }
diff --git a/app/public/components/userView/data/flags/flagsVisualization.js b/app/public/components/userView/data/flags/flagsVisualization.js
@@ -57,6 +57,8 @@ export default function flagsVisualization(model, dataPass, run, detector) {
                 return colors.limitedAcceptance;
             case 'Notbad':
                 return colors.neutral;
+            case 'CertifiedbyExpert':
+                return colors.neutral;
             case 'UnknownQuality':
                 return colors.neutral;
             default:
@@ -74,7 +76,7 @@ export default function flagsVisualization(model, dataPass, run, detector) {
             h('.flex-wrap.justify-between.items-center.pv1',
                 h('.w-10', ''),
                 h('.w-90.flex-wrap.justify-between.items-center',
-                    h('', dateFormatter(time_start), 'start'),
-                    h('', dateFormatter(time_end), 'end')))),
+                    h('', dateFormatter(time_start), h('.skinny', 'START')),
+                    h('', dateFormatter(time_end), h('.skinny', 'END'))))),
     ];
 }
diff --git a/app/public/components/userView/data/flags/table/fields.js b/app/public/components/userView/data/flags/table/fields.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.
+ */
+
+const fields = [
+    {
+        name: 'id',
+        display: false,
+    },
+    {
+        name: 'time_start',
+        display: true,
+    },
+    {
+        name: 'time_end',
+        display: true,
+    },
+    {
+        name: 'flag_reason',
+        display: true,
+    },
+    {
+        name: 'comment',
+        display: true,
+    },
+    {
+        name: 'run_number',
+        display: false,
+    },
+    {
+        name: 'detector',
+        display: false,
+    },
+    {
+        name: 'by',
+        display: true,
+    },
+    {
+        name: 'ver_time',
+        display: true,
+    },
+];
+
+export default fields;
diff --git a/app/public/components/userView/data/flags/table/flagsTableHeader.js b/app/public/components/userView/data/flags/table/flagsTableHeader.js
@@ -14,11 +14,13 @@
 
 import { h } from '/js/src/index.js';
 import { getHeaderSpecial, headerSpecPresent, nonDisplayable } from '../../headersSpecials.js';
+import fields from './fields.js';
 
-export default function flagsTableHeader(fields, data, model) {
+export default function flagsTableHeader(model) {
+    const displayedFields = fields.filter((e) => e.display === true);
     const columnsHeadersArray = (fields, model) =>
         fields.map((f) => [
-            h(`th.${model.getCurrentDataPointer().page}-header`, {
+            h(`th.${model.getCurrentDataPointer().page}-${f.name}-header`, {
                 scope: 'col',
             }, h('.relative', [
                 headerSpecPresent(model, f) !== nonDisplayable ?
@@ -27,20 +29,6 @@ export default function flagsTableHeader(fields, data, model) {
             ])),
         ]);
 
-    const rowsOptions = (model, data) =>
-        h('th', { scope: 'col' },
-            h('.relative',
-                h(`input.abs-center${data.every((r) => r.marked) ? '.ticked' : ''}`, {
-                    type: 'checkbox',
-                    onclick: (e) => {
-                        for (const row of data) {
-                            row.marked = e.target.checked;
-                        }
-                        model.notify();
-                    },
-                    checked: data.every((r) => r.marked),
-                })));
-
     return h('thead.header',
-        h('tr', [rowsOptions(model, data)].concat(columnsHeadersArray(fields, model))));
+        h('tr', columnsHeadersArray(displayedFields, model)));
 }
diff --git a/app/public/components/userView/data/flags/table/flagsTableRow.js b/app/public/components/userView/data/flags/table/flagsTableRow.js
@@ -13,33 +13,20 @@
  */
 
 import { h } from '/js/src/index.js';
-import { reduceSerialIf } from '../../../../../utils/utils.js';
+import fields from './fields.js';
 
-export default function (
-    model, fields, data, item, cellsSpecials,
+export default function flagsTableRow(
+    model, item, cellsSpecials,
 ) {
-    const rowDivDef = reduceSerialIf(
-        'tr.track', ['.row-not-selected', '.d-none'], ['.row-selected', ''],
-        [!item.marked, data.hideMarkedRecords && item.marked], (a, b) => a + b,
-    );
+    const displayedFields = fields.filter((e) => e.display === true);
 
-    const dataCells = fields.map((field) =>
+    const dataCells = displayedFields.map((field) =>
         h(`td.${model.getCurrentDataPointer().page}-${field.name}-cell`,
             item[field.name]
                 ? cellsSpecials[field.name]
                     ? cellsSpecials[field.name](model, item)
                     : item[field.name]
                 : '..'));
 
-    const checkbox = h('td.relative.track',
-        h(`input.abs-center${item.marked ? '.ticked' : ''}`, {
-            type: 'checkbox',
-            checked: item.marked,
-            onclick: () => {
-                model.fetchedData.changeItemStatus(item);
-                model.notify();
-            },
-        }));
-
-    return h(rowDivDef, [checkbox].concat(dataCells));
+    return h('tr.track.row-not-selected', dataCells);
 }
diff --git a/app/public/components/userView/data/flagsDataPanel.js b/app/public/components/userView/data/flagsDataPanel.js
@@ -80,7 +80,6 @@ export default function flagsDataPanel(model) {
 
             h('div', functionalities(model))),
         model.searchFieldsVisible ? filter(model) : '',
-        // AnyFiltersActive ? activeFilters(model) : '',
 
         flagsVisualization(model, dataPassName, run, detectorName(detector)),
         flagsTable(model, run, detectorName(detector)),

diff --git a/app/public/components/userView/data/table/tablePanel.js b/app/public/components/userView/data/table/tablePanel.js
@@ -127,7 +127,7 @@ export default function tablePanel(model) {
 
             data.rows?.length > 0
                 ? visibleFields.length > 0
-                    ? h('.p-top-10', //
+                    ? h('.p-top-10',
                         h('.x-scrollable-table.border-sh',
                             pager(model, data, false),
                             h('table', {

diff --git a/app/public/components/userView/sidebar/sidebar.js b/app/public/components/userView/sidebar/sidebar.js
@@ -37,7 +37,7 @@ export default function sidebar(model) {
                 sidebarItem(model, pagesNames.anchoredPerMC, 'Anchored per MC'),
                 sidebarItem(model, pagesNames.runsPerPeriod, 'Runs per period'),
                 sidebarItem(model, pagesNames.runsPerDataPass, 'Runs per Data pass'),
-                sidebarItem(model, pagesNames.flags, 'QA Expert Flagging')),
+                sidebarItem(model, pagesNames.flags, 'QA flags')),
 
             h('.sidebar-section',
                 h('.sidebar-section-title', 'Preferences'),

diff --git a/app/public/model/PrimaryModel.js b/app/public/model/PrimaryModel.js
@@ -15,7 +15,7 @@
 import { Observable, Loader } from '/js/src/index.js';
 import FetchedDataManager from './data/FetchedDataManager.js';
 import { RCT } from '../config.js';
-import { defaultIndex, defaultIndexString } from '../utils/defaults.js';
+import { defaultIndex, defaultIndexString, defaultRunNumbers } from '../utils/defaults.js';
 const { dataReqParams } = RCT;
 
 export default class PrimaryModel extends Observable {
@@ -93,7 +93,11 @@ export default class PrimaryModel extends Observable {
     }
 
     goToDefaultPageUrl(page) {
-        this.router.go(`/?page=${page}&${dataReqParams.rowsOnSite}=50&${dataReqParams.site}=1`);
+        if (page === 'flags') {
+            this.router.go(`/?page=${page}&run_numbers=${defaultRunNumbers}&${dataReqParams.rowsOnSite}=50&${dataReqParams.site}=1`);
+        } else {
+            this.router.go(`/?page=${page}&${dataReqParams.rowsOnSite}=50&${dataReqParams.site}=1`);
+        }
     }
 
     getDataPointerFromUrl(url) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,4 +34,4 @@ const mc_view = (query) => ` @@
                     )
             `;
-    module.exports = mc_view;
+    module.exports = mc_view;