Mercurial > repos > immport-devteam > flow_overview

comparison templates/genOverview.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
25 <style>
26 #input{font-family:Calibri,Arial}
27 table.dataTable tbody td.dt-body-right {
28 text-align: right;
29 }
30 #div{padding:5px;width:150px;height:100px;text-align:center}
31 table{width:100%;border:0px solid;border-collapse:collapse;text-align:center;}
32 th{background-color:#3e6db0;color:#fff;padding:5px}
33
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="mfi"><a href="#mfi" data-toggle="tab">MFI/Pop</a></li>
43 <li class="homeTab" data-value="overviewPlot"><a href="#overviewPlot" data-toggle="tab">Overview Plot</a></li>
44 <li class="homeTab" data-value="scatter2D"><a href="#scatter2D" data-toggle="tab">Scatter 2D</a></li>
45 <li class="homeTab" data-value="scatter3D"><a href="#scatter3D" data-toggle="tab">Scatter 3D</a></li>
46 <li class="homeTab" data-value="parallelCoordinates"><a href="#parallelCoordinates" data-toggle="tab">Parallel Coordinates</a></li>
47 <li class="homeTab" data-value="stats"><a href="#boxplots" data-toggle="tab">Summary Statistics Boxplots</a></li>
48 </ul>
49
50 <div class="tab-content">
51 <div class="tab-pane active" id="mfi" style="min-height:500px;">
52 <div id="mfiDiv"></div>
53 </div>
54
55 <div class="tab-pane" id="overviewPlot" style="min-height:500px;">
56 <div id="overviewPlotDiv">Overview</div>
57 </div>
58
59 <div class="tab-pane" id="scatter2D" style="min-height:500px;">
60 <div id="toolbarDiv2D" class="col-md-12 chartDiv">
61 X Axis: <select id="xAxisMarker2D" style="width:150px;">
62 </select>
63 Y Axis: <select id="yAxisMarker2D" style="width:150px;">
64 </select>
65 View: <select id="view2D" style="width:150px;">
66 <option value="1">Points + Centroids</option>
67 <option value="2">Points</option>
68 <option value="3">Centroids</option>
69 </select>
70 </div>
71 <div class="col-md-12 chartDiv">
72 <div id="scatterPlotDiv2D" class="col-md-10" style="height:100%;"></div>
73 <div id="populationDiv2D" class="col-md-2" style="height:100%;">
74 <button id="updateDisplay2D" class="igbtn">Reset Display</button>
75 <table id="populationTable2D" class="table table-condensed table-bordered igtable" border="0" width="100%">
76 <thead>
77 <tr>
78 <th align="center"><input type="checkbox" checked id="selectall2D"/></th>
79 <th>Pop. Name</th>
80 <th>Color</th>
81 <th>%</th>
82 </tr>
83 </thead>
84 <tbody>
85 </tbody>
86 </table>
87 </div>
88 </div>
89 </div>
90
91 <div class="tab-pane" id="scatter3D" style="min-height:500px;">
92 <div id="toolbarDiv3D" class="col-md-12 chartDiv">
93 X Axis: <select id="xAxisMarker3D" style="width:150px;">
94 </select>
95 Y Axis: <select id="yAxisMarker3D" style="width:150px;">
96 </select>
97 Z Axis: <select id="zAxisMarker3D" style="width:150px;">
98 </select>
99 View: <select id="view3D" style="width:150px;">
100 <option value="1">Points + Centroids</option>
101 <option value="2">Points</option>
102 <option value="3">Centroids</option>
103 </select>
104 </div>
105
106 <div class="col-md-12 chartDiv">
107 <div id="scatterPlotDiv3D" class="col-md-10" style="height:100%;"></div>
108 <div id="populationDiv3D" class="col-md-2" style="height:100%;">
109 <button id="updateDisplay3D" class="igbtn">Reset Display</button>
110 <table id="populationTable3D" class="table table-condensed table-bordered igtable" border="0" width="100%">
111 <thead>
112 <tr>
113 <th align="center"><input type="checkbox" checked id="selectall3D"/></th>
114 <th>Pop. Name</th>
115 <th>Color</th>
116 <th>%</th>
117 </tr>
118 </thead>
119 <tbody>
120 </tbody>
121 </table>
122 </div>
123 </div>
124 </div>
125 <div class="tab-pane" id="parallelCoordinates" style="min-height:500px;">
126 <div id="chartDiv">
127 <div class="row">
128 <div class="col-md-10" style="height:100%;">
129 <div id="plotDiv" style="height:50%"></div>
130 <div id="tableDiv" style="height:50%"></div>
131 </div>
132 <div id="popDiv" class="col-md-2" style="height:100%;">
133 <div class="widget">
134 <input type="range" min="0" max="1" value="0.8" step="0.01" id="pcline_opacity" >
135 </input>
136 Opacity: <span id="pcopacity">80%</span>
137 </div>
138 <button id="resetPCoordDisplay" class="igbtn">Reset Display</button>
139 <table id="popTable" class="table table-condensed table-bordered igtable">
140 <thead>
141 <tr>
142 <th><input type="checkbox" checked id="popSelectAll"/></th>
143 <th>Pop. Name</th>
144 <th>Color</th>
145 <th>%</th>
146 </tr>
147 </thead>
148 <tbody>
149 </tbody>
150 </table>
151 </div>
152 </div>
153 </div>
154 </div>
155
156 <div class="tab-pane" id="boxplots" style="min-height:500px;">
157 <div class="col-md-12 chartDiv">
158 <div id="mrkrDiv" class="col-md-2" style="height:100%;min-width:5%;">
159 <table id="mrkrTable" class="table table-condensed table-bordered igtable">
160 <thead>
161 <tr>
162 <th>Shade</th>
163 <th>Marker Names</th>
164 <th><input type="checkbox" checked id="mrkrSelectAll"/></th>
165 </tr>
166 </thead>
167 <tbody>
168 </tbody>
169 </table>
170 <input type="checkbox" unchecked id="displayLabels"/>&nbsp;Display values<br>
171 <input type="checkbox" unchecked id="displayMFI"/>&nbsp;Display MFI<br><br>
172 <button id="changeDisplay" class="igbtn">View per marker</button><br><br>
173 <div id="markerWarning" style="display:none;">
174 <div class="alert alert-info alert-dismissible fade in" role="alert">
175 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
176 <span aria-hidden="true">&times;</span></button>
177 Only 5 markers can be displayed at most.
178 </div>
179 </div>
180 <div id="outlierWarning" 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 The number of outliers is too large to display. Representation shows randomly downsampled outliers.
185 </div>
186 </div>
187 </div>
188
189 <div id="plotDivbp" class="col-md-8" style="height:100%;"></div>
190
191 <div id="popDivbp" class="col-md-2" style="height:100%;">
192 <button id="updateDisplaybp" class="igbtn">Reset Display</button>
193 <table id="popTablebp" class="table table-condensed table-bordered igtable">
194 <thead>
195 <tr>
196 <th><input type="checkbox" checked id="popSelectAllbp"/></th>
197 <th>Pop. Names</th>
198 <th>Color</th>
199 </tr>
200 </thead>
201 <tbody>
202 </tbody>
203 </table>
204 </div>
205 </div>
206 </div>
207 </div>
208 </div>
209 </div>
210 </div>
211
212 <script>
213 var mfiLoaded = false;
214 var populationLoaded = false;
215 var overviewPlotLoaded = false;
216 var scatter2DLoaded = false;
217 var scatter3DLoaded = false;
218 var parallelCoordinatesLoaded = false;
219 var bpLoaded = false;
220
221 $().ready(function() {
222 $(document).on('shown.bs.tab','a[data-toggle="tab"]', function(e) {
223 var tab = e.target.getAttribute("href");
224 if (tab == '#mfi') {
225 if (mfiLoaded) {
226 return true;
227 }
228 mfiLoaded = true;
229 displayMFI();
230 }
231 if (tab == '#overviewPlot') {
232 if (overviewPlotLoaded) {
233 return true;
234 }
235 overviewPlotLoaded = true;
236 displayOverviewPlot();
237 }
238 if (tab == '#scatter2D') {
239 if (scatter2DLoaded) {
240 displayScatterPopulation2D();
241 return true;
242 }
243 scatter2DLoaded = true;
244 displayScatter2D();
245 }
246 if (tab == '#scatter3D') {
247 if (scatter3DLoaded) {
248 displayScatterPopulation3D();
249 return true;
250 }
251 scatter3DLoaded = true;
252 displayScatter3D();
253 }
254 if (tab == '#parallelCoordinates') {
255 if (parallelCoordinatesLoaded) {
256 displayPopTable();
257 displayTableGrid();
258 return true;
259 }
260 parallelCoordinatesLoaded = true;
261 displayParallelCoordinates();
262 }
263 if (tab == '#boxplots') {
264 if (bpLoaded) {
265 displayPopulationLegend(configbp);
266 displayMarkerTable(configbp);
267 updateBoxplot(configbp);
268 return true;
269 }
270 bpLoaded = true;
271 displayMFIBoxplot();
272 }
273 });
274
275 mfiLoaded = true;
276 displayMFI();
277 });
278 </script>
279 </body>
280 </html>