lhcb-ntuple-wizard-test 2.0.7 → 2.2.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/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

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

package/dist/components/DecayCard.js

@@ -0,0 +1,47 @@
+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";
+import { DecayLatex } from "./DecayLatex";
+import Dtt from "../models/dtt";
+import { useRows } from "../providers/RowsProvider";
+import { useNavigate } from "react-router-dom";
+import { useMetadata } from "../providers/MetadataProvider";
+import { downloadText } from "../utils/utils";
+import { YamlFile } from "../models/yamlFile";
+import { UploadDttConfigModal } from "./modals/UploadDttConfigModal";
+import { VARIABLES_PATH } from "../constants";
+import { useRow } from "../providers/RowProvider";
+import { useWizardConfig } from "../providers/WizardConfigProvider";
+import { DttNameInput } from "./DttNameInput";
+import { GuideLinkButton } from "./GuideLinkButton";
+export function DecayCard() {
+    const { row } = useRow();
+    const { setRows, updateRow } = useRows();
+    const navigate = useNavigate();
+    const metadata = useMetadata();
+    const { basePath, variant } = useWizardConfig();
+    const [showUploadModal, setShowUploadModal] = useState(false);
+    const [dttNameValid, setDttNameValid] = useState(true);
+    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])), [], `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: row.line ? dtt.withInputFromLine(row.line) : dtt,
+        }));
+    };
+    const handleConfigureDtt = () => {
+        setRows((rows) => rows.map((r) => (r.id === row.id ? { ...r, editTree: true } : { ...r, editTree: false })));
+        void navigate(`${basePath}${VARIABLES_PATH}`);
+    };
+    const handleDeleteDtt = () => {
+        updateRow(row.id, (r) => ({ ...r, dtt: null }));
+    };
+    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" }) }), _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("RoyalBlue", 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,33 +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 { 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 { Accordion, Button, Card, OverlayTrigger, Stack, Tooltip } from "react-bootstrap";
+import { QuestionCircle } from "react-bootstrap-icons";
 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 } = useDtt();
-    const [selectedBranch, setSelectedBranch] = useState([]);
-    const [lockGraphZoom, setLockGraphZoom] = useState(!config.dttGraphOptions.interaction.zoomView);
-    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
+    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, lockGraphZoom: lockGraphZoom, 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) => {
-                            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,9 +1,5 @@
-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({ 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";
+import { useDtt } from "../providers/DttProvider";
+import { LATEX_SELECTED_COLOR } from "../utils/latexUtils";
+cytoscape.use(dagre);
+export function DecayTreeGraph({ onNodeSelectionChanged }) {
     const metadata = useMetadata();
-    // eslint-disable-next-line
-    const [network, setNetwork] = useState(null);
+    const { dtt, decay, selectedBranch, highlightedBranch } = useDtt();
+    const cyRef = useRef(null);
+    // Sync external selection state to cytoscape selection
     useEffect(() => {
-        // eslint-disable-next-line
-        network?.selectNodes(selectedParticlesIds);
-    }, [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 texSVG = tex2svg(`${pipes}${text}${pipes}`).innerHTML.replaceAll("currentColor", colour);
+        const cy = cyRef.current;
+        if (!cy)
+            return;
+        cy.nodes().forEach((node) => {
+            if (selectedBranch.includes(node.id())) {
+                node.select();
+            }
+            else {
+                node.unselect();
+            }
+        });
+    }, [selectedBranch]);
+    function makeSVG(text, color = "black") {
+        const pipes = "\\phantom{{}^{|-}_{|-}}";
+        const texSVG = tex2svg(`${pipes}${text}${pipes}`).innerHTML.replaceAll("currentColor", color);
         return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(texSVG)}`;
     }
-    function buildGraph() {
-        const graph = { nodes: [], edges: [] };
-        if (!metadata) {
-            return graph;
-        }
+    function buildElements() {
+        const 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"),
+            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,
+                    imageSrc,
+                    tupleToolCountLabel: `${tupleToolCount}`,
+                    tupleToolStatusColor: tupleToolCount > 0 ? "#198754" : "#6c757d",
                 },
+                selected: selectedBranch.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,119 @@ 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 that shows when clicking
+        {
+            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: "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,
+            },
+        },
+        {
+            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: "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",
             },
-        }, 
-        // @ts-expect-error The react-graph-vis package does not have types
-        getNetwork: (n) => {
-            setNetwork(n);
+        },
+    ];
+    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.ready(() => {
+                updateZoomBounds(cy);
+            });
+            cy.on("layoutstop", () => {
+                updateZoomBounds(cy);
+            });
+            // 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",
         } }));
 }