From 79310b037ad6ddb2da8f8ebd2ec9e892f3004ba2 Mon Sep 17 00:00:00 2001 From: zsloan Date: Thu, 6 Jul 2017 16:52:44 +0000 Subject: Improved table appearance for global searches Scatterplot Matrix works again Added the first few changes to get covariates working (not done yet) --- .../javascript/get_covariates_from_collection.js | 238 +++++++++++++++++++++ .../new/javascript/get_traits_from_collection.js | 1 + .../static/new/javascript/scatter-matrix.js | 2 +- .../wqflask/static/new/javascript/show_trait.js | 28 ++- wqflask/wqflask/templates/collections/list.html | 9 +- wqflask/wqflask/templates/gsearch_gene.html | 13 +- wqflask/wqflask/templates/gsearch_pheno.html | 13 +- wqflask/wqflask/templates/show_trait.html | 6 +- .../wqflask/templates/show_trait_statistics.html | 8 +- 9 files changed, 298 insertions(+), 20 deletions(-) create mode 100644 wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js diff --git a/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js b/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js new file mode 100644 index 00000000..c267b045 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js @@ -0,0 +1,238 @@ +// Generated by CoffeeScript 1.8.0 +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"); + +collection_list = null; + +this_trait_data = null; + +selected_traits = {}; + +collection_click = function() { + var this_collection_url; + console.log("Clicking on:", $(this)); + this_collection_url = $(this).find('.collection_name').prop("href"); + this_collection_url += "&json"; + console.log("this_collection_url", this_collection_url); + collection_list = $("#collections_holder").html(); + return $.ajax({ + dataType: "json", + url: this_collection_url, + success: process_traits + }); +}; + +submit_click = function() { + 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() { + var this_dataset, this_trait, this_trait_url; + this_trait = $(this).parents('tr').find('.trait').text(); + console.log("this_trait is:", this_trait); + this_dataset = $(this).parents('tr').find('.dataset').text(); + console.log("this_dataset is:", this_dataset); + this_trait_url = "/trait/get_sample_data?trait=" + this_trait + "&dataset=" + this_dataset; + return $.ajax({ + dataType: "json", + url: this_trait_url, + async: false, + success: add_trait_data + }); + }); + console.log("SELECTED_TRAITS IS:", selected_traits); + trait_names = []; + 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); + } + 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)); + trait = $(this).parent().find('.trait').text(); + dataset = $(this).parent().find('.dataset').text(); + console.log("BEFORE COVAR:", trait + ":" + dataset) + $('input[name=covariates]').val(trait + ":" + dataset) + console.log("AFTER COVAR:", $('input[name=covariates]').val()) + return $.colorbox.close(); + // this_trait_url = "/trait/get_sample_data?trait=" + trait + "&dataset=" + dataset; + // console.log("this_trait_url", this_trait_url); + // $.ajax({ + // dataType: "json", + // url: this_trait_url, + // success: get_trait_data + // }); + // return $.colorbox.close(); +}; + +add_trait_data = function(trait_data, textStatus, jqXHR) { + var trait_name, trait_sample_data; + trait_name = trait_data[0]; + trait_sample_data = trait_data[1]; + selected_traits[trait_name] = trait_sample_data; + return console.log("selected_traits:", selected_traits); +}; + +get_trait_data = function(trait_data, textStatus, jqXHR) { + var sample, samples, this_trait_vals, trait_sample_data, vals, _i, _len; + console.log("trait:", trait_data[0]); + trait_sample_data = trait_data[1]; + console.log("trait_sample_data:", trait_sample_data); + samples = $('input[name=allsamples]').val().split(" "); + vals = []; + for (_i = 0, _len = samples.length; _i < _len; _i++) { + sample = samples[_i]; + if (__indexOf.call(Object.keys(trait_sample_data), sample) >= 0) { + vals.push(parseFloat(trait_sample_data[sample])); + } else { + vals.push(null); + } + } + if ($('input[name=samples]').length < 1) { + $('#hidden_inputs').append(''); + } + $('#hidden_inputs').append(''); + this_trait_vals = get_this_trait_vals(samples); + console.log("THE LENGTH IS:", $('input[name=vals]').length); + return color_by_trait(trait_sample_data); +}; + +get_this_trait_vals = function(samples) { + var sample, this_trait_vals, this_val, this_vals_json, _i, _len; + this_trait_vals = []; + for (_i = 0, _len = samples.length; _i < _len; _i++) { + sample = samples[_i]; + this_val = parseFloat($("input[name='value:" + sample + "']").val()); + if (!isNaN(this_val)) { + this_trait_vals.push(this_val); + } else { + this_trait_vals.push(null); + } + } + console.log("this_trait_vals:", this_trait_vals); + this_vals_json = '[' + this_trait_vals.toString() + ']'; + return this_trait_vals; +}; + +assemble_into_json = function(this_trait_vals) { + var json_data, json_ids, num_traits, samples; + num_traits = $('input[name=vals]').length; + samples = $('input[name=samples]').val(); + json_ids = samples; + json_data = '[' + this_trait_vals; + $('input[name=vals]').each((function(_this) { + return function(index, element) { + return json_data += ',' + $(element).val(); + }; + })(this)); + json_data += ']'; + return [json_ids, json_data]; +}; + +color_by_trait = function(trait_sample_data, textStatus, jqXHR) { + console.log('in color_by_trait:', trait_sample_data); + return root.bar_chart.color_by_trait(trait_sample_data); +}; + +process_traits = function(trait_data, textStatus, jqXHR) { + var the_html, trait, _i, _len; + console.log('in process_traits with trait_data:', trait_data); + the_html = ""; + the_html += " "; + the_html += ""; + the_html += ""; + the_html += ""; + for (_i = 0, _len = trait_data.length; _i < _len; _i++) { + trait = trait_data[_i]; + the_html += ""; + the_html += ""; + the_html += ""; + the_html += ""; + the_html += ""; + the_html += ""; + } + the_html += ""; + the_html += "
RecordData SetDescriptionMean
" + trait.name + "" + trait.dataset + "" + trait.description + "" + (trait.mean || ' ') + "
"; + the_html += "" + $("#collections_holder").html(the_html); + return $('#collections_holder').colorbox.resize(); +}; + +back_to_collections = function() { + console.log("collection_list:", collection_list); + $("#collections_holder").html(collection_list); + $(document).on("click", ".collection_line", collection_click); + return $('#collections_holder').colorbox.resize(); +}; + +console.log("inside get_traits_from_collection"); +$(".collection_line").on("click", collection_click); +$("#submit").on("click", submit_click); +$(".trait").on("click", trait_click); +$("#back_to_collections").on("click", back_to_collections); \ No newline at end of file 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 bcd83889..4abb0735 100644 --- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js +++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js @@ -215,6 +215,7 @@ process_traits = function(trait_data, textStatus, jqXHR) { } the_html += ""; the_html += ""; + the_html += "" $("#collections_holder").html(the_html); return $('#collections_holder').colorbox.resize(); }; diff --git a/wqflask/wqflask/static/new/javascript/scatter-matrix.js b/wqflask/wqflask/static/new/javascript/scatter-matrix.js index 278a93bc..31cb384b 100644 --- a/wqflask/wqflask/static/new/javascript/scatter-matrix.js +++ b/wqflask/wqflask/static/new/javascript/scatter-matrix.js @@ -60,7 +60,7 @@ ScatterMatrix.prototype.render = function () { .style({'float':'left', 'margin-right':'50px'}) var svg = container.append('div') .attr('class', 'scatter-matrix-svg') - .style({'float':'right'}) + .style({'float':'left'}) .html('Loading data...'); this.onData(function() { diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js index bb1af326..f232c6eb 100644 --- a/wqflask/wqflask/static/new/javascript/show_trait.js +++ b/wqflask/wqflask/static/new/javascript/show_trait.js @@ -74,6 +74,11 @@ return open_trait_selection(); }; })(this)); + d3.select("#select_covariate").on("click", (function(_this) { + return function() { + return open_covariate_selection(); + }; + })(this)); d3.select("#clear_compare_trait").on("click", (function(_this) { return function() { return $('.scatter-matrix-container').remove(); @@ -84,7 +89,28 @@ return function() { $.colorbox({ inline: true, - href: "#collections_holder" + href: "#collections_holder", + onComplete: function(){ + console.log("before get script") + $.getScript("/static/new/javascript/get_traits_from_collection.js"); + console.log("after get script") + } + }); + return $('a.collection_name').attr('onClick', 'return false'); + }; + })(this)); + }; + open_covariate_selection = function() { + return $('#collections_holder').load('/collections/list?select_covariates #collections_list', (function(_this) { + return function() { + $.colorbox({ + inline: true, + href: "#collections_holder", + onComplete: function(){ + console.log("before get script") + $.getScript("/static/new/javascript/get_covariates_from_collection.js"); + console.log("after get script") + } }); return $('a.collection_name').attr('onClick', 'return false'); }; diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html index b1284895..cc60ecff 100644 --- a/wqflask/wqflask/templates/collections/list.html +++ b/wqflask/wqflask/templates/collections/list.html @@ -65,7 +65,11 @@ {% endfor %} - + {% if "color_by_trait" in params %} + + {% else %} + + {% endif %} @@ -84,9 +88,6 @@ - {% if "color_by_trait" in params %} - - {% endif %} - - + + - diff --git a/wqflask/wqflask/templates/show_trait_statistics.html b/wqflask/wqflask/templates/show_trait_statistics.html index 1fc470ff..d4a8c1f7 100644 --- a/wqflask/wqflask/templates/show_trait_statistics.html +++ b/wqflask/wqflask/templates/show_trait_statistics.html @@ -13,12 +13,12 @@
  • Probability Plot
    • - @@ -119,7 +119,8 @@ - {% if g.user_session.user_ob %}
    @@ -147,7 +149,7 @@
    - {% endif %}--> + {% endif %} -- cgit v1.2.3