aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
authorzsloan2020-11-06 14:46:30 -0600
committerzsloan2020-11-06 14:46:30 -0600
commit4fd42c0dfce935935fa041a5eaaed6fafea2785b (patch)
treec05d201f2c07d9713aacf3fc5d79741a66fb2a7f /wqflask
parentb2a126af326b78f414fba3397a4c628a8575b3a6 (diff)
downloadgenenetwork2-4fd42c0dfce935935fa041a5eaaed6fafea2785b.tar.gz
Changed the show/hide column buttons to use DataTables API + a few other changes (for some reason none of my changes could be pushed from one of my local branches to origin/testing, so they're combined in this commit)
- Fixed a couple column header glossary links to point to GN1 - Added trait_list.css for styling a couple elements common to similar pages (like correlations or view collection)
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/static/new/css/trait_list.css7
-rw-r--r--wqflask/wqflask/templates/search_result_page.html76
2 files changed, 54 insertions, 29 deletions
diff --git a/wqflask/wqflask/static/new/css/trait_list.css b/wqflask/wqflask/static/new/css/trait_list.css
index 7db3f7b8..691dcb12 100644
--- a/wqflask/wqflask/static/new/css/trait_list.css
+++ b/wqflask/wqflask/static/new/css/trait_list.css
@@ -2,6 +2,11 @@ div.tool-button-container {
min-width: 950px;
}
-div.collection-table-options{
+div.collection-table-options {
min-width: 1100px;
+}
+
+div.show-hide-container {
+ margin-bottom: 5px;
+ margin-top: 10px;
} \ No newline at end of file
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 2318bfb8..38f224e0 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -5,6 +5,7 @@
<link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/scroller/css/scroller.dataTables.min.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="/static/new/css/show_trait.css" />
+ <link rel="stylesheet" type="text/css" href="static/new/css/trait_list.css" />
{% endblock %}
{% block content %}
<!-- Start of body -->
@@ -40,10 +41,10 @@
{% elif word.search_term|length == 5 %}
with <u>{{ word.key|upper }}</u> between <strong>{{ word.search_term[0] }}</strong> and <strong>{{ word.search_term[1] }}</strong> on chromosome <strong>{{ word.search_term[2] }}</strong> between <strong>{{ word.search_term[3] }}</strong> and <strong>{{ word.search_term[4] }}</strong> Mb{% if loop.last %}.{% else %} and {% endif %}
{% endif %}
- {% elif word.key|lower == "position" %}
- with <u>target genes</u> on chromosome <strong>{% if word.search_term[0].split('chr')|length > 1 %}{{ word.search_term[0].split('chr')[1] }}{% elif word.search_term[0].split('CHR')|length > 1 %}{{ word.search_term[0].split('CHR')[1] }}{% else %}{{ word.search_term[0] }}{% endif %}</strong> between <strong>{{ word.search_term[1] }}</strong> and <strong>{{ word.search_term[2] }}</strong> Mb{% if loop.last %}.{% else %} and {% endif %}
+ {% elif word.key|lower == "position" or word.key|lower == "mb" %}
+ with <u>target genes</u> on chromosome <strong>{% if (word.search_term[0]|lower).split('chr')|length > 1 %}{{ (word.search_term[0]|lower).split('chr')[1] }}{% else %}{{ word.search_term[0] }}{% endif %}</strong> between <strong>{{ word.search_term[1] }}</strong> and <strong>{{ word.search_term[2] }}</strong> Mb{% if loop.last %}.{% else %} and {% endif %}
{% else %}
- {% if word.search_term[0] == "*" %} in the dataset.{% else %}{% if loop.first %}that match:<br>{% endif %}<b>"{{ word.search_term[0] }}"</b>{% if loop.last %}{% else %} and {% endif %}{% endif %}
+ {% if word.search_term[0] == "*" %} in the dataset.{% else %}{% if loop.first %}that match:<br>{% endif %}<b>{{ word.search_term[0] }}</b>{% if loop.last %}{% else %} and {% endif %}{% endif %}
{% endif %}
{% endfor %}
{% endif %}
@@ -133,11 +134,29 @@
<button class="btn btn-default" id="deselect_all" type="button"><span class="glyphicon glyphicon-remove"></span> Deselect</button>
</div>
</form>
- <br />
{% if dataset.type != 'Geno' %}
- <br />
- <div style="margin-bottom: 5px;">
+ <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 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 dataset.type == 'Publish' %}
+ <button class="toggle-vis" data-column="3">Description</button>
+ <button class="toggle-vis" data-column="4">Mean</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">High P</button>
+ <button class="toggle-vis" data-column="8">Peak Location</button>
+ <button class="toggle-vis" data-column="9">Effect Size</button>
+ {% endif %}
</div>
{% endif %}
<div id="table_container" {% if dataset.type == 'ProbeSet' or dataset.type == 'Publish' %}style="min-width: 1500px;"{% endif %}>
@@ -209,7 +228,7 @@
}
//ZS: Need to make sort by symbol, also need to make sure blank symbol fields at the bottom and symbols starting with numbers below letters
- $('#trait_table').DataTable( {
+ trait_table = $('#trait_table').DataTable( {
'drawCallback': function( settings ) {
$('#trait_table tr').click(function(event) {
if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
@@ -312,7 +331,7 @@
'orderSequence': [ "desc", "asc"]
},
{
- 'title': "High P<a href=\"http://genenetwork.org//glossary.html#LRS\" target=\"_blank\" style=\"color: white;\"><sup style=\"font-size: small; color: #FF0000;\"> ?</sup></a>",
+ 'title': "High P<a href=\"http://gn1.genenetwork.org//glossary.html#LRS\" target=\"_blank\" style=\"color: white;\"><sup style=\"font-size: small; color: #FF0000;\"> ?</sup></a>",
'type': "natural-minus-na",
'data': "lrs_score",
'width': "60px",
@@ -325,7 +344,7 @@
'data': "lrs_location"
},
{
- 'title': "Effect Size<a href=\"http://genenetwork.org//glossary.html#A\" target=\"_blank\" style=\"color: white;\"><sup style=\"font-size: small; color: #FF0000;\"> ?</sup></a>",
+ 'title': "Effect Size<a href=\"http://gn1.genenetwork.org//glossary.html#A\" target=\"_blank\" style=\"color: white;\"><sup style=\"font-size: small; color: #FF0000;\"> ?</sup></a>",
'type': "natural-minus-na",
'data': "additive",
'width': "85px",
@@ -381,7 +400,7 @@
'orderSequence': [ "desc", "asc"]
},
{
- 'title': "Max LRS<a href=\"http://genenetwork.org//glossary.html#LRS\" target=\"_blank\" style=\"color: white;\"><sup style=\"font-size: small; color: #FF0000;\"> ?</sup></a>",
+ 'title': "High P<a href=\"http://gn1.genenetwork.org//glossary.html#LRS\" target=\"_blank\" style=\"color: white;\"><sup style=\"font-size: small; color: #FF0000;\"> ?</sup></a>",
'type': "natural-minus-na",
'data': "lrs_score",
'width': "80px",
@@ -394,7 +413,7 @@
'data': "lrs_location"
},
{
- 'title': "Effect Size<a href=\"http://genenetwork.org//glossary.html#A\" target=\"_blank\" style=\"color: white;\"><sup style=\"font-size: small; color: #FF0000;\"> ?</sup></a>",
+ 'title': "Effect Size<a href=\"http://gn1.genenetwork.org//glossary.html#A\" target=\"_blank\" style=\"color: white;\"><sup style=\"font-size: small; color: #FF0000;\"> ?</sup></a>",
'type': "natural-minus-na",
'width': "120px",
'data': "additive",
@@ -408,24 +427,7 @@
}{% endif %}
],
"order": [[1, "asc" ]],
- {% if dataset.type != 'Geno' %}
- buttons: [
- {
- extend: 'columnsToggle',
- columns: function( idx, data, node ) {
- if (idx != 0) {
- return true;
- } else {
- return false;
- }
- },
- postfixButtons: [ 'colvisRestore' ]
- }
- ],
- 'sDom': "Bpitirp",
- {% else %}
'sDom': "pitirp",
- {% endif %}
'iDisplayLength': 500,
'deferRender': true,
'paging': true,
@@ -439,6 +441,23 @@
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");
+ }
+ } );
+
+
$('#redraw').click(function() {
var table = $('#trait_table').DataTable();
table.colReorder.reset()
@@ -452,3 +471,4 @@
});
</script>
{% endblock %}
+