diff options
Diffstat (limited to 'wqflask/wqflask/templates/gsearch_pheno.html')
| -rw-r--r-- | wqflask/wqflask/templates/gsearch_pheno.html | 301 |
1 files changed, 219 insertions, 82 deletions
diff --git a/wqflask/wqflask/templates/gsearch_pheno.html b/wqflask/wqflask/templates/gsearch_pheno.html index 2f7dcaf6..f6ffff47 100644 --- a/wqflask/wqflask/templates/gsearch_pheno.html +++ b/wqflask/wqflask/templates/gsearch_pheno.html @@ -2,16 +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/packages/DT_bootstrap/DT_bootstrap.css" /> - <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" /> - <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/extensions/dataTables.fixedHeader.css" > - <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css"> + <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" /> {% endblock %} {% block content %} <!-- Start of body --> <div class="container"> + <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> @@ -22,63 +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 style="width: 1500px; background-color: #eeeeee; border: 1px solid black;"> - <table width="1500px" id="trait_table" class="table table-hover table-striped"> - <thead> - <tr> - <th style="background-color: #eeeeee;"></th> - <th data-export="Index" style="background-color: #eeeeee;">Index</th> - <th data-export="Species" style="background-color: #eeeeee;">Species</th> - <th data-export="Group" style="background-color: #eeeeee;">Group</th> - <th data-export="Record" style="background-color: #eeeeee;">Record</th> - <th data-export="Description" style="background-color: #eeeeee;">Description</th> - <th data-export="Authors" style="background-color: #eeeeee;">Authors</th> - <th data-export="Year" style="background-color: #eeeeee;">Year</th> - <th data-export="LRS" style="background-color: #eeeeee; text-align: right;">Max <br>LRS<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th> - <th data-export="LRS Location" style="background-color: #eeeeee;">Max LRS Location</th> - <th data-export="Additive Effect" style="background-color: #eeeeee; text-align: right;">Additive<br>Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></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.name }}"> - <td><INPUT TYPE="checkbox" NAME="searchResult" class="checkbox trait_checkbox" style="transform: scale(1.5);" VALUE="{{ data_hmac('{}:{}'.format(this_trait.name, this_trait.dataset.name)) }}"></td> - <td data-export="{{ loop.index }}">{{ loop.index }}</td> - <td data-export="{{ this_trait.dataset.group.species }}">{{ this_trait.dataset.group.species }}</td> - <td data-export="{{ this_trait.dataset.group.name }}">{{ this_trait.dataset.group.name }}</td> - <td data-export="{{ this_trait.name }}"><a href="{{ url_for('show_trait_page', trait_id = this_trait.name, dataset = this_trait.dataset.name)}}">{{ this_trait.name }}</a></td> - <td data-export="{{ this_trait.description_display }}">{{ this_trait.description_display }}</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="{{ this_trait.LRS_location_repr }}" align="right">{{ this_trait.LRS_location_repr }}</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 style="background-color: #eeeeee;"></th> - <th style="background-color: #eeeeee;">Index</th> - <th style="background-color: #eeeeee;">Species</th> - <th style="background-color: #eeeeee;">Group</th> - <th style="background-color: #eeeeee;">Record</th> - <th style="background-color: #eeeeee;">Description</th> - <th style="background-color: #eeeeee;">Authors</th> - <th style="background-color: #eeeeee;">Year</th> - <th style="background-color: #eeeeee; text-align: right;">Max <br>LRS<a href="http://genenetwork.org//glossary.html#L" target="_blank"><sup style="color:#f00"> ?</sup></a></th> - <th style="background-color: #eeeeee;">Max LRS Location</th> - <th style="background-color: #eeeeee; text-align: right;">Additive<br>Effect<a href="http://genenetwork.org//glossary.html#A" target="_blank"><sup style="color:#f00"> ?</sup></a></th> - </tr> - </tfoot> </table> </div> </div> @@ -89,16 +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 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 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 ) { @@ -107,45 +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( { - "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", "width": "12%"}, - { "type": "natural" } - ], - "columnDefs": [ + '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 > 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 > 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()); + }, + '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, - "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, - "bDeferRender": true, - "scrollY": "800px", - "scrollCollapse": false + '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 %} |