diff options
Diffstat (limited to 'wqflask/wqflask/templates/gsearch_pheno.html')
| -rw-r--r-- | wqflask/wqflask/templates/gsearch_pheno.html | 217 |
1 files changed, 138 insertions, 79 deletions
diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html index c2cbdadd..96a5d71a 100644 --- a/wqflask/wqflask/templates/gsearch_pheno.html +++ b/wqflask/wqflask/templates/gsearch_pheno.html @@ -2,6 +2,7 @@ {% 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 --> @@ -28,51 +29,10 @@ </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> + <table id="trait_table" width="100%" 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 +43,17 @@ {% endblock %} {% block js %} - <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script> - + <script language="javascript" type="text/javascript" src="/static/new/js_external/md5.min.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,8 +62,15 @@ } ); }; + $.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'); @@ -109,52 +79,141 @@ console.time("Creating table"); $('#trait_table').DataTable( { + 'drawCallback': function( settings ) { + $('#trait_table tr').click(function(event) { + if (event.target.type !== 'checkbox') { + $(':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"); }, - "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" + }, { - "targets": 0, - "orderable": false, - "orderDataType": "dom-checkbox" + 'title': "Species", + 'type': "natural", + 'data': "species" + }, + { + 'title': "Group", + 'type': "natural", + 'width': "10%", + 'data': "group" + }, + { + 'title': "Record", + 'type': "natural", + 'data': null, + 'render': function(data, type, row, meta) { + return '<a href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.name + '</a>' + } + }, + { + 'title': "Description", + 'type': "natural", + 'width': "25%", + 'data': "description" + }, + { + 'title': "Authors", + 'type': "natural", + 'width': "25%", + 'data': "authors" + }, + { + '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': ' ', + '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 %} |