aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
authorAlexander Kabui2021-10-10 02:57:39 +0300
committerAlexander Kabui2021-10-10 02:57:39 +0300
commit9799274aa6c74756a63a744ea121a7f5793ea2a5 (patch)
treeb3436b042e35806b6758f8cd218740c46bce78b5 /wqflask
parent612bf52630fbc3a1b9c538c4498ceb97bdb0970b (diff)
downloadgenenetwork2-9799274aa6c74756a63a744ea121a7f5793ea2a5.tar.gz
ui:show phenotypes page
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/templates/test_wgcna_results.html82
1 files changed, 41 insertions, 41 deletions
diff --git a/wqflask/wqflask/templates/test_wgcna_results.html b/wqflask/wqflask/templates/test_wgcna_results.html
index 09763a80..da57fdd6 100644
--- a/wqflask/wqflask/templates/test_wgcna_results.html
+++ b/wqflask/wqflask/templates/test_wgcna_results.html
@@ -8,20 +8,6 @@
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
-
-
-
-
-
-<style>
-#terminal {
-
- max-width: 768px;
-
- margin: 10px;
-
-}
-</style>
<style type="text/css">
@@ -85,11 +71,10 @@
</style>
<div class="container">
<div>
- <div id="terminal">
- </div>
- </div>
- <div>
- <div class="grid_container">
+ <div >
+ <h2 style="text-align:center">Soft Thresholds </h2>
+ <div class="grid_container">
+
{% for key, value in results["data"]["output"]["soft_threshold"].items()%}
<div class="control_sft_column">
<h3>{{key}}</h3>
@@ -98,9 +83,10 @@
{% endfor %}
</div>
{% endfor %}
+ </div>
</div>
- <div>
-<!-- <h3>Net colors</h3>
+<!-- <div>
+ <h3>Net colors</h3>
<div class="control_net_colors">
{% for key,value in results["data"]["output"]["net_colors"].items() %}
<div style="background-color:{{value}}">
@@ -108,8 +94,8 @@
<p>{{value}}</p>
</div>
{% endfor %}
- </div> -->
- </div>
+ </div>
+ </div> -->
<div>
<!-- end -->
@@ -119,11 +105,20 @@
</div>
{% endif %}
+ <div >
+ <img class="control-image" src="data:image/jpeg;base64,{{ results['data']['output']['image_data2']| safe }}">
+ </div>
</div>
<div>
<h2 style="text-align:center;"> Module eigen genes </h2>
- <table id="example" class="display" width="80vw"></table>
+ <table id="eigens" class="display" width="80vw"></table>
+ </div>
+
+ <div>
+ <h2 style="text-align:center;">Phenotype modules </h2>
+
+ <table id="phenos" class="display" width="40vw" ></table>
</div>
</div>
</div>
@@ -138,30 +133,23 @@
<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/scroller/js/dataTables.scroller.min.js') }}"></script>
-<script>
-let results = {{results|safe}}
-let terminalOutput = results.output
+<script type="text/javascript">
-let term = new Terminal({ cursorBlink: true, lineHeight: 1.2 });
-term.open(document.getElementById('terminal'));
-term.setOption('theme', {
- background: '#300a24'
-});
-terminalOutput.split('\n').forEach((line) => {
- term.writeln(line)
-});
-</script>
+let results = {{results|safe}}
-<script type="text/javascript">
+let phenoModules = results["data"]["output"]["net_colors"]
+let phenotypes = Array.from(Object.keys(phenoModules));
+let phenoMods = Object.values(phenoModules)
+console.log(phenotypes)
+console.log(typeof phenotypes);
-let {col_names,mod_dataset} = {{data|safe}}
-$(document).ready(function(){
- $('#example').DataTable( {
+let {col_names,mod_dataset} = {{data|safe}}
+ $('#eigens').DataTable( {
data: mod_dataset,
columns: col_names.map((name)=>{
return {
@@ -169,7 +157,19 @@ $(document).ready(function(){
}
})
} );
-})
+ $('#phenos').DataTable( {
+ data:phenotypes.map((phenoName,idx)=>{
+ console.log(phenoName)
+ return [phenoName,phenoMods[idx]]
+ }),
+ columns: [{
+ title:"Phenotypes"
+ },
+ {
+ title: "Modules"
+ }]
+ } );
+
</script>
{% endblock %} \ No newline at end of file