-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
119 lines (104 loc) · 6.99 KB
/
Copy pathindex.html
File metadata and controls
119 lines (104 loc) · 6.99 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AssemblyStatsViewer</title>
<!-- CSS -->
<link rel="stylesheet" href="./src/scss/main.scss">
<!-- JavaScript -->
<script defer type="module" src="./src/js/main.js"></script>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-md bg-primary py-2">
<div class="container-fluid" id="navbar-content">
<span>
<img src="./src/img/DNA.svg" width="40px" height="40px">
<a href="https://assemblystatsviewer.netlify.app" class="DNA__link">
<span class="navbar-brand fs-4 text-white px-2 align-middle DNA__link--text">Assembly Stats Viewer</span>
</a>
</span>
<span class="navbar-brand text-white align-middle float-end">
<a class="text-light" href="https://github.com/Tom-Jenkins/AssemblyStatsViewer" target="_blank"><i class="bi bi-github px-3"></i></a>
<!-- <a class="text-light" href="https://twitter.com/Tom__Jenkins" target="_blank"><i class="bi bi-twitter px-3"></i></a> -->
<!-- INFORMATION MODAL ICON -->
<a class="text-light" href="#" data-bs-toggle="modal" data-bs-target="#infoModal"><i class="bi bi-info-circle px-3"></i></a>
<!-- INFORMATION MODAL CONTENT -->
<div class="modal fade text-primary" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fw-bold" id="infoModalLabel">About Assembly Stats Viewer</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-wrap">
<p>
Assembly Stats Viewer is a web application designed to compare genome assembly stats from the NCBI <a href="https://www.ncbi.nlm.nih.gov/assembly" target="_blank">assembly</a> database. It works by fetching data via the NCBI Datasets v2 REST <a href="https://www.ncbi.nlm.nih.gov/datasets/docs/v2/reference-docs/rest-api/#auth" target="_blank">API</a>, and processing the result to render an interactive table presenting basic assembly stats (N50, number of contigs, total length, etc.) and, if available, a barchart of BUSCO completeness assessments.
</p>
<p>
<strong>How to use:</strong>
<ul>
<li>Type one or more accession numbers (e.g. GCF_018350175) and/or taxon names (e.g. cat, Felis, Felis catus, etc.) into the text box.</li>
<li>Users can submit multiple queries at once, separated by a new line.</li>
<li>Using higher taxonomic ranks will work (e.g. Mammalia) but only the first 20 results will be shown to optimise usability and performance. By default, data for accession numbers will be prioritised before fetching data for taxon IDs.</li>
<li>The table and barchart data can be copied or downloaded as required.</li>
</ul>
</p>
<p>Please post any issues or feedback on the <a href="https://github.com/Tom-Jenkins/AssemblyStatsViewer" target="_blank">GitHub</a> page.</p>
</div>
<div class="modal-footer d-flex justify-content-center">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</span>
</div>
</nav>
<!-- MAIN APP -->
<div class="container-fluid my-4 mx-auto">
<!-- Title -->
<h1>Compare NCBI Genome Assemblies</h1>
<!-- Search Boxes -->
<div class="row my-4">
<!-- Search by Accession -->
<div class="col-auto">
<p class="fs-5 fw-bold">Enter accession number(s)</p>
<textarea id="accession-search-box" cols="40" rows="5" placeholder="GCF_018350175 GCF_018350175.1 GCA_016509815 GCA_028533295.1"></textarea>
</div>
<!-- Search by Taxon -->
<div class="col-auto">
<p class="fs-5 fw-bold">Enter taxon name(s)</p>
<textarea id="taxon-search-box" cols="40" rows="5" placeholder="Cat Felis Felis catus Felidae"></textarea>
</div>
<div class="mt-3">
<p>
<button id="show-results-button" class="btn btn-secondary buttons-margin">Show Results</button>
<span id="warning-message" class="text-warning fw-bold warning-messages"></span>
<button id="clipboard-button" class="hidden btn btn-secondary buttons-margin">Copy Table</button>
<button id="download-button" class="hidden btn btn-secondary buttons-margin">Download Table</button>
<button id="highlight-button" class="hidden btn btn-secondary buttons-margin">Highlight Best Stat</button>
<span id="top20-warning-message" class="hidden text-primary fw-bold mx-2">
<i class="bi bi-exclamation-circle" style="margin-right: 10px;"></i>More than 20 assemblies found in the NCBI database. Showing the first 20.
</span>
</p>
</div>
</div>
<!-- Table -->
<div id="assembly-stats-table" class="table-sm" style="width: 100%;"></div>
<!-- Barchart -->
<div id="busco-barchart" class="mt-5" style="width: 99.5%; overflow-x: hidden;"></div>
</div>
</body>
<!-- <footer class="bg-light text-center text-lg-start">
<div class="container-fluid">
<div class="row">
<p class="text-start">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</footer> -->
</html>