app.components.tree
SVG rendering components for phylogenetic tree nodes and branches.
Contains Branch, TreeNode, and PhylogeneticTree — the recursive SVG components that draw the tree topology. All data arrives via props; these components do not access React context.
Highlighting uses a two-tier model: - highlights — persistent map of {leaf-name -> color-string} for color-assigned nodes (filled circle in the assigned color) - selected-ids — transient set of leaf names currently checked in the AG-Grid (shown with a selection ring stroke)
Clicking a leaf node toggles its membership in selected-ids, which is reflected in both the tree and the AG-Grid table.
Branch
(Branch props__5701__auto__)Branch*
(Branch* props__5701__auto__)Renders a single tree branch as two SVG lines: a horizontal segment (the branch itself) and a vertical connector to the parent node.
Props (see :app.specs/branch-props): - :x, :y - endpoint (child) coordinates - :parent-x, :parent-y - start (parent) coordinates - :line-color - stroke color string - :line-width - stroke width in pixels
PhylogeneticTree
(PhylogeneticTree props__5701__auto__)PhylogeneticTree*
(PhylogeneticTree* props__5701__auto__)Renders the phylogenetic tree as a positioned SVG group.
A thin wrapper that places a <g> with the standard SVG padding transform and delegates recursive node rendering to TreeNode.
Props (see :app.specs/phylogenetic-tree-props): - :tree - positioned root node (recursive map) - :x-scale - horizontal scaling factor - :y-scale - vertical tip spacing - :show-internal-markers - whether to render circles on internal nodes - :show-distance-from-origin - whether to render internal node distances - :marker-radius - radius of the circular node marker in pixels - :marker-fill - fill color for node markers - :highlights - map of {leaf-name -> color-string} for highlighted nodes - :selected-ids - set of leaf names currently selected in the grid - :active-reference-node-id - ID of the reference node selected via Ctrl+click, used for rerooting and distance calculations (or nil) - set-active-reference-node-id! - setter for reference node selection (used for rerooting and distance calculations) - :on-toggle-selection - (fn [leaf-name]) callback to toggle selection - :on-select-subtree - (fn [node]) callback to add a subtree’s leaf names
TreeNode
(TreeNode props__5701__auto__)TreeNode*
(TreeNode* props__5701__auto__)Recursively renders a tree node and all its descendants as SVG.
Draws the branch connecting this node to its parent, renders a text label and circle marker for leaf nodes, optionally renders circle markers on internal nodes, and recurses into children.
Clicking a leaf’s marker or label toggles its selection state via the :on-toggle-selection callback. Ctrl+clicking any node (leaf or internal) selects it for rerooting via :on-set-reroot-node.
Rendering priority for leaf markers: 1. Highlighted (in highlights map) — filled circle in the node’s assigned color, enlarged radius 2. Selected (in selected-ids set) — shown with a dashed selection ring stroke 3. Default — standard marker fill and radius
Props (see :app.specs/tree-node-props): - :node - positioned tree node map - :parent-x - parent’s x-coordinate (unscaled) - :parent-y - parent’s y-coordinate (unscaled) - :x-scale - horizontal scaling factor - :y-scale - vertical spacing in pixels between adjacent tips - :show-internal-markers - boolean, whether to render circles on internal nodes - :show-distance-from-origin - boolean, whether to render internal node distances - :scale-origin - :tips or :root for distance labeling - :max-depth - maximum x-coordinate in the tree - :marker-radius - radius of the circular node marker in pixels - :marker-fill - default fill color for node markers - :highlights - map of {leaf-name -> color-string} for highlighted nodes - :selected-ids - set of leaf names currently selected in the grid - :on-toggle-selection - (fn [leaf-name]) callback to toggle selection - :on-select-subtree - (fn [node]) callback to add a subtree’s leaf names