Mercurial > repos > immport-devteam > flow_overview

comparison flow_overview/test-data/out2/out.html @ 0:8283ff163ba6 draft

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