pp group selection

5 files changed, 109 insertions, 40 deletions

diff --git a/wqflask/wqflask/static/new/javascript/draw_probability_plot.coffee b/wqflask/wqflask/static/new/javascript/draw_probability_plot.coffee
index 345cbd19..fab53b1d 100644
--- a/wqflask/wqflask/static/new/javascript/draw_probability_plot.coffee
+++ b/wqflask/wqflask/static/new/javascript/draw_probability_plot.coffee
@@ -11,8 +11,10 @@ get_z_scores = (n) ->
 

     return (jStat.normal.inv(x, 0, 1) for x in osm_uniform)

 

-# input: dictionary sample name -> sample value

-redraw_prob_plot = (samples) ->

+# samples is {'samples_primary': {'name1': value1, ...},

+#             'samples_other': {'nameN': valueN, ...},

+#             'samples_all': {'name1': value1, ...}}

+redraw_prob_plot = (samples, sample_group) ->

     h = 600

     w = 600

     margin = {left:60, top:40, right:40, bottom: 40, inner:5}

@@ -24,20 +26,33 @@ redraw_prob_plot = (samples) ->
     container.height(totalh)

 

     nv.addGraph(() =>

-        chart = nv.models.scatterChart().width(w).height(h).showLegend(false)

+        chart = nv.models.scatterChart()

+                  .width(w)

+                  .height(h)

+                  .showLegend(true)

+                  .color(d3.scale.category10().range())

+

+        # size settings are quite counter-intuitive in NVD3!

+        chart.pointRange([50,50]) # (50 is the area, not radius)

+

+        chart.legend.updateState(false)

+

         chart.xAxis

              .axisLabel("Theoretical quantiles")

-             .tickFormat(d3.format('.02f'));

+             .tickFormat(d3.format('.02f'))

+

         chart.yAxis

              .axisLabel("Sample quantiles")

-             .tickFormat(d3.format('.02f'));

+             .tickFormat(d3.format('.02f'))

+

         chart.tooltipContent((obj) =>

-            return '<b style="font-size: 20px">' + obj.point.name + '</b>';

+            return '<b style="font-size: 20px">' + obj.point.name + '</b>'

         )

 

-        names = (x for x in _.keys(samples) when samples[x] != null)

-        sorted_names = names.sort((x, y) => samples[x] - samples[y])

-        sorted_values = (samples[x] for x in sorted_names)

+        all_samples = samples[sample_group]

+        names = (x for x in _.keys(all_samples) when samples[x] != null)

+        sorted_names = names.sort((x, y) => all_samples[x] - all_samples[y])

+        sorted_values = (all_samples[x] for x in sorted_names)

         sw_result = ShapiroWilkW(sorted_values)

         W = sw_result.w.toFixed(3)

         pvalue = sw_result.p.toFixed(3)

@@ -46,22 +61,32 @@ redraw_prob_plot = (samples) ->
                      else\

                         "<span style='color:red'>"+pvalue+"</span>"

         test_str = "Shapiro-Wilk test statistic is #{W} (p = #{pvalue_str})"

-        data = [{

-                 slope: jStat.stdev(sorted_values),

-                 intercept: jStat.mean(sorted_values),

-                 size: 10,

+

+        z_scores = get_z_scores(sorted_values.length)

+        slope = jStat.stdev(sorted_values)

+        intercept = jStat.mean(sorted_values)

+

+        make_data = (group_name) ->

+            return {

+                 key: js_data.sample_group_types[group_name],

+                 slope: slope,

+                 intercept: intercept,

                  values: ({x: z_score, y: value, name: sample}\

                           for [z_score, value, sample] in\

                           _.zip(get_z_scores(sorted_values.length),

                                 sorted_values,

-                                sorted_names))

-                }]

+                                sorted_names)\

+                          when sample of samples[group_name])

+                }

+

+        data = [make_data('samples_primary'), make_data('samples_other')]

         console.log("THE DATA IS:", data)

         d3.select("#prob_plot_container svg")

           .datum(data)

           .call(chart)

 

         $("#prob_plot_title").html("<h3>Normal probability plot</h3>"+test_str)

+        $("#prob_plot_container .nv-legendWrap").toggle(sample_group == "samples_all")

 

         return chart

         )

diff --git a/wqflask/wqflask/static/new/javascript/draw_probability_plot.js b/wqflask/wqflask/static/new/javascript/draw_probability_plot.js
index 43dda849..b301b97f 100644
--- a/wqflask/wqflask/static/new/javascript/draw_probability_plot.js
+++ b/wqflask/wqflask/static/new/javascript/draw_probability_plot.js
@@ -23,7 +23,7 @@
     })();
   };
 
-  redraw_prob_plot = function(samples) {
+  redraw_prob_plot = function(samples, sample_group) {
     var container, h, margin, totalh, totalw, w;
     h = 600;
     w = 600;
@@ -41,16 +41,19 @@
     container.height(totalh);
     return nv.addGraph((function(_this) {
       return function() {
-        var W, chart, data, names, pvalue, pvalue_str, sample, sorted_names, sorted_values, sw_result, test_str, value, x, z_score;
-        chart = nv.models.scatterChart().width(w).height(h).showLegend(false);
+        var W, all_samples, chart, data, intercept, make_data, names, pvalue, pvalue_str, slope, sorted_names, sorted_values, sw_result, test_str, x, z_scores;
+        chart = nv.models.scatterChart().width(w).height(h).showLegend(true).color(d3.scale.category10().range());
+        chart.pointRange([50, 50]);
+        chart.legend.updateState(false);
         chart.xAxis.axisLabel("Theoretical quantiles").tickFormat(d3.format('.02f'));
         chart.yAxis.axisLabel("Sample quantiles").tickFormat(d3.format('.02f'));
         chart.tooltipContent(function(obj) {
           return '<b style="font-size: 20px">' + obj.point.name + '</b>';
         });
+        all_samples = samples[sample_group];
         names = (function() {
           var j, len, ref, results;
-          ref = _.keys(samples);
+          ref = _.keys(all_samples);
           results = [];
           for (j = 0, len = ref.length; j < len; j++) {
             x = ref[j];
@@ -61,14 +64,14 @@
           return results;
         })();
         sorted_names = names.sort(function(x, y) {
-          return samples[x] - samples[y];
+          return all_samples[x] - all_samples[y];
         });
         sorted_values = (function() {
           var j, len, results;
           results = [];
           for (j = 0, len = sorted_names.length; j < len; j++) {
             x = sorted_names[j];
-            results.push(samples[x]);
+            results.push(all_samples[x]);
           }
           return results;
         })();
@@ -76,31 +79,39 @@
         W = sw_result.w.toFixed(3);
         pvalue = sw_result.p.toFixed(3);
         pvalue_str = pvalue > 0.05 ? pvalue.toString() : "<span style='color:red'>" + pvalue + "</span>";
-        test_str = "Shapiro-Wilk test statistic = " + W + " (p = " + pvalue_str + ")";
-        data = [
-          {
-            slope: jStat.stdev(sorted_values),
-            intercept: jStat.mean(sorted_values),
-            size: 10,
+        test_str = "Shapiro-Wilk test statistic is " + W + " (p = " + pvalue_str + ")";
+        z_scores = get_z_scores(sorted_values.length);
+        slope = jStat.stdev(sorted_values);
+        intercept = jStat.mean(sorted_values);
+        make_data = function(group_name) {
+          var sample, value, z_score;
+          return {
+            key: js_data.sample_group_types[group_name],
+            slope: slope,
+            intercept: intercept,
             values: (function() {
               var j, len, ref, ref1, results;
               ref = _.zip(get_z_scores(sorted_values.length), sorted_values, sorted_names);
               results = [];
               for (j = 0, len = ref.length; j < len; j++) {
                 ref1 = ref[j], z_score = ref1[0], value = ref1[1], sample = ref1[2];
-                results.push({
-                  x: z_score,
-                  y: value,
-                  name: sample
-                });
+                if (sample in samples[group_name]) {
+                  results.push({
+                    x: z_score,
+                    y: value,
+                    name: sample
+                  });
+                }
               }
               return results;
             })()
-          }
-        ];
+          };
+        };
+        data = [make_data('samples_primary'), make_data('samples_other')];
         console.log("THE DATA IS:", data);
         d3.select("#prob_plot_container svg").datum(data).call(chart);
         $("#prob_plot_title").html("<h3>Normal probability plot</h3>" + test_str);
+        $("#prob_plot_container .nv-legendWrap").toggle(sample_group === "samples_all");
         return chart;
       };
     })(this));
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index f2832316..3caa16d9 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -138,9 +138,8 @@ $ ->
     redraw_bar_chart = ->
         root.bar_chart.redraw(root.selected_samples[root.bar_chart_group])
 
-    # TODO: add group selector
     redraw_prob_plot = ->
-        root.redraw_prob_plot_impl(root.selected_samples['samples_all'])
+        root.redraw_prob_plot_impl(root.selected_samples, root.prob_plot_group)
 
     make_table = ->
         header = "<thead><tr><th>&nbsp;</th>"
@@ -428,16 +427,24 @@ $ ->
 
     root.histogram_group = 'samples_primary'
     root.histogram = new Histogram(sample_lists[0])
+    $('.histogram_samples_group').val(root.histogram_group)
     $('.histogram_samples_group').change ->
         root.histogram_group = $(this).val()
         redraw_histogram()
 
     root.bar_chart_group = 'samples_primary'
     root.bar_chart = new Bar_Chart(sample_lists[0])
+    $('.bar_chart_samples_group').val(root.bar_chart_group)
     $('.bar_chart_samples_group').change ->
         root.bar_chart_group = $(this).val()
         redraw_bar_chart()
 
+    root.prob_plot_group = 'samples_primary'
+    $('.prob_plot_samples_group').val(root.prob_plot_group)
+    $('.prob_plot_samples_group').change ->
+        root.prob_plot_group = $(this).val()
+        redraw_prob_plot()
+
     # new Box_Plot(sample_lists[0])
         
     # $('.box_plot_samples_group').change ->
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 2f2b0aa0..1cd07155 100755
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -150,7 +150,7 @@
       return root.bar_chart.redraw(root.selected_samples[root.bar_chart_group]);
     };
     redraw_prob_plot = function() {
-      return root.redraw_prob_plot_impl(root.selected_samples['samples_all']);
+      return root.redraw_prob_plot_impl(root.selected_samples, root.prob_plot_group);
     };
     make_table = function() {
       var header, i, key, len, ref, ref1, row, row_line, table, the_id, the_rows, value;
@@ -453,16 +453,24 @@
     _.mixin(_.str.exports());
     root.histogram_group = 'samples_primary';
     root.histogram = new Histogram(sample_lists[0]);
+    $('.histogram_samples_group').val(root.histogram_group);
     $('.histogram_samples_group').change(function() {
       root.histogram_group = $(this).val();
       return redraw_histogram();
     });
     root.bar_chart_group = 'samples_primary';
     root.bar_chart = new Bar_Chart(sample_lists[0]);
+    $('.bar_chart_samples_group').val(root.bar_chart_group);
     $('.bar_chart_samples_group').change(function() {
       root.bar_chart_group = $(this).val();
       return redraw_bar_chart();
     });
+    root.prob_plot_group = 'samples_primary';
+    $('.prob_plot_samples_group').val(root.prob_plot_group);
+    $('.prob_plot_samples_group').change(function() {
+      root.prob_plot_group = $(this).val();
+      return redraw_prob_plot();
+    });
     make_table();
     edit_data_change();
     $('#edit_sample_lists').change(edit_data_change);
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index e5f16f9b..15fc2cf7 100755
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -91,10 +91,28 @@
                         </div>
                 </div>
                 <div class="tab-pane" id="probability_plot">
-                    <div id="prob_plot_container">
-                        <div id="prob_plot_title"></div>
-                        <svg></svg>
+                    <div style="padding: 20px" class="form-horizontal">
+                        {% if sample_groups|length != 1 %}
+                        <select class="prob_plot_samples_group">
+                            {% for group, pretty_group in sample_group_types.items() %}
+                                <option value="{{ group }}">{{ pretty_group }}</option>
+                            {% endfor %}
+                        </select>
+                        <br><br>
+                        {% endif %}
+
+                        <div id="prob_plot_container">
+                            <div id="prob_plot_title"></div>
+                            <svg></svg>
+                        </div>
+
+                        <div>
+                            More about <a href="http://en.wikipedia.org/wiki/Normal_probability_plot" target="_blank">Normal Probability Plots</a> and more
+                            about interpreting these plots from the <a href="/glossary.html#normal_probability" target="_blank">glossary</a></td>
+                            </div>
+
                     </div>
+
                 </div>
 <!--                <div class="tab-pane" id="box_plot_tab">
                     {% if sample_groups|length > 1 %}