From 08b87bbd353f0041a820ba0d02a1348c244b5e3b Mon Sep 17 00:00:00 2001 From: zsloan Date: Tue, 1 Sep 2015 16:14:50 +0000 Subject: Fixed color by trait feature Added Y axis line to bar histogram Added link to GN1 in menu bar Fixed mapping results table to look more like other tables (though still has initial issue with header being too short) Added Tissue to global search results and trait page --- wqflask/wqflask/static/new/css/bar_chart.css | 44 +++++++------- wqflask/wqflask/static/new/css/scatter-matrix.css | 8 +-- wqflask/wqflask/static/new/javascript/bar_chart.js | 70 +++++++++++++++++++--- wqflask/wqflask/templates/base.html | 4 +- wqflask/wqflask/templates/collections/list.html | 2 +- wqflask/wqflask/templates/marker_regression.html | 11 ++-- wqflask/wqflask/templates/search_result_page.html | 6 +- wqflask/wqflask/templates/show_trait_details.html | 2 + .../templates/show_trait_statistics_new.html | 2 + 9 files changed, 105 insertions(+), 44 deletions(-) (limited to 'wqflask') diff --git a/wqflask/wqflask/static/new/css/bar_chart.css b/wqflask/wqflask/static/new/css/bar_chart.css index 4da090b9..20730c2f 100755 --- a/wqflask/wqflask/static/new/css/bar_chart.css +++ b/wqflask/wqflask/static/new/css/bar_chart.css @@ -1,23 +1,23 @@ -.barchart .axis path, -.barchart .axis line { - fill: none; - stroke: #000; - shape-rendering: crispEdges; -} - -.bar { - fill: steelblue; - shape-rendering: crispEdges; -} - -#legend-left, #legend-right { - font-size: 20px; -} - -.nvd3 .nv-group { - fill-opacity: .9 !important; -} - -.nvtooltip table td.legend-color-guide div { - display: none; +.barchart .axis path, +.barchart .axis line { + fill: none; + stroke: #000; + shape-rendering: crispEdges; +} + +.bar { + fill: steelblue; + shape-rendering: crispEdges; +} + +#legend-left, #legend-right { + font-size: 20px; +} + +.nvd3 .nv-group { + fill-opacity: .9 !important; +} + +.nvtooltip table td.legend-color-guide div { + display: none; } \ No newline at end of file diff --git a/wqflask/wqflask/static/new/css/scatter-matrix.css b/wqflask/wqflask/static/new/css/scatter-matrix.css index 147903be..58150b26 100644 --- a/wqflask/wqflask/static/new/css/scatter-matrix.css +++ b/wqflask/wqflask/static/new/css/scatter-matrix.css @@ -1,9 +1,9 @@ #scatter-matrix { font-size: 14px; } -.axis { shape-rendering: crispEdges; } -.axis line { stroke: #ddd; stroke-width: 1px; } -.axis path { display: none; } -.axis text { font-size: 0.8em; } +#scatter-matrix .axis { shape-rendering: crispEdges; } +#scatter-matrix .axis line { stroke: #ddd; stroke-width: 1px; } +#scatter-matrix .axis path { display: none; } +#scatter-matrix .axis text { font-size: 0.8em; } rect.extent { fill: #000; fill-opacity: .125; stroke: #fff; } rect.frame { fill: #fff; fill-opacity: .7; stroke: #aaa; } diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js index 0ab50b4e..7ec35148 100755 --- a/wqflask/wqflask/static/new/javascript/bar_chart.js +++ b/wqflask/wqflask/static/new/javascript/bar_chart.js @@ -221,27 +221,33 @@ return _this.color_dict[d.attr[_this.attribute_name]]; }); _this.add_legend(); + } else if (typeof _this.trait_color_dict !== 'undefined') { + _this.color_dict = _this.trait_color_dict; + _this.chart.barColor(function(d) { + return _this.color_dict[d['x']]; + }); } else { _this.chart.barColor(function() { return 'steelblue'; }); } _this.chart.width(raw_data.length * 20); + //User should be able to change Y domain, but should still have good default _this.chart.yDomain([ - 0.9 * _.min((function() { + 0.95 * _.min((function() { // ZS: Decreasing this constant decreases the min Y axis value var j, len, results; results = []; for (j = 0, len = values.length; j < len; j++) { d = values[j]; - results.push(d.y - 1.5 * d.yErr); + results.push(d.y - 0.5 * d.yErr); //ZS: the 0.5 was originally 1.5 } return results; - })()), 1.05 * _.max((function() { + })()), 1.05 * _.max((function() { // ZS: Decreasing this constant decreases the max Y axis value var j, len, results; results = []; for (j = 0, len = values.length; j < len; j++) { d = values[j]; - results.push(d.y + 1.5 * d.yErr); + results.push(d.y + 0.5 * d.yErr); // //ZS: the 0.5 was originally 1.5 } return results; })()) @@ -398,17 +404,18 @@ trimmed_samples = this.trim_values(trait_sample_data); distinct_values = {}; distinct_values["collection_trait"] = this.get_distinct_values(trimmed_samples); - this.get_trait_color_dict(trimmed_samples, distinct_values); + this.trait_color_dict = this.get_trait_color_dict(trimmed_samples, distinct_values); console.log("TRAIT_COLOR_DICT:", this.trait_color_dict); - return console.log("SAMPLES:", this.samples); + return this.rebuild_bar_graph(); + //return console.log("SAMPLES:", this.samples); }; Bar_Chart.prototype.trim_values = function(trait_sample_data) { var j, len, ref, sample, trimmed_samples; trimmed_samples = {}; - ref = this.sample_names; + ref = this.sample_lists['samples_all']; for (j = 0, len = ref.length; j < len; j++) { - sample = ref[j]; + sample = ref[j]['name']; if (sample in trait_sample_data) { trimmed_samples[sample] = trait_sample_data[sample]; } @@ -424,6 +431,53 @@ return distinct_values; }; + Bar_Chart.prototype.get_trait_color_dict = function(samples, vals) { + var color, color_range, distinct_vals, i, j, k, key, len, len1, results, sample, this_color_dict, value; + trait_color_dict = {}; + console.log("vals:", vals); + for (key in vals) { + 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 = j = 0, len = distinct_vals.length; j < len; i = ++j) { + value = distinct_vals[i]; + this_color_dict[value] = color(i); + } + } else { + console.log("distinct_values:", distinct_vals); + if (_.every(distinct_vals, (function(_this) { + return function(d) { + if (isNaN(d)) { + return false; + } else { + return true; + } + }; + })(this))) { + color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 255]); + for (i = k = 0, len1 = distinct_vals.length; k < len1; i = ++k) { + value = distinct_vals[i]; + //console.log("color_range(value):", parseInt(color_range(value))); + this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0); + } + } + } + } + results = []; + console.log("SAMPLES:", samples) + for (sample in samples) { + if (!hasProp.call(samples, sample)) continue; + value = samples[sample]; + trait_color_dict[sample] = this_color_dict[value]; + //results.push(this.trait_color_dict[sample] = this_color_dict[value]); + } + return trait_color_dict; + }; + return Bar_Chart; })(); diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html index 90acd0da..4d44642b 100755 --- a/wqflask/wqflask/templates/base.html +++ b/wqflask/wqflask/templates/base.html @@ -69,6 +69,9 @@ Sign in {% endif %} +
  • + Use GeneNetwork 1 +
    • @@ -84,7 +87,6 @@ - diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html index c05b694b..52106eae 100755 --- a/wqflask/wqflask/templates/collections/list.html +++ b/wqflask/wqflask/templates/collections/list.html @@ -42,7 +42,7 @@ {# if "color_by_trait" in params #} - + {# endif #} diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html index d83730a2..2d0b6256 100755 --- a/wqflask/wqflask/templates/marker_regression.html +++ b/wqflask/wqflask/templates/marker_regression.html @@ -18,7 +18,6 @@ -
    @@ -33,6 +32,7 @@ + @@ -46,18 +46,18 @@ (score_type == "LRS" and marker.lrs_value > cutoff) %} + {% if score_type == "LOD" %} - + {% else %} - + {% endif %} - + {% endif %} @@ -81,6 +81,7 @@ console.time("Creating table"); $('#qtl_results').dataTable( { "columns": [ + { "type": "natural", "bSortable": false }, { "type": "natural" }, { "type": "natural" }, { "type": "natural" }, diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html index d0875b71..5b4dea33 100755 --- a/wqflask/wqflask/templates/search_result_page.html +++ b/wqflask/wqflask/templates/search_result_page.html @@ -49,15 +49,17 @@

    + {% if dataset.type == 'ProbeSet' %}
    -
    +


    + {% endif %}
    Index {{ score_type }} Chr
    - {{loop.index}} {{ loop.index }}{{marker.lod_score}}{{ '%0.2f' | format(marker.lod_score|float) }}{{marker.lrs_value}}{{ '%0.2f' | format(marker.lrs_value|float) }}{{marker.chr}}{{marker.Mb}}{{ '%0.6f' | format(marker.Mb|float) }} {{marker.name}}
    @@ -222,11 +224,9 @@ console.time("Creating table"); {% if dataset.type == 'ProbeSet' %} - jQuery.fn.dataTableExt.afnFiltering.push( function( oSettings, aData, iDataIndex ) { return filtering( oSettings, aData, iDataIndex, 7 ); - } ); diff --git a/wqflask/wqflask/templates/show_trait_details.html b/wqflask/wqflask/templates/show_trait_details.html index 04db915a..3259d349 100755 --- a/wqflask/wqflask/templates/show_trait_details.html +++ b/wqflask/wqflask/templates/show_trait_details.html @@ -3,6 +3,8 @@
    {{ this_trait.dataset.group.species }}
    Group
    {{ this_trait.dataset.group.name }}
    +
    Tissue
    +
    {{ this_trait.dataset.tissue }}
    {% if this_trait.dataset.type == 'ProbeSet' %}
    Aliases
    {{ this_trait.alias_fmt }}
    diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html index 4eb74e5a..b7323ba3 100755 --- a/wqflask/wqflask/templates/show_trait_statistics_new.html +++ b/wqflask/wqflask/templates/show_trait_statistics_new.html @@ -73,11 +73,13 @@ Sort By Value + {% if g.user_session.user_ob %}
    + {% endif %}
    -- cgit v1.2.3