Plugins

A plugin system allows developers to add functionality to Phylocanvas without having to change the source code or request changes, and allows us to keep the core library as small and simple as possible. We aim to foster a rich plugin ecosystem.

The following plugins are maintained by us, having started life in the core library, but now exist as separate entities in the spirit of the new philosophy:

Context Menu

Install

npm install --save-dev phylocanvas-plugin-context-menu

Register

import contextMenu from 'phylocanvas-plugin-context-menu';

Phylocanvas.plugin(contextMenu);

Usage

Right-click anywhere to see the standard options in the context menu. Right-click while hovering over a branch to see branch-specific options.

Context menu plugin on Github

History

Install

npm install --save-dev phylocanvas-plugin-history

Register

import history from 'phylocanvas-plugin-history';

Phylocanvas.plugin(history);

Usage

tree.setTreeType('rectangular');
tree.on('click', function (e) {
  var node = tree.getNodeAtMousePosition(e);
  if (node) {
    tree.redrawFromBranch(node);
  } else {
    tree.redrawOriginalTree();
  }
});

Click on the node between Leaf C and Leaf D to redraw a subtree, then open the history tab. Click a snapshot to switch between the original tree and the subtree.

History plugin on Github

Metadata

Install

npm install --save-dev phylocanvas-plugin-metadata

Register

import metadata from 'phylocanvas-plugin-metadata';

Phylocanvas.plugin(metadata);

Usage

tree.setTreeType('rectangular');
tree.alignLabels = true;

tree.on('beforeFirstDraw', function () {
  for (var i = 0; i < tree.leaves.length; i++) {
    tree.leaves[i].data = {
      column1: {
        colour: '#3C7383',
        label: 'Label' + (i + 1),
      },
      column2: '#9BB7BF',
      column3: '#3C7383',
      column4: '#9BB7BF',
    };
  }
});

tree.load('(A:0.1,B:0.2,(C:0.3,D:0.4)E:0.5)F;');

N.B. It's more efficient to configure metadata before loading a newick string.

Metadata plugin on Github.

Ajax

Install

npm install --save-dev phylocanvas-plugin-ajax

Register

import ajax from 'phylocanvas-plugin-ajax';

Phylocanvas.plugin(ajax);

Usage

tree.load('/v1.x/docs/data/tree.nwk');

Pass a URL to tree.load instead of a newick string. The plugin then uses XHR to fetch the string before attempting to build the tree.

Scale-bar

Install

npm install --save-dev phylocanvas-plugin-scalebar

Register

import scalebar from 'phylocanvas-plugin-scalebar';

Phylocanvas.plugin(scalebar);

Usage

Enable zoom and scroll on the canvas to see the value of the scale-bar chaange dynamically.

Scale-bar plugin on Github