aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzsloan2020-10-14 14:43:23 -0500
committerzsloan2020-10-14 14:43:23 -0500
commitc32766556222b9f8167496268bc4011f77b60138 (patch)
tree3b17a7a88d3ee8ce5d4d69528db51cc4b73d6730
parent794b176384dbe5a8c837a913f9a86f4d36adadcd (diff)
downloadgenenetwork2-c32766556222b9f8167496268bc4011f77b60138.tar.gz
Moved show_trait_statistics.html styling to show_trait.css and fixed a minor issue where not all figures had "Select Group:" before the group selection drop-down
* wqflask/wqflask/static/new/css/show_trait.css - Moved styling from show_trait_statistic.html here * wqflask/wqflask/templates/show_trait_statistics.html - Replaced styling with classes, removed some unnecessary/unused styling, and added some missing label text
-rw-r--r--wqflask/wqflask/static/new/css/show_trait.css14
-rw-r--r--wqflask/wqflask/templates/show_trait_statistics.html247
2 files changed, 131 insertions, 130 deletions
diff --git a/wqflask/wqflask/static/new/css/show_trait.css b/wqflask/wqflask/static/new/css/show_trait.css
index 671b3cf7..ade7128c 100644
--- a/wqflask/wqflask/static/new/css/show_trait.css
+++ b/wqflask/wqflask/static/new/css/show_trait.css
@@ -83,6 +83,18 @@ table.dataTable tbody td.column_name-Value, table.dataTable tbody td.column_name
text-align: right;
}
-.btn_toolbar {
+div.btn_toolbar {
margin-bottom:15px;
+}
+
+div.padding-20 {
+ padding: 20px;
+}
+
+table.left-float {
+ float: left;
+}
+
+div.margin-b-40 {
+ margin-bottom:40px;
} \ 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 7bdb3ef9..f7d93447 100644
--- a/wqflask/wqflask/templates/show_trait_statistics.html
+++ b/wqflask/wqflask/templates/show_trait_statistics.html
@@ -1,148 +1,137 @@
<div>
- <div class="tabbable"> <!-- Only required for left/right tabs -->
- <ul class="nav nav-pills">
- <li class="active">
- <a href="#stats_tab" data-toggle="tab">Basic Statistics</a>
- </li>
- <li>
- <a href="#histogram_tab" class="histogram_tab" data-toggle="tab">Histogram</a>
- </li>
- {% if num_values < 256 %}
- <li>
- <a href="#bar_chart_tab" class="bar_chart_tab" data-toggle="tab">Bar Chart</a>
- </li>
- {% endif %}
- <li>
- <a href="#probability_plot" class="prob_plot_tab" data-toggle="tab">Probability Plot</a>
- </li>
- <li>
- <a href="#box_plot_tab" class="box_plot_tab" data-toggle="tab">Box Plot</a>
- </li>
- <li>
- <a href="#violin_plot_tab" class="violin_plot_tab" data-toggle="tab">Violin Plot</a>
- </li>
- <li>
- <a href="#scatterplot_matrix" data-toggle="tab">Scatterplot Matrix</a>
- </li>
- </ul>
-
- <div class="tab-content">
- <div class="tab-pane active" id="stats_tab">
- <div style="padding: 20px;" class="form-horizontal">
- <table id="stats_table" style="width: {{ stats_table_width }}px; float: left;" class="table table-hover table-striped table-bordered"></table>
- </div>
- </div>
- <div class="tab-pane" id="histogram_tab">
- <div style="padding: 20px" class="form-horizontal">
- {% if sample_groups|length != 1 %}
- <select class="histogram_samples_group">
- {% for group, pretty_group in sample_group_types.items() %}
- <option value="{{ group }}">{{ pretty_group }}</option>
- {% endfor %}
- </select>
- <br><br>
- {% endif %}
- <div id="histogram_container">
- <div id="histogram" class="barchart"></div>
- </div>
- </div>
+ <div class="tabbable"> <!-- Only required for left/right tabs -->
+ <ul class="nav nav-pills">
+ <li class="active">
+ <a href="#stats_tab" data-toggle="tab">Basic Statistics</a>
+ </li>
+ <li>
+ <a href="#histogram_tab" class="histogram_tab" data-toggle="tab">Histogram</a>
+ </li>
+ {% if num_values < 256 %}
+ <li>
+ <a href="#bar_chart_tab" class="bar_chart_tab" data-toggle="tab">Bar Chart</a>
+ </li>
+ {% endif %}
+ <li>
+ <a href="#probability_plot" class="prob_plot_tab" data-toggle="tab">Probability Plot</a>
+ </li>
+ <li>
+ <a href="#box_plot_tab" class="box_plot_tab" data-toggle="tab">Box Plot</a>
+ </li>
+ <li>
+ <a href="#violin_plot_tab" class="violin_plot_tab" data-toggle="tab">Violin Plot</a>
+ </li>
+ <li>
+ <a href="#scatterplot_matrix" data-toggle="tab">Scatterplot Matrix</a>
+ </li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="stats_tab">
+ <div class="form-horizontal padding-20">
+ <table id="stats_table" style="width: {{ stats_table_width }}px;" class="table table-hover table-striped table-bordered left-float"></table>
</div>
- {% if num_values < 256 %}
- <div class="tab-pane" id="bar_chart_tab">
- <div style="padding: 20px" class="form-horizontal">
- {% if sample_groups|length != 1 %}
- <select class="bar_chart_samples_group">
- {% for group, pretty_group in sample_group_types.items() %}
- <option value="{{ group }}">{{ pretty_group }}</option>
- {% endfor %}
- </select>
- {% endif %}
- {% if sample_groups[0].attributes %}
- <div class="input-append">
- <select id="color_attribute" size="1">
- <option value="None">None</option>
- {% for attribute in sample_groups[0].attributes %}
- <option value="{{ sample_groups[0].attributes[attribute].name.replace(' ', '_') }}">
- {{ sample_groups[0].attributes[attribute].name }}</option>
- {% endfor %}
- </select>
- </div>
- {% endif %}
- <div id="update_bar_chart" class="btn-group" style="margin-bottom: 5px;">
- <button type="button" class="btn btn-default sort_by_name" value="name">
- <i class="icon-resize-horizontal"></i> Sort By Name
- </button>
- <button type="button" class="btn btn-default sort_by_value" value="value">
- <i class="icon-signal"></i> Sort By Value
- </button>
- </div>
- <!--
- <div class="btn-group">
- <button type="button" class="btn btn-default" id="color_by_trait" style="margin-bottom: 5px;">
- <i class="icon-tint"></i> Color by Trait
- </button>
- </div>
- -->
- <div id="bar_chart_container">
- <div id="bar_chart"></div>
- </div>
+ </div>
+ <div class="tab-pane" id="histogram_tab">
+ <div class="form-horizontal padding-20">
+ {% if sample_groups|length != 1 %}
+ Select Group:
+ <select class="histogram_samples_group">
+ {% for group, pretty_group in sample_group_types.items() %}
+ <option value="{{ group }}">{{ pretty_group }}</option>
+ {% endfor %}
+ </select>
+ <br><br>
+ {% endif %}
+ <div id="histogram_container">
+ <div id="histogram" class="barchart"></div>
</div>
</div>
- {% endif %}
- <div class="tab-pane" id="probability_plot">
- <div style="padding: 20px" class="form-horizontal">
- {% if sample_groups|length != 1 %}
- Select Group:
- <select class="prob_plot_samples_group">
- {% for group, pretty_group in sample_group_types.items() %}
- <option value="{{ group }}">{{ pretty_group }}</option>
+ </div>
+ {% if num_values < 256 %}
+ <div class="tab-pane" id="bar_chart_tab">
+ <div class="form-horizontal padding-20">
+ {% if sample_groups|length != 1 %}
+ Select Group:
+ <select class="bar_chart_samples_group">
+ {% for group, pretty_group in sample_group_types.items() %}
+ <option value="{{ group }}">{{ pretty_group }}</option>
+ {% endfor %}
+ </select>
+ {% endif %}
+ {% if sample_groups[0].attributes %}
+ <div class="input-append">
+ <select id="color_attribute" size="1">
+ <option value="None">None</option>
+ {% for attribute in sample_groups[0].attributes %}
+ <option value="{{ sample_groups[0].attributes[attribute].name.replace(' ', '_') }}">
+ {{ sample_groups[0].attributes[attribute].name }}</option>
{% endfor %}
</select>
- <br>
- <br>
- {% endif %}
-
- <div id="prob_plot_container">
- <div id="prob_plot_div"></div>
- </div>
- <div id="shapiro_wilk_text"></div>
- <div>
- More about <a href="http://en.wikipedia.org/wiki/Normal_probability_plot">Normal Probability Plots</a> and more
- about interpreting these plots from the <a href="http://genenetwork.org/glossary.html#normal_probability">glossary</a>
- </div>
-
</div>
-
- </div>
- <div class="tab-pane" id="box_plot_tab">
- <div id="box_plot_container">
- <div id="box_plot"></div>
+ {% endif %}
+ <div id="update_bar_chart" class="btn-group">
+ <button type="button" class="btn btn-default sort_by_name" value="name">
+ <i class="icon-resize-horizontal"></i> Sort By Name
+ </button>
+ <button type="button" class="btn btn-default sort_by_value" value="value">
+ <i class="icon-signal"></i> Sort By Value
+ </button>
</div>
- </div>
- <div class="tab-pane" id="violin_plot_tab">
- <div id="violin_plot_container">
- <div id="violin_plot"></div>
+ <div id="bar_chart_container">
+ <div id="bar_chart"></div>
</div>
</div>
- <div class="tab-pane" id="scatterplot_matrix">
-
- <div style="margin-bottom:40px;" class="btn-group">
- <button type="button" class="btn btn-default" id="select_compare_trait">
- <i class="icon-th-large"></i> Select Traits
- </button>
- <button type="button" class="btn btn-default" id="clear_compare_trait">
- <i class="icon-trash"></i> Clear
- </button>
+ </div>
+ {% endif %}
+ <div class="tab-pane" id="probability_plot">
+ <div class="form-horizontal padding-20">
+ {% if sample_groups|length != 1 %}
+ Select Group:
+ <select class="prob_plot_samples_group">
+ {% for group, pretty_group in sample_group_types.items() %}
+ <option value="{{ group }}">{{ pretty_group }}</option>
+ {% endfor %}
+ </select>
+ <br>
+ <br>
+ {% endif %}
+
+ <div id="prob_plot_container">
+ <div id="prob_plot_div"></div>
</div>
- <div id="scatterplot_container">
- <div id="comparison_scatterplot" class="qtlcharts"></div>
+ <div id="shapiro_wilk_text"></div>
+ <div>
+ More about <a href="http://en.wikipedia.org/wiki/Normal_probability_plot">Normal Probability Plots</a> and more
+ about interpreting these plots from the <a href="http://genenetwork.org/glossary.html#normal_probability">glossary</a>
</div>
</div>
</div>
+ <div class="tab-pane" id="box_plot_tab">
+ <div id="box_plot_container">
+ <div id="box_plot"></div>
+ </div>
+ </div>
+ <div class="tab-pane" id="violin_plot_tab">
+ <div id="violin_plot_container">
+ <div id="violin_plot"></div>
+ </div>
+ </div>
+ <div class="tab-pane" id="scatterplot_matrix">
+ <div class="btn-group margin-b-40">
+ <button type="button" class="btn btn-default" id="select_compare_trait">
+ <i class="icon-th-large"></i> Select Traits
+ </button>
+ <button type="button" class="btn btn-default" id="clear_compare_trait">
+ <i class="icon-trash"></i> Clear
+ </button>
+ </div>
+ <div id="scatterplot_container">
+ <div id="comparison_scatterplot" class="qtlcharts"></div>
+ </div>
+ </div>
</div>
- <!--</div>-->
+ </div>
<div id="collections_holder_wrapper" style="display:none;">
<div id="collections_holder"></div>
</div>
-
</div>