-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
executable file
·226 lines (201 loc) · 12.2 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css" />
<link rel="stylesheet" type="text/css" href="shared/slider/css/jquery.slider.min.css" />
<script src="shared/slider/js/jquery.slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="shared/bootstrap/css/bootstrap.min.css" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="shared/bootstrap/css/bootstrap-responsive.min.css" />
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<title>Microbe-ID ID: SSR-ID (SSR identification for strains of P. ramorum)</title>
</head>
<body>
<!-- MICROBE-ID customization: Modify extendable content -->
<div class="panel-group" id="accordion">
<p>Click on the following links to extend the contents of the webpage:</p>
<div class="panel panel-default">
<h4>
<!-- MICROBE-ID customization: nav-pills that contain the hyperlinks to the contents of the page -->
<ul class="nav nav-pills">
<li>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<em>Instructions</em>
</a>
</li>
<li>
<a data-toggle="collapse" data-parent="#accordion" href="#input">
<em>Data Input</em>
</a>
</li>
</ul>
</h4>
<div id="collapseOne" class="panel-collapse collapse">
<!-- MICROBE-ID customization: In the first <a href = > tag you will find the hyperlink to the'./SSR_Example_Data_ramorum.xlsx' file. This file contains the template query to use in Genotype-ID. CHANGE IT FOR YOUR OWN EXAMPLE QUERIES -->
<div class="panel-body">
<h4>Instructions</h4>
<p>Separate alleles using a slash (Allele1/Allele2)</p>
<p>Copy and paste your matrix using <a href="./SSR_Example_Data_ramorum.xlsx" target="_blank">this file</a> as template. Remember, <b>do not include the header and separate alleles using a slash (Allele1/Allele2)</b></p>
<p style="color:blue"><b>Warning:</b> All genotypes must have <b>2</b> alleles</p>
</div>
</div>
</div>
<!-- class = "collapse in" will collapse everything in this div tag when
the button is pressed -->
<!-- MICROBE-ID customization: Shiny input begins here -->
<div class="control collapse in" id="input">
<form class="well">
<form class="text">
<label style="align:center">
<h4>Data Input</h3>
</label>
<!-- MICROBE-ID customization: From this line on, every one of the functions is going to be used by shiny in a reactive way. All modifications of processes and inputs for the shiny script file (../shiny.R) are found here. To determine which variable communicates with which <div> in the index.html file, search in the server.R filefor the line with the class=shiny*. (e.g. The input$table variable is gonna be filled with info from the <div class="shiny-bound-input" id="table">. For more information refer to the shiny manual -->
<textarea id="table" name="table" class="shiny-bound-input" cols="25" rows="7" style="width: 100%"></textarea>
<br>
</form>
<form class="text">
<p>
<label>Random Seed (This will affect bootstrap values and the layout of the minimum spanning network.)</label>
<!-- MICROBE-ID customization: Change the default value of your seed depending on how you want the minimum spanning network to appear initially. -->
<input type="number" name="seed" id="seed" value="9449" min="0" />
</p>
<button type="submit" class="btn btn-success collapse in" data-toggle="collapse" data-target="#input">Submit genotype</button>
</form>
</div>
</div>
<hr>
<!-- MICROBE-ID customization: In this <div id="plot"> division is where shiny will print the output for the app. Follow the code to find each division-->
<div id="plot" class="shiny-plot-output shiny-bound-output" style="width: 100% ; height: 900px">
<div class="span9 offset1">
<h4>Analysis</h4>
<p>Select between a distance tree with bootstrap support values or a minimum spanning network</p>
<!-- MICROBE-ID customization: In this <div class = "tabbable"> we created two different tabs: Distance trees (line 86) and minimum spanning networks (line 89). These lines represent the hyperlinks to the real tabs, defined in lines 94 (distance tree) and 140 (minimum spanning network). Be sure that the <a href= #value> correspond to the precise tab-->
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab-8923-1" data-toggle="tab">Distance Tree with Bootstrap</a>
</li>
<li>
<a href="#tab-8923-2" data-toggle="tab">Minimum Spanning Network</a>
</li>
</ul>
<div class="tab-content">
<!-- MICROBE-ID customization: Distance tree block begins -->
<div class="tab-pane active" title="Bootstrap Tree" id="tab-8923-1">
<h2>Tree Parameters</h2>
<form id="form" class="well">
<div class="row-fluid">
<div class="control-group span3">
<label class="control-label" for="tree">Choose a tree algorithm:</label>
<!-- MICROBE-ID customization: Here you create the extendable list to choose between NJ or UPGMA trees. This region of the code communicates with line 43 of the server.R-->
<select id="tree" style="width:100px">
<option value="nj">nj</option>
<option value="upgma" selected="selected">UPGMA</option>
</select>
</div>
<!-- MICROBE-ID customization: Here you define the number of bootstrap replicates to be run on the server.R. This region communcates server.R (input$boot) -->
<div class="control-group span6">
<label class="control-label">Number of bootstrap replicates</label>
<div class="controls">
<input id="boot" name="boot" type="number" value="100" min="10" max="1000" style="width:100px">
</div>
</div>
<br>
</div>
<div class="row-fluid">
<div class="control-group span3">
<!-- MICROBE-ID customization: Here is the submit button. It will send a signal to run the queries with the parameters specified.-->
<button type="submit" class="btn btn-success" data-loading-text="Calculating...">Create Tree</button>
</div>
<!-- MICROBE-ID customization: Links to download the results. These lines communicate with the region defined from line 173 in server.R -->
<div class="span9">
<a id="downloadData" class="btn btn-primary shiny-download-link" href="" target="_blank">Newick File</a>
<a id="downloadPdf" class="btn btn-info shiny-download-link" href="" target="_blank">PDF</a>
</div>
</div>
<br>
<span class="help-block" style="color:green">Please wait while the tree is generated</span>
</form>
<div data-display-if="$('html').hasClass('shiny-busy')">
<div class="span9 offset1">
<br>
<h4>Processing, please wait.</h4>
<div class="progress progress-striped active">
<div class="bar" style="width: 100%;"></div>
</div>
</div>
</div>
<div id="distPlotTree" class="span6 shiny-plot-output" style="width: 100% ; height: 800px"></div>
</div>
<!-- MICROBE-ID customization: Minimum spanning network block begins -->
<div class="tab-pane" title="Minimum spanning network" id="tab-8923-2">
<div class="span12 well">
<h3>Minimum Spanning Network</h3>
<form id="form">
<span class="help-block">Note: Distances are calculated using Bruvo's distance, which follows a stepwise mutation model.</span>
<div class="span3">
<!-- MICROBE-ID customization: Slider to control levels of grayness for the edges in the Minimum spanning networks. This line communicates with line 127 of server.R-->
<label class="control-label" for="integer">Use the slider to adjust the grey scale of the edge distances.</label>
<input id="integer" type="slider" name="integer" value="3" class="jslider" data-from="0" data-to="50" data-step="1" data-skin="plastic" data-round="FALSE" data-locale="us" data-format="#,##0.#####" data-smooth="FALSE" />
</div>
<div class="span12">
<!-- MICROBE-ID customization: Here is the submit button. It will send a signal to run the queries with the parameters specified.-->
<button type="submit" class="btn btn-success" data-loading-text="Calculating...">Calculate MST</button>
<!-- MICROBE-ID customization: Links to download the results. These lines communicate with output$downloadPdfMst in server.R -->
<a id="downloadPdfMst" class="btn btn-info shiny-download-link" href="" target="_blank">PDF</a>
</div>
</form>
</div>
<!-- MICROBE-ID customization: This <div id="MinSpanTree"> outputs the results of the minimum spanning network. Note that the div id is the same than the
variable output$MinSpanTree in of the server.R. READ THE SHINY DOCUMENTATION IN INPUTS/OUTPUTS TO UNDERSTAND HOW REACTIVE OUTPUTS WORK (http://shiny.rstudio.com/tutorial/lesson4/)-->
<div id="MinSpanTree" class="shiny-plot-output" style="width: 100% ; height: 800px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<script src="shared/slider/js/jquery.slider.min.js"></script>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script>if (typeof(Shiny) != "undefined") {
Shiny.createSocket = function() {return new SockJS(location.pathname + "__sockjs__",null,{});};
Shiny.oncustommessage = function(message) {
if (typeof message === "string") alert(message);
if (message.alert) alert(message.alert);
if (message.console && console.log) console.log(message.console);
};
}</script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Validation
$("#form").validate({
errorClass: "help-inline",
errorElement: "span",
highlight:function(element, errorClass,validClass) {
$(element).parents('.control-group').addClass('error');
},
unhighlight:function(element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('error');
}
});
});
</script>
</body>
</html>