aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
authorzsloan2021-08-04 21:09:18 +0000
committerzsloan2021-08-26 19:06:26 +0000
commitdc193bf790573fe4f27c255129ec0799c6deb3f4 (patch)
tree45cc6b89395e6dbfc7dec02c8e7a18e9ecd5d57b /wqflask
parent11dd6e34a3f58a83bf057cfe3d865d4da0047dd2 (diff)
downloadgenenetwork2-dc193bf790573fe4f27c255129ec0799c6deb3f4.tar.gz
Changed the pair-scan template to work with the R/qtl pair-scan results and d3panels figure; still need to add table and permutation results
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/templates/pair_scan_results.html122
1 files changed, 67 insertions, 55 deletions
diff --git a/wqflask/wqflask/templates/pair_scan_results.html b/wqflask/wqflask/templates/pair_scan_results.html
index fb825b90..5e0483c5 100644
--- a/wqflask/wqflask/templates/pair_scan_results.html
+++ b/wqflask/wqflask/templates/pair_scan_results.html
@@ -1,70 +1,82 @@
{% extends "base.html" %}
{% block title %}Pair Scan{% endblock %}
{% block css %}
- <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
- <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='d3-tip/d3-tip.css') }}" />
- <link rel="stylesheet" type="text/css" href="/static/new/css/panelutil.css" />
+<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
+<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='d3-tip/d3-tip.css') }}" />
+<link rel="stylesheet" type="text/css" href="/static/new/css/pair_scan.css" />
+<link rel="stylesheet" type="text/css" href="/static/new/css/d3panels.css" />
{% endblock %}
{% block content %} <!-- Start of body -->
- {{ header("Mapping",
- '{}: {}'.format(this_trait.name, this_trait.description_fmt)) }}
+{{ header("Mapping",
+ '{}: {}'.format(this_trait.name, this_trait.description_fmt)) }}
- <div class="container">
- <div>
- <h2>
- Pair Scan
- </h2>
- </div>
- <div id="chart_container">
- <div class="pair_scan_figure" id="pair_scan_figure">
- <a href="/tmp/{{ pair_scan_filename }}">
- <img alt="Embedded Image" src="data:image/png;base64,
- {% for elem in pair_scan_array -%}
- {% print("%c"|format(elem)) %}
- {%- endfor %}
- " /></a>
- </div>
- </div>
- <div>
- <h2>
- Results
- </h2>
- <table cellpadding="0" cellspacing="0" border="0" id="pair_scan_results" class="table table-hover table-striped table-bordered">
- <thead>
- <tr>
- <td>Index</td>
- <td>Locus</td>
- <td>Chr 1</td>
- <td>Mb</td>
- <td>Chr 2</td>
- </tr>
- </thead>
- <tbody>
- {% for marker in trimmed_markers %}
- <tr>
- <td>{{loop.index}}</td>
- <td>{{marker.name}}</td>
- <td>{{marker.chr1}}</td>
- <td>{{marker.Mb}}</td>
- <td>{{marker.chr2}}</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- </div>
+<div id="main_div" class="container">
+ <div>
+ <h2>
+ Pair Scan
+ </h2>
</div>
+ <div class="qtlcharts" id="chart_container">
+ <div id="pairscan_chart"></div>
+ </div>
+ <div>
+ <h2>
+ Results
+ </h2>
+ <table cellpadding="0" cellspacing="0" border="0" id="pair_scan_results" class="table table-hover table-striped table-bordered">
+ </table>
+ </div>
+</div>
{% endblock %}
{% block js %}
- <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='d3js/d3.min.js') }}"></script>
- <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='d3-tip/d3-tip.js') }}"></script>
- <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.js') }}"></script>
- <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
- <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/scientific.js') }}"></script>
- <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.js') }}"></script>
+<script>
+ figure_data = {{ figure_data | safe }}
+</script>
+
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.js') }}"></script>
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/scientific.js') }}"></script>
+<script language="javascript" type="text/javascript" src="/static/new/javascript/d3panels.js"></script>
+
+<script type="text/javascript">
+
+var data, mychart;
+
+// d3.json("data.json").then(function(data) {
+// var mychart;
+// mychart = d3panels.lod2dheatmap({
+// altrectcolor: "",
+// chrlinecolor: "black",
+// equalCells: true
+// });
+// return mychart(d3.select("div#pairscan_chart"), data);
+// });
-{% endblock %} \ No newline at end of file
+// d3.json("data.json").then(function(data) {
+// var mychart;
+// mychart = d3panels.lod2dheatmap({
+// oneAtTop: true,
+// altrectcolor: "",
+// chrlinecolor: "black",
+// colors: ["crimson", "white", "slateblue"],
+// equalCells: true
+// });
+// data.poslabel = data.marker;
+// return mychart(d3.select("div#chart2"), data);
+// });
+
+mychart = d3panels.lod2dheatmap({
+ equalCells: true
+});
+
+mychart(d3.select('div#pairscan_chart'), figure_data);
+
+</script>
+
+{% endblock %}