aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
authorzsloan2015-08-11 20:41:42 +0000
committerzsloan2015-08-11 20:41:42 +0000
commit743f44c6e90549a7d6d1dad85a594277a3dc0cb9 (patch)
treefc90c6bd82ac314f4992896bd311f47c8f38f93b /wqflask
parent3169d94d9b05410aa9b5380477bf10827c6afcde (diff)
downloadgenenetwork2-743f44c6e90549a7d6d1dad85a594277a3dc0cb9.tar.gz
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
Diffstat (limited to 'wqflask')
-rwxr-xr-xwqflask/wqflask/interval_mapping/interval_mapping.py4
-rw-r--r--wqflask/wqflask/static/new/javascript/create_lodchart.js9
-rw-r--r--wqflask/wqflask/static/new/javascript/lod_chart.js11
-rwxr-xr-xwqflask/wqflask/static/new/javascript/search_results.coffee3
-rwxr-xr-xwqflask/wqflask/static/new/javascript/search_results.js101
-rwxr-xr-xwqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css2
-rwxr-xr-xwqflask/wqflask/templates/gsearch_gene.html46
-rwxr-xr-xwqflask/wqflask/templates/search_result_page.html4
8 files changed, 127 insertions, 53 deletions
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 @@
<button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
<button class="btn btn-default" id="add"><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
<button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-download"></span> Download Table</button>
+ <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ...">
+ <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
+
<br />
<br />
<table class="table table-hover table-striped" id="trait_table">
@@ -47,7 +50,7 @@
<tbody>
{% for this_trait in results %}
<TR>
- <td><input type="checkbox">{{ loop.index }}</td>
+ <td><input class="trait_checkbox" type="checkbox">{{ loop.index }}</td>
{% for item in this_trait %}
<TD>{{ item }}</TD>
{% endfor %}
@@ -64,7 +67,7 @@
{% endblock %}
{% block js %}
- <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
+ <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
@@ -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");
+
});
</script>
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 @@
<button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
<button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
<button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
- <button class="btn btn-default" id="add"><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
+ <button class="btn btn-default" id="add" disabled><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
<button class="btn btn-default"><span class="glyphicon glyphicon-download"></span> Download Table</button>
<button id="redraw" class="btn btn-default">Reset Columns</button>
+ <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ...">
+ <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
<br />
<br />
<div id="table_container">