{% 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="{{ url_for('css', filename='fontawesome/css/font-awesome.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>{{target_dataset}}</span> against <span><a href="">{{this_trait}}</a></span> for the top <span>{{return_results}}</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="{{ url_for('js', filename='fontawesome/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">
	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_coefficient","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)=>{
              // should use a dynamic dataset  name
           		let urlLink = `/show_trait?trait_id=${data}&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 %}