aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
authorzsloan2020-10-14 17:26:45 -0500
committerzsloan2020-10-14 17:26:45 -0500
commit64158e2ff7df3f7d177a4a3a0b8d7ff9c8f7cfe5 (patch)
treea50548741b74d18ce2a33d791bfd988f65a70ac7 /wqflask
parentfa79f3b05688a59cdf1c46170b63ebdd6e2ebf4b (diff)
downloadgenenetwork2-64158e2ff7df3f7d177a4a3a0b8d7ff9c8f7cfe5.tar.gz
Converted show_trait_calculate_correlations.html to use CSS instead of styling in the template
* wqflask/wqflask/static/new/css/show_trait.css - Added styling for elements in show_trait_calculate_correlations.html and changed a few existing class names to be more reasonable * wqflask/wqflask/templates/show_trait.html - Changed the class name for the main div * wqflask/wqflask/templates/show_trait_calculate_correlations.html - Substituted direct styling with CSS and changing some styling to make the correlation method descriptions keep a reasonable width and position * wqflask/wqflask/templates/show_trait_statistics.html - Changed some class names to be better
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/static/new/css/show_trait.css57
-rw-r--r--wqflask/wqflask/templates/show_trait.html2
-rw-r--r--wqflask/wqflask/templates/show_trait_calculate_correlations.html295
-rw-r--r--wqflask/wqflask/templates/show_trait_statistics.html10
4 files changed, 202 insertions, 162 deletions
diff --git a/wqflask/wqflask/static/new/css/show_trait.css b/wqflask/wqflask/static/new/css/show_trait.css
index 68aa34e2..f20b840e 100644
--- a/wqflask/wqflask/static/new/css/show_trait.css
+++ b/wqflask/wqflask/static/new/css/show_trait.css
@@ -1,17 +1,17 @@
tr .outlier {
- background-color: #ffff99;
+ background-color: #ffff99;
}
table.dataTable tbody tr.selected {
- background-color: #ffee99;
+ background-color: #ffee99;
}
#bar_chart_container {
- overflow-x:scroll;
+ overflow-x:scroll;
}
div.sample_group {
- overflow: auto; # needed because it contains float dataTable wrapper
+ overflow: auto; # needed because it contains float dataTable wrapper
}
.js-plotly-plot .plotly .modebar {
@@ -58,7 +58,7 @@ table.dataTable.cell-border tbody tr td:first-child {
top: 2px;
}
-.trait_page_main_div {
+.showtrait-main-div {
min-width: 700px;
}
@@ -83,11 +83,12 @@ table.dataTable tbody td.column_name-Value, table.dataTable tbody td.column_name
text-align: right;
}
-div.btn_toolbar {
+div.btn-toolbar {
margin-bottom:15px;
}
-div.stats_form_div {
+/* div containing the form options for each segment of the trait page - correlations, statistics, mapping, etc */
+div.section-form-div {
padding: 20px;
}
@@ -95,6 +96,46 @@ table.left-float {
float: left;
}
-div.scatterplot_btn_div {
+div.scatterplot-btn-div {
margin-bottom:40px;
+}
+
+div.correlation-main {
+ min-width: 1200px;
+}
+
+div.correlation-options {
+ min-width: 700px;
+}
+
+.min-expr-field {
+ width: 70px;
+}
+
+span.p-range-container {
+ display: inline;
+}
+
+div.p-range-slider {
+ width: 200px;
+ margin-left: 15px;
+}
+
+span.p-range-lower {
+ margin-top: 5px;
+ font: 400 12px Arial;
+ color: #888;
+ display: inline-block;
+}
+
+span.p-range-upper {
+ font: 400 12px Arial;
+ color: #888;
+ display: inline-block;
+ margin: 5px 0px 0px 170px;
+}
+
+.corr-location {
+ width: 50px;
+ display: inline;
} \ No newline at end of file
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 3d34b331..599cef42 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -37,7 +37,7 @@
<input type="hidden" name="covariates" value="">
<input type="hidden" name="transform" value="">
- <div class="container trait_page_main_div">
+ <div class="container showtrait-main-div">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="true">
diff --git a/wqflask/wqflask/templates/show_trait_calculate_correlations.html b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
index 9420c9c6..00fdfc21 100644
--- a/wqflask/wqflask/templates/show_trait_calculate_correlations.html
+++ b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
@@ -1,149 +1,148 @@
-<div>
- <div class="col-xs-6" style="min-width: 800px;">
- <div style="padding: 20px" class="form-horizontal">
-
- <div class="form-group">
- <label for="corr_type" class="col-xs-2 control-label">Method</label>
- <div class="col-xs-3 controls">
- <select name="corr_type" class="form-control">
- <option value="sample">Sample r</option>
- <option value="lit">Literature r</option>
- <option value="tissue">Tissue r</option>
- </select>
- </div>
- </div>
-
- <div class="form-group">
- <label for="corr_dataset" class="col-xs-2 control-label">Database</label>
- <div class="col-xs-10 controls">
- <select name="corr_dataset" class="form-control">
- {% for tissue in corr_tools.dataset_menu %}
- {% if tissue.tissue %}
- <optgroup label="{{ tissue.tissue }} ------">
- {% endif %}
- {% for dataset in tissue.datasets %}
- <option value="{{ dataset[1] }}"
- {% if corr_tools.dataset_menu_selected == dataset[1] %}
- selected
- {% endif %}>
- {{ dataset[0] }}
- </option>
- {% endfor %}
- {% if tissue.tissue %}
- </optgroup>
- {% endif %}
- {% endfor %}
- </select>
- </div>
- </div>
-
- <div class="form-group">
- <label for="corr_return_results" class="col-xs-2 control-label">Return</label>
- <div class="col-xs-4 controls">
- <select name="corr_return_results" class="form-control">
- {% for return_result in corr_tools.return_results_menu %}
- <option value="{{ return_result }}"
- {% if corr_tools.return_results_menu_selected == return_result %}
- selected
- {% endif %}>
- Top {{ return_result }}
- </option>
- {% endfor %}
- </select>
- </div>
- </div>
-
- <div class="form-group">
- <label for="corr_samples_group" class="col-xs-2 control-label">Samples</label>
- <div class="col-xs-4 controls">
- <select name="corr_samples_group" class="form-control">
- {% for group, pretty_group in sample_group_types.items() %}
- <option value="{{ group }}">{{ pretty_group }}</option>
- {% endfor %}
- </select>
- </div>
- </div>
-
- <div id="corr_sample_method" class="form-group">
- <label for="corr_sample_method" class="col-xs-2 control-label">Type</label>
- <div class="col-xs-4 controls">
- <select name="corr_sample_method" class="form-control">
- <option value="pearson">Pearson</option>
- <option value="spearman">Spearman Rank</option>
- <option value="bicor">Biweight Midcorrelation</option>
- </select>
- </div>
- </div>
- {% if dataset.type != "Publish" %}
- <div class="form-group">
- <label class="col-xs-2 control-label">Min Expr</label>
- <div class="col-xs-4 controls">
- <input name="min_expr" value="" type="text" class="form-control" style="width: 70px;">
- </div>
- </div>
- <div class="form-group">
- <label class="col-xs-2 control-label">Location</label>
- <div class="col-xs-5 controls">
- <span>
- Chr: <input name="loc_chr" value="" type="text" class="form-control" style="width: 50px; display: inline;">&nbsp;&nbsp;&nbsp;
- Mb: <input name="min_loc_mb" value="" type="text" class="form-control" style="width: 50px; display: inline;"> &nbsp;to&nbsp; <input name="max_loc_mb" value="" type="text" class="form-control" style="width: 50px; display: inline;">
- </span>
- <br>
- </div>
- </div>
- {% endif %}
- <div class="form-group">
- <label class="col-xs-2 control-label">Range</label>
- <div class="col-xs-5 controls">
- <input name="p_range_lower" value="" type="hidden">
- <input name="p_range_upper" value="" type="hidden">
- <span style="display: inline;">
- <div id="p_range_slider" style="width: 200px;"></div>
- <span style="font: 400 12px Arial; color: #888; display: inline; margin: 25px 0; width: 20px;" id="p_range_lower"></span>
- <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
- <span style="font: 400 12px Arial; color: #888; display: inline; margin: 15px 0; width: 20px;" id="p_range_upper"></span>
- </span>
- </div>
- </div>
-
- <div class="form-group">
- <label for="corr_sample_method" class="col-xs-2 control-label"></label>
- <div class="col-xs-3 controls">
- <input type="button" class="btn corr_compute submit_special btn-success" data-url="/corr_compute" title="Compute Correlation" value="Compute">
- </div>
- </div>
+<div class="row correlation-main">
+ <div class="col-xs-3 correlation-options">
+ <div class="form-horizontal section-form-div">
+
+ <div class="form-group">
+ <label for="corr_type" class="col-xs-2 control-label">Method</label>
+ <div class="col-xs-3 controls">
+ <select name="corr_type" class="form-control">
+ <option value="sample">Sample r</option>
+ <option value="lit">Literature r</option>
+ <option value="tissue">Tissue r</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="corr_dataset" class="col-xs-2 control-label">Database</label>
+ <div class="col-xs-10 controls">
+ <select name="corr_dataset" class="form-control">
+ {% for tissue in corr_tools.dataset_menu %}
+ {% if tissue.tissue %}
+ <optgroup label="{{ tissue.tissue }} ------">
+ {% endif %}
+ {% for dataset in tissue.datasets %}
+ <option value="{{ dataset[1] }}"
+ {% if corr_tools.dataset_menu_selected == dataset[1] %}
+ selected
+ {% endif %}>
+ {{ dataset[0] }}
+ </option>
+ {% endfor %}
+ {% if tissue.tissue %}
+ </optgroup>
+ {% endif %}
+ {% endfor %}
+ </select>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="corr_return_results" class="col-xs-2 control-label">Return</label>
+ <div class="col-xs-4 controls">
+ <select name="corr_return_results" class="form-control">
+ {% for return_result in corr_tools.return_results_menu %}
+ <option value="{{ return_result }}"
+ {% if corr_tools.return_results_menu_selected == return_result %}
+ selected
+ {% endif %}>
+ Top {{ return_result }}
+ </option>
+ {% endfor %}
+ </select>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="corr_samples_group" class="col-xs-2 control-label">Samples</label>
+ <div class="col-xs-4 controls">
+ <select name="corr_samples_group" class="form-control">
+ {% for group, pretty_group in sample_group_types.items() %}
+ <option value="{{ group }}">{{ pretty_group }}</option>
+ {% endfor %}
+ </select>
+ </div>
+ </div>
+
+ <div id="corr_sample_method" class="form-group">
+ <label for="corr_sample_method" class="col-xs-2 control-label">Type</label>
+ <div class="col-xs-4 controls">
+ <select name="corr_sample_method" class="form-control">
+ <option value="pearson">Pearson</option>
+ <option value="spearman">Spearman Rank</option>
+ <option value="bicor">Biweight Midcorrelation</option>
+ </select>
+ </div>
+ </div>
+ {% if dataset.type != "Publish" %}
+ <div class="form-group">
+ <label class="col-xs-2 control-label">Min Expr</label>
+ <div class="col-xs-4 controls">
+ <input name="min_expr" value="" type="text" class="form-control min-expr-field">
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-xs-2 control-label">Location</label>
+ <div class="col-xs-6 controls">
+ <span>
+ Chr: <input name="loc_chr" value="" type="text" class="form-control corr-location">&nbsp;&nbsp;&nbsp;
+ Mb: <input name="min_loc_mb" value="" type="text" class="form-control corr-location"> &nbsp;to&nbsp; <input name="max_loc_mb" value="" type="text" class="form-control corr-location">
+ </span>
+ <br>
+ </div>
+ </div>
+ {% endif %}
+ <div class="form-group">
+ <label class="col-xs-2 control-label">Range</label>
+ <div class="col-xs-5 controls">
+ <input name="p_range_lower" value="" type="hidden">
+ <input name="p_range_upper" value="" type="hidden">
+ <span class="p-range-container">
+ <div id="p_range_slider" class="p-range-slider"></div>
+ <span id="p_range_lower" class="p-range-lower"></span>
+ <span id="p_range_upper" class="p-range-upper"></span>
+ </span>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="corr_sample_method" class="col-xs-2 control-label"></label>
+ <div class="col-xs-3 controls">
+ <input type="button" class="btn corr_compute submit_special btn-success" data-url="/corr_compute" title="Compute Correlation" value="Compute">
+ </div>
+ </div>
+ </div>
</div>
- </div>
- <div>
- <span id="sample_r_desc" class="correlation_desc fs12">
- The <a href="http://genenetwork.org/correlationAnnotation.html#genetic_r">Sample Correlation</a>
- is computed
- between trait data and any
- other traits in the sample database selected above. Use
- <a href="http://www.genenetwork.org/glossary.html#Correlations">Spearman
- Rank</a>
- when the sample size is small (&lt;20) or when there are influential outliers.
- </span>
- <span id="lit_r_desc" style="display: none;" class="correlation_desc fs12">
- The <a href="http://genenetwork.org/correlationAnnotation.html#literatureCorr">Literature Correlation</a>
- (Lit r) between
- this gene and all other genes is computed<br>
- using the <a href="https://grits.eecs.utk.edu/sgo/sgo.html">
- Semantic Gene Organizer</a>
- and human, rat, and mouse data from PubMed.
- Values are ranked by Lit r, but Sample r and Tissue r are also displayed.<br>
- <a href="http://genenetwork.org/glossary.html#Literature">More on using Lit r</a>
- </span>
- <span id="tissue_r_desc" style="display: none;" class="correlation_desc fs12">
- The <a href="http://genenetwork.org/webqtl/main.py?FormID=tissueCorrelation">Tissue Correlation</a>
- (Tissue r)
- estimates the similarity of expression of two genes
- or transcripts across different cells, tissues, or organs
- (<a href="http://genenetwork.org/correlationAnnotation.html#tissueCorr">glossary</a>).
- Tissue correlations
- are generated by analyzing expression in multiple samples usually taken from single cases.<br>
- <strong>Pearson</strong> and <strong>Spearman Rank</strong> correlations have been
- computed for all pairs of genes using data from mouse samples.<br>
- </span>
- </div>
-</div> \ No newline at end of file
+ <div class="col-xs-4">
+ <span id="sample_r_desc" class="correlation_desc">
+ The <a href="http://genenetwork.org/correlationAnnotation.html#genetic_r">Sample Correlation</a>
+ is computed
+ between trait data and any
+ other traits in the sample database selected above. Use
+ <a href="http://www.genenetwork.org/glossary.html#Correlations">Spearman
+ Rank</a>
+ when the sample size is small (&lt;20) or when there are influential outliers.
+ </span>
+ <span id="lit_r_desc" style="display: none;" class="correlation_desc">
+ The <a href="http://genenetwork.org/correlationAnnotation.html#literatureCorr">Literature Correlation</a>
+ (Lit r) between
+ this gene and all other genes is computed<br>
+ using the <a href="https://grits.eecs.utk.edu/sgo/sgo.html">
+ Semantic Gene Organizer</a>
+ and human, rat, and mouse data from PubMed.
+ Values are ranked by Lit r, but Sample r and Tissue r are also displayed.<br>
+ <a href="http://genenetwork.org/glossary.html#Literature">More on using Lit r</a>
+ </span>
+ <span id="tissue_r_desc" style="display: none;" class="correlation_desc">
+ The <a href="http://genenetwork.org/webqtl/main.py?FormID=tissueCorrelation">Tissue Correlation</a>
+ (Tissue r)
+ estimates the similarity of expression of two genes
+ or transcripts across different cells, tissues, or organs
+ (<a href="http://genenetwork.org/correlationAnnotation.html#tissueCorr">glossary</a>).
+ Tissue correlations
+ are generated by analyzing expression in multiple samples usually taken from single cases.<br>
+ <strong>Pearson</strong> and <strong>Spearman Rank</strong> correlations have been
+ computed for all pairs of genes using data from mouse samples.<br>
+ </span>
+ </div>
+ </div> \ No newline at end of file
diff --git a/wqflask/wqflask/templates/show_trait_statistics.html b/wqflask/wqflask/templates/show_trait_statistics.html
index 7f50b7bc..4f347d4e 100644
--- a/wqflask/wqflask/templates/show_trait_statistics.html
+++ b/wqflask/wqflask/templates/show_trait_statistics.html
@@ -27,12 +27,12 @@
</ul>
<div class="tab-content">
<div class="tab-pane active" id="stats_tab">
- <div class="form-horizontal stats_form_div">
+ <div class="form-horizontal section-form-div">
<table id="stats_table" style="width: {{ stats_table_width }}px;" class="table table-hover table-striped table-bordered left-float"></table>
</div>
</div>
<div class="tab-pane" id="histogram_tab">
- <div class="form-horizontal stats_form_div">
+ <div class="form-horizontal section-form-div">
{% if sample_groups|length != 1 %}
Select Group:
<select class="histogram_samples_group">
@@ -49,7 +49,7 @@
</div>
{% if num_values < 256 %}
<div class="tab-pane" id="bar_chart_tab">
- <div class="form-horizontal stats_form_div">
+ <div class="form-horizontal section-form-div">
{% if sample_groups|length != 1 %}
Select Group:
<select class="bar_chart_samples_group">
@@ -84,7 +84,7 @@
</div>
{% endif %}
<div class="tab-pane" id="probability_plot">
- <div class="form-horizontal padding-20">
+ <div class="form-horizontal section-form-div">
{% if sample_groups|length != 1 %}
Select Group:
<select class="prob_plot_samples_group">
@@ -117,7 +117,7 @@
</div>
</div>
<div class="tab-pane" id="scatterplot_matrix">
- <div class="btn-group margin-b-40">
+ <div class="btn-group scatterplot-btn-div">
<button type="button" class="btn btn-default" id="select_compare_trait">
<i class="icon-th-large"></i> Select Traits
</button>