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

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;">