Adding the reference to the paper, and updating the output to show the cytoscape.js network

2 files changed, 40 insertions, 4 deletions

diff --git a/wqflask/wqflask/templates/ctl_results.html b/wqflask/wqflask/templates/ctl_results.html
index 00ccecb6..969ca18a 100644
--- a/wqflask/wqflask/templates/ctl_results.html
+++ b/wqflask/wqflask/templates/ctl_results.html
@@ -1,17 +1,30 @@
 {% extends "base.html" %}
+{% block css %}
+    <link rel="stylesheet" type="text/css" href="/static/new/css/network_graph.css" />
+    <link rel="stylesheet" type="text/css" href="/static/packages/cytoscape/css/cytoscape.js-panzoom.css" />
+    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
+    <style>
+        /* The Cytoscape Web container must have its dimensions set. */
+        html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
+        #cytoscapeweb { width: 70%; height: 70%; }
+    </style>
+{% endblock %}
+
 {% block title %}CTL results{% endblock %}
 
 {% block content %} <!-- Start of body -->
 <div class="container">
   <h1>CTL Results</h1>
   {{(request.form['trait_list'].split(',')|length)}} phenotypes as input<br>
-  <h3>Network Figure</h3>
+
+  <!--
   <a href="/tmp/{{ results['imgurl1'] }}">
       <img alt="Embedded Image" src="data:image/png;base64,
       {% for elem in results['imgdata1'] -%}
       {% print("%c"|format(elem)) %}
       {%- endfor %}
-      " /></a>
+      " /></a> -->
+  
   <h3>CTL/QTL Plots for individual traits</h3>
   {% for r in range(2, (request.form['trait_list'].split(',')|length +1)) %}
   <a href="/tmp/{{ results['imgurl' + r|string] }}">
@@ -39,9 +52,26 @@
     </tr>
   {% endfor %}
   </table>
+  <h3>Network Figure</h3>
+  <div id="cytoscapeweb" class="col-xs-9" style="min-height:700px !important;"></div>
+</div>
+{% endblock %}
 
+{% block js %}
 
+    <script>
+        elements_list = {{ elements | safe }}
+    </script>
 
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.js"></script>
+    <script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/cytoscape/js/min/cytoscape.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/cytoscape/js/min/AC_OETags.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/cytoscape/js/min/json2.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/cytoscape/js/src/cytoscape-panzoom.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/cytoscape/js/src/cytoscape-qtip.js"></script>
 
-</div>
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/ctl_graph.js"></script>
 {% endblock %}
+
diff --git a/wqflask/wqflask/templates/ctl_setup.html b/wqflask/wqflask/templates/ctl_setup.html
index a05379a8..992494dd 100644
--- a/wqflask/wqflask/templates/ctl_setup.html
+++ b/wqflask/wqflask/templates/ctl_setup.html
@@ -11,7 +11,13 @@
     Please make sure you select enough traits to perform CTL. Your collection needs to contain at least 2 different traits. You provided {{request.form['trait_list'].split(',')|length}} traits as input.
   </div>
   {% else %}
-  <h1>CTL analysis parameters</h1>
+  <h1>CTL analysis</h1>
+  CTL analysis is published as open source software, if you are using this method in your publications, please cite:<br><br>
+  Arends D, Li Y, Brockmann GA, Jansen RC, Williams RW, Prins P<br>
+  Correlation trait locus (CTL) mapping: Phenotype network inference subject to genotype.<br>
+  The Journal of Open Source Software (2016)<br>
+  <a href="http://joss.theoj.org/papers/10.21105/joss.00087">http://joss.theoj.org/papers/10.21105/joss.00087</a>
+  <br><br>
   {{(request.form['trait_list'].split(',')|length)}} traits as input
 
   <form action="/ctl_results" method="post" class="form-horizontal">