Mercurial > repos > immport-devteam > flow_overview

comparison templates/genOverviewCL.template @ 1:b5453d07f740 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/flow_overview commit 65373effef15809f3db0e5f9603ef808f4110aa3"
author azomics
date Wed, 29 Jul 2020 17:03:53 -0400
parents
children
comparison
equal deleted inserted replaced
0:8283ff163ba6 1:b5453d07f740
1 <html>
2 <head>
3 <title>Flow Overview</title>
4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
5 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"/>
6 <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"/>
7 <link rel="stylesheet" type="text/css" href="js/Editor-1.5.6/css/editor.dataTables.css">
8 <link rel="stylesheet" href="css/parallelCoordinates.css"/>
9
10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
11 <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>
12 <script src="js/Editor-1.5.6/js/dataTables.editor.js" type="text/javascript"></script>
13 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
14 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js" type="text/javascript"></script>
15 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" type="text/javascript"></script>
16 <script src="https://cdn.plot.ly/plotly-1.0.0.min.js" type="text/javascript"></script>
17 <script src="js/color_palette.js" type="text/javascript"></script>
18 <script src="js/overview.js" type="text/javascript"></script>
19 <script src="js/scatter2D.js" type="text/javascript"></script>
20 <script src="js/scatter3D.js" type="text/javascript"></script>
21 <script src="js/scatterMFI.js" type="text/javascript"></script>
22 <script src="js/parallelCoordinates.js" type="text/javascript"></script>
23 <script src="js/boxplotsFlow.js" type="text/javascript"></script>
24 <script src="js/profileCLs.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
35 </style>
36 </head>
37
38 <body>
39 <div class="container-fluid">
40 <div class="row" style="padding-bottom:10px;min-height:500px;">
41 <div class="col-md-12">
42 <ul class="nav nav-tabs tabs-main">
43 <li class="homeTab active" data-value="mfi"><a href="#mfi" data-toggle="tab">MFI/Pop</a></li>
44 <li class="homeTab" data-value="overviewPlot"><a href="#overviewPlot" data-toggle="tab">Overview Plot</a></li>
45 <li class="homeTab" data-value="scatter2D"><a href="#scatter2D" data-toggle="tab">Scatter 2D</a></li>
46 <li class="homeTab" data-value="scatter3D"><a href="#scatter3D" data-toggle="tab">Scatter 3D</a></li>
47 <li class="homeTab" data-value="parallelCoordinates"><a href="#parallelCoordinates" data-toggle="tab">Parallel Coordinates</a></li>
48 <li class="homeTab" data-value="stats"><a href="#boxplots" data-toggle="tab">Summary Statistics Boxplots</a></li>
49 <li class="homeTab" data-value="clprofiles"><a href="#clprofiles" data-toggle="tab">Populations Cell Ontologies</a></li>
50 </ul>
51
52 <div class="tab-content">
53 <div class="tab-pane active" id="mfi" style="min-height:500px;">
54 <div id="mfiDiv"></div>
55 </div>
56
57 <div class="tab-pane" id="overviewPlot" style="min-height:500px;">
58 <div id="overviewPlotDiv">Overview</div>
59 </div>
60
61 <div class="tab-pane" id="scatter2D" style="min-height:500px;">
62 <div id="toolbarDiv2D" class="col-md-12 chartDiv">
63 X Axis: <select id="xAxisMarker2D" style="width:150px;">
64 </select>
65 Y Axis: <select id="yAxisMarker2D" style="width:150px;">
66 </select>
67 View: <select id="view2D" style="width:150px;">
68 <option value="1">Points + Centroids</option>
69 <option value="2">Points</option>
70 <option value="3">Centroids</option>
71 </select>
72 </div>
73 <div class="col-md-12 chartDiv">
74 <div id="scatterPlotDiv2D" class="col-md-10" style="height:100%;"></div>
75 <div id="populationDiv2D" class="col-md-2" style="height:100%;">
76 <button id="updateDisplay2D" class="igbtn">Reset Display</button>
77 <table id="populationTable2D" class="table table-condensed table-bordered igtable" border="0" width="100%">
78 <thead>
79 <tr>
80 <th align="center"><input type="checkbox" checked id="selectall2D"/></th>
81 <th>Pop. Name</th>
82 <th>Color</th>
83 <th>%</th>
84 </tr>
85 </thead>
86 <tbody>
87 </tbody>
88 </table>
89 </div>
90 </div>
91 </div>
92
93 <div class="tab-pane" id="scatter3D" style="min-height:500px;">
94 <div id="toolbarDiv3D" class="col-md-12 chartDiv">
95 X Axis: <select id="xAxisMarker3D" style="width:150px;">
96 </select>
97 Y Axis: <select id="yAxisMarker3D" style="width:150px;">
98 </select>
99 Z Axis: <select id="zAxisMarker3D" style="width:150px;">
100 </select>
101 View: <select id="view3D" style="width:150px;">
102 <option value="1">Points + Centroids</option>
103 <option value="2">Points</option>
104 <option value="3">Centroids</option>
105 </select>
106 </div>
107
108 <div class="col-md-12 chartDiv">
109 <div id="scatterPlotDiv3D" class="col-md-10" style="height:100%;"></div>
110 <div id="populationDiv3D" class="col-md-2" style="height:100%;">
111 <button id="updateDisplay3D" class="igbtn">Reset Display</button>
112 <table id="populationTable3D" class="table table-condensed table-bordered igtable" border="0" width="100%">
113 <thead>
114 <tr>
115 <th align="center"><input type="checkbox" checked id="selectall3D"/></th>
116 <th>Pop. Name</th>
117 <th>Color</th>
118 <th>%</th>
119 </tr>
120 </thead>
121 <tbody>
122 </tbody>
123 </table>
124 </div>
125 </div>
126 </div>
127 <div class="tab-pane" id="parallelCoordinates" style="min-height:500px;">
128 <div id="chartDiv">
129 <div class="row">
130 <div class="col-md-10" style="height:100%;">
131 <div id="plotDiv" style="height:50%"></div>
132 <div id="tableDiv" style="height:50%"></div>
133 </div>
134 <div id="popDiv" class="col-md-2" style="height:100%;">
135 <div class="widget">
136 <input type="range" min="0" max="1" value="0.8" step="0.01" id="pcline_opacity" >
137 </input>
138 Opacity: <span id="pcopacity">80%</span>
139 </div>
140 <button id="resetPCoordDisplay" class="igbtn">Reset Display</button>
141 <table id="popTable" class="table table-condensed table-bordered igtable">
142 <thead>
143 <tr>
144 <th><input type="checkbox" checked id="popSelectAll"/></th>
145 <th>Pop. Name</th>
146 <th>Color</th>
147 <th>%</th>
148 </tr>
149 </thead>
150 <tbody>
151 </tbody>
152 </table>
153 </div>
154 </div>
155 </div>
156 </div>
157
158 <div class="tab-pane" id="boxplots" style="min-height:500px;">
159 <div class="col-md-12 chartDiv">
160 <div id="mrkrDiv" class="col-md-2" style="height:100%;min-width:5%;">
161 <table id="mrkrTable" class="table table-condensed table-bordered igtable">
162 <thead>
163 <tr>
164 <th>Shade</th>
165 <th>Marker Names</th>
166 <th><input type="checkbox" checked id="mrkrSelectAll"/></th>
167 </tr>
168 </thead>
169 <tbody>
170 </tbody>
171 </table>
172 <input type="checkbox" unchecked id="displayLabels"/>&nbsp;Display values<br>
173 <input type="checkbox" unchecked id="displayMFI"/>&nbsp;Display MFI<br><br>
174 <button id="changeDisplay" class="igbtn">View per marker</button><br><br>
175 <div id="markerWarning" style="display:none;">
176 <div class="alert alert-info alert-dismissible fade in" role="alert">
177 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
178 <span aria-hidden="true">&times;</span></button>
179 Only 5 markers can be displayed at most.
180 </div>
181 </div>
182 <div id="outlierWarning" style="display:none;">
183 <div class="alert alert-info alert-dismissible fade in" role="alert">
184 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
185 <span aria-hidden="true">&times;</span></button>
186 The number of outliers is too large to display. Representation shows randomly downsampled outliers.
187 </div>
188 </div>
189 </div>
190
191 <div id="plotDivbp" class="col-md-8" style="height:100%;"></div>
192
193 <div id="popDivbp" class="col-md-2" style="height:100%;">
194 &nbsp;&nbsp<button id="updateDisplaybp" class="igbtn">Reset Display</button>
195 <table id="popTablebp" class="table table-condensed table-bordered igtable">
196 <thead>
197 <tr>
198 <th><input type="checkbox" checked id="popSelectAllbp"/></th>
199 <th>Pop. Names</th>
200 <th>Color</th>
201 </tr>
202 </thead>
203 <tbody>
204 </tbody>
205 </table>
206 </div>
207 </div>
208 </div>
209
210 <div class="tab-pane" id="clprofiles" style="min-height:500px;">
211 <div class="row">
212 <div id="clprof"/>
213 </div>
214 </div>
215 </div>
216 </div>
217 </div>
218 </div>
219 </div>
220
221
222 <script>
223 var mfiLoaded = false;
224 var populationLoaded = false;
225 var overviewPlotLoaded = false;
226 var scatter2DLoaded = false;
227 var scatter3DLoaded = false;
228 var parallelCoordinatesLoaded = false;
229 var clprofilesLoaded = false;
230 var bpLoaded = 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 == '#mfi') {
236 if (mfiLoaded) {
237 return true;
238 }
239 mfiLoaded = true;
240 displayMFI();
241 }
242 if (tab == '#overviewPlot') {
243 if (overviewPlotLoaded) {
244 return true;
245 }
246 overviewPlotLoaded = true;
247 displayOverviewPlot();
248 }
249 if (tab == '#scatter2D') {
250 if (scatter2DLoaded) {
251 displayScatterPopulation2D();
252 return true;
253 }
254 scatter2DLoaded = true;
255 displayScatter2D();
256 }
257 if (tab == '#scatter3D') {
258 if (scatter3DLoaded) {
259 displayScatterPopulation3D();
260 return true;
261 }
262 scatter3DLoaded = true;
263 displayScatter3D();
264 }
265 if (tab == '#parallelCoordinates') {
266 if (parallelCoordinatesLoaded) {
267 displayPopTable();
268 displayTableGrid();
269 return true;
270 }
271 parallelCoordinatesLoaded = true;
272 displayParallelCoordinates();
273 }
274 if (tab == '#boxplots') {
275 if (bpLoaded) {
276 displayPopulationLegend(configbp);
277 displayMarkerTable(configbp);
278 updateBoxplot(configbp);
279 return true;
280 }
281 bpLoaded = true;
282 displayMFIBoxplot();
283 }
284 if (tab == '#clprofiles') {
285 if (clprofilesLoaded) {
286 return true;
287 }
288 clprofilesLoaded = true;
289 displayCLTable();
290 }
291 });
292
293 mfiLoaded = true;
294 displayMFI();
295 });
296 </script>
297 </body>
298 </html>