lhcb-ntuple-wizard 2.0.4 → 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}

@@ -14,9 +14,9 @@ import { UploadDttConfigModal } from "./modals/UploadDttConfigModal";
 import { VARIABLES_PATH } from "../constants";
 import { useRow } from "../providers/RowProvider";
 import { useWizardConfig } from "../providers/WizardConfigProvider";
-export function DttNameInput() {
+export function DecayCard() {
     const { row } = useRow();
-    const { rows, updateRow } = useRows();
+    const { rows, setRows, updateRow } = useRows();
     const navigate = useNavigate();
     const metadata = useMetadata();
     const { basePath, variant } = useWizardConfig();
@@ -50,7 +50,7 @@ export function DttNameInput() {
         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 = () => {
@@ -71,5 +71,5 @@ export function DttNameInput() {
                                         ? "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 }) })] }));
+                                            }, 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.js

@@ -25,5 +25,10 @@ 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: _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.js

@@ -18,7 +18,7 @@ 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}`);
     };
@@ -26,6 +26,6 @@ export function RequestButtonGroup() {
         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.js

@@ -2,13 +2,14 @@ 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";
+import { VerticalLine } from "./VerticalLine";
+import { DeleteButton } from "./DeleteButton";
+import { useRows } from "../providers/RowsProvider";
 export function RequestRow() {
     const metadata = useMetadata();
     const { row } = useRow();
@@ -16,5 +17,5 @@ export function RequestRow() {
     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(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 {};

package/dist/components/VerticalLine.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function VerticalLine({ width = "1px", height = "100%", color = "#bbb" }) {
+    return _jsx("div", { style: { borderLeft: `${width} solid ${color}`, height } });
+}

package/dist/components/modals/AddTupleToolModal.d.ts

@@ -1,7 +1,6 @@
+import { TupleTool } from "../../models/tupleTool";
 interface Props {
-    branch: string[];
-    filterToolTags: string[];
-    onClose: () => void;
+    onClose: (newTool: TupleTool | null) => void;
 }
-export declare function AddTupleToolModal({ branch, filterToolTags, onClose }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function AddTupleToolModal({ onClose }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/modals/AddTupleToolModal.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, FormControl, InputGroup, Modal } from "react-bootstrap";
-import { TupleToolDropdown } from "../TupleToolDropdown";
+import { Button, ButtonGroup, FormControl, InputGroup, Modal } from "react-bootstrap";
+import { TupleToolClassDropdown } from "../TupleToolClassDropdown";
 import { TupleToolDocsAccordion } from "../TupleToolDocsAccordion";
 import { useDtt } from "../../providers/DttProvider";
 import { TupleTool } from "../../models/tupleTool";
 import { useEffect, useRef, useState } from "react";
-export function AddTupleToolModal({ branch, filterToolTags, onClose }) {
-    const { dtt, addTool } = useDtt();
+export function AddTupleToolModal({ onClose }) {
+    const { dtt, addTool, selectedBranch } = useDtt();
     const nameInputRef = useRef(null);
     const [selectedTool, setSelectedTool] = useState(null);
     useEffect(() => {
         nameInputRef.current?.focus();
     }, [selectedTool]);
-    return (_jsxs(Modal, { show: true, onHide: onClose, children: [_jsx(Modal.Header, { closeButton: true, children: "Add TupleTool" }), _jsxs(Modal.Body, { className: "gap-3 d-flex flex-column", children: [_jsxs(InputGroup, { hasValidation: true, children: [_jsx(TupleToolDropdown, { filterToolTags: filterToolTags, placeholder: "TupleTool class", onChange: (option) => {
+    return (_jsxs(Modal, { show: true, onHide: () => onClose(null), children: [_jsx(Modal.Header, { closeButton: true, children: "Add TupleTool" }), _jsxs(Modal.Body, { className: "gap-3 d-flex flex-column", children: [_jsxs(InputGroup, { hasValidation: true, children: [_jsx(TupleToolClassDropdown, { onChange: (option) => {
                                     if (option) {
                                         setSelectedTool((prev) => new TupleTool(option.value, prev?.name || ""));
                                     }
@@ -20,13 +20,13 @@ export function AddTupleToolModal({ branch, filterToolTags, onClose }) {
                                     // Remove all non-word characters
                                     const name = event.target.value.replaceAll(/[^\w]/g, "");
                                     setSelectedTool((prev) => new TupleTool(prev.class, name));
-                                }, value: selectedTool?.name || "", disabled: !selectedTool, isInvalid: !!selectedTool && dtt.toolExists(selectedTool, branch), onKeyDown: (event) => {
+                                }, value: selectedTool?.name || "", disabled: !selectedTool, isInvalid: !!selectedTool && dtt.toolExists(selectedTool, selectedBranch), onKeyDown: (event) => {
                                     if (event.key === "Enter") {
-                                        addTool(branch, selectedTool);
-                                        onClose();
+                                        addTool(selectedBranch, selectedTool);
+                                        onClose(selectedTool);
                                     }
-                                } }), selectedTool && (_jsxs(FormControl.Feedback, { type: "invalid", children: ["A ", selectedTool.class, " with the name \"", selectedTool.name, "\" already exists"] }))] }), selectedTool && _jsx(TupleToolDocsAccordion, { toolClass: selectedTool.class }), _jsx(Button, { className: "align-self-end", variant: "success", disabled: !selectedTool || dtt.toolExists(selectedTool, branch), onClick: () => {
-                            addTool(branch, selectedTool);
-                            onClose();
-                        }, children: "Add tool" })] })] }));
+                                } }), selectedTool && (_jsxs(FormControl.Feedback, { type: "invalid", children: ["A ", selectedTool.class, " with the name \"", selectedTool.name, "\" already exists"] }))] }), selectedTool && _jsx(TupleToolDocsAccordion, { toolClass: selectedTool.class }), _jsxs(ButtonGroup, { className: "align-self-end", children: [_jsx(Button, { variant: "outline-dark", onClick: () => onClose(null), children: "Cancel" }), _jsx(Button, { disabled: !selectedTool || dtt.toolExists(selectedTool, selectedBranch), onClick: () => {
+                                    addTool(selectedBranch, selectedTool);
+                                    onClose(selectedTool);
+                                }, children: "Add tool" })] })] })] }));
 }

package/dist/components/modals/ConfigureTupleToolModal.d.ts

@@ -1,8 +1,8 @@
 import { TupleTool } from "../../models/tupleTool";
 interface Props {
-    branch: string[];
     tool: TupleTool;
+    deleteIfCancelled: boolean;
     onClose: () => void;
 }
-export declare function ConfigureTupleToolModal({ branch, tool, onClose }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ConfigureTupleToolModal({ tool, deleteIfCancelled, onClose }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/modals/ConfigureTupleToolModal.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Button, Col, Form, Modal, OverlayTrigger, Row, Tooltip } from "react-bootstrap";
+import { Button, ButtonGroup, Col, Form, Modal, OverlayTrigger, Row, Tooltip } from "react-bootstrap";
 import { StrParamInput } from "../tupleToolParams/StrParamInput";
 import { BoolParamInput } from "../tupleToolParams/BoolParamInput";
 import { NumParamInput } from "../tupleToolParams/NumParamInput";
@@ -8,36 +8,53 @@ import { DictParamInput } from "../tupleToolParams/DictParamInput";
 import { QuestionCircle } from "react-bootstrap-icons";
 import { TupleToolDocsAccordion } from "../TupleToolDocsAccordion";
 import { useDtt } from "../../providers/DttProvider";
-export function ConfigureTupleToolModal({ branch, tool, onClose }) {
-    const { dtt, updateToolParam } = useDtt();
-    return (_jsxs(Modal, { show: true, size: "xl", fullscreen: "lg-down", onHide: onClose, children: [_jsxs(Modal.Header, { closeButton: true, children: ["Configure ", tool.toString()] }), _jsxs(Modal.Body, { className: "gap-3 d-flex flex-column", children: [tool ? (_jsx(Form, { children: Object.entries(dtt.getToolConfig(branch, tool)).map(([paramName, param]) => {
+import { config } from "../../config";
+import { toast } from "react-toastify";
+export function ConfigureTupleToolModal({ tool, deleteIfCancelled, onClose }) {
+    const { dtt, updateToolParam, removeTool, selectedBranch } = useDtt();
+    const toolConfig = dtt.getToolConfig(selectedBranch, tool);
+    return (_jsxs(Modal, { show: true, size: "xl", fullscreen: "lg-down", backdrop: "static", keyboard: false, children: [_jsxs(Modal.Header, { children: ["Configure ", tool.toString()] }), _jsxs(Modal.Body, { className: "gap-3 d-flex flex-column", children: [_jsx(Form, { children: Object.entries(toolConfig).map(([paramName, param]) => {
                             const { description, type, default: defaultValue, value } = param;
                             let inputComponent;
                             switch (type) {
                                 case "str":
-                                    inputComponent = (_jsx(StrParamInput, { value: value, defaultValue: defaultValue, onChange: (newValue) => updateToolParam(branch, tool, paramName, newValue), param: paramName }));
+                                    inputComponent = (_jsx(StrParamInput, { value: value, defaultValue: defaultValue, onChange: (newValue) => updateToolParam(selectedBranch, tool, paramName, newValue), param: paramName }));
                                     break;
                                 case "bool":
-                                    inputComponent = (_jsx(BoolParamInput, { value: value, onChange: (newValue) => updateToolParam(branch, tool, paramName, newValue) }));
+                                    inputComponent = (_jsx(BoolParamInput, { value: value, onChange: (newValue) => updateToolParam(selectedBranch, tool, paramName, newValue) }));
                                     break;
                                 case "int":
                                 case "uint":
                                 case "float":
-                                    inputComponent = (_jsx(NumParamInput, { type: type, value: value, defaultValue: defaultValue, onChange: (newValue) => updateToolParam(branch, tool, paramName, newValue) }));
+                                    inputComponent = (_jsx(NumParamInput, { type: type, value: value, defaultValue: defaultValue, onChange: (newValue) => updateToolParam(selectedBranch, tool, paramName, newValue) }));
                                     break;
                                 case "text":
-                                    inputComponent = (_jsx(ListParamInput, { initialValues: value, defaultValues: defaultValue, newItemValue: "", onChange: (newValue) => updateToolParam(branch, tool, paramName, newValue), buildInnerInput: (props) => _jsx(StrParamInput, { ...props, param: paramName }) }));
+                                    inputComponent = (_jsx(ListParamInput, { initialValues: value, defaultValues: defaultValue, newItemValue: "", onChange: (newValue) => updateToolParam(selectedBranch, tool, paramName, newValue), buildInnerInput: (props) => _jsx(StrParamInput, { ...props, param: paramName }) }));
                                     break;
                                 case "[int]":
                                 case "[uint]":
                                 case "[float]":
-                                    inputComponent = (_jsx(ListParamInput, { initialValues: value, defaultValues: defaultValue, newItemValue: 0, onChange: (newValue) => updateToolParam(branch, tool, paramName, newValue), buildInnerInput: (props) => (_jsx(NumParamInput, { type: type.slice(1, -1), ...props })) }));
+                                    inputComponent = (_jsx(ListParamInput, { initialValues: value, defaultValues: defaultValue, newItemValue: 0, onChange: (newValue) => updateToolParam(selectedBranch, tool, paramName, newValue), buildInnerInput: (props) => (_jsx(NumParamInput, { type: type.slice(1, -1), ...props })) }));
                                     break;
                                 case "{str:str}":
                                 case "{str:[str]}":
-                                    inputComponent = (_jsx(DictParamInput, { value: value, onChange: (newValue) => updateToolParam(branch, tool, paramName, newValue) }));
+                                    inputComponent = (_jsx(DictParamInput, { value: value, onChange: (newValue) => updateToolParam(selectedBranch, tool, paramName, newValue) }));
                                     break;
                             }
                             return (_jsxs(Form.Group, { as: Row, className: "mb-2", children: [_jsxs(Form.Label, { column: true, sm: 3, children: [_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: description }), children: _jsx(QuestionCircle, {}) }), _jsxs("code", { children: [" ", paramName, " "] })] }), _jsx(Form.Label, { column: true, sm: 2, children: _jsxs("code", { children: [" ", type, " "] }) }), _jsx(Col, { sm: 7, children: inputComponent })] }, paramName));
-                        }) })) : ("No tool selected"), _jsx(TupleToolDocsAccordion, { toolClass: tool.class }), _jsx(Button, { className: "align-self-end", onClick: onClose, children: "Save & close" })] })] }));
+                        }) }), _jsx(TupleToolDocsAccordion, { toolClass: tool.class }), _jsxs(ButtonGroup, { className: "align-self-end", children: [_jsx(Button, { variant: deleteIfCancelled ? "outline-danger" : "outline-dark", onClick: () => {
+                                    if (deleteIfCancelled) {
+                                        removeTool(selectedBranch, tool);
+                                    }
+                                    onClose();
+                                }, children: "Cancel" }), _jsx(Button, { onClick: () => {
+                                    if (Object.keys(config.tupleToolValidation).includes(tool.class)) {
+                                        const errorMsg = config.tupleToolValidation[tool.class].validate(toolConfig);
+                                        if (errorMsg) {
+                                            toast(errorMsg, { type: "error" });
+                                            return;
+                                        }
+                                    }
+                                    onClose();
+                                }, children: "Save & close" })] })] })] }));
 }

package/dist/config.d.ts

@@ -1,3 +1,5 @@
+import { DagreLayoutOptions } from "cytoscape-dagre";
+import { ToolConfig } from "./models/dtt";
 export declare const config: {
     metadata_baseurl: string;
     metadata_files: {
@@ -21,58 +23,27 @@ export declare const config: {
         lifetime: string;
     };
     dttGraphOptions: {
-        layout: {
-            hierarchical: {
-                sortMethod: string;
-            };
-        };
+        height: string;
+        zoomMin: number;
+        zoomMax: number;
+        zoomStep: number;
+        layout: DagreLayoutOptions;
         nodes: {
-            borderWidth: number;
-            borderWidthSelected: number;
-            imagePadding: number;
-            font: {
-                strokeWidth: number;
-                background: string;
-            };
-            color: {
-                background: string;
-                highlight: {
-                    background: string;
-                };
-                hover: {
-                    background: string;
-                };
-            };
-            scaling: {
-                min: number;
-                max: number;
-            };
-            value: number;
-            shape: string;
-            shapeProperties: {
-                useBorderWithImage: boolean;
-                useImageSize: boolean;
-            };
+            draggable: boolean;
+            width: number;
+            height: number;
+            hoverColor: string;
         };
         edges: {
             color: string;
             width: number;
-            selectionWidth: number;
-            hoverWidth: number;
-        };
-        physics: {
-            enabled: boolean;
         };
-        interaction: {
-            dragNodes: boolean;
-            multiselect: boolean;
-            selectConnectedEdges: boolean;
-            hoverConnectedEdges: boolean;
-            hover: boolean;
-            zoomView: boolean;
-        };
-        height: string;
-        autoResize: boolean;
-        width: string;
     };
+    tupleToolValidation: TupleToolValidation;
 };
+interface TupleToolValidation {
+    [toolClass: string]: {
+        validate: (config: ToolConfig) => string | null;
+    };
+}
+export {};

package/dist/config.js

@@ -21,52 +21,39 @@ export const config = {
         lifetime: "secondary",
     },
     dttGraphOptions: {
+        height: "500px",
+        zoomMin: 0.2,
+        zoomMax: 3.0,
+        zoomStep: 0.018,
         layout: {
-            hierarchical: { sortMethod: "directed" },
+            rankDir: "TB", // top -> bottom
+            nodeSep: 50,
+            rankSep: 80,
+            animate: false,
         },
         nodes: {
-            borderWidth: 0,
-            borderWidthSelected: 0,
-            imagePadding: 10,
-            font: {
-                strokeWidth: 20,
-                background: "white",
-            },
-            color: {
-                background: "white",
-                highlight: { background: "white" },
-                hover: { background: "#eee" },
-            },
-            scaling: {
-                min: 32,
-                max: 32,
-            },
-            value: 1,
-            shape: "image",
-            shapeProperties: {
-                useBorderWithImage: true,
-                useImageSize: false,
-            },
+            draggable: false,
+            width: 80,
+            height: 30,
+            hoverColor: "royalblue",
         },
         edges: {
-            color: "black",
+            color: "#222",
             width: 1,
-            selectionWidth: 0,
-            hoverWidth: 0,
         },
-        physics: {
-            enabled: false,
-        },
-        interaction: {
-            dragNodes: false,
-            multiselect: true,
-            selectConnectedEdges: false,
-            hoverConnectedEdges: false,
-            hover: true,
-            zoomView: false,
+    },
+    tupleToolValidation: {
+        ["LoKi__Hybrid__TupleTool"]: {
+            validate: (config) => {
+                const hasVariables = Object.entries(config["Variables"].value).length > 0;
+                const hasBoolVariables = Object.entries(config["BoolVariables"].value).length > 0;
+                const hasFloatVariables = Object.entries(config["FloatVariables"].value).length > 0;
+                const hasIntVariables = Object.entries(config["IntVariables"].value).length > 0;
+                if (!hasVariables && !hasBoolVariables && !hasFloatVariables && !hasIntVariables) {
+                    return "Please add at least one variable";
+                }
+                return null;
+            },
         },
-        height: "500px",
-        autoResize: true,
-        width: "100%",
     },
 };

package/dist/pages/DecayTreeConfigPage.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * granted to it by virtue of its status as an Intergovernmental Organization  *
  * or submit itself to any jurisdiction.                                       *
  \*****************************************************************************/
-import { Button, Col, OverlayTrigger, Row, Stack, Tooltip } from "react-bootstrap";
+import { Button, OverlayTrigger, Stack, Tooltip } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 import { useMetadata } from "../providers/MetadataProvider";
 import { DecayTreeCard } from "../components/DecayTreeCard";
@@ -41,18 +41,18 @@ export function DecayTreeConfigPage() {
         return _jsx(LoadingIndicator, { height: "70vh" });
     }
     const rowsToEdit = rows.filter((row) => !!row.editTree);
-    return (_jsxs(_Fragment, { children: [_jsx("h3", { children: "DecayTreeTuple configuration" }), _jsx(Stack, { gap: 5, children: rowsToEdit.map((row) => (_jsx(Row, { className: "justify-content-lg-center", children: _jsx(Col, { lg: "auto", children: _jsx(DttProvider, { metadata: metadata, decay: row.decay, initialConfig: row.dtt.config, children: _jsx(DecayTreeCard, { onConfigSaved: (newConfig) => {
-                                    updateRow(row.id, (r) => ({ ...r, dtt: new Dtt(newConfig, {}) }));
-                                }, onDirtyUpdated: (dttName, dirty) => setDirtyDtts((prev) => {
-                                    if (dirty) {
-                                        return new Set(prev.add(dttName));
-                                    }
-                                    else {
-                                        const newSet = new Set(prev);
-                                        newSet.delete(dttName);
-                                        return newSet;
-                                    }
-                                }) }) }) }, row.id) }, row.id))) }), _jsx(OverlayTrigger, { placement: "right", overlay: _jsx(Tooltip, { children: "Return to Stripping line and dataset selection" }), children: _jsx(Button, { className: "mt-2 mb-4", type: "submit", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("h3", { className: "mb-4", children: "DecayTreeTuple configuration" }), _jsx(Stack, { gap: 5, children: rowsToEdit.map((row) => (_jsx(DttProvider, { metadata: metadata, decay: row.decay, initialConfig: row.dtt.config, children: _jsx(DecayTreeCard, { onConfigSaved: (newConfig) => {
+                            updateRow(row.id, (r) => ({ ...r, dtt: new Dtt(newConfig, {}) }));
+                        }, onDirtyUpdated: (dttName, dirty) => setDirtyDtts((prev) => {
+                            if (dirty) {
+                                return new Set(prev.add(dttName));
+                            }
+                            else {
+                                const newSet = new Set(prev);
+                                newSet.delete(dttName);
+                                return newSet;
+                            }
+                        }) }) }, row.id))) }), _jsx(OverlayTrigger, { placement: "right", overlay: _jsx(Tooltip, { children: "Return to Stripping line and dataset selection" }), children: _jsx(Button, { className: "mt-2 mb-4", type: "submit", onClick: () => {
                         if (dirtyDtts.size > 0) {
                             if (!confirm("You have unsaved changes. Are you sure you want to discard them?")) {
                                 return;

package/dist/pages/RequestPage.js

@@ -12,7 +12,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from "react";
 import { Alert, Button, Col, Row, Stack } from "react-bootstrap";
 import { Download, Send } from "react-bootstrap-icons";
-import { useLocation } from "react-router-dom";
 import { downloadZip, processProductionFiles } from "../utils/utils";
 import { DeleteButton } from "../components/DeleteButton";
 import { useMetadata } from "../providers/MetadataProvider";
@@ -29,7 +28,6 @@ import { RequestEmailInput } from "../components/RequestEmailInput";
 import { RequestButtonGroup } from "../components/RequestButtonGroup";
 import { useWizardConfig } from "../providers/WizardConfigProvider";
 export function RequestPage() {
-    const location = useLocation();
     const metadata = useMetadata();
     const { rows, setRows, generateAllFiles } = useRows();
     const { emailIsKnown, productionName, setProductionName, validation, showErrors, clearAll, trySubmit } = useRequest();
@@ -38,17 +36,15 @@ export function RequestPage() {
     const [prodUploadLoading, setProdUploadLoading] = useState(false);
     const [requestSubmitted, setRequestSubmitted] = useState(false);
     const [showReasonForRequestModal, setShowReasonForRequestModal] = useState(false);
+    const [checkedIfCloneNeeded, setCheckedIfCloneNeeded] = useState(false);
     useEffect(() => {
         if (!metadata) {
             return;
         }
-        const urlParams = new URLSearchParams(location.search);
-        if (urlParams.get("clone") === "1") {
-            const infoYamlString = localStorage.getItem("infoYamlToClone");
-            const dttConfigsString = localStorage.getItem("dttConfigsToClone");
-            if (!dttConfigsString) {
-                return;
-            }
+        // If the localStorage has been set, we should clone the configuration
+        const infoYamlString = localStorage.getItem("infoYamlToClone");
+        const dttConfigsString = localStorage.getItem("dttConfigsToClone");
+        if (dttConfigsString) {
             setProdUploadLoading(true);
             setRows([]);
             try {
@@ -69,7 +65,8 @@ export function RequestPage() {
                 localStorage.removeItem("dttConfigsToClone");
             }
         }
-    }, [metadata, location.search]);
+        setCheckedIfCloneNeeded(true);
+    }, [metadata]);
     const handlePrimaryAction = async () => {
         if (trySubmit()) {
             if (variant === "standalone") {
@@ -81,7 +78,7 @@ export function RequestPage() {
             }
         }
     };
-    if (!metadata) {
+    if (!metadata || !checkedIfCloneNeeded) {
         return _jsx(LoadingIndicator, { height: "70vh" });
     }
     if (requestSubmitted) {
@@ -93,11 +90,11 @@ export function RequestPage() {
                         setRequestSubmitted(true);
                         onRequestSubmitted?.();
                     }
-                } })), showProdUploadModal && _jsx(UploadDttConfigModal, { onClose: () => setShowProdUploadModal(false) }), _jsxs("div", { className: "d-flex flex-column gap-3", children: [rows.map((row) => (_jsx(RowProvider, { row: row, children: _jsx(RequestRow, {}, row.id) }, row.id))), prodUploadLoading && _jsx(ConfigFilesUploadingAlert, {}), showErrors &&
+                } })), showProdUploadModal && _jsx(UploadDttConfigModal, { onClose: () => setShowProdUploadModal(false) }), _jsxs("div", { className: "d-flex flex-column gap-4", children: [rows.map((row) => (_jsx(RowProvider, { row: row, children: _jsx(RequestRow, {}, row.id) }, row.id))), prodUploadLoading && _jsx(ConfigFilesUploadingAlert, {}), showErrors &&
                         (rows.length === 0 ||
                             !validation.allRowsHaveDtt ||
                             !validation.allRowsHaveStrippingLine ||
                             !validation.allRowsHavePaths) && (_jsx(Alert, { variant: "danger", className: "mb-0", children: rows.length === 0
                             ? "Please select at least one decay"
-                            : "Please name all DecayTreeTuples and select at least one stripping line and bookkeeping path for each decay" })), _jsx(Row, { children: _jsx(Col, { xs: "auto", children: _jsx(RequestButtonGroup, {}) }) }), _jsx(Row, { children: _jsxs(Col, { xs: 4, children: [_jsx(ProductionNameInput, {}), !emailIsKnown && _jsx(RequestEmailInput, {}), _jsxs(Stack, { direction: "horizontal", gap: 1, className: "mt-3 mb-3", children: [_jsxs(Button, { className: "align-items-center d-flex gap-1", onClick: () => void handlePrimaryAction(), children: [variant === "standalone" ? _jsx(Download, {}) : _jsx(Send, {}), variant === "standalone" ? "Download" : "Submit"] }), _jsx(DeleteButton, { action: clearAll, disabled: validation.isEmptySession, outline: undefined, children: "Clear all" })] })] }) })] })] }));
+                            : "Please name all DecayTreeTuples and select at least one stripping line and bookkeeping path for each decay" })), _jsx(Row, { children: _jsx(Col, { xs: "auto", children: _jsx(RequestButtonGroup, {}) }) }), _jsx(Row, { children: _jsxs(Col, { xs: "auto", children: [_jsx(ProductionNameInput, {}), !emailIsKnown && _jsx(RequestEmailInput, {}), _jsxs(Stack, { direction: "horizontal", gap: 1, className: "mt-3 mb-3", children: [_jsxs(Button, { className: "align-items-center d-flex gap-1", onClick: () => void handlePrimaryAction(), children: [variant === "standalone" ? _jsx(Download, {}) : _jsx(Send, {}), variant === "standalone" ? "Download" : "Submit"] }), _jsx(DeleteButton, { action: clearAll, disabled: validation.isEmptySession, outline: undefined, children: "Clear all" })] })] }) })] })] }));
 }

package/dist/providers/DttProvider.d.ts

@@ -12,6 +12,8 @@ interface DttContextType {
     dirty: boolean;
     save(this: void): void;
     revert(this: void): void;
+    selectedBranch: string[];
+    setSelectedBranch: (branch: string[]) => void;
 }
 interface DttProviderProps {
     initialConfig: DttConfig;

package/dist/providers/DttProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useReducer } from "react";
+import { createContext, useCallback, useContext, useReducer, useState } from "react";
 import Dtt from "../models/dtt";
 const DttContext = createContext(null);
 function reducer(state, action) {
@@ -31,6 +31,7 @@ function reducer(state, action) {
     }
 }
 export function DttProvider({ initialConfig, decay, metadata, children }) {
+    const [selectedBranch, setSelectedBranch] = useState([]);
     const [state, dispatch] = useReducer(reducer, null, () => ({
         dtt: new Dtt(structuredClone(initialConfig), metadata.tupleTools.tupleTools),
         decay,
@@ -66,6 +67,8 @@ export function DttProvider({ initialConfig, decay, metadata, children }) {
         removeTool,
         save,
         revert,
+        selectedBranch,
+        setSelectedBranch,
     };
     return _jsx(DttContext.Provider, { value: value, children: children });
 }

package/dist/utils/utils.js

@@ -23,18 +23,41 @@ const parseInput = (decay, input) => {
         versions: decay.lines[`${stream}/${line}`],
     };
 };
+const getDttName = (value) => {
+    const basename = value.split("/").pop() ?? value;
+    return basename.replace(/\.py$/i, "");
+};
+const getConfigOrderFromInfoYaml = (infoYaml) => {
+    const order = new Map();
+    if (!infoYaml) {
+        return order;
+    }
+    for (const [key, jobConfig] of Object.entries(infoYaml)) {
+        if (key === "defaults") {
+            continue;
+        }
+        const job = jobConfig;
+        for (const option of job.options) {
+            const dttName = getDttName(option);
+            if (!order.has(dttName)) {
+                order.set(dttName, order.size);
+            }
+        }
+    }
+    return order;
+};
 const addBkPathsToRows = (infoYaml, rows) => {
     for (const row of rows) {
         if (!row.dtt?.config.name) {
             continue;
         }
-        const dttName = row.dtt.config.name.split("/")[1];
+        const dttName = getDttName(row.dtt.config.name);
         for (const [key, jobConfig] of Object.entries(infoYaml)) {
             if (key === "defaults") {
                 continue;
             }
             const job = jobConfig;
-            if (job.options.some((option) => option.split(".")[0] === dttName)) {
+            if (job.options.some((option) => getDttName(option) === dttName)) {
                 row.paths.push(job.input.bk_query);
             }
         }
@@ -516,7 +539,17 @@ export async function parseProductionFiles(files, metadata) {
 export function processProductionFiles(metadata, configs, infoYaml) {
     const rows = [];
     const emailsToInform = [];
-    for (const config of configs) {
+    const configOrder = getConfigOrderFromInfoYaml(infoYaml);
+    const orderedConfigs = [...configs].sort((a, b) => {
+        const aName = getDttName(a.name ?? "");
+        const bName = getDttName(b.name ?? "");
+        const aOrder = configOrder.get(aName) ?? Number.MAX_SAFE_INTEGER;
+        const bOrder = configOrder.get(bName) ?? Number.MAX_SAFE_INTEGER;
+        if (aOrder !== bOrder)
+            return aOrder - bOrder;
+        return aName.localeCompare(bName);
+    });
+    for (const config of orderedConfigs) {
         const decay = Object.values(metadata.decays).find((d) => d.descriptors.template === config.descriptorTemplate);
         if (!decay) {
             return `[${config.name}] Unknown decay '${config.descriptorTemplate}'`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lhcb-ntuple-wizard",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "An application to access large-scale open data from LHCb",
   "url": "https://gitlab.cern.ch/lhcb-dpa/wp6-analysis-preservation-and-open-data/lhcb-ntuple-wizard-frontend/issues",
   "private": false,
@@ -19,6 +19,8 @@
     "@mathjax/src": "4.1.0",
     "better-react-mathjax": "2.3.0",
     "bootstrap": "5.3.8",
+    "cytoscape": "3.33.1",
+    "cytoscape-dagre": "^2.5.0",
     "dompurify": "^3.3.1",
     "email-validator": "2.0.4",
     "js-yaml": "4.1.1",
@@ -29,9 +31,10 @@
     "pako": "2.1.0",
     "react-bootstrap": "2.10.10",
     "react-bootstrap-icons": "1.11.6",
-    "react-graph-vis": "1.0.7",
+    "react-cytoscapejs": "^2.0.0",
     "react-infinite-scroll-component": "^6.1.1",
     "react-select": "5.10.2",
+    "react-toastify": "^11.0.5",
     "typia": "^11.0.3"
   },
   "peerDependencies": {
@@ -69,19 +72,21 @@
     "@babel/preset-react": "7.27.1",
     "@eslint/js": "^9.17.0",
     "@kennethwkz/unplugin-typia": "^2.6.7",
+    "@types/cytoscape-dagre": "^2.3.4",
     "@types/jest": "^30.0.0",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.17.21",
     "@types/lodash.memoize": "^4.1.9",
     "@types/pako": "^2.0.4",
     "@types/react": "^19.2.7",
+    "@types/react-cytoscapejs": "^1.2.6",
     "@types/react-dom": "^19.2.3",
     "@types/react-router-dom": "^5.3.3",
     "@types/vis": "^4.21.27",
-    "@typescript-eslint/eslint-plugin": "^8.51.0",
-    "@typescript-eslint/parser": "^8.51.0",
+    "@typescript-eslint/eslint-plugin": "^8.56.0",
+    "@typescript-eslint/parser": "^8.56.0",
     "@vitejs/plugin-react": "5.1.2",
-    "eslint": "^9.17.0",
+    "eslint": "^9.39.3",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.0.0",
     "react": "^19.2.3",

package/dist/components/DttNameInput.d.ts

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