lhcb-ntuple-wizard-test 2.0.7 → 2.2.0

package/dist/components/DeleteButton.d.ts

@@ -3,7 +3,9 @@ interface Props {
     action: () => void;
     outline?: boolean;
     disabled?: boolean;
+    popupMessage?: string;
+    placement?: "auto" | "top" | "bottom" | "left" | "right";
     children?: ReactNode;
 }
-export declare function DeleteButton({ action, outline, disabled, children }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function DeleteButton({ action, outline, disabled, popupMessage, placement, children, }: Props): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/DeleteButton.js

@@ -11,9 +11,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  \*****************************************************************************/
 import { Button, OverlayTrigger, Popover } from "react-bootstrap";
 import { Trash } from "react-bootstrap-icons";
-export function DeleteButton({ action, outline, disabled, children }) {
+export function DeleteButton({ action, outline, disabled, popupMessage = "Confirm", placement = "auto", children, }) {
     if (disabled) {
         return null;
     }
-    return (_jsx(OverlayTrigger, { trigger: "click", placement: "auto", rootClose: true, overlay: _jsx(Popover, { children: _jsx(Popover.Body, { children: _jsx(Button, { variant: "danger", onClick: action, children: "Confirm" }) }) }), children: _jsxs(Button, { variant: outline ? "outline-danger" : "danger", disabled: disabled, children: [_jsx(Trash, {}), " ", children] }) }));
+    return (_jsx(OverlayTrigger, { trigger: "click", placement: placement, rootClose: true, overlay: _jsx(Popover, { children: _jsx(Popover.Body, { children: _jsx(Button, { variant: "danger", onClick: action, children: popupMessage }) }) }), children: _jsxs(Button, { variant: outline ? "outline-danger" : "danger", disabled: disabled, children: [_jsx(Trash, {}), " ", children] }) }));
 }

package/dist/components/DttNameInput.d.ts

@@ -1 +1,9 @@
-export declare function DttNameInput(): import("react/jsx-runtime").JSX.Element | null;
+import Dtt from "../models/dtt";
+interface Props {
+    dtt: Dtt;
+    rowId: number;
+    autoFocus?: boolean;
+    onNameValidated?: (valid: boolean) => void;
+}
+export declare function DttNameInput({ dtt, rowId, autoFocus, onNameValidated }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DttNameInput.js

@@ -1,75 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, ButtonGroup, Card, FormControl, InputGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
-import { useState } from "react";
-import { Download, ExclamationCircle, GearWideConnected, PlusLg, Upload } from "react-bootstrap-icons";
-import { DeleteButton } from "./DeleteButton";
-import { DecayLatex } from "./DecayLatex";
-import Dtt from "../models/dtt";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, InputGroup } from "react-bootstrap";
+import { useEffect, useRef, useState } from "react";
 import { useRows } from "../providers/RowsProvider";
-import { useNavigate } from "react-router-dom";
-import { useMetadata } from "../providers/MetadataProvider";
-import { downloadText } from "../utils/utils";
-import { YamlFile } from "../models/yamlFile";
-import { UploadDttConfigModal } from "./modals/UploadDttConfigModal";
-import { VARIABLES_PATH } from "../constants";
-import { useRow } from "../providers/RowProvider";
-import { useWizardConfig } from "../providers/WizardConfigProvider";
-export function DttNameInput() {
-    const { row } = useRow();
+export function DttNameInput({ dtt, rowId, autoFocus, onNameValidated }) {
     const { rows, updateRow } = useRows();
-    const navigate = useNavigate();
-    const metadata = useMetadata();
-    const { basePath, variant } = useWizardConfig();
-    const [showUploadModal, setShowUploadModal] = useState(false);
-    const [dttName, setDttName] = useState(row.dtt?.getName() || "");
-    const [dttNameValid, setDttNameValid] = useState(true);
-    const [autoFocus, setAutoFocus] = useState(false);
-    if (!metadata) {
-        return null;
-    }
+    const inputRef = useRef(null);
+    const [name, setName] = useState(dtt.getName());
+    const [valid, setValid] = useState(true);
     function allNameCharsValid(name) {
         const pattern = /^[a-zA-Z0-9_:-]+$/;
         return pattern.test(name);
     }
     function validateName() {
-        const trimmedName = dttName.trim();
+        const trimmedName = name.trim();
         const isNameEmpty = trimmedName === "";
         const areCharsValid = allNameCharsValid(trimmedName);
-        const otherRowNames = rows.filter((r) => r.id !== row.id).map((row) => row.dtt?.getName() || "");
+        const otherRowNames = rows.filter((r) => r.id !== rowId).map((row) => row.dtt?.getName() || "");
         const isNameDuplicate = otherRowNames.includes(trimmedName);
         const valid = !isNameEmpty && areCharsValid && !isNameDuplicate;
-        setDttNameValid(valid);
+        setValid(valid);
+        onNameValidated?.(valid);
         return valid;
     }
-    const handleCreateDTT = () => {
-        const dtt = Dtt.create(row.decay.descriptors.template, row.decay.descriptors.mapped_list.flatMap((item) => (Array.isArray(item) ? item : [item])), [], "", metadata.tupleTools.tupleTools);
-        updateRow(row.id, (r) => ({
-            ...r,
-            dtt: dtt.withInputsFromLines(row.lines),
-        }));
-        setAutoFocus(true);
-    };
-    const handleConfigureDtt = () => {
-        updateRow(row.id, (r) => ({ ...r, editTree: true }));
-        void navigate(`${basePath}${VARIABLES_PATH}`);
-    };
-    const handleDeleteDtt = () => {
-        updateRow(row.id, (r) => ({ ...r, dtt: null }));
-        setDttName("");
-    };
-    return (_jsxs(Card, { children: [_jsxs(Card.Header, { className: "d-flex justify-content-between align-items-start gap-2", children: [row.dtt && (_jsxs(InputGroup, { hasValidation: true, children: [_jsx(FormControl, { autoFocus: autoFocus, placeholder: "DecayTree", value: dttName, onBlur: () => {
-                                    if (!validateName()) {
-                                        return;
-                                    }
-                                    updateRow(row.id, (r) => ({ ...r, dtt: r.dtt.withName(dttName) }));
-                                }, onChange: (event) => {
-                                    setDttName(event.target.value);
-                                    setDttNameValid(true);
-                                }, isInvalid: !dttNameValid }), _jsx(FormControl.Feedback, { type: "invalid", children: dttName.trim() === ""
-                                    ? "Name cannot be empty"
-                                    : !allNameCharsValid(dttName.trim())
-                                        ? "Name contains invalid characters"
-                                        : "Name is already taken" })] })), _jsx(ButtonGroup, { children: row.dtt ? (_jsxs(_Fragment, { children: [_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Configure this DecayTreeTuple" }), children: _jsx(Button, { type: "submit", variant: "secondary", onClick: handleConfigureDtt, disabled: !dttNameValid, className: "align-items-center d-flex", children: _jsx(GearWideConnected, {}) }) }), variant === "standalone" && (_jsx(_Fragment, { children: _jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Download DecayTreeTuple YAML configuration file" }), children: _jsx(Button, { className: "align-items-center d-flex ms-auto", type: "button", onClick: () => {
-                                                downloadText(YamlFile.fromDtt(row.dtt));
-                                            }, disabled: !dttNameValid, children: _jsx(Download, {}) }) }) })), _jsx(DeleteButton, { action: handleDeleteDtt })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "d-flex align-items-center gap-2", children: [_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Please add a DecayTreeTuple in order to complete the production configuration" }), children: _jsx(ExclamationCircle, { width: 20, height: 20, className: "text-danger me-2" }) }), _jsxs(ButtonGroup, { children: [_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Add a DecayTreeTuple" }), children: _jsx(Button, { type: "submit", variant: "success", onClick: handleCreateDTT, disabled: !metadata, children: _jsx(PlusLg, {}) }) }), variant === "standalone" && (_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Upload DecayTreeTuple configuration file" }), children: _jsx(Button, { className: "ms-auto", type: "button", onClick: () => setShowUploadModal(true), children: _jsx(Upload, {}) }) }))] })] }), showUploadModal && (_jsx(UploadDttConfigModal, { currentRow: row, onClose: () => setShowUploadModal(false) }))] })) })] }), _jsx(Card.Body, { children: _jsx(DecayLatex, { decay: row.decay }) })] }));
+    useEffect(() => {
+        if (autoFocus) {
+            inputRef.current?.select();
+        }
+    }, [autoFocus]);
+    return (_jsxs(InputGroup, { hasValidation: true, children: [_jsx(FormControl, { ref: inputRef, placeholder: "MyDecayTree", value: name, onBlur: () => {
+                    if (!validateName()) {
+                        return;
+                    }
+                    updateRow(rowId, (r) => ({ ...r, dtt: r.dtt.withName(name) }));
+                }, onChange: (event) => {
+                    setName(event.target.value);
+                    setValid(true);
+                }, isInvalid: !valid }), _jsx(FormControl.Feedback, { type: "invalid", children: name.trim() === ""
+                    ? "Name cannot be empty"
+                    : !allNameCharsValid(name.trim())
+                        ? "Name contains invalid characters"
+                        : "Name is already taken" })] }));
 }

package/dist/components/GuideLinkButton.d.ts

@@ -0,0 +1,15 @@
+declare const GUIDE_URLS: {
+    readonly selectingDecays: "https://lhcb-opendata-guide.web.cern.ch/ntupling-service/dataset-discovery/selecting-decays/";
+    readonly strippingLines: "https://lhcb-opendata-guide.web.cern.ch/ntupling-service/dataset-discovery/stripping-lines/";
+    readonly datasets: "https://lhcb-opendata-guide.web.cern.ch/ntupling-service/dataset-discovery/bookkeeping-path/";
+    readonly ntupleCreation: "https://lhcb-opendata-guide.web.cern.ch/ntupling-service/ntuple-configuration/ntuple-creation/";
+    readonly nodeTree: "https://lhcb-opendata-guide.web.cern.ch/ntupling-service/ntuple-configuration/nodetree/";
+    readonly tupleTools: "https://lhcb-opendata-guide.web.cern.ch/ntupling-service/ntuple-configuration/tupletools/";
+    readonly submittingRequests: "https://lhcb-opendata-guide.web.cern.ch/ntupling-service/ntuple-configuration/submitting-requests/";
+};
+interface Props {
+    page: keyof typeof GUIDE_URLS;
+    topic: string;
+}
+export declare function GuideLinkButton({ page, topic }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/GuideLinkButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import { InfoCircleFill } from "react-bootstrap-icons";
+const GUIDE_BASE_URL = "https://lhcb-opendata-guide.web.cern.ch/ntupling-service";
+const GUIDE_URLS = {
+    selectingDecays: `${GUIDE_BASE_URL}/dataset-discovery/selecting-decays/`,
+    strippingLines: `${GUIDE_BASE_URL}/dataset-discovery/stripping-lines/`,
+    datasets: `${GUIDE_BASE_URL}/dataset-discovery/bookkeeping-path/`,
+    ntupleCreation: `${GUIDE_BASE_URL}/ntuple-configuration/ntuple-creation/`,
+    nodeTree: `${GUIDE_BASE_URL}/ntuple-configuration/nodetree/`,
+    tupleTools: `${GUIDE_BASE_URL}/ntuple-configuration/tupletools/`,
+    submittingRequests: `${GUIDE_BASE_URL}/ntuple-configuration/submitting-requests/`,
+};
+export function GuideLinkButton({ page, topic }) {
+    return (_jsx(OverlayTrigger, { overlay: _jsxs(Tooltip, { children: ["Guide: ", topic] }), children: _jsx("a", { href: GUIDE_URLS[page], target: "_blank", rel: "noreferrer", className: "text-muted", style: { lineHeight: 1, display: "inline-flex", alignItems: "center" }, children: _jsx(InfoCircleFill, { size: 14 }) }) }));
+}

package/dist/components/NtupleWizard.js

@@ -15,7 +15,6 @@ import { MetadataProvider } from "../providers/MetadataProvider.js";
 import { DecaySearchPage } from "../pages/DecaySearchPage";
 import { DecayTreeConfigPage } from "../pages/DecayTreeConfigPage";
 import { RequestPage } from "../pages/RequestPage";
-import { MathJaxContext } from "better-react-mathjax";
 import { RowsProvider } from "../providers/RowsProvider.js";
 import { RequestProvider } from "../providers/RequestProvider";
 import { SELECT_DECAYS_PATH, VARIABLES_PATH } from "../constants";
@@ -25,5 +24,5 @@ export function NtupleWizard({ basePath = "", contactEmail, submitLocation, requ
     if (contactEmail) {
         localStorage.setItem("email", contactEmail);
     }
-    return (_jsx(MetadataProvider, { children: _jsx(WizardConfigProvider, { basePath: basePath, submitLocation: submitLocation, requestReasonMessage: requestReasonMessage, requestSubmittedMessage: requestSubmittedMessage, onRequestSubmitted: onRequestSubmitted, children: _jsx(RowsProvider, { children: _jsx(RequestProvider, { emailIsKnown: !!contactEmail, children: _jsx(MathJaxContext, { children: pathname.endsWith(SELECT_DECAYS_PATH) ? (_jsx(DecaySearchPage, {})) : pathname.endsWith(VARIABLES_PATH) ? (_jsx(DecayTreeConfigPage, {})) : (_jsx(RequestPage, {})) }) }) }) }) }));
+    return (_jsx(MetadataProvider, { children: _jsx(WizardConfigProvider, { basePath: basePath, submitLocation: submitLocation, requestReasonMessage: requestReasonMessage, requestSubmittedMessage: requestSubmittedMessage, onRequestSubmitted: onRequestSubmitted, children: _jsx(RowsProvider, { children: _jsx(RequestProvider, { emailIsKnown: !!contactEmail, children: pathname.endsWith(SELECT_DECAYS_PATH) ? (_jsx(DecaySearchPage, {})) : pathname.endsWith(VARIABLES_PATH) ? (_jsx(DecayTreeConfigPage, {})) : (_jsx(RequestPage, {})) }) }) }) }));
 }

package/dist/components/ParticleDropdown.d.ts

@@ -1,8 +1,18 @@
+/*****************************************************************************\
+ * (c) Copyright 2021 CERN for the benefit of the LHCb Collaboration           *
+ *                                                                             *
+ * This software is distributed under the terms of the GNU General Public      *
+ * Licence version 3 (GPL Version 3), copied verbatim in the file "COPYING".   *
+ *                                                                             *
+ * In applying this licence, 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 { Props as SelectProps } from "react-select";
 import { DropdownOption } from "../models/dropdownOption";
 interface Props extends SelectProps<DropdownOption> {
     onlyHeads?: boolean;
     onlyKnown?: boolean;
 }
-export declare function ParticleDropdown({ onlyHeads, onlyKnown, ...props }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function ParticleDropdown({ onlyHeads, onlyKnown, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ParticleDropdown.js

@@ -9,24 +9,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * granted to it by virtue of its status as an Intergovernmental Organization  *
  * or submit itself to any jurisdiction.                                       *
  \*****************************************************************************/
-import { MathJax } from "better-react-mathjax";
 import Select from "react-select";
 import { useMetadata } from "../providers/MetadataProvider.js";
+import { InlineMath } from "react-katex";
 export function ParticleDropdown({ onlyHeads, onlyKnown, ...props }) {
     const metadata = useMetadata();
-    if (!metadata) {
-        return null;
-    }
     const allowedParticles = () => onlyHeads
         ? [...new Set(Object.values(metadata.decays).map((decay) => decay.descriptors.list[0]))]
         : onlyKnown
             ? Object.keys(metadata.particleProperties).filter((key) => !metadata.particleProperties[key].hide)
             : Object.keys(metadata.particleProperties);
-    const loaded = metadata && (!onlyHeads || metadata.decays);
+    const loaded = !onlyHeads || metadata.decays;
     const options = loaded
         ? allowedParticles().map((key) => ({
             value: key,
-            label: _jsx(MathJax, { inline: true, children: `\\(${metadata.particleProperties[key]["latex"]}\\)` }),
+            label: _jsx(InlineMath, { math: metadata.particleProperties[key]["latex"] }),
         }))
         : [];
     return (_jsx("div", { className: "react-select form-control p-0", children: _jsx(Select, { options: options, isLoading: !loaded, filterOption: (candidate, input) => candidate.value.toLowerCase().startsWith(input.toLowerCase()), ...props }) }));

package/dist/components/ParticleLatex.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    particleId: string;
+    highlighted?: boolean;
+}
+export declare function ParticleLatex({ particleId, highlighted }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ParticleLatex.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { convertParticleToLatex } from "../utils/latexUtils";
+import { useMetadata } from "../providers/MetadataProvider";
+import { useDtt } from "../providers/DttProvider";
+import { InlineMath } from "react-katex";
+export function ParticleLatex({ particleId, highlighted }) {
+    const metadata = useMetadata();
+    const { dtt } = useDtt();
+    const particleName = dtt.config.branches[particleId].particle;
+    return (
+    // pointerEvents: "none" prevents the node from absorbing clicks intended for the tree canvas
+    _jsx("div", { style: { pointerEvents: "none" }, children: _jsx(InlineMath, { math: convertParticleToLatex(metadata, particleName, highlighted) }) }));
+}

package/dist/components/ParticleTagBadge.d.ts

@@ -3,7 +3,8 @@ import { ParticleTag } from "../models/particleTag";
 interface Props {
     tag: ParticleTag;
     as?: ElementType;
+    enabled?: boolean;
     onClick?: () => void;
 }
-export declare function ParticleTagBadge({ tag, as, onClick }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ParticleTagBadge({ tag, as, enabled, onClick }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ParticleTagBadge.js

@@ -9,14 +9,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * granted to it by virtue of its status as an Intergovernmental Organization  *
  * or submit itself to any jurisdiction.                                       *
  \*****************************************************************************/
-import { Badge, OverlayTrigger, Spinner, Tooltip } from "react-bootstrap";
+import { Badge, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { useMetadata } from "../providers/MetadataProvider.js";
 import { config } from "../config.js";
-export function ParticleTagBadge({ tag, as, onClick }) {
+export function ParticleTagBadge({ tag, as, enabled = true, onClick }) {
     const metadata = useMetadata();
-    const background = metadata
-        ? config.particleTagGroupStyles[tag.group]
-        : "dark";
-    const description = metadata ? (metadata.userHints.particleTags[tag.label].description) : (_jsx(Spinner, { animation: "border" }));
-    return (_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: description }), children: _jsx(Badge, { pill: true, bg: background, text: "light", as: as, onClick: onClick, children: tag.label }) }));
+    const background = config.particleTagGroupStyles[tag.group];
+    const description = metadata.userHints.particleTags[tag.label].description;
+    return (_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: description }), children: _jsx(Badge, { pill: true, bg: background, text: "light", as: as, onClick: onClick, style: { opacity: enabled ? 1 : 0.15, pointerEvents: enabled ? "auto" : "none" }, children: tag.label }) }));
 }

package/dist/components/ParticleTagFilters.d.ts

@@ -1,6 +1 @@
-interface Props {
-    branch: string[];
-    onSelectTag: (branches: string[]) => void;
-}
-export declare function ParticleTagFilters({ branch, onSelectTag }: Props): import("react/jsx-runtime").JSX.Element | null;
-export {};
+export declare function ParticleTagFilters(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ParticleTagFilters.js

@@ -1,18 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, Stack } from "react-bootstrap";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from "react-bootstrap";
 import { ParticleTagBadge } from "./ParticleTagBadge";
 import { useMetadata } from "../providers/MetadataProvider";
 import { useDtt } from "../providers/DttProvider";
-import { useCallback, useMemo } from "react";
-export function ParticleTagFilters({ branch, onSelectTag }) {
+import { useCallback, useMemo, useState } from "react";
+export function ParticleTagFilters() {
     const metadata = useMetadata();
-    const { dtt } = useDtt();
-    if (!metadata) {
-        return null;
-    }
+    const { dtt, selectedBranch, setSelectedBranch } = useDtt();
+    const [allParticleTags, setAllParticleTags] = useState(null);
     const selectAllByTag = useCallback((tag) => {
-        if (!metadata)
-            return;
         const allBranches = dtt.config.branches;
         const matchingBranches = Object.keys(allBranches)
             .filter((branch) => {
@@ -21,14 +17,14 @@ export function ParticleTagFilters({ branch, onSelectTag }) {
             return particleTags.includes(tag.label);
         })
             .sort();
-        onSelectTag(matchingBranches);
+        setSelectedBranch(matchingBranches);
     }, [dtt, metadata]);
     const particleTags = useMemo(() => {
         const tagInfo = metadata.userHints.particleTags;
         let particleTags;
-        if (branch.length > 0) {
+        if (selectedBranch.length > 0) {
             const allParticles = dtt
-                .getParticlesByBranchId(branch)
+                .getParticlesByBranchId(selectedBranch)
                 .map((particle) => metadata.particleProperties[particle]);
             const allTags = new Set(allParticles.map((particle) => particle.tags.filter((tag) => !tagInfo[tag].hide)).flat());
             particleTags = Array.from(allTags)
@@ -41,11 +37,14 @@ export function ParticleTagFilters({ branch, onSelectTag }) {
             const uniqueTags = new Set(allParticles.map((particle) => particle.tags.filter((tag) => !tagInfo[tag].hide)).flat());
             particleTags = Array.from(uniqueTags).map((tag) => ({ label: tag, group: tagInfo[tag].group }));
         }
+        if (!allParticleTags) {
+            setAllParticleTags(particleTags);
+        }
         return particleTags;
-    }, [dtt, metadata, branch]);
-    if (particleTags.length === 0) {
+    }, [dtt, metadata, selectedBranch]);
+    if (!allParticleTags) {
         return null;
     }
-    const groupedTags = Object.groupBy([...particleTags].sort((a, b) => a.group.localeCompare(b.group)), (tag) => tag.group);
-    return (_jsxs(_Fragment, { children: [_jsx(Card.Title, { children: "Select by category" }), _jsx(Stack, { className: "mt-1", direction: "horizontal", style: { flexWrap: "wrap", justifyContent: "center" }, gap: 2, children: Object.entries(groupedTags).map(([group, tags]) => (_jsx(Stack, { direction: "horizontal", style: { flexWrap: "wrap" }, gap: 1, children: tags.map((tag) => (_jsx(ParticleTagBadge, { as: "button", tag: tag, onClick: () => selectAllByTag(tag) }, tag.label))) }, group))) })] }));
+    const groupedTags = Object.groupBy([...allParticleTags].sort((a, b) => a.group.localeCompare(b.group)), (tag) => tag.group);
+    return (_jsx(Stack, { className: "mt-1", direction: "horizontal", style: { flexWrap: "wrap", justifyContent: "center" }, gap: 2, children: Object.entries(groupedTags).map(([group, tags]) => (_jsx(Stack, { direction: "horizontal", style: { flexWrap: "wrap" }, gap: 1, children: tags.map((tag) => (_jsx(ParticleTagBadge, { as: "button", tag: tag, enabled: particleTags.map((tag) => tag.label).includes(tag.label), onClick: () => selectAllByTag(tag) }, tag.label))) }, group))) }));
 }

package/dist/components/RequestButtonGroup.d.ts

@@ -1 +1 @@
-export declare function RequestButtonGroup(): import("react/jsx-runtime").JSX.Element | null;
+export declare function RequestButtonGroup(): import("react/jsx-runtime").JSX.Element;

package/dist/components/RequestButtonGroup.js

@@ -18,14 +18,11 @@ export function RequestButtonGroup() {
     const { rows, configuredRows, setRows } = useRows();
     const navigate = useNavigate();
     const [showProdUploadModal, setShowProdUploadModal] = useState(false);
-    const handleSubmitRows = async () => {
+    const configureAllDtts = async () => {
         setRows((prev) => prev.map((r) => ({ ...r, editTree: true })));
         await navigate(`${basePath}${VARIABLES_PATH}`);
     };
-    if (!metadata) {
-        return null;
-    }
     return (_jsxs(_Fragment, { children: [showProdUploadModal && _jsx(UploadDttConfigModal, { onClose: () => setShowProdUploadModal(false) }), _jsxs(ButtonGroup, { children: [_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Select decays" }), children: _jsxs(Button, { type: "submit", variant: "success", onClick: () => void navigate(`${basePath}${SELECT_DECAYS_PATH}`), className: "align-items-center d-flex gap-1", children: [_jsx(PlusLg, {}), " Select decays"] }) }), variant === "standalone" && (_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Upload Production configuration file" }), children: _jsx(Button, { className: "ms-auto align-items-center d-flex", type: "button", onClick: () => setShowProdUploadModal(true), children: _jsx(Upload, {}) }) })), _jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Configure all DecayTreeTuples" }), children: _jsxs(Button, { type: "submit", variant: "secondary", onClick: () => {
-                                handleSubmitRows().catch(console.error);
+                                configureAllDtts().catch(console.error);
                             }, disabled: !validation.allRowsHaveDtt, className: "align-items-center d-flex gap-1", children: [_jsx(GearWideConnected, {}), " ", _jsx(Badge, { pill: true, bg: "primary", children: configuredRows.length })] }) }), variant === "standalone" && (_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Download Analysis Production configuration file (info.yaml)" }), children: _jsx(Button, { variant: "primary", type: "button", onClick: () => downloadText(YamlFile.createInfoYaml(rows, metadata)), disabled: !validation.allRowsHaveDtt || !validation.allRowsHavePaths || !validation.isEmailValid, className: "align-items-center d-flex", children: _jsx(Download, {}) }) }))] })] }));
 }

package/dist/components/RequestRow.d.ts

@@ -1 +1 @@
-export declare function RequestRow(): import("react/jsx-runtime").JSX.Element | null;
+export declare function RequestRow(): import("react/jsx-runtime").JSX.Element;

package/dist/components/RequestRow.js

@@ -1,20 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Col, OverlayTrigger, Popover, Row } from "react-bootstrap";
-import { InfoCircle } from "react-bootstrap-icons";
-import { StrippingLineInfo } from "./StrippingLineInfo";
-import { DeleteButton } from "./DeleteButton";
-import { DttNameInput } from "./DttNameInput";
-import { useMetadata } from "../providers/MetadataProvider";
-import { useRows } from "../providers/RowsProvider";
+import { Col, Row } from "react-bootstrap";
+import { DecayCard } from "./DecayCard";
 import { BookkeepingPathDropdown } from "./BookkeepingPathDropdown";
 import { StrippingLineDropdown } from "./StrippingLineDropdown";
 import { useRow } from "../providers/RowProvider";
+import { VerticalLine } from "./VerticalLine";
+import { DeleteButton } from "./DeleteButton";
+import { useRows } from "../providers/RowsProvider";
+import { StrippingLineInfoButton } from "./StrippingLineInfoButton";
+import { GuideLinkButton } from "./GuideLinkButton";
 export function RequestRow() {
-    const metadata = useMetadata();
     const { row } = useRow();
     const { removeRow } = useRows();
-    if (!metadata) {
-        return null;
-    }
-    return (_jsxs(Row, { className: "align-items-center", children: [_jsx(Col, { lg: true, children: _jsx(DttNameInput, {}) }), _jsx(Col, { lg: true, children: _jsx(StrippingLineDropdown, {}) }), _jsx(Col, { xs: "auto", children: _jsx(OverlayTrigger, { trigger: "click", placement: "right", rootClose: true, overlay: _jsx(Popover, { children: _jsx(Popover.Body, { children: row.lines.map((line) => (_jsx(StrippingLineInfo, { line: line.line, stream: line.stream, versions: line.versions, showLink: true }, line.line))) }) }), children: _jsx(Button, { disabled: row.lines.length === 0, children: _jsx(InfoCircle, {}) }) }) }), _jsx(Col, { children: _jsx(BookkeepingPathDropdown, {}) }), _jsx(Col, { xs: "auto", children: _jsx(DeleteButton, { action: () => removeRow(row.id) }) })] }));
+    return (_jsxs(Row, { className: "align-items-stretch mt-1", children: [_jsx(Col, { xs: 5, children: _jsx(DecayCard, {}) }), _jsxs(Col, { xs: 6, className: "d-flex flex-column gap-2", children: [_jsx(Row, { children: _jsxs("div", { className: "d-flex flex-row justify-content-between align-items-center gap-3", children: [_jsx("div", { style: { width: "100%" }, children: _jsx(StrippingLineDropdown, {}) }), _jsx("div", { className: "me-2", children: _jsx(StrippingLineInfoButton, { line: row.line }) }), _jsx(GuideLinkButton, { page: "strippingLines", topic: "Stripping lines" })] }) }), _jsx(Row, { children: _jsxs("div", { className: "d-flex flex-row align-items-center gap-2", children: [_jsx("div", { className: "me-3", style: { width: "100%" }, children: _jsx(BookkeepingPathDropdown, {}) }), _jsx(GuideLinkButton, { page: "datasets", topic: "Datasets" })] }) })] }), _jsxs(Col, { xs: 1, className: "d-flex align-items-center justify-content-start gap-4", children: [_jsx(VerticalLine, {}), _jsx(DeleteButton, { action: () => removeRow(row.id), popupMessage: "Delete row" })] })] }));
 }

package/dist/components/StrippingLineDropdown.js

@@ -8,18 +8,16 @@ export function StrippingLineDropdown() {
     const { row, updateBkPaths } = useRow();
     const { updateRow } = useRows();
     const handleStrippingLineChanged = useCallback((lineOption) => {
-        const lines = [
-            {
-                stream: lineOption.group,
-                line: lineOption.value,
-                versions: row.decay.lines[`${lineOption.group}/${lineOption.value}`],
-            },
-        ];
-        updateBkPaths(row.paths, lines);
+        const line = {
+            stream: lineOption.group,
+            line: lineOption.value,
+            versions: row.decay.lines[`${lineOption.group}/${lineOption.value}`],
+        };
+        updateBkPaths(row.paths, line);
         updateRow(row.id, (r) => ({
             ...r,
-            lines,
-            dtt: r.dtt ? r.dtt.withInputsFromLines(lines) : null,
+            line,
+            dtt: r.dtt ? r.dtt.withInputFromLine(line) : null,
         }));
     }, [row, updateBkPaths, updateRow]);
     const strippingLineOptions = useMemo(() => {
@@ -32,7 +30,7 @@ export function StrippingLineDropdown() {
             grouped[stream].push({
                 value: line,
                 group: stream,
-                label: _jsx(StrippingLineInfo, { line: line, stream: stream, versions: versions }),
+                label: _jsx(StrippingLineInfo, { line: { line, stream, versions } }),
             });
         });
         return Object.entries(grouped).map(([label, options]) => ({
@@ -40,9 +38,9 @@ export function StrippingLineDropdown() {
             options,
         }));
     }, [row.decay.lines]);
-    return (_jsx(Select, { options: strippingLineOptions, value: row.lines.map((l) => ({
-            value: l.line,
-            group: l.stream,
-            label: _jsx(StrippingLineInfo, { line: l.line, stream: l.stream, versions: l.versions, showLink: false }),
-        })), placeholder: "Stripping line", onChange: (v) => handleStrippingLineChanged(v), menuPortalTarget: document.body, menuPosition: "fixed", styles: { menuPortal: (b) => ({ ...b, zIndex: 9999 }) } }));
+    return (_jsx(Select, { options: strippingLineOptions, value: row.line && {
+            value: row.line.line,
+            group: row.line.stream,
+            label: _jsx(StrippingLineInfo, { line: row.line, showLink: false }),
+        }, placeholder: "Stripping line", onChange: (v) => handleStrippingLineChanged(v), menuPortalTarget: document.body, menuPosition: "fixed", styles: { menuPortal: (b) => ({ ...b, zIndex: 9999 }) } }));
 }

package/dist/components/StrippingLineInfo.d.ts

@@ -1,8 +1,8 @@
-import { StrippingBadgeProps } from "./StrippingLineBadge";
-interface Props extends Omit<StrippingBadgeProps, "version"> {
-    versions: string[];
-    line: string;
+import { StrippingLine } from "../models/strippingLine";
+interface Props {
+    line: StrippingLine;
     showLink?: boolean;
+    verbose?: boolean;
 }
-export declare function StrippingLineInfo({ versions, line, showLink, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function StrippingLineInfo({ line, showLink, verbose }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/StrippingLineInfo.js

@@ -10,8 +10,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * or submit itself to any jurisdiction.                                       *
  \*****************************************************************************/
 import { Stack } from "react-bootstrap";
-import { StrippingLineBadge } from "./StrippingLineBadge";
-export function StrippingLineInfo({ versions, line, showLink, ...props }) {
-    const strippingInfo = versions.map((version) => (_jsx(StrippingLineBadge, { version: version, line: line, showLink: showLink, ...props }, `${line}-S${version}-badge`)));
-    return (_jsxs("span", { children: [line, _jsx("br", {}), _jsx(Stack, { direction: "horizontal", style: { flexWrap: "wrap" }, gap: 1, children: strippingInfo })] }));
+import { StrippingLineVersionBadge } from "./StrippingLineVersionBadge";
+import { useMetadata } from "../providers/MetadataProvider";
+import { BoxArrowUpRight } from "react-bootstrap-icons";
+export function StrippingLineInfo({ line, showLink, verbose }) {
+    const metadata = useMetadata();
+    if (verbose) {
+        return (_jsxs("div", { children: [_jsxs("div", { className: "text-muted small mb-2", children: ["Stream: ", _jsx("strong", { children: line.stream })] }), _jsx("div", { className: "mb-1 small", children: _jsxs("strong", { children: ["Available in ", line.versions.length === 1 ? "stripping version" : "stripping versions", ":"] }) }), _jsx(Stack, { gap: 2, children: line.versions.map((version) => {
+                        const info = metadata.stripping[version]?.[line.line];
+                        const hint = metadata.strippingHints[version];
+                        const url = info?.url?.[line.stream];
+                        return (_jsxs("div", { className: "border rounded p-2 small", children: [_jsxs("div", { className: "d-flex align-items-start justify-content-between gap-2 mb-1", children: [_jsxs("span", { children: [_jsxs("strong", { children: ["S", version] }), hint?.description && _jsxs("span", { className: "text-muted", children: [" \u2014 ", hint.description] })] }), url && (_jsxs("a", { href: url, target: "_blank", rel: "noreferrer", className: "d-flex align-items-center gap-1 text-nowrap", children: ["Documentation", _jsx(BoxArrowUpRight, { size: 11 })] }))] }), hint?.davinci && _jsxs("div", { className: "text-muted", children: ["DaVinci version: ", hint.davinci] }), info?.prescale !== undefined && info.prescale !== 1 && (_jsxs("div", { className: "text-warning", children: ["Prescale: ", info.prescale] }))] }, version));
+                    }) })] }));
+    }
+    return (_jsxs("span", { children: [line.line, _jsx("br", {}), _jsx(Stack, { direction: "horizontal", style: { flexWrap: "wrap" }, gap: 1, children: line.versions.map((version) => (_jsx(StrippingLineVersionBadge, { line: line, version: version, showLink: showLink }, `${line.line}-S${version}-badge`))) })] }));
 }

package/dist/components/StrippingLineInfoButton.d.ts

@@ -0,0 +1,6 @@
+import { StrippingLine } from "../models/strippingLine";
+interface Props {
+    line: StrippingLine | null;
+}
+export declare function StrippingLineInfoButton({ line }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/StrippingLineInfoButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, OverlayTrigger, Popover } from "react-bootstrap";
+import { StrippingLineInfo } from "./StrippingLineInfo";
+import { InfoCircle } from "react-bootstrap-icons";
+export function StrippingLineInfoButton({ line }) {
+    return (_jsx(OverlayTrigger, { trigger: "click", rootClose: true, placement: "left-start", overlay: _jsxs(Popover, { style: { minWidth: "360px" }, children: [_jsx(Popover.Header, { as: "h6", className: "fw-bold", children: line?.line ?? "Stripping line info" }), _jsx(Popover.Body, { children: line && _jsx(StrippingLineInfo, { line: line, verbose: true }, line.line) })] }), children: _jsx(Button, { disabled: !line, children: _jsx(InfoCircle, {}) }) }));
+}

package/dist/components/StrippingLineVersionBadge.d.ts

@@ -0,0 +1,7 @@
+import { StrippingLine } from "../models/strippingLine";
+export interface StrippingBadgeProps {
+    version: string;
+    line?: StrippingLine;
+    showLink?: boolean;
+}
+export declare function StrippingLineVersionBadge({ version, line, showLink }: StrippingBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/{StrippingLineBadge.js → StrippingLineVersionBadge.js}

@@ -11,18 +11,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
  \*****************************************************************************/
 import { Badge, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { useMetadata } from "../providers/MetadataProvider.js";
-export function StrippingLineBadge({ version, line, stream, showLink }) {
+export function StrippingLineVersionBadge({ version, line, showLink }) {
     const metadata = useMetadata();
     // TODO: configurable baseURL, remove baseURL from metadata (or make it a top-level key)
-    const url = line && metadata && stream
-        ? metadata.stripping[version][line].url[stream]
+    const url = line
+        ? metadata.stripping[version][line.line].url[line.stream]
         : `http://lhcbdoc.web.cern.ch/lhcbdoc/stripping/config/stripping${version}/index.html`;
-    const badgeProps = showLink
+    const linkProps = showLink
         ? {
             as: "a",
             href: url,
             target: "_blank",
         }
         : {};
-    return (_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: metadata ? metadata.strippingHints[version].description : "..." }), children: _jsx(Badge, { pill: true, bg: "info", ...badgeProps, children: "S" + version }) }));
+    return (_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { style: { zIndex: 9999 }, children: metadata.strippingHints[version].description }), children: _jsx(Badge, { pill: true, bg: "info", ...linkProps, children: "S" + version }) }));
 }

package/dist/components/StrippingLinesCountBadge.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    strippingLineVersions: {
+        [key: string]: string[];
+    };
+    selected: boolean;
+}
+export declare function StrippingLinesCountBadge({ strippingLineVersions, selected }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/StrippingLinesCountBadge.js

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Badge, OverlayTrigger, Popover, Stack } from "react-bootstrap";
+import { StrippingLineVersionBadge } from "./StrippingLineVersionBadge.js";
+export function StrippingLinesCountBadge({ strippingLineVersions, selected }) {
+    const numLines = Object.keys(strippingLineVersions).length;
+    const entries = Object.keys(strippingLineVersions).map((lineName) => {
+        const [stream, line] = lineName.split("/");
+        return { stream, line, versions: strippingLineVersions[lineName] };
+    });
+    return (_jsx(OverlayTrigger, { placement: "right", overlay: _jsxs(Popover, { style: { minWidth: "300px" }, children: [_jsxs(Popover.Header, { as: "h6", className: "fw-bold", children: [numLines, " stripping line", numLines === 1 ? "" : "s"] }), _jsx(Popover.Body, { children: _jsx(Stack, { gap: 2, children: entries.map(({ stream, line, versions }, i) => (_jsxs("div", { children: [i > 0 && _jsx("hr", { className: "my-0 mb-2" }), _jsxs("div", { className: "small text-muted mb-1", children: ["Stream: ", stream] }), _jsx("div", { className: "small mb-1", children: line }), _jsx(Stack, { direction: "horizontal", style: { flexWrap: "wrap" }, gap: 1, children: versions.map((version) => (_jsx(StrippingLineVersionBadge, { line: { line, stream, versions }, version: version }, version))) })] }, `${stream}/${line}`))) }) })] }), children: _jsxs(Badge, { pill: true, bg: selected ? "primary" : "secondary", children: [numLines, " stripping line", numLines === 1 ? "" : "s"] }) }));
+}