Merge pull request #563 from Alexanderlacuna/feature/integrate-correlation-api

Feature/integrate correlation api

2 files changed, 162 insertions, 0 deletions

diff --git a/wqflask/wqflask/templates/show_trait_calculate_correlations.html b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
index 50803978..ef784c84 100644
--- a/wqflask/wqflask/templates/show_trait_calculate_correlations.html
+++ b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
@@ -117,6 +117,9 @@
               <div class="col-xs-3 controls">
                   <input type="button" class="btn corr_compute submit_special btn-success" data-url="/corr_compute" title="Compute Correlation" value="Compute">
               </div>
+                  <div class="col-xs-3 controls">
+                  <input type="button" class="btn test_corr_compute submit_special btn-success" data-url="/test_corr_compute" title="Compute Correlation" value="Test Compute">
+              </div>
           </div>
       </div>
     </div>
diff --git a/wqflask/wqflask/templates/test_correlation_page.html b/wqflask/wqflask/templates/test_correlation_page.html
new file mode 100644
index 00000000..037e9735
--- /dev/null
+++ b/wqflask/wqflask/templates/test_correlation_page.html
@@ -0,0 +1,159 @@
+{% extends "base.html" %}
+{% block title %}Correlation Results{% 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('js', filename='DataTablesExtensions/buttonsBootstrap/css/buttons.bootstrap.css') }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonStyles/css/buttons.dataTables.min.css') }}">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+    <link rel="stylesheet" type="text/css" href="/static/new/css/trait_list.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
+
+    <style type="text/css">
+    	.td-styles{
+    		height: 40px;
+    		text-align: center;
+    	}
+    	.trait_col {
+    		font-weight:bolder;
+    		text-align: center;
+    		color:#036ffc;
+    		/*font-size: 1.1em;*/
+    	}
+    	table th {
+    		font-weight: bolder;
+    		text-transform: uppercase;
+    	}
+    	.correlation-title {
+    		padding:25px 10px;
+    	}
+    	.correlation-title h3 span {
+          font-weight: bolder;
+    	}
+    	.header-toggle-vis {
+    		padding:10px 5px;
+    	}
+    	.header-toggle-vis button {
+    		border-radius: 5px;
+
+    	}
+    </style>
+{% endblock %}
+
+{% block content %}
+
+<div class="correlation-title">
+	<h3>Correlation Results for <span>Dataset_name</span> against <span><a href="">trait_name</a></span> for the top <span>all</span> Results</h3>
+</div>
+<div class="header-toggle-vis">
+	      <h4 style="font-weight: bolder;padding: 5px 3px;">Toggle Columns</h4>
+	      <button class="toggle-vis" data-column="1">Index</button>
+          <button class="toggle-vis" data-column="2">Trait Name</button>
+          <button class="toggle-vis" data-column="3">Sample r</button>
+          <button class="toggle-vis" data-column="4">Sample P(r)</button>
+          <button class="toggle-vis" data-column="5">Num overlap</button>
+</div>
+	<table id="example" class="display" width="100%">
+		        <thead>
+            <tr >
+            	<th></th>
+                <th>index</th>
+                <th>trait_name</th>
+                <th>Sample r</th>
+                <th>Sample r(p)</th>
+                <th>N</th>
+                <th>Tissue r</th>
+                <th>Tissue r(p)</th>
+                <th>Lit r</th>
+            </tr>
+        </thead>
+	</table>
+
+{% endblock %}
+
+{% block js %}
+<script type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
+<script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.js') }}"></script>
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.min.js') }}"></script>
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/underscore.min.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/buttons/js/dataTables.buttons.min.js') }}"></script>
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/buttons.html5.min.js') }}"></script>
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
+<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script>
+<script type="text/javascript">
+	console.log("running this script")
+	let correlationResults = {{correlation_results|safe}}
+	// document.querySelector(".content").innerHTML =correlationResults
+	// parse the data
+	let  counter = 0;
+	let corr_type = "tissue";
+	correlationResults =correlationResults.map((trait_object)=>{
+		let trait_name = Object.keys(trait_object)[0]
+		
+		let new_dict = {
+			"index":counter,
+			"trait_name":trait_name,
+			...trait_object[trait_name]
+		}
+		counter++;
+		return new_dict;
+	})
+
+console.log(correlationResults) 
+	
+</script>
+
+<script type="text/javascript">
+	$(document).ready(function() {
+    let  table = $('#example').DataTable( {
+        "data": correlationResults,
+      "columns": [
+            {"data":corr_type=="sample"?null:"fd","width":"25px"},
+            { "data": "index","width":"120px","title":"Index" },
+            { "data": "trait_name","title":"TraitName"},
+            { "data": "corr_coeffient","defaultContent": "--"},
+            { "data": "p_value","defaultContent":"--"},
+            { "data": "num_overlap","defaultContent":"--"},
+            {"data":"tissue_corr","defaultContent":"--","title":"Tissue r"},
+            {"data":"tissue_p_val","defaultContent":"--","title":"Tissue r(p)"},
+            {"data":"lit_corr","defaultContent":"--","title":"Lit rho"}
+        ],
+        "columnDefs": [ 
+           {
+           	targets:0,
+           	data:null,
+           	defaultContent: '',
+           	orderable: false,
+           	className: 'select-checkbox',
+           	"render":(data,type,row)=>{
+           		return `<input type="checkbox" class="checkbox trait_checkbox" value="other">`
+           	}
+
+           },
+           {className:"trait_col",targets:2},
+           {className: "td-styles", targets: "_all"},
+           {
+           	"targets":2,
+           	"render":(data,type,row)=>{
+           		let urlLink = "/show_trait?trait_id=1453207_at&dataset=HC_M2_0606_P"
+           		let traitLink = `<a href=${urlLink}>${data}</a>`
+           		return traitLink
+           	},
+           }
+
+     ]
+    } );
+
+    $(":button.toggle-vis").on("click",function(e){
+    	e.preventDefault()
+    	let column = table.column($(this).attr("data-column"));
+    	column.visible(!column.visible())
+    	console.log($(this).attr("data-column"))
+    })
+} );
+</script>
+
+{% endblock %}
\ No newline at end of file