Editor for Phylogenetic Trees

Jstree is a web application as well as a Javascript library for parsing, manipulating and plotting phylogenetic trees in the Newick format. With Jstree, one can highlight subtrees or leaves, collapse nodes in viewing, swap children, reroot, delete clades, move nodes, and export tree images, all via mouse clicks. It is purely implemented in Javascript and HTML5, and is efficient enough for trees with hundreds leaves (half a second for a tree with 864 leaves), although the speed is web browser dependent.

Requirements

This page is known to be fully functional on Safari 5, Opera 10.5, Firefox 3.6 and Chrome. Image saving is not working in IE 8 due to the lack of data URI scheme; editing is not working in iOS 4. Nonetheless, on Windows, Safari, Opera, Chrome and Firefox are recommended anyway because the Javascript engine in IE 6/7/8 is far too slow and because `canvas' is not natively supported by IE 6/7/8. Rendering this tree on IE 8 is 100-fold slower than on Chrome/Opera/Safari.

Usage

• To view a phylogenetic tree, paste the tree in the Newick format to the Input area (or use the example), click the canvas area and select "Draw".
• Clicking the white area in the canvas will bring up a popup menu, allowing you to:
  • Draw. Draw/redraw the tree with the current settings:
    • Width. The width of the image. For the rectangle view, the height of the image will be adjust automatically. For the circular view, the height always equals the width.
    • Font size. For the circular view, this is the maximum the font size. The actual font size will be adjusted such that there is no overlaps between leaves.
    • Spacing. The spacing between leaves. Not effective in the circular view.
    • 2nd label. The regular expression to match the secondary label of an internal node. Not effective in the circular view.
    • Pylogram. Check this to ignore the branch lengths.
    • Circular. Check this to switch to the circular layout.
  • PNG. Expore the tree picture as a PNG image.
  • Undo/Redo. Undo the most recent editing. Only one undo is allowed.
  • Search. Search for leaves matching a regular expression.
• Clicking a node will bring up a popup menu, allowing you to perform the following actions:
  • Swap. Click an internal node to swap its children.
  • Ladderize. Click a node to sort the clade such that the deeper leaves tend to be placed higher in the plot; in case of a tie, a leaf with lexicographically smaller names tends to be placed ahead.
  • Collapse. Click a node to collapse/uncollapse all its descendants to one node.
  • Reroot. Click a node to put the root in the middle of the edge between the node and its parent.
  • Move. Click two nodes to prune the subtree descending from the first node and then regraft it to the edge between the second node and its parent.
  • Remove. Click a node to delete it and all its descendants.
  • Multifurcate. Click a node to multifurcate its parent node.
  • Highlight. Click a node to highlight the entire clade. When a clade is highlighted, the Newick substring corresponding to the clade will be selected in the Input box. Given a huge tree, the selected text may not been seen in Opera, Chrom and Safari. In this case, one may need to scroll back a little to see the selected text.

Download

Jstree works without network connections. The tree image is rendered by the web brower rather than by a remote server. One can grab jstree.zip, open the HTML page and do all the edits locally. This zip file contains five files:

• jstree.shtml, this page, is for all static contents.
• knhx.js is the library for parsing, plotting and manipulating trees. It also responses to all mouse interactions.
• menu.js is a small Javascript library for simple popup menus, adpated from the Pop-it library.
• canvastext.js is a small library for drawing texts in Canvas. It is possible to use the system fonts to drop the dependency to this library. For some combinations of OS/browser, doing this may help efficiency. However, old IE does not support canvas texts. The font in this library also looks more beautiful.
• excanvas.js, from the ExplorerCanvas project, is an emulator of canvas for IE. For Chrome/Firefox/Safari/Opera, this library is not loaded.

License

This page and the knhx.js JavaScript is written by Heng Li. The page and the script are released under the MIT/X11 license. Canvastext.js is acquired here. It is also open source.

---