From 4fd42c0dfce935935fa041a5eaaed6fafea2785b Mon Sep 17 00:00:00 2001 From: zsloan Date: Fri, 6 Nov 2020 14:46:30 -0600 Subject: 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) --- wqflask/wqflask/static/new/css/trait_list.css | 7 ++- wqflask/wqflask/templates/search_result_page.html | 76 ++++++++++++++--------- 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 @@ + {% endblock %} {% block content %} @@ -40,10 +41,10 @@ {% elif word.search_term|length == 5 %} with {{ word.key|upper }} between {{ word.search_term[0] }} and {{ word.search_term[1] }} on chromosome {{ word.search_term[2] }} between {{ word.search_term[3] }} and {{ word.search_term[4] }} Mb{% if loop.last %}.{% else %} and {% endif %} {% endif %} - {% elif word.key|lower == "position" %} - with target genes on chromosome {% 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 %} between {{ word.search_term[1] }} and {{ word.search_term[2] }} Mb{% if loop.last %}.{% else %} and {% endif %} + {% elif word.key|lower == "position" or word.key|lower == "mb" %} + with target genes on chromosome {% if (word.search_term[0]|lower).split('chr')|length > 1 %}{{ (word.search_term[0]|lower).split('chr')[1] }}{% else %}{{ word.search_term[0] }}{% endif %} between {{ word.search_term[1] }} and {{ word.search_term[2] }} Mb{% if loop.last %}.{% else %} and {% endif %} {% else %} - {% if word.search_term[0] == "*" %} in the dataset.{% else %}{% if loop.first %}that match:
{% endif %}"{{ word.search_term[0] }}"{% if loop.last %}{% else %} and {% endif %}{% endif %} + {% if word.search_term[0] == "*" %} in the dataset.{% else %}{% if loop.first %}that match:
{% endif %}{{ word.search_term[0] }}{% if loop.last %}{% else %} and {% endif %}{% endif %} {% endif %} {% endfor %} {% endif %} @@ -133,11 +134,29 @@ -
{% if dataset.type != 'Geno' %} -
-
+
Show/Hide Columns: +
+ + + {% if dataset.type == 'ProbeSet' %} + + + + + + + + {% elif dataset.type == 'Publish' %} + + + + + + + + {% endif %}
{% 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 ?", + 'title': "High P ?", 'type': "natural-minus-na", 'data': "lrs_score", 'width': "60px", @@ -325,7 +344,7 @@ 'data': "lrs_location" }, { - 'title': "Effect Size ?", + 'title': "Effect Size ?", 'type': "natural-minus-na", 'data': "additive", 'width': "85px", @@ -381,7 +400,7 @@ 'orderSequence': [ "desc", "asc"] }, { - 'title': "Max LRS ?", + 'title': "High P ?", 'type': "natural-minus-na", 'data': "lrs_score", 'width': "80px", @@ -394,7 +413,7 @@ 'data': "lrs_location" }, { - 'title': "Effect Size ?", + 'title': "Effect Size ?", '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 @@ }); {% endblock %} + -- cgit v1.2.3