-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
executable file
·738 lines (626 loc) · 42.9 KB
/
index.html
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vcf.iobio.io</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47481907-3', 'auto');
ga('send', 'pageview');
</script>
<link href='https://fonts.googleapis.com/css?family=Overlock+SC' rel='stylesheet' type='text/css'>
<link href='assets/css/quicksand.css' rel='stylesheet' type='text/css'>
<link href="assets/css/flat-ui.css" rel="stylesheet" type='text/css'>
<link href="assets/css/selectize.css" rel="stylesheet" type='text/css'>
<link href="assets/js/bootstrap/css/bootstrap.css" rel="stylesheet" type='text/css'>
<!-- <link href="assets/css/bootstrap.css" rel="stylesheet" type='text/css'> -->
<link href='components/nprogress/nprogress.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="components/alertify.js/themes/alertify.core.css" />
<link rel="stylesheet" href="components/alertify.js/themes/alertify.default.css" />
<link href="assets/css/iobio.css" rel="stylesheet" type='text/css'>
<link href="assets/css/iobio.viz.min.css" rel="stylesheet" type='text/css'>
<link href="assets/css/vcf.iobio.css" rel="stylesheet" type='text/css'/>
<script type="text/javascript" src="components/d3/d3.js"></script>
<script type="text/javascript" src="components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="components/nprogress/nprogress.js"></script>
<script type="text/javascript" src="components/alertify.js/lib/alertify.min.js"></script>
<!-- <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> -->
<script type="text/javascript" src="assets/js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/class.js"></script>
<script type="text/javascript" src="assets/js/rdp.js"></script>
<script type="text/javascript" src="assets/js/selectize.js"></script>
<script type="text/javascript" src="assets/js/iobio.viz.min.js"></script>
<script type="text/javascript" src="assets/js/iobio.min.js"></script>
<!-- gru backend -->
<script type="text/javascript" src="assets/js/iobioApiClient.js"></script>
<!-- local file proxy -->
<script type="text/javascript" src="assets/js/fibridge.min.js"></script>
<script>
$(document).ready( function(){
// Help modals
$("#ref_help").click(function() {
$("#refModal").modal({
show: true
});
});
$("#density_help").click(function() {
$("#densityModal").modal({
show: true
});
});
$("#tstv_help").click(function() {
$("#tstvModal").modal({
show: true
});
});
$("#af_help").click(function() {
$("#afModal").modal({
show: true
});
});
$("#bases_help").click(function() {
$("#basesModal").modal({
show: true
});
});
$("#variant_help").click(function() {
$("#variantModal").modal({
show: true
});
});
$("#indel_help").click(function() {
$("#indelModal").modal({
show: true
});
});
$("#quality_help").click(function() {
$("#qualityModal").modal({
show: true
});
});
});
</script>
</head>
<body>
<div id="selectData">
<header>
<a href="">vcf<span style="color:rgb(200,200,200)">.iobio.io</span></a>
<div style="float:right" class="iobio-project" style="padding-top:20px">
<a href="http://iobio.io" style="margin: 0px 5px 0px 5px;">an iobio project</a>
</div>
</header>
<div style="width:800px; margin-left:auto; margin-right:auto; margin-top: 50px">
<div style="margin-left:auto;margin-right:auto;font-size: 28px; color: rgb(110,110,110); margin-bottom:40px">
<center>examine your variant file in seconds</center>
</div>
<!-- Upload File -->
<div class="file" onClick="onFileButtonClicked()">
<input type="file" name="files[]" id="file" multiple />
<label class="file-button" for="file" >choose vcf file</label>
</div>
<!-- Url box -->
<div class="file-button" id="fileButton" style="text-align:center" onClick="displayVcfUrlBox()">choose vcf url
</div>
<div style="clear:both"></div>
</div>
<div id="vcf-url" style="visibility:hidden;">
<div class="arrow_box" style="display:inline-block;width:1000px;">
<center>
<label class="checkboxContainer"><strong>Separate URL for index files</strong>
<input type="checkbox" onclick="enableTbiUrl()">
<span class="checkmark"></span>
</label>
</center>
<input id="url-input" value="http://s3.amazonaws.com/vcf.files/ExAC.r0.2.sites.vep.vcf.gz" onkeypress="clearUrlFunction()" onkeydown="clearUrlFunction()" onpaste="clearUrlFunction()" onfocusout="urlFunction()" placeholder="vcf.gz URL" ></input>
<br>
<input id="url-tbi-input" value="" style="display:none" class="disabled" onkeypress="clearTbiUrl()" onfocusout="tbiUrlFunction()" placeholder="tbi URL (optional)"></input>
</div>
</div>
<div id="file-alert" class="alert alert-danger hide" role="alert">
</div>
<div id="accessing-headers-gif" class="hide" style="text-align:center; margin-top:20px;">
<center>
<span >
<img style="height:25px" src="assets/images/loading_dots.gif" > <small style="margin-left:5px; font-size:17px"> <strong>Accessing file headers</strong></small>
</span>
</center>
</div>
<div id="go-panel" class="hide">
<div id="select-species-box" style="font-size:18px;width:230px;float:left;">
<span id="species-label">Species</span>
<select id="select-species" class="selectized" placeholder="select species...">
</select>
</div>
<div id="select-build-box" class="hide" style="font-size:18x;width:250px;float:left;margin-left:15px;">
<span id="build-label">Genome Build</span>
<select required id="select-build" class="selectized" placeholder="select/ Enter build">
</select>
</div>
<button disabled type="button" id="go-button-for-noSamples" style="margin-top:24px; margin-left: -250px;width: 180px;" class="btn hide" >Load</button>
<button type="button" id="go-button-for-load" onclick="demoDataLoad()" style="margin-top:24px; margin-left: -250px;width: 180px;" class="btn hide">Load</button>
<div id="vcf-sample-box" class="hide" style="font-size:18x;width:240px;float:left;margin-left:15px; margin-right:10px; margin-top:0px;" style="text-align:center">
<div id="vcf-sample-select-box" >
<span id="build-label">Sample(s)</span>
<select id="vcf-sample-select" data-placeholder="Select sample(s)...">
</select>
</div>
</div>
<button type="button" id="all-sample-go-button" style="margin-top:24px" class="btn hide" >Select All Samples</button>
<button type="button" id="sample-go-button" style="margin-top:24px;" disabled class="btn hide " data-dismiss="modal">Load</button>
<p></p>
<br>
<div id="species-build-warning" class="alert alert-danger hide" style="float:left;width:100%">
</div>
</div>
<!-- end go panel -->
<div style="clear:both"></div>
<br>
<div id="info">
<ul>
<li><a href="help.html">File Requirements</a></li>
<li><a href="https://bam.iobio.io/license">License</a></li>
</ul>
</div>
<div style="width:700px; margin-left:auto; margin-right:auto; margin-top: 10px">
<strong>Variant files to try</strong>
<table cellspacing="5px" width="700px">
<tr>
<td>
Exome Aggregation Consortium (ExAC)
</td>
<td>
<a href="http://exac.broadinstitute.org/about">Website</a>
</td>
<td>
<a href="ftp://ftp.broadinstitute.org/pub/ExAC_release/release0.2/ExAC.r0.2.sites.vep.vcf.gz">File</a>
</td>
<td>
<a href="?vcf=http://s3.amazonaws.com/vcf.files/ExAC.r0.2.sites.vep.vcf.gz&species=Human&build=GRCh37">Show in vcf.iobio</a>
</td>
</tr>
<tr >
<td>
1000 Genomes Project
</td>
<td>
<a href="http://www.1000genomes.org/data">Website</a>
</td>
<td>
<a href="ftp://ftp-trace.ncbi.nih.gov/1000genomes/ftp/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5.20130502.sites.vcf.gz">File</a>
</td>
<td>
<a href="?vcf=http://s3.amazonaws.com/vcf.files/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5.20130502.sites.vcf.gz&species=Human&build=GRCh37">Show in vcf.iobio</a>
</td>
</tr>
<tr >
<td>
Illumina Platinum - NA12878
</td>
<td>
<a href="http://www.illumina.com/platinumgenomes/">Website</a>
</td>
<td>
<a href="ftp://ussd-ftp.illumina.com/IlluminaPlatinumGenomes_v7.0/merged_platinum/NA12877.vcf.gz">File</a>
</td>
<td>
<a href="?vcf=http://s3.amazonaws.com/iobio/variants/NA12878.autosome.PASS.vcf.gz&species=Human&build=GRCh37">Show in vcf.iobio</a>
</td>
</tr>
</table>
<div style="margin-top: 40px"><strong>For sequence alignment files check out </strong><a style="margin-left: 37px" href="http://bam.iobio.io">bam.iobio</a></div>
</div>
<div id="footer">
<div class="logos">
<div style="display:inline;font-size:50px;font-family:'Overlock SC', cursive;">Marthlab</div>
<img src="assets/images/ustar-ucgd-logo.jpg" style="height:60px;"/>
<a href="http://www.genetics.utah.edu/"><img src="assets/images/genetics_mainlogo3_lrg.png" style="height:50px"/></a>
</div>
</div>
</div>
<div id="banner-middle">
</div>
<div id="showData" style="padding-top:5px; visibility:collapse" >
<div id="page" >
<div>
<a href="javascript:void(0)" class="hide" id="report-problem" data-toggle="modal" data-target="#modal-report-problem">Report Problem</a>
</div>
<section id="banner" style="clear: both;">
<div id="banner-title" >
<header><a href="/">vcf<span style="color:rgb(200,200,200)">.iobio.io</span></a></header>
<span id="vcf_file"></span>
</div>
<div id="banner-middle">
<div id="vcf_selection">
<div id="current-build"></div>
<div style="text-align:center">
<div id="reference_selected"></div>
<div id="region_selected"></div>
</div>
<div id="samples-filter-header" class="" style="text-align:center">
<div id="label">
<a id="show-sample-dialog"
href="javascript:void(0)"
class="btn hide"
onclick="showSamplesDialog()"
data-toggle="modal"
data-target="#sample-picker-modal">
Filter samples
</a>
</div>
<div id="sample-names"></div>
</div>
</div>
</div>
<div id="total-reads" >
<div >
<span id="value"> 0</span>
</div>
<div style="padding: 4px" >
<div id="number"> </div>
<div id="label">variants sampled</div>
</div>
<div style="padding-top: 10px; ">
<img id="sample-more-button"
title="Sample More"
onClick="increaseSampling()"
src="assets/images/more_sampling.png"
style="width: 20px">
</img>
</div>
</div>
</section>
<section id="top" >
<div id="chromosome-picker" class="panel">
<div class="title">References
<span class="glyphicon glyphicon-info-sign" aria-hidden="true" id="ref_help" title="Select the reference sequence (e.g. chromosome) to view"></span>
</div>
<div class="samplingLoader big">Initializing<img src="assets/images/loading_dots.gif"/></div>
<div id="primary-references">
</div>
<div id="other-references">
<label>Other references</label>
<select id="other-references-dropdown">
<option value=""></option>
</select>
</div>
</div>
<div id="variant-density-panel" class="panel">
<div class="title">Variant Density
<span class="glyphicon glyphicon-info-sign" aria-hidden="true" id="density_help" title="Distribution of variants across genome/region"></span>
</div>
<span class="svg-alt hint">(drag bottom chart to select region)</span>
<div class="checkbox bedfile-checkbox" id="use-bed-cb" >
<label>
<input type="checkbox" value="">GRCh37 exonic regions</input>
</label>
</div>
<input type="file" name="files[]" id="bedfile-input" multiple />
<label id="add-bedfile-button" class="bedfile-button" for="bedfile-input" title="Add Bed format capture target definition file">Add Bed</label>
<label id="remove-bedfile-button" class="bedfile-button" title="Remove Bed format capture target definition file">Remove Bed</label>
<div class="samplingLoader big">Initializing<img src="assets/images/loading_dots.gif"/></div>
<div id="variant-density">
</div>
<div id="variant-density-vf" >
</div>
<div id="variant-density-ref-vf">
</div>
</div>
</section>
<section id="middle" >
<div id="tstv-ratio" class="panel">
<div class="title">Ts/Tv Ratio
<span class="glyphicon glyphicon-info-sign" aria-hidden="true" id="tstv_help" title="Expect a value of approximately 2"></span>
</div>
<div class="samplingLoader">Sampling <img src="assets/images/loading_dots.gif"/></div>
<div id="ratio-panel" class="svg-alt">
</div>
<div id="ratio-value" class="svg-alt" ></div>
<div class='no-values hide'>No values present</div>
</div>
<!-- Ts/Tv modal -->
<div id="tstvModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:700px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Transition/transversion (Ts/Tv) ratio</h4>
</div>
<div class="modal-body" style="overflow:auto;">
<div>
The transition / transversion (or Ts / Tv) ratio is calculated by looking at SNPs in the selected file, and is expected to have a value of the order of 2. The nucleotides Adenine (A) and Guanine (G) are purines, and Cytosine (C) and Thymine (T) are pyrimidines.
</div>
<div class="row vertical-align">
<div class="col-xs-6">
<img title="Transitions" style="width:100%;" src="images/transitions.png"></img>
</div>
<div class="col-xs-6">
A transition occurs when a purine mutates into another purine, or a pyrimidine mutates into another pyrimidine. There are four possible transition mutations, as shown in the figure to the left.
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-6">
<img title="Transversions" style="width:100%;" src="images/transversions.png"></img>
</div>
<div class="col-xs-6">
A transversion occurs when a purine mutates into a pyrimidine or vice versa, and there are eight possible ways for this to occur.
</div>
</div>
<div>
If single base-pair mutations were purely random events, we would expect to see twice as many transversions as transitions, as there are twice as many ways for a transversion to occur. We would then expect to see a Ts/Tv ratio of 0.5. However, transitions are chemically and biologically more favourable (transition mutations are about ten times more common than transversions). Consequently for human DNA, we actually expect to see far more transitions than we would expect by chance: typically we see a Ts/Tv ratio closer to 2. If the observed Ts/Tv is significantly lower than 2, then it is a potential signal of data problems.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="allele-freq" class="panel">
<div class="title">Allele Frequency Spectrum
<span class="glyphicon glyphicon-info-sign" aria-hidden="true" id="af_help" title="AF is dependent on the number of samples"></span>
</div>
<div class="samplingLoader">Sampling <img src="assets/images/loading_dots.gif"/></div>
<svg id="allele-freq-histogram"/>
<div class='no-values hide'>No values present</div>
</div>
<!-- Allele frequency spectrum modal -->
<div id="afModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:700px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Allele frequency spectrum</h4>
</div>
<div class="modal-body" style="overflow:auto;">
<div>
The allele frequency spectrum shows the percentage of alleles (only using SNPs) in the called population that exhibit the alterate allele. This plot is highly dependent on the number of samples that were simultaneously analyzed while generating the variant calls. For example, if this VCF file was generated by considering only a single sample, the allele frequency (AF) can only take one of three values: 0%, the sample is homozygous for the reference allele. Typically, a variant caller would determine that there is no variant at this location, so this would not be reported.; 50%, the sample is heterozygous, and; 100%, the sample is homozygous for the alternate allele.
</div>
<br>
<div>
If the calling was performed on a large number of samples (this is often the case - even if only studying a small number of samples, variant calling is often performed with a <i>background</i> of samples. This ensures that common variants in the human population will be represented), we would expect to see the population allele frequency spectrum. This is reasonably well approximated by the ExAC dataset.
</div>
<img title="Allele frequency spectrum for a population" style="width:100%; padding-top:10px; padding-bottom:10px;" src="images/afs.png"></img>
<div>
If only a small number of samples was used in the calling step, this plot will be quite discrete and not hugely informative.
</div>
<img title="Allele frequency spectrum for a population" style="width:100%; padding-top:10px; padding-bottom:10px;" src="images/afs_small.png"></img>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Mutation spectrum -->
<div id="mut-spectrum" class="panel">
<div class="title">Base Changes
<span class="glyphicon glyphicon-info-sign" aria-hidden="true" id="bases_help" title="Frequency of observed mutations"></span>
</div>
<div class="samplingLoader">Sampling <img src="assets/images/loading_dots.gif"/></div>
<div class='no-values hide'>No values present</div>
</div>
<!-- Mutation spectrum modal -->
<div id="basesModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:700px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Mutation spectrum</h4>
</div>
<div class="modal-body" style="overflow:auto;">
<div>
As discussed in the Ts/Tv help information, transitions are much more common than transversion mutations. This means that it is far more likely for an Adenine (A) to mutate into a Guanine (G), and vice versa, than to mutate to either a Cytosine (C) or Thymine (T). This means the mutation spectrum is expected to look similar to the image below.
</div>
<img title="Expected mutational spectrum" style="width:90%; padding-top:10px; padding-bottom:10px; padding-left:5%;" src="images/mut_spectrum.png"></img>
<div>
If transition mutations do not dominate the mutation spectrum, this might indicate a problem with the variant calling. If this is the case, you should also observe a Ts/Tv ratio significantly less than 2.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</section>
<section id="bottom" >
<div id="var-type" class="panel">
<div class="title">Variant Types
<span class="glyphicon glyphicon-info-sign" aria-hidden="true" id="variant_help" title="Distribution of different observed variant types"></span>
</div>
<div class="samplingLoader">Sampling <img src="assets/images/loading_dots.gif"/></div>
<div class='no-values hide'>No values present</div>
</div>
<!-- Variant types modal -->
<div id="variantModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:700px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Variant types</h4>
</div>
<div class="modal-body" style="overflow:auto;">
<div>
This chart shows a distribution of the variant types present in the selected VCF file. SNPs are by far the most prevalent type of genetic mutation, so it is expected that these dominate the distribution.
</div>
<div class="row vertical-align">
<div class="col-xs-4">
<img title="WGS variant types" style="width:100%; padding-top:15px; padding-bottom:15px;" src="images/types_wgs.png"></img>
</div>
<div class="col-xs-8" style="padding-top:15px; padding-bottom:15px;">
For whole genome sequencing data, SNPs dominate, but there is typically an appreciable number of insertion (Ins) and deletion (Del) mutations, as well as <i>Other</i> variant types. These other variants include anything that doesn't fall into the previous categories. For example, consider the case where the reference sequence is ACTG, and sometimes the A is mutated into a C, but whenever it is, the T is always deleted. Rather than these two mutations appearing separately in the VCF file, since they are only ever observed together, the reference will be ACTG, and the alternate will be CCG (the A mutated to C, and the T deleted). This mutation is a combination of a SNP and a deletion, and is listed as a <i>complex</i> variant type and will appear in the <i>Other</i> category.
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-4">
<img title="WES variant types" style="width:100%; padding-top:15px; padding-bottom:15px;" src="images/types_wes.png"></img>
</div>
<div class="col-xs-8" style="padding-top:15px; padding-bottom:15px;">
It is much less likely to find structural variants, when looking at whole exome data. Large events are often not detected since the breakpoints fall outside of the exome sequencing regions. Also, insertions in, or deletions of large coding regions are likely to be more deleterious than in the non-coding regions captured in whole genome sequencing, and so there are less present in these regions. For these reasons, SNPs are expected to dominate the variant types distribution even more in exome sequencing.
</div>
</div>
<div>
This chart is primarily used to check that all expected variants are present. If you are expecting to see a complete VCF including insertions and deleted, but the file has been filtered to leave only SNPs, this chart will quickly help identify this.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Indel chart -->
<div id="indel-length" class="panel">
<div>
<div class="title" style="display:inline-block">Insertion & Deletion Lengths
<span class="glyphicon glyphicon-info-sign" aria-hidden="true" id="indel_help" title="Distribution of insertion and deletion lengths"></span>
</div>
<span class="checkbox" class="svg-alt" style="display:inline-block">
<label>
<input type="checkbox" checked value="true">Outliers
</label>
</span>
</div>
<div class="samplingLoader">Sampling <img src="assets/images/loading_dots.gif"/></div>
<div id="indel-length-histogram"></div>
<div class="svg-alt">
<span style="font-weight:bold;font-size:13px;">Deletions</span>
<div id="legend-del"></div>
<span style="font-weight:bold;font-size:13px;">Insertions</span>
<div id="legend-ins"></div>
</div>
<div class='no-values hide'>No values present</div>
</div>
<!-- Indel modal -->
<div id="indelModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:700px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Distribution of indels</h4>
</div>
<div class="modal-body" style="overflow:auto;">
<div>
This plot shows how many insertions and deletions (indels) of specific lengths are present in the VCF file. It is typically easier for variant callers to detect deletion alleles, so we expect to see more deletions than insertions, and we expect to see more short indels than long ones. A typical distribution will look something like:
</div>
<img title="Expected indel length distribution" style="width:80%; padding-top:10px; padding-bottom:10px; padding-left:15%" src="images/indels.png"></img>
<div>
You can click the "Outliers" button to expand the chart to include indels of all lengths. Typically, the number of larger indels is dwarfed by the short, so you typically only see a distribution close to zero. However, you can zoom in on regions of the chart using the lower chart.
</div>
<img title="Indel length distribution with outliers" style="width:80%; padding-top:10px; padding-bottom:10px; padding-left:15%" src="images/indels_outliers.png"></img>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="qual-distribution" class="panel">
<div class="title">Variant Quality
<span class="glyphicon glyphicon-info-sign" aria-hidden="true" id="quality_help" title="Distribution of the quality of observed variants"></span>
</div>
<div class="samplingLoader">Sampling <img src="assets/images/loading_dots.gif"/></div>
<svg id="qual-distribution-histogram"/>
<div class='no-values hide'>No values present</div>
</div>
<!-- Quality distribution modal -->
<div id="qualityModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:700px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Variant quality scores</h4>
</div>
<div class="modal-body" style="overflow:auto;">
<div>
Each variant is assigned a quality score to represent the confidence in the variant. The distribution of these scores is highly variable, and no specific distribution is expected. Here we mainly want to check that the quality scores are not crowded into the low (< 100) end. Below is an example of a quality score distribution that is weighted to higher scores and so would be considered acceptable.
</div>
<img title="Acceptable quality score distribution" style="width:90%; padding-top:10px; padding-bottom:10px; padding-left:5%;" src="images/qual_good.png"></img>
<div>
Below is another average quality score distribution that would be considered acceptable. There are many variants that have a low quality score (e.g. between 0 and 100), however, there are still a large number of variants with high scores. If variant prioritization techniques are used, it may be necessary to check individual variants to ensure that their scores are acceptable.
</div>
<img title="Acceptable quality score distribution" style="width:90%; padding-top:10px; padding-bottom:10px; padding-left:5%;" src="images/qual_avg.png"></img>
<div>
Below is a quality score distribution that looks more questionable. There are still many variants that appear to be of high quality, but the majority are clustered close to zero. Seeing such a distribution should raise warning flags, but the file should not just be thrown out. Different variant calling tools use different methods to generate quality scores, so it would be prudent to check with whoever generate the variant calls to try to understand the cause of such a distribution.
</div>
<img title="Questionable quality score distribution" style="width:90%; padding-top:10px; padding-bottom:10px; padding-left:5%;" src="images/qual_bad.png"></img>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal-report-problem" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2>Report Problem</h2>
<a href="#close" class="btn-close" data-dismiss="modal" aria-hidden="true">×</a> <!--CHANGED TO "#close"-->
</div>
<div class="modal-body">
<div>
<span class="label">Your email</span><input id="report-problem-email" type="text" ></input>
</div>
<div style="margin-top:10px; margin-bottom:10px">
<span class="label"</span>Description of problem<textarea id="report-problem-note" ></textarea>
</div>
<span class="label"</label>Screen Capture</span>
<div id="report-problem-screen-capture">
</div>
<div class="modal-footer">
<a id="report-problem-button" href="#email-report-problem" class="btn">Report</a> <!--CHANGED TO "#close"-->
<a class="btn" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="sample-picker-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="padding-top:10px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Filter samples</h4>
</div>
<div class="modal-body">
<div id="sample-picker" class="">
<div class="vcf-sample loader hide" style="text-align:center">
<span class="loader-label" >Initializing</span>
<img src="assets/images/loading_dots.gif" >
</div>
<div id="filterSampelDiv">
</div>
</div>
</div>
<div class="modal-footer" style="clear-both">
<div id="sample-go-button-inModal" ></div>
<!-- <button type="button" id="sample-go-button" class="btn" data-dismiss="modal">Load</button> -->
</div>
</div>
</div>
</div>
<!-- /Modal -->
<script>
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
</script>
<script type="text/javascript" src="app/vcf.iobio.js"></script>
<script type="text/javascript" src="app/line.d3.js"></script>
<script type="text/javascript" src="app/barChartAlt.d3.js"></script>
<script type="text/javascript" src="app/histogram.d3.js"></script>
<script type="text/javascript" src="app/groupedBar.d3.js"></script>
<script type="text/javascript" src="app/genomeBuildHelper.js"></script>
<script type="text/javascript" src="app/mosaicSession.js"></script>
<script type="text/javascript" src="app/dataSelect.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</body>
</html>