about summary refs log tree commit diff
diff options
context:
space:
mode:
authorzsloan2019-03-25 15:30:47 -0500
committerzsloan2019-03-25 15:30:47 -0500
commitec2d5593fe7f379d5dfec6ea80b2349cb886626e (patch)
tree506b5b3fe2a022655458e033e80a3d1e141910a3
parent2734388e99bf6da6a7046e7d9e65ebaf25ac745e (diff)
downloadgenenetwork2-ec2d5593fe7f379d5dfec6ea80b2349cb886626e.tar.gz
- Added SVG export to basic stats figures
- Fixed issues where some stats figures (mainly box and violin plots) didn't update correctly when sample values were changes

- Fixed issue with some temp traits if user wasn't logged in

- Fixed issue where traits couldn't be added to a collection from the correlation results page
-rw-r--r--wqflask/wqflask/collect.py11
-rw-r--r--wqflask/wqflask/search_results.py2
-rw-r--r--wqflask/wqflask/static/new/javascript/plotly_probability_plot.js48
-rw-r--r--wqflask/wqflask/static/new/javascript/show_trait.js398
-rw-r--r--wqflask/wqflask/templates/correlation_matrix.html2
-rw-r--r--wqflask/wqflask/templates/correlation_page.html3
-rw-r--r--wqflask/wqflask/templates/search_result_page.html4
-rw-r--r--wqflask/wqflask/templates/show_trait_statistics.html10
8 files changed, 282 insertions, 196 deletions
diff --git a/wqflask/wqflask/collect.py b/wqflask/wqflask/collect.py
index 6e1ac592..74013239 100644
--- a/wqflask/wqflask/collect.py
+++ b/wqflask/wqflask/collect.py
@@ -151,7 +151,8 @@ def process_traits(unprocessed_traits):
         #print("trait is:", trait)
         data, _separator, hmac = trait.rpartition(':')
         data = data.strip()
-        assert hmac==user_manager.actual_hmac_creation(data), "Data tampering?"
+        if g.user_session.logged_in:
+          assert hmac==user_manager.actual_hmac_creation(data), "Data tampering?"
         traits.add(str(data))
 
     return traits
@@ -242,7 +243,11 @@ def collections_new():
             return redirect(url_for('view_collection', uc_id=collection_id))
         else:
             ac = AnonCollection(collection_name)
-            ac.add_traits(params)
+            if "hash" in params:
+                unprocessed_traits = Redis.get(params['hash'])
+            else:
+                unprocessed_traits = params['traits']
+            ac.add_traits(unprocessed_traits)
             return redirect(url_for('view_collection', collection_id=ac.id))
     else:
         CauseAnError
@@ -271,7 +276,7 @@ def create_new(collection_name):
 @app.route("/collections/list")
 def list_collections():
     params = request.args
-    #logger.debug("PARAMS:", params)
+
     if g.user_session.logged_in:
         user_collections = list(g.user_session.user_collections)
         #logger.debug("user_collections are:", user_collections)
diff --git a/wqflask/wqflask/search_results.py b/wqflask/wqflask/search_results.py
index 893fd172..4a224de6 100644
--- a/wqflask/wqflask/search_results.py
+++ b/wqflask/wqflask/search_results.py
@@ -125,7 +125,7 @@ views.py).
             elif this_trait.dataset.type == "Geno":
                 trait_dict['location'] = this_trait.location_repr
             elif this_trait.dataset.type == "Publish":
-                trait_dict['description'] = insert_newlines(this_trait.description_display)
+                trait_dict['description'] = this_trait.description_display
                 trait_dict['authors'] = this_trait.authors
                 trait_dict['pubmed_id'] = "N/A"
                 if this_trait.pubmed_id:
diff --git a/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js b/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js
index 1585b0ad..14b0e056 100644
--- a/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js
+++ b/wqflask/wqflask/static/new/javascript/plotly_probability_plot.js
@@ -164,7 +164,7 @@
     var layout = {
         title: 'Quantile-Quantile Plot<a href="https://en.wikipedia.org/wiki/Q-Q_plot"><sup>?</sup></a>',
         margin: {
-            l: 50,
+            l: 65,
             r: 30,
             t: 80,
             b: 80
@@ -176,6 +176,13 @@
             visible: true,
             linecolor: 'black',
             linewidth: 1,
+            titlefont: {
+              size: 16
+            },
+            ticklen: 4,
+            tickfont: {
+              size: 16
+            }
         },
         yaxis: {
             title: "Data Quantiles",
@@ -183,6 +190,13 @@
             visible: true,
             linecolor: 'black',
             linewidth: 1,
+            titlefont: {
+              size: 16
+            },
+            ticklen: 4,
+            tickfont: {
+              size: 16
+            }
         },
         hovermode: "closest"
     }
@@ -193,7 +207,11 @@
         mode: 'markers',
         type: 'scatter',
         name: 'Samples',
-        text: point_names['samples_primary']
+        text: point_names['samples_primary'],
+        marker: {
+          color: 'blue',
+          width: 6
+        }
     }
     if ("samples_other" in js_data.sample_group_types) {
         var other_trace = {
@@ -202,7 +220,11 @@
             mode: 'markers',
             type: 'scatter',
             name: js_data.sample_group_types['samples_other'],
-            text: point_names['samples_other']
+            text: point_names['samples_other'],
+            marker: {
+              color: 'blue',
+              width: 6
+            }
         }
     }
 
@@ -213,6 +235,10 @@
             mode: 'lines',
             type: 'scatter',
             name: 'Normal Function',
+            line: {
+              color: 'black',
+              width: 1
+            }
         }
     } else if (sample_group == "samples_other"){
         var other_intercept_trace = {
@@ -221,6 +247,10 @@
             mode: 'lines',
             type: 'scatter',
             name: 'Normal Function',
+            line: {
+              color: 'black',
+              width: 1
+            }
         }
     } else {
         var all_intercept_trace = {
@@ -229,19 +259,23 @@
             mode: 'lines',
             type: 'scatter',
             name: 'Normal Function',
+            line: {
+              color: 'black',
+              width: 1
+            }
         }
     }
 
     if (sample_group == "samples_primary"){
-        var data = [primary_trace, primary_intercept_trace]
+        var data = [primary_intercept_trace, primary_trace]
     } else if (sample_group == "samples_other"){
-        var data = [other_trace, other_intercept_trace]
+        var data = [other_intercept_trace, other_trace]
     } else {
-        var data = [primary_trace, other_trace, all_intercept_trace]
+        var data = [all_intercept_trace, primary_trace, other_trace]
     }
 
     console.log("TRACE:", data)
-    Plotly.newPlot('prob_plot_div', data, layout)
+    Plotly.newPlot('prob_plot_div', data, layout, root.modebar_options)
   };
 
   root.redraw_prob_plot_impl = redraw_prob_plot;
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 61fd032c..56f62090 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -81,7 +81,7 @@ Stat_Table_Rows.push(
   }
 );
 
-var add, block_by_attribute_value, block_by_index, block_outliers, change_stats_value, create_value_dropdown, edit_data_change, export_sample_table_data, get_sample_table_data, hide_no_value, hide_tabs, make_table, on_corr_method_change, open_trait_selection, populate_sample_attributes_values_dropdown, process_id, redraw_bar_chart, redraw_histogram, redraw_prob_plot, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values;
+var add, block_by_attribute_value, block_by_index, block_outliers, change_stats_value, create_value_dropdown, edit_data_change, export_sample_table_data, get_sample_table_data, hide_no_value, hide_tabs, make_table, on_corr_method_change, open_trait_selection, populate_sample_attributes_values_dropdown, process_id, update_bar_chart, update_histogram, update_prob_plot, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values;
 add = function() {
   var trait;
   trait = $("input[name=trait_hmac]").val();
@@ -211,7 +211,7 @@ update_histogram_width = function() {
   }
 }
 
-redraw_histogram = function() {
+update_histogram = function() {
   var x;
   var _i, _len, _ref, data;
   _ref = _.values(root.selected_samples[root.stats_group]);
@@ -220,12 +220,12 @@ redraw_histogram = function() {
     x = _ref[_i];
     trait_vals.push(x.value);
   }
-  Plotly.restyle('histogram', 'x', [trait_vals])
-
+  root.histogram_data[0]['x'] = trait_vals
+  Plotly.newPlot('histogram', root.histogram_data, root.histogram_layout, root.modebar_options);
   update_histogram_width()
 };
 
-redraw_bar_chart = function() {
+update_bar_chart = function() {
   var x;
   var _i, _len, _ref, data;
   _ref = _.values(root.selected_samples[root.stats_group]);
@@ -268,52 +268,66 @@ redraw_bar_chart = function() {
     visible: root.errors_exist
   }
   root.bar_data[0]['x'] = trait_samples
+
   if (trait_vals.length < 256) {
-    Plotly.newPlot('bar_chart', root.bar_data, root.bar_layout);
+    Plotly.newPlot('bar_chart', root.bar_data, root.bar_layout, root.modebar_options);
   }
 };
 
-redraw_box_plot = function() {
+update_box_plot = function() {
   var y_value_list = []
-  for (var sample_group in root.selected_samples){
-    var trait_sample_data = _.values(root.selected_samples[sample_group])
+  if (sample_lists.length > 1) {
+    i = 0;
+    for (var sample_group in root.selected_samples){
+      var trait_sample_data = _.values(root.selected_samples[sample_group])
+      var trait_vals = [];
+      for (j = 0, len = trait_sample_data.length; j < len; j++) {
+        this_sample_data = trait_sample_data[j];
+        trait_vals.push(this_sample_data.value);
+      }
+      root.box_data[i]['y'] = trait_vals
+      i++;
+    }
+  } else {
+    var trait_sample_data = _.values(root.selected_samples['samples_all'])
     var trait_vals = [];
-    for (i = 0, len = trait_sample_data.length; i < len; i++) {
-      this_sample_data = trait_sample_data[i];
+    for (j = 0, len = trait_sample_data.length; j < len; j++) {
+      this_sample_data = trait_sample_data[j];
       trait_vals.push(this_sample_data.value);
     }
-    y_value_list.push(trait_vals)
-  }
-
-  if (Object.keys(js_data.sample_group_types).length > 1) {
-      var update = {
-        y: y_value_list
-      }
-      Plotly.restyle('box_plot', update, [0, 1, 2])
-  } else {
-      var update = {
-        y: y_value_list
-      }
-      Plotly.restyle('box_plot', update)
+    root.box_data[0]['y'] = trait_vals
   }
+  Plotly.newPlot('box_plot', root.box_data, root.box_layout, root.modebar_options)
 }
 
-redraw_violin_plot = function() {
+update_violin_plot = function() {
   var y_value_list = []
-  for (var sample_group in root.selected_samples){
-    var trait_sample_data = _.values(root.selected_samples[sample_group])
+  if (sample_lists.length > 1) {
+    i = 0;
+    for (var sample_group in root.selected_samples){
+      var trait_sample_data = _.values(root.selected_samples[sample_group])
+      var trait_vals = [];
+      for (j = 0, len = trait_sample_data.length; j < len; j++) {
+        this_sample_data = trait_sample_data[j];
+        trait_vals.push(this_sample_data.value);
+      }
+      root.violin_data[i]['y'] = trait_vals
+      i++;
+    }
+  } else {
+    var trait_sample_data = _.values(root.selected_samples['samples_all'])
     var trait_vals = [];
-    for (i = 0, len = trait_sample_data.length; i < len; i++) {
-      this_sample_data = trait_sample_data[i];
+    for (j = 0, len = trait_sample_data.length; j < len; j++) {
+      this_sample_data = trait_sample_data[j];
       trait_vals.push(this_sample_data.value);
     }
-    y_value_list.push(trait_vals)
+    root.violin_data[0]['y'] = trait_vals
   }
-
+  Plotly.newPlot('violin_plot', root.violin_data, root.violin_layout, root.modebar_options)
 }
 
 
-redraw_prob_plot = function() {
+update_prob_plot = function() {
   return root.redraw_prob_plot_impl(root.selected_samples, root.prob_plot_group);
 };
 
@@ -428,19 +442,19 @@ edit_data_change = function() {
   update_stat_values(sample_sets);
 
   if ($('#histogram').hasClass('js-plotly-plot')){
-    redraw_histogram();
+    update_histogram();
   }
   if ($('#bar_chart').hasClass('js-plotly-plot')){
-    redraw_bar_chart();
+    update_bar_chart();
   }
   if ($('#box_plot').hasClass('js-plotly-plot')){
-    redraw_box_plot();
+    update_box_plot();
   }
   if ($('#violin_plot').hasClass('js-plotly-plot')){
-    redraw_violin_plot();
+    update_violin_plot();
   }
   if ($('#prob_plot_div').hasClass('js-plotly-plot')){
-    return redraw_prob_plot();
+    return update_prob_plot();
   }
 };
 show_hide_outliers = function() {
@@ -591,7 +605,10 @@ reset_samples_table = function() {
     };
   })(this));
 };
-$('.reset').click(reset_samples_table);
+$('.reset').click(function() {
+  reset_samples_table();
+  edit_data_change();
+});
 
 log_normalize_data = function() {
   return $('.trait_value_input').each((function(_this) {
@@ -825,7 +842,16 @@ if (Object.keys(js_data.sample_group_types).length > 1) {
 // Define Plotly Options (for the options bar at the top of each figure)
 
 root.modebar_options = {
-  modeBarButtonsToRemove:['hoverClosest', 'hoverCompare', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'toggleSpikelines']
+  modeBarButtonsToAdd:[{
+    name: 'Export as SVG',
+    icon: Plotly.Icons.disk,
+    click: function(gd) {
+      Plotly.downloadImage(gd, {format: 'svg'})
+    }
+  }],
+  modeBarButtonsToRemove:['toImage', 'sendDataToCloud', 'hoverClosest', 'hoverCompare', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'toggleSpikelines'],
+  displaylogo: false
+  //modeBarButtons:['toImage2', 'zoom2d', 'pan2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'],
 }
 
 // Bar Chart
@@ -844,26 +870,26 @@ var bar_trace = {
 
 root.bar_data = [bar_trace]
 
-positive_error_vals = []
-negative_error_vals = []
-for (i = 0;i < get_sample_vals(sample_lists[0]).length; i++){
-    if (get_sample_errors(sample_lists[0])[0][i] != undefined) {
-        positive_error_vals.push(get_sample_vals(sample_lists[0])[i] + get_sample_errors(sample_lists[0])[0][i])
-        negative_error_vals.push(get_sample_vals(sample_lists[0])[i] - get_sample_errors(sample_lists[0])[0][i])
+get_bar_range = function(sample_list){
+  positive_error_vals = []
+  negative_error_vals = []
+  for (i = 0;i < get_sample_vals(sample_list).length; i++){
+    if (get_sample_errors(sample_list)[0][i] != undefined) {
+        positive_error_vals.push(get_sample_vals(sample_list)[i] + get_sample_errors(sample_list)[0][i])
+        negative_error_vals.push(get_sample_vals(sample_list)[i] - get_sample_errors(sample_list)[0][i])
     } else {
-        positive_error_vals.push(get_sample_vals(sample_lists[0])[i])
-        negative_error_vals.push(get_sample_vals(sample_lists[0])[i])
+        positive_error_vals.push(get_sample_vals(sample_list)[i])
+        negative_error_vals.push(get_sample_vals(sample_list)[i])
     }
-}
+  }
 
-// Calculate the y axis cutoff to avoid a situation where all bar variation is clustered at the top of the chart
-min_y_val = Math.min(...negative_error_vals)
-max_y_val = Math.max(...positive_error_vals)
+  min_y_val = Math.min(...negative_error_vals)
+  max_y_val = Math.max(...positive_error_vals)
 
-if (min_y_val == 0) {
+  if (min_y_val == 0) {
     range_top = max_y_val + Math.abs(max_y_val)*0.1
     range_bottom = 0;
-} else {
+  } else {
     range_top = max_y_val + Math.abs(max_y_val)*0.1
     range_bottom = min_y_val - Math.abs(min_y_val)*0.1
     if (min_y_val > 0) {
@@ -873,21 +899,95 @@ if (min_y_val == 0) {
     } else {
         range_bottom = 0
     }
+  }
+
+  return [range_bottom, range_top]
 }
 
-root.chart_range = [range_bottom, range_top]
+root.chart_range = get_bar_range(sample_lists[0])
 
 total_sample_count = 0
 for (i = 0, i < sample_lists.length; i++;) {
   total_sample_count += get_sample_vals(sample_lists[i]).length
 }
 
+// Histogram
+var hist_trace = {
+    x: get_sample_vals(sample_lists[0]),
+    type: 'histogram'
+};
+root.histogram_data = [hist_trace];
+root.histogram_layout = {
+  bargap: 0.05,
+  title: "Sample Values",
+  xaxis: {
+           autorange: true,
+           title: "Value",
+           titlefont: {
+             size: 16
+           },
+           ticklen: 4,
+           tickfont: {
+             size: 16
+           }
+         },
+  yaxis: {
+           autorange: true,
+           title: "Count",
+           titlefont: {
+             size: 16
+           },
+           showline: true,
+           ticklen: 4,
+           tickfont: {
+             size: 16
+           }
+         },
+  width: 500,
+  height: 600,
+  margin: {
+      l: 50,
+      r: 30,
+      t: 100,
+      b: 60
+  }
+};
+
+$('.histogram_tab').click(function() {
+  update_histogram();
+  update_histogram_width();
+});
+
+$('.histogram_samples_group').val(root.stats_group);
+$('.histogram_samples_group').change(function() {
+  root.stats_group = $(this).val();
+  return update_histogram();
+});
+
 if (js_data.num_values < 256) {
   bar_chart_width = 25 * get_sample_vals(sample_lists[0]).length
 
-  var layout = {
+  root.bar_layout = {
+    xaxis: {
+        titlefont: {
+          size: 16
+        },
+        showline: true,
+        ticklen: 4,
+        tickfont: {
+          size: 16
+        }
+    },
     yaxis: {
         range: root.chart_range,
+        titlefont: {
+          size: 16
+        },
+        showline: true,
+        ticklen: 4,
+        tickfont: {
+          size: 16
+        }
     },
     width: bar_chart_width,
     height: 600,
@@ -898,31 +998,37 @@ if (js_data.num_values < 256) {
         b: 80
     }
   };
-  root.bar_layout = layout
+
   $('.bar_chart_tab').click(function() {
-    if ($('#bar_chart').hasClass('js-plotly-plot')){
-      redraw_bar_chart();
-    } else {
-      Plotly.newPlot('bar_chart', root.bar_data, root.bar_layout, root.modebar_options)
-    }
+    update_bar_chart();
   });
 }
 
-if (full_sample_lists.length > 1) {
-    root.box_layout = {
-        boxgap: 0.2,
-        yaxis: {
-            range: [range_bottom, range_top],
+root.box_layout = {
+    xaxis: {
+        showline: true,
+        tickfont: {
+          size: 16
         },
-        width: 600,
-        height: 500,
-        margin: {
-            l: 50,
-            r: 30,
-            t: 30,
-            b: 80
+    },
+    yaxis: {
+        autorange: true,
+        showline: true,
+        ticklen: 4,
+        tickfont: {
+          size: 16
         }
-    };
+    },
+    margin: {
+        l: 50,
+        r: 30,
+        t: 30,
+        b: 80
+    }
+};
+if (full_sample_lists.length > 1) {
+    root.box_layout['width'] = 600;
+    root.box_layout['height'] = 500;
     var trace1 = {
         y: get_sample_vals(full_sample_lists[0]),
         type: 'box',
@@ -974,22 +1080,11 @@ if (full_sample_lists.length > 1) {
             width: 1
         }
     }
-    box_data = [trace1, trace2, trace3]
+    root.box_data = [trace1, trace2, trace3]
 } else {
-    root.box_layout = {
-        yaxis: {
-            range: [range_bottom, range_top],
-        },
-        width: 400,
-        height: 500,
-        margin: {
-            l: 50,
-            r: 30,
-            t: 30,
-            b: 80
-        }
-    };
-    box_data = [
+    root.box_layout['width'] = 300;
+    root.box_layout['height'] = 400;
+    root.box_data = [
       {
         type: 'box',
         y: get_sample_vals(full_sample_lists[0]),
@@ -1015,31 +1110,39 @@ box_obj = {
 }
 
 $('.box_plot_tab').click(function() {
-  if ($('#box_plot').hasClass('js-plotly-plot')){
-    redraw_box_plot();
-  } else {
-    Plotly.newPlot('box_plot', box_obj, root.modebar_options);
-  }
+  update_box_plot();
 });
 
 // Violin Plot
 
-if (full_sample_lists.length > 1) {
-    root.violin_layout = {
-      title: "Violin Plot",
-      yaxis: {
-        range: [range_bottom, range_top],
-        zeroline: false
-      },
-      width: 600,
-      height: 500,
-      margin: {
-            l: 50,
-            r: 30,
-            t: 80,
-            b: 80
+root.violin_layout = {
+  title: "Violin Plot",
+  xaxis: {
+      showline: true,
+      tickfont: {
+        size: 16
       }
-    };
+  },
+  yaxis: {
+      autorange: true,
+      showline: true,
+      ticklen: 4,
+      tickfont: {
+        size: 16
+      },
+      zeroline: false
+  },
+  margin: {
+        l: 50,
+        r: 30,
+        t: 80,
+        b: 80
+  }
+};
+
+if (full_sample_lists.length > 1) {
+    root.violin_layout['width'] = 600;
+    root.violin_layout['height'] = 500;
     var trace1 = {
         y: get_sample_vals(full_sample_lists[2]),
         type: 'violin',
@@ -1088,24 +1191,11 @@ if (full_sample_lists.length > 1) {
         name: sample_group_list[0],
         x0: sample_group_list[0]
     }
-    violin_data = [trace1, trace2, trace3]
+    root.violin_data = [trace1, trace2, trace3]
 } else {
-    root.violin_layout = {
-      title: "Violin Plot",
-      yaxis: {
-        range: [range_bottom, range_top],
-        zeroline: false
-      },
-      width: 500,
-      height: 300,
-      margin: {
-            l: 50,
-            r: 30,
-            t: 80,
-            b: 80
-      }
-    };
-    violin_data = [
+    root.violin_layout['width'] = 300;
+    root.violin_layout['height'] = 400;
+    root.violin_data = [
       {
         y: get_sample_vals(full_sample_lists[0]),
         type: 'violin',
@@ -1125,78 +1215,34 @@ if (full_sample_lists.length > 1) {
     ]
 }
 
-violin_obj = {
-  data: violin_data,
-  layout: root.violin_layout
-}
-
 $('.violin_plot_tab').click(function() {
-  if ($('#violin_plot').hasClass('js-plotly-plot')){
-    redraw_violin_plot();
-  } else {
-    Plotly.plot('violin_plot', violin_obj, root.modebar_options);
-  }
-});
-
-// Histogram
-var hist_trace = {
-    x: get_sample_vals(sample_lists[0]),
-    type: 'histogram'
-};
-var data = [hist_trace];
-var layout = {
-  bargap: 0.05,
-  title: "Sample Values",
-  xaxis: {title: "Value"},
-  yaxis: {title: "Count"},
-  margin: {
-      l: 50,
-      r: 30,
-      t: 100,
-      b: 60
-  }
-};
-
-$('.histogram_tab').click(function() {
-  if ($('#histogram').hasClass('js-plotly-plot')){
-    redraw_histogram();
-    update_histogram_width();
-  } else {
-    Plotly.newPlot('histogram', data, layout, root.modebar_options)
-    update_histogram_width()
-  }
-});
-
-$('.histogram_samples_group').val(root.stats_group);
-$('.histogram_samples_group').change(function() {
-  root.stats_group = $(this).val();
-  return redraw_histogram();
+  update_violin_plot();
 });
 
 if (get_sample_vals(sample_lists[0]).length < 256) {
   $('.bar_chart_samples_group').change(function() {
     root.stats_group = $(this).val();
-    return redraw_bar_chart();
+    return update_bar_chart();
   });
   root.bar_sort = "name"
 }
 $('.sort_by_name').click(function() {
   root.bar_sort = "name"
-  return redraw_bar_chart();
+  return update_bar_chart();
 });
 $('.sort_by_value').click(function() {
   root.bar_sort = "value"
-  return redraw_bar_chart();
+  return update_bar_chart();
 });
 
 root.prob_plot_group = 'samples_primary';
 $('.prob_plot_samples_group').val(root.prob_plot_group);
 $('.prob_plot_tab').click(function() {
-  return redraw_prob_plot();
+  return update_prob_plot();
 });
 $('.prob_plot_samples_group').change(function() {
   root.prob_plot_group = $(this).val();
-  return redraw_prob_plot();
+  return update_prob_plot();
 });
 
 function isEmpty( el ){
diff --git a/wqflask/wqflask/templates/correlation_matrix.html b/wqflask/wqflask/templates/correlation_matrix.html
index cf5c359c..bcdc499f 100644
--- a/wqflask/wqflask/templates/correlation_matrix.html
+++ b/wqflask/wqflask/templates/correlation_matrix.html
@@ -63,7 +63,7 @@
 <h2>PCA Traits</h2>
 <ul>
   {% for this_trait_id in pca_trait_ids %}
-  <li>1. <input type="checkbox" class="trait_checkbox" name="pca_trait" value="{{ data_hmac('{}:{}'.format(pca_trait_ids[loop.index - 1], "Temp")) }}">&nbsp;&nbsp;<a href="{{ url_for('show_trait_page', trait_id = pca_trait_ids[loop.index - 1], dataset = "Temp") }}">{{ pca_trait_ids[loop.index - 1] }}</a></li>
+  <li>{{ loop.index }}. <input type="checkbox" class="trait_checkbox" name="pca_trait" value="{{ data_hmac('{}:{}'.format(pca_trait_ids[loop.index - 1], "Temp")) }}">&nbsp;&nbsp;<a href="{{ url_for('show_trait_page', trait_id = pca_trait_ids[loop.index - 1], dataset = "Temp") }}">{{ pca_trait_ids[loop.index - 1] }}</a></li>
   {% endfor %}
 </ul>
 <button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index 80c5e945..7cc998bb 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -213,7 +213,8 @@
     </div>
 {% endblock %}
 
-{% block js %}  
+{% block js %}
+    <script type="text/javascript" src="/static/new/js_external/md5.min.js"></script>
     <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
 
     <script language="javascript" type="text/javascript" src="/static/new/js_external/jszip.min.js"></script>
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index a0ef4ab4..065b0c0f 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -119,7 +119,7 @@
           </form>
           <br />
 
-          <div id="table_container" style="width: 1400px;">
+          <div id="table_container" style="width: 1200px;">
             <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
                 <tbody>
                  <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
@@ -278,7 +278,7 @@
                     {
                       'title': "Description",
                       'type': "natural",
-                      'width': "500px",
+                      'width': "300px",
                       'data': "description"
                     },
                     {
diff --git a/wqflask/wqflask/templates/show_trait_statistics.html b/wqflask/wqflask/templates/show_trait_statistics.html
index a0bdc987..1093e1bb 100644
--- a/wqflask/wqflask/templates/show_trait_statistics.html
+++ b/wqflask/wqflask/templates/show_trait_statistics.html
@@ -15,17 +15,17 @@
                 <li>
                     <a href="#probability_plot" class="prob_plot_tab" data-toggle="tab">Probability Plot</a>
                 </li>
-                {% if g.user_session.logged_in %}
-                <li>
-                    <a href="#scatterplot_matrix" data-toggle="tab">Scatterplot Matrix</a>
-                </li>
-                {% endif %}
                 <li>
                     <a href="#box_plot_tab" class="box_plot_tab" data-toggle="tab">Box Plot</a>
                 </li>
                 <li>
                     <a href="#violin_plot_tab" class="violin_plot_tab" data-toggle="tab">Violin Plot</a>
                 </li>
+                {% if g.user_session.logged_in %}
+                <li>
+                    <a href="#scatterplot_matrix" data-toggle="tab">Scatterplot Matrix</a>
+                </li>
+                {% endif %}
             </ul>
 
             <div class="tab-content">