Skip to content

Commit 94a71b6

Browse files
smcgregorsmcgregor
committed
improved look and feel
1 parent b21166c commit 94a71b6

File tree

7 files changed

+111
-31
lines changed

7 files changed

+111
-31
lines changed

‎css/index.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,3 +273,28 @@ body {
273273
.lighten {
274274
opacity: 0.5;
275275
}
276+
277+
.counts {
278+
font-weight: bold;
279+
font-size: 1.4em;
280+
}
281+
282+
.affix-panel {
283+
padding: 0px 5px 5px 0px;
284+
}
285+
286+
.text-right {
287+
margin-right: 8px;
288+
}
289+
290+
.margin {
291+
margin: 8px;
292+
}
293+
294+
.show-chart-button, .context-panel-button {
295+
margin: 2px;
296+
}
297+
298+
.affix-top {
299+
min-height: 60px;
300+
}

‎index.html‎

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@
3232
<div class="maximized-context-panel">
3333
<div class="row">
3434
<div class="col-lg-7">
35-
<button type="button" class="btn btn-sm btn-warning remove-brush">
36-
Remove Brush
35+
<button type="button" class="btn btn-sm btn-warning remove-brush context-panel-button">
36+
Remove Filter
3737
</button>
38-
<button type="button" class="btn btn-sm btn-warning hide-chart">
38+
<button type="button" class="btn btn-sm btn-warning hide-chart context-panel-button">
3939
<span class="glyphicon glyphicon-minus"></span>
4040
Hide Chart
4141
</button>
@@ -136,21 +136,40 @@ <h2>
136136
<p class="help-message"></p>
137137

138138
<!-- Affixed panel -->
139-
<div id="active-count" style="z-index:10;">
140-
<div class="panel panel-primary">
141-
<p class="comparison-warning" style="display:none;">Showing differences in values.</p>
142-
<p class="no-data-warning" style="display:none;">
143-
All data is filtered. Visualizations will stop updating until
144-
you return to the sampled space.
145-
</p>
146-
<p>
147-
&nbsp;
148-
<span class="counts displayed-state-count">0</span>
149-
rollouts displayed of
150-
<span class="counts total-state-count">0</span>
151-
&nbsp;
152-
</p>
153-
<div class="show-chart-buttons"></div>
139+
<div style="min-height:110px;">
140+
<div class="affix-panel" style="z-index:10;">
141+
<div class="panel panel-primary">
142+
<p class="comparison-warning" style="display:none;">
143+
Showing differences in values.
144+
</p>
145+
<p class="no-data-warning" style="display:none;">
146+
All data is filtered. Visualizations will stop updating until
147+
you return to the sampled space.
148+
</p>
149+
<div class="row post-getrollouts-show" style="display:none;">
150+
<div class="col-xs-9">
151+
<div class="no-filters margin">No filters.</div>
152+
<div>
153+
<button type="button" class="btn btn-warning remove-all-filters" style="display:none;">
154+
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
155+
Remove All Filters
156+
</button>
157+
</div>
158+
<div class="remove-filter-buttons"></div>
159+
<div class="show-chart-buttons"></div>
160+
</div>
161+
<div class="col-xs-3">
162+
<p class="text-right">
163+
Displaying
164+
<span class="counts displayed-state-count">0</span>
165+
rollouts of
166+
<span class="counts total-state-count">0</span>
167+
for time Step
168+
<span class="counts current-event-number">0</span>
169+
</p>
170+
</div>
171+
</div>
172+
</div>
154173
</div>
155174
</div><!-- /Affixed panel -->
156175

‎js/charts/barchart.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ function BarChart (name, units, rollouts, accessor) {
126126
if( extent[0] === extent[1] ) {
127127
that.removeBrush();
128128
} else {
129-
data.filters.addFilter(that.name, extent);
129+
data.filters.addFilter(that, extent);
130130
MDPVis.charts.updateAll();
131131
that.updateContextPanel();
132132
}

‎js/charts/fanchart.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -258,12 +258,11 @@ function FanChart(stats, name, rollouts) {
258258
extent[0][0] !== extent[1][0];
259259
if ( eventNumberChange ) {
260260
data.filters.changeFilteredTimePeriod(eventNumber);
261-
MDPVis.render.renderRollouts(data.eligiblePrimaryRollouts, data.primaryStatistics, false);
261+
MDPVis.render.renderRollouts(false);
262262
} else {
263-
var name = that.name;
264263
var newMax = extent[1][1];
265264
var newMin = extent[0][1];
266-
data.filters.addFilter(name, [newMin, newMax]);
265+
data.filters.addFilter(that, [newMin, newMax]);
267266
MDPVis.charts.updateAll();
268267
}
269268
that.updateContextPanel();

‎js/context_panel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ var contextPanel = {
9292
var node = chart.getDOMNode();
9393
$(node).fadeOut(400, function(){
9494
var button = $("<button/>", {
95-
"class": "btn btn-default",
95+
"class": "btn btn-default show-chart-button",
9696
"style": "display:none;"
9797
});
9898
button.append($("<span/>",

‎js/data.js‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,45 @@ var data = {
5555
*/
5656
changeFilteredTimePeriod: function(eventNumber) {
5757
data.filters.filteredTimePeriod = eventNumber;
58+
$(".current-event-number").text(eventNumber);
5859
data.filters.updateActiveAndStats();
5960
},
6061

6162
/**
6263
* Update a filter and update the data and statistics.
63-
* @param {string} name The name of the variable whose filter
64-
* we are updating.
64+
* @param {object} chart The chart we are filtering.
6565
* @param {object} extent A pair giving the extent of the filter.
6666
*/
67-
addFilter: function(name, extent) {
67+
addFilter: function(chart, extent) {
68+
var name = chart.name;
6869
data.filters.activeFilters[name] = [extent[0], extent[1]];
6970
data.filters.updateActiveAndStats();
71+
$(".no-filters").hide();
72+
$(".remove-all-filters").show();
73+
74+
var button = $("[data-remove-filter-button-name='" + name + "']");
75+
if( button.length > 0 ) {
76+
button.empty();
77+
} else {
78+
button = $("<button/>", {
79+
"class": "btn btn-default show-chart-button",
80+
"style": "display:none;",
81+
"data-remove-filter-button-name": name
82+
});
83+
$(".remove-filter-buttons").append(button);
84+
button.fadeIn();
85+
button.click(function(){
86+
button.fadeOut(400, function(){
87+
button.remove();
88+
});
89+
chart.removeBrush();
90+
});
91+
}
92+
button.append($("<span/>",
93+
{"class": "glyphicon glyphicon-minus"}
94+
));
95+
var displayExtent = [extent[0].toFixed(2), extent[1].toFixed(2)];
96+
button.append(name + ", [" + displayExtent + "]");
7097
},
7198

7299
/**
@@ -76,6 +103,11 @@ var data = {
76103
*/
77104
removeFilter: function(name) {
78105
delete data.filters.activeFilters[name];
106+
$("[data-remove-filter-button-name='" + name + "']").remove();
107+
if ( Object.keys( data.filters.activeFilters ).length === 0 ) {
108+
$(".no-filters").show();
109+
$(".remove-all-filters").hide();
110+
}
79111
data.filters.updateActiveAndStats();
80112
},
81113

@@ -85,8 +117,12 @@ var data = {
85117
clearFilters: function() {
86118
for( filter in data.filters.activeFilters ) {
87119
delete data.filters.activeFilters[filter];
120+
$("[data-remove-filter-button-name='" + filter + "']").remove();
88121
}
122+
$(".remove-all-filters").hide();
123+
$(".no-filters").show();
89124
data.filters.updateActiveAndStats();
125+
MDPVis.charts.updateAll();
90126
},
91127

92128
/**
@@ -189,6 +225,7 @@ var data = {
189225
statistics.expectedValue = totalReward/activeRollouts.length;
190226

191227
return statistics;
192-
},
228+
}
229+
}
193230

194-
}
231+
$(".remove-all-filters").click(data.filters.clearFilters);

‎js/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ var MDPVis = {
134134
MDPVis.updateHash();
135135

136136
// Affix the rollout count when scrolling down
137-
var countElement = $("#active-count");
137+
var countElement = $(".affix-panel");
138138
countElement
139139
.css({width: countElement.width()})
140140
.affix({
@@ -413,7 +413,7 @@ var MDPVis = {
413413
MDPVis.updateHash();
414414

415415
// Update the affix distance since its position shifted
416-
var countElement = $("#active-count");
416+
var countElement = $(".affix-panel");
417417
countElement.data('bs.affix').options.offset.top = countElement.offset().top;
418418
},
419419

@@ -478,7 +478,7 @@ var MDPVis = {
478478
MDPVis.charts.updateAllBrushPositions();
479479

480480
// Update the affix distance since its position shifted
481-
var countElement = $("#active-count");
481+
var countElement = $(".affix-panel");
482482
countElement.data('bs.affix').options.offset.top = countElement.offset().top;
483483
}
484484
},

0 commit comments

Comments
 (0)