diff options
| -rw-r--r-- | wqflask/wqflask/static/new/css/show_trait.css | 14 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/show_trait_statistics.html | 247 |
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> |