From 743f44c6e90549a7d6d1dad85a594277a3dc0cb9 Mon Sep 17 00:00:00 2001 From: zsloan Date: Tue, 11 Aug 2015 20:41:42 +0000 Subject: Highlighting works for all trait selection options (select all, invert, select top) Search table and Select Top options added to global and regular search pages --- .../wqflask/interval_mapping/interval_mapping.py | 4 +- .../static/new/javascript/create_lodchart.js | 9 +- wqflask/wqflask/static/new/javascript/lod_chart.js | 11 ++- .../static/new/javascript/search_results.coffee | 3 +- .../static/new/javascript/search_results.js | 101 +++++++++++++++------ .../packages/DataTables/css/jquery.dataTables.css | 2 +- wqflask/wqflask/templates/gsearch_gene.html | 46 ++++++++-- wqflask/wqflask/templates/search_result_page.html | 4 +- 8 files changed, 127 insertions(+), 53 deletions(-) (limited to 'wqflask') diff --git a/wqflask/wqflask/interval_mapping/interval_mapping.py b/wqflask/wqflask/interval_mapping/interval_mapping.py index 79cb1481..108bc747 100755 --- a/wqflask/wqflask/interval_mapping/interval_mapping.py +++ b/wqflask/wqflask/interval_mapping/interval_mapping.py @@ -72,7 +72,7 @@ class IntervalMapping(object): json_filename = webqtlUtil.genRandStr(prefix="intmap_") json.dumps(self.json_data, webqtlConfig.TMPDIR + json_filename) - + self.js_data = dict( result_score_type = self.score_type, manhattan_plot = self.manhattan_plot, @@ -220,7 +220,7 @@ class IntervalMapping(object): self.json_data['additive'].append(qtl.additive) locus = {"name":reaper_locus.name, "chr":reaper_locus.chr, "cM":reaper_locus.cM, "Mb":reaper_locus.Mb} qtl = {"lrs_value": qtl.lrs, "chr":reaper_locus.chr, "Mb":reaper_locus.Mb, - "cM":reaper_locus.cM, "name":reaper_locus.name, "additive":qtl.additive} + "cM":reaper_locus.cM, "name":reaper_locus.name, "additive":qtl.additive, "dominance":qtl.dominance} self.qtl_results.append(qtl) diff --git a/wqflask/wqflask/static/new/javascript/create_lodchart.js b/wqflask/wqflask/static/new/javascript/create_lodchart.js index 2537e9e2..b8fcf1f8 100644 --- a/wqflask/wqflask/static/new/javascript/create_lodchart.js +++ b/wqflask/wqflask/static/new/javascript/create_lodchart.js @@ -3,7 +3,7 @@ var create_lod_chart; create_lod_chart = function() { - var additive, chrrect, data, h, halfh, margin, mychart, totalh, totalw, w; + var chrrect, data, h, halfh, margin, mychart, totalh, totalw, w; h = 500; w = 1200; margin = { @@ -16,12 +16,7 @@ halfh = h + margin.top + margin.bottom; totalh = halfh * 2; totalw = w + margin.left + margin.right; - if ('additive' in js_data) { - additive = js_data.additive; - } else { - additive = false; - } - console.log("js_data:", js_data); + //console.log("js_data:", js_data); mychart = lodchart().lodvarname("lod.hk").height(h).width(w).margin(margin).ylab(js_data.result_score_type + " score").manhattanPlot(js_data.manhattan_plot); data = js_data.json_data; d3.select("div#topchart").datum(data).call(mychart); diff --git a/wqflask/wqflask/static/new/javascript/lod_chart.js b/wqflask/wqflask/static/new/javascript/lod_chart.js index 35b37070..2ea3a3e8 100644 --- a/wqflask/wqflask/static/new/javascript/lod_chart.js +++ b/wqflask/wqflask/static/new/javascript/lod_chart.js @@ -29,7 +29,8 @@ lodchart = function() { darkrect = "#F1F1F9"; lightrect = "#FBFBFF"; lodlinecolor = "darkslateblue"; - additivelinecolor = "red"; + additivelinecolor_plus = "red"; + additivelinecolor_negative = "green"; linewidth = 2; suggestivecolor = "gainsboro"; significantcolor = "#EBC7C7"; @@ -208,7 +209,13 @@ lodchart = function() { for (k = 0, len1 = ref1.length; k < len1; k++) { chr = ref1[k]; if (chr.indexOf(data['chr'])) { - curves.append("path").datum(data.posByChr[chr[0]]).attr("d", additivecurve(chr[0], lodvarnum)).attr("stroke", additivelinecolor).attr("fill", "none").attr("stroke-width", 1).style("pointer-events", "none"); + if (additivecurve(chr[0], lodvarnum).y < 0) { + additivecurve(chr[0], lodvarnum).y = Math.abs(additivecurve(chr[0], lodvarnum).y) + curves.append("path").datum(data.posByChr[chr[0]]).attr("d", additivecurve(chr[0], lodvarnum)).attr("stroke", additivelinecolor_negative).attr("fill", "none").attr("stroke-width", 1).style("pointer-events", "none"); + } + else { + curves.append("path").datum(data.posByChr[chr[0]]).attr("d", additivecurve(chr[0], lodvarnum)).attr("stroke", additivelinecolor_plus).attr("fill", "none").attr("stroke-width", 1).style("pointer-events", "none"); + } } } } diff --git a/wqflask/wqflask/static/new/javascript/search_results.coffee b/wqflask/wqflask/static/new/javascript/search_results.coffee index c4e6b1a2..e0cfc61a 100755 --- a/wqflask/wqflask/static/new/javascript/search_results.coffee +++ b/wqflask/wqflask/static/new/javascript/search_results.coffee @@ -15,8 +15,7 @@ $ -> $(".trait_checkbox").trigger('click') add = -> - traits = $("#trait_table input:checked").map(-> - return $(this).val()).get() + traits = $("#trait_table input:checked").map(-> return $(this).val()).get() console.log("checked length is:", traits.length) console.log("checked is:", traits) $.colorbox({href:"/collections/add?traits=#{traits}"}) diff --git a/wqflask/wqflask/static/new/javascript/search_results.js b/wqflask/wqflask/static/new/javascript/search_results.js index ba2ebb4f..7f9ff896 100755 --- a/wqflask/wqflask/static/new/javascript/search_results.js +++ b/wqflask/wqflask/static/new/javascript/search_results.js @@ -1,17 +1,81 @@ -// Generated by CoffeeScript 1.8.0 $(function() { var add, change_buttons, checked_traits, deselect_all, invert, remove, removed_traits, select_all; + checked_traits = null; select_all = function() { console.log("selected_all"); - return $(".trait_checkbox").prop('checked', true); + $(".trait_checkbox").each(function() { + $(this).prop('checked', true); + if (!$(this).closest('tr').hasClass('selected')) { + $(this).closest('tr').addClass('selected') + } + }); }; + deselect_all = function() { - return $(".trait_checkbox").prop('checked', false); + $(".trait_checkbox").each(function() { + $(this).prop('checked', false); + if ($(this).closest('tr').hasClass('selected')) { + $(this).closest('tr').removeClass('selected') + } + }); }; + invert = function() { - return $(".trait_checkbox").trigger('click'); + $(".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') + } + }); }; + + $('#searchbox').keyup(function(){ + $('#trait_table').DataTable().search($(this).val()).draw(); + }); + + $('#select_top').keyup(function(){ + num_rows = $(this).val() + if (num_rows = parseInt(num_rows)){ + i = 0 + $('#trait_table > tbody > tr').each(function(){ + if (i < num_rows) { + $(this).find('.trait_checkbox').prop("checked", true) + if (!$(this).closest('tr').hasClass('selected')) { + $(this).closest('tr').addClass('selected') + } + } + i += 1 + }); + } + }); + + $('.trait_checkbox:checkbox').change(function() { + console.log("CHANGED") + 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 = function() { var traits; traits = $("#trait_table input:checked").map(function() { @@ -28,7 +92,7 @@ $(function() { return checked_traits.closest("tr").fadeOut(); }; change_buttons = function() { - var button, buttons, item, num_checked, text, _i, _j, _k, _l, _len, _len1, _len2, _len3, _results, _results1; + 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; console.log("num_checked is:", num_checked); @@ -38,31 +102,13 @@ $(function() { $(button).prop("disabled", true); } } else { - for (_j = 0, _len1 = buttons.length; _j < _len1; _j++) { + for (_j = 0, _len2 = buttons.length; _j < _len2; _j++) { button = buttons[_j]; $(button).prop("disabled", false); } } - if (num_checked > 1) { - console.log("in loop"); - _results = []; - for (_k = 0, _len2 = buttons.length; _k < _len2; _k++) { - item = buttons[_k]; - console.log(" processing item:", item); - _results.push(text = $(item).html()); - } - return _results; - } else { - console.log("in loop"); - _results1 = []; - for (_l = 0, _len3 = buttons.length; _l < _len3; _l++) { - item = buttons[_l]; - console.log(" processing item:", item); - _results1.push(text = $(item).html()); - } - return _results1; - } }; + remove = function() { var traits, uc_id; checked_traits = $("#trait_table input:checked"); @@ -88,6 +134,5 @@ $(function() { $("#invert").click(invert); $("#add").click(add); $("#remove").click(remove); - $('.trait_checkbox').click(change_buttons); - return $('.btn').click(change_buttons); -}); + $('.trait_checkbox, .btn').click(change_buttons); +}); \ No newline at end of file diff --git a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css index eec02ef5..c8303de2 100755 --- a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css +++ b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css @@ -65,7 +65,7 @@ table.dataTable tbody tr { background-color: #ffffff; } table.dataTable tbody tr.selected { - background-color: #B0BED9; + background-color: #ffff99; } table.dataTable tbody th, table.dataTable tbody td { diff --git a/wqflask/wqflask/templates/gsearch_gene.html b/wqflask/wqflask/templates/gsearch_gene.html index 3e1cb32e..1f525c5f 100755 --- a/wqflask/wqflask/templates/gsearch_gene.html +++ b/wqflask/wqflask/templates/gsearch_gene.html @@ -21,6 +21,9 @@ + + +

@@ -47,7 +50,7 @@ {% for this_trait in results %} - + {% for item in this_trait %} {% endfor %} @@ -64,7 +67,7 @@ {% endblock %} {% block js %} - + @@ -105,13 +108,35 @@ return ((x < y) ? -1 : ((x > y) ? 1 : 0)); } }; + + jQuery.fn.dataTableExt.oSort['cust-txt-asc'] = function (a, b) { + var x = getValue(a); + var y = getValue(b); + if (x == 'N/A' || x == '') { + return 1; + } + else if (y == 'N/A' || y == '') { + return -1; + } + else { + return ((x < y) ? -1 : ((x > y) ? 1 : 0)); + } + }; + jQuery.fn.dataTableExt.oSort['cust-txt-desc'] = function (a, b) { var x = getValue(a); var y = getValue(b); return ((x < y) ? 1 : ((x > y) ? -1 : 0)); }; + $.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col ) + { + return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) { + return $('input', td).prop('checked') ? '1' : '0'; + } ); + } + $(document).ready( function () { $('#trait_table tr').click(function(event) { @@ -129,17 +154,17 @@ { "type": "natural", "width": "15%" }, { "type": "cust-txt" }, { "type": "natural", "width": "12%" }, - { "type": "natural", "width": "12%" }, - { "type": "natural", "width": "12%" }, - { "type": "natural", "width": "12%" }, - { "type": "natural", "width": "12%" }, + { "type": "natural", "width": "12%" }, + { "type": "natural", "width": "12%" }, + { "type": "natural", "width": "12%" }, + { "type": "natural", "width": "12%" }, { "type": "natural", "width": "15%" }, - { "type": "natural" }, - { "type": "natural" }, - { "type": "natural" }, + { "type": "natural" }, + { "type": "natural" }, + { "type": "natural" }, { "type": "cust-txt" } ], - "sDom": "RJtir", + "sDom": "RJtir", "iDisplayLength": -1, "autoWidth": true, "bLengthChange": true, @@ -153,6 +178,7 @@ "paging": false } ); console.timeEnd("Creating table"); + }); diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html index 335ab213..ca5f28d9 100755 --- a/wqflask/wqflask/templates/search_result_page.html +++ b/wqflask/wqflask/templates/search_result_page.html @@ -43,9 +43,11 @@ - + + +

-- cgit v1.2.3
{{ loop.index }}{{ loop.index }}{{ item }}