varri-js 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.html ADDED
@@ -0,0 +1,616 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>vaRRI-js — Visual Annotation of RNA-RNA Interactions</title>
7
+ <link rel="icon" type="image/png" href="logo/vaRRI.logo.40x40.png">
8
+
9
+ <!-- Fornac dependencies -->
10
+ <link rel="stylesheet" href="fornac/fornac.css">
11
+ <link rel="stylesheet" href="style.css">
12
+ <script src="fornac/d3.js"></script>
13
+ <script src="fornac/fornac.js"></script>
14
+
15
+ <!-- Local development uses the source file; the Pages workflow rewrites this path to dist/vaRRI.min.js. -->
16
+ <script src="src/vaRRI.js"></script>
17
+
18
+ <!-- Marked synchron laden -->
19
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
20
+
21
+ <!-- vaRRI-js UI -->
22
+ <script src="example-data.js" defer></script>
23
+ <script src="index.js" defer></script>
24
+ </head>
25
+ <body>
26
+
27
+ <header>
28
+ <a class="group-logo-link" href="https://www.bioinf.uni-freiburg.de" target="_blank" rel="noopener noreferrer" aria-label="Visit the Bioinformatics Group Freiburg website">
29
+ <img class="group-logo" src="https://www.bioinf.uni-freiburg.de/assets/images/bioinf-fr-logo-blau.png" alt="Bioinformatics Group Freiburg logo">
30
+ </a>
31
+ <img class="varri-logo" src="logo/vaRRI.logo.200x200.png" alt="vaRRI-js logo">
32
+ <div class="header-title">
33
+ <h1>vaRRI-js</h1>
34
+ <p>Visual Annotation of RNA–RNA Interactions</p>
35
+ </div>
36
+ <div class="uni-logo-wrap">
37
+ <a class="uni-logo-link" href="https://www.bioinf.uni-freiburg.de" target="_blank" rel="noopener noreferrer" aria-label="Open the University Freiburg Bioinformatics website in a new tab">
38
+ <span class="uni-logo-text">Bioinformatics -</span>
39
+ <img src="https://www.bioinf.uni-freiburg.de/assets/images/logo-uni-freiburg.png" alt="University Freiburg logo" class="uni-logo">
40
+ </a>
41
+ </div>
42
+ </header>
43
+
44
+ <main>
45
+ <div class="controls-column">
46
+ <!-- ================================================================== -->
47
+ <!-- Input panel -->
48
+ <!-- ================================================================== -->
49
+ <aside class="panel control-panel" aria-label="Sequence and structure input">
50
+ <details class="control-group" name="controls-accordion" open>
51
+ <summary>Sequence &amp; Structure Input</summary>
52
+ <div class="control-group-body">
53
+ <!-- Quick examples -->
54
+ <span id="exampleDropdownLabel" class="example-label">Example</span>
55
+ <div class="examples">
56
+ <details id="exampleDropdown" class="example-dropdown">
57
+ <summary id="exampleDropdownTrigger" aria-labelledby="exampleDropdownLabel selectedExampleName">
58
+ <span id="selectedExampleName">Select an example</span>
59
+ </summary>
60
+ <div id="exampleDropdownOptions" class="example-options" role="group" aria-label="Available examples"></div>
61
+ </details>
62
+ <button id="clearAllBtn" class="btn btn-secondary btn-sm" type="button">✕ Clear</button>
63
+ </div>
64
+
65
+ <!-- Sequence -->
66
+ <label for="sequence">
67
+ Sequences <small>(IUPAC; separate molecules with &amp;)</small>
68
+ <button id="fastaInputBtn" class="btn btn-secondary btn-sm" type="button" title="Provide sequences in FASTA format">FASTA</button>
69
+ </label>
70
+ <div class="input-wrap">
71
+ <div id="backdrop-sequence" class="backdropable"><div class="highlights" id="highlights-sequence"></div></div>
72
+ <textarea id="sequence" class="backdropable" rows="3" placeholder="ACGAUCAGAGAUUAGAGCAUACGACAGCAG&amp;ACGAAAAGAGCAUACGACAGUAG"></textarea>
73
+ <span class="field-tooltip"></span>
74
+ </div>
75
+
76
+ <!-- Start indices and color -->
77
+ <div class="start-index-grid">
78
+ <div class="start-index-item">
79
+ <div class="start-index-label-row">
80
+ <input type="color" id="colorSeq1" class="legend-color js-render-color"
81
+ title="Select sequence 1 strand colour">
82
+ <label for="startIndex1">Start&nbsp;1</label>
83
+ <input type="number" id="startIndex1" value="1">
84
+ <span class="field-tooltip"></span>
85
+ </div>
86
+ </div>
87
+ <div class="start-index-item">
88
+ <div class="start-index-label-row">
89
+ <input type="color" id="colorSeq2" class="legend-color js-render-color"
90
+ title="Select sequence 2 strand colour">
91
+ <label for="startIndex2">Start&nbsp;2</label>
92
+ <input type="number" id="startIndex2" value="1">
93
+ <span class="field-tooltip"></span>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Structure -->
99
+ <label for="structure">
100
+ Structure <small>(dot-bracket; separate molecules with &amp;)</small>
101
+ </label>
102
+ <div class="input-wrap">
103
+ <div id="backdrop-structure" class="backdropable"><div class="highlights" id="highlights-structure"></div></div>
104
+ <textarea id="structure" class="backdropable" rows="3" placeholder="..(((((....)))))(((....)))..&amp;..(((......))).."></textarea>
105
+ <span class="field-tooltip"></span>
106
+ </div>
107
+
108
+ </div>
109
+ </details>
110
+
111
+ <div id="msg"></div>
112
+ </aside>
113
+
114
+ <!-- ================================================================== -->
115
+ <!-- Visualization panel -->
116
+ <!-- ================================================================== -->
117
+ <aside class="panel control-panel" aria-label="Visualization settings">
118
+ <details class="control-group" name="controls-accordion" >
119
+ <summary>Visualization Settings
120
+ <span id="full-screen-menu">
121
+ <input type="checkbox" id="hideFooterAndHeader" >
122
+ <label for="hideFooterAndHeader" title="Toogle to Full Screen mode.">Full Screen</label>
123
+ </span>
124
+ </summary>
125
+ <div class="control-group-body">
126
+
127
+ <div class="row-2">
128
+ <label for="colorBasepair" title="Select base pair colour">Base pair color</label>
129
+ <input type="color" id="colorBasepair" class="legend-color-rect js-render-color"
130
+ title="Select base pair colour">
131
+ </div>
132
+
133
+ <div class="row-2">
134
+ <label for="coloring">Nucleotide color</label>
135
+ <select id="coloring">
136
+ <option value="strand" selected>by sequence</option>
137
+ <option value="loop">by loop type</option>
138
+ </select>
139
+ </div>
140
+
141
+ <label for="highlighting">Highlighting</label>
142
+ <div class="label-dropdown-col-row">
143
+ <label for="highlighting">of RRI nucleotides</label>
144
+ <select id="highlighting">
145
+ <option value="region" selected>region</option>
146
+ <option value="basepairs">basepairs</option>
147
+ <option value="nothing">nothing</option>
148
+ </select>
149
+
150
+ <input type="color" id="colorRriNodes" class="legend-color js-render-color"
151
+ title="Select nucleotide highlight colour">
152
+ </div>
153
+
154
+ <div class="checkbox-row">
155
+ <input type="checkbox" id="distinctBpTypes" checked>
156
+ <label for="distinctBpTypes">Basepair styling <small>(AU,GC=line, GU=dashed, *=dotted)</small></label>
157
+ </div>
158
+
159
+ <div class="checkbox-row">
160
+ <input type="checkbox" id="forceLayout" checked>
161
+ <label for="forceLayout">Enable Fornac force-layout animation</label>
162
+ </div>
163
+
164
+ <div class="checkbox-row checkbox-row-nested">
165
+ <input type="checkbox" id="forceLayoutLinearRRI">
166
+ <label for="forceLayoutLinearRRI">Linear horizontal RRI layout</label>
167
+ </div>
168
+
169
+ <div class="checkbox-row checkbox-row-nested">
170
+ <input type="checkbox" id="forceLayoutFreeTails">
171
+ <label for="forceLayoutFreeTails">Free trailing ends</label>
172
+ </div>
173
+
174
+ <div class="checkbox-row checkbox-row-nested">
175
+ <input type="checkbox" id="forceLayoutPullCrossing">
176
+ <label for="forceLayoutPullCrossing">Pull pseudoknot basepairs</label>
177
+ </div>
178
+
179
+ <div class="checkbox-row checkbox-row-nested">
180
+ <input type="checkbox" id="forceLayoutLinearStructure">
181
+ <label for="forceLayoutLinearStructure">Linear intramolecular stem layout</label>
182
+ </div>
183
+
184
+ </div>
185
+ </details>
186
+ </aside>
187
+
188
+ <!-- ================================================================== -->
189
+ <!-- Region highlighting panel -->
190
+ <!-- ================================================================== -->
191
+ <aside class="panel control-panel" aria-label="Region highlights">
192
+ <details class="control-group" name="controls-accordion" >
193
+ <summary>
194
+ Region Highlights
195
+ <span id="regionCounterUI" class="list-counter"></span>
196
+ </summary>
197
+ <div class="control-group-body">
198
+
199
+ <div class="label-dropdown-col-row">
200
+ <label for="backgroundhighlighting">&thinsp;Highlight of RRI region:</label>
201
+ <select id="backgroundhighlighting">
202
+ <option value="basepairs" selected>basepairs</option>
203
+ <option value="region">region</option>
204
+ <option value="nothing">nothing</option>
205
+ </select>
206
+ <input type="color" id="colorRriRegion" class="legend-color-rect js-render-color"
207
+ title="Select background highlight colour">
208
+ </div>
209
+
210
+ <ul id="region-list" class="highlight-list"></ul>
211
+
212
+ <input type="hidden" id="regionEditId" value="">
213
+
214
+ <div class="action-row">
215
+ <button id="regionSubmitBtn" class="btn btn-primary btn-sm" type="button">Add</button>
216
+ </div>
217
+ </div>
218
+ </details>
219
+ </aside>
220
+
221
+ <!-- ================================================================== -->
222
+ <!-- Subsequence highlighting panel -->
223
+ <!-- ================================================================== -->
224
+ <aside class="panel control-panel" aria-label="Subsequence highlights">
225
+ <details class="control-group" name="controls-accordion" >
226
+ <summary>
227
+ Subsequence Highlights
228
+ <span id="subseqCounterUI" class="list-counter"></span>
229
+ </summary>
230
+ <div class="control-group-body">
231
+ <ul id="highlight-list" class="highlight-list"></ul>
232
+
233
+ <input type="hidden" id="subseqEditId" value="">
234
+
235
+ <div class="action-row">
236
+ <button id="highlightSubmitBtn" class="btn btn-primary btn-sm" type="button" title="Add subsequence highlighting">Add</button>
237
+ </div>
238
+ </div>
239
+ </details>
240
+ </aside>
241
+
242
+ <!-- ================================================================== -->
243
+ <!-- Mutation panel -->
244
+ <!-- ================================================================== -->
245
+ <aside class="panel control-panel" aria-label="Point mutations">
246
+ <details class="control-group" name="controls-accordion" >
247
+ <summary>
248
+ Point Mutations
249
+ <span id="mutationCounterUI" class="list-counter"></span>
250
+ </summary>
251
+ <div class="control-group-body">
252
+ <ul id="mutation-list" class="highlight-list"></ul>
253
+
254
+ <input type="hidden" id="mutationEditId" value="">
255
+
256
+ <div class="action-row">
257
+ <button id="mutationSubmitBtn" class="btn btn-primary btn-sm" type="button">Add</button>
258
+ </div>
259
+ </div>
260
+ </details>
261
+ </aside>
262
+
263
+ <!-- ================================================================== -->
264
+ <!-- Profile panel -->
265
+ <!-- ================================================================== -->
266
+ <aside class="panel control-panel" aria-label="Probability profiles">
267
+ <details class="control-group" name="controls-accordion" >
268
+ <summary>
269
+ Probability Profiles <small>(Accessibility, ...)</small>
270
+ <span id="profileCounterUI" class="list-counter"></span>
271
+ </summary>
272
+ <div class="control-group-body">
273
+
274
+ <!-- Profile data input fields -->
275
+ <label><small>Space-separated CSV; # starts comment line</small></label>
276
+ <div class="row-2">
277
+ <div class="profile-label-with-color">
278
+ <label for="profileData1">Seq. 1 profile</label>
279
+ <input type="color" id="profileColor1" class="profile-color-picker" title="Accessibility color for sequence 1" aria-label="Accessibility color for sequence 1">
280
+ <span class="profile-color-mode-wrap">
281
+ <label for="profileColorRepresentsOne1" class="profile-color-mode-text">=1</label>
282
+ <input type="checkbox" id="profileColorRepresentsOne1" class="profile-color-mode-checkbox" aria-label="Map the sequence 1 profile color to value one">
283
+ </span>
284
+ </div>
285
+ <div class="profile-label-with-color">
286
+ <label for="profileData2">Seq. 2 profile</label>
287
+ <input type="color" id="profileColor2" class="profile-color-picker" title="Accessibility color for sequence 2" aria-label="Accessibility color for sequence 2">
288
+ <span class="profile-color-mode-wrap">
289
+ <label for="profileColorRepresentsOne2" class="profile-color-mode-text">=1</label>
290
+ <input type="checkbox" id="profileColorRepresentsOne2" class="profile-color-mode-checkbox" aria-label="Map the sequence 2 profile color to value one">
291
+ </span>
292
+ </div>
293
+ </div>
294
+ <div class="row-2">
295
+ <div class="input-wrap">
296
+ <textarea id="profileData1" name="profileData1" class="profileData" rows="10" cols="10"></textarea>
297
+ <span class="field-tooltip"></span>
298
+ </div>
299
+ <div class="input-wrap">
300
+ <textarea id="profileData2" name="profileData2" class="profileData" rows="10" cols="10"></textarea>
301
+ <span class="field-tooltip"></span>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- index reference -->
306
+ <div class="row-2">
307
+ <div class="checkbox-row">
308
+ <label for="profileIdxRef1">Index&nbsp;wrt.</label>
309
+ <select id="profileIdxRef1">
310
+ <option value="1" selected>1st nt</option>
311
+ <option value="start">Start 1</option>
312
+ </select>
313
+ </div>
314
+ <div class="checkbox-row">
315
+ <label for="profileIdxRef2">Index&nbsp;wrt.</label>
316
+ <select id="profileIdxRef2">
317
+ <option value="1" selected>1st nt</option>
318
+ <option value="start">Start 1</option>
319
+ </select>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Apply button -->
324
+ <div class="action-row">
325
+ <button id="profileApplyBtn" class="btn btn-primary btn-sm" type="button">Apply</button>
326
+ <button id="profileClearBtn" class="btn btn-secondary btn-sm" type="button">Clear</button>
327
+ </div>
328
+
329
+ </div>
330
+ </details>
331
+ </aside>
332
+
333
+ <!-- ================================================================== -->
334
+ <!-- Link to help and documentation -->
335
+ <!-- ================================================================== -->
336
+ <aside class="panel control-panel" aria-label="Help and documentation">
337
+ <details class="control-group" name="controls-accordion" >
338
+ <summary>
339
+ <a href="README.html" target="_blank" rel="noopener noreferrer">
340
+ Help and Documentation
341
+ </a>
342
+ </summary>
343
+ </details>
344
+ </aside>
345
+
346
+ </div> <!-- end of control panel -->
347
+
348
+ <!-- ================================================================== -->
349
+ <!-- Result panel -->
350
+ <!-- ================================================================== -->
351
+ <section class="result-panel">
352
+ <div id="rendering-canvas" tabindex="0"></div>
353
+
354
+ <div id="rendering-caption"></div>
355
+
356
+ <div class="viz-control">
357
+ <label for="rotationSlider">Rotate: <span id="rotation" class="rotation-value">0</span></label>
358
+ <input type="range" id="rotationSlider" min="-180" max="180" step="1" value="0">
359
+ <label for="cropping">Crop: <span id="cropping-value" class="cropping-value">0</span></label>
360
+ <div class="input-wrap">
361
+ <input type="range" id="cropping" min="-1" max="10" value="-1" title="-1 disables cropping. Higher values crop the ends to resp. unpaired positions.">
362
+ <span class="field-tooltip"></span>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Export bar -->
367
+ <div class="export-bar">
368
+ <button id="exportSvgBtn" class="btn btn-success btn-sm" type="button" title="Download rendering in SVG format.">⬇ SVG</button>
369
+ <button id="exportPngBtn" class="btn btn-info btn-sm" type="button" title="Download rendering in PNG format.">⬇ PNG</button>
370
+ <button id="shareLinkBtn" class="btn btn-shareLink btn-sm" type="button" title="Copy shareable link to clipboard">🔗 Share</button>
371
+ <button id="openVarriBtn" class="btn btn-openVarri btn-sm" type="button" title="Show this in a new vaRRI-js browser window">Full Page</button>
372
+ <!-- right-aligned note to cite varri-->
373
+ <span class="cite-note">Please
374
+ <a href="citation.html" class="btn btn-cite btn-sm">🔖 cite vaRRI-js</a></span>
375
+ </div>
376
+
377
+ </section>
378
+
379
+ </main>
380
+
381
+ <footer class="site-footer" aria-label="Service information">
382
+ <div class="footer-content">
383
+ <p>
384
+ This service is provided "as is" without any warranties or guarantees.
385
+ For comments or feedback, please contact
386
+ <a href="https://www.bioinf.uni-freiburg.de/" target="_blank" rel="noopener noreferrer">Freiburg Bioinformatics Group of the University of Freiburg</a>.
387
+ </p>
388
+ <p>
389
+ The source code for this service is freely available on
390
+ <a href="https://github.com/BackofenLab/vaRRI-js" target="_blank" rel="noopener noreferrer">GitHub</a>.
391
+ </p>
392
+ </div>
393
+ </footer>
394
+
395
+
396
+
397
+ <dialog id="numberDialog" class="app-dialog">
398
+ <form method="dialog">
399
+ <div class="dialog-header">Change to</div>
400
+ <div class="dialog-body">
401
+ <input type="number" step="any" placeholder="0">
402
+ </div>
403
+ <div class="dialog-actions">
404
+ <!-- OK an 1. Stelle im DOM -> ENTER wählt automatisch diesen Button -->
405
+ <button value="ok" class="btn btn-primary">OK</button>
406
+ <button value="cancel" class="btn btn-secondary">Cancel</button>
407
+ </div>
408
+ </form>
409
+ </dialog>
410
+
411
+
412
+ <dialog id="textDialog" class="app-dialog">
413
+ <form method="dialog">
414
+ <div class="dialog-header">Change to</div>
415
+ <div class="dialog-body">
416
+ <input type="text">
417
+ </div>
418
+ <div class="dialog-actions">
419
+ <!-- OK an 1. Stelle im DOM -> ENTER wählt automatisch diesen Button -->
420
+ <button value="ok" class="btn btn-primary">OK</button>
421
+ <button value="cancel" class="btn btn-secondary">Cancel</button>
422
+ </div>
423
+ </form>
424
+ </dialog>
425
+
426
+
427
+ <dialog id="subseqHighlightDialog" class="app-dialog">
428
+ <form method="dialog">
429
+ <div class="dialog-header">Highlight Subsequence ...</div>
430
+ <div class="dialog-body">
431
+ <div class="highlightInput">
432
+ <div>
433
+ <label for="subseqSequence">Seq.</label>
434
+ <div class="input-wrap">
435
+ <select id="subseqSequence">
436
+ <option value="1">1</option>
437
+ <option value="2">2</option>
438
+ </select>
439
+ <span class="field-tooltip"></span>
440
+ </div>
441
+ </div>
442
+ <div>
443
+ <label for="subseqRange">Range</label>
444
+ <div class="input-wrap">
445
+ <input type="text" id="subseqRange" placeholder="e.g. 3-8">
446
+ <span class="field-tooltip"></span>
447
+ </div>
448
+ </div>
449
+ <div>
450
+ <label for="subseqColor">Color</label>
451
+ <div class="input-wrap">
452
+ <input type="color" id="subseqColor">
453
+ <span class="field-tooltip"></span>
454
+ </div>
455
+ </div>
456
+ <div>
457
+ <label for="subseqAlpha" title="Opacity of the highlight (0.0 = fully transparent, 1.0 = fully opaque)">&nbsp;&nbsp;&nbsp;&nbsp;◐</label>
458
+ <div class="input-wrap">
459
+ <select id="subseqAlpha">
460
+ <option value="0.1">0.1</option>
461
+ <option value="0.2">0.2</option>
462
+ <option value="0.3">0.3</option>
463
+ <option value="0.4">0.4</option>
464
+ <option value="0.5">0.5</option>
465
+ <option value="0.6">0.6</option>
466
+ <option value="0.7">0.7</option>
467
+ <option value="0.8">0.8</option>
468
+ <option value="0.9">0.9</option>
469
+ <option value="1.0" selected>1.0</option>
470
+ </select>
471
+ <span class="field-tooltip"></span>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ <div class="dialog-actions">
477
+ <!-- OK an 1. Stelle im DOM -> ENTER wählt automatisch diesen Button -->
478
+ <button value="ok" class="btn btn-primary">OK</button>
479
+ <button value="cancel" class="btn btn-secondary">Cancel</button>
480
+ </div>
481
+ </form>
482
+ </dialog>
483
+
484
+
485
+ <dialog id="regionHighlightDialog" class="app-dialog">
486
+ <form method="dialog">
487
+ <div class="dialog-header">Highlight RRI region ...</div>
488
+ <div class="dialog-body">
489
+ <div class="regionInput">
490
+ <div>
491
+ <label for="region1">Region 1</label>
492
+ <div class="input-wrap">
493
+ <input type="text" id="region1" placeholder="e.g. 2-4">
494
+ <span class="field-tooltip"></span>
495
+ </div>
496
+ </div>
497
+ <div>
498
+ <label for="region2">Region 2</label>
499
+ <div class="input-wrap">
500
+ <input type="text" id="region2" placeholder="e.g. 5-7">
501
+ <span class="field-tooltip"></span>
502
+ </div>
503
+ </div>
504
+ <div>
505
+ <label for="regionColor">Color</label>
506
+ <div class="input-wrap">
507
+ <input type="color" id="regionColor">
508
+ <span class="field-tooltip"></span>
509
+ </div>
510
+ </div>
511
+ <div>
512
+ <label for="regionAlpha" title="Opacity of the highlight (0.0 = fully transparent, 1.0 = fully opaque)">&nbsp;&nbsp;&nbsp;&nbsp;◐</label>
513
+ <div class="input-wrap">
514
+ <select id="regionAlpha">
515
+ <option value="0.1">0.1</option>
516
+ <option value="0.2">0.2</option>
517
+ <option value="0.3">0.3</option>
518
+ <option value="0.4">0.4</option>
519
+ <option value="0.5">0.5</option>
520
+ <option value="0.6">0.6</option>
521
+ <option value="0.7">0.7</option>
522
+ <option value="0.8">0.8</option>
523
+ <option value="0.9">0.9</option>
524
+ <option value="1.0" selected>1.0</option>
525
+ </select>
526
+ <span class="field-tooltip"></span>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ <div class="dialog-actions">
532
+ <!-- OK an 1. Stelle im DOM -> ENTER wählt automatisch diesen Button -->
533
+ <button value="ok" class="btn btn-primary">OK</button>
534
+ <button value="cancel" class="btn btn-secondary">Cancel</button>
535
+ </div>
536
+ </form>
537
+ </dialog>
538
+
539
+ <dialog id="mutationDialog" class="app-dialog">
540
+ <form method="dialog">
541
+ <div class="dialog-header">Add Point Mutation ...</div>
542
+ <div class="dialog-body">
543
+ <div class="mutationInput">
544
+ <div>
545
+ <label for="mutationSequence">Seq.</label>
546
+ <div class="input-wrap">
547
+ <select id="mutationSequence">
548
+ <option value="1">1</option>
549
+ <option value="2">2</option>
550
+ </select>
551
+ <span class="field-tooltip"></span>
552
+ </div>
553
+ </div>
554
+ <div>
555
+ <label for="mutationPosition">Position</label>
556
+ <div class="input-wrap">
557
+ <input type="text" id="mutationPosition" inputmode="text" autocomplete="off" spellcheck="false" placeholder="e.g. -2">
558
+ <span class="field-tooltip"></span>
559
+ </div>
560
+ </div>
561
+ <div>
562
+ <label for="mutationBase">To</label>
563
+ <div class="input-wrap">
564
+ <input type="text" id="mutationBase" maxlength="1" inputmode="text" autocomplete="off" spellcheck="false" placeholder="A">
565
+ <span class="field-tooltip"></span>
566
+ </div>
567
+ </div>
568
+ <div>
569
+ <label for="mutationColor">Color</label>
570
+ <div class="input-wrap">
571
+ <input type="color" id="mutationColor">
572
+ <span class="field-tooltip"></span>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ <div class="dialog-actions">
578
+ <!-- OK an 1. Stelle im DOM -> ENTER wählt automatisch diesen Button -->
579
+ <button value="ok" class="btn btn-primary">OK</button>
580
+ <button value="cancel" class="btn btn-secondary">Cancel</button>
581
+ </div>
582
+ </form>
583
+ </dialog>
584
+
585
+ <dialog id="fastaDialog" class="app-dialog">
586
+ <form method="dialog">
587
+ <div class="dialog-header">FASTA Data ... <small>(Structure input is optional, Sequence IDs are ignored)</small></div>
588
+ <div class="dialog-body">
589
+ <div class="input-wrap">
590
+ <textarea id="fastaInput" rows="10" placeholder=">seq1&#10;ACGAUCAUGGAUUAGAGCAUUCGACAGCAG&#10;..<<<<...>>>>...((..(((...((..&#10;>seq2&#10;ACGAAAAAAAGAGCAUACGACAGccc&#10;............))...)))..)).."></textarea>
591
+ <span class="field-tooltip"></span>
592
+ </div>
593
+ <label>Parsed Sequences:</label>
594
+ <div class="input-wrap">
595
+ <div id="backdrop-fastaSequence" class="backdropable"><div class="highlights" id="highlights-fastaSequence"></div></div>
596
+ <textarea id="fastaSequence" class="backdropable" rows="3" disabled></textarea>
597
+ <span class="field-tooltip"></span>
598
+ </div>
599
+ <label>Parsed Structures:</label>
600
+ <div class="input-wrap">
601
+ <div id="backdrop-fastaStructure" class="backdropable"><div class="highlights" id="highlights-fastaStructure"></div></div>
602
+ <textarea id="fastaStructure" class="backdropable" rows="3" disabled></textarea>
603
+ <span class="field-tooltip"></span>
604
+ </div>
605
+
606
+ </div>
607
+ <div class="dialog-actions">
608
+ <!-- OK an 1. Stelle im DOM -> ENTER wählt automatisch diesen Button -->
609
+ <button value="ok" class="btn btn-primary">OK</button>
610
+ <button value="cancel" class="btn btn-secondary">Cancel</button>
611
+ </div>
612
+ </form>
613
+ </dialog>
614
+
615
+ </body>
616
+ </html>