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