SimplePhyloTreeProps

Defined in: packages/components/src/components/PhyloTree/types.ts:126

Extended by

• PhyloTreeProps

Properties

Property	Type	Default value	Description
tree	Tree	undefined	The tree: a root node with its descendants nested under children.
height?	number	900	Height in pixels.
width?	number	1000	Width in pixels.
layout?	LayoutMode	"rectangular"	Layout — see LayoutMode.
showSupportValues?	boolean	true	Label internal nodes with their name (typically bootstrap support).
supportThreshold?	number	0	Only label support values at or above this value.
shadeBranchBySupport?	boolean	true	Fade branches whose parent’s support (a 0–1 value) is low.
colorFunction?	ColorFn	the leaf name minus its last word	Seeds each leaf marker’s colour; nodeStyles overrides it.
leafMarkerColor?	string	undefined	One colour for every leaf marker (e.g. "currentColor") instead of colorFunction’s.
fontSize?	number	10	Font size of support-value labels, in pixels.
alignTips?	boolean	true	Align leaf labels in one column rather than right after each branch.
leafTextComponent?	LeafFn	the leaf's name	Renders each leaf label.
interactive?	boolean	false	Show internal-node markers that toggle selection.collapsed (or call onNodeClick), and let nodes be dragged among their siblings (see dragEnabled).
searchQuery?	string	undefined	Bold the leaves whose name contains this text (case-insensitively) — or, with searchUseRegex, matches this regular expression — and dim the rest. An invalid regex matches nothing.
searchUseRegex?	boolean	false	Treat searchQuery as a regular expression.
showScaleBar?	boolean	true	Show a branch-length scale bar (not in "cladogram" layout).
showBranchLengths?	boolean	false	Label every branch with its length.
branchWidth?	number	0.75	Branch stroke width, in pixels.
nodeRadius?	number	4	Radius of node markers, in pixels (0 hides them).
labelFontSize?	number	11	Leaf label font size, in pixels.
leafSpacing?	number	undefined	Pixels per leaf. When set, the tree is laid out that tall instead of fitting height, and the view scrolls through it. Ignored for "radial".
nodeStyles?	Record<string, TreeNodeStyle>	undefined	Per-node colour and bold, keyed by node id (see TreeNodeInfo.descendantIds for clades).
branchStyles?	Record<string, TreeBranchStyle>	undefined	Per-branch colour, keyed by the id of the node below the branch.
activeNodeId?	string | null	undefined	Node drawn highlighted, e.g. the one whose context menu is open.
onNodeClick?	(node, event) => void	undefined	Called when a node marker is clicked (not dragged). When set, clicking an internal node calls this instead of toggling its collapse, so the caller can offer a menu.
onBranchClick?	(node, event) => void	undefined	Called when a branch is clicked, with the node below it; makes branches clickable.
dragEnabled?	boolean	interactive	Let nodes be dragged among their siblings (writes selection.order).
onLeafOrderChange?	(leafNames) => void	undefined	Called with the leaf names in display order whenever it changes, e.g. to order alignment rows.
svgRef?	Ref<SVGSVGElement>	undefined	Ref to the rendered <svg>, e.g. to export it.
viewport?	Viewport	the top of the tree, at full width	The visible window, in pixels of the laid-out tree.
onViewportChange?	(next) => void	undefined	Called with the next window on every pan/zoom.
selection?	TreeSelection	as passed, nothing collapsed	Where the tree is rooted, which clades are collapsed, and sibling order.
onSelectionChange?	(next) => void	undefined	Called with the next selection on every collapse, reorder or drag-to-reroot.