# Tree The tree panel creates a visualisation of a Newick file. Multiple basic styles are available, and many details can be configured. See [Tree Data](https://docs.microreact.org/instructions/creating-a-microreact-project/tree-panel-configuration) for Tree data source guidance, including hiding all metadata that lacks a matching tree leaf. ### Basic tree settings & controls {% embed url="" %} Some basic tree settings and interactions {% endembed %} ## 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 ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-593f91908d1a1b9d2cc62510fef6316f984746d5%2Fimage%20\(202\).png?alt=media) ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-39e43b03fa29eca924d7d0c500e270e1c072e195%2Fimage%20\(183\).png?alt=media) ## Tree Controls ### Node, Label and Branch controls ![Nodes & Labels options](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-8c26708e549341c86030cf2a517cd4b449deacfa%2Fimage%20\(190\).png?alt=media) #### 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 * **Colour leaf labels:** they will be the same colour as defined within the menu #### 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 ## Metadata blocks ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-51db9325d7632ec1b2059cff991401d8a1710da8%2Fimage.png?alt=media) 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. ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-85a1c7c9824348200ab81d0c722882822693d64f%2Fimage.png?alt=media) When adding metadata blocks, the blocks to be displayed can be selected from all available columns, and the metadata block characteristics can be changed. 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 [Colour Definition "\_\_colour" option](https://docs.microreact.org/creating-a-microreact-project/metadata-column-types#defining-colour). **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. ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-1db32e2bd4bb38cb20e6d88f55e97d7fdf0fccaf%2Fimage.png?alt=media) ## 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. The configuration icon makes zoom controls show/hide. 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 ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-7cbe39cfbc0759d0f1f9da5545aa89a03d844811%2Fimage.png?alt=media) Right-clicking on this selected parent node will bring up a contextual menu that allows several functions ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-6e6d9dad41fca6abf1df9a9a2b0a5548f880b114%2Fimage.png?alt=media) ### **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. ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-69fb1ee4ad43fac42a6e246cda77ffb04521f8e2%2Fimage.png?alt=media) ### **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 ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-c171ae2c21cf4667673c15639e5767e4928e5be4%2Fimage.png?alt=media) ### Fit in panel The ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-6905c9531f7a6d2f0a0c66c7c6348d41ad16f63e%2FFit%20in%20panel.png?alt=media) button will fit the tree to the current panel size ### 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 You can also export the tree as a SVG file via the ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-805cc9ba28a4c8a414afec0a2903c85445b955c6%2FEdit%20and%20Download.png?alt=media) button ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-f7bf012bd5603b371b428a5f648aa472b583f44a%2Fimage.png?alt=media) ## Filtering Data You can filter the tree data by * clicking on an internal node in the tree or * using the **lasso** tool ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-2e299a69c6ce12a92f1c40907419413a13e6558f%2FLasso.png?alt=media) to draw a polygonal region * Filtering on other panels that are linked to the tree (e.g. selecting via the data-slicer) ![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-312bfedcb079399e6dd439389a32d4953eab2b26%2Fimage.png?alt=media)