-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
448 lines (408 loc) · 19.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vntyper-online</title>
<!-- Viewport Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Meta Description -->
<meta name="description" content="vntyper-online offers online MUC1 VNTR genotyping using the vntyper algorithm.">
<!-- Canonical Link -->
<link rel="canonical" href="https://vntyper.org/" />
<!-- Favicon Links -->
<link rel="icon" type="image/png" href="resources/assets/favicon/favicon-48x48.png" sizes="48x48" />
<link rel="icon" type="image/svg+xml" href="resources/assets/favicon/favicon.svg" />
<link rel="shortcut icon" href="resources/assets/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="resources/assets/favicon/apple-touch-icon.png" />
<link rel="manifest" href="resources/assets/favicon/site.webmanifest" />
<!-- Intro.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.0.0/introjs.min.css" integrity="sha512-631ugrjzlQYCOP9P8BOLEMFspr5ooQwY3rgt8SMUa+QqtVMbY/tniEUOcABHDGjK50VExB4CNc61g5oopGqCEw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Link to CSS Files -->
<link rel="stylesheet" href="resources/css/base.css">
<link rel="stylesheet" href="resources/css/navbar.css">
<link rel="stylesheet" href="resources/css/drag-drop.css">
<link rel="stylesheet" href="resources/css/forms.css">
<link rel="stylesheet" href="resources/css/buttons.css">
<link rel="stylesheet" href="resources/css/ui-components.css">
<link rel="stylesheet" href="resources/css/output.css">
<link rel="stylesheet" href="resources/css/modal.css">
<link rel="stylesheet" href="resources/css/faq.css">
<link rel="stylesheet" href="resources/css/citations.css">
<link rel="stylesheet" href="resources/css/footer.css">
<link rel="stylesheet" href="resources/css/log.css">
<link rel="stylesheet" href="resources/css/usageStats.css">
<!-- Intro.js JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.0.0/intro.min.js" integrity="sha512-+hhhH0eKqYCmXsO28OJE1HHWkgNYwlpceBwmeeDEt5jpCL8jOuqAVunXlZ/WZ4qIluJdwlcv4f5BUIQ/l1w9iw==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
<!-- Include Aioli from BioWasm CDN with Subresource Integrity (SRI) -->
<script src="https://biowasm.com/cdn/v3/aioli.js"
integrity="sha384-1Ergza974F0w12B/lIP0OD/cMzMizVolHbzSX1Jlmour//ypy41MIN8qYeHl45Jz"
crossorigin="anonymous" defer></script>
<!-- Link to Config JS -->
<script src="resources/js/config.js" defer></script>
<!-- Link to JavaScript Modules -->
<script type="module" src="resources/js/inputWrangling.js" defer></script>
<script type="module" src="resources/js/regionsConfig.js" defer></script>
<script type="module" src="resources/js/assemblyConfigs.js" defer></script>
<script type="module" src="resources/js/bamProcessing.js" defer></script>
<script type="module" src="resources/js/apiInteractions.js" defer></script>
<script type="module" src="resources/js/main.js" defer></script>
<script type="module" src="resources/js/modal.js" defer></script>
<script type="module" src="resources/js/populateRegions.js" defer></script>
<script type="module" src="resources/js/uiUtils.js" defer></script>
<script type="module" src="resources/js/usageStats.js" defer></script>
<!-- Version and Current Year Script -->
<script type="module" src="resources/js/version.js" defer></script>
<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "vntyper-online",
"url": "https://vntyper.org/",
"description": "vntyper-online offers comprehensive genetic variant analysis and visualization tools to support researchers and clinicians in genomics studies.",
"publisher": {
"@type": "Person",
"name": "Bernt Popp",
"url": "https://berntpopp.com",
"logo": {
"@type": "ImageObject",
"url": "https://vntyper.org/resources/assets/logo/vntyperonline_logo_80px.png"
}
},
"creator": [
{
"@type": "Person",
"name": "Bernt Popp",
"url": "https://berntpopp.com",
"sameAs": [
"https://github.com/berntpopp"
]
},
{
"@type": "Person",
"name": "Hassan Saei",
"url": "https://github.com/hassansaei"
}
]
}
</script>
</head>
<body>
<div class="container" id="home">
<!-- Navigation Bar -->
<nav class="navbar">
<div class="navbar-container">
<div class="header" id="resetHeader" role="button" aria-label="Reset Page">
<img src="resources/assets/logo/vntyperonline_logo_80px.png" alt="vntyper-online Logo" class="logo">
<h2>vntyper-online</h2>
</div>
<!-- Navigation Links Container -->
<ul class="navbar-menu" id="navbar-menu">
<li><a href="#" class="navbar-link" data-modal="faqModal" data-tooltip="View Frequently Asked Questions">FAQ</a></li>
<li><a href="/adtkd_diagnostics.html" class="navbar-link" data-tooltip="ADTKD diagnostics">ADTKD</a></li>
<li><a href="#" id="startTutorialBtn" class="navbar-link" data-tooltip="Start the interactive tutorial">Tutorial</a></li>
<li><a href="/api/docs" class="navbar-link" target="_blank" aria-label="OpenAPI Documentation" data-tooltip="View the API documentation">API</a></li>
<!-- Server Load Indicator -->
<li id="serverLoadIndicator" class="server-load-indicator">
<a href="#" class="navbar-link" aria-label="Current Server Load" data-tooltip="Shows the number of jobs currently in the queue">
<span id="serverLoadText">Jobs: </span>
<span id="totalJobsInQueue" class="load-count">0</span>
</a>
</li>
<!-- Disclaimer Indicator -->
<li id="disclaimerIndicator">
<a href="#" id="disclaimerLink" class="navbar-link" aria-label="View Disclaimer Status" data-tooltip="Check the disclaimer status">
<span id="disclaimerStatusIcon" class="status-icon" aria-hidden="true">✔️</span>
<span id="disclaimerStatusText" class="status-text">Disclaimer</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- Drag & Drop File Input Container -->
<div
class="drag-drop-container"
data-intro="Upload your BAM, BAI, or SAM files here. Each BAM file should have a corresponding BAI file, and SAM files will be converted automatically."
data-step="1"
>
<!-- NEW RESET BUTTON -->
<button
id="resetFileSelectionBtn"
class="reset-file-selection-button"
aria-label="Reset File Selection"
data-tooltip="Reset files"
>
↺
</button>
<label class="drag-drop-label" for="bamFiles">Upload sequencing files:</label>
<div
id="dropArea"
class="drag-drop-area"
tabindex="0"
role="button"
aria-label="File Upload Area"
data-tooltip="Click or drag and drop your BAM, BAI, or SAM files here"
>
<p>Drag & drop BAM, BAI, or SAM files or click to select multiple files.</p>
<input
type="file"
id="bamFiles"
accept=".bam,.bai,.sam"
multiple
class="drag-drop-input"
aria-describedby="fileList"
/>
<!-- Container to display selected files -->
<div id="fileList" class="file-list" aria-live="polite">
<p>No files selected.</p>
</div>
</div>
</div>
<!-- Region Select Dropdown -->
<div
class="region-select"
data-intro="Select the reference assembly used for your alignment. The region will be selected accordingly. If no region is selected the default behavior is to guess the assembly from the fields provided."
data-step="2"
>
<label for="region">Select reference:</label>
<select
id="region"
class="form-select"
data-tooltip="Choose the reference assembly used for alignment. If unsure, select 'Guess assembly'."
aria-label="Select Reference Assembly"
>
<option value="guess" selected>Guess assembly</option>
<!-- Options will be populated dynamically -->
</select>
</div>
<!-- Button Group: Submit, Extract, Show Options -->
<div
class="button-group"
data-intro="Submit your jobs, extract regions, or provide additional optional inputs."
data-step="3"
>
<button
id="submitBtn"
class="submit-button button"
data-tooltip="Click here to submit your jobs for analysis."
aria-label="Submit Jobs"
>
Submit Jobs
</button>
<button
id="extractBtn"
class="extract-button button"
data-tooltip="Optional: Extract MUC1 regions from BAMs in your browser and save locally."
aria-label="Extract Region"
>
Extract Region
</button>
<button
id="toggleOptionalInputs"
class="toggle-button button"
aria-expanded="false"
aria-controls="additionalInputs"
data-tooltip="Show additional options for job submission."
aria-label="Show Options"
>
Show Options
</button>
</div>
<!-- Optional Inputs: Hidden by Default -->
<div id="additionalInputs" class="additional-inputs hidden">
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
class="form-input"
placeholder="[email protected]"
aria-label="Email for notifications"
>
<label for="cohortAlias">Cohort Alias:</label>
<input
type="text"
id="cohortAlias"
name="cohortAlias"
class="form-input"
placeholder="My cohort"
aria-label="Cohort Alias"
>
<label for="passphrase">Passphrase:</label>
<input
type="text"
id="passphrase"
name="passphrase"
class="form-input"
placeholder="Password"
aria-label="Passphrase for cohort creation"
>
<!-- NEW: Add a line break before the label and update the tooltip -->
<br>
<label for="advntrMode">Perform adVNTR analysis:</label>
<input
type="checkbox"
id="advntrMode"
name="advntr_mode"
aria-label="Enable adVNTR analysis"
data-tooltip="Enable adVNTR analysis (this will take about 10 minutes)"
>
</div>
<!-- Output and Error Containers -->
<div
id="output"
data-intro="Here you will see the status and results of your jobs."
data-step="6"
>
<!-- Placeholder Message -->
<div id="placeholderMessage" class="placeholder-message">
Your results will appear here after job submission.
</div>
<!-- Message Display -->
<div id="message" class="message hidden"></div>
<!-- Spinner and Countdown -->
<div id="spinner" class="spinner hidden" aria-label="Loading" role="status"></div>
<div id="countdown" class="countdown"></div>
<!-- Job Information and Status -->
<div id="jobOutput">
<!-- Job outputs will be dynamically injected here -->
</div>
<!-- Cohorts and Jobs Display -->
<div id="cohortsContainer" class="cohorts-container" aria-live="polite">
<!-- Cohort sections will be dynamically injected here -->
</div>
<!-- Region Extraction Output -->
<div id="regionOutput" class="region-output"></div>
</div>
<div id="error" class="error d-none hidden"></div>
</div>
<!-- Citations Section -->
<section id="citations" class="citations-section">
<div class="citations-container">
<div class="citation-item">
<p>
<strong>Please cite:</strong> Saei H, et al. VNtyper enables accurate alignment-free genotyping of MUC1 coding VNTR using short-read sequencing data in autosomal dominant tubulointerstitielle nierenerkrankung. <strong>iScience</strong>. 2023 Jun 17;26(7):107171. doi: <a href="https://doi.org/10.1016/j.isci.2023.107171" target="_blank">10.1016/j.isci.2023.107171</a>. PMID: <a href="https://pubmed.ncbi.nlm.nih.gov/37456840/" target="_blank">37456840</a>; PMCID: <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC10338300/" target="_blank">PMC10338300</a>.
</p>
</div>
<!-- Add more citation items as needed -->
</div>
</section>
<!-- Footer Section -->
<footer class="footer">
<div class="footer-content">
<!-- Dynamic Institution Logos -->
<div class="institution-logos" id="institutionLogos">
<!-- Logos will be injected here by JavaScript -->
</div>
<!-- Dynamic Footer Links -->
<div class="footer-links" id="footerLinks">
<a href="#" class="navbar-link" data-modal="faqModal" data-tooltip="View Frequently Asked Questions">FAQ</a>
<a href="#citations" data-tooltip="Jump to citations">Citations</a>
<a href="https://github.com/berntpopp/vntyper-online-backend" class="navbar-link" target="_blank" rel="noopener noreferrer" aria-label="GitHub Repository" data-tooltip="Visit the GitHub repository">GitHub</a>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="currentYear"></span> vntyper-online. All rights reserved.</p>
<!-- Version Information -->
<p>
Frontend version: <span id="appVersion"></span> |
API version: <span id="apiVersion"></span> |
Tool version: <span id="toolVersion"></span>
</p>
<!-- Added Imprint and Contact Links Below Version Info -->
<p>
<a href="impressum_en.html" target="_blank" aria-label="Imprint" data-tooltip="View the imprint">Imprint</a> |
<a href="contact.html" target="_blank" aria-label="Contact" data-tooltip="Contact us">Contact</a> |
<a href="https://github.com/berntpopp/vntyper-online-backend" target="_blank" rel="noopener noreferrer" aria-label="GitHub Repository" data-tooltip="Visit the GitHub repository">GitHub</a>
</p>
</div>
</footer>
<!-- Disclaimer Modal -->
<div id="disclaimerModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="disclaimerTitle" aria-describedby="disclaimerDescription">
<div class="modal-overlay"></div> <!-- Overlay background -->
<div class="modal-content">
<button class="modal-close" aria-label="Close Disclaimer Modal">×</button>
<h2 id="disclaimerTitle">Disclaimer</h2>
<p id="disclaimerDescription">
<strong>Important Information</strong><br>
vntyper-online is intended for educational and research purposes only. It is not a substitute for professional medical advice and should not be used for clinical decision-making.
</p>
<p>
<strong>Usage Guidelines</strong><br>
The results provided by this tool should not be used as a basis for diagnosis or treatment without consulting a healthcare professional.
</p>
<button id="agreeBtn" class="agree-button" data-tooltip="Agree to the disclaimer">I Agree</button>
</div>
</div>
<!-- FAQ Modal -->
<div id="faqModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="faqTitle" aria-describedby="faqDescription" aria-hidden="true">
<div class="modal-overlay"></div> <!-- Overlay background -->
<div class="modal-content">
<button class="modal-close" aria-label="Close FAQ Modal">×</button>
<h2 id="faqTitle">Frequently Asked Questions</h2>
<div id="faqDescription" class="faq-container">
<div class="faq-item">
<h3>What is vntyper-online?</h3>
<p>The website vntyper-online offers online MUC1 VNTR genotyping using the vntyper algorithm. The MUC1 read data will be extracted locally on your device's browser from the BAM files you select and only this subset will be uploaded to the server for analysis</p>
</div>
<div class="faq-item">
<h3>How do I upload my data?</h3>
<p>
You can upload your BAM, BAI, or SAM files using the file input section on the Home page.
For BAM files, ensure that each BAM file has a corresponding BAI file (e.g., test.bam and test.bam.bai or test.bai).
If you wish to upload an IGV SAM file, open IGV and type "muc1" in the search field to navigate to the MUC1 region.
Then right-click on the alignment track and choose "Export Alignments." Save the SAM file to your desired location and upload it to vntyper.org.
</p>
</div>
<div class="faq-item">
<h3>Is my data secure?</h3>
<p>The website https://vntyper.org/ uses SSL/HTTPS protocols with strong encryption and gets a high score for its security implementation (<a href="https://developer.mozilla.org/en-US/observatory/analyze?host=vntyper.org" target="_blank">Mozilla Observatory A+ rating</a>, <a href="https://www.ssllabs.com/ssltest/analyze.html?d=vntyper.org&latest" target="_blank">SSL Labs A+ rating</a>, <a href="https://www.immuniweb.com/ssl/vntyper.org/eqEFlmqX/" target="_blank">ImmuniWeb A+ rating</a>).
Additionally, only a small fraction of the BAM file is uploaded, preserving privacy and even this read data is immediately deleted after computation.
Results are kept for 7 days and then deleted from the server.
</p>
</div>
<div class="faq-item">
<h3>What regions can I analyze?</h3>
<p>Select the reference assembly used for your alignment. The region corresponding to MUC1 Locus will be automatically selected.</p>
</div>
<div class="faq-item">
<h3>How can I track the status of my job?</h3>
<p>After submitting a job, the status will be displayed in the output section. You can also download the results once the job is complete.</p>
</div>
<!-- Add more FAQ items as needed -->
</div>
</div>
</div>
<!-- Panels Container for Logs and Stats -->
<div id="panelsContainer">
<!-- Logging Panel -->
<div id="logContainer" class="hidden" aria-label="Application Logs">
<div class="log-header">
<h2>Logs</h2>
<div>
<button class="clear-log-btn" aria-label="Clear Logs">🗑️</button>
<button class="close-log-btn" aria-label="Close Logs">✖️</button>
</div>
</div>
<div class="log-content" id="logContent" role="log" aria-live="polite" aria-atomic="false">
<!-- Log entries will be appended here -->
</div>
</div>
<!-- Usage Statistics Panel -->
<div id="usageStatsContainer" class="hidden" aria-label="Usage Statistics">
<div class="usage-stats-header">
<h2>Usage Statistics</h2>
<div>
<button class="close-stats-btn" aria-label="Close Usage Statistics">✖️</button>
</div>
</div>
<div class="usage-stats-content" id="usageStatsContent" role="region" aria-live="polite" aria-atomic="false">
<!-- Statistics will be displayed here -->
</div>
</div>
</div>
<!-- Toggle Buttons remain outside as before -->
<button id="toggleLogBtn" aria-controls="logContainer" aria-expanded="false" aria-label="Toggle Logs Panel">📜 Logs</button>
<button id="toggleStatsBtn" aria-controls="usageStatsContainer" aria-expanded="false" aria-label="Toggle Usage Statistics Panel">📊 Stats</button>
</body>
</html>