add phyxml visualization

osallou · Dec 29, 2011 · b92426b · b92426b
1 parent ab6f09b
commit b92426b
Show file tree

Hide file tree

Showing 7 changed files with 396 additions and 2 deletions.
diff --git a/demo/phy.txt b/demo/phy.txt
@@ -0,0 +1 @@
+((Beta:0.00000001,(Gamma:0.40341231,Alpha:0.33155459)0.000000:0.00002533)0.991000:0.97683828,Epsilon:0.00004249,Delta:0.17492580);
diff --git a/demo/phy.xml b/demo/phy.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phyloxml xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.phyloxml.org http://www.phyloxml.org/1.10/phyloxml.xsd" xmlns="http://www.phyloxml.org">
+<phylogeny rooted="false">
+  <clade>
+    <clade>
+      <name>0.991000</name>
+      <branch_length>0.97683828</branch_length>
+      <clade>
+        <name>Beta</name>
+        <branch_length>1.0E-8</branch_length>
+      </clade>
+      <clade>
+        <name>0.000000</name>
+        <branch_length>2.533E-5</branch_length>
+        <clade>
+          <name>Gamma</name>
+          <branch_length>0.40341231</branch_length>
+        </clade>
+        <clade>
+          <name>Alpha</name>
+          <branch_length>0.33155459</branch_length>
+        </clade>
+      </clade>
+    </clade>
+    <clade>
+      <name>Epsilon</name>
+      <branch_length>4.249E-5</branch_length>
+    </clade>
+    <clade>
+      <name>Delta</name>
+      <branch_length>0.1749258</branch_length>
+    </clade>
+  </clade>
+</phylogeny>
+
+</phyloxml>
diff --git a/index.html b/index.html
@@ -162,7 +162,7 @@
 <div id="zoomout">minus</div>
 -->
 <div class="header">
-GenOUEST Blast XML display
+GenOuest Blast XML display
 </div>
 
 <div class="content">
@@ -216,6 +216,7 @@ <h2>Select Blast XML file</h2>
 <p>If a sequence is selected, a new window is opened to get the details of the alignment and the seqcrawler tool is triggered to
 try to get additional information (genes for example) from our index (Genbank, Bacteria, UniProt/SwissProt). If information is available, it is displayed 
 with the alignment at the corresponding position.</p>
+<p>You can also have a look at our phylogenetic tree visualisation page <a href="phyxml.html">here</a></p>
 <p>This tool is a GenOuest platform product (open source), while still experimental.</p>
 <p>Contact: <a href="mailto:[email protected]">support[at]genouest.org</a></p>
 </div>

diff --git a/js/jsphylosvg-min.js b/js/jsphylosvg-min.js
diff --git a/js/raphael-min.js b/js/raphael-min.js
diff --git a/phyxml.html b/phyxml.html
@@ -0,0 +1,168 @@
+<html>
+<head>
+<script src="js/jquery-1.5.1.min.js"></script>
+<script src="jquery.mousewheel.min.js"></script>
+<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.13.custom.css">  
+<link rel="stylesheet" href="css/dev.css">
+<link rel="stylesheet" href="css/uiblast.css">
+<script src="js/jquery-ui-1.8.13.custom.min.js"></script>
+<script src="jQRangeSlider.js"></script>
+<script src="js/jquery.gchart.min.js"></script>
+<script src="js/jquery.gchart.ext.min.js"></script>
+<script src="js/jquery-geturlparams.js"></script>
+<script src="js/jsphylosvg-min.js"></script>
+<script src="js/raphael-min.js"></script>
+
+</head>
+<body>
+
+
+<script type = "text/javascript">
+
+
+$(document).ready(  function()
+                    {
+	$( "#blasttabs" ).tabs();
+
+        $("#demo").button();
+        $("#demo").click(function(e){
+		xmlUrl = "demo/phy.txt";
+		$('#remotexmlurl').val(xmlUrl);
+		$('#blasttabs').tabs().tabs('select',1);
+                $.ajax( {
+                        type: "GET",
+                        url: xmlUrl,
+                        success: function(xml)
+                        {
+                        drawNewick(xml);
+                        }
+                });
+
+        });
+
+        $("#remotexml").button();
+        $("#remotexml").click(function(e){
+                xmlUrl = "getRemoteXML.php?url="+encodeURI($('#remotexmlurl').val());
+                $('#blasttabs').tabs().tabs('select',1);
+		if(xmlUrl.match(/\.xml$/)) {
+                $.ajax( {
+                        type: "GET",
+                        url: xmlUrl,
+                        success: function(xml)
+                        {
+                        drawNewick(xml);
+                        }
+                });
+		}
+		else {
+                $.ajax( {
+                        type: "GET",
+                        url: xmlUrl,
+                        dataType: "xml",
+                        success: function(xml)
+                        {
+                        drawPhy(xml);
+                        }
+                });
+
+		}
+
+
+        });
+
+        if($.getURLParam("file")) {
+                xmlUrl = "getRemoteXML.php?url="+$.getURLParam("file");
+		$('#remotexmlurl').val(decodeURI($.getURLParam("file")));
+		$('#blasttabs').tabs().tabs('select',1);
+                if(xmlUrl.match(/\.xml$/)) {
+                $.ajax( {
+                        type: "GET",
+                        url: xmlUrl,
+                        success: function(xml)
+                        {
+                        drawNewick(xml);
+                        }
+                });
+                }
+                else {
+                $.ajax( {
+                        type: "GET",
+                        url: xmlUrl,
+                        dataType: "xml",
+                        success: function(xml)
+                        {
+                        drawPhy(xml);
+                        }
+                });
+
+                }
+        }
+
+}); 
+
+function drawNewick(xml) {
+        var phylocanvas = new Smits.PhyloCanvas(
+                 xml,             // Newick or XML string
+                'phyCanvas',    // Div Id where to render
+                1000, 1000,              // Height, Width in pixels
+                'circular'
+                ); 
+
+}
+
+function drawPhy(xml) {
+        var dataObject = {
+                phyloxml: xml,     // If using phyloXML, need to tell us - or else we assume it is Newick
+                fileSource: true    // Need to indicate that it is from a file for us to process it correctly
+        };  
+        var phylocanvas = new Smits.PhyloCanvas(
+                dataObject,             // Newick or XML string
+                'phyCanvas',    // Div Id where to render
+                1000, 1000,              // Height, Width in pixels
+                'circular'
+                ); 
+}
+
+
+</script>
+
+<div class="header">
+GenOuest PhyXML display
+</div>
+
+<div class="content">
+<div id="blasttabs">
+<ul>
+<li><a href="#tab-upload">File selection</a></li>
+<li><a href="#tab-blast">View</a></li>
+<li><a href="#tab-about">About</a></li>
+</ul>
+<div id="tab-upload">
+<h2>Select PhyXML file</h2>
+<div>
+<div>
+<button id="demo">View demo</button>
+</div>
+<div>
+<label for="blasturl">PhyXML file URL</label>
+<input type="text" id="remotexmlurl"></input>
+<button id="remotexml">View remote PhyXML file</button>
+</div>
+</div>
+</div>
+<div id="tab-blast">
+
+<div id="phyCanvas">
+</div>
+</div>
+<div id="tab-about">
+<p>This tool is a GenOuest platform product (open source), while still experimental.</p>
+<p>Phylogenetic trees must be in format Newick or PhyXML. If file name ends with <b>.xml</b>, then format PhyXML is used</p>
+<p>Display is managed via Javascript library <a href="http://www.jsphylosvg.com/">jsPhyloSVG</a></p>
+<p>Contact: <a href="mailto:[email protected]">support[at]genouest.org</a></p>
+</div>
+</div> <!-- blasttabs -->
+</div> <!-- content -->
+</body>
+</html>
+
diff --git a/sequence.html b/sequence.html
@@ -70,7 +70,7 @@
 <div id="zoomout">minus</div>
 -->
 <div class="header">
-GenOUEST Blast XML display
+GenOuest Blast XML display
 </div>
 
 <div class="content">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		((Beta:0.00000001,(Gamma:0.40341231,Alpha:0.33155459)0.000000:0.00002533)0.991000:0.97683828,Epsilon:0.00004249,Delta:0.17492580);