diff options
| -rw-r--r-- | wqflask/wqflask/correlation/show_corr_results.py | 1 | ||||
| -rw-r--r-- | wqflask/wqflask/export_traits.py | 2 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/search_results.js | 165 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/collections/view.html | 33 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/correlation_page.html | 54 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/search_result_page.html | 46 |
6 files changed, 139 insertions, 162 deletions
diff --git a/wqflask/wqflask/correlation/show_corr_results.py b/wqflask/wqflask/correlation/show_corr_results.py index 1b801b1d..51aa1622 100644 --- a/wqflask/wqflask/correlation/show_corr_results.py +++ b/wqflask/wqflask/correlation/show_corr_results.py @@ -487,6 +487,7 @@ def generate_corr_json(corr_results, this_trait, dataset, target_dataset, for_ap results_dict['index'] = i + 1 results_dict['trait_id'] = trait.name results_dict['dataset'] = trait.dataset.name + results_dict['hmac'] = hmac.data_hmac('{}:{}'.format(trait.name, trait.dataset.name)) if target_dataset.type == "ProbeSet": results_dict['symbol'] = trait.symbol results_dict['description'] = "N/A" diff --git a/wqflask/wqflask/export_traits.py b/wqflask/wqflask/export_traits.py index b14c55db..6fb760e0 100644 --- a/wqflask/wqflask/export_traits.py +++ b/wqflask/wqflask/export_traits.py @@ -86,7 +86,7 @@ def export_search_results_csv(targs): trait_symbol = "N/A" row_contents = [ i + 1, - "https://genenetwork.org/show_trait?trait_id=" + trait.name + "&dataset=" + trait.dataset.name, + "https://genenetwork.org/show_trait?trait_id=" + str(trait.name) + "&dataset=" + str(trait.dataset.name), trait.dataset.group.species, trait.dataset.group.name, trait.dataset.name, diff --git a/wqflask/wqflask/static/new/javascript/search_results.js b/wqflask/wqflask/static/new/javascript/search_results.js index 86660126..9ffef4f8 100644 --- a/wqflask/wqflask/static/new/javascript/search_results.js +++ b/wqflask/wqflask/static/new/javascript/search_results.js @@ -1,42 +1,87 @@ +change_buttons = function() { + var button, buttons, item, num_checked, text, _i, _j, _k, _l, _len, _len2, _len3, _len4, _results, _results2; + buttons = ["#add", "#remove"]; + + num_checked = 0 + table_api = $('#trait_table').DataTable(); + check_cells = table_api.column(0).nodes().to$(); + for (let i = 0; i < check_cells.length; i++) { + if (check_cells[i].childNodes[0].checked){ + num_checked += 1 + } + } + + if (num_checked === 0) { + for (_i = 0, _len = buttons.length; _i < _len; _i++) { + button = buttons[_i]; + $(button).prop("disabled", true); + } + } else { + for (_j = 0, _len2 = buttons.length; _j < _len2; _j++) { + button = buttons[_j]; + $(button).prop("disabled", false); + } + } +}; + $(function() { - var add, change_buttons, checked_traits, deselect_all, invert, remove, removed_traits, select_all; + var add, checked_traits, deselect_all, invert, remove, removed_traits, select_all; checked_traits = null; select_all = function() { - console.log("selected_all"); - $(".trait_checkbox").each(function() { - $(this).prop('checked', true); - if (!$(this).closest('tr').hasClass('selected')) { - $(this).closest('tr').addClass('selected') - } - }); + table_api = $('#trait_table').DataTable(); + + check_cells = table_api.column(0).nodes().to$(); + for (let i = 0; i < check_cells.length; i++) { + check_cells[i].childNodes[0].checked = true; + } + + check_rows = table_api.rows().nodes(); + for (let i =0; i < check_rows.length; i++) { + check_rows[i].classList.add("selected"); + } + + change_buttons(); }; deselect_all = function() { - $(".trait_checkbox").each(function() { - $(this).prop('checked', false); - if ($(this).closest('tr').hasClass('selected')) { - $(this).closest('tr').removeClass('selected') - } - }); + table_api = $('#trait_table').DataTable(); + + check_cells = table_api.column(0).nodes().to$(); + for (let i = 0; i < check_cells.length; i++) { + check_cells[i].childNodes[0].checked = false; + } + + check_rows = table_api.rows().nodes(); + for (let i =0; i < check_rows.length; i++) { + check_rows[i].classList.remove("selected") + } + + change_buttons(); }; invert = function() { - $(".trait_checkbox").each(function() { - if ($(this).prop('checked') == true) { - $(this).prop('checked', false) - } - else { - $(this).prop('checked', true) - } - - if ($(this).closest('tr').hasClass('selected')) { - $(this).closest('tr').removeClass('selected') - } - else { - $(this).closest('tr').addClass('selected') - } - }); + table_api = $('#trait_table').DataTable(); + + check_cells = table_api.column(0).nodes().to$(); + for (let i = 0; i < check_cells.length; i++) { + if (check_cells[i].childNodes[0].checked){ + check_cells[i].childNodes[0].checked = false; + } else { + check_cells[i].childNodes[0].checked = true; + } + } + + check_rows = table_api.rows().nodes(); + for (let i =0; i < check_rows.length; i++) { + if (check_rows[i].classList.contains("selected")){ + check_rows[i].classList.remove("selected") + } else { + check_rows[i].classList.add("selected") + } + } + + change_buttons(); }; $('#searchbox').keyup(function(){ @@ -77,22 +122,6 @@ $(function() { change_buttons(); }); - $('.trait_checkbox:checkbox').change(function() { - change_buttons() - - if ($(this).is(":checked")) { - if (!$(this).closest('tr').hasClass('selected')) { - $(this).closest('tr').addClass('selected') - } - } - else { - if ($(this).closest('tr').hasClass('selected')) { - $(this).closest('tr').removeClass('selected') - } - } - - }); - add_to_collection = function() { var traits; traits = $("#trait_table input:checked").map(function() { @@ -117,25 +146,8 @@ $(function() { }; removed_traits = function() { - console.log('in removed_traits with checked_traits:', checked_traits); return checked_traits.closest("tr").fadeOut(); }; - change_buttons = function() { - var button, buttons, item, num_checked, text, _i, _j, _k, _l, _len, _len2, _len3, _len4, _results, _results2; - buttons = ["#add", "#remove"]; - num_checked = $('.trait_checkbox:checked').length; - if (num_checked === 0) { - for (_i = 0, _len = buttons.length; _i < _len; _i++) { - button = buttons[_i]; - $(button).prop("disabled", true); - } - } else { - for (_j = 0, _len2 = buttons.length; _j < _len2; _j++) { - button = buttons[_j]; - $(button).prop("disabled", false); - } - } - }; submit_bnw = function() { trait_data = submit_traits_to_export_or_bnw("trait_table", "submit_bnw") @@ -157,18 +169,23 @@ $(function() { }); table_dict['headers'] = headers; - rows = []; - trait_table.find('tbody tr').each(function (i, tr) { - if (trait_table.find('input[name="searchResult"]:checked').length > 0) { - if ($(this).find('input[name="searchResult"]').is(':checked')){ - rows.push($(this).find('input[name="searchResult"]:checked').val()) - } - } - else { - rows.push($(this).find('input[name="searchResult"]').val()) + selected_rows = []; + all_rows = []; //ZS: If no rows are checked, export all + table_api = $('#' + table_name).DataTable(); + check_cells = table_api.column(0).nodes().to$(); + for (let i = 0; i < check_cells.length; i++) { + this_node = check_cells[i].childNodes[0]; + all_rows.push(this_node.value) + if (this_node.checked){ + selected_rows.push(this_node.value) } - }); - table_dict['rows'] = rows; + } + + if (selected_rows.length > 0){ + table_dict['rows'] = selected_rows; + } else { + table_dict['rows'] = all_rows; + } json_table_dict = JSON.stringify(table_dict); $('input[name=export_data]').val(json_table_dict); @@ -253,8 +270,6 @@ $(function() { $("#add").click(add_to_collection); $("#submit_bnw").click(submit_bnw); $("#export_traits").click(export_traits); - $('.trait_checkbox, .btn').click(change_buttons); - let naturalAsc = $.fn.dataTableExt.oSort["natural-ci-asc"] let naturalDesc = $.fn.dataTableExt.oSort["natural-ci-desc"] diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html index e37f8104..ccec495b 100644 --- a/wqflask/wqflask/templates/collections/view.html +++ b/wqflask/wqflask/templates/collections/view.html @@ -73,7 +73,7 @@ <form id="export_form" method="POST" action="/export_traits_csv"> <button class="btn btn-default" id="select_all" type="button"><span class="glyphicon glyphicon-ok"></span> Select All</button> <button class="btn btn-default" id="invert" type="button"><span class="glyphicon glyphicon-ok"></span> Invert</button> - <button class="btn btn-success" id="add" disabled="disabled" type="button"><i class="icon-plus-sign"></i> Copy</button> + <button class="btn btn-success" id="add" type="button" disabled><i class="icon-plus-sign"></i> Copy</button> <input type="hidden" name="database_name" id="database_name" value="None"> <input type="hidden" name="export_data" id="export_data" value=""> <input type="hidden" name="file_name" id="file_name" value="collection_table"> @@ -81,7 +81,7 @@ <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline; padding-bottom: 9px;" placeholder="Search Table For ..."> <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline; padding-bottom: 9px;" placeholder="Select Top ..."> <button class="btn btn-default" id="deselect_all" type="button"><span class="glyphicon glyphicon-remove"></span> Deselect</button> - <button id="remove" class="btn btn-danger" data-url="/collections/remove" disabled="disabled" type="button"><i class="icon-minus-sign"></i> Delete Rows</button> + <button id="remove" class="btn btn-danger" data-url="/collections/remove" type="button" disabled><i class="icon-minus-sign"></i> Delete Rows</button> <button id="delete" class="btn btn-danger submit_special" data-url="/collections/delete" title="Delete this collection" > Delete Collection</button> </form> </div> @@ -109,10 +109,7 @@ <tbody> {% for this_trait in trait_obs %} <TR id="trait:{{ this_trait.name }}:{{ this_trait.dataset.name }}"> - <TD align="center" style="padding: 0px;"> - <INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" - VALUE="{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }}"> - </TD> + <TD align="center" style="padding: 0px;"><INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" VALUE="{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }}"></TD> <TD data-export="{{ loop.index }}" align="right">{{ loop.index }}</TD> <TD title="{{ this_trait.dataset.fullname }}" data-export="{{ this_trait.dataset.fullname }}">{{ this_trait.dataset.fullname }}</TD> <TD data-export="{{ this_trait.name }}"> @@ -178,15 +175,21 @@ <script language="javascript" type="text/javascript"> $(document).ready( function () { - - $('#trait_table tr').click(function(event) { - if (event.target.type !== 'checkbox') { - $(':checkbox', this).trigger('click'); - } - }); - - console.time("Creating table"); $('#trait_table').dataTable( { + 'drawCallback': function( settings ) { + $('#trait_table tr').off().on("click", function(event) { + if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') { + var obj =$(this).find('input'); + obj.prop('checked', !obj.is(':checked')); + } + if ($(this).hasClass("selected")){ + $(this).removeClass("selected") + } else { + $(this).addClass("selected") + } + change_buttons() + }); + }, "columns": [ { "orderDataType": "dom-checkbox", @@ -220,7 +223,7 @@ "paging": false, "orderClasses": true } ); - console.timeEnd("Creating table"); + submit_special = function(url) { $("#collection_form").attr("action", url); diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html index 6419b185..aa74abf5 100644 --- a/wqflask/wqflask/templates/correlation_page.html +++ b/wqflask/wqflask/templates/correlation_page.html @@ -75,6 +75,7 @@ <div> <form id="export_form" method="POST" action="/export_traits_csv"> <button class="btn btn-default" id="select_all" type="button"><span class="glyphicon glyphicon-ok"></span> Select All</button> + <button class="btn btn-default" id="invert" type="button"><span class="glyphicon glyphicon-adjust"></span> Invert</button> <button class="btn btn-success" id="add" type="button" disabled><span class="glyphicon glyphicon-plus-sign"></span> Add</button> <input type="hidden" name="database_name" id="database_name" value="None"> <input type="hidden" name="export_data" id="export_data" value=""> @@ -256,41 +257,6 @@ {% endif %} $(document).ready( function () { - - $('#trait_table tr').click(function(event) { - if (event.target.type !== 'checkbox') { - $(':checkbox', this).trigger('click'); - } - }); - - function change_buttons() { - buttons = ["#add", "#remove"]; - num_checked = $('.trait_checkbox:checked').length; - if (num_checked === 0) { - for (_i = 0, _len = buttons.length; _i < _len; _i++) { - button = buttons[_i]; - $(button).prop("disabled", true); - } - } else { - for (_j = 0, _len2 = buttons.length; _j < _len2; _j++) { - button = buttons[_j]; - $(button).prop("disabled", false); - } - } - if ($(this).is(":checked")) { - if (!$(this).closest('tr').hasClass('selected')) { - $(this).closest('tr').addClass('selected') - } - } - else { - if ($(this).closest('tr').hasClass('selected')) { - $(this).closest('tr').removeClass('selected') - } - } - } - - console.time("Creating table"); - table_conf = { buttons: [ { @@ -305,6 +271,20 @@ postfixButtons: [ 'colvisRestore' ] } ], + 'drawCallback': function( settings ) { + $('#trait_table tr').off().on("click", function(event) { + if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') { + var obj =$(this).find('input'); + obj.prop('checked', !obj.is(':checked')); + } + if ($(this).hasClass("selected")){ + $(this).removeClass("selected") + } else { + $(this).addClass("selected") + } + }); + $('.trait_checkbox:checkbox').on("change", change_buttons); + }, "data": table_json, "columns": [ { @@ -557,7 +537,7 @@ "sDom": "itir", "autoWidth": true, "bSortClasses": false, - "scrollY": "50vh", + "scrollY": "100vh", "scroller": true, "scrollCollapse": true } @@ -570,8 +550,6 @@ } ); } ).draw(); - console.timeEnd("Creating table"); - $('.toggle-vis').on('click', function (e) { e.preventDefault(); diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html index 2a8d6931..87c97c50 100644 --- a/wqflask/wqflask/templates/search_result_page.html +++ b/wqflask/wqflask/templates/search_result_page.html @@ -129,6 +129,7 @@ {% endif %} <input type="hidden" name="export_data" id="export_data" value=""> <button class="btn btn-default" id="select_all" type="button"><span class="glyphicon glyphicon-ok"></span> Select</button> + <button class="btn btn-default" id="invert" type="button"><span class="glyphicon glyphicon-adjust"></span> Invert</button> <button class="btn btn-success" id="add" type="button" disabled><span class="glyphicon glyphicon-plus-sign"></span> Add</button> <button class="btn btn-default" id="export_traits">Download <span class="glyphicon glyphicon-download"></span></button> <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ..."> @@ -203,42 +204,21 @@ } }); - function change_buttons() { - buttons = ["#add", "#remove"]; - num_checked = $('.trait_checkbox:checked').length; - if (num_checked === 0) { - for (_i = 0, _len = buttons.length; _i < _len; _i++) { - button = buttons[_i]; - $(button).prop("disabled", true); - } - } else { - for (_j = 0, _len2 = buttons.length; _j < _len2; _j++) { - button = buttons[_j]; - $(button).prop("disabled", false); - } - } - //}); - if ($(this).is(":checked")) { - if (!$(this).closest('tr').hasClass('selected')) { - $(this).closest('tr').addClass('selected') - } - } - else { - if ($(this).closest('tr').hasClass('selected')) { - $(this).closest('tr').removeClass('selected') - } - } - } - //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 = $('#trait_table').DataTable( { 'drawCallback': function( settings ) { - $('#trait_table tr').click(function(event) { - if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') { - $(':checkbox', this).trigger('click'); - } - }); - $('.trait_checkbox:checkbox').on("change", change_buttons); + $('#trait_table tr').off().on("click", function(event) { + if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') { + var obj =$(this).find('input'); + obj.prop('checked', !obj.is(':checked')); + } + if ($(this).hasClass("selected")){ + $(this).removeClass("selected") + } else { + $(this).addClass("selected") + } + change_buttons() + }); }, 'createdRow': function ( row, data, index ) { $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;"); |