-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.html
174 lines (131 loc) · 7.77 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
<!doctype html>
<head>
<title>Dot: Interactive dot plot for genome-genome alignments</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/VisToolTemplate.css" />
<link rel="stylesheet" href="css/SuperUI.css" />
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="javascript:window.location.href=location.protocol+'//'+location.host+location.pathname">Dot</a>
</div>
<ul class="nav navbar-nav">
<li class="page_tab" id="first_tab"><a href="javascript:void(0)" onclick="changePage('#first');">Inputs</a></li>
<li class="page_tab" id="main_tab"><a href="javascript:void(0)" onclick="changePage('#main');">Visualization</a></li>
<li class="page_tab" id="tutorial_tab"><a href="javascript:void(0)" onclick="changePage('#tutorial');">Tutorial</a></li>
<li class="page_tab" id="about_tab"><a href="javascript:void(0)" onclick="changePage('#about');">About</a></li>
</ul>
</div>
</nav>
<div id="messagesContainer"></div>
<div class="page" id="first">
<div class="center">
<h1>Add some data</h1>
<!-- Special InputPanel class defined in the javascript code will fill out this div: -->
<div id="inputPanel"></div>
<h2>Or try an example:</h2>
<!-- Examples defined in the javascript code will fill out this div: -->
<div id="examples"></div>
</div>
</div>
<div class="page" id="tutorial">
<h2>Tutorial</h2>
<!-- Example tutorial page -->
<div class="panel panel-default">
<div class="panel-heading">Getting started</div>
<div class="panel-body">
<ol>
<li>Select an example or enter your own alignments file URL. To generate the alignments file, see the <a href="https://github.com/dnanexus/dot">README</a></li>
<li>Optionally add an annotation file in CSV format. The CSV file must have a header that includes the following fields: "ref,ref_start,ref_end,name" or "query,query_start,query_end,name", depending on which side the annotations belong to. </li>
<li>Zoom in on a region of interest by dragging a rectangle around it. Zoom back out by double-clicking.</li>
</ol>
</div>
</div>
</div>
<div class="page" id="about">
<h2>About</h2>
<!-- Example about page -->
<div class="panel panel-default">
<div class="panel-heading">Information</div>
<div class="panel-body">
<p>Dot is open source at <a href="https://github.com/dnanexus/dot">https://github.com/dnanexus/dot</a>.</p>
<p>On DNAnexus, the featured project <a href="https://platform.dnanexus.com/projects/F8vbb100q83Zg1K17gF0FVV8">MUMmer + Dot</a> contains a kit of things to get started with:
<ul>
<li>An Applet for running MUMmer's nucmer aligner that includes DotPrep.py</li>
<li>A shortcut to Dot that automatically creates the necessary access URLs for your files stored on DNAnexus</li>
<li>Example initial data and results of the Applet, ready to use in Dot</li>
</ul>
If you cannot make a free DNAnexus account, then just download the <a href="https://dnanexus.github.io/dot/DotPrep.py">DotPrep.py</a> script and run it on the output from MUMmer's nucmer aligner, which will give you the same results as the Applet on DNAnexus.
</p>
</div>
</div>
</div>
<!-- Want to add more pages? Just use the tutorial and about pages as templates. You will need another page_tab in the navigation bar and another page here -->
<div class="page" id="main">
<div id="plotting-area">
</div>
</div>
<div id="spinner"></div>
<!-- JavaScript files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.6/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Takes care of requesting the right inputs from the user -->
<script src="js/InputPanel.js"></script>
<!-- Load Dot and its specific dependencies -->
<script src="js/MultiSegmentScale.js"></script>
<script src="js/SuperUI.js"></script>
<script src="js/Dot.js"></script>
<!-- app.js holds your visualization. Edit app.js to change the visualization -->
<script src="app.js"></script>
<!-- VisToolTemplate.js sets up the looks and basic functionality of the site. Edit VisToolTemplate.js to control what inputs your app should take from the user or how it should parse the data -->
<script src="js/VisToolTemplate.js"></script>
<script type="text/javascript">
var layout = VTTGlobal.layout;
var _app_area = d3.select('#plotting-area');
var _scales = {x: null, y: null};
/* Set up the Dot app */
var _dot = new DotApp(_app_area, {height: layout.svg.height, width: layout.svg.width});
// Define the inputs needed for this app
var inputSpec = {
// alignments: {name: "Alignments", required: true, callback: readTSVorCSV},
coords: {name: "Coords", required: true, callback: getRandomAccess},
index: {name: "Coords index", required: true, callback: readAsString},
annotations: {name: "Annotations", required: false, many: true, callback: readTSVorCSV},
};
// the keys input and someOtherInput become the names for those parameters you can pass in through the URL (see examples' urlSuffix), and how you refer to each file within the visualization code in app.js
// Note: readTSVorCSV is a function defined in VisToolTemplate.js, which will be called when a file is chosen. readTSVorCSV will parse the data, read it into memory, and call other functions that launch the visualization in app.js
setInputSpec(inputSpec);
// Define some examples
var examples = [
{
// Expires Dec 19, 2018
name: "Gorilla aligned to Human GRCh38",
hover: "Gorilla aligned to Human GRCh38",
urlSuffix: "?coords=https://dl.dnanex.us/F/D/y2Q4kKfvx2k7JGfG0GZJqGxvb3P68Gg7BY9PpPZz/gorilla_to_GRCh38.coords&index=https://dl.dnanex.us/F/D/672jYZ7Q50YxFzzF2XX1VzJqXqp1kvQYbXGGgbjV/gorilla_to_GRCh38.coords.idx"
},
{
// Expires Dec 12, 2018
name: "Gorilla aligned to Human GRCh38, with human gene annotation",
hover: "Gorilla aligned to Human GRCh38",
urlSuffix: "?coords=https://dl.dnanex.us/F/D/y2Q4kKfvx2k7JGfG0GZJqGxvb3P68Gg7BY9PpPZz/gorilla_to_GRCh38.coords&index=https://dl.dnanex.us/F/D/672jYZ7Q50YxFzzF2XX1VzJqXqp1kvQYbXGGgbjV/gorilla_to_GRCh38.coords.idx&annotations=https://dl.dnanex.us/F/D/XQ17P5Q8jKjq267V66Q3vB3kqXZgvgJg1PkYBBz6/gencode.v27.genes.bed"
},
{
// Expires Dec 19, 2018
name: "Tilapia aligned to Zebrafish",
hover: "Tilapia aligned to Zebrafish",
urlSuffix: "?coords=https://dl.dnanex.us/F/D/GjjBvV9QF86p0XQgVVFxJBxzXQ64X8YQ9j2zP2J2/tilapia-zebrafish_dot.coords&index=https://dl.dnanex.us/F/D/kqxgK5bJK1ffz3vGYVVQ5P83fQgK5BJ64jQ6KyzF/tilapia-zebrafish_dot.coords.idx&annotations=https://dl.dnanex.us/F/D/xq2B73JxBfjvyV0JzPk8kvJvfyb6Xkv5KP2z15Fx/Danio_rerio.GRCz10.91.bed,https://dl.dnanex.us/F/D/JVbZ8zK4VZ2P7pZvk0kZKZZGFK44ZX0Q05j8kQZQ/Oreochromis_niloticus.Orenil1.0.91.bed"
},
];
setExamples(examples);
// If you need to communicate with the user, you can send them a message like this:
// showMessage("Welcome to Dot, see the Tutorial page for information on getting started.", "info");
// Use "success", "warning", "danger", or "info" to make the alert box color match the sentiment of your message
</script>
</body>