PhyloTreeProps
Defined in: packages/components/src/components/PhyloTree/types.ts:211
Extends
Section titled “Extends”Properties
Section titled “Properties”| Property | Type | Default value | Description | Inherited from |
|---|---|---|---|---|
tree |
Tree |
undefined |
The tree: a root node with its descendants nested under children. |
SimplePhyloTreeProps.tree |
height? |
number |
900 |
Height in pixels. | SimplePhyloTreeProps.height |
width? |
number |
1000 |
Width in pixels. | SimplePhyloTreeProps.width |
layout? |
LayoutMode |
"rectangular" |
Layout — see LayoutMode. | SimplePhyloTreeProps.layout |
showSupportValues? |
boolean |
true |
Label internal nodes with their name (typically bootstrap support). | SimplePhyloTreeProps.showSupportValues |
supportThreshold? |
number |
0 |
Only label support values at or above this value. | SimplePhyloTreeProps.supportThreshold |
shadeBranchBySupport? |
boolean |
true |
Fade branches whose parent’s support (a 0–1 value) is low. | SimplePhyloTreeProps.shadeBranchBySupport |
colorFunction? |
ColorFn |
the leaf name minus its last word |
Seeds each leaf marker’s colour; nodeStyles overrides it. |
SimplePhyloTreeProps.colorFunction |
leafMarkerColor? |
string |
undefined |
One colour for every leaf marker (e.g. "currentColor") instead of colorFunction’s. |
SimplePhyloTreeProps.leafMarkerColor |
fontSize? |
number |
10 |
Font size of support-value labels, in pixels. | SimplePhyloTreeProps.fontSize |
alignTips? |
boolean |
true |
Align leaf labels in one column rather than right after each branch. | SimplePhyloTreeProps.alignTips |
leafTextComponent? |
LeafFn |
the leaf's name |
Renders each leaf label. | SimplePhyloTreeProps.leafTextComponent |
interactive? |
boolean |
false |
Show internal-node markers that toggle selection.collapsed (or call onNodeClick), and let nodes be dragged among their siblings (see dragEnabled). |
SimplePhyloTreeProps.interactive |
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. |
SimplePhyloTreeProps.searchQuery |
searchUseRegex? |
boolean |
false |
Treat searchQuery as a regular expression. |
SimplePhyloTreeProps.searchUseRegex |
showScaleBar? |
boolean |
true |
Show a branch-length scale bar (not in "cladogram" layout). |
SimplePhyloTreeProps.showScaleBar |
showBranchLengths? |
boolean |
false |
Label every branch with its length. | SimplePhyloTreeProps.showBranchLengths |
branchWidth? |
number |
0.75 |
Branch stroke width, in pixels. | SimplePhyloTreeProps.branchWidth |
nodeRadius? |
number |
4 |
Radius of node markers, in pixels (0 hides them). | SimplePhyloTreeProps.nodeRadius |
labelFontSize? |
number |
11 |
Leaf label font size, in pixels. | SimplePhyloTreeProps.labelFontSize |
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". |
SimplePhyloTreeProps.leafSpacing |
nodeStyles? |
Record<string, TreeNodeStyle> |
undefined |
Per-node colour and bold, keyed by node id (see TreeNodeInfo.descendantIds for clades). |
SimplePhyloTreeProps.nodeStyles |
branchStyles? |
Record<string, TreeBranchStyle> |
undefined |
Per-branch colour, keyed by the id of the node below the branch. |
SimplePhyloTreeProps.branchStyles |
activeNodeId? |
string | null |
undefined |
Node drawn highlighted, e.g. the one whose context menu is open. | SimplePhyloTreeProps.activeNodeId |
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. | SimplePhyloTreeProps.onNodeClick |
onBranchClick? |
(node, event) => void |
undefined |
Called when a branch is clicked, with the node below it; makes branches clickable. | SimplePhyloTreeProps.onBranchClick |
dragEnabled? |
boolean |
interactive |
Let nodes be dragged among their siblings (writes selection.order). |
SimplePhyloTreeProps.dragEnabled |
onLeafOrderChange? |
(leafNames) => void |
undefined |
Called with the leaf names in display order whenever it changes, e.g. to order alignment rows. | SimplePhyloTreeProps.onLeafOrderChange |
svgRef? |
Ref<SVGSVGElement> |
undefined |
Ref to the rendered <svg>, e.g. to export it. |
SimplePhyloTreeProps.svgRef |
viewport? |
Viewport |
the top of the tree, at full width |
The visible window, in pixels of the laid-out tree. | SimplePhyloTreeProps.viewport |
onViewportChange? |
(next) => void |
undefined |
Called with the next window on every pan/zoom. | SimplePhyloTreeProps.onViewportChange |
selection? |
TreeSelection |
as passed, nothing collapsed |
Where the tree is rooted, which clades are collapsed, and sibling order. | SimplePhyloTreeProps.selection |
onSelectionChange? |
(next) => void |
undefined |
Called with the next selection on every collapse, reorder or drag-to-reroot. | SimplePhyloTreeProps.onSelectionChange |
defaultViewport? |
Viewport |
undefined |
Seeds the visible window when uncontrolled. | - |
viewportStore? |
StoreController<Viewport> |
undefined |
Keeps the visible window in an external store. | - |
defaultSelection? |
TreeSelection |
undefined |
Seeds the selection when uncontrolled. | - |
selectionStore? |
StoreController<TreeSelection> |
undefined |
Keeps the selection in an external store. | - |
cladogram? |
boolean |
undefined |
:::caution[Deprecated] Use layout="cladogram". ::: |
- |