Provide a minimal working example with npm

Biosphakus commented 2 years ago

I try to use phylotree.js in an npm environment trying to render newick files. Unfortunately, I can't get it to work and the documentation of the project seems to be somewhat broken. In particular, there seems to be no Hello World example.

Example here has a broken link to API.md (which I found here)
No minimal example for npm is provided. The rather complex example here is not using npm.
Older versions of the repository link to non existing sites, e. g. this or that one.

I have found a simple example in the GitHub project. It is still not working for me. My setup looks like this:

index.html

<body>
<div class="testBox" id="tree_container"></div>
 <script src="script.js"></script>
</body>

script.js

import { phylotree } from "phylotree";
import "phylotree/dist/phylotree.css";
var example_tree = "(((EELA:0.150276,CONGERA:0.213019):0.230956,(EELB:0.263487,CONGERB:0.202633):0.246917):0.094785,((CAVEFISH:0.451027,(GOLDFISH:0.340495,ZEBRAFISH:0.390163):0.220565):0.067778,((((((NSAM:0.008113,NARG:0.014065):0.052991,SPUN:0.061003,(SMIC:0.027806,SDIA:0.015298,SXAN:0.046873):0.046977):0.009822,(NAUR:0.081298,(SSPI:0.023876,STIE:0.013652):0.058179):0.091775):0.073346,(MVIO:0.012271,MBER:0.039798):0.178835):0.147992,((BFNKILLIFISH:0.317455,(ONIL:0.029217,XCAU:0.084388):0.201166):0.055908,THORNYHEAD:0.252481):0.061905):0.157214,LAMPFISH:0.717196,((SCABBARDA:0.189684,SCABBARDB:0.362015):0.282263,((VIPERFISH:0.318217,BLACKDRAGON:0.109912):0.123642,LOOSEJAW:0.397100):0.287152):0.140663):0.206729):0.222485,(COELACANTH:0.558103,((CLAWEDFROG:0.441842,SALAMANDER:0.299607):0.135307,((CHAMELEON:0.771665,((PIGEON:0.150909,CHICKEN:0.172733):0.082163,ZEBRAFINCH:0.099172):0.272338):0.014055,((BOVINE:0.167569,DOLPHIN:0.157450):0.104783,ELEPHANT:0.166557):0.367205):0.050892):0.114731):0.295021)"
// tree from Yokoyama et al http://ncbi.nlm.nih.gov/pubmed/18768804 (taken from the example in the link above)
var tree = new phylotree(example_tree);
var rendered_tree = tree.render({
                  container: "#tree_container",
                  'draw-size-bubbles' : false,
                  'left-right-spacing' : 'fixed-step'
                });
console.log("tree", tree);
console.log("rendered", rendered_tree);

The rendering seems to be successful because both the tree and the rendered_tree objects look good in the console (no errors). However, there is nothing to see in the treeContainer div. Probably I am misunderstanding how this works. I would be grateful if you could help me and maybe provide some minimal example in the docs about this.

Biosphakus commented 2 years ago

I solved it. Turns out the SVG built from the Newick had not been appended to the div before. Works when using:

index.html

<body>
<div class="testBox""></div>
 <script src="script.js"></script>
</body>

script.js

import { phylotree } from "phylotree";
import "phylotree/dist/phylotree.css";
var example_tree = "(((EELA:0.150276,CONGERA:0.213019):0.230956,(EELB:0.263487,CONGERB:0.202633):0.246917):0.094785,((CAVEFISH:0.451027,(GOLDFISH:0.340495,ZEBRAFISH:0.390163):0.220565):0.067778,((((((NSAM:0.008113,NARG:0.014065):0.052991,SPUN:0.061003,(SMIC:0.027806,SDIA:0.015298,SXAN:0.046873):0.046977):0.009822,(NAUR:0.081298,(SSPI:0.023876,STIE:0.013652):0.058179):0.091775):0.073346,(MVIO:0.012271,MBER:0.039798):0.178835):0.147992,((BFNKILLIFISH:0.317455,(ONIL:0.029217,XCAU:0.084388):0.201166):0.055908,THORNYHEAD:0.252481):0.061905):0.157214,LAMPFISH:0.717196,((SCABBARDA:0.189684,SCABBARDB:0.362015):0.282263,((VIPERFISH:0.318217,BLACKDRAGON:0.109912):0.123642,LOOSEJAW:0.397100):0.287152):0.140663):0.206729):0.222485,(COELACANTH:0.558103,((CLAWEDFROG:0.441842,SALAMANDER:0.299607):0.135307,((CHAMELEON:0.771665,((PIGEON:0.150909,CHICKEN:0.172733):0.082163,ZEBRAFINCH:0.099172):0.272338):0.014055,((BOVINE:0.167569,DOLPHIN:0.157450):0.104783,ELEPHANT:0.166557):0.367205):0.050892):0.114731):0.295021)"
// tree from Yokoyama et al http://ncbi.nlm.nih.gov/pubmed/18768804 (taken from the example in the link of the first post)
var tree = new phylotree(example_tree);
var rendered_tree = tree.render({
                  container: "#tree_container"
                });
$(".testBox").append(rendered_tree.show());

The container with the svg is then appended to the div box. Looks like this:

SVG from rendered tree

<div id="tree_container"> 
<svg width="379.2" height="569"> 
<defs> 
</defs> 
<g class="phylotree-container" transform="translate (12,37) "> 
<!-- 
    ... and so on ...
 -->
</g> 
</svg> 
</div>

Maybe this helps someone having the same issue. Still, I think this should be documented more transparently.

wrystr commented 1 year ago

Thanks @Biosphakus this has saved me from headache. The example on index.html helps too but I wish there is a more comprehensive documentation on how to render the tree.

This is what I did (without jQuery)

  import { phylotree } from "phylotree"
  import "phylotree/dist/phylotree.css"

  let tree = new phylotree(nwk)

  tree.render({
    // Add your options here.
  })

  document.querySelector("#tree_container").appendChild(tree.display.show())

veg / phylotree.js

Provide a minimal working example with npm #395