-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (144 loc) · 5.93 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
<!DOCTYPE html>
<html>
<head>
<!--Stylesheets-->
<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href='jsproteinmapper.css' rel='stylesheet' type='text/css' />
<link href='jsproteinmapperdemo.css' rel='stylesheet' type='text/css' />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<meta charset="utf-8">
<title>jsProteinMapper</title>
</head>
<body>
<div class="content">
<header id="header">
<div class="container">
<div class="row">
<div class="col-xs-1">
<img src="jsproteinmapper-icon.png" alt="jsproteinmapper-icon" id="logo">
</div>
<div class="col-xs-11">
<h1>jsProteinmapper
<small class="text-muted">Mapping variant(s) to protein domains</small>
</h1>
</div>
</div>
</div>
<p style="padding:10px 0px;;font-size: 16px;">This is a demo page for the jsProteinmapper which provides a subset of non-synonymous variants from COSMIC database (v84)<sup>$</sup> for BRAF, PIK3CA, and TP53 genes for users to checkout the features of this widget.</p>
</header>
<div id="controls" class="content">
Tip: search for <strong>BRAF, TP53 or PIK3CA</strong> to see the widget in action!
<hr>
<input type="text" placeholder="Enter gene symbol here"><button type="button">Search and draw</button>
</div>
<div id='gene-name'>No gene loaded. Please search above.</div>
<div id="gene-info" class="content"></div>
<!---section for instructions to use the widget-->
<section class="instructions">
<h3>Demo page instructions</h3>
<ul>
<li>Different sample genes have different tooltip options - try them all! These are configurable in the library.
<ul>
<li>BRAF has two variant tracks, one from COSMIC v84 and the other with example data.
Details are provided in bar chart form.</li>
<li>TP53 displays details of the variants in COSMIC v84 in table format within the tooltip.</li>
<li>PIK3CA uses a pie chart in the tooltip.</li>
</ul>
<p>Tooltips can be activated on mouseover or click. Select the desired behavior in the options window.</p>
</li>
<li>The position of a variant of interest can be highlighed with a colored vertical bar</li>
<li>Bars in the variant tracks can be highlighted individually. In the TP53 example, positions of hotspot
mutations are represented by black bars, while non-hotspots are gray</li>
<li>
Controls / actions
<ul>
<li>Zoom/pan X axis with scroll/drag, or touch events on the protein structure</li>
<li>Double-click zooms in X or Y depending on target</li>
<li>Mod- (ctrl-, shift-, cmd-) scroll to zoom the variant tracks, or touch events on the tracks</li>
<li>Mod-click-and-drag to draw zoom rectangle</li>
<li>Use the zoom buttons in the control panels, located in the upper right of each variant track</li>
<li>Switch between linear and logarithmic scale for the variant tracks</li>
<li>Show or hide the track control panels using the options window</li>
</ul>
</li>
</ul>
</section>
<br />
<!--Section for credits for the demo page-->
<section class="credits">
<h4>
Credits for demo data
<small class="text-muted">with permission from</small>
</h4>
<div class="container">
<div class="row">
<div class="col-xs-5">
<ul>
<li>
<strong>COSMIC (Catalogue Of Somatic Mutations In Cancer) - v84</strong>
<ul>
<li>
<a href="http://cancer.sanger.ac.uk/cosmic/license" target="_blank">COSMIC license information</a>
</li>
<li>
<a href="https://cancer.sanger.ac.uk/cosmic/register" target="_blank">COSMIC registration page</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xs-4">
<div class="crop">
<img id="cosmic-logo" src="https://pbs.twimg.com/profile_images/938071578524471296/I_GtKGcR_400x400.jpg" alt="Cosmic">
</div>
</div>
</div>
</div>
</section>
<section class="footer">
<footer>
<span class="footer-section-title">
Authors:
</span>
<span class="footer-section-text">
<br />
Thomas Pearce, MD, PhD
<br />
Somak Roy, MD
</span>
<br />
<span class="footer-section-title">
Source code:
</span>
<span class="footer-section-text">
Visit our github project page  
<a href="https://github.com/pearcetm/jsproteinmapper" target="_blank">
<i class="fab fa-2x fa-github-square"></i>
</a>
</span>
<br /><br />
<span class="footer-section-title">
Copyright:
</span>
<span class="footer-section-text">
jsProteinmapper is licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
</span>
<br /><br />
<span class="footer-section-title">
Disclaimer:
</span>
<span class="disclaimer-text">
This webpage for the jsProteinmapper library is for demonstration purpose only. The genomic data provided in this demonstration page for visualization does not constitute medical advice and should not be be treated as such.
</span>
</footer>
</section>
</div>
<!--Javascript libraries-->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src='d3tip.js'></script>
<script src='jsproteinmapper.js'></script>
<script src='jsproteinmapperdemo.js'></script>
</body>