https://github.com/tgvaughan/icytree
Tip revision: 3f55f04f5d3cdd67f7d105faf2cdad3594e23812 authored by Tim Vaughan on 15 August 2023, 14:36:03 UTC
Fixed bug relating to "label"-valued styles.
Fixed bug relating to "label"-valued styles.
Tip revision: 3f55f04
index.html
---
---
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="A browser-based phylogenetic tree viewer.">
<title>IcyTree</title>
<!-- Will scale for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- JQuery & JQuery UI -->
<script src="js/libs/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css"></link>
<script src="jquery-ui/jquery-ui.js"></script>
<!-- PapaParse (for CSV parsing) -->
<script src="js/libs/papaparse.js"></script>
<!-- FileSaver -->
<script src="js/libs/FileSaver.js"></script>
<!-- PlotLy -->
<script async src="js/libs/plotly.js"></script>
<!-- JS for parsing and viewing trees -->
<script src="js/tree.js"></script>
<script src="js/treeparsing.js"></script>
<script src="js/treewriting.js"></script>
<script src="js/treelayouts.js"></script>
<script src="js/treedrawing.js"></script>
<script src="js/treeplots.js"></script>
<script src="js/treestats.js"></script>
<link rel="stylesheet" type="text/css" href="css/treedrawing.css"></link>
<!-- App-specific styling and code -->
<script src="js/icytree.js"></script>
<link rel="stylesheet" type="text/css" href="css/icytree.css"></link>
<link rel="shortcut icon" href="images/icytree.ico"></link>
</head>
<body>
<!-- Drop down menu -->
<ul id="menu">
<li><button>File</button>
<ul id="fileMenu">
<li title="Load trees from Newick, Nexus, PhyloXML or NeXML file."
id="fileLoad"><span class="ui-icon ui-icon-folder-open"></span>Load from file...
<span class="ks">l</span></li>
<li title="Open a dialog box where trees can be entered directly in Newick format or any of the other supported formats."
id="fileEnter"><span class="ui-icon ui-icon-pencil"></span>Enter tree directly...
<span class="ks">e</span></li>
<li title="Load a file from a specified URL."
id="fileURLLoad"><span class="ui-icon ui-icon-link"></span>Load from URL...
<span class="ks">u</span></li>
<li>---</li>
<li title="Load metadata from a csv file and attach it to the tree."
id="fileAttachMetadata" class="ui-state-disabled"><span class="ui-icon ui-icon-script"></span>
Attach metadata from CSV
</li>
<li>---</li>
<li title="Export currently-displayed tree."
id="fileExport" class="ui-state-disabled"><span class="ui-icon ui-icon-disk"></span>Export tree as...
<ul>
<li id="fileExportSVG">SVG image</li>
<li id="fileExportPNG">PNG image</li>
<li id="fileExportJPEG">JPEG image</li>
<li>---</li>
<li id="fileExportNewick">Newick file</li>
<li id="fileExportNEXUS">NEXUS file</li>
<li id="fileExportPhyloXML">PhyloXML file</li>
<li id="fileExportNeXML">NeXML file</li>
</ul>
</li>
</ul>
</li>
<li><button>Style</button>
<ul id="styleMenu">
<li title="Alter ordering of child nodes.">Node sorting
<ul id="styleSort">
<li title="Sort nodes in DECREASING order of clade size."><span class="ui-icon ui-icon-check"></span>Sorted (descending)</li>
<li title="Sort nodes in INCREASING order of clade size.">Sorted (ascending)</li>
<li title="Do not sort nodes (order determined by original file).">Unsorted</li>
</ul>
</li>
<li title="Alter tree layout.">Tree layout
<ul id="styleLayout">
<li title="Use time tree layout: heights represent node ages."
id="styleLayoutStandard"><span class="ui-icon ui-icon-check"></span>Standard Time Tree</li>
<li title="Use transmission (time) tree layout: horizontal edges represent individual hosts."
id="styleLayoutTransmission">Transmission Tree</li>
<li title="Use cladogram layout: heights represent node ranks."
id="styleLayoutCladogram">Cladogram</li>
</ul>
<span class="ks">'</span>
</li>
<li>--</li>
<li title="Select attribute used to label leaf nodes.">Tip text
<ul id="styleTipTextTrait">
<li>None</li>
<li>Label<span class="ui-icon ui-icon-check"></span></li>
</ul>
<span class="ks">t</span>
</li>
<li title="Select attribute used to label internal nodes.">Internal node text
<ul id="styleNodeTextTrait">
<li>None<span class="ui-icon ui-icon-check"></span></li>
<li>Label</li>
</ul>
<span class="ks">i</span>
</li>
<li title="Colour edges based on chosen attribute.">Colour edges by
<ul id="styleEdgeColourTrait">
<li>None<span class="ui-icon ui-icon-check"></li>
</ul>
<span class="ks">c</span>
</li>
<li title="Colour nodes based on chosen attribute.">Colour nodes by
<ul id="styleNodeColourTrait">
<li>None<span class="ui-icon ui-icon-check"></li>
</ul>
<span class="ks">k</span>
</li>
<li title="Select (numeric) attribute determining relative width of tree edges.">Relative edge width
<ul id="styleEdgeWidthTrait">
<li>None<span class="ui-icon ui-icon-check"></span></li>
</ul>
<span class="ks">o</span>
</li>
<li title="Explicitly mark nodes having a single child edge." id="styleMarkSingletons">Mark singletons
<span class="ks">m</span>
</li>
<li title="Collapse zero-length edges." id="styleCollapseZeroLengthEdges">
<span class="ui-icon ui-icon-check"></span>Collapse zero-length edges
</li>
<li title="Select attribute containing node height credible interval.">Node height error bars
<ul id="styleNodeBarTrait">
<li>None<span class="ui-icon ui-icon-check"></span></li>
</ul>
<span class="ks">b</span>
</li>
<li>--</li>
<li title="Display or hide recombinant edges."
id="styleDisplayRecomb"><span class="ui-icon ui-icon-check"></span>Display rec. edges
<span class="ks">d</span>
</li>
<li title="Select attribute used to label recombinant edges.">Rec. edge text
<ul id="styleRecombTextTrait">
<li>None<span class="ui-icon ui-icon-check"></span></li>
<li>Label</li>
</ul>
<span class="ks">n</span>
</li>
<li title="Select (numeric) attribute determining relative width of recombinant edges.">Rec. edge width
<ul id="styleRecombWidthTrait">
<li>None<span class="ui-icon ui-icon-check"></span></li>
</ul>
<span class="ks">p</span>
</li>
<li title="Display parents of recombinant edges inline with their non-recombinant descendents."
id="styleInlineRecomb">Inline rec. edges
<span class="ks">w</span>
</li>
<li title="Minimize length of recombinant edges."
id="styleMinRecombLength"><span class="ui-icon ui-icon-check"></span>Rec. length minimize
<span class="ks">f</span>
</li>
<li>--</li>
<li title="Options determining display of horizontal axis.">Axis
<ul id="styleAxis" class="subsub">
<li title="Don't display an axis."><span class="ui-icon ui-icon-check"></span>None</li>
<li title="Display axis for node ages (times before youngest sample).">Age</li>
<li title="Display forward-time axis">Forward time</li>
</ul>
<span class="ks">a</span>
</li>
<li title="Select age or time of most recent sample. Affects numeric values displayed on axis."
id="styleSetAxisOffset">Set axis offset...</li>
<li title="Display legend for edge colours."
id="styleDisplayLegend">Display legend<span class="ks">g</span></li>
<li title="Display node heights on offset log scale." id="styleLogScale">Log scale<span class="ks">s</span></li>
<li>--</li>
<li title="Alter width of lines used to represent tree edges.">Edge width
<ul id="styleEdgeWidth" class="subsub">
<li><span class="ui-icon ui-icon-plus"></span>Increase
<span class="ks">+</span>
</li>
<li><span class="ui-icon ui-icon-minus"></span>Decrease
<span class="ks">-</span>
</li>
</ul>
</li>
<li title="Alter size of font used for node label and legend text.">Font size
<ul id="styleFontSize" class="subsub">
<li><span class="ui-icon ui-icon-plus"></span>Increase
<span class="ks">[</span>
</li>
<li><span class="ui-icon ui-icon-minus"></span>Decrease
<span class="ks">]</span>
</li>
</ul>
</li>
<li title="Limit the numeric precision of node labels.">Label precision limit
<ul id="styleLabelPrec" class="subsub">
<li data-prec="0"><span class="ui-icon ui-icon-check"></span>None</li>
<li data-prec="2">2 sig. figures</li>
<li data-prec="3">3 sig. figures</li>
<li data-prec="4">4 sig. figures</li>
<li data-prec="5">5 sig. figures</li>
</ul>
</li>
<li title="Angle text used for node labels."
id="styleAngleText">Angle node label text<span class="ks">v</span>
</li>
<li title="Use anti-aliased lines for drawing tree edges. (Can make densely-packed tree edges easier to resolve.)"
id="styleAntiAlias">Anti-alias</li>
<li>--</li>
<li title="Apply a saved style.">Apply saved style<span class="ks">{}</span>
<ul id="stylePredefined" class="subsub">
<li>Default Style</li>
</ul>
</li>
<li id="styleSaveStyle" title="Save current style.">Save current style</li>
<li id="styleClearSavedStyles" title="Clear saved styles.">Clear saved styles</li>
</ul>
</li>
<li><button>Search</button>
<ul id="searchMenu">
<li title="Find nodes with specific attribute values."
id="searchNodes">Find nodes...
<span class="ks">/</span>
</li>
<li title="Clear previous search results."
id="searchClear">Clear search results</li>
</ul>
</li>
<li><button>Statistics</button>
<ul id="statsMenu">
<li title="Display lineages-through-time plot for current tree."
id="statsLTT">Lineages-through-time plot...</li>
<li title="Display classic skyline population function estimate from current tree."
id="statsSkyline">Skyline plot...</li>
<li title="Display information and summary statistics for the current tree."
id="statsTree">Tree statistics...</li>
</ul>
</li>
<li><button>Help</button>
<ul id="helpMenu">
<li title="Display full list of keyboard shortcuts."
id="helpShortcuts">Keyboard shortcuts...<span class="ks">?</span></li>
<li title="Open IcyTree manual."
id="helpManual">Online Manual...</li>
<li title="Navigate to manual section listing example tree files for various formats."
id="helpExamples">Example files...</li>
<li title="What is IcyTree?"
id="helpAbout">About IcyTree...</li>
</ul>
</li>
</ul>
</ul>
<!-- Main output element -->
<div id="output"></div>
<!-- Style notification element -->
<div id="notify">
<div></div>
</div>
<!-- Edge Statistics -->
<div id="edgeStats"></div>
<!-- Tree selector -->
<div id="treeSelect">
<div id="treeCounter"></div>
<div id="treeSelectInput" class="setTreeBlurred">
<button id="firstTree" type="button" disabled="disabled"
onclick="currentTreeInc(-1, true);"><<</button>
<button id="prevTree" type="button" disabled="disabled"
onclick="currentTreeInc(-1, false);"><</button>
<input id="setTree" type="text"
onchange="currentTreeChange(this.value);"
onfocus="document.getElementById('treeSelectInput').className='setTreeFocused';"
onblur="document.getElementById('treeSelectInput').className='';"/>
<button id="nextTree" type="button" disabled="disabled"
onclick="currentTreeInc(+1, false);">></button>
<button id="lastTree" type="button" disabled="disabled"
onclick="currentTreeInc(+1, true);">>></button>
</div>
</div>
<!-- Newick input element -->
<div id="directEntry" title="Direct entry">
<textarea placeholder="newick string..."></textarea>
</div>
<!-- Load from URL -->
<div id="loadURL" title="Load file from URL">
<input type="text" id="urlToLoad"
placeholder="URL of tree file"></input>
</div>
<!-- File input element -->
<input id="fileInput" type="file"/>
<!-- Metadata file input element -->
<input id="metadataInput" type="file"/>
<!-- Metadata import dialog -->
<div id="metadataImportDialog" title="Metadata Import">
<div id="metadataImportDialogError" style="font-weight: bold; display: none;">
The file could not be parsed. Please check if the selected file is a valid CSV file. More details
can be found in the browser console.
</div>
<div id="metadataImportDialogLabelSelection" style="display: none;">
<label>
Please select the column that contains the label. <br /><br />
<select>
</select>
</label>
</div>
</div>
<!-- Axis offset dialog-->
<div id="axisOffsetDialog" title="Set axis offset">
<p>The following number will be added to all axis tick values. For age axes, this is the age
of the most recent sample. For time axes, this is the time of the most recent sample.</p>
<input type="text" id="axisOffsetInput" value="0"></input>
</div>
<!-- Style save dialog-->
<div id="styleSaveDialog" title="Save current style" class="dialog">
<p>Choose a name under which to save the current style. (Choosing an existing name will cause that style to be overwritten.)</p>
<input type="text" id="styleSaveNameInput" value="my style"></input>
</div>
<!-- Clear saved styles confirmation dialog -->
<div id="styleClearDialog" title="Confirmation" class="warning dialog">
<img src="images/alert.png"/>
<p>Really clear all existing saved styles?</p>
</div>
<!-- Node search dialog -->
<div id="nodeSearchDialog" title="Search leaf node attributes">
<input type="text" id="searchStringInput"
placeholder="Comma-delimited substrings to search for..."></input>
<br>
<br>
<label for="attribute">Attribute to search</label>
<select name="attribute" id="searchAttribute">
<option selected="selected">Label</option>
</select>
<br>
<input type="checkbox" name="searchWholeAttrib" id="searchWholeAttrib">
<label for="searchWholeAttrib">Whole attribute value must match</label>
<br>
<input type="checkbox" name="searchCaseSensitive" id="searchCaseSensitive">
<label for="searchCaseSensitive">Case sensitive</label>
<br>
<br>
Presentation of search results:
<ul>
<li><input type="radio" name="searchOpt" checked="checked"
value="matchOnly">Highlight matching nodes only</input></li>
<li><input type="radio" name="searchOpt"
value="monophyletic">Include monophyletic ancestors</input></li>
<li><input type="radio" name="searchOpt"
value="ancestors">Include all ancestors</input></li>
</ul>
Annotation key: <input type="text" id="searchAnnotationKey" value="HIGHLIGHT"></input><br/>
</div>
<!-- Statistics dialogs -->
<div id="lttDialog" class="dialog" title="Lineages-through-time plot">
<div id="lttPlotOutput"></div>
</div>
<div id="skylineDialog" class="dialog" title="Skyline plot (EXPERIMENTAL!)">
<div id="skylinePlotOutput"></div>
<label for="epsSpinner">Min. interval size (relative to tree height):</label>
<input id="epsSpinner" name="epsSpinner" value="0.0">
<br>
<input type="checkbox" id="optimizeEpsCheckbox" name="optimizeEpsCheckbox">
<label for="optimizeEpsCheckbox">Find optimal min interval size</label>
<input type="checkbox" id="smoothCheckbox" name="smoothCheckbox">
<label for="smoothCheckbox">Smooth population estimate</label>
</div>
<div id="treeStatsDialog" class="dialog" title="Tree Statistics">
<table>
<tr><th>Statistic</th> <th>Value</th></tr>
<tr><td>Leaf Count</td> <td id="leafCountValue"></td></tr>
<tr><td>Internal Node Count</td> <td id="internalCountValue"></td></tr>
<tr><td>Out-degree 1 Node Count</td> <td id="outDeg1CountValue"></td></tr>
<tr><td>Out-degree 2 Node Count</td> <td id="outDeg2CountValue"></td></tr>
<tr><td>Out-degree >2 Node Count</td> <td id="outDeg2PlusCountValue"></td></tr>
<tr><td>tMRCA</td> <td id="rootHeightValue"></td></tr>
<tr><td>Tree Length</td> <td id="treeLengthValue"></td></tr>
<tr><td>Cherry Count</td> <td id="cherryCountValue"></td></tr>
<tr><td>Colless's Imbalance</td> <td id="collessImbalanceValue"></td></tr>
</table>
</div>
<!-- Keyboard shortcut help -->
<div id="shortcutHelp" class="dialog" title="Keyboard shortcuts">
<table>
<tr><th>Key</th> <th>Action</th></tr>
<tr><td>e</td> <td>Enter trees directly</td></tr>
<tr><td>l</td> <td>Load trees from file</td></tr>
<tr><td>r</td> <td>Reload current file</td></tr>
<tr><td>u</td> <td>Load trees from URL</td></tr>
<tr><td>' "</td> <td>Cycle tree layout</td></tr>
<tr><td>t T</td> <td>Cycle tip labels</td></tr>
<tr><td>i I</td> <td>Cycle internal node labels</td></tr>
<tr><td>n N</td> <td>Cycle recomb. edge labels</td></tr>
<tr><td>c C</td> <td>Cycle edge colour trait</td></tr>
<tr><td>k K</td> <td>Cycle node colour trait</td></tr>
<tr><td>b B</td> <td>Cycle node bar trait</td></tr>
<tr><td>o O</td> <td>Cycle edge opacity trait</td></tr>
<tr><td>p P</td> <td>Cycle recomb. edge opacity trait</td></tr>
<tr><td>m</td> <td>Toggle marking of internal nodes</td></tr>
<tr><td>d</td> <td>Toggle display of recombinant edges</td></tr>
<tr><td>w</td> <td>Toggle inline recombinant nodes </td></tr>
<tr><td>f</td> <td>Toggle minimization of recombinant edge lengths</td></tr>
<tr><td>a A</td> <td>Cycle axis display</td></tr>
<tr><td>g</td> <td>Toggle legend display</td></tr>
<tr><td>s</td> <td>Toggle log scale</td></tr>
<tr><td>z</td> <td>Reset zoom</td></tr>
<tr><td>, .</td> <td>Move to next or previous tree</td></tr>
<tr><td>< ></td> <td>Fast-forward or backward through trees</td></tr>
<tr><td>+ -</td> <td>Increase/decrease edge width</td></tr>
<tr><td>[ ]</td> <td>Increase/decrease font size</td></tr>
<tr><td>{ }</td> <td>Cycle through predefined styles</td></tr>
<tr><td>/</td> <td>Find nodes</td></tr>
<tr><td>?</td> <td>Keyboard shortcut help</td></tr>
</table>
</div>
<!-- About box -->
<div id="about" class="dialog" title="About IcyTree">
<img src="images/icytree.png"/>
<p>This is a browser-based phylogenetic tree viewer. It is
intended for rapid visualisation of phylogenetic tree files such as
those produced by
<a target="new" href="http://beast.bio.ed.ac.uk/">BEAST</a>,
<a target="new" href="http://beast2.org">BEAST 2</a> and
<a target="new" href="http://nbisweden.github.io/MrBayes/index.html">MrBayes</a>.
It can also render phylogenetic networks provided in
<a target="new" href="http://dx.doi.org/10.1186/1471-2105-9-532">extended Newick</a> format.</p>
<p>IcyTree is compatible with <i>current</i> versions of Mozilla
Firefox and Google Chrome. <b>Your mileage may vary with other browsers.</b></p>
<p>IcyTree is written and maintained by
<a target="new" href="http://github.com/tgvaughan">Tim Vaughan</a>
and is licensed under version 3 of the GNU
<a target="new" href="http://www.gnu.org/licenses/gpl-3.0.html">General Public License</a>
(GPL). Source is available on
<a target="new" href="https://github.com/tgvaughan/icytree">GitHub</a>.
Please feel free to open an issue on the project page if you find a
bug or would like to request a feature.</p>
<p>If you use IcyTree to produce figures for an academic
publication, please cite the following article:</p>
<p>Vaughan, T. G., <i>IcyTree: Rapid browser-based visualization
for phlogenetic trees and networks.</i>
Bioinformatics 2017.
DOI: <a target="new" href="http://dx.doi.org/10.1093/bioinformatics/btx155">10.1093/bioinformatics/btx155</a></p>
</div>
<!-- Browser warning -->
<div class="warning dialog" id="warning" title="Warning">
<img src="images/alert.png"/>
<p>This browser does not support all of the features IcyTree
requires. While we are working to improve cross-browser
support, there are certain HTML5-related things that are
still fundamentally impossible on some platforms.</p>
<p>Currently, the only way to guarantee not seeing this message
is to use a recent version of Google Chrome or Mozilla
Firefox. (Safari 6 <i>should</i> be okay as well.)</p>
</div>
<!-- Firefox warning -->
<div class="warning dialog" id="FFwarning" title="Warning">
<img src="images/alert.png"/>
<p>The latest version of Firefox introduces a change in the
JavaScript API that breaks IcyTree's ability to reload tree
files. There is a
<a target="new" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1260606">bug report</a>
for this, so hopefully this will be remedied in a future version.</p>
<p>In the meantime, if one-key file reloading is important for you,
you might want to consider using IcyTree via an alternative browser
(e.g. Chrome).</p>
</div>
<!-- Manual -->
<div class="dialog" id="manual" title="Online Manual" tabindex="-1">
{% capture x %}{% include manual.md %}{% endcapture %}
{{x | markdownify}}
</div>
</body>
</html>
