aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--wqflask/wqflask/templates/correlation_page.html73
1 files changed, 61 insertions, 12 deletions
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index 6ea86609..3d543c35 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -5,6 +5,7 @@
<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" />
{% endblock %}
{% block content %}
@@ -113,10 +114,38 @@
</div>
{% endif %}
</div>
- <div style="margin-bottom: 5px;">
- <b>Show/Hide Columns:</b>
+ <div class="show-hide-container">
+ <b>Show/Hide Columns:</b>
+ <br>
+ <button class="toggle-vis" data-column="1">Index</button>
+ <button class="toggle-vis" data-column="2">Record</button>
+ {% if target_dataset.type == 'ProbeSet' %}
+ <button class="toggle-vis" data-column="3">Symbol</button>
+ <button class="toggle-vis" data-column="4">Description</button>
+ <button class="toggle-vis" data-column="5">Location</button>
+ <button class="toggle-vis" data-column="6">Mean</button>
+ <button class="toggle-vis" data-column="7">High P</button>
+ <button class="toggle-vis" data-column="8">Peak Location</button>
+ <button class="toggle-vis" data-column="9">Effect Size</button>
+ {% elif target_dataset.type == 'Publish' %}
+ <button class="toggle-vis" data-column="3">Abbreviation</button>
+ <button class="toggle-vis" data-column="4">Description</button>
+ <button class="toggle-vis" data-column="5">Authors</button>
+ <button class="toggle-vis" data-column="6">Year</button>
+ <button class="toggle-vis" data-column="7">Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}</button>
+ <button class="toggle-vis" data-column="8">N</button>
+ <button class="toggle-vis" data-column="9">Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})</button>
+ <button class="toggle-vis" data-column="10">High P</button>
+ <button class="toggle-vis" data-column="11">Peak Location</button>
+ <button class="toggle-vis" data-column="12">Effect Size</button>
+ {% else %}
+ <button class="toggle-vis" data-column="3">Location</button>
+ <button class="toggle-vis" data-column="4">Sample {% if corr_method == 'pearson' %}r{% else %}rho{% endif %}</button>
+ <button class="toggle-vis" data-column="5">N</button>
+ <button class="toggle-vis" data-column="6">Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})</button>
+ {% endif %}
</div>
- <div style="width: 100%; min-width: {% if target_dataset.type == "ProbeSet" %}1700px{% elif target_dataset.type == "Publish" %}1600px{% else %}600px{% endif %};">
+ <div style="width: 100%; {% if target_dataset.type == "ProbeSet" %}min-width: 1700px;{% elif target_dataset.type == "Publish" %}min-width: 1600px;{% else %}width: 650px;{% endif %}">
<table id="trait_table" class="table-hover table-striped cell-border" style="float: left;">
<thead>
<tr>
@@ -350,7 +379,7 @@
{
'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
'type': "natural-minus-na",
- 'width': "40px",
+ 'width': "65px",
'data': "sample_p",
'orderSequence': [ "desc", "asc"]
},
@@ -464,7 +493,7 @@
{
'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
'type': "natural-minus-na",
- 'width': "40px",
+ 'width': "65px",
'data': "sample_p",
'orderSequence': [ "desc", "asc"]
},
@@ -487,7 +516,7 @@
'data': "additive",
'width': "85px",
'orderSequence': [ "desc", "asc"]
- }{% elif dataset.type == 'Geno' %},
+ }{% elif target_dataset.type == 'Geno' %},
{
'title': "Location",
'type': "natural-minus-na",
@@ -511,7 +540,7 @@
{
'title': "Sample p({% if corr_method == 'pearson' %}r{% else %}rho{% endif %})",
'type': "natural-minus-na",
- 'width': "40px",
+ 'width': "65px",
'data': "sample_p",
'orderSequence': [ "desc", "asc"]
}{% endif %}
@@ -520,8 +549,12 @@
"targets": 0,
"orderable": false
} ],
+ {% if target_dataset.type == 'Geno' %}
+ "order": [[6, "asc" ]],
+ {% else %}
"order": [[9, "asc" ]],
- "sDom": "Bitir",
+ {% endif %}
+ "sDom": "itir",
"autoWidth": true,
"bSortClasses": false,
"scrollY": "50vh",
@@ -529,16 +562,32 @@
"scrollCollapse": true
}
- the_table = $('#trait_table').DataTable(table_conf);
+ trait_table = $('#trait_table').DataTable(table_conf);
- the_table.on( 'order.dt search.dt draw.dt', function () {
- the_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
+ trait_table.on( 'order.dt search.dt draw.dt', function () {
+ trait_table.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
console.timeEnd("Creating table");
+ $('.toggle-vis').on( 'click', function (e) {
+ e.preventDefault();
+
+ // Get the column API object
+ var column = trait_table.column( $(this).attr('data-column') );
+
+ // Toggle the visibility
+ column.visible( ! column.visible() );
+
+ if (column.visible()){
+ $(this).removeClass("active");
+ } else {
+ $(this).addClass("active");
+ }
+ } );
+
submit_special = function(url) {
$("#correlation_form").attr("action", url);
return $("#correlation_form").submit();
@@ -555,7 +604,7 @@
$("#select_traits").click(function() {
console.log("redrawing")
- the_table.draw();
+ trait_table.draw();
});
});
</script>