diff options
20 files changed, 979 insertions, 345 deletions
diff --git a/wqflask/base/data_set.py b/wqflask/base/data_set.py index 15a8c7cc..8965e1d1 100755 --- a/wqflask/base/data_set.py +++ b/wqflask/base/data_set.py @@ -640,7 +640,7 @@ class PhenotypeDataSet(DataSet): 'Year', 'Max LRS', 'Max LRS Location', - 'Add. Effect'] + 'Add. Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a>'] self.type = 'Publish' @@ -901,7 +901,7 @@ class MrnaAssayDataSet(DataSet): 'Mean Expr', 'Max LRS', 'Max LRS Location', - 'Add. Effect'] + 'Add. Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a>'] # Todo: Obsolete or rename this field self.type = 'ProbeSet' diff --git a/wqflask/cfg/default_settings.py b/wqflask/cfg/default_settings.py index 8fca3d77..8b5d1313 100755 --- a/wqflask/cfg/default_settings.py +++ b/wqflask/cfg/default_settings.py @@ -13,3 +13,5 @@ SECURITY_RECOVERABLE = True SECURITY_EMAIL_SENDER = "no-reply@genenetwork.org" SECURITY_POST_LOGIN_VIEW = "/thank_you" + +SQLALCHEMY_POOL_RECYCLE = 3600
\ No newline at end of file diff --git a/wqflask/wqflask/search_results.py b/wqflask/wqflask/search_results.py index 5444d1bc..9d2d0b88 100755 --- a/wqflask/wqflask/search_results.py +++ b/wqflask/wqflask/search_results.py @@ -233,11 +233,6 @@ class SearchResultPage(object): print("search_type is:", pf(search_type)) - # This is throwing an error when a_search['key'] is None, so I changed above - #search_type = string.upper(a_search['key']) - #if not search_type: - # search_type = self.dataset.type - search_ob = do_search.DoSearch.get_search(search_type) search_class = getattr(do_search, search_ob) print("search_class is: ", pf(search_class)) diff --git a/wqflask/wqflask/static/new/css/show_trait.css b/wqflask/wqflask/static/new/css/show_trait.css index 9dcbfce9..9fc82a85 100644 --- a/wqflask/wqflask/static/new/css/show_trait.css +++ b/wqflask/wqflask/static/new/css/show_trait.css @@ -1,3 +1,7 @@ -tr .outlier {
- background-color: #ffff99;
+tr .outlier { + background-color: #ffff99; +} + +#bar_chart_container { + overflow-x:scroll; }
\ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee index a48718de..c83de64e 100755 --- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee +++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee @@ -28,7 +28,7 @@ class Bar_Chart @plot_height -= @y_buffer @create_scales() @create_graph() - + d3.select("#color_attribute").on("change", => @attribute = $("#color_attribute").val() console.log("attr_color_dict:", @attr_color_dict) @@ -59,6 +59,7 @@ class Bar_Chart else return @attr_color_dict[@attribute][d[2][@attribute]] ) + @draw_legend() @add_legend(@attribute, @distinct_attr_vals[@attribute]) ) @@ -181,6 +182,8 @@ class Bar_Chart @attr_color_dict = {} console.log("vals:", vals) for own key, distinct_vals of vals + @min_val = d3.min(distinct_vals) + @max_val = d3.max(distinct_vals) this_color_dict = {} if distinct_vals.length < 10 color = d3.scale.category10() @@ -197,8 +200,8 @@ class Bar_Chart return true ) color_range = d3.scale.linear() - .domain([d3.min(distinct_vals), - d3.max(distinct_vals)]) + .domain([min_val, + max_val]) .range([0,255]) for value, i in distinct_vals console.log("color_range(value):", parseInt(color_range(value))) @@ -206,12 +209,30 @@ class Bar_Chart #this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value))) #this_color_dict[value] = "rgb(0, 0, " + color_range(parseInt(value)) + ")" @attr_color_dict[key] = this_color_dict + + + + draw_legend: () -> + $('#legend-left').html(@min_val) + $('#legend-right').html(@max_val) + svg_html = '<svg height="10" width="90"> \ + <rect x="0" width="15" height="10" style="fill: rgb(0, 0, 0);"></rect> \ + <rect x="15" width="15" height="10" style="fill: rgb(50, 0, 0);"></rect> \ + <rect x="30" width="15" height="10" style="fill: rgb(100, 0, 0);"></rect> \ + <rect x="45" width="15" height="10" style="fill: rgb(150, 0, 0);"></rect> \ + <rect x="60" width="15" height="10" style="fill: rgb(200, 0, 0);"></rect> \ + <rect x="75" width="15" height="10" style="fill: rgb(255, 0, 0);"></rect> \ + </svg>' + console.log("svg_html:", svg_html) + $('#legend-colors').html(svg_html) get_trait_color_dict: (samples, vals) -> @trait_color_dict = {} console.log("vals:", vals) for own key, distinct_vals of vals this_color_dict = {} + @min_val = d3.min(distinct_vals) + @max_val = d3.max(distinct_vals) if distinct_vals.length < 10 color = d3.scale.category10() for value, i in distinct_vals @@ -434,8 +455,8 @@ class Bar_Chart .select("title") .text((d) => return d[1] - ) - + ) + @draw_legend() else @svg.selectAll(".bar") .data(@sorted_samples()) @@ -448,7 +469,8 @@ class Bar_Chart .select("title") .text((d) => return d[1] - ) + ) + @draw_legend() trim_values: (trait_sample_data) -> trimmed_samples = {} diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js index 07761ba7..f5ed544b 100755 --- a/wqflask/wqflask/static/new/javascript/bar_chart.js +++ b/wqflask/wqflask/static/new/javascript/bar_chart.js @@ -66,6 +66,7 @@ Bar_Chart = (function() { } }); } + _this.draw_legend(); return _this.add_legend(_this.attribute, _this.distinct_attr_vals[_this.attribute]); }; })(this)); @@ -150,6 +151,8 @@ Bar_Chart = (function() { for (key in vals) { if (!__hasProp.call(vals, key)) continue; distinct_vals = vals[key]; + this.min_val = d3.min(distinct_vals); + this.max_val = d3.max(distinct_vals); this_color_dict = {}; if (distinct_vals.length < 10) { color = d3.scale.category10(); @@ -168,7 +171,7 @@ Bar_Chart = (function() { } }; })(this))) { - color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 255]); + color_range = d3.scale.linear().domain([min_val, max_val]).range([0, 255]); for (i = _j = 0, _len1 = distinct_vals.length; _j < _len1; i = ++_j) { value = distinct_vals[i]; console.log("color_range(value):", parseInt(color_range(value))); @@ -181,6 +184,15 @@ Bar_Chart = (function() { return _results; }; + Bar_Chart.prototype.draw_legend = function() { + var svg_html; + $('#legend-left').html(this.min_val); + $('#legend-right').html(this.max_val); + svg_html = '<svg height="10" width="90"> <rect x="0" width="15" height="10" style="fill: rgb(0, 0, 0);"></rect> <rect x="15" width="15" height="10" style="fill: rgb(50, 0, 0);"></rect> <rect x="30" width="15" height="10" style="fill: rgb(100, 0, 0);"></rect> <rect x="45" width="15" height="10" style="fill: rgb(150, 0, 0);"></rect> <rect x="60" width="15" height="10" style="fill: rgb(200, 0, 0);"></rect> <rect x="75" width="15" height="10" style="fill: rgb(255, 0, 0);"></rect> </svg>'; + console.log("svg_html:", svg_html); + return $('#legend-colors').html(svg_html); + }; + Bar_Chart.prototype.get_trait_color_dict = function(samples, vals) { var color, color_range, distinct_vals, i, key, sample, this_color_dict, value, _i, _j, _len, _len1, _results; this.trait_color_dict = {}; @@ -189,6 +201,8 @@ Bar_Chart = (function() { if (!__hasProp.call(vals, key)) continue; distinct_vals = vals[key]; this_color_dict = {}; + this.min_val = d3.min(distinct_vals); + this.max_val = d3.max(distinct_vals); if (distinct_vals.length < 10) { color = d3.scale.category10(); for (i = _i = 0, _len = distinct_vals.length; _i < _len; i = ++_i) { @@ -426,7 +440,7 @@ Bar_Chart = (function() { console.log("TRAIT_COLOR_DICT:", this.trait_color_dict); console.log("SAMPLES:", this.samples); if (this.sort_by = "value") { - return this.svg.selectAll(".bar").data(this.samples).transition().duration(1000).style("fill", (function(_this) { + this.svg.selectAll(".bar").data(this.samples).transition().duration(1000).style("fill", (function(_this) { return function(d) { console.log("this color:", _this.trait_color_dict[d[0]]); return _this.trait_color_dict[d[0]]; @@ -436,8 +450,9 @@ Bar_Chart = (function() { return d[1]; }; })(this)); + return this.draw_legend(); } else { - return this.svg.selectAll(".bar").data(this.sorted_samples()).transition().duration(1000).style("fill", (function(_this) { + this.svg.selectAll(".bar").data(this.sorted_samples()).transition().duration(1000).style("fill", (function(_this) { return function(d) { console.log("this color:", _this.trait_color_dict[d[0]]); return _this.trait_color_dict[d[0]]; @@ -447,6 +462,7 @@ Bar_Chart = (function() { return d[1]; }; })(this)); + return this.draw_legend(); } }; diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee index ff7c041c..07be824f 100755 --- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee +++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee @@ -57,10 +57,52 @@ submit_click = () -> this_trait_vals.push(null) all_vals.push(this_trait_vals) - create_scatterplots(trait_names, samples, all_vals) + trait_vals_csv = create_trait_data_csv(selected_traits) + scatter_matrix = new ScatterMatrix(trait_vals_csv) + scatter_matrix.render() + + + #create_scatterplots(trait_names, samples, all_vals) $.colorbox.close() +create_trait_data_csv = (selected_traits) -> + trait_names = [] + trait_names.push($('input[name=trait_id]').val()) + samples = $('input[name=allsamples]').val().split(" ") + all_vals = [] + this_trait_vals = get_this_trait_vals(samples) + all_vals.push(this_trait_vals) + + for trait in Object.keys(selected_traits) + trait_names.push(trait) + + this_trait_vals = [] + for sample in samples + if sample in Object.keys(selected_traits[trait]) + this_trait_vals.push(parseFloat(selected_traits[trait][sample])) + else + this_trait_vals.push(null) + all_vals.push(this_trait_vals) + + console.log("all_vals:", all_vals) + + trait_vals_csv = trait_names.join(",") + trait_vals_csv += "\n" + + for sample, index in samples + if all_vals[0][index] == null + continue + sample_vals = [] + for trait in all_vals + sample_vals.push(trait[index]) + trait_vals_csv += sample_vals.join(",") + trait_vals_csv += "\n" + + #console.log("trait_vals_csv:", trait_vals_csv) + + return trait_vals_csv + trait_click = () -> console.log("Clicking on:", $(this)) trait = $(this).parent().find('.trait').text() diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js index af3f5135..a73eafe4 100755 --- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js +++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js @@ -1,5 +1,5 @@ // Generated by CoffeeScript 1.8.0 -var add_trait_data, assemble_into_json, back_to_collections, collection_click, collection_list, color_by_trait, get_this_trait_vals, get_trait_data, process_traits, selected_traits, submit_click, this_trait_data, trait_click, +var add_trait_data, assemble_into_json, back_to_collections, collection_click, collection_list, color_by_trait, create_trait_data_csv, get_this_trait_vals, get_trait_data, process_traits, selected_traits, submit_click, this_trait_data, trait_click, __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; console.log("before get_traits_from_collection"); @@ -25,7 +25,7 @@ collection_click = function() { }; submit_click = function() { - var all_vals, sample, samples, this_trait_vals, trait, trait_names, traits, _i, _j, _len, _len1, _ref; + var all_vals, sample, samples, scatter_matrix, this_trait_vals, trait, trait_names, trait_vals_csv, traits, _i, _j, _len, _len1, _ref; selected_traits = {}; traits = []; $('#collections_holder').find('input[type=checkbox]:checked').each(function() { @@ -63,10 +63,54 @@ submit_click = function() { } all_vals.push(this_trait_vals); } - create_scatterplots(trait_names, samples, all_vals); + trait_vals_csv = create_trait_data_csv(selected_traits); + scatter_matrix = new ScatterMatrix(trait_vals_csv); + scatter_matrix.render(); return $.colorbox.close(); }; +create_trait_data_csv = function(selected_traits) { + var all_vals, index, sample, sample_vals, samples, this_trait_vals, trait, trait_names, trait_vals_csv, _i, _j, _k, _l, _len, _len1, _len2, _len3, _ref; + trait_names = []; + trait_names.push($('input[name=trait_id]').val()); + samples = $('input[name=allsamples]').val().split(" "); + all_vals = []; + this_trait_vals = get_this_trait_vals(samples); + all_vals.push(this_trait_vals); + _ref = Object.keys(selected_traits); + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + trait = _ref[_i]; + trait_names.push(trait); + this_trait_vals = []; + for (_j = 0, _len1 = samples.length; _j < _len1; _j++) { + sample = samples[_j]; + if (__indexOf.call(Object.keys(selected_traits[trait]), sample) >= 0) { + this_trait_vals.push(parseFloat(selected_traits[trait][sample])); + } else { + this_trait_vals.push(null); + } + } + all_vals.push(this_trait_vals); + } + console.log("all_vals:", all_vals); + trait_vals_csv = trait_names.join(","); + trait_vals_csv += "\n"; + for (index = _k = 0, _len2 = samples.length; _k < _len2; index = ++_k) { + sample = samples[index]; + if (all_vals[0][index] === null) { + continue; + } + sample_vals = []; + for (_l = 0, _len3 = all_vals.length; _l < _len3; _l++) { + trait = all_vals[_l]; + sample_vals.push(trait[index]); + } + trait_vals_csv += sample_vals.join(","); + trait_vals_csv += "\n"; + } + return trait_vals_csv; +}; + trait_click = function() { var dataset, this_trait_url, trait; console.log("Clicking on:", $(this)); diff --git a/wqflask/wqflask/static/new/javascript/scatter-matrix.js b/wqflask/wqflask/static/new/javascript/scatter-matrix.js new file mode 100644 index 00000000..38fd276e --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/scatter-matrix.js @@ -0,0 +1,549 @@ +// Heavily influenced by Mike Bostock's Scatter Matrix example +// http://mbostock.github.io/d3/talk/20111116/iris-splom.html +// + +/* +ScatterMatrix = function(url) { + this.__url = url; + this.__data = undefined; + this.__cell_size = 140; +}; +*/ + +ScatterMatrix = function(csv_string) { + this.__csv_string = csv_string; + this.__data = undefined; + this.__cell_size = 140; +}; + +ScatterMatrix.prototype.cellSize = function(n) { + this.__cell_size = n; + return this; +}; + +/* +ScatterMatrix.prototype.onData = function(cb) { + if (this.__data) { cb(); return; } + var self = this; + d3.csv(self.__url, function(data) { + self.__data = data; + cb(); + }); +}; +*/ + +ScatterMatrix.prototype.onData = function(cb) { + if (this.__data) { cb(); return; } + var self = this; + console.log("self.csv_string:", self.__csv_string) + + data = d3.csv.parse(self.__csv_string); + self.__data = data; + cb(); + +/* + d3.csv.parseRows(self.__csv_string, function(data) { + self.__data = data; + cb(); + }); +*/ + +}; + +ScatterMatrix.prototype.render = function () { + var self = this; + + var container = d3.select('#scatterplot_container').append('div') + .attr('class', 'scatter-matrix-container'); + var control = container.append('div') + .attr('class', 'scatter-matrix-control'); + var svg = container.append('div') + .attr('class', 'scatter-matrix-svg') + .html('<em>Loading data...</em>'); + + this.onData(function() { + var data = self.__data; + + // Fetch data and get all string variables + var string_variables = [undefined]; + var numeric_variables = []; + var numeric_variable_values = {}; + + for (k in data[0]) { + if (isNaN(+data[0][k])) { string_variables.push(k); } + else { numeric_variables.push(k); numeric_variable_values[k] = []; } + } + + console.log("data:", data) + + data.forEach(function(d) { + for (var j in numeric_variables) { + var k = numeric_variables[j]; + var value = d[k]; + if (numeric_variable_values[k].indexOf(value) < 0) { + numeric_variable_values[k].push(value); + } + } + }); + + var size_control = control.append('div').attr('class', 'scatter-matrix-size-control'); + var color_control = control.append('div').attr('class', 'scatter-matrix-color-control'); + var filter_control = control.append('div').attr('class', 'scatter-matrix-filter-control'); + var variable_control = control.append('div').attr('class', 'scatter-matrix-variable-control'); + var drill_control = control.append('div').attr('class', 'scatter-matrix-drill-control'); + + // shared control states + var to_include = []; + var color_variable = undefined; + var selected_colors = undefined; + for (var j in numeric_variables) { + var v = numeric_variables[j]; + to_include.push(v); + } + var drill_variables = []; + + function set_filter(variable) { + filter_control.selectAll('*').remove(); + if (variable) { + // Get unique values for this variable + var values = []; + data.forEach(function(d) { + var v = d[variable]; + if (values.indexOf(v) < 0) { values.push(v); } + }); + + selected_colors = []; + for (var j in values) { + var v = values[j]; + selected_colors.push(v); + } + + var filter_li = + filter_control + .append('p').text('Filter by '+variable+': ') + .append('ul') + .selectAll('li') + .data(values) + .enter().append('li'); + + filter_li.append('input') + .attr('type', 'checkbox') + .attr('checked', 'checked') + .on('click', function(d, i) { + var new_selected_colors = []; + for (var j in selected_colors) { + var v = selected_colors[j]; + if (v !== d || this.checked) { new_selected_colors.push(v); } + } + if (this.checked) { new_selected_colors.push(d); } + selected_colors = new_selected_colors; + self.__draw(self.__cell_size, svg, color_variable, selected_colors, to_include, drill_variables); + }); + filter_li.append('label') + .html(function(d) { return d; }); + } + } + + size_a = size_control.append('p').text('Change cell size: '); + size_a.append('a') + .attr('href', '#') + .html('-') + .on('click', function() { + self.__cell_size *= 0.75; + self.__draw(self.__cell_size, svg, color_variable, selected_colors, to_include, drill_variables); + }); + size_a.append('span').html(' '); + size_a.append('a') + .attr('href', '#') + .html('+') + .on('click', function() { + self.__cell_size *= 1.25; + self.__draw(self.__cell_size, svg, color_variable, selected_colors, to_include, drill_variables); + }); + + color_control.append('p').text('Select a variable to color:') + color_control + .append('ul') + .selectAll('li') + .data(string_variables) + .enter().append('li') + .append('a') + .attr('href', '#') + .text(function(d) { return d ? d : 'None'; }) + .on('click', function(d, i) { + color_variable = d; + selected_colors = undefined; + self.__draw(self.__cell_size, svg, color_variable, selected_colors, to_include, drill_variables); + set_filter(d); + }); + + var variable_li = + variable_control + .append('p').text('Include variables: ') + .append('ul') + .selectAll('li') + .data(numeric_variables) + .enter().append('li'); + + variable_li.append('input') + .attr('type', 'checkbox') + .attr('checked', 'checked') + .on('click', function(d, i) { + var new_to_include = []; + for (var j in to_include) { + var v = to_include[j]; + if (v !== d || this.checked) { new_to_include.push(v); } + } + if (this.checked) { new_to_include.push(d); } + to_include = new_to_include; + self.__draw(self.__cell_size, svg, color_variable, selected_colors, to_include, drill_variables); + }); + variable_li.append('label') + .html(function(d) { return d; }); + + drill_li = + drill_control + .append('p').text('Drill and Expand: ') + .append('ul') + .selectAll('li') + .data(numeric_variables) + .enter().append('li'); + + drill_li.append('input') + .attr('type', 'checkbox') + .on('click', function(d, i) { + var new_drill_variables = []; + for (var j in drill_variables) { + var v = drill_variables[j]; + if (v !== d || this.checked) { new_drill_variables.push(v); } + } + if (this.checked) { new_drill_variables.push(d); } + drill_variables = new_drill_variables; + self.__draw(self.__cell_size, svg, color_variable, selected_colors, to_include, drill_variables); + }); + drill_li.append('label') + .html(function(d) { return d+' ('+numeric_variable_values[d].length+')'; }); + + self.__draw(self.__cell_size, svg, color_variable, selected_colors, to_include, drill_variables); + }); +}; + +ScatterMatrix.prototype.__draw = + function(cell_size, container_el, color_variable, selected_colors, to_include, drill_variables) { + var self = this; + this.onData(function() { + var data = self.__data; + + if (color_variable && selected_colors) { + data = []; + self.__data.forEach(function(d) { + if (selected_colors.indexOf(d[color_variable]) >= 0) { data.push(d); } + }); + } + + container_el.selectAll('*').remove(); + + // If no data, don't do anything + if (data.length == 0) { return; } + + // Parse headers from first row of data + var numeric_variables = []; + for (k in data[0]) { + if (!isNaN(+data[0][k]) && to_include.indexOf(k) >= 0) { numeric_variables.push(k); } + } + numeric_variables.sort(); + + // Get values of the string variable + var colors = []; + if (color_variable) { + // Using self.__data, instead of data, so our css classes are consistent when + // we filter by value. + self.__data.forEach(function(d) { + var s = d[color_variable]; + if (colors.indexOf(s) < 0) { colors.push(s); } + }); + } + + function color_class(d) { + var c = d; + if (color_variable && d[color_variable]) { c = d[color_variable]; } + return colors.length > 0 ? 'color-'+colors.indexOf(c) : 'color-2'; + } + + // Size parameters + var size = cell_size, padding = 10, + axis_width = 20, axis_height = 15, legend_width = 200, label_height = 15; + + // Get x and y scales for each numeric variable + var x = {}, y = {}; + numeric_variables.forEach(function(trait) { + // Coerce values to numbers. + data.forEach(function(d) { d[trait] = +d[trait]; }); + + var value = function(d) { return d[trait]; }, + domain = [d3.min(data, value), d3.max(data, value)], + range_x = [padding / 2, size - padding / 2], + range_y = [padding / 2, size - padding / 2]; + + x[trait] = d3.scale.linear().domain(domain).range(range_x); + y[trait] = d3.scale.linear().domain(domain).range(range_y.reverse()); + }); + + // When drilling, user select one or more variables. The first drilled + // variable becomes the x-axis variable for all columns, and each column + // contains only data points that match specific values for each of the + // drilled variables other than the first. + + var drill_values = []; + var drill_degrees = [] + drill_variables.forEach(function(variable) { + // Skip first one, since that's just the x axis + if (drill_values.length == 0) { + drill_values.push([]); + drill_degrees.push(1); + } + else { + var values = []; + data.forEach(function(d) { + var v = d[variable]; + if (v !== undefined && values.indexOf(v) < 0) { values.push(v); } + }); + values.sort(); + drill_values.push(values); + drill_degrees.push(values.length); + } + }); + var total_columns = 1; + drill_degrees.forEach(function(d) { total_columns *= d; }); + + // Pick out stuff to draw on horizontal and vertical dimensions + + if (drill_variables.length > 0) { + // First drill is now the x-axis variable for all columns + x_variables = []; + for (var i=0; i<total_columns; i++) { + x_variables.push(drill_variables[0]); + } + } + else { + x_variables = numeric_variables.slice(0); + } + + if (drill_variables.length > 0) { + // Don't draw any of the "drilled" variables in vertical dimension + y_variables = []; + numeric_variables.forEach(function(variable) { + if (drill_variables.indexOf(variable) < 0) { y_variables.push(variable); } + }); + } + else { + y_variables = numeric_variables.slice(0); + } + + var filter_descriptions = 0; + if (drill_variables.length > 1) { + filter_descriptions = drill_variables.length-1; + } + + // Axes + var x_axis = d3.svg.axis(); + var y_axis = d3.svg.axis(); + var intf = d3.format('d'); + var fltf = d3.format('.f'); + var scif = d3.format('e'); + + x_axis.ticks(5) + .tickSize(size * y_variables.length) + .tickFormat(function(d) { + if (Math.abs(+d) > 10000 || (Math.abs(d) < 0.001 && Math.abs(d) != 0)) { return scif(d); } + if (parseInt(d) == +d) { return intf(d); } + return fltf(d); + }); + + y_axis.ticks(5) + .tickSize(size * x_variables.length) + .tickFormat(function(d) { + if (Math.abs(+d) > 10000 || (Math.abs(d) < 0.001 && Math.abs(d) != 0)) { return scif(d); } + if (parseInt(d) == +d) { return intf(d); } + return fltf(d); + }); + + // Brush - for highlighting regions of data + var brush = d3.svg.brush() + .on("brushstart", brushstart) + .on("brush", brush) + .on("brushend", brushend); + + // Root panel + var svg = container_el.append("svg:svg") + .attr("width", label_height + size * x_variables.length + axis_width + padding + legend_width) + .attr("height", size * y_variables.length + axis_height + label_height + label_height*filter_descriptions) + .append("svg:g") + .attr("transform", "translate("+label_height+",0)"); + + // Push legend to the side + var legend = svg.selectAll("g.legend") + .data(colors) + .enter().append("svg:g") + .attr("class", "legend") + .attr("transform", function(d, i) { + return "translate(" + (label_height + size * x_variables.length + padding) + "," + (i*20+10) + ")"; + }); + + legend.append("svg:circle") + .attr("class", function(d, i) { return color_class(d); }) + .attr("r", 3); + + legend.append("svg:text") + .attr("x", 12) + .attr("dy", ".31em") + .text(function(d) { return d; }); + + // Draw X-axis + svg.selectAll("g.x.axis") + .data(x_variables) + .enter().append("svg:g") + .attr("class", "x axis") + .attr("transform", function(d, i) { return "translate(" + i * size + ",0)"; }) + .each(function(d) { d3.select(this).call(x_axis.scale(x[d]).orient("bottom")); }); + + // Draw Y-axis + svg.selectAll("g.y.axis") + .data(y_variables) + .enter().append("svg:g") + .attr("class", "y axis") + .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; }) + .each(function(d) { d3.select(this).call(y_axis.scale(y[d]).orient("right")); }); + + // Draw scatter plot + var cell = svg.selectAll("g.cell") + .data(cross(x_variables, y_variables)) + .enter().append("svg:g") + .attr("class", "cell") + .attr("transform", function(d) { return "translate(" + d.i * size + "," + d.j * size + ")"; }) + .each(plot); + + // Add titles for y variables + cell.filter(function(d) { return d.i == 0; }).append("svg:text") + .attr("x", padding-size) + .attr("y", -label_height) + .attr("dy", ".71em") + .attr("transform", function(d) { return "rotate(-90)"; }) + .text(function(d) { return d.y; }); + + function plot(p) { + // console.log(p); + + var data_to_draw = data; + + // If drilling, compute what values of the drill variables correspond to + // this column. + // + var filter = {}; + if (drill_variables.length > 1) { + var column = p.i; + + var cap = 1; + for (var i=drill_variables.length-1; i > 0; i--) { + var var_name = drill_variables[i]; + var var_value = undefined; + + if (i == drill_variables.length-1) { + // for the last drill variable, we index by % + var_value = drill_values[i][column % drill_degrees[i]]; + } + else { + // otherwise divide by capacity of subsequent variables to get value array index + var_value = drill_values[i][parseInt(column/cap)]; + } + + filter[var_name] = var_value; + cap *= drill_degrees[i]; + } + + data_to_draw = []; + data.forEach(function(d) { + var pass = true; + for (k in filter) { if (d[k] != filter[k]) { pass = false; break; } } + if (pass === true) { data_to_draw.push(d); } + }); + } + + var cell = d3.select(this); + + // Frame + cell.append("svg:rect") + .attr("class", "frame") + .attr("x", padding / 2) + .attr("y", padding / 2) + .attr("width", size - padding) + .attr("height", size - padding); + + // Scatter plot dots + cell.selectAll("circle") + .data(data_to_draw) + .enter().append("svg:circle") + .attr("class", function(d) { return color_class(d); }) + .attr("cx", function(d) { return x[p.x](d[p.x]); }) + .attr("cy", function(d) { return y[p.y](d[p.y]); }) + .attr("r", 5); + + // Add titles for x variables and drill variable values + if (p.j == y_variables.length-1) { + cell.append("svg:text") + .attr("x", padding) + .attr("y", size+axis_height) + .attr("dy", ".71em") + .text(function(d) { return d.x; }); + + if (drill_variables.length > 1) { + var i = 0; + for (k in filter) { + i += 1; + cell.append("svg:text") + .attr("x", padding) + .attr("y", size+axis_height+label_height*i) + .attr("dy", ".71em") + .text(function(d) { return filter[k]+': '+k; }); + } + } + } + + // Brush + cell.call(brush.x(x[p.x]).y(y[p.y])); + } + + // Clear the previously-active brush, if any + function brushstart(p) { + if (brush.data !== p) { + cell.call(brush.clear()); + brush.x(x[p.x]).y(y[p.y]).data = p; + } + } + + // Highlight selected circles + function brush(p) { + var e = brush.extent(); + svg.selectAll(".cell circle").attr("class", function(d) { + return e[0][0] <= d[p.x] && d[p.x] <= e[1][0] + && e[0][1] <= d[p.y] && d[p.y] <= e[1][1] + ? color_class(d) : null; + }); + } + + // If brush is empty, select all circles + function brushend() { + if (brush.empty()) svg.selectAll(".cell circle").attr("class", function(d) { + return color_class(d); + }); + } + + function cross(a, b) { + var c = [], n = a.length, m = b.length, i, j; + for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j}); + return c; + } + }); + +}; + diff --git a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee index 8b73b85d..fdec0ee4 100755 --- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee +++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee @@ -67,15 +67,24 @@ do_ajax_post = (url, form_data) -> success: (data) => clearInterval(this.my_timer) $('#progress_bar_container').modal('hide') - $("body").html(data) + open_mapping_results(data) + #$("body").html(data) ) console.log("settingInterval") this.my_timer = setInterval(get_progress, 1000) return false +open_mapping_results = (data) -> + $.colorbox( + html: data + href: "#mapping_results_holder" + height: "80%" + width: "80%" + ) + showalert = (message,alerttype) -> - $('#alert_placeholder').append('<div id="alertdiv" class="alert ' + alerttype + '"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>') + $('#alert_placeholder').append('<div id="alertdiv" class="alert ' + alerttype + '"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>') $("#interval_mapping_compute").click(() => @@ -95,32 +104,6 @@ $("#interval_mapping_compute").click(() => console.log("form_data is:", form_data) do_ajax_post(url, form_data) - - #remove_outliers = confirm("Remove outliers?") - #if use_outliers == true - # block_outliers() - # do_ajax_post(url, form_data) - #else - # do_ajax_post(url, form_data) - #$.ajax( - # type: "POST" - # url: url - # data: form_data - # error: (xhr, ajaxOptions, thrownError) => - # alert("Sorry, an error occurred") - # console.log(xhr) - # clearInterval(this.my_timer) - # $('#progress_bar_container').modal('hide') - # $("body").html("We got an error.") - # success: (data) => - # clearInterval(this.my_timer) - # $('#progress_bar_container').modal('hide') - # $("body").html(data) - #) - #console.log("settingInterval") - # - #this.my_timer = setInterval(get_progress, 1000) - #return false ) $('#suggestive').hide() @@ -146,26 +129,6 @@ $("#pylmm_compute").click(() => #if use_outliers == true # block_outliers() do_ajax_post(url, form_data) - - #$.ajax( - # type: "POST" - # url: url - # data: form_data - # error: (xhr, ajaxOptions, thrownError) => - # alert("Sorry, an error occurred") - # console.log(xhr) - # clearInterval(this.my_timer) - # $('#progress_bar_container').modal('hide') - # $("body").html("We got an error.") - # success: (data) => - # clearInterval(this.my_timer) - # $('#progress_bar_container').modal('hide') - # $("body").html(data) - #) - #console.log("settingInterval") - # - #this.my_timer = setInterval(get_progress, 1000) - #return false ) @@ -184,26 +147,6 @@ $("#rqtl_geno_compute").click(() => #if use_outliers == true # block_outliers() do_ajax_post(url, form_data) - - #$.ajax( - # type: "POST" - # url: url - # data: form_data - # error: (xhr, ajaxOptions, thrownError) => - # alert("Sorry, an error occurred") - # console.log(xhr) - # clearInterval(this.my_timer) - # $('#progress_bar_container').modal('hide') - # $("body").html("We got an error.") - # success: (data) => - # clearInterval(this.my_timer) - # $('#progress_bar_container').modal('hide') - # $("body").html(data) - #) - #console.log("settingInterval") - # - #this.my_timer = setInterval(get_progress, 1000) - #return false ) @@ -218,26 +161,6 @@ $("#plink_compute").click(() => console.log("form_data is:", form_data) do_ajax_post(url, form_data) - - #$.ajax( - # type: "POST" - # url: url - # data: form_data - # error: (xhr, ajaxOptions, thrownError) => - # alert("Sorry, an error occurred") - # console.log(xhr) - # clearInterval(this.my_timer) - # $('#static_progress_bar_container').modal('hide') - # $("body").html("We got an error.") - # success: (data) => - # clearInterval(this.my_timer) - # $('#static_progress_bar_container').modal('hide') - # $("body").html(data) - #) - #console.log("settingInterval") - # - #this.my_timer = setInterval(get_progress, 1000) - #return false ) $("#gemma_compute").click(() => @@ -251,26 +174,6 @@ $("#gemma_compute").click(() => console.log("form_data is:", form_data) do_ajax_post(url, form_data) - - #$.ajax( - # type: "POST" - # url: url - # data: form_data - # error: (xhr, ajaxOptions, thrownError) => - # alert("Sorry, an error occurred") - # console.log(xhr) - # clearInterval(this.my_timer) - # $('#static_progress_bar_container').modal('hide') - # $("body").html("We got an error.") - # success: (data) => - # clearInterval(this.my_timer) - # $('#static_progress_bar_container').modal('hide') - # $("body").html(data) - #) - #console.log("settingInterval") - # - #this.my_timer = setInterval(get_progress, 1000) - #return false ) #$(".submit_special").click(submit_special) diff --git a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js index 92d3183a..c8988cdc 100755 --- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js +++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js @@ -1,5 +1,5 @@ // Generated by CoffeeScript 1.8.0 -var block_outliers, composite_mapping_fields, do_ajax_post, get_progress, mapping_method_fields, showalert, submit_special, toggle_enable_disable, update_time_remaining; +var block_outliers, composite_mapping_fields, do_ajax_post, get_progress, mapping_method_fields, open_mapping_results, showalert, submit_special, toggle_enable_disable, update_time_remaining; submit_special = function() { var url; @@ -86,7 +86,7 @@ do_ajax_post = function(url, form_data) { return function(data) { clearInterval(_this.my_timer); $('#progress_bar_container').modal('hide'); - return $("body").html(data); + return open_mapping_results(data); }; })(this) }); @@ -95,6 +95,15 @@ do_ajax_post = function(url, form_data) { return false; }; +open_mapping_results = function(data) { + return $.colorbox({ + html: data, + href: "#mapping_results_holder", + height: "80%", + width: "80%" + }); +}; + showalert = function(message, alerttype) { return $('#alert_placeholder').append('<div id="alertdiv" class="alert ' + alerttype + '"><a class="close" data-dismiss="alert">�</a><span>' + message + '</span></div>'); }; diff --git a/wqflask/wqflask/static/packages/bootstrap/css/bootstrap.css b/wqflask/wqflask/static/packages/bootstrap/css/bootstrap.css index 3dc73a7a..8326e83f 100755 --- a/wqflask/wqflask/static/packages/bootstrap/css/bootstrap.css +++ b/wqflask/wqflask/static/packages/bootstrap/css/bootstrap.css @@ -1414,6 +1414,7 @@ pre code { margin-right: auto; margin-left: auto; } + .row { margin-right: -15px; margin-left: -15px; @@ -2763,13 +2764,13 @@ select[multiple].form-group-lg .form-control { margin-right: -15px; margin-left: -15px; } -@media (min-width: 768px) { - .form-horizontal .control-label { - padding-top: 7px; - margin-bottom: 0; - text-align: right; - } + +.form-horizontal .control-label { + padding-top: 7px; + margin-bottom: 0; + text-align: right; } + .form-horizontal .has-feedback .form-control-feedback { right: 15px; } @@ -3760,7 +3761,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { top: auto; left: auto; } -@media (min-width: 768px) { + .nav-tabs.nav-justified > li { display: table-cell; width: 1%; @@ -3768,7 +3769,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-tabs.nav-justified > li > a { margin-bottom: 0; } -} + .nav-tabs.nav-justified > li > a { margin-right: 0; border-radius: 4px; @@ -3778,7 +3779,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-tabs.nav-justified > .active > a:focus { border: 1px solid #ddd; } -@media (min-width: 768px) { + .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; @@ -3788,7 +3789,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-tabs.nav-justified > .active > a:focus { border-bottom-color: #fff; } -} + .nav-pills > li { float: left; } @@ -3825,7 +3826,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { top: auto; left: auto; } -@media (min-width: 768px) { + .nav-justified > li { display: table-cell; width: 1%; @@ -3833,7 +3834,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-justified > li > a { margin-bottom: 0; } -} + .nav-tabs-justified { border-bottom: 0; } @@ -3846,7 +3847,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-tabs-justified > .active > a:focus { border: 1px solid #ddd; } -@media (min-width: 768px) { + .nav-tabs-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; @@ -3856,7 +3857,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-tabs-justified > .active > a:focus { border-bottom-color: #fff; } -} + .tab-content > .tab-pane { display: none; visibility: hidden; @@ -4079,7 +4080,7 @@ float: right!important; background-image: none; } } -@media (min-width: 768px) { + .navbar-nav { float: left; margin: 0; @@ -4091,7 +4092,7 @@ float: right!important; padding-top: 15px; padding-bottom: 15px; } -} + .navbar-form { padding: 10px 15px; margin-top: 8px; @@ -4200,25 +4201,25 @@ float: right!important; margin-top: 15px; margin-bottom: 15px; } -@media (min-width: 768px) { - .navbar-text { - float: left; - margin-right: 15px; - margin-left: 15px; - } + +.navbar-text { + float: left; + margin-right: 15px; + margin-left: 15px; } -@media (min-width: 768px) { - .navbar-left { - float: left !important; - } - .navbar-right { - float: right !important; - margin-right: -15px; - } - .navbar-right ~ .navbar-right { - margin-right: 0; - } + + +.navbar-left { + float: left !important; +} +.navbar-right { + float: right !important; + margin-right: -15px; } +.navbar-right ~ .navbar-right { + margin-right: 0; +} + .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; @@ -6061,6 +6062,7 @@ button.close { .carousel-caption .btn { text-shadow: none; } +/* @media screen and (min-width: 768px) { .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, @@ -6088,6 +6090,7 @@ button.close { bottom: 20px; } } +*/ .clearfix:before, .clearfix:after, .dl-horizontal dd:before, @@ -6195,6 +6198,7 @@ button.close { .visible-lg-inline-block { display: none !important; } +/* @media (max-width: 767px) { .visible-xs { display: block !important; @@ -6353,6 +6357,7 @@ button.close { display: table-cell !important; } } +*/ .visible-print-block { display: none !important; } diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html index 3d777866..fc1edf2a 100755 --- a/wqflask/wqflask/templates/collections/view.html +++ b/wqflask/wqflask/templates/collections/view.html @@ -69,9 +69,9 @@ <th>Description</th> <th>Location</th> <th>Mean</th> - <th>Max LRS</th> + <th>Max LRS<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th> <th>Max LRS Location</th> - <th>Additive Effect</th> + <th>Additive Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th> </tr> </thead> @@ -119,6 +119,13 @@ <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script> <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( { "aoColumns": [ @@ -130,7 +137,7 @@ "sWidth": "15%" }, { "sType": "cust-txt" }, { "sType": "natural", - "sWidth": "10%" }, + "sWidth": "12%" }, { "sType": "natural", "sWidth": "15%" }, { "sType": "cust-txt" } @@ -143,7 +150,7 @@ null, null ], - "sDom": "ftir", + "sDom": "tir", "iDisplayLength": -1, "autoWidth": true, "bLengthChange": true, diff --git a/wqflask/wqflask/templates/index_page.html b/wqflask/wqflask/templates/index_page.html index adc004a5..eb4f883c 100755 --- a/wqflask/wqflask/templates/index_page.html +++ b/wqflask/wqflask/templates/index_page.html @@ -65,7 +65,7 @@ <!-- GET ANY SEARCH --> <div class="form-group"> - <label for="tfor" class="col-xs-1 control-label" style="width: 65px !important;">Search:</label> + <label for="tfor" class="col-xs-1 control-label" style="width: 65px !important;">Search for:</label> <div class="col-xs-10 controls"> <textarea name="search_terms" rows="2" class="form-control search-query" style="width: 450px !important;" id="tfor"></textarea> </div> @@ -93,7 +93,7 @@ <input id="btsearch" type="submit" class="btn btn-primary form-control" value="Search"> </div> <div class="col-xs-4 controls" style="width: 150px !important;"> - <input id="make_default" type="submit" class="btn btn-default form-control" value="Make Default"> + <input id="make_default" class="btn btn-default form-control" value="Make Default"> </div> </div> @@ -103,11 +103,9 @@ </fieldset> </form> </section> - </div> - <div style="padding-left:120px" class="col-xs-6" style="width: 600px !important;"> <section id="advanced"> <div class="page-header"> - <h1>Advanced commands</h1> + <h2>Advanced commands</h2> </div> <p>GeneNetwork supports a variety of advanced searches.</p> @@ -148,6 +146,8 @@ scores between 9 and 999.</li>--> </ul> </section> + </div> + <div style="padding-left:120px" class="col-xs-6" style="width: 600px !important;"> <!-- <section id="tour-info"> <div class="page-header"> diff --git a/wqflask/wqflask/templates/interval_mapping.html b/wqflask/wqflask/templates/interval_mapping.html index 7a03ce34..82a96ba1 100755 --- a/wqflask/wqflask/templates/interval_mapping.html +++ b/wqflask/wqflask/templates/interval_mapping.html @@ -1,120 +1,116 @@ -{% extends "base.html" %}
-{% block title %}Interval Mapping{% endblock %}
-{% block css %}
-<!-- <link rel="stylesheet" type="text/css" href="/static/new/css/interval_mapping.css" />-->
- <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
- <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
- <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
- <link rel="stylesheet" type="text/css" href="/static/new/css/d3-tip.min.css" />
- <link rel="stylesheet" type="text/css" href="/static/new/css/panelutil.css" />
-{% endblock %}
-{% block content %} <!-- Start of body -->
-
- {{ header("Mapping",
- '{}: {}'.format(this_trait.name, this_trait.description_fmt)) }}
-
- <div class="container">
- <div>
- <h2>
- Whole Genome Mapping
- </h2>
- <form style ='float: left; padding: 5px;' id="exportform" action="export" method="post">
- <input type="hidden" id="data" name="data" value="">
- <input type="hidden" id="filename" name="filename" value="">
- <input type="submit" id="export" value="Download SVG">
- </form>
- <form style ='float: left; padding: 5px;' id="exportpdfform" action="export_pdf" method="post">
- <input type="hidden" id="data" name="data" value="">
- <input type="hidden" id="filename" name="filename" value="">
- <input type="submit" id="export_pdf" value="Download PDF">
- </form>
- </div>
- <div id="chart_container">
- <div class="qtlcharts" id="topchart">
-
- </div>
- </div>
- <div>
- <h2>
- Results
- </h2>
- </div>
- <table cellpadding="0" cellspacing="0" border="0" id="qtl_results" class="table table-hover table-striped table-bordered">
- <thead>
- <tr>
- <td>Index</td>
- <td>LRS Score</td>
- <td>Chr</td>
- <td>Mb</td>
- <td>Locus</td>
- <td>Additive Effect</td>
- </tr>
- </thead>
- <tbody>
- {% for marker in qtl_results %}
- <tr>
- <td>{{ loop.index }}</td>
- <td>{{ marker.lrs_value|float }}</td>
- <td>{{ marker.chr|int }}</td>
- <td>{{ marker.Mb|float }}</td>
- <td>{{ marker.name }}</td>
- <td>{{ marker.additive|float }}</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
-
- </div>
-
- <!-- End of body -->
-
-{% endblock %}
-
-{% block js %}
- <script>
- js_data = {{ js_data | safe }}
- </script>
-
- <!--[if lt IE 9]>
-<!-- <script language="javascript" type="text/javascript" src="/static/packages/jqplot/excanvas.js"></script>-->
- <![endif]-->
- <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
- <script language="javascript" type="text/javascript" src="/static/new/js_external/d3-tip.min.js"></script>
- <script language="javascript" type="text/javascript" src="/static/new/javascript/panelutil.js"></script>
- <script language="javascript" type="text/javascript" src="/static/new/javascript/chr_interval_map.js"></script>
- <script language="javascript" type="text/javascript" src="/static/new/javascript/lod_chart.js"></script>
- <script language="javascript" type="text/javascript" src="/static/new/javascript/create_lodchart.js"></script>
- <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.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.scientific.js"></script>
- <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
- <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
- <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
-
- <script type="text/javascript" charset="utf-8">
- $(document).ready( function () {
- console.time("Creating table");
- $('#qtl_results').dataTable( {
- //"sDom": "<<'span3'l><'span3'T><'span4'f>'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>",
- "sDom": "lTftipr",
- "oTableTools": {
- "aButtons": [
- "copy",
- "print",
- {
- "sExtends": "collection",
- "sButtonText": 'Save <span class="caret" />',
- "aButtons": [ "csv", "xls", "pdf" ]
- }
- ],
- "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf"
- },
- "iDisplayLength": 50,
- "bLengthChange": true,
- "bDeferRender": true,
- "bSortClasses": false
- } );
- console.timeEnd("Creating table");
- });
- </script>
+{% block css %} +<!-- <link rel="stylesheet" type="text/css" href="/static/new/css/interval_mapping.css" />--> + <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" /> + <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" /> + <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/d3-tip.min.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/panelutil.css" /> +{% endblock %} +{% block content %} <!-- Start of body --> + + + <div id="mapping_results" class="container"> + <div> + <h2> + Whole Genome Mapping + </h2> + <form style ='float: left; padding: 5px;' id="exportform" action="export" method="post"> + <input type="hidden" id="data" name="data" value=""> + <input type="hidden" id="filename" name="filename" value=""> + <input type="submit" id="export" value="Download SVG"> + </form> + <form style ='float: left; padding: 5px;' id="exportpdfform" action="export_pdf" method="post"> + <input type="hidden" id="data" name="data" value=""> + <input type="hidden" id="filename" name="filename" value=""> + <input type="submit" id="export_pdf" value="Download PDF"> + </form> + </div> + <div id="chart_container"> + <div class="qtlcharts" id="topchart"> + + </div> + </div> + <div> + <h2> + Results + </h2> + </div> + <table cellpadding="0" cellspacing="0" border="0" id="qtl_results" class="table table-hover table-striped table-bordered"> + <thead> + <tr> + <td>Index</td> + <td>LRS Score</td> + <td>Chr</td> + <td>Mb</td> + <td>Locus</td> + <td>Additive Effect</td> + </tr> + </thead> + <tbody> + {% for marker in qtl_results %} + <tr> + <td>{{ loop.index }}</td> + <td>{{ marker.lrs_value|float }}</td> + <td>{{ marker.chr|int }}</td> + <td>{{ marker.Mb|float }}</td> + <td>{{ marker.name }}</td> + <td>{{ marker.additive|float }}</td> + </tr> + {% endfor %} + </tbody> + </table> + + </div> + + <!-- End of body --> + +{% endblock %} + +{% block js %} + <script> + js_data = {{ js_data | safe }} + </script> + + <!--[if lt IE 9]> +<!-- <script language="javascript" type="text/javascript" src="/static/packages/jqplot/excanvas.js"></script>--> + <![endif]--> + <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/js_external/d3-tip.min.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/panelutil.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/chr_interval_map.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/lod_chart.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/create_lodchart.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.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.scientific.js"></script> + <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script> + <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script> + <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script> + + <script type="text/javascript" charset="utf-8"> + $(document).ready( function () { + console.time("Creating table"); + $('#qtl_results').dataTable( { + //"sDom": "<<'span3'l><'span3'T><'span4'f>'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>", + "sDom": "lTftipr", + "oTableTools": { + "aButtons": [ + "copy", + "print", + { + "sExtends": "collection", + "sButtonText": 'Save <span class="caret" />', + "aButtons": [ "csv", "xls", "pdf" ] + } + ], + "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf" + }, + "iDisplayLength": 50, + "bLengthChange": true, + "bDeferRender": true, + "bSortClasses": false + } ); + console.timeEnd("Creating table"); + }); + </script> {% endblock %}
\ No newline at end of file diff --git a/wqflask/wqflask/templates/new_security/login_user.html b/wqflask/wqflask/templates/new_security/login_user.html index ecf8278c..8ad0c79e 100755 --- a/wqflask/wqflask/templates/new_security/login_user.html +++ b/wqflask/wqflask/templates/new_security/login_user.html @@ -3,6 +3,9 @@ {% block content %} <div class="container"> + + {{ flash_me() }} + <div class="page-header"> <h1>Login</h1> </div> @@ -24,15 +27,15 @@ <form class="form-horizontal" action="/n/login" method="POST" name="login_user_form"> <fieldset> <div class="form-group"> - <label class="col-xs-2 control-label" for="email_address">Email Address</label> - <div class="col-xs-10"> + <label style="text-align:left;" class="col-xs-1 control-label" for="email_address">Email Address</label> + <div style="margin-left:20px;" class="col-xs-10"> <input id="email_address" class="focused" name="email_address" type="text" value=""> </div> </div> <div class="form-group"> - <label class="col-xs-2 control-label" for="password">Password</label> - <div class="col-xs-3 controls"> + <label style="text-align:left;" class="col-xs-1 control-label" for="password">Password</label> + <div style="margin-left:20px;" class="col-xs-3 controls"> <input id="password" name="password" type="password" value=""> <br /> <a href="/n/forgot_password">Forgot your password?</a><br/> @@ -41,17 +44,15 @@ <div class="form-group"> - <label class="col-xs-2 control-label" for="remember"></label> - <div class="col-xs-3 controls"> - <label class="checkbox"> - <input id="remember" name="remember" type="checkbox" value="y"> Remember me - </label> + <label class="col-xs-1 control-label" for="remember"></label> + <div style="margin-left:20px;" class="col-xs-3 controls"> + <input id="remember" name="remember" type="checkbox" value="y"> <b>Remember me</b> </div> </div> <div class="form-group"> - <label class="col-xs-2 control-label" for="submit"></label> - <div class="col-xs-3 controls"> + <label class="col-xs-1 control-label" for="submit"></label> + <div style="margin-left:20px;" class="col-xs-3 controls"> <input id="next" name="next" type="hidden" value=""> <input class="btn btn-primary" id="submit" name="submit" type="submit" value="Sign in"> </div> diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html index 055ab979..731f6fbd 100755 --- a/wqflask/wqflask/templates/search_result_page.html +++ b/wqflask/wqflask/templates/search_result_page.html @@ -49,7 +49,13 @@ <thead> <tr> {% for header in header_fields %} + {% if header == 'Max LRS' %} + <th>{{header}}<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th> + {% elif header == 'Additive Effect' %} + <th>{{header}}<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th> + {% else %} <th>{{header}}</th> + {% endif %} {% endfor %} </tr> </thead> @@ -140,17 +146,11 @@ $(document).ready( function () { - /*num_columns = $('#trait_table').find('tr:first th').length; - - nul_cols = [] - for (i=0; i<num_columns - 1, i++) { - $('#trait_table > tbody > tr').each(function() { - if ($(this).find('td:eq(i)').html()){ - continue; - } - }); - nul_cols.push(i) - }*/ + $('#trait_table tr').click(function(event) { + if (event.target.type !== 'checkbox') { + $(':checkbox', this).trigger('click'); + } + }); console.time("Creating table"); {% if dataset.type == 'ProbeSet' %} @@ -166,7 +166,7 @@ "sWidth": "15%" }, { "sType": "cust-txt" }, { "sType": "natural", - "sWidth": "10%" }, + "sWidth": "12%" }, { "sType": "natural", "sWidth": "15%" }, { "sType": "cust-txt" } diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html index 5d0437df..a1723ef8 100755 --- a/wqflask/wqflask/templates/show_trait.html +++ b/wqflask/wqflask/templates/show_trait.html @@ -6,6 +6,7 @@ <link rel="stylesheet" type="text/css" href="/static/new/css/bar_chart.css" /> <link rel="stylesheet" type="text/css" href="/static/new/css/box_plot.css" /> <link rel="stylesheet" type="text/css" href="/static/new/css/panelutil.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/scatter-matrix.css" /> <link rel="stylesheet" type="text/css" href="/static/new/css/d3-tip.min.css" /> <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" /> <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" /> @@ -40,7 +41,7 @@ <div class="panel-heading"> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> - Statistics + <span class="glyphicon glyphicon-chevron-down"></span> Statistics </a> </h3> </div> @@ -54,7 +55,7 @@ <div class="panel-heading"> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> - Calculate Correlations + <span class="glyphicon glyphicon-chevron-down"></span> Calculate Correlations </a> </h3> </div> @@ -68,7 +69,7 @@ <div class="panel-heading"> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> - Mapping Tools + <span class="glyphicon glyphicon-chevron-down"></span> Mapping Tools </a> </h3> </div> @@ -82,7 +83,7 @@ <div class="panel-heading"> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true"> - Review and Edit Data + <span class="glyphicon glyphicon-chevron-up"></span> Review and Edit Data </a> </h3> </div> @@ -122,6 +123,7 @@ <script type="text/javascript" src="/static/new/javascript/histogram.js"></script> <script type="text/javascript" src="/static/new/javascript/box_plot.js"></script> <script type="text/javascript" src="/static/new/javascript/scatterplot.js"></script> + <script type="text/javascript" src="/static/new/javascript/scatter-matrix.js"></script> <script type="text/javascript" src="/static/new/javascript/draw_probability_plot.js"></script> <script type="text/javascript" src="/static/new/javascript/compare_traits_scatterplot.js"></script> @@ -162,6 +164,16 @@ }; $(document).ready( function () { + + $('.panel-heading').find('a').click(function () { + if ($(this).hasClass('collapsed')){ + $(this).find('.glyphicon-chevron-down').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); + } + else { + $(this).find('.glyphicon-chevron-up').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); + } + }); + console.time("Creating table"); {% if sample_groups[0].se_exists() %} diff --git a/wqflask/wqflask/templates/show_trait_mapping_tools.html b/wqflask/wqflask/templates/show_trait_mapping_tools.html index 84ddfd53..6f5fe237 100755 --- a/wqflask/wqflask/templates/show_trait_mapping_tools.html +++ b/wqflask/wqflask/templates/show_trait_mapping_tools.html @@ -1,5 +1,7 @@ <div> + <div class="col-xs-6"> <div class="tabbable"> <!-- Only required for left/right tabs --> + <ul class="nav nav-pills"> <li class="active"> <a href="#interval_mapping" data-toggle="tab">Interval Mapping</a> @@ -27,22 +29,22 @@ <div class="tab-pane active" id="interval_mapping"> <div style="padding: 20px" class="form-horizontal"> <div class="mapping_method_fields form-group"> - <label for="mapping_permutations" class="col-xs-1 control-label">Permutations</label> - <div style="margin-left: 20px;" class="col-xs-2 controls"> + <label for="mapping_permutations" class="col-xs-2 control-label">Permutations</label> + <div style="margin-left: 20px;" class="col-xs-4 controls"> <input name="num_perm_reaper" value="2000" type="text" class="form-control"> </div> </div> <div class="mapping_method_fields form-group"> - <label for="mapping_bootstraps" class="col-xs-1 control-label" title="Bootstrapping Resamples">Bootstrap</label> - <div style="margin-left: 20px;" class="col-xs-2 controls"> + <label for="mapping_bootstraps" class="col-xs-2 control-label" title="Bootstrapping Resamples">Bootstrap</label> + <div style="margin-left: 20px;" class="col-xs-4 controls"> <input name="mapping_bootstraps" value="2000" type="text" class="form-control"> </div> </div> <div class="mapping_method_fields form-group"> - <label class="col-xs-2 control-label">Display Additive Effect</label> - <div class="col-xs-4 controls" id="display_additive_effect"> + <label style="text-align:left;" class="col-xs-12 control-label">Display Additive Effect</label> + <div class="col-xs-12 controls" id="display_additive_effect"> <label class="radio-inline"> <input type="radio" name="display_additive" id="display_additive" value="yes" checked=""> Yes @@ -55,8 +57,8 @@ </div> <div class="mapping_method_fields form-group"> - <label class="col-xs-2 control-label">Manhattan Plot</label> - <div class="col-xs-4 controls"> + <label style="text-align:left;" class="col-xs-12 control-label">Manhattan Plot</label> + <div class="col-xs-12 controls"> <label class="radio-inline"> <input type="radio" name="manhattan_plot_reaper" value="true"> Yes @@ -67,16 +69,14 @@ </label> </div> </div> - </div> - <div class="form-group"> - <label for="interval_mapping_submit" class="col-xs-1 control-label"></label> - <div style="margin-left:35px;" class="col-xs-4 controls"> - <button id="interval_mapping_compute" class="btn submit_special btn-primary" data-url="/interval_mapping" title="Compute Interval Mapping"> - <i class="icon-ok-circle icon-white"></i> Compute - </button> + <div class="form-group"> + <div style="padding-left:15px;" class="controls"> + <button id="interval_mapping_compute" class="btn submit_special btn-primary" data-url="/interval_mapping" title="Compute Interval Mapping"> + <i class="icon-ok-circle icon-white"></i> Open Mapping Tool + </button> + </div> </div> </div> - <div id="alert_placeholder"></div> </div> <div class="tab-pane" id="pylmm"> @@ -119,8 +119,7 @@ </button> </div> </div> - <div id="alert_placeholder"></div> - + </div> <div class="tab-pane" id="rqtl_geno"> @@ -167,7 +166,6 @@ </button> </div> </div> - <div id="alert_placeholder"></div> </div> @@ -190,8 +188,6 @@ </button> </div> </div> - <div id="alert_placeholder"></div> - </div> <div class="tab-pane" id="gemma"> @@ -212,10 +208,23 @@ </button> </div> </div> - <div id="alert_placeholder"></div> - </div> {% endif %} </div> </div> + </div> + <div class="col-xs-6"> + <dl> + <dt>Interval Mapping</dt> + <dd>Interval mapping is a process in which the statistical significance of a hypothetical QTL is evaluated at regular points across a chromosome, even in the absence of explicit genotype data at those points.</dd> + <dt>pyLMM</dt> + <dd>pyLMM is a fast and lightweight linear mixed-model (LMM) solver for use in genome-wide association studies (GWAS).</dd> + <dt>R/qtl</dt> + <dd>R/qtl is an extensible, interactive environment for mapping quantitative trait loci (QTL) in experimental crosses.</dd> + </dl> + </div> + <div id="alert_placeholder"></div> + <div id="mapping_result_holder_wrapper" style="display:none;"> + <div id="mapping_result_holder"></div> + </div> </div>
\ No newline at end of file diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html index 11f5ba68..9ce60c0b 100755 --- a/wqflask/wqflask/templates/show_trait_statistics_new.html +++ b/wqflask/wqflask/templates/show_trait_statistics_new.html @@ -78,10 +78,28 @@ <i class="icon-tint"></i> Color by Trait </button> </div> - <div id="bar_chart_container"> + </div> + <div class="row" style="height: 0px"> + <div id="bar_chart_legend" style="margin-left: 900px; margin-top:50px; positive: relative;"> + <span id="legend-left"></span> + <span id="legend-colors"> + <!-- + <svg height="10" width="90"> + <rect x="0" width="15" height="10" style="fill: rgb(0, 0, 0);"></rect> + <rect x="15" width="15" height="10" style="fill: rgb(50, 0, 0);"></rect> + <rect x="30" width="15" height="10" style="fill: rgb(100, 0, 0);"></rect> + <rect x="45" width="15" height="10" style="fill: rgb(150, 0, 0);"></rect> + <rect x="60" width="15" height="10" style="fill: rgb(200, 0, 0);"></rect> + <rect x="75" width="15" height="10" style="fill: rgb(255, 0, 0);"></rect> + </svg> + --> + </span> + <span id="legend-right"></span> + </div> + </div> + <div style="margin-left: 20px; margin-right: 20px;" class="row" id="bar_chart_container"> <div id="bar_chart" class="barchart"></div> </div> - </div> </div> <div class="tab-pane" id="probability_plot"> <div id="probability_plot_container"> |