Expand Up @@ -9,13 +9,14 @@ * * 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.p * or submit itself to any jurisdiction. */
import { h, isContextSecure } from '/js/src/index.js'; import { iconExternalLink } from '/js/src/icons.js'; import { camelToTitleCase, copyToClipboard, prettyFormatDate } from './../utils.js'; import { getBkpRunDetailsUrl } from '../../common/utils.js'; import { getBkpRunDetailsUrl } from '../utils.js'; import { visibilityButton } from '../visibilityButton.js';
const SPECIFIC_KEY_LABELS = { id: 'ID (etag)', Expand All @@ -24,45 +25,105 @@ const SPECIFIC_KEY_LABELS = { const DATE_FIELDS = ['validFrom', 'validUntil', 'createdAt', 'lastModified']; const TO_REMOVE_FIELDS = ['etag', 'qcObject', 'versions', 'name', 'location']; const HIGHLIGHTED_FIELDS = ['runNumber', 'runType', 'path', 'qcVersion']; const DRAW_OPTIONS_FIELD = 'drawOptions'; const DISPLAY_HINTS_FIELD = 'displayHints'; const LAYOUT_DISPLAY_OPTIONS_FIELD = 'layoutDisplayOptions';
const KEY_TO_RENDER_FIRST = 'path';
/** * Builds a panel with information of the object; Fields are parsed according to their category * @param {QCObjectDTO} qcObject - QC object with its associated details * @param {QcObject} qcObject - QC object with its associated details * @param {object} style - properties of the vnode * @param {function(Notification): function(string, string): object} rowAttributes - * @param {(key: string, value: string) => unknown} rowAttributes - * An optional curried function that returns the VNode attribute builder. * Use {@link defaultRowAttributes} exported from this module, supplying the Notification API. * @param {() => void} onToggleDrawingOptionsPanel - Callback function to for displaying drawing options * @returns {vnode} - panel with information about the object * @example * ``` * qcObjectInfoPanel(qcObject, {}, defaultRowAttributes(model.notification)) * qcObjectInfoPanel( * qcObject, * { gap: '.5em' }, * defaultRowAttributes(model.notification), * () => objectViewModel.toggleDrawingOptionsVisible(), * ) * ``` */ export const qcObjectInfoPanel = (qcObject, style = {}, rowAttributes = () => undefined) => export const qcObjectInfoPanel = ( qcObject, style = {}, rowAttributes = () => undefined, onToggleDrawingOptionsPanel = null, ) => h('.flex-column.scroll-y#qcObjectInfoPanel', { style }, [ [ KEY_TO_RENDER_FIRST, ...Object.keys(qcObject) .filter((key) => key !== KEY_TO_RENDER_FIRST && !TO_REMOVE_FIELDS.includes(key)), .filter((key) => key !== KEY_TO_RENDER_FIRST && !TO_REMOVE_FIELDS.includes(key)), ] .map((key) => infoRow(key, qcObject[key], rowAttributes)), .flatMap((key) => { if (key === DRAW_OPTIONS_FIELD) { return [ drawingOptionsInfoRow( rowAttributes, qcObject[DRAW_OPTIONS_FIELD], qcObject[DISPLAY_HINTS_FIELD], qcObject[LAYOUT_DISPLAY_OPTIONS_FIELD] ?? null, onToggleDrawingOptionsPanel, ), ]; } if (key === DISPLAY_HINTS_FIELD || key === LAYOUT_DISPLAY_OPTIONS_FIELD) { return []; // always hidden (grouped) } return [infoRow(key, qcObject[key], rowAttributes)]; }), ]);
/** * Creates a virtual DOM structure for displaying drawing options with optional layout options * and a toggle button for the drawing options panel. * @param {(key: string, value: string) => unknown} infoRowAttributes - Attributes for each info row component. * @param {object} drawOptions - Current drawing options to display in the info row. * @param {object} displayHints - Display hints to show in the info row. * @param {object|null} layoutDisplayOptions - Optional layout display options to include in the info row. * @param {()=>void|null} onToggleDrawingOptionsPanel - Optional callback to toggle the visibility of the options panel. * @returns {vnode} A virtual DOM node representing a drawing options section. */ const drawingOptionsInfoRow = ( infoRowAttributes, drawOptions, displayHints, layoutDisplayOptions = null, onToggleDrawingOptionsPanel = null, ) => h('', [ h('.flex-row.items-center.justify-between', { style: 'padding-bottom:var(--space-s)' }, [ h('', 'Drawing Options'), onToggleDrawingOptionsPanel && h('.absolute.items-center.level3', { style: 'right:0' }, visibilityButton( onToggleDrawingOptionsPanel, { title: 'Toggle preview drawing options' }, )), ]), h('.w-100', { style: 'height:1px; background:#d9d9d9; margin: 0 auto;' }), h('.flex-column.g1', { style: 'margin-left: var(--space-s);' }, [ infoRow(DRAW_OPTIONS_FIELD, drawOptions, infoRowAttributes), infoRow(DISPLAY_HINTS_FIELD, displayHints, infoRowAttributes), layoutDisplayOptions && infoRow(LAYOUT_DISPLAY_OPTIONS_FIELD, layoutDisplayOptions, infoRowAttributes), ]), ]);
/** * Builds a raw with the key and value information parsed based on their type * @param {string} key - key of the object info * @param {string|number|object|undefined} value - value of the object info * @param {function(key, value)} infoRowAttributes - function that return given attributes for the row * @param {(key: string, value: string) => unknown} infoRowAttributes - method that return given attributes for the row * @returns {vnode} - row with object information key and value */ const infoRow = (key, value, infoRowAttributes) => { const highlightedClasses = HIGHLIGHTED_FIELDS.includes(key) ? '.highlighted' : ''; const formattedValue = infoPretty(key, value); const formattedKey = getUILabel(key);
const hasValue = value != null && value !== '' && (!Array.isArray(value) || value.length !== 0); const bkpRunDetailsUrl = key === 'runNumber' ? getBkpRunDetailsUrl(value) : null;
Expand Down