Added option to add PCA traits to collection from correlation matrix page

3 files changed, 60 insertions, 53 deletions

diff --git a/wqflask/wqflask/correlation_matrix/show_corr_matrix.py b/wqflask/wqflask/correlation_matrix/show_corr_matrix.py
index 007e8e47..efe4ecea 100644
--- a/wqflask/wqflask/correlation_matrix/show_corr_matrix.py
+++ b/wqflask/wqflask/correlation_matrix/show_corr_matrix.py
@@ -49,6 +49,7 @@ import reaper
 import redis
 Redis = redis.StrictRedis()
 
+from wqflask.user_manager import data_hmac
 from utility.THCell import THCell
 from utility.TDCell import TDCell
 from base.trait import GeneralTrait
diff --git a/wqflask/wqflask/static/new/javascript/create_corr_matrix.js b/wqflask/wqflask/static/new/javascript/create_corr_matrix.js
index 44ed3c81..fe89a672 100644
--- a/wqflask/wqflask/static/new/javascript/create_corr_matrix.js
+++ b/wqflask/wqflask/static/new/javascript/create_corr_matrix.js
@@ -1,57 +1,12 @@
-// Generated by CoffeeScript 1.8.0
-// var get_data, get_options, root;
-
-// root = typeof exports !== "undefined" && exports !== null ? exports : this;
-
-// $(function() {
-  // var chartOpts, data, mychart;
-  // console.log("js_data:", js_data);
-  // chartOpts = get_options();
-  // data = get_data();
-  // console.log(data);
-  // return mychart = corr_matrix(data, chartOpts);
-// });
-
-// get_options = function() {
-  // var chartOpts;
-  // chartOpts = {
-    // cortitle: "Correlation Matrix",
-    // scattitle: "Scatterplot",
-    // h: 450,
-    // w: 450,
-    // margin: {
-      // left: 100,
-      // top: 40,
-      // right: 5,
-      // bottom: 70,
-      // inner: 5
-    // }
-  // };
-  // return chartOpts;
-// };
-
-// get_data = function() {
-  // var data;
-  // data = {};
-  // data["var"] = js_data.traits;
-  // data.group = js_data.groups;
-  // data.indID = js_data.samples;
-  // data.dat = js_data.sample_data;
-  // data.corr = js_data.corr_results;
-  // data.cols = js_data.cols;
-  // data.rows = js_data.rows;
-  // return data;
-// };
-
-var neg_color_scale = chroma.scale(['#FF0000', 'white']).domain([-1, -0.4]);
-var pos_color_scale = chroma.scale(['white', 'aqua']).domain([0.4, 1])
+var neg_color_scale = chroma.scale(['#FF0000', '#FFFFFF']).domain([-1, -0.4]);
+var pos_color_scale = chroma.scale(['#FFFFFF', '#00FFFF']).domain([0.4, 1])
 $('.corr_cell').each( function () {
   corr_value = parseFloat($(this).find('span.corr_value').text())
   if (corr_value >= 0.5){
-    $(this).css('background-color', pos_color_scale(parseFloat(corr_value)))
+    $(this).css('background-color', pos_color_scale(parseFloat(corr_value))._rgb)
   }
   else if (corr_value <= -0.5) {
-    $(this).css('background-color', neg_color_scale(parseFloat(corr_value)))
+    $(this).css('background-color', neg_color_scale(parseFloat(corr_value))._rgb)
   }
   else {
     $(this).css('background-color', 'white')
@@ -78,4 +33,52 @@ $('#long_labels').click( function (){
       $(this).css("display", "none");
     }
   });
-});
\ No newline at end of file
+});
+
+select_all = function() {
+  $(".trait_checkbox").each(function() {
+      $(this).prop('checked', true);
+  });
+};
+
+deselect_all = function() {
+  $(".trait_checkbox").each(function() {
+      $(this).prop('checked', false);
+  });
+};
+
+change_buttons = function() {
+  num_checked = $('.trait_checkbox:checked').length;
+  if (num_checked === 0) {
+    $("#add").prop("disabled", true);
+  } else {
+    $("#add").prop("disabled", false);
+  }
+};
+
+add = function() {
+  var traits;
+  traits = $("input[name=pca_trait]:checked").map(function() {
+    return $(this).val();
+  }).get();
+
+  var traits_hash = md5(traits.toString());
+
+  $.ajax({
+        type: "POST",
+        url: "/collections/store_trait_list",
+        data: {
+          hash: traits_hash,
+          traits: traits.toString()
+        }
+  });
+
+  return $.colorbox({
+    href: "/collections/add?hash=" + traits_hash
+  });
+}
+
+$("#select_all").click(select_all);
+$("#deselect_all").click(deselect_all);
+$("#add").click(add);
+$(".btn, .trait_checkbox").click(change_buttons);
diff --git a/wqflask/wqflask/templates/correlation_matrix.html b/wqflask/wqflask/templates/correlation_matrix.html
index 9c790780..cf5c359c 100644
--- a/wqflask/wqflask/templates/correlation_matrix.html
+++ b/wqflask/wqflask/templates/correlation_matrix.html
@@ -63,9 +63,12 @@
 <h2>PCA Traits</h2>
 <ul>
   {% for this_trait_id in pca_trait_ids %}
-  <li><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>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>
   {% endfor %}
 </ul>
+<button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
+<button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
+<button class="btn btn-default" id="add" disabled><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
 <br>
 <h2>Factor Loadings Plot</h2>
 <div id="loadings_plot" style="margin-top: 20px; margin-bottom: 20px; width: 980px; border-style: solid; border-width: 1px;"></div>
@@ -98,6 +101,7 @@
 </table>
 </div>
 {% endif %}
+<div id="myModal"></div>
 {% endblock %}
 
 {% block js %}
@@ -109,9 +113,8 @@
 
     <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
     <script type="text/javascript" src="/static/new/js_external/d3-tip.min.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/js_external/md5.min.js"></script>
     <script type="text/javascript" src="/static/new/javascript/panelutil.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/js_external/chroma.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/loadings_plot.js"></script>