Phylocanvas.gl

# Properties

#

# alignLabels

Type: Boolean Default: false

Whether to align leaf labels in Circular, Radial, or Rectangular trees. See exmaple.

# blockHeaderFontSize

  • Type: Number
  • Default: 13

The font size used to render metadata block headers.

# blockLength

  • Type: ``
  • Default: 16

The block size in pixels.

# blockPadding

  • Type: Number
  • Default: 4

The gap size between blocks in pixels.

# blocks

  • Type: Array
  • Default: []

A list of column names to be rendered as blocks. See exmaple.

# branchZoom

  • Type: Number
  • Default: 0

The zoom level applied to branch lengths as follows:

branchZoom Value Scale factor (Math.pow(2, branchZoom)) Effect
< 0 (0, 1) Branch lengths are zoomed out
= 0 1 Branch lengths are not zoomed
> 0 (1, ∞) Branch lengths are zoomed in

For example,

  • With { branchZoom: -1 }, Scale factor will be 0.5 and branch lengths are halved.
  • With { branchZoom: 0 }, Scale factor will be 1 and branch lengths are not zoomed.
  • With { branchZoom: 1 }, Scale factor will be 2 and branch lengths are doubled.

# centre

  • Type: Array
  • Default: [ 0.5, 0.5 ]

An array of exactly two elements ([ xOffset, yOffset ]) representing the X and Y offsets of the tree.

# collapsedIds

  • Type: Array
  • Default: EmptyArray

A list of internal node IDs to be rendered as collapsed.

# edgeOverlapFactor

  • Type: Number
  • Default: -0.5

Specifies the zoom level at which lines shorter than one pixel are not rendered.

# fillColour

  • Type: Array
  • Default: [ 51, 51, 51, 255 ]

The colour used to fill leaf node shapes. Defaults to [ 51, 51, 51, 255 ] which is the equivalent of #333333.

# fontColour

  • Type: Array
  • Default: [ 51, 51, 51, 255 ]

The colour used to render labels. Defaults to [ 51, 51, 51, 255 ] which is the equivalent of #333333.

# fontFamily

  • Type: String
  • Default: "monospace"

Specifies a prioritised list of one or more font family names or generic family names. Follow the specs for CSS font-family (opens new window).

# fontSize

  • Type: Number
  • Default: 16 (pixels)

The font size of text label in pixels.

# haloRadius

  • Type: Number
  • Default: 12 (pixels)

The minimal radius (in pixels) of selection and highlight halos.

# haloWidth

  • Type: Number
  • Default: 4 (pixels)

The line width (in pixels) of selection and highlight halos.

# highlightColour

  • Type: ``
  • Default: [ 60, 115, 131, 255 ] (i.e. #3C7383)

The colour used to render selection and highlight halos. Defaults to [ 60, 115, 131, 255 ] which is the equivalent of #3C7383.

# interactive

  • Type: Boolean
  • Default: false

Whether to enable the following interactions on the tree instance:

  • pan: on mouse draging
  • zoom: on mouse scroll
  • tooltips: on pointer hover
  • highlight: on pointer hover
  • selection: on pointer click

This property is not reactive and connot be changed by setProps.

# lineWidth

  • Type: Number
  • Default: 1 (pixel)

The width of the node edges (i.e. the lines connecting nodes).

# metadata

  • Type: Object
  • Default: {}

An object which contains the metadata values keyed by leaf labels. See exmaple.

# nodeShape

The shape used to render leaf nodes. See Shapes enumeration for a list of all shapes.

# nodeSize

  • Type: Number
  • Default: 14 (pixels)

The size of the shape used to render leaf nodes.

# padding

  • Type: Number
  • Default: 16 (pixels)

Space to add to bounds when fitting the tree to the canvas.

# rootId

  • Type: String | null
  • Default: null

The ID of an internal node to be used as a root of the tree. Defaults to null (renders the original root).

# rotatedIds

A list of internal node IDs to be rotated.

# selectedIds

A list of leaf node IDs to be selected.

# shapeBorderAlpha

  • Type: Number
  • Default: 0.14

A number between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. The default value is 0.14. Values outside that range, including Infinity and NaN, will not be set.

# shapeBorderWidth

  • Type: Number
  • Default: 1 (pixel)

The width of the outline of node shapes, in pixels.

# showBlockHeaders

  • Type: Boolean
  • Default: false

Whether to render column headers of metadata blocks on orthogonal tree types (Rectangular, Diagonal, or Hierarchical).

# showBranchLengths

  • Type: Boolean
  • Default: false

Whether to render branch lengths labels.

# showEdges

  • Type: Boolean
  • Default: true

Whether to render node edges (the lines connecting nodes).

# showInternalLabels

  • Type: Boolean
  • Default: false

Whether to render labels of internal nodes.

# showLabels

  • Type: Boolean
  • Default: false

Whether to render labels on the tree (overrides showBranchLengths, showInternalLabels, and showleaflabels).

# showLeafLabels

  • Type: Boolean
  • Default: false

Whether to render labels of leaf nodes.

# showPiecharts

  • Type: Boolean
  • Default: false

Whether to render collapsed internal nodes as piecharts.

# showShapeBorders

  • Type: Boolean
  • Default: false

Whether to render the outline of node shapes.

# showShapes

  • Type: Boolean
  • Default: true

Whether to render shapes of leaf nodes.

# size

Type: Object (required) Default: { height: 150, width: 300 } (opens new window)

An object with two properties:

  • width - (Number, required) Width of the canvas in pixels.
  • height - (Number, required) Height of the canvas in pixels.

# stepZoom

  • Type: Number
  • Default: 0

The zoom level applied to step lengths in orthogonal tree types (Rectangular, Diagonal, or Hierarchical) as follows:

stepZoom Value Scale factor (Math.pow(2, stepZoom)) Effect
< 0 (0, 1) Step lengths are zoomed out
= 0 1 Step lengths are not zoomed
> 0 (1, ∞) Step lengths are zoomed in

For example,

  • With { stepZoom: -1 }, Scale factor will be 0.5 and step lengths are halved.
  • With { stepZoom: 0 }, Scale factor will be 1 and step lengths are not zoomed.
  • With { stepZoom: 1 }, Scale factor will be 2 and step lengths are doubled.

# strokeColour

  • Type: Array
  • Default: [ 34, 34, 34, 255 ]

The colour used to draw leaf node edges (the lines connecting nodes). Defaults to [ 34, 34, 34, 255 ] which is the equivalent of #222222.

# styleLeafLabels

  • Type: Boolean
  • Default: false

Whether to render colour labels of leaf nodes.

# styleNodeEdges

  • Type: Boolean
  • Default: false

Whether to render colour node edges (the lines connecting nodes).

# styles

  • Type: Object
  • Default: {}

An object containing node styles keyed by leaf labels. See exmaple.

# treeToCanvasRatio

  • Type: ``
  • Default: 0.25

# type

The tree type to render. See TreeTypes enumeration for a list of all tree types.

# zoom

  • Type: Number
  • Default: 0

The zoom level applied as follows:

zoom Value Scale factor (Math.pow(2, zoom)) Effect
< 0 (0, 1) Tree is zoomed out
= 0 1 Tree is not zoomed
> 0 (1, ∞) Tree is zoomed in

For example,

  • With { zoom: -1 }, Scale factor will be 0.5 and the tree is halved.
  • With { zoom: 0 }, Scale factor will be 1 and the tree is not zoomed.
  • With { zoom: 1 }, Scale factor will be 2 and the tree is doubled.
Last Updated: 11/4/2022, 8:38:05 AM

← Methods →