Can now view trait list of a collection after clicking the collection

in the modal that pops up after clicking "Color by Trait" above the bar chart

5 files changed, 88 insertions, 15 deletions

diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index 4921b55e..412185d8 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -291,7 +291,7 @@ class Bar_Chart
                             console.log("TEST:", @attr_color_dict[attribute][d])
                             return @attr_color_dict[attribute][d]
                         )
-        
+
         legend_text = legend.selectAll('text')
                         .data(distinct_vals)
                         .enter()
@@ -303,13 +303,19 @@ class Bar_Chart
                         .text((d) =>
                             return d
                         )
-                        
+
     color_by_trait: () ->
         $('#collections_holder').load('/collections/list?color_by_trait #collections_list', =>
             $.colorbox(
                 inline: true
                 href: "#collections_holder"
             )
+            #Removes the links from the collection names, because clicking them would leave the page
+            #instead of loading the list of traits in the colorbox
+            $('a.collection_name').attr( 'onClick', 'return false' )
+            #$('.collection_name').each (index, element) =>
+            #    console.log("contents:", $(element).contents())
+            #    $(element).contents().unwrap()
         )
 
 
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index 9c2059c0..e4279d41 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -323,10 +323,11 @@
     Bar_Chart.prototype.color_by_trait = function() {
       var _this = this;
       return $('#collections_holder').load('/collections/list?color_by_trait #collections_list', function() {
-        return $.colorbox({
+        $.colorbox({
           inline: true,
           href: "#collections_holder"
         });
+        return $('a.collection_name').attr('onClick', 'return false');
       });
     };
 
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
index 8566b804..c178d60d 100644
--- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
@@ -2,8 +2,8 @@
 console.log("before get_traits_from_collection")
 
 
-collection_hover = () ->
-    console.log("Hovering over:", $(this))
+collection_click = () ->
+    console.log("Clicking on:", $(this))
     this_collection_url = $(this).find('.collection_name').prop("href")
     this_collection_url += "&json"
     console.log("this_collection_url", this_collection_url)
@@ -13,11 +13,44 @@ collection_hover = () ->
         success: process_traits
       )
 
+# Going to be used to hold collection list
+# So we can repopulate it when the back button is clicked
+collection_list = null
+
 process_traits = (trait_data, textStatus, jqXHR) ->
     console.log('in process_traits with trait_data:', trait_data)
-    html = "<table>"
+    
+    the_html = "<div id='collections_holder'>"
+    
+    the_html += "<button id='back_to_collections' class='btn btn-inverse btn-small'>"
+    the_html += "<i class='icon-white icon-arrow-left'></i> Back </button>"
+    
+    the_html += "<table class='table table-hover'>"
+    the_html += "<thead><tr><th>Record</th><th>Description</th><th>Mean</th></tr></thead>"
+    the_html += "<tbody>"
+    for trait in trait_data
+        the_html += "<tr><td>#{ trait.name }</td>"
+        the_html += "<td>#{ trait.description }</td>"
+        the_html += "<td>#{ trait.mean or '&nbsp;' }</td></tr>"
+    the_html += "</tbody>"
+    the_html += "</table>"
+    the_html += "</div>"
+
+    collection_list = $("#collections_holder").html()
+    $("#collections_holder").replaceWith(the_html)
+    $('#collections_holder').colorbox.resize()
 
+back_to_collections = () ->
+    console.log("collection_list:", collection_list)
+    $("#collections_holder").replaceWith(collection_list)
+    
+    $("#trait_table").wrap("<div id='collections_holder'></div>")
+    
+    $(document).on("click", ".collection_line", collection_click)
+    $('#collections_holder').colorbox.resize()
 
 $ ->
     console.log("inside get_traits_from_collection")
-    $(document).on("mouseover", ".collection_line", collection_hover)
+    
+    $(document).on("click", ".collection_line", collection_click)
+    $(document).on("click", "#back_to_collections", back_to_collections)
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
index 57f42a38..c0fb7c54 100644
--- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
@@ -1,12 +1,12 @@
 // Generated by CoffeeScript 1.6.1
 (function() {
-  var collection_hover, process_traits;
+  var back_to_collections, collection_click, collection_list, process_traits;
 
   console.log("before get_traits_from_collection");
 
-  collection_hover = function() {
+  collection_click = function() {
     var this_collection_url;
-    console.log("Hovering over:", $(this));
+    console.log("Clicking on:", $(this));
     this_collection_url = $(this).find('.collection_name').prop("href");
     this_collection_url += "&json";
     console.log("this_collection_url", this_collection_url);
@@ -17,15 +17,43 @@
     });
   };
 
+  collection_list = null;
+
   process_traits = function(trait_data, textStatus, jqXHR) {
-    var html;
+    var the_html, trait, _i, _len;
     console.log('in process_traits with trait_data:', trait_data);
-    return html = "<table>";
+    the_html = "<div id='collections_holder'>";
+    the_html += "<button id='back_to_collections' class='btn btn-inverse btn-small'>";
+    the_html += "<i class='icon-white icon-arrow-left'></i> Back </button>";
+    the_html += "<table class='table table-hover'>";
+    the_html += "<thead><tr><th>Record</th><th>Description</th><th>Mean</th></tr></thead>";
+    the_html += "<tbody>";
+    for (_i = 0, _len = trait_data.length; _i < _len; _i++) {
+      trait = trait_data[_i];
+      the_html += "<tr><td>" + trait.name + "</td>";
+      the_html += "<td>" + trait.description + "</td>";
+      the_html += "<td>" + (trait.mean || '&nbsp;') + "</td></tr>";
+    }
+    the_html += "</tbody>";
+    the_html += "</table>";
+    the_html += "</div>";
+    collection_list = $("#collections_holder").html();
+    $("#collections_holder").replaceWith(the_html);
+    return $('#collections_holder').colorbox.resize();
+  };
+
+  back_to_collections = function() {
+    console.log("collection_list:", collection_list);
+    $("#collections_holder").replaceWith(collection_list);
+    $("#trait_table").wrap("<div id='collections_holder'></div>");
+    $(document).on("click", ".collection_line", collection_click);
+    return $('#collections_holder').colorbox.resize();
   };
 
   $(function() {
     console.log("inside get_traits_from_collection");
-    return $(document).on("mouseover", ".collection_line", collection_hover);
+    $(document).on("click", ".collection_line", collection_click);
+    return $(document).on("click", "#back_to_collections", back_to_collections);
   });
 
 }).call(this);
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index 6385089b..33538626 100644
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -31,8 +31,12 @@
                         </select>
                     </div>
                     {% endif %}
-                    <button type="button" id="update_bar_chart">Sort By Value</button>
-                    <button type="button" id="color_by_trait">Color by Trait</button>
+                    <button type="button" class="btn" id="update_bar_chart">
+                        <i class="icon-resize-vertical"></i> Sort By Value
+                    </button>
+                    <button type="button" class="btn" id="color_by_trait">
+                        <i class="icon-tint"></i> Color by Trait
+                    </button>
                     <div id="bar_chart_container">
                         <div id="bar_chart"></div>
                     </div>
@@ -56,4 +60,5 @@
     <div id="collections_holder_wrapper" style="display:none;">
         <div id="collections_holder"></div>
     </div>
+   
 </div>
\ No newline at end of file