/
index.html
251 lines (211 loc) · 12.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="urf-8">
<meta name="viewport" content="width=520, initial-scale=0.60">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>6mer Seed Toxicity</title>
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/assets/apple-touch-icon-precomposed.png">
<link rel="shortcut icon" href="assets/favicon.ico">
<!-- JQuery -->
<script src="assets/vendor/jquery-3.3.1/jquery.min.js"></script>
<!-- JQuery Highlight -->
<script src="assets/vendor/jquery-highlight/jquery.highlight.min.js"></script>
<!-- Easy Autocomplete-->
<script src="assets/vendor/easyautocomplete-1.3.5/jquery.easy-autocomplete.js"></script>
<link rel="stylesheet" href="assets/vendor/easyautocomplete-1.3.5/easy-autocomplete.css">
<!-- Async -->
<script src="assets/vendor/async-2.6.0/async.min.js"></script>
<!-- D3.js -->
<script src="assets/vendor/d3-4.13.0/d3.min.js"></script>
<!-- BlobJS - FileSaverJS dependency -->
<script src="assets/vendor/blobjs/blob.js"></script>
<!-- FileSaverJS - More support for older browsers -->
<script src="assets/vendor/filesaverjs-1.3.5/filesaver.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/vendor/bootstrap-4.0.0/css/bootstrap.min.css">
<script src="assets/vendor/bootstrap-4.0.0/js/bootstrap.min.js"></script>
<!-- Bootstrap Toggle -->
<link rel="stylesheet" href="assets/vendor/bootstrap-toggle-2.2.2/css/bootstrap-toggle.min.css">
<script src="assets/vendor/bootstrap-toggle-2.2.2/js/bootstrap-toggle.min.js"></script>
<!-- DataTables -->
<link rel="stylesheet" href="assets/vendor/datatables-1.10.16/css/datatables.min.css">
<script src="assets/vendor/datatables-1.10.16/js/datatables.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="assets/vendor/fontawesome-free-5.0.8/css/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/css/main.css">
<!-- only on beta.6merdb.org -->
<!--<link rel="stylesheet" href="assets/css/main.css">-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-115418404-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-115418404-1');
</script>
</head>
<body class="bg-nw">
<div class="container-fluid">
<div class="row">
<div class="col">
<div id="header-box">
<h2>6mer Seed Toxicity <span id="version-title"></span></h2>
<p>A tool to determine the toxicity of any siRNA, shRNA or miRNA with known 6mer seed sequence</p>
<a id="header-help" class="anchor-link"><i class="fa fa-question-circle float-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<div id="data-search-box" class="form-row ">
<div class="col">
<div class="form-row">
<div class="col-md-auto">
<div class="input-group">
<div class="input-group-prepend">
<label for="data-seed-field" class="input-group-text">Seed</label>
</div>
<input type="text"
id="data-seed-field" class="form-control"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
placeholder="Nucleotides" disabled>
</div>
</div>
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<label for="data-mirna-field" class="input-group-text">miRNA hsa-</label>
</div>
<!-- wrap to maintain form-control style, since field will get wrapped by autocomplete plugin-->
<div class="form-control autocomplete-field-wrapper">
<input type="text" id="data-mirna-field" class="wrapped-autocomplete-field form-control"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
placeholder="mature miRNA or accession number" disabled>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-auto">
<div class="form-row">
<div class="col-auto">
<button id="reset-button" class="btn btn-danger" disabled>Reset</button>
</div>
<div class="col-auto">
<button id="save-button" class="btn btn-success" aria-describedby="save-button-help" disabled><i class="fas fa-download"></i><span class="d-xs-inline d-sm-none d-lg-inline"> Download CSV</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="table-box" class="card-body">
<div id="loading-display" class="my-5 py-5 text-center">
<h5>Data is loading...</h5>
<h1><i id="loader"class="fas fa-circle-notch"></i></h1>
</div>
<table id="data-table" class="display table-striped dataTables searchHighlight mode-rna" width="100%" data-page-length='100'></table>
</div>
</div> <!-- #table.card -->
</div>
</div> <!-- .row -->
<br>
<div class="row">
<div class="col">
<div class="card card-dark">
<div class="card-header" id="how-to-use"><h3>How to use</h3></div>
<div class="card-body">
<div class="row">
<div class="col-sm">
<h5 class="card-title">Search 6mers</h5>
<a target="_blank" href="assets/img/seed_search.png"><img src="assets/img/seed_search.png" class="img-fluid rounded"/></a>
<p>Enter one of 4096 possible 6mers into the search field or any nucleotide sequence of less than 7 nucleotides.</p>
<p>Use positions 2-7 of the guide/antisense strand of the RNA duplex as the 6mer.</p>
<br class="d-block d-md-none">
</div>
<div class="col-sm">
<h5 class="card-title">Search miRNAs</h5>
<a target="_blank" href="assets/img/mirna_search.png"><img src="assets/img/mirna_search.png" class="img-fluid rounded"/></a>
<p>Type in the <b>miRNA</b> search field. It will auto-complete to show matching mature miRNAs. You can also use the miRNA accession number.</p>
<p>Each miRNA is color-coded. The colors are explained in the <a id="info-link" class="anchor-link">Info</a> section below.</p>
<br class="d-block d-md-none">
</div>
<div class="col-sm">
<h5 class="card-title">miRBase links</h5>
<a target="_blank" href="assets/img/show_mirnas.png"><img src="assets/img/show_mirnas.png" class="img-fluid rounded"/></a>
<p>With <b>show miRNAs</b> enabled, you can click on a mature miRNA in the results to be taken to the <a href=http://mirbase.org target="_blank">mirbase.org</a> page corresponding to its accession number.
<br class="d-block d-md-none">
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<div class="card card-dark">
<div class="card-header" id="info"><h3>Info</h3></div>
<div class="card-body">
<p>This site allows to determine the activity of any siRNA, shRNA, or miRNA to be toxic through its 6mer seed sequence in human (<i>HeyA8 - ovarian</i>, <i>H460 - lung</i> and H4 - brain) and mouse (<i>M565 - liver, 3LL - lung</i> and GL261 - brain) cancer cell lines.</p>
<p>The viability columns of the data table are colored as follows:</p>
<ul>
<li>miRNAs with low viability (high toxicity, <div class="badge badget-light red-badge">red color</div>) will likely be tumor suppressive.</li>
<li>miRNAs with high viability (low toxicity, <div class="badge badget-light green-badge">green color</div>) can be tumor promoting.</li>
</ul>
<p>When <b>show miRNAs</b> is enabled, miRNAs are color-coded as follows:</p>
<ul>
<li>Mature miRNAs representing the predominant arm are shown in <div class="badge badge-light mi-arm mi-arm-dom">dark purple</div>.</li>
<li>Mature miRNAs representing the lesser expressed arm (the * activity) are shown in <div class="badge badge-light mi-arm mi-arm-less">light purple</div>.</li>
<li>miRNAs that are highly expressed and processed by Drosha (RISC bound in wild-type but not Drosha k.o. HCT116 cells) have a <div class="badge badge-light mi-arm mi-arm-dom mi-arm-drosha">yellow</div> <div class="badge badge-light mi-arm mi-arm-less mi-arm-drosha">outline</div>.
<ul>
<li>All other miRNAs are either not processed by Drosha (i.e. miR-320a), miRtrons, or not significantly expressed in HCT116 cells.</li>
</ul>
</li>
<li>miRtrons have a <div class="badge badge-light mi-arm mi-arm-dom mi-arm-mirtron">blue</div> <div class="badge badge-light mi-arm mi-arm-less mi-arm-mirtron">outline</div> .</li>
</ul>
<hr>
<h5 class="card-title">References</h5>
<p>Gao, Q.Q., Putzbach, W.E., Murmann, A.E., Chen, S., Sarshad, A.A., Peter, J.M., Bartom, E.T., Hafner, M. and Peter, M.E. (2018) 6mer seed toxicity in tumor suppressive microRNAs. Nature Comm, 9:4504. </p>
<hr>
<h5 class="card-title">Version History</h5>
<p><i>Click for detailed changelogs.</i></p>
<div id="version-placeholder"><em>Loading...</em></div>
<div id="version-template" style="display:none">
<li class="version-entry">
<a class="version-url" href="">
<div class="badge badge-light version-tag">
<span class="version-number">VERSION</span> |
<span class="version-date">DATE</span>
</div>
<span class="version-name">RELEASE NAME</span>
</a>
</li>
</div>
<ul id="version-history">
</ul>
<hr style="clear:both">
<h5 class="card-title">Acknowledgements</h5>
<p>This site was developed by <a href="http://www.johannesmp.com" target="_blank">Johannes Peter</a>.</p>
<p>The source code is available on <a href="https://github.com/JohannesMP/NW_CellToxicityDB" target="_blank">Github</a> under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a></p>
<p>You are welcome to file <a href="https://github.com/JohannesMP/NW_CellToxicityDB/issues/new?labels=bug&title=Bug%3A%20WRITE%20SHORT%20DESCRIPTION%20HERE&body=%23%20What%20is%20happening%3F%20(The%20Bug)%0AWRITE%20HERE%0A%0A%23%20What%20should%20happen%20instead%3F%0AWRITE%20HERE%0A%0A%23%20Reproduction%20steps%20(optional)%0A1.%20%0A2.%20%0A3.%20%0A" target="_blank">Bug Reports</a> or make <a href="https://github.com/JohannesMP/NW_CellToxicityDB/issues/new?labels=feature&title=Feature%20Request%3A%20WRITE%20SHORT%20DESCRIPTION%20HERE" target="_blank">Feature Requests</a></p>
<p>
</div>
<div class="card-footer"></div>
</div>
</div>
</div>
</div> <!-- .container-fluid -->
<script src="assets/js/utils.js"></script>
<script src="assets/js/versionHistory.js"></script>
<script src="assets/js/htmlHelpers.js"></script>
<script src="assets/js/data.js"></script>
<script src="assets/js/dataFormatting.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/render.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>