diff options
| -rw-r--r-- | wqflask/wqflask/static/new/css/show_trait.css | 57 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/show_trait.html | 2 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/show_trait_calculate_correlations.html | 295 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/show_trait_statistics.html | 10 |
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;"> - Mb: <input name="min_loc_mb" value="" type="text" class="form-control" style="width: 50px; display: inline;"> to <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> </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"> + Mb: <input name="min_loc_mb" value="" type="text" class="form-control corr-location"> to <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 (<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 (<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> |