lhcb-ntuple-wizard-test 2.1.0 → 2.2.0

package/dist/components/AddTupleToolButton.d.ts

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

package/dist/components/AddTupleToolButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PlusLg } from "react-bootstrap-icons";
+import { Button } from "react-bootstrap";
+import { AddTupleToolModal } from "./modals/AddTupleToolModal";
+import { useState } from "react";
+import { ConfigureTupleToolModal } from "./modals/ConfigureTupleToolModal";
+export function AddTupleToolButton() {
+    const [showAddModal, setShowAddModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(null);
+    return (_jsxs(_Fragment, { children: [showAddModal && (_jsx(AddTupleToolModal, { onClose: (tool) => {
+                    setShowAddModal(false);
+                    if (tool?.class === "LoKi__Hybrid__TupleTool") {
+                        setShowConfigModal({ tool });
+                    }
+                } })), showConfigModal && (_jsx(ConfigureTupleToolModal, { tool: showConfigModal.tool, deleteIfCancelled: true, onClose: () => setShowConfigModal(null) })), _jsxs(Button, { variant: "success", size: "sm", className: "d-flex align-items-center gap-1 mt-1 w-100 justify-content-center", onClick: () => setShowAddModal(true), children: [_jsx(PlusLg, {}), "Add tool"] })] }));
+}

package/dist/components/BookkeepingPathDropdown.d.ts

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

package/dist/components/BookkeepingPathDropdown.js

@@ -9,9 +9,6 @@ export function BookkeepingPathDropdown() {
     const metadata = useMetadata();
     const { row, validateBkPath, updateBkPaths } = useRow();
     const { updateRow } = useRows();
-    if (!metadata) {
-        return null;
-    }
     const getOptionFromPath = useCallback((path) => ({
         value: path,
         label: _jsx(DatasetInfo, { pathString: path }),
@@ -31,5 +28,5 @@ export function BookkeepingPathDropdown() {
             pathOptions: [...r.pathOptions, path],
         }));
     }, [row.id, validateBkPath, updateRow]);
-    return (_jsx(Creatable, { isMulti: true, options: defaultPaths, value: row.paths.map(getOptionFromPath), isDisabled: !row.lines.length, placeholder: "Bookkeeping path", onChange: (v) => updateBkPaths(v.map((i) => i.value)), onCreateOption: handleCreatePath, closeMenuOnSelect: false }));
+    return (_jsx(Creatable, { isMulti: true, options: defaultPaths, value: row.paths.map(getOptionFromPath), isDisabled: !row.line, placeholder: "Choose dataset", onChange: (v) => updateBkPaths(v.map((i) => i.value)), onCreateOption: handleCreatePath, closeMenuOnSelect: false }));
 }

package/dist/components/DatasetEventTypeBadge.js

@@ -11,7 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  \*****************************************************************************/
 import { Badge } from "react-bootstrap";
 export function DatasetEventTypeBadge({ eventType }) {
-    const content = "" + eventType === "90000000" ? "Data" : "" + eventType;
+    const content = eventType === "90000000" ? "Data" : eventType;
     const linkProps = content === "Data"
         ? {}
         : {

package/dist/components/DatasetInfo.js

@@ -12,16 +12,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from "react-bootstrap";
 import { YearBadge } from "./YearBadge.js";
 import { PolarityBadge } from "./PolarityBadge.js";
-import { StrippingLineBadge } from "./StrippingLineBadge";
+import { StrippingLineVersionBadge } from "./StrippingLineVersionBadge";
 import { DatasetEventTypeBadge } from "./DatasetEventTypeBadge";
 import { BkPath } from "../models/bkPath.js";
 export function DatasetInfo({ pathString }) {
     try {
         const path = new BkPath(pathString);
-        return (_jsxs("span", { children: [path.fileName, _jsx("br", {}), _jsxs(Stack, { direction: "horizontal", style: { flexWrap: "wrap" }, gap: 1, children: [_jsx(DatasetEventTypeBadge, { eventType: path.eventType }), _jsx(YearBadge, { year: path.year }), _jsx(PolarityBadge, { polarity: path.polarity || "?" }), _jsx(StrippingLineBadge, { version: path.strippingVersion })] })] }));
+        return (_jsxs("span", { children: [path.fileName, _jsx("br", {}), _jsxs(Stack, { direction: "horizontal", style: { flexWrap: "wrap" }, gap: 1, children: [_jsx(DatasetEventTypeBadge, { eventType: path.eventType }), _jsx(YearBadge, { year: path.year }), _jsx(PolarityBadge, { polarity: path.polarity || "?" }), _jsx(StrippingLineVersionBadge, { version: path.strippingVersion })] })] }));
     }
     catch (e) {
-        console.error("Error parsing bookkeeping path:", e);
+        console.error("Error parsing dataset:", e);
         return null;
     }
 }

package/dist/components/DecayCard.d.ts

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

package/dist/components/DecayCard.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, ButtonGroup, Card, FormControl, InputGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup, Card, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { useState } from "react";
 import { Download, ExclamationCircle, GearWideConnected, PlusLg, Upload } from "react-bootstrap-icons";
 import { DeleteButton } from "./DeleteButton";
@@ -14,40 +14,25 @@ import { UploadDttConfigModal } from "./modals/UploadDttConfigModal";
 import { VARIABLES_PATH } from "../constants";
 import { useRow } from "../providers/RowProvider";
 import { useWizardConfig } from "../providers/WizardConfigProvider";
+import { DttNameInput } from "./DttNameInput";
+import { GuideLinkButton } from "./GuideLinkButton";
 export function DecayCard() {
     const { row } = useRow();
-    const { rows, setRows, updateRow } = useRows();
+    const { 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);
-    const [autoFocus, setAutoFocus] = useState(false);
-    if (!metadata) {
-        return null;
-    }
-    function allNameCharsValid(name) {
-        const pattern = /^[a-zA-Z0-9_:-]+$/;
-        return pattern.test(name);
-    }
-    function validateName() {
-        const trimmedName = dttName.trim();
-        const isNameEmpty = trimmedName === "";
-        const areCharsValid = allNameCharsValid(trimmedName);
-        const otherRowNames = rows.filter((r) => r.id !== row.id).map((row) => row.dtt?.getName() || "");
-        const isNameDuplicate = otherRowNames.includes(trimmedName);
-        const valid = !isNameEmpty && areCharsValid && !isNameDuplicate;
-        setDttNameValid(valid);
-        return valid;
-    }
+    const [autoFocusRow, setAutoFocusRow] = useState(null);
     const handleCreateDTT = () => {
-        const dtt = Dtt.create(row.decay.descriptors.template, row.decay.descriptors.mapped_list.flatMap((item) => (Array.isArray(item) ? item : [item])), [], "", metadata.tupleTools.tupleTools);
+        const dtt = Dtt.create(row.decay.descriptors.template, row.decay.descriptors.mapped_list.flatMap((item) => (Array.isArray(item) ? item : [item])), [], `MyDecayTree${row.id}`, metadata.tupleTools.tupleTools);
+        // Only focus the name input if the DTT was just created
+        setAutoFocusRow(row.id);
         updateRow(row.id, (r) => ({
             ...r,
-            dtt: dtt.withInputsFromLines(row.lines),
+            dtt: row.line ? dtt.withInputFromLine(row.line) : dtt,
         }));
-        setAutoFocus(true);
     };
     const handleConfigureDtt = () => {
         setRows((rows) => rows.map((r) => (r.id === row.id ? { ...r, editTree: true } : { ...r, editTree: false })));
@@ -55,21 +40,8 @@ export function DecayCard() {
     };
     const handleDeleteDtt = () => {
         updateRow(row.id, (r) => ({ ...r, dtt: null }));
-        setDttName("");
     };
-    return (_jsxs(Card, { children: [_jsxs(Card.Header, { className: "d-flex justify-content-between align-items-start gap-2", children: [row.dtt && (_jsxs(InputGroup, { hasValidation: true, children: [_jsx(FormControl, { autoFocus: autoFocus, placeholder: "DecayTree", value: dttName, onBlur: () => {
-                                    if (!validateName()) {
-                                        return;
-                                    }
-                                    updateRow(row.id, (r) => ({ ...r, dtt: r.dtt.withName(dttName) }));
-                                }, onChange: (event) => {
-                                    setDttName(event.target.value);
-                                    setDttNameValid(true);
-                                }, isInvalid: !dttNameValid }), _jsx(FormControl.Feedback, { type: "invalid", children: dttName.trim() === ""
-                                    ? "Name cannot be empty"
-                                    : !allNameCharsValid(dttName.trim())
-                                        ? "Name contains invalid characters"
-                                        : "Name is already taken" })] })), _jsx(ButtonGroup, { children: row.dtt ? (_jsxs(_Fragment, { children: [_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Configure this DecayTreeTuple" }), children: _jsx(Button, { type: "submit", variant: "secondary", onClick: handleConfigureDtt, disabled: !dttNameValid, className: "align-items-center d-flex", children: _jsx(GearWideConnected, {}) }) }), variant === "standalone" && (_jsx(_Fragment, { children: _jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Download DecayTreeTuple YAML configuration file" }), children: _jsx(Button, { className: "align-items-center d-flex ms-auto", type: "button", onClick: () => {
+    return (_jsxs(Card, { children: [_jsxs(Card.Header, { className: "d-flex justify-content-between align-items-start gap-2", children: [row.dtt && (_jsx(DttNameInput, { dtt: row.dtt, rowId: row.id, autoFocus: autoFocusRow === row.id, onNameValidated: (valid) => setDttNameValid(valid) })), _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, 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 }) })] }));
+                                            }, 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" }) }), _jsx(GuideLinkButton, { page: "ntupleCreation", topic: "Creating an ntuple" }), _jsxs(ButtonGroup, { className: "mx-2", children: [_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Add a DecayTreeTuple" }), children: _jsx(Button, { type: "submit", variant: "success", onClick: handleCreateDTT, 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.d.ts

@@ -3,5 +3,5 @@ interface Props {
     decay: DecayData;
     selection?: string[];
 }
-export declare function DecayLatex({ decay, selection }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function DecayLatex({ decay, selection }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DecayLatex.js

@@ -9,95 +9,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * granted to it by virtue of its status as an Intergovernmental Organization  *
  * or submit itself to any jurisdiction.                                       *
  \*****************************************************************************/
-import { MathJax } from "better-react-mathjax";
 import { OverlayTrigger, Popover } from "react-bootstrap";
 import { useMetadata } from "../providers/MetadataProvider";
+import { selectionDescriptorToLatex } from "../utils/latexUtils";
+import { InlineMath } from "react-katex";
 export function DecayLatex({ decay, selection }) {
     const metadata = useMetadata();
-    if (!metadata) {
-        return null;
-    }
-    const LOKI_MARKERS = {
-        SELECTION_PREFIX: "^",
-        ARROW: "->",
-    };
-    const LATEX_COMMANDS = {
-        ARROW: "\\to",
-        TEXT: (content) => `\\text{${content}}`,
-        COLOR: (color, content) => `\\textcolor{${color}}{${content}}`,
-    };
-    /**
-     * Removes leading and trailing braces from LoKi selector string
-     */
-    const cleanLoKiSelector = (selector) => {
-        return selector.replace(/^\[/, "").replace(/^\^\[/, "^").replace(/\]CC$/, "");
-    };
-    /**
-     * Counts occurrences of a pattern in a string
-     */
-    const countMatches = (text, pattern) => {
-        return (text.match(pattern) || []).length;
-    };
-    /**
-     * Extracts and processes braces from particle names for sub-decay handling
-     */
-    const extractBraces = (name) => {
-        const openCount = countMatches(name, /\(/g);
-        const closeCount = countMatches(name, /\)/g);
-        if (name.startsWith("(")) {
-            return {
-                cleanName: name.replace(/^\(/, ""),
-                openBrace: "(",
-                closeBrace: "",
-            };
-        }
-        if (name.endsWith(")") && closeCount > openCount) {
-            const extraClosingBraces = closeCount - openCount;
-            return {
-                cleanName: name.replace(/\)+$/, ""),
-                openBrace: "",
-                closeBrace: ")".repeat(extraClosingBraces),
-            };
-        }
-        return { cleanName: name, openBrace: "", closeBrace: "" };
-    };
-    /**
-     * Converts a LoKi decay selector string to LaTeX representation
-     */
-    const displaySelectionDescriptor = (selection) => {
-        // Generate LoKi selector by marking selected particles with '^'
-        const decaySelector = decay.descriptors.template.replace(/\${(\w+)}/g, (_, variableName) => {
-            return selection.includes(variableName) ? LOKI_MARKERS.SELECTION_PREFIX : "";
-        });
-        const cleanedSelector = cleanLoKiSelector(decaySelector);
-        const particles = cleanedSelector.split(" ");
-        const latexTokens = particles.map((particle) => convertParticleToLatex(particle));
-        return latexTokens.join(" ");
-    };
-    /**
-     * Converts a single particle token to LaTeX representation
-     */
-    const convertParticleToLatex = (particle) => {
-        // Handle arrow tokens
-        if (particle === LOKI_MARKERS.ARROW) {
-            return LATEX_COMMANDS.ARROW;
-        }
-        const isMarked = particle.startsWith(LOKI_MARKERS.SELECTION_PREFIX);
-        const particleName = particle.replace(/^\^/, "");
-        // Handle sub-decay braces
-        const { cleanName, openBrace, closeBrace } = extractBraces(particleName);
-        // Validate particle exists in metadata
-        if (!metadata.particleProperties[cleanName]) {
-            console.error(`${cleanName} not found in particle property metadata!`);
-            return LATEX_COMMANDS.TEXT(particle);
-        }
-        // Get base LaTeX representation
-        let latex = metadata.particleProperties[cleanName].latex;
-        // Underline marked particles
-        if (isMarked) {
-            latex = LATEX_COMMANDS.COLOR("#4169E1", latex);
-        }
-        return `${openBrace}${latex}${closeBrace}`;
-    };
-    return (_jsx(OverlayTrigger, { overlay: _jsxs(Popover, { children: [_jsx(Popover.Header, { children: "LoKi descriptor" }), _jsx(Popover.Body, { children: _jsx("code", { children: decay.descriptors.plain }) })] }), children: _jsx("span", { children: _jsx(MathJax, { inline: true, children: `\\(${selection && selection.length > 0 ? displaySelectionDescriptor(selection) : decay.descriptors.latex}\\)` }) }) }));
+    const math = selection?.length ? selectionDescriptorToLatex(metadata, decay, selection) : decay.descriptors.latex;
+    return (_jsx(OverlayTrigger, { overlay: _jsxs(Popover, { children: [_jsx(Popover.Header, { children: "LoKi descriptor" }), _jsx(Popover.Body, { children: _jsx("code", { children: decay.descriptors.plain }) })] }), children: _jsx("span", { children: _jsx(InlineMath, { math: math }) }) }));
 }

package/dist/components/DecayListItem.js

@@ -13,11 +13,11 @@ import { useState } from "react";
 import { InputGroup, ListGroup } from "react-bootstrap";
 import { DecayLatex } from "./DecayLatex";
 import { DecayTagBadge } from "./DecayTagBadge.js";
-import { NumStrippingLinesBadge } from "./NumStrippingLinesBadge.js";
+import { StrippingLinesCountBadge } from "./StrippingLinesCountBadge";
 export function DecayListItem({ decay, initiallySelected = false, onItemSelected }) {
     const [selected, setSelected] = useState(initiallySelected);
     return (_jsx(ListGroup.Item, { as: "li", style: { cursor: "pointer" }, onClick: () => {
             setSelected(!selected);
             onItemSelected({ selected, decay: decay });
-        }, children: _jsxs(InputGroup, { children: [_jsx(InputGroup.Checkbox, { checked: selected, readOnly: true }), _jsxs("div", { className: `react-select form-control p-2 d-flex flex-column align-items-start gap-1 ${selected ? "list-group-item-primary" : "list-group-item-light"}`, children: [_jsx(DecayLatex, { decay: decay }), _jsxs("div", { className: "d-flex flex-row flex-wrap gap-1", children: [_jsx(NumStrippingLinesBadge, { strippingLines: decay.lines, selected: selected }), decay.tags.map((tag) => (_jsx(DecayTagBadge, { tag: tag }, tag)))] })] })] }) }));
+        }, children: _jsxs(InputGroup, { children: [_jsx(InputGroup.Checkbox, { checked: selected, readOnly: true }), _jsxs("div", { className: `react-select form-control p-2 d-flex flex-column align-items-start gap-1 ${selected ? "list-group-item-primary" : "list-group-item-light"}`, children: [_jsx(DecayLatex, { decay: decay }), _jsxs("div", { className: "d-flex flex-row flex-wrap gap-1", children: [_jsx(StrippingLinesCountBadge, { strippingLineVersions: decay.lines, selected: selected }), decay.tags.map((tag) => (_jsx(DecayTagBadge, { tag: tag }, tag)))] })] })] }) }));
 }

package/dist/components/DecayTagBadge.d.ts

@@ -1,5 +1,5 @@
 interface Props {
     tag: string;
 }
-export declare function DecayTagBadge({ tag, ...props }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function DecayTagBadge({ tag, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DecayTagBadge.js

@@ -13,9 +13,6 @@ import { Badge, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { useMetadata } from "../providers/MetadataProvider.js";
 export function DecayTagBadge({ tag, ...props }) {
     const metadata = useMetadata();
-    if (!metadata) {
-        return null;
-    }
     const tagInfo = metadata.userHints.decayTags[tag];
     return (_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: tagInfo.description }), children: _jsx(Badge, { pill: true, bg: tagInfo.warn ? "danger" : "warning", text: tagInfo.warn ? "light" : "dark", ...props, children: tag }) }));
 }

package/dist/components/DecayTreeCard.d.ts

@@ -1,7 +1 @@
-import { DttConfig } from "../models/dtt.js";
-interface Props {
-    onConfigSaved: (config: DttConfig) => void;
-    onDirtyUpdated: (dttId: string, dirty: boolean) => void;
-}
-export declare function DecayTreeCard({ onConfigSaved, onDirtyUpdated }: Props): import("react/jsx-runtime").JSX.Element | null;
-export {};
+export declare function DecayTreeCard(): import("react/jsx-runtime").JSX.Element;

package/dist/components/DecayTreeCard.js

@@ -11,30 +11,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *****************************************************************************/
 import { DecayTagBadge } from "./DecayTagBadge.js";
 import { DecayLatex } from "./DecayLatex";
-import { TupleToolList } from "./TupleToolList";
 import { useMetadata } from "../providers/MetadataProvider.js";
-import { Card, OverlayTrigger, Stack, Tooltip } from "react-bootstrap";
+import { Accordion, Button, 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 }) {
+import { getControlKey } from "../utils/utils";
+import { TupleToolsAccordion } from "./TupleToolsAccordion";
+import { TupleToolGroupsAccordion } from "./TupleToolGroupsAccordion";
+import { useState } from "react";
+import { GuideLinkButton } from "./GuideLinkButton";
+export function DecayTreeCard() {
     const metadata = useMetadata();
-    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: [_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
+    const { dtt, decay, selectedBranch, setSelectedBranch, hoveredBranch } = useDtt();
+    const [activeKey, setActiveKey] = useState("0");
+    return (_jsxs(Card, { children: [_jsx(DecayTreeCardHeader, { dttName: dtt.getName(), input: dtt.config.input }), _jsxs(Card.Body, { children: [_jsxs(Card.Title, { className: "d-flex justify-content-between align-items-center", children: [_jsx(DecayLatex, { decay: decay, selection: selectedBranch.length === 0 ? hoveredBranch : selectedBranch }), _jsx(OverlayTrigger, { placement: "left", overlay: _jsxs(Tooltip, { children: ["Click on particles to configure. Hold ", _jsx("code", { children: getControlKey() }), " to select multiple. Clear the selection to configure the entire decay. Use", " ", _jsxs("code", { children: [getControlKey(), "+scroll"] }), " to zoom."] }), children: _jsx(QuestionCircle, {}) })] }), _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, 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, { onGroupSelected: (group) => {
-                            const selection = group.split(",");
-                            setSelectedBranch(selection);
-                        }, onSave: () => onConfigSaved(dtt.config) })] })] }));
+                            .map((tag) => (_jsx(DecayTagBadge, { tag: tag }, tag))) }), _jsxs("div", { className: "d-flex flex-row", children: [_jsxs("div", { style: { width: "100%" }, children: [_jsx(DecayTreeGraph, { onNodeSelectionChanged: (nodeIds) => {
+                                            setSelectedBranch([...nodeIds].sort());
+                                        } }), _jsx("div", { style: { paddingRight: 12 }, children: _jsx(ParticleTagFilters, {}) })] }), _jsxs("div", { className: "d-flex flex-column gap-2 mt-2", style: { minWidth: "350px" }, children: [_jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [_jsxs("div", { className: "d-flex align-items-center gap-2", children: [selectedBranch.length, " particle", selectedBranch.length === 1 ? "" : "s", " selected", _jsx(GuideLinkButton, { page: "nodeTree", topic: "Configuring the node tree" })] }), _jsx(Button, { disabled: selectedBranch.length === 0, variant: "secondary", size: "sm", onClick: () => setSelectedBranch([]), children: "Deselect" })] }), _jsxs(Accordion, { defaultActiveKey: ["0"], activeKey: activeKey, onSelect: (key) => setActiveKey(key), children: [_jsx(TupleToolsAccordion, {}), _jsx(TupleToolGroupsAccordion, { setActiveKey: setActiveKey })] })] })] })] })] }));
 }

package/dist/components/DecayTreeCardHeader.d.ts

@@ -1,7 +1,6 @@
-import { DttConfig } from "../models/dtt.js";
 interface Props {
     dttName: string;
-    inputs: DttConfig["inputs"];
+    input?: string;
 }
-export declare function DecayTreeCardHeader({ dttName, inputs }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function DecayTreeCardHeader({ dttName, input }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DecayTreeCardHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion, Card, ListGroup, OverlayTrigger, Popover } from "react-bootstrap";
-export function DecayTreeCardHeader({ dttName, inputs }) {
-    return (_jsxs(Card.Header, { className: "d-flex flex-column align-items-start", children: [_jsx(OverlayTrigger, { placement: "bottom", overlay: _jsx(Popover, { children: _jsxs(Popover.Body, { children: ["The ROOT TTree will be found under ", _jsx("code", { children: `DecayTreeTuple/${dttName}` }), "."] }) }), children: _jsxs(Card.Title, { children: ["Tree name: ", _jsx("code", { children: dttName })] }) }), _jsx(Accordion, { style: { width: "100%" }, children: _jsxs(Accordion.Item, { eventKey: "0", children: [_jsxs(Accordion.Header, { children: [(inputs || []).length, " input location", (inputs || []).length === 1 ? "" : "s"] }), _jsx(Accordion.Body, { children: _jsx(ListGroup, { variant: "flush", children: !inputs || inputs.length === 0 ? (_jsx(ListGroup.Item, { children: "Choose at least one Stripping line, otherwise no decay candidates will be selected" })) : (inputs.map((location, i) => (_jsx(ListGroup.Item, { children: _jsx("code", { children: location }) }, i)))) }) })] }) })] }));
+export function DecayTreeCardHeader({ dttName, input }) {
+    return (_jsxs(Card.Header, { className: "d-flex flex-column align-items-start", children: [_jsx(OverlayTrigger, { placement: "bottom", overlay: _jsx(Popover, { children: _jsxs(Popover.Body, { children: ["The ROOT TTree will be found under ", _jsx("code", { children: `DecayTreeTuple/${dttName}` }), "."] }) }), children: _jsxs(Card.Title, { children: ["Tree name: ", _jsx("code", { children: dttName })] }) }), _jsx(Accordion, { style: { width: "100%" }, children: _jsxs(Accordion.Item, { eventKey: "0", children: [_jsx(Accordion.Header, { children: input ? "1 input location" : "No input location" }), _jsx(Accordion.Body, { children: _jsx(ListGroup, { variant: "flush", children: _jsx(ListGroup.Item, { children: input ? (_jsx("code", { children: input })) : ("Choose at least one Stripping line, otherwise no decay candidates will be selected") }) }) })] }) })] }));
 }

package/dist/components/DecayTreeGraph.d.ts

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

package/dist/components/DecayTreeGraph.js

@@ -6,9 +6,12 @@ import { config } from "../config";
 import { tex2svg } from "../utils/mathjaxUtils";
 import { useMetadata } from "../providers/MetadataProvider";
 import { useEffect, useRef } from "react";
+import { useDtt } from "../providers/DttProvider";
+import { LATEX_SELECTED_COLOR } from "../utils/latexUtils";
 cytoscape.use(dagre);
-export function DecayTreeGraph({ decay, selectedParticlesIds, onNodeSelectionChanged }) {
+export function DecayTreeGraph({ onNodeSelectionChanged }) {
     const metadata = useMetadata();
+    const { dtt, decay, selectedBranch, highlightedBranch } = useDtt();
     const cyRef = useRef(null);
     // Sync external selection state to cytoscape selection
     useEffect(() => {
@@ -16,42 +19,39 @@ export function DecayTreeGraph({ decay, selectedParticlesIds, onNodeSelectionCha
         if (!cy)
             return;
         cy.nodes().forEach((node) => {
-            if (selectedParticlesIds.includes(node.id())) {
+            if (selectedBranch.includes(node.id())) {
                 node.select();
             }
             else {
                 node.unselect();
             }
         });
-    }, [selectedParticlesIds]);
-    function makeSVG(text, colour = "black") {
+    }, [selectedBranch]);
+    function makeSVG(text, color = "black") {
         const pipes = "\\phantom{{}^{|-}_{|-}}";
-        const texSVG = tex2svg(`${pipes}${text}${pipes}`).innerHTML.replaceAll("currentColor", colour);
+        const texSVG = tex2svg(`${pipes}${text}${pipes}`).innerHTML.replaceAll("currentColor", color);
         return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(texSVG)}`;
     }
-    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];
+            const branchList = branch.split(",");
+            const tupleToolCount = dtt.getBranchTools(branchList).length + dtt.getGroupsThatIncludeBranch(branchList).length;
+            // Color the highlightedBranch (which is hoveredBranch when set, otherwise selectedBranch)
+            const imageSrc = highlightedBranch.includes(branch)
+                ? makeSVG(particleProperties.latex, LATEX_SELECTED_COLOR)
+                : 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,
+                    imageSrc,
+                    tupleToolCountLabel: `${tupleToolCount}`,
+                    tupleToolStatusColor: tupleToolCount > 0 ? "#198754" : "#6c757d",
                 },
-                selected: selectedParticlesIds.includes(branch),
+                selected: selectedBranch.includes(branch),
             });
             if (parentId !== null) {
                 elements.push({
@@ -85,7 +85,7 @@ export function DecayTreeGraph({ decay, selectedParticlesIds, onNodeSelectionCha
         return elements;
     }
     const stylesheet = [
-        // Disable the grey circle on pan/click
+        // Disable the grey circle that shows when clicking
         {
             selector: "core",
             style: {
@@ -102,7 +102,21 @@ export function DecayTreeGraph({ decay, selectedParticlesIds, onNodeSelectionCha
                 "background-opacity": 0,
                 width: config.dttGraphOptions.nodes.width,
                 height: config.dttGraphOptions.nodes.height,
-                label: "",
+                label: "data(tupleToolCountLabel)",
+                "font-size": 9,
+                "font-weight": 700,
+                color: "#fff",
+                "text-background-color": "data(tupleToolStatusColor)",
+                "text-background-opacity": 1,
+                "text-background-shape": "circle",
+                "text-background-padding": "4px",
+                "text-border-width": 1,
+                "text-border-color": "#fff",
+                "text-border-opacity": 1,
+                "text-valign": "bottom",
+                "text-halign": "center",
+                "text-margin-x": 10,
+                "text-margin-y": -2,
             },
         },
         {
@@ -118,13 +132,6 @@ export function DecayTreeGraph({ decay, selectedParticlesIds, onNodeSelectionCha
                 "background-color": config.dttGraphOptions.nodes.hoverColor,
             },
         },
-        {
-            selector: "node:selected",
-            style: {
-                // Swap to the selected SVG when the node is selected
-                "background-image": "data(imageSelected)",
-            },
-        },
         {
             selector: "edge",
             style: {
@@ -137,24 +144,42 @@ export function DecayTreeGraph({ decay, selectedParticlesIds, onNodeSelectionCha
             },
         },
     ];
+    const updateZoomBounds = (cy) => {
+        const bb = cy.elements().boundingBox();
+        const container = cy.container();
+        if (!container || bb.w === 0 || bb.h === 0) {
+            return;
+        }
+        const zoomX = container.clientWidth / bb.w;
+        const zoomY = container.clientHeight / bb.h;
+        const fitZoom = Math.min(zoomX, zoomY);
+        cy.minZoom(fitZoom * 0.5);
+        cy.maxZoom(fitZoom * 2);
+    };
     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) => {
+            if (cyRef.current === null) {
+                // Handle zoom events
+                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 });
+            }
             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 });
+            cy.ready(() => {
+                updateZoomBounds(cy);
+            });
+            cy.on("layoutstop", () => {
+                updateZoomBounds(cy);
+            });
             // Handle node selection events
             cy.off("select unselect", "node");
             cy.on("select unselect", "node", () => {

package/dist/components/DeleteButton.d.ts

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

package/dist/components/DeleteButton.js

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

package/dist/components/DttNameInput.d.ts

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