forked from ViennaRNA/forna
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
622 lines (579 loc) · 34.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>forna</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="RNA Secondary Structure Visualization Using a Force Directed Graph Layout"/>
<meta name="keywords" content="RNA, secundary structure, visualization, force directed graph, plot, svg"/>
<meta name="author" content="Stefan Hammer"/>
<meta name="author" content="Peter Kerpedjiev"/>
<link rel="icon" type="image/png" href="img/favicon-192x192.png" sizes="192x192"/>
<link rel="icon" type="image/png" href="img/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="img/favicon-16x16.png" sizes="16x16"/>
<!-- CSS -->
<!-- Bootstrap: http://getbootstrap.com/ -->
<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'/>
<link rel='stylesheet' type='text/css' href='css/bootstrap-switch.css' />
<link rel='stylesheet' type='text/css' href='css/bootstrap-slider.min.css'/>
<!-- custom CSS -->
<link rel='stylesheet' type='text/css' href='css/fornac.css' />
<link rel='stylesheet' type='text/css' href='css/interface.css' />
<!-- Java Script -->
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- Knockout: http://knockoutjs.com/downloads/index.html -->
<script type="text/javascript" src="js/knockout-3.2.0.js"></script>
<script type="text/javascript" src="js/knockout-bindings.js"></script>
<!-- Bootstrap Javascript Plugins: http://getbootstrap.com/ -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- bootstrap on off switch and slider -->
<script type="text/javascript" src="js/bootstrap-switch.js"></script>
<script type="text/javascript" src="js/bootstrap-slider.min.js"></script>
<!-- D3 -->
<script type="text/javascript" src="js/d3.js"></script>
<!-- File Saver https://github.com/eligrey/FileSaver.js -->
<script type="text/javascript" src="js/FileSaver.min.js"></script>
<!-- saveSvgAsPng.js -->
<script type="text/javascript" src="js/saveSvgAsPng.js"></script>
</head>
<body>
<div id="main">
<!-- 'Add new molecule' modal -->
<div class="modal fade" id="add" > <!-- data-bind="showModal: loaded"-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add RNA Molecule</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="Input">Sequence and Structure</label>
<div class="inner-addon right-addon">
<span class="glyphicon glyphicon-remove inner-item inner-item-button" aria-hidden="true" data-bind="click: function() { input(''); }"></span>
<textarea type="text" class="form-control" id="Input" placeholder="" rows="2" data-bind="value: input" autofocus required></textarea>
<span class="inner-item inner-item-bottom" data-bind="text: cursorPosition"></span>
</div>
</div><br>
<div class="form-group">
<label for="inputFastaFile">And/Or load from File</label>
<div class="inner-addon left-addon" style="max-width:100%; overflow-x: hidden;">
<span class="glyphicon glyphicon-remove inner-item inner-item-button" aria-hidden="true" data-bind="click: function() { $('#inputFastaFile').val(''); inputFile(null); }, visible: inputFile"></span>
<input type="file" id="inputFastaFile" data-bind="event: { change: function() { inputFile($element.files[0]) }}">
<p class="help-block">Instead or in addition you may select a Fasta file.</p>
</div>
</div>
<div class="alert alert-danger" role="alert" data-bind="visible: inputError().length > 0, html: inputError" id="inputError"> </div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: cancelAddMolecule">Cancel</button>
<button type="submit" id="Submit" data-bind="click: submit" class="btn btn-primary" data-loading-text="Loading...">Submit</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 'Add from API modal -->
<div class="modal fade" id="addAPI" > <!-- data-bind="showModal: loaded"-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add Molecule from API</h4>
</div>
<div class="modal-body">
<form role="form">
<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate" aria-hidden="true"
data-bind="visible: inputError().length === 0"></span>
<span data-bind="visible: inputError().length === 0"> Please wait while we are
getting your molecule...</span>
<div class="alert alert-danger" role="alert" data-bind="visible: inputError().length > 0, html: inputError" id="inputError"> </div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: done">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 'Add new JSON molecule' modal -->
<div class="modal fade" id="addJSON" > <!-- data-bind="showModal: loaded"-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add Molecule from JSON</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="JSONInput">JSON Text</label>
<div class="inner-addon right-addon">
<span class="glyphicon glyphicon-remove inner-item inner-item-button" aria-hidden="true" data-bind="click: function() { input(''); }"></span>
<textarea type="text" class="form-control" id="JSONInput" placeholder="" rows="2" data-bind="value: input" autofocus required></textarea>
<span class="inner-item inner-item-bottom" data-bind="text: cursorPosition"></span>
</div>
</div><br>
<div class="form-group">
<label for="inputJSONFile">And/Or load from File</label>
<div class="inner-addon left-addon" style="max-width:100%; overflow-x: hidden;">
<span class="glyphicon glyphicon-remove inner-item inner-item-button" aria-hidden="true" data-bind="click: function() { $('#inputJSONFile').val(''); inputFile(null); }, visible: inputFile"></span>
<input type="file" id="inputJSONFile" data-bind="event: { change: function() { inputFile($element.files[0]) }}">
<p class="help-block">Instead or in addition you may select a JSON file.</p>
</div>
</div>
<div class="alert alert-danger" role="alert" data-bind="visible: inputError().length > 0, html: inputError" id="inputError"> </div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: cancelAddJSON">Cancel</button>
<button type="submit" id="SubmitJSON" data-bind="click: submit" class="btn btn-primary" data-loading-text="Loading...">Submit</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 'Add PDB molecule' modal -->
<div class="modal fade" id="addPDB" > <!-- data-bind="showModal: loaded"-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add PDB File</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="inputPDBFile">File Input</label>
<div class="inner-addon left-addon" style="max-width:100%; overflow-x: hidden;">
<span class="glyphicon glyphicon-remove inner-item inner-item-button" aria-hidden="true" data-bind="click: function() { $('#inputPDBFile').val(''); inputFile(null); }, visible: inputFile"></span>
<input type="file" id="inputPDBFile" data-bind="event: { change: function() { inputFile($element.files[0]); parsePDB(); }}">
<p class="help-block">Please select a PDB file to extract the secondary structure from.</p>
<div data-bind="visible: inputFile() !== null" id="compoundList">
<div class="btn-group btn-group-sm pull-right" role="group" aria-label="..." data-bind="visible: compounds().length > 0">
<button type="button" class="btn btn-default" data-bind="click: selectAll(true)">All</button>
<button type="button" class="btn btn-default" data-bind="click: selectAll(false)">None</button>
</div>
<label for="compoundList">Select compounds to display:</label>
<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate" aria-hidden="true"
data-bind="visible: compounds().length === 0"></span>
<ul class="list-group" data-bind="foreach: compounds" style="word-wrap: break-word; margin: 16px;">
<li class="list-group-item" data-bind="click: $parent.selectItem, css: { active: selected }">
<h4 class="list-group-item-heading" data-bind="text: name"></h4>
Fragment: <span data-bind="text: fragment"></span><br>
Chains: <span data-bind="text: chains"></span>
</li>
</ul>
<div class="btn-group btn-group-sm pull-right" role="group" aria-label="..." data-bind="visible: compounds().length > 0">
<button type="button" class="btn btn-default" data-bind="click: selectAll(true)">All</button>
<button type="button" class="btn btn-default" data-bind="click: selectAll(false)">None</button>
</div>
</div>
</div>
</div>
<div class="alert alert-danger" role="alert" data-bind="visible: inputError().length > 0, html: inputError" id="inputError"> </div>
</form>
<!-- <progress></progress> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: cancelAddPDB">Cancel</button>
<button type="submit" id="PDBSubmit" data-bind="click: submit" class="btn btn-primary" data-loading-text="Loading...">Submit</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 'Add MMCIF molecule' modal -->
<div class="modal fade" id="addMMCIF" > <!-- data-bind="showModal: loaded"-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add MMCIF File</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="Input">File Input</label>
<div class="inner-addon left-addon" style="max-width:100%; overflow-x: hidden;">
<span class="glyphicon glyphicon-remove button" aria-hidden="true" data-bind="click: function() { $('#inputMMCIFFile').val(''); inputFile(null); }, visible: inputFile"></span>
<input type="file" id="inputMMCIFFile" data-bind="event: { change: function() { inputFile($element.files[0]) }}">
<p class="help-block">Please select a MMCIF file to extract the secondary structure from.</p>
</div>
</div>
<div class="alert alert-danger" role="alert" data-bind="visible: inputError().length > 0, html: inputError" id="inputError"> </div>
</form>
<!-- <progress></progress> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: cancelAddMMCIF">Cancel</button>
<button type="submit" id="MMCIFSubmit" data-bind="click: submit" class="btn btn-primary" data-loading-text="Loading...">Submit</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 'Custom Colors' modal -->
<div class="modal fade" id="addColors" > <!-- data-bind="showModal: loaded"-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Edit Color Scheme</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="ColorInput">Color Specifications:</label>
<textarea type="text" class="form-control" id="ColorInput" placeholder="" rows="2" data-bind="value: input" autofocus required></textarea>
</div>
<div class="alert alert-danger" role="alert" data-bind="visible: inputError().length > 0, html: inputError" id="inputError"> </div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: cancelColor">Cancel</button>
<button type="submit" id="ColorSubmit" data-bind="click: colorSubmit" class="btn btn-primary" data-loading-text="Loading...">Submit</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal custom colors -->
<!-- 'Share' Link modal -->
<div class="modal fade" id="shareView" > <!-- data-bind="showModal: loaded"-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Share a Link of your View</h4>
</div>
<div class="modal-body" style="min-height: 150px;">
<form role="form">
<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate" aria-hidden="true"
data-bind="visible: (inputError().length === 0 && url().length === 0)"></span>
<span data-bind="visible: (inputError().length === 0 && url().length === 0)"> We are generating your link...</span>
<div data-bind="visible: url().length !== 0">
<label>Using this link you can return to the current state. This link will be valid for at about 6 weeks.</label>
<div class="input-group input-group-lg">
<input id="shareURL" type="text" class="form-control" placeholder="..." aria-describedby="url" data-bind="value: url" onClick="this.select();" readonly
data-toggle="tooltip" data-placement="bottom" title="Ctrl + C" data-delay='{"show":"100", "hide":"50"}'>
<span class="input-group-addon glyphicon glyphicon-share-alt" id="url"></span>
</div>
</div>
<div class="alert alert-danger" role="alert" data-bind="visible: inputError().length > 0, html: inputError" id="inputError"> </div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: done">Done</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 'About' modal -->
<div class="modal fade" id="about">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">About forna</h4>
</div>
<div class="modal-body">
<div style="float: right;">
<img src="img/favicon-192x192.png" alt="forna logo" title="forna logo" width="150" align="right" />
</div>
<h1>RNA Secondary Structure Visualization Using a Force Directed Graph Layout</h1>
<h4 id="overview">Overview</h4>
<p>The <code>forna</code> package provides a web interface for displaying RNA secondary
structures using the <a href="https://github.com/mbostock/d3/wiki/Force-Layout">force-directed graph
layout</a> provided by the
<a href="http://d3js.org/">d3.js visualization library</a>. </p>
<p>The front end makes use of <a href="http://getbootstrap.com">Bootstrap</a> and
<a href="http://knockoutjs.com/">Knockout.js</a> for the user interfact while the back end
uses <a href="http://flask.pocoo.org/">Flask</a> to serve the static files and provide a
REST API. The RNA structure manipulation and graph construction is created
using the python <a href="http://www.tbi.univie.ac.at/~pkerp/forgi/">forgi</a> RNA
structure manipulation library and the provided <code>forna.py</code> script. We heavily
depend on the python bindings of the <a href="http://www.tbi.univie.ac.at/RNA/">ViennaRNA</a> package.</p>
<h2 id="usage">Usage</h2>
<p>Click on <code>Add Molecule</code> to draw a new secondary structure. The input should
contain a sequence and a secondary structure in dot-bracket notation:</p>
<pre><code>GCUUCAUAUAAUCCUAAUGAUAUGGUUUGGGAGUUUCUACCAAGAGCCUUAAACUCUUGAUUAUGAAGUG<br>((((((((((..((((((.........))))))......).((((((.......))))))..)))))))))</code></pre>
<p>You can also use the <strong>FASTA</strong> format to add multiple molecule at once. If you do
not enter a structure, it will calculate the MFE structure at 37°C for you.</p>
<p>In the FASTA header you can specify a name and optionally also the number of the first or last nucleotide:
<pre><code>>name|start=5|end=60</code></pre></p>
<p><strong>Zooming</strong> can be accomplished using the mouse wheel.
Dragging the canvas leads to <strong>panning</strong>.</p>
<h3 id="colors">Colors</h3>
<h4 id="position">Position</h4>
<p>Color the nucleotides according to their position in the molecule. Lower numbered
nucleotides are closer to the 5' end and are colored green. Nucleotides in the middle
are colored yellow whereas nucleotides near the 3' end are colored red.</p>
<h4 id="structure">Structure</h4>
<p>Color the nucleotides according to the type of structure that they are in:</p>
<p><strong><font color='lightgreen'>Green</font></strong>: Stems (canonical helices) <br>
<strong><font color='#ff9896'>Red</font></strong>: Multiloops (junctions)<br>
<strong><font color='#dbdb8d'>Yellow</font></strong>: Interior Loops<br>
<strong><font color='lightblue'>Blue</font></strong>: Hairpin loops<br>
<strong><font color='lightsalmon'>Orange</font></strong>: 5' and 3' unpaired region<br>
<h4 id="sequence">Sequence</h4>
<p>Color according to the nucleotide types: </p>
<p><strong><font color='#dbdb8d'>Yellow</font></strong>: Adenine <br>
<strong><font color="#98df8a">Green</font></strong>: Cytosine <br>
<strong><font color='#ff9896'>Blue</font></strong>: Uridine <br>
<strong><font color='#aec7e8'>Red</font></strong>: Guanine</p>
<h4 id="custom">Custom</h4>
<p> Create a custom coloring scheme. The colors for each nucleotide or sets of nucleotide are specified in the
text box that appears when the 'set' button is clicked. The format is simple. Numbers entered interpolated to
colors and mapped to the respective nucleotides (the first number colors the first nucleotide, the second the second, etc...).
<pre>
0.5 0.6 10 13.4
</pre>
This will color the first four nucleotides such that the first two are lightly colored and the last two are more darkly colored.
The scale is interpolated between the lowest and highest value. We currently only use the white-blue color scale, but this will
be expanded shortly.
Coloring specific nucleotides is possible using the following format:
<pre>
8:red 10:blue 11:green
</pre>
These directives will color the 8th nucleotide red, the 10th blue and the 11th green. Ranges of colors
can also be entered:
<pre>
1-10:green 15-30:red 13,46,101:blue
</pre>
This will color nucleotides 1-10 green and nucleotides 15-30 red and 13,46, and 101 blue.
<p>Colors can be specified for each molecule individually by preceding them with the
molecule's id</p>
<pre>
>molecule1
1-10:green 15-30:red 13,46,101:blue
>molecule2
0.98 .80 0.75
</pre>
<h5>Color ranges and domains</h5>
The default color range is white to steelblue. Custom ranges can be specified
by entering the following in the custom color screen.
<pre>
>molecule1
1-10:green 15-30:red 13,46,101:blue
>molecule2
range=white:red
0.98 .80 0.75
</pre>
Color domains can be specified in a similar manner. The domain defines the values
over which the colors are spread:
<pre>
domain=0.5:1.0
0.98 .80 0.75
</pre>
<h3>Pseudoknots</h3>
Feel free to enter structures with pseudoknots. Here's the format:
<pre>
>1GID
AACCGG
((.[[.)).]]
</pre>
Use your imagination!
<h3>Editing the Structure</h3>
Links can artificially be added by holding down the shift key and
dragging from one nucleotide to another. This will form a
spring-loaded bond between two nucleotides. This is useful for
drawing interacting pairs of structures. Bonds can be deleted by
holding down the shift key and clicking on a bond.
<h3>Centering the view</h3>
The view can be centered on molecules being displayed by pressing the
'c' key or by clicking on the crosshairs button in the lower left
hand corner.
<h3>Force</h3>
The force can be turned off by either hitting the space key or by
flipping the switch in the lower left hand corner of the screen.
<h3>Friction / Wobbliness</h3>
How 'wobbly' a molecule appears can be adjusted by the friction
slider in the settings menu just to the right of the colors menu.
Lowering the friction (paradoxically) makes the molecule less wobbly
and increasing it makes it more so.
<h3> PDB Files </h3>
Secondary structure can automatically be extracted from PDB files and displayed. Simply
click on the dropdown arrow next to 'Add Molecule' and select 'Add PDB File'. This will
import every RNA chain in the PDB file and display its secondary structure. Proteins
will be added as nodes with a size proportional to their length. Interactions between
separate protein and nucleotide chains are displayed as dashed lines. The secondary
structure is extracted using MC-Annotate [1].
<h2 id="contact">Contact</h2>
<p>Questions and/or comments can be sent to <a href="mailto:forna@tbi.univie.ac.at">forna@tbi.univie.ac.at</a></p>
<h4 id="acknowledgement">Acknowledgement</h4>
<p>This work was funded by the Austrian DK RNA program
FG748004, by the Austrian FWF, project "SFB F43 RNA regulation
of the transcriptome," and the European Commission under the
Environment Theme of the 7th Framework Program for Research
and Technological Development (Grant agreement no: 323987).</p>
<h4 id="citations">Citations</h4>
[1] Gendron P, Lemieux S, Major F(2001). Quantitative analysis of nucleic acid three-dimensional structures. J Mol Biol 308:919–936.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Main content starts here! -->
<!-- the graph goes here -->
<div class="gallery" id='chart'>
<div class="menu-top">
<div class="menu-left">
<div class="btn-group">
<button class="btn btn-primary" data-bind="click: showAdd">Add Molecule</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a data-bind="click: showAdd" >Add Sequence and Secondary Structure</a></li>
<li role="presentation"><a data-bind="click: showAddPDB">Add PDB File</a></li>
<li role="presentation"><a data-bind="click: showAddMMCIF">Add MMCIF File</a></li>
<li role="presentation"><a data-bind="click: showAddJSON">Add JSON File</a></li>
</ul>
</div>
<div class="btn-group" data-toggle="tooltip" data-placement="right" title="Delete everyting" data-delay='{"show":"800", "hide":"50"}'>
<button class="btn btn-default" data-bind="click: clearGraph">Clear</button>
</div>
</div>
<div class="menu-right">
<div class="btn-group" id="About" data-toggle="tooltip" data-placement="bottom" title="About" data-delay='{"show":"800", "hide":"50"}'>
<button data-bind="click: showAbout" class="btn btn-default"><span class="glyphicon glyphicon-question-sign"></span></button>
</div>
</div>
</div>
<div class="menu-bottom">
<div class="menu-left">
<div class="btn-group" data-toggle="tooltip" data-placement="top" title="Animation (Key: Space)" data-delay='{"show":"800", "hide":"50"}'>
<input type="checkbox" class="bootstrap-switch" data-bind="bootstrapSwitchOn: animation" name="animation-toggle">
</div>
<div class="btn-group" data-toggle="tooltip" data-placement="top" title="Center molecules (Key: C)" data-delay='{"show":"800", "hide":"50"}'>
<button data-bind="click: centerMolecules" class="btn btn-default"><span class="glyphicon glyphicon-screenshot"></span></button>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Colors <span class="caret"> </span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu menu-form" role="menu">
<li role="presentation" class="dropdown-header">Color Scheme</li>
<li role="presentation" data-bind="css: { active: colors() === 'positions' }">
<label role="menuitem">
<input type="radio" name="colors" data-bind="checked: colors, checkedValue: 'positions'"> Positions
</label>
<li>
<li role="presentation" data-bind="css: { active: colors() === 'structure' }">
<label role="menuitem">
<input type="radio" name="colors" data-bind="checked: colors, checkedValue: 'structure'"> Structure
</label>
</li>
<li role="presentation" data-bind="css: { active: colors() === 'sequence' }">
<label role="menuitem">
<input type="radio" name="colors" data-bind="checked: colors, checkedValue: 'sequence'"> Sequence
</label>
</li>
<li role="presentation" data-bind="css: { active: colors() === 'custom' }">
<label role="menuitem">
<input type="radio" name="colors" data-bind="checked: colors, checkedValue: 'custom', checkedVaue: 'custom'"> Custom
<button type="button" role="menuitem" data-bind="click: showCustomColors, attr: { 'class': colors() === 'custom' ? 'btn btn-xs btn-default' : 'btn btn-xs btn-primary' }">Set</button>
</label>
</li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-cog"> </span>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu menu-form" role="menu">
<li role="presentation" class="dropdown-header">Display Options</li>
<li role="presentation" data-bind="css: {active: numbering}">
<label role="menuitem">
<input type="checkbox" data-bind="checked: numbering"> Sequence numbering
</label>
</li>
<li role="presentation" data-bind="css: {active: nodeLabel}">
<label role="menuitem">
<input type="checkbox" data-bind="checked: nodeLabel"> Nucleotide label
</label>
</li>
<li role="presentation" data-bind="css: {active: nodeOutline}">
<label role="menuitem">
<input type="checkbox" data-bind="checked: nodeOutline"> Nucleotide outline
</label>
</li>
<li role="presentation" data-bind="css: {active: displayLinks}">
<label role="menuitem">
<input type="checkbox" data-bind="checked: displayLinks"> Links
</label>
</li>
<li role="presentation" data-bind="css: {active: displayPseudoknotLinks}">
<label role="menuitem">
<input type="checkbox" data-bind="checked: displayPseudoknotLinks"> Pseudoknot Links
</label>
</li>
<li role="presentation" data-bind="css: {active: displayProteinLinks}">
<label role="menuitem">
<input type="checkbox" data-bind="checked: displayProteinLinks"> Protein Links
</label>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Force Field Options</li>
<li class="form-group">
<label for="pseudoknotStrength" role="menuitem">Pseudoknot strength<br>
<input type="text" id="pseudoknotStrength" class="slider form-control" data-bind="sliderValue: {value: pseudoknotStrength, min:0, max: 2, step: 0.1}"/>
</label>
</li>
<li class="form-group">
<label for="friction" role="menuitem">Force friction<br>
<input type="text" id="friction" class="slider form-control" data-bind="sliderValue: {value: friction, min:0, max: 100, step: 1}"/>
</label>
<label for="charge" role="menuitem">Node Charge<br>
<input type="text" id="charge" class="slider form-control" data-bind="sliderValue: {value: charge, min:-80, max: 0, step: 1}"/>
</label>
</li>
<li class="form-group">
<label for="friction" role="menuitem">Gravity<br>
<input type="text" id="gravity" class="slider form-control" data-bind="sliderValue: {value: gravity, min:0, max: 1, step: 0.1}"/>
</label>
</li>
</ul>
</div>
<div class="btn-group" data-toggle="tooltip" data-placement="top" title="Fullscreen" data-delay='{"show":"800", "hide":"50"}'>
<button onclick="toggleFullScreen('main'); return false;" class="btn btn-default"><span class="glyphicon glyphicon-fullscreen"></span></button>
</div>
</div>
<div class="menu-right">
<div class="btn-group" data-toggle="tooltip" data-placement="top" title="Share Link" data-delay='{"show":"800", "hide":"50"}'>
<button data-bind="click: shareLink" class="btn btn-default"><span class="glyphicon glyphicon-share-alt"></span></button>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-download-alt"> </span>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right menu-form" role="menu">
<!-- Dropdown menu links -->
<li role="presentation" data-bind="css: {active: background}">
<label role="menuitem">
<input type="checkbox" data-bind="checked: background"> Background
</label>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Save as ...</li>
<li role="presentation"><a role="menuitem" data-bind="click: saveSVG" download="rna.svg">SVG</a></li>
<li role="presentation"><a role="menuitem" data-bind="click: savePNG" download="rna.png">PNG</a></li>
<li role="presentation"><a role="menuitem" data-bind="click: saveJSON" download="rna.json">JSON</a></li>
</ul>
</div>
</div>
</div>
<!-- fornac javascript -->
<script type="text/javascript" src="js/fornac.js"></script>
<!-- interface javascript -->
<script type="text/javascript" src="js/interface.js"></script>
</div>
</div>
</body>
</html>