|
0
|
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"/> Display values<br>
|
|
|
175 <input type="checkbox" unchecked id="displayMFI"/> 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">×</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">×</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>
|
