lhcb-ntuple-wizard 2.0.3 → 2.1.0

package/dist/App.js

@@ -15,6 +15,7 @@ import { Archive, CodeSlash, House } from "react-bootstrap-icons";
 import { config } from "./config";
 import { NtupleWizard } from "./components/NtupleWizard";
 import { BrowserRouter } from "react-router-dom";
+import { Slide, ToastContainer } from "react-toastify";
 export function App() {
-    return (_jsxs(_Fragment, { children: [_jsx(Navbar, { collapseOnSelect: true, expand: "lg", bg: "dark", variant: "dark", children: _jsxs(Container, { children: [_jsxs(Navbar.Brand, { href: "/", children: [_jsx("img", { src: "/logo.svg", height: "30", className: "d-inline-block align-top", alt: "LHCb logo" }), " LHCb NTuple Wizard"] }), _jsx(Navbar.Toggle, { "aria-controls": "responsive-navbar-nav" }), _jsx(Navbar.Collapse, { className: "justify-content-end", children: _jsxs(Nav, { children: [_jsxs(NavDropdown, { title: "About", id: "about-dropdown", menuVariant: "dark", children: [_jsxs(NavDropdown.Item, { href: "https://lhcb-dpa.web.cern.ch/lhcb-dpa/wp6/ntupling-wizard.html", target: "_blank", children: [_jsx(House, {}), " Project home"] }), _jsxs(NavDropdown.Item, { href: "https://gitlab.cern.ch/lhcb-dpa/wp6-analysis-preservation-and-open-data/lhcb-ntuple-wizard-frontend", target: "_blank", children: [_jsx(CodeSlash, {}), " Source code"] }), _jsxs(NavDropdown.Item, { href: config.metadata_baseurl, target: "_blank", children: [_jsx(Archive, {}), " Metadata files"] })] }), _jsx(Nav.Link, { href: "https://opendata.cern.ch/", target: "_blank", children: _jsx("img", { src: "/open_data_portal.png", height: "30", alt: "CERN Open Data Portal" }) })] }) })] }) }), _jsx(Container, { className: "mt-4", children: _jsx(BrowserRouter, { children: _jsx(NtupleWizard, {}) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Navbar, { collapseOnSelect: true, expand: "lg", bg: "dark", variant: "dark", children: _jsxs(Container, { children: [_jsxs(Navbar.Brand, { href: "/", children: [_jsx("img", { src: "/logo.svg", height: "30", className: "d-inline-block align-top", alt: "LHCb logo" }), " LHCb NTuple Wizard"] }), _jsx(Navbar.Toggle, { "aria-controls": "responsive-navbar-nav" }), _jsx(Navbar.Collapse, { className: "justify-content-end", children: _jsxs(Nav, { children: [_jsxs(NavDropdown, { title: "About", id: "about-dropdown", menuVariant: "dark", children: [_jsxs(NavDropdown.Item, { href: "https://lhcb-dpa.web.cern.ch/lhcb-dpa/wp6/ntupling-wizard.html", target: "_blank", children: [_jsx(House, {}), " Project home"] }), _jsxs(NavDropdown.Item, { href: "https://gitlab.cern.ch/lhcb-dpa/wp6-analysis-preservation-and-open-data/lhcb-ntuple-wizard-frontend", target: "_blank", children: [_jsx(CodeSlash, {}), " Source code"] }), _jsxs(NavDropdown.Item, { href: config.metadata_baseurl, target: "_blank", children: [_jsx(Archive, {}), " Metadata files"] })] }), _jsx(Nav.Link, { href: "https://opendata.cern.ch/", target: "_blank", children: _jsx("img", { src: "/open_data_portal.png", height: "30", alt: "CERN Open Data Portal" }) })] }) })] }) }), _jsx(Container, { className: "mt-4", children: _jsxs(BrowserRouter, { children: [_jsx(ToastContainer, { transition: Slide, hideProgressBar: true }), _jsx(NtupleWizard, {})] }) })] }));
 }

package/dist/components/DecayCard.d.ts

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

package/dist/components/{DttNameInput.js → DecayCard.js}

@@ -12,10 +12,14 @@ import { downloadText } from "../utils/utils";
 import { YamlFile } from "../models/yamlFile";
 import { UploadDttConfigModal } from "./modals/UploadDttConfigModal";
 import { VARIABLES_PATH } from "../constants";
-export function DttNameInput({ row, hideDownloadButtons, hideUploadButtons, basePath }) {
-    const { rows, updateRow } = useRows();
+import { useRow } from "../providers/RowProvider";
+import { useWizardConfig } from "../providers/WizardConfigProvider";
+export function DecayCard() {
+    const { row } = useRow();
+    const { rows, setRows, 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);
@@ -46,7 +50,7 @@ export function DttNameInput({ row, hideDownloadButtons, hideUploadButtons, base
         setAutoFocus(true);
     };
     const handleConfigureDtt = () => {
-        updateRow(row.id, (r) => ({ ...r, editTree: true }));
+        setRows((rows) => rows.map((r) => (r.id === row.id ? { ...r, editTree: true } : { ...r, editTree: false })));
         void navigate(`${basePath}${VARIABLES_PATH}`);
     };
     const handleDeleteDtt = () => {
@@ -65,7 +69,7 @@ export function DttNameInput({ row, hideDownloadButtons, hideUploadButtons, base
                                     ? "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, {}) }) }), !hideDownloadButtons && (_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: () => {
+                                        : "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, {}) }) }), !hideUploadButtons && (_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 }) })] }));
+                                            }, disabled: !dttNameValid, children: _jsx(Download, {}) }) }) })), _jsx(DeleteButton, { action: handleDeleteDtt, popupMessage: "Delete DecayTreeTuple" })] })) : (_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, { style: { overflowX: "auto" }, children: _jsx(DecayLatex, { decay: row.decay }) })] }));
 }

package/dist/components/DecayLatex.js

@@ -95,7 +95,7 @@ export function DecayLatex({ decay, selection }) {
         let latex = metadata.particleProperties[cleanName].latex;
         // Underline marked particles
         if (isMarked) {
-            latex = LATEX_COMMANDS.COLOR("RoyalBlue", latex);
+            latex = LATEX_COMMANDS.COLOR("#4169E1", latex);
         }
         return `${openBrace}${latex}${closeBrace}`;
     };

package/dist/components/DecayTreeCard.js

@@ -13,30 +13,27 @@ import { DecayTagBadge } from "./DecayTagBadge.js";
 import { DecayLatex } from "./DecayLatex";
 import { TupleToolList } from "./TupleToolList";
 import { useMetadata } from "../providers/MetadataProvider.js";
-import { Button, Card, OverlayTrigger, Stack, Tooltip } from "react-bootstrap";
-import { Lock, QuestionCircle, Search, Unlock } from "react-bootstrap-icons";
-import { config } from "../config.js";
-import { useEffect, useState } from "react";
+import { Card, OverlayTrigger, Stack, Tooltip } from "react-bootstrap";
+import { QuestionCircle } from "react-bootstrap-icons";
+import { useEffect } from "react";
 import { DecayTreeGraph } from "./DecayTreeGraph";
 import { DecayTreeCardHeader } from "./DecayTreeCardHeader";
 import { ParticleTagFilters } from "./ParticleTagFilters";
 import { useDtt } from "../providers/DttProvider";
 export function DecayTreeCard({ onConfigSaved, onDirtyUpdated }) {
     const metadata = useMetadata();
-    const { dtt, decay, dirty } = useDtt();
-    const [selectedBranch, setSelectedBranch] = useState([]);
-    const [lockGraphZoom, setLockGraphZoom] = useState(!config.dttGraphOptions.interaction.zoomView);
+    const { dtt, decay, dirty, selectedBranch, setSelectedBranch } = useDtt();
     useEffect(() => {
         onDirtyUpdated(dtt.getName(), dirty);
     }, [dtt, dirty]);
     if (!metadata) {
         return null;
     }
-    return (_jsxs(Card, { children: [_jsx(DecayTreeCardHeader, { dttName: dtt.getName(), inputs: dtt.config.inputs }), _jsxs(Card.Body, { children: [_jsxs(Card.Title, { className: "d-flex justify-content-between align-items-start", children: [_jsxs("span", { children: [_jsx(OverlayTrigger, { placement: "bottom", overlay: _jsx(Tooltip, { children: "Click to select particles to configure. Hold ctrl to select multiple. Clear the selection to configure the entire decay." }), children: _jsx(QuestionCircle, {}) }), " ", "Configure ", _jsx(DecayLatex, { decay: decay })] }), _jsx(OverlayTrigger, { placement: "bottom", overlay: _jsxs(Tooltip, { children: ["Click to ", lockGraphZoom ? "unlock" : "lock", " scroll-to-zoom."] }), children: _jsxs(Button, { onClick: () => setLockGraphZoom(!lockGraphZoom), variant: "secondary-outline", children: [lockGraphZoom ? _jsx(Lock, {}) : _jsx(Unlock, {}), _jsx(Search, {})] }) })] }), _jsx(Stack, { direction: "horizontal", style: { flexWrap: "wrap", justifyContent: "center" }, gap: 2, children: decay.tags
+    return (_jsxs(Card, { children: [_jsx(DecayTreeCardHeader, { dttName: dtt.getName(), inputs: dtt.config.inputs }), _jsxs(Card.Body, { children: [_jsx(Card.Title, { className: "d-flex justify-content-between align-items-start", children: _jsxs("span", { children: [_jsx(OverlayTrigger, { placement: "bottom", overlay: _jsx(Tooltip, { children: "Click to select particles to configure. Hold ctrl to select multiple. Clear the selection to configure the entire decay." }), children: _jsx(QuestionCircle, {}) }), " ", "Configure ", _jsx(DecayLatex, { decay: decay })] }) }), _jsx(Stack, { direction: "horizontal", style: { flexWrap: "wrap", justifyContent: "center" }, gap: 2, children: decay.tags
                             .filter((tag) => metadata.userHints.decayTags[tag].warn)
-                            .map((tag) => (_jsx(DecayTagBadge, { tag: tag }, tag))) }), _jsx(DecayTreeGraph, { decay: decay, lockGraphZoom: lockGraphZoom, selectedParticlesIds: selectedBranch, onNodeSelectionChanged: (nodeIds) => {
+                            .map((tag) => (_jsx(DecayTagBadge, { tag: tag }, tag))) }), _jsx(DecayTreeGraph, { decay: decay, selectedParticlesIds: selectedBranch, onNodeSelectionChanged: (nodeIds) => {
                             setSelectedBranch([...nodeIds].sort());
-                        } }), _jsx(ParticleTagFilters, { branch: selectedBranch, onSelectTag: setSelectedBranch }), _jsxs(Card.Title, { className: "mt-4", children: ["Current selection: ", _jsx(DecayLatex, { decay: decay, selection: selectedBranch })] }), _jsx(TupleToolList, { branch: selectedBranch, onGroupSelected: (group) => {
+                        } }), _jsx(ParticleTagFilters, { branch: selectedBranch, onSelectTag: setSelectedBranch }), _jsxs(Card.Title, { className: "mt-4", children: ["Current selection: ", _jsx(DecayLatex, { decay: decay, selection: selectedBranch })] }), _jsx(TupleToolList, { onGroupSelected: (group) => {
                             const selection = group.split(",");
                             setSelectedBranch(selection);
                         }, onSave: () => onConfigSaved(dtt.config) })] })] }));

package/dist/components/DecayTreeGraph.d.ts

@@ -1,9 +1,8 @@
 import { DecayData } from "../models/decayData";
 interface Props {
     decay: DecayData;
-    lockGraphZoom: boolean;
     selectedParticlesIds: string[];
     onNodeSelectionChanged: (nodeIds: string[]) => void;
 }
-export declare function DecayTreeGraph({ decay, lockGraphZoom, selectedParticlesIds, onNodeSelectionChanged }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function DecayTreeGraph({ decay, selectedParticlesIds, onNodeSelectionChanged }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DecayTreeGraph.js

@@ -1,52 +1,66 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-expect-error The react-graph-vis package does not have types
-import Graph from "react-graph-vis";
+import CytoscapeComponent from "react-cytoscapejs";
+import cytoscape from "cytoscape";
+import dagre from "cytoscape-dagre";
 import { config } from "../config";
 import { tex2svg } from "../utils/mathjaxUtils";
 import { useMetadata } from "../providers/MetadataProvider";
-import { useEffect, useState } from "react";
-export function DecayTreeGraph({ decay, lockGraphZoom, selectedParticlesIds, onNodeSelectionChanged }) {
+import { useEffect, useRef } from "react";
+cytoscape.use(dagre);
+export function DecayTreeGraph({ decay, selectedParticlesIds, onNodeSelectionChanged }) {
     const metadata = useMetadata();
-    // eslint-disable-next-line
-    const [network, setNetwork] = useState(null);
+    const cyRef = useRef(null);
+    // Sync external selection state to cytoscape selection
     useEffect(() => {
-        // eslint-disable-next-line
-        network?.selectNodes(selectedParticlesIds);
+        const cy = cyRef.current;
+        if (!cy)
+            return;
+        cy.nodes().forEach((node) => {
+            if (selectedParticlesIds.includes(node.id())) {
+                node.select();
+            }
+            else {
+                node.unselect();
+            }
+        });
     }, [selectedParticlesIds]);
-    useEffect(() => {
-        // eslint-disable-next-line
-        network?.setOptions({ interaction: { zoomView: lockGraphZoom } });
-    }, [lockGraphZoom]);
-    function htmlTitle(text) {
-        const container = document.createElement("span");
-        container.innerText = text;
-        return container;
-    }
     function makeSVG(text, colour = "black") {
-        const pipes = "\\phantom{{}^{|-}_{|-}}"; // looks weird but helps ensure uniform text scaling
+        const pipes = "\\phantom{{}^{|-}_{|-}}";
         const texSVG = tex2svg(`${pipes}${text}${pipes}`).innerHTML.replaceAll("currentColor", colour);
         return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(texSVG)}`;
     }
-    function buildGraph() {
-        const graph = { nodes: [], edges: [] };
-        if (!metadata) {
-            return graph;
-        }
+    function getHtmlTitle(text) {
+        const container = document.createElement("span");
+        container.innerText = text;
+        return container;
+    }
+    function buildElements() {
+        const elements = [];
+        if (!metadata)
+            return elements;
         const addNodeAndEdge = (item, parentId) => {
             const { branch, particle } = item;
             const particleProperties = metadata.particleProperties[particle];
-            graph.nodes.push({
-                id: branch,
-                label: branch,
-                title: htmlTitle(particleProperties.html),
-                shape: "image",
-                image: {
-                    selected: makeSVG(particleProperties.latex, "#0d6efd"),
-                    unselected: makeSVG(particleProperties.latex, "black"),
+            elements.push({
+                data: {
+                    id: branch,
+                    label: branch,
+                    // Store both SVG variants so we can swap on select/unselect
+                    imageSrc: makeSVG(particleProperties.latex, "black"),
+                    imageSelected: makeSVG(particleProperties.latex, "#0d6efd"),
+                    // Tooltip text (accessible via tippy or title attr if needed)
+                    title: getHtmlTitle(particleProperties.html).innerText,
                 },
+                selected: selectedParticlesIds.includes(branch),
             });
             if (parentId !== null) {
-                graph.edges.push({ from: parentId, to: branch });
+                elements.push({
+                    data: {
+                        id: `${parentId}->${branch}`,
+                        source: parentId,
+                        target: branch,
+                    },
+                });
             }
             return branch;
         };
@@ -68,22 +82,94 @@ export function DecayTreeGraph({ decay, lockGraphZoom, selectedParticlesIds, onN
             }
         };
         walk(decay.descriptors.mapped_list, null);
-        return graph;
+        return elements;
     }
-    return (_jsx(Graph, { graph: buildGraph(), options: config.dttGraphOptions, events: {
-            // @ts-expect-error The react-graph-vis package does not have types
-            selectNode: (event) => {
-                // eslint-disable-next-line
-                onNodeSelectionChanged(event.nodes);
+    const stylesheet = [
+        // Disable the grey circle on pan/click
+        {
+            selector: "core",
+            style: {
+                "active-bg-size": 0,
+            },
+        },
+        {
+            selector: "node",
+            style: {
+                shape: "ellipse",
+                // Use the unselected SVG as the background image
+                "background-image": "data(imageSrc)",
+                "background-fit": "contain",
+                "background-opacity": 0,
+                width: config.dttGraphOptions.nodes.width,
+                height: config.dttGraphOptions.nodes.height,
+                label: "",
+            },
+        },
+        {
+            selector: "node:active",
+            style: {
+                "overlay-opacity": 0,
+            },
+        },
+        {
+            selector: "node.hover",
+            style: {
+                "background-opacity": 0.2,
+                "background-color": config.dttGraphOptions.nodes.hoverColor,
             },
-            // @ts-expect-error The react-graph-vis package does not have types
-            deselectNode: (event) => {
-                // eslint-disable-next-line
-                onNodeSelectionChanged(event.nodes);
+        },
+        {
+            selector: "node:selected",
+            style: {
+                // Swap to the selected SVG when the node is selected
+                "background-image": "data(imageSelected)",
             },
-        }, 
-        // @ts-expect-error The react-graph-vis package does not have types
-        getNetwork: (n) => {
-            setNetwork(n);
+        },
+        {
+            selector: "edge",
+            style: {
+                "curve-style": "bezier",
+                "target-arrow-shape": "triangle",
+                width: config.dttGraphOptions.edges.width,
+                "line-color": config.dttGraphOptions.edges.color,
+                "target-arrow-color": config.dttGraphOptions.edges.color,
+                events: "no",
+            },
+        },
+    ];
+    return (_jsx(CytoscapeComponent, { elements: buildElements(), stylesheet: stylesheet, style: { width: "100%", height: config.dttGraphOptions.height }, autoungrabify: !config.dttGraphOptions.nodes.draggable, autounselectify: false, boxSelectionEnabled: true, cy: (cy) => {
+            cyRef.current = cy;
+            // Set up zoom
+            cy.userZoomingEnabled(false);
+            cy.minZoom(config.dttGraphOptions.zoomMin);
+            cy.maxZoom(config.dttGraphOptions.zoomMax);
+            // Handle zoom event
+            cy.container()?.addEventListener("wheel", (e) => {
+                if (!(e.ctrlKey || e.metaKey))
+                    return;
+                e.preventDefault();
+                const zoom = cy.zoom();
+                const factor = 1 + (e.deltaY < 0 ? config.dttGraphOptions.zoomStep : -config.dttGraphOptions.zoomStep);
+                cy.zoom({
+                    level: zoom * factor,
+                    renderedPosition: { x: e.offsetX, y: e.offsetY },
+                });
+            }, { passive: false });
+            // Handle node selection events
+            cy.off("select unselect", "node");
+            cy.on("select unselect", "node", () => {
+                const selected = cy.nodes(":selected").map((n) => n.id());
+                onNodeSelectionChanged(selected);
+            });
+            // Handle hover events
+            cy.on("mouseover", "node", (e) => {
+                e.target.addClass("hover");
+            });
+            cy.on("mouseout", "node", (e) => {
+                e.target.removeClass("hover");
+            });
+        }, layout: {
+            ...config.dttGraphOptions.layout,
+            name: "dagre",
         } }));
 }

package/dist/components/DeleteButton.d.ts

@@ -3,7 +3,8 @@ interface Props {
     action: () => void;
     outline?: boolean;
     disabled?: boolean;
+    popupMessage?: string;
     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, 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", 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: "auto", 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/NtupleWizard.d.ts

@@ -16,6 +16,7 @@ interface Props {
     submitLocation?: string;
     requestReasonMessage?: string;
     requestSubmittedMessage?: ReactNode;
+    onRequestSubmitted?: () => void;
 }
-export declare function NtupleWizard({ basePath, contactEmail, submitLocation, requestReasonMessage, requestSubmittedMessage, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function NtupleWizard({ basePath, contactEmail, submitLocation, requestReasonMessage, requestSubmittedMessage, onRequestSubmitted, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NtupleWizard.js

@@ -19,10 +19,16 @@ 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";
-export function NtupleWizard({ basePath = "", contactEmail, submitLocation, requestReasonMessage, requestSubmittedMessage, }) {
+import { WizardConfigProvider } from "../providers/WizardConfigProvider";
+export function NtupleWizard({ basePath = "", contactEmail, submitLocation, requestReasonMessage, requestSubmittedMessage, onRequestSubmitted, }) {
     const { pathname } = useLocation();
     if (contactEmail) {
         localStorage.setItem("email", contactEmail);
     }
-    return (_jsx(MetadataProvider, { children: _jsx(RowsProvider, { children: _jsx(RequestProvider, { emailIsKnown: !!contactEmail, children: _jsx(MathJaxContext, { children: pathname.endsWith(SELECT_DECAYS_PATH) ? (_jsx(DecaySearchPage, { basePath: basePath })) : pathname.endsWith(VARIABLES_PATH) ? (_jsx(DecayTreeConfigPage, { basePath: basePath })) : (_jsx(RequestPage, { basePath: basePath, submitLocation: submitLocation, requestReasonMessage: requestReasonMessage, requestSubmittedMessage: requestSubmittedMessage })) }) }) }) }));
+    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, { config: {
+                            loader: { load: ["[tex]/color"] },
+                            tex: {
+                                packages: { "[+]": ["color"] },
+                            },
+                        }, children: pathname.endsWith(SELECT_DECAYS_PATH) ? (_jsx(DecaySearchPage, {})) : pathname.endsWith(VARIABLES_PATH) ? (_jsx(DecayTreeConfigPage, {})) : (_jsx(RequestPage, {})) }) }) }) }) }));
 }

package/dist/components/RequestButtonGroup.d.ts

@@ -1,7 +1 @@
-import { NtupleWizardVariant } from "../pages/RequestPage";
-interface Props {
-    variant: NtupleWizardVariant;
-    basePath: string;
-}
-export declare function RequestButtonGroup({ variant, basePath }: Props): import("react/jsx-runtime").JSX.Element | null;
-export {};
+export declare function RequestButtonGroup(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/RequestButtonGroup.js

@@ -10,13 +10,15 @@ import { useRows } from "../providers/RowsProvider";
 import { useMetadata } from "../providers/MetadataProvider";
 import { useRequest } from "../providers/RequestProvider";
 import { useState } from "react";
-export function RequestButtonGroup({ variant, basePath }) {
+import { useWizardConfig } from "../providers/WizardConfigProvider";
+export function RequestButtonGroup() {
+    const { variant, basePath } = useWizardConfig();
     const metadata = useMetadata();
     const { validation } = useRequest();
     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}`);
     };
@@ -24,6 +26,6 @@ export function RequestButtonGroup({ variant, basePath }) {
         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,7 +1 @@
-interface Props {
-    hideDownloadButtons: boolean;
-    hideUploadButtons: boolean;
-    basePath: string;
-}
-export declare function RequestRow({ hideDownloadButtons, hideUploadButtons, basePath }: Props): import("react/jsx-runtime").JSX.Element | null;
-export {};
+export declare function RequestRow(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/RequestRow.js

@@ -2,19 +2,20 @@ 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 { DecayCard } from "./DecayCard";
 import { useMetadata } from "../providers/MetadataProvider";
-import { useRows } from "../providers/RowsProvider";
 import { BookkeepingPathDropdown } from "./BookkeepingPathDropdown";
 import { StrippingLineDropdown } from "./StrippingLineDropdown";
 import { useRow } from "../providers/RowProvider";
-export function RequestRow({ hideDownloadButtons, hideUploadButtons, basePath }) {
+import { VerticalLine } from "./VerticalLine";
+import { DeleteButton } from "./DeleteButton";
+import { useRows } from "../providers/RowsProvider";
+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, { row: row, hideDownloadButtons: hideDownloadButtons, hideUploadButtons: hideUploadButtons, basePath: basePath }) }), _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(OverlayTrigger, { trigger: "click", 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(Row, { children: _jsx(BookkeepingPathDropdown, {}) })] }), _jsxs(Col, { xs: 1, className: "d-flex align-items-center justify-content-center gap-4", children: [_jsx(VerticalLine, {}), _jsx(DeleteButton, { action: () => removeRow(row.id), popupMessage: "Delete row" })] })] }));
 }

package/dist/components/StrippingLineBadge.js

@@ -24,5 +24,5 @@ export function StrippingLineBadge({ version, line, stream, showLink }) {
             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 ? metadata.strippingHints[version].description : "..." }), children: _jsx(Badge, { pill: true, bg: "info", ...badgeProps, children: "S" + version }) }));
 }

package/dist/components/{TupleToolDropdown.d.ts → TupleToolClassDropdown.d.ts}

@@ -10,12 +10,9 @@
  \*****************************************************************************/
 import { GroupBase, Props as SelectProps } from "react-select";
 import { ReactNode } from "react";
-type ToolOption = {
+type ToolDropdownOption = {
     value: string;
     label: ReactNode;
 };
-interface Props extends SelectProps<ToolOption, false, GroupBase<ToolOption>> {
-    filterToolTags: string[];
-}
-export declare function TupleToolDropdown({ filterToolTags, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function TupleToolClassDropdown(props: SelectProps<ToolDropdownOption, false, GroupBase<ToolDropdownOption>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/{TupleToolDropdown.js → TupleToolClassDropdown.js}

@@ -13,17 +13,23 @@ import Select from "react-select";
 import { TupleToolLabel } from "./TupleToolLabel";
 import { useMetadata } from "../providers/MetadataProvider.js";
 import { TupleTool } from "../models/tupleTool";
-export function TupleToolDropdown({ filterToolTags, ...props }) {
+import { useDtt } from "../providers/DttProvider";
+export function TupleToolClassDropdown(props) {
     const metadata = useMetadata();
+    const { selectedBranch } = useDtt();
+    const allowedTags = ["IParticleTupleTool", ...(selectedBranch.length === 0 ? ["IEventTupleTool"] : [])];
+    const disallowedTools = ["LoKi__Hybrid__ArrayTupleTool"];
+    // Group tools by tag
     const options = metadata
-        ? filterToolTags.map((allowedTag) => ({
+        ? allowedTags.map((allowedTag) => ({
             label: allowedTag,
             options: Object.keys(metadata.tupleTools.tupleTools)
                 .sort()
                 .map(TupleTool.fromString)
                 .map((tool) => ({ value: tool.toString(), label: _jsx(TupleToolLabel, { tool: tool }) }))
-                .filter((tool) => metadata.tupleTools.tupleTools[tool.value].tags.includes(allowedTag)),
+                .filter((tool) => metadata.tupleTools.tupleTools[tool.value].tags.includes(allowedTag) &&
+                !disallowedTools.includes(tool.value)),
         }))
         : [];
-    return (_jsx("div", { className: "react-select form-control p-0", children: _jsx(Select, { options: options, isLoading: !metadata, ...props }) }));
+    return (_jsx("div", { className: "react-select form-control p-0", children: _jsx(Select, { placeholder: "TupleTool class", options: options, isLoading: !metadata, ...props }) }));
 }

package/dist/components/TupleToolGroup.d.ts

@@ -1,6 +1,5 @@
 interface Props {
-    branch: string[];
     onGroupSelected: (group: string) => void;
 }
-export declare function TupleToolGroup({ branch, onGroupSelected }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function TupleToolGroup({ onGroupSelected }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TupleToolGroup.js

@@ -3,14 +3,14 @@ import { Button, Card, ListGroup, OverlayTrigger, Popover } from "react-bootstra
 import { PencilSquare } from "react-bootstrap-icons";
 import { DecayLatex } from "./DecayLatex";
 import { useDtt } from "../providers/DttProvider";
-export function TupleToolGroup({ branch, onGroupSelected }) {
-    const { dtt, decay } = useDtt();
+export function TupleToolGroup({ onGroupSelected }) {
+    const { dtt, decay, selectedBranch } = useDtt();
     let groups = {};
-    if (branch.length === 0) {
+    if (selectedBranch.length === 0) {
         groups = dtt.config.groups;
     }
-    else if (branch.length === 1) {
-        const filteredGroups = Object.entries(dtt.config.groups).filter(([key]) => key.includes(branch[0]));
+    else if (selectedBranch.length === 1) {
+        const filteredGroups = Object.entries(dtt.config.groups).filter(([key]) => key.includes(selectedBranch[0]));
         groups = Object.fromEntries(filteredGroups);
     }
     const groupKeys = Object.keys(groups);

package/dist/components/TupleToolList.d.ts

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

package/dist/components/TupleToolList.js

@@ -19,19 +19,23 @@ import { TupleToolGroup } from "./TupleToolGroup";
 import { AddTupleToolModal } from "./modals/AddTupleToolModal";
 import { ConfigureTupleToolModal } from "./modals/ConfigureTupleToolModal";
 import { useDtt } from "../providers/DttProvider";
-export function TupleToolList({ branch, onGroupSelected, onSave }) {
+export function TupleToolList({ onGroupSelected, onSave }) {
     const metadata = useMetadata();
-    const { dtt, dirty, save, revert, removeTool } = useDtt();
+    const { dtt, dirty, save, revert, removeTool, selectedBranch } = useDtt();
     const [showAddModal, setShowAddModal] = useState(false);
-    const [showConfigModalWithTool, setShowConfigModalWithTool] = useState(null);
+    const [showConfigModal, setShowConfigModal] = useState(null);
     if (!metadata) {
         return null;
     }
-    const tools = dtt.listTools(branch);
-    const filterToolTags = branch.length === 0 ? ["IParticleTupleTool", "IEventTupleTool"] : ["IParticleTupleTool"];
+    const tools = dtt.listTools(selectedBranch);
     return (_jsxs(_Fragment, { children: [_jsxs(Card, { children: [_jsxs(Card.Header, { className: "d-flex justify-content-between align-items-start", children: [_jsxs("span", { children: [tools.length, " TupleTool", tools.length === 1 ? "" : "s"] }), _jsx(Button, { variant: "success", size: "sm", onClick: () => setShowAddModal(true), children: _jsx(PlusLg, {}) })] }), _jsx(ListGroup, { variant: "flush", children: tools.map((tool) => {
-                            return (_jsxs(ListGroup.Item, { className: "d-flex justify-content-between align-items-start", variant: showConfigModalWithTool?.equals(tool) ? "secondary" : "", children: [_jsx(TupleToolLabel, { tool: tool }), _jsxs(ButtonGroup, { size: "sm", children: [_jsx(Button, { variant: "outline-secondary", onClick: () => setShowConfigModalWithTool(tool), children: _jsx(PencilSquare, {}) }), _jsx(DeleteButton, { outline: true, action: () => removeTool(branch, tool) })] })] }, tool.toString()));
-                        }) })] }), showAddModal && (_jsx(AddTupleToolModal, { branch: branch, filterToolTags: filterToolTags, onClose: () => setShowAddModal(false) })), showConfigModalWithTool && (_jsx(ConfigureTupleToolModal, { branch: branch, tool: showConfigModalWithTool, onClose: () => setShowConfigModalWithTool(null) })), branch.length === 0 && Object.keys(dtt.config.groups).length > 0 && (_jsx(TupleToolGroup, { branch: branch, onGroupSelected: onGroupSelected })), _jsxs(ButtonGroup, { className: "mt-2", children: [_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Save changes to this DecayTreeTuple" }), children: _jsx(Button, { onClick: () => {
+                            return (_jsxs(ListGroup.Item, { className: "d-flex justify-content-between align-items-start", variant: showConfigModal?.tool.equals(tool) ? "secondary" : "", children: [_jsx(TupleToolLabel, { tool: tool }), _jsxs(ButtonGroup, { size: "sm", children: [_jsx(Button, { variant: "outline-secondary", onClick: () => setShowConfigModal({ tool, deleteIfCancelled: false }), children: _jsx(PencilSquare, {}) }), _jsx(DeleteButton, { outline: true, action: () => removeTool(selectedBranch, tool) })] })] }, tool.toString()));
+                        }) })] }), showAddModal && (_jsx(AddTupleToolModal, { onClose: (newTool) => {
+                    setShowAddModal(false);
+                    if (newTool && newTool.class === "LoKi__Hybrid__TupleTool") {
+                        setShowConfigModal({ tool: newTool, deleteIfCancelled: true });
+                    }
+                } })), showConfigModal && (_jsx(ConfigureTupleToolModal, { tool: showConfigModal.tool, deleteIfCancelled: showConfigModal.deleteIfCancelled, onClose: () => setShowConfigModal(null) })), selectedBranch.length === 0 && Object.keys(dtt.config.groups).length > 0 && (_jsx(TupleToolGroup, { onGroupSelected: onGroupSelected })), _jsxs(ButtonGroup, { className: "mt-2", children: [_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Save changes to this DecayTreeTuple" }), children: _jsx(Button, { onClick: () => {
                                 save();
                                 onSave();
                             }, disabled: !dirty, children: "Save" }) }), _jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Discard changes to this DecayTreeTuple" }), children: _jsx(Button, { variant: "outline-danger", onClick: revert, disabled: !dirty, children: "Revert" }) })] })] }));

package/dist/components/VerticalLine.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    width?: string;
+    height?: string;
+    color?: string;
+}
+export declare function VerticalLine({ width, height, color }: Props): import("react/jsx-runtime").JSX.Element;
+export {};