-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.html
198 lines (174 loc) · 6.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
{% extends 'base.html' %}
{% block title %}q2-longitudinal : volatility{% endblock %}
{% block head %}
<script src="js/vega.min.js"></script>
<script src="js/vega-embed.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/spinkit.css">
{% endblock %}
{% block content %}
<div class="row">
<div class="col-lg-8">
<h3>Volatility Control Chart</h3>
<div id="plot">
<div id="loading" class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12">
<h3>Plot Controls</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12" id="toolbar"></div>
</div>
<div class="row">
<div class="col-lg-12">
Click the individual group value labels in the legend to toggle
their visibility in the displayed plot.
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6" id="group-column"></div>
<div class="col-lg-6" id="metric-column"></div>
</div>
<div class="row">
<div class="col-lg-12" id="color-scheme"></div>
</div>
<div class="row">
<div class="col-lg-3" id="toggle-error-bars"></div>
<div class="col-lg-3" id="toggle-global-mean"></div>
<div class="col-lg-6" id="toggle-global-control-limits"></div>
</div>
<div class="row">
<div class="col-lg-6" id="mean-line-thickness"></div>
<div class="col-lg-6" id="spaghetti-line-thickness"></div>
</div>
<div class="row">
<div class="col-lg-6" id="mean-line-opacity"></div>
<div class="col-lg-6" id="spaghetti-line-opacity"></div>
</div>
<div class="row">
<div class="col-lg-6" id="mean-symbol-size"></div>
<div class="col-lg-6" id="spaghetti-symbol-size"></div>
</div>
<div class="row">
<div class="col-lg-6" id="mean-symbol-opacity"></div>
<div class="col-lg-6" id="spaghetti-symbol-opacity"></div>
</div>
{% if is_feat_vol_plot %}
<div class="well">
<div class="row">
<div class="col-lg-12">
<h3 style="margin-top:0px;">Feature Stats Subplot Controls</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p>
The bar charts display descriptive statistics for all features
available in the volatility control chart. Click on a bar to view the
volatility plot for that metric. Hover over a bar to display the
metric's name and values for each available statistic. Features can
also be selected using the grey circles running along the y-axes.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<a href="feature_metadata.tsv" target="_blank" rel="noopener noreferrer" class="btn btn-default">
Export Stats as TSV
</a>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6" id="metric-stats-left"></div>
<div class="col-lg-6" id="sort-stats"></div>
</div>
<div class="row">
<div class="col-lg-6" id="metric-stats-right"></div>
<div class="col-lg-6" id="sort-stats-dir"></div>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{# TODO: move this footer into q2templates (someday) #}
{% block footer %}
{% set loading_selector = '#loading' %}
{% include 'js-error-handler.html' %}
<script id="spec" type="application/json">{{ vega_spec }}</script>
<script type="text/javascript">
$(document).ready(function() {
var spec = JSON.parse(document.getElementById('spec').innerHTML);
// Try and come up with a good initial estimate of plot dimensions,
// based on the browser dimensions.
var opts = {
width: $('#plot').width(),
};
vegaEmbed('#plot', spec, opts).then(function(result) {
result.view.logLevel(vega.Warn);
// Stash the view object in global namespace for debugging purposes.
// Check out https://vega.github.io/vega/docs/api/debugging/
// for more details.
window.v = result.view;
}).catch(function(error) {
// From 'js-error-handler.html'
handleErrors([error], $('#plot'));
});
// Clean up the vega-embed toolbar
var toolbar = $('div .vega-actions').detach();
toolbar.addClass('btn-group');
toolbar.children('a').each(function() {
// NOTE: We're just skipping this bit until we get the plot working with
// Vega 5
if(this.innerHTML == "Open in Vega Editor"){
this.remove()
return true
}
$(this).addClass('btn btn-default');
});
$('<a href="data.tsv" target="_blank" rel="noopener noreferrer" class="btn btn-default">Export as TSV</a>')
.prependTo(toolbar);
toolbar.appendTo('#toolbar');
// Util to mutate elements in-place
function cleanupEl(el, label, form_el) {
var e = $(el + ' .vega-bind');
e.children('span').replaceWith('<label>' + label + ' </label');
if (form_el !== undefined) {
e.children(form_el).addClass('form-control');
}
}
// Configuring Vega-generated bound HTML elements is less than ideal, so we
// do some manual cleanup here, dynamically. Order matters here.
cleanupEl('#group-column', 'Group column', 'select');
cleanupEl('#metric-column', 'Metric column', 'select');
cleanupEl('#color-scheme', 'Color scheme', 'select');
cleanupEl('#toggle-error-bars', 'Show error bars');
cleanupEl('#toggle-global-mean', 'Show global mean');
cleanupEl('#toggle-global-control-limits', 'Show global control limits');
$('#toggle-global-control-limits').append('<p>+/- 2x and 3x standard deviations from global mean</p>');
cleanupEl('#mean-line-thickness', 'Mean line width');
cleanupEl('#spaghetti-line-thickness', 'Spaghetti line width');
cleanupEl('#mean-line-opacity', 'Mean line opacity');
cleanupEl('#spaghetti-line-opacity', 'Spaghetti line opacity');
cleanupEl('#mean-symbol-size', 'Mean scatter size');
cleanupEl('#spaghetti-symbol-size', 'Spaghetti scatter size');
cleanupEl('#mean-symbol-opacity', 'Mean scatter opacity');
cleanupEl('#spaghetti-symbol-opacity', 'Spaghetti scatter opacity');
cleanupEl('#metric-stats-left', 'Left metric', 'select');
cleanupEl('#metric-stats-right', 'Right metric', 'select');
cleanupEl('#sort-stats', 'Sort by', 'select');
cleanupEl('#sort-stats-dir', 'Sort order', 'select');
});
</script>
{% endblock %}