Allow a callback function to be passed to the tree constructor, so that nodes can be annotated with things like size and other attributes before the first pass through the layout algorithm.

This line looks a bit strange since we're returning an assignment:
https://github.com/veg/phylotree.js/blob/master/phylotree.js#L1740

Can we verify that this line is doing what we expect it to do?

Hi
I was wondering if there is a way to modify the context menu shown when clicking on nodes/edges.
Currently I managed doing it when using some naive d3 manipulation:
d3.select("#d3_layout_phylotree_context_menu").append('li').text('test').attr('id','testid')
However, in this way every time the menu is hidden the additions disappear as well and I need to re apply them every time the menu becomes available.

Help will be much appreciated.
Best
Tal

Once turned on, there is no turning off the Animation.

I wanted to display internal labels (just like #56), so I wrote a custom node styler. This works fine for internal nodes anywhere in the phylogeny except at the root, where the node is always relabeled "root" when loading from Newick. I could come up with a workaround at my end, but I wondered if it might be relatively easy to fix in Phylotree.js by using some other method to flag the root node. I might be able to spend a bit of time working on that bug for work and sending you a pull request if that might be helpful.

Thank you for writing just a great library!

Good afternoon! After modifying the style to make the clades invisible:
.clade {
fill :white;
stroke :white;
}
I'm still left with a huge empty space (after collapsing 100 nodes at the beggining of the tree), how can I control the space/size of the clades when collapsing?

Thanks again!

Got the "g attribute transform error" from the console and it seems to be the map polyfill issue where the translate coordinates was miscalculated for the initial state.

the issue can be reproduced from the official demo.

I think I found a fix and will send in a PR after confirm it's working.

Dear @spond,

I would like to easily export the generated tree in svg or png. How could i do that since i am relatively new in javascript.

Thanks in advance

Hi @sshank,

It would be useful to have a semi-colon as the trailing character for tree export. Many programs require a semi-colon to be there for proper parsing as part of canonical newick format.

-Stephanie

The function

tree_object.align_tips();

sometimes sets the opacity of the branch-tracer paths to 0.

This should never be the case.

Hi,
I have a function that is called when I need some data to be drawn on top of the labels.
At the very beginning of the function, I call tree.align_tips() as I want to draw metadata only on the extended tree.
Once the data is drawn, after calling tree.layout() I want to update the button ".phylotree-align-toggler") so I call update_controls() which is defined as follows:
function update_controls () { // $("[data-mode='" + (tree.radial() ? 'radial' : 'linear') + "']").click(); $("[data-align='" + (tree.align_tips () ? 'right' : 'left') + "']").click(); }
This should activate the "align" button switching it to tips aligned. It does that (so i can see that the data-align = "right" button is selected ) but then the branch-tracers are not drawn (more specifically they are drawn but the opacity is set to 0). this doesn't happen if i remove the update_controls() function.
Exactly the same behaviour is observed if I add $("[data-align='" + (tree.align_tips () ? 'right' : 'left') + "']").click(); after the call of the function that draws the metadata.

This is how I see the tree with:

Is there a reason for that ?

I wonder why spaces are being removed from node names. It appears to be done on purpose (lines 2964, 3022-3024) but I don't understand the reason and there are no comment explaining why.
I have trees with node names mixing spaces and underscores and they don't display well with spaces being removed. Would it be a problem to keep spaces in node labels?

All the <text ..> elements should have a class (i.e., 'taxon_label') so that they can be styled using CSS.

get_newick defaults to returning only terminal labels. I think it would be useful to have a second method, get_newick_with_internal_labels, that would default to including internal labels as well.

It would be useful to be able to 'rotate' a node switching the order of the child nodes. This could be part of the API but also an optional menu item for a node. There could be two variants: one just flips the node itself, the other flips all the descendant nodes (thus reflecting the whole subtree).

Another option would be to sort the tree order by number of tips (perhaps providing a sort compare function).

First of all, I would like thank you guys for contributing to this project.

When I tried to feed Phylotree.js with the following input (FastTree output) using the template http://bl.ocks.org/spond/f6b51aa6f34561f7006f, I could not get a desired tree visualization ( issues with scaling?).
.nwk
(BRAOA12048:0.00054,BRANA02666:0.00991,((BRAJU21777:0.03087,(ARATH07668:0.01134,ARALY20685:0.03085)1.000:0.13667)0.926:0.02726,(BRANA29265:0.00325,(BRAJU98226:0.00055,BRARP02331:0.00055)0.882:0.00661)0.956:0.01496)0.809:0.00513);

As there is no error messages pop up from the browser console it is very different for me to debug it.

While I copy it to Trex Newick Viewer, it works fine.

Could you help me? I am looking forward to hearing from you.

Kind regards,

Jiao

I'm trying to package a local copy of this repo so that I can start doing some customization, but I've been unable to do so with yarn run develop. First, installing yarn is broken in Ubuntu 18.04 (similar to this issue), so I did a local install of release 1.11. Next, running this command yielded the following:

yarn run v1.11.1
$ concurrently "webpack --watch --mode=development" "http-server"
/bin/sh: 1: concurrently: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Is there a specific version of yarn I should be using, and can you please list any other dependencies for development?

It would be helpful to visually prune trees. Essentially, implement ape's drop.tip() functionality.

I am using phylotree.js on my website and it has been working without any issues till 4-5 days ago. The tree wont display on my end even though it works on the demo website.
Here is a link to the website - http://compgen.cshl.edu/phastweb/phyloexample.php

Hello,

Currently, the color chart feature is in a separate svg. Please merge both of these items into the same svg, or find a convenient method to export both svgs into one png.

Kind Regards,
Steven

Dear @spond,

The example here (http://bl.ocks.org/spond/dbc459acfaa6f134c67d) is pretty useful. Is there a way to not only color the leaves but the subtres corresponding to the clusters.

Thanks

Getting the following error: ReferenceError: d3_phylotree_newick_parser is not defined when trying to view any tree. this screenshot is from one the examples on the live demo interface.

The large tree example:

http://phylotree.hyphy.org/examples/large-tree/

currently syncs certain actions (such as selecting branches) between the "detailed" tree and "guide" tree. Other behaviors, such as collapsing/hiding nodes are not yet supported.

In the ideal case, a flag such as large: True could be provided to options in any tree, and a tree like the large tree would render, with all available actions synced between the detailed tree and guide tree.

Add support for parsing and writing various PhyloXML formats.

Dear @stephenshank,

We should also implement a web app and a standalone command line tool for performing the Slatkin Maddison test for compartmentalization with visual feedback, such as labeling the branches where transitions occur, and coloring branches based on the results of the permutation test.

All the components are already there, like the parsimony state reconstruction, so the test should be easy to implement.

The standalone (node) version should request branch partitioning regular expression from the command line. You can run through the S-M implementation in HyPhy to get a sense of what the result should be.

Best,
Sergei

I'm using your great library In my app, and i need to perform changes on the tree, is there way getting the tree's data after the changes made? (i.e. "tree" method)

Thanks,
Liza

Dear @spond @stevenweaver, would it be possible to put phylotree.js on npm? I can do it if you agree and don't have time.

The methods spacing_x and spacing_y do not make an impact on visual branch expansion or contraction of the phylotree.

To reproduce :

• Visit http://veg.github.io/hyphy-vision/absrel/
• Click on the button that is fashioned with a fa-arrows-h emblem
• Notice no expansion

This is a great project. Thanks!

Just a question: Do you have plans / thoughts about moving to D3 v4 ?
Seems that that D3 v4 introduced some breaking changes.

Dear @spond,

Is there a way to auto resize the tree according to the size of the container?
Also the line representing the distance between nodes becomes too big with 'fit-to-size' option.

Thanks for your help

The escape_string(nn) function escapes single quotes by doubling them:

Unfortunately, String.replace with a string first argument only replaces the first occurrence of the provided string. This could be fixed by using regular expressions instead, e.g. nn.replace(/\'/g, "''").

Here's a JSFiddle showing what I mean: https://jsfiddle.net/eywraw8t/422467/

Continually tapping expand and compress can be a bit cumbersome. A slider seems to be more appropriate since the value is continuous and does not require accuracy.

A beautiful piece of work!
We would like to customize your structure.
For starters, we'll update your menus based on our customization.
But we also would like to load Newick strings from external files.
Do you have a version that does so?
We've not been able to successfully process an external Newick file modifying this loading structure:

$("#example_GVZ").on ("click", function (e) {
    default_tree_settings ();

    function GVZ_colorizer (element, data) {
        element.style ('stroke-width', 4)
               .style ('stroke-linejoin', 'round')
               .style ('stroke-linecap', 'round');
    }
    var GVZ = 

As shown here: https://github.com/veg/phylotree.js/blob/master/index.html

If a modification is difficult, we'll follow your structure as-is and load the specific strings we choose to feature.

/jay gray

Add option to display internal node labels.

The root node has class 'internal-node'. It would be useful if it could also have the class 'root-node' so that it can be styled differently through CSS.

The calculations for the size of the svg element are off, making the element too large. I suspect that tree.pad_width is incorrectly computed for radial trees by somehow using measurements from the non-radial layout.

In FLEA, this problem pushes the entire layout right off the page.

Here is a picture, showing the svg element in blue:

Select the inverse branches, helpful for test/ref for example under RELAX.

Currently, when I collapse a subtree, it is difficult to know what is inside that tree quickly without re-inflating. It would be helpful if there was at least some sort of tooltip to inform the user (or person/individual for those sensitive to the word user) of the branches that live within.

On page https://bl.ocks.org/spond clicking on "Hello World" example opens a page without any tree display, with console message ReferenceError: require is not defined from phyloTree.js line 1

Tried on Firefox ESR 52.7.3 and on Chrome 66.0.3359.139 (Official Build) (64-bit)

If there are no items left in a menu (because rooting and hiding have been disabled) then it would be better not to show a menu than an empty one.

Dear @stephenshank,

We should prettify this code example https://bl.ocks.org/spond/raw/c827d8c2f68cf1daa762/ which computes root-to-tip linear regression on fixed trees. Would be a useful standalone app, especially since you can also interactively see what changing the root does.

Brittany would be a good point person to ask for feedback.

Best,
Sergei

Leaf nodes with large copy numbers get huge bubbles. I have attempted a fix in this commit: kemaleren/phylotree.js@947d5cf. Not submitting a pull request yet, because changing relative_node_span changes the extent. For some reason, it is making the trees much wider than before.

Here is an example of the problem. The tree has a node with a copy number of 7,757.

And the same tree in radial layout:

Hi
I was wondering if there is a callback option for tree.layout() or tree.update() ?
I am trying to add some function that use the tree's nodes coordinates so I have to make sure it's already drawn.
thank you
Tal

Hi,
Could you provide examples on how to:

• color branches according to clustering. A clustering is usually in the form of a list of indices which associates to each data a cluster id.
• add bootstrap values to internal node; convenient to easily see whether or not a specific subtree is statistically significant.

Hi,
we've been working with phylotree for a while now and ran into the need to display metadata in addition to the phylogram. An initial hack got us 80% towards that goal (see below) but it is still very buggy and does not work on the circular tree at all. I was wondering if such a feature, or an interface/plugin to customize any sort of data overlay would a) be of interest to others and b) could be added to the code base. We are unfortunately not savvy enough to just fork and add the feature ourselves.

Example of our current hack, showing 5 metadata points overlaid with the sample in the tree. Other ideas like colored symbols or even pie charts per leaf would be great to have in the future.

Thanks,
Patrick

Hello
I would like to display a node label that contains a text with several colors/styles.
Is it possible to do it?
thank you

If an entire subtree is selected, we should provide the option to export the subtree's newick string. It would be helpful when trying to report on specific parts of the phylogeny.

The node elements (<g ...>) representing leaf nodes could have an id which matches their taxon label to allow for selecting by CSS or DOM. I guess this would need to be a slug string.