lhcb-ntuple-wizard-test 0.0.1

package/dist/components/DecayTag.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactBootstrap = require("react-bootstrap");
+var _MetadataContext = _interopRequireDefault(require("../contexts/MetadataContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*****************************************************************************\
+* (c) Copyright 2021 CERN for the benefit of the LHCb Collaboration           *
+*                                                                             *
+* This software is distributed under the terms of the GNU General Public      *
+* Licence version 3 (GPL Version 3), copied verbatim in the file "COPYING".   *
+*                                                                             *
+* In applying this licence, CERN does not waive the privileges and immunities *
+* granted to it by virtue of its status as an Intergovernmental Organization  *
+* or submit itself to any jurisdiction.                                       *
+\*****************************************************************************/
+class DecayTag extends _react.default.Component {
+  render() {
+    const background = this.context.loaded.userHints && this.context.metadata.userHints.decayTags[this.props.tag].warn ? "danger" : "warning";
+    const foreground = this.context.loaded.userHints && this.context.metadata.userHints.decayTags[this.props.tag].warn ? "light" : "dark";
+    const description = this.context.loaded.userHints ? this.context.metadata.userHints.decayTags[this.props.tag].description : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Spinner, {
+      animation: "border"
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+      overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
+        children: description
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Badge, {
+        pill: true,
+        bg: background,
+        text: foreground,
+        ...this.props,
+        children: this.props.tag
+      })
+    });
+  }
+}
+_defineProperty(DecayTag, "contextType", _MetadataContext.default);
+DecayTag.propTypes = {
+  tag: _propTypes.default.string
+};
+var _default = exports.default = DecayTag;

package/dist/components/DecayTree.js

@@ -0,0 +1,452 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactGraphVis = _interopRequireDefault(require("react-graph-vis"));
+var _ParticleTag = _interopRequireDefault(require("./ParticleTag"));
+var _DecayTag = _interopRequireDefault(require("./DecayTag"));
+var _Decay = _interopRequireDefault(require("./Decay"));
+var _ConfigNode = _interopRequireDefault(require("./ConfigNode"));
+var _MetadataContext = _interopRequireDefault(require("../contexts/MetadataContext"));
+var _reactBootstrap = require("react-bootstrap");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _mathjaxReact = require("mathjax-react");
+var _mathjax = _interopRequireDefault(require("../lib/mathjax"));
+var _config = _interopRequireDefault(require("../config.json"));
+var _DTTConfig = _interopRequireDefault(require("../lib/DTTConfig"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*****************************************************************************\
+* (c) Copyright 2021 CERN for the benefit of the LHCb Collaboration           *
+*                                                                             *
+* This software is distributed under the terms of the GNU General Public      *
+* Licence version 3 (GPL Version 3), copied verbatim in the file "COPYING".   *
+*                                                                             *
+* In applying this licence, CERN does not waive the privileges and immunities *
+* granted to it by virtue of its status as an Intergovernmental Organization  *
+* or submit itself to any jurisdiction.                                       *
+\*****************************************************************************/
+function htmlTitle(text) {
+  const container = document.createElement("span");
+  container.innerText = text;
+  return container;
+}
+function makeSVG(text) {
+  let colour = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "black";
+  const pipes = "\\phantom{{}^{|-}_{|-}}"; // looks weird but helps ensure uniform text scaling
+  const texSVG = (0, _mathjax.default)("".concat(pipes).concat(text).concat(pipes)).innerHTML.replaceAll("currentColor", colour);
+  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(texSVG);
+}
+function buildDecayGraph(decay, metadata) {
+  const getGraphParams = (term, graph, parentId) => {
+    if (!(term instanceof Array)) {
+      const {
+        branch,
+        particle
+      } = term;
+      return {
+        newNode: {
+          id: branch,
+          label: branch,
+          title: htmlTitle(metadata[particle].html),
+          image: {
+            selected: makeSVG(metadata[particle].latex, "#0d6efd"),
+            unselected: makeSVG(metadata[particle].latex, "black")
+          }
+        },
+        newEdge: parentId === 0 ? {} : {
+          from: parentId,
+          to: branch
+        }
+      };
+    }
+    term.forEach(element => {
+      if (element instanceof Array) {
+        const subParentId = graph.nodes.slice(-1)[0].id;
+        graph = getGraphParams(element, graph, subParentId);
+      } else {
+        const {
+          newNode,
+          newEdge
+        } = getGraphParams(element, graph, parentId);
+        graph.nodes.push(newNode);
+        graph.edges.push(newEdge);
+      }
+    });
+    return graph;
+  };
+  let graph = getGraphParams(decay, {
+    nodes: [],
+    edges: []
+  }, 0);
+  graph.edges = graph.edges.filter(edge => Object.keys(edge).length !== 0);
+  return graph;
+}
+class DecayTree extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
+      graph: buildDecayGraph(this.props.decay.descriptors.mapped_list, this.context.metadata.particleProperties),
+      dtt: new _DTTConfig.default(_lodash.default.cloneDeep(this.props.dttConfig), this.context.metadata.tupleTools.tupleTools),
+      lastSave: _lodash.default.cloneDeep(this.props.dttConfig),
+      selectedParticleId: [],
+      updated: false,
+      lockGraphZoom: !_config.default.dttGraphOptions.interaction.zoomView,
+      showNodeModal: false
+    });
+    _defineProperty(this, "network", null);
+    _defineProperty(this, "selectAllByTag", tag => () => {
+      const allBranches = this.state.dtt.config.branches;
+      const matchingParticles = Object.keys(allBranches).filter(branch => {
+        const particle = allBranches[branch].particle;
+        const allTags = this.context.metadata.particleProperties[particle].tags;
+        return allTags.includes(tag);
+      }).sort();
+      this.setState({
+        selectedParticleId: matchingParticles
+      });
+      this.network.selectNodes(matchingParticles);
+    });
+    _defineProperty(this, "selectGroup", group => () => {
+      const selection = group.split(",");
+      this.setState({
+        selectedParticleId: selection
+      });
+      this.network.selectNodes(selection);
+    });
+    _defineProperty(this, "countGroupTools", group => {
+      const toolList = this.state.dtt.listTools(group);
+      const nTools = toolList.length;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+        overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Popover, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+            children: toolList.map(tool => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+              children: tool
+            }, tool))
+          })
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [nTools, " TupleTool", nTools === 1 ? "" : "s"]
+        })
+      });
+    });
+    _defineProperty(this, "callbackCloseNodeConf", () => {
+      this.setState({
+        showNodeModal: false
+      });
+    });
+    _defineProperty(this, "callbackSignalUpdated", () => {
+      this.setState({
+        updated: true
+      });
+    });
+    _defineProperty(this, "sendData", () => {
+      const dttConfig = _lodash.default.cloneDeep(this.state.dtt.config);
+      this.setState({
+        updated: false,
+        lastSave: dttConfig
+      });
+      this.props.parentCallback(dttConfig);
+    });
+    _defineProperty(this, "revertDTT", () => {
+      let dtt = this.state.dtt;
+      dtt.config = _lodash.default.cloneDeep(this.state.lastSave);
+      this.setState({
+        dtt: dtt,
+        updated: false
+      });
+    });
+    _defineProperty(this, "displaySelectionDescriptor", decaySelector => {
+      // split into an array for easier looping
+      // XXX: we could probably use descriptors.list in conjunction with descriptors.mapped_list here...
+      const lokiArray = decaySelector.replace(/^\[/, "").replace(/^\^\[/, "^").replace(/\]CC$/, "").split(" ");
+      const texArray = lokiArray.map(particle => {
+        if (particle === "->") {
+          return "\\to";
+        } else {
+          let name = particle.replace(/^\^/, ""); // name will be used to look up the particle in metadata
+          // detect and handle sub-decays (marked with round braces)
+          // A -> (B -> C D) E
+          // A -> (B -> C (D -> E F)) G
+          let braces = ["", ""];
+          const numBraces = [/\(/g, /\)/g].map(pattern => (name.match(pattern) || []).length);
+          if (name.startsWith("(")) {
+            name = name.replace(/^\(/, "");
+            braces[0] = "(";
+          } else if (name.endsWith(")") && numBraces[1] > numBraces[0]) {
+            name = name.replace(/\)+$/, "");
+            braces[1] = ")".repeat(numBraces[1] - numBraces[0]);
+          }
+          // spit edge-cases to the console and handle them somewhat gracefully
+          if (!Object.keys(this.context.metadata.particleProperties).includes(name)) {
+            console.error("".concat(name, " not found in particle property metadata!"));
+            return "\\text{".concat(particle, "}");
+          }
+          let latex = this.context.metadata.particleProperties[name].latex;
+          // mark particles by underlining them
+          // TODO: if we can figure out colour with mathjax-react, turn them blue instead
+          if (particle.startsWith("^")) {
+            latex = "\\underline{".concat(latex, "}");
+          }
+          // remember to put the braces back
+          return "".concat(braces[0]).concat(latex).concat(braces[1]);
+        }
+      });
+      return texArray.join(" ");
+    });
+    _defineProperty(this, "displaySelection", selection => {
+      const decaySelector = this.props.decay.descriptors.template.replace(/\${(\w+)}/g, (_, v) => selection.includes(v) ? "^" : "");
+      const latex = this.displaySelectionDescriptor(decaySelector);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+        overlay: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Popover, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Popover.Header, {
+            children: "LoKi selector"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Popover.Body, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+              children: decaySelector
+            })
+          })]
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mathjaxReact.MathComponent, {
+            tex: "".concat(latex),
+            display: false
+          })
+        })
+      });
+    });
+    _defineProperty(this, "toggleZoomLock", () => {
+      this.network.setOptions({
+        interaction: {
+          zoomView: this.state.lockGraphZoom
+        }
+      });
+      this.setState({
+        lockGraphZoom: !this.state.lockGraphZoom
+      });
+    });
+  }
+  render() {
+    this.state.dtt.pruneGroups(); // Make sure no empty groups
+    const selection = this.state.selectedParticleId;
+    const tagInfo = this.context.metadata.userHints.particleTags;
+    const particleInfo = this.context.metadata.particleProperties;
+    const dtt = this.state.dtt.config;
+    const nGroups = Object.keys(dtt.groups).length;
+    const dttName = this.state.dtt.getSafeName();
+    const decayTags = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Stack, {
+      direction: "horizontal",
+      style: {
+        flexWrap: "wrap",
+        justifyContent: "center"
+      },
+      gap: 2,
+      children: this.props.decay.tags.filter(tag => this.context.metadata.userHints.decayTags[tag].warn).map(tag => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DecayTag.default, {
+        tag: tag
+      }, tag))
+    });
+    let selectedName = "";
+    let filterToolTags = ["IParticleTupleTool"];
+    let particleTags = [];
+    let displayedGroups = {};
+    if (selection.length > 0) {
+      const target = this.state.dtt.getTarget(selection);
+      const allParticles = selection.length > 1 ? target.particles.map(particle => particleInfo[particle]) : [particleInfo[target.particle]];
+      const allTags = new Set([].concat(...allParticles.map(particle => particle.tags.filter(tag => !tagInfo[tag].hide))));
+      particleTags = [...allTags].filter(tag => allParticles.every(particle => particle.tags.includes(tag)));
+      selectedName = this.displaySelection(selection);
+      if (selection.length === 1) {
+        const filteredGroups = Object.entries(dtt.groups).filter(_ref => {
+          let [key, _value] = _ref;
+          return key.includes(selection[0]);
+        });
+        displayedGroups = Object.fromEntries(filteredGroups);
+      }
+    } else {
+      filterToolTags.push("IEventTupleTool");
+      const allBranches = dtt.branches;
+      const allParticles = Object.keys(allBranches).map(branch => particleInfo[allBranches[branch].particle]);
+      const uniqueTags = new Set([].concat(...allParticles.map(particle => particle.tags.filter(tag => !tagInfo[tag].hide))));
+      particleTags = [...uniqueTags];
+      selectedName = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Decay.default, {
+        decay: this.props.decay,
+        display: false
+      });
+      displayedGroups = dtt.groups;
+    }
+    particleTags.sort((a, b) => tagInfo[a].group > tagInfo[b].group);
+    const inputList = dtt.inputs.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+      children: "Choose at least one Stripping line, otherwise no decay candidates will be selected"
+    }) : dtt.inputs.map((location, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        children: location
+      })
+    }, index));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card.Header, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+          placement: "bottom",
+          overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Popover, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Popover.Body, {
+              children: ["The ROOT TTree will be found under ", /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+                children: "DecayTreeTuple/".concat(dttName)
+              }), "."]
+            })
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card.Title, {
+            children: ["Tree name: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+              children: dttName
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
+            eventKey: "0",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Header, {
+              children: [dtt.inputs.length, " input location", dtt.inputs.length === 1 ? "" : "s"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Body, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+                variant: "flush",
+                children: inputList
+              })
+            })]
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card.Body, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card.Title, {
+          className: "d-flex justify-content-between align-items-start",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+              placement: "bottom",
+              overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
+                children: "Click to select particles to configure. Hold ctrl to select multiple. Clear the selection to configure the entire decay."
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrapIcons.QuestionCircle, {})
+            }), " ", "Configure ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Decay.default, {
+              decay: this.props.decay,
+              display: false
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+            placement: "bottom",
+            overlay: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Tooltip, {
+              children: ["Click to ", this.state.lockGraphZoom ? "unlock" : "lock", " scroll-to-zoom."]
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
+              onClick: this.toggleZoomLock,
+              variant: "secondary-outline",
+              children: [this.state.lockGraphZoom ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrapIcons.Lock, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrapIcons.Unlock, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrapIcons.Search, {})]
+            })
+          })]
+        }), decayTags, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactGraphVis.default, {
+          graph: this.state.graph,
+          options: DecayTree.options,
+          events: {
+            selectNode: event => {
+              this.setState({
+                selectedParticleId: [...event.nodes].sort()
+              });
+            },
+            deselectNode: event => {
+              this.setState({
+                selectedParticleId: [...event.nodes].sort()
+              });
+            }
+          },
+          getNetwork: network => {
+            this.network = network;
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Card.Title, {
+          children: "Select by category"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Card.Body, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Stack, {
+            direction: "horizontal",
+            style: {
+              flexWrap: "wrap",
+              justifyContent: "center"
+            },
+            gap: 2,
+            children: particleTags.map(tag => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ParticleTag.default, {
+              as: "button",
+              tag: tag,
+              onClick: this.selectAllByTag(tag)
+            }, tag))
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card.Title, {
+          children: ["Current selection: ", selectedName]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConfigNode.default, {
+          dtt: this.state.dtt,
+          particleID: selection,
+          parentCallbackClose: this.callbackCloseNodeConf,
+          parentCallbackUpdated: this.callbackSignalUpdated,
+          filterToolTags: filterToolTags,
+          updated: this.state.updated
+        }), Object.keys(displayedGroups).length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card.Header, {
+            children: [nGroups, " group", nGroups === 1 ? "" : "s"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+            variant: "flush",
+            children: Object.keys(displayedGroups).map(sel => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup.Item, {
+              className: "d-flex justify-content-between align-items-start",
+              children: [this.displaySelection(sel.split(",")), this.countGroupTools(sel.split(",")), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                variant: "outline-secondary",
+                size: "sm",
+                onClick: this.selectGroup(sel),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrapIcons.PencilSquare, {})
+              })]
+            }, sel))
+          })]
+        }) : "", /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonGroup, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+            overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
+              children: "Save changes to this DecayTreeTuple"
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+              type: "submit",
+              onClick: this.sendData,
+              disabled: !this.state.updated,
+              children: "Save"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+            overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
+              children: "Discard changes to this DecayTreeTuple"
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+              variant: "outline-danger",
+              onClick: this.revertDTT,
+              disabled: !this.state.updated,
+              children: "Revert"
+            })
+          })]
+        })]
+      })]
+    });
+  }
+}
+_defineProperty(DecayTree, "contextType", _MetadataContext.default);
+_defineProperty(DecayTree, "options", {
+  ..._config.default.dttGraphOptions,
+  nodes: {
+    // need to add a lambda to set the label hover-style
+    ..._config.default.dttGraphOptions.nodes,
+    chosen: {
+      label: (values, id, selected, _hovering) => {
+        if (selected) {
+          values.mod = "bold";
+          values.color = "#0d6efd";
+        }
+      }
+    }
+  }
+});
+DecayTree.propTypes = {
+  decay: _propTypes.default.object,
+  dttConfig: _propTypes.default.object,
+  parentCallback: _propTypes.default.func
+};
+var _default = exports.default = DecayTree;

package/dist/components/DecaysList.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("../style/DecaysList.css");
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactInfiniteScrollComponent = _interopRequireDefault(require("react-infinite-scroll-component"));
+var _DecayItem = _interopRequireDefault(require("./DecayItem"));
+var _reactBootstrap = require("react-bootstrap");
+var _config = _interopRequireDefault(require("../config"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*****************************************************************************\
+* (c) Copyright 2021 CERN for the benefit of the LHCb Collaboration           *
+*                                                                             *
+* This software is distributed under the terms of the GNU General Public      *
+* Licence version 3 (GPL Version 3), copied verbatim in the file "COPYING".   *
+*                                                                             *
+* In applying this licence, CERN does not waive the privileges and immunities *
+* granted to it by virtue of its status as an Intergovernmental Organization  *
+* or submit itself to any jurisdiction.                                       *
+\*****************************************************************************/
+class DecaysList extends React.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
+      items: this.props.decays.length > _config.default.batch_size ? this.props.decays.slice(0, _config.default.batch_size) : this.props.decays,
+      index: this.props.decays.length > _config.default.batch_size ? _config.default.batch_size - 1 : this.props.decays.length,
+      selectedDecays: this.props.selectedDecays
+    });
+    _defineProperty(this, "fetchMoreData", () => {
+      setTimeout(() => {
+        this.setState({
+          items: this.state.items.concat(this.props.decays.slice(this.state.index + 1, this.state.index + 1 + _config.default.batch_size)),
+          index: this.state.index + _config.default.batch_size < this.props.decays.length ? this.state.index + _config.default.batch_size : this.props.decays.length
+        });
+      }, 1000);
+    });
+    _defineProperty(this, "callbackFunction", childData => {
+      if (childData.selected) {
+        const index = this.state.selectedDecays.indexOf(childData.decay);
+        if (index > -1) {
+          this.state.selectedDecays.splice(index, 1);
+        }
+      } else {
+        this.state.selectedDecays.push(childData.decay);
+      }
+      this.props.parentCallback(this.state.selectedDecays);
+    });
+    _defineProperty(this, "getDecayItem", () => {
+      const strippingDecayItem = this.state.items.map(decay => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DecayItem.default, {
+        decay: decay,
+        selected: this.state.selectedDecays.includes(decay),
+        parentCallback: this.callbackFunction
+      }, decay.descriptors.plain));
+      return strippingDecayItem;
+    });
+  }
+  render() {
+    const decayItem = this.getDecayItem();
+    const nShown = this.state.items.length;
+    const nTotal = this.props.decays.length;
+    if (nShown === 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "danger",
+        children: "No matching decays"
+      });
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+          variant: "flush",
+          id: "scrollableDiv",
+          className: "decaysListClass",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactInfiniteScrollComponent.default, {
+            dataLength: nShown,
+            next: this.fetchMoreData,
+            hasMore: nShown < nTotal,
+            loader: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
+              variant: "warning",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Spinner, {
+                size: "sm",
+                animation: "border"
+              }), " Loading next", " ", Math.min(_config.default.batch_size, nTotal - nShown), " decays..."]
+            }),
+            scrollableTarget: "scrollableDiv",
+            children: decayItem
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
+          variant: "light",
+          children: ["Showing ", nShown, " of ", nTotal, " matching decays"]
+        })]
+      });
+    }
+  }
+}
+DecaysList.propTypes = {
+  decays: _propTypes.default.arrayOf(_propTypes.default.object),
+  selectedDecays: _propTypes.default.arrayOf(_propTypes.default.object),
+  parentCallback: _propTypes.default.func
+};
+var _default = exports.default = DecaysList;

package/dist/components/DeleteButton.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactBootstrap = require("react-bootstrap");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/*****************************************************************************\
+* (c) Copyright 2021-2022 CERN for the benefit of the LHCb Collaboration      *
+*                                                                             *
+* This software is distributed under the terms of the GNU General Public      *
+* Licence version 3 (GPL Version 3), copied verbatim in the file "COPYING".   *
+*                                                                             *
+* In applying this licence, CERN does not waive the privileges and immunities *
+* granted to it by virtue of its status as an Intergovernmental Organization  *
+* or submit itself to any jurisdiction.                                       *
+\*****************************************************************************/
+
+class DeleteButton extends _react.default.Component {
+  render() {
+    if (this.props.disabled) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+      trigger: "click",
+      placement: "right",
+      rootClose: true,
+      overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Popover, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Popover.Body, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+            variant: "danger",
+            onClick: this.props.action,
+            children: "Confirm"
+          })
+        })
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
+        variant: this.props.outline ? "outline-danger" : "danger",
+        disabled: this.props.disabled,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrapIcons.Trash, {}), " ", this.props.children]
+      })
+    });
+  }
+}
+DeleteButton.propTypes = {
+  action: _propTypes.default.func,
+  outline: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  children: _propTypes.default.node
+};
+var _default = exports.default = DeleteButton;