Mercurial > repos > immport-devteam > cs_overview

comparison test-data/out.html @ 1:bca68066a957 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
"planemo upload for repository https://github.com/ImmPortDB/immport-galaxy-tools/tree/master/flowtools/cs_overview commit 2afc7e52ba525635c05027c11f978bc76aa83e2d"
author azomics
date Wed, 20 May 2020 16:04:43 -0400
parents
children a64ece32a01a
comparison
equal deleted inserted replaced
0:8c17aa8032c2 1:bca68066a957
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 &nbsp;&nbsp;&nbsp;&nbsp;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"/>&nbsp;Display values<br>
176 <input type="checkbox" unchecked id="displayMFIC"/>&nbsp;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">&times;</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">&times;</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>