From aca78aa6f8ca1dfc1bde8237a065bccf5ccf52c8 Mon Sep 17 00:00:00 2001 From: zsloan Date: Thu, 18 Jun 2015 23:15:38 +0000 Subject: Fixed issue that prevented multiple mapping submissions without refreshing. Also changed to where results open in new window instead of colorbox, though an issue remains where the css doesn't seem to be getting imported properly. --- .../new/javascript/show_trait_mapping_tools.coffee | 26 +- .../new/javascript/show_trait_mapping_tools.js | 399 ++++++++++----------- wqflask/wqflask/templates/base.html | 6 - wqflask/wqflask/templates/interval_mapping.html | 2 +- wqflask/wqflask/templates/marker_regression.html | 11 +- wqflask/wqflask/templates/show_trait.html | 2 - .../templates/show_trait_mapping_tools.html | 2 +- .../wqflask/templates/show_trait_progress_bar.html | 15 +- wqflask/wqflask/views.py | 2 +- 9 files changed, 218 insertions(+), 247 deletions(-) diff --git a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee index 881ea74d..9e070c97 100755 --- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee +++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee @@ -76,18 +76,20 @@ do_ajax_post = (url, form_data) -> return false open_mapping_results = (data) -> - $.colorbox( - html: data - href: "#mapping_results_holder" - height: "90%" - width: "90%" - ) + results_window = window.open() + $(results_window.document.body).html(data) + #$.colorbox( + # html: data + # href: "#mapping_results_holder" + # height: "90%" + # width: "90%" + #) showalert = (message,alerttype) -> $('#alert_placeholder').append('
×'+message+'
') -$("#interval_mapping_compute").click(() => +$("#interval_mapping_compute").on("click", => showalert("One or more outliers exist in this data set. Please review values before mapping. \ Including outliers when mapping may lead to misleading results. \ We recommend winsorising the outliers \ @@ -116,8 +118,8 @@ $('input[name=display_all]').change(() => $('#suggestive').hide() ) -$("#pylmm_compute").click(() => - $("#progress_bar_container").modal({show:true}) +$("#pylmm_compute").on("click", => + #$("#progress_bar_container").modal() url = "/marker_regression" $('input[name=method]').val("pylmm") $('input[name=num_perm]').val($('input[name=num_perm_pylmm]').val()) @@ -133,7 +135,7 @@ $("#pylmm_compute").click(() => -$("#rqtl_geno_compute").click(() => +$("#rqtl_geno_compute").on("click", => $("#progress_bar_container").modal() url = "/marker_regression" $('input[name=method]').val("rqtl_geno") @@ -150,7 +152,7 @@ $("#rqtl_geno_compute").click(() => ) -$("#plink_compute").click(() => +$("#plink_compute").on("click", => $("#static_progress_bar_container").modal() url = "/marker_regression" $('input[name=method]').val("plink") @@ -163,7 +165,7 @@ $("#plink_compute").click(() => do_ajax_post(url, form_data) ) -$("#gemma_compute").click(() => +$("#gemma_compute").on("click", => console.log("RUNNING GEMMA") $("#static_progress_bar_container").modal() url = "/marker_regression" diff --git a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js index 1779df4b..cc1ddf37 100755 --- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js +++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js @@ -1,223 +1,218 @@ // Generated by CoffeeScript 1.8.0 -var block_outliers, composite_mapping_fields, do_ajax_post, get_progress, mapping_method_fields, open_mapping_results, showalert, submit_special, toggle_enable_disable, update_time_remaining; - -submit_special = function() { - var url; - console.log("In submit_special"); - console.log("this is:", this); - console.log("$(this) is:", $(this)); - url = $(this).data("url"); - console.log("url is:", url); - $("#trait_data_form").attr("action", url); - return $("#trait_data_form").submit(); -}; - -update_time_remaining = function(percent_complete) { - var minutes_remaining, now, period, total_seconds_remaining; - now = new Date(); - period = now.getTime() - root.start_time; - console.log("period is:", period); - if (period > 8000) { - total_seconds_remaining = (period / percent_complete * (100 - percent_complete)) / 1000; - minutes_remaining = Math.round(total_seconds_remaining / 60); - if (minutes_remaining < 3) { - return $('#time_remaining').text(Math.round(total_seconds_remaining) + " seconds remaining"); - } else { - return $('#time_remaining').text(minutes_remaining + " minutes remaining"); +(function() { + var block_outliers, composite_mapping_fields, do_ajax_post, get_progress, mapping_method_fields, open_mapping_results, showalert, submit_special, toggle_enable_disable, update_time_remaining; + + submit_special = function() { + var url; + console.log("In submit_special"); + console.log("this is:", this); + console.log("$(this) is:", $(this)); + url = $(this).data("url"); + console.log("url is:", url); + $("#trait_data_form").attr("action", url); + return $("#trait_data_form").submit(); + }; + + update_time_remaining = function(percent_complete) { + var minutes_remaining, now, period, total_seconds_remaining; + now = new Date(); + period = now.getTime() - root.start_time; + console.log("period is:", period); + if (period > 8000) { + total_seconds_remaining = (period / percent_complete * (100 - percent_complete)) / 1000; + minutes_remaining = Math.round(total_seconds_remaining / 60); + if (minutes_remaining < 3) { + return $('#time_remaining').text(Math.round(total_seconds_remaining) + " seconds remaining"); + } else { + return $('#time_remaining').text(minutes_remaining + " minutes remaining"); + } } - } -}; - -get_progress = function() { - var params, params_str, temp_uuid, url; - console.log("temp_uuid:", $("#temp_uuid").val()); - temp_uuid = $("#temp_uuid").val(); - params = { - key: temp_uuid }; - params_str = $.param(params); - url = "/get_temp_data?" + params_str; - console.log("url:", url); - $.ajax({ - type: "GET", - url: url, - success: (function(_this) { - return function(progress_data) { - var percent_complete; - percent_complete = progress_data['percent_complete']; - console.log("in get_progress data:", progress_data); - $('#marker_regression_progress').css("width", percent_complete + "%"); - if (root.start_time) { - if (!isNaN(percent_complete)) { - return update_time_remaining(percent_complete); - } - } else { - return root.start_time = new Date().getTime(); - } - }; - })(this) - }); - return false; -}; -block_outliers = function() { - return $('.outlier').each((function(_this) { - return function(_index, element) { - return $(element).find('.trait_value_input').val('x'); + get_progress = function() { + var params, params_str, temp_uuid, url; + console.log("temp_uuid:", $("#temp_uuid").val()); + temp_uuid = $("#temp_uuid").val(); + params = { + key: temp_uuid }; - })(this)); -}; - -do_ajax_post = function(url, form_data) { - $.ajax({ - type: "POST", - url: url, - data: form_data, - error: (function(_this) { - return function(xhr, ajaxOptions, thrownError) { - alert("Sorry, an error occurred"); - console.log(xhr); - clearInterval(_this.my_timer); - $('#progress_bar_container').modal('hide'); - return $("body").html("We got an error."); - }; - })(this), - success: (function(_this) { - return function(data) { - clearInterval(_this.my_timer); - $('#progress_bar_container').modal('hide'); - return open_mapping_results(data); - }; - })(this) - }); - console.log("settingInterval"); - this.my_timer = setInterval(get_progress, 1000); - return false; -}; - -open_mapping_results = function(data) { - return $.colorbox({ - html: data, - href: "#mapping_results_holder", - height: "90%", - width: "90%" - }); -}; - -showalert = function(message, alerttype) { - return $('#alert_placeholder').append('
�' + message + '
'); -}; - -$("#interval_mapping_compute").click((function(_this) { - return function() { - var form_data, url; - showalert("One or more outliers exist in this data set. Please review values before mapping. Including outliers when mapping may lead to misleading results. We recommend winsorising the outliers or simply deleting them.", "alert-success"); - console.log("In interval mapping"); - $("#progress_bar_container").modal(); - url = "/interval_mapping"; - $('input[name=method]').val("reaper"); - $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_reaper]:checked').val()); - $('input[name=mapping_display_all]').val($('input[name=display_all_reaper]')); - $('input[name=suggestive]').val($('input[name=suggestive_reaper]')); - form_data = $('#trait_data_form').serialize(); - console.log("form_data is:", form_data); - return do_ajax_post(url, form_data); + params_str = $.param(params); + url = "/get_temp_data?" + params_str; + console.log("url:", url); + $.ajax({ + type: "GET", + url: url, + success: (function(_this) { + return function(progress_data) { + var percent_complete; + percent_complete = progress_data['percent_complete']; + console.log("in get_progress data:", progress_data); + $('#marker_regression_progress').css("width", percent_complete + "%"); + if (root.start_time) { + if (!isNaN(percent_complete)) { + return update_time_remaining(percent_complete); + } + } else { + return root.start_time = new Date().getTime(); + } + }; + })(this) + }); + return false; }; -})(this)); - -$('#suggestive').hide(); -$('input[name=display_all]').change((function(_this) { - return function() { - console.log("check"); - if ($('input[name=display_all]:checked').val() === "False") { - return $('#suggestive').show(); - } else { - return $('#suggestive').hide(); - } + block_outliers = function() { + return $('.outlier').each((function(_this) { + return function(_index, element) { + return $(element).find('.trait_value_input').val('x'); + }; + })(this)); }; -})(this)); -$("#pylmm_compute").click((function(_this) { - return function() { - var form_data, url; - $("#progress_bar_container").modal({ - show: true + do_ajax_post = function(url, form_data) { + $.ajax({ + type: "POST", + url: url, + data: form_data, + error: (function(_this) { + return function(xhr, ajaxOptions, thrownError) { + alert("Sorry, an error occurred"); + console.log(xhr); + clearInterval(_this.my_timer); + $('#progress_bar_container').modal('hide'); + return $("body").html("We got an error."); + }; + })(this), + success: (function(_this) { + return function(data) { + clearInterval(_this.my_timer); + $('#progress_bar_container').modal('hide'); + return open_mapping_results(data); + }; + })(this) }); - url = "/marker_regression"; - $('input[name=method]').val("pylmm"); - $('input[name=num_perm]').val($('input[name=num_perm_pylmm]').val()); - $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_pylmm]:checked').val()); - form_data = $('#trait_data_form').serialize(); - console.log("form_data is:", form_data); - return do_ajax_post(url, form_data); + console.log("settingInterval"); + this.my_timer = setInterval(get_progress, 1000); + return false; }; -})(this)); - -$("#rqtl_geno_compute").click((function(_this) { - return function() { - var form_data, url; - $("#progress_bar_container").modal(); - url = "/marker_regression"; - $('input[name=method]').val("rqtl_geno"); - $('input[name=num_perm]').val($('input[name=num_perm_rqtl_geno]').val()); - $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_rqtl]:checked').val()); - $('input[name=control_marker]').val($('input[name=control_rqtl_geno]').val()); - form_data = $('#trait_data_form').serialize(); - console.log("form_data is:", form_data); - return do_ajax_post(url, form_data); + + open_mapping_results = function(data) { + var results_window; + results_window = window.open(); + return $(results_window.document.body).html(data); }; -})(this)); - -$("#plink_compute").click((function(_this) { - return function() { - var form_data, url; - $("#static_progress_bar_container").modal(); - url = "/marker_regression"; - $('input[name=method]').val("plink"); - $('input[name=mapping_display_all]').val($('input[name=display_all_plink]').val()); - $('input[name=suggestive]').val($('input[name=suggestive_plink]').val()); - $('input[name=maf]').val($('input[name=maf_plink]').val()); - form_data = $('#trait_data_form').serialize(); - console.log("form_data is:", form_data); - return do_ajax_post(url, form_data); + + showalert = function(message, alerttype) { + return $('#alert_placeholder').append('
�' + message + '
'); }; -})(this)); - -$("#gemma_compute").click((function(_this) { - return function() { - var form_data, url; - console.log("RUNNING GEMMA"); - $("#static_progress_bar_container").modal(); - url = "/marker_regression"; - $('input[name=method]').val("gemma"); - $('input[name=maf]').val($('input[name=maf_gemma]').val()); - form_data = $('#trait_data_form').serialize(); - console.log("form_data is:", form_data); - return do_ajax_post(url, form_data); + + $("#interval_mapping_compute").on("click", (function(_this) { + return function() { + var form_data, url; + showalert("One or more outliers exist in this data set. Please review values before mapping. Including outliers when mapping may lead to misleading results. We recommend winsorising the outliers or simply deleting them.", "alert-success"); + console.log("In interval mapping"); + $("#progress_bar_container").modal(); + url = "/interval_mapping"; + $('input[name=method]').val("reaper"); + $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_reaper]:checked').val()); + $('input[name=mapping_display_all]').val($('input[name=display_all_reaper]')); + $('input[name=suggestive]').val($('input[name=suggestive_reaper]')); + form_data = $('#trait_data_form').serialize(); + console.log("form_data is:", form_data); + return do_ajax_post(url, form_data); + }; + })(this)); + + $('#suggestive').hide(); + + $('input[name=display_all]').change((function(_this) { + return function() { + console.log("check"); + if ($('input[name=display_all]:checked').val() === "False") { + return $('#suggestive').show(); + } else { + return $('#suggestive').hide(); + } + }; + })(this)); + + $("#pylmm_compute").on("click", (function(_this) { + return function() { + var form_data, url; + url = "/marker_regression"; + $('input[name=method]').val("pylmm"); + $('input[name=num_perm]').val($('input[name=num_perm_pylmm]').val()); + $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_pylmm]:checked').val()); + form_data = $('#trait_data_form').serialize(); + console.log("form_data is:", form_data); + return do_ajax_post(url, form_data); + }; + })(this)); + + $("#rqtl_geno_compute").on("click", (function(_this) { + return function() { + var form_data, url; + $("#progress_bar_container").modal(); + url = "/marker_regression"; + $('input[name=method]').val("rqtl_geno"); + $('input[name=num_perm]').val($('input[name=num_perm_rqtl_geno]').val()); + $('input[name=manhattan_plot]').val($('input[name=manhattan_plot_rqtl]:checked').val()); + $('input[name=control_marker]').val($('input[name=control_rqtl_geno]').val()); + form_data = $('#trait_data_form').serialize(); + console.log("form_data is:", form_data); + return do_ajax_post(url, form_data); + }; + })(this)); + + $("#plink_compute").on("click", (function(_this) { + return function() { + var form_data, url; + $("#static_progress_bar_container").modal(); + url = "/marker_regression"; + $('input[name=method]').val("plink"); + $('input[name=maf]').val($('input[name=maf_plink]').val()); + form_data = $('#trait_data_form').serialize(); + console.log("form_data is:", form_data); + return do_ajax_post(url, form_data); + }; + })(this)); + + $("#gemma_compute").on("click", (function(_this) { + return function() { + var form_data, url; + console.log("RUNNING GEMMA"); + $("#static_progress_bar_container").modal(); + url = "/marker_regression"; + $('input[name=method]').val("gemma"); + $('input[name=maf]').val($('input[name=maf_gemma]').val()); + form_data = $('#trait_data_form').serialize(); + console.log("form_data is:", form_data); + return do_ajax_post(url, form_data); + }; + })(this)); + + composite_mapping_fields = function() { + return $(".composite_fields").toggle(); }; -})(this)); -composite_mapping_fields = function() { - return $(".composite_fields").toggle(); -}; + mapping_method_fields = function() { + return $(".mapping_method_fields").toggle(); + }; -mapping_method_fields = function() { - return $(".mapping_method_fields").toggle(); -}; + $("#use_composite_choice").change(composite_mapping_fields); -$("#use_composite_choice").change(composite_mapping_fields); + $("#mapping_method_choice").change(mapping_method_fields); -$("#mapping_method_choice").change(mapping_method_fields); + toggle_enable_disable = function(elem) { + return $(elem).prop("disabled", !$(elem).prop("disabled")); + }; -toggle_enable_disable = function(elem) { - return $(elem).prop("disabled", !$(elem).prop("disabled")); -}; + $("#choose_closet_control").change(function() { + return toggle_enable_disable("#control_locus"); + }); -$("#choose_closet_control").change(function() { - return toggle_enable_disable("#control_locus"); -}); + $("#display_all_lrs").change(function() { + return toggle_enable_disable("#suggestive_lrs"); + }); -$("#display_all_lrs").change(function() { - return toggle_enable_disable("#suggestive_lrs"); -}); +}).call(this); diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html index 462a59a2..30519e24 100755 --- a/wqflask/wqflask/templates/base.html +++ b/wqflask/wqflask/templates/base.html @@ -10,12 +10,6 @@ - - - - diff --git a/wqflask/wqflask/templates/interval_mapping.html b/wqflask/wqflask/templates/interval_mapping.html index 82a96ba1..4d99d2e7 100755 --- a/wqflask/wqflask/templates/interval_mapping.html +++ b/wqflask/wqflask/templates/interval_mapping.html @@ -80,7 +80,7 @@ - + diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html index 6aed69d5..62146662 100755 --- a/wqflask/wqflask/templates/marker_regression.html +++ b/wqflask/wqflask/templates/marker_regression.html @@ -1,7 +1,8 @@ {% extends "base.html" %} {% block title %}Interval Mapping{% endblock %} {% block css %} - + + @@ -75,22 +76,16 @@ js_data = {{ js_data | safe }} - - - + - - diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html index 1f53e089..ca530162 100755 --- a/wqflask/wqflask/templates/show_trait.html +++ b/wqflask/wqflask/templates/show_trait.html @@ -134,12 +134,10 @@ - -">