diff options
Diffstat (limited to 'wqflask')
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 ' ' }</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 || ' ') + "</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 |