etc/jstree/jstree.html

   1 <html>
   2 <head>
   3 <!--[if IE]><script src="excanvas.js"></script><![endif]-->
   4 <title>Jstree</title>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6 <script language="JavaScript" src="knhx.js"></script>
   7 <script type="text/javascript">
   8 function show_example() {  }
   9 function toggle_usage() {
  10         var z = document.getElementById("toggle-usage");
  11         var x = document.getElementById("usage");
  12         if (z.value == "Show Description") {
  13                 x.style.display = "block";
  14                 z.value = "Hide Description";
  15         } else {
  16                 x.style.display = "none";
  17                 z.value = "Show Description";
  18         }
  19 }
  20 </script>
  21 <style type="text/css">
  22 <!--
  23         #canvas { border: 1px solid #000; }
  24         body { font: 12px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; }
  25         textarea { font: 100% "consolas", "Andale Mono", Monaco, Courier, monospace; border: 1px solid; }
  26 --></style>
  27 </head>
  28 <body onLoad="knhx_init('canvas', 'nhx');">
  29 <h1>Editor for Phylogenetic Trees <input type="button" id="toggle-usage"
  30 value="Show Description" onClick="toggle_usage();"></h1>
  31
  32 <!-- Documents begin here -->
  33 <div id="usage" style="display: none">
  34 <p>
  35   Jstree is a web application as well as a Javascript library for
  36   parsing, manipulating and plotting phylogenetic trees in the Newick
  37   format. With Jstree, one can highlight subtrees or leaves, collapse
  38   nodes in viewing, swap children, reroot, delete clades, move nodes,
  39   and export tree images, all via mouse clicks. It is purely implemented
  40   in Javascript and HTML5, and is efficient enough for trees with
  41   hundreds leaves (half a second for a tree with 864 leaves), although
  42   the speed is web browser dependent.
  43 </p>
  44
  45 <h2>Requirements</h2>
  46
  47 <p>This page is known to be fully functional on Safari 5, Opera 10.5,
  48 Firefox 3.6 and Chrome. Image saving is not working in IE 8 due to the
  49 lack of <a href="http://en.wikipedia.org/wiki/Data_URI_scheme">data URI
  50 scheme</a>; editing is not working in iOS 4. Nonetheless, on Windows,
  51 Safari, Opera, Chrome and Firefox are recommended anyway because the
  52 Javascript engine in IE 6/7/8
  53 is <a href="http://blogs.msdn.com/b/ie/archive/2010/03/18/the-new-javascript-engine-in-internet-explorer-9.aspx">far
  54 too slow</a> and because `canvas' is not natively supported by IE 6/7/8.
  55 Rendering <a href="javascript:void(0);" onClick="var
  56 o=document.getElementById('url');
  57 o.value='http://www.treefam.org/cgi-bin/getdata.pl?ac=TF105088&f=clean.nhx';
  58 xss_query(o.value); document.getElementById('nhx').focus();">this tree</a> on IE 8 is 100-fold slower
  59 than on Chrome/Opera/Safari.</p>
  60
  61 <h2>Usage</h2>
  62 <ul>
  63   <li>To view a phylogenetic tree, paste the tree in
  64         the <a href="http://en.wikipedia.org/wiki/Newick_format">Newick
  65         format</a> to the <a href="javascript:void(0);"
  66         onClick="document.getElementById('nhx').focus();">Input area</a> (or
  67         use the <a href="javascript:void(0);"
  68         onClick="document.getElementById('nhx').value=document.getElementById('nhx-ex').value;kn_actions.plot_str();">example</a>),
  69         click the canvas area and select "Draw".
  70   <li>Clicking the white area in the canvas will bring up a popup menu,
  71         allowing you to:
  72         <ul>
  73           <li><b>Draw</b>. Draw/redraw the tree with the current settings:
  74                 <ul>
  75                         <li><b>Width</b>. The width of the image. For the rectangle view, the height of the image will be adjust automatically.
  76                                 For the circular view, the height always equals the width.
  77                         <li><b>Font size</b>. For the circular view, this is the maximum the font size. The actual font size
  78                                 will be adjusted such that there is no overlaps between leaves.
  79                         <li><b>Spacing</b>. The spacing between leaves. Not effective in the circular view.
  80                         <li><b>2nd label</b>. The regular expression to match the secondary label of an internal node. Not effective in the circular view.
  81                         <li><b>Pylogram</b>. Check this to ignore the branch lengths.
  82                         <li><b>Circular</b>. Check this to switch to the circular layout.
  83                 </ul>
  84           <li><b>PNG</b>. Expore the tree picture as a PNG image.
  85           <li><b>Undo/Redo</b>. Undo the most recent editing. Only one undo is allowed.
  86           <li><b>Search</b>. Search for leaves matching a regular expression.
  87         </ul>
  88   <li>Clicking a node will bring up a popup menu, allowing you to
  89         perform the following actions:
  90         <ul>
  91           <li><b>Swap</b>. Click an internal node to swap its children.
  92           <li><b>Ladderize</b>. Click a node to sort the clade such that the
  93                 deeper leaves tend to be placed higher in the plot; in case of a
  94                 tie, a leaf with lexicographically smaller names tends to be
  95                 placed ahead.
  96           <li><b>Collapse</b>. Click a node to collapse/uncollapse all its
  97                 descendants to one node.
  98           <li><b>Reroot</b>. Click a node to put the root in the middle of
  99                 the edge between the node and its parent.
 100           <li><b>Move</b>. Click two nodes to prune the subtree descending
 101                 from the first node and then regraft it to the edge between the
 102                 second node and its parent.
 103           <li><b>Remove</b>. Click a node to delete it and all its
 104                 descendants.
 105           <li><b>Multifurcate</b>. Click a node to multifurcate its parent
 106                 node.
 107           <li><b>Highlight</b>. Click a node to highlight the entire clade.
 108                 When a clade is highlighted, the Newick substring corresponding
 109                 to the clade will be selected in the Input box. Given a huge
 110                 tree, the selected text may not been seen in Opera, Chrom and
 111                 Safari. In this case, one may need to scroll back a little to
 112                 see the selected text.
 113         </ul>
 114 </ul>
 115 <!--
 116 <h2>Technical Notes</h2>
 117 <ul>
 118   <li>Cross-domain Ajax. Due to
 119         the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">same
 120         origin policy</a>, modern web browsers prohibit cross-domain
 121         Ajax. Thus from Javascript, one cannot easily retrieve the content
 122         of a URI to an external domain. The typical solution to this is to
 123         set up a proxy, which requires server side support. Another
 124         solution, as is used in this page, is
 125         to <a href="http://alvinabad.wordpress.com/2009/02/13/feb13/">make
 126         use of the &lt;script&gt; tag</a> and to
 127         use <a href="http://developer.yahoo.com/yql/">YQL</a> as the
 128         gateway. The three functions with the "xss_" prefix
 129         in <a href="knhx.js">knhx.js</a> shows how to implement this.
 130 </ul>
 131 -->
 132 <h2>Download</h2>
 133 <p>
 134   Jstree works without network connections. The tree image is rendered
 135   by the web brower rather than by a remote server. One can
 136   grab <a href="download/jstree.zip">jstree.zip</a>, open the HTML
 137   page and do all the edits locally. This zip file contains five files:
 138 </p>
 139 <ul>
 140   <li><a href="jstree.html">jstree.html</a>, this page, is for all
 141         static contents.
 142   <li><a href="knhx.js">knhx.js</a> is the library for parsing,
 143         plotting and manipulating trees. It also responses to all mouse
 144         interactions.
 145   <li><a href="menu.js">menu.js</a> is a small Javascript library for
 146         simple popup menus, adpated from
 147         the <a href="http://www.dynamicdrive.com/dynamicindex1/popit.htm">Pop-it</a> library.
 148   <li><a href="canvastext.js">canvastext.js</a> is a small library
 149         for drawing texts in Canvas. It is possible to use the
 150         system fonts to drop the dependency to this library. For some
 151         combinations of OS/browser, doing this may help
 152         efficiency. However, old IE does not support canvas texts. The
 153         font in this library also looks more beautiful.
 154   <li><a href="excanvas.js">excanvas.js</a>, from
 155         the <a href="http://code.google.com/p/explorercanvas/">ExplorerCanvas</a>
 156         project, is an emulator of
 157         <a href="http://en.wikipedia.org/wiki/Canvas_element">canvas</a>
 158         for IE. For Chrome/Firefox/Safari/Opera, this library is not
 159         loaded.
 160 </ul>
 161
 162 <h2>License</h2>
 163 <p>This page and the knhx.js JavaScript is written
 164 by <a href="http://lh3lh3.users.sourceforge.net">Heng Li</a>. The page
 165 and the script are released under the MIT/X11 license. Canvastext.js is
 166 acquired <a href="http://jim.studt.net/canvastext/">here</a>. It is also
 167 open source.</p>
 168 <hr color="#cccccc" noShade SIZE="1">
 169 </div>
 170 <!-- Documents end here -->
 171
 172 <p><b>Input:</b> <input type="button" value="Example"
 173 onClick="document.getElementById('nhx').value=document.getElementById('nhx-ex').value;kn_actions.plot_str();">
 174 <input type="button" value="Select" onClick="document.getElementById('nhx').select()">
 175 <input type="button" value="Clear" onClick="document.getElementById('nhx').value=''">
 176 &nbsp;&nbsp;&nbsp;
 177 <input id="url" size="40" value="http://www.treefam.org/cgi-bin/getdata.pl?ac=TF105088&f=clean.nhx">
 178 <input type="button" value="Connect" onClick="xss_query(document.getElementById('url').value);">
 179 &nbsp;&nbsp;&nbsp;
 180 <span id="n_leaves" style="color: gray;"></span>
 181 <span id="runtime" style="color: gray;"></span>
 182 </p>
 183
 184 <textarea id="nhx" rows="22" cols="120" wrap="off" style="overflow-x: hidden;"></textarea>
 185 <hr color="#cccccc" noShade SIZE="1">
 186 <canvas id="canvas" width="800" height="100"></canvas>
 187 <br>
 188 <textarea id="nhx-ex" style="display: none">
 189 ((BGIOSIFCE006902.1_人—类_ORYSA:0.652945[&&NHX:S=ORYSA],(At4g19560.1_ARATH:0.566484[&&NHX:S=ARATH],
 190 (At4g19600.1_ARATH:0.229647[&&NHX:S=ARATH],At5g45190.1_ARATH:0.149569[&&NHX:S=ARATH]
 191 ):0.109796[&&NHX:S=ARATH:SIS=100:D=Y:B=100]):0.283052[&&NHX:S=ARATH:SIS=100:D=Y:B=100]
 192 )XXX:0.930921[&&NHX:S=Magnoliophyta:D=N:B=100],((((((((((((CCNK_HUMAN:0.001351[&&NHX:S=HUMAN],
 193 CCNK_F3_PANTR:0.001588[&&NHX:S=PANTR]):0.009317[&&NHX:S=Homo/Pan/Gorilla_group:D=N:B=100],
 194 CCNK_MACMU:0.01227[&&NHX:S=MACMU]):0.020339[&&NHX:S=Catarrhini:D=N:B=100],
 195 (CCNK_BOVIN:0.049478[&&NHX:S=BOVIN],CCNK_CANFA:0.076883[&&NHX:S=CANFA]
 196 ):0.026972[&&NHX:S=Laurasiatheria:D=N:B=97]):0.01376[&&NHX:S=Eutheria:D=N:B=62],
 197 (Ccnk_MOUSE:0.018183[&&NHX:S=MOUSE],LOC500715_RAT:0.02728[&&NHX:S=RAT]
 198 ):0.054247[&&NHX:S=Murinae:D=N:B=100]):0.087752[&&NHX:S=Eutheria:D=N:B=65],
 199 CCNK_MONDO:0.069457[&&NHX:S=MONDO]):0.053263[&&NHX:S=Theria:D=N:B=83],
 200 NP_001026380_CHICK:0.085022[&&NHX:S=CHICK]):0.059401[&&NHX:S=Amniota:D=N:B=80],
 201 CCNK_XENTR:0.175799[&&NHX:S=XENTR]):0.075577[&&NHX:S=Tetrapoda:D=N:B=97],
 202 ((si_dkey-60a16_F2_BRARE:0.143195[&&NHX:S=BRARE],(CCNK_TETNG:0.142629[&&NHX:S=TETNG],
 203 CCNK_F2_GASAC:0.115749[&&NHX:S=GASAC]):0.130837[&&NHX:S=Percomorpha:D=N:B=100]
 204 ):0.077038[&&NHX:S=Clupeocephala:D=N:B=95],ENSGACT00000017400_GASAC:0.40355[&&NHX:S=GASAC]
 205 ):0.058401[&&NHX:S=Clupeocephala:SIS=33:D=Y:B=13]):0.233994[&&NHX:S=Euteleostomi:D=N:B=18],
 206 (ENSCINT00000017473_CIOIN:0[&&NHX:S=CIOIN],ENSCINT00000026852_CIOIN:0.002343[&&NHX:S=CIOIN]
 207 ):0.481407[&&NHX:S=CIOIN:SIS=100:D=Y:B=100]):0.090892[&&NHX:S=Chordata:D=N:B=98],
 208 ((CycK-RA_DROME:0.17719[&&NHX:S=DROME],dper_GLEANR_8777_caf1_DROPE:0.174477[&&NHX:S=DROPE]
 209 ):0.199588[&&NHX:S=Sophophora:D=N:B=100],(AAEL013531-RA_AEDAE:0.214131[&&NHX:S=AEDAE],
 210 XP_317464_ANOGA:0.204436[&&NHX:S=ANOGA]):0.178396[&&NHX:S=Culicidae:D=N:B=100]
 211 ):0.293157[&&NHX:S=Diptera:D=N:B=100]):0.104694[&&NHX:S=Coelomata:D=N:B=98],
 212 Smp_130980_SCHMA:0.624197[&&NHX:S=SCHMA]):0.041513[&&NHX:S=Bilateria:D=N:B=84],
 213 (WBGene00009650_CAEEL:0.186775[&&NHX:S=CAEEL],(CBG04574_CAEBR:0.21279[&&NHX:S=CAEBR],
 214 cr01.sctg48.wum.67.1_CAERE:0.192611[&&NHX:S=CAERE]):0.076335[&&NHX:S=Caenorhabditis:D=N:B=86]
 215 ):1.18006[&&NHX:S=Caenorhabditis:D=N:B=86]):0.311276[&&NHX:S=Bilateria:D=N:B=84]
 216 )Root[&&NHX:S=Eukaryota:D=N:B=0];
 217 </textarea>
 218
 219 </body>
 220 </html>