diff options
Diffstat (limited to 'gn2/wqflask/templates/gsearch_gene.html')
| -rw-r--r-- | gn2/wqflask/templates/gsearch_gene.html | 267 |
1 files changed, 267 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/gsearch_gene.html b/gn2/wqflask/templates/gsearch_gene.html new file mode 100644 index 00000000..6bc92377 --- /dev/null +++ b/gn2/wqflask/templates/gsearch_gene.html @@ -0,0 +1,267 @@ +{% extends "base.html" %} +{% block title %}Search Results{% endblock %} +{% block css %} + <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" /> + <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/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 754 datasets and 39,765,944 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 Record ID below.<br />Check records below and click Add button to add to selection.</p> + + <div> + <br /> + <button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button> + <button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button> + <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button> + <button class="btn btn-success" id="add" disabled ><span class="glyphicon glyphicon-plus-sign"></span> Add</button> + <input type="text" id="searchbox" class="form-control" style="width: 180px; display: inline;" placeholder="Search This Table For ..."> + <input type="text" id="select_top" class="form-control" style="width: 120px; display: inline;" placeholder="Select Top ..."> + <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</button> + </form> + <br /> + <br /> + <div id="table_container" style="width: 2000px;"> + <table id="trait_table" class="table-hover table-striped cell-border" style="float: left;"> + <tbody> + <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td> + </tbody> + </table> + </div> + </div> + </div> + +<!-- End of body --> + +{% endblock %} + +{% block js %} + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.min.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colReorder/js/dataTables.colReorder.js') }}"></script> + <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colResize/dataTables.colResize.js') }}"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script> + + <script type='text/javascript'> + var getParams = function(url) { + let parser = document.createElement('a'); + parser.href = url; + let params = parser.search.substring(1); + if(params.length > 0) { + return ('?'+params); + } + return params; + }; + </script> + + <script type='text/javascript'> + var traitsJson = {{ trait_list|safe }}; + </script> + + <script type="text/javascript" charset="utf-8"> + $(document).ready( function () { + var tableId = "trait_table"; + + columnDefs = [ + { + 'orderDataType': "dom-checkbox", + 'width': "5px", + 'data': null, + 'targets': 0, + 'render': function(data) { + return '<input type="checkbox" name="searchResult" class="trait_checkbox checkbox" value="' + data.hmac + '">' + } + }, + { + 'title': "Index", + 'type': "natural", + 'width': "30px", + 'targets': 1, + 'data': "index", + 'defaultContent': "N/A" + }, + { + 'title': "Record", + 'type': "natural", + 'orderDataType': "dom-inner-text", + 'width': "60px", + 'data': null, + 'targets': 2, + 'render': function(data) { + return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.name + '</a>' + } + }, + { + 'title': "Species", + 'type': "natural", + 'width': "60px", + 'targets': 3, + 'data': "species", + 'defaultContent': "N/A" + }, + { + 'title': "Group", + 'type': "natural", + 'width': "150px", + 'targets': 4, + 'data': "group", + 'defaultContent': "N/A" + }, + { + 'title': "Tissue", + 'type': "natural", + 'width': "150px", + 'targets': 5, + 'data': "tissue", + 'defaultContent': "N/A" + }, + { + 'title': "Dataset", + 'type': "natural", + 'targets': 6, + 'width': "320px", + 'data': "dataset_fullname", + 'defaultContent': "N/A" + }, + { + 'title': "Symbol", + 'type': "natural", + 'width': "60px", + 'targets': 7, + 'data': "symbol", + 'defaultContent': "N/A" + }, + { + 'title': "Description", + 'type': "natural", + 'data': null, + 'width': "120px", + 'targets': 8, + 'render': function(data) { + try { + return decodeURIComponent(escape(data.description)) + } catch(err) { + return escape(data.description) + } + } + }, + { + 'title': "Location", + 'type': "natural-minus-na", + 'width': "125px", + 'targets': 9, + 'data': "location_repr", + 'defaultContent': "N/A" + }, + { + 'title': "Mean", + 'type': "natural-minus-na", + 'orderSequence': [ "desc", "asc"], + 'width': "30px", + 'targets': 10, + 'data': null, + 'defaultContent': "N/A", + 'render': function(data) { + if (data.mean > 100) { + return Math.log2(data.mean).toFixed(3) + } else { + return data.mean + } + } + }, + { + 'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>-logP <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a></div>", + 'type': "natural-minus-na", + 'width': "60px", + 'targets': 11, + 'data': "LRS_score_repr", + 'defaultContent': "N/A", + 'orderSequence': [ "desc", "asc"] + }, + { + 'title': "Peak Location", + 'type': "natural-minus-na", + 'width': "125px", + 'targets': 12, + 'data': "max_lrs_text", + 'defaultContent': "N/A" + }, + { + 'title': "Additive<br>Effect<a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a>", + 'type': "natural-minus-na", + 'width': "50px", + 'targets': 13, + 'data': "additive", + 'defaultContent': "N/A", + 'orderSequence': [ "desc", "asc"] + } + ] + + tableSettings = { + 'createdRow': function ( row, data, index ) { + $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;"); + $('td', row).eq(1).attr("align", "right"); + $('td', row).eq(4).attr('title', $('td', row).eq(4).text()); + if ($('td', row).eq(4).text().length > 30) { + $('td', row).eq(4).text($('td', row).eq(4).text().substring(0, 30)); + $('td', row).eq(4).text($('td', row).eq(4).text() + '...') + } + $('td', row).eq(5).attr('title', $('td', row).eq(5).text()); + if ($('td', row).eq(5).text().length > 35) { + $('td', row).eq(5).text($('td', row).eq(5).text().substring(0, 35)); + $('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 > 60) { + $('td', row).eq(6).text($('td', row).eq(6).text().substring(0, 60)); + $('td', row).eq(6).text($('td', row).eq(6).text() + '...') + } + $('td', row).eq(8).attr('title', $('td', row).eq(8).text()); + if ($('td', row).eq(8).text().length > 60) { + $('td', row).eq(8).text($('td', row).eq(8).text().substring(0, 60)); + $('td', row).eq(8).text($('td', row).eq(8).text() + '...') + } + $('td', row).slice(10,14).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()); + $('td', row).eq(11).attr('data-export', $('td', row).eq(11).text()); + $('td', row).eq(12).attr('data-export', $('td', row).eq(12).text()); + $('td', row).eq(13).attr('data-export', $('td', row).eq(13).text()); + }, + {% if trait_count <= 20 %} + "scroller": false + {% else %} + "scroller": true + {% endif %} + } + + create_table(tableId, traitsJson, columnDefs, tableSettings); + + }); + + </script> +{% endblock %} |