Skip to content

Commit 8231f02

Browse files
author
Wolfgang Beyer
committed
Initial commit
0 parents  commit 8231f02

37 files changed

+28977
-0
lines changed

.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
"es2015"
4+
]
5+
}

.bowerrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"directory": "bower_components"
3+
}

.editorconfig

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# EditorConfig helps developers define and maintain consistent
2+
# coding styles between different editors and IDEs
3+
# editorconfig.org
4+
5+
root = true
6+
7+
8+
[*]
9+
10+
# change these settings to your own preference
11+
indent_style = space
12+
indent_size = 2
13+
14+
# we recommend you to keep these unchanged
15+
end_of_line = lf
16+
charset = utf-8
17+
trim_trailing_whitespace = true
18+
insert_final_newline = true
19+
20+
[*.md]
21+
trim_trailing_whitespace = false
22+
23+
[{package,bower}.json]
24+
indent_style = space
25+
indent_size = 2

.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto

.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules
2+
dist
3+
.tmp
4+
bower_components
5+
test/bower_components
6+
.DS_store
7+

.yo-rc.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"generator-mocha": {
3+
"ui": "bdd",
4+
"rjs": false
5+
}
6+
}

app/apple-touch-icon.png

14.2 KB
Loading

app/exampleData/B-3106.fa

+461
Large diffs are not rendered by default.

app/exampleData/B-3106.json

+1
Large diffs are not rendered by default.

app/exampleData/B-3106.vg

18.1 KB
Binary file not shown.

app/exampleData/C-3107.fa

+510
Large diffs are not rendered by default.

app/exampleData/C-3107.json

+1
Large diffs are not rendered by default.

app/exampleData/C-3107.vg

17.2 KB
Binary file not shown.

app/exampleData/DQA1-3117.fa

+1,073
Large diffs are not rendered by default.

app/exampleData/DQA1-3117.json

+1
Large diffs are not rendered by default.

app/exampleData/DQA1-3117.vg

62.1 KB
Binary file not shown.

app/exampleData/F-3134.fa

+738
Large diffs are not rendered by default.

app/exampleData/F-3134.json

+1
Large diffs are not rendered by default.

app/exampleData/F-3134.vg

14.2 KB
Binary file not shown.

app/exampleData/NA12878_A_conversion_masked.simplified2000.json

+1
Large diffs are not rendered by default.

app/exampleData/cactus-data.js

+11,385
Large diffs are not rendered by default.

app/favicon.ico

11.7 KB
Binary file not shown.

app/index.html

+233
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="description" content="">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>sequenceTubeMap.js Demo</title>
8+
9+
<link rel="apple-touch-icon" href="apple-touch-icon.png">
10+
<!-- Place favicon.ico in the root directory -->
11+
12+
<!-- build:css styles/vendor.css -->
13+
<!-- bower:css -->
14+
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
15+
<!-- endbower -->
16+
<!-- endbuild -->
17+
18+
<!-- build:css styles/main.css -->
19+
<link rel="stylesheet" href="styles/tube-maps.css">
20+
<!-- endbuild -->
21+
22+
</head>
23+
<body>
24+
<!--[if lt IE 10]>
25+
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
26+
<![endif]-->
27+
<div>
28+
<h1>Displaying Variation Graphs as Tube Maps</h1>
29+
<ul class="nav nav-tabs">
30+
<li class="active"><a data-toggle="tab" href="#smallExamples">Small Examples</a></li>
31+
<li><a data-toggle="tab" href="#realExamples">Examples from Real Data</a></li>
32+
<li><a data-toggle="tab" href="#customData">Use Custom Data</a></li>
33+
<li><a data-toggle="tab" href="#useServer">Use Server</a></li>
34+
</ul>
35+
<div class="tab-content">
36+
<div id="smallExamples" class="tab-pane fade in active">
37+
<p><button type="button" class="btn btn-primary active" aria-pressed="true" id="example1">Example 1</button> Only indels and polymorphisms</p>
38+
<p><button type="button" class="btn btn-primary" id="example2">Example 2</button> Inversions</p>
39+
<p><button type="button" class="btn btn-primary" id="example3">Example 3</button> Nested Inversions</p>
40+
<p><button type="button" class="btn btn-primary" id="example4">Example 4</button> Duplications</p>
41+
<p><button type="button" class="btn btn-primary" id="example5">Example 5</button> Translocations</p>
42+
<p><button type="button" class="btn btn-primary" id="bugfix1">Reversed Track Bugfix</button></p>
43+
<p><button type="button" class="btn btn-primary" id="simpleReadsExample">Simple Reads Example</button></p>
44+
<p><button type="button" class="btn btn-primary" id="cactusWithoutReads">Cactus without Reads</button></p>
45+
<p><button type="button" class="btn btn-primary" id="cactusWithReads">Cactus with Reads</button></p>
46+
</div>
47+
<div id="realExamples" class="tab-pane fade">
48+
<p class="limWidth">
49+
The data for these examples has been taken from the GRCh38 Primary Assembly of the Homo sapiens chromosome 6
50+
and are part of the genomic scaffold. The graph data structures which are being visualized here were
51+
generated by <a href="https://github.com/vgteam/vg">vg vg (https://github.com/vgteam/vg/)</a>.
52+
</p>
53+
<p>
54+
<button type="button" class="btn btn-primary" id="example6">B-3106</button> &nbsp;
55+
sequence file: <a href="exampleData/B-3106.fa">B-3106.fa</a> &nbsp;&nbsp;&nbsp;
56+
vg file: <a href="exampleData/B-3106.vg">B-3106.vg</a>
57+
</p>
58+
<p>
59+
<button type="button" class="btn btn-primary" id="example7">C-3107</button> &nbsp;
60+
sequence file: <a href="exampleData/C-3107.fa">C-3107.fa</a> &nbsp;&nbsp;&nbsp;
61+
vg file: <a href="exampleData/C-3107.vg">C-3107.vg</a>
62+
</p>
63+
<p>
64+
<button type="button" class="btn btn-primary" id="example8">DQA1-3117</button> &nbsp;
65+
sequence file: <a href="exampleData/DQA1-3117.fa">DQA1-3117.fa</a> &nbsp;&nbsp;&nbsp;
66+
vg file: <a href="exampleData/DQA1-3117.vg">DQA1-3117.vg</a>
67+
</p>
68+
<p>
69+
<button type="button" class="btn btn-primary" id="example9">F-3134</button> &nbsp;
70+
sequence file: <a href="exampleData/F-3134.fa">F-3134.fa</a> &nbsp;&nbsp;&nbsp;
71+
vg file: <a href="exampleData/F-3134.vg">F-3134.vg</a>
72+
</p>
73+
<br />
74+
<form class="form">
75+
<p>Node width proportional to...</p>
76+
<div class="radio">
77+
<label>
78+
<input type="radio" name="scalingRadios1" id="linear1" value="option1" checked>
79+
number of the node's base pairs (shows sequence labels)
80+
</label>
81+
</div>
82+
<div class="radio">
83+
<label>
84+
<input type="radio" name="scalingRadios1" id="log21" value="option2">
85+
log<sub>2</sub> of the number of the node's base pairs
86+
</label>
87+
</div>
88+
<div class="radio">
89+
<label>
90+
<input type="radio" name="scalingRadios1" id="log101" value="option3">
91+
number of the node's base pairs / 100
92+
</label>
93+
</div>
94+
<label><input type="checkbox" id="redundantNodesCheckbox1" checked> Remove redundant nodes</label><br>
95+
</form>
96+
</div>
97+
<div id="customData" class="tab-pane fade">
98+
<p>Parses JSON data generated by <a href="https://github.com/vgteam/vg/">vg (https://github.com/vgteam/vg/)</a>.</p>
99+
<p class="limWidth">
100+
vg generates variation graphs from sequence data. It is able to output these sequence graphs in a JSON format via the following command:
101+
<pre class="form limWidth">vg view -j filename.vg >filename.json</pre>
102+
</p>
103+
<form class="form limWidth">
104+
<textarea class="form-control" id="textarea1" rows="12" cols="90" placeholder="Paste vg-generated JSON here or pick file..."></textarea><br />
105+
<input type="file" id="inputFile"><br />
106+
<p>Node width proportional to...</p>
107+
<div class="radio">
108+
<label>
109+
<input type="radio" name="scalingRadios2" id="linear2" value="option1" checked>
110+
number of the node's base pairs (shows sequence labels)
111+
</label>
112+
</div>
113+
<div class="radio">
114+
<label>
115+
<input type="radio" name="scalingRadios2" id="log22" value="option2">
116+
log<sub>2</sub> of the number of the node's base pairs
117+
</label>
118+
</div>
119+
<div class="radio">
120+
<label>
121+
<input type="radio" name="scalingRadios2" id="log102" value="option3">
122+
number of the node's base pairs / 100
123+
</label>
124+
</div>
125+
</form><br />
126+
<p><button type="button" class="btn btn-primary" id="parseButton">Parse</button></p>
127+
<form class="form-horizontal">
128+
<label><input type="checkbox" id="redundantNodesCheckbox2" checked> Remove redundant nodes</label><br>
129+
</form>
130+
</div>
131+
<div id="useServer" class="tab-pane fade">
132+
<p>Using chr22_v3.vg.xg</p>
133+
<form class="form limWidth">
134+
<div class="form-group">
135+
<label for="nodeID" class="col-sm-2 control-label">Node-ID</label>
136+
<div class="col-sm-10">
137+
<input type="text" class="form-control" id="nodeID" value="141817">
138+
</div>
139+
</div>
140+
<div class="form-group">
141+
<label for="distance" class="col-sm-2 control-label">Distance</label>
142+
<div class="col-sm-10">
143+
<input type="text" class="form-control" id="distance" value="10">
144+
</div>
145+
</div>
146+
<br />
147+
<p><button type="button" class="btn btn-primary" id="postButton">Display</button></p>
148+
<p>Node width proportional to...</p>
149+
<div class="radio">
150+
<label>
151+
<input type="radio" name="scalingRadios3" id="linear3" value="option1" checked>
152+
number of the node's base pairs (shows sequence labels)
153+
</label>
154+
</div>
155+
<div class="radio">
156+
<label>
157+
<input type="radio" name="scalingRadios3" id="log23" value="option2">
158+
log<sub>2</sub> of the number of the node's base pairs
159+
</label>
160+
</div>
161+
<div class="radio">
162+
<label>
163+
<input type="radio" name="scalingRadios3" id="log103" value="option3">
164+
number of the node's base pairs / 100
165+
</label>
166+
</div>
167+
</form><br />
168+
<form class="form-horizontal">
169+
<label><input type="checkbox" id="redundantNodesCheckbox3" checked> Remove redundant nodes</label><br>
170+
</form>
171+
</div>
172+
</div>
173+
<br />
174+
<p>Display Exons <input type="checkbox" id="exonCheckbox"></p>
175+
<p>
176+
<form action="">
177+
<input type="radio" name="colorScheme" value="colorful" id="colorfulRadioButton"> Colorful<br>
178+
<input type="radio" name="colorScheme" value="blues" id="bluesRadioButton" checked> Shades of Blue<br>
179+
</form>
180+
</p>
181+
<div id="legendDiv"></div>
182+
<div id="chart0">
183+
<div id="loader" style="display:none;"></div>
184+
<svg id="svg">
185+
</svg>
186+
</div>
187+
<p class="footer"><br /><br /><br />
188+
Hover over a track to highlight.<br />
189+
Click on a track to move it to the top and rearrange the visualization according to the clicked track's sequence.<br />
190+
</p>
191+
<p><button type="button" class="btn btn-primary" id="downloadButton">Download Image</button></p>
192+
&nbsp;
193+
</div>
194+
195+
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
196+
<script>
197+
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
198+
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
199+
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
200+
e.src='https://www.google-analytics.com/analytics.js';
201+
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
202+
ga('create','UA-XXXXX-X');ga('send','pageview');
203+
</script>
204+
205+
<!-- build:js scripts/vendor.js -->
206+
<!-- bower:js -->
207+
<script src="/bower_components/jquery/dist/jquery.js"></script>
208+
<script src="/bower_components/d3/d3.js"></script>
209+
<!-- endbower -->
210+
<!-- endbuild -->
211+
212+
<!-- build:js scripts/plugins.js -->
213+
<script src="/bower_components/bootstrap/js/affix.js"></script>
214+
<script src="/bower_components/bootstrap/js/alert.js"></script>
215+
<script src="/bower_components/bootstrap/js/dropdown.js"></script>
216+
<script src="/bower_components/bootstrap/js/tooltip.js"></script>
217+
<script src="/bower_components/bootstrap/js/modal.js"></script>
218+
<script src="/bower_components/bootstrap/js/transition.js"></script>
219+
<script src="/bower_components/bootstrap/js/button.js"></script>
220+
<script src="/bower_components/bootstrap/js/popover.js"></script>
221+
<script src="/bower_components/bootstrap/js/carousel.js"></script>
222+
<script src="/bower_components/bootstrap/js/scrollspy.js"></script>
223+
<script src="/bower_components/bootstrap/js/collapse.js"></script>
224+
<script src="/bower_components/bootstrap/js/tab.js"></script>
225+
<!-- endbuild -->
226+
227+
<!-- build:js scripts/main.js -->
228+
<!--<script src="scripts/main.js"></script>-->
229+
<script src="scripts/bundle.js"></script>
230+
<!-- endbuild -->
231+
<script src="exampleData/cactus-data.js"></script>
232+
</body>
233+
</html>

app/robots.txt

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# robotstxt.org/
2+
3+
User-agent: *
4+
Disallow:

app/scripts/.DS_Store

6 KB
Binary file not shown.

app/scripts/cactus-data.js

+11,385
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)