From d70ee84e84ee01a45ea9a36c4a88e9f5f8cae202 Mon Sep 17 00:00:00 2001 From: Zachary Sloan Date: Wed, 27 Nov 2013 00:13:01 +0000 Subject: 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 --- .../wqflask/static/new/javascript/bar_chart.coffee | 10 ++++-- wqflask/wqflask/static/new/javascript/bar_chart.js | 3 +- .../javascript/get_traits_from_collection.coffee | 41 +++++++++++++++++++--- .../new/javascript/get_traits_from_collection.js | 40 +++++++++++++++++---- .../templates/show_trait_statistics_new.html | 9 +++-- 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 = "" + + the_html = "
" + + the_html += "" + + the_html += "
" + the_html += "" + the_html += "" + for trait in trait_data + the_html += "" + the_html += "" + the_html += "" + the_html += "" + the_html += "
RecordDescriptionMean
#{ trait.name }#{ trait.description }#{ trait.mean or ' ' }
" + the_html += "" + + 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("
") + + $(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 = ""; + the_html = "
"; + the_html += ""; + the_html += "
"; + the_html += ""; + the_html += ""; + for (_i = 0, _len = trait_data.length; _i < _len; _i++) { + trait = trait_data[_i]; + the_html += ""; + the_html += ""; + the_html += ""; + } + the_html += ""; + the_html += "
RecordDescriptionMean
" + trait.name + "" + trait.description + "" + (trait.mean || ' ') + "
"; + the_html += ""; + 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("
"); + $(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 @@ {% endif %} - - + +
@@ -56,4 +60,5 @@ + \ No newline at end of file -- cgit v1.2.3