TreeViewer Guide

The TreeViewer consist of several part:

  1. A settings pane on the left side.
  2. The Animated Tree in the middle.
  3. An Allele list on the right side.
  4. Download buttons below the tree. *
  5. A comparison bar below the tree.
  6. A Link to download a local version of the TreeViewer in the bottom of the page. **
* The customized tree with binding motifs can be saved as either PNG or PDF, by clicking on the corresponding button.
** The local version of the TreeViewer might not contain all of the features offered in the online version, due to compatibility limitation.

NOTE: Due to browser compatibility issues, some features might not work on some browsers. And the use of Internet Explorer is strongly discouraged.

The Settings Pane

The settings pane consist of several elements:

  1. The size of the X dimension.
  2. The size of the Y dimension.
  3. The margin of white space around the tree (useful to make space for images).
  4. The span of the tree (default is a full circle "360 degrees").
  5. The rotational orientation of the tree in degrees.
  6. The size of the leafs (Allele Labels).
  7. The color of the leafs (Allele Labels).
  8. The font of the leafs (Allele Labels).
  9. The size of the branch annotations (bootstrap value).
  10. The color of the branch annotations (bootstrap value).
  11. The font of the branch annotations (bootstrap value).
  12. The size of the branches.
  13. The color of the branches.
  14. The size of the nodes.*
  15. The color of the nodes.*
  16. The image size.**
  17. Buttons to hide Boostraps, Nodes and label.
  18. A selective label coloring, where the user types a search string to match the allele names he/she wants to colorize. ***
*Nodes are the filled, colored circles which marks the end point of a branch where a leaf belongs.
**The size corresponds to the width of the shown binding motifs.
***At each keystroke the script will try to match the string with the allele labels, and all matching alleles will be marked by a red border. The user then click on the color field and chooses a color, which is instantly applied to the selected labels. The selection will disappear as soon as a color is chosen, after which the user will have to reapply the selection to change the color.
Static Tree


 

The Tree

The tree is the product, and it comes with several interactive features:

  1. All tree elements can be resized, recolored and adjusted through the settings pane.
  2. All Allele labels and binding motifs can be rearranged by dragging them to the wanted position.
  3. Right clicking on an allele label or node brings up a menu where the user can specify in which slot in the comparison bar, the binding motif should be shown.
  4. Just below the SVG element containing the tree is two download buttons, where the user can click to download the tree as either PNG or PDF.
The tree


 

The Allele List

The allelelist provides the user with several features:

  1. Quick overview of the alleles and their prediction scores.
  2. An "on mouseover" show of the allele motifs next to their nodes.
  3. An "on click" selection, which permanently adds the allele's binding motif to the tree. *
  4. Access to the comparison bar. **
*The image can be moved around freely within the SVG element containing the tree. Dobbelt click on either the image or the allele name in the allele list to remove.
**When selecting or removing alleles, the comparison bar is updated to only encompass the first seven alleles.
Allele list


 

The Comparison Bar

The bar can show up to seven binding motifs side by side, for quick and easy comparison.
A motif is added either by seleting the allele in the allele list or by manually assigning an allele from the right click menu associated with the allele label or node in the tree.

Comparison bar

Downloading a local copy of the TreeViewer

In the buttom of the page, is a download button which will download a zip file containing all needed files to create the tree directly on the local machine. All which is required is a browser.
To see the tree all which is required is to open the HTML file contained the the zipped folder.

Additionally, it is also possible to depict other newick tree files using this package if that is of interest.

NOTE: The local version of the TreeViewer might not contain all of the features offered in the online version, due to compatibility limitation.