From 64c015657be1036098a1d628adf9578482d06ae7 Mon Sep 17 00:00:00 2001 From: zsloan Date: Thu, 15 Oct 2020 15:56:48 -0500 Subject: Replaced the styling in show_trait_mapping_tools.html with CSS and changed some styling to be more simple/consistent and deal better with different screen sizes * wqflask/wqflask/marker_regression/run_mapping.py - "manhattan_plot" is now passed as lower-case "true"/"false" to match the case of other boolean options * wqflask/wqflask/static/new/css/show_trait.css - Added classes for the styling in show_trait_mapping_tools.html * wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js - Changed class name "selected_covariates" to "selected-covariates" to match class naming scheme * wqflask/wqflask/static/new/javascript/show_trait.js - Changed class name "selected_covariates" to "selected-covariates" to match class naming scheme * wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js - Changed class names from using underscore to useing "-" to match class naming scheme * wqflask/wqflask/templates/show_trait_mapping_tools.html - Replaced styling with class names and changed some styling to be more simple/consistent --- wqflask/wqflask/marker_regression/run_mapping.py | 2 +- wqflask/wqflask/static/new/css/show_trait.css | 57 +++++ .../javascript/get_covariates_from_collection.js | 4 +- .../wqflask/static/new/javascript/show_trait.js | 4 +- .../new/javascript/show_trait_mapping_tools.js | 14 +- .../templates/show_trait_mapping_tools.html | 268 +++++++++------------ 6 files changed, 187 insertions(+), 162 deletions(-) diff --git a/wqflask/wqflask/marker_regression/run_mapping.py b/wqflask/wqflask/marker_regression/run_mapping.py index 8a44b3fd..39820c8c 100644 --- a/wqflask/wqflask/marker_regression/run_mapping.py +++ b/wqflask/wqflask/marker_regression/run_mapping.py @@ -140,7 +140,7 @@ class RunMapping(object): mapping_results_filename = self.dataset.group.name + "_" + ''.join(random.choice(string.ascii_uppercase + string.digits) for _ in range(6)) self.mapping_results_path = "{}{}.csv".format(webqtlConfig.GENERATED_IMAGE_DIR, mapping_results_filename) - if start_vars['manhattan_plot'] == "True": + if start_vars['manhattan_plot'] == "true": self.manhattan_plot = True else: self.manhattan_plot = False diff --git a/wqflask/wqflask/static/new/css/show_trait.css b/wqflask/wqflask/static/new/css/show_trait.css index f9c3dcd9..2ac8ae5a 100644 --- a/wqflask/wqflask/static/new/css/show_trait.css +++ b/wqflask/wqflask/static/new/css/show_trait.css @@ -151,4 +151,61 @@ div.block-by-attribute-div { div.normalize-div { margin-top:10px; +} + +div.mapping-main { + min-width: 1200px; +} +div.mapping-options { + min-width: 500px; +} + +div.covar-options { + padding-top: 7px; +} + +.control-label { + text-align: right; +} + +.chr-select, .maf-select, .scale-select, .reaper-ver-select { + width: 80px; +} + +span.covar-text { + font-size: 13px; + font-weight: 400; +} + +div.select-covar-div { + margin-bottom: 10px; +} + +.select-covar-button { + width: 80px; + padding-right: 10px; +} + +.selected-covariates { + overflow-y: scroll; + resize: none; + width: 200px; +} + +.cofactor-input { + width: 160px; + display: inline-block; +} + +.no-control-radio { + margin-left: 10px; +} + +.map-method-text { + margin-top: 20px; +} + +.rqtl-description { + padding-top: 40px; + display: none; } \ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js b/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js index a8a3041d..3e414034 100644 --- a/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js +++ b/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js @@ -104,7 +104,7 @@ submit_click = function() { //covariates_display_string = covariates_display_string.substring(0, covariates_display_string.length - 2) $("input[name=covariates]").val(covariates_string) - $(".selected_covariates").val(covariates_display_string) + $(".selected-covariates").val(covariates_display_string) return $.colorbox.close(); }; @@ -114,7 +114,7 @@ trait_click = function() { trait = $(this).parent().find('.trait').text(); dataset = $(this).parent().find('.dataset').data("dataset"); $("input[name=covariates]").val(trait + ":" + dataset) - $(".selected_covariates").text(trait) + $(".selected-covariates").text(trait) return $.colorbox.close(); }; diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js index c0784073..18c9b8cf 100644 --- a/wqflask/wqflask/static/new/javascript/show_trait.js +++ b/wqflask/wqflask/static/new/javascript/show_trait.js @@ -107,14 +107,14 @@ d3.select("#select_covariates").on("click", (function(_this) { })(this)); $("#remove_covariates").click(function () { $("input[name=covariates]").val("") - $(".selected_covariates").val("") + $(".selected-covariates").val("") }); $(".select_covariates").click(function () { open_covariate_selection(); }); $(".remove_covariates").click(function () { $("input[name=covariates]").val("") - $(".selected_covariates").val("") + $(".selected-covariates").val("") }); d3.select("#clear_compare_trait").on("click", (function(_this) { return function() { 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 4dce0705..49d72193 100644 --- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js +++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js @@ -154,7 +154,7 @@ 'pair_scan', 'startMb', 'endMb', 'graphWidth', 'lrsMax', 'additiveCheck', 'showSNP', 'showGenes', 'viewLegend', 'haplotypeAnalystCheck', 'mapmethod_rqtl_geno', 'mapmodel_rqtl_geno', 'temp_trait', 'group', 'species', 'reaper_version', 'primary_samples'] - $(".rqtl_tab, #rqtl_geno_compute").on("click", (function(_this) { + $(".rqtl-tab, #rqtl_geno_compute").on("click", (function(_this) { return function() { if ($(this).hasClass('active') || $(this).attr('id') == "rqtl_geno_compute"){ var form_data, url; @@ -178,7 +178,7 @@ }; })(this)); - $(".gemma_tab, #gemma_compute").on("click", (function(_this) { + $(".gemma-tab, #gemma_compute").on("click", (function(_this) { return function() { if ($(this).hasClass('active') || $(this).attr('id') == "gemma_compute"){ var form_data, url; @@ -199,7 +199,7 @@ }; })(this)); - $(".reaper_tab, #interval_mapping_compute").on("click", (function(_this) { + $(".reaper-tab, #interval_mapping_compute").on("click", (function(_this) { return function() { if ($(this).hasClass('active') || $(this).attr('id') == "interval_mapping_compute"){ var form_data, url; @@ -267,11 +267,11 @@ } }); - $("li.mapping_tab").click(function() { - if ($(this).hasClass("rqtl")){ - $(".rqtl_description").css("display", "block"); + $("li.mapping-tab").click(function() { + if ($(this).hasClass("rqtl-geno-tab")){ + $(".rqtl-description").css("display", "block"); } else { - $(".rqtl_description").css("display", "none"); + $(".rqtl-description").css("display", "none"); } }); diff --git a/wqflask/wqflask/templates/show_trait_mapping_tools.html b/wqflask/wqflask/templates/show_trait_mapping_tools.html index 3311095c..a9e040be 100755 --- a/wqflask/wqflask/templates/show_trait_mapping_tools.html +++ b/wqflask/wqflask/templates/show_trait_mapping_tools.html @@ -1,38 +1,35 @@ -
+
{% if dataset.group.mapping_names|length > 0 %} -
+
    {% for mapping_method in dataset.group.mapping_names %} {% if mapping_method == "GEMMA" %} -
  • +
  • GEMMA
    • {% elif mapping_method == "R/qtl" %} -
  • +
  • R/qtl
    • {% elif mapping_method == "QTLReaper" %} -
  • +
  • Haley-Knott Regression
    • {% endif %} {% endfor %} -
{% for mapping_method in dataset.group.mapping_names %} {% if mapping_method == "GEMMA" %}
-
+
- -
- {% for item in chr_list %} {% endfor %} @@ -41,8 +38,8 @@
{% if genofiles and genofiles|length>0 %}
- -
+ +
+ +
+
- -
+ +
-
- - Select covariate(s) from a collection -
-
+ +
{% if g.user_session.num_collections < 1 %} No collections available. Please add traits to a collection to use them as covariates. {% else %} -
- - +
+ +
- + {% endif %}
-
+
@@ -97,20 +91,20 @@
{% elif mapping_method == "QTLReaper" %}
-
+
- -
-
- -
- {% for item in chr_list %} {% endfor %} @@ -119,9 +113,9 @@
{% if genofiles and genofiles|length>0 %}
- -
- {% for item in scales_in_geno[genofiles[0]['location']] %} {% endfor %} @@ -129,8 +123,8 @@
- -
+ +
+ +
+
- -
- -
-
-
- -
- {% if dataset.type == 'ProbeSet' and this_trait.locus_chr != "" %} - - {% else %} - - {% endif %} - Yes   No -
-
- -
- -
+ +
-
+
@@ -221,11 +194,11 @@
{% elif mapping_method == "R/qtl" %}
-
+
- -
- {% for item in chr_list %} {% endfor %} @@ -234,9 +207,9 @@
{% if genofiles and genofiles|length > 0 %}
- -
- {% for item in scales_in_geno[genofiles[0]['location']] %} {% endfor %} @@ -244,8 +217,8 @@
- -
+ +
{% if sample_groups[0].attributes|length > 0 %}
- -
+ +
{% endif %}
- -
- {% if dataset.type == 'ProbeSet' and this_trait.locus_chr != "" %} - - {% else %} - - {% endif %} - - + +
+ + +
- -
+ +
@@ -319,8 +288,8 @@
-
-
- {% for mapping_method in dataset.group.mapping_names %} - {% if mapping_method == "GEMMA" %} -
GEMMA
-
Maps traits with correction for kinship among samples using a linear mixed model method, and also allows users to fit multiple covariates such as sex, age, treatment, and genetic markers (PMID: 2453419, and GitHub code). GEMMA incorporates the Leave One Chromosome Out (LOCO) method to ensure that the correction for kinship does not remove useful genetic variance near each marker. Markers can be filtered to include only those with minor allele frequencies (MAF) above a threshold. The default MAF is 0.05.
- {% elif mapping_method == "R/qtl" %} -
R/qtl (version 1.44.9
-
The original R/qtl mapping package that supports classic experimental crosses including 4-parent F2 intercrosses (e.g., NIA ITP UM-HET3). R/qtl is ideal for populations that do not have complex kinship or admixture (PMID: 12724300). Both R/qtl as implemented here, and R/qtl2 (PMID: 30591514) are available as R suites.
- {% elif mapping_method == "QTLReaper" %} -
Haley-Knott Regression
-
Fast linear mapping method (PMID 16718932) works well with F2 intercrosses and backcrosses, but that is not recommended for complex or admixed populations (e.g., GWAS or heterogeneous stock studies) or for advanced intercrosses, recombinant inbred families, or diallel crosses. Interactive plots in GeneNetwork have relied on the fast HK mapping for two decades and we still use this method for mapping omics data sets and computing genome-wide permutation threshold (QTL Reaper code).
- {% endif %} - {% endfor %} -
-