diff options
| -rw-r--r-- | wqflask/wqflask/templates/mapping_results.html | 229 |
1 files changed, 130 insertions, 99 deletions
diff --git a/wqflask/wqflask/templates/mapping_results.html b/wqflask/wqflask/templates/mapping_results.html index 29e9002d..55d18cba 100644 --- a/wqflask/wqflask/templates/mapping_results.html +++ b/wqflask/wqflask/templates/mapping_results.html @@ -65,7 +65,7 @@ <input type="hidden" name="form_url" value="/run_mapping"> <div class="container" style="width: 1200px; float: left;"> - <div class="col-xs-4"> + <div class="col-xs-4" style="word-wrap: normal;"> <h2>Map Viewer: Whole Genome</h2><br> <b>Population:</b> {{ dataset.group.species|capitalize }} {{ dataset.group.name }}<br> <b>Database:</b> {{ dataset.fullname }}<br> @@ -258,63 +258,10 @@ <button class="btn btn-default export_mapping_results" >Download <span class="glyphicon glyphicon-download"></span></button> <br /> <br /> - <div id="table_container" style="width:{% if 'additive' in trimmed_markers[0] %}600{% else %}550{% endif %}px;"> - <table id="trait_table" class="table-hover table-striped cell-border dataTable no-footer"> - <thead> - <tr> - <th></th> - <th>Row</th> - <th>Marker</th> - {% if LRS_LOD == "-logP" %} - <th><div style="text-align: right;">–logP</div></th> - {% else %} - <th><div style="text-align: right;">{{ LRS_LOD }}</div></th> - {% endif %} - <th><div style="text-align: right;">Position ({% if plotScale == "physic" %}Mb{% else %}cM{% endif %})</div></th> - {% if 'additive' in trimmed_markers[0] %} - <th><div style="text-align: right;">Add Eff</div></th> - {% endif %} - {% if 'dominance' in trimmed_markers[0] and dataset.group.genetic_type != "riset" %} - <th><div style="text-align: right;">Dom Eff</div></th> - {% endif %} - </tr> - </thead> + <div id="trait_table_container" style="width:{% if 'additive' in trimmed_markers[0] %}600{% else %}550{% endif %}px;"> + <table class="table-hover table-striped cell-border no-footer" id='trait_table' style="float: left;"> <tbody> - {% for marker in trimmed_markers %} - <tr> - <td align="center" style="padding: 1px 0px 1px 0px;"> - <input type="checkbox" name="selectCheck" - class="checkbox trait_checkbox" - value="{{ data_hmac('{}:{}Geno'.format(marker.name, dataset.group.name)) }}"> - </td> - <td align="right">{{ loop.index }}</td> - <td>{% if geno_db_exists == "True" %}<a href="/show_trait?trait_id={{ marker.name }}&dataset={{ dataset.group.name }}Geno">{{ marker.name }}</a>{% else %}{{ marker.name }}{% endif %}</td> - {% if LRS_LOD == "LOD" or LRS_LOD == "-logP" %} - {% if 'lod_score' in marker %} - <td align="right">{{ '%0.2f' | format(marker.lod_score|float) }}</td> - {% else %} - <td align="right">{{ '%0.2f' | format(marker.lrs_value|float / 4.61) }}</td> - {% endif %} - {% else %} - {% if 'lod_score' in marker %} - <td align="right">{{ '%0.2f' | format(marker.lod_score|float * 4.61) }}</td> - {% else %} - <td align="right">{{ '%0.2f' | format(marker.lrs_value|float) }}</td> - {% endif %} - {% endif %} - <td align="right">{{ marker.display_pos }}</td> - {% if 'additive' in marker %} - {% if geno_db_exists == "True" %} - <td align="right"><a target"_blank" href="corr_scatter_plot?method=pearson&dataset_1={{ dataset.group.name }}Geno&dataset_2={{ dataset.name }}&trait_1={{ marker.name }}&trait_2={{ this_trait.name }}">{{ '%0.3f' | format(marker.additive|float) }}</a></td> - {% else %} - <td align="right">{{ '%0.3f' | format(marker.additive|float) }}</td> - {% endif %} - {% endif %} - {% if 'dominance' in marker and dataset.group.genetic_type != "riset" %} - <td align="right">{{ '%0.2f' | format(marker.dominance|float) }}</td> - {% endif %} - </tr> - {% endfor %} + <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td> </tbody> </table> </div> @@ -376,59 +323,143 @@ <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='purescript-genome-browser/js/purescript-genetics-browser.js') }}"></script> <script> - js_data = {{ js_data | safe }} + var js_data = {{ js_data | safe }}; + var markersJson = {{ trimmed_markers|safe }}; </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> {% if mapping_method == "gemma" or mapping_method == "reaper" %} <script language="javascript" type="text/javascript" src="/static/new/javascript/init_genome_browser.js"></script> {% endif %} <script type="text/javascript" charset="utf-8"> $(document).ready( function () { - console.time("Creating table"); - {% if selectedChr == -1 %} - $('#trait_table').DataTable( { - "drawCallback": function( settings ) { - $('#trait_table tr').off().on("click", function(event) { - if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') { - var obj =$(this).find('input'); - obj.prop('checked', !obj.is(':checked')); - } - if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){ - $(this).removeClass("selected") - } else if (event.target.tagName.toLowerCase() !== 'a') { - $(this).addClass("selected") - } + tableId = "trait_table" + + columnDefs = [ + { + 'data': null, + 'width': "5px", + 'orderDataType': "dom-checkbox", + 'targets': 0, + 'render': function(data, type, row, meta) { + return '<input type="checkbox" name="selectCheck" class="checkbox trait_checkbox" value="'+ data.hmac + '">' + } + }, + { + 'title': "Row", + 'type': "natural", + 'width': "35px", + 'searchable': false, + 'orderable': false, + 'targets': 1, + 'render': function(data, type, row, meta) { + return meta.row + } + }, + { + 'title': "Marker", + 'type': "natural", + 'width': "20%", + 'targets': 2, + {% if geno_db_exists == "True" %} + 'data': null, + 'render': function(data, type, row, meta) { + return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset={{ dataset.group.name }}Geno">' + data.name + '</a>' + } + {% else %} + 'data': "name" + {% endif %} + }, + { + 'title': "<div style='text-align: right;'>{{ LRS_LOD }}</div>", + 'type': "natural", + 'width': "60px", + 'targets': 3, + 'orderSequence': [ "desc", "asc"], + 'data': null, + 'render': function(data, type, row, meta) { + {% if (LRS_LOD == "LOD") or (LRS_LOD == "-logP") %} + if ('lod_score' in data){ + return String(parseFloat(data.lod_score).toFixed(2)) + } else { + return String((parseFloat(data.lrs_value) / 4.61).toFixed(2)) + } + {% else %} + if ('lod_score' in data){ + return String((parseFloat(data.lod_score) * 4.61).toFixed(2)) + } else { + return String(parseFloat(data.lrs_value).toFixed(2)) + } + {% endif %} + } + }, + { + 'title': "<div style='text-align: right;'>Position ({% if plotScale == 'physic' %}Mb{% else %}cM{% endif %})</div>", + 'type': 'natural', + 'targets': 4, + 'data': "display_pos" + }, + {% if 'additive' in trimmed_markers[0] %} + { + 'title': "<div style='text-align: right;'>Add Eff</div>", + 'type': "natural", + 'targets': 5, + 'data': null, + 'render': function(data, type, row, meta) { + {% if geno_db_exists == "True" %} + return '<a target"_blank" href="corr_scatter_plot?method=pearson&dataset_1={{ dataset.group.name }}Geno&dataset_2={{ dataset.name }}&trait_1=' + data.name + '&trait_2={{ this_trait.name }}">' + String(parseFloat(data.additive).toFixed(3)) + '</a>' + {% else %} + return String(parseFloat(data.additive).toFixed(3)) + {% endif %} + } + }, + {% endif %} + {% if ('dominance' in trimmed_markers[0]) and (dataset.group.genetic_type != "riset") %} + { + 'title': "<div style='text-align: right;'>Add Eff</div>", + 'type': "natural", + 'targets': {% if ('additive' in trimmed_markers[0]) %}6{% else %}5{% endif %}, + 'data': null, + 'render': function(data, type, row, meta) { + return String(parseFloat(data.dominance).toFixed(2)) + } + } + {% endif %} + ] + + 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(1).attr('data-export', index+1); + $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text()); + $('td', row).eq(3).attr("align", "right"); + $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text()); + $('td', row).eq(4).attr("align", "right"); + $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text()); + {% if 'additive' in trimmed_markers[0] %} + $('td', row).eq(5).attr("align", "right"); + $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text()); + {% endif %} + {% if 'dominance' in trimmed_markers[0] %} + $('td', row).eq(6).attr("align", "right"); + $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text()); + {% endif %} + }, + "language": { + "info": "Showing from _START_ to _END_ of " + js_data.total_markers + " records", + }, + "order": [[1, "asc" ]], + "scrollY": "1000px", + "scroller": true + } + + create_table(tableId, markersJson, columnDefs, tableSettings) - {% if geno_db_exists == "True" %}change_buttons(check_node=1){% endif %} - }); - }, - "columns": [ - { "type": "natural", "width": "5%" }, - { "type": "natural", "width": "8%" }, - { "type": "natural", "width": "20%" }, - { "type": "natural" }, - { "type": "natural" }{% if 'additive' in qtlresults[0] %}, - { "type": "natural" }{% endif %}{% if 'dominance' in qtlresults[0] and dataset.group.genetic_type != "riset" %}, - { "type": "natural" }{% endif %} - ], - "columnDefs": [ { - "targets": 0, - "orderable": false - } ], - "language": { - "info": "Showing from _START_ to _END_ of " + js_data.total_markers + " records", - }, - "order": [[1, "asc" ]], - "sDom": "itir", - "autoWidth": true, - "bSortClasses": false, - "scrollY": "100vh", - "scroller": true, - "scrollCollapse": true - } ); {% elif selectedChr != -1 and plotScale =="physic" and (dataset.group.species == 'mouse' or dataset.group.species == 'rat') %} $('#trait_table').dataTable( { "drawCallback": function( settings ) { |