Mercurial > repos > azomics > cs_overview_2
comparison test-data/out.html @ 0:09114b034834 draft default tip
"planemo upload for repository https://github.com/ImmPortDB/immport-galaxy-tools/tree/master/flowtools/cs_overview commit d572546e2a1a28b33df2f908652e85dd86f5916f"
author | azomics |
---|---|
date | Wed, 20 May 2020 15:37:35 -0400 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:09114b034834 |
---|---|
1 <!DOCTYPE html> | |
2 <html> | |
3 <head lang="en"> | |
4 <title>CrossSample Overview</title> | |
5 <meta charset="UTF-8"> | |
6 <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> | |
7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
8 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/> | |
9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"/> | |
10 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-colvis-1.2.1/b-html5-1.2.1/cr-1.3.2/fc-3.2.2/fh-3.1.2/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css"/> | |
11 <link rel="stylesheet" href="/static/flowtools/css/parallelCoordinates.css"/> | |
12 | |
13 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-colvis-1.2.1/b-html5-1.2.1/cr-1.3.2/fc-3.2.2/fh-3.1.2/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.js"></script> | |
14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
15 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script> | |
16 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js" type="text/javascript"></script> | |
17 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" type="text/javascript"></script> | |
18 <script src="https://cdn.plot.ly/plotly-1.0.0.min.js" type="text/javascript"></script> | |
19 <script src="/static/flowtools/js/csOverview.js" type="text/javascript"></script> | |
20 <script src="/static/flowtools/js/crossSamplePlots.js" type="text/javascript"></script> | |
21 <script src="/static/flowtools/js/pCoordMFIstats.js" type="text/javascript"></script> | |
22 <script src="/static/flowtools/js/pCoordCSstats.js" type="text/javascript"></script> | |
23 <script src="/static/flowtools/js/color_palette.js" type="text/javascript"></script> | |
24 <script src="/static/flowtools/js/boxplots.js" type="text/javascript"></script> | |
25 | |
26 <style> | |
27 #input{font-family:Calibri,Arial} | |
28 table.dataTable tbody td.dt-body-right { | |
29 text-align: right; | |
30 } | |
31 #div{padding:5px;width:150px;height:100px;text-align:center} | |
32 table{width:100%;border:0px solid;border-collapse:collapse;text-align:center;} | |
33 th{background-color:#3e6db0;color:#fff;padding:5px} | |
34 </style> | |
35 </head> | |
36 | |
37 <body> | |
38 <div class="container-fluid"> | |
39 <div class="row" style="padding-bottom:10px;min-height:500px;"> | |
40 <div class="col-md-12"> | |
41 <ul class="nav nav-tabs tabs-main"> | |
42 <li class="homeTab active" data-value="prop"><a href="#prop" data-toggle="tab">Population Distribution</a></li> | |
43 <li class="homeTab" data-value="stackedA"><a href="#stackedA" data-toggle="tab">Stacked Plot</a></li> | |
44 <li class="homeTab" data-value="pcoord"><a href="#pcoord" data-toggle="tab">Parallel Coordinates Population Summary</a></li> | |
45 <li class="homeTab" data-value="pcoordMFI"><a href="#pcoordMFI" data-toggle="tab">Parallel Coordinates MFI Summary</a></li> | |
46 <li class="homeTab" data-value="csstats"><a href="#boxplot" data-toggle="tab">Summary Statistics Boxplots</a></li> | |
47 </ul> | |
48 | |
49 <div class="tab-content"> | |
50 <div class="tab-pane active" id="prop" style="min-height:500px;"> | |
51 <div class="row"> | |
52 <div id="propDiv">Population Distribution</div> | |
53 </div> | |
54 <div class="row"> | |
55 Edit population names below: | |
56 <div id="popnamesDiv"></div> | |
57 </div> | |
58 </div> | |
59 | |
60 <div class="tab-pane" id="stackedA" style="min-height:500px;"> | |
61 <div class="col-md-12 chartDiv"> | |
62 <div id="plotDivA" class="col-md-10" style="height:100%;"></div> | |
63 | |
64 <div id="popDivA" class="col-md-2" style="height:100%;"> | |
65 <div class="row"> | |
66 <div class="col-sm-6 optionButtons"> | |
67 <button id="updateDisplayA" class="igbtn">Reset Display</button> | |
68 </div> | |
69 <div class="col-sm-6 optionButtons"> | |
70 <button id="togglePlot" class="igbtn"><img id="toggleButtonImg" src="/static/images/flowtools/barssm.png"></button> | |
71 </div> | |
72 </div> | |
73 <table id="popTableA" class="table table-condensed table-bordered igtable"> | |
74 <thead> | |
75 <tr> | |
76 <th><input type="checkbox" checked id="popSelectAllA"/></th> | |
77 <th>Pop. Names</th> | |
78 <th>Color</th> | |
79 </tr> | |
80 </thead> | |
81 <tbody> | |
82 </tbody> | |
83 </table> | |
84 </div> | |
85 </div> | |
86 </div> | |
87 | |
88 <div class="tab-pane" id="pcoord" style="min-height:500px;"> | |
89 <div id="chartDivPC" class="col-md-12 chartDiv"> | |
90 <div class="row"> | |
91 <div class="col-md-10" style="height:100%;"> | |
92 <div id="plotDivPC" style="height:50%;"></div> | |
93 <div id="tableDivPC" style="height:50%;"></div> | |
94 </div> | |
95 <div id="popDivPC" class="col-md-2" style="height:100%;"> | |
96 <div class="widget"> | |
97 <input type="range" min="0" max="1" value="0.8" step="0.01" id="PCline_opacity" > | |
98 </input> | |
99 Opacity: <span id="pc_opacity">80%</span> | |
100 </div> | |
101 <button id="resetPCDisplay" class="igbtn">Reset Display</button> | |
102 <table id="popTablePC" class="table table-condensed table-bordered igtable"> | |
103 <thead> | |
104 <tr> | |
105 <th><input type="checkbox" checked id="popSelectAllPC"/></th> | |
106 <th>Sample Name</th> | |
107 <th>Color</th> | |
108 </tr> | |
109 </thead> | |
110 <tbody> | |
111 </tbody> | |
112 </table> | |
113 </div> | |
114 </div> | |
115 </div> | |
116 </div> | |
117 | |
118 <div class="tab-pane" id="pcoordMFI" style="min-height:500px;"> | |
119 <div id="chartDivPCm" class="col-md-12 chartDiv"> | |
120 <div class="row"> | |
121 <div id="smpDivPCm" class="col-md-1" style="height:100%;min-width:5%;"> | |
122 <table id="smpTablePCm" class="table table-condensed table-bordered igtable"> | |
123 <thead> | |
124 <tr> | |
125 <th>Sample Name</th> | |
126 <th><input type="checkbox" checked id="smpSelectAllPCm"/></th> | |
127 </tr> | |
128 </thead> | |
129 <tbody> | |
130 </tbody> | |
131 </table> | |
132 </div> | |
133 <div class="col-md-9" style="height:100%"> | |
134 <div id="plotDivPCm" style="height:50%"></div> | |
135 <div id="tableDivPCm" style="height:50%"></div> | |
136 </div> | |
137 | |
138 <div id="popDivPCm" class="col-md-2" style="margin-top:5px;"> | |
139 <div class="widget"> | |
140 <input type="range" min="0" max="1" value="0.8" step="0.01" id="PCmline_opacity" > | |
141 </input> | |
142 Opacity: <span id="pcm_opacity">80%</span> | |
143 </div> | |
144 <button id="resetDisplayMFIpop" class="igbtn">Reset Display</button> | |
145 <table id="popTablePCm" class="table table-condensed table-bordered igtable"> | |
146 <thead> | |
147 <tr> | |
148 <th><input type="checkbox" checked id="popSelectAllPCm"/></th> | |
149 <th>Population</th> | |
150 <th>Color</th> | |
151 </tr> | |
152 </thead> | |
153 <tbody> | |
154 </tbody> | |
155 </table> | |
156 </div> | |
157 </div> | |
158 </div> | |
159 </div> | |
160 | |
161 <div class="tab-pane" id="boxplot" style="min-height:500px;"> | |
162 <div class="col-md-12 chartDiv"> | |
163 <div id="mrkrDivC" class="col-md-2" style="height:100%;min-width:5%;"> | |
164 <table id="mrkrTableC" class="table table-condensed table-bordered igtable"> | |
165 <thead> | |
166 <tr> | |
167 <th>Shade</th> | |
168 <th>Marker Names</th> | |
169 <th><input type="checkbox" checked id="mrkrSelectAllC"/></th> | |
170 </tr> | |
171 </thead> | |
172 <tbody> | |
173 </tbody> | |
174 </table> | |
175 <input type="checkbox" unchecked id="displayLabelsC"/> Display values<br> | |
176 <input type="checkbox" unchecked id="displayMFIC"/> Display MFI<br><br> | |
177 <button id="changeDisplayC" class="igbtn">View per marker</button><br><br> | |
178 <div id="markerWarning" style="display:none;"> | |
179 <div class="alert alert-info alert-dismissible fade in" role="alert"> | |
180 <button type="button" class="close" data-dismiss="alert" aria-label="Close"> | |
181 <span aria-hidden="true">×</span></button> | |
182 Only 5 markers can be displayed at most. | |
183 </div> | |
184 </div> | |
185 <div id="outlierWarning"> | |
186 <div class="alert alert-info alert-dismissible fade in" role="alert"> | |
187 <button type="button" class="close" data-dismiss="alert" aria-label="Close"> | |
188 <span aria-hidden="true">×</span></button> | |
189 The number of outliers is too large to display. Representation shows randomly downsampled outliers. | |
190 </div> | |
191 </div> | |
192 </div> | |
193 | |
194 <div id="plotDivC" class="col-md-8" style="height:100%;"></div> | |
195 | |
196 <div id="popDivC" class="col-md-2" style="height:100%;"> | |
197 <button id="updateDisplayC" class="igbtn">Reset Display</button> | |
198 <table id="popTableC" class="table table-condensed table-bordered igtable"> | |
199 <thead> | |
200 <tr> | |
201 <th><input type="checkbox" checked id="popSelectAllC"/></th> | |
202 <th>Pop. Names</th> | |
203 <th>Color</th> | |
204 </tr> | |
205 </thead> | |
206 <tbody> | |
207 </tbody> | |
208 </table> | |
209 </div> | |
210 </div> | |
211 </div> | |
212 </div> | |
213 </div> | |
214 </div> | |
215 </div> | |
216 | |
217 | |
218 </div> | |
219 </div> | |
220 <script> | |
221 var poppropLoaded = false; | |
222 var stackedALoaded = false; | |
223 var pCoordLoaded = false; | |
224 var pCoordMFILoaded = false; | |
225 var boxplotLoaded = false; | |
226 | |
227 $().ready(function() { | |
228 $(document).on('shown.bs.tab','a[data-toggle="tab"]', function(e) { | |
229 var tab = e.target.getAttribute("href"); | |
230 if (tab == '#prop') { | |
231 if (poppropLoaded) { | |
232 return true; | |
233 } | |
234 poppropLoaded = true; | |
235 displayProp(); | |
236 } | |
237 if (tab == '#stackedA') { | |
238 if (stackedALoaded) { | |
239 displayPopulationLegend(configAreaplot); | |
240 updatePlot(configAreaplot); | |
241 return true; | |
242 } | |
243 stackedALoaded = true; | |
244 displayStackedAreaPlot(); | |
245 } | |
246 if (tab == '#pcoord') { | |
247 if (pCoordLoaded) { | |
248 displaySmpTable(); | |
249 displayTableGrid(); | |
250 return true; | |
251 } | |
252 pCoordLoaded = true; | |
253 displayParallelCoordinates(); | |
254 } | |
255 if (tab == '#pcoordMFI') { | |
256 if (pCoordMFILoaded) { | |
257 displayPopTablem(); | |
258 displaySmpTablem(); | |
259 displayTableGridm(); | |
260 return true; | |
261 } | |
262 pCoordMFILoaded = true; | |
263 displayParallelCoordinatesMFI(); | |
264 } | |
265 if (tab == '#boxplot') { | |
266 if (boxplotLoaded) { | |
267 displayPopulationLegend(configBoxplot); | |
268 displayMarkerTable(configBoxplot); | |
269 updateBoxplot(configBoxplot); | |
270 return true; | |
271 } | |
272 boxplotLoaded = true; | |
273 displayBoxplot(); | |
274 } | |
275 }); | |
276 | |
277 poppropLoaded = true; | |
278 displayProp(); | |
279 }); | |
280 </script> | |
281 </body> | |
282 </html> |