aboutsummaryrefslogtreecommitdiff
path: root/wqflask/wqflask/templates/gsearch_pheno.html
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask/wqflask/templates/gsearch_pheno.html')
-rw-r--r--wqflask/wqflask/templates/gsearch_pheno.html294
1 files changed, 211 insertions, 83 deletions
diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html
index c2cbdadd..f6ffff47 100644
--- a/wqflask/wqflask/templates/gsearch_pheno.html
+++ b/wqflask/wqflask/templates/gsearch_pheno.html
@@ -2,13 +2,17 @@
{% block title %}Search Results{% endblock %}
{% block css %}
<link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
+ <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
{% endblock %}
{% block content %}
<!-- Start of body -->
<div class="container">
- <p>You searched for {{ terms }}.</p>
+ <h3>GN searched for the term(s) <b>"{{ terms }}"</b> in 51 datasets and 13763 traits across 10 species<br/>
+ and found <b>{{ trait_count }}</b> results that match your query.<br/>
+ You can filter these results by adding key words in the fields below<br/>
+ and you can also sort results on most columns.</h3>
<p>To study a record, click on its ID below.<br />Check records below and click Add button to add to selection.</p>
<div>
@@ -19,60 +23,19 @@
<button class="btn btn-default" id="add" disabled ><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
<input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ...">
<input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
- <br />
- <br />
- <form id="export_form" method="POST" action="/export_traits_csv">
+ <form id="export_form" method="POST" action="/export_traits_csv" style="display: inline;">
+ <input type="hidden" name="headers" id="headers" value="{% for field in header_fields %}{{ field }},{% endfor %}">
<input type="hidden" name="database_name" id="database_name" value="None">
<input type="hidden" name="export_data" id="export_data" value="">
<button class="btn btn-default" id="export_traits">Download CSV</button>
</form>
<br />
- <div>
- <table id="trait_table" class="display dataTable nowrap" style="float: left;">
- <thead>
- <tr>
- <th></th>
- <th data-export="Index">Index</th>
- <th data-export="Species">Species</th>
- <th data-export="Group">Group</th>
- <th data-export="Record">Record</th>
- <th data-export="Description">Description</th>
- <th data-export="Authors">Authors</th>
- <th data-export="Year">Year</th>
- <th data-export="Max LRS">Max LRS <a href="http://genenetwork.org//glossary.html#LRS" target="_blank"><img style="width: 15px; height: 15px;" src="/static/new/images/question_mark.jpg"></a></th>
- <th data-export="Additive Effect">Additive Effect <a href="http://genenetwork.org//glossary.html#A" target="_blank"><img style="width: 15px; height: 15px;" src="/static/new/images/question_mark.jpg"></a></th>
- </tr>
- </thead>
+ <br />
+ <div style="width: 100%;">
+ <table id="trait_table" class="table-hover table-striped cell-border" style="float: left;">
<tbody>
- {% for this_trait in trait_list %}
- <tr id="trait:{{ this_trait.name }}:{{ this_trait.dataset }}">
- <td align="center" style="padding-right: 0px; padding-left: 5px;"><input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset)) }}"></td>
- <td align="right" data-export="{{ loop.index }}">{{ loop.index }}</td>
- <td data-export="{{ this_trait.species }}">{{ this_trait.species }}</td>
- <td data-export="{{ this_trait.group }}">{{ this_trait.group }}</td>
- <td data-export="{{ this_trait.name }}"><a href="{{ url_for('show_trait_page', trait_id = this_trait.name, dataset = this_trait.dataset)}}">{{ this_trait.name }}</a></td>
- <td data-export="{{ this_trait.description }}">{{ this_trait.description }}</td>
- <td data-export="{{ this_trait.authors }}">{{ this_trait.authors }}</td>
- <td data-export="{{ this_trait.pubmed_text }}" data-order="{{ this_trait.pubmed_text }}"><a href="{{ this_trait.pubmed_link }}">{{ this_trait.pubmed_text }}</a></td>
- <td data-export="{% if this_trait.LRS_score_repr != "N/A" %}{{ '%0.1f' % this_trait.LRS_score_repr|float }}{% else %}N/A{% endif %}" align="right">{% if this_trait.LRS_score_repr != "N/A" %}{{ '%0.1f' % this_trait.LRS_score_repr|float }}{% else %}N/A{% endif %}</td>
- <td data-export="{% if this_trait.additive != "" %}{{ this_trait.additive }}{% else %}N/A{% endif %}" align="right">{% if this_trait.additive != "" %}{{ this_trait.additive }}{% else %}N/A{% endif %}</td>
- </tr>
- {% endfor %}
+ <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
</tbody>
- <tfoot>
- <tr>
- <th></th>
- <th>Index</th>
- <th>Species</th>
- <th>Group</th>
- <th>Record</th>
- <th>Description</th>
- <th>Authors</th>
- <th>Year</th>
- <th data-export="Max LRS">Max LRS <a href="http://genenetwork.org//glossary.html#LRS" target="_blank"><img style="width: 15px; height: 15px;" src="/static/new/images/question_mark.jpg"></a></th>
- <th data-export="Additive Effect">Additive Effect <a href="http://genenetwork.org//glossary.html#A" target="_blank"><img style="width: 15px; height: 15px;" src="/static/new/images/question_mark.jpg"></a></th>
- </tr>
- </tfoot>
</table>
</div>
</div>
@@ -83,14 +46,18 @@
{% endblock %}
{% block js %}
+ <script language="javascript" type="text/javascript" src="/static/new/js_external/md5.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
-
<script language="javascript" type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.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.colReorder.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script>
-
+
+ <script type='text/javascript'>
+ var the_rows = {{ trait_list|safe }};
+ </script>
+
<script type="text/javascript" charset="utf-8">
$.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col )
{
@@ -99,62 +66,223 @@
} );
};
+ $.fn.dataTable.ext.order['dom-inner-text'] = function ( settings, col )
+ {
+ return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
+ return $(td).text();
+ } );
+ }
+
$(document).ready( function () {
-
+
$('#trait_table tr').click(function(event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
+ function change_buttons() {
+ buttons = ["#add", "#remove"];
+ num_checked = $('.trait_checkbox:checked').length;
+ if (num_checked === 0) {
+ for (_i = 0, _len = buttons.length; _i < _len; _i++) {
+ button = buttons[_i];
+ $(button).prop("disabled", true);
+ }
+ } else {
+ for (_j = 0, _len2 = buttons.length; _j < _len2; _j++) {
+ button = buttons[_j];
+ $(button).prop("disabled", false);
+ }
+ }
+ //});
+ if ($(this).is(":checked")) {
+ if (!$(this).closest('tr').hasClass('selected')) {
+ $(this).closest('tr').addClass('selected')
+ }
+ }
+ else {
+ if ($(this).closest('tr').hasClass('selected')) {
+ $(this).closest('tr').removeClass('selected')
+ }
+ }
+ }
+
console.time("Creating table");
$('#trait_table').DataTable( {
+ 'drawCallback': function( settings ) {
+ $('#trait_table tr').click(function(event) {
+ if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
+ $(':checkbox', this).trigger('click');
+ }
+ });
+ $('.trait_checkbox:checkbox').on("change", change_buttons);
+ },
"createdRow": function ( row, data, index ) {
+ $('td', row).eq(0).attr("style", "text-align: center; padding: 4px 10px 2px 10px;");
+ $('td', row).eq(1).attr("align", "right");
$('td', row).eq(5).attr('title', $('td', row).eq(5).text());
- if ($('td', row).eq(5).text().length > 50) {
- $('td', row).eq(5).text($('td', row).eq(5).text().substring(0, 50));
+ if ($('td', row).eq(5).text().length > 150) {
+ $('td', row).eq(5).text($('td', row).eq(5).text().substring(0, 150));
$('td', row).eq(5).text($('td', row).eq(5).text() + '...')
}
$('td', row).eq(6).attr('title', $('td', row).eq(6).text());
- if ($('td', row).eq(6).text().length > 50) {
- $('td', row).eq(6).text($('td', row).eq(6).text().substring(0, 50));
+ if ($('td', row).eq(6).text().length > 150) {
+ $('td', row).eq(6).text($('td', row).eq(6).text().substring(0, 150));
$('td', row).eq(6).text($('td', row).eq(6).text() + '...')
}
+ $('td', row).slice(8,11).attr("align", "right");
+ $('td', row).eq(1).attr('data-export', $('td', row).eq(1).text());
+ $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+ $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+ $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+ $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+ $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+ $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+ $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+ $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
+ $('td', row).eq(10).attr('data-export', $('td', row).eq(10).text());
},
- "paging": false,
- "columns": [
- { "orderDataType": "dom-checkbox" },
- { "type": "natural" },
- { "type": "natural" },
- { "type": "natural" },
- { "type": "natural" },
- { "type": "natural", "width": "30%"},
- { "type": "natural", "width": "25%"},
- { "type": "natural" },
- { "type": "natural", "width": "8%"},
- { "type": "natural" }
- ],
- "columnDefs": [
+ 'data': the_rows,
+ 'columns': [
+ {
+ 'data': null,
+ 'orderDataType': "dom-checkbox",
+ 'render': function(data, type, row, meta) {
+ return '<input type="checkbox" name="searchResult" class="trait_checkbox checkbox" value="' + data.hmac + '">'
+ }
+ },
+ {
+ 'title': "Index",
+ 'type': "natural",
+ 'data': "index"
+ },
+ {
+ 'title': "Species",
+ 'type': "natural",
+ 'data': "species"
+ },
{
- "targets": 0,
- "orderable": false,
- "orderDataType": "dom-checkbox"
+ 'title': "Group",
+ 'type': "natural",
+ 'width': "10%",
+ 'data': "group"
+ },
+ {
+ 'title': "Record",
+ 'type': "natural",
+ 'data': null,
+ 'render': function(data, type, row, meta) {
+ return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
+ }
+ },
+ {
+ 'title': "Description",
+ 'type': "natural",
+ 'width': "25%",
+ 'data': null,
+ 'render': function(data, type, row, meta) {
+ try {
+ return decodeURIComponent(escape(data.description))
+ } catch(err) {
+ return data.description
+ }
+ }
+ },
+ {
+ 'title': "Mean",
+ 'type': "natural",
+ 'width': "10%",
+ 'data': "mean"
+ },
+ {
+ 'title': "Authors",
+ 'type': "natural",
+ 'width': "25%",
+ 'data': null,
+ 'render': function(data, type, row, meta) {
+ author_list = data.authors.split(",")
+ if (author_list.length >= 6) {
+ author_string = author_list.slice(0, 6).join(",") + ", et al."
+ } else{
+ author_string = data.authors
+ }
+
+ try {
+ return decodeURIComponent(escape(author_string))
+ } catch(err) {
+ return author_string
+ }
+
+ }
+ },
+ {
+ 'title': "Year",
+ 'type': "natural",
+ 'data': null,
+ 'orderDataType': "dom-inner-text",
+ 'render': function(data, type, row, meta) {
+ if (data.pubmed_id != "N/A"){
+ return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
+ } else {
+ return data.pubmed_text
+ }
+ },
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Max LRS<a href=\"http://genenetwork.org//glossary.html#LRS\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a>",
+ 'type': "natural",
+ 'data': "LRS_score_repr",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Max LRS Location",
+ 'type': "natural",
+ 'width': "10%",
+ 'data': "max_lrs_text"
+ },
+ {
+ 'title': "Additive Effect<a href=\"http://genenetwork.org//glossary.html#A\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a>",
+ 'type': "natural",
+ 'data': "additive",
+ 'orderSequence': [ "desc", "asc"]
}
],
- "order": [[1, "asc" ]],
- "sDom": "tir",
- "autoWidth": false,
- "deferRender": true,
- "bSortClasses": false,
- "scrollY": "600px",
- "scrollCollapse": true,
- "scroller": true,
- "scrollX": true,
- "paging": false,
- "orderClasses": true
+ 'order': [[1, "asc" ]],
+ 'sDom': "tir",
+ 'autoWidth': false,
+ 'deferRender': true,
+ 'paging': false,
+ 'orderClasses': true,
+ 'processing': true,
+ 'language': {
+ 'loadingRecords': '&nbsp;',
+ 'processing': 'Loading...'
+ }
} );
+
+ $('#trait_table').append(
+ '<tfoot>' +
+ '<tr>' +
+ '<th></th>' +
+ '<th>Index</th>' +
+ '<th>Species</th> ' +
+ '<th>Group</th>' +
+ '<th>Record</th>' +
+ '<th>Description</th>' +
+ '<th>Authors</th>' +
+ '<th>Year</th>' +
+ '<th>Max LRS</th>' +
+ '<th>Max LRS Location</th>' +
+ '<th>Additive Effect</th>' +
+ '</tr>' +
+ '</tfoot>'
+ );
+
console.timeEnd("Creating table");
});
</script>
+ <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
{% endblock %}
generated by cgit v1.2.3 (git 2.44.0) at 2024-11-25 07:14:20 +0000