Mercurial > repos > immport-devteam > cs_overview

comparison templates/csOverview.template @ 2:a64ece32a01a draft default tip

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