Microreact
  • Introduction
  • Introductory Videos
  • About Microreact
    • Privacy and Terms Of Service
    • Open source software used by Microreact
    • Change Log
  • Instructions
    • Navigating the site
      • Managing Projects
    • Navigating within a project
      • History sidebar
      • Selection sidebar
      • Views Sidebar
    • Creating a Project
      • Supported File Formats
      • Metadata Data
      • Tree Data
      • Map Data
      • Timeline Data
      • Network Data
      • Matrix Data
    • Adding and Editing Panels
      • Data Table
      • Map
      • Timeline
      • Tree
      • Network
      • Data-slicer
      • Chart overview
        • Area Chart
        • Line Chart
        • Bar Chart
        • Circle, Tick, Point Charts
        • Custom charts
        • Pie Chart
        • Multi-variable Chart
        • Heatmap
      • Note Panel
      • Matrix
    • Selecting and Filtering Data
    • Labels, Colours, and Shapes
    • Saving and version control
    • Access Control and Project Sharing
      • Download Project Files
      • URL control options
    • Tips & FAQ
      • How to Link Microreact projects to Google Sheets
  • API
    • API Access Tokens
    • Creating Projects via API
    • Updating Projects via API
    • Deleting Projects via API
    • Sharing Projects via API
    • Migrating to the new API
  • Feedback
    • Contact the Microreact team
Powered by GitBook
On this page
  • Basic tree settings & controls
  • Tree style
  • Tree Controls
  • Node, Label and Branch controls
  • Metadata blocks
  • Moving and Zooming
  • View Subtree
  • Collapse subtree
  • Rotate subtree
  • Set as Root (Re-root)
  • Export Leaf Labels/Export Newick File
  • Fit in panel
  • Redraw Original Tree
  • Midpoint Root
  • Export
  • Filtering Data

Was this helpful?

  1. Instructions
  2. Adding and Editing Panels

Tree

PreviousTimelineNextNetwork

Last updated 11 months ago

Was this helpful?

The tree panel creates a visualisation of a Newick file. Multiple basic styles are available, and many details can be configured.

See for Tree data source guidance, including hiding all metadata that lacks a matching tree leaf.

Basic tree settings & controls

Tree style

The tree style can be changed by clicking the panel configuration button, and then hovering over the tree button and selecting one of the options

Tree Controls

Leaf Properties

  • If leaf borders are turned on, they will be the same colour as the node unless they have no colour, in which case the border will be dark grey.

  • When turning on the leaf labels, the labels will be shown in a sparse fashion so that overlapping leaf labels are hidden. In order to see all leaf labels, zoom in (see below).

    • When displaying leaf labels only those which do not overlap each other will be displayed. You can think of these as sparse labels. As you zoom in on the tree more labels will be revealed.

  • Align leaf labels: move the labels away from the nodes and place them flush to one another

Internal Properties

  • The internal nodes toggle will display internal nodes if available

  • If internal nodes have label properties, the Internal Labels toggle will turn those on, and the slider will change the label size

    • Filter Internal Nodes is an option when Internal Labels is selected, and will

  • Branch lengths can be displayed and defined using the Branch Lengths toggle & slider

  • The colour internal edges toggle will colour edges connected to leaves using same colour as the connected leaf node

These are coloured shapes added alongside the tips of the tree to show features that differ between samples. This information adds context to the tree, and can help identify sample metadata correlating with genotype.

When adding metadata blocks, the blocks to be displayed can be selected from all available columns, and the metadata block characteristics can be changed.

Block Headers defines the size of the label font. Block Size defines the width of each block. Block Gap defines the space between blocks, if multiple blocks are added.

Moving and Zooming

Clicking on the white space next to the tree will allow the tree to be dragged around the panel. The tree can be zoomed (in or out) by using a mouse wheel. Holding the control (Windows)/command (Mac) key or alt (Windows)/option (Mac) whilst rotating the mouse wheel will zoom the tree horizontally and vertically respectively.

Clicking the +/- icons zoom in and out, while clicking the central icon determines whether the zooming happens in all directions, horizontally, or vertically.

Manipulating the tree

Hovering to the left of a parent node will highlight all the children node branches in green

Right-clicking on this selected parent node will bring up a contextual menu that allows several functions

View Subtree

This will display just the child nodes of the selected parent node. If you have trouble hovering over the desired child node, zoom in until you can select the desired node to right-click on it.

Collapse subtree

Collapse all the child nodes into a single branch

Rotate subtree

Rotate the child nodes around the selected parent node

Set as Root (Re-root)

Set the selected node as the root of the tree

Export Leaf Labels/Export Newick File

Export the selected subtree as a text list of the leaf label names or as a newick file containing just the subtree.

The features above refer to a subtree. Right-clicking away from tree within the panel will display a contextual menu

Fit in panel

Redraw Original Tree

Clicking on this returns the tree state to it's original topology and displays all the leaves

Midpoint Root

Clicking this enables the tree to be midpoint rooted if it was not rooted prior to upload

Export

The tree can be exported as a text file with a list of leaf labels, a newick file or as a PNG image

Filtering Data

You can filter the tree data by

  • clicking on an internal node in the tree or

  • Filtering on other panels that are linked to the tree (e.g. selecting via the data-slicer)

Node, Label and Branch controls

Colour leaf labels: they will be the same colour as defined within the menu

Metadata blocks

The colours shown are defined within the menu, and show up in the Legend side panel. To change the colours, select each Colour Column within the menu, set the Colour Palette, and do this for each column you'd like to change. TIP: Remember that the Colour Column option should be returned to the column you want to use as the main Colour Column on your Dashboard or view.

Caution: once you have saved views in the views sidebar, there is no way for Microreact to know which views you want to apply these colour changes, so you must make the changes and save them on each saved view, using "Update View" option. This effort can be avoided by setting the colours at the start. One robust way to do this is by using the .

The configuration icon makes zoom controls show/hide.

The button will fit the tree to the current panel size

You can also export the tree as a SVG file via the button

using the lasso tool to draw a polygonal region

Tree Data
Some basic tree settings and interactions
Colour Definition "__colour" option
Nodes & Labels options