-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
357 lines (321 loc) · 17.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,width=600">
<meta name="description" content="">
<meta name="author" content="Jeff Wintersinger">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>Kablammo</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">-->
<link rel="stylesheet" href="css/ext/colpick.css">
<link rel="stylesheet" href="css/ext/bootstrap-tour.min.css">
<link rel="stylesheet" href="css/kablammo.css">
<!-- svg-css class indicates that this stylesheet should have its rules included in exported SVGs. -->
<link rel="stylesheet" href="css/svg.css" class="svg-css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href=""><h1><span>Kablammo</span></h1></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="load-results"><a href="#load"><span class="glyphicon glyphicon-cloud-upload"></span> Load results</a></li>
<li id="help"><a href="#help"><span class="glyphicon glyphicon-question-sign"></span> Help</a></li>
<li id="about"><a href="#about"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid" id="control-panels">
<div class="row">
<div class="control-panel col-sm-12" id="control-panel-load">
<form id="load-results-form" class="form-inline">
<div class="row">
<div class="col-sm-6">
<ul class="nav nav-tabs">
<li class="active">
<a id="load-local-nav" href="#load-local" data-toggle="tab">Load results from your computer</a>
</li>
<li>
<a id="load-server-nav" href="#load-server" data-toggle="tab">Load results from server</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="load-local">
<div class="alert alert-info file-label">
Upload BLAST results in XML format. <a class="show-help" href="#">(How do I do this?)</a>
</div>
<input type="file" id="local-file-chooser" accept="text/xml" />
<button type="button" class="btn btn-primary" id="choose-file">Choose file ...</button>
</div>
<div class="tab-pane" id="load-server">
<select id="server-results-chooser" class="form-control"></select>
</div>
</div>
</div>
<div class="col-sm-6" id="display-params">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Display parameters</a></li>
</ul>
<div class="tab-pane">
<p>Show up to <input id="max-query-seqs" class="form-control" type="number" min="1" value="10" /> query sequences</p>
<p>Show up to <input id="max-subjects-per-query-seq" class="form-control" type="number" min="1" value="5" /> subjects per query</p>
<p>Show only queries with <input id="query-filter" class="form-control" type="text" placeholder="..." /> in their names</p>
<p>Show only subjects with <input id="subject-filter" class="form-control" type="text" placeholder="..." /> in their names</p>
<p>
<div class="form-group">
Show only alignments whose E value is at most
<div class="input-group">
<span class="input-group-addon">1e</span>
<input id="evalue-threshold" class="form-control" type="number" step="any" value="10" />
</div>
</div>
</p>
<p>Show only alignments whose bit score is at least <input id="bitscore-threshold" class="form-control" type="number" step="any" min="0" value="0" /></p>
<p>
<div class="form-group">
Show only alignments covering at least
<div class="input-group">
<input id="hsp-coverage-threshold" class="form-control" type="number" step="any" value="0" min="0" max="100" />
<span class="input-group-addon">%</span>
</div>
of their queries
</div>
</p>
<div class="input-group-btn">
<a id="graph-colour-example" class="btn btn-default" role="button"> </a>
<a id="choose-graph-colour" class="btn btn-default" role="button">Choose graph colour</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="display-results-container">
<button type="submit" class="btn btn-lg btn-primary disabled">Display results</button>
</div>
</div>
</form>
</div>
<div class="control-panel col-sm-12" id="control-panel-help">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h3>How do I use Kablammo?</h3>
<p>To learn how to use Kablammo, please <a class="start-tour" href="#">take the tour</a>.</p>
<h3>How do I cite Kablammo?</h3>
<p>If you use Kablammo, please cite <em><a
href="https://academic.oup.com/bioinformatics/article/31/8/1305/212772">Kablammo:
an interactive, web-based BLAST results visualizer</a></em>. Thank you!</p>
<h3>How do I load result data if I am using the web-based NCBI BLAST?</h3>
<p>If you are using the web-based NCBI BLAST, you must download its results in XML format before you can load them into Kablammo.</p>
<p><img src="img/ncbi_blast_help_1.png" alt="NCBI BLAST help 1"></p>
<p>First, click the Download link on the NCBI BLAST results page.</p>
<p><img src="img/ncbi_blast_help_2.png" alt="NCBI BLAST help 2"></p>
<p>Now, click the XML link to download results in XML format.</p>
<p><img src="img/choose_local_file_example.png" alt="Choose local file example"></p>
<p>Finally, click on <strong>Load results</strong> in Kablammo,
then click the <strong>Choose file ...</strong> button and choose
the <strong>Load results from your computer</strong> tab. Select
the XML file you just downloaded from NCBI BLAST, which will
likely be by default in your downloads directory.</p>
<h3>How do I load result data if I am running BLAST myself?</h3>
<p>If you are running BLAST yourself from the command line,
simply specify the <code>-outfmt 5</code> parameter to output
results in XML format. An example command, then, would be thus:</p>
<pre><code>blastn -query seqs.fa -db some/blast/db -outfmt 5 -out results.xml</code></pre>
<p>Once BLAST finishes, click <strong>Load
results</strong> in Kablammo, choose the <strong>Load results from
your computer</strong> tab, then click the <strong>Choose files
...</strong> button and select the XML file that BLAST created.</p>
<p>If you want the BLAST results to be viewable from other
computers (such as when BLAST is running on a central lab server
instead of your own machine), read the <a
href="https://github.com/jwintersinger/kablammo#serving-blast-results">Serving
BLAST results</a> section in Kablammo's README.</p>
</div>
</div>
</div>
</div>
<div class="control-panel col-sm-12" id="control-panel-about">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<p id="lab-logo-container"><a href="//www.wasmuthlab.org"><img src="img/wasmuth_lab_logo.svg" alt="Wasmuth lab" id="lab-logo"></a></p>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<p>Kablammo was created with loving attention to each handcrafted
detail by the <a href="//www.wasmuthlab.org">Wasmuth
Lab</a>. Made fresh each day using only local ingredients. Mmm,
tasty.</p>
<p><a href="https://github.com/jwintersinger/kablammo">Kablammo's
source code</a> is available on GitHub.</p>
<p><strong>Jeff Wintersinger</strong> (<a
href="//jeff.wintersinger.org">web site</a>, <a
href="https://twitter.com/jwintersinger">Twitter</a>) wrote
Kablammo. He also proposed the project's brilliant name.</p>
<p><strong>James Wasmuth</strong> (<a
href="mailto:[email protected]">e-mail</a>, <a
href="https://twitter.com/jdwasmuth">Twitter</a>) supervised
Kablammo's creation. He eventually acquiesced to calling it
Kablammo.</p>
<p>If you use Kablammo, please cite <em><a
href="https://academic.oup.com/bioinformatics/article/31/8/1305/212772">Kablammo:
an interactive, web-based BLAST results visualizer</a></em>. Thank you!</p>
</div>
</div>
</div>
</div>
</div>
<!--<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div>-->
<div class="container-fluid" id="results-container">
<div class="container">
<div class="row" id="introduction">
<div class="col-sm-8 col-sm-push-2">
<h1>Visualize your BLAST results.</h1>
<p>Kablammo helps you create interactive visualizations of BLAST
results from your web browser. Find your most interesting alignments, list
detailed parameters for each, and export a publication-ready vector
image, all without installing any software.</p>
<div>
<img src="img/example_results.svg" alt="Example results" id="example-results">
</div>
<div>
<button type="button" class="start-tour btn btn-primary btn-lg btn-block">Show me how Kablammo works »</button>
</div>
</div>
</div>
</div>
</div>
<div id="errors">
</div>
<div id="curtain">
<div class="message">Loading ...</div>
</div>
<div id="snippets">
<div class="alignment" id="example-alignment">
<h5 class="alignment-name">Pants</h5>
<pre class="alignment-seqs"><div class="query-seq"></div><div
class="midline-seq"></div><div
class="subject-seq"></div></pre>
</div>
<div class="query-header row" id="example-query-header">
<div class="query-index">Query 1 of 4</div><div
class="query-name">tgme49_asmbl.111 | organism=Toxoplasma_gondii_ME49 | version=2012-07-08 | length=6619 | SO=supercontig</div>
</div>
<div class="subject-header row" id="example-subject-header">
<div class="subject-index">Subject 1 of 4</div><div
class="subject-name">tgme49_asmbl.111 | organism=Toxoplasma_gondii_ME49 | version=2012-07-08 | length=6619 | SO=supercontig</div>
</div>
<div class="row subject" id="example-subject-result">
<div class="subject-plot col-md-6">
<!-- SVG inserted here via prepend(). -->
</div>
<div class="subject-info col-md-3">
<p class="selected-count"></p>
<ul class="subject-params">
<li><span>Subject ID:</span> Pants</li>
<li><span>Bit score:</span> Pants</li>
<li><span>E value:</span> Pants</li>
<li><span>Query coords:</span> Pants and socks</li>
<li><span>Subject coords:</span> Pants</li>
<li><span>Alignment length:</span> Pants</li>
</ul>
</div>
<div class="btn-group-vertical subject-buttons col-md-3">
<div class="btn-group">
<button type="button" class="export-image btn btn-default dropdown-toggle" data-toggle="dropdown">
Export image
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" class="export-to-svg">Export to SVG</a></li>
<li><a href="#" class="export-to-png">Export to PNG</a></li>
</ul>
</div>
<div class="btn-group">
<div class="hsp-selection-controls">
<button type="button" class="btn btn-default view-alignment">View alignments</button>
<button type="button" class="btn btn-default export-alignment">Export alignments</button>
<button type="button" class="btn btn-default deselect-all-hsps">Deselect all alignments</button>
<div class="checkbox">
<label>
<input class="toggle-hsp-outline" type="checkbox" value="" checked="checked">
Outline selected alignments
</label>
</div>
</div>
</div>
</div>
<div class="modal fade" id="alignment-viewer" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-title">
<h5><strong>Subject:</strong> <span class="subject-title"></span></h5>
<h5><strong>Query:</strong> <span class="query-title"></span></h5>
</div>
</div>
<div class="modal-body alignments">
</div>
<div class="modal-footer">
<button class="btn btn-default export-alignments" type="button">Export alignments</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div id="example-error" class="alert alert-danger fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Error</h4>
<p class="message">This is an example error.</p>
</div>
</div>
<canvas id="png-exporter"></canvas>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ext/colpick.js"></script>
<script type="text/javascript" src="js/ext/bootstrap-tour.min.js"></script>
<script type="text/javascript" src="js/grapher.js"></script>
<script type="text/javascript" src="js/graph.js"></script>
<script type="text/javascript" src="js/blast_parser.js"></script>
<script type="text/javascript" src="js/blast_results_loader.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript" src="js/exporter.js"></script>
<script type="text/javascript" src="js/image_exporter.js"></script>
<script type="text/javascript" src="js/alignment_viewer.js"></script>
<script type="text/javascript" src="js/alignment_exporter.js"></script>
<script type="text/javascript" src="js/tour_guide.js"></script>
<script type="text/javascript" src="js/kablammo.js"></script>
</body>
</html>