Trackster: add histogram max to FeatureTrack preferences and make histogram max inline editable. Pack scripts as well.

This commit is contained in:
Jeremy Goecks
2012-01-30 14:59:27 -05:00
parent bf2987ce8c
commit 6af7e35118
6 changed files with 41 additions and 18 deletions
+2 -1
View File
@@ -18,7 +18,8 @@
.overview-boxback{width:100%;bottom:0px;z-index:50;position:absolute;height:14px;background:#eee;border:solid #999 1px;}
.overview-box{cursor:pointer;bottom:0px;z-index:100;position:absolute;margin-top:0px;height:14px;background:#C1C9E5 url(../images/visualization/draggable_horizontal.png) center center no-repeat;border:solid #666 1px;}
.viewport-canvas{width:100%;height:100px;}
.yaxislabel{color:#777;z-index:100;}
.yaxislabel{z-index:101;}
.yaxislabel.histogram-max{position:absolute;top:24px;left:10px;}
.line-track .track-content{border-top:1px solid #eee;border-bottom:1px solid #eee;}
.group-handle{cursor:move;float:left;background:#eee url('../images/tracks/block.png');width:12px;height:12px;}
.group{min-height:20px;border-top:2px solid #888;border-bottom:2px solid #888;}
+8 -2
View File
@@ -121,9 +121,15 @@
}
.yaxislabel {
color: #777;
z-index: 100;
/* Needs to be > canvas z-index. */
z-index: 101;
}
.yaxislabel.histogram-max {
position: absolute;
top: 24px;
left: 10px;
}
/* Line track needs borders to show range */
.line-track .track-content {
border-top: 1px solid #eee;
+5 -2
View File
@@ -345,7 +345,7 @@ function get_editable_text_elt(text, use_textarea, num_cols, num_rows, on_finish
}
// Create div for element.
var container = $("<div/>").addClass("editable-text").text(text).click(function() {
var container = $("<div/>").addClass("editable-text").text(text).click(function(e) {
// If there's already an input element, editing is active, so do nothing.
if ($(this).children(":input").length > 0) {
return;
@@ -411,7 +411,10 @@ function get_editable_text_elt(text, use_textarea, num_cols, num_rows, on_finish
}
input_elt.focus();
input_elt.select();
});
// Do not propogate to elements below b/c that blurs input and prevents it from being used.
e.stopPropagation();
});
return container;
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+24 -11
View File
@@ -4163,6 +4163,7 @@ var FeatureTrack = function(name, view, container, hda_ldda, dataset_id, prefs,
{ key: 'label_color', label: 'Label color', type: 'color', default_value: 'black' },
{ key: 'show_counts', label: 'Show summary counts', type: 'bool', default_value: true,
help: 'Show the number of items in each bin when drawing summary histogram' },
{ key: 'histogram_max', label: 'Histogram maximum', type: 'float', default_value: null, help: 'clear value to set automatically' },
{ key: 'connector_style', label: 'Connector style', type: 'select', default_value: 'fishbones',
options: [ { label: 'Line with arrows', value: 'fishbone' }, { label: 'Arcs', value: 'arcs' } ] },
{ key: 'mode', type: 'string', default_value: this.mode, hidden: true },
@@ -4268,6 +4269,26 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, {
track.update_icons();
}
}
//
// If using SummaryTree tiles, show max and make it editable.
//
this.container_div.find(".yaxislabel").remove();
var first_tile = tiles[0];
if (first_tile instanceof SummaryTreeTile) {
var
max_val = (this.prefs.histogram_max ? this.prefs.histogram_max : first_tile.max_val),
max_label =
get_editable_text_elt(max_val, false, 12, 0, function(new_val) {
var new_val = parseFloat(new_val);
track.prefs.histogram_max = (!isNaN(new_val) ? new_val : null);
track.tile_cache.clear();
track.request_draw();
})
.addClass('yaxislabel histogram-max')
.css("color", this.prefs.label_color);
this.container_div.prepend(max_label);
}
},
update_auto_mode: function( mode ) {
var mode;
@@ -4450,15 +4471,7 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, {
left_offset = this.left_offset;
// Drawing the summary tree (feature coverage histogram)
if (mode === "summary_tree" || mode === "Histogram") {
// Add label to container div showing maximum count
// TODO: this shouldn't be done at the tile level
this.container_div.find(".yaxislabel").remove();
var max_label = $("<div />").addClass('yaxislabel');
max_label.text(result.max);
max_label.css({ position: "absolute", top: "24px", left: "10px", color: this.prefs.label_color });
max_label.prependTo(this.container_div);
if (mode === "summary_tree" || mode === "Histogram") {
// Get summary tree data if necessary and set max if there is one.
if (result.dataset_type != "summary_tree") {
var st_data = this.get_summary_tree_data(result.data, tile_low, tile_high, 200);
@@ -4516,7 +4529,6 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, {
ctx.fillStyle = this.prefs.block_color;
ctx.font = ctx.canvas.manager.default_font;
ctx.textAlign = "right";
this.container_div.find(".yaxislabel").remove();
if (result.data) {
// Draw features.
@@ -4587,6 +4599,7 @@ var ReadTrack = function (name, view, container, hda_ldda, dataset_id, prefs, fi
{ key: 'show_insertions', label: 'Show insertions', type: 'bool', default_value: false },
{ key: 'show_differences', label: 'Show differences only', type: 'bool', default_value: true },
{ key: 'show_counts', label: 'Show summary counts', type: 'bool', default_value: true },
{ key: 'histogram_max', label: 'Histogram maximum', type: 'float', default_value: null, help: 'Clear value to set automatically' },
{ key: 'mode', type: 'string', default_value: this.mode, hidden: true },
],
saved_values: prefs,
@@ -4894,7 +4907,7 @@ SummaryTreePainter.prototype.draw = function(ctx, width, height, w_scale) {
var view_start = this.view_start,
view_range = this.view_end - this.view_start,
points = this.data.data,
max = this.data.max,
max = (this.prefs.histogram_max ? this.prefs.histogram_max : this.data.max),
// Set base Y so that max label and data do not overlap. Base Y is where rectangle bases
// start. However, height of each rectangle is relative to required_height; hence, the
// max rectangle is required_height.