[O2B-1155] Add QC flag creation panel

lib/database/seeders/20240213120811-quality-control-flags.js

@@ -19,30 +19,30 @@ module.exports = {
                 queryInterface.bulkInsert('quality_control_flag_types', [
                     {
                         id: 2,
-                        name: 'UnknownQuality',
-                        method: 'Unknown Quality',
+                        name: 'Unknown Quality',
+                        method: 'UnknownQuality',
                         bad: true,
                         created_by_id: 1,
                     },
                     {
                         id: 3,
-                        name: 'CertifiedByExpert',
-                        method: 'Certified by Expert',
+                        name: 'Certified by Expert',
+                        method: 'CertifiedByExpert',
                         bad: false,
                         created_by_id: 1,
                     },
                     {
                         id: 11,
-                        name: 'LimitedAcceptance',
-                        method: 'Limited acceptance',
+                        name: 'Limited acceptance',
+                        method: 'LimitedAcceptance',
                         bad: true,
                         color: '#FFFF00',
                         created_by_id: 1,
                     },
                     {
                         id: 12,
-                        name: 'BadPID',
-                        method: 'Bad PID',
+                        name: 'Bad PID',
+                        method: 'BadPID',
                         bad: true,
                         created_by_id: 1,
                     },

lib/public/Model.js

@@ -80,7 +80,7 @@
         this.dataPasses = new DataPassesModel(this);
         this.dataPasses.bubbleTo(this);
 
-        this.qcFlags = new QcFlagsModel();
+        this.qcFlags = new QcFlagsModel(this);
         this.qcFlags.bubbleTo(this);
 
         this.simulationPasses = new SimulationPassesModel(this);
@@ -194,6 +194,9 @@
             case 'qc-flags-for-data-pass':
                 this.qcFlags.loadForDataPassOverview(this.router.params);
                 break;
+            case 'qc-flag-creation-for-data-pass':
+                this.qcFlags.loadCreationForDataPass(this.router.params);
+                break;
             case 'qc-flags-for-simulation-pass':
                 this.qcFlags.loadForSimulationPassOverview(this.router.params);
                 break;

lib/public/components/Filters/common/filters/TimeRangeFilterModel.js → lib/public/components/Filters/common/filters/TimeRangeInputModel.js

@@ -24,7 +24,7 @@
 /**
  * Model for a date time limits filter
  */
-export class TimeRangeFilterModel extends FilterModel {
+export class TimeRangeInputModel extends FilterModel {
     /**
      * Constructor
      *
@@ -33,15 +33,16 @@
      * @param {object} [configuration] the inputs configuration
      * @param {(boolean|{from: boolean, to: boolean})} [configuration.required] defines if the from/to dates are required (true means both are
      *     required)
+     * @property {boolean} [configuration.seconds=false] states if the input has granularity up to seconds (if not, granularity is minutes)
      */
     constructor(value, periodLabel, configuration) {
         super();
 
-        const { required = false } = configuration || {};
+        const { required = false, seconds } = configuration || {};
         this._required = required;
 
-        this._fromTimeInputModel = new DateTimeInputModel();
-        this._toTimeInputModel = new DateTimeInputModel();
+        this._fromTimeInputModel = new DateTimeInputModel({ seconds });
+        this._toTimeInputModel = new DateTimeInputModel({ seconds });
 
         // eslint-disable-next-line no-return-assign
         this._fromTimeInputModel.observe(() => this._periodLabel = null);

lib/public/components/Filters/common/filters/timeRangeFilter.js

@@ -12,7 +12,6 @@
  */
 import { dropdown } from '../../../common/popover/dropdown.js';
 import { h } from '/js/src/index.js';
-import { DateTimeInputComponent } from '../../../common/form/inputs/DateTimeInputComponent.js';
 import {
     getLocaleDateAndTime,
     getStartOfMonth,
@@ -22,6 +21,7 @@ import {
     MONTH_NAMES,
 } from '../../../../utilities/dateUtils.js';
 import { formatTimeRange } from '../../../common/formatting/formatTimeRange.js';
+import { timeRangeInput } from '../../../common/form/inputs/TimeRangeInputComponent.js';
 
 /**
  * Amount of years to display as pre-defined options
@@ -30,12 +30,6 @@ import { formatTimeRange } from '../../../common/formatting/formatTimeRange.js';
  */
 const YEARS_OPTIONS_COUNT = 3;
 
-/**
- * Time input step (1 minute, not configurable for now in the dateTimeInput)
- * @type {number}
- */
-const TIME_STEP = 60 * 1000;
-
 /**
  * Returns a pre-defined list of years period selectors
  *
@@ -96,7 +90,7 @@ const monthsOptions = ({ onChange }) => {
 /**
  * Return a time range filter component
  *
- * @param {TimeRangeFilterModel} timeRangeFilterModel the model of the filter
+ * @param {TimeRangeInputModel} timeRangeFilterModel the model of the filter
  * @return {Component} the resulting component
  */
 export const timeRangeFilter = (timeRangeFilterModel) => dropdown(
@@ -118,28 +112,10 @@ export const timeRangeFilter = (timeRangeFilterModel) => dropdown(
         ],
     ),
     h('.flex-row.time-range-selector', [
-        h('.flex-column.g3.p3', [
-            h('.flex-column.g1', [
-                h('label.flex-row.g2', [h('', 'From'), h('.gray-darker', '(Included)')]),
-                h(DateTimeInputComponent, {
-                    value: timeRangeFilterModel.fromTimeInputModel.raw,
-                    onChange: (value) => timeRangeFilterModel.fromTimeInputModel.update(value),
-                    defaults: { time: '00:00' },
-                    required: timeRangeFilterModel.isRequired(),
-                    max: timeRangeFilterModel.toTimeInputModel.value ? timeRangeFilterModel.toTimeInputModel.value - TIME_STEP : null,
-                }),
-            ]),
-            h('.flex-column.g1', [
-                h('label.flex-row.g2', [h('', 'To'), h('.gray-darker', '(Excluded)')]),
-                h(DateTimeInputComponent, {
-                    value: timeRangeFilterModel.toTimeInputModel.raw,
-                    onChange: (value) => timeRangeFilterModel.toTimeInputModel.update(value),
-                    defaults: { time: '00:00' },
-                    required: timeRangeFilterModel.isRequired(),
-                    min: timeRangeFilterModel.fromTimeInputModel.value ? timeRangeFilterModel.fromTimeInputModel.value + TIME_STEP : null,
-                }),
-            ]),
-        ]),
+        timeRangeInput(timeRangeFilterModel, {
+            fromInputConfiguration: { label: [h('', 'From'), h('.gray-darker', '(Included)')] },
+            toInputConfiguration: { label: [h('', 'To'), h('.gray-darker', '(Excluded)')] },
+        }),
         h(
             '.flex-column.dropdown-options.text-center',
             { style: { 'border-left': '1px solid var(--color-gray)' } },

lib/public/components/common/form/inputs/TimeRangeInputComponent.js

@@ -0,0 +1,83 @@
+/**
+ *  @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 { h } from '/js/src/index.js';
+import { DateTimeInputComponent } from '../../../common/form/inputs/DateTimeInputComponent.js';
+
+/**
+ * @typedef TimeInputConfiguration
+ * @property {string|Componenet|null} label label for input, if null default label is rendered
+ */
+
+/**
+ * @typedef TimeRangeInputComponentOptions
+ * @property {boolean} [seconds=false] states if the input has granularity up to seconds (if not, granularity is minutes)
+ * @property {number} min minimal timestamp accepted by both inputs
+ * @property {number} max maximal timestamp accepted by both inputs
+ * @property  {TimeInputConfiguration} fromInputConfiguration `from` input additioal configuration
+ * @property  {TimeInputConfiguration} toInputConfiguration `to` input additional configuration
+ */
+
+/**
+ * Return a time range input component
+ *
+ * @param {TimeRangeInputModel} timeRangeInputModel the model of the time range input
+ * @param {TimeRangeInputComponentOptions} options inputs options
+ * @return {Component} time range input component
+ */
+export const timeRangeInput = (timeRangeInputModel, { seconds, min, max, fromInputConfiguration, toInputConfiguration } = {}) => {
+    const { label: fromLabel = h('', 'From') } = fromInputConfiguration || {};
+    const { label: toLabel = h('', 'To') } = toInputConfiguration || {};
+
+    const { value: fromValue } = timeRangeInputModel.fromTimeInputModel;
+    const { value: toValue } = timeRangeInputModel.toTimeInputModel;
+
+    let fromMax;
+    if (max) {
+        fromMax = toValue ? Math.min(toValue, max) : max;
+    } else {
+        fromMax = toValue;
+    }
+
+    let toMin;
+    if (min) {
+        toMin = fromValue ? Math.max(fromValue, min) : min;
+    } else {
+        toMin = fromValue;
+    }
+
+    const timeStep = seconds ? 1000 : 60 * 1000;
+    return h('.flex-column.g3.p3', [
+        h('.flex-column.g1', [
+            h('label.flex-row.g2', fromLabel),
+            h(DateTimeInputComponent, {
+                value: timeRangeInputModel.fromTimeInputModel.raw,
+                onChange: (value) => timeRangeInputModel.fromTimeInputModel.update(value),
+                required: timeRangeInputModel.isRequired(),
+                seconds,
+                min,
+                max: fromMax ? fromMax - timeStep : null,
+            }),
+        ]),
+        h('.flex-column.g1', [
+            h('label.flex-row.g2', toLabel),
+            h(DateTimeInputComponent, {
+                value: timeRangeInputModel.toTimeInputModel.raw,
+                onChange: (value) => timeRangeInputModel.toTimeInputModel.update(value),
+                required: timeRangeInputModel.isRequired(),
+                seconds,
+                min: toMin ? toMin + timeStep : null,
+                max,
+            }),
+        ]),
+    ]);
+};

lib/public/components/qcFlags/qcFlagTypesSelectionDropdownModel.js

@@ -0,0 +1,53 @@
+/**
+ * @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 { SelectionDropdownModel } from '../common/selection/dropdown/SelectionDropdownModel.js';
+import { RemoteData } from '/js/src/index.js';
+import { qcFlagTypesProvider } from '../../services/qcFlags/qcFlagTypesProvider.js';
+import { qcFlagTypeColoredBadge } from '../../views/QcFlags/common/qcFlagTypeColoredBadge.js';
+
+/**
+ * Model storing state of a selection of QC flag types picked from the list of all the existing types
+ */
+export class QcFlagTypesSelectionDropdownModel extends SelectionDropdownModel {
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    constructor(configuration) {
+        super({
+            availableOptions: RemoteData.notAsked(),
+            ...configuration,
+        });
+    }
+
+    // eslint-disable-next-line valid-jsdoc
+    /**
+     * @inheritDoc
+     */
+    _initialize() {
+        /**
+         * Update dropdown model options with QC flag types provider remote data
+         * @return {void}
+         */
+        const update = () => this.setAvailableOptions(qcFlagTypesProvider.notArchived$.getCurrent().apply({
+            Success: (qcFlagTypes) => qcFlagTypes.map((qcFlagType) => ({
+                value: qcFlagType.id,
+                label: qcFlagTypeColoredBadge(qcFlagType),
+                rawLabel: qcFlagType.name,
+            })),
+        }));
+        qcFlagTypesProvider.notArchived$.observe(update);
+        update();
+    }
+}

lib/public/services/qcFlags/qcFlagTypesProvider.js

@@ -0,0 +1,70 @@
+/**
+ * @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 { getRemoteData } from '../../utilities/fetch/getRemoteData.js';
+import { ObservableData } from '../../utilities/ObservableData.js';
+
+/**
+ * Service class to fetch QC flag types from the backend
+ */
+export class QcFlagTypesProvider extends Observable {
+    /**
+     * Constructor
+     */
+    constructor() {
+        super();
+        this._notArchived$ = new ObservableData(RemoteData.notAsked());
+    }
+
+    /**
+     * Return not archived QC flag types observable data
+     *
+     * @return {ObservableData<RemoteData<QcFlagType[], ApiError>>} the observable QC flag types
+     */
+    get notArchived$() {
+        if (this._isStale()) {
+            this._load();
+        }
+        return this._notArchived$;
+    }
+
+    /**
+     * States if the cached QC flag types list need to be created or updated
+     *
+     * @return {boolean} true if the QC flag types list must be refreshed
+     * @private
+     */
+    _isStale() {
+        return this._notArchived$.getCurrent().match({
+            NotAsked: () => true,
+            Other: () => false,
+        });
+    }
+
+    /**
+     * Load all the QC flag types and feed the observable data
+     *
+     * @return {void}
+     * @private
+     */
+    _load() {
+        this._notArchived$.setCurrent(RemoteData.loading());
+        getRemoteData('/api/qcFlagTypes?filter[archived]=false').then(
+            ({ data: qcFlagTypes }) => this._notArchived$.setCurrent(RemoteData.success(qcFlagTypes)),
+            (error) => this._notArchived$.setCurrent(RemoteData.failure(error)),
+        );
+    }
+}
+
+export const qcFlagTypesProvider = new QcFlagTypesProvider();

lib/public/view.js

@@ -49,6 +49,7 @@ import { RunsPerSimulationPassOverviewPage } from './views/Runs/RunsPerSimulatio
 import { QcFlagTypesOverviewPage } from './views/QcFlagTypes/Overview/QcFlagTypesOverviewPage.js';
 import { QcFlagsForDataPassOverviewPage } from './views/QcFlags/ForDataPass/QcFlagsForDataPassOverviewPage.js';
 import { QcFlagsForSimulationPassOverviewPage } from './views/QcFlags/ForSimulationPass/QcFlagsForSimulationPassOverviewPage.js';
+import { QcFlagCreationForDataPassPage } from './views/QcFlags/Create/ForDataPass/QcFlagCreationForDataPassPage.js';
 
 /**
  * Main view layout
@@ -89,6 +90,8 @@ export default (model) => {
         'qc-flags-for-data-pass': QcFlagsForDataPassOverviewPage,
         'qc-flags-for-simulation-pass': QcFlagsForSimulationPassOverviewPage,
 
+        'qc-flag-creation-for-data-pass': QcFlagCreationForDataPassPage,
+
         statistics: StatisticsPage,
 
         'flp-overview': FlpOverview,