Mercurial > repos > immport-devteam > flow_overview

comparison flow_overview/test-data/out1/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/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"/>&nbsp;Display values<br>
172 <input type="checkbox" unchecked id="displayMFI"/>&nbsp;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">&times;</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">&times;</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>