-
Notifications
You must be signed in to change notification settings - Fork 16
/
sample_results.jinja2
173 lines (156 loc) · 8.29 KB
/
sample_results.jinja2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
{% extends "sitebase.jinja2" %}
{% set page_title = _("Sample Results") %}
{% set show_breadcrumbs = True %}
{% block head %}
<link rel="stylesheet" type="text/css" href="/static/vendor/css/jquery.dataTables.css" />
<link id="emperor-css" rel="stylesheet" type="text/css" href="/static/vendor/emperor/css/emperor.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/emperor/vendor/css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/emperor/vendor/css/slick.grid.min.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/emperor/vendor/css/spectrum.min.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/emperor/vendor/css/chosen.min.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/emperor/vendor/css/jquery.contextMenu.min.css">
<!-- vega header(s) -->
<script src="/static/vendor/js/vega@5"></script>
<script src="/static/vendor/js/vega-lite@4"></script>
<script src="/static/vendor/js/vega-embed@6"></script>
<script type="text/javascript" charset="utf8" src="/static/vendor/js/jquery.dataTables.js"></script>
<script src="/static/vendor/emperor/vendor/js/require-2.1.22.min.js"></script>
<script src="/static/vendor/emperor/emperor_loader.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/4_column_flex.css" />
<script>
let taxonomy = "{{taxonomy}}";
let alpha_metric = "{{alpha_metric}}";
let beta_metric = "{{beta_metric}}";
let sampleId = "{{sample.sample_barcode}}";
let barcodePrefix = "{{barcode_prefix}}";
var opt = {"renderer": "canvas", "actions": true}; /* Options for the Vega embedding */
var sample_type = "{{sample.sample_site}}";
switch(sample_type) {
case "Stool":
sample_type = "gut";
break;
case "Saliva":
case "Mouth":
sample_type = "oral";
break;
case "Forehead":
case "Hair":
case "Left hand":
case "Left leg":
case "Nares":
case "Nasal mucus":
case "Right hand":
case "Right leg":
case "Tears":
case "Torso":
case "Vaginal mucus":
sample_type = 'skin';
break
};
function createDataTable() {
return function() {
$('#taxonomyTable').DataTable({
ajax: {
url: "{{public_endpoint}}/dataset/tmi-16S-" + sample_type + "/taxonomy/present/single/" + taxonomy + "/" + barcodePrefix + sampleId
},
columns: [
{
data: "relativeAbundance",
render: $.fn.dataTable.render.number(',', '.', 4),
},
{data: "Kingdom"},
{data: "Phylum"},
{data: "Class"},
{data: "Order"},
{data: "Family"},
{data: "Genus"},
],
"order": [[ 0, "desc" ]]
});
}
}
function formatAlphaURL() {
let base = '{{public_endpoint}}/dataset/tmi-16S-' + sample_type + '/plotting/diversity/alpha/' + alpha_metric + '/percentiles-plot';
if (sampleId !== "") {
base = base + '?sample_id=' + barcodePrefix + sampleId;
}
return base;
}
function fillPlot(data) {
vegaEmbed("#vis", data, opt);
}
function createAlphaPlot() {
$.ajax({
url: formatAlphaURL(),
type: "GET",
success: fillPlot
});
}
$(document).ready(
function() {
createDataTable()();
createAlphaPlot();
var url = '{{public_endpoint}}/dataset/tmi-16S-' + sample_type + '/plotting/diversity/beta/' + beta_metric + '/pcoa/full-dataset/emperor?metadata_categories=age_cat&metadata_categories=bmi_cat';
loadEmperor(
url,
"/static/vendor/emperor",
function(){
},
barcodePrefix + sampleId
);
}
);
</script>
<style>
#emperor-notebook {
height:100vh !important;
padding: 20px !important;
}
</style>
{% endblock %}
{% block breadcrumb %}
<li class="breadcrumb-item"><a href="/accounts/{{account_id}}">{{ _('Account') }}</a></li>
<li class="breadcrumb-item"><a href="/accounts/{{account_id}}/sources/{{source_id}}">{{ _('Source') }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ _('Results') }}</li>
{% endblock %}
{% block content %}
<div id="sampleHeader" style="text-align: center">
<h2>
{{source_name}}
</h2>
</div>
<div class="row">
<div class="column" style="text-align: center">
<h3>{{ _('What is in your sample?') }}</h3>
<br>
<p>{{ _('The table below shows the relative abundances of all of the organisms we observed in your sample. To produce this, we took the DNA sequences from your sample, and compared them against publicly available annotated reference databases. In some cases, a sequence may uniquely match a database record, in other cases a sequence may match may different records. To handle the uncertainty that can arise, we rely on a well used and publicly available microbiome software package called <a href="https://qiime2.org" target="_blank">QIIME 2</a>. The exact approach taken is highlighted in the main tutorial on <a href="https://docs.qiime2.org/2020.6/tutorials/moving-pictures/#taxonomic-analysis" target="_blank">feature-classification</a>') }}.</p>
<div style="padding:10px">
<table id="taxonomyTable" class="display" style="width:100%">
<thead>
<tr>
<th>{{ _('Relative Abundance') }}</th>
<th>{{ _('Kingdom') }}</th>
<th>{{ _('Phylum') }}</th>
<th>{{ _('Class') }}</th>
<th>{{ _('Order') }}</th>
<th>{{ _('Family') }}</th>
<th>{{ _('Genus') }}</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="column" style="text-align: center">
<h3>{{ _('Alpha Diversity') }}</h3>
<br>
<p>{{ _('Here, we\'re providing a measure of the diversity of your sample, and how it compares to the diversities of all of the same type of samples in The Microsetta Initiative. There are many ways to calculate diversity. For instance, you could compute a diversity value by counting the number of unique organisms observed (i.e., the sample "richness"). Or, you might be interested in weighting the calculation by the relative abundance of the organisms (i.e., the sample "evenness"). The metric we\'re computing here is called Faith\'s Phylogenetic Diversity (originally defined <a href="https://www.sciencedirect.com/science/article/pii/0006320792912013" target="_blank">here</a>). Faith\'s Phylogenetic Diversity computes the "richness" of your sample as the amount of evolutionary breadth represented by your sample. The way we compute alpha diversity is also through <a href="https://qiime2.org" target="_blank">QIIME 2</a>, and more information on it can be found in the alpha and beta diversity <a href="https://docs.qiime2.org/2020.6/tutorials/moving-pictures/#alpha-and-beta-diversity-analysis" target="_blank">sections</a> of the QIIME 2 tutorial') }}.</p>
<div id="vis"></div>
</div>
</div>
<div class="column" style="text-align: center">
<h3>{{ _('Beta Diversity') }}</h3>
<br>
<p>{{ _('Here we display how your sample fits in among the other samples of The Microsetta Initiative in terms of shared microbes. There are many ways to calculate beta diversity, differing in how to weight the distance between any two microbes. We take evolutionary distance into account with the metric displayed here, known as Unweighted Unifrac. You can find an overview of this metric <a href="https://en.wikipedia.org/wiki/UniFrac" target="_blank">here</a> or better understand its derivation <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1828774/" target="_blank">here</a>. This computation is performed with <a href="https://qiime2.org" target="_blank">QIIME 2</a>, and more information on it can be found in the alpha and beta diversity <a href="https://docs.qiime2.org/2020.6/tutorials/moving-pictures/#alpha-and-beta-diversity-analysis" target="_blank">sections</a> of the QIIME 2 tutorial') }}.</p>
<div id='emperor-notebook' style="position: relative; width:100%; height:500px;"></div>
</div>
{% endblock %}