aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzsloan2017-07-06 16:52:44 +0000
committerzsloan2017-07-06 16:52:44 +0000
commit79310b037ad6ddb2da8f8ebd2ec9e892f3004ba2 (patch)
tree526255597c76ff071d4545d1e80df855313a5658
parentadbdd62dfe4817b9d4bb6021f73de694199810b7 (diff)
downloadgenenetwork2-79310b037ad6ddb2da8f8ebd2ec9e892f3004ba2.tar.gz
Improved table appearance for global searches
Scatterplot Matrix works again Added the first few changes to get covariates working (not done yet)
-rw-r--r--wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js238
-rw-r--r--wqflask/wqflask/static/new/javascript/get_traits_from_collection.js1
-rw-r--r--wqflask/wqflask/static/new/javascript/scatter-matrix.js2
-rw-r--r--wqflask/wqflask/static/new/javascript/show_trait.js28
-rw-r--r--wqflask/wqflask/templates/collections/list.html9
-rw-r--r--wqflask/wqflask/templates/gsearch_gene.html13
-rw-r--r--wqflask/wqflask/templates/gsearch_pheno.html13
-rw-r--r--wqflask/wqflask/templates/show_trait.html6
-rw-r--r--wqflask/wqflask/templates/show_trait_statistics.html8
9 files changed, 298 insertions, 20 deletions
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('<input type="hidden" name="samples" value="[' + samples.toString() + ']" />');
+ }
+ $('#hidden_inputs').append('<input type="hidden" name="vals" value="[' + vals.toString() + ']" />');
+ 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 = "<button id='back_to_collections' class='btn btn-inverse btn-small'>";
+ the_html += "<i class='icon-white icon-arrow-left'></i> Back </button>";
+ the_html += " <button id='submit' class='btn btn-primary btn-small'> Submit </button>";
+ the_html += "<table class='table table-hover'>";
+ the_html += "<thead><tr><th></th><th>Record</th><th>Data Set</th><th>Description</th><th>Mean</th></tr></thead>";
+ the_html += "<tbody>";
+ for (_i = 0, _len = trait_data.length; _i < _len; _i++) {
+ trait = trait_data[_i];
+ the_html += "<tr class='trait_line'>";
+ the_html += "<td class='select_trait'><input type='checkbox' name='selectCheck' class='checkbox edit_sample_checkbox'></td>";
+ the_html += "<td class='trait'>" + trait.name + "</td>";
+ the_html += "<td class='dataset'>" + trait.dataset + "</td>";
+ the_html += "<td>" + trait.description + "</td>";
+ the_html += "<td>" + (trait.mean || '&nbsp;') + "</td></tr>";
+ }
+ the_html += "</tbody>";
+ the_html += "</table>";
+ the_html += "<script type='text/javascript' src='/static/new/javascript/get_covariates_from_collection.js'></script>"
+ $("#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 += "</tbody>";
the_html += "</table>";
+ the_html += "<script type='text/javascript' src='/static/new/javascript/get_traits_from_collection.js'></script>"
$("#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('<em>Loading data...</em>');
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 %}
</tbody>
</table>
-
+ {% if "color_by_trait" in params %}
+ <script language="javascript" type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script>
+ {% else %}
+ <script language="javascript" type="text/javascript" src="/static/new/javascript/get_covariates_from_collection.js"></script>
+ {% endif %}
</div>
</div>
@@ -84,9 +88,6 @@
<script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colReorder.js"></script>
- {% if "color_by_trait" in params %}
- <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script>
- {% endif %}
<script>
$('#trait_table').dataTable( {
"drawCallback": function( settings ) {
diff --git a/wqflask/wqflask/templates/gsearch_gene.html b/wqflask/wqflask/templates/gsearch_gene.html
index c1f039c7..c2f687fd 100644
--- a/wqflask/wqflask/templates/gsearch_gene.html
+++ b/wqflask/wqflask/templates/gsearch_gene.html
@@ -28,7 +28,7 @@
</form>
<br />
<div style="width: 2000px;">
- <table width="2000px" id="trait_table" class="table table-hover table-striped nowrap" style="float: left;">
+ <table width="2000px" id="trait_table" class="display dataTable nowrap" style="float: left;">
<thead>
<tr>
<th></th>
@@ -155,9 +155,14 @@
"order": [[1, "asc" ]],
"sDom": "tir",
"autoWidth": false,
- "bDeferRender": true,
- "scrollY": "800px",
- "scrollCollapse": false
+ "deferRender": true,
+ "bSortClasses": false,
+ "scrollY": "600px",
+ "scrollCollapse": true,
+ "scroller": true,
+ "scrollX": true,
+ "paging": false,
+ "orderClasses": true
} );
console.timeEnd("Creating table");
diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index 46a80a09..7a8ca07b 100644
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -28,7 +28,7 @@
</form>
<br />
<div>
- <table id="trait_table" class="table table-hover table-striped nowrap" style="float: left;">
+ <table id="trait_table" class="display dataTable nowrap" style="float: left;">
<thead>
<tr>
<th></th>
@@ -148,9 +148,14 @@
"order": [[1, "asc" ]],
"sDom": "tir",
"autoWidth": false,
- "bDeferRender": true,
- "scrollY": "800px",
- "scrollCollapse": false
+ "deferRender": true,
+ "bSortClasses": false,
+ "scrollY": "600px",
+ "scrollCollapse": true,
+ "scroller": true,
+ "scrollX": true,
+ "paging": false,
+ "orderClasses": true
} );
console.timeEnd("Creating table");
});
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 5a880647..7c4dbc60 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -42,6 +42,7 @@
<input type="hidden" name="temp_uuid" id="temp_uuid" value="{{ temp_uuid }}">
<input type="hidden" name="genofile" value="">
+ <input type="hidden" name="covariates" value="">
<div class="container">
<div class="panel-group" id="accordion">
@@ -140,11 +141,10 @@
<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>
-
+ <script type="text/javascript" src="/static/new/javascript/compare_traits_scatterplot.js"></script>
+
<script type="text/javascript" src="/static/new/javascript/show_trait_mapping_tools.js"></script>
<script type="text/javascript" src="/static/new/javascript/show_trait.js"></script>
- <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script>
<script type="text/javascript" src="/static/new/javascript/validation.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/packages/jsPDF/libs/FileSaver.js/FileSaver.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/packages/jsPDF/libs/Blob.js/BlobBuilder.js"></script>
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 @@
<li>
<a href="#probability_plot" data-toggle="tab">Probability Plot</a>
</li>
- <!--
{% if g.user_session.user_ob %}
<li>
<a href="#scatterplot_matrix" data-toggle="tab">Scatterplot Matrix</a>
</li>
{% endif %}
+ <!--
<li>
<a href="#box_plot_tab" data-toggle="tab">Box Plot</a>
</li>-->
@@ -119,7 +119,8 @@
</div>
</div>
-<!-- <div class="tab-pane" id="box_plot_tab">
+<!--
+ <div class="tab-pane" id="box_plot_tab">
{% if sample_groups|length > 1 %}
<select class="box_plot_samples_group">
{% for group, pretty_group in sample_group_types.items() %}
@@ -132,6 +133,7 @@
<div id="box_plot"></div>
</div>
</div>
+-->
{% if g.user_session.user_ob %}
<div class="tab-pane" id="scatterplot_matrix">
@@ -147,7 +149,7 @@
<div id="comparison_scatterplot" class="qtlcharts"></div>
</div>
</div>
- {% endif %}-->
+ {% endif %}
</div>
</div>
<!--</div>-->