{% extends "home/base.html" %}
{% load static %}
{% block addon_css %}
<link rel="stylesheet" href="{% static 'home/css/jquery.dataTables.min.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'home/css/structure_browser.css' %}" type="text/css" />
<link href="{% static 'home/css/residue_table.css' %}" rel="stylesheet">
<link href="{% static 'home/css/alignment.css' %}" rel="stylesheet">
<style>
.tooltip-inner {
white-space: pre-wrap;
}
</style>
{% endblock %}
{% block addon_js %}
<script src="{% static 'home/js/jquery.dataTables.min.js' %}"> </script>
<script src="{% static 'home/js/dataTables.tableTools.min.js' %}"> </script>
<script src="{% static 'home/js/jquery.dataTables.columnFilter.js' %}"> </script>
<script src="{% static 'home/js/selection.js' %}"> </script>
<script src="{% static 'home/js/saveSvgAsPng.js' %}"></script>
<script src="{% static 'home/js/alignment.js' %}"></script>
{% if HelixBox %}
<script src="{% static 'home/js/diagrams.js' %}"></script>
<script src="{% static 'home/js/residuetable.js' %}"></script>
{% endif %}
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var table = $('#mutations').DataTable({
"scrollX": true,
"scrollY": 600,
"bScrollCollapse": true,
'paging': false,
orderCellsTop: true,
"autoWidth": true,
dom: 'T<"clear">lfrtip',
"aoColumnDefs": [
{ "sType": "string", "aTargets": [0] },
],
tableTools: {
"sRowSelect": "multi",
"aButtons": []
},
initComplete: function () {
$('#mutations').dataTable().columnFilter({
sPlaceHolder: "head:after",
aoColumns: [
{ type: "select" }, //protein name
{ type: "select" }, //protein name
{ type: "select" }, //Alt Position
{ type: "select" }, //Position
{ type: "select" }, //Segment
{ type: "select" }, //Mutation
{ type: "select" }, //Foldchange
{ type: "select" }, //Exp type
{ type: "text" }, //ligand
{ type: "select" }, //reference
{ type: "text" }, //review
{ type: "text" }, //review
{ type: "text" }, //review
]
});
}
});
$('[data-toggle="tooltip"]').tooltip();
//$('[data-toggle="tooltip"]').tooltip({html:true});
// cat = {{type|safe}}
{% if type == 'family' %}
natural_mutations_json = '{{natural_mutations_pos_list|safe}}';
receptor = '{{receptor|safe}}';
ajaxNaturalMutationPos("snakeplot");
ajaxNaturalMutationPos("helixbox");
table_ajaxMutants();
{% else %}
natural_mutations_json = '{{mutations_pos_list|safe}}';
receptor = '{{receptor|safe}}';
ajaxNaturalMutation("helixbox", receptor);
ajaxNaturalMutation("snakeplot", receptor);
table_ajaxMutants();
{% endif %}
});
</script>
{% endblock %}
{% block content %}
<h2>Variation Browser</h2>
{% if mutations %}
<!-- Download button -->
<a class="btn btn-sm btn-primary" href="download" role="button">
<span class="glyphicon glyphicon-download"></span>Download</a>
<div style="padding-top: 0px; font-size: 10px; white-space: nowrap;">
<table width="100%" class="display" id="mutations">
<thead>
<tr>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="receptor entry_name" data-placement="top">Receptor</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="sequence number" data-placement="top">Position</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="generic numbering" data-placement="top">GPCRdb</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="structural segment" data-placement="top">Segment</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="amino acid substitution, wildtype to mutant" data-placement="top">Variant</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="Category of mutation" data-placement="top">Mutation type</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="ExAC allele frequencies, as calculated as allele count/allele number" data-placement="top">Allele Frequency</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="number of alleles with this variant" data-placement="top">Allele Count</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="total number of alleles that were able to be called" data-placement="top">Allele Number</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="number of individuals, where both alleles are the same" data-placement="top">Homozygotes</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="deleterious: <= 0.05<br>tolerated: > 0.05" data-placement="top">SIFT score</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="probably damaging: >=0.2 <br>possibly damaging: >= 0.1<br>benign: < 0.1" data-placement="top">PolyPhen score</th>
<th style="text-align:center" class="citation-tooltip" target="_blank" data-toggle="tooltip" data-container="body" data-html="true" data-original-title="known Ligand-binding site (LB), G-protein interaction site (GP) or PTM-site" data-placement="top">Functional annotation</th>
</tr>
<tr>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
</tr>
<tr>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
</tr>
</thead>
<tfoot>
<tr>
<th style="text-align:center">Receptor</th>
<th style="text-align:center">Position</th>
<th style="text-align:center">GPCRdb</th>
<th style="text-align:center">Segment</th>
<th style="text-align:center">Variant</th>
<th style="text-align:center">Mutation Type</th>
<th style="text-align:center">Allele Frequency</th>
<th style="text-align:center">Allele Count</th>
<th style="text-align:center">Allele Number</th>
<th style="text-align:center">Homozygotes</th>
<th style="text-align:center">SIFT score</th>
<th style="text-align:center">PolyPhen score</th>
<th style="text-align:center">Functional annotation</th>
</tr>
</tfoot>
{% for mutation in mutations %}
<!-- add: .select_related.all -->
<tr>
<td><a href="/protein/{{mutation.protein.entry_name}}">{{mutation.protein.entry_name}}</a></td>
<td>{{mutation.residue.sequence_number}}</td>
<td>{{mutation.residue.display_generic_number.label}}</td>
<td>{{mutation.residue.protein_segment.slug}}</td>
<td>{{mutation.residue.amino_acid}} => {{mutation.amino_acid}}</td>
<td>{{mutation.type}}</td>
<td>{{mutation.allele_frequency}}</td>
<td>{{mutation.allele_count}}</td>
<td>{{mutation.allele_number}}</td>
<td>{{mutation.number_homozygotes}}</td>
<td>{{mutation.sift_score}}</td>
<td>{{mutation.polyphen_score}}</td>
<td>{{mutation.functional_annotation}}</td>
</tr>
{% endfor %}
</table>
</div>
<br><br>
{% if HelixBox %}
<h2>Residue</h2>
<ul>
{% if type == 'family' %}
<li>number of proteins within the selected family are highlighted in a gradient from <font color=#bf9695>light red</font> to <font color=#b4352f>red</font></li>
{% else %}
<li>deleterious missense variants are shown in <font color=#e30e0e>red</font></li>
<li>tolerated missense variants are shown in <font color=#70c070>green</font></li>
<li>loss of function mutations ('stop gained' or 'frameshift' in the coding region) are shown in <font color=#575c9d>blue</font></li>
{% endif %}
</ul>
<div class="col-md-2 text-right text-info">
<h4>Diagrams</h4>
</div>
<div class="col-md-10">
{{ SnakePlot }}
<br>
SnakePlot Download:
<a href="javascript:saveSvgAsPng(document.getElementById('snakeplot'), 'snake_mutants.png', {scale: 3});">PNG</a> |
<a id=snake_svg_link href-lang="image/svg+xml" href="" download="snake_mutants">SVG</a>
</a>
{{ HelixBox }}
<br>
HelixBox Download:
<a href="javascript:saveSvgAsPng(document.getElementById('helixbox'), 'helixbox_mutants.png', {scale: 3});">PNG</a> |
<a id=helix_svg_link href-lang="image/svg+xml" href="" download="helixbox_mutants">SVG</a>
</div>
{% endif %}
{% else %}
<p> Ooops! There is no data to show here yet. </p>
{% endif %}
<br><br><br><br>
<!-- sequence alignment ends -->
{% endblock %}