aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzsloan2016-06-03 23:04:48 +0000
committerzsloan2016-06-03 23:04:48 +0000
commit3bc5e361d135777c1c4cfc2cef5b6aca7a6fa984 (patch)
tree719288a8c0ac56e88652831adfc9079b4baff3dd
parentab133cc37015ea469f4d41155b58f0435d9001f3 (diff)
downloadgenenetwork2-3bc5e361d135777c1c4cfc2cef5b6aca7a6fa984.tar.gz
Made a bunch of changes to correlation and search result tables (mainly the former) and made all tables a little more compact by lessenning the padding
-rwxr-xr-xwqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css4
-rwxr-xr-xwqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js8
-rwxr-xr-xwqflask/wqflask/templates/correlation_page.html252
-rwxr-xr-xwqflask/wqflask/templates/search_result_page.html2
4 files changed, 145 insertions, 121 deletions
diff --git a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
index 931ec6b3..6540d01f 100755
--- a/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
+++ b/wqflask/wqflask/static/new/packages/DataTables/css/jquery.dataTables.css
@@ -20,7 +20,7 @@ table.dataTable tfoot th {
}
table.dataTable thead th,
table.dataTable thead td {
- padding: 10px 18px;
+ padding: 10px 18px 10px 0px;
border-bottom: 1px solid #111;
}
table.dataTable thead th:active,
@@ -69,7 +69,7 @@ table.dataTable tbody tr.selected {
}
table.dataTable tbody th,
table.dataTable tbody td {
- padding: 8px 10px;
+ padding: 4px 5px;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
border-top: 1px solid #ddd;
diff --git a/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js b/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js
index dbb40446..8b7fa8fd 100755
--- a/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js
+++ b/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.naturalSort.js
@@ -49,16 +49,16 @@ function naturalSort (a, b) {
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"natural-asc": function ( a, b ) {
// first check if null or n/a
- if (a == "N/A" || a == "NA" || a == "") return 1;
- else if (b == "N/A" || b == "NA" || b == "") return -1;
+ if (a == "N/A" || a == "NA" || a == "" || a == "--") return 1;
+ else if (b == "N/A" || b == "NA" || b == "" || b == "--") return -1;
else {
return naturalSort(a,b);
}
},
"natural-desc": function ( a, b ) {
- if (a == "N/A" || a == "NA" || a == "") return 1;
- else if (b == "N/A" || b == "NA" || b == "") return -1;
+ if (a == "N/A" || a == "NA" || a == "" || a == "--") return 1;
+ else if (b == "N/A" || b == "NA" || b == "" || b == "--") return -1;
else {
return naturalSort(a,b) * -1;
}
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index efc94c42..c5b4477b 100755
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -3,8 +3,6 @@
<link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
- <link href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css" rel="stylesheet">
- <link href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/extensions/buttons.bootstrap.css" />
{% endblock %}
{% block content %}
@@ -34,55 +32,65 @@
<br />
<br />
- <div>
- <table id="trait_table" class="table table-hover table-striped">
+ <div style="width: {% if target_dataset.type == "ProbeSet" %}1600px{% elif target_dataset.type == "Publish" %}1200px{% else %}800px{% endif %}; background-color: #eeeeee; border: 1px solid black;">
+ <table width="1600px" id="trait_table" class="table table-hover table-striped">
<thead>
<tr>
- <th style="width: 30px;"></th>
+ <th style="width: 30px; background-color: #eeeeee;"></th>
{% for header in target_dataset.header_fields %}
- {% if header == 'Max LRS' %}
- <th style="text-align: right;">Max&nbsp;&nbsp;<br>LRS<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+ {% if header == 'Year' %}
+ <th style="text-align: right; background-color: #eeeeee;">{{header}}</th>
+ {% elif header == 'Max LRS' %}
+ <th style="text-align: right; background-color: #eeeeee;">Max&nbsp;&nbsp;<br>LRS<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+ {% elif header == 'Max LRS Location' %}
+ <th style="text-align: right; background-color: #eeeeee;">{{header}}</th>
+ {% elif header == 'Location' %}
+ <th style="text-align: right; background-color: #eeeeee;">{{header}}</th>
+ {% elif header == 'Mean' %}
+ <th style="text-align: right; background-color: #eeeeee;">{{header}}</th>
{% elif header == 'Additive Effect' %}
- <th style="text-align: right;">Additive<br>Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+ <th style="text-align: right; background-color: #eeeeee;">Add&nbsp;&nbsp;<br>Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th>
+ {% elif header == 'Index' %}
+ <th style="text-align: right; background-color: #eeeeee; padding-left: 0px; margin-left: 0px;">{{header}}</th>
+ {% elif header == 'N' %}
+ <th style="text-align: right; background-color: #eeeeee;">{{header}}</th>
{% else %}
- <th>{{header}}</th>
+ <th style="background-color: #eeeeee;">{{header}}</th>
{% endif %}
{% endfor %}
- {% if target_dataset.type == "ProbeSet" %}
+ {% if target_dataset.type == "ProbeSet" %}
{% if corr_method == 'pearson' %}
- <th>Sample r</th>
- <th>N Cases</th>
- <th>Sample p(r)</th>
- <th>Lit Corr</th>
- <th>Tissue r</th>
- <th>Tissue p(r)</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample r</th>
+ <th style="text-align: right; background-color: #eeeeee;">&nbsp;&nbsp;N</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample p(r)</th>
+ <th style="text-align: right; background-color: #eeeeee;">Lit r</th>
+ <th style="text-align: right; background-color: #eeeeee;">Tissue r</th>
{% else %}
- <th>Sample rho</th>
- <th>N Cases</th>
- <th>Sample p(rho)</th>
- <th>Lit Corr</th>
- <th>Tissue rho</th>
- <th>Tissue p(rho)</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample rho</th>
+ <th style="text-align: right; background-color: #eeeeee;">N</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample p(rho)</th>
+ <th style="text-align: right; background-color: #eeeeee;">Lit r</th>
+ <th style="text-align: right; background-color: #eeeeee;">Tissue rho</th>
{% endif %}
{% elif target_dataset.type == "Publish" %}
{% if corr_method == 'pearson' %}
- <th>Sample r</th>
- <th>N Cases</th>
- <th>Sample p(r)</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample r</th>
+ <th style="text-align: right; background-color: #eeeeee;">&nbsp;&nbsp;N</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample p(r)</th>
{% else %}
- <th>Sample rho</th>
- <th>N Cases</th>
- <th>Sample p(rho)</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample rho</th>
+ <th style="text-align: right; background-color: #eeeeee;">&nbsp;&nbsp;N</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample p(rho)</th>
{% endif %}
{% elif target_dataset.type == "Geno" %}
{% if corr_method == 'pearson' %}
- <th>Sample r</th>
- <th>N Cases</th>
- <th>Sample p(r)</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample r</th>
+ <th style="text-align: right; background-color: #eeeeee;">N</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample p(r)</th>
{% else %}
- <th>Sample rho</th>
- <th>N Cases</th>
- <th>Sample p(rho)</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample rho</th>
+ <th style="text-align: right; background-color: #eeeeee;">N</th>
+ <th style="text-align: right; background-color: #eeeeee;">Sample p(rho)</th>
{% endif %}
{% endif %}
</tr>
@@ -91,58 +99,56 @@
<tbody>
{% for trait in correlation_results %}
<tr>
- <TD><INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" VALUE="{{ data_hmac('{}:{}'.format(trait.name, trait.dataset.name)) }}">
- </TD>
- <TD align="right">{{ loop.index }}</TD>
- <TD>
+ <td>&nbsp;<INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" VALUE="{{ data_hmac('{}:{}'.format(trait.name, trait.dataset.name)) }}"></td>
+ <td align="right">{{ loop.index }}</td>
+ <td>
<a href="{{ url_for('show_trait_page',
trait_id = trait.name,
dataset = dataset.name
)}}">
{{ trait.name }}
</a>
- </TD>
+ </td>
{% if target_dataset.type == 'ProbeSet' %}
- <TD>{{ trait.symbol }}</TD>
- <TD>{{ trait.description_display }}</TD>
- <TD style="white-space: nowrap;">{{ trait.location_repr }}</TD>
- <TD align="right">{{ '%0.3f' % trait.mean|float }}</TD>
- <TD align="right">{{ '%0.3f' % trait.LRS_score_repr|float }}</TD>
- <TD style="white-space: nowrap;">{{ trait.LRS_location_repr }}</TD>
- <TD align="right">{{ '%0.3f' % trait.additive|float }}</TD>
- <TD><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></TD>
- <TD>{{ trait.num_overlap }}</TD>
- <TD>{{'%0.3e'|format(trait.sample_p)}}</TD>
+ <td>{{ trait.symbol }}</td>
+ <td>{{ trait.description_display }}</TD>
+ <td align="right"style="white-space: nowrap;">{{ trait.location_repr }}</td>
+ <td align="right">{{ '%0.3f' % trait.mean|float }}</td>
+ <td align="right" style="padding-right: 15px;">{% if trait.LRS_score_repr != "N/A" %}{{ '%0.1f' % trait.LRS_score_repr|float }}{% else %}N/A{% endif %}</td>
+ <td align="right" style="padding-right: 15px;">{{ trait.LRS_location_repr }}</td>
+ <td align="right" style="padding-right: 15px;">{% if trait.additive != "" %}{{ '%0.3f' % trait.additive|float }}{% else %}N/A{% endif %}</td>
+ <td align="right" style="padding-right: 15px;"><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td>
+ <td align="right" style="padding-right: 15px;">{{ trait.num_overlap }}</td>
+ <td align="right" style="padding-right: 15px;">{{'%0.3e'|format(trait.sample_p)}}</td>
{% if trait.lit_corr == "" or trait.lit_corr == 0.000 %}
- <TD>--</TD>
+ <td align="right" style="padding-right: 15px;">--</td>
{% else %}
- <TD>{{'%0.3f'|format(trait.lit_corr)}}</TD>
+ <td align="right" style="padding-right: 15px;">{{'%0.3f'|format(trait.lit_corr)}}</td>
{% endif %}
{% if trait.tissue_corr == "" or trait.tissue_corr == 0.000 %}
- <TD>--</TD>
+ <td align="right" style="padding-right: 15px;">--</td>
{% else %}
- <TD>{{'%0.3f'|format(trait.tissue_corr)}}</TD>
+ <td align="right" style="padding-right: 15px;">{{'%0.3f'|format(trait.tissue_corr)}}</td>
{% endif %}
- <TD>{{'%0.3e'|format(trait.tissue_pvalue)}}</TD>
{% elif target_dataset.type == "Publish" %}
- <TD>{{ trait.description_display }}</TD>
- <TD>{{ trait.authors }}</TD>
- <TD>
+ <td>{{ trait.description_display }}</td>
+ <td>{{ trait.authors }}</td>
+ <td>
<a href="{{ trait.pubmed_link }}">
{{ trait.pubmed_text }}
</a>
- </TD>
- <TD>{{ trait.LRS_score_repr }}</TD>
- <TD>{{ trait.LRS_location_repr }}</TD>
- <TD>{{ '%0.3f' % trait.additive|float }}</TD>
- <TD><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></TD>
- <TD>{{ trait.num_overlap }}</TD>
- <TD>{{'%0.3e'|format(trait.sample_p)}}</TD>
+ </td>
+ <td align="right" style="padding-right: 15px;">{{ trait.LRS_score_repr }}</td>
+ <td align="right" style="padding-right: 15px;">{{ trait.LRS_location_repr }}</td>
+ <td align="right" style="padding-right: 15px;">{% if trait.additive != "" %}{{ '%0.3f' % trait.additive|float }}{% else %}N/A{% endif %}</td>
+ <td align="right" style="padding-right: 15px;"><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td>
+ <td align="right" style="padding-right: 15px;">{{ trait.num_overlap }}</td>
+ <td align="right" style="padding-right: 15px;">{{'%0.3e'|format(trait.sample_p)}}</td>
{% elif target_dataset.type == "Geno" %}
- <TD>{{ trait.location_repr }}</TD>
- <TD><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></TD>
- <TD>{{ trait.num_overlap }}</TD>
- <TD>{{'%0.3e'|format(trait.sample_p)}}</TD>
+ <td align="right" style="padding-right: 15px;">{{ trait.location_repr }}</TD>
+ <td align="right" style="padding-right: 15px;"><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td>
+ <td align="right" style="padding-right: 15px;">{{ trait.num_overlap }}</td>
+ <td align="right" style="padding-right: 15px;">{{'%0.3e'|format(trait.sample_p)}}</td>
{% endif %}
</tr>
{% endfor %}
@@ -161,12 +167,8 @@
<script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.0/js/buttons.bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/js_external/jszip.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
- <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script>
- <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colReorder.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>
- <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
- <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
<script type="text/javascript" charset="utf-8">
function getValue(x) {
@@ -229,15 +231,28 @@
console.time("Creating table");
{% if target_dataset.type == "ProbeSet" %}
-
-
$('#trait_table').dataTable( {
+ "paging": false,
+ "buttons": [
+ {
+ extend: 'csvHtml5',
+ text: 'Download CSV',
+ title: 'correlation_results',
+ fieldBoundary: '"',
+ exportOptions: {
+ columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
+ }
+ }
+ ],
+ "columnDefs": [
+ { "targets": 0, "orderable": false }
+ ],
"columns": [
{ "type": "natural" },
{ "type": "natural" },
{ "type": "natural" },
{ "type": "natural" },
- { "type": "natural" },
+ { "type": "natural", "width": "20%" },
{ "type": "natural" },
{ "type": "natural" },
{ "type": "natural" },
@@ -247,19 +262,14 @@
{ "type": "natural" },
{ "type": "natural" },
{ "type": "natural" },
- { "type": "natural" },
{ "type": "natural" }
],
- "buttons": [
- 'csvHtml5'
- ],
- "sDom": "RZBtir",
- "iDisplayLength": -1,
+ "order": [[10, "desc" ]],
+ "sDom": "Btir",
+ "autoWidth": false,
"bDeferRender": true,
- "bSortClasses": false,
- //"scrollY": "700px",
- //"scrollCollapse": false,
- "paging": false
+ "scrollY": "800px",
+ "scrollCollapse": false
} );
var table = $('#trait_table').DataTable();
@@ -267,12 +277,27 @@
{% elif target_dataset.type == "Publish" %}
$('#trait_table').dataTable( {
+ "paging": false,
+ "buttons": [
+ {
+ extend: 'csvHtml5',
+ text: 'Download CSV',
+ title: 'correlation_results',
+ fieldBoundary: '"',
+ exportOptions: {
+ columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+ }
+ }
+ ],
+ "columnDefs": [
+ { "targets": 0, "orderable": false }
+ ],
"columns": [
{ "type": "natural" },
{ "type": "natural" },
{ "type": "natural" },
- { "type": "natural" },
- { "type": "natural" },
+ { "type": "natural", "width": "25%" },
+ { "type": "natural", "width": "10%" },
{ "type": "natural" },
{ "type": "natural" },
{ "type": "natural" },
@@ -281,24 +306,30 @@
{ "type": "natural" },
{ "type": "natural" }
],
- "buttons": [
- 'csvHtml5'
- ],
- "sDom": "RZBtir",
- "iDisplayLength": -1,
- "autoWidth": true,
- "bLengthChange": true,
+ "order": [[9, "desc" ]],
+ "sDom": "Btir",
+ "autoWidth": false,
"bDeferRender": true,
- "bSortClasses": false,
- "scrollY": "700px",
- "scrollCollapse": false,
- "colResize": {
- "tableWidthFixed": false
- },
- "paging": false
+ "scrollY": "800px",
+ "scrollCollapse": false
} );
{% elif target_dataset.type == "Geno" %}
$('#trait_table').dataTable( {
+ "paging": false,
+ "buttons": [
+ {
+ extend: 'csvHtml5',
+ text: 'Download CSV',
+ title: 'correlation_results',
+ fieldBoundary: '"',
+ exportOptions: {
+ columns: [1, 2, 3, 4, 5, 6]
+ }
+ }
+ ],
+ "columnDefs": [
+ { "targets": 0, "orderable": false }
+ ],
"columns": [
{ "type": "natural" },
{ "type": "natural" },
@@ -308,21 +339,12 @@
{ "type": "natural" },
{ "type": "natural" }
],
- "buttons": [
- 'csvHtml5'
- ],
- "sDom": "RZBtir",
- "iDisplayLength": -1,
- "autoWidth": true,
- "bLengthChange": true,
+ "order": [[4, "desc" ]],
+ "sDom": "Btir",
+ "autoWidth": false,
"bDeferRender": true,
- "bSortClasses": false,
- "scrollY": "700px",
- "scrollCollapse": false,
- "colResize": {
- "tableWidthFixed": false
- },
- "paging": false
+ "scrollY": "800px",
+ "scrollCollapse": false
} );
{% endif %}
console.timeEnd("Creating table");
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 7d25dc61..4b4f3584 100755
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -145,6 +145,7 @@
</TR>
{% endfor %}
</tbody>
+ {% if trait_list|length > 20 %}
<tfoot>
<tr>
<th style="width: 30px;"></th>
@@ -159,6 +160,7 @@
{% endfor %}
</tr>
</tfoot>
+ {% endif %}
</table>
</div>
</div>