Pre-color nodes/branches possibilities

[smoretti]

Hi

I wonder if this is possible to pre-color some nodes/branches at load time.
I use the NHX format for this, and to store other kind of information, but NHX tags look to be ignored by phylotree.js

[spond]

Dear @smoretti,

Should definitely be possible. Can you paste in an example tree? phylotree records some Newick attributes, but they are not acted on by default.

Best,
Sergei

[smoretti]

Here is an example file
https://selectome.org/euteleostomi/family/ENSGT00940000158077.1.Euteleostomi.nhx

[spond]

Dear @smoretti,

Thanks! I will write a simple example for you on how to extract NHX style annotations in a bit. Which version of phylotree are you working with?

Best,
Sergei

[smoretti]

I did some tests with the version available at
http://phylotree.hyphy.org/index.html

[spond]

Dear @smoretti,

Take a look at https://github.com/veg/phylotree.js/tree/master/examples/nhx
This example parses the attributes, extracts PVALs and colors branches based on those p-values.

Best,
Sergei

[smoretti]

Thanks it looks already nice and promising.
For the Selectome web site we plan to change our old static image tree viewer for a tool more interactive like phylotree.js
We need just basic javascript functions in the tool to highlight some branches and nodes (independently), based on NHX tag content; and also a way to show information stored in NHX tags like taxonomy, bootstrap values or selection p-values.

Note also that I was not able to run locally your NHX example.

[spond]

Dear @smoretti,

See Issue #253 for pop-over functionality from NHX. You can color nodes using a similar callback on nodes like the example uses for edges.

Did you try following README instructions to install the local version and then run a local web server usingyarn develop?

Best,
Sergei

[smoretti]

I did not manage to run it as a local web server.
From the master branch those yarn commands failed

/phylotree.js# yarn develop
00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'develop'

/phylotree.js# yarn run develop
00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'run'

So I linked the phylotree.js file from http://phylotree.hyphy.org/phylotree.js to make it worked locally for the nhx/index.html file.

Anyways we would prefer to include it in our existing web server, without an extra web server.
So do you provide the phylotree.js file by other means?

Also our web site already loads bootstrap-4.5.2, jquery and fontawesome-5.14.0-all. Are they compatible with phylotree.js ?
I know it can be problematic between bootstrap releases.

[spond]

Dear @smoretti,

You don't need to run a separate web-server; you can just include a js and a css, or use require etc (depending on your configuration). I am tagging @stephenshank, because he'll be better positioned to help you out. I don't think you should have issues with those versions of bootstrap and jquery.

What are you currently using for your web app stack?

Best,
Sergei

[stephenshank]

Dear @smoretti,

Thanks for your interest in phylotree. In case it's still of interest, npm run develop should also work in place of yarn develop.

Phylotree is available as an npm package. As such, its source can be found on unpkg; you may download JavaScript and CSS from these URLs, or use them as a CDN as you see fit. Or, if you are using an asset bundler like webpack, it is possible to import/require the necessary JavaScript and CSS as alluded to above.

Version 0.x is slated for deprecation and relies on outdated versions of bootstrap and d3. Version 1.x-alpha supports Bootstrap 4, so I recommend using that. It is still in alpha/pre-release, but several examples have already been ported over. I will work on porting the above example to work on our 1.0.0-alpha branch.

Please let me know you have any further questions, I am happy to help.

Best,
Stephen

[smoretti]

Thanks @spond. Currently we don't use any web app stack, we have our own deployment script.

As phylotree.js and phylotree.css files are available on unpkg everything is fine for us.
We will start to do some tests with version 1.x-alpha asap.
Thanks @stephenshank for porting the NHX example on the 1.0.0-alpha branch.

[smoretti]

I have updated the link for jQuery and bootstrap to reach our local versions and examples/nhx/ from the master branch works with http://phylotree.hyphy.org/phylotree.js.

When I switch to https://unpkg.com/[email protected]/dist/phylotree.min.js it does not work anymore.

Uncaught TypeError: e.line is not a function
    <anonymous> https://unpkg.com/[email protected]/dist/phylotree.min.js:1
    <anonymous> https://unpkg.com/[email protected]/dist/phylotree.min.js:1
    <anonymous> https://unpkg.com/[email protected]/dist/phylotree.min.js:1
phylotree.min.js:1:9789
    <anonymous> https://unpkg.com/[email protected]/dist/phylotree.min.js:1
    <anonymous> https://unpkg.com/[email protected]/dist/phylotree.min.js:1
    <anonymous> https://unpkg.com/[email protected]/dist/phylotree.min.js:1

[spond]

Dear @smoretti,

What version of d3 are you including?

Best,
Sergei

[smoretti]

This is d3.v3.min.js

[spond]

Dear @smoretti,

Version 1.0 α of phylotree uses d3 v5 (see https://github.com/veg/phylotree.js/blob/1.0.0-alpha/package.json); and should work with the current d3 release. I believe the error you are seeing is due to this.

You can also continue using phylotree from the master branch (0.1.10).

Best,
Sergei

[smoretti]

I tried with d3 v5 and v6 but got the same error:

Uncaught TypeError: n is undefined
    <anonymous> https://unpkg.com/[email protected]/dist/phylotree.min.js:1
    <anonymous> https://unpkg.com/[email protected]/dist/phylotree.min.js:1
    <anonymous> https://unpkg.com/[email protected]/dist/phylotree.min.js:1
phylotree.min.js:1:40819

[stephenshank]

Dear @smoretti,

Sorry for the delay. I've tweaked our parser to automatically parse attributes from this format and add them to each node's data attribute. This is displayed for p-values as before here:
https://phylotree-alpha.hyphy.org/examples/selectome/

While this has not been released to NPM/unpkg yet, the bundle can be sourced from here:
https://phylotree-alpha.hyphy.org/dist/phylotree.min.js

The associated pull request is under review, and we should have a release soon. I do not anticipate that additional requests will require tweaks to the core library (but you never know).

Please let me know if you need anything else, I am happy to continue working on this until we arrive at the desired use case.

Best,
Stephen

[smoretti]

Hi @stephenshank
Thanks for this update, I can reproduce locally the display you have.

Maybe I found an issue: When you click on a node and select "All descendant branches" for example.
The branch highlighting looks to be done properly but the browser console returns an error:

Uncaught TypeError: this.edge_styler is not a function
    refresh draw.js:1267
    each d3.v5.min.js:2
    refresh draw.js:1266
    modify_selection menus.js:393
    node_dropdown_menu menus.js:67
    Tt d3.v5.min.js:2
draw.js:1267:15

Don't know if this is important or not.
And when I click on a branch I got the same error.

Also I did some trials with various d3, jquery and bootstrap versions:

• with d3 v6 the menu when clicking on a node does not appear.
• with jQuery v3.5.1 everything looks fine.
• with bootstrap v4.5.2 everything looks fine.
• I have also used the bootstrap js bundle that includes popper and it looks also fine.

All the other css or js sources are the same than yours. I did those tests on Firefox 78.6