diff options
| -rwxr-xr-x | wqflask/wqflask/static/new/css/bar_chart.css | 44 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/css/scatter-matrix.css | 8 | ||||
| -rwxr-xr-x | wqflask/wqflask/static/new/javascript/bar_chart.js | 70 | ||||
| -rwxr-xr-x | wqflask/wqflask/templates/base.html | 4 | ||||
| -rwxr-xr-x | wqflask/wqflask/templates/collections/list.html | 2 | ||||
| -rwxr-xr-x | wqflask/wqflask/templates/marker_regression.html | 11 | ||||
| -rwxr-xr-x | wqflask/wqflask/templates/search_result_page.html | 6 | ||||
| -rwxr-xr-x | wqflask/wqflask/templates/show_trait_details.html | 2 | ||||
| -rwxr-xr-x | wqflask/wqflask/templates/show_trait_statistics_new.html | 2 |
9 files changed, 105 insertions, 44 deletions
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 @@ <a id="login_in" href="/n/login">Sign in</a> {% endif %} </li> + <li style="margin-left: 20px;"> + <a href="http://www.genenetwork.org" style="font-weight: bold;" >Use GeneNetwork 1</a> + </li </ul> </div> </div> @@ -84,7 +87,6 @@ </select> <input class="btn btn-primary form-control col-xs-2" style="width: 100px; margin-top: 15px; margin-left: 10px;" type="submit" value="Search All"> <input class="form-control col-xs-6" style="width: 600px; margin-top: 15px; margin-left: 10px;" type="text" name="terms" required> - <a href="http://www.genenetwork.org"><input class="btn btn-primary form-control col-xs-2" style="width: 175px; margin-top: 15px; margin-left: 50px;" value="Use GeneNetwork 1"></a> </div> </form> </div> 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 @@ </table> {# if "color_by_trait" in params #} -<!-- <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script>--> + <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script> {# endif #} </div> 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 @@ <input type="hidden" id="filename" name="filename" value=""> <input type="submit" id="export_pdf" value="Download PDF"> </form> -<!-- <button id="export_pdf" class="btn">Export PDF</button>--> <button id="return_to_full_view" class="btn" style="display:none">Return to full view</button> </div> <div id="chart_container"> @@ -33,6 +32,7 @@ <table id="qtl_results" class="table table-hover table-striped"> <thead> <tr> + <th></th> <th>Index</th> <th>{{ score_type }}</th> <th>Chr</th> @@ -46,18 +46,18 @@ (score_type == "LRS" and marker.lrs_value > cutoff) %} <tr> <td> - {{loop.index}} <input type="checkbox" name="selectCheck" class="checkbox edit_sample_checkbox" value="{{ marker.name }}" checked="checked"> </td> + <Td align="right">{{ loop.index }}</Td> {% if score_type == "LOD" %} - <td>{{marker.lod_score}}</td> + <td>{{ '%0.2f' | format(marker.lod_score|float) }}</td> {% else %} - <td>{{marker.lrs_value}}</td> + <td>{{ '%0.2f' | format(marker.lrs_value|float) }}</td> {% endif %} <td>{{marker.chr}}</td> - <td>{{marker.Mb}}</td> + <td>{{ '%0.6f' | format(marker.Mb|float) }}</td> <td>{{marker.name}}</td> </tr> {% 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 @@ <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ..."> <br /> <br /> + {% if dataset.type == 'ProbeSet' %} <button class="btn btn-default" id="open_options">Open Extra Options</button> <br /> - <br /> + <br /> <div id="extra_options" style="display:none;"> Min LRS <input type="text" id="min" class="form-control" style="width: 60px; display: inline;"> Max LRS <input type="text" id="max" class="form-control" style="width: 60px; display: inline;"> </div> <br /> <br /> + {% endif %} <div id="table_container"> <table class="table table-hover table-striped" id='trait_table' {% if dataset.type == 'Geno' %}width="400px"{% endif %} style="float: left;"> <thead> @@ -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 @@ <dd>{{ this_trait.dataset.group.species }}</dd> <dt>Group</dt> <dd>{{ this_trait.dataset.group.name }}</dd> + <dt>Tissue</dt> + <dd>{{ this_trait.dataset.tissue }}</dd> {% if this_trait.dataset.type == 'ProbeSet' %} <dt>Aliases</dt> <dd>{{ this_trait.alias_fmt }}</dd> 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 @@ <i class="icon-signal"></i> Sort By Value </button> </div> + {% if g.user_session.user_ob %} <div class="btn-group"> <button type="button" class="btn btn-default" id="color_by_trait"> <i class="icon-tint"></i> Color by Trait </button> </div> + {% endif %} </div> <div class="row" style="position:relative"> <div id="bar_chart_legend" style="margin-left: 150px; margin-top:20px; position: absolute;"> |