Merge branch 'dev' into dependabot/npm_and_yarn/Control/dev-dependencies-dd3ddd0cf0

Author: graduta

Framework/package-lock.json

@@ -31,7 +31,7 @@
     ]
   },
   "dependencies": {
-    "express": "^4.21.2",
+    "express": "^4.22.1",
     "helmet": "^8.1.0",
     "jsonwebtoken": "^9.0.0",
     "kafkajs": "^2.2.0",
@@ -51,7 +51,7 @@
     "mocha": "^11.7.0",
     "nock": "15.0.0",
     "nyc": "^17.1.0",
-    "puppeteer": "^24.33.0",
+    "puppeteer": "^24.34.0",
     "sinon": "21.0.0",
     "supertest": "^7.1.0",
     "long": "^5.3.1"

Framework/package.json

@@ -54,7 +54,7 @@
     "eslint-plugin-jsdoc": "^61.5.0",
     "globals": "^16.5.0",
     "nock": "^15.0.0",
-    "puppeteer": "^24.33.0",
+    "puppeteer": "^24.34.0",
     "sequelize-cli": "^6.6.2",
     "sinon": "^21.0.0",
     "supertest": "^7.1.0"

QualityControl/package-lock.json

@@ -169,7 +169,7 @@ export default class Model extends Observable {
     this.object.objects = {}; // Remove any in-memory loaded objects
     this._clearAllIntervals();
     await this.filterModel.filterService.initFilterService();
-    this.filterModel.setFilterFromURL();
+    await this.filterModel.setFilterFromURL();
     this.filterModel.setFilterToURL();
 
     this.services.layout.getLayoutsByUserId(this.session.personid, RequestFields.LAYOUT_CARD);

QualityControl/package.json

@@ -78,7 +78,7 @@
 /* overwrite jsroot styles */
 .jsroot-container {}
 .jsroot-container pre { background-color: initial; }
-.jsrootdiv:hover + .resize-element, .resize-element:hover{ display: flex !important; }
+.jsrootdiv:hover + .resize-element, .resize-element:hover{ display: flex !important; visibility: visible !important; }
 
 .item-action-row { position: absolute; right: 0%; z-index: 100 }
 
@@ -152,9 +152,14 @@
   }
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
+.cursor-pointer { cursor: pointer; }
+.cursor-grab { cursor: grab; }
+.cursor-inherit { cursor: inherit; }
+
+.b1 { border-style: solid; border-width: 1px; }
+
+.b-danger { border-color: var(--color-danger); }
+.b-success { border-color: var(--color-success); }
 
 .header-layout {
   &.edit {
@@ -187,3 +192,41 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+
+.drop-zone {
+  position: absolute;
+  height: 100%;
+  width: 50%;
+  pointer-events: none;
+
+  &.before {
+    left: 0;
+
+    &.active {
+      border-left: 2px solid var(--color-primary);
+    }
+  }
+
+  &.after {
+    right: 0;
+
+    &.active {
+      border-right: 2px solid var(--color-primary);
+    }
+  }
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+.pointer-events-none {
+  pointer-events: none;
+}
+
+/* This hacky workaround is required due to `justify-content: center;` being unusable thanks to a horizontal scrolling bug */
+#header-detector-qualities {
+  &::before, &::after {
+    content: '';
+    flex: 1;
+  }
+}

QualityControl/public/Model.js

@@ -0,0 +1,40 @@
+/**
+ * @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, iconCheck, iconX } from '/js/src/index.js';
+
+/**
+ * A green success badge with the tick icon
+ * @param {string} text - Text to display in the badge
+ * @returns {vnode} The badge virtual node
+ */
+export const statusBadgeSuccess = (text) =>
+  h('.badge.success.b-success.b1', h('.flex-row.g1', [text, iconCheck()]));
+
+/**
+ * A red failure badge with the X icon
+ * @param {string} text - Text to display in the badge
+ * @returns {vnode} The badge virtual node
+ */
+export const statusBadgeFail = (text) =>
+  h('.badge.danger.b-danger.b1', h('.flex-row.g1', [text, iconX()]));
+
+/**
+ * A status badge with dynamic color and icon depending on success or failure.
+ * @param {string} text - Text to display inside the badge
+ * @param {boolean} success - Whether the badge represents success (`true`) or failure (`false`)
+ * @returns {vnode} The badge virtual node
+ */
+export const statusBadge = (text, success) =>
+  success ? statusBadgeSuccess(text) : statusBadgeFail(text);