- galaxy-commits - lists.galaxyproject.org

commit/galaxy-central: 3 new changesets
by Bitbucket 02 Apr '11

02 Apr '11

3 new changesets in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/0cd9402d5845/ changeset: r5327:0cd9402d5845 user: james_taylor date: 2011-04-02 20:36:52 summary: trackster: draw intron/exon structure in dense mode, also restore border top for all tracks affected #: 3 files (188 bytes) --- a/static/june_2007_style/blue/trackster.css Sat Apr 02 13:34:08 2011 -0400 +++ b/static/june_2007_style/blue/trackster.css Sat Apr 02 14:36:52 2011 -0400 @@ -22,7 +22,7 @@ .track{background:white;} .track-header{text-align:left;padding:4px 0px;color:#666;} .track-header .menubutton{margin-left:0px;} -.track-content{overflow:hidden;text-align:center;border-bottom:1px solid #bbb;background:#eee url('/static/images/tracks/diag_bg.gif');min-height:16px;} +.track-content{overflow:hidden;text-align:center;border-top:1px solid #eee;border-bottom:1px solid #eee;background:#eee url('/static/images/tracks/diag_bg.gif');min-height:16px;} .label-track .track-content{background:white;} .track-tile{background:white;} .track-tile canvas{position:relative;z-index:100;border:solid white;border-width:2px 0px 0px 0px;} --- a/static/june_2007_style/trackster.css.tmpl Sat Apr 02 13:34:08 2011 -0400 +++ b/static/june_2007_style/trackster.css.tmpl Sat Apr 02 14:36:52 2011 -0400 @@ -146,8 +146,8 @@ .track-content { overflow: hidden; text-align: center; -/* border-top: 1px solid #eee; */ - border-bottom: 1px solid #bbb; + border-top: 1px solid #eee; + border-bottom: 1px solid #eee; background: #eee url('/static/images/tracks/diag_bg.gif'); min-height: 16px; } --- a/static/scripts/trackster.js Sat Apr 02 13:34:08 2011 -0400 +++ b/static/scripts/trackster.js Sat Apr 02 14:36:52 2011 -0400 @@ -2841,7 +2841,7 @@ // Contstants specific to feature tracks moved here (HACKING, these should // basically all be configuration options) -var DENSE_TRACK_HEIGHT = 3, +var DENSE_TRACK_HEIGHT = 10, NO_DETAIL_TRACK_HEIGHT = 3, SQUISH_TRACK_HEIGHT = 5, PACK_TRACK_HEIGHT = 10, @@ -2898,11 +2898,18 @@ label_color = this.prefs.label_color; // Dense mode displays the same for all data. + /* if (mode === "Dense") { ctx.fillStyle = block_color; ctx.fillRect(f_start, y_center, f_end - f_start, DENSE_FEATURE_HEIGHT); } - else if (mode === "no_detail") { + */ + + if ( mode == "Dense" ) { + slot = 1; + } + + if (mode === "no_detail") { // No details for feature, so only one way to display. ctx.fillStyle = block_color; // TODO: what should width be here? @@ -2922,7 +2929,7 @@ // Set vars that depend on mode. var thin_height, thick_height; - if (mode === "Squish") { + if (mode === "Squish" || mode === "Dense" ) { thin_height = 1; thick_height = SQUISH_FEATURE_HEIGHT; } else { // mode === "Pack" @@ -2954,7 +2961,7 @@ // Draw whole feature as connector/intron. var cur_y_center, cur_height; - if (mode === "Squish") { + if (mode === "Squish" || mode === "Dense") { ctx.fillStyle = CONNECTOR_COLOR; cur_y_center = y_center + Math.floor(SQUISH_FEATURE_HEIGHT/2) + 1; cur_height = 1; @@ -2998,8 +3005,9 @@ block_thick_end = Math.min(block_end, thick_end); ctx.fillRect(block_thick_start, y_center + 1, block_thick_end - block_thick_start, thick_height); - if ( feature_blocks.length == 1 ) { - // Exactly one block means we have no introns, but do have a distinct "thick" region + if ( feature_blocks.length == 1 && mode == "Pack") { + // Exactly one block means we have no introns, but do have a distinct "thick" region, + // draw arrows over it if in pack mode if (feature_strand === "+") { ctx.fillStyle = ctx.canvas.manager.get_pattern( 'right_strand_inv' ); } else if (feature_strand === "-") { http://bitbucket.org/galaxy/galaxy-central/changeset/fba5ff42c4fe/ changeset: r5328:fba5ff42c4fe user: james_taylor date: 2011-04-02 20:46:42 summary: Use extend everywhere instead of $.extend affected #: 1 file (96 bytes) --- a/static/scripts/trackster.js Sat Apr 02 14:36:52 2011 -0400 +++ b/static/scripts/trackster.js Sat Apr 02 14:46:42 2011 -0400 @@ -2,6 +2,17 @@ 2010-2011: James Taylor, Kanwei Li, Jeremy Goecks */ +/** Simple extend function for inheritence */ +var extend = function() { + var target = arguments[0]; + for ( var i = 1; i < arguments.length; i++ ) { + var other = arguments[i]; + for ( key in other ) { + target[key] = other[key]; + } + } +}; + // Encapsulate -- anything to be availabe outside this block is added to exports (function(exports){ @@ -30,30 +41,30 @@ this.load_pattern( 'left_strand_inv', "/visualization/strand_left_inv.png" ); } -CanvasManager.prototype.load_pattern = function( key, path ) { - var patterns = this.patterns, - dummy_context = this.dummy_context, - image = new Image(); - // FIXME: where does image_path come from? not in browser.mako... - image.src = image_path + path; - image.onload = function() { - patterns[key] = dummy_context.createPattern( image, "repeat" ); +extend( CanvasManager.prototype, { + load_pattern: function( key, path ) { + var patterns = this.patterns, + dummy_context = this.dummy_context, + image = new Image(); + // FIXME: where does image_path come from? not in browser.mako... + image.src = image_path + path; + image.onload = function() { + patterns[key] = dummy_context.createPattern( image, "repeat" ); + } + }, + get_pattern: function( key ) { + return this.patterns[key]; + }, + new_canvas: function() { + var canvas = this.document.createElement("canvas"); + // If using excanvas in IE, we need to explicately attach the canvas + // methods to the DOM element + if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } + // Keep a reference back to the manager + canvas.manager = this; + return canvas; } -} - -CanvasManager.prototype.get_pattern = function( key ) { - return this.patterns[key]; -} - -CanvasManager.prototype.new_canvas = function() { - var canvas = this.document.createElement("canvas"); - // If using excanvas in IE, we need to explicately attach the canvas - // methods to the DOM element - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } - // Keep a reference back to the manager - canvas.manager = this; - return canvas; -} +}); /** * Draw a dashed line on a canvas using filled rectangles. This function is based on: @@ -181,7 +192,7 @@ this.num_elements = num_elements; this.clear(); }; -$.extend(Cache.prototype, { +extend(Cache.prototype, { get: function(key) { var index = this.key_ary.indexOf(key); if (index !== -1) { @@ -225,7 +236,7 @@ this.track = track; this.subset = (subset !== undefined ? subset : true); }; -$.extend(DataManager.prototype, Cache.prototype, { +extend(DataManager.prototype, Cache.prototype, { /** * Load data from server; returns AJAX object so that use of Deferred is possible. */ @@ -342,7 +353,7 @@ this.canvas_manager = new CanvasManager( container.get(0).ownerDocument ); this.reset(); }; -$.extend( View.prototype, { +extend( View.prototype, { init: function( callback ) { // Create DOM elements var parent_element = this.container, @@ -807,7 +818,7 @@ } } }; -$.extend(Tool.prototype, { +extend(Tool.prototype, { // Returns a dictionary of parameter values; key is parameter name, value // is parameter value. get_param_values_dict: function() { @@ -871,7 +882,7 @@ this.slider = null; this.slider_label = null; }; -$.extend(NumberFilter.prototype, { +extend(NumberFilter.prototype, { /** * Returns true if filter can be applied to element. */ @@ -963,7 +974,7 @@ } this.onchange = options.onchange } -$.extend( TrackConfig.prototype, { +extend( TrackConfig.prototype, { restore_values: function( values ) { var track_config = this; $.each( this.params, function( index, param ) { @@ -1094,7 +1105,7 @@ this.content_div = $("<div class='track-content'>").appendTo(this.container_div); this.parent_element.append(this.container_div); }; -$.extend(Track.prototype, { +extend(Track.prototype, { /** * Initialize and draw the track. */ @@ -1481,7 +1492,7 @@ } */ }; -$.extend(TiledTrack.prototype, Track.prototype, { +extend(TiledTrack.prototype, Track.prototype, { /** * Make popup menu for track name. */ @@ -1890,7 +1901,7 @@ Track.call( this, null, view, parent_element ); this.container_div.addClass( "label-track" ); }; -$.extend( LabelTrack.prototype, Track.prototype, { +extend( LabelTrack.prototype, Track.prototype, { draw: function() { var view = this.view, range = view.high - view.low, @@ -1930,7 +1941,7 @@ this.data_cache = new DataManager(CACHED_DATA, this, false); this.tile_cache = new Cache(CACHED_TILES_LINE); }; -$.extend(ReferenceTrack.prototype, TiledTrack.prototype, { +extend(ReferenceTrack.prototype, TiledTrack.prototype, { /** * Draw ReferenceTrack tile. */ @@ -2003,7 +2014,7 @@ this.add_resize_handle(); }; -$.extend(LineTrack.prototype, TiledTrack.prototype, { +extend(LineTrack.prototype, TiledTrack.prototype, { add_resize_handle: function () { // Add control for resizing // Trickery here to deal with the hovering drag handle, can probably be @@ -2145,7 +2156,7 @@ this.painter = LinkedFeaturePainter; }; -$.extend(FeatureTrack.prototype, TiledTrack.prototype, { +extend(FeatureTrack.prototype, TiledTrack.prototype, { update_auto_mode: function( mode ) { if ( this.mode == "Auto" ) { if ( mode == "no_detail" ) { @@ -2332,7 +2343,7 @@ this.painter = VariantPainter; }; -$.extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); +extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); var ReadTrack = function (name, view, hda_ldda, dataset_id, prefs, filters) { @@ -2360,7 +2371,7 @@ this.painter = ReadPainter; this.make_name_popup_menu(); }; -$.extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); +extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); /** * Feature track that displays data generated from tool. @@ -2376,7 +2387,7 @@ this.dataset_check_url = dataset_state_url; }; -$.extend(ToolDataFeatureTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { +extend(ToolDataFeatureTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { /** * For this track type, the predraw init sets up postdraw init. */ @@ -2414,18 +2425,6 @@ // ---- To be extracted ------------------------------------------------------ -// ---- Simple extend function for inheritence ---- - -var extend = function() { - var target = arguments[0]; - for ( var i = 1; i < arguments.length; i++ ) { - var other = arguments[i]; - for ( key in other ) { - target[key] = other[key]; - } - } -} - // ---- Feature Packing ---- /** http://bitbucket.org/galaxy/galaxy-central/changeset/60f02d9f79af/ changeset: r5329:60f02d9f79af user: james_taylor date: 2011-04-02 22:02:30 summary: trackster: everything now contained in three distinct modules using CommonJS exports/require style, more fixing coupling and global variables affected #: 1 file (568 bytes) --- a/static/scripts/trackster.js Sat Apr 02 14:46:42 2011 -0400 +++ b/static/scripts/trackster.js Sat Apr 02 16:02:30 2011 -0400 @@ -14,8 +14,11 @@ }; // Encapsulate -- anything to be availabe outside this block is added to exports -(function(exports){ +var trackster_module = function(require, exports){ +var slotting = require('slotting'), + painters = require('painters'); + // ---- Canvas management and extensions ---- /** @@ -160,7 +163,8 @@ CHAR_HEIGHT_PX = 9, // FIXME: font size may not be static ERROR_PADDING = 10, // Padding at the top of tracks for error messages SUMMARY_TREE_TOP_PADDING = CHAR_HEIGHT_PX + 2, - + // Maximum number of rows un a slotted track + MAX_FEATURE_DEPTH = 100, // Minimum width for window for squish to be used. MIN_SQUISH_VIEW_WIDTH = 12000, @@ -2100,8 +2104,8 @@ // Paint line onto full canvas var ctx = canvas.getContext("2d"); - var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, - this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); + var painter = new painters.LinePainter( result.data, tile_low, tile_low + tile_length, + this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); painter.draw( ctx, width, height ); return canvas; @@ -2154,7 +2158,7 @@ this.data_cache = new DataManager(20, this); this.left_offset = 200; - this.painter = LinkedFeaturePainter; + this.painter = painters.LinkedFeaturePainter; }; extend(FeatureTrack.prototype, TiledTrack.prototype, { update_auto_mode: function( mode ) { @@ -2182,11 +2186,11 @@ var dummy_context = this.view.canvas_manager.dummy_context, inc_slots = this.inc_slots[level]; if (!inc_slots || (inc_slots.mode !== mode)) { - inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return dummy_context.measureText( x ) } ); - inc_slots.mode = mode; + inc_slots = new (slotting.FeatureSlotter)( level, mode === "Pack", MAX_FEATURE_DEPTH, function ( x ) { return dummy_context.measureText( x ) } ); + inc_slots.mode = mode; this.inc_slots[level] = inc_slots; } - + return inc_slots.slot_features( features ); }, /** @@ -2249,7 +2253,7 @@ // Extra padding at top of summary tree canvas.height = required_height + SUMMARY_TREE_TOP_PADDING; // Paint summary tree into canvas - var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); + var painter = new painters.SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); var ctx = canvas.getContext("2d"); // Deal with left_offset by translating ctx.translate( left_offset, SUMMARY_TREE_TOP_PADDING ); @@ -2340,7 +2344,7 @@ var VcfTrack = function(name, view, hda_ldda, dataset_id, prefs, filters) { FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); this.track_type = "VcfTrack"; - this.painter = VariantPainter; + this.painter = painters.VariantPainter; }; extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); @@ -2368,7 +2372,7 @@ this.prefs = this.track_config.values; this.track_type = "ReadTrack"; - this.painter = ReadPainter; + this.painter = painters.ReadPainter; this.make_name_popup_menu(); }; extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); @@ -2419,57 +2423,19 @@ exports.FeatureTrack = FeatureTrack; exports.ReadTrack = ReadTrack; -// End encapsulation, this line is browser specific, globals are added to the -// window object -})(window); +// End trackster_module encapsulation +}; // ---- To be extracted ------------------------------------------------------ // ---- Feature Packing ---- -/** - * Compute the type of overlap between two regions. They are assumed to be on the same chrom/contig. - * The overlap is computed relative to the second region; hence, OVERLAP_START indicates that the first - * region overlaps the start (but not the end) of the second region. - */ -var NO_OVERLAP = 1001, CONTAINS = 1002, OVERLAP_START = 1003, OVERLAP_END = 1004, CONTAINED_BY = 1005; -var compute_overlap = function(first_region, second_region) { - var - first_start = first_region[0], first_end = first_region[1], - second_start = second_region[0], second_end = second_region[1], - overlap; - if (first_start < second_start) { - if (first_end < second_start) { - overlap = NO_OVERLAP; - } - else if (first_end <= second_end) { - overlap = OVERLAP_START; - } - else { // first_end > second_end - overlap = CONTAINS; - } - } - else { // first_start >= second_start - if (first_start > second_end) { - overlap = NO_OVERLAP; - } - else if (first_end <= second_end) { - overlap = CONTAINED_BY; - } - else { - overlap = OVERLAP_END; - } - } - - return overlap; -} +// Encapsulation +var slotting_module = function(require, exports) { -/** - * Returns true if there is any overlap between regions. - */ -var is_overlap = function(first_region, second_region) { - return (compute_overlap(first_region, second_region) !== NO_OVERLAP); -} +// HACK: LABEL_SPACING is currently duplicated between here and painters +var LABEL_SPACING = 2, + PACK_SPACING = 5; /** * FeatureSlotter determines slots in which to draw features for vertical @@ -2478,11 +2444,12 @@ * This implementation is incremental, any feature assigned a slot will be * retained for slotting future features. */ -var FeatureSlotter = function ( w_scale, include_label, measureText ) { +exports.FeatureSlotter = function ( w_scale, include_label, max_rows, measureText ) { this.slots = {}; this.start_end_dct = {}; this.w_scale = w_scale; this.include_label = include_label; + this.max_rows = max_rows; this.measureText = measureText; } @@ -2490,139 +2457,147 @@ * Slot a set of features, `this.slots` will be updated with slots by id, and * the largest slot required for the passed set of features is returned */ -FeatureSlotter.prototype.slot_features = function( features ) { - var w_scale = this.w_scale, inc_slots = this.slots, start_end_dct = this.start_end_dct, - undone = [], slotted = [], highest_slot = 0; +extend( exports.FeatureSlotter.prototype, { + slot_features: function( features ) { + var w_scale = this.w_scale, inc_slots = this.slots, start_end_dct = this.start_end_dct, + undone = [], slotted = [], highest_slot = 0, max_rows = this.max_rows; + + // If feature already exists in slots (from previously seen tiles), use the same slot, + // otherwise if not seen, add to "undone" list for slot calculation. - // If feature already exists in slots (from previously seen tiles), use the same slot, - // otherwise if not seen, add to "undone" list for slot calculation. + // TODO: Should calculate zoom tile index, which will improve performance + // by only having to look at a smaller subset + // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } + for (var i = 0, len = features.length; i < len; i++) { + var feature = features[i], + feature_uid = feature[0]; + if (inc_slots[feature_uid] !== undefined) { + highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); + slotted.push(inc_slots[feature_uid]); + } else { + undone.push(i); + } + } + + // Slot unslotted features. + + // Find the first slot such that current feature doesn't overlap any other features in that slot. + // Returns -1 if no slot was found. + var find_slot = function(f_start, f_end) { + // TODO: Fix constants + for (var slot_num = 0; slot_num <= max_rows; slot_num++) { + var has_overlap = false, + slot = start_end_dct[slot_num]; + if (slot !== undefined) { + // Iterate through features already in slot to see if current feature will fit. + for (var k = 0, k_len = slot.length; k < k_len; k++) { + var s_e = slot[k]; + if (f_end > s_e[0] && f_start < s_e[1]) { + // There is overlap + has_overlap = true; + break; + } + } + } + if (!has_overlap) { + return slot_num; + } + } + return -1; + }; + + // Do slotting. + for (var i = 0, len = undone.length; i < len; i++) { + var feature = features[undone[i]], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + // Where to start, end drawing on screen. + f_start = Math.floor( feature_start * w_scale ), + f_end = Math.ceil( feature_end * w_scale ), + text_len = this.measureText(feature_name).width, + text_align; + + // Update start, end drawing locations to include feature name. + // Try to put the name on the left, if not, put on right. + if (feature_name !== undefined && this.include_label ) { + // Add gap for label spacing and extra pack space padding + // TODO: Fix constants + text_len += (LABEL_SPACING + PACK_SPACING); + if (f_start - text_len >= 0) { + f_start -= text_len; + text_align = "left"; + } else { + f_end += text_len; + text_align = "right"; + } + } + + // Find slot. + var slot_num = find_slot(f_start, f_end); - // TODO: Should calculate zoom tile index, which will improve performance - // by only having to look at a smaller subset - // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } - for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i], - feature_uid = feature[0]; - if (inc_slots[feature_uid] !== undefined) { - highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); - slotted.push(inc_slots[feature_uid]); - } else { - undone.push(i); - } + /* + if (slot_num < 0) { + + TODO: this is not yet working -- + console.log(feature_uid, "looking for slot with text on the right"); + // Slot not found. If text was on left, try on right and see + // if slot can be found. + // TODO: are there any checks we need to do to ensure that text + // will fit on tile? + if (text_align === "left") { + f_start -= text_len; + f_end -= text_len; + text_align = "right"; + slot_num = find_slot(f_start, f_end); + } + if (slot_num >= 0) { + console.log(feature_uid, "found slot with text on the right"); + } + + } + */ + // Do slotting. + if (slot_num >= 0) { + // Add current feature to slot. + if (start_end_dct[slot_num] === undefined) { + start_end_dct[slot_num] = []; + } + start_end_dct[slot_num].push([f_start, f_end]); + inc_slots[feature_uid] = slot_num; + highest_slot = Math.max(highest_slot, slot_num); + } + else { + // TODO: remove this warning when skipped features are handled. + // Show warning for skipped feature. + //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + } + } + + // Debugging: view slots data. + /* + for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { + var slot = start_end_dct[i]; + if (slot !== undefined) { + console.log(i, "*************"); + for (var k = 0, k_len = slot.length; k < k_len; k++) { + console.log("\t", slot[k][0], slot[k][1]); + } + } + } + */ + return highest_slot + 1; } - - // Slot unslotted features. - - // Find the first slot such that current feature doesn't overlap any other features in that slot. - // Returns -1 if no slot was found. - var find_slot = function(f_start, f_end) { - // TODO: Fix constants - for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { - var has_overlap = false, - slot = start_end_dct[slot_num]; - if (slot !== undefined) { - // Iterate through features already in slot to see if current feature will fit. - for (var k = 0, k_len = slot.length; k < k_len; k++) { - var s_e = slot[k]; - if (f_end > s_e[0] && f_start < s_e[1]) { - // There is overlap - has_overlap = true; - break; - } - } - } - if (!has_overlap) { - return slot_num; - } - } - return -1; - }; - - // Do slotting. - for (var i = 0, len = undone.length; i < len; i++) { - var feature = features[undone[i]], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - feature_name = feature[3], - // Where to start, end drawing on screen. - f_start = Math.floor( feature_start * w_scale ), - f_end = Math.ceil( feature_end * w_scale ), - text_len = this.measureText(feature_name).width, - text_align; - - // Update start, end drawing locations to include feature name. - // Try to put the name on the left, if not, put on right. - if (feature_name !== undefined && this.include_label ) { - // Add gap for label spacing and extra pack space padding - // TODO: Fix constants - text_len += (LABEL_SPACING + PACK_SPACING); - if (f_start - text_len >= 0) { - f_start -= text_len; - text_align = "left"; - } else { - f_end += text_len; - text_align = "right"; - } - } - - // Find slot. - var slot_num = find_slot(f_start, f_end); - /* - if (slot_num < 0) { - - TODO: this is not yet working -- - console.log(feature_uid, "looking for slot with text on the right"); - // Slot not found. If text was on left, try on right and see - // if slot can be found. - // TODO: are there any checks we need to do to ensure that text - // will fit on tile? - if (text_align === "left") { - f_start -= text_len; - f_end -= text_len; - text_align = "right"; - slot_num = find_slot(f_start, f_end); - } - if (slot_num >= 0) { - console.log(feature_uid, "found slot with text on the right"); - } +}); - } - */ - // Do slotting. - if (slot_num >= 0) { - // Add current feature to slot. - if (start_end_dct[slot_num] === undefined) { - start_end_dct[slot_num] = []; - } - start_end_dct[slot_num].push([f_start, f_end]); - inc_slots[feature_uid] = slot_num; - highest_slot = Math.max(highest_slot, slot_num); - } - else { - // TODO: remove this warning when skipped features are handled. - // Show warning for skipped feature. - //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); - } - } - - // Debugging: view slots data. - /* - for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { - var slot = start_end_dct[i]; - if (slot !== undefined) { - console.log(i, "*************"); - for (var k = 0, k_len = slot.length; k < k_len; k++) { - console.log("\t", slot[k][0], slot[k][1]); - } - } - } - */ - return highest_slot + 1; -} +// End slotting_module encapsulation +}; // ---- Painters ---- +var painters_module = function(require, exports){ + /** * SummaryTreePainter, a histogram showing number of intervals in a region */ @@ -2826,9 +2801,9 @@ // Slot valid only if features are slotted and this feature is slotted; // feature may not be due to lack of space. slot = (slots && slots[feature_uid] !== undefined ? slots[feature_uid] : null); - + // Draw feature if there's overlap and mode is dense or feature is slotted (as it must be for all non-dense modes). - if (is_overlap([feature_start, feature_end], [view_start, view_end]) && (this.mode == "Dense" || slot !== null)) { + if ( ( feature_start < view_end && feature_end > view_start ) && (this.mode == "Dense" || slot !== null)) { this.draw_element(ctx, this.mode, feature, slot, view_start, view_end, w_scale, y_scale, width ); } @@ -2849,8 +2824,6 @@ SQUISH_FEATURE_HEIGHT = 3, PACK_FEATURE_HEIGHT = 9, LABEL_SPACING = 2, - PACK_SPACING = 5, - MAX_FEATURE_DEPTH = 100, CONNECTOR_COLOR = "#ccc"; var LinkedFeaturePainter = function( data, view_start, view_end, prefs, mode ) { @@ -3099,6 +3072,43 @@ } }); +/** + * Compute the type of overlap between two regions. They are assumed to be on the same chrom/contig. + * The overlap is computed relative to the second region; hence, OVERLAP_START indicates that the first + * region overlaps the start (but not the end) of the second region. + */ +var NO_OVERLAP = 1001, CONTAINS = 1002, OVERLAP_START = 1003, OVERLAP_END = 1004, CONTAINED_BY = 1005; +var compute_overlap = function(first_region, second_region) { + var + first_start = first_region[0], first_end = first_region[1], + second_start = second_region[0], second_end = second_region[1], + overlap; + if (first_start < second_start) { + if (first_end < second_start) { + overlap = NO_OVERLAP; + } + else if (first_end <= second_end) { + overlap = OVERLAP_START; + } + else { // first_end > second_end + overlap = CONTAINS; + } + } + else { // first_start >= second_start + if (first_start > second_end) { + overlap = NO_OVERLAP; + } + else if (first_end <= second_end) { + overlap = CONTAINED_BY; + } + else { + overlap = OVERLAP_END; + } + } + + return overlap; +} + var ReadPainter = function( data, view_start, view_end, prefs, mode, ref_seq ) { FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); this.ref_seq = ref_seq; @@ -3381,3 +3391,39 @@ } } }); + +exports.SummaryTreePainter = SummaryTreePainter; +exports.LinePainter = LinePainter; +exports.LinkedFeaturePainter = LinkedFeaturePainter; +exports.ReadPainter = ReadPainter; +exports.VariantPainter = VariantPainter; + +// End painters_module encapsulation +}; + +// Finally, compose and export trackster module exports into globals +// These will be replaced with require statements in CommonJS +(function(target){ + // Faking up a CommonJS like loader here, each module gets a require and + // and exports. We avoid resolution problems by just ordering carefully. + var modules = {}; + // Provide a require function + var require = function( name ) { + return modules[name]; + }; + // Run module will run the module_function provided and store in the + // require dict using key + var run_module = function( key, module_function ) { + var exports = {}; + module_function( require, exports ); + modules[key] = exports; + }; + // Run all modules + run_module( 'slotting', slotting_module ); + run_module( 'painters', painters_module ); + run_module( 'trackster', trackster_module ); + // Export trackster stuff + for ( key in modules.trackster ) { + target[key] = modules.trackster[key]; + } +})(window); \ No newline at end of file Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: 4 new changesets
by Bitbucket 02 Apr '11

02 Apr '11

4 new changesets in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/5acc2f533b87/ changeset: r5323:5acc2f533b87 user: james_taylor date: 2011-04-02 18:20:22 summary: trackster: encapsulate tracks in a closure to ensure global variables are not leaking, eliminated many global variables and moved others to the painters (where they should become configurable). Should have no globals that are shared between Tracks and Painters. Also, some drawing tweaks: thicker dense display, cleaner axis line for line tracks, when in auto mode, the actual mode is displayed in parens affected #: 1 file (841 bytes) --- a/static/scripts/trackster.js Sat Apr 02 10:05:24 2011 -0400 +++ b/static/scripts/trackster.js Sat Apr 02 12:20:22 2011 -0400 @@ -2,6 +2,59 @@ 2010-2011: James Taylor, Kanwei Li, Jeremy Goecks */ +// Encapsulate -- anything to be availabe outside this block is added to exports +(function(exports){ + +// ---- Canvas management and extensions ---- + +/** + * Canvas manager is used to create canvases, for browsers, this deals with + * backward comparibility using excanvas, as well as providing a pattern cache + */ +var CanvasManager = function( document, default_font ) { + this.document = document; + this.default_font = default_font !== undefined ? default_font : "9px Monaco, Lucida Console, monospace"; + + this.dummy_canvas = this.new_canvas(); + this.dummy_context = this.dummy_canvas.getContext('2d'); + this.dummy_context.font = this.default_font; + + this.char_width_px = this.dummy_context.measureText("A").width; + + this.patterns = {}; + + // FIXME: move somewhere to make this more general + this.load_pattern( 'right_strand', "/visualization/strand_right.png" ); + this.load_pattern( 'left_strand', "/visualization/strand_left.png" ); + this.load_pattern( 'right_strand_inv', "/visualization/strand_right_inv.png" ); + this.load_pattern( 'left_strand_inv', "/visualization/strand_left_inv.png" ); +} + +CanvasManager.prototype.load_pattern = function( key, path ) { + var patterns = this.patterns, + dummy_context = this.dummy_context, + image = new Image(); + // FIXME: where does image_path come from? not in browser.mako... + image.src = image_path + path; + image.onload = function() { + patterns[key] = dummy_context.createPattern( image, "repeat" ); + } +} + +CanvasManager.prototype.get_pattern = function( key ) { + return this.patterns[key]; +} + +CanvasManager.prototype.new_canvas = function() { + var canvas = this.document.createElement("canvas"); + // If using excanvas in IE, we need to explicately attach the canvas + // methods to the DOM element + if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } + // Keep a reference back to the manager + canvas.manager = this; + return canvas; +} + /** * Draw a dashed line on a canvas using filled rectangles. This function is based on: * http://vetruvet.blogspot.com/2010/10/drawing-dashed-lines-on-html5-canvas.h… @@ -48,10 +101,12 @@ ctx.closePath(); }; +// ---- Web UI specific utilities ---- + /** * Make `element` sortable in parent by dragging `handle` (a selector) */ -function sortable( element, handle ) { +var sortable = function( element, handle ) { element.bind( "drag", { handle: handle, relative: true }, function ( e, d ) { var parent = $(this).parent(); var children = parent.children(); @@ -77,53 +132,9 @@ } /** - * Compute the type of overlap between two regions. They are assumed to be on the same chrom/contig. - * The overlap is computed relative to the second region; hence, OVERLAP_START indicates that the first - * region overlaps the start (but not the end) of the second region. - */ -var NO_OVERLAP = 1001, CONTAINS = 1002, OVERLAP_START = 1003, OVERLAP_END = 1004, CONTAINED_BY = 1005; -function compute_overlap(first_region, second_region) { - var - first_start = first_region[0], first_end = first_region[1], - second_start = second_region[0], second_end = second_region[1], - overlap; - if (first_start < second_start) { - if (first_end < second_start) { - overlap = NO_OVERLAP; - } - else if (first_end <= second_end) { - overlap = OVERLAP_START; - } - else { // first_end > second_end - overlap = CONTAINS; - } - } - else { // first_start >= second_start - if (first_start > second_end) { - overlap = NO_OVERLAP; - } - else if (first_end <= second_end) { - overlap = CONTAINED_BY; - } - else { - overlap = OVERLAP_END; - } - } - - return overlap; -} - -/** - * Returns true if there is any overlap between regions. - */ -function is_overlap(first_region, second_region) { - return (compute_overlap(first_region, second_region) !== NO_OVERLAP); -} - -/** * Calculates step for slider with a given min, max. */ -function get_slider_step(min, max) { +var get_slider_step = function(min, max) { var range = max - min; return (range <= 1 ? 0.01 : (range <= 1000 ? 1 : 5)); } @@ -134,30 +145,20 @@ var // Drawing constants; track height is (constant) height of track, and feature height is the // height of individual features within tracks. Feature height, then, should always be less - // than track height. - DENSE_TRACK_HEIGHT = 10, - NO_DETAIL_TRACK_HEIGHT = 3, - SQUISH_TRACK_HEIGHT = 5, - PACK_TRACK_HEIGHT = 10, - NO_DETAIL_FEATURE_HEIGHT = 1, - DENSE_FEATURE_HEIGHT = 1, - SQUISH_FEATURE_HEIGHT = 3, - PACK_FEATURE_HEIGHT = 9, + // than track height. + CHAR_HEIGHT_PX = 9, // FIXME: font size may not be static ERROR_PADDING = 10, // Padding at the top of tracks for error messages - LABEL_SPACING = 2, - PACK_SPACING = 5, + SUMMARY_TREE_TOP_PADDING = CHAR_HEIGHT_PX + 2, + // Minimum width for window for squish to be used. MIN_SQUISH_VIEW_WIDTH = 12000, // Other constants. - DEFAULT_FONT = "9px Monaco, Lucida Console, monospace", DENSITY = 200, FEATURE_LEVELS = 10, - MAX_FEATURE_DEPTH = 100, DEFAULT_DATA_QUERY_WAIT = 5000, // Maximum number of chromosomes that are selectable at any one time. MAX_CHROMS_SELECTABLE = 100, - CONNECTOR_COLOR = "#ccc", DATA_ERROR = "There was an error in indexing this dataset. ", DATA_NOCONVERTER = "A converter for this dataset is not installed. Please check your datatypes_conf.xml file.", DATA_NONE = "No data for this chrom/contig.", @@ -167,41 +168,7 @@ DATA_OK = "Ready for display", CACHED_TILES_FEATURE = 10, CACHED_TILES_LINE = 5, - CACHED_DATA = 5, - DUMMY_CANVAS = document.createElement("canvas"), - RIGHT_STRAND, LEFT_STRAND; - -// Get information for rendering canvas elements. -if (window.G_vmlCanvasManager) { - G_vmlCanvasManager.initElement(DUMMY_CANVAS); -} -var - CONTEXT = DUMMY_CANVAS.getContext("2d"); -CONTEXT.font = DEFAULT_FONT; // To ensure consistent measureText width -var - CHAR_WIDTH_PX = CONTEXT.measureText("A").width, - CHAR_HEIGHT_PX = 9; // Taken from DEFAULT_FONT. - -var right_img = new Image(); -right_img.src = image_path + "/visualization/strand_right.png"; -right_img.onload = function() { - RIGHT_STRAND = CONTEXT.createPattern(right_img, "repeat"); -}; -var left_img = new Image(); -left_img.src = image_path + "/visualization/strand_left.png"; -left_img.onload = function() { - LEFT_STRAND = CONTEXT.createPattern(left_img, "repeat"); -}; -var right_img_inv = new Image(); -right_img_inv.src = image_path + "/visualization/strand_right_inv.png"; -right_img_inv.onload = function() { - RIGHT_STRAND_INV = CONTEXT.createPattern(right_img_inv, "repeat"); -}; -var left_img_inv = new Image(); -left_img_inv.src = image_path + "/visualization/strand_left_inv.png"; -left_img_inv.onload = function() { - LEFT_STRAND_INV = CONTEXT.createPattern(left_img_inv, "repeat"); -}; + CACHED_DATA = 5; function round_1000(num) { return Math.round(num * 1000) / 1000; @@ -1954,7 +1921,6 @@ view.reference_track = this; this.left_offset = 200; this.height_px = 12; - this.font = DEFAULT_FONT; this.container_div.addClass( "reference-track" ); this.content_div.css("background", "none"); this.content_div.css("min-height", "0px"); @@ -1981,7 +1947,7 @@ var ctx = canvas.getContext("2d"); canvas.width = Math.ceil( tile_length * w_scale + track.left_offset); canvas.height = track.height_px; - ctx.font = DEFAULT_FONT; + ctx.font = ctx.canvas.manager.default_font; ctx.textAlign = "center"; for (var c = 0, str_len = seq.length; c < str_len; c++) { var c_start = Math.round(c * w_scale); @@ -2171,7 +2137,6 @@ this.show_labels_scale = 0.001; this.showing_details = false; this.summary_draw_height = 30; - this.default_font = DEFAULT_FONT; this.inc_slots = {}; this.start_end_dct = {}; this.tile_cache = new Cache(CACHED_TILES_FEATURE); @@ -2181,6 +2146,16 @@ this.painter = LinkedFeaturePainter; }; $.extend(FeatureTrack.prototype, TiledTrack.prototype, { + update_auto_mode: function( mode ) { + if ( this.mode == "Auto" ) { + if ( mode == "no_detail" ) { + mode = "reduced to feature spans"; + } else if ( mode == "summary_tree" ) { + mode = "reduced to foverage histogram"; + } + this.mode_div.text( "Auto (" + mode + ")" ); + } + }, /** * Place features in slots for drawing (i.e. pack features). * this.inc_slots[level] is created in this method. this.inc_slots[level] @@ -2193,9 +2168,10 @@ // Get/create incremental slots for level. If display mode changed, // need to create new slots. - var inc_slots = this.inc_slots[level]; + var dummy_context = this.view.canvas_manager.dummy_context, + inc_slots = this.inc_slots[level]; if (!inc_slots || (inc_slots.mode !== mode)) { - inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return CONTEXT.measureText( x ) } ); + inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return dummy_context.measureText( x ) } ); inc_slots.mode = mode; this.inc_slots[level] = inc_slots; } @@ -2203,28 +2179,6 @@ return inc_slots.slot_features( features ); }, /** - * Returns y_scale based on mode. - */ - get_y_scale: function(mode) { - var y_scale; - if (mode === "summary_tree") { - // No scale needed. - } - if (mode === "Dense") { - y_scale = DENSE_TRACK_HEIGHT; - } - else if (mode === "no_detail") { - y_scale = NO_DETAIL_TRACK_HEIGHT; - } - else if (mode === "Squish") { - y_scale = SQUISH_TRACK_HEIGHT; - } - else { // mode === "Pack" - y_scale = PACK_TRACK_HEIGHT; - } - return y_scale; - }, - /** * Draw FeatureTrack tile. */ draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { @@ -2262,7 +2216,8 @@ } else { mode = "Pack"; } - } + } + this.update_auto_mode( mode ); } // Drawing the summary tree (feature coverage histogram) @@ -2281,12 +2236,12 @@ var canvas = this.view.canvas_manager.new_canvas(); canvas.width = width + left_offset; // Extra padding at top of summary tree - canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + canvas.height = required_height + SUMMARY_TREE_TOP_PADDING; // Paint summary tree into canvas var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); var ctx = canvas.getContext("2d"); // Deal with left_offset by translating - ctx.translate( left_offset, 0 ); + ctx.translate( left_offset, SUMMARY_TREE_TOP_PADDING ); painter.draw( ctx, width, required_height ); // Canvas element is returned return canvas; @@ -2336,7 +2291,7 @@ // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); var ctx = canvas.getContext("2d"); ctx.fillStyle = this.prefs.block_color; - ctx.font = this.default_font; + ctx.font = ctx.canvas.manager.default_font; ctx.textAlign = "right"; this.container_div.find(".yaxislabel").remove(); @@ -2446,6 +2401,17 @@ } }); +// Exports + +exports.View = View; +exports.LineTrack = LineTrack; +exports.FeatureTrack = FeatureTrack; +exports.ReadTrack = ReadTrack; + +// End encapsulation, this line is browser specific, globals are added to the +// window object +})(window); + // ---- To be extracted ------------------------------------------------------ // ---- Simple extend function for inheritence ---- @@ -2460,20 +2426,52 @@ } } -// ---- Canvas management ---- +// ---- Feature Packing ---- -var CanvasManager = function( document ) { - this.document = document; +/** + * Compute the type of overlap between two regions. They are assumed to be on the same chrom/contig. + * The overlap is computed relative to the second region; hence, OVERLAP_START indicates that the first + * region overlaps the start (but not the end) of the second region. + */ +var NO_OVERLAP = 1001, CONTAINS = 1002, OVERLAP_START = 1003, OVERLAP_END = 1004, CONTAINED_BY = 1005; +var compute_overlap = function(first_region, second_region) { + var + first_start = first_region[0], first_end = first_region[1], + second_start = second_region[0], second_end = second_region[1], + overlap; + if (first_start < second_start) { + if (first_end < second_start) { + overlap = NO_OVERLAP; + } + else if (first_end <= second_end) { + overlap = OVERLAP_START; + } + else { // first_end > second_end + overlap = CONTAINS; + } + } + else { // first_start >= second_start + if (first_start > second_end) { + overlap = NO_OVERLAP; + } + else if (first_end <= second_end) { + overlap = CONTAINED_BY; + } + else { + overlap = OVERLAP_END; + } + } + + return overlap; } -CanvasManager.prototype.new_canvas = function() { - var canvas = this.document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - return canvas; +/** + * Returns true if there is any overlap between regions. + */ +var is_overlap = function(first_region, second_region) { + return (compute_overlap(first_region, second_region) !== NO_OVERLAP); } -// ---- Feature Packing ---- - /** * FeatureSlotter determines slots in which to draw features for vertical * packing. @@ -2651,7 +2649,7 @@ // 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. - base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; + base_y = height; delta_x_px = Math.ceil(delta * w_scale); ctx.save(); @@ -2712,12 +2710,16 @@ // Line at 0.0 if ( mode !== "Intensity" ) { + /* ctx.beginPath(); ctx.moveTo( 0, y_zero ); ctx.lineTo( width, y_zero ); // ctx.lineWidth = 0.5; ctx.fillStyle = "#aaa"; ctx.stroke(); + */ + ctx.fillStyle = "#aaa"; + ctx.fillRect( 0, y_zero, width, 1 ); } ctx.beginPath(); @@ -2837,6 +2839,21 @@ } }); +// Contstants specific to feature tracks moved here (HACKING, these should +// basically all be configuration options) +var DENSE_TRACK_HEIGHT = 3, + NO_DETAIL_TRACK_HEIGHT = 3, + SQUISH_TRACK_HEIGHT = 5, + PACK_TRACK_HEIGHT = 10, + NO_DETAIL_FEATURE_HEIGHT = 1, + DENSE_FEATURE_HEIGHT = 3, + SQUISH_FEATURE_HEIGHT = 3, + PACK_FEATURE_HEIGHT = 9, + LABEL_SPACING = 2, + PACK_SPACING = 5, + MAX_FEATURE_DEPTH = 100, + CONNECTOR_COLOR = "#ccc"; + var LinkedFeaturePainter = function( data, view_start, view_end, prefs, mode ) { FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); } @@ -2889,7 +2906,7 @@ // No details for feature, so only one way to display. ctx.fillStyle = block_color; // TODO: what should width be here? - ctx.fillRect(f_start, y_center + 5, f_end - f_start, DENSE_FEATURE_HEIGHT); + ctx.fillRect(f_start, y_center + 5, f_end - f_start, NO_DETAIL_FEATURE_HEIGHT); } else { // Mode is either Squish or Pack: // Feature details. @@ -2918,9 +2935,9 @@ // If there are no blocks, treat the feature as one big exon. if ( feature.strand ) { if (feature.strand === "+") { - ctx.fillStyle = RIGHT_STRAND_INV; + ctx.fillStyle = ctx.canvas.manager.get_pattern( 'right_strand_inv' ); } else if (feature.strand === "-") { - ctx.fillStyle = LEFT_STRAND_INV; + ctx.fillStyle = ctx.canvas.manager.get_pattern( 'left_strand_inv' ); } } else { // No strand. @@ -2947,9 +2964,9 @@ var cur_y_center = y_center; var cur_height = thick_height; if (feature_strand === "+") { - ctx.fillStyle = RIGHT_STRAND; + ctx.fillStyle = ctx.canvas.manager.get_pattern( 'right_strand' ); } else if (feature_strand === "-") { - ctx.fillStyle = LEFT_STRAND; + ctx.fillStyle = ctx.canvas.manager.get_pattern( 'left_strand' ); } } else { @@ -3266,9 +3283,10 @@ type = item["type"]; data = item["data"]; if (type === "text") { - ctx.font = "bold " + DEFAULT_FONT; + ctx.save(); + ctx.font = "bold " + ctx.font; ctx.fillText(data[0], data[1], data[2]); - ctx.font = DEFAULT_FONT; + ctx.restore(); } else if (type == "triangle") { drawDownwardEquilateralTriangle(ctx, data[0], data[1], data[2]); http://bitbucket.org/galaxy/galaxy-central/changeset/ea3fa74b93ff/ changeset: r5324:ea3fa74b93ff user: james_taylor date: 2011-04-02 19:01:25 summary: trackster: thick region should not be drawn when thick_stat == thick_end (this indicates no thick region). Non-coding genes draw correctly now affected #: 1 file (124 bytes) --- a/static/scripts/trackster.js Sat Apr 02 12:20:22 2011 -0400 +++ b/static/scripts/trackster.js Sat Apr 02 13:01:25 2011 -0400 @@ -2992,7 +2992,8 @@ block_end - block_start, thin_height); // If block intersects with thick region, draw block as thick. - if (thick_start !== undefined && !(block_start > thick_end || block_end < thick_start) ) { + // - No thick is sometimes encoded as thick_start == thick_end, so don't draw in that case + if (thick_start !== undefined && feature_te > feature_ts && !(block_start > thick_end || block_end < thick_start) ) { var block_thick_start = Math.max(block_start, thick_start), block_thick_end = Math.min(block_end, thick_end); ctx.fillRect(block_thick_start, y_center + 1, http://bitbucket.org/galaxy/galaxy-central/changeset/b559033acfc3/ changeset: r5325:b559033acfc3 user: james_taylor date: 2011-04-02 19:02:43 summary: trackster: fixing tabs again affected #: 1 file (154 bytes) --- a/static/scripts/trackster.js Sat Apr 02 13:01:25 2011 -0400 +++ b/static/scripts/trackster.js Sat Apr 02 13:02:43 2011 -0400 @@ -32,12 +32,12 @@ CanvasManager.prototype.load_pattern = function( key, path ) { var patterns = this.patterns, - dummy_context = this.dummy_context, + dummy_context = this.dummy_context, image = new Image(); // FIXME: where does image_path come from? not in browser.mako... image.src = image_path + path; image.onload = function() { - patterns[key] = dummy_context.createPattern( image, "repeat" ); + patterns[key] = dummy_context.createPattern( image, "repeat" ); } } @@ -2147,14 +2147,14 @@ }; $.extend(FeatureTrack.prototype, TiledTrack.prototype, { update_auto_mode: function( mode ) { - if ( this.mode == "Auto" ) { - if ( mode == "no_detail" ) { - mode = "reduced to feature spans"; - } else if ( mode == "summary_tree" ) { - mode = "reduced to foverage histogram"; - } - this.mode_div.text( "Auto (" + mode + ")" ); - } + if ( this.mode == "Auto" ) { + if ( mode == "no_detail" ) { + mode = "reduced to feature spans"; + } else if ( mode == "summary_tree" ) { + mode = "reduced to foverage histogram"; + } + this.mode_div.text( "Auto (" + mode + ")" ); + } }, /** * Place features in slots for drawing (i.e. pack features). @@ -2169,7 +2169,7 @@ // need to create new slots. var dummy_context = this.view.canvas_manager.dummy_context, - inc_slots = this.inc_slots[level]; + inc_slots = this.inc_slots[level]; if (!inc_slots || (inc_slots.mode !== mode)) { inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return dummy_context.measureText( x ) } ); inc_slots.mode = mode; @@ -2217,7 +2217,7 @@ mode = "Pack"; } } - this.update_auto_mode( mode ); + this.update_auto_mode( mode ); } // Drawing the summary tree (feature coverage histogram) @@ -2710,16 +2710,16 @@ // Line at 0.0 if ( mode !== "Intensity" ) { - /* + /* ctx.beginPath(); ctx.moveTo( 0, y_zero ); ctx.lineTo( width, y_zero ); // ctx.lineWidth = 0.5; ctx.fillStyle = "#aaa"; ctx.stroke(); - */ - ctx.fillStyle = "#aaa"; - ctx.fillRect( 0, y_zero, width, 1 ); + */ + ctx.fillStyle = "#aaa"; + ctx.fillRect( 0, y_zero, width, 1 ); } ctx.beginPath(); @@ -2992,7 +2992,7 @@ block_end - block_start, thin_height); // If block intersects with thick region, draw block as thick. - // - No thick is sometimes encoded as thick_start == thick_end, so don't draw in that case + // - No thick is sometimes encoded as thick_start == thick_end, so don't draw in that case if (thick_start !== undefined && feature_te > feature_ts && !(block_start > thick_end || block_end < thick_start) ) { var block_thick_start = Math.max(block_start, thick_start), block_thick_end = Math.min(block_end, thick_end); @@ -3284,7 +3284,7 @@ type = item["type"]; data = item["data"]; if (type === "text") { - ctx.save(); + ctx.save(); ctx.font = "bold " + ctx.font; ctx.fillText(data[0], data[1], data[2]); ctx.restore(); http://bitbucket.org/galaxy/galaxy-central/changeset/7cfd76491f25/ changeset: r5326:7cfd76491f25 user: james_taylor date: 2011-04-02 19:34:08 summary: trackster: draw inverted fishbones for genes with UTRs but no introns (one block with meaningful thick region) affected #: 1 file (703 bytes) --- a/static/scripts/trackster.js Sat Apr 02 13:02:43 2011 -0400 +++ b/static/scripts/trackster.js Sat Apr 02 13:34:08 2011 -0400 @@ -2995,9 +2995,24 @@ // - No thick is sometimes encoded as thick_start == thick_end, so don't draw in that case if (thick_start !== undefined && feature_te > feature_ts && !(block_start > thick_end || block_end < thick_start) ) { var block_thick_start = Math.max(block_start, thick_start), - block_thick_end = Math.min(block_end, thick_end); + block_thick_end = Math.min(block_end, thick_end); ctx.fillRect(block_thick_start, y_center + 1, block_thick_end - block_thick_start, thick_height); + if ( feature_blocks.length == 1 ) { + // Exactly one block means we have no introns, but do have a distinct "thick" region + if (feature_strand === "+") { + ctx.fillStyle = ctx.canvas.manager.get_pattern( 'right_strand_inv' ); + } else if (feature_strand === "-") { + ctx.fillStyle = ctx.canvas.manager.get_pattern( 'left_strand_inv' ); + } + // If region is wide enough in pixels, pad a bit + if ( block_thick_start + 14 < block_thick_end ) { + block_thick_start += 2; + block_thick_end -= 2; + } + ctx.fillRect( block_thick_start, y_center + 1, + block_thick_end - block_thick_start, thick_height ); + } } } } Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: james_taylor: trackster: making extensions to CanvasRenderingContext regular functions, extending built-ins is verboten, breaks encapsulation
by Bitbucket 02 Apr '11

02 Apr '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/30f45fb80386/ changeset: r5322:30f45fb80386 user: james_taylor date: 2011-04-02 16:05:24 summary: trackster: making extensions to CanvasRenderingContext regular functions, extending built-ins is verboten, breaks encapsulation affected #: 1 file (64 bytes) --- a/static/scripts/trackster.js Fri Apr 01 18:10:47 2011 -0400 +++ b/static/scripts/trackster.js Sat Apr 02 10:05:24 2011 -0400 @@ -8,7 +8,7 @@ * However, that approach uses lines, which don't seem to render as well, so use * rectangles instead. */ -CanvasRenderingContext2D.prototype.dashedLine = function(x1, y1, x2, y2, dashLen) { +var dashedLine = function(ctx, x1, y1, x2, y2, dashLen) { if (dashLen === undefined) { dashLen = 4; } var dX = x2 - x1; var dY = y2 - y1; @@ -21,14 +21,14 @@ if (q % 2 !== 0) { continue; } - this.fillRect(x1, y1, dashLen, 1); + ctx.fillRect(x1, y1, dashLen, 1); } }; /** * Draw an isosceles triangle that points down. */ -CanvasRenderingContext2D.prototype.drawDownwardEquilateralTriangle = function(down_vertex_x, down_vertex_y, side_len) { +var drawDownwardEquilateralTriangle = function(ctx, down_vertex_x, down_vertex_y, side_len) { // Compute other two points of triangle. var x1 = down_vertex_x - side_len/2, @@ -36,16 +36,16 @@ y = down_vertex_y - Math.sqrt( side_len*3/2 ); // Draw and fill. - this.beginPath(); - this.moveTo(x1, y); - this.lineTo(x2, y); - this.lineTo(down_vertex_x, down_vertex_y); - this.lineTo(x1, y); + ctx.beginPath(); + ctx.moveTo(x1, y); + ctx.lineTo(x2, y); + ctx.lineTo(down_vertex_x, down_vertex_y); + ctx.lineTo(x1, y); - this.strokeStyle = this.fillStyle; - this.fill(); - this.stroke(); - this.closePath(); + ctx.strokeStyle = this.fillStyle; + ctx.fill(); + ctx.stroke(); + ctx.closePath(); }; /** @@ -3271,7 +3271,7 @@ ctx.font = DEFAULT_FONT; } else if (type == "triangle") { - ctx.drawDownwardEquilateralTriangle(data[0], data[1], data[2]); + drawDownwardEquilateralTriangle(ctx, data[0], data[1], data[2]); } } }, @@ -3317,7 +3317,7 @@ // Draw connector. if (b2_start > b1_end) { ctx.fillStyle = CONNECTOR_COLOR; - ctx.dashedLine(b1_end - gap, y_center + 5, b2_start - gap, y_center + 5); + dashedLine(ctx, b1_end - gap, y_center + 5, b2_start - gap, y_center + 5); } } else { // Read is single. Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: dan: Better handling of errors on rerun when grouping constructs have been added or removed.
by Bitbucket 01 Apr '11

01 Apr '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/7389f864f07f/ changeset: r5321:7389f864f07f user: dan date: 2011-04-02 00:10:47 summary: Better handling of errors on rerun when grouping constructs have been added or removed. affected #: 3 files (1.1 KB) --- a/lib/galaxy/model/__init__.py Fri Apr 01 11:36:55 2011 -0400 +++ b/lib/galaxy/model/__init__.py Fri Apr 01 18:10:47 2011 -0400 @@ -103,14 +103,14 @@ # For historical reasons state propogates down to datasets for da in self.output_datasets: da.dataset.state = state - def get_param_values( self, app ): + def get_param_values( self, app, ignore_errors=False ): """ Read encoded parameter values from the database and turn back into a dict of tool parameter values. """ param_dict = dict( [ ( p.name, p.value ) for p in self.parameters ] ) tool = app.toolbox.tools_by_id[self.tool_id] - param_dict = tool.params_from_strings( param_dict, app ) + param_dict = tool.params_from_strings( param_dict, app, ignore_errors=ignore_errors ) return param_dict def check_if_output_datasets_deleted( self ): """ --- a/lib/galaxy/tools/__init__.py Fri Apr 01 11:36:55 2011 -0400 +++ b/lib/galaxy/tools/__init__.py Fri Apr 01 18:10:47 2011 -0400 @@ -1252,7 +1252,21 @@ for input in inputs.itervalues(): # No value, insert the default if input.name not in values: - messages[ input.name ] = "No value found for '%s%s', used default" % ( prefix, input.label ) + if isinstance( input, Conditional ): + messages[ input.name ] = { input.test_param.name: "No value found for '%s%s', used default" % ( prefix, input.label ) } + test_value = input.test_param.get_initial_value( trans, context ) + current_case = input.get_current_case( test_value, trans ) + self.check_and_update_param_values_helper( input.cases[ current_case ].inputs, {}, trans, messages[ input.name ], context, prefix ) + elif isinstance( input, Repeat ): + if input.min: + messages[ input.name ] = [] + for i in range( input.min ): + rep_prefix = prefix + "%s %d > " % ( input.title, i + 1 ) + rep_dict = dict() + messages[ input.name ].append( rep_dict ) + self.check_and_update_param_values_helper( input.inputs, {}, trans, rep_dict, context, rep_prefix ) + else: + messages[ input.name ] = "No value found for '%s%s', used default" % ( prefix, input.label ) values[ input.name ] = input.get_initial_value( trans, context ) # Value, visit recursively as usual else: --- a/lib/galaxy/web/controllers/tool_runner.py Fri Apr 01 11:36:55 2011 -0400 +++ b/lib/galaxy/web/controllers/tool_runner.py Fri Apr 01 18:10:47 2011 -0400 @@ -120,7 +120,7 @@ error( "The '%s' tool does not currently support rerunning." % tool.name ) # Get the job's parameters try: - params_objects = job.get_param_values( trans.app ) + params_objects = job.get_param_values( trans.app, ignore_errors = True ) except: raise Exception( "Failed to get parameters for dataset id %d " % data.id ) upgrade_messages = tool.check_and_update_param_values( params_objects, trans ) Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: jgoecks: Do not use from_work_dir in Tophat because it causes set_metadata to fail on BAM output when run on a cluster.
by Bitbucket 01 Apr '11

01 Apr '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/41f1db323099/ changeset: r5320:41f1db323099 user: jgoecks date: 2011-04-01 17:36:55 summary: Do not use from_work_dir in Tophat because it causes set_metadata to fail on BAM output when run on a cluster. affected #: 2 files (382 bytes) --- a/tools/ngs_rna/tophat_wrapper.py Thu Mar 31 19:01:12 2011 -0400 +++ b/tools/ngs_rna/tophat_wrapper.py Fri Apr 01 11:36:55 2011 -0400 @@ -208,6 +208,10 @@ tmp_stderr.close() if returncode != 0: raise Exception, stderr + + # Copy output files from tmp directory to specified files. + shutil.copyfile( os.path.join( "tophat_out", "junctions.bed" ), options.junctions_output_file ) + shutil.copyfile( os.path.join( "tophat_out", "accepted_hits.bam" ), options.accepted_hits_output_file ) # TODO: look for errors in program output. except Exception, e: --- a/tools/ngs_rna/tophat_wrapper.xml Thu Mar 31 19:01:12 2011 -0400 +++ b/tools/ngs_rna/tophat_wrapper.xml Fri Apr 01 11:36:55 2011 -0400 @@ -397,8 +397,8 @@ ) </filter></data> - <data format="bed" name="junctions" label="${tool.name} on ${on_string}: splice junctions" from_work_dir="tophat_out/junctions.bed"/> - <data format="bam" name="accepted_hits" label="${tool.name} on ${on_string}: accepted_hits" from_work_dir="tophat_out/accepted_hits.bam"/> + <data format="bed" name="junctions" label="${tool.name} on ${on_string}: splice junctions"/> + <data format="bam" name="accepted_hits" label="${tool.name} on ${on_string}: accepted_hits"/></outputs><tests> Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: 25 new changesets
by Bitbucket 31 Mar '11

31 Mar '11

25 new changesets in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/e97dc2a4d5b8/ changeset: r5295:e97dc2a4d5b8 user: james_taylor date: 2011-03-29 02:32:43 summary: Extract feature slotting into a new class affected #: 1 file (648 bytes) --- a/static/scripts/trackster.js Thu Mar 31 11:27:49 2011 -0400 +++ b/static/scripts/trackster.js Mon Mar 28 20:32:43 2011 -0400 @@ -2236,150 +2236,18 @@ * Returns the number of slots used to pack features. */ incremental_slots: function(level, features, mode) { - // + // Get/create incremental slots for level. If display mode changed, // need to create new slots. - // + var inc_slots = this.inc_slots[level]; if (!inc_slots || (inc_slots.mode !== mode)) { - inc_slots = {}; - inc_slots.w_scale = level; + inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return CONTEXT.measureText( x ) } ); inc_slots.mode = mode; this.inc_slots[level] = inc_slots; - this.start_end_dct[level] = {}; } - - // - // If feature already exists in slots (from previously seen tiles), use the same slot, - // otherwise if not seen, add to "undone" list for slot calculation. - // - var w_scale = inc_slots.w_scale, - undone = [], slotted = [], - highest_slot = 0, // To measure how big to draw canvas - max_low = this.view.max_low; - // TODO: Should calculate zoom tile index, which will improve performance - // by only having to look at a smaller subset - // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } - for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i], - feature_uid = feature[0]; - if (inc_slots[feature_uid] !== undefined) { - highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); - slotted.push(inc_slots[feature_uid]); - } else { - undone.push(i); - } - } - - // - // Slot unslotted features. - // - var start_end_dct = this.start_end_dct[level]; - - // Find the first slot such that current feature doesn't overlap any other features in that slot. - // Returns -1 if no slot was found. - var find_slot = function(f_start, f_end) { - for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { - var has_overlap = false, - slot = start_end_dct[slot_num]; - if (slot !== undefined) { - // Iterate through features already in slot to see if current feature will fit. - for (var k = 0, k_len = slot.length; k < k_len; k++) { - var s_e = slot[k]; - if (f_end > s_e[0] && f_start < s_e[1]) { - // There is overlap - has_overlap = true; - break; - } - } - } - if (!has_overlap) { - return slot_num; - } - } - return -1; - }; - - // Do slotting. - for (var i = 0, len = undone.length; i < len; i++) { - var feature = features[undone[i]], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - feature_name = feature[3], - // Where to start, end drawing on screen. - f_start = Math.floor( (feature_start - max_low) * w_scale ), - f_end = Math.ceil( (feature_end - max_low) * w_scale ), - text_len = CONTEXT.measureText(feature_name).width, - text_align; - - // Update start, end drawing locations to include feature name. - // Try to put the name on the left, if not, put on right. - if (feature_name !== undefined && mode === "Pack") { - // Add gap for label spacing and extra pack space padding - text_len += (LABEL_SPACING + PACK_SPACING); - if (f_start - text_len >= 0) { - f_start -= text_len; - text_align = "left"; - } else { - f_end += text_len; - text_align = "right"; - } - } - - // Find slot. - var slot_num = find_slot(f_start, f_end); - /* - if (slot_num < 0) { - - TODO: this is not yet working -- - console.log(feature_uid, "looking for slot with text on the right"); - // Slot not found. If text was on left, try on right and see - // if slot can be found. - // TODO: are there any checks we need to do to ensure that text - // will fit on tile? - if (text_align === "left") { - f_start -= text_len; - f_end -= text_len; - text_align = "right"; - slot_num = find_slot(f_start, f_end); - } - if (slot_num >= 0) { - console.log(feature_uid, "found slot with text on the right"); - } - - } - */ - // Do slotting. - if (slot_num >= 0) { - // Add current feature to slot. - if (start_end_dct[slot_num] === undefined) { - start_end_dct[slot_num] = []; - } - start_end_dct[slot_num].push([f_start, f_end]); - inc_slots[feature_uid] = slot_num; - highest_slot = Math.max(highest_slot, slot_num); - } - else { - // TODO: remove this warning when skipped features are handled. - // Show warning for skipped feature. - //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); - } - } - - // Debugging: view slots data. - /* - for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { - var slot = start_end_dct[i]; - if (slot !== undefined) { - console.log(i, "*************"); - for (var k = 0, k_len = slot.length; k < k_len; k++) { - console.log("\t", slot[k][0], slot[k][1]); - } - } - } - */ - return highest_slot + 1; + + return inc_slots.slot_features( features ); }, /** * Draw summary tree on canvas. @@ -2641,7 +2509,7 @@ else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { // Calculate new slots incrementally for this new chunk of data and update height if necessary. required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; - slots = this.inc_slots[w_scale]; + slots = this.inc_slots[w_scale].slots; } // @@ -3131,4 +2999,154 @@ } }); +// ---- To be extracted ------------------------------------------------------ +/** + * FeatureSlotter determines slots in which to draw features for vertical + * packing. + * + * This implementation is incremental, any feature assigned a slot will be + * retained for slotting future features. + */ +var FeatureSlotter = function ( w_scale, include_label, measureText ) { + this.slots = {}; + this.start_end_dct = {}; + this.w_scale = w_scale; + this.include_label = include_label; + this.measureText = measureText; +} + +/** + * Slot a set of features, `this.slots` will be updated with slots by id, and + * the largest slot required for the passed set of features is returned + */ +FeatureSlotter.prototype.slot_features = function( features ) { + var w_scale = this.w_scale, inc_slots = this.slots, start_end_dct = this.start_end_dct, + undone = [], slotted = [], highest_slot = 0; + + // If feature already exists in slots (from previously seen tiles), use the same slot, + // otherwise if not seen, add to "undone" list for slot calculation. + + // TODO: Should calculate zoom tile index, which will improve performance + // by only having to look at a smaller subset + // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } + for (var i = 0, len = features.length; i < len; i++) { + var feature = features[i], + feature_uid = feature[0]; + if (inc_slots[feature_uid] !== undefined) { + highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); + slotted.push(inc_slots[feature_uid]); + } else { + undone.push(i); + } + } + + // Slot unslotted features. + + // Find the first slot such that current feature doesn't overlap any other features in that slot. + // Returns -1 if no slot was found. + var find_slot = function(f_start, f_end) { + // TODO: Fix constants + for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { + var has_overlap = false, + slot = start_end_dct[slot_num]; + if (slot !== undefined) { + // Iterate through features already in slot to see if current feature will fit. + for (var k = 0, k_len = slot.length; k < k_len; k++) { + var s_e = slot[k]; + if (f_end > s_e[0] && f_start < s_e[1]) { + // There is overlap + has_overlap = true; + break; + } + } + } + if (!has_overlap) { + return slot_num; + } + } + return -1; + }; + + // Do slotting. + for (var i = 0, len = undone.length; i < len; i++) { + var feature = features[undone[i]], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + // Where to start, end drawing on screen. + f_start = Math.floor( feature_start * w_scale ), + f_end = Math.ceil( feature_end * w_scale ), + text_len = this.measureText(feature_name).width, + text_align; + + // Update start, end drawing locations to include feature name. + // Try to put the name on the left, if not, put on right. + if (feature_name !== undefined && this.include_label ) { + // Add gap for label spacing and extra pack space padding + // TODO: Fix constants + text_len += (LABEL_SPACING + PACK_SPACING); + if (f_start - text_len >= 0) { + f_start -= text_len; + text_align = "left"; + } else { + f_end += text_len; + text_align = "right"; + } + } + + // Find slot. + var slot_num = find_slot(f_start, f_end); + /* + if (slot_num < 0) { + + TODO: this is not yet working -- + console.log(feature_uid, "looking for slot with text on the right"); + // Slot not found. If text was on left, try on right and see + // if slot can be found. + // TODO: are there any checks we need to do to ensure that text + // will fit on tile? + if (text_align === "left") { + f_start -= text_len; + f_end -= text_len; + text_align = "right"; + slot_num = find_slot(f_start, f_end); + } + if (slot_num >= 0) { + console.log(feature_uid, "found slot with text on the right"); + } + + } + */ + // Do slotting. + if (slot_num >= 0) { + // Add current feature to slot. + if (start_end_dct[slot_num] === undefined) { + start_end_dct[slot_num] = []; + } + start_end_dct[slot_num].push([f_start, f_end]); + inc_slots[feature_uid] = slot_num; + highest_slot = Math.max(highest_slot, slot_num); + } + else { + // TODO: remove this warning when skipped features are handled. + // Show warning for skipped feature. + //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + } + } + + // Debugging: view slots data. + /* + for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { + var slot = start_end_dct[i]; + if (slot !== undefined) { + console.log(i, "*************"); + for (var k = 0, k_len = slot.length; k < k_len; k++) { + console.log("\t", slot[k][0], slot[k][1]); + } + } + } + */ + return highest_slot + 1; +} http://bitbucket.org/galaxy/galaxy-central/changeset/661a4b169dd7/ changeset: r5296:661a4b169dd7 user: james_taylor date: 2011-03-29 03:35:29 summary: Extract SummaryTree painter, abstract canvas creation into CanvasManager class affected #: 1 file (627 bytes) --- a/static/scripts/trackster.js Mon Mar 28 20:32:43 2011 -0400 +++ b/static/scripts/trackster.js Mon Mar 28 21:35:29 2011 -0400 @@ -372,6 +372,7 @@ this.min_separation = 30; this.has_changes = false; this.init( callback ); + this.canvas_manager = new CanvasManager( container.get(0).ownerDocument ); this.reset(); }; $.extend( View.prototype, { @@ -1949,20 +1950,17 @@ track.content_div.css("height", "0px"); return; } - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - var ctx = canvas.get(0).getContext("2d"); - canvas.get(0).width = Math.ceil( tile_length * w_scale + track.left_offset); - canvas.get(0).height = track.height_px; + var canvas = this.view.canvas_manager.new_canvas(); + var ctx = canvas.getContext("2d"); + canvas.width = Math.ceil( tile_length * w_scale + track.left_offset); + canvas.height = track.height_px; ctx.font = DEFAULT_FONT; ctx.textAlign = "center"; for (var c = 0, str_len = seq.length; c < str_len; c++) { var c_start = Math.round(c * w_scale); ctx.fillText(seq[c], c_start + track.left_offset, 10); } - return canvas; + return $(canvas); } this.content_div.css("height", "0px"); } @@ -2253,38 +2251,17 @@ * Draw summary tree on canvas. */ draw_summary_tree: function(canvas, points, delta, max, w_scale, required_height, tile_low, left_offset) { - var - // 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. - base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; - delta_x_px = Math.ceil(delta * w_scale); + // Add label to container div when displaying summary tree mode var max_label = $("<div />").addClass('yaxislabel'); max_label.text(max); - max_label.css({ position: "absolute", top: "22px", left: "10px" }); max_label.prependTo(this.container_div); - var ctx = canvas.get(0).getContext("2d"); - for (var i = 0, len = points.length; i < len; i++) { - var x = Math.floor( (points[i][0] - tile_low) * w_scale ); - var y = points[i][1]; - - if (!y) { continue; } - var y_px = y / max * required_height; - - ctx.fillStyle = "black"; - ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); - - // Draw number count if it can fit the number with some padding, otherwise things clump up - var text_padding_req_x = 4; - if (this.prefs.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { - ctx.fillStyle = "#666"; - ctx.textAlign = "center"; - ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); - } - } + // Paint summary tree into canvas + var ctx = canvas.getContext("2d"); + var painter = new SummaryTreePainter( points, delta, max, this.prefs.show_counts ); + painter.draw( ctx, w_scale, required_height, tile_low, left_offset ); }, /** * Draw feature. @@ -2463,10 +2440,6 @@ left_offset = this.left_offset, slots, required_height; - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - // // Set mode if Auto. // @@ -2515,15 +2488,17 @@ // // Set up for drawing. // - canvas.get(0).width = width + left_offset; - canvas.get(0).height = required_height; + var canvas = this.view.canvas_manager.new_canvas(); + + canvas.width = width + left_offset; + canvas.height = required_height; if (result.dataset_type === "summary_tree") { // Increase canvas height in order to display max label. - canvas.get(0).height += LABEL_SPACING + CHAR_HEIGHT_PX; + canvas.height += LABEL_SPACING + CHAR_HEIGHT_PX; } parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); - var ctx = canvas.get(0).getContext("2d"); + var ctx = canvas.getContext("2d"); ctx.fillStyle = this.prefs.block_color; ctx.font = this.default_font; ctx.textAlign = "right"; @@ -2535,14 +2510,14 @@ if (mode === "summary_tree") { this.draw_summary_tree(canvas, result.data, result.delta, result.max, w_scale, required_height, tile_low, left_offset); - return canvas; + return $(canvas); } // // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red // to indicate region where message is applicable if (result.message) { - canvas.css({ + $(canvas).css({ "border-top": "1px solid red" }); @@ -2555,7 +2530,7 @@ // If there's no data, return. if (!result.data) { - return canvas; + return $(canvas); } } @@ -2598,7 +2573,7 @@ width, left_offset, ref_seq); } } - return canvas; + return $(canvas); } }); @@ -3001,6 +2976,20 @@ // ---- To be extracted ------------------------------------------------------ +// ---- Canvas management ---- + +var CanvasManager = function( document ) { + this.document = document; +} + +CanvasManager.prototype.new_canvas = function() { + var canvas = this.document.createElement("canvas"); + if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK + return canvas; +} + +// ---- Feature Packing ---- + /** * FeatureSlotter determines slots in which to draw features for vertical * packing. @@ -3150,3 +3139,50 @@ */ return highest_slot + 1; } + +// ---- Painters ---- + +/** + * SummaryTreePainter, a histogram showing number of intervals in a region + */ +var SummaryTreePainter = function( data, delta, max, show_counts ) { + this.data = data; + this.delta = delta; + this.max = max; + this.show_counts = show_counts; +} + +SummaryTreePainter.prototype.draw = function( ctx, w_scale, required_height, tile_low, left_offset ) { + + var + points = this.data, delta = this.delta, max = this.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. + base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + delta_x_px = Math.ceil(delta * w_scale); + + ctx.save(); + + for (var i = 0, len = points.length; i < len; i++) { + var x = Math.floor( (points[i][0] - tile_low) * w_scale ); + var y = points[i][1]; + + if (!y) { continue; } + var y_px = y / max * required_height; + + ctx.fillStyle = "black"; + ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); + + // Draw number count if it can fit the number with some padding, otherwise things clump up + var text_padding_req_x = 4; + if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { + ctx.fillStyle = "#666"; + ctx.textAlign = "center"; + ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); + } + } + + ctx.restore(); +} + http://bitbucket.org/galaxy/galaxy-central/changeset/aebefaeeda4b/ changeset: r5297:aebefaeeda4b user: james_taylor date: 2011-03-29 19:56:44 summary: Extract LinePainter from LineTrack affected #: 1 file (281 bytes) --- a/static/scripts/trackster.js Mon Mar 28 21:35:29 2011 -0400 +++ b/static/scripts/trackster.js Tue Mar 29 13:56:44 2011 -0400 @@ -2008,10 +2008,14 @@ this.height_px = this.track_config.values.height; this.vertical_range = this.track_config.values.max_value - this.track_config.values.min_value; - // Add control for resizing - // Trickery here to deal with the hovering drag handle, can probably be - // pulled out and reused. - (function( track ){ + this.add_resize_handle(); +}; +$.extend(LineTrack.prototype, TiledTrack.prototype, { + add_resize_handle: function () { + // Add control for resizing + // Trickery here to deal with the hovering drag handle, can probably be + // pulled out and reused. + var track = this; var in_handle = false; var in_drag = false; var drag_control = $( "<div class='track-resize'>" ) @@ -2039,9 +2043,7 @@ if ( ! in_handle ) { drag_control.hide(); } track.track_config.values.height = track.height_px; }).appendTo( track.container_div ); - })(this); -}; -$.extend(LineTrack.prototype, TiledTrack.prototype, { + }, predraw_init: function() { var track = this, track_id = track.view.tracks.indexOf(track); @@ -2082,99 +2084,23 @@ return; } - var track = this, - tile_low = tile_index * DENSITY * resolution, + var tile_low = tile_index * DENSITY * resolution, tile_length = DENSITY * resolution, - key = resolution + "_" + tile_index, - params = { hda_ldda: this.hda_ldda, dataset_id: this.dataset_id, resolution: this.view.resolution }; + width = Math.ceil( tile_length * w_scale ), + height = this.height_px; + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width, + canvas.height = height; - var canvas = document.createElement("canvas"), - data = result.data; - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - canvas.get(0).width = Math.ceil( tile_length * w_scale ); - canvas.get(0).height = track.height_px; - var ctx = canvas.get(0).getContext("2d"), - in_path = false, - min_value = track.prefs.min_value, - max_value = track.prefs.max_value, - vertical_range = track.vertical_range, - total_frequency = track.total_frequency, - height_px = track.height_px, - mode = track.mode; - - // Pixel position of 0 on the y axis - var y_zero = Math.round( height_px + min_value / vertical_range * height_px ); - - // Line at 0.0 - ctx.beginPath(); - ctx.moveTo( 0, y_zero ); - ctx.lineTo( tile_length * w_scale, y_zero ); - // ctx.lineWidth = 0.5; - ctx.fillStyle = "#aaa"; - ctx.stroke(); - - ctx.beginPath(); - ctx.fillStyle = track.prefs.color; - var x_scaled, y, delta_x_px; - if (data.length > 1) { - delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); - } else { - delta_x_px = 10; - } - for (var i = 0, len = data.length; i < len; i++) { - x_scaled = Math.round((data[i][0] - tile_low) * w_scale); - y = data[i][1]; - if (y === null) { - if (in_path && mode === "Filled") { - ctx.lineTo(x_scaled, height_px); - } - in_path = false; - continue; - } - if (y < min_value) { - y = min_value; - } else if (y > max_value) { - y = max_value; - } - - if (mode === "Histogram") { - // y becomes the bar height in pixels, which is the negated for canvas coords - y = Math.round( y / vertical_range * height_px ); - ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); - } else if (mode === "Intensity" ) { - y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); - ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; - ctx.fillRect(x_scaled, 0, delta_x_px, height_px); - } else { - // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); - y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); - // console.log(canvas.get(0).height, canvas.get(0).width); - if (in_path) { - ctx.lineTo(x_scaled, y); - } else { - in_path = true; - if (mode === "Filled") { - ctx.moveTo(x_scaled, height_px); - ctx.lineTo(x_scaled, y); - } else { - ctx.moveTo(x_scaled, y); - } - } - } - } - if (mode === "Filled") { - if (in_path) { - ctx.lineTo( x_scaled, y_zero ); - ctx.lineTo( 0, y_zero ); - } - ctx.fill(); - } else { - ctx.stroke(); - } - return canvas; + // Paint line onto full canvas + var ctx = canvas.getContext("2d"); + var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, + this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); + painter.draw( ctx, width, height ); + + return $(canvas); } }); @@ -3186,3 +3112,103 @@ ctx.restore(); } +var LinePainter = function( data, view_start, view_end, min_value, max_value, color, mode ) { + this.data = data; + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.min_value = min_value; + this.max_value = max_value; + this.color = color; + this.mode = mode; +} + +LinePainter.prototype.draw = function( ctx, width, height ) { + var + in_path = false, + min_value = this.min_value, + max_value = this.max_value, + vertical_range = max_value - min_value, + height_px = height, + view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range, + mode = this.mode, + data = this.data; + + ctx.save(); + + // Pixel position of 0 on the y axis + var y_zero = Math.round( height + min_value / vertical_range * height ); + + // Line at 0.0 + if ( mode !== "Intensity" ) { + ctx.beginPath(); + ctx.moveTo( 0, y_zero ); + ctx.lineTo( width, y_zero ); + // ctx.lineWidth = 0.5; + ctx.fillStyle = "#aaa"; + ctx.stroke(); + } + + ctx.beginPath(); + ctx.fillStyle = this.color; + var x_scaled, y, delta_x_px; + if (data.length > 1) { + delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); + } else { + delta_x_px = 10; + } + for (var i = 0, len = data.length; i < len; i++) { + x_scaled = Math.round((data[i][0] - view_start) * w_scale); + y = data[i][1]; + if (y === null) { + if (in_path && mode === "Filled") { + ctx.lineTo(x_scaled, height_px); + } + in_path = false; + continue; + } + if (y < min_value) { + y = min_value; + } else if (y > max_value) { + y = max_value; + } + + if (mode === "Histogram") { + // y becomes the bar height in pixels, which is the negated for canvas coords + y = Math.round( y / vertical_range * height_px ); + ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); + } else if (mode === "Intensity" ) { + y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); + ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; + ctx.fillRect(x_scaled, 0, delta_x_px, height_px); + } else { + // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); + y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); + // console.log(canvas.get(0).height, canvas.get(0).width); + if (in_path) { + ctx.lineTo(x_scaled, y); + } else { + in_path = true; + if (mode === "Filled") { + ctx.moveTo(x_scaled, height_px); + ctx.lineTo(x_scaled, y); + } else { + ctx.moveTo(x_scaled, y); + } + } + } + } + if (mode === "Filled") { + if (in_path) { + ctx.lineTo( x_scaled, y_zero ); + ctx.lineTo( 0, y_zero ); + } + ctx.fill(); + } else { + ctx.stroke(); + } + + ctx.restore(); +} \ No newline at end of file http://bitbucket.org/galaxy/galaxy-central/changeset/adc2649cb7a7/ changeset: r5298:adc2649cb7a7 user: james_taylor date: 2011-03-29 19:56:57 summary: Automated merge with https://bitbucket.org/galaxy/galaxy-central affected #: 0 files (0 bytes) http://bitbucket.org/galaxy/galaxy-central/changeset/d0f1963a9ba2/ changeset: r5299:d0f1963a9ba2 user: james_taylor date: 2011-03-30 00:40:18 summary: Streamlining feature track drawing in preparation for pulling out a Painter, cleaning up Painter interface (not quite a common interface yet) affected #: 1 file (35 bytes) --- a/static/scripts/trackster.js Tue Mar 29 13:56:57 2011 -0400 +++ b/static/scripts/trackster.js Tue Mar 29 18:40:18 2011 -0400 @@ -2174,22 +2174,6 @@ return inc_slots.slot_features( features ); }, /** - * Draw summary tree on canvas. - */ - draw_summary_tree: function(canvas, points, delta, max, w_scale, required_height, tile_low, left_offset) { - - // Add label to container div when displaying summary tree mode - var max_label = $("<div />").addClass('yaxislabel'); - max_label.text(max); - max_label.css({ position: "absolute", top: "22px", left: "10px" }); - max_label.prependTo(this.container_div); - - // Paint summary tree into canvas - var ctx = canvas.getContext("2d"); - var painter = new SummaryTreePainter( points, delta, max, this.prefs.show_counts ); - painter.draw( ctx, w_scale, required_height, tile_low, left_offset ); - }, - /** * Draw feature. */ draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset) { @@ -2350,25 +2334,18 @@ * Draw FeatureTrack tile. */ draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { - var track = this; - var tile_low = tile_index * DENSITY * resolution, + var track = this, + tile_low = tile_index * DENSITY * resolution, tile_high = ( tile_index + 1 ) * DENSITY * resolution, tile_span = tile_high - tile_low, - params = { hda_ldda: track.hda_ldda, dataset_id: track.dataset_id, - resolution: this.view.resolution, mode: this.mode }; - - // - // Create/set/compute some useful vars. - // - var width = Math.ceil( tile_span * w_scale ), + width = Math.ceil( tile_span * w_scale ), mode = this.mode, min_height = 25, left_offset = this.left_offset, - slots, required_height; + slots, + required_height; - // - // Set mode if Auto. - // + // Set display mode if Auto. if (mode === "Auto") { if (result.dataset_type === "summary_tree") { mode = result.dataset_type; @@ -2393,19 +2370,43 @@ } } } + + // Drawing the summary tree (feature coverage histogram) + if ( mode === "summary_tree" ) { + // Set height of parent_element + required_height = this.summary_draw_height; + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); + // 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: "22px", left: "10px" }); + max_label.prependTo(this.container_div); + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width + left_offset; + // Extra padding at top of summary tree + canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + // Paint summary tree into canvas + var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); + var ctx = canvas.getContext("2d"); + // Deal with left_offset by translating + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height ); + // Wrapped canvas element is returned + return $(canvas); + } + // Start dealing with row-by-row tracks + + // y_scale is the height per row var y_scale = this.get_y_scale(mode); - // // Pack reads, set required height. - // - if (mode === "summary_tree") { - required_height = this.summary_draw_height; - } if (mode === "Dense") { required_height = min_height; - } - else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { + } else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { // Calculate new slots incrementally for this new chunk of data and update height if necessary. required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; slots = this.inc_slots[w_scale].slots; @@ -2418,10 +2419,7 @@ canvas.width = width + left_offset; canvas.height = required_height; - if (result.dataset_type === "summary_tree") { - // Increase canvas height in order to display max label. - canvas.height += LABEL_SPACING + CHAR_HEIGHT_PX; - } + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); var ctx = canvas.getContext("2d"); @@ -2430,16 +2428,6 @@ ctx.textAlign = "right"; this.container_div.find(".yaxislabel").remove(); - // - // Draw summary tree. If tree is drawn, canvas is returned. - // - if (mode === "summary_tree") { - this.draw_summary_tree(canvas, result.data, result.delta, result.max, w_scale, required_height, - tile_low, left_offset); - return $(canvas); - } - - // // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red // to indicate region where message is applicable if (result.message) { @@ -3071,41 +3059,50 @@ /** * SummaryTreePainter, a histogram showing number of intervals in a region */ -var SummaryTreePainter = function( data, delta, max, show_counts ) { +var SummaryTreePainter = function( data, delta, max, view_start, view_end, show_counts ) { + // Data and data properties this.data = data; this.delta = delta; this.max = max; + // View + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs this.show_counts = show_counts; } -SummaryTreePainter.prototype.draw = function( ctx, w_scale, required_height, tile_low, left_offset ) { +SummaryTreePainter.prototype.draw = function( ctx, width, height ) { - var - points = this.data, delta = this.delta, max = this.max, + var view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range; + + var points = this.data, delta = this.delta, max = this.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. - base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; delta_x_px = Math.ceil(delta * w_scale); ctx.save(); for (var i = 0, len = points.length; i < len; i++) { - var x = Math.floor( (points[i][0] - tile_low) * w_scale ); + + var x = Math.floor( (points[i][0] - view_start) * w_scale ); var y = points[i][1]; if (!y) { continue; } - var y_px = y / max * required_height; + var y_px = y / max * height; ctx.fillStyle = "black"; - ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); + ctx.fillRect( x, base_y - y_px, delta_x_px, y_px ); // Draw number count if it can fit the number with some padding, otherwise things clump up var text_padding_req_x = 4; if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { ctx.fillStyle = "#666"; ctx.textAlign = "center"; - ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); + ctx.fillText(y, x + (delta_x_px/2), 10); } } @@ -3113,7 +3110,9 @@ } var LinePainter = function( data, view_start, view_end, min_value, max_value, color, mode ) { + // Data and data properties this.data = data; + // View this.view_start = view_start; this.view_end = view_end; // Drawing prefs http://bitbucket.org/galaxy/galaxy-central/changeset/ffc9a245604c/ changeset: r5300:ffc9a245604c user: james_taylor date: 2011-03-30 00:40:24 summary: Automated merge with https://bitbucket.org/galaxy/galaxy-central affected #: 0 files (0 bytes) http://bitbucket.org/galaxy/galaxy-central/changeset/dc34db7a3248/ changeset: r5301:dc34db7a3248 user: james_taylor date: 2011-03-30 19:01:41 summary: Automated merge with https://bitbucket.org/galaxy/galaxy-central affected #: 0 files (0 bytes) http://bitbucket.org/galaxy/galaxy-central/changeset/64774906acfc/ changeset: r5302:64774906acfc user: james_taylor date: 2011-03-30 19:09:42 summary: Fix accidently introduced tabs affected #: 1 file (1.9 KB) --- a/static/scripts/trackster.js Wed Mar 30 13:01:41 2011 -0400 +++ b/static/scripts/trackster.js Wed Mar 30 13:09:42 2011 -0400 @@ -2012,10 +2012,10 @@ }; $.extend(LineTrack.prototype, TiledTrack.prototype, { add_resize_handle: function () { - // Add control for resizing - // Trickery here to deal with the hovering drag handle, can probably be - // pulled out and reused. - var track = this; + // Add control for resizing + // Trickery here to deal with the hovering drag handle, can probably be + // pulled out and reused. + var track = this; var in_handle = false; var in_drag = false; var drag_control = $( "<div class='track-resize'>" ) @@ -2086,20 +2086,20 @@ var tile_low = tile_index * DENSITY * resolution, tile_length = DENSITY * resolution, - width = Math.ceil( tile_length * w_scale ), - height = this.height_px; + width = Math.ceil( tile_length * w_scale ), + height = this.height_px; - // Create canvas + // Create canvas var canvas = this.view.canvas_manager.new_canvas(); canvas.width = width, canvas.height = height; - // Paint line onto full canvas - var ctx = canvas.getContext("2d"); - var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, - this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); - painter.draw( ctx, width, height ); - + // Paint line onto full canvas + var ctx = canvas.getContext("2d"); + var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, + this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); + painter.draw( ctx, width, height ); + return $(canvas); } }); @@ -2170,8 +2170,8 @@ inc_slots.mode = mode; this.inc_slots[level] = inc_slots; } - - return inc_slots.slot_features( features ); + + return inc_slots.slot_features( features ); }, /** * Draw feature. @@ -2335,15 +2335,15 @@ */ draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { var track = this, - tile_low = tile_index * DENSITY * resolution, + tile_low = tile_index * DENSITY * resolution, tile_high = ( tile_index + 1 ) * DENSITY * resolution, tile_span = tile_high - tile_low, - width = Math.ceil( tile_span * w_scale ), + width = Math.ceil( tile_span * w_scale ), mode = this.mode, min_height = 25, left_offset = this.left_offset, slots, - required_height; + required_height; // Set display mode if Auto. if (mode === "Auto") { @@ -2370,37 +2370,37 @@ } } } - - // Drawing the summary tree (feature coverage histogram) - if ( mode === "summary_tree" ) { - // Set height of parent_element - required_height = this.summary_draw_height; - parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); - // 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: "22px", left: "10px" }); - max_label.prependTo(this.container_div); - // Create canvas - var canvas = this.view.canvas_manager.new_canvas(); - canvas.width = width + left_offset; - // Extra padding at top of summary tree - canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; - // Paint summary tree into canvas - var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); - var ctx = canvas.getContext("2d"); - // Deal with left_offset by translating - ctx.translate( left_offset, 0 ); - painter.draw( ctx, width, required_height ); - // Wrapped canvas element is returned - return $(canvas); - } + + // Drawing the summary tree (feature coverage histogram) + if ( mode === "summary_tree" ) { + // Set height of parent_element + required_height = this.summary_draw_height; + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); + // 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: "22px", left: "10px" }); + max_label.prependTo(this.container_div); + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width + left_offset; + // Extra padding at top of summary tree + canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + // Paint summary tree into canvas + var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); + var ctx = canvas.getContext("2d"); + // Deal with left_offset by translating + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height ); + // Wrapped canvas element is returned + return $(canvas); + } - // Start dealing with row-by-row tracks + // Start dealing with row-by-row tracks - // y_scale is the height per row + // y_scale is the height per row var y_scale = this.get_y_scale(mode); // Pack reads, set required height. @@ -2415,8 +2415,8 @@ // // Set up for drawing. // - var canvas = this.view.canvas_manager.new_canvas(); - + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width + left_offset; canvas.height = required_height; @@ -2934,14 +2934,14 @@ // by only having to look at a smaller subset // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i], - feature_uid = feature[0]; - if (inc_slots[feature_uid] !== undefined) { - highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); - slotted.push(inc_slots[feature_uid]); - } else { - undone.push(i); - } + var feature = features[i], + feature_uid = feature[0]; + if (inc_slots[feature_uid] !== undefined) { + highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); + slotted.push(inc_slots[feature_uid]); + } else { + undone.push(i); + } } // Slot unslotted features. @@ -2949,106 +2949,106 @@ // Find the first slot such that current feature doesn't overlap any other features in that slot. // Returns -1 if no slot was found. var find_slot = function(f_start, f_end) { - // TODO: Fix constants - for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { - var has_overlap = false, - slot = start_end_dct[slot_num]; - if (slot !== undefined) { - // Iterate through features already in slot to see if current feature will fit. - for (var k = 0, k_len = slot.length; k < k_len; k++) { - var s_e = slot[k]; - if (f_end > s_e[0] && f_start < s_e[1]) { - // There is overlap - has_overlap = true; - break; - } - } - } - if (!has_overlap) { - return slot_num; - } - } - return -1; + // TODO: Fix constants + for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { + var has_overlap = false, + slot = start_end_dct[slot_num]; + if (slot !== undefined) { + // Iterate through features already in slot to see if current feature will fit. + for (var k = 0, k_len = slot.length; k < k_len; k++) { + var s_e = slot[k]; + if (f_end > s_e[0] && f_start < s_e[1]) { + // There is overlap + has_overlap = true; + break; + } + } + } + if (!has_overlap) { + return slot_num; + } + } + return -1; }; // Do slotting. for (var i = 0, len = undone.length; i < len; i++) { - var feature = features[undone[i]], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - feature_name = feature[3], - // Where to start, end drawing on screen. - f_start = Math.floor( feature_start * w_scale ), - f_end = Math.ceil( feature_end * w_scale ), - text_len = this.measureText(feature_name).width, - text_align; - - // Update start, end drawing locations to include feature name. - // Try to put the name on the left, if not, put on right. - if (feature_name !== undefined && this.include_label ) { - // Add gap for label spacing and extra pack space padding - // TODO: Fix constants - text_len += (LABEL_SPACING + PACK_SPACING); - if (f_start - text_len >= 0) { - f_start -= text_len; - text_align = "left"; - } else { - f_end += text_len; - text_align = "right"; - } - } - - // Find slot. - var slot_num = find_slot(f_start, f_end); - /* - if (slot_num < 0) { - - TODO: this is not yet working -- - console.log(feature_uid, "looking for slot with text on the right"); - // Slot not found. If text was on left, try on right and see - // if slot can be found. - // TODO: are there any checks we need to do to ensure that text - // will fit on tile? - if (text_align === "left") { - f_start -= text_len; - f_end -= text_len; - text_align = "right"; - slot_num = find_slot(f_start, f_end); - } - if (slot_num >= 0) { - console.log(feature_uid, "found slot with text on the right"); - } + var feature = features[undone[i]], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + // Where to start, end drawing on screen. + f_start = Math.floor( feature_start * w_scale ), + f_end = Math.ceil( feature_end * w_scale ), + text_len = this.measureText(feature_name).width, + text_align; + + // Update start, end drawing locations to include feature name. + // Try to put the name on the left, if not, put on right. + if (feature_name !== undefined && this.include_label ) { + // Add gap for label spacing and extra pack space padding + // TODO: Fix constants + text_len += (LABEL_SPACING + PACK_SPACING); + if (f_start - text_len >= 0) { + f_start -= text_len; + text_align = "left"; + } else { + f_end += text_len; + text_align = "right"; + } + } + + // Find slot. + var slot_num = find_slot(f_start, f_end); + /* + if (slot_num < 0) { + + TODO: this is not yet working -- + console.log(feature_uid, "looking for slot with text on the right"); + // Slot not found. If text was on left, try on right and see + // if slot can be found. + // TODO: are there any checks we need to do to ensure that text + // will fit on tile? + if (text_align === "left") { + f_start -= text_len; + f_end -= text_len; + text_align = "right"; + slot_num = find_slot(f_start, f_end); + } + if (slot_num >= 0) { + console.log(feature_uid, "found slot with text on the right"); + } - } - */ - // Do slotting. - if (slot_num >= 0) { - // Add current feature to slot. - if (start_end_dct[slot_num] === undefined) { - start_end_dct[slot_num] = []; - } - start_end_dct[slot_num].push([f_start, f_end]); - inc_slots[feature_uid] = slot_num; - highest_slot = Math.max(highest_slot, slot_num); - } - else { - // TODO: remove this warning when skipped features are handled. - // Show warning for skipped feature. - //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); - } + } + */ + // Do slotting. + if (slot_num >= 0) { + // Add current feature to slot. + if (start_end_dct[slot_num] === undefined) { + start_end_dct[slot_num] = []; + } + start_end_dct[slot_num].push([f_start, f_end]); + inc_slots[feature_uid] = slot_num; + highest_slot = Math.max(highest_slot, slot_num); + } + else { + // TODO: remove this warning when skipped features are handled. + // Show warning for skipped feature. + //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + } } // Debugging: view slots data. /* for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { - var slot = start_end_dct[i]; - if (slot !== undefined) { - console.log(i, "*************"); - for (var k = 0, k_len = slot.length; k < k_len; k++) { - console.log("\t", slot[k][0], slot[k][1]); - } - } + var slot = start_end_dct[i]; + if (slot !== undefined) { + console.log(i, "*************"); + for (var k = 0, k_len = slot.length; k < k_len; k++) { + console.log("\t", slot[k][0], slot[k][1]); + } + } } */ return highest_slot + 1; @@ -3074,36 +3074,36 @@ SummaryTreePainter.prototype.draw = function( ctx, width, height ) { var view_start = this.view_start, - view_range = this.view_end - this.view_start, - w_scale = width / view_range; + view_range = this.view_end - this.view_start, + w_scale = width / view_range; var points = this.data, delta = this.delta, max = this.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. - base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; - delta_x_px = Math.ceil(delta * w_scale); + // 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. + base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; + delta_x_px = Math.ceil(delta * w_scale); ctx.save(); for (var i = 0, len = points.length; i < len; i++) { - - var x = Math.floor( (points[i][0] - view_start) * w_scale ); - var y = points[i][1]; - - if (!y) { continue; } - var y_px = y / max * height; - - ctx.fillStyle = "black"; - ctx.fillRect( x, base_y - y_px, delta_x_px, y_px ); - - // Draw number count if it can fit the number with some padding, otherwise things clump up - var text_padding_req_x = 4; - if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { - ctx.fillStyle = "#666"; - ctx.textAlign = "center"; - ctx.fillText(y, x + (delta_x_px/2), 10); - } + + var x = Math.floor( (points[i][0] - view_start) * w_scale ); + var y = points[i][1]; + + if (!y) { continue; } + var y_px = y / max * height; + + ctx.fillStyle = "black"; + ctx.fillRect( x, base_y - y_px, delta_x_px, y_px ); + + // Draw number count if it can fit the number with some padding, otherwise things clump up + var text_padding_req_x = 4; + if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { + ctx.fillStyle = "#666"; + ctx.textAlign = "center"; + ctx.fillText(y, x + (delta_x_px/2), 10); + } } ctx.restore(); @@ -3124,16 +3124,16 @@ LinePainter.prototype.draw = function( ctx, width, height ) { var - in_path = false, - min_value = this.min_value, - max_value = this.max_value, - vertical_range = max_value - min_value, - height_px = height, - view_start = this.view_start, - view_range = this.view_end - this.view_start, - w_scale = width / view_range, - mode = this.mode, - data = this.data; + in_path = false, + min_value = this.min_value, + max_value = this.max_value, + vertical_range = max_value - min_value, + height_px = height, + view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range, + mode = this.mode, + data = this.data; ctx.save(); @@ -3142,72 +3142,72 @@ // Line at 0.0 if ( mode !== "Intensity" ) { - ctx.beginPath(); - ctx.moveTo( 0, y_zero ); - ctx.lineTo( width, y_zero ); - // ctx.lineWidth = 0.5; - ctx.fillStyle = "#aaa"; - ctx.stroke(); + ctx.beginPath(); + ctx.moveTo( 0, y_zero ); + ctx.lineTo( width, y_zero ); + // ctx.lineWidth = 0.5; + ctx.fillStyle = "#aaa"; + ctx.stroke(); } ctx.beginPath(); ctx.fillStyle = this.color; var x_scaled, y, delta_x_px; if (data.length > 1) { - delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); + delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); } else { - delta_x_px = 10; + delta_x_px = 10; } for (var i = 0, len = data.length; i < len; i++) { - x_scaled = Math.round((data[i][0] - view_start) * w_scale); - y = data[i][1]; - if (y === null) { - if (in_path && mode === "Filled") { - ctx.lineTo(x_scaled, height_px); - } - in_path = false; - continue; - } - if (y < min_value) { - y = min_value; - } else if (y > max_value) { - y = max_value; - } + x_scaled = Math.round((data[i][0] - view_start) * w_scale); + y = data[i][1]; + if (y === null) { + if (in_path && mode === "Filled") { + ctx.lineTo(x_scaled, height_px); + } + in_path = false; + continue; + } + if (y < min_value) { + y = min_value; + } else if (y > max_value) { + y = max_value; + } - if (mode === "Histogram") { - // y becomes the bar height in pixels, which is the negated for canvas coords - y = Math.round( y / vertical_range * height_px ); - ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); - } else if (mode === "Intensity" ) { - y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); - ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; - ctx.fillRect(x_scaled, 0, delta_x_px, height_px); - } else { - // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); - y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); - // console.log(canvas.get(0).height, canvas.get(0).width); - if (in_path) { - ctx.lineTo(x_scaled, y); - } else { - in_path = true; - if (mode === "Filled") { - ctx.moveTo(x_scaled, height_px); - ctx.lineTo(x_scaled, y); - } else { - ctx.moveTo(x_scaled, y); - } - } - } + if (mode === "Histogram") { + // y becomes the bar height in pixels, which is the negated for canvas coords + y = Math.round( y / vertical_range * height_px ); + ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); + } else if (mode === "Intensity" ) { + y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); + ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; + ctx.fillRect(x_scaled, 0, delta_x_px, height_px); + } else { + // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); + y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); + // console.log(canvas.get(0).height, canvas.get(0).width); + if (in_path) { + ctx.lineTo(x_scaled, y); + } else { + in_path = true; + if (mode === "Filled") { + ctx.moveTo(x_scaled, height_px); + ctx.lineTo(x_scaled, y); + } else { + ctx.moveTo(x_scaled, y); + } + } + } } if (mode === "Filled") { - if (in_path) { - ctx.lineTo( x_scaled, y_zero ); - ctx.lineTo( 0, y_zero ); - } - ctx.fill(); + if (in_path) { + ctx.lineTo( x_scaled, y_zero ); + ctx.lineTo( 0, y_zero ); + } + ctx.fill(); } else { - ctx.stroke(); + ctx.stroke(); } ctx.restore(); -} \ No newline at end of file +} http://bitbucket.org/galaxy/galaxy-central/changeset/41eabf97d186/ changeset: r5303:41eabf97d186 user: james_taylor date: 2011-03-31 00:30:22 summary: Extracted feature painters for generic linked features, VCF, and reads. Not all types have been completely tested yet affected #: 1 file (3.1 KB) --- a/static/scripts/trackster.js Wed Mar 30 13:09:42 2011 -0400 +++ b/static/scripts/trackster.js Wed Mar 30 18:30:22 2011 -0400 @@ -1960,7 +1960,7 @@ var c_start = Math.round(c * w_scale); ctx.fillText(seq[c], c_start + track.left_offset, 10); } - return $(canvas); + return canvas; } this.content_div.css("height", "0px"); } @@ -2100,7 +2100,7 @@ this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); painter.draw( ctx, width, height ); - return $(canvas); + return canvas; } }); @@ -2150,6 +2150,8 @@ this.tile_cache = new Cache(CACHED_TILES_FEATURE); this.data_cache = new DataManager(20, this); this.left_offset = 200; + + this.painter = LinkedFeaturePainter; }; $.extend(FeatureTrack.prototype, TiledTrack.prototype, { /** @@ -2174,141 +2176,6 @@ return inc_slots.slot_features( features ); }, /** - * Draw feature. - */ - draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset) { - var - feature_uid = feature[0], - feature_start = feature[1], - // -1 b/c intervals are half-open. - feature_end = feature[2] - 1, - feature_name = feature[3], - f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), - f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, - thickness, y_start, thick_start = null, thick_end = null, - block_color = this.prefs.block_color, - label_color = this.prefs.label_color; - - // Dense mode displays the same for all data. - if (mode === "Dense") { - ctx.fillStyle = block_color; - ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, DENSE_FEATURE_HEIGHT); - } - else if (mode === "no_detail") { - // No details for feature, so only one way to display. - ctx.fillStyle = block_color; - // TODO: what should width be here? - ctx.fillRect(f_start + left_offset, y_center + 5, f_end - f_start, DENSE_FEATURE_HEIGHT); - } - else { // Mode is either Squish or Pack: - // Feature details. - var feature_strand = feature[4], - feature_ts = feature[5], - feature_te = feature[6], - feature_blocks = feature[7]; - - if (feature_ts && feature_te) { - thick_start = Math.floor( Math.max(0, (feature_ts - tile_low) * w_scale) ); - thick_end = Math.ceil( Math.min(width, Math.max(0, (feature_te - tile_low) * w_scale)) ); - } - - // Set vars that depend on mode. - var thin_height, thick_height; - if (mode === "Squish") { - thin_height = 1; - thick_height = SQUISH_FEATURE_HEIGHT; - } else { // mode === "Pack" - thin_height = 5; - thick_height = PACK_FEATURE_HEIGHT; - } - - // Draw feature/feature blocks + connectors. - if (!feature_blocks) { - // If there are no blocks, treat the feature as one big exon. - if ( feature.strand ) { - if (feature.strand === "+") { - ctx.fillStyle = RIGHT_STRAND_INV; - } else if (feature.strand === "-") { - ctx.fillStyle = LEFT_STRAND_INV; - } - } - else { // No strand. - ctx.fillStyle = block_color; - } - ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, thick_height); - } else { - // There are feature blocks and mode is either Squish or Pack. - // - // Approach: (a) draw whole feature as connector/intron and (b) draw blocks as - // needed. This ensures that whole feature, regardless of whether it starts with - // a block, is visible. - // - - // Draw whole feature as connector/intron. - var cur_y_center, cur_height; - if (mode === "Squish") { - ctx.fillStyle = CONNECTOR_COLOR; - cur_y_center = y_center + Math.floor(SQUISH_FEATURE_HEIGHT/2) + 1; - cur_height = 1; - } - else { // mode === "Pack" - if (feature_strand) { - var cur_y_center = y_center; - var cur_height = thick_height; - if (feature_strand === "+") { - ctx.fillStyle = RIGHT_STRAND; - } else if (feature_strand === "-") { - ctx.fillStyle = LEFT_STRAND; - } - } - else { - ctx.fillStyle = CONNECTOR_COLOR; - cur_y_center += (SQUISH_FEATURE_HEIGHT/2) + 1; - cur_height = 1; - } - } - ctx.fillRect(f_start + left_offset, cur_y_center, f_end - f_start, cur_height); - - for (var k = 0, k_len = feature_blocks.length; k < k_len; k++) { - var block = feature_blocks[k], - block_start = Math.floor( Math.max(0, (block[0] - tile_low) * w_scale) ), - // -1 b/c intervals are half-open. - block_end = Math.ceil( Math.min(width, Math.max((block[1] - 1 - tile_low) * w_scale)) ); - - // Skip drawing if block not on tile. - if (block_start > block_end) { continue; } - - // Draw thin block. - ctx.fillStyle = block_color; - ctx.fillRect(block_start + left_offset, y_center + (thick_height-thin_height)/2 + 1, - block_end - block_start, thin_height); - - // If block intersects with thick region, draw block as thick. - if (thick_start !== undefined && !(block_start > thick_end || block_end < thick_start) ) { - var block_thick_start = Math.max(block_start, thick_start), - block_thick_end = Math.min(block_end, thick_end); - ctx.fillRect(block_thick_start + left_offset, y_center + 1, - block_thick_end - block_thick_start, thick_height); - } - } - } - - // Draw label for Pack mode. - if (mode === "Pack" && feature_start > tile_low) { - ctx.fillStyle = label_color; - if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { - ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING, y_center + 8); - } else { - ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING, y_center + 8); - } - ctx.fillStyle = block_color; - } - } - }, - /** * Returns y_scale based on mode. */ get_y_scale: function(mode) { @@ -2394,27 +2261,44 @@ // Deal with left_offset by translating ctx.translate( left_offset, 0 ); painter.draw( ctx, width, required_height ); - // Wrapped canvas element is returned - return $(canvas); + // Canvas element is returned + return canvas; } // Start dealing with row-by-row tracks - - // y_scale is the height per row - var y_scale = this.get_y_scale(mode); - - // Pack reads, set required height. - if (mode === "Dense") { - required_height = min_height; - } else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { - // Calculate new slots incrementally for this new chunk of data and update height if necessary. - required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; + + // If working with a mode where slotting is neccesary, update the incremental slotting + var slots, slots_required = 1; + if ( mode === "no_detail" || mode === "Squish" || mode === "Pack" ) { + slots_required = this.incremental_slots(w_scale, result.data, mode); slots = this.inc_slots[w_scale].slots; } + + // Filter features + var filtered = []; + if ( result.data ) { + for (var i = 0, len = result.data.length; i < len; i++) { + var feature = result.data[i]; + var hide_feature = false; + var filter; + for (var f = 0, flen = this.filters.length; f < flen; f++) { + filter = this.filters[f]; + filter.update_attrs(feature); + if (!filter.keep(feature)) { + hide_feature = true; + break; + } + } + if (!hide_feature) { + filtered.push( feature ); + } + } + } - // - // Set up for drawing. - // + // Create painter, and canvas of sufficient size to contain all features + // HACK: ref_seq will only be defined for ReadTracks, and only the ReadPainter accepts that argument + var painter = new (this.painter)( filtered, tile_low, tile_high, this.prefs, mode, ref_seq ); + var required_height = painter.get_required_height( slots_required ); var canvas = this.view.canvas_manager.new_canvas(); canvas.width = width + left_offset; @@ -2444,112 +2328,29 @@ // If there's no data, return. if (!result.data) { - return $(canvas); + return canvas; } } - // // Set example feature. This is needed so that track can update its UI based on feature attributes. - // this.example_feature = (result.data.length ? result.data[0] : undefined); - - // - // Draw elements. - // - var data = result.data; - for (var i = 0, len = data.length; i < len; i++) { - var feature = data[i], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - // Slot valid only if features are slotted and this feature is slotted; - // feature may not be due to lack of space. - slot = (slots && slots[feature_uid] !== undefined ? slots[feature_uid] : null); - - // Apply filters to feature. - var hide_feature = false; - var filter; - for (var f = 0; f < this.filters.length; f++) { - filter = this.filters[f]; - filter.update_attrs(feature); - if (!filter.keep(feature)) { - hide_feature = true; - break; - } - } - if (hide_feature) { - continue; - } + + // Draw features + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height, slots ); - // Draw feature if there's overlap and mode is dense or feature is slotted (as it must be for all non-dense modes). - if (is_overlap([feature_start, feature_end], [tile_low, tile_high]) && (mode == "Dense" || slot !== null)) { - this.draw_element(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, - width, left_offset, ref_seq); - } - } - return $(canvas); + return canvas; } }); var VcfTrack = function(name, view, hda_ldda, dataset_id, prefs, filters) { FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); this.track_type = "VcfTrack"; + this.painter = VariantPainter; }; -$.extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { - /** - * Draw a VCF entry. - */ - draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width) { - var feature = data[i], - feature_uid = feature[0], - feature_start = feature[1], - // -1 b/c intervals are half-open. - feature_end = feature[2] - 1, - feature_name = feature[3], - // All features need a start, end, and vertical center. - f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), - f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, - thickness, y_start, thick_start = null, thick_end = null; - - if (no_label) { - ctx.fillStyle = block_color; - ctx.fillRect(f_start + left_offset, y_center + 5, f_end - f_start, 1); - } else { // Show blocks, labels, etc. - // Unpack. - var ref_base = feature[4], alt_base = feature[5], qual = feature[6]; - - // Draw block for entry. - thickness = 9; - y_start = 1; - ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, thickness); - - // Add label for entry. - if (mode !== "Dense" && feature_name !== undefined && feature_start > tile_low) { - // Draw label - ctx.fillStyle = label_color; - if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { - ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + 2 + left_offset, y_center + 8); - } else { - ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start - 2 + left_offset, y_center + 8); - } - ctx.fillStyle = block_color; - } - - // Show additional data on block. - var vcf_label = ref_base + " / " + alt_base; - if (feature_start > tile_low && ctx.measureText(vcf_label).width < (f_end - f_start)) { - ctx.fillStyle = "white"; - ctx.textAlign = "center"; - ctx.fillText(vcf_label, left_offset + f_start + (f_end-f_start)/2, y_center + 8); - ctx.fillStyle = block_color; - } - } - } -}); +$.extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); + var ReadTrack = function (name, view, hda_ldda, dataset_id, prefs, filters) { FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); @@ -2573,281 +2374,10 @@ this.prefs = this.track_config.values; this.track_type = "ReadTrack"; + this.painter = ReadPainter; this.make_name_popup_menu(); }; -$.extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { - /** - * Returns y_scale based on mode. - */ - get_y_scale: function(mode) { - var y_scale; - if (mode === "summary_tree") { - // No scale needed. - } - if (mode === "Dense") { - y_scale = DENSE_TRACK_HEIGHT; - } - else if (mode === "Squish") { - y_scale = SQUISH_TRACK_HEIGHT; - } - else { // mode === "Pack" - y_scale = PACK_TRACK_HEIGHT; - if (this.track_config.values.show_insertions) { - y_scale *= 2; - } - } - return y_scale; - }, - /** - * Draw a single read. - */ - draw_read: function(ctx, mode, w_scale, tile_low, tile_high, feature_start, cigar, orig_seq, y_center, ref_seq) { - ctx.textAlign = "center"; - var track = this, - tile_region = [tile_low, tile_high], - base_offset = 0, - seq_offset = 0, - gap = 0; - - // Keep list of items that need to be drawn on top of initial drawing layer. - var draw_last = []; - - // Gap is needed so that read is offset and hence first base can be drawn on read. - // TODO-FIX: using this gap offsets reads so that their start is not visually in sync with other tracks. - if ((mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { - gap = Math.round(w_scale/2); - } - if (!cigar) { - // If no cigar string, then assume all matches - cigar = [ [0, orig_seq.length] ] - } - for (var cig_id = 0, len = cigar.length; cig_id < len; cig_id++) { - var cig = cigar[cig_id], - cig_op = "MIDNSHP=X"[cig[0]], - cig_len = cig[1]; - - if (cig_op === "H" || cig_op === "S") { - // Go left if it clips - base_offset -= cig_len; - } - var seq_start = feature_start + base_offset, - s_start = Math.floor( Math.max(0, (seq_start - tile_low) * w_scale) ), - s_end = Math.floor( Math.max(0, (seq_start + cig_len - tile_low) * w_scale) ); - - switch (cig_op) { - case "H": // Hard clipping. - // TODO: draw anything? - // Sequence not present, so do not increment seq_offset. - break; - case "S": // Soft clipping. - case "M": // Match. - case "=": // Equals. - var seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region); - if (seq_tile_overlap !== NO_OVERLAP) { - // Draw. - var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); - if (gap > 0) { - ctx.fillStyle = this.prefs.block_color; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 1, s_end - s_start, 9); - ctx.fillStyle = CONNECTOR_COLOR; - // TODO: this can be made much more efficient by computing the complete sequence - // to draw and then drawing it. - for (var c = 0, str_len = seq.length; c < str_len; c++) { - if (this.track_config.values.show_differences && ref_seq) { - var ref_char = ref_seq[seq_start - tile_low + c]; - if (!ref_char || ref_char.toLowerCase() === seq[c].toLowerCase()) { - continue; - } - } - if (seq_start + c >= tile_low && seq_start + c <= tile_high) { - var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); - ctx.fillText(seq[c], c_start + this.left_offset, y_center + 9); - } - } - } else { - ctx.fillStyle = this.prefs.block_color; - // TODO: This is a pretty hack-ish way to fill rectangle based on mode. - ctx.fillRect(s_start + this.left_offset, - y_center + (this.mode !== "Dense" ? 4 : 5), - s_end - s_start, - (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT) ); - } - } - seq_offset += cig_len; - base_offset += cig_len; - break; - case "N": // Skipped bases. - ctx.fillStyle = CONNECTOR_COLOR; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 5, s_end - s_start, 1); - //ctx.dashedLine(s_start + this.left_offset, y_center + 5, this.left_offset + s_end, y_center + 5); - // No change in seq_offset because sequence not used when skipping. - base_offset += cig_len; - break; - case "D": // Deletion. - ctx.fillStyle = "red"; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 4, s_end - s_start, 3); - // TODO: is this true? No change in seq_offset because sequence not used when skipping. - base_offset += cig_len; - break; - case "P": // TODO: No good way to draw insertions/padding right now, so ignore - // Sequences not present, so do not increment seq_offset. - break; - case "I": // Insertion. - // Check to see if sequence should be drawn at all by looking at the overlap between - // the sequence region and the tile region. - var - seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region), - insert_x_coord = this.left_offset + s_start - gap; - - if (seq_tile_overlap !== NO_OVERLAP) { - var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); - // Insertion point is between the sequence start and the previous base: (-gap) moves - // back from sequence start to insertion point. - if (this.track_config.values.show_insertions) { - // - // Show inserted sequence above, centered on insertion point. - // - - // Draw sequence. - // X center is offset + start - <half_sequence_length> - var x_center = this.left_offset + s_start - (s_end - s_start)/2; - if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { - // Draw sequence container. - ctx.fillStyle = "yellow"; - ctx.fillRect(x_center - gap, y_center - 9, s_end - s_start, 9); - draw_last[draw_last.length] = {type: "triangle", data: [insert_x_coord, y_center + 4, 5]}; - ctx.fillStyle = CONNECTOR_COLOR; - // Based on overlap b/t sequence and tile, get sequence to be drawn. - switch(seq_tile_overlap) { - case(OVERLAP_START): - seq = seq.slice(tile_low-seq_start); - break; - case(OVERLAP_END): - seq = seq.slice(0, seq_start-tile_high); - break; - case(CONTAINED_BY): - // All of sequence drawn. - break; - case(CONTAINS): - seq = seq.slice(tile_low-seq_start, seq_start-tile_high); - break; - } - // Draw sequence. - for (var c = 0, str_len = seq.length; c < str_len; c++) { - var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); - ctx.fillText(seq[c], c_start + this.left_offset - (s_end - s_start)/2, y_center); - } - } - else { - // Draw block. - ctx.fillStyle = "yellow"; - // TODO: This is a pretty hack-ish way to fill rectangle based on mode. - ctx.fillRect(x_center, y_center + (this.mode !== "Dense" ? 2 : 5), - s_end - s_start, (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT)); - } - } - else { - if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { - // Show insertions with a single number at the insertion point. - draw_last[draw_last.length] = {type: "text", data: [seq.length, insert_x_coord, y_center + 9]}; - } - else { - // TODO: probably can merge this case with code above. - } - } - } - seq_offset += cig_len; - // No change to base offset because insertions are drawn above sequence/read. - break; - case "X": - // TODO: draw something? - seq_offset += cig_len; - break; - } - } - - // - // Draw last items. - // - ctx.fillStyle = "yellow"; - var item, type, data; - for (var i = 0; i < draw_last.length; i++) { - item = draw_last[i]; - type = item["type"]; - data = item["data"]; - if (type === "text") { - ctx.font = "bold " + DEFAULT_FONT; - ctx.fillText(data[0], data[1], data[2]); - ctx.font = DEFAULT_FONT; - } - else if (type == "triangle") { - ctx.drawDownwardEquilateralTriangle(data[0], data[1], data[2]); - } - } - }, - /** - * Draw a complete read. - */ - draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset, ref_seq) { - // All features need a start, end, and vertical center. - var feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - feature_name = feature[3], - f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), - f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = (mode === "Dense" ? 1 : (1 + slot)) * y_scale, - block_color = this.prefs.block_color, - label_color = this.prefs.label_color, - // Left-gap for label text since we align chrom text to the position tick. - gap = 0; - - // TODO: fix gap usage; also see note on gap in draw_read. - if ((mode === "Pack" || this.mode === "Auto") && w_scale > CHAR_WIDTH_PX) { - var gap = Math.round(w_scale/2); - } - - // Draw read. - ctx.fillStyle = block_color; - if (feature[5] instanceof Array) { - // Read is paired. - var b1_start = Math.floor( Math.max(0, (feature[4][0] - tile_low) * w_scale) ), - b1_end = Math.ceil( Math.min(width, Math.max(0, (feature[4][1] - tile_low) * w_scale)) ), - b2_start = Math.floor( Math.max(0, (feature[5][0] - tile_low) * w_scale) ), - b2_end = Math.ceil( Math.min(width, Math.max(0, (feature[5][1] - tile_low) * w_scale)) ); - - // Draw left/forward read. - if (feature[4][1] >= tile_low && feature[4][0] <= tile_high && feature[4][2]) { - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[4][0], feature[4][2], feature[4][3], y_center, ref_seq); - } - // Draw right/reverse read. - if (feature[5][1] >= tile_low && feature[5][0] <= tile_high && feature[5][2]) { - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[5][0], feature[5][2], feature[5][3], y_center, ref_seq); - } - // Draw connector. - if (b2_start > b1_end) { - ctx.fillStyle = CONNECTOR_COLOR; - ctx.dashedLine(b1_end + left_offset - gap, y_center + 5, left_offset + b2_start - gap, y_center + 5); - } - } else { - // Read is single. - ctx.fillStyle = block_color; - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature_start, feature[4], feature[5], y_center, ref_seq); - } - if (mode === "Pack" && feature_start > tile_low) { - // Draw label. - ctx.fillStyle = this.prefs.label_color; - if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { - ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING - gap, y_center + 8); - } else { - ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING - gap, y_center + 8); - } - ctx.fillStyle = block_color; - } - } -}); +$.extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); /** * Feature track that displays data generated from tool. @@ -2890,6 +2420,18 @@ // ---- To be extracted ------------------------------------------------------ +// ---- Simple extend function for inheritence ---- + +var extend = function() { + var target = arguments[0]; + for ( var i = 1; i < arguments.length; i++ ) { + var other = arguments[i]; + for ( key in other ) { + target[key] = other[key]; + } + } +} + // ---- Canvas management ---- var CanvasManager = function( document ) { @@ -3211,3 +2753,561 @@ ctx.restore(); } + +var FeaturePainter = function( data, view_start, view_end, prefs, mode ) { + this.data = data; + this.view_start = view_start; + this.view_end = view_end; + this.prefs = prefs; + this.mode = mode; +} + +extend( FeaturePainter.prototype, { + + get_required_height: function( rows_required ) { + // y_scale is the height per row + var required_height = y_scale = this.get_row_height(), mode = this.mode; + // If using a packing mode, need to multiply by the number of slots used + if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { + // Calculate new slots incrementally for this new chunk of data and update height if necessary. + required_height = rows_required * y_scale; + } + return required_height; + }, + + draw: function( ctx, width, height, slots ) { + + var data = this.data, view_start = this.view_start, view_end = this.view_end; + + ctx.save(); + + ctx.fillStyle = this.prefs.block_color; + ctx.textAlign = "right"; + + var view_range = this.view_end - this.view_start, + w_scale = width / view_range, + y_scale = this.get_row_height(); + + for (var i = 0, len = data.length; i < len; i++) { + var feature = data[i], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + // Slot valid only if features are slotted and this feature is slotted; + // feature may not be due to lack of space. + slot = (slots && slots[feature_uid] !== undefined ? slots[feature_uid] : null); + + // Draw feature if there's overlap and mode is dense or feature is slotted (as it must be for all non-dense modes). + if (is_overlap([feature_start, feature_end], [view_start, view_end]) && (this.mode == "Dense" || slot !== null)) { + this.draw_element(ctx, this.mode, feature, slot, view_start, view_end, w_scale, y_scale, + width ); + } + } + + ctx.restore(); + } +}); + +var LinkedFeaturePainter = function( data, view_start, view_end, prefs, mode ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); +} + +extend( LinkedFeaturePainter.prototype, FeaturePainter.prototype, { + + /** + * Height of a single row, depends on mode + */ + get_row_height: function() { + var mode = this.mode, y_scale; + if (mode === "summary_tree") { + // No scale needed. + } + if (mode === "Dense") { + y_scale = DENSE_TRACK_HEIGHT; + } + else if (mode === "no_detail") { + y_scale = NO_DETAIL_TRACK_HEIGHT; + } + else if (mode === "Squish") { + y_scale = SQUISH_TRACK_HEIGHT; + } + else { // mode === "Pack" + y_scale = PACK_TRACK_HEIGHT; + } + return y_scale; + }, + + draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width ) { + var + feature_uid = feature[0], + feature_start = feature[1], + // -1 b/c intervals are half-open. + feature_end = feature[2] - 1, + feature_name = feature[3], + f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), + f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), + y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, + thickness, y_start, thick_start = null, thick_end = null, + block_color = this.prefs.block_color, + label_color = this.prefs.label_color; + + // Dense mode displays the same for all data. + if (mode === "Dense") { + ctx.fillStyle = block_color; + ctx.fillRect(f_start, y_center, f_end - f_start, DENSE_FEATURE_HEIGHT); + } + else if (mode === "no_detail") { + // No details for feature, so only one way to display. + ctx.fillStyle = block_color; + // TODO: what should width be here? + ctx.fillRect(f_start, y_center + 5, f_end - f_start, DENSE_FEATURE_HEIGHT); + } + else { // Mode is either Squish or Pack: + // Feature details. + var feature_strand = feature[4], + feature_ts = feature[5], + feature_te = feature[6], + feature_blocks = feature[7]; + + if (feature_ts && feature_te) { + thick_start = Math.floor( Math.max(0, (feature_ts - tile_low) * w_scale) ); + thick_end = Math.ceil( Math.min(width, Math.max(0, (feature_te - tile_low) * w_scale)) ); + } + + // Set vars that depend on mode. + var thin_height, thick_height; + if (mode === "Squish") { + thin_height = 1; + thick_height = SQUISH_FEATURE_HEIGHT; + } else { // mode === "Pack" + thin_height = 5; + thick_height = PACK_FEATURE_HEIGHT; + } + + // Draw feature/feature blocks + connectors. + if (!feature_blocks) { + // If there are no blocks, treat the feature as one big exon. + if ( feature.strand ) { + if (feature.strand === "+") { + ctx.fillStyle = RIGHT_STRAND_INV; + } else if (feature.strand === "-") { + ctx.fillStyle = LEFT_STRAND_INV; + } + } + else { // No strand. + ctx.fillStyle = block_color; + } + ctx.fillRect(f_start, y_center, f_end - f_start, thick_height); + } else { + // There are feature blocks and mode is either Squish or Pack. + // + // Approach: (a) draw whole feature as connector/intron and (b) draw blocks as + // needed. This ensures that whole feature, regardless of whether it starts with + // a block, is visible. + // + + // Draw whole feature as connector/intron. + var cur_y_center, cur_height; + if (mode === "Squish") { + ctx.fillStyle = CONNECTOR_COLOR; + cur_y_center = y_center + Math.floor(SQUISH_FEATURE_HEIGHT/2) + 1; + cur_height = 1; + } + else { // mode === "Pack" + if (feature_strand) { + var cur_y_center = y_center; + var cur_height = thick_height; + if (feature_strand === "+") { + ctx.fillStyle = RIGHT_STRAND; + } else if (feature_strand === "-") { + ctx.fillStyle = LEFT_STRAND; + } + } + else { + ctx.fillStyle = CONNECTOR_COLOR; + cur_y_center += (SQUISH_FEATURE_HEIGHT/2) + 1; + cur_height = 1; + } + } + ctx.fillRect(f_start, cur_y_center, f_end - f_start, cur_height); + + for (var k = 0, k_len = feature_blocks.length; k < k_len; k++) { + var block = feature_blocks[k], + block_start = Math.floor( Math.max(0, (block[0] - tile_low) * w_scale) ), + // -1 b/c intervals are half-open. + block_end = Math.ceil( Math.min(width, Math.max((block[1] - 1 - tile_low) * w_scale)) ); + + // Skip drawing if block not on tile. + if (block_start > block_end) { continue; } + + // Draw thin block. + ctx.fillStyle = block_color; + ctx.fillRect(block_start, y_center + (thick_height-thin_height)/2 + 1, + block_end - block_start, thin_height); + + // If block intersects with thick region, draw block as thick. + if (thick_start !== undefined && !(block_start > thick_end || block_end < thick_start) ) { + var block_thick_start = Math.max(block_start, thick_start), + block_thick_end = Math.min(block_end, thick_end); + ctx.fillRect(block_thick_start, y_center + 1, + block_thick_end - block_thick_start, thick_height); + } + } + } + + // Draw label for Pack mode. + if (mode === "Pack" && feature_start > tile_low) { + ctx.fillStyle = label_color; + // FIXME: do this without tile_index + var tile_index = 1; + if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { + ctx.textAlign = "left"; + ctx.fillText(feature_name, f_end + LABEL_SPACING, y_center + 8); + } else { + ctx.textAlign = "right"; + ctx.fillText(feature_name, f_start - LABEL_SPACING, y_center + 8); + } + ctx.fillStyle = block_color; + } + } + } +}); + + +var VariantPainter = function( data, view_start, view_end, prefs, mode ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); +} + +extend( VariantPainter.prototype, FeaturePainter.prototype, { + draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width) { + var feature = data[i], + feature_uid = feature[0], + feature_start = feature[1], + // -1 b/c intervals are half-open. + feature_end = feature[2] - 1, + feature_name = feature[3], + // All features need a start, end, and vertical center. + f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), + f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), + y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, + thickness, y_start, thick_start = null, thick_end = null; + + if (no_label) { + ctx.fillStyle = block_color; + ctx.fillRect(f_start + left_offset, y_center + 5, f_end - f_start, 1); + } else { // Show blocks, labels, etc. + // Unpack. + var ref_base = feature[4], alt_base = feature[5], qual = feature[6]; + + // Draw block for entry. + thickness = 9; + y_start = 1; + ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, thickness); + + // Add label for entry. + if (mode !== "Dense" && feature_name !== undefined && feature_start > tile_low) { + // Draw label + ctx.fillStyle = label_color; + if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { + ctx.textAlign = "left"; + ctx.fillText(feature_name, f_end + 2 + left_offset, y_center + 8); + } else { + ctx.textAlign = "right"; + ctx.fillText(feature_name, f_start - 2 + left_offset, y_center + 8); + } + ctx.fillStyle = block_color; + } + + // Show additional data on block. + var vcf_label = ref_base + " / " + alt_base; + if (feature_start > tile_low && ctx.measureText(vcf_label).width < (f_end - f_start)) { + ctx.fillStyle = "white"; + ctx.textAlign = "center"; + ctx.fillText(vcf_label, left_offset + f_start + (f_end-f_start)/2, y_center + 8); + ctx.fillStyle = block_color; + } + } + } +}); + +var ReadPainter = function( data, view_start, view_end, prefs, mode, ref_seq ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); + this.ref_seq = ref_seq; +} + +extend( ReadPainter.prototype, FeaturePainter.prototype, { + /** + * Returns y_scale based on mode. + */ + get_row_height: function() { + var y_scale, mode = this.mode; + if (mode === "summary_tree") { + // No scale needed. + } + if (mode === "Dense") { + y_scale = DENSE_TRACK_HEIGHT; + } + else if (mode === "Squish") { + y_scale = SQUISH_TRACK_HEIGHT; + } + else { // mode === "Pack" + y_scale = PACK_TRACK_HEIGHT; + if (this.track_config.values.show_insertions) { + y_scale *= 2; + } + } + return y_scale; + }, + /** + * Draw a single read. + */ + draw_read: function(ctx, mode, w_scale, tile_low, tile_high, feature_start, cigar, orig_seq, y_center) { + ctx.textAlign = "center"; + var track = this, + tile_region = [tile_low, tile_high], + base_offset = 0, + seq_offset = 0, + gap = 0 + ref_seq = this.ref_seq; + + // Keep list of items that need to be drawn on top of initial drawing layer. + var draw_last = []; + + // Gap is needed so that read is offset and hence first base can be drawn on read. + // TODO-FIX: using this gap offsets reads so that their start is not visually in sync with other tracks. + if ((mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { + gap = Math.round(w_scale/2); + } + if (!cigar) { + // If no cigar string, then assume all matches + cigar = [ [0, orig_seq.length] ] + } + for (var cig_id = 0, len = cigar.length; cig_id < len; cig_id++) { + var cig = cigar[cig_id], + cig_op = "MIDNSHP=X"[cig[0]], + cig_len = cig[1]; + + if (cig_op === "H" || cig_op === "S") { + // Go left if it clips + base_offset -= cig_len; + } + var seq_start = feature_start + base_offset, + s_start = Math.floor( Math.max(0, (seq_start - tile_low) * w_scale) ), + s_end = Math.floor( Math.max(0, (seq_start + cig_len - tile_low) * w_scale) ); + + switch (cig_op) { + case "H": // Hard clipping. + // TODO: draw anything? + // Sequence not present, so do not increment seq_offset. + break; + case "S": // Soft clipping. + case "M": // Match. + case "=": // Equals. + var seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region); + if (seq_tile_overlap !== NO_OVERLAP) { + // Draw. + var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); + if (gap > 0) { + ctx.fillStyle = this.prefs.block_color; + ctx.fillRect(s_start + this.left_offset - gap, y_center + 1, s_end - s_start, 9); + ctx.fillStyle = CONNECTOR_COLOR; + // TODO: this can be made much more efficient by computing the complete sequence + // to draw and then drawing it. + for (var c = 0, str_len = seq.length; c < str_len; c++) { + if (this.track_config.values.show_differences && ref_seq) { + var ref_char = ref_seq[seq_start - tile_low + c]; + if (!ref_char || ref_char.toLowerCase() === seq[c].toLowerCase()) { + continue; + } + } + if (seq_start + c >= tile_low && seq_start + c <= tile_high) { + var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); + ctx.fillText(seq[c], c_start + this.left_offset, y_center + 9); + } + } + } else { + ctx.fillStyle = this.prefs.block_color; + // TODO: This is a pretty hack-ish way to fill rectangle based on mode. + ctx.fillRect(s_start + this.left_offset, + y_center + (this.mode !== "Dense" ? 4 : 5), + s_end - s_start, + (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT) ); + } + } + seq_offset += cig_len; + base_offset += cig_len; + break; + case "N": // Skipped bases. + ctx.fillStyle = CONNECTOR_COLOR; + ctx.fillRect(s_start + this.left_offset - gap, y_center + 5, s_end - s_start, 1); + //ctx.dashedLine(s_start + this.left_offset, y_center + 5, this.left_offset + s_end, y_center + 5); + // No change in seq_offset because sequence not used when skipping. + base_offset += cig_len; + break; + case "D": // Deletion. + ctx.fillStyle = "red"; + ctx.fillRect(s_start + this.left_offset - gap, y_center + 4, s_end - s_start, 3); + // TODO: is this true? No change in seq_offset because sequence not used when skipping. + base_offset += cig_len; + break; + case "P": // TODO: No good way to draw insertions/padding right now, so ignore + // Sequences not present, so do not increment seq_offset. + break; + case "I": // Insertion. + // Check to see if sequence should be drawn at all by looking at the overlap between + // the sequence region and the tile region. + var + seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region), + insert_x_coord = this.left_offset + s_start - gap; + + if (seq_tile_overlap !== NO_OVERLAP) { + var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); + // Insertion point is between the sequence start and the previous base: (-gap) moves + // back from sequence start to insertion point. + if (this.track_config.values.show_insertions) { + // + // Show inserted sequence above, centered on insertion point. + // + + // Draw sequence. + // X center is offset + start - <half_sequence_length> + var x_center = this.left_offset + s_start - (s_end - s_start)/2; + if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { + // Draw sequence container. + ctx.fillStyle = "yellow"; + ctx.fillRect(x_center - gap, y_center - 9, s_end - s_start, 9); + draw_last[draw_last.length] = {type: "triangle", data: [insert_x_coord, y_center + 4, 5]}; + ctx.fillStyle = CONNECTOR_COLOR; + // Based on overlap b/t sequence and tile, get sequence to be drawn. + switch(seq_tile_overlap) { + case(OVERLAP_START): + seq = seq.slice(tile_low-seq_start); + break; + case(OVERLAP_END): + seq = seq.slice(0, seq_start-tile_high); + break; + case(CONTAINED_BY): + // All of sequence drawn. + break; + case(CONTAINS): + seq = seq.slice(tile_low-seq_start, seq_start-tile_high); + break; + } + // Draw sequence. + for (var c = 0, str_len = seq.length; c < str_len; c++) { + var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); + ctx.fillText(seq[c], c_start + this.left_offset - (s_end - s_start)/2, y_center); + } + } + else { + // Draw block. + ctx.fillStyle = "yellow"; + // TODO: This is a pretty hack-ish way to fill rectangle based on mode. + ctx.fillRect(x_center, y_center + (this.mode !== "Dense" ? 2 : 5), + s_end - s_start, (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT)); + } + } + else { + if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { + // Show insertions with a single number at the insertion point. + draw_last[draw_last.length] = {type: "text", data: [seq.length, insert_x_coord, y_center + 9]}; + } + else { + // TODO: probably can merge this case with code above. + } + } + } + seq_offset += cig_len; + // No change to base offset because insertions are drawn above sequence/read. + break; + case "X": + // TODO: draw something? + seq_offset += cig_len; + break; + } + } + + // + // Draw last items. + // + ctx.fillStyle = "yellow"; + var item, type, data; + for (var i = 0; i < draw_last.length; i++) { + item = draw_last[i]; + type = item["type"]; + data = item["data"]; + if (type === "text") { + ctx.font = "bold " + DEFAULT_FONT; + ctx.fillText(data[0], data[1], data[2]); + ctx.font = DEFAULT_FONT; + } + else if (type == "triangle") { + ctx.drawDownwardEquilateralTriangle(data[0], data[1], data[2]); + } + } + }, + /** + * Draw a complete read pair + */ + draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width ) { + // All features need a start, end, and vertical center. + var feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), + f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), + y_center = (mode === "Dense" ? 1 : (1 + slot)) * y_scale, + block_color = this.prefs.block_color, + label_color = this.prefs.label_color, + // Left-gap for label text since we align chrom text to the position tick. + gap = 0; + + // TODO: fix gap usage; also see note on gap in draw_read. + if ((mode === "Pack" || this.mode === "Auto") && w_scale > CHAR_WIDTH_PX) { + var gap = Math.round(w_scale/2); + } + + // Draw read. + ctx.fillStyle = block_color; + if (feature[5] instanceof Array) { + // Read is paired. + var b1_start = Math.floor( Math.max(0, (feature[4][0] - tile_low) * w_scale) ), + b1_end = Math.ceil( Math.min(width, Math.max(0, (feature[4][1] - tile_low) * w_scale)) ), + b2_start = Math.floor( Math.max(0, (feature[5][0] - tile_low) * w_scale) ), + b2_end = Math.ceil( Math.min(width, Math.max(0, (feature[5][1] - tile_low) * w_scale)) ); + + // Draw left/forward read. + if (feature[4][1] >= tile_low && feature[4][0] <= tile_high && feature[4][2]) { + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[4][0], feature[4][2], feature[4][3], y_center); + } + // Draw right/reverse read. + if (feature[5][1] >= tile_low && feature[5][0] <= tile_high && feature[5][2]) { + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[5][0], feature[5][2], feature[5][3], y_center); + } + // Draw connector. + if (b2_start > b1_end) { + ctx.fillStyle = CONNECTOR_COLOR; + ctx.dashedLine(b1_end + left_offset - gap, y_center + 5, left_offset + b2_start - gap, y_center + 5); + } + } else { + // Read is single. + ctx.fillStyle = block_color; + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature_start, feature[4], feature[5], y_center); + } + if (mode === "Pack" && feature_start > tile_low) { + // Draw label. + ctx.fillStyle = this.prefs.label_color; + // FIXME: eliminate tile_index + var tile_index = 1; + if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { + ctx.textAlign = "left"; + ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING - gap, y_center + 8); + } else { + ctx.textAlign = "right"; + ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING - gap, y_center + 8); + } + ctx.fillStyle = block_color; + } + } +}); http://bitbucket.org/galaxy/galaxy-central/changeset/c4961c6e7a4c/ changeset: r5304:c4961c6e7a4c user: james_taylor date: 2011-03-31 00:30:35 summary: Automated merge with https://bitbucket.org/galaxy/galaxy-central affected #: 0 files (0 bytes) http://bitbucket.org/galaxy/galaxy-central/changeset/4be86b204759/ changeset: r5305:4be86b204759 user: james_taylor date: 2011-03-31 19:05:24 summary: Remove left_offset stuff from ReadTracks, fix some other stuff related to padding and height calculation, read tracks now work fine affected #: 1 file (134 bytes) --- a/static/scripts/trackster.js Wed Mar 30 18:30:35 2011 -0400 +++ b/static/scripts/trackster.js Thu Mar 31 13:05:24 2011 -0400 @@ -2298,7 +2298,8 @@ // Create painter, and canvas of sufficient size to contain all features // HACK: ref_seq will only be defined for ReadTracks, and only the ReadPainter accepts that argument var painter = new (this.painter)( filtered, tile_low, tile_high, this.prefs, mode, ref_seq ); - var required_height = painter.get_required_height( slots_required ); + // FIXME: ERROR_PADDING is an ugly gap most of the time + var required_height = painter.get_required_height( slots_required ) + ERROR_PADDING; var canvas = this.view.canvas_manager.new_canvas(); canvas.width = width + left_offset; @@ -2336,7 +2337,7 @@ this.example_feature = (result.data.length ? result.data[0] : undefined); // Draw features - ctx.translate( left_offset, 0 ); + ctx.translate( left_offset, ERROR_PADDING ); painter.draw( ctx, width, required_height, slots ); return canvas; @@ -2772,7 +2773,8 @@ // Calculate new slots incrementally for this new chunk of data and update height if necessary. required_height = rows_required * y_scale; } - return required_height; + // Pad bottom by half a row + return required_height + Math.round( y_scale / 2 ); }, draw: function( ctx, width, height, slots ) { @@ -2846,11 +2848,11 @@ feature_name = feature[3], f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, + y_center = (mode === "Dense" ? 0 : (0 + slot)) * y_scale, thickness, y_start, thick_start = null, thick_end = null, block_color = this.prefs.block_color, label_color = this.prefs.label_color; - + // Dense mode displays the same for all data. if (mode === "Dense") { ctx.fillStyle = block_color; @@ -2989,7 +2991,7 @@ // All features need a start, end, and vertical center. f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, + y_center = (mode === "Dense" ? 0 : (0 + slot)) * y_scale, thickness, y_start, thick_start = null, thick_end = null; if (no_label) { @@ -3052,7 +3054,7 @@ } else { // mode === "Pack" y_scale = PACK_TRACK_HEIGHT; - if (this.track_config.values.show_insertions) { + if (this.prefs.show_insertions) { y_scale *= 2; } } @@ -3109,12 +3111,12 @@ var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); if (gap > 0) { ctx.fillStyle = this.prefs.block_color; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 1, s_end - s_start, 9); + ctx.fillRect(s_start - gap, y_center + 1, s_end - s_start, 9); ctx.fillStyle = CONNECTOR_COLOR; // TODO: this can be made much more efficient by computing the complete sequence // to draw and then drawing it. for (var c = 0, str_len = seq.length; c < str_len; c++) { - if (this.track_config.values.show_differences && ref_seq) { + if (this.prefs.show_differences && ref_seq) { var ref_char = ref_seq[seq_start - tile_low + c]; if (!ref_char || ref_char.toLowerCase() === seq[c].toLowerCase()) { continue; @@ -3122,13 +3124,13 @@ } if (seq_start + c >= tile_low && seq_start + c <= tile_high) { var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); - ctx.fillText(seq[c], c_start + this.left_offset, y_center + 9); + ctx.fillText(seq[c], c_start, y_center + 9); } } } else { ctx.fillStyle = this.prefs.block_color; // TODO: This is a pretty hack-ish way to fill rectangle based on mode. - ctx.fillRect(s_start + this.left_offset, + ctx.fillRect(s_start, y_center + (this.mode !== "Dense" ? 4 : 5), s_end - s_start, (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT) ); @@ -3139,14 +3141,14 @@ break; case "N": // Skipped bases. ctx.fillStyle = CONNECTOR_COLOR; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 5, s_end - s_start, 1); + ctx.fillRect(s_start - gap, y_center + 5, s_end - s_start, 1); //ctx.dashedLine(s_start + this.left_offset, y_center + 5, this.left_offset + s_end, y_center + 5); // No change in seq_offset because sequence not used when skipping. base_offset += cig_len; break; case "D": // Deletion. ctx.fillStyle = "red"; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 4, s_end - s_start, 3); + ctx.fillRect(s_start - gap, y_center + 4, s_end - s_start, 3); // TODO: is this true? No change in seq_offset because sequence not used when skipping. base_offset += cig_len; break; @@ -3158,20 +3160,20 @@ // the sequence region and the tile region. var seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region), - insert_x_coord = this.left_offset + s_start - gap; + insert_x_coord = s_start - gap; if (seq_tile_overlap !== NO_OVERLAP) { var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); // Insertion point is between the sequence start and the previous base: (-gap) moves // back from sequence start to insertion point. - if (this.track_config.values.show_insertions) { + if (this.prefs.show_insertions) { // // Show inserted sequence above, centered on insertion point. // // Draw sequence. // X center is offset + start - <half_sequence_length> - var x_center = this.left_offset + s_start - (s_end - s_start)/2; + var x_center = s_start - (s_end - s_start)/2; if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { // Draw sequence container. ctx.fillStyle = "yellow"; @@ -3196,7 +3198,7 @@ // Draw sequence. for (var c = 0, str_len = seq.length; c < str_len; c++) { var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); - ctx.fillText(seq[c], c_start + this.left_offset - (s_end - s_start)/2, y_center); + ctx.fillText(seq[c], c_start - (s_end - s_start)/2, y_center); } } else { @@ -3288,7 +3290,7 @@ // Draw connector. if (b2_start > b1_end) { ctx.fillStyle = CONNECTOR_COLOR; - ctx.dashedLine(b1_end + left_offset - gap, y_center + 5, left_offset + b2_start - gap, y_center + 5); + ctx.dashedLine(b1_end - gap, y_center + 5, b2_start - gap, y_center + 5); } } else { // Read is single. @@ -3302,10 +3304,10 @@ var tile_index = 1; if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING - gap, y_center + 8); + ctx.fillText(feature_name, f_end + LABEL_SPACING - gap, y_center + 8); } else { ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING - gap, y_center + 8); + ctx.fillText(feature_name, f_start - LABEL_SPACING - gap, y_center + 8); } ctx.fillStyle = block_color; } http://bitbucket.org/galaxy/galaxy-central/changeset/88e924542585/ changeset: r5306:88e924542585 user: james_taylor date: 2011-03-29 02:32:43 summary: Extract feature slotting into a new class affected #: 1 file (648 bytes) --- a/static/scripts/trackster.js Mon Mar 28 15:27:14 2011 -0400 +++ b/static/scripts/trackster.js Mon Mar 28 20:32:43 2011 -0400 @@ -2232,150 +2232,18 @@ * Returns the number of slots used to pack features. */ incremental_slots: function(level, features, mode) { - // + // Get/create incremental slots for level. If display mode changed, // need to create new slots. - // + var inc_slots = this.inc_slots[level]; if (!inc_slots || (inc_slots.mode !== mode)) { - inc_slots = {}; - inc_slots.w_scale = level; + inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return CONTEXT.measureText( x ) } ); inc_slots.mode = mode; this.inc_slots[level] = inc_slots; - this.start_end_dct[level] = {}; } - - // - // If feature already exists in slots (from previously seen tiles), use the same slot, - // otherwise if not seen, add to "undone" list for slot calculation. - // - var w_scale = inc_slots.w_scale, - undone = [], slotted = [], - highest_slot = 0, // To measure how big to draw canvas - max_low = this.view.max_low; - // TODO: Should calculate zoom tile index, which will improve performance - // by only having to look at a smaller subset - // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } - for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i], - feature_uid = feature[0]; - if (inc_slots[feature_uid] !== undefined) { - highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); - slotted.push(inc_slots[feature_uid]); - } else { - undone.push(i); - } - } - - // - // Slot unslotted features. - // - var start_end_dct = this.start_end_dct[level]; - - // Find the first slot such that current feature doesn't overlap any other features in that slot. - // Returns -1 if no slot was found. - var find_slot = function(f_start, f_end) { - for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { - var has_overlap = false, - slot = start_end_dct[slot_num]; - if (slot !== undefined) { - // Iterate through features already in slot to see if current feature will fit. - for (var k = 0, k_len = slot.length; k < k_len; k++) { - var s_e = slot[k]; - if (f_end > s_e[0] && f_start < s_e[1]) { - // There is overlap - has_overlap = true; - break; - } - } - } - if (!has_overlap) { - return slot_num; - } - } - return -1; - }; - - // Do slotting. - for (var i = 0, len = undone.length; i < len; i++) { - var feature = features[undone[i]], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - feature_name = feature[3], - // Where to start, end drawing on screen. - f_start = Math.floor( (feature_start - max_low) * w_scale ), - f_end = Math.ceil( (feature_end - max_low) * w_scale ), - text_len = CONTEXT.measureText(feature_name).width, - text_align; - - // Update start, end drawing locations to include feature name. - // Try to put the name on the left, if not, put on right. - if (feature_name !== undefined && mode === "Pack") { - // Add gap for label spacing and extra pack space padding - text_len += (LABEL_SPACING + PACK_SPACING); - if (f_start - text_len >= 0) { - f_start -= text_len; - text_align = "left"; - } else { - f_end += text_len; - text_align = "right"; - } - } - - // Find slot. - var slot_num = find_slot(f_start, f_end); - /* - if (slot_num < 0) { - - TODO: this is not yet working -- - console.log(feature_uid, "looking for slot with text on the right"); - // Slot not found. If text was on left, try on right and see - // if slot can be found. - // TODO: are there any checks we need to do to ensure that text - // will fit on tile? - if (text_align === "left") { - f_start -= text_len; - f_end -= text_len; - text_align = "right"; - slot_num = find_slot(f_start, f_end); - } - if (slot_num >= 0) { - console.log(feature_uid, "found slot with text on the right"); - } - - } - */ - // Do slotting. - if (slot_num >= 0) { - // Add current feature to slot. - if (start_end_dct[slot_num] === undefined) { - start_end_dct[slot_num] = []; - } - start_end_dct[slot_num].push([f_start, f_end]); - inc_slots[feature_uid] = slot_num; - highest_slot = Math.max(highest_slot, slot_num); - } - else { - // TODO: remove this warning when skipped features are handled. - // Show warning for skipped feature. - //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); - } - } - - // Debugging: view slots data. - /* - for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { - var slot = start_end_dct[i]; - if (slot !== undefined) { - console.log(i, "*************"); - for (var k = 0, k_len = slot.length; k < k_len; k++) { - console.log("\t", slot[k][0], slot[k][1]); - } - } - } - */ - return highest_slot + 1; + + return inc_slots.slot_features( features ); }, /** * Draw summary tree on canvas. @@ -2637,7 +2505,7 @@ else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { // Calculate new slots incrementally for this new chunk of data and update height if necessary. required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; - slots = this.inc_slots[w_scale]; + slots = this.inc_slots[w_scale].slots; } // @@ -3126,4 +2994,154 @@ } }); +// ---- To be extracted ------------------------------------------------------ +/** + * FeatureSlotter determines slots in which to draw features for vertical + * packing. + * + * This implementation is incremental, any feature assigned a slot will be + * retained for slotting future features. + */ +var FeatureSlotter = function ( w_scale, include_label, measureText ) { + this.slots = {}; + this.start_end_dct = {}; + this.w_scale = w_scale; + this.include_label = include_label; + this.measureText = measureText; +} + +/** + * Slot a set of features, `this.slots` will be updated with slots by id, and + * the largest slot required for the passed set of features is returned + */ +FeatureSlotter.prototype.slot_features = function( features ) { + var w_scale = this.w_scale, inc_slots = this.slots, start_end_dct = this.start_end_dct, + undone = [], slotted = [], highest_slot = 0; + + // If feature already exists in slots (from previously seen tiles), use the same slot, + // otherwise if not seen, add to "undone" list for slot calculation. + + // TODO: Should calculate zoom tile index, which will improve performance + // by only having to look at a smaller subset + // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } + for (var i = 0, len = features.length; i < len; i++) { + var feature = features[i], + feature_uid = feature[0]; + if (inc_slots[feature_uid] !== undefined) { + highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); + slotted.push(inc_slots[feature_uid]); + } else { + undone.push(i); + } + } + + // Slot unslotted features. + + // Find the first slot such that current feature doesn't overlap any other features in that slot. + // Returns -1 if no slot was found. + var find_slot = function(f_start, f_end) { + // TODO: Fix constants + for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { + var has_overlap = false, + slot = start_end_dct[slot_num]; + if (slot !== undefined) { + // Iterate through features already in slot to see if current feature will fit. + for (var k = 0, k_len = slot.length; k < k_len; k++) { + var s_e = slot[k]; + if (f_end > s_e[0] && f_start < s_e[1]) { + // There is overlap + has_overlap = true; + break; + } + } + } + if (!has_overlap) { + return slot_num; + } + } + return -1; + }; + + // Do slotting. + for (var i = 0, len = undone.length; i < len; i++) { + var feature = features[undone[i]], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + // Where to start, end drawing on screen. + f_start = Math.floor( feature_start * w_scale ), + f_end = Math.ceil( feature_end * w_scale ), + text_len = this.measureText(feature_name).width, + text_align; + + // Update start, end drawing locations to include feature name. + // Try to put the name on the left, if not, put on right. + if (feature_name !== undefined && this.include_label ) { + // Add gap for label spacing and extra pack space padding + // TODO: Fix constants + text_len += (LABEL_SPACING + PACK_SPACING); + if (f_start - text_len >= 0) { + f_start -= text_len; + text_align = "left"; + } else { + f_end += text_len; + text_align = "right"; + } + } + + // Find slot. + var slot_num = find_slot(f_start, f_end); + /* + if (slot_num < 0) { + + TODO: this is not yet working -- + console.log(feature_uid, "looking for slot with text on the right"); + // Slot not found. If text was on left, try on right and see + // if slot can be found. + // TODO: are there any checks we need to do to ensure that text + // will fit on tile? + if (text_align === "left") { + f_start -= text_len; + f_end -= text_len; + text_align = "right"; + slot_num = find_slot(f_start, f_end); + } + if (slot_num >= 0) { + console.log(feature_uid, "found slot with text on the right"); + } + + } + */ + // Do slotting. + if (slot_num >= 0) { + // Add current feature to slot. + if (start_end_dct[slot_num] === undefined) { + start_end_dct[slot_num] = []; + } + start_end_dct[slot_num].push([f_start, f_end]); + inc_slots[feature_uid] = slot_num; + highest_slot = Math.max(highest_slot, slot_num); + } + else { + // TODO: remove this warning when skipped features are handled. + // Show warning for skipped feature. + //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + } + } + + // Debugging: view slots data. + /* + for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { + var slot = start_end_dct[i]; + if (slot !== undefined) { + console.log(i, "*************"); + for (var k = 0, k_len = slot.length; k < k_len; k++) { + console.log("\t", slot[k][0], slot[k][1]); + } + } + } + */ + return highest_slot + 1; +} http://bitbucket.org/galaxy/galaxy-central/changeset/643539b68e70/ changeset: r5307:643539b68e70 user: james_taylor date: 2011-03-29 03:35:29 summary: Extract SummaryTree painter, abstract canvas creation into CanvasManager class affected #: 1 file (627 bytes) --- a/static/scripts/trackster.js Mon Mar 28 20:32:43 2011 -0400 +++ b/static/scripts/trackster.js Mon Mar 28 21:35:29 2011 -0400 @@ -372,6 +372,7 @@ this.min_separation = 30; this.has_changes = false; this.init( callback ); + this.canvas_manager = new CanvasManager( container.get(0).ownerDocument ); this.reset(); }; $.extend( View.prototype, { @@ -1945,20 +1946,17 @@ track.content_div.css("height", "0px"); return; } - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - var ctx = canvas.get(0).getContext("2d"); - canvas.get(0).width = Math.ceil( tile_length * w_scale + track.left_offset); - canvas.get(0).height = track.height_px; + var canvas = this.view.canvas_manager.new_canvas(); + var ctx = canvas.getContext("2d"); + canvas.width = Math.ceil( tile_length * w_scale + track.left_offset); + canvas.height = track.height_px; ctx.font = DEFAULT_FONT; ctx.textAlign = "center"; for (var c = 0, str_len = seq.length; c < str_len; c++) { var c_start = Math.round(c * w_scale); ctx.fillText(seq[c], c_start + track.left_offset, 10); } - return canvas; + return $(canvas); } this.content_div.css("height", "0px"); } @@ -2249,38 +2247,17 @@ * Draw summary tree on canvas. */ draw_summary_tree: function(canvas, points, delta, max, w_scale, required_height, tile_low, left_offset) { - var - // 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. - base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; - delta_x_px = Math.ceil(delta * w_scale); + // Add label to container div when displaying summary tree mode var max_label = $("<div />").addClass('yaxislabel'); max_label.text(max); - max_label.css({ position: "absolute", top: "22px", left: "10px" }); max_label.prependTo(this.container_div); - var ctx = canvas.get(0).getContext("2d"); - for (var i = 0, len = points.length; i < len; i++) { - var x = Math.floor( (points[i][0] - tile_low) * w_scale ); - var y = points[i][1]; - - if (!y) { continue; } - var y_px = y / max * required_height; - - ctx.fillStyle = "black"; - ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); - - // Draw number count if it can fit the number with some padding, otherwise things clump up - var text_padding_req_x = 4; - if (this.prefs.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { - ctx.fillStyle = "#666"; - ctx.textAlign = "center"; - ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); - } - } + // Paint summary tree into canvas + var ctx = canvas.getContext("2d"); + var painter = new SummaryTreePainter( points, delta, max, this.prefs.show_counts ); + painter.draw( ctx, w_scale, required_height, tile_low, left_offset ); }, /** * Draw feature. @@ -2459,10 +2436,6 @@ left_offset = this.left_offset, slots, required_height; - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - // // Set mode if Auto. // @@ -2511,15 +2484,17 @@ // // Set up for drawing. // - canvas.get(0).width = width + left_offset; - canvas.get(0).height = required_height; + var canvas = this.view.canvas_manager.new_canvas(); + + canvas.width = width + left_offset; + canvas.height = required_height; if (result.dataset_type === "summary_tree") { // Increase canvas height in order to display max label. - canvas.get(0).height += LABEL_SPACING + CHAR_HEIGHT_PX; + canvas.height += LABEL_SPACING + CHAR_HEIGHT_PX; } parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); - var ctx = canvas.get(0).getContext("2d"); + var ctx = canvas.getContext("2d"); ctx.fillStyle = this.prefs.block_color; ctx.font = this.default_font; ctx.textAlign = "right"; @@ -2531,14 +2506,14 @@ if (mode === "summary_tree") { this.draw_summary_tree(canvas, result.data, result.delta, result.max, w_scale, required_height, tile_low, left_offset); - return canvas; + return $(canvas); } // // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red // to indicate region where message is applicable if (result.message) { - canvas.css({ + $(canvas).css({ "border-top": "1px solid red" }); @@ -2551,7 +2526,7 @@ // If there's no data, return. if (!result.data) { - return canvas; + return $(canvas); } } @@ -2594,7 +2569,7 @@ width, left_offset, ref_seq); } } - return canvas; + return $(canvas); } }); @@ -2996,6 +2971,20 @@ // ---- To be extracted ------------------------------------------------------ +// ---- Canvas management ---- + +var CanvasManager = function( document ) { + this.document = document; +} + +CanvasManager.prototype.new_canvas = function() { + var canvas = this.document.createElement("canvas"); + if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK + return canvas; +} + +// ---- Feature Packing ---- + /** * FeatureSlotter determines slots in which to draw features for vertical * packing. @@ -3145,3 +3134,50 @@ */ return highest_slot + 1; } + +// ---- Painters ---- + +/** + * SummaryTreePainter, a histogram showing number of intervals in a region + */ +var SummaryTreePainter = function( data, delta, max, show_counts ) { + this.data = data; + this.delta = delta; + this.max = max; + this.show_counts = show_counts; +} + +SummaryTreePainter.prototype.draw = function( ctx, w_scale, required_height, tile_low, left_offset ) { + + var + points = this.data, delta = this.delta, max = this.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. + base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + delta_x_px = Math.ceil(delta * w_scale); + + ctx.save(); + + for (var i = 0, len = points.length; i < len; i++) { + var x = Math.floor( (points[i][0] - tile_low) * w_scale ); + var y = points[i][1]; + + if (!y) { continue; } + var y_px = y / max * required_height; + + ctx.fillStyle = "black"; + ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); + + // Draw number count if it can fit the number with some padding, otherwise things clump up + var text_padding_req_x = 4; + if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { + ctx.fillStyle = "#666"; + ctx.textAlign = "center"; + ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); + } + } + + ctx.restore(); +} + http://bitbucket.org/galaxy/galaxy-central/changeset/183482bc7c2b/ changeset: r5308:183482bc7c2b user: james_taylor date: 2011-03-29 19:56:44 summary: Extract LinePainter from LineTrack affected #: 1 file (281 bytes) --- a/static/scripts/trackster.js Mon Mar 28 21:35:29 2011 -0400 +++ b/static/scripts/trackster.js Tue Mar 29 13:56:44 2011 -0400 @@ -2004,10 +2004,14 @@ this.height_px = this.track_config.values.height; this.vertical_range = this.track_config.values.max_value - this.track_config.values.min_value; - // Add control for resizing - // Trickery here to deal with the hovering drag handle, can probably be - // pulled out and reused. - (function( track ){ + this.add_resize_handle(); +}; +$.extend(LineTrack.prototype, TiledTrack.prototype, { + add_resize_handle: function () { + // Add control for resizing + // Trickery here to deal with the hovering drag handle, can probably be + // pulled out and reused. + var track = this; var in_handle = false; var in_drag = false; var drag_control = $( "<div class='track-resize'>" ) @@ -2035,9 +2039,7 @@ if ( ! in_handle ) { drag_control.hide(); } track.track_config.values.height = track.height_px; }).appendTo( track.container_div ); - })(this); -}; -$.extend(LineTrack.prototype, TiledTrack.prototype, { + }, predraw_init: function() { var track = this, track_id = track.view.tracks.indexOf(track); @@ -2078,99 +2080,23 @@ return; } - var track = this, - tile_low = tile_index * DENSITY * resolution, + var tile_low = tile_index * DENSITY * resolution, tile_length = DENSITY * resolution, - key = resolution + "_" + tile_index, - params = { hda_ldda: this.hda_ldda, dataset_id: this.dataset_id, resolution: this.view.resolution }; + width = Math.ceil( tile_length * w_scale ), + height = this.height_px; + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width, + canvas.height = height; - var canvas = document.createElement("canvas"), - data = result.data; - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - canvas.get(0).width = Math.ceil( tile_length * w_scale ); - canvas.get(0).height = track.height_px; - var ctx = canvas.get(0).getContext("2d"), - in_path = false, - min_value = track.prefs.min_value, - max_value = track.prefs.max_value, - vertical_range = track.vertical_range, - total_frequency = track.total_frequency, - height_px = track.height_px, - mode = track.mode; - - // Pixel position of 0 on the y axis - var y_zero = Math.round( height_px + min_value / vertical_range * height_px ); - - // Line at 0.0 - ctx.beginPath(); - ctx.moveTo( 0, y_zero ); - ctx.lineTo( tile_length * w_scale, y_zero ); - // ctx.lineWidth = 0.5; - ctx.fillStyle = "#aaa"; - ctx.stroke(); - - ctx.beginPath(); - ctx.fillStyle = track.prefs.color; - var x_scaled, y, delta_x_px; - if (data.length > 1) { - delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); - } else { - delta_x_px = 10; - } - for (var i = 0, len = data.length; i < len; i++) { - x_scaled = Math.round((data[i][0] - tile_low) * w_scale); - y = data[i][1]; - if (y === null) { - if (in_path && mode === "Filled") { - ctx.lineTo(x_scaled, height_px); - } - in_path = false; - continue; - } - if (y < min_value) { - y = min_value; - } else if (y > max_value) { - y = max_value; - } - - if (mode === "Histogram") { - // y becomes the bar height in pixels, which is the negated for canvas coords - y = Math.round( y / vertical_range * height_px ); - ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); - } else if (mode === "Intensity" ) { - y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); - ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; - ctx.fillRect(x_scaled, 0, delta_x_px, height_px); - } else { - // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); - y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); - // console.log(canvas.get(0).height, canvas.get(0).width); - if (in_path) { - ctx.lineTo(x_scaled, y); - } else { - in_path = true; - if (mode === "Filled") { - ctx.moveTo(x_scaled, height_px); - ctx.lineTo(x_scaled, y); - } else { - ctx.moveTo(x_scaled, y); - } - } - } - } - if (mode === "Filled") { - if (in_path) { - ctx.lineTo( x_scaled, y_zero ); - ctx.lineTo( 0, y_zero ); - } - ctx.fill(); - } else { - ctx.stroke(); - } - return canvas; + // Paint line onto full canvas + var ctx = canvas.getContext("2d"); + var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, + this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); + painter.draw( ctx, width, height ); + + return $(canvas); } }); @@ -3181,3 +3107,103 @@ ctx.restore(); } +var LinePainter = function( data, view_start, view_end, min_value, max_value, color, mode ) { + this.data = data; + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.min_value = min_value; + this.max_value = max_value; + this.color = color; + this.mode = mode; +} + +LinePainter.prototype.draw = function( ctx, width, height ) { + var + in_path = false, + min_value = this.min_value, + max_value = this.max_value, + vertical_range = max_value - min_value, + height_px = height, + view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range, + mode = this.mode, + data = this.data; + + ctx.save(); + + // Pixel position of 0 on the y axis + var y_zero = Math.round( height + min_value / vertical_range * height ); + + // Line at 0.0 + if ( mode !== "Intensity" ) { + ctx.beginPath(); + ctx.moveTo( 0, y_zero ); + ctx.lineTo( width, y_zero ); + // ctx.lineWidth = 0.5; + ctx.fillStyle = "#aaa"; + ctx.stroke(); + } + + ctx.beginPath(); + ctx.fillStyle = this.color; + var x_scaled, y, delta_x_px; + if (data.length > 1) { + delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); + } else { + delta_x_px = 10; + } + for (var i = 0, len = data.length; i < len; i++) { + x_scaled = Math.round((data[i][0] - view_start) * w_scale); + y = data[i][1]; + if (y === null) { + if (in_path && mode === "Filled") { + ctx.lineTo(x_scaled, height_px); + } + in_path = false; + continue; + } + if (y < min_value) { + y = min_value; + } else if (y > max_value) { + y = max_value; + } + + if (mode === "Histogram") { + // y becomes the bar height in pixels, which is the negated for canvas coords + y = Math.round( y / vertical_range * height_px ); + ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); + } else if (mode === "Intensity" ) { + y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); + ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; + ctx.fillRect(x_scaled, 0, delta_x_px, height_px); + } else { + // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); + y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); + // console.log(canvas.get(0).height, canvas.get(0).width); + if (in_path) { + ctx.lineTo(x_scaled, y); + } else { + in_path = true; + if (mode === "Filled") { + ctx.moveTo(x_scaled, height_px); + ctx.lineTo(x_scaled, y); + } else { + ctx.moveTo(x_scaled, y); + } + } + } + } + if (mode === "Filled") { + if (in_path) { + ctx.lineTo( x_scaled, y_zero ); + ctx.lineTo( 0, y_zero ); + } + ctx.fill(); + } else { + ctx.stroke(); + } + + ctx.restore(); +} \ No newline at end of file http://bitbucket.org/galaxy/galaxy-central/changeset/f48057eeedbc/ changeset: r5309:f48057eeedbc user: james_taylor date: 2011-03-29 19:56:57 summary: Automated merge with https://bitbucket.org/galaxy/galaxy-central affected #: 1 file (302 bytes) --- a/static/scripts/trackster.js Tue Mar 29 13:43:24 2011 -0400 +++ b/static/scripts/trackster.js Tue Mar 29 13:56:57 2011 -0400 @@ -372,6 +372,7 @@ this.min_separation = 30; this.has_changes = false; this.init( callback ); + this.canvas_manager = new CanvasManager( container.get(0).ownerDocument ); this.reset(); }; $.extend( View.prototype, { @@ -1945,20 +1946,17 @@ track.content_div.css("height", "0px"); return; } - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - var ctx = canvas.get(0).getContext("2d"); - canvas.get(0).width = Math.ceil( tile_length * w_scale + track.left_offset); - canvas.get(0).height = track.height_px; + var canvas = this.view.canvas_manager.new_canvas(); + var ctx = canvas.getContext("2d"); + canvas.width = Math.ceil( tile_length * w_scale + track.left_offset); + canvas.height = track.height_px; ctx.font = DEFAULT_FONT; ctx.textAlign = "center"; for (var c = 0, str_len = seq.length; c < str_len; c++) { var c_start = Math.round(c * w_scale); ctx.fillText(seq[c], c_start + track.left_offset, 10); } - return canvas; + return $(canvas); } this.content_div.css("height", "0px"); } @@ -2006,10 +2004,14 @@ this.height_px = this.track_config.values.height; this.vertical_range = this.track_config.values.max_value - this.track_config.values.min_value; - // Add control for resizing - // Trickery here to deal with the hovering drag handle, can probably be - // pulled out and reused. - (function( track ){ + this.add_resize_handle(); +}; +$.extend(LineTrack.prototype, TiledTrack.prototype, { + add_resize_handle: function () { + // Add control for resizing + // Trickery here to deal with the hovering drag handle, can probably be + // pulled out and reused. + var track = this; var in_handle = false; var in_drag = false; var drag_control = $( "<div class='track-resize'>" ) @@ -2037,9 +2039,7 @@ if ( ! in_handle ) { drag_control.hide(); } track.track_config.values.height = track.height_px; }).appendTo( track.container_div ); - })(this); -}; -$.extend(LineTrack.prototype, TiledTrack.prototype, { + }, predraw_init: function() { var track = this, track_id = track.view.tracks.indexOf(track); @@ -2080,99 +2080,23 @@ return; } - var track = this, - tile_low = tile_index * DENSITY * resolution, + var tile_low = tile_index * DENSITY * resolution, tile_length = DENSITY * resolution, - key = resolution + "_" + tile_index, - params = { hda_ldda: this.hda_ldda, dataset_id: this.dataset_id, resolution: this.view.resolution }; + width = Math.ceil( tile_length * w_scale ), + height = this.height_px; + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width, + canvas.height = height; - var canvas = document.createElement("canvas"), - data = result.data; - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - canvas.get(0).width = Math.ceil( tile_length * w_scale ); - canvas.get(0).height = track.height_px; - var ctx = canvas.get(0).getContext("2d"), - in_path = false, - min_value = track.prefs.min_value, - max_value = track.prefs.max_value, - vertical_range = track.vertical_range, - total_frequency = track.total_frequency, - height_px = track.height_px, - mode = track.mode; - - // Pixel position of 0 on the y axis - var y_zero = Math.round( height_px + min_value / vertical_range * height_px ); - - // Line at 0.0 - ctx.beginPath(); - ctx.moveTo( 0, y_zero ); - ctx.lineTo( tile_length * w_scale, y_zero ); - // ctx.lineWidth = 0.5; - ctx.fillStyle = "#aaa"; - ctx.stroke(); - - ctx.beginPath(); - ctx.fillStyle = track.prefs.color; - var x_scaled, y, delta_x_px; - if (data.length > 1) { - delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); - } else { - delta_x_px = 10; - } - for (var i = 0, len = data.length; i < len; i++) { - x_scaled = Math.round((data[i][0] - tile_low) * w_scale); - y = data[i][1]; - if (y === null) { - if (in_path && mode === "Filled") { - ctx.lineTo(x_scaled, height_px); - } - in_path = false; - continue; - } - if (y < min_value) { - y = min_value; - } else if (y > max_value) { - y = max_value; - } - - if (mode === "Histogram") { - // y becomes the bar height in pixels, which is the negated for canvas coords - y = Math.round( y / vertical_range * height_px ); - ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); - } else if (mode === "Intensity" ) { - y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); - ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; - ctx.fillRect(x_scaled, 0, delta_x_px, height_px); - } else { - // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); - y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); - // console.log(canvas.get(0).height, canvas.get(0).width); - if (in_path) { - ctx.lineTo(x_scaled, y); - } else { - in_path = true; - if (mode === "Filled") { - ctx.moveTo(x_scaled, height_px); - ctx.lineTo(x_scaled, y); - } else { - ctx.moveTo(x_scaled, y); - } - } - } - } - if (mode === "Filled") { - if (in_path) { - ctx.lineTo( x_scaled, y_zero ); - ctx.lineTo( 0, y_zero ); - } - ctx.fill(); - } else { - ctx.stroke(); - } - return canvas; + // Paint line onto full canvas + var ctx = canvas.getContext("2d"); + var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, + this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); + painter.draw( ctx, width, height ); + + return $(canvas); } }); @@ -2232,187 +2156,34 @@ * Returns the number of slots used to pack features. */ incremental_slots: function(level, features, mode) { - // + // Get/create incremental slots for level. If display mode changed, // need to create new slots. - // + var inc_slots = this.inc_slots[level]; if (!inc_slots || (inc_slots.mode !== mode)) { - inc_slots = {}; - inc_slots.w_scale = level; + inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return CONTEXT.measureText( x ) } ); inc_slots.mode = mode; this.inc_slots[level] = inc_slots; - this.start_end_dct[level] = {}; } - - // - // If feature already exists in slots (from previously seen tiles), use the same slot, - // otherwise if not seen, add to "undone" list for slot calculation. - // - var w_scale = inc_slots.w_scale, - undone = [], slotted = [], - highest_slot = 0, // To measure how big to draw canvas - max_low = this.view.max_low; - // TODO: Should calculate zoom tile index, which will improve performance - // by only having to look at a smaller subset - // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } - for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i], - feature_uid = feature[0]; - if (inc_slots[feature_uid] !== undefined) { - highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); - slotted.push(inc_slots[feature_uid]); - } else { - undone.push(i); - } - } - - // - // Slot unslotted features. - // - var start_end_dct = this.start_end_dct[level]; - - // Find the first slot such that current feature doesn't overlap any other features in that slot. - // Returns -1 if no slot was found. - var find_slot = function(f_start, f_end) { - for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { - var has_overlap = false, - slot = start_end_dct[slot_num]; - if (slot !== undefined) { - // Iterate through features already in slot to see if current feature will fit. - for (var k = 0, k_len = slot.length; k < k_len; k++) { - var s_e = slot[k]; - if (f_end > s_e[0] && f_start < s_e[1]) { - // There is overlap - has_overlap = true; - break; - } - } - } - if (!has_overlap) { - return slot_num; - } - } - return -1; - }; - - // Do slotting. - for (var i = 0, len = undone.length; i < len; i++) { - var feature = features[undone[i]], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - feature_name = feature[3], - // Where to start, end drawing on screen. - f_start = Math.floor( (feature_start - max_low) * w_scale ), - f_end = Math.ceil( (feature_end - max_low) * w_scale ), - text_len = CONTEXT.measureText(feature_name).width, - text_align; - - // Update start, end drawing locations to include feature name. - // Try to put the name on the left, if not, put on right. - if (feature_name !== undefined && mode === "Pack") { - // Add gap for label spacing and extra pack space padding - text_len += (LABEL_SPACING + PACK_SPACING); - if (f_start - text_len >= 0) { - f_start -= text_len; - text_align = "left"; - } else { - f_end += text_len; - text_align = "right"; - } - } - - // Find slot. - var slot_num = find_slot(f_start, f_end); - /* - if (slot_num < 0) { - - TODO: this is not yet working -- - console.log(feature_uid, "looking for slot with text on the right"); - // Slot not found. If text was on left, try on right and see - // if slot can be found. - // TODO: are there any checks we need to do to ensure that text - // will fit on tile? - if (text_align === "left") { - f_start -= text_len; - f_end -= text_len; - text_align = "right"; - slot_num = find_slot(f_start, f_end); - } - if (slot_num >= 0) { - console.log(feature_uid, "found slot with text on the right"); - } - - } - */ - // Do slotting. - if (slot_num >= 0) { - // Add current feature to slot. - if (start_end_dct[slot_num] === undefined) { - start_end_dct[slot_num] = []; - } - start_end_dct[slot_num].push([f_start, f_end]); - inc_slots[feature_uid] = slot_num; - highest_slot = Math.max(highest_slot, slot_num); - } - else { - // TODO: remove this warning when skipped features are handled. - // Show warning for skipped feature. - //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); - } - } - - // Debugging: view slots data. - /* - for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { - var slot = start_end_dct[i]; - if (slot !== undefined) { - console.log(i, "*************"); - for (var k = 0, k_len = slot.length; k < k_len; k++) { - console.log("\t", slot[k][0], slot[k][1]); - } - } - } - */ - return highest_slot + 1; + + return inc_slots.slot_features( features ); }, /** * Draw summary tree on canvas. */ draw_summary_tree: function(canvas, points, delta, max, w_scale, required_height, tile_low, left_offset) { - var - // 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. - base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; - delta_x_px = Math.ceil(delta * w_scale); + // Add label to container div when displaying summary tree mode var max_label = $("<div />").addClass('yaxislabel'); max_label.text(max); - max_label.css({ position: "absolute", top: "22px", left: "10px" }); max_label.prependTo(this.container_div); - var ctx = canvas.get(0).getContext("2d"); - for (var i = 0, len = points.length; i < len; i++) { - var x = Math.floor( (points[i][0] - tile_low) * w_scale ); - var y = points[i][1]; - - if (!y) { continue; } - var y_px = y / max * required_height; - - ctx.fillStyle = "black"; - ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); - - // Draw number count if it can fit the number with some padding, otherwise things clump up - var text_padding_req_x = 4; - if (this.prefs.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { - ctx.fillStyle = "#666"; - ctx.textAlign = "center"; - ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); - } - } + // Paint summary tree into canvas + var ctx = canvas.getContext("2d"); + var painter = new SummaryTreePainter( points, delta, max, this.prefs.show_counts ); + painter.draw( ctx, w_scale, required_height, tile_low, left_offset ); }, /** * Draw feature. @@ -2591,10 +2362,6 @@ left_offset = this.left_offset, slots, required_height; - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - // // Set mode if Auto. // @@ -2637,21 +2404,23 @@ else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { // Calculate new slots incrementally for this new chunk of data and update height if necessary. required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; - slots = this.inc_slots[w_scale]; + slots = this.inc_slots[w_scale].slots; } // // Set up for drawing. // - canvas.get(0).width = width + left_offset; - canvas.get(0).height = required_height; + var canvas = this.view.canvas_manager.new_canvas(); + + canvas.width = width + left_offset; + canvas.height = required_height; if (result.dataset_type === "summary_tree") { // Increase canvas height in order to display max label. - canvas.get(0).height += LABEL_SPACING + CHAR_HEIGHT_PX; + canvas.height += LABEL_SPACING + CHAR_HEIGHT_PX; } parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); - var ctx = canvas.get(0).getContext("2d"); + var ctx = canvas.getContext("2d"); ctx.fillStyle = this.prefs.block_color; ctx.font = this.default_font; ctx.textAlign = "right"; @@ -2663,14 +2432,14 @@ if (mode === "summary_tree") { this.draw_summary_tree(canvas, result.data, result.delta, result.max, w_scale, required_height, tile_low, left_offset); - return canvas; + return $(canvas); } // // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red // to indicate region where message is applicable if (result.message) { - canvas.css({ + $(canvas).css({ "border-top": "1px solid red" }); @@ -2683,7 +2452,7 @@ // If there's no data, return. if (!result.data) { - return canvas; + return $(canvas); } } @@ -2726,7 +2495,7 @@ width, left_offset, ref_seq); } } - return canvas; + return $(canvas); } }); @@ -3127,4 +2896,315 @@ } }); +// ---- To be extracted ------------------------------------------------------ +// ---- Canvas management ---- + +var CanvasManager = function( document ) { + this.document = document; +} + +CanvasManager.prototype.new_canvas = function() { + var canvas = this.document.createElement("canvas"); + if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK + return canvas; +} + +// ---- Feature Packing ---- + +/** + * FeatureSlotter determines slots in which to draw features for vertical + * packing. + * + * This implementation is incremental, any feature assigned a slot will be + * retained for slotting future features. + */ +var FeatureSlotter = function ( w_scale, include_label, measureText ) { + this.slots = {}; + this.start_end_dct = {}; + this.w_scale = w_scale; + this.include_label = include_label; + this.measureText = measureText; +} + +/** + * Slot a set of features, `this.slots` will be updated with slots by id, and + * the largest slot required for the passed set of features is returned + */ +FeatureSlotter.prototype.slot_features = function( features ) { + var w_scale = this.w_scale, inc_slots = this.slots, start_end_dct = this.start_end_dct, + undone = [], slotted = [], highest_slot = 0; + + // If feature already exists in slots (from previously seen tiles), use the same slot, + // otherwise if not seen, add to "undone" list for slot calculation. + + // TODO: Should calculate zoom tile index, which will improve performance + // by only having to look at a smaller subset + // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } + for (var i = 0, len = features.length; i < len; i++) { + var feature = features[i], + feature_uid = feature[0]; + if (inc_slots[feature_uid] !== undefined) { + highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); + slotted.push(inc_slots[feature_uid]); + } else { + undone.push(i); + } + } + + // Slot unslotted features. + + // Find the first slot such that current feature doesn't overlap any other features in that slot. + // Returns -1 if no slot was found. + var find_slot = function(f_start, f_end) { + // TODO: Fix constants + for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { + var has_overlap = false, + slot = start_end_dct[slot_num]; + if (slot !== undefined) { + // Iterate through features already in slot to see if current feature will fit. + for (var k = 0, k_len = slot.length; k < k_len; k++) { + var s_e = slot[k]; + if (f_end > s_e[0] && f_start < s_e[1]) { + // There is overlap + has_overlap = true; + break; + } + } + } + if (!has_overlap) { + return slot_num; + } + } + return -1; + }; + + // Do slotting. + for (var i = 0, len = undone.length; i < len; i++) { + var feature = features[undone[i]], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + // Where to start, end drawing on screen. + f_start = Math.floor( feature_start * w_scale ), + f_end = Math.ceil( feature_end * w_scale ), + text_len = this.measureText(feature_name).width, + text_align; + + // Update start, end drawing locations to include feature name. + // Try to put the name on the left, if not, put on right. + if (feature_name !== undefined && this.include_label ) { + // Add gap for label spacing and extra pack space padding + // TODO: Fix constants + text_len += (LABEL_SPACING + PACK_SPACING); + if (f_start - text_len >= 0) { + f_start -= text_len; + text_align = "left"; + } else { + f_end += text_len; + text_align = "right"; + } + } + + // Find slot. + var slot_num = find_slot(f_start, f_end); + /* + if (slot_num < 0) { + + TODO: this is not yet working -- + console.log(feature_uid, "looking for slot with text on the right"); + // Slot not found. If text was on left, try on right and see + // if slot can be found. + // TODO: are there any checks we need to do to ensure that text + // will fit on tile? + if (text_align === "left") { + f_start -= text_len; + f_end -= text_len; + text_align = "right"; + slot_num = find_slot(f_start, f_end); + } + if (slot_num >= 0) { + console.log(feature_uid, "found slot with text on the right"); + } + + } + */ + // Do slotting. + if (slot_num >= 0) { + // Add current feature to slot. + if (start_end_dct[slot_num] === undefined) { + start_end_dct[slot_num] = []; + } + start_end_dct[slot_num].push([f_start, f_end]); + inc_slots[feature_uid] = slot_num; + highest_slot = Math.max(highest_slot, slot_num); + } + else { + // TODO: remove this warning when skipped features are handled. + // Show warning for skipped feature. + //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + } + } + + // Debugging: view slots data. + /* + for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { + var slot = start_end_dct[i]; + if (slot !== undefined) { + console.log(i, "*************"); + for (var k = 0, k_len = slot.length; k < k_len; k++) { + console.log("\t", slot[k][0], slot[k][1]); + } + } + } + */ + return highest_slot + 1; +} + +// ---- Painters ---- + +/** + * SummaryTreePainter, a histogram showing number of intervals in a region + */ +var SummaryTreePainter = function( data, delta, max, show_counts ) { + this.data = data; + this.delta = delta; + this.max = max; + this.show_counts = show_counts; +} + +SummaryTreePainter.prototype.draw = function( ctx, w_scale, required_height, tile_low, left_offset ) { + + var + points = this.data, delta = this.delta, max = this.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. + base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + delta_x_px = Math.ceil(delta * w_scale); + + ctx.save(); + + for (var i = 0, len = points.length; i < len; i++) { + var x = Math.floor( (points[i][0] - tile_low) * w_scale ); + var y = points[i][1]; + + if (!y) { continue; } + var y_px = y / max * required_height; + + ctx.fillStyle = "black"; + ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); + + // Draw number count if it can fit the number with some padding, otherwise things clump up + var text_padding_req_x = 4; + if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { + ctx.fillStyle = "#666"; + ctx.textAlign = "center"; + ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); + } + } + + ctx.restore(); +} + +var LinePainter = function( data, view_start, view_end, min_value, max_value, color, mode ) { + this.data = data; + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.min_value = min_value; + this.max_value = max_value; + this.color = color; + this.mode = mode; +} + +LinePainter.prototype.draw = function( ctx, width, height ) { + var + in_path = false, + min_value = this.min_value, + max_value = this.max_value, + vertical_range = max_value - min_value, + height_px = height, + view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range, + mode = this.mode, + data = this.data; + + ctx.save(); + + // Pixel position of 0 on the y axis + var y_zero = Math.round( height + min_value / vertical_range * height ); + + // Line at 0.0 + if ( mode !== "Intensity" ) { + ctx.beginPath(); + ctx.moveTo( 0, y_zero ); + ctx.lineTo( width, y_zero ); + // ctx.lineWidth = 0.5; + ctx.fillStyle = "#aaa"; + ctx.stroke(); + } + + ctx.beginPath(); + ctx.fillStyle = this.color; + var x_scaled, y, delta_x_px; + if (data.length > 1) { + delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); + } else { + delta_x_px = 10; + } + for (var i = 0, len = data.length; i < len; i++) { + x_scaled = Math.round((data[i][0] - view_start) * w_scale); + y = data[i][1]; + if (y === null) { + if (in_path && mode === "Filled") { + ctx.lineTo(x_scaled, height_px); + } + in_path = false; + continue; + } + if (y < min_value) { + y = min_value; + } else if (y > max_value) { + y = max_value; + } + + if (mode === "Histogram") { + // y becomes the bar height in pixels, which is the negated for canvas coords + y = Math.round( y / vertical_range * height_px ); + ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); + } else if (mode === "Intensity" ) { + y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); + ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; + ctx.fillRect(x_scaled, 0, delta_x_px, height_px); + } else { + // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); + y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); + // console.log(canvas.get(0).height, canvas.get(0).width); + if (in_path) { + ctx.lineTo(x_scaled, y); + } else { + in_path = true; + if (mode === "Filled") { + ctx.moveTo(x_scaled, height_px); + ctx.lineTo(x_scaled, y); + } else { + ctx.moveTo(x_scaled, y); + } + } + } + } + if (mode === "Filled") { + if (in_path) { + ctx.lineTo( x_scaled, y_zero ); + ctx.lineTo( 0, y_zero ); + } + ctx.fill(); + } else { + ctx.stroke(); + } + + ctx.restore(); +} \ No newline at end of file http://bitbucket.org/galaxy/galaxy-central/changeset/b543cf3a0901/ changeset: r5310:b543cf3a0901 user: james_taylor date: 2011-03-30 00:40:18 summary: Streamlining feature track drawing in preparation for pulling out a Painter, cleaning up Painter interface (not quite a common interface yet) affected #: 1 file (35 bytes) --- a/static/scripts/trackster.js Tue Mar 29 13:56:57 2011 -0400 +++ b/static/scripts/trackster.js Tue Mar 29 18:40:18 2011 -0400 @@ -2170,22 +2170,6 @@ return inc_slots.slot_features( features ); }, /** - * Draw summary tree on canvas. - */ - draw_summary_tree: function(canvas, points, delta, max, w_scale, required_height, tile_low, left_offset) { - - // Add label to container div when displaying summary tree mode - var max_label = $("<div />").addClass('yaxislabel'); - max_label.text(max); - max_label.css({ position: "absolute", top: "22px", left: "10px" }); - max_label.prependTo(this.container_div); - - // Paint summary tree into canvas - var ctx = canvas.getContext("2d"); - var painter = new SummaryTreePainter( points, delta, max, this.prefs.show_counts ); - painter.draw( ctx, w_scale, required_height, tile_low, left_offset ); - }, - /** * Draw feature. */ draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset) { @@ -2346,25 +2330,18 @@ * Draw FeatureTrack tile. */ draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { - var track = this; - var tile_low = tile_index * DENSITY * resolution, + var track = this, + tile_low = tile_index * DENSITY * resolution, tile_high = ( tile_index + 1 ) * DENSITY * resolution, tile_span = tile_high - tile_low, - params = { hda_ldda: track.hda_ldda, dataset_id: track.dataset_id, - resolution: this.view.resolution, mode: this.mode }; - - // - // Create/set/compute some useful vars. - // - var width = Math.ceil( tile_span * w_scale ), + width = Math.ceil( tile_span * w_scale ), mode = this.mode, min_height = 25, left_offset = this.left_offset, - slots, required_height; + slots, + required_height; - // - // Set mode if Auto. - // + // Set display mode if Auto. if (mode === "Auto") { if (result.dataset_type === "summary_tree") { mode = result.dataset_type; @@ -2389,19 +2366,43 @@ } } } + + // Drawing the summary tree (feature coverage histogram) + if ( mode === "summary_tree" ) { + // Set height of parent_element + required_height = this.summary_draw_height; + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); + // 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: "22px", left: "10px" }); + max_label.prependTo(this.container_div); + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width + left_offset; + // Extra padding at top of summary tree + canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + // Paint summary tree into canvas + var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); + var ctx = canvas.getContext("2d"); + // Deal with left_offset by translating + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height ); + // Wrapped canvas element is returned + return $(canvas); + } + // Start dealing with row-by-row tracks + + // y_scale is the height per row var y_scale = this.get_y_scale(mode); - // // Pack reads, set required height. - // - if (mode === "summary_tree") { - required_height = this.summary_draw_height; - } if (mode === "Dense") { required_height = min_height; - } - else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { + } else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { // Calculate new slots incrementally for this new chunk of data and update height if necessary. required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; slots = this.inc_slots[w_scale].slots; @@ -2414,10 +2415,7 @@ canvas.width = width + left_offset; canvas.height = required_height; - if (result.dataset_type === "summary_tree") { - // Increase canvas height in order to display max label. - canvas.height += LABEL_SPACING + CHAR_HEIGHT_PX; - } + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); var ctx = canvas.getContext("2d"); @@ -2426,16 +2424,6 @@ ctx.textAlign = "right"; this.container_div.find(".yaxislabel").remove(); - // - // Draw summary tree. If tree is drawn, canvas is returned. - // - if (mode === "summary_tree") { - this.draw_summary_tree(canvas, result.data, result.delta, result.max, w_scale, required_height, - tile_low, left_offset); - return $(canvas); - } - - // // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red // to indicate region where message is applicable if (result.message) { @@ -3067,41 +3055,50 @@ /** * SummaryTreePainter, a histogram showing number of intervals in a region */ -var SummaryTreePainter = function( data, delta, max, show_counts ) { +var SummaryTreePainter = function( data, delta, max, view_start, view_end, show_counts ) { + // Data and data properties this.data = data; this.delta = delta; this.max = max; + // View + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs this.show_counts = show_counts; } -SummaryTreePainter.prototype.draw = function( ctx, w_scale, required_height, tile_low, left_offset ) { +SummaryTreePainter.prototype.draw = function( ctx, width, height ) { - var - points = this.data, delta = this.delta, max = this.max, + var view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range; + + var points = this.data, delta = this.delta, max = this.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. - base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; delta_x_px = Math.ceil(delta * w_scale); ctx.save(); for (var i = 0, len = points.length; i < len; i++) { - var x = Math.floor( (points[i][0] - tile_low) * w_scale ); + + var x = Math.floor( (points[i][0] - view_start) * w_scale ); var y = points[i][1]; if (!y) { continue; } - var y_px = y / max * required_height; + var y_px = y / max * height; ctx.fillStyle = "black"; - ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); + ctx.fillRect( x, base_y - y_px, delta_x_px, y_px ); // Draw number count if it can fit the number with some padding, otherwise things clump up var text_padding_req_x = 4; if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { ctx.fillStyle = "#666"; ctx.textAlign = "center"; - ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); + ctx.fillText(y, x + (delta_x_px/2), 10); } } @@ -3109,7 +3106,9 @@ } var LinePainter = function( data, view_start, view_end, min_value, max_value, color, mode ) { + // Data and data properties this.data = data; + // View this.view_start = view_start; this.view_end = view_end; // Drawing prefs http://bitbucket.org/galaxy/galaxy-central/changeset/4789655a57db/ changeset: r5311:4789655a57db user: james_taylor date: 2011-03-30 00:40:24 summary: Automated merge with https://bitbucket.org/galaxy/galaxy-central affected #: 1 file (337 bytes) --- a/static/scripts/trackster.js Tue Mar 29 16:27:35 2011 -0400 +++ b/static/scripts/trackster.js Tue Mar 29 18:40:24 2011 -0400 @@ -372,6 +372,7 @@ this.min_separation = 30; this.has_changes = false; this.init( callback ); + this.canvas_manager = new CanvasManager( container.get(0).ownerDocument ); this.reset(); }; $.extend( View.prototype, { @@ -1948,20 +1949,17 @@ track.content_div.css("height", "0px"); return; } - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - var ctx = canvas.get(0).getContext("2d"); - canvas.get(0).width = Math.ceil( tile_length * w_scale + track.left_offset); - canvas.get(0).height = track.height_px; + var canvas = this.view.canvas_manager.new_canvas(); + var ctx = canvas.getContext("2d"); + canvas.width = Math.ceil( tile_length * w_scale + track.left_offset); + canvas.height = track.height_px; ctx.font = DEFAULT_FONT; ctx.textAlign = "center"; for (var c = 0, str_len = seq.length; c < str_len; c++) { var c_start = Math.round(c * w_scale); ctx.fillText(seq[c], c_start + track.left_offset, 10); } - return canvas; + return $(canvas); } this.content_div.css("height", "0px"); } @@ -2009,10 +2007,14 @@ this.height_px = this.track_config.values.height; this.vertical_range = this.track_config.values.max_value - this.track_config.values.min_value; - // Add control for resizing - // Trickery here to deal with the hovering drag handle, can probably be - // pulled out and reused. - (function( track ){ + this.add_resize_handle(); +}; +$.extend(LineTrack.prototype, TiledTrack.prototype, { + add_resize_handle: function () { + // Add control for resizing + // Trickery here to deal with the hovering drag handle, can probably be + // pulled out and reused. + var track = this; var in_handle = false; var in_drag = false; var drag_control = $( "<div class='track-resize'>" ) @@ -2040,9 +2042,7 @@ if ( ! in_handle ) { drag_control.hide(); } track.track_config.values.height = track.height_px; }).appendTo( track.container_div ); - })(this); -}; -$.extend(LineTrack.prototype, TiledTrack.prototype, { + }, predraw_init: function() { var track = this, track_id = track.view.tracks.indexOf(track); @@ -2083,99 +2083,23 @@ return; } - var track = this, - tile_low = tile_index * DENSITY * resolution, + var tile_low = tile_index * DENSITY * resolution, tile_length = DENSITY * resolution, - key = resolution + "_" + tile_index, - params = { hda_ldda: this.hda_ldda, dataset_id: this.dataset_id, resolution: this.view.resolution }; + width = Math.ceil( tile_length * w_scale ), + height = this.height_px; + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width, + canvas.height = height; - var canvas = document.createElement("canvas"), - data = result.data; - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - canvas.get(0).width = Math.ceil( tile_length * w_scale ); - canvas.get(0).height = track.height_px; - var ctx = canvas.get(0).getContext("2d"), - in_path = false, - min_value = track.prefs.min_value, - max_value = track.prefs.max_value, - vertical_range = track.vertical_range, - total_frequency = track.total_frequency, - height_px = track.height_px, - mode = track.mode; - - // Pixel position of 0 on the y axis - var y_zero = Math.round( height_px + min_value / vertical_range * height_px ); - - // Line at 0.0 - ctx.beginPath(); - ctx.moveTo( 0, y_zero ); - ctx.lineTo( tile_length * w_scale, y_zero ); - // ctx.lineWidth = 0.5; - ctx.fillStyle = "#aaa"; - ctx.stroke(); - - ctx.beginPath(); - ctx.fillStyle = track.prefs.color; - var x_scaled, y, delta_x_px; - if (data.length > 1) { - delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); - } else { - delta_x_px = 10; - } - for (var i = 0, len = data.length; i < len; i++) { - x_scaled = Math.round((data[i][0] - tile_low) * w_scale); - y = data[i][1]; - if (y === null) { - if (in_path && mode === "Filled") { - ctx.lineTo(x_scaled, height_px); - } - in_path = false; - continue; - } - if (y < min_value) { - y = min_value; - } else if (y > max_value) { - y = max_value; - } - - if (mode === "Histogram") { - // y becomes the bar height in pixels, which is the negated for canvas coords - y = Math.round( y / vertical_range * height_px ); - ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); - } else if (mode === "Intensity" ) { - y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); - ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; - ctx.fillRect(x_scaled, 0, delta_x_px, height_px); - } else { - // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); - y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); - // console.log(canvas.get(0).height, canvas.get(0).width); - if (in_path) { - ctx.lineTo(x_scaled, y); - } else { - in_path = true; - if (mode === "Filled") { - ctx.moveTo(x_scaled, height_px); - ctx.lineTo(x_scaled, y); - } else { - ctx.moveTo(x_scaled, y); - } - } - } - } - if (mode === "Filled") { - if (in_path) { - ctx.lineTo( x_scaled, y_zero ); - ctx.lineTo( 0, y_zero ); - } - ctx.fill(); - } else { - ctx.stroke(); - } - return canvas; + // Paint line onto full canvas + var ctx = canvas.getContext("2d"); + var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, + this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); + painter.draw( ctx, width, height ); + + return $(canvas); } }); @@ -2235,187 +2159,18 @@ * Returns the number of slots used to pack features. */ incremental_slots: function(level, features, mode) { - // + // Get/create incremental slots for level. If display mode changed, // need to create new slots. - // + var inc_slots = this.inc_slots[level]; if (!inc_slots || (inc_slots.mode !== mode)) { - inc_slots = {}; - inc_slots.w_scale = level; + inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return CONTEXT.measureText( x ) } ); inc_slots.mode = mode; this.inc_slots[level] = inc_slots; - this.start_end_dct[level] = {}; } - - // - // If feature already exists in slots (from previously seen tiles), use the same slot, - // otherwise if not seen, add to "undone" list for slot calculation. - // - var w_scale = inc_slots.w_scale, - undone = [], slotted = [], - highest_slot = 0, // To measure how big to draw canvas - max_low = this.view.max_low; - // TODO: Should calculate zoom tile index, which will improve performance - // by only having to look at a smaller subset - // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } - for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i], - feature_uid = feature[0]; - if (inc_slots[feature_uid] !== undefined) { - highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); - slotted.push(inc_slots[feature_uid]); - } else { - undone.push(i); - } - } - - // - // Slot unslotted features. - // - var start_end_dct = this.start_end_dct[level]; - - // Find the first slot such that current feature doesn't overlap any other features in that slot. - // Returns -1 if no slot was found. - var find_slot = function(f_start, f_end) { - for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { - var has_overlap = false, - slot = start_end_dct[slot_num]; - if (slot !== undefined) { - // Iterate through features already in slot to see if current feature will fit. - for (var k = 0, k_len = slot.length; k < k_len; k++) { - var s_e = slot[k]; - if (f_end > s_e[0] && f_start < s_e[1]) { - // There is overlap - has_overlap = true; - break; - } - } - } - if (!has_overlap) { - return slot_num; - } - } - return -1; - }; - - // Do slotting. - for (var i = 0, len = undone.length; i < len; i++) { - var feature = features[undone[i]], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - feature_name = feature[3], - // Where to start, end drawing on screen. - f_start = Math.floor( (feature_start - max_low) * w_scale ), - f_end = Math.ceil( (feature_end - max_low) * w_scale ), - text_len = CONTEXT.measureText(feature_name).width, - text_align; - - // Update start, end drawing locations to include feature name. - // Try to put the name on the left, if not, put on right. - if (feature_name !== undefined && mode === "Pack") { - // Add gap for label spacing and extra pack space padding - text_len += (LABEL_SPACING + PACK_SPACING); - if (f_start - text_len >= 0) { - f_start -= text_len; - text_align = "left"; - } else { - f_end += text_len; - text_align = "right"; - } - } - - // Find slot. - var slot_num = find_slot(f_start, f_end); - /* - if (slot_num < 0) { - - TODO: this is not yet working -- - console.log(feature_uid, "looking for slot with text on the right"); - // Slot not found. If text was on left, try on right and see - // if slot can be found. - // TODO: are there any checks we need to do to ensure that text - // will fit on tile? - if (text_align === "left") { - f_start -= text_len; - f_end -= text_len; - text_align = "right"; - slot_num = find_slot(f_start, f_end); - } - if (slot_num >= 0) { - console.log(feature_uid, "found slot with text on the right"); - } - - } - */ - // Do slotting. - if (slot_num >= 0) { - // Add current feature to slot. - if (start_end_dct[slot_num] === undefined) { - start_end_dct[slot_num] = []; - } - start_end_dct[slot_num].push([f_start, f_end]); - inc_slots[feature_uid] = slot_num; - highest_slot = Math.max(highest_slot, slot_num); - } - else { - // TODO: remove this warning when skipped features are handled. - // Show warning for skipped feature. - //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); - } - } - - // Debugging: view slots data. - /* - for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { - var slot = start_end_dct[i]; - if (slot !== undefined) { - console.log(i, "*************"); - for (var k = 0, k_len = slot.length; k < k_len; k++) { - console.log("\t", slot[k][0], slot[k][1]); - } - } - } - */ - return highest_slot + 1; - }, - /** - * Draw summary tree on canvas. - */ - draw_summary_tree: function(canvas, points, delta, max, w_scale, required_height, tile_low, left_offset) { - var - // 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. - base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; - delta_x_px = Math.ceil(delta * w_scale); - - var max_label = $("<div />").addClass('yaxislabel'); - max_label.text(max); - - max_label.css({ position: "absolute", top: "22px", left: "10px" }); - max_label.prependTo(this.container_div); - - var ctx = canvas.get(0).getContext("2d"); - for (var i = 0, len = points.length; i < len; i++) { - var x = Math.floor( (points[i][0] - tile_low) * w_scale ); - var y = points[i][1]; - - if (!y) { continue; } - var y_px = y / max * required_height; - - ctx.fillStyle = "black"; - ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); - - // Draw number count if it can fit the number with some padding, otherwise things clump up - var text_padding_req_x = 4; - if (this.prefs.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { - ctx.fillStyle = "#666"; - ctx.textAlign = "center"; - ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); - } - } + + return inc_slots.slot_features( features ); }, /** * Draw feature. @@ -2578,29 +2333,18 @@ * Draw FeatureTrack tile. */ draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { - var track = this; - var tile_low = tile_index * DENSITY * resolution, + var track = this, + tile_low = tile_index * DENSITY * resolution, tile_high = ( tile_index + 1 ) * DENSITY * resolution, tile_span = tile_high - tile_low, - params = { hda_ldda: track.hda_ldda, dataset_id: track.dataset_id, - resolution: this.view.resolution, mode: this.mode }; - - // - // Create/set/compute some useful vars. - // - var width = Math.ceil( tile_span * w_scale ), + width = Math.ceil( tile_span * w_scale ), mode = this.mode, min_height = 25, left_offset = this.left_offset, - slots, required_height; + slots, + required_height; - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - // - // Set mode if Auto. - // + // Set display mode if Auto. if (mode === "Auto") { if (result.dataset_type === "summary_tree") { mode = result.dataset_type; @@ -2625,55 +2369,68 @@ } } } + + // Drawing the summary tree (feature coverage histogram) + if ( mode === "summary_tree" ) { + // Set height of parent_element + required_height = this.summary_draw_height; + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); + // 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: "22px", left: "10px" }); + max_label.prependTo(this.container_div); + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width + left_offset; + // Extra padding at top of summary tree + canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + // Paint summary tree into canvas + var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); + var ctx = canvas.getContext("2d"); + // Deal with left_offset by translating + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height ); + // Wrapped canvas element is returned + return $(canvas); + } + // Start dealing with row-by-row tracks + + // y_scale is the height per row var y_scale = this.get_y_scale(mode); - // // Pack reads, set required height. - // - if (mode === "summary_tree") { - required_height = this.summary_draw_height; - } if (mode === "Dense") { required_height = min_height; - } - else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { + } else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { // Calculate new slots incrementally for this new chunk of data and update height if necessary. required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; - slots = this.inc_slots[w_scale]; + slots = this.inc_slots[w_scale].slots; } // // Set up for drawing. // - canvas.get(0).width = width + left_offset; - canvas.get(0).height = required_height; - if (result.dataset_type === "summary_tree") { - // Increase canvas height in order to display max label. - canvas.get(0).height += LABEL_SPACING + CHAR_HEIGHT_PX; - } + var canvas = this.view.canvas_manager.new_canvas(); + + canvas.width = width + left_offset; + canvas.height = required_height; + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); - var ctx = canvas.get(0).getContext("2d"); + var ctx = canvas.getContext("2d"); ctx.fillStyle = this.prefs.block_color; ctx.font = this.default_font; ctx.textAlign = "right"; this.container_div.find(".yaxislabel").remove(); - // - // Draw summary tree. If tree is drawn, canvas is returned. - // - if (mode === "summary_tree") { - this.draw_summary_tree(canvas, result.data, result.delta, result.max, w_scale, required_height, - tile_low, left_offset); - return canvas; - } - - // // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red // to indicate region where message is applicable if (result.message) { - canvas.css({ + $(canvas).css({ "border-top": "1px solid red" }); @@ -2686,7 +2443,7 @@ // If there's no data, return. if (!result.data) { - return canvas; + return $(canvas); } } @@ -2729,7 +2486,7 @@ width, left_offset, ref_seq); } } - return canvas; + return $(canvas); } }); @@ -3130,4 +2887,326 @@ } }); +// ---- To be extracted ------------------------------------------------------ +// ---- Canvas management ---- + +var CanvasManager = function( document ) { + this.document = document; +} + +CanvasManager.prototype.new_canvas = function() { + var canvas = this.document.createElement("canvas"); + if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK + return canvas; +} + +// ---- Feature Packing ---- + +/** + * FeatureSlotter determines slots in which to draw features for vertical + * packing. + * + * This implementation is incremental, any feature assigned a slot will be + * retained for slotting future features. + */ +var FeatureSlotter = function ( w_scale, include_label, measureText ) { + this.slots = {}; + this.start_end_dct = {}; + this.w_scale = w_scale; + this.include_label = include_label; + this.measureText = measureText; +} + +/** + * Slot a set of features, `this.slots` will be updated with slots by id, and + * the largest slot required for the passed set of features is returned + */ +FeatureSlotter.prototype.slot_features = function( features ) { + var w_scale = this.w_scale, inc_slots = this.slots, start_end_dct = this.start_end_dct, + undone = [], slotted = [], highest_slot = 0; + + // If feature already exists in slots (from previously seen tiles), use the same slot, + // otherwise if not seen, add to "undone" list for slot calculation. + + // TODO: Should calculate zoom tile index, which will improve performance + // by only having to look at a smaller subset + // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } + for (var i = 0, len = features.length; i < len; i++) { + var feature = features[i], + feature_uid = feature[0]; + if (inc_slots[feature_uid] !== undefined) { + highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); + slotted.push(inc_slots[feature_uid]); + } else { + undone.push(i); + } + } + + // Slot unslotted features. + + // Find the first slot such that current feature doesn't overlap any other features in that slot. + // Returns -1 if no slot was found. + var find_slot = function(f_start, f_end) { + // TODO: Fix constants + for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { + var has_overlap = false, + slot = start_end_dct[slot_num]; + if (slot !== undefined) { + // Iterate through features already in slot to see if current feature will fit. + for (var k = 0, k_len = slot.length; k < k_len; k++) { + var s_e = slot[k]; + if (f_end > s_e[0] && f_start < s_e[1]) { + // There is overlap + has_overlap = true; + break; + } + } + } + if (!has_overlap) { + return slot_num; + } + } + return -1; + }; + + // Do slotting. + for (var i = 0, len = undone.length; i < len; i++) { + var feature = features[undone[i]], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + // Where to start, end drawing on screen. + f_start = Math.floor( feature_start * w_scale ), + f_end = Math.ceil( feature_end * w_scale ), + text_len = this.measureText(feature_name).width, + text_align; + + // Update start, end drawing locations to include feature name. + // Try to put the name on the left, if not, put on right. + if (feature_name !== undefined && this.include_label ) { + // Add gap for label spacing and extra pack space padding + // TODO: Fix constants + text_len += (LABEL_SPACING + PACK_SPACING); + if (f_start - text_len >= 0) { + f_start -= text_len; + text_align = "left"; + } else { + f_end += text_len; + text_align = "right"; + } + } + + // Find slot. + var slot_num = find_slot(f_start, f_end); + /* + if (slot_num < 0) { + + TODO: this is not yet working -- + console.log(feature_uid, "looking for slot with text on the right"); + // Slot not found. If text was on left, try on right and see + // if slot can be found. + // TODO: are there any checks we need to do to ensure that text + // will fit on tile? + if (text_align === "left") { + f_start -= text_len; + f_end -= text_len; + text_align = "right"; + slot_num = find_slot(f_start, f_end); + } + if (slot_num >= 0) { + console.log(feature_uid, "found slot with text on the right"); + } + + } + */ + // Do slotting. + if (slot_num >= 0) { + // Add current feature to slot. + if (start_end_dct[slot_num] === undefined) { + start_end_dct[slot_num] = []; + } + start_end_dct[slot_num].push([f_start, f_end]); + inc_slots[feature_uid] = slot_num; + highest_slot = Math.max(highest_slot, slot_num); + } + else { + // TODO: remove this warning when skipped features are handled. + // Show warning for skipped feature. + //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + } + } + + // Debugging: view slots data. + /* + for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { + var slot = start_end_dct[i]; + if (slot !== undefined) { + console.log(i, "*************"); + for (var k = 0, k_len = slot.length; k < k_len; k++) { + console.log("\t", slot[k][0], slot[k][1]); + } + } + } + */ + return highest_slot + 1; +} + +// ---- Painters ---- + +/** + * SummaryTreePainter, a histogram showing number of intervals in a region + */ +var SummaryTreePainter = function( data, delta, max, view_start, view_end, show_counts ) { + // Data and data properties + this.data = data; + this.delta = delta; + this.max = max; + // View + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.show_counts = show_counts; +} + +SummaryTreePainter.prototype.draw = function( ctx, width, height ) { + + var view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range; + + var points = this.data, delta = this.delta, max = this.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. + base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; + delta_x_px = Math.ceil(delta * w_scale); + + ctx.save(); + + for (var i = 0, len = points.length; i < len; i++) { + + var x = Math.floor( (points[i][0] - view_start) * w_scale ); + var y = points[i][1]; + + if (!y) { continue; } + var y_px = y / max * height; + + ctx.fillStyle = "black"; + ctx.fillRect( x, base_y - y_px, delta_x_px, y_px ); + + // Draw number count if it can fit the number with some padding, otherwise things clump up + var text_padding_req_x = 4; + if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { + ctx.fillStyle = "#666"; + ctx.textAlign = "center"; + ctx.fillText(y, x + (delta_x_px/2), 10); + } + } + + ctx.restore(); +} + +var LinePainter = function( data, view_start, view_end, min_value, max_value, color, mode ) { + // Data and data properties + this.data = data; + // View + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.min_value = min_value; + this.max_value = max_value; + this.color = color; + this.mode = mode; +} + +LinePainter.prototype.draw = function( ctx, width, height ) { + var + in_path = false, + min_value = this.min_value, + max_value = this.max_value, + vertical_range = max_value - min_value, + height_px = height, + view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range, + mode = this.mode, + data = this.data; + + ctx.save(); + + // Pixel position of 0 on the y axis + var y_zero = Math.round( height + min_value / vertical_range * height ); + + // Line at 0.0 + if ( mode !== "Intensity" ) { + ctx.beginPath(); + ctx.moveTo( 0, y_zero ); + ctx.lineTo( width, y_zero ); + // ctx.lineWidth = 0.5; + ctx.fillStyle = "#aaa"; + ctx.stroke(); + } + + ctx.beginPath(); + ctx.fillStyle = this.color; + var x_scaled, y, delta_x_px; + if (data.length > 1) { + delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); + } else { + delta_x_px = 10; + } + for (var i = 0, len = data.length; i < len; i++) { + x_scaled = Math.round((data[i][0] - view_start) * w_scale); + y = data[i][1]; + if (y === null) { + if (in_path && mode === "Filled") { + ctx.lineTo(x_scaled, height_px); + } + in_path = false; + continue; + } + if (y < min_value) { + y = min_value; + } else if (y > max_value) { + y = max_value; + } + + if (mode === "Histogram") { + // y becomes the bar height in pixels, which is the negated for canvas coords + y = Math.round( y / vertical_range * height_px ); + ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); + } else if (mode === "Intensity" ) { + y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); + ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; + ctx.fillRect(x_scaled, 0, delta_x_px, height_px); + } else { + // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); + y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); + // console.log(canvas.get(0).height, canvas.get(0).width); + if (in_path) { + ctx.lineTo(x_scaled, y); + } else { + in_path = true; + if (mode === "Filled") { + ctx.moveTo(x_scaled, height_px); + ctx.lineTo(x_scaled, y); + } else { + ctx.moveTo(x_scaled, y); + } + } + } + } + if (mode === "Filled") { + if (in_path) { + ctx.lineTo( x_scaled, y_zero ); + ctx.lineTo( 0, y_zero ); + } + ctx.fill(); + } else { + ctx.stroke(); + } + + ctx.restore(); +} \ No newline at end of file http://bitbucket.org/galaxy/galaxy-central/changeset/5b89e71b55ec/ changeset: r5312:5b89e71b55ec user: james_taylor date: 2011-03-30 19:01:41 summary: Automated merge with https://bitbucket.org/galaxy/galaxy-central affected #: 1 file (337 bytes) --- a/static/scripts/trackster.js Wed Mar 30 11:44:08 2011 -0400 +++ b/static/scripts/trackster.js Wed Mar 30 13:01:41 2011 -0400 @@ -372,6 +372,7 @@ this.min_separation = 30; this.has_changes = false; this.init( callback ); + this.canvas_manager = new CanvasManager( container.get(0).ownerDocument ); this.reset(); }; $.extend( View.prototype, { @@ -1949,20 +1950,17 @@ track.content_div.css("height", "0px"); return; } - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - var ctx = canvas.get(0).getContext("2d"); - canvas.get(0).width = Math.ceil( tile_length * w_scale + track.left_offset); - canvas.get(0).height = track.height_px; + var canvas = this.view.canvas_manager.new_canvas(); + var ctx = canvas.getContext("2d"); + canvas.width = Math.ceil( tile_length * w_scale + track.left_offset); + canvas.height = track.height_px; ctx.font = DEFAULT_FONT; ctx.textAlign = "center"; for (var c = 0, str_len = seq.length; c < str_len; c++) { var c_start = Math.round(c * w_scale); ctx.fillText(seq[c], c_start + track.left_offset, 10); } - return canvas; + return $(canvas); } this.content_div.css("height", "0px"); } @@ -2010,10 +2008,14 @@ this.height_px = this.track_config.values.height; this.vertical_range = this.track_config.values.max_value - this.track_config.values.min_value; - // Add control for resizing - // Trickery here to deal with the hovering drag handle, can probably be - // pulled out and reused. - (function( track ){ + this.add_resize_handle(); +}; +$.extend(LineTrack.prototype, TiledTrack.prototype, { + add_resize_handle: function () { + // Add control for resizing + // Trickery here to deal with the hovering drag handle, can probably be + // pulled out and reused. + var track = this; var in_handle = false; var in_drag = false; var drag_control = $( "<div class='track-resize'>" ) @@ -2041,9 +2043,7 @@ if ( ! in_handle ) { drag_control.hide(); } track.track_config.values.height = track.height_px; }).appendTo( track.container_div ); - })(this); -}; -$.extend(LineTrack.prototype, TiledTrack.prototype, { + }, predraw_init: function() { var track = this, track_id = track.view.tracks.indexOf(track); @@ -2084,99 +2084,23 @@ return; } - var track = this, - tile_low = tile_index * DENSITY * resolution, + var tile_low = tile_index * DENSITY * resolution, tile_length = DENSITY * resolution, - key = resolution + "_" + tile_index, - params = { hda_ldda: this.hda_ldda, dataset_id: this.dataset_id, resolution: this.view.resolution }; + width = Math.ceil( tile_length * w_scale ), + height = this.height_px; + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width, + canvas.height = height; - var canvas = document.createElement("canvas"), - data = result.data; - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - canvas.get(0).width = Math.ceil( tile_length * w_scale ); - canvas.get(0).height = track.height_px; - var ctx = canvas.get(0).getContext("2d"), - in_path = false, - min_value = track.prefs.min_value, - max_value = track.prefs.max_value, - vertical_range = track.vertical_range, - total_frequency = track.total_frequency, - height_px = track.height_px, - mode = track.mode; - - // Pixel position of 0 on the y axis - var y_zero = Math.round( height_px + min_value / vertical_range * height_px ); - - // Line at 0.0 - ctx.beginPath(); - ctx.moveTo( 0, y_zero ); - ctx.lineTo( tile_length * w_scale, y_zero ); - // ctx.lineWidth = 0.5; - ctx.fillStyle = "#aaa"; - ctx.stroke(); - - ctx.beginPath(); - ctx.fillStyle = track.prefs.color; - var x_scaled, y, delta_x_px; - if (data.length > 1) { - delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); - } else { - delta_x_px = 10; - } - for (var i = 0, len = data.length; i < len; i++) { - x_scaled = Math.round((data[i][0] - tile_low) * w_scale); - y = data[i][1]; - if (y === null) { - if (in_path && mode === "Filled") { - ctx.lineTo(x_scaled, height_px); - } - in_path = false; - continue; - } - if (y < min_value) { - y = min_value; - } else if (y > max_value) { - y = max_value; - } - - if (mode === "Histogram") { - // y becomes the bar height in pixels, which is the negated for canvas coords - y = Math.round( y / vertical_range * height_px ); - ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); - } else if (mode === "Intensity" ) { - y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); - ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; - ctx.fillRect(x_scaled, 0, delta_x_px, height_px); - } else { - // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); - y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); - // console.log(canvas.get(0).height, canvas.get(0).width); - if (in_path) { - ctx.lineTo(x_scaled, y); - } else { - in_path = true; - if (mode === "Filled") { - ctx.moveTo(x_scaled, height_px); - ctx.lineTo(x_scaled, y); - } else { - ctx.moveTo(x_scaled, y); - } - } - } - } - if (mode === "Filled") { - if (in_path) { - ctx.lineTo( x_scaled, y_zero ); - ctx.lineTo( 0, y_zero ); - } - ctx.fill(); - } else { - ctx.stroke(); - } - return canvas; + // Paint line onto full canvas + var ctx = canvas.getContext("2d"); + var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, + this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); + painter.draw( ctx, width, height ); + + return $(canvas); } }); @@ -2236,187 +2160,18 @@ * Returns the number of slots used to pack features. */ incremental_slots: function(level, features, mode) { - // + // Get/create incremental slots for level. If display mode changed, // need to create new slots. - // + var inc_slots = this.inc_slots[level]; if (!inc_slots || (inc_slots.mode !== mode)) { - inc_slots = {}; - inc_slots.w_scale = level; + inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return CONTEXT.measureText( x ) } ); inc_slots.mode = mode; this.inc_slots[level] = inc_slots; - this.start_end_dct[level] = {}; } - - // - // If feature already exists in slots (from previously seen tiles), use the same slot, - // otherwise if not seen, add to "undone" list for slot calculation. - // - var w_scale = inc_slots.w_scale, - undone = [], slotted = [], - highest_slot = 0, // To measure how big to draw canvas - max_low = this.view.max_low; - // TODO: Should calculate zoom tile index, which will improve performance - // by only having to look at a smaller subset - // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } - for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i], - feature_uid = feature[0]; - if (inc_slots[feature_uid] !== undefined) { - highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); - slotted.push(inc_slots[feature_uid]); - } else { - undone.push(i); - } - } - - // - // Slot unslotted features. - // - var start_end_dct = this.start_end_dct[level]; - - // Find the first slot such that current feature doesn't overlap any other features in that slot. - // Returns -1 if no slot was found. - var find_slot = function(f_start, f_end) { - for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { - var has_overlap = false, - slot = start_end_dct[slot_num]; - if (slot !== undefined) { - // Iterate through features already in slot to see if current feature will fit. - for (var k = 0, k_len = slot.length; k < k_len; k++) { - var s_e = slot[k]; - if (f_end > s_e[0] && f_start < s_e[1]) { - // There is overlap - has_overlap = true; - break; - } - } - } - if (!has_overlap) { - return slot_num; - } - } - return -1; - }; - - // Do slotting. - for (var i = 0, len = undone.length; i < len; i++) { - var feature = features[undone[i]], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - feature_name = feature[3], - // Where to start, end drawing on screen. - f_start = Math.floor( (feature_start - max_low) * w_scale ), - f_end = Math.ceil( (feature_end - max_low) * w_scale ), - text_len = CONTEXT.measureText(feature_name).width, - text_align; - - // Update start, end drawing locations to include feature name. - // Try to put the name on the left, if not, put on right. - if (feature_name !== undefined && mode === "Pack") { - // Add gap for label spacing and extra pack space padding - text_len += (LABEL_SPACING + PACK_SPACING); - if (f_start - text_len >= 0) { - f_start -= text_len; - text_align = "left"; - } else { - f_end += text_len; - text_align = "right"; - } - } - - // Find slot. - var slot_num = find_slot(f_start, f_end); - /* - if (slot_num < 0) { - - TODO: this is not yet working -- - console.log(feature_uid, "looking for slot with text on the right"); - // Slot not found. If text was on left, try on right and see - // if slot can be found. - // TODO: are there any checks we need to do to ensure that text - // will fit on tile? - if (text_align === "left") { - f_start -= text_len; - f_end -= text_len; - text_align = "right"; - slot_num = find_slot(f_start, f_end); - } - if (slot_num >= 0) { - console.log(feature_uid, "found slot with text on the right"); - } - - } - */ - // Do slotting. - if (slot_num >= 0) { - // Add current feature to slot. - if (start_end_dct[slot_num] === undefined) { - start_end_dct[slot_num] = []; - } - start_end_dct[slot_num].push([f_start, f_end]); - inc_slots[feature_uid] = slot_num; - highest_slot = Math.max(highest_slot, slot_num); - } - else { - // TODO: remove this warning when skipped features are handled. - // Show warning for skipped feature. - //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); - } - } - - // Debugging: view slots data. - /* - for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { - var slot = start_end_dct[i]; - if (slot !== undefined) { - console.log(i, "*************"); - for (var k = 0, k_len = slot.length; k < k_len; k++) { - console.log("\t", slot[k][0], slot[k][1]); - } - } - } - */ - return highest_slot + 1; - }, - /** - * Draw summary tree on canvas. - */ - draw_summary_tree: function(canvas, points, delta, max, w_scale, required_height, tile_low, left_offset) { - var - // 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. - base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; - delta_x_px = Math.ceil(delta * w_scale); - - var max_label = $("<div />").addClass('yaxislabel'); - max_label.text(max); - - max_label.css({ position: "absolute", top: "22px", left: "10px" }); - max_label.prependTo(this.container_div); - - var ctx = canvas.get(0).getContext("2d"); - for (var i = 0, len = points.length; i < len; i++) { - var x = Math.floor( (points[i][0] - tile_low) * w_scale ); - var y = points[i][1]; - - if (!y) { continue; } - var y_px = y / max * required_height; - - ctx.fillStyle = "black"; - ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); - - // Draw number count if it can fit the number with some padding, otherwise things clump up - var text_padding_req_x = 4; - if (this.prefs.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { - ctx.fillStyle = "#666"; - ctx.textAlign = "center"; - ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); - } - } + + return inc_slots.slot_features( features ); }, /** * Draw feature. @@ -2579,29 +2334,18 @@ * Draw FeatureTrack tile. */ draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { - var track = this; - var tile_low = tile_index * DENSITY * resolution, + var track = this, + tile_low = tile_index * DENSITY * resolution, tile_high = ( tile_index + 1 ) * DENSITY * resolution, tile_span = tile_high - tile_low, - params = { hda_ldda: track.hda_ldda, dataset_id: track.dataset_id, - resolution: this.view.resolution, mode: this.mode }; - - // - // Create/set/compute some useful vars. - // - var width = Math.ceil( tile_span * w_scale ), + width = Math.ceil( tile_span * w_scale ), mode = this.mode, min_height = 25, left_offset = this.left_offset, - slots, required_height; + slots, + required_height; - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - // - // Set mode if Auto. - // + // Set display mode if Auto. if (mode === "Auto") { if (result.dataset_type === "summary_tree") { mode = result.dataset_type; @@ -2626,55 +2370,68 @@ } } } + + // Drawing the summary tree (feature coverage histogram) + if ( mode === "summary_tree" ) { + // Set height of parent_element + required_height = this.summary_draw_height; + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); + // 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: "22px", left: "10px" }); + max_label.prependTo(this.container_div); + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width + left_offset; + // Extra padding at top of summary tree + canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + // Paint summary tree into canvas + var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); + var ctx = canvas.getContext("2d"); + // Deal with left_offset by translating + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height ); + // Wrapped canvas element is returned + return $(canvas); + } + // Start dealing with row-by-row tracks + + // y_scale is the height per row var y_scale = this.get_y_scale(mode); - // // Pack reads, set required height. - // - if (mode === "summary_tree") { - required_height = this.summary_draw_height; - } if (mode === "Dense") { required_height = min_height; - } - else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { + } else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { // Calculate new slots incrementally for this new chunk of data and update height if necessary. required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; - slots = this.inc_slots[w_scale]; + slots = this.inc_slots[w_scale].slots; } // // Set up for drawing. // - canvas.get(0).width = width + left_offset; - canvas.get(0).height = required_height; - if (result.dataset_type === "summary_tree") { - // Increase canvas height in order to display max label. - canvas.get(0).height += LABEL_SPACING + CHAR_HEIGHT_PX; - } + var canvas = this.view.canvas_manager.new_canvas(); + + canvas.width = width + left_offset; + canvas.height = required_height; + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); - var ctx = canvas.get(0).getContext("2d"); + var ctx = canvas.getContext("2d"); ctx.fillStyle = this.prefs.block_color; ctx.font = this.default_font; ctx.textAlign = "right"; this.container_div.find(".yaxislabel").remove(); - // - // Draw summary tree. If tree is drawn, canvas is returned. - // - if (mode === "summary_tree") { - this.draw_summary_tree(canvas, result.data, result.delta, result.max, w_scale, required_height, - tile_low, left_offset); - return canvas; - } - - // // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red // to indicate region where message is applicable if (result.message) { - canvas.css({ + $(canvas).css({ "border-top": "1px solid red" }); @@ -2687,7 +2444,7 @@ // If there's no data, return. if (!result.data) { - return canvas; + return $(canvas); } } @@ -2730,7 +2487,7 @@ width, left_offset, ref_seq); } } - return canvas; + return $(canvas); } }); @@ -3131,4 +2888,326 @@ } }); +// ---- To be extracted ------------------------------------------------------ +// ---- Canvas management ---- + +var CanvasManager = function( document ) { + this.document = document; +} + +CanvasManager.prototype.new_canvas = function() { + var canvas = this.document.createElement("canvas"); + if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK + return canvas; +} + +// ---- Feature Packing ---- + +/** + * FeatureSlotter determines slots in which to draw features for vertical + * packing. + * + * This implementation is incremental, any feature assigned a slot will be + * retained for slotting future features. + */ +var FeatureSlotter = function ( w_scale, include_label, measureText ) { + this.slots = {}; + this.start_end_dct = {}; + this.w_scale = w_scale; + this.include_label = include_label; + this.measureText = measureText; +} + +/** + * Slot a set of features, `this.slots` will be updated with slots by id, and + * the largest slot required for the passed set of features is returned + */ +FeatureSlotter.prototype.slot_features = function( features ) { + var w_scale = this.w_scale, inc_slots = this.slots, start_end_dct = this.start_end_dct, + undone = [], slotted = [], highest_slot = 0; + + // If feature already exists in slots (from previously seen tiles), use the same slot, + // otherwise if not seen, add to "undone" list for slot calculation. + + // TODO: Should calculate zoom tile index, which will improve performance + // by only having to look at a smaller subset + // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } + for (var i = 0, len = features.length; i < len; i++) { + var feature = features[i], + feature_uid = feature[0]; + if (inc_slots[feature_uid] !== undefined) { + highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); + slotted.push(inc_slots[feature_uid]); + } else { + undone.push(i); + } + } + + // Slot unslotted features. + + // Find the first slot such that current feature doesn't overlap any other features in that slot. + // Returns -1 if no slot was found. + var find_slot = function(f_start, f_end) { + // TODO: Fix constants + for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { + var has_overlap = false, + slot = start_end_dct[slot_num]; + if (slot !== undefined) { + // Iterate through features already in slot to see if current feature will fit. + for (var k = 0, k_len = slot.length; k < k_len; k++) { + var s_e = slot[k]; + if (f_end > s_e[0] && f_start < s_e[1]) { + // There is overlap + has_overlap = true; + break; + } + } + } + if (!has_overlap) { + return slot_num; + } + } + return -1; + }; + + // Do slotting. + for (var i = 0, len = undone.length; i < len; i++) { + var feature = features[undone[i]], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + // Where to start, end drawing on screen. + f_start = Math.floor( feature_start * w_scale ), + f_end = Math.ceil( feature_end * w_scale ), + text_len = this.measureText(feature_name).width, + text_align; + + // Update start, end drawing locations to include feature name. + // Try to put the name on the left, if not, put on right. + if (feature_name !== undefined && this.include_label ) { + // Add gap for label spacing and extra pack space padding + // TODO: Fix constants + text_len += (LABEL_SPACING + PACK_SPACING); + if (f_start - text_len >= 0) { + f_start -= text_len; + text_align = "left"; + } else { + f_end += text_len; + text_align = "right"; + } + } + + // Find slot. + var slot_num = find_slot(f_start, f_end); + /* + if (slot_num < 0) { + + TODO: this is not yet working -- + console.log(feature_uid, "looking for slot with text on the right"); + // Slot not found. If text was on left, try on right and see + // if slot can be found. + // TODO: are there any checks we need to do to ensure that text + // will fit on tile? + if (text_align === "left") { + f_start -= text_len; + f_end -= text_len; + text_align = "right"; + slot_num = find_slot(f_start, f_end); + } + if (slot_num >= 0) { + console.log(feature_uid, "found slot with text on the right"); + } + + } + */ + // Do slotting. + if (slot_num >= 0) { + // Add current feature to slot. + if (start_end_dct[slot_num] === undefined) { + start_end_dct[slot_num] = []; + } + start_end_dct[slot_num].push([f_start, f_end]); + inc_slots[feature_uid] = slot_num; + highest_slot = Math.max(highest_slot, slot_num); + } + else { + // TODO: remove this warning when skipped features are handled. + // Show warning for skipped feature. + //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + } + } + + // Debugging: view slots data. + /* + for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { + var slot = start_end_dct[i]; + if (slot !== undefined) { + console.log(i, "*************"); + for (var k = 0, k_len = slot.length; k < k_len; k++) { + console.log("\t", slot[k][0], slot[k][1]); + } + } + } + */ + return highest_slot + 1; +} + +// ---- Painters ---- + +/** + * SummaryTreePainter, a histogram showing number of intervals in a region + */ +var SummaryTreePainter = function( data, delta, max, view_start, view_end, show_counts ) { + // Data and data properties + this.data = data; + this.delta = delta; + this.max = max; + // View + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.show_counts = show_counts; +} + +SummaryTreePainter.prototype.draw = function( ctx, width, height ) { + + var view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range; + + var points = this.data, delta = this.delta, max = this.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. + base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; + delta_x_px = Math.ceil(delta * w_scale); + + ctx.save(); + + for (var i = 0, len = points.length; i < len; i++) { + + var x = Math.floor( (points[i][0] - view_start) * w_scale ); + var y = points[i][1]; + + if (!y) { continue; } + var y_px = y / max * height; + + ctx.fillStyle = "black"; + ctx.fillRect( x, base_y - y_px, delta_x_px, y_px ); + + // Draw number count if it can fit the number with some padding, otherwise things clump up + var text_padding_req_x = 4; + if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { + ctx.fillStyle = "#666"; + ctx.textAlign = "center"; + ctx.fillText(y, x + (delta_x_px/2), 10); + } + } + + ctx.restore(); +} + +var LinePainter = function( data, view_start, view_end, min_value, max_value, color, mode ) { + // Data and data properties + this.data = data; + // View + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.min_value = min_value; + this.max_value = max_value; + this.color = color; + this.mode = mode; +} + +LinePainter.prototype.draw = function( ctx, width, height ) { + var + in_path = false, + min_value = this.min_value, + max_value = this.max_value, + vertical_range = max_value - min_value, + height_px = height, + view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range, + mode = this.mode, + data = this.data; + + ctx.save(); + + // Pixel position of 0 on the y axis + var y_zero = Math.round( height + min_value / vertical_range * height ); + + // Line at 0.0 + if ( mode !== "Intensity" ) { + ctx.beginPath(); + ctx.moveTo( 0, y_zero ); + ctx.lineTo( width, y_zero ); + // ctx.lineWidth = 0.5; + ctx.fillStyle = "#aaa"; + ctx.stroke(); + } + + ctx.beginPath(); + ctx.fillStyle = this.color; + var x_scaled, y, delta_x_px; + if (data.length > 1) { + delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); + } else { + delta_x_px = 10; + } + for (var i = 0, len = data.length; i < len; i++) { + x_scaled = Math.round((data[i][0] - view_start) * w_scale); + y = data[i][1]; + if (y === null) { + if (in_path && mode === "Filled") { + ctx.lineTo(x_scaled, height_px); + } + in_path = false; + continue; + } + if (y < min_value) { + y = min_value; + } else if (y > max_value) { + y = max_value; + } + + if (mode === "Histogram") { + // y becomes the bar height in pixels, which is the negated for canvas coords + y = Math.round( y / vertical_range * height_px ); + ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); + } else if (mode === "Intensity" ) { + y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); + ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; + ctx.fillRect(x_scaled, 0, delta_x_px, height_px); + } else { + // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); + y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); + // console.log(canvas.get(0).height, canvas.get(0).width); + if (in_path) { + ctx.lineTo(x_scaled, y); + } else { + in_path = true; + if (mode === "Filled") { + ctx.moveTo(x_scaled, height_px); + ctx.lineTo(x_scaled, y); + } else { + ctx.moveTo(x_scaled, y); + } + } + } + } + if (mode === "Filled") { + if (in_path) { + ctx.lineTo( x_scaled, y_zero ); + ctx.lineTo( 0, y_zero ); + } + ctx.fill(); + } else { + ctx.stroke(); + } + + ctx.restore(); +} \ No newline at end of file http://bitbucket.org/galaxy/galaxy-central/changeset/7366cc533040/ changeset: r5313:7366cc533040 user: james_taylor date: 2011-03-30 19:09:42 summary: Fix accidently introduced tabs affected #: 1 file (1.9 KB) --- a/static/scripts/trackster.js Wed Mar 30 13:01:41 2011 -0400 +++ b/static/scripts/trackster.js Wed Mar 30 13:09:42 2011 -0400 @@ -2012,10 +2012,10 @@ }; $.extend(LineTrack.prototype, TiledTrack.prototype, { add_resize_handle: function () { - // Add control for resizing - // Trickery here to deal with the hovering drag handle, can probably be - // pulled out and reused. - var track = this; + // Add control for resizing + // Trickery here to deal with the hovering drag handle, can probably be + // pulled out and reused. + var track = this; var in_handle = false; var in_drag = false; var drag_control = $( "<div class='track-resize'>" ) @@ -2086,20 +2086,20 @@ var tile_low = tile_index * DENSITY * resolution, tile_length = DENSITY * resolution, - width = Math.ceil( tile_length * w_scale ), - height = this.height_px; + width = Math.ceil( tile_length * w_scale ), + height = this.height_px; - // Create canvas + // Create canvas var canvas = this.view.canvas_manager.new_canvas(); canvas.width = width, canvas.height = height; - // Paint line onto full canvas - var ctx = canvas.getContext("2d"); - var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, - this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); - painter.draw( ctx, width, height ); - + // Paint line onto full canvas + var ctx = canvas.getContext("2d"); + var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, + this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); + painter.draw( ctx, width, height ); + return $(canvas); } }); @@ -2170,8 +2170,8 @@ inc_slots.mode = mode; this.inc_slots[level] = inc_slots; } - - return inc_slots.slot_features( features ); + + return inc_slots.slot_features( features ); }, /** * Draw feature. @@ -2335,15 +2335,15 @@ */ draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { var track = this, - tile_low = tile_index * DENSITY * resolution, + tile_low = tile_index * DENSITY * resolution, tile_high = ( tile_index + 1 ) * DENSITY * resolution, tile_span = tile_high - tile_low, - width = Math.ceil( tile_span * w_scale ), + width = Math.ceil( tile_span * w_scale ), mode = this.mode, min_height = 25, left_offset = this.left_offset, slots, - required_height; + required_height; // Set display mode if Auto. if (mode === "Auto") { @@ -2370,37 +2370,37 @@ } } } - - // Drawing the summary tree (feature coverage histogram) - if ( mode === "summary_tree" ) { - // Set height of parent_element - required_height = this.summary_draw_height; - parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); - // 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: "22px", left: "10px" }); - max_label.prependTo(this.container_div); - // Create canvas - var canvas = this.view.canvas_manager.new_canvas(); - canvas.width = width + left_offset; - // Extra padding at top of summary tree - canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; - // Paint summary tree into canvas - var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); - var ctx = canvas.getContext("2d"); - // Deal with left_offset by translating - ctx.translate( left_offset, 0 ); - painter.draw( ctx, width, required_height ); - // Wrapped canvas element is returned - return $(canvas); - } + + // Drawing the summary tree (feature coverage histogram) + if ( mode === "summary_tree" ) { + // Set height of parent_element + required_height = this.summary_draw_height; + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); + // 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: "22px", left: "10px" }); + max_label.prependTo(this.container_div); + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width + left_offset; + // Extra padding at top of summary tree + canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + // Paint summary tree into canvas + var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); + var ctx = canvas.getContext("2d"); + // Deal with left_offset by translating + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height ); + // Wrapped canvas element is returned + return $(canvas); + } - // Start dealing with row-by-row tracks + // Start dealing with row-by-row tracks - // y_scale is the height per row + // y_scale is the height per row var y_scale = this.get_y_scale(mode); // Pack reads, set required height. @@ -2415,8 +2415,8 @@ // // Set up for drawing. // - var canvas = this.view.canvas_manager.new_canvas(); - + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width + left_offset; canvas.height = required_height; @@ -2934,14 +2934,14 @@ // by only having to look at a smaller subset // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i], - feature_uid = feature[0]; - if (inc_slots[feature_uid] !== undefined) { - highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); - slotted.push(inc_slots[feature_uid]); - } else { - undone.push(i); - } + var feature = features[i], + feature_uid = feature[0]; + if (inc_slots[feature_uid] !== undefined) { + highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); + slotted.push(inc_slots[feature_uid]); + } else { + undone.push(i); + } } // Slot unslotted features. @@ -2949,106 +2949,106 @@ // Find the first slot such that current feature doesn't overlap any other features in that slot. // Returns -1 if no slot was found. var find_slot = function(f_start, f_end) { - // TODO: Fix constants - for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { - var has_overlap = false, - slot = start_end_dct[slot_num]; - if (slot !== undefined) { - // Iterate through features already in slot to see if current feature will fit. - for (var k = 0, k_len = slot.length; k < k_len; k++) { - var s_e = slot[k]; - if (f_end > s_e[0] && f_start < s_e[1]) { - // There is overlap - has_overlap = true; - break; - } - } - } - if (!has_overlap) { - return slot_num; - } - } - return -1; + // TODO: Fix constants + for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { + var has_overlap = false, + slot = start_end_dct[slot_num]; + if (slot !== undefined) { + // Iterate through features already in slot to see if current feature will fit. + for (var k = 0, k_len = slot.length; k < k_len; k++) { + var s_e = slot[k]; + if (f_end > s_e[0] && f_start < s_e[1]) { + // There is overlap + has_overlap = true; + break; + } + } + } + if (!has_overlap) { + return slot_num; + } + } + return -1; }; // Do slotting. for (var i = 0, len = undone.length; i < len; i++) { - var feature = features[undone[i]], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - feature_name = feature[3], - // Where to start, end drawing on screen. - f_start = Math.floor( feature_start * w_scale ), - f_end = Math.ceil( feature_end * w_scale ), - text_len = this.measureText(feature_name).width, - text_align; - - // Update start, end drawing locations to include feature name. - // Try to put the name on the left, if not, put on right. - if (feature_name !== undefined && this.include_label ) { - // Add gap for label spacing and extra pack space padding - // TODO: Fix constants - text_len += (LABEL_SPACING + PACK_SPACING); - if (f_start - text_len >= 0) { - f_start -= text_len; - text_align = "left"; - } else { - f_end += text_len; - text_align = "right"; - } - } - - // Find slot. - var slot_num = find_slot(f_start, f_end); - /* - if (slot_num < 0) { - - TODO: this is not yet working -- - console.log(feature_uid, "looking for slot with text on the right"); - // Slot not found. If text was on left, try on right and see - // if slot can be found. - // TODO: are there any checks we need to do to ensure that text - // will fit on tile? - if (text_align === "left") { - f_start -= text_len; - f_end -= text_len; - text_align = "right"; - slot_num = find_slot(f_start, f_end); - } - if (slot_num >= 0) { - console.log(feature_uid, "found slot with text on the right"); - } + var feature = features[undone[i]], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + // Where to start, end drawing on screen. + f_start = Math.floor( feature_start * w_scale ), + f_end = Math.ceil( feature_end * w_scale ), + text_len = this.measureText(feature_name).width, + text_align; + + // Update start, end drawing locations to include feature name. + // Try to put the name on the left, if not, put on right. + if (feature_name !== undefined && this.include_label ) { + // Add gap for label spacing and extra pack space padding + // TODO: Fix constants + text_len += (LABEL_SPACING + PACK_SPACING); + if (f_start - text_len >= 0) { + f_start -= text_len; + text_align = "left"; + } else { + f_end += text_len; + text_align = "right"; + } + } + + // Find slot. + var slot_num = find_slot(f_start, f_end); + /* + if (slot_num < 0) { + + TODO: this is not yet working -- + console.log(feature_uid, "looking for slot with text on the right"); + // Slot not found. If text was on left, try on right and see + // if slot can be found. + // TODO: are there any checks we need to do to ensure that text + // will fit on tile? + if (text_align === "left") { + f_start -= text_len; + f_end -= text_len; + text_align = "right"; + slot_num = find_slot(f_start, f_end); + } + if (slot_num >= 0) { + console.log(feature_uid, "found slot with text on the right"); + } - } - */ - // Do slotting. - if (slot_num >= 0) { - // Add current feature to slot. - if (start_end_dct[slot_num] === undefined) { - start_end_dct[slot_num] = []; - } - start_end_dct[slot_num].push([f_start, f_end]); - inc_slots[feature_uid] = slot_num; - highest_slot = Math.max(highest_slot, slot_num); - } - else { - // TODO: remove this warning when skipped features are handled. - // Show warning for skipped feature. - //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); - } + } + */ + // Do slotting. + if (slot_num >= 0) { + // Add current feature to slot. + if (start_end_dct[slot_num] === undefined) { + start_end_dct[slot_num] = []; + } + start_end_dct[slot_num].push([f_start, f_end]); + inc_slots[feature_uid] = slot_num; + highest_slot = Math.max(highest_slot, slot_num); + } + else { + // TODO: remove this warning when skipped features are handled. + // Show warning for skipped feature. + //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + } } // Debugging: view slots data. /* for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { - var slot = start_end_dct[i]; - if (slot !== undefined) { - console.log(i, "*************"); - for (var k = 0, k_len = slot.length; k < k_len; k++) { - console.log("\t", slot[k][0], slot[k][1]); - } - } + var slot = start_end_dct[i]; + if (slot !== undefined) { + console.log(i, "*************"); + for (var k = 0, k_len = slot.length; k < k_len; k++) { + console.log("\t", slot[k][0], slot[k][1]); + } + } } */ return highest_slot + 1; @@ -3074,36 +3074,36 @@ SummaryTreePainter.prototype.draw = function( ctx, width, height ) { var view_start = this.view_start, - view_range = this.view_end - this.view_start, - w_scale = width / view_range; + view_range = this.view_end - this.view_start, + w_scale = width / view_range; var points = this.data, delta = this.delta, max = this.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. - base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; - delta_x_px = Math.ceil(delta * w_scale); + // 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. + base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; + delta_x_px = Math.ceil(delta * w_scale); ctx.save(); for (var i = 0, len = points.length; i < len; i++) { - - var x = Math.floor( (points[i][0] - view_start) * w_scale ); - var y = points[i][1]; - - if (!y) { continue; } - var y_px = y / max * height; - - ctx.fillStyle = "black"; - ctx.fillRect( x, base_y - y_px, delta_x_px, y_px ); - - // Draw number count if it can fit the number with some padding, otherwise things clump up - var text_padding_req_x = 4; - if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { - ctx.fillStyle = "#666"; - ctx.textAlign = "center"; - ctx.fillText(y, x + (delta_x_px/2), 10); - } + + var x = Math.floor( (points[i][0] - view_start) * w_scale ); + var y = points[i][1]; + + if (!y) { continue; } + var y_px = y / max * height; + + ctx.fillStyle = "black"; + ctx.fillRect( x, base_y - y_px, delta_x_px, y_px ); + + // Draw number count if it can fit the number with some padding, otherwise things clump up + var text_padding_req_x = 4; + if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { + ctx.fillStyle = "#666"; + ctx.textAlign = "center"; + ctx.fillText(y, x + (delta_x_px/2), 10); + } } ctx.restore(); @@ -3124,16 +3124,16 @@ LinePainter.prototype.draw = function( ctx, width, height ) { var - in_path = false, - min_value = this.min_value, - max_value = this.max_value, - vertical_range = max_value - min_value, - height_px = height, - view_start = this.view_start, - view_range = this.view_end - this.view_start, - w_scale = width / view_range, - mode = this.mode, - data = this.data; + in_path = false, + min_value = this.min_value, + max_value = this.max_value, + vertical_range = max_value - min_value, + height_px = height, + view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range, + mode = this.mode, + data = this.data; ctx.save(); @@ -3142,72 +3142,72 @@ // Line at 0.0 if ( mode !== "Intensity" ) { - ctx.beginPath(); - ctx.moveTo( 0, y_zero ); - ctx.lineTo( width, y_zero ); - // ctx.lineWidth = 0.5; - ctx.fillStyle = "#aaa"; - ctx.stroke(); + ctx.beginPath(); + ctx.moveTo( 0, y_zero ); + ctx.lineTo( width, y_zero ); + // ctx.lineWidth = 0.5; + ctx.fillStyle = "#aaa"; + ctx.stroke(); } ctx.beginPath(); ctx.fillStyle = this.color; var x_scaled, y, delta_x_px; if (data.length > 1) { - delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); + delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); } else { - delta_x_px = 10; + delta_x_px = 10; } for (var i = 0, len = data.length; i < len; i++) { - x_scaled = Math.round((data[i][0] - view_start) * w_scale); - y = data[i][1]; - if (y === null) { - if (in_path && mode === "Filled") { - ctx.lineTo(x_scaled, height_px); - } - in_path = false; - continue; - } - if (y < min_value) { - y = min_value; - } else if (y > max_value) { - y = max_value; - } + x_scaled = Math.round((data[i][0] - view_start) * w_scale); + y = data[i][1]; + if (y === null) { + if (in_path && mode === "Filled") { + ctx.lineTo(x_scaled, height_px); + } + in_path = false; + continue; + } + if (y < min_value) { + y = min_value; + } else if (y > max_value) { + y = max_value; + } - if (mode === "Histogram") { - // y becomes the bar height in pixels, which is the negated for canvas coords - y = Math.round( y / vertical_range * height_px ); - ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); - } else if (mode === "Intensity" ) { - y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); - ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; - ctx.fillRect(x_scaled, 0, delta_x_px, height_px); - } else { - // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); - y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); - // console.log(canvas.get(0).height, canvas.get(0).width); - if (in_path) { - ctx.lineTo(x_scaled, y); - } else { - in_path = true; - if (mode === "Filled") { - ctx.moveTo(x_scaled, height_px); - ctx.lineTo(x_scaled, y); - } else { - ctx.moveTo(x_scaled, y); - } - } - } + if (mode === "Histogram") { + // y becomes the bar height in pixels, which is the negated for canvas coords + y = Math.round( y / vertical_range * height_px ); + ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); + } else if (mode === "Intensity" ) { + y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); + ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; + ctx.fillRect(x_scaled, 0, delta_x_px, height_px); + } else { + // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); + y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); + // console.log(canvas.get(0).height, canvas.get(0).width); + if (in_path) { + ctx.lineTo(x_scaled, y); + } else { + in_path = true; + if (mode === "Filled") { + ctx.moveTo(x_scaled, height_px); + ctx.lineTo(x_scaled, y); + } else { + ctx.moveTo(x_scaled, y); + } + } + } } if (mode === "Filled") { - if (in_path) { - ctx.lineTo( x_scaled, y_zero ); - ctx.lineTo( 0, y_zero ); - } - ctx.fill(); + if (in_path) { + ctx.lineTo( x_scaled, y_zero ); + ctx.lineTo( 0, y_zero ); + } + ctx.fill(); } else { - ctx.stroke(); + ctx.stroke(); } ctx.restore(); -} \ No newline at end of file +} http://bitbucket.org/galaxy/galaxy-central/changeset/ac381183f760/ changeset: r5314:ac381183f760 user: james_taylor date: 2011-03-31 00:30:22 summary: Extracted feature painters for generic linked features, VCF, and reads. Not all types have been completely tested yet affected #: 1 file (3.1 KB) --- a/static/scripts/trackster.js Wed Mar 30 13:09:42 2011 -0400 +++ b/static/scripts/trackster.js Wed Mar 30 18:30:22 2011 -0400 @@ -1960,7 +1960,7 @@ var c_start = Math.round(c * w_scale); ctx.fillText(seq[c], c_start + track.left_offset, 10); } - return $(canvas); + return canvas; } this.content_div.css("height", "0px"); } @@ -2100,7 +2100,7 @@ this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); painter.draw( ctx, width, height ); - return $(canvas); + return canvas; } }); @@ -2150,6 +2150,8 @@ this.tile_cache = new Cache(CACHED_TILES_FEATURE); this.data_cache = new DataManager(20, this); this.left_offset = 200; + + this.painter = LinkedFeaturePainter; }; $.extend(FeatureTrack.prototype, TiledTrack.prototype, { /** @@ -2174,141 +2176,6 @@ return inc_slots.slot_features( features ); }, /** - * Draw feature. - */ - draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset) { - var - feature_uid = feature[0], - feature_start = feature[1], - // -1 b/c intervals are half-open. - feature_end = feature[2] - 1, - feature_name = feature[3], - f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), - f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, - thickness, y_start, thick_start = null, thick_end = null, - block_color = this.prefs.block_color, - label_color = this.prefs.label_color; - - // Dense mode displays the same for all data. - if (mode === "Dense") { - ctx.fillStyle = block_color; - ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, DENSE_FEATURE_HEIGHT); - } - else if (mode === "no_detail") { - // No details for feature, so only one way to display. - ctx.fillStyle = block_color; - // TODO: what should width be here? - ctx.fillRect(f_start + left_offset, y_center + 5, f_end - f_start, DENSE_FEATURE_HEIGHT); - } - else { // Mode is either Squish or Pack: - // Feature details. - var feature_strand = feature[4], - feature_ts = feature[5], - feature_te = feature[6], - feature_blocks = feature[7]; - - if (feature_ts && feature_te) { - thick_start = Math.floor( Math.max(0, (feature_ts - tile_low) * w_scale) ); - thick_end = Math.ceil( Math.min(width, Math.max(0, (feature_te - tile_low) * w_scale)) ); - } - - // Set vars that depend on mode. - var thin_height, thick_height; - if (mode === "Squish") { - thin_height = 1; - thick_height = SQUISH_FEATURE_HEIGHT; - } else { // mode === "Pack" - thin_height = 5; - thick_height = PACK_FEATURE_HEIGHT; - } - - // Draw feature/feature blocks + connectors. - if (!feature_blocks) { - // If there are no blocks, treat the feature as one big exon. - if ( feature.strand ) { - if (feature.strand === "+") { - ctx.fillStyle = RIGHT_STRAND_INV; - } else if (feature.strand === "-") { - ctx.fillStyle = LEFT_STRAND_INV; - } - } - else { // No strand. - ctx.fillStyle = block_color; - } - ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, thick_height); - } else { - // There are feature blocks and mode is either Squish or Pack. - // - // Approach: (a) draw whole feature as connector/intron and (b) draw blocks as - // needed. This ensures that whole feature, regardless of whether it starts with - // a block, is visible. - // - - // Draw whole feature as connector/intron. - var cur_y_center, cur_height; - if (mode === "Squish") { - ctx.fillStyle = CONNECTOR_COLOR; - cur_y_center = y_center + Math.floor(SQUISH_FEATURE_HEIGHT/2) + 1; - cur_height = 1; - } - else { // mode === "Pack" - if (feature_strand) { - var cur_y_center = y_center; - var cur_height = thick_height; - if (feature_strand === "+") { - ctx.fillStyle = RIGHT_STRAND; - } else if (feature_strand === "-") { - ctx.fillStyle = LEFT_STRAND; - } - } - else { - ctx.fillStyle = CONNECTOR_COLOR; - cur_y_center += (SQUISH_FEATURE_HEIGHT/2) + 1; - cur_height = 1; - } - } - ctx.fillRect(f_start + left_offset, cur_y_center, f_end - f_start, cur_height); - - for (var k = 0, k_len = feature_blocks.length; k < k_len; k++) { - var block = feature_blocks[k], - block_start = Math.floor( Math.max(0, (block[0] - tile_low) * w_scale) ), - // -1 b/c intervals are half-open. - block_end = Math.ceil( Math.min(width, Math.max((block[1] - 1 - tile_low) * w_scale)) ); - - // Skip drawing if block not on tile. - if (block_start > block_end) { continue; } - - // Draw thin block. - ctx.fillStyle = block_color; - ctx.fillRect(block_start + left_offset, y_center + (thick_height-thin_height)/2 + 1, - block_end - block_start, thin_height); - - // If block intersects with thick region, draw block as thick. - if (thick_start !== undefined && !(block_start > thick_end || block_end < thick_start) ) { - var block_thick_start = Math.max(block_start, thick_start), - block_thick_end = Math.min(block_end, thick_end); - ctx.fillRect(block_thick_start + left_offset, y_center + 1, - block_thick_end - block_thick_start, thick_height); - } - } - } - - // Draw label for Pack mode. - if (mode === "Pack" && feature_start > tile_low) { - ctx.fillStyle = label_color; - if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { - ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING, y_center + 8); - } else { - ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING, y_center + 8); - } - ctx.fillStyle = block_color; - } - } - }, - /** * Returns y_scale based on mode. */ get_y_scale: function(mode) { @@ -2394,27 +2261,44 @@ // Deal with left_offset by translating ctx.translate( left_offset, 0 ); painter.draw( ctx, width, required_height ); - // Wrapped canvas element is returned - return $(canvas); + // Canvas element is returned + return canvas; } // Start dealing with row-by-row tracks - - // y_scale is the height per row - var y_scale = this.get_y_scale(mode); - - // Pack reads, set required height. - if (mode === "Dense") { - required_height = min_height; - } else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { - // Calculate new slots incrementally for this new chunk of data and update height if necessary. - required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; + + // If working with a mode where slotting is neccesary, update the incremental slotting + var slots, slots_required = 1; + if ( mode === "no_detail" || mode === "Squish" || mode === "Pack" ) { + slots_required = this.incremental_slots(w_scale, result.data, mode); slots = this.inc_slots[w_scale].slots; } + + // Filter features + var filtered = []; + if ( result.data ) { + for (var i = 0, len = result.data.length; i < len; i++) { + var feature = result.data[i]; + var hide_feature = false; + var filter; + for (var f = 0, flen = this.filters.length; f < flen; f++) { + filter = this.filters[f]; + filter.update_attrs(feature); + if (!filter.keep(feature)) { + hide_feature = true; + break; + } + } + if (!hide_feature) { + filtered.push( feature ); + } + } + } - // - // Set up for drawing. - // + // Create painter, and canvas of sufficient size to contain all features + // HACK: ref_seq will only be defined for ReadTracks, and only the ReadPainter accepts that argument + var painter = new (this.painter)( filtered, tile_low, tile_high, this.prefs, mode, ref_seq ); + var required_height = painter.get_required_height( slots_required ); var canvas = this.view.canvas_manager.new_canvas(); canvas.width = width + left_offset; @@ -2444,112 +2328,29 @@ // If there's no data, return. if (!result.data) { - return $(canvas); + return canvas; } } - // // Set example feature. This is needed so that track can update its UI based on feature attributes. - // this.example_feature = (result.data.length ? result.data[0] : undefined); - - // - // Draw elements. - // - var data = result.data; - for (var i = 0, len = data.length; i < len; i++) { - var feature = data[i], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - // Slot valid only if features are slotted and this feature is slotted; - // feature may not be due to lack of space. - slot = (slots && slots[feature_uid] !== undefined ? slots[feature_uid] : null); - - // Apply filters to feature. - var hide_feature = false; - var filter; - for (var f = 0; f < this.filters.length; f++) { - filter = this.filters[f]; - filter.update_attrs(feature); - if (!filter.keep(feature)) { - hide_feature = true; - break; - } - } - if (hide_feature) { - continue; - } + + // Draw features + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height, slots ); - // Draw feature if there's overlap and mode is dense or feature is slotted (as it must be for all non-dense modes). - if (is_overlap([feature_start, feature_end], [tile_low, tile_high]) && (mode == "Dense" || slot !== null)) { - this.draw_element(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, - width, left_offset, ref_seq); - } - } - return $(canvas); + return canvas; } }); var VcfTrack = function(name, view, hda_ldda, dataset_id, prefs, filters) { FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); this.track_type = "VcfTrack"; + this.painter = VariantPainter; }; -$.extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { - /** - * Draw a VCF entry. - */ - draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width) { - var feature = data[i], - feature_uid = feature[0], - feature_start = feature[1], - // -1 b/c intervals are half-open. - feature_end = feature[2] - 1, - feature_name = feature[3], - // All features need a start, end, and vertical center. - f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), - f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, - thickness, y_start, thick_start = null, thick_end = null; - - if (no_label) { - ctx.fillStyle = block_color; - ctx.fillRect(f_start + left_offset, y_center + 5, f_end - f_start, 1); - } else { // Show blocks, labels, etc. - // Unpack. - var ref_base = feature[4], alt_base = feature[5], qual = feature[6]; - - // Draw block for entry. - thickness = 9; - y_start = 1; - ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, thickness); - - // Add label for entry. - if (mode !== "Dense" && feature_name !== undefined && feature_start > tile_low) { - // Draw label - ctx.fillStyle = label_color; - if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { - ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + 2 + left_offset, y_center + 8); - } else { - ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start - 2 + left_offset, y_center + 8); - } - ctx.fillStyle = block_color; - } - - // Show additional data on block. - var vcf_label = ref_base + " / " + alt_base; - if (feature_start > tile_low && ctx.measureText(vcf_label).width < (f_end - f_start)) { - ctx.fillStyle = "white"; - ctx.textAlign = "center"; - ctx.fillText(vcf_label, left_offset + f_start + (f_end-f_start)/2, y_center + 8); - ctx.fillStyle = block_color; - } - } - } -}); +$.extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); + var ReadTrack = function (name, view, hda_ldda, dataset_id, prefs, filters) { FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); @@ -2573,281 +2374,10 @@ this.prefs = this.track_config.values; this.track_type = "ReadTrack"; + this.painter = ReadPainter; this.make_name_popup_menu(); }; -$.extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { - /** - * Returns y_scale based on mode. - */ - get_y_scale: function(mode) { - var y_scale; - if (mode === "summary_tree") { - // No scale needed. - } - if (mode === "Dense") { - y_scale = DENSE_TRACK_HEIGHT; - } - else if (mode === "Squish") { - y_scale = SQUISH_TRACK_HEIGHT; - } - else { // mode === "Pack" - y_scale = PACK_TRACK_HEIGHT; - if (this.track_config.values.show_insertions) { - y_scale *= 2; - } - } - return y_scale; - }, - /** - * Draw a single read. - */ - draw_read: function(ctx, mode, w_scale, tile_low, tile_high, feature_start, cigar, orig_seq, y_center, ref_seq) { - ctx.textAlign = "center"; - var track = this, - tile_region = [tile_low, tile_high], - base_offset = 0, - seq_offset = 0, - gap = 0; - - // Keep list of items that need to be drawn on top of initial drawing layer. - var draw_last = []; - - // Gap is needed so that read is offset and hence first base can be drawn on read. - // TODO-FIX: using this gap offsets reads so that their start is not visually in sync with other tracks. - if ((mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { - gap = Math.round(w_scale/2); - } - if (!cigar) { - // If no cigar string, then assume all matches - cigar = [ [0, orig_seq.length] ] - } - for (var cig_id = 0, len = cigar.length; cig_id < len; cig_id++) { - var cig = cigar[cig_id], - cig_op = "MIDNSHP=X"[cig[0]], - cig_len = cig[1]; - - if (cig_op === "H" || cig_op === "S") { - // Go left if it clips - base_offset -= cig_len; - } - var seq_start = feature_start + base_offset, - s_start = Math.floor( Math.max(0, (seq_start - tile_low) * w_scale) ), - s_end = Math.floor( Math.max(0, (seq_start + cig_len - tile_low) * w_scale) ); - - switch (cig_op) { - case "H": // Hard clipping. - // TODO: draw anything? - // Sequence not present, so do not increment seq_offset. - break; - case "S": // Soft clipping. - case "M": // Match. - case "=": // Equals. - var seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region); - if (seq_tile_overlap !== NO_OVERLAP) { - // Draw. - var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); - if (gap > 0) { - ctx.fillStyle = this.prefs.block_color; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 1, s_end - s_start, 9); - ctx.fillStyle = CONNECTOR_COLOR; - // TODO: this can be made much more efficient by computing the complete sequence - // to draw and then drawing it. - for (var c = 0, str_len = seq.length; c < str_len; c++) { - if (this.track_config.values.show_differences && ref_seq) { - var ref_char = ref_seq[seq_start - tile_low + c]; - if (!ref_char || ref_char.toLowerCase() === seq[c].toLowerCase()) { - continue; - } - } - if (seq_start + c >= tile_low && seq_start + c <= tile_high) { - var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); - ctx.fillText(seq[c], c_start + this.left_offset, y_center + 9); - } - } - } else { - ctx.fillStyle = this.prefs.block_color; - // TODO: This is a pretty hack-ish way to fill rectangle based on mode. - ctx.fillRect(s_start + this.left_offset, - y_center + (this.mode !== "Dense" ? 4 : 5), - s_end - s_start, - (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT) ); - } - } - seq_offset += cig_len; - base_offset += cig_len; - break; - case "N": // Skipped bases. - ctx.fillStyle = CONNECTOR_COLOR; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 5, s_end - s_start, 1); - //ctx.dashedLine(s_start + this.left_offset, y_center + 5, this.left_offset + s_end, y_center + 5); - // No change in seq_offset because sequence not used when skipping. - base_offset += cig_len; - break; - case "D": // Deletion. - ctx.fillStyle = "red"; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 4, s_end - s_start, 3); - // TODO: is this true? No change in seq_offset because sequence not used when skipping. - base_offset += cig_len; - break; - case "P": // TODO: No good way to draw insertions/padding right now, so ignore - // Sequences not present, so do not increment seq_offset. - break; - case "I": // Insertion. - // Check to see if sequence should be drawn at all by looking at the overlap between - // the sequence region and the tile region. - var - seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region), - insert_x_coord = this.left_offset + s_start - gap; - - if (seq_tile_overlap !== NO_OVERLAP) { - var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); - // Insertion point is between the sequence start and the previous base: (-gap) moves - // back from sequence start to insertion point. - if (this.track_config.values.show_insertions) { - // - // Show inserted sequence above, centered on insertion point. - // - - // Draw sequence. - // X center is offset + start - <half_sequence_length> - var x_center = this.left_offset + s_start - (s_end - s_start)/2; - if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { - // Draw sequence container. - ctx.fillStyle = "yellow"; - ctx.fillRect(x_center - gap, y_center - 9, s_end - s_start, 9); - draw_last[draw_last.length] = {type: "triangle", data: [insert_x_coord, y_center + 4, 5]}; - ctx.fillStyle = CONNECTOR_COLOR; - // Based on overlap b/t sequence and tile, get sequence to be drawn. - switch(seq_tile_overlap) { - case(OVERLAP_START): - seq = seq.slice(tile_low-seq_start); - break; - case(OVERLAP_END): - seq = seq.slice(0, seq_start-tile_high); - break; - case(CONTAINED_BY): - // All of sequence drawn. - break; - case(CONTAINS): - seq = seq.slice(tile_low-seq_start, seq_start-tile_high); - break; - } - // Draw sequence. - for (var c = 0, str_len = seq.length; c < str_len; c++) { - var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); - ctx.fillText(seq[c], c_start + this.left_offset - (s_end - s_start)/2, y_center); - } - } - else { - // Draw block. - ctx.fillStyle = "yellow"; - // TODO: This is a pretty hack-ish way to fill rectangle based on mode. - ctx.fillRect(x_center, y_center + (this.mode !== "Dense" ? 2 : 5), - s_end - s_start, (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT)); - } - } - else { - if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { - // Show insertions with a single number at the insertion point. - draw_last[draw_last.length] = {type: "text", data: [seq.length, insert_x_coord, y_center + 9]}; - } - else { - // TODO: probably can merge this case with code above. - } - } - } - seq_offset += cig_len; - // No change to base offset because insertions are drawn above sequence/read. - break; - case "X": - // TODO: draw something? - seq_offset += cig_len; - break; - } - } - - // - // Draw last items. - // - ctx.fillStyle = "yellow"; - var item, type, data; - for (var i = 0; i < draw_last.length; i++) { - item = draw_last[i]; - type = item["type"]; - data = item["data"]; - if (type === "text") { - ctx.font = "bold " + DEFAULT_FONT; - ctx.fillText(data[0], data[1], data[2]); - ctx.font = DEFAULT_FONT; - } - else if (type == "triangle") { - ctx.drawDownwardEquilateralTriangle(data[0], data[1], data[2]); - } - } - }, - /** - * Draw a complete read. - */ - draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset, ref_seq) { - // All features need a start, end, and vertical center. - var feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - feature_name = feature[3], - f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), - f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = (mode === "Dense" ? 1 : (1 + slot)) * y_scale, - block_color = this.prefs.block_color, - label_color = this.prefs.label_color, - // Left-gap for label text since we align chrom text to the position tick. - gap = 0; - - // TODO: fix gap usage; also see note on gap in draw_read. - if ((mode === "Pack" || this.mode === "Auto") && w_scale > CHAR_WIDTH_PX) { - var gap = Math.round(w_scale/2); - } - - // Draw read. - ctx.fillStyle = block_color; - if (feature[5] instanceof Array) { - // Read is paired. - var b1_start = Math.floor( Math.max(0, (feature[4][0] - tile_low) * w_scale) ), - b1_end = Math.ceil( Math.min(width, Math.max(0, (feature[4][1] - tile_low) * w_scale)) ), - b2_start = Math.floor( Math.max(0, (feature[5][0] - tile_low) * w_scale) ), - b2_end = Math.ceil( Math.min(width, Math.max(0, (feature[5][1] - tile_low) * w_scale)) ); - - // Draw left/forward read. - if (feature[4][1] >= tile_low && feature[4][0] <= tile_high && feature[4][2]) { - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[4][0], feature[4][2], feature[4][3], y_center, ref_seq); - } - // Draw right/reverse read. - if (feature[5][1] >= tile_low && feature[5][0] <= tile_high && feature[5][2]) { - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[5][0], feature[5][2], feature[5][3], y_center, ref_seq); - } - // Draw connector. - if (b2_start > b1_end) { - ctx.fillStyle = CONNECTOR_COLOR; - ctx.dashedLine(b1_end + left_offset - gap, y_center + 5, left_offset + b2_start - gap, y_center + 5); - } - } else { - // Read is single. - ctx.fillStyle = block_color; - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature_start, feature[4], feature[5], y_center, ref_seq); - } - if (mode === "Pack" && feature_start > tile_low) { - // Draw label. - ctx.fillStyle = this.prefs.label_color; - if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { - ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING - gap, y_center + 8); - } else { - ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING - gap, y_center + 8); - } - ctx.fillStyle = block_color; - } - } -}); +$.extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); /** * Feature track that displays data generated from tool. @@ -2890,6 +2420,18 @@ // ---- To be extracted ------------------------------------------------------ +// ---- Simple extend function for inheritence ---- + +var extend = function() { + var target = arguments[0]; + for ( var i = 1; i < arguments.length; i++ ) { + var other = arguments[i]; + for ( key in other ) { + target[key] = other[key]; + } + } +} + // ---- Canvas management ---- var CanvasManager = function( document ) { @@ -3211,3 +2753,561 @@ ctx.restore(); } + +var FeaturePainter = function( data, view_start, view_end, prefs, mode ) { + this.data = data; + this.view_start = view_start; + this.view_end = view_end; + this.prefs = prefs; + this.mode = mode; +} + +extend( FeaturePainter.prototype, { + + get_required_height: function( rows_required ) { + // y_scale is the height per row + var required_height = y_scale = this.get_row_height(), mode = this.mode; + // If using a packing mode, need to multiply by the number of slots used + if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { + // Calculate new slots incrementally for this new chunk of data and update height if necessary. + required_height = rows_required * y_scale; + } + return required_height; + }, + + draw: function( ctx, width, height, slots ) { + + var data = this.data, view_start = this.view_start, view_end = this.view_end; + + ctx.save(); + + ctx.fillStyle = this.prefs.block_color; + ctx.textAlign = "right"; + + var view_range = this.view_end - this.view_start, + w_scale = width / view_range, + y_scale = this.get_row_height(); + + for (var i = 0, len = data.length; i < len; i++) { + var feature = data[i], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + // Slot valid only if features are slotted and this feature is slotted; + // feature may not be due to lack of space. + slot = (slots && slots[feature_uid] !== undefined ? slots[feature_uid] : null); + + // Draw feature if there's overlap and mode is dense or feature is slotted (as it must be for all non-dense modes). + if (is_overlap([feature_start, feature_end], [view_start, view_end]) && (this.mode == "Dense" || slot !== null)) { + this.draw_element(ctx, this.mode, feature, slot, view_start, view_end, w_scale, y_scale, + width ); + } + } + + ctx.restore(); + } +}); + +var LinkedFeaturePainter = function( data, view_start, view_end, prefs, mode ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); +} + +extend( LinkedFeaturePainter.prototype, FeaturePainter.prototype, { + + /** + * Height of a single row, depends on mode + */ + get_row_height: function() { + var mode = this.mode, y_scale; + if (mode === "summary_tree") { + // No scale needed. + } + if (mode === "Dense") { + y_scale = DENSE_TRACK_HEIGHT; + } + else if (mode === "no_detail") { + y_scale = NO_DETAIL_TRACK_HEIGHT; + } + else if (mode === "Squish") { + y_scale = SQUISH_TRACK_HEIGHT; + } + else { // mode === "Pack" + y_scale = PACK_TRACK_HEIGHT; + } + return y_scale; + }, + + draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width ) { + var + feature_uid = feature[0], + feature_start = feature[1], + // -1 b/c intervals are half-open. + feature_end = feature[2] - 1, + feature_name = feature[3], + f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), + f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), + y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, + thickness, y_start, thick_start = null, thick_end = null, + block_color = this.prefs.block_color, + label_color = this.prefs.label_color; + + // Dense mode displays the same for all data. + if (mode === "Dense") { + ctx.fillStyle = block_color; + ctx.fillRect(f_start, y_center, f_end - f_start, DENSE_FEATURE_HEIGHT); + } + else if (mode === "no_detail") { + // No details for feature, so only one way to display. + ctx.fillStyle = block_color; + // TODO: what should width be here? + ctx.fillRect(f_start, y_center + 5, f_end - f_start, DENSE_FEATURE_HEIGHT); + } + else { // Mode is either Squish or Pack: + // Feature details. + var feature_strand = feature[4], + feature_ts = feature[5], + feature_te = feature[6], + feature_blocks = feature[7]; + + if (feature_ts && feature_te) { + thick_start = Math.floor( Math.max(0, (feature_ts - tile_low) * w_scale) ); + thick_end = Math.ceil( Math.min(width, Math.max(0, (feature_te - tile_low) * w_scale)) ); + } + + // Set vars that depend on mode. + var thin_height, thick_height; + if (mode === "Squish") { + thin_height = 1; + thick_height = SQUISH_FEATURE_HEIGHT; + } else { // mode === "Pack" + thin_height = 5; + thick_height = PACK_FEATURE_HEIGHT; + } + + // Draw feature/feature blocks + connectors. + if (!feature_blocks) { + // If there are no blocks, treat the feature as one big exon. + if ( feature.strand ) { + if (feature.strand === "+") { + ctx.fillStyle = RIGHT_STRAND_INV; + } else if (feature.strand === "-") { + ctx.fillStyle = LEFT_STRAND_INV; + } + } + else { // No strand. + ctx.fillStyle = block_color; + } + ctx.fillRect(f_start, y_center, f_end - f_start, thick_height); + } else { + // There are feature blocks and mode is either Squish or Pack. + // + // Approach: (a) draw whole feature as connector/intron and (b) draw blocks as + // needed. This ensures that whole feature, regardless of whether it starts with + // a block, is visible. + // + + // Draw whole feature as connector/intron. + var cur_y_center, cur_height; + if (mode === "Squish") { + ctx.fillStyle = CONNECTOR_COLOR; + cur_y_center = y_center + Math.floor(SQUISH_FEATURE_HEIGHT/2) + 1; + cur_height = 1; + } + else { // mode === "Pack" + if (feature_strand) { + var cur_y_center = y_center; + var cur_height = thick_height; + if (feature_strand === "+") { + ctx.fillStyle = RIGHT_STRAND; + } else if (feature_strand === "-") { + ctx.fillStyle = LEFT_STRAND; + } + } + else { + ctx.fillStyle = CONNECTOR_COLOR; + cur_y_center += (SQUISH_FEATURE_HEIGHT/2) + 1; + cur_height = 1; + } + } + ctx.fillRect(f_start, cur_y_center, f_end - f_start, cur_height); + + for (var k = 0, k_len = feature_blocks.length; k < k_len; k++) { + var block = feature_blocks[k], + block_start = Math.floor( Math.max(0, (block[0] - tile_low) * w_scale) ), + // -1 b/c intervals are half-open. + block_end = Math.ceil( Math.min(width, Math.max((block[1] - 1 - tile_low) * w_scale)) ); + + // Skip drawing if block not on tile. + if (block_start > block_end) { continue; } + + // Draw thin block. + ctx.fillStyle = block_color; + ctx.fillRect(block_start, y_center + (thick_height-thin_height)/2 + 1, + block_end - block_start, thin_height); + + // If block intersects with thick region, draw block as thick. + if (thick_start !== undefined && !(block_start > thick_end || block_end < thick_start) ) { + var block_thick_start = Math.max(block_start, thick_start), + block_thick_end = Math.min(block_end, thick_end); + ctx.fillRect(block_thick_start, y_center + 1, + block_thick_end - block_thick_start, thick_height); + } + } + } + + // Draw label for Pack mode. + if (mode === "Pack" && feature_start > tile_low) { + ctx.fillStyle = label_color; + // FIXME: do this without tile_index + var tile_index = 1; + if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { + ctx.textAlign = "left"; + ctx.fillText(feature_name, f_end + LABEL_SPACING, y_center + 8); + } else { + ctx.textAlign = "right"; + ctx.fillText(feature_name, f_start - LABEL_SPACING, y_center + 8); + } + ctx.fillStyle = block_color; + } + } + } +}); + + +var VariantPainter = function( data, view_start, view_end, prefs, mode ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); +} + +extend( VariantPainter.prototype, FeaturePainter.prototype, { + draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width) { + var feature = data[i], + feature_uid = feature[0], + feature_start = feature[1], + // -1 b/c intervals are half-open. + feature_end = feature[2] - 1, + feature_name = feature[3], + // All features need a start, end, and vertical center. + f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), + f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), + y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, + thickness, y_start, thick_start = null, thick_end = null; + + if (no_label) { + ctx.fillStyle = block_color; + ctx.fillRect(f_start + left_offset, y_center + 5, f_end - f_start, 1); + } else { // Show blocks, labels, etc. + // Unpack. + var ref_base = feature[4], alt_base = feature[5], qual = feature[6]; + + // Draw block for entry. + thickness = 9; + y_start = 1; + ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, thickness); + + // Add label for entry. + if (mode !== "Dense" && feature_name !== undefined && feature_start > tile_low) { + // Draw label + ctx.fillStyle = label_color; + if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { + ctx.textAlign = "left"; + ctx.fillText(feature_name, f_end + 2 + left_offset, y_center + 8); + } else { + ctx.textAlign = "right"; + ctx.fillText(feature_name, f_start - 2 + left_offset, y_center + 8); + } + ctx.fillStyle = block_color; + } + + // Show additional data on block. + var vcf_label = ref_base + " / " + alt_base; + if (feature_start > tile_low && ctx.measureText(vcf_label).width < (f_end - f_start)) { + ctx.fillStyle = "white"; + ctx.textAlign = "center"; + ctx.fillText(vcf_label, left_offset + f_start + (f_end-f_start)/2, y_center + 8); + ctx.fillStyle = block_color; + } + } + } +}); + +var ReadPainter = function( data, view_start, view_end, prefs, mode, ref_seq ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); + this.ref_seq = ref_seq; +} + +extend( ReadPainter.prototype, FeaturePainter.prototype, { + /** + * Returns y_scale based on mode. + */ + get_row_height: function() { + var y_scale, mode = this.mode; + if (mode === "summary_tree") { + // No scale needed. + } + if (mode === "Dense") { + y_scale = DENSE_TRACK_HEIGHT; + } + else if (mode === "Squish") { + y_scale = SQUISH_TRACK_HEIGHT; + } + else { // mode === "Pack" + y_scale = PACK_TRACK_HEIGHT; + if (this.track_config.values.show_insertions) { + y_scale *= 2; + } + } + return y_scale; + }, + /** + * Draw a single read. + */ + draw_read: function(ctx, mode, w_scale, tile_low, tile_high, feature_start, cigar, orig_seq, y_center) { + ctx.textAlign = "center"; + var track = this, + tile_region = [tile_low, tile_high], + base_offset = 0, + seq_offset = 0, + gap = 0 + ref_seq = this.ref_seq; + + // Keep list of items that need to be drawn on top of initial drawing layer. + var draw_last = []; + + // Gap is needed so that read is offset and hence first base can be drawn on read. + // TODO-FIX: using this gap offsets reads so that their start is not visually in sync with other tracks. + if ((mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { + gap = Math.round(w_scale/2); + } + if (!cigar) { + // If no cigar string, then assume all matches + cigar = [ [0, orig_seq.length] ] + } + for (var cig_id = 0, len = cigar.length; cig_id < len; cig_id++) { + var cig = cigar[cig_id], + cig_op = "MIDNSHP=X"[cig[0]], + cig_len = cig[1]; + + if (cig_op === "H" || cig_op === "S") { + // Go left if it clips + base_offset -= cig_len; + } + var seq_start = feature_start + base_offset, + s_start = Math.floor( Math.max(0, (seq_start - tile_low) * w_scale) ), + s_end = Math.floor( Math.max(0, (seq_start + cig_len - tile_low) * w_scale) ); + + switch (cig_op) { + case "H": // Hard clipping. + // TODO: draw anything? + // Sequence not present, so do not increment seq_offset. + break; + case "S": // Soft clipping. + case "M": // Match. + case "=": // Equals. + var seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region); + if (seq_tile_overlap !== NO_OVERLAP) { + // Draw. + var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); + if (gap > 0) { + ctx.fillStyle = this.prefs.block_color; + ctx.fillRect(s_start + this.left_offset - gap, y_center + 1, s_end - s_start, 9); + ctx.fillStyle = CONNECTOR_COLOR; + // TODO: this can be made much more efficient by computing the complete sequence + // to draw and then drawing it. + for (var c = 0, str_len = seq.length; c < str_len; c++) { + if (this.track_config.values.show_differences && ref_seq) { + var ref_char = ref_seq[seq_start - tile_low + c]; + if (!ref_char || ref_char.toLowerCase() === seq[c].toLowerCase()) { + continue; + } + } + if (seq_start + c >= tile_low && seq_start + c <= tile_high) { + var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); + ctx.fillText(seq[c], c_start + this.left_offset, y_center + 9); + } + } + } else { + ctx.fillStyle = this.prefs.block_color; + // TODO: This is a pretty hack-ish way to fill rectangle based on mode. + ctx.fillRect(s_start + this.left_offset, + y_center + (this.mode !== "Dense" ? 4 : 5), + s_end - s_start, + (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT) ); + } + } + seq_offset += cig_len; + base_offset += cig_len; + break; + case "N": // Skipped bases. + ctx.fillStyle = CONNECTOR_COLOR; + ctx.fillRect(s_start + this.left_offset - gap, y_center + 5, s_end - s_start, 1); + //ctx.dashedLine(s_start + this.left_offset, y_center + 5, this.left_offset + s_end, y_center + 5); + // No change in seq_offset because sequence not used when skipping. + base_offset += cig_len; + break; + case "D": // Deletion. + ctx.fillStyle = "red"; + ctx.fillRect(s_start + this.left_offset - gap, y_center + 4, s_end - s_start, 3); + // TODO: is this true? No change in seq_offset because sequence not used when skipping. + base_offset += cig_len; + break; + case "P": // TODO: No good way to draw insertions/padding right now, so ignore + // Sequences not present, so do not increment seq_offset. + break; + case "I": // Insertion. + // Check to see if sequence should be drawn at all by looking at the overlap between + // the sequence region and the tile region. + var + seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region), + insert_x_coord = this.left_offset + s_start - gap; + + if (seq_tile_overlap !== NO_OVERLAP) { + var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); + // Insertion point is between the sequence start and the previous base: (-gap) moves + // back from sequence start to insertion point. + if (this.track_config.values.show_insertions) { + // + // Show inserted sequence above, centered on insertion point. + // + + // Draw sequence. + // X center is offset + start - <half_sequence_length> + var x_center = this.left_offset + s_start - (s_end - s_start)/2; + if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { + // Draw sequence container. + ctx.fillStyle = "yellow"; + ctx.fillRect(x_center - gap, y_center - 9, s_end - s_start, 9); + draw_last[draw_last.length] = {type: "triangle", data: [insert_x_coord, y_center + 4, 5]}; + ctx.fillStyle = CONNECTOR_COLOR; + // Based on overlap b/t sequence and tile, get sequence to be drawn. + switch(seq_tile_overlap) { + case(OVERLAP_START): + seq = seq.slice(tile_low-seq_start); + break; + case(OVERLAP_END): + seq = seq.slice(0, seq_start-tile_high); + break; + case(CONTAINED_BY): + // All of sequence drawn. + break; + case(CONTAINS): + seq = seq.slice(tile_low-seq_start, seq_start-tile_high); + break; + } + // Draw sequence. + for (var c = 0, str_len = seq.length; c < str_len; c++) { + var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); + ctx.fillText(seq[c], c_start + this.left_offset - (s_end - s_start)/2, y_center); + } + } + else { + // Draw block. + ctx.fillStyle = "yellow"; + // TODO: This is a pretty hack-ish way to fill rectangle based on mode. + ctx.fillRect(x_center, y_center + (this.mode !== "Dense" ? 2 : 5), + s_end - s_start, (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT)); + } + } + else { + if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { + // Show insertions with a single number at the insertion point. + draw_last[draw_last.length] = {type: "text", data: [seq.length, insert_x_coord, y_center + 9]}; + } + else { + // TODO: probably can merge this case with code above. + } + } + } + seq_offset += cig_len; + // No change to base offset because insertions are drawn above sequence/read. + break; + case "X": + // TODO: draw something? + seq_offset += cig_len; + break; + } + } + + // + // Draw last items. + // + ctx.fillStyle = "yellow"; + var item, type, data; + for (var i = 0; i < draw_last.length; i++) { + item = draw_last[i]; + type = item["type"]; + data = item["data"]; + if (type === "text") { + ctx.font = "bold " + DEFAULT_FONT; + ctx.fillText(data[0], data[1], data[2]); + ctx.font = DEFAULT_FONT; + } + else if (type == "triangle") { + ctx.drawDownwardEquilateralTriangle(data[0], data[1], data[2]); + } + } + }, + /** + * Draw a complete read pair + */ + draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width ) { + // All features need a start, end, and vertical center. + var feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), + f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), + y_center = (mode === "Dense" ? 1 : (1 + slot)) * y_scale, + block_color = this.prefs.block_color, + label_color = this.prefs.label_color, + // Left-gap for label text since we align chrom text to the position tick. + gap = 0; + + // TODO: fix gap usage; also see note on gap in draw_read. + if ((mode === "Pack" || this.mode === "Auto") && w_scale > CHAR_WIDTH_PX) { + var gap = Math.round(w_scale/2); + } + + // Draw read. + ctx.fillStyle = block_color; + if (feature[5] instanceof Array) { + // Read is paired. + var b1_start = Math.floor( Math.max(0, (feature[4][0] - tile_low) * w_scale) ), + b1_end = Math.ceil( Math.min(width, Math.max(0, (feature[4][1] - tile_low) * w_scale)) ), + b2_start = Math.floor( Math.max(0, (feature[5][0] - tile_low) * w_scale) ), + b2_end = Math.ceil( Math.min(width, Math.max(0, (feature[5][1] - tile_low) * w_scale)) ); + + // Draw left/forward read. + if (feature[4][1] >= tile_low && feature[4][0] <= tile_high && feature[4][2]) { + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[4][0], feature[4][2], feature[4][3], y_center); + } + // Draw right/reverse read. + if (feature[5][1] >= tile_low && feature[5][0] <= tile_high && feature[5][2]) { + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[5][0], feature[5][2], feature[5][3], y_center); + } + // Draw connector. + if (b2_start > b1_end) { + ctx.fillStyle = CONNECTOR_COLOR; + ctx.dashedLine(b1_end + left_offset - gap, y_center + 5, left_offset + b2_start - gap, y_center + 5); + } + } else { + // Read is single. + ctx.fillStyle = block_color; + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature_start, feature[4], feature[5], y_center); + } + if (mode === "Pack" && feature_start > tile_low) { + // Draw label. + ctx.fillStyle = this.prefs.label_color; + // FIXME: eliminate tile_index + var tile_index = 1; + if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { + ctx.textAlign = "left"; + ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING - gap, y_center + 8); + } else { + ctx.textAlign = "right"; + ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING - gap, y_center + 8); + } + ctx.fillStyle = block_color; + } + } +}); http://bitbucket.org/galaxy/galaxy-central/changeset/ce135f55f510/ changeset: r5315:ce135f55f510 user: james_taylor date: 2011-03-31 00:30:35 summary: Automated merge with https://bitbucket.org/galaxy/galaxy-central affected #: 1 file (4.7 KB) --- a/static/scripts/trackster.js Wed Mar 30 17:20:10 2011 -0400 +++ b/static/scripts/trackster.js Wed Mar 30 18:30:35 2011 -0400 @@ -372,6 +372,7 @@ this.min_separation = 30; this.has_changes = false; this.init( callback ); + this.canvas_manager = new CanvasManager( container.get(0).ownerDocument ); this.reset(); }; $.extend( View.prototype, { @@ -1949,13 +1950,10 @@ track.content_div.css("height", "0px"); return; } - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - var ctx = canvas.get(0).getContext("2d"); - canvas.get(0).width = Math.ceil( tile_length * w_scale + track.left_offset); - canvas.get(0).height = track.height_px; + var canvas = this.view.canvas_manager.new_canvas(); + var ctx = canvas.getContext("2d"); + canvas.width = Math.ceil( tile_length * w_scale + track.left_offset); + canvas.height = track.height_px; ctx.font = DEFAULT_FONT; ctx.textAlign = "center"; for (var c = 0, str_len = seq.length; c < str_len; c++) { @@ -2010,10 +2008,14 @@ this.height_px = this.track_config.values.height; this.vertical_range = this.track_config.values.max_value - this.track_config.values.min_value; - // Add control for resizing - // Trickery here to deal with the hovering drag handle, can probably be - // pulled out and reused. - (function( track ){ + this.add_resize_handle(); +}; +$.extend(LineTrack.prototype, TiledTrack.prototype, { + add_resize_handle: function () { + // Add control for resizing + // Trickery here to deal with the hovering drag handle, can probably be + // pulled out and reused. + var track = this; var in_handle = false; var in_drag = false; var drag_control = $( "<div class='track-resize'>" ) @@ -2041,9 +2043,7 @@ if ( ! in_handle ) { drag_control.hide(); } track.track_config.values.height = track.height_px; }).appendTo( track.container_div ); - })(this); -}; -$.extend(LineTrack.prototype, TiledTrack.prototype, { + }, predraw_init: function() { var track = this, track_id = track.view.tracks.indexOf(track); @@ -2084,98 +2084,22 @@ return; } - var track = this, - tile_low = tile_index * DENSITY * resolution, + var tile_low = tile_index * DENSITY * resolution, tile_length = DENSITY * resolution, - key = resolution + "_" + tile_index, - params = { hda_ldda: this.hda_ldda, dataset_id: this.dataset_id, resolution: this.view.resolution }; + width = Math.ceil( tile_length * w_scale ), + height = this.height_px; + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width, + canvas.height = height; - var canvas = document.createElement("canvas"), - data = result.data; - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - canvas.get(0).width = Math.ceil( tile_length * w_scale ); - canvas.get(0).height = track.height_px; - var ctx = canvas.get(0).getContext("2d"), - in_path = false, - min_value = track.prefs.min_value, - max_value = track.prefs.max_value, - vertical_range = track.vertical_range, - total_frequency = track.total_frequency, - height_px = track.height_px, - mode = track.mode; - - // Pixel position of 0 on the y axis - var y_zero = Math.round( height_px + min_value / vertical_range * height_px ); - - // Line at 0.0 - ctx.beginPath(); - ctx.moveTo( 0, y_zero ); - ctx.lineTo( tile_length * w_scale, y_zero ); - // ctx.lineWidth = 0.5; - ctx.fillStyle = "#aaa"; - ctx.stroke(); + // Paint line onto full canvas + var ctx = canvas.getContext("2d"); + var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, + this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); + painter.draw( ctx, width, height ); - ctx.beginPath(); - ctx.fillStyle = track.prefs.color; - var x_scaled, y, delta_x_px; - if (data.length > 1) { - delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); - } else { - delta_x_px = 10; - } - for (var i = 0, len = data.length; i < len; i++) { - x_scaled = Math.round((data[i][0] - tile_low) * w_scale); - y = data[i][1]; - if (y === null) { - if (in_path && mode === "Filled") { - ctx.lineTo(x_scaled, height_px); - } - in_path = false; - continue; - } - if (y < min_value) { - y = min_value; - } else if (y > max_value) { - y = max_value; - } - - if (mode === "Histogram") { - // y becomes the bar height in pixels, which is the negated for canvas coords - y = Math.round( y / vertical_range * height_px ); - ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); - } else if (mode === "Intensity" ) { - y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); - ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; - ctx.fillRect(x_scaled, 0, delta_x_px, height_px); - } else { - // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); - y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); - // console.log(canvas.get(0).height, canvas.get(0).width); - if (in_path) { - ctx.lineTo(x_scaled, y); - } else { - in_path = true; - if (mode === "Filled") { - ctx.moveTo(x_scaled, height_px); - ctx.lineTo(x_scaled, y); - } else { - ctx.moveTo(x_scaled, y); - } - } - } - } - if (mode === "Filled") { - if (in_path) { - ctx.lineTo( x_scaled, y_zero ); - ctx.lineTo( 0, y_zero ); - } - ctx.fill(); - } else { - ctx.stroke(); - } return canvas; } }); @@ -2226,6 +2150,8 @@ this.tile_cache = new Cache(CACHED_TILES_FEATURE); this.data_cache = new DataManager(20, this); this.left_offset = 200; + + this.painter = LinkedFeaturePainter; }; $.extend(FeatureTrack.prototype, TiledTrack.prototype, { /** @@ -2236,192 +2162,682 @@ * Returns the number of slots used to pack features. */ incremental_slots: function(level, features, mode) { - // + // Get/create incremental slots for level. If display mode changed, // need to create new slots. - // + var inc_slots = this.inc_slots[level]; if (!inc_slots || (inc_slots.mode !== mode)) { - inc_slots = {}; - inc_slots.w_scale = level; + inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return CONTEXT.measureText( x ) } ); inc_slots.mode = mode; this.inc_slots[level] = inc_slots; - this.start_end_dct[level] = {}; } - // - // If feature already exists in slots (from previously seen tiles), use the same slot, - // otherwise if not seen, add to "undone" list for slot calculation. - // - var w_scale = inc_slots.w_scale, - undone = [], slotted = [], - highest_slot = 0, // To measure how big to draw canvas - max_low = this.view.max_low; - // TODO: Should calculate zoom tile index, which will improve performance - // by only having to look at a smaller subset - // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } - for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i], - feature_uid = feature[0]; - if (inc_slots[feature_uid] !== undefined) { - highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); - slotted.push(inc_slots[feature_uid]); + return inc_slots.slot_features( features ); + }, + /** + * Returns y_scale based on mode. + */ + get_y_scale: function(mode) { + var y_scale; + if (mode === "summary_tree") { + // No scale needed. + } + if (mode === "Dense") { + y_scale = DENSE_TRACK_HEIGHT; + } + else if (mode === "no_detail") { + y_scale = NO_DETAIL_TRACK_HEIGHT; + } + else if (mode === "Squish") { + y_scale = SQUISH_TRACK_HEIGHT; + } + else { // mode === "Pack" + y_scale = PACK_TRACK_HEIGHT; + } + return y_scale; + }, + /** + * Draw FeatureTrack tile. + */ + draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { + var track = this, + tile_low = tile_index * DENSITY * resolution, + tile_high = ( tile_index + 1 ) * DENSITY * resolution, + tile_span = tile_high - tile_low, + width = Math.ceil( tile_span * w_scale ), + mode = this.mode, + min_height = 25, + left_offset = this.left_offset, + slots, + required_height; + + // Set display mode if Auto. + if (mode === "Auto") { + if (result.dataset_type === "summary_tree") { + mode = result.dataset_type; + } else if (result.extra_info === "no_detail") { + mode = "no_detail"; } else { - undone.push(i); + // Choose b/t Squish and Pack. + // Proxy measures for using Squish: + // (a) error message re: limiting number of features shown; + // (b) X number of features shown; + // (c) size of view shown. + // TODO: cannot use (a) and (b) because it requires coordinating mode across tiles; + // fix this so that tiles are redrawn as necessary to use the same mode. + //if ( (result.message && result.message.match(/^Only the first [\d]+/)) || + // (result.data && result.data.length > 2000) || + var data = result.data; + if ( (data.length && data.length < 4) || + (this.view.high - this.view.low > MIN_SQUISH_VIEW_WIDTH) ) { + mode = "Squish"; + } else { + mode = "Pack"; + } + } + } + + // Drawing the summary tree (feature coverage histogram) + if ( mode === "summary_tree" ) { + // Set height of parent_element + required_height = this.summary_draw_height; + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); + // 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: "22px", left: "10px" }); + max_label.prependTo(this.container_div); + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width + left_offset; + // Extra padding at top of summary tree + canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + // Paint summary tree into canvas + var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); + var ctx = canvas.getContext("2d"); + // Deal with left_offset by translating + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height ); + // Canvas element is returned + return canvas; + } + + // Start dealing with row-by-row tracks + + // If working with a mode where slotting is neccesary, update the incremental slotting + var slots, slots_required = 1; + if ( mode === "no_detail" || mode === "Squish" || mode === "Pack" ) { + slots_required = this.incremental_slots(w_scale, result.data, mode); + slots = this.inc_slots[w_scale].slots; + } + + // Filter features + var filtered = []; + if ( result.data ) { + for (var i = 0, len = result.data.length; i < len; i++) { + var feature = result.data[i]; + var hide_feature = false; + var filter; + for (var f = 0, flen = this.filters.length; f < flen; f++) { + filter = this.filters[f]; + filter.update_attrs(feature); + if (!filter.keep(feature)) { + hide_feature = true; + break; + } + } + if (!hide_feature) { + filtered.push( feature ); + } } } - // - // Slot unslotted features. - // - var start_end_dct = this.start_end_dct[level]; + // Create painter, and canvas of sufficient size to contain all features + // HACK: ref_seq will only be defined for ReadTracks, and only the ReadPainter accepts that argument + var painter = new (this.painter)( filtered, tile_low, tile_high, this.prefs, mode, ref_seq ); + var required_height = painter.get_required_height( slots_required ); + var canvas = this.view.canvas_manager.new_canvas(); - // Find the first slot such that current feature doesn't overlap any other features in that slot. - // Returns -1 if no slot was found. - var find_slot = function(f_start, f_end) { - for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { - var has_overlap = false, - slot = start_end_dct[slot_num]; - if (slot !== undefined) { - // Iterate through features already in slot to see if current feature will fit. - for (var k = 0, k_len = slot.length; k < k_len; k++) { - var s_e = slot[k]; - if (f_end > s_e[0] && f_start < s_e[1]) { - // There is overlap - has_overlap = true; - break; - } + canvas.width = width + left_offset; + canvas.height = required_height; + + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); + // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = this.prefs.block_color; + ctx.font = this.default_font; + ctx.textAlign = "right"; + this.container_div.find(".yaxislabel").remove(); + + // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red + // to indicate region where message is applicable + if (result.message) { + $(canvas).css({ + "border-top": "1px solid red" + }); + + ctx.fillStyle = "red"; + ctx.textAlign = "left"; + var old_base = ctx.textBaseline; + ctx.textBaseline = "top"; + ctx.fillText(result.message, left_offset, 0); + ctx.textBaseline = old_base; + + // If there's no data, return. + if (!result.data) { + return canvas; + } + } + + // Set example feature. This is needed so that track can update its UI based on feature attributes. + this.example_feature = (result.data.length ? result.data[0] : undefined); + + // Draw features + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height, slots ); + + return canvas; + } +}); + +var VcfTrack = function(name, view, hda_ldda, dataset_id, prefs, filters) { + FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); + this.track_type = "VcfTrack"; + this.painter = VariantPainter; +}; + +$.extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); + + +var ReadTrack = function (name, view, hda_ldda, dataset_id, prefs, filters) { + FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); + + this.track_config = new TrackConfig( { + track: this, + params: [ + { key: 'block_color', label: 'Block color', type: 'color', default_value: '#444' }, + { key: 'label_color', label: 'Label color', type: 'color', default_value: 'black' }, + { 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: 'mode', type: 'string', default_value: this.mode, hidden: true }, + ], + saved_values: prefs, + onchange: function() { + this.track.tile_cache.clear(); + this.track.draw(); + } + }); + this.prefs = this.track_config.values; + + this.track_type = "ReadTrack"; + this.painter = ReadPainter; + this.make_name_popup_menu(); +}; +$.extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); + +/** + * Feature track that displays data generated from tool. + */ +var ToolDataFeatureTrack = function(name, view, hda_ldda, dataset_id, prefs, filters, parent_track) { + FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters, {}, parent_track); + this.track_type = "ToolDataFeatureTrack"; + + // Set up track to fetch initial data from raw data URL when the dataset--not the converted datasets-- + // is ready. + this.data_url = raw_data_url; + this.data_query_wait = 1000; + this.dataset_check_url = dataset_state_url; +}; + +$.extend(ToolDataFeatureTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { + /** + * For this track type, the predraw init sets up postdraw init. + */ + predraw_init: function() { + // Postdraw init: once data has been fetched, reset data url, wait time and start indexing. + var track = this; + var post_init = function() { + if (track.data_cache.size() === 0) { + // Track still drawing initial data, so do nothing. + setTimeout(post_init, 300); + } + else { + // Track drawing done: reset dataset check, data URL, wait time and get dataset state to start + // indexing. + track.data_url = default_data_url; + track.data_query_wait = DEFAULT_DATA_QUERY_WAIT; + track.dataset_state_url = converted_datasets_state_url; + $.getJSON(track.dataset_state_url, {dataset_id : track.dataset_id, hda_ldda: track.hda_ldda}, function(track_data) {}); + } + }; + post_init(); + } +}); + +// ---- To be extracted ------------------------------------------------------ + +// ---- Simple extend function for inheritence ---- + +var extend = function() { + var target = arguments[0]; + for ( var i = 1; i < arguments.length; i++ ) { + var other = arguments[i]; + for ( key in other ) { + target[key] = other[key]; + } + } +} + +// ---- Canvas management ---- + +var CanvasManager = function( document ) { + this.document = document; +} + +CanvasManager.prototype.new_canvas = function() { + var canvas = this.document.createElement("canvas"); + if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK + return canvas; +} + +// ---- Feature Packing ---- + +/** + * FeatureSlotter determines slots in which to draw features for vertical + * packing. + * + * This implementation is incremental, any feature assigned a slot will be + * retained for slotting future features. + */ +var FeatureSlotter = function ( w_scale, include_label, measureText ) { + this.slots = {}; + this.start_end_dct = {}; + this.w_scale = w_scale; + this.include_label = include_label; + this.measureText = measureText; +} + +/** + * Slot a set of features, `this.slots` will be updated with slots by id, and + * the largest slot required for the passed set of features is returned + */ +FeatureSlotter.prototype.slot_features = function( features ) { + var w_scale = this.w_scale, inc_slots = this.slots, start_end_dct = this.start_end_dct, + undone = [], slotted = [], highest_slot = 0; + + // If feature already exists in slots (from previously seen tiles), use the same slot, + // otherwise if not seen, add to "undone" list for slot calculation. + + // TODO: Should calculate zoom tile index, which will improve performance + // by only having to look at a smaller subset + // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } + for (var i = 0, len = features.length; i < len; i++) { + var feature = features[i], + feature_uid = feature[0]; + if (inc_slots[feature_uid] !== undefined) { + highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); + slotted.push(inc_slots[feature_uid]); + } else { + undone.push(i); + } + } + + // Slot unslotted features. + + // Find the first slot such that current feature doesn't overlap any other features in that slot. + // Returns -1 if no slot was found. + var find_slot = function(f_start, f_end) { + // TODO: Fix constants + for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { + var has_overlap = false, + slot = start_end_dct[slot_num]; + if (slot !== undefined) { + // Iterate through features already in slot to see if current feature will fit. + for (var k = 0, k_len = slot.length; k < k_len; k++) { + var s_e = slot[k]; + if (f_end > s_e[0] && f_start < s_e[1]) { + // There is overlap + has_overlap = true; + break; } } - if (!has_overlap) { - return slot_num; + } + if (!has_overlap) { + return slot_num; + } + } + return -1; + }; + + // Do slotting. + for (var i = 0, len = undone.length; i < len; i++) { + var feature = features[undone[i]], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + // Where to start, end drawing on screen. + f_start = Math.floor( feature_start * w_scale ), + f_end = Math.ceil( feature_end * w_scale ), + text_len = this.measureText(feature_name).width, + text_align; + + // Update start, end drawing locations to include feature name. + // Try to put the name on the left, if not, put on right. + if (feature_name !== undefined && this.include_label ) { + // Add gap for label spacing and extra pack space padding + // TODO: Fix constants + text_len += (LABEL_SPACING + PACK_SPACING); + if (f_start - text_len >= 0) { + f_start -= text_len; + text_align = "left"; + } else { + f_end += text_len; + text_align = "right"; + } + } + + // Find slot. + var slot_num = find_slot(f_start, f_end); + /* + if (slot_num < 0) { + + TODO: this is not yet working -- + console.log(feature_uid, "looking for slot with text on the right"); + // Slot not found. If text was on left, try on right and see + // if slot can be found. + // TODO: are there any checks we need to do to ensure that text + // will fit on tile? + if (text_align === "left") { + f_start -= text_len; + f_end -= text_len; + text_align = "right"; + slot_num = find_slot(f_start, f_end); + } + if (slot_num >= 0) { + console.log(feature_uid, "found slot with text on the right"); + } + + } + */ + // Do slotting. + if (slot_num >= 0) { + // Add current feature to slot. + if (start_end_dct[slot_num] === undefined) { + start_end_dct[slot_num] = []; + } + start_end_dct[slot_num].push([f_start, f_end]); + inc_slots[feature_uid] = slot_num; + highest_slot = Math.max(highest_slot, slot_num); + } + else { + // TODO: remove this warning when skipped features are handled. + // Show warning for skipped feature. + //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + } + } + + // Debugging: view slots data. + /* + for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { + var slot = start_end_dct[i]; + if (slot !== undefined) { + console.log(i, "*************"); + for (var k = 0, k_len = slot.length; k < k_len; k++) { + console.log("\t", slot[k][0], slot[k][1]); + } + } + } + */ + return highest_slot + 1; +} + +// ---- Painters ---- + +/** + * SummaryTreePainter, a histogram showing number of intervals in a region + */ +var SummaryTreePainter = function( data, delta, max, view_start, view_end, show_counts ) { + // Data and data properties + this.data = data; + this.delta = delta; + this.max = max; + // View + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.show_counts = show_counts; +} + +SummaryTreePainter.prototype.draw = function( ctx, width, height ) { + + var view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range; + + var points = this.data, delta = this.delta, max = this.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. + base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; + delta_x_px = Math.ceil(delta * w_scale); + + ctx.save(); + + for (var i = 0, len = points.length; i < len; i++) { + + var x = Math.floor( (points[i][0] - view_start) * w_scale ); + var y = points[i][1]; + + if (!y) { continue; } + var y_px = y / max * height; + + ctx.fillStyle = "black"; + ctx.fillRect( x, base_y - y_px, delta_x_px, y_px ); + + // Draw number count if it can fit the number with some padding, otherwise things clump up + var text_padding_req_x = 4; + if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { + ctx.fillStyle = "#666"; + ctx.textAlign = "center"; + ctx.fillText(y, x + (delta_x_px/2), 10); + } + } + + ctx.restore(); +} + +var LinePainter = function( data, view_start, view_end, min_value, max_value, color, mode ) { + // Data and data properties + this.data = data; + // View + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.min_value = min_value; + this.max_value = max_value; + this.color = color; + this.mode = mode; +} + +LinePainter.prototype.draw = function( ctx, width, height ) { + var + in_path = false, + min_value = this.min_value, + max_value = this.max_value, + vertical_range = max_value - min_value, + height_px = height, + view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range, + mode = this.mode, + data = this.data; + + ctx.save(); + + // Pixel position of 0 on the y axis + var y_zero = Math.round( height + min_value / vertical_range * height ); + + // Line at 0.0 + if ( mode !== "Intensity" ) { + ctx.beginPath(); + ctx.moveTo( 0, y_zero ); + ctx.lineTo( width, y_zero ); + // ctx.lineWidth = 0.5; + ctx.fillStyle = "#aaa"; + ctx.stroke(); + } + + ctx.beginPath(); + ctx.fillStyle = this.color; + var x_scaled, y, delta_x_px; + if (data.length > 1) { + delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); + } else { + delta_x_px = 10; + } + for (var i = 0, len = data.length; i < len; i++) { + x_scaled = Math.round((data[i][0] - view_start) * w_scale); + y = data[i][1]; + if (y === null) { + if (in_path && mode === "Filled") { + ctx.lineTo(x_scaled, height_px); + } + in_path = false; + continue; + } + if (y < min_value) { + y = min_value; + } else if (y > max_value) { + y = max_value; + } + + if (mode === "Histogram") { + // y becomes the bar height in pixels, which is the negated for canvas coords + y = Math.round( y / vertical_range * height_px ); + ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); + } else if (mode === "Intensity" ) { + y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); + ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; + ctx.fillRect(x_scaled, 0, delta_x_px, height_px); + } else { + // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); + y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); + // console.log(canvas.get(0).height, canvas.get(0).width); + if (in_path) { + ctx.lineTo(x_scaled, y); + } else { + in_path = true; + if (mode === "Filled") { + ctx.moveTo(x_scaled, height_px); + ctx.lineTo(x_scaled, y); + } else { + ctx.moveTo(x_scaled, y); } } - return -1; - }; - - // Do slotting. - for (var i = 0, len = undone.length; i < len; i++) { - var feature = features[undone[i]], + } + } + if (mode === "Filled") { + if (in_path) { + ctx.lineTo( x_scaled, y_zero ); + ctx.lineTo( 0, y_zero ); + } + ctx.fill(); + } else { + ctx.stroke(); + } + + ctx.restore(); +} + +var FeaturePainter = function( data, view_start, view_end, prefs, mode ) { + this.data = data; + this.view_start = view_start; + this.view_end = view_end; + this.prefs = prefs; + this.mode = mode; +} + +extend( FeaturePainter.prototype, { + + get_required_height: function( rows_required ) { + // y_scale is the height per row + var required_height = y_scale = this.get_row_height(), mode = this.mode; + // If using a packing mode, need to multiply by the number of slots used + if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { + // Calculate new slots incrementally for this new chunk of data and update height if necessary. + required_height = rows_required * y_scale; + } + return required_height; + }, + + draw: function( ctx, width, height, slots ) { + + var data = this.data, view_start = this.view_start, view_end = this.view_end; + + ctx.save(); + + ctx.fillStyle = this.prefs.block_color; + ctx.textAlign = "right"; + + var view_range = this.view_end - this.view_start, + w_scale = width / view_range, + y_scale = this.get_row_height(); + + for (var i = 0, len = data.length; i < len; i++) { + var feature = data[i], feature_uid = feature[0], feature_start = feature[1], feature_end = feature[2], - feature_name = feature[3], - // Where to start, end drawing on screen. - f_start = Math.floor( (feature_start - max_low) * w_scale ), - f_end = Math.ceil( (feature_end - max_low) * w_scale ), - text_len = CONTEXT.measureText(feature_name).width, - text_align; - - // Update start, end drawing locations to include feature name. - // Try to put the name on the left, if not, put on right. - if (feature_name !== undefined && mode === "Pack") { - // Add gap for label spacing and extra pack space padding - text_len += (LABEL_SPACING + PACK_SPACING); - if (f_start - text_len >= 0) { - f_start -= text_len; - text_align = "left"; - } else { - f_end += text_len; - text_align = "right"; - } - } - - // Find slot. - var slot_num = find_slot(f_start, f_end); - /* - if (slot_num < 0) { + // Slot valid only if features are slotted and this feature is slotted; + // feature may not be due to lack of space. + slot = (slots && slots[feature_uid] !== undefined ? slots[feature_uid] : null); - TODO: this is not yet working -- - console.log(feature_uid, "looking for slot with text on the right"); - // Slot not found. If text was on left, try on right and see - // if slot can be found. - // TODO: are there any checks we need to do to ensure that text - // will fit on tile? - if (text_align === "left") { - f_start -= text_len; - f_end -= text_len; - text_align = "right"; - slot_num = find_slot(f_start, f_end); - } - if (slot_num >= 0) { - console.log(feature_uid, "found slot with text on the right"); - } - - } - */ - // Do slotting. - if (slot_num >= 0) { - // Add current feature to slot. - if (start_end_dct[slot_num] === undefined) { - start_end_dct[slot_num] = []; - } - start_end_dct[slot_num].push([f_start, f_end]); - inc_slots[feature_uid] = slot_num; - highest_slot = Math.max(highest_slot, slot_num); - } - else { - // TODO: remove this warning when skipped features are handled. - // Show warning for skipped feature. - //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + // Draw feature if there's overlap and mode is dense or feature is slotted (as it must be for all non-dense modes). + if (is_overlap([feature_start, feature_end], [view_start, view_end]) && (this.mode == "Dense" || slot !== null)) { + this.draw_element(ctx, this.mode, feature, slot, view_start, view_end, w_scale, y_scale, + width ); } } - - // Debugging: view slots data. - /* - for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { - var slot = start_end_dct[i]; - if (slot !== undefined) { - console.log(i, "*************"); - for (var k = 0, k_len = slot.length; k < k_len; k++) { - console.log("\t", slot[k][0], slot[k][1]); - } - } + + ctx.restore(); + } +}); + +var LinkedFeaturePainter = function( data, view_start, view_end, prefs, mode ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); +} + +extend( LinkedFeaturePainter.prototype, FeaturePainter.prototype, { + + /** + * Height of a single row, depends on mode + */ + get_row_height: function() { + var mode = this.mode, y_scale; + if (mode === "summary_tree") { + // No scale needed. } - */ - return highest_slot + 1; + if (mode === "Dense") { + y_scale = DENSE_TRACK_HEIGHT; + } + else if (mode === "no_detail") { + y_scale = NO_DETAIL_TRACK_HEIGHT; + } + else if (mode === "Squish") { + y_scale = SQUISH_TRACK_HEIGHT; + } + else { // mode === "Pack" + y_scale = PACK_TRACK_HEIGHT; + } + return y_scale; }, - /** - * Draw summary tree on canvas. - */ - draw_summary_tree: function(canvas, points, delta, max, w_scale, required_height, tile_low, left_offset) { - var - // 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. - base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; - delta_x_px = Math.ceil(delta * w_scale); - - var max_label = $("<div />").addClass('yaxislabel'); - max_label.text(max); - - max_label.css({ position: "absolute", top: "22px", left: "10px" }); - max_label.prependTo(this.container_div); - - var ctx = canvas.get(0).getContext("2d"); - for (var i = 0, len = points.length; i < len; i++) { - var x = Math.floor( (points[i][0] - tile_low) * w_scale ); - var y = points[i][1]; - - if (!y) { continue; } - var y_px = y / max * required_height; - - ctx.fillStyle = "black"; - ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); - - // Draw number count if it can fit the number with some padding, otherwise things clump up - var text_padding_req_x = 4; - if (this.prefs.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { - ctx.fillStyle = "#666"; - ctx.textAlign = "center"; - ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); - } - } - }, - /** - * Draw feature. - */ - draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset) { + + draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width ) { var feature_uid = feature[0], feature_start = feature[1], @@ -2438,13 +2854,13 @@ // Dense mode displays the same for all data. if (mode === "Dense") { ctx.fillStyle = block_color; - ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, DENSE_FEATURE_HEIGHT); + ctx.fillRect(f_start, y_center, f_end - f_start, DENSE_FEATURE_HEIGHT); } else if (mode === "no_detail") { // No details for feature, so only one way to display. ctx.fillStyle = block_color; // TODO: what should width be here? - ctx.fillRect(f_start + left_offset, y_center + 5, f_end - f_start, DENSE_FEATURE_HEIGHT); + ctx.fillRect(f_start, y_center + 5, f_end - f_start, DENSE_FEATURE_HEIGHT); } else { // Mode is either Squish or Pack: // Feature details. @@ -2481,7 +2897,7 @@ else { // No strand. ctx.fillStyle = block_color; } - ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, thick_height); + ctx.fillRect(f_start, y_center, f_end - f_start, thick_height); } else { // There are feature blocks and mode is either Squish or Pack. // @@ -2513,7 +2929,7 @@ cur_height = 1; } } - ctx.fillRect(f_start + left_offset, cur_y_center, f_end - f_start, cur_height); + ctx.fillRect(f_start, cur_y_center, f_end - f_start, cur_height); for (var k = 0, k_len = feature_blocks.length; k < k_len; k++) { var block = feature_blocks[k], @@ -2526,14 +2942,14 @@ // Draw thin block. ctx.fillStyle = block_color; - ctx.fillRect(block_start + left_offset, y_center + (thick_height-thin_height)/2 + 1, + ctx.fillRect(block_start, y_center + (thick_height-thin_height)/2 + 1, block_end - block_start, thin_height); // If block intersects with thick region, draw block as thick. if (thick_start !== undefined && !(block_start > thick_end || block_end < thick_start) ) { var block_thick_start = Math.max(block_start, thick_start), block_thick_end = Math.min(block_end, thick_end); - ctx.fillRect(block_thick_start + left_offset, y_center + 1, + ctx.fillRect(block_thick_start, y_center + 1, block_thick_end - block_thick_start, thick_height); } } @@ -2542,207 +2958,27 @@ // Draw label for Pack mode. if (mode === "Pack" && feature_start > tile_low) { ctx.fillStyle = label_color; + // FIXME: do this without tile_index + var tile_index = 1; if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING, y_center + 8); + ctx.fillText(feature_name, f_end + LABEL_SPACING, y_center + 8); } else { ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING, y_center + 8); + ctx.fillText(feature_name, f_start - LABEL_SPACING, y_center + 8); } ctx.fillStyle = block_color; } } - }, - /** - * Returns y_scale based on mode. - */ - get_y_scale: function(mode) { - var y_scale; - if (mode === "summary_tree") { - // No scale needed. - } - if (mode === "Dense") { - y_scale = DENSE_TRACK_HEIGHT; - } - else if (mode === "no_detail") { - y_scale = NO_DETAIL_TRACK_HEIGHT; - } - else if (mode === "Squish") { - y_scale = SQUISH_TRACK_HEIGHT; - } - else { // mode === "Pack" - y_scale = PACK_TRACK_HEIGHT; - } - return y_scale; - }, - /** - * Draw FeatureTrack tile. - */ - draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { - var track = this; - var tile_low = tile_index * DENSITY * resolution, - tile_high = ( tile_index + 1 ) * DENSITY * resolution, - tile_span = tile_high - tile_low, - params = { hda_ldda: track.hda_ldda, dataset_id: track.dataset_id, - resolution: this.view.resolution, mode: this.mode }; - - // - // Create/set/compute some useful vars. - // - var width = Math.ceil( tile_span * w_scale ), - mode = this.mode, - min_height = 25, - left_offset = this.left_offset, - slots, required_height; - - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - // - // Set mode if Auto. - // - if (mode === "Auto") { - if (result.dataset_type === "summary_tree") { - mode = result.dataset_type; - } else if (result.extra_info === "no_detail") { - mode = "no_detail"; - } else { - // Choose b/t Squish and Pack. - // Proxy measures for using Squish: - // (a) error message re: limiting number of features shown; - // (b) X number of features shown; - // (c) size of view shown. - // TODO: cannot use (a) and (b) because it requires coordinating mode across tiles; - // fix this so that tiles are redrawn as necessary to use the same mode. - //if ( (result.message && result.message.match(/^Only the first [\d]+/)) || - // (result.data && result.data.length > 2000) || - var data = result.data; - if ( (data.length && data.length < 4) || - (this.view.high - this.view.low > MIN_SQUISH_VIEW_WIDTH) ) { - mode = "Squish"; - } else { - mode = "Pack"; - } - } - } - - var y_scale = this.get_y_scale(mode); - - // - // Pack reads, set required height. - // - if (mode === "summary_tree") { - required_height = this.summary_draw_height; - } - if (mode === "Dense") { - required_height = min_height; - } - else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { - // Calculate new slots incrementally for this new chunk of data and update height if necessary. - required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; - slots = this.inc_slots[w_scale]; - } - - // - // Set up for drawing. - // - canvas.get(0).width = width + left_offset; - canvas.get(0).height = required_height; - if (result.dataset_type === "summary_tree") { - // Increase canvas height in order to display max label. - canvas.get(0).height += LABEL_SPACING + CHAR_HEIGHT_PX; - } - parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); - // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); - var ctx = canvas.get(0).getContext("2d"); - ctx.fillStyle = this.prefs.block_color; - ctx.font = this.default_font; - ctx.textAlign = "right"; - this.container_div.find(".yaxislabel").remove(); - - // - // Draw summary tree. If tree is drawn, canvas is returned. - // - if (mode === "summary_tree") { - this.draw_summary_tree(canvas, result.data, result.delta, result.max, w_scale, required_height, - tile_low, left_offset); - return canvas; - } - - // - // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red - // to indicate region where message is applicable - if (result.message) { - canvas.css({ - "border-top": "1px solid red" - }); - - ctx.fillStyle = "red"; - ctx.textAlign = "left"; - var old_base = ctx.textBaseline; - ctx.textBaseline = "top"; - ctx.fillText(result.message, left_offset, 0); - ctx.textBaseline = old_base; - - // If there's no data, return. - if (!result.data) { - return canvas; - } - } - - // - // Set example feature. This is needed so that track can update its UI based on feature attributes. - // - this.example_feature = (result.data.length ? result.data[0] : undefined); - - // - // Draw elements. - // - var data = result.data; - for (var i = 0, len = data.length; i < len; i++) { - var feature = data[i], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - // Slot valid only if features are slotted and this feature is slotted; - // feature may not be due to lack of space. - slot = (slots && slots[feature_uid] !== undefined ? slots[feature_uid] : null); - - // Apply filters to feature. - var hide_feature = false; - var filter; - for (var f = 0; f < this.filters.length; f++) { - filter = this.filters[f]; - filter.update_attrs(feature); - if (!filter.keep(feature)) { - hide_feature = true; - break; - } - } - if (hide_feature) { - continue; - } - - // Draw feature if there's overlap and mode is dense or feature is slotted (as it must be for all non-dense modes). - if (is_overlap([feature_start, feature_end], [tile_low, tile_high]) && (mode == "Dense" || slot !== null)) { - this.draw_element(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, - width, left_offset, ref_seq); - } - } - return canvas; } }); -var VcfTrack = function(name, view, hda_ldda, dataset_id, prefs, filters) { - FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); - this.track_type = "VcfTrack"; -}; -$.extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { - /** - * Draw a VCF entry. - */ +var VariantPainter = function( data, view_start, view_end, prefs, mode ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); +} + +extend( VariantPainter.prototype, FeaturePainter.prototype, { draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width) { var feature = data[i], feature_uid = feature[0], @@ -2794,36 +3030,17 @@ } }); -var ReadTrack = function (name, view, hda_ldda, dataset_id, prefs, filters) { - FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); - - this.track_config = new TrackConfig( { - track: this, - params: [ - { key: 'block_color', label: 'Block color', type: 'color', default_value: '#444' }, - { key: 'label_color', label: 'Label color', type: 'color', default_value: 'black' }, - { 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: 'mode', type: 'string', default_value: this.mode, hidden: true }, - ], - saved_values: prefs, - onchange: function() { - this.track.tile_cache.clear(); - this.track.draw(); - } - }); - this.prefs = this.track_config.values; - - this.track_type = "ReadTrack"; - this.make_name_popup_menu(); -}; -$.extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { +var ReadPainter = function( data, view_start, view_end, prefs, mode, ref_seq ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); + this.ref_seq = ref_seq; +} + +extend( ReadPainter.prototype, FeaturePainter.prototype, { /** * Returns y_scale based on mode. */ - get_y_scale: function(mode) { - var y_scale; + get_row_height: function() { + var y_scale, mode = this.mode; if (mode === "summary_tree") { // No scale needed. } @@ -2844,13 +3061,14 @@ /** * Draw a single read. */ - draw_read: function(ctx, mode, w_scale, tile_low, tile_high, feature_start, cigar, orig_seq, y_center, ref_seq) { + draw_read: function(ctx, mode, w_scale, tile_low, tile_high, feature_start, cigar, orig_seq, y_center) { ctx.textAlign = "center"; var track = this, tile_region = [tile_low, tile_high], base_offset = 0, seq_offset = 0, - gap = 0; + gap = 0 + ref_seq = this.ref_seq; // Keep list of items that need to be drawn on top of initial drawing layer. var draw_last = []; @@ -3029,9 +3247,9 @@ } }, /** - * Draw a complete read. + * Draw a complete read pair */ - draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset, ref_seq) { + draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width ) { // All features need a start, end, and vertical center. var feature_uid = feature[0], feature_start = feature[1], @@ -3061,11 +3279,11 @@ // Draw left/forward read. if (feature[4][1] >= tile_low && feature[4][0] <= tile_high && feature[4][2]) { - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[4][0], feature[4][2], feature[4][3], y_center, ref_seq); + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[4][0], feature[4][2], feature[4][3], y_center); } // Draw right/reverse read. if (feature[5][1] >= tile_low && feature[5][0] <= tile_high && feature[5][2]) { - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[5][0], feature[5][2], feature[5][3], y_center, ref_seq); + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[5][0], feature[5][2], feature[5][3], y_center); } // Draw connector. if (b2_start > b1_end) { @@ -3075,11 +3293,13 @@ } else { // Read is single. ctx.fillStyle = block_color; - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature_start, feature[4], feature[5], y_center, ref_seq); + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature_start, feature[4], feature[5], y_center); } if (mode === "Pack" && feature_start > tile_low) { // Draw label. ctx.fillStyle = this.prefs.label_color; + // FIXME: eliminate tile_index + var tile_index = 1; if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { ctx.textAlign = "left"; ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING - gap, y_center + 8); @@ -3091,44 +3311,3 @@ } } }); - -/** - * Feature track that displays data generated from tool. - */ -var ToolDataFeatureTrack = function(name, view, hda_ldda, dataset_id, prefs, filters, parent_track) { - FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters, {}, parent_track); - this.track_type = "ToolDataFeatureTrack"; - - // Set up track to fetch initial data from raw data URL when the dataset--not the converted datasets-- - // is ready. - this.data_url = raw_data_url; - this.data_query_wait = 1000; - this.dataset_check_url = dataset_state_url; -}; - -$.extend(ToolDataFeatureTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { - /** - * For this track type, the predraw init sets up postdraw init. - */ - predraw_init: function() { - // Postdraw init: once data has been fetched, reset data url, wait time and start indexing. - var track = this; - var post_init = function() { - if (track.data_cache.size() === 0) { - // Track still drawing initial data, so do nothing. - setTimeout(post_init, 300); - } - else { - // Track drawing done: reset dataset check, data URL, wait time and get dataset state to start - // indexing. - track.data_url = default_data_url; - track.data_query_wait = DEFAULT_DATA_QUERY_WAIT; - track.dataset_state_url = converted_datasets_state_url; - $.getJSON(track.dataset_state_url, {dataset_id : track.dataset_id, hda_ldda: track.hda_ldda}, function(track_data) {}); - } - }; - post_init(); - } -}); - - http://bitbucket.org/galaxy/galaxy-central/changeset/5e792d8de77d/ changeset: r5316:5e792d8de77d user: dan date: 2011-03-31 16:16:40 summary: Fix for wrapping input values for change_format and label tags when tool is using check_values="false". Fixes issue seen when e.g. using an output label in a data_source tool. affected #: 1 file (309 bytes) --- a/lib/galaxy/tools/actions/__init__.py Wed Mar 30 18:30:35 2011 -0400 +++ b/lib/galaxy/tools/actions/__init__.py Thu Mar 31 10:16:40 2011 -0400 @@ -133,16 +133,18 @@ else: new_list.append( value ) return new_list - def wrap_values( inputs, input_values ): + def wrap_values( inputs, input_values, skip_missing_values = False ): # Wrap tool inputs as necessary for input in inputs.itervalues(): + if input.name not in input_values and skip_missing_values: + continue if isinstance( input, Repeat ): for d in input_values[ input.name ]: - wrap_values( input.inputs, d ) + wrap_values( input.inputs, d, skip_missing_values = skip_missing_values ) elif isinstance( input, Conditional ): values = input_values[ input.name ] current = values[ "__current_case__" ] - wrap_values( input.cases[current].inputs, values ) + wrap_values( input.cases[current].inputs, values, skip_missing_values = skip_missing_values ) elif isinstance( input, DataToolParameter ): input_values[ input.name ] = \ galaxy.tools.DatasetFilenameWrapper( input_values[ input.name ], @@ -254,7 +256,7 @@ if output.change_format: if params is None: params = make_dict_copy( incoming ) - wrap_values( tool.inputs, params ) + wrap_values( tool.inputs, params, skip_missing_values = not tool.check_values ) for change_elem in output.change_format: for when_elem in change_elem.findall( 'when' ): check = when_elem.get( 'input', None ) @@ -304,7 +306,7 @@ # <outputs> # <data format="input" name="output" label="Blat on ${<input_param>.name}" /> # </outputs> - wrap_values( tool.inputs, params ) + wrap_values( tool.inputs, params, skip_missing_values = not tool.check_values ) #tool (only needing to be set once) and on_string (set differently for each label) are overwritten for each output dataset label being determined params['tool'] = tool params['on_string'] = on_text http://bitbucket.org/galaxy/galaxy-central/changeset/129a624fcace/ changeset: r5317:129a624fcace user: james_taylor date: 2011-03-31 20:08:00 summary: Merge affected #: 2 files (143 bytes) --- a/lib/galaxy/web/api/workflows.py Thu Mar 31 10:16:40 2011 -0400 +++ b/lib/galaxy/web/api/workflows.py Thu Mar 31 14:08:00 2011 -0400 @@ -57,7 +57,7 @@ inputs = {} for step in latest_workflow.steps: if step.type == 'data_input': - inputs[step.id] = {'label':"Input Dataset", 'value':""} + inputs[step.id] = {'label':step.tool_inputs['name'], 'value':""} else: pass # Eventually, allow regular tool parameters to be inserted and modified at runtime. --- a/static/scripts/trackster.js Thu Mar 31 10:16:40 2011 -0400 +++ b/static/scripts/trackster.js Thu Mar 31 14:08:00 2011 -0400 @@ -2298,7 +2298,8 @@ // Create painter, and canvas of sufficient size to contain all features // HACK: ref_seq will only be defined for ReadTracks, and only the ReadPainter accepts that argument var painter = new (this.painter)( filtered, tile_low, tile_high, this.prefs, mode, ref_seq ); - var required_height = painter.get_required_height( slots_required ); + // FIXME: ERROR_PADDING is an ugly gap most of the time + var required_height = painter.get_required_height( slots_required ) + ERROR_PADDING; var canvas = this.view.canvas_manager.new_canvas(); canvas.width = width + left_offset; @@ -2336,7 +2337,7 @@ this.example_feature = (result.data.length ? result.data[0] : undefined); // Draw features - ctx.translate( left_offset, 0 ); + ctx.translate( left_offset, ERROR_PADDING ); painter.draw( ctx, width, required_height, slots ); return canvas; @@ -2772,7 +2773,8 @@ // Calculate new slots incrementally for this new chunk of data and update height if necessary. required_height = rows_required * y_scale; } - return required_height; + // Pad bottom by half a row + return required_height + Math.round( y_scale / 2 ); }, draw: function( ctx, width, height, slots ) { @@ -2846,11 +2848,11 @@ feature_name = feature[3], f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, + y_center = (mode === "Dense" ? 0 : (0 + slot)) * y_scale, thickness, y_start, thick_start = null, thick_end = null, block_color = this.prefs.block_color, label_color = this.prefs.label_color; - + // Dense mode displays the same for all data. if (mode === "Dense") { ctx.fillStyle = block_color; @@ -2989,7 +2991,7 @@ // All features need a start, end, and vertical center. f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, + y_center = (mode === "Dense" ? 0 : (0 + slot)) * y_scale, thickness, y_start, thick_start = null, thick_end = null; if (no_label) { @@ -3052,7 +3054,7 @@ } else { // mode === "Pack" y_scale = PACK_TRACK_HEIGHT; - if (this.track_config.values.show_insertions) { + if (this.prefs.show_insertions) { y_scale *= 2; } } @@ -3109,12 +3111,12 @@ var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); if (gap > 0) { ctx.fillStyle = this.prefs.block_color; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 1, s_end - s_start, 9); + ctx.fillRect(s_start - gap, y_center + 1, s_end - s_start, 9); ctx.fillStyle = CONNECTOR_COLOR; // TODO: this can be made much more efficient by computing the complete sequence // to draw and then drawing it. for (var c = 0, str_len = seq.length; c < str_len; c++) { - if (this.track_config.values.show_differences && ref_seq) { + if (this.prefs.show_differences && ref_seq) { var ref_char = ref_seq[seq_start - tile_low + c]; if (!ref_char || ref_char.toLowerCase() === seq[c].toLowerCase()) { continue; @@ -3122,13 +3124,13 @@ } if (seq_start + c >= tile_low && seq_start + c <= tile_high) { var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); - ctx.fillText(seq[c], c_start + this.left_offset, y_center + 9); + ctx.fillText(seq[c], c_start, y_center + 9); } } } else { ctx.fillStyle = this.prefs.block_color; // TODO: This is a pretty hack-ish way to fill rectangle based on mode. - ctx.fillRect(s_start + this.left_offset, + ctx.fillRect(s_start, y_center + (this.mode !== "Dense" ? 4 : 5), s_end - s_start, (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT) ); @@ -3139,14 +3141,14 @@ break; case "N": // Skipped bases. ctx.fillStyle = CONNECTOR_COLOR; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 5, s_end - s_start, 1); + ctx.fillRect(s_start - gap, y_center + 5, s_end - s_start, 1); //ctx.dashedLine(s_start + this.left_offset, y_center + 5, this.left_offset + s_end, y_center + 5); // No change in seq_offset because sequence not used when skipping. base_offset += cig_len; break; case "D": // Deletion. ctx.fillStyle = "red"; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 4, s_end - s_start, 3); + ctx.fillRect(s_start - gap, y_center + 4, s_end - s_start, 3); // TODO: is this true? No change in seq_offset because sequence not used when skipping. base_offset += cig_len; break; @@ -3158,20 +3160,20 @@ // the sequence region and the tile region. var seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region), - insert_x_coord = this.left_offset + s_start - gap; + insert_x_coord = s_start - gap; if (seq_tile_overlap !== NO_OVERLAP) { var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); // Insertion point is between the sequence start and the previous base: (-gap) moves // back from sequence start to insertion point. - if (this.track_config.values.show_insertions) { + if (this.prefs.show_insertions) { // // Show inserted sequence above, centered on insertion point. // // Draw sequence. // X center is offset + start - <half_sequence_length> - var x_center = this.left_offset + s_start - (s_end - s_start)/2; + var x_center = s_start - (s_end - s_start)/2; if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { // Draw sequence container. ctx.fillStyle = "yellow"; @@ -3196,7 +3198,7 @@ // Draw sequence. for (var c = 0, str_len = seq.length; c < str_len; c++) { var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); - ctx.fillText(seq[c], c_start + this.left_offset - (s_end - s_start)/2, y_center); + ctx.fillText(seq[c], c_start - (s_end - s_start)/2, y_center); } } else { @@ -3288,7 +3290,7 @@ // Draw connector. if (b2_start > b1_end) { ctx.fillStyle = CONNECTOR_COLOR; - ctx.dashedLine(b1_end + left_offset - gap, y_center + 5, left_offset + b2_start - gap, y_center + 5); + ctx.dashedLine(b1_end - gap, y_center + 5, b2_start - gap, y_center + 5); } } else { // Read is single. @@ -3302,10 +3304,10 @@ var tile_index = 1; if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING - gap, y_center + 8); + ctx.fillText(feature_name, f_end + LABEL_SPACING - gap, y_center + 8); } else { ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING - gap, y_center + 8); + ctx.fillText(feature_name, f_start - LABEL_SPACING - gap, y_center + 8); } ctx.fillStyle = block_color; } http://bitbucket.org/galaxy/galaxy-central/changeset/82bbc491ab90/ changeset: r5318:82bbc491ab90 user: kanwei date: 2011-04-01 00:58:25 summary: Merge james' trackster changes affected #: 1 file (4.5 KB) --- a/static/scripts/trackster.js Thu Mar 31 18:58:02 2011 -0400 +++ b/static/scripts/trackster.js Thu Mar 31 18:58:25 2011 -0400 @@ -372,6 +372,7 @@ this.min_separation = 30; this.has_changes = false; this.init( callback ); + this.canvas_manager = new CanvasManager( container.get(0).ownerDocument ); this.reset(); }; $.extend( View.prototype, { @@ -1976,13 +1977,10 @@ track.content_div.css("height", "0px"); return; } - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - var ctx = canvas.get(0).getContext("2d"); - canvas.get(0).width = Math.ceil( tile_length * w_scale + track.left_offset); - canvas.get(0).height = track.height_px; + var canvas = this.view.canvas_manager.new_canvas(); + var ctx = canvas.getContext("2d"); + canvas.width = Math.ceil( tile_length * w_scale + track.left_offset); + canvas.height = track.height_px; ctx.font = DEFAULT_FONT; ctx.textAlign = "center"; for (var c = 0, str_len = seq.length; c < str_len; c++) { @@ -2037,10 +2035,14 @@ this.height_px = this.track_config.values.height; this.vertical_range = this.track_config.values.max_value - this.track_config.values.min_value; - // Add control for resizing - // Trickery here to deal with the hovering drag handle, can probably be - // pulled out and reused. - (function( track ){ + this.add_resize_handle(); +}; +$.extend(LineTrack.prototype, TiledTrack.prototype, { + add_resize_handle: function () { + // Add control for resizing + // Trickery here to deal with the hovering drag handle, can probably be + // pulled out and reused. + var track = this; var in_handle = false; var in_drag = false; var drag_control = $( "<div class='track-resize'>" ) @@ -2068,9 +2070,7 @@ if ( ! in_handle ) { drag_control.hide(); } track.track_config.values.height = track.height_px; }).appendTo( track.container_div ); - })(this); -}; -$.extend(LineTrack.prototype, TiledTrack.prototype, { + }, predraw_init: function() { var track = this, track_id = track.view.tracks.indexOf(track); @@ -2111,98 +2111,22 @@ return; } - var track = this, - tile_low = tile_index * DENSITY * resolution, + var tile_low = tile_index * DENSITY * resolution, tile_length = DENSITY * resolution, - key = resolution + "_" + tile_index, - params = { hda_ldda: this.hda_ldda, dataset_id: this.dataset_id, resolution: this.view.resolution }; + width = Math.ceil( tile_length * w_scale ), + height = this.height_px; + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width, + canvas.height = height; - var canvas = document.createElement("canvas"), - data = result.data; - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - canvas.get(0).width = Math.ceil( tile_length * w_scale ); - canvas.get(0).height = track.height_px; - var ctx = canvas.get(0).getContext("2d"), - in_path = false, - min_value = track.prefs.min_value, - max_value = track.prefs.max_value, - vertical_range = track.vertical_range, - total_frequency = track.total_frequency, - height_px = track.height_px, - mode = track.mode; - - // Pixel position of 0 on the y axis - var y_zero = Math.round( height_px + min_value / vertical_range * height_px ); - - // Line at 0.0 - ctx.beginPath(); - ctx.moveTo( 0, y_zero ); - ctx.lineTo( tile_length * w_scale, y_zero ); - // ctx.lineWidth = 0.5; - ctx.fillStyle = "#aaa"; - ctx.stroke(); + // Paint line onto full canvas + var ctx = canvas.getContext("2d"); + var painter = new LinePainter( result.data, tile_low, tile_low + tile_length, + this.prefs.min_value, this.prefs.max_value, this.prefs.color, this.mode ); + painter.draw( ctx, width, height ); - ctx.beginPath(); - ctx.fillStyle = track.prefs.color; - var x_scaled, y, delta_x_px; - if (data.length > 1) { - delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); - } else { - delta_x_px = 10; - } - for (var i = 0, len = data.length; i < len; i++) { - x_scaled = Math.round((data[i][0] - tile_low) * w_scale); - y = data[i][1]; - if (y === null) { - if (in_path && mode === "Filled") { - ctx.lineTo(x_scaled, height_px); - } - in_path = false; - continue; - } - if (y < min_value) { - y = min_value; - } else if (y > max_value) { - y = max_value; - } - - if (mode === "Histogram") { - // y becomes the bar height in pixels, which is the negated for canvas coords - y = Math.round( y / vertical_range * height_px ); - ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); - } else if (mode === "Intensity" ) { - y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); - ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; - ctx.fillRect(x_scaled, 0, delta_x_px, height_px); - } else { - // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); - y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); - // console.log(canvas.get(0).height, canvas.get(0).width); - if (in_path) { - ctx.lineTo(x_scaled, y); - } else { - in_path = true; - if (mode === "Filled") { - ctx.moveTo(x_scaled, height_px); - ctx.lineTo(x_scaled, y); - } else { - ctx.moveTo(x_scaled, y); - } - } - } - } - if (mode === "Filled") { - if (in_path) { - ctx.lineTo( x_scaled, y_zero ); - ctx.lineTo( 0, y_zero ); - } - ctx.fill(); - } else { - ctx.stroke(); - } return canvas; } }); @@ -2253,6 +2177,8 @@ this.tile_cache = new Cache(CACHED_TILES_FEATURE); this.data_cache = new DataManager(20, this); this.left_offset = 200; + + this.painter = LinkedFeaturePainter; }; $.extend(FeatureTrack.prototype, TiledTrack.prototype, { /** @@ -2263,192 +2189,684 @@ * Returns the number of slots used to pack features. */ incremental_slots: function(level, features, mode) { - // + // Get/create incremental slots for level. If display mode changed, // need to create new slots. - // + var inc_slots = this.inc_slots[level]; if (!inc_slots || (inc_slots.mode !== mode)) { - inc_slots = {}; - inc_slots.w_scale = level; + inc_slots = new FeatureSlotter( level, mode === "Pack", function ( x ) { return CONTEXT.measureText( x ) } ); inc_slots.mode = mode; this.inc_slots[level] = inc_slots; - this.start_end_dct[level] = {}; } - // - // If feature already exists in slots (from previously seen tiles), use the same slot, - // otherwise if not seen, add to "undone" list for slot calculation. - // - var w_scale = inc_slots.w_scale, - undone = [], slotted = [], - highest_slot = 0, // To measure how big to draw canvas - max_low = this.view.max_low; - // TODO: Should calculate zoom tile index, which will improve performance - // by only having to look at a smaller subset - // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } - for (var i = 0, len = features.length; i < len; i++) { - var feature = features[i], - feature_uid = feature[0]; - if (inc_slots[feature_uid] !== undefined) { - highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); - slotted.push(inc_slots[feature_uid]); + return inc_slots.slot_features( features ); + }, + /** + * Returns y_scale based on mode. + */ + get_y_scale: function(mode) { + var y_scale; + if (mode === "summary_tree") { + // No scale needed. + } + if (mode === "Dense") { + y_scale = DENSE_TRACK_HEIGHT; + } + else if (mode === "no_detail") { + y_scale = NO_DETAIL_TRACK_HEIGHT; + } + else if (mode === "Squish") { + y_scale = SQUISH_TRACK_HEIGHT; + } + else { // mode === "Pack" + y_scale = PACK_TRACK_HEIGHT; + } + return y_scale; + }, + /** + * Draw FeatureTrack tile. + */ + draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { + var track = this, + tile_low = tile_index * DENSITY * resolution, + tile_high = ( tile_index + 1 ) * DENSITY * resolution, + tile_span = tile_high - tile_low, + width = Math.ceil( tile_span * w_scale ), + mode = this.mode, + min_height = 25, + left_offset = this.left_offset, + slots, + required_height; + + // Set display mode if Auto. + if (mode === "Auto") { + if (result.dataset_type === "summary_tree") { + mode = result.dataset_type; + } else if (result.extra_info === "no_detail") { + mode = "no_detail"; } else { - undone.push(i); + // Choose b/t Squish and Pack. + // Proxy measures for using Squish: + // (a) error message re: limiting number of features shown; + // (b) X number of features shown; + // (c) size of view shown. + // TODO: cannot use (a) and (b) because it requires coordinating mode across tiles; + // fix this so that tiles are redrawn as necessary to use the same mode. + //if ( (result.message && result.message.match(/^Only the first [\d]+/)) || + // (result.data && result.data.length > 2000) || + var data = result.data; + if ( (data.length && data.length < 4) || + (this.view.high - this.view.low > MIN_SQUISH_VIEW_WIDTH) ) { + mode = "Squish"; + } else { + mode = "Pack"; + } + } + } + + // Drawing the summary tree (feature coverage histogram) + if ( mode === "summary_tree" ) { + // Set height of parent_element + required_height = this.summary_draw_height; + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); + // 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: "22px", left: "10px" }); + max_label.prependTo(this.container_div); + // Create canvas + var canvas = this.view.canvas_manager.new_canvas(); + canvas.width = width + left_offset; + // Extra padding at top of summary tree + canvas.height = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; + // Paint summary tree into canvas + var painter = new SummaryTreePainter( result.data, result.delta, result.max, tile_low, tile_high, this.prefs.show_counts ); + var ctx = canvas.getContext("2d"); + // Deal with left_offset by translating + ctx.translate( left_offset, 0 ); + painter.draw( ctx, width, required_height ); + // Canvas element is returned + return canvas; + } + + // Start dealing with row-by-row tracks + + // If working with a mode where slotting is neccesary, update the incremental slotting + var slots, slots_required = 1; + if ( mode === "no_detail" || mode === "Squish" || mode === "Pack" ) { + slots_required = this.incremental_slots(w_scale, result.data, mode); + slots = this.inc_slots[w_scale].slots; + } + + // Filter features + var filtered = []; + if ( result.data ) { + for (var i = 0, len = result.data.length; i < len; i++) { + var feature = result.data[i]; + var hide_feature = false; + var filter; + for (var f = 0, flen = this.filters.length; f < flen; f++) { + filter = this.filters[f]; + filter.update_attrs(feature); + if (!filter.keep(feature)) { + hide_feature = true; + break; + } + } + if (!hide_feature) { + filtered.push( feature ); + } } } - // - // Slot unslotted features. - // - var start_end_dct = this.start_end_dct[level]; + // Create painter, and canvas of sufficient size to contain all features + // HACK: ref_seq will only be defined for ReadTracks, and only the ReadPainter accepts that argument + var painter = new (this.painter)( filtered, tile_low, tile_high, this.prefs, mode, ref_seq ); + // FIXME: ERROR_PADDING is an ugly gap most of the time + var required_height = painter.get_required_height( slots_required ) + ERROR_PADDING; + var canvas = this.view.canvas_manager.new_canvas(); - // Find the first slot such that current feature doesn't overlap any other features in that slot. - // Returns -1 if no slot was found. - var find_slot = function(f_start, f_end) { - for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { - var has_overlap = false, - slot = start_end_dct[slot_num]; - if (slot !== undefined) { - // Iterate through features already in slot to see if current feature will fit. - for (var k = 0, k_len = slot.length; k < k_len; k++) { - var s_e = slot[k]; - if (f_end > s_e[0] && f_start < s_e[1]) { - // There is overlap - has_overlap = true; - break; - } + canvas.width = width + left_offset; + canvas.height = required_height; + + parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); + // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = this.prefs.block_color; + ctx.font = this.default_font; + ctx.textAlign = "right"; + this.container_div.find(".yaxislabel").remove(); + + // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red + // to indicate region where message is applicable + if (result.message) { + $(canvas).css({ + "border-top": "1px solid red" + }); + + ctx.fillStyle = "red"; + ctx.textAlign = "left"; + var old_base = ctx.textBaseline; + ctx.textBaseline = "top"; + ctx.fillText(result.message, left_offset, 0); + ctx.textBaseline = old_base; + + // If there's no data, return. + if (!result.data) { + return canvas; + } + } + + // Set example feature. This is needed so that track can update its UI based on feature attributes. + this.example_feature = (result.data.length ? result.data[0] : undefined); + + // Draw features + ctx.translate( left_offset, ERROR_PADDING ); + painter.draw( ctx, width, required_height, slots ); + + return canvas; + } +}); + +var VcfTrack = function(name, view, hda_ldda, dataset_id, prefs, filters) { + FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); + this.track_type = "VcfTrack"; + this.painter = VariantPainter; +}; + +$.extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); + + +var ReadTrack = function (name, view, hda_ldda, dataset_id, prefs, filters) { + FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); + + this.track_config = new TrackConfig( { + track: this, + params: [ + { key: 'block_color', label: 'Block color', type: 'color', default_value: '#444' }, + { key: 'label_color', label: 'Label color', type: 'color', default_value: 'black' }, + { 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: 'mode', type: 'string', default_value: this.mode, hidden: true }, + ], + saved_values: prefs, + onchange: function() { + this.track.tile_cache.clear(); + this.track.draw(); + } + }); + this.prefs = this.track_config.values; + + this.track_type = "ReadTrack"; + this.painter = ReadPainter; + this.make_name_popup_menu(); +}; +$.extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype); + +/** + * Feature track that displays data generated from tool. + */ +var ToolDataFeatureTrack = function(name, view, hda_ldda, dataset_id, prefs, filters, parent_track) { + FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters, {}, parent_track); + this.track_type = "ToolDataFeatureTrack"; + + // Set up track to fetch initial data from raw data URL when the dataset--not the converted datasets-- + // is ready. + this.data_url = raw_data_url; + this.data_query_wait = 1000; + this.dataset_check_url = dataset_state_url; +}; + +$.extend(ToolDataFeatureTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { + /** + * For this track type, the predraw init sets up postdraw init. + */ + predraw_init: function() { + // Postdraw init: once data has been fetched, reset data url, wait time and start indexing. + var track = this; + var post_init = function() { + if (track.data_cache.size() === 0) { + // Track still drawing initial data, so do nothing. + setTimeout(post_init, 300); + } + else { + // Track drawing done: reset dataset check, data URL, wait time and get dataset state to start + // indexing. + track.data_url = default_data_url; + track.data_query_wait = DEFAULT_DATA_QUERY_WAIT; + track.dataset_state_url = converted_datasets_state_url; + $.getJSON(track.dataset_state_url, {dataset_id : track.dataset_id, hda_ldda: track.hda_ldda}, function(track_data) {}); + } + }; + post_init(); + } +}); + +// ---- To be extracted ------------------------------------------------------ + +// ---- Simple extend function for inheritence ---- + +var extend = function() { + var target = arguments[0]; + for ( var i = 1; i < arguments.length; i++ ) { + var other = arguments[i]; + for ( key in other ) { + target[key] = other[key]; + } + } +} + +// ---- Canvas management ---- + +var CanvasManager = function( document ) { + this.document = document; +} + +CanvasManager.prototype.new_canvas = function() { + var canvas = this.document.createElement("canvas"); + if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK + return canvas; +} + +// ---- Feature Packing ---- + +/** + * FeatureSlotter determines slots in which to draw features for vertical + * packing. + * + * This implementation is incremental, any feature assigned a slot will be + * retained for slotting future features. + */ +var FeatureSlotter = function ( w_scale, include_label, measureText ) { + this.slots = {}; + this.start_end_dct = {}; + this.w_scale = w_scale; + this.include_label = include_label; + this.measureText = measureText; +} + +/** + * Slot a set of features, `this.slots` will be updated with slots by id, and + * the largest slot required for the passed set of features is returned + */ +FeatureSlotter.prototype.slot_features = function( features ) { + var w_scale = this.w_scale, inc_slots = this.slots, start_end_dct = this.start_end_dct, + undone = [], slotted = [], highest_slot = 0; + + // If feature already exists in slots (from previously seen tiles), use the same slot, + // otherwise if not seen, add to "undone" list for slot calculation. + + // TODO: Should calculate zoom tile index, which will improve performance + // by only having to look at a smaller subset + // if (this.start_end_dct[0] === undefined) { this.start_end_dct[0] = []; } + for (var i = 0, len = features.length; i < len; i++) { + var feature = features[i], + feature_uid = feature[0]; + if (inc_slots[feature_uid] !== undefined) { + highest_slot = Math.max(highest_slot, inc_slots[feature_uid]); + slotted.push(inc_slots[feature_uid]); + } else { + undone.push(i); + } + } + + // Slot unslotted features. + + // Find the first slot such that current feature doesn't overlap any other features in that slot. + // Returns -1 if no slot was found. + var find_slot = function(f_start, f_end) { + // TODO: Fix constants + for (var slot_num = 0; slot_num <= MAX_FEATURE_DEPTH; slot_num++) { + var has_overlap = false, + slot = start_end_dct[slot_num]; + if (slot !== undefined) { + // Iterate through features already in slot to see if current feature will fit. + for (var k = 0, k_len = slot.length; k < k_len; k++) { + var s_e = slot[k]; + if (f_end > s_e[0] && f_start < s_e[1]) { + // There is overlap + has_overlap = true; + break; } } - if (!has_overlap) { - return slot_num; + } + if (!has_overlap) { + return slot_num; + } + } + return -1; + }; + + // Do slotting. + for (var i = 0, len = undone.length; i < len; i++) { + var feature = features[undone[i]], + feature_uid = feature[0], + feature_start = feature[1], + feature_end = feature[2], + feature_name = feature[3], + // Where to start, end drawing on screen. + f_start = Math.floor( feature_start * w_scale ), + f_end = Math.ceil( feature_end * w_scale ), + text_len = this.measureText(feature_name).width, + text_align; + + // Update start, end drawing locations to include feature name. + // Try to put the name on the left, if not, put on right. + if (feature_name !== undefined && this.include_label ) { + // Add gap for label spacing and extra pack space padding + // TODO: Fix constants + text_len += (LABEL_SPACING + PACK_SPACING); + if (f_start - text_len >= 0) { + f_start -= text_len; + text_align = "left"; + } else { + f_end += text_len; + text_align = "right"; + } + } + + // Find slot. + var slot_num = find_slot(f_start, f_end); + /* + if (slot_num < 0) { + + TODO: this is not yet working -- + console.log(feature_uid, "looking for slot with text on the right"); + // Slot not found. If text was on left, try on right and see + // if slot can be found. + // TODO: are there any checks we need to do to ensure that text + // will fit on tile? + if (text_align === "left") { + f_start -= text_len; + f_end -= text_len; + text_align = "right"; + slot_num = find_slot(f_start, f_end); + } + if (slot_num >= 0) { + console.log(feature_uid, "found slot with text on the right"); + } + + } + */ + // Do slotting. + if (slot_num >= 0) { + // Add current feature to slot. + if (start_end_dct[slot_num] === undefined) { + start_end_dct[slot_num] = []; + } + start_end_dct[slot_num].push([f_start, f_end]); + inc_slots[feature_uid] = slot_num; + highest_slot = Math.max(highest_slot, slot_num); + } + else { + // TODO: remove this warning when skipped features are handled. + // Show warning for skipped feature. + //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + } + } + + // Debugging: view slots data. + /* + for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { + var slot = start_end_dct[i]; + if (slot !== undefined) { + console.log(i, "*************"); + for (var k = 0, k_len = slot.length; k < k_len; k++) { + console.log("\t", slot[k][0], slot[k][1]); + } + } + } + */ + return highest_slot + 1; +} + +// ---- Painters ---- + +/** + * SummaryTreePainter, a histogram showing number of intervals in a region + */ +var SummaryTreePainter = function( data, delta, max, view_start, view_end, show_counts ) { + // Data and data properties + this.data = data; + this.delta = delta; + this.max = max; + // View + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.show_counts = show_counts; +} + +SummaryTreePainter.prototype.draw = function( ctx, width, height ) { + + var view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range; + + var points = this.data, delta = this.delta, max = this.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. + base_y = height + LABEL_SPACING + CHAR_HEIGHT_PX; + delta_x_px = Math.ceil(delta * w_scale); + + ctx.save(); + + for (var i = 0, len = points.length; i < len; i++) { + + var x = Math.floor( (points[i][0] - view_start) * w_scale ); + var y = points[i][1]; + + if (!y) { continue; } + var y_px = y / max * height; + + ctx.fillStyle = "black"; + ctx.fillRect( x, base_y - y_px, delta_x_px, y_px ); + + // Draw number count if it can fit the number with some padding, otherwise things clump up + var text_padding_req_x = 4; + if (this.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { + ctx.fillStyle = "#666"; + ctx.textAlign = "center"; + ctx.fillText(y, x + (delta_x_px/2), 10); + } + } + + ctx.restore(); +} + +var LinePainter = function( data, view_start, view_end, min_value, max_value, color, mode ) { + // Data and data properties + this.data = data; + // View + this.view_start = view_start; + this.view_end = view_end; + // Drawing prefs + this.min_value = min_value; + this.max_value = max_value; + this.color = color; + this.mode = mode; +} + +LinePainter.prototype.draw = function( ctx, width, height ) { + var + in_path = false, + min_value = this.min_value, + max_value = this.max_value, + vertical_range = max_value - min_value, + height_px = height, + view_start = this.view_start, + view_range = this.view_end - this.view_start, + w_scale = width / view_range, + mode = this.mode, + data = this.data; + + ctx.save(); + + // Pixel position of 0 on the y axis + var y_zero = Math.round( height + min_value / vertical_range * height ); + + // Line at 0.0 + if ( mode !== "Intensity" ) { + ctx.beginPath(); + ctx.moveTo( 0, y_zero ); + ctx.lineTo( width, y_zero ); + // ctx.lineWidth = 0.5; + ctx.fillStyle = "#aaa"; + ctx.stroke(); + } + + ctx.beginPath(); + ctx.fillStyle = this.color; + var x_scaled, y, delta_x_px; + if (data.length > 1) { + delta_x_px = Math.ceil((data[1][0] - data[0][0]) * w_scale); + } else { + delta_x_px = 10; + } + for (var i = 0, len = data.length; i < len; i++) { + x_scaled = Math.round((data[i][0] - view_start) * w_scale); + y = data[i][1]; + if (y === null) { + if (in_path && mode === "Filled") { + ctx.lineTo(x_scaled, height_px); + } + in_path = false; + continue; + } + if (y < min_value) { + y = min_value; + } else if (y > max_value) { + y = max_value; + } + + if (mode === "Histogram") { + // y becomes the bar height in pixels, which is the negated for canvas coords + y = Math.round( y / vertical_range * height_px ); + ctx.fillRect(x_scaled, y_zero, delta_x_px, - y ); + } else if (mode === "Intensity" ) { + y = 255 - Math.floor( (y - min_value) / vertical_range * 255 ); + ctx.fillStyle = "rgb(" +y+ "," +y+ "," +y+ ")"; + ctx.fillRect(x_scaled, 0, delta_x_px, height_px); + } else { + // console.log(y, track.min_value, track.vertical_range, (y - track.min_value) / track.vertical_range * track.height_px); + y = Math.round( height_px - (y - min_value) / vertical_range * height_px ); + // console.log(canvas.get(0).height, canvas.get(0).width); + if (in_path) { + ctx.lineTo(x_scaled, y); + } else { + in_path = true; + if (mode === "Filled") { + ctx.moveTo(x_scaled, height_px); + ctx.lineTo(x_scaled, y); + } else { + ctx.moveTo(x_scaled, y); } } - return -1; - }; - - // Do slotting. - for (var i = 0, len = undone.length; i < len; i++) { - var feature = features[undone[i]], + } + } + if (mode === "Filled") { + if (in_path) { + ctx.lineTo( x_scaled, y_zero ); + ctx.lineTo( 0, y_zero ); + } + ctx.fill(); + } else { + ctx.stroke(); + } + + ctx.restore(); +} + +var FeaturePainter = function( data, view_start, view_end, prefs, mode ) { + this.data = data; + this.view_start = view_start; + this.view_end = view_end; + this.prefs = prefs; + this.mode = mode; +} + +extend( FeaturePainter.prototype, { + + get_required_height: function( rows_required ) { + // y_scale is the height per row + var required_height = y_scale = this.get_row_height(), mode = this.mode; + // If using a packing mode, need to multiply by the number of slots used + if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { + // Calculate new slots incrementally for this new chunk of data and update height if necessary. + required_height = rows_required * y_scale; + } + // Pad bottom by half a row + return required_height + Math.round( y_scale / 2 ); + }, + + draw: function( ctx, width, height, slots ) { + + var data = this.data, view_start = this.view_start, view_end = this.view_end; + + ctx.save(); + + ctx.fillStyle = this.prefs.block_color; + ctx.textAlign = "right"; + + var view_range = this.view_end - this.view_start, + w_scale = width / view_range, + y_scale = this.get_row_height(); + + for (var i = 0, len = data.length; i < len; i++) { + var feature = data[i], feature_uid = feature[0], feature_start = feature[1], feature_end = feature[2], - feature_name = feature[3], - // Where to start, end drawing on screen. - f_start = Math.floor( (feature_start - max_low) * w_scale ), - f_end = Math.ceil( (feature_end - max_low) * w_scale ), - text_len = CONTEXT.measureText(feature_name).width, - text_align; - - // Update start, end drawing locations to include feature name. - // Try to put the name on the left, if not, put on right. - if (feature_name !== undefined && mode === "Pack") { - // Add gap for label spacing and extra pack space padding - text_len += (LABEL_SPACING + PACK_SPACING); - if (f_start - text_len >= 0) { - f_start -= text_len; - text_align = "left"; - } else { - f_end += text_len; - text_align = "right"; - } - } - - // Find slot. - var slot_num = find_slot(f_start, f_end); - /* - if (slot_num < 0) { + // Slot valid only if features are slotted and this feature is slotted; + // feature may not be due to lack of space. + slot = (slots && slots[feature_uid] !== undefined ? slots[feature_uid] : null); - TODO: this is not yet working -- - console.log(feature_uid, "looking for slot with text on the right"); - // Slot not found. If text was on left, try on right and see - // if slot can be found. - // TODO: are there any checks we need to do to ensure that text - // will fit on tile? - if (text_align === "left") { - f_start -= text_len; - f_end -= text_len; - text_align = "right"; - slot_num = find_slot(f_start, f_end); - } - if (slot_num >= 0) { - console.log(feature_uid, "found slot with text on the right"); - } - - } - */ - // Do slotting. - if (slot_num >= 0) { - // Add current feature to slot. - if (start_end_dct[slot_num] === undefined) { - start_end_dct[slot_num] = []; - } - start_end_dct[slot_num].push([f_start, f_end]); - inc_slots[feature_uid] = slot_num; - highest_slot = Math.max(highest_slot, slot_num); - } - else { - // TODO: remove this warning when skipped features are handled. - // Show warning for skipped feature. - //console.log("WARNING: not displaying feature", feature_uid, f_start, f_end); + // Draw feature if there's overlap and mode is dense or feature is slotted (as it must be for all non-dense modes). + if (is_overlap([feature_start, feature_end], [view_start, view_end]) && (this.mode == "Dense" || slot !== null)) { + this.draw_element(ctx, this.mode, feature, slot, view_start, view_end, w_scale, y_scale, + width ); } } - - // Debugging: view slots data. - /* - for (var i = 0; i < MAX_FEATURE_DEPTH; i++) { - var slot = start_end_dct[i]; - if (slot !== undefined) { - console.log(i, "*************"); - for (var k = 0, k_len = slot.length; k < k_len; k++) { - console.log("\t", slot[k][0], slot[k][1]); - } - } + + ctx.restore(); + } +}); + +var LinkedFeaturePainter = function( data, view_start, view_end, prefs, mode ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); +} + +extend( LinkedFeaturePainter.prototype, FeaturePainter.prototype, { + + /** + * Height of a single row, depends on mode + */ + get_row_height: function() { + var mode = this.mode, y_scale; + if (mode === "summary_tree") { + // No scale needed. } - */ - return highest_slot + 1; + if (mode === "Dense") { + y_scale = DENSE_TRACK_HEIGHT; + } + else if (mode === "no_detail") { + y_scale = NO_DETAIL_TRACK_HEIGHT; + } + else if (mode === "Squish") { + y_scale = SQUISH_TRACK_HEIGHT; + } + else { // mode === "Pack" + y_scale = PACK_TRACK_HEIGHT; + } + return y_scale; }, - /** - * Draw summary tree on canvas. - */ - draw_summary_tree: function(canvas, points, delta, max, w_scale, required_height, tile_low, left_offset) { - var - // 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. - base_y = required_height + LABEL_SPACING + CHAR_HEIGHT_PX; - delta_x_px = Math.ceil(delta * w_scale); - - var max_label = $("<div />").addClass('yaxislabel'); - max_label.text(max); - - max_label.css({ position: "absolute", top: "22px", left: "10px" }); - max_label.prependTo(this.container_div); - - var ctx = canvas.get(0).getContext("2d"); - for (var i = 0, len = points.length; i < len; i++) { - var x = Math.floor( (points[i][0] - tile_low) * w_scale ); - var y = points[i][1]; - - if (!y) { continue; } - var y_px = y / max * required_height; - - ctx.fillStyle = "black"; - ctx.fillRect(x + left_offset, base_y - y_px, delta_x_px, y_px); - - // Draw number count if it can fit the number with some padding, otherwise things clump up - var text_padding_req_x = 4; - if (this.prefs.show_counts && (ctx.measureText(y).width + text_padding_req_x) < delta_x_px) { - ctx.fillStyle = "#666"; - ctx.textAlign = "center"; - ctx.fillText(y, x + left_offset + (delta_x_px/2), 10); - } - } - }, - /** - * Draw feature. - */ - draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset) { + + draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width ) { var feature_uid = feature[0], feature_start = feature[1], @@ -2457,21 +2875,21 @@ feature_name = feature[3], f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, + y_center = (mode === "Dense" ? 0 : (0 + slot)) * y_scale, thickness, y_start, thick_start = null, thick_end = null, block_color = this.prefs.block_color, label_color = this.prefs.label_color; - + // Dense mode displays the same for all data. if (mode === "Dense") { ctx.fillStyle = block_color; - ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, DENSE_FEATURE_HEIGHT); + ctx.fillRect(f_start, y_center, f_end - f_start, DENSE_FEATURE_HEIGHT); } else if (mode === "no_detail") { // No details for feature, so only one way to display. ctx.fillStyle = block_color; // TODO: what should width be here? - ctx.fillRect(f_start + left_offset, y_center + 5, f_end - f_start, DENSE_FEATURE_HEIGHT); + ctx.fillRect(f_start, y_center + 5, f_end - f_start, DENSE_FEATURE_HEIGHT); } else { // Mode is either Squish or Pack: // Feature details. @@ -2508,7 +2926,7 @@ else { // No strand. ctx.fillStyle = block_color; } - ctx.fillRect(f_start + left_offset, y_center, f_end - f_start, thick_height); + ctx.fillRect(f_start, y_center, f_end - f_start, thick_height); } else { // There are feature blocks and mode is either Squish or Pack. // @@ -2540,7 +2958,7 @@ cur_height = 1; } } - ctx.fillRect(f_start + left_offset, cur_y_center, f_end - f_start, cur_height); + ctx.fillRect(f_start, cur_y_center, f_end - f_start, cur_height); for (var k = 0, k_len = feature_blocks.length; k < k_len; k++) { var block = feature_blocks[k], @@ -2553,14 +2971,14 @@ // Draw thin block. ctx.fillStyle = block_color; - ctx.fillRect(block_start + left_offset, y_center + (thick_height-thin_height)/2 + 1, + ctx.fillRect(block_start, y_center + (thick_height-thin_height)/2 + 1, block_end - block_start, thin_height); // If block intersects with thick region, draw block as thick. if (thick_start !== undefined && !(block_start > thick_end || block_end < thick_start) ) { var block_thick_start = Math.max(block_start, thick_start), block_thick_end = Math.min(block_end, thick_end); - ctx.fillRect(block_thick_start + left_offset, y_center + 1, + ctx.fillRect(block_thick_start, y_center + 1, block_thick_end - block_thick_start, thick_height); } } @@ -2569,207 +2987,27 @@ // Draw label for Pack mode. if (mode === "Pack" && feature_start > tile_low) { ctx.fillStyle = label_color; + // FIXME: do this without tile_index + var tile_index = 1; if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING, y_center + 8); + ctx.fillText(feature_name, f_end + LABEL_SPACING, y_center + 8); } else { ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING, y_center + 8); + ctx.fillText(feature_name, f_start - LABEL_SPACING, y_center + 8); } ctx.fillStyle = block_color; } } - }, - /** - * Returns y_scale based on mode. - */ - get_y_scale: function(mode) { - var y_scale; - if (mode === "summary_tree") { - // No scale needed. - } - if (mode === "Dense") { - y_scale = DENSE_TRACK_HEIGHT; - } - else if (mode === "no_detail") { - y_scale = NO_DETAIL_TRACK_HEIGHT; - } - else if (mode === "Squish") { - y_scale = SQUISH_TRACK_HEIGHT; - } - else { // mode === "Pack" - y_scale = PACK_TRACK_HEIGHT; - } - return y_scale; - }, - /** - * Draw FeatureTrack tile. - */ - draw_tile: function(result, resolution, tile_index, parent_element, w_scale, ref_seq) { - var track = this; - var tile_low = tile_index * DENSITY * resolution, - tile_high = ( tile_index + 1 ) * DENSITY * resolution, - tile_span = tile_high - tile_low, - params = { hda_ldda: track.hda_ldda, dataset_id: track.dataset_id, - resolution: this.view.resolution, mode: this.mode }; - - // - // Create/set/compute some useful vars. - // - var width = Math.ceil( tile_span * w_scale ), - mode = this.mode, - min_height = 25, - left_offset = this.left_offset, - slots, required_height; - - var canvas = document.createElement("canvas"); - if (window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas); } // EXCANVAS HACK - canvas = $(canvas); - - // - // Set mode if Auto. - // - if (mode === "Auto") { - if (result.dataset_type === "summary_tree") { - mode = result.dataset_type; - } else if (result.extra_info === "no_detail") { - mode = "no_detail"; - } else { - // Choose b/t Squish and Pack. - // Proxy measures for using Squish: - // (a) error message re: limiting number of features shown; - // (b) X number of features shown; - // (c) size of view shown. - // TODO: cannot use (a) and (b) because it requires coordinating mode across tiles; - // fix this so that tiles are redrawn as necessary to use the same mode. - //if ( (result.message && result.message.match(/^Only the first [\d]+/)) || - // (result.data && result.data.length > 2000) || - var data = result.data; - if ( (data.length && data.length < 4) || - (this.view.high - this.view.low > MIN_SQUISH_VIEW_WIDTH) ) { - mode = "Squish"; - } else { - mode = "Pack"; - } - } - } - - var y_scale = this.get_y_scale(mode); - - // - // Pack reads, set required height. - // - if (mode === "summary_tree") { - required_height = this.summary_draw_height; - } - if (mode === "Dense") { - required_height = min_height; - } - else if (mode === "no_detail" || mode === "Squish" || mode === "Pack") { - // Calculate new slots incrementally for this new chunk of data and update height if necessary. - required_height = this.incremental_slots(w_scale, result.data, mode) * y_scale + min_height; - slots = this.inc_slots[w_scale]; - } - - // - // Set up for drawing. - // - canvas.get(0).width = width + left_offset; - canvas.get(0).height = required_height; - if (result.dataset_type === "summary_tree") { - // Increase canvas height in order to display max label. - canvas.get(0).height += LABEL_SPACING + CHAR_HEIGHT_PX; - } - parent_element.parent().css("height", Math.max(this.height_px, required_height) + "px"); - // console.log(( tile_low - this.view.low ) * w_scale, tile_index, w_scale); - var ctx = canvas.get(0).getContext("2d"); - ctx.fillStyle = this.prefs.block_color; - ctx.font = this.default_font; - ctx.textAlign = "right"; - this.container_div.find(".yaxislabel").remove(); - - // - // Draw summary tree. If tree is drawn, canvas is returned. - // - if (mode === "summary_tree") { - this.draw_summary_tree(canvas, result.data, result.delta, result.max, w_scale, required_height, - tile_low, left_offset); - return canvas; - } - - // - // If there is a message, draw it on canvas so that it moves around with canvas, and make the border red - // to indicate region where message is applicable - if (result.message) { - canvas.css({ - "border-top": "1px solid red" - }); - - ctx.fillStyle = "red"; - ctx.textAlign = "left"; - var old_base = ctx.textBaseline; - ctx.textBaseline = "top"; - ctx.fillText(result.message, left_offset, 0); - ctx.textBaseline = old_base; - - // If there's no data, return. - if (!result.data) { - return canvas; - } - } - - // - // Set example feature. This is needed so that track can update its UI based on feature attributes. - // - this.example_feature = (result.data.length ? result.data[0] : undefined); - - // - // Draw elements. - // - var data = result.data; - for (var i = 0, len = data.length; i < len; i++) { - var feature = data[i], - feature_uid = feature[0], - feature_start = feature[1], - feature_end = feature[2], - // Slot valid only if features are slotted and this feature is slotted; - // feature may not be due to lack of space. - slot = (slots && slots[feature_uid] !== undefined ? slots[feature_uid] : null); - - // Apply filters to feature. - var hide_feature = false; - var filter; - for (var f = 0; f < this.filters.length; f++) { - filter = this.filters[f]; - filter.update_attrs(feature); - if (!filter.keep(feature)) { - hide_feature = true; - break; - } - } - if (hide_feature) { - continue; - } - - // Draw feature if there's overlap and mode is dense or feature is slotted (as it must be for all non-dense modes). - if (is_overlap([feature_start, feature_end], [tile_low, tile_high]) && (mode == "Dense" || slot !== null)) { - this.draw_element(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, - width, left_offset, ref_seq); - } - } - return canvas; } }); -var VcfTrack = function(name, view, hda_ldda, dataset_id, prefs, filters) { - FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); - this.track_type = "VcfTrack"; -}; -$.extend(VcfTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { - /** - * Draw a VCF entry. - */ +var VariantPainter = function( data, view_start, view_end, prefs, mode ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); +} + +extend( VariantPainter.prototype, FeaturePainter.prototype, { draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width) { var feature = data[i], feature_uid = feature[0], @@ -2780,7 +3018,7 @@ // All features need a start, end, and vertical center. f_start = Math.floor( Math.max(0, (feature_start - tile_low) * w_scale) ), f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), - y_center = ERROR_PADDING + (mode === "Dense" ? 0 : (0 + slot)) * y_scale, + y_center = (mode === "Dense" ? 0 : (0 + slot)) * y_scale, thickness, y_start, thick_start = null, thick_end = null; if (no_label) { @@ -2821,36 +3059,17 @@ } }); -var ReadTrack = function (name, view, hda_ldda, dataset_id, prefs, filters) { - FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters); - - this.track_config = new TrackConfig( { - track: this, - params: [ - { key: 'block_color', label: 'Block color', type: 'color', default_value: '#444' }, - { key: 'label_color', label: 'Label color', type: 'color', default_value: 'black' }, - { 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: 'mode', type: 'string', default_value: this.mode, hidden: true }, - ], - saved_values: prefs, - onchange: function() { - this.track.tile_cache.clear(); - this.track.draw(); - } - }); - this.prefs = this.track_config.values; - - this.track_type = "ReadTrack"; - this.make_name_popup_menu(); -}; -$.extend(ReadTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { +var ReadPainter = function( data, view_start, view_end, prefs, mode, ref_seq ) { + FeaturePainter.call( this, data, view_start, view_end, prefs, mode ); + this.ref_seq = ref_seq; +} + +extend( ReadPainter.prototype, FeaturePainter.prototype, { /** * Returns y_scale based on mode. */ - get_y_scale: function(mode) { - var y_scale; + get_row_height: function() { + var y_scale, mode = this.mode; if (mode === "summary_tree") { // No scale needed. } @@ -2862,7 +3081,7 @@ } else { // mode === "Pack" y_scale = PACK_TRACK_HEIGHT; - if (this.track_config.values.show_insertions) { + if (this.prefs.show_insertions) { y_scale *= 2; } } @@ -2871,13 +3090,14 @@ /** * Draw a single read. */ - draw_read: function(ctx, mode, w_scale, tile_low, tile_high, feature_start, cigar, orig_seq, y_center, ref_seq) { + draw_read: function(ctx, mode, w_scale, tile_low, tile_high, feature_start, cigar, orig_seq, y_center) { ctx.textAlign = "center"; var track = this, tile_region = [tile_low, tile_high], base_offset = 0, seq_offset = 0, - gap = 0; + gap = 0 + ref_seq = this.ref_seq; // Keep list of items that need to be drawn on top of initial drawing layer. var draw_last = []; @@ -2918,12 +3138,12 @@ var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); if (gap > 0) { ctx.fillStyle = this.prefs.block_color; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 1, s_end - s_start, 9); + ctx.fillRect(s_start - gap, y_center + 1, s_end - s_start, 9); ctx.fillStyle = CONNECTOR_COLOR; // TODO: this can be made much more efficient by computing the complete sequence // to draw and then drawing it. for (var c = 0, str_len = seq.length; c < str_len; c++) { - if (this.track_config.values.show_differences && ref_seq) { + if (this.prefs.show_differences && ref_seq) { var ref_char = ref_seq[seq_start - tile_low + c]; if (!ref_char || ref_char.toLowerCase() === seq[c].toLowerCase()) { continue; @@ -2931,13 +3151,13 @@ } if (seq_start + c >= tile_low && seq_start + c <= tile_high) { var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); - ctx.fillText(seq[c], c_start + this.left_offset, y_center + 9); + ctx.fillText(seq[c], c_start, y_center + 9); } } } else { ctx.fillStyle = this.prefs.block_color; // TODO: This is a pretty hack-ish way to fill rectangle based on mode. - ctx.fillRect(s_start + this.left_offset, + ctx.fillRect(s_start, y_center + (this.mode !== "Dense" ? 4 : 5), s_end - s_start, (mode !== "Dense" ? SQUISH_FEATURE_HEIGHT : DENSE_FEATURE_HEIGHT) ); @@ -2948,14 +3168,14 @@ break; case "N": // Skipped bases. ctx.fillStyle = CONNECTOR_COLOR; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 5, s_end - s_start, 1); + ctx.fillRect(s_start - gap, y_center + 5, s_end - s_start, 1); //ctx.dashedLine(s_start + this.left_offset, y_center + 5, this.left_offset + s_end, y_center + 5); // No change in seq_offset because sequence not used when skipping. base_offset += cig_len; break; case "D": // Deletion. ctx.fillStyle = "red"; - ctx.fillRect(s_start + this.left_offset - gap, y_center + 4, s_end - s_start, 3); + ctx.fillRect(s_start - gap, y_center + 4, s_end - s_start, 3); // TODO: is this true? No change in seq_offset because sequence not used when skipping. base_offset += cig_len; break; @@ -2967,20 +3187,20 @@ // the sequence region and the tile region. var seq_tile_overlap = compute_overlap([seq_start, seq_start + cig_len], tile_region), - insert_x_coord = this.left_offset + s_start - gap; + insert_x_coord = s_start - gap; if (seq_tile_overlap !== NO_OVERLAP) { var seq = orig_seq.slice(seq_offset, seq_offset + cig_len); // Insertion point is between the sequence start and the previous base: (-gap) moves // back from sequence start to insertion point. - if (this.track_config.values.show_insertions) { + if (this.prefs.show_insertions) { // // Show inserted sequence above, centered on insertion point. // // Draw sequence. // X center is offset + start - <half_sequence_length> - var x_center = this.left_offset + s_start - (s_end - s_start)/2; + var x_center = s_start - (s_end - s_start)/2; if ( (mode === "Pack" || this.mode === "Auto") && orig_seq !== undefined && w_scale > CHAR_WIDTH_PX) { // Draw sequence container. ctx.fillStyle = "yellow"; @@ -3005,7 +3225,7 @@ // Draw sequence. for (var c = 0, str_len = seq.length; c < str_len; c++) { var c_start = Math.floor( Math.max(0, (seq_start + c - tile_low) * w_scale) ); - ctx.fillText(seq[c], c_start + this.left_offset - (s_end - s_start)/2, y_center); + ctx.fillText(seq[c], c_start - (s_end - s_start)/2, y_center); } } else { @@ -3056,9 +3276,9 @@ } }, /** - * Draw a complete read. + * Draw a complete read pair */ - draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset, ref_seq) { + draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width ) { // All features need a start, end, and vertical center. var feature_uid = feature[0], feature_start = feature[1], @@ -3088,74 +3308,35 @@ // Draw left/forward read. if (feature[4][1] >= tile_low && feature[4][0] <= tile_high && feature[4][2]) { - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[4][0], feature[4][2], feature[4][3], y_center, ref_seq); + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[4][0], feature[4][2], feature[4][3], y_center); } // Draw right/reverse read. if (feature[5][1] >= tile_low && feature[5][0] <= tile_high && feature[5][2]) { - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[5][0], feature[5][2], feature[5][3], y_center, ref_seq); + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature[5][0], feature[5][2], feature[5][3], y_center); } // Draw connector. if (b2_start > b1_end) { ctx.fillStyle = CONNECTOR_COLOR; - ctx.dashedLine(b1_end + left_offset - gap, y_center + 5, left_offset + b2_start - gap, y_center + 5); + ctx.dashedLine(b1_end - gap, y_center + 5, b2_start - gap, y_center + 5); } } else { // Read is single. ctx.fillStyle = block_color; - this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature_start, feature[4], feature[5], y_center, ref_seq); + this.draw_read(ctx, mode, w_scale, tile_low, tile_high, feature_start, feature[4], feature[5], y_center); } if (mode === "Pack" && feature_start > tile_low) { // Draw label. ctx.fillStyle = this.prefs.label_color; + // FIXME: eliminate tile_index + var tile_index = 1; if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { ctx.textAlign = "left"; - ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING - gap, y_center + 8); + ctx.fillText(feature_name, f_end + LABEL_SPACING - gap, y_center + 8); } else { ctx.textAlign = "right"; - ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING - gap, y_center + 8); + ctx.fillText(feature_name, f_start - LABEL_SPACING - gap, y_center + 8); } ctx.fillStyle = block_color; } } }); - -/** - * Feature track that displays data generated from tool. - */ -var ToolDataFeatureTrack = function(name, view, hda_ldda, dataset_id, prefs, filters, parent_track) { - FeatureTrack.call(this, name, view, hda_ldda, dataset_id, prefs, filters, {}, parent_track); - this.track_type = "ToolDataFeatureTrack"; - - // Set up track to fetch initial data from raw data URL when the dataset--not the converted datasets-- - // is ready. - this.data_url = raw_data_url; - this.data_query_wait = 1000; - this.dataset_check_url = dataset_state_url; -}; - -$.extend(ToolDataFeatureTrack.prototype, TiledTrack.prototype, FeatureTrack.prototype, { - /** - * For this track type, the predraw init sets up postdraw init. - */ - predraw_init: function() { - // Postdraw init: once data has been fetched, reset data url, wait time and start indexing. - var track = this; - var post_init = function() { - if (track.data_cache.size() === 0) { - // Track still drawing initial data, so do nothing. - setTimeout(post_init, 300); - } - else { - // Track drawing done: reset dataset check, data URL, wait time and get dataset state to start - // indexing. - track.data_url = default_data_url; - track.data_query_wait = DEFAULT_DATA_QUERY_WAIT; - track.dataset_state_url = converted_datasets_state_url; - $.getJSON(track.dataset_state_url, {dataset_id : track.dataset_id, hda_ldda: track.hda_ldda}, function(track_data) {}); - } - }; - post_init(); - } -}); - - http://bitbucket.org/galaxy/galaxy-central/changeset/a67e3e47db5d/ changeset: r5319:a67e3e47db5d user: kanwei date: 2011-04-01 01:01:12 summary: pack js affected #: 1 file (2.2 KB) --- a/static/scripts/packed/trackster.js Thu Mar 31 18:58:25 2011 -0400 +++ b/static/scripts/packed/trackster.js Thu Mar 31 19:01:12 2011 -0400 @@ -1,1 +1,1 @@ -CanvasRenderingContext2D.prototype.dashedLine=function(c,j,b,h,f){if(f===undefined){f=4}var e=b-c;var d=h-j;var g=Math.floor(Math.sqrt(e*e+d*d)/f);var l=e/g;var k=d/g;var a;for(a=0;a<g;a++,c+=l,j+=k){if(a%2!==0){continue}this.fillRect(c,j,f,1)}};CanvasRenderingContext2D.prototype.drawDownwardEquilateralTriangle=function(b,a,e){var d=b-e/2,c=b+e/2,f=a-Math.sqrt(e*3/2);this.beginPath();this.moveTo(d,f);this.lineTo(c,f);this.lineTo(b,a);this.lineTo(d,f);this.strokeStyle=this.fillStyle;this.fill();this.stroke();this.closePath()};function sortable(a,b){a.bind("drag",{handle:b,relative:true},function(h,j){var g=$(this).parent();var f=g.children();var c;for(c=0;c<f.length;c++){if(j.offsetY<$(f.get(c)).position().top){break}}if(c===f.length){if(this!==f.get(c-1)){g.append(this)}}else{if(this!==f.get(c)){$(this).insertBefore(f.get(c))}}})}var NO_OVERLAP=1001,CONTAINS=1002,OVERLAP_START=1003,OVERLAP_END=1004,CONTAINED_BY=1005;function compute_overlap(e,b){var g=e[0],f=e[1],d=b[0],c=b[1],a;if(g<d){if(f<d){a=NO_OVERLAP}else{if(f<=c){a=OVERLAP_START}else{a=CONTAINS}}}else{if(g>c){a=NO_OVERLAP}else{if(f<=c){a=CONTAINED_BY}else{a=OVERLAP_END}}}return a}function is_overlap(b,a){return(compute_overlap(b,a)!==NO_OVERLAP)}function get_slider_step(c,a){var b=a-c;return(b<=1?0.01:(b<=1000?1:5))}var DENSE_TRACK_HEIGHT=10,NO_DETAIL_TRACK_HEIGHT=3,SQUISH_TRACK_HEIGHT=5,PACK_TRACK_HEIGHT=10,NO_DETAIL_FEATURE_HEIGHT=1,DENSE_FEATURE_HEIGHT=1,SQUISH_FEATURE_HEIGHT=3,PACK_FEATURE_HEIGHT=9,ERROR_PADDING=10,LABEL_SPACING=2,PACK_SPACING=5,MIN_SQUISH_VIEW_WIDTH=12000,DEFAULT_FONT="9px Monaco, Lucida Console, monospace",DENSITY=200,FEATURE_LEVELS=10,MAX_FEATURE_DEPTH=100,DEFAULT_DATA_QUERY_WAIT=5000,MAX_CHROMS_SELECTABLE=100,CONNECTOR_COLOR="#ccc",DATA_ERROR="There was an error in indexing this dataset. ",DATA_NOCONVERTER="A converter for this dataset is not installed. Please check your datatypes_conf.xml file.",DATA_NONE="No data for this chrom/contig.",DATA_PENDING="Currently indexing... please wait",DATA_CANNOT_RUN_TOOL="Tool cannot be rerun: ",DATA_LOADING="Loading data...",DATA_OK="Ready for display",CACHED_TILES_FEATURE=10,CACHED_TILES_LINE=5,CACHED_DATA=5,DUMMY_CANVAS=document.createElement("canvas"),RIGHT_STRAND,LEFT_STRAND;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(DUMMY_CANVAS)}var CONTEXT=DUMMY_CANVAS.getContext("2d");CONTEXT.font=DEFAULT_FONT;var CHAR_WIDTH_PX=CONTEXT.measureText("A").width,CHAR_HEIGHT_PX=9;var right_img=new Image();right_img.src=image_path+"/visualization/strand_right.png";right_img.onload=function(){RIGHT_STRAND=CONTEXT.createPattern(right_img,"repeat")};var left_img=new Image();left_img.src=image_path+"/visualization/strand_left.png";left_img.onload=function(){LEFT_STRAND=CONTEXT.createPattern(left_img,"repeat")};var right_img_inv=new Image();right_img_inv.src=image_path+"/visualization/strand_right_inv.png";right_img_inv.onload=function(){RIGHT_STRAND_INV=CONTEXT.createPattern(right_img_inv,"repeat")};var left_img_inv=new Image();left_img_inv.src=image_path+"/visualization/strand_left_inv.png";left_img_inv.onload=function(){LEFT_STRAND_INV=CONTEXT.createPattern(left_img_inv,"repeat")};function round_1000(a){return Math.round(a*1000)/1000}var Cache=function(a){this.num_elements=a;this.clear()};$.extend(Cache.prototype,{get:function(b){var a=this.key_ary.indexOf(b);if(a!==-1){this.move_key_to_end(b,a)}return this.obj_cache[b]},set:function(b,c){if(!this.obj_cache[b]){if(this.key_ary.length>=this.num_elements){var a=this.key_ary.shift();delete this.obj_cache[a]}this.key_ary.push(b)}this.obj_cache[b]=c;return c},move_key_to_end:function(b,a){this.key_ary.splice(a,1);this.key_ary.push(b)},clear:function(){this.obj_cache={};this.key_ary=[]},size:function(){return this.key_ary.length}});var DataManager=function(b,a,c){Cache.call(this,b);this.track=a;this.subset=(c!==undefined?c:true)};$.extend(DataManager.prototype,Cache.prototype,{load_data:function(h,j,d,g,a,f){var c={chrom:h,low:j,high:d,mode:g,resolution:a,dataset_id:this.track.dataset_id,hda_ldda:this.track.hda_ldda};$.extend(c,f);var k=[];for(var e=0;e<this.track.filters.length;e++){k[k.length]=this.track.filters[e].name}c.filter_cols=JSON.stringify(k);var b=this;return $.getJSON(this.track.data_url,c,function(l){b.set_data(j,d,g,l)})},get_data:function(j,k,c,h,b,f){var l=this.get(this.gen_key(k,c,h));if(l){return l}if(this.subset){var m,g,a,e,h,l;for(var d=0;d<this.key_ary.length;d++){m=this.key_ary[d];g=this.split_key(m);a=g[0];e=g[1];if(k>=a&&c<=e){l=this.obj_cache[m];if(l.dataset_type!=="summary_tree"&&l.extra_info!=="no_detail"){this.move_key_to_end(m,d);return l}}}}return this.load_data(j,k,c,h,b,f)},set_data:function(b,c,d,a){return this.set(this.gen_key(b,c,d),a)},gen_key:function(a,c,d){var b=a+"_"+c+"_"+d;return b},split_key:function(a){return a.split("_")}});var View=function(a,d,c,b,e){this.container=a;this.chrom=null;this.vis_id=c;this.dbkey=b;this.title=d;this.tracks=[];this.label_tracks=[];this.max_low=0;this.max_high=0;this.num_tracks=0;this.track_id_counter=0;this.zoom_factor=3;this.min_separation=30;this.has_changes=false;this.init(e);this.reset()};$.extend(View.prototype,{init:function(d){var c=this.container,a=this;this.top_container=$("<div/>").addClass("top-container").appendTo(c);this.content_div=$("<div/>").addClass("content").css("position","relative").appendTo(c);this.bottom_container=$("<div/>").addClass("bottom-container").appendTo(c);this.top_labeltrack=$("<div/>").addClass("top-labeltrack").appendTo(this.top_container);this.viewport_container=$("<div/>").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div);this.intro_div=$("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide();this.nav_labeltrack=$("<div/>").addClass("nav-labeltrack").appendTo(this.bottom_container);this.nav_container=$("<div/>").addClass("nav-container").prependTo(this.top_container);this.nav=$("<div/>").addClass("nav").appendTo(this.nav_container);this.overview=$("<div/>").addClass("overview").appendTo(this.bottom_container);this.overview_viewport=$("<div/>").addClass("overview-viewport").appendTo(this.overview);this.overview_close=$("<a href='javascript:void(0);'>Close Overview</a>").addClass("overview-close").hide().appendTo(this.overview_viewport);this.overview_highlight=$("<div/>").addClass("overview-highlight").hide().appendTo(this.overview_viewport);this.overview_box_background=$("<div/>").addClass("overview-boxback").appendTo(this.overview_viewport);this.overview_box=$("<div/>").addClass("overview-box").appendTo(this.overview_viewport);this.default_overview_height=this.overview_box.height();this.nav_controls=$("<div/>").addClass("nav-controls").appendTo(this.nav);this.chrom_select=$("<select/>").attr({name:"chrom"}).css("width","15em").addClass("no-autocomplete").append("<option value=''>Loading</option>").appendTo(this.nav_controls);var b=function(f){if(f.type==="focusout"||(f.keyCode||f.which)===13||(f.keyCode||f.which)===27){if((f.keyCode||f.which)!==27){a.go_to($(this).val())}$(this).hide();$(this).val("");a.location_span.show();a.chrom_select.show()}};this.nav_input=$("<input/>").addClass("nav-input").hide().bind("keyup focusout",b).appendTo(this.nav_controls);this.location_span=$("<span/>").addClass("location").appendTo(this.nav_controls);this.location_span.bind("click",function(){a.location_span.hide();a.chrom_select.hide();a.nav_input.val(a.chrom+":"+a.low+"-"+a.high);a.nav_input.css("display","inline-block");a.nav_input.select();a.nav_input.focus()});if(this.vis_id!==undefined){this.hidden_input=$("<input/>").attr("type","hidden").val(this.vis_id).appendTo(this.nav_controls)}this.zo_link=$("<a id='zoom-out' />").click(function(){a.zoom_out();a.redraw()}).appendTo(this.nav_controls);this.zi_link=$("<a id='zoom-in' />").click(function(){a.zoom_in();a.redraw()}).appendTo(this.nav_controls);this.load_chroms({low:0},d);this.chrom_select.bind("change",function(){a.change_chrom(a.chrom_select.val())});this.intro_div.show();this.content_div.bind("click",function(f){$(this).find("input").trigger("blur")});this.content_div.bind("dblclick",function(f){a.zoom_in(f.pageX,this.viewport_container)});this.overview_box.bind("dragstart",function(f,g){this.current_x=g.offsetX}).bind("drag",function(f,h){var j=h.offsetX-this.current_x;this.current_x=h.offsetX;var g=Math.round(j/a.viewport_container.width()*(a.max_high-a.max_low));a.move_delta(-g)});this.overview_close.bind("click",function(){for(var f=0,e=a.tracks.length;f<e;f++){a.tracks[f].is_overview=false}$(this).siblings().filter("canvas").remove();$(this).parent().css("height",a.overview_box.height());a.overview_highlight.hide();$(this).hide()});this.viewport_container.bind("draginit",function(f,g){if(f.clientX>a.viewport_container.width()-16){return false}}).bind("dragstart",function(f,g){g.original_low=a.low;g.current_height=f.clientY;g.current_x=g.offsetX}).bind("drag",function(h,k){var f=$(this);var l=k.offsetX-k.current_x;var g=f.scrollTop()-(h.clientY-k.current_height);f.scrollTop(g);k.current_height=h.clientY;k.current_x=k.offsetX;var j=Math.round(l/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}).bind("mousewheel",function(h,k,g,f){if(g){var j=Math.round(-g/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}});this.top_labeltrack.bind("dragstart",function(f,g){return $("<div />").css({height:a.content_div.height()+a.top_labeltrack.height()+a.nav_labeltrack.height()+1,top:"0px",position:"absolute","background-color":"#ccf",opacity:0.5,"z-index":1000}).appendTo($(this))}).bind("drag",function(k,l){$(l.proxy).css({left:Math.min(k.pageX,l.startX),width:Math.abs(k.pageX-l.startX)});var g=Math.min(k.pageX,l.startX)-a.container.offset().left,f=Math.max(k.pageX,l.startX)-a.container.offset().left,j=(a.high-a.low),h=a.viewport_container.width();a.update_location(Math.round(g/h*j)+a.low,Math.round(f/h*j)+a.low)}).bind("dragend",function(l,m){var g=Math.min(l.pageX,m.startX),f=Math.max(l.pageX,m.startX),j=(a.high-a.low),h=a.viewport_container.width(),k=a.low;a.low=Math.round(g/h*j)+k;a.high=Math.round(f/h*j)+k;$(m.proxy).remove();a.redraw()});this.add_label_track(new LabelTrack(this,this.top_labeltrack));this.add_label_track(new LabelTrack(this,this.nav_labeltrack));$(window).bind("resize",function(){a.resize_window()});$(document).bind("redraw",function(){a.redraw()});this.reset();$(window).trigger("resize")},update_location:function(a,b){this.location_span.text(commatize(a)+" - "+commatize(b));this.nav_input.val(this.chrom+":"+commatize(a)+"-"+commatize(b))},load_chroms:function(b,c){b.num=MAX_CHROMS_SELECTABLE;$.extend(b,(this.vis_id!==undefined?{vis_id:this.vis_id}:{dbkey:this.dbkey}));var a=this;$.ajax({url:chrom_url,data:b,dataType:"json",success:function(e){if(e.chrom_info.length===0){alert("Invalid chromosome: "+b.chrom);return}if(e.reference){a.add_label_track(new ReferenceTrack(a))}a.chrom_data=e.chrom_info;var h='<option value="">Select Chrom/Contig</option>';for(var g=0,d=a.chrom_data.length;g<d;g++){var f=a.chrom_data[g].chrom;h+='<option value="'+f+'">'+f+"</option>"}if(e.prev_chroms){h+='<option value="previous">Previous '+MAX_CHROMS_SELECTABLE+"</option>"}if(e.next_chroms){h+='<option value="next">Next '+MAX_CHROMS_SELECTABLE+"</option>"}a.chrom_select.html(h);if(c){c()}a.chrom_start_index=e.start_index},error:function(){alert("Could not load chroms for this dbkey:",a.dbkey)}})},change_chrom:function(e,b,g){if(!e||e==="None"){return}var d=this;if(e==="previous"){d.load_chroms({low:this.chrom_start_index-MAX_CHROMS_SELECTABLE});return}if(e==="next"){d.load_chroms({low:this.chrom_start_index+MAX_CHROMS_SELECTABLE});return}var f=$.grep(d.chrom_data,function(j,k){return j.chrom===e})[0];if(f===undefined){d.load_chroms({chrom:e},function(){d.change_chrom(e,b,g)});return}else{if(e!==d.chrom){d.chrom=e;if(!d.chrom){d.intro_div.show()}else{d.intro_div.hide()}d.chrom_select.val(d.chrom);d.max_high=f.len-1;d.reset();d.redraw(true);for(var h=0,a=d.tracks.length;h<a;h++){var c=d.tracks[h];if(c.init){c.init()}}}if(b!==undefined&&g!==undefined){d.low=Math.max(b,0);d.high=Math.min(g,d.max_high)}d.reset_overview();d.redraw()}},go_to:function(f){var k=this,a,d,b=f.split(":"),h=b[0],j=b[1];if(j!==undefined){try{var g=j.split("-");a=parseInt(g[0].replace(/,/g,""),10);d=parseInt(g[1].replace(/,/g,""),10)}catch(c){return false}}k.change_chrom(h,a,d)},move_fraction:function(c){var a=this;var b=a.high-a.low;this.move_delta(c*b)},move_delta:function(c){var a=this;var b=a.high-a.low;if(a.low-c<a.max_low){a.low=a.max_low;a.high=a.max_low+b}else{if(a.high-c>a.max_high){a.high=a.max_high;a.low=a.max_high-b}else{a.high-=c;a.low-=c}}a.redraw()},add_track:function(a){a.view=this;a.track_id=this.track_id_counter;this.tracks.push(a);if(a.init){a.init()}a.container_div.attr("id","track_"+a.track_id);sortable(a.container_div,".draghandle");this.track_id_counter+=1;this.num_tracks+=1},add_label_track:function(a){a.view=this;this.label_tracks.push(a)},remove_track:function(a){this.has_changes=true;a.container_div.fadeOut("slow",function(){$(this).remove()});delete this.tracks[this.tracks.indexOf(a)];this.num_tracks-=1},reset:function(){this.low=this.max_low;this.high=this.max_high;this.viewport_container.find(".yaxislabel").remove()},redraw:function(h){var g=this.high-this.low,f=this.low,b=this.high;if(f<this.max_low){f=this.max_low}if(b>this.max_high){b=this.max_high}if(this.high!==0&&g<this.min_separation){b=f+this.min_separation}this.low=Math.floor(f);this.high=Math.ceil(b);this.resolution=Math.pow(10,Math.ceil(Math.log((this.high-this.low)/200)/Math.LN10));this.zoom_res=Math.pow(FEATURE_LEVELS,Math.max(0,Math.ceil(Math.log(this.resolution,FEATURE_LEVELS)/Math.log(FEATURE_LEVELS))));var a=(this.low/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var e=((this.high-this.low)/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var j=13;this.overview_box.css({left:a,width:Math.max(j,e)}).show();if(e<j){this.overview_box.css("left",a-(j-e)/2)}if(this.overview_highlight){this.overview_highlight.css({left:a,width:e})}this.update_location(this.low,this.high);if(!h){for(var c=0,d=this.tracks.length;c<d;c++){if(this.tracks[c]&&this.tracks[c].enabled){this.tracks[c].draw()}}for(c=0,d=this.label_tracks.length;c<d;c++){this.label_tracks[c].draw()}}},zoom_in:function(b,c){if(this.max_high===0||this.high-this.low<this.min_separation){return}var d=this.high-this.low,e=d/2+this.low,a=(d/this.zoom_factor)/2;if(b){e=b/this.viewport_container.width()*(this.high-this.low)+this.low}this.low=Math.round(e-a);this.high=Math.round(e+a);this.redraw()},zoom_out:function(){if(this.max_high===0){return}var b=this.high-this.low,c=b/2+this.low,a=(b*this.zoom_factor)/2;this.low=Math.round(c-a);this.high=Math.round(c+a);this.redraw()},resize_window:function(){this.viewport_container.height(this.container.height()-this.top_container.height()-this.bottom_container.height());this.nav_container.width(this.container.width());this.redraw()},reset_overview:function(){this.overview_viewport.find("canvas").remove();this.overview_viewport.height(this.default_overview_height);this.overview_box.height(this.default_overview_height);this.overview_close.hide();this.overview_highlight.hide()}});var Tool=function(g){this.name=g.name;this.params=[];var a=g.params;for(var e=0;e<a.length;e++){var d=a[e],c=d.name,b=d.label,f=d.type;if(f==="int"||f==="float"){this.params[this.params.length]=new NumberParameter(c,b,d.min,d.max,d.value)}else{if(f=="select"){this.params[this.params.length]=new SelectParameter(c,b,d.options)}else{console.log("WARNING: unrecognized tool parameter type:",c,f)}}}};$.extend(Tool.prototype,{get_param_values_dict:function(){var b={};for(var a=0;a<this.params.length;a++){var c=this.params[a];b[c.name]=JSON.stringify(c.value)}return b},get_param_values:function(){var b=[];for(var a=0;a<this.params.length;a++){b[a]=this.params[a].value}return b}});var NumberParameter=function(c,b,e,a,d){this.name=c;this.label=b;this.min=e;this.max=a;this.value=d};var SelectParameter=function(c,b,a){this.name=c;this.label=b;this.options=a;this.value=(a.length!==0?a[0][1]:null)};var Filter=function(b,a,c){this.name=b;this.index=a;this.value=c};var NumberFilter=function(b,a){this.name=b;this.index=a;this.low=-Number.MAX_VALUE;this.high=Number.MAX_VALUE;this.min=Number.MAX_VALUE;this.max=-Number.MAX_VALUE;this.slider=null;this.slider_label=null};$.extend(NumberFilter.prototype,{applies_to:function(a){if(a.length>this.index){return true}return false},keep:function(a){if(!this.applies_to(a)){return true}return(a[this.index]>=this.low&&a[this.index]<=this.high)},update_attrs:function(b){var a=false;if(!this.applies_to(b)){return a}if(b[this.index]<this.min){this.min=Math.floor(b[this.index]);a=true}if(b[this.index]>this.max){this.max=Math.ceil(b[this.index]);a=true}return a},update_ui_elt:function(){var b=this.slider.slider("option","min"),a=this.slider.slider("option","max");if(this.min<b||this.max>a){this.slider.slider("option","min",this.min);this.slider.slider("option","max",this.max);this.slider.slider("option","step",get_slider_step(this.min,this.max));this.slider.slider("option","values",[this.min,this.max])}}});var get_filters_from_dict=function(a){var g=[];for(var d=0;d<a.length;d++){var f=a[d];var c=f.name,e=f.type,b=f.index;if(e==="int"||e==="float"){g[d]=new NumberFilter(c,b)}else{g[d]=new Filter(c,b,e)}}return g};var TrackConfig=function(a){this.track=a.track;this.params=a.params;this.values={};if(a.saved_values){this.restore_values(a.saved_values)}this.onchange=a.onchange};$.extend(TrackConfig.prototype,{restore_values:function(a){var b=this;$.each(this.params,function(c,d){if(a[d.key]!==undefined){b.values[d.key]=a[d.key]}else{b.values[d.key]=d.default_value}})},build_form:function(){var b=this;var a=$("<div />");$.each(this.params,function(f,d){if(!d.hidden){var c="param_"+f;var l=$("<div class='form-row' />").appendTo(a);l.append($("<label />").attr("for",c).text(d.label+":"));if(d.type==="bool"){l.append($('<input type="checkbox" />').attr("id",c).attr("name",c).attr("checked",b.values[d.key]))}else{if(d.type==="color"){var h=b.values[d.key];var g=$("<input />").attr("id",c).attr("name",c).val(h);var j=$("<div class='tipsy tipsy-north' style='position: absolute;' />").hide();var e=$("<div style='background-color: black; padding: 10px;'></div>").appendTo(j);var k=$("<div/>").appendTo(e).farbtastic({width:100,height:100,callback:g,color:h});$("<div />").append(g).append(j).appendTo(l).bind("click",function(m){j.css({left:$(this).position().left+($(g).width()/2)-60,top:$(this).position().top+$(this.height)}).show();$(document).bind("click.color-picker",function(){j.hide();$(document).unbind("click.color-picker")});m.stopPropagation()})}else{l.append($("<input />").attr("id",c).attr("name",c).val(b.values[d.key]))}}}});return a},update_from_form:function(a){var c=this;var b=false;$.each(this.params,function(d,f){if(!f.hidden){var g="param_"+d;var e=a.find("#"+g).val();if(f.type==="float"){e=parseFloat(e)}else{if(f.type==="int"){e=parseInt(e)}else{if(f.type==="bool"){e=a.find("#"+g).is(":checked")}}}if(e!==c.values[f.key]){c.values[f.key]=e;b=true}}});if(b){this.onchange()}}});var Tile=function(a,b,c){this.track=a;this.canvas=b;this.histo_max=c};var Track=function(b,a,e,c,d){this.name=b;this.view=a;this.parent_element=e;this.data_url=(c?c:default_data_url);this.data_url_extra_params={};this.data_query_wait=(d?d:DEFAULT_DATA_QUERY_WAIT);this.dataset_check_url=converted_datasets_state_url;this.container_div=$("<div />").addClass("track").css("position","relative");if(!this.hidden){this.header_div=$("<div class='track-header' />").appendTo(this.container_div);if(this.view.editor){this.drag_div=$("<div class='draghandle' />").appendTo(this.header_div)}this.name_div=$("<div class='menubutton popup' />").appendTo(this.header_div);this.name_div.text(this.name);this.name_div.attr("id",this.name.replace(/\s+/g,"-").replace(/[^a-zA-Z0-9\-]/g,"").toLowerCase())}this.content_div=$("<div class='track-content'>").appendTo(this.container_div);this.parent_element.append(this.container_div)};$.extend(Track.prototype,{init:function(){var a=this;a.enabled=false;a.tile_cache.clear();a.data_cache.clear();a.initial_canvas=undefined;a.content_div.css("height","auto");a.container_div.removeClass("nodata error pending");if(!a.dataset_id){return}$.getJSON(converted_datasets_state_url,{hda_ldda:a.hda_ldda,dataset_id:a.dataset_id,chrom:a.view.chrom},function(b){if(!b||b==="error"||b.kind==="error"){a.container_div.addClass("error");a.content_div.text(DATA_ERROR);if(b.message){var d=a.view.tracks.indexOf(a);var c=$(" <a href='javascript:void(0);'></a>").text("View error").bind("click",function(){show_modal("Trackster Error","<pre>"+b.message+"</pre>",{Close:hide_modal})});a.content_div.append(c)}}else{if(b==="no converter"){a.container_div.addClass("error");a.content_div.text(DATA_NOCONVERTER)}else{if(b==="no data"||(b.data!==undefined&&(b.data===null||b.data.length===0))){a.container_div.addClass("nodata");a.content_div.text(DATA_NONE)}else{if(b==="pending"){a.container_div.addClass("pending");a.content_div.text(DATA_PENDING);setTimeout(function(){a.init()},a.data_query_wait)}else{if(b.status==="data"){if(b.valid_chroms){a.valid_chroms=b.valid_chroms;a.make_name_popup_menu()}a.content_div.text(DATA_OK);if(a.view.chrom){a.content_div.text("");a.content_div.css("height",a.height_px+"px");a.enabled=true;$.when(a.predraw_init()).done(function(){a.draw()})}}}}}}})},predraw_init:function(){},update_name:function(a){this.old_name=this.name;this.name=a;this.name_div.text(this.name)},revert_name:function(){this.name=this.old_name;this.name_div.text(this.name)}});var TiledTrack=function(b,h,o){var c=this,p=c.view;this.filters=(b!==undefined?get_filters_from_dict(b):[]);this.filters_available=false;this.filters_visible=false;this.tool=(h!==undefined&&obj_length(h)>0?new Tool(h):undefined);this.parent_track=o;this.child_tracks=[];if(c.hidden){return}var k=function(r,s,t){r.click(function(){var u=s.text();max=parseFloat(t.slider("option","max")),input_size=(max<=1?4:max<=1000000?max.toString().length:6),multi_value=false;if(t.slider("option","values")){input_size=2*input_size+1;multi_value=true}s.text("");$("<input type='text'/>").attr("size",input_size).attr("maxlength",input_size).attr("value",u).appendTo(s).focus().select().click(function(v){v.stopPropagation()}).blur(function(){$(this).remove();s.text(u)}).keyup(function(z){if(z.keyCode===27){$(this).trigger("blur")}else{if(z.keyCode===13){var x=t.slider("option","min"),v=t.slider("option","max"),y=function(A){return(isNaN(A)||A>v||A<x)},w=$(this).val();if(!multi_value){w=parseFloat(w);if(y(w)){alert("Parameter value must be in the range ["+x+"-"+v+"]");return $(this)}}else{w=w.split("-");w=[parseFloat(w[0]),parseFloat(w[1])];if(y(w[0])||y(w[1])){alert("Parameter value must be in the range ["+x+"-"+v+"]");return $(this)}}t.slider((multi_value?"values":"value"),w)}}})})};if(this.parent_track){this.header_div.find(".draghandle").removeClass("draghandle").addClass("child-track-icon").addClass("icon-button");this.parent_element.addClass("child-track");this.tool=undefined}this.filters_div=$("<div/>").addClass("filters").hide();this.header_div.after(this.filters_div);this.filters_div.bind("drag",function(r){r.stopPropagation()}).bind("click",function(r){r.stopPropagation()}).bind("dblclick",function(r){r.stopPropagation()});$.each(this.filters,function(x,s){var u=$("<div/>").addClass("slider-row").appendTo(c.filters_div);var r=$("<div/>").addClass("slider-label").appendTo(u);var z=$("<span/>").addClass("slider-name").text(s.name+" ").appendTo(r);var t=$("<span/>");var v=$("<span/>").addClass("slider-value").appendTo(r).append("[").append(t).append("]");var y=$("<div/>").addClass("slider").appendTo(u);s.control_element=$("<div/>").attr("id",s.name+"-filter-control").appendTo(y);var w=[0,0];s.control_element.slider({range:true,min:Number.MAX_VALUE,max:-Number.MIN_VALUE,values:[0,0],slide:function(A,B){w=B.values;t.text(B.values[0]+"-"+B.values[1]);setTimeout(function(){if(B.values[0]==w[0]&&B.values[1]==w[1]){var C=B.values;t.text(C[0]+"-"+C[1]);s.low=C[0];s.high=C[1];c.draw(true,true)}},50)},change:function(A,B){s.control_element.slider("option","slide").call(s.control_element,A,B)}});s.slider=s.control_element;s.slider_label=t;k(v,t,s.control_element);$("<div style='clear: both;'/>").appendTo(u)});if(this.tool){this.dynamic_tool_div=$("<div/>").addClass("dynamic-tool").hide();this.header_div.after(this.dynamic_tool_div);this.dynamic_tool_div.bind("drag",function(r){r.stopPropagation()}).bind("click",function(r){r.stopPropagation()}).bind("dblclick",function(r){r.stopPropagation()});var n=$("<div class='tool-name'>").appendTo(this.dynamic_tool_div).text(this.tool.name);var m=this.tool.params;var c=this;$.each(this.tool.params,function(A,s){if(s instanceof NumberParameter){var x=$("<div>").addClass("slider-row").appendTo(c.dynamic_tool_div);var u=$("<div>").addClass("slider-label").appendTo(x);var C=$("<span/>").addClass("slider-name").text(s.label+" ").appendTo(u);var t=$("<span/>").text(s.value);var y=$("<span/>").addClass("slider-value").appendTo(u).append("[").append(t).append("]");var B=$("<div/>").addClass("slider").appendTo(x);var r=$("<div id='"+s.name+"-param-control'>").appendTo(B);r.slider({min:s.min,max:s.max,step:get_slider_step(s.min,s.max),value:s.value,slide:function(F,H){var G=H.value;s.value=G;if(0<G&&G<1){G=parseFloat(G).toFixed(2)}t.text(G)},change:function(F,G){r.slider("option","slide").call(r,F,G)}});k(y,t,r);$("<div style='clear: both;'/>").appendTo(x)}else{if(s instanceof SelectParameter){var x=$("<div>").addClass("slider-row").appendTo(c.dynamic_tool_div);var u=$("<div>").addClass("slider-label").appendTo(x);var C=$("<span/>").addClass("slider-name").text(s.label+" ").appendTo(u);var E=$("<div/>").addClass("slider").appendTo(x);var w=$("<select/>").appendTo(E);w.change(function(){s.value=$(this).val()});var D=w.attr("options");for(var z=0;z<s.options.length;z++){var v=s.options[z];D[D.length]=new Option(v[0],v[1])}$("<div style='clear: both;'/>").appendTo(x)}}});var q=$("<div>").addClass("slider-row").appendTo(this.dynamic_tool_div);var l=$("<input type='submit'>").attr("value","Run").appendTo(q);var c=this;l.click(function(){c.run_tool()})}c.child_tracks_container=$("<div/>").addClass("child-tracks-container").hide();c.container_div.append(c.child_tracks_container);if(c.display_modes!==undefined){if(c.mode_div===undefined){c.mode_div=$("<div class='right-float menubutton popup' />").appendTo(c.header_div);var e=(c.track_config&&c.track_config.values.mode?c.track_config.values.mode:c.display_modes[0]);c.mode=e;c.mode_div.text(e);var d=function(r){c.mode_div.text(r);c.mode=r;c.track_config.values.mode=r;c.tile_cache.clear();c.draw()};var a={};for(var f=0,j=c.display_modes.length;f<j;f++){var g=c.display_modes[f];a[g]=function(r){return function(){d(r)}}(g)}make_popupmenu(c.mode_div,a)}else{c.mode_div.hide()}}this.make_name_popup_menu()};$.extend(TiledTrack.prototype,Track.prototype,{make_name_popup_menu:function(){var b=this;var a={};a["Edit configuration"]=function(){var h=function(){hide_modal();$(window).unbind("keypress.check_enter_esc")},f=function(){b.track_config.update_from_form($(".dialog-box"));hide_modal();$(window).unbind("keypress.check_enter_esc")},g=function(j){if((j.keyCode||j.which)===27){h()}else{if((j.keyCode||j.which)===13){f()}}};$(window).bind("keypress.check_enter_esc",g);show_modal("Configure Track",b.track_config.build_form(),{Cancel:h,OK:f})};if(b.filters_available>0){var e=(b.filters_div.is(":visible")?"Hide filters":"Show filters");a[e]=function(){b.filters_visible=(b.filters_div.is(":visible"));b.filters_div.toggle();b.make_name_popup_menu()}}if(b.tool){var e=(b.dynamic_tool_div.is(":visible")?"Hide tool":"Show tool");a[e]=function(){if(!b.dynamic_tool_div.is(":visible")){b.update_name(b.name+b.tool_region_and_parameters_str())}else{menu_option_text="Show dynamic tool";b.revert_name()}b.dynamic_tool_div.toggle();b.make_name_popup_menu()}}if(b.valid_chroms){a["List chrom/contigs with data"]=function(){show_modal("Chrom/contigs with data","<p>"+b.valid_chroms.join("<br/>")+"</p>",{Close:function(){hide_modal()}})}}var c=view;var d=function(){$("#no-tracks").show()};if(this.parent_track){c=this.parent_track;d=function(){}}a.Remove=function(){c.remove_track(b);if(c.num_tracks===0){d()}};make_popupmenu(b.name_div,a)},draw:function(a,d){var s=this.view.low,g=this.view.high,j=g-s,l=this.view.container.width(),f=l/j,m=this.view.resolution,e=$("<div style='position: relative;'></div>");if(!d){this.content_div.children().remove()}this.content_div.append(e);this.max_height=0;var o=Math.floor(s/m/DENSITY);var c={};while((o*DENSITY*m)<g){var r=l+"_"+f+"_"+o;var h=this.tile_cache.get(r);var p=o*DENSITY*this.view.resolution;var b=p+DENSITY*this.view.resolution;if(!a&&h){this.show_tile(h,e,p,f)}else{this.delayed_draw(a,r,p,b,o,m,e,f,c)}o+=1}var k=this;var q=setInterval(function(){if(obj_length(c)===0){clearInterval(q);if(d){var v=k.content_div.children();var u=false;for(var w=v.length-1,t=0;w>=t;w--){var z=$(v[w]);if(u){z.remove()}else{if(z.children().length!==0){u=true}}}}for(var y=0;y<k.filters.length;y++){k.filters[y].update_ui_elt()}var x=false;if(k.example_feature){for(var y=0;y<k.filters.length;y++){if(k.filters[y].applies_to(k.example_feature)){x=true;break}}}if(k.filters_available!==x){k.filters_available=x;if(!k.filters_available){k.filters_div.hide()}k.make_name_popup_menu()}}},50);for(var n=0;n<this.child_tracks.length;n++){this.child_tracks[n].draw(a,d)}},delayed_draw:function(b,j,g,l,c,e,k,m,f){var d=this;var h=function(u,n,p,o,s,t,q){returned_tile=d.draw_tile(n,p,o,s,t,q);var r=$("<div class='track-tile'>").prepend(returned_tile);tile_element=r;d.tile_cache.set(j,tile_element);d.show_tile(tile_element,s,g,t);delete f[u]};var a=setTimeout(function(){if(g<=d.view.high&&l>=d.view.low){var n=(b?undefined:d.tile_cache.get(j));if(n){d.show_tile(n,k,g,m);delete f[a]}else{$.when(d.data_cache.get_data(view.chrom,g,l,d.mode,e,d.data_url_extra_params)).then(function(o){if(view.reference_track&&m>CHAR_WIDTH_PX){$.when(view.reference_track.data_cache.get_data(view.chrom,g,l,d.mode,e,view.reference_track.data_url_extra_params)).then(function(p){h(a,o,e,c,k,m,p)})}else{h(a,o,e,c,k,m)}})}}},50);f[a]=true},show_tile:function(a,f,d,g){var b=this;var c=this.view.high-this.view.low,e=(d-this.view.low)*g;if(this.left_offset){e-=this.left_offset}a.css({position:"absolute",top:0,left:e,height:""});f.append(a);b.max_height=Math.max(b.max_height,a.height());b.content_div.css("height",b.max_height+"px");f.children().css("height",b.max_height+"px")},set_overview:function(){var a=this.view;if(this.initial_canvas&&this.is_overview){a.overview_close.show();a.overview_viewport.append(this.initial_canvas);a.overview_highlight.show().height(this.initial_canvas.height());a.overview_viewport.height(this.initial_canvas.height()+a.overview_box.height())}$(window).trigger("resize")},run_tool:function(){var b={dataset_id:this.original_dataset_id,chrom:this.view.chrom,low:this.view.low,high:this.view.high,tool_id:this.tool.name};$.extend(b,this.tool.get_param_values_dict());var d=this,c=b.tool_id+d.tool_region_and_parameters_str(b.chrom,b.low,b.high),e;if(d.track_type==="FeatureTrack"){e=new ToolDataFeatureTrack(c,view,d.hda_ldda,undefined,{},{},d)}this.add_track(e);e.content_div.text("Starting job.");view.has_changes=true;var a=function(){$.getJSON(run_tool_url,b,function(f){if(f==="no converter"){e.container_div.addClass("error");e.content_div.text(DATA_NOCONVERTER)}else{if(f.error){e.container_div.addClass("error");e.content_div.text(DATA_CANNOT_RUN_TOOL+f.message)}else{if(f==="pending"){e.container_div.addClass("pending");e.content_div.text("Converting input data so that it can be easily reused.");setTimeout(a,2000)}else{e.dataset_id=f.dataset_id;e.content_div.text("Running job.");e.init()}}}})};a()},tool_region_and_parameters_str:function(c,a,d){var b=this,e=(c!==undefined&&a!==undefined&&d!==undefined?c+":"+a+"-"+d:"all");return" - region=["+e+"], parameters=["+b.tool.get_param_values().join(", ")+"]"},add_track:function(a){a.track_id=this.track_id+"_"+this.child_tracks.length;a.container_div.attr("id","track_"+a.track_id);this.child_tracks_container.append(a.container_div);sortable(a.container_div,".child-track-icon");if(!$(this.child_tracks_container).is(":visible")){this.child_tracks_container.show()}this.child_tracks.push(a)},remove_track:function(a){a.container_div.fadeOut("slow",function(){$(this).remove()})}});var LabelTrack=function(a,b){this.track_type="LabelTrack";this.hidden=true;Track.call(this,null,a,b);this.container_div.addClass("label-track")};$.extend(LabelTrack.prototype,Track.prototype,{draw:function(){var c=this.view,d=c.high-c.low,g=Math.floor(Math.pow(10,Math.floor(Math.log(d)/Math.log(10)))),a=Math.floor(c.low/g)*g,e=this.view.container.width(),b=$("<div style='position: relative; height: 1.3em;'></div>");while(a<c.high){var f=(a-c.low)/d*e;b.append($("<div class='label'>"+commatize(a)+"</div>").css({position:"absolute",left:f-1}));a+=g}this.content_div.children(":first").remove();this.content_div.append(b)}});var ReferenceTrack=function(a){this.track_type="ReferenceTrack";this.hidden=true;Track.call(this,null,a,a.top_labeltrack);TiledTrack.call(this);a.reference_track=this;this.left_offset=200;this.height_px=12;this.font=DEFAULT_FONT;this.container_div.addClass("reference-track");this.content_div.css("background","none");this.content_div.css("min-height","0px");this.content_div.css("border","none");this.data_url=reference_url;this.data_url_extra_params={dbkey:a.dbkey};this.data_cache=new DataManager(CACHED_DATA,this,false);this.tile_cache=new Cache(CACHED_TILES_LINE)};$.extend(ReferenceTrack.prototype,TiledTrack.prototype,{draw_tile:function(m,g,b,j,n){var f=this,d=DENSITY*g;if(n>CHAR_WIDTH_PX){if(m===null){f.content_div.css("height","0px");return}var e=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(e)}e=$(e);var l=e.get(0).getContext("2d");e.get(0).width=Math.ceil(d*n+f.left_offset);e.get(0).height=f.height_px;l.font=DEFAULT_FONT;l.textAlign="center";for(var h=0,k=m.length;h<k;h++){var a=Math.round(h*n);l.fillText(m[h],a+f.left_offset,10)}return e}this.content_div.css("height","0px")}});var LineTrack=function(e,c,f,a,d){var b=this;this.track_type="LineTrack";this.display_modes=["Histogram","Line","Filled","Intensity"];this.mode="Histogram";Track.call(this,e,c,c.viewport_container);TiledTrack.call(this);this.min_height_px=16;this.max_height_px=400;this.height_px=80;this.hda_ldda=f;this.dataset_id=a;this.original_dataset_id=a;this.data_cache=new DataManager(CACHED_DATA,this);this.tile_cache=new Cache(CACHED_TILES_LINE);this.track_config=new TrackConfig({track:this,params:[{key:"color",label:"Color",type:"color",default_value:"black"},{key:"min_value",label:"Min Value",type:"float",default_value:undefined},{key:"max_value",label:"Max Value",type:"float",default_value:undefined},{key:"mode",type:"string",default_value:this.mode,hidden:true},{key:"height",type:"int",default_value:this.height_px,hidden:true}],saved_values:d,onchange:function(){b.vertical_range=b.prefs.max_value-b.prefs.min_value;$("#linetrack_"+b.track_id+"_minval").text(b.prefs.min_value);$("#linetrack_"+b.track_id+"_maxval").text(b.prefs.max_value);b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;this.height_px=this.track_config.values.height;this.vertical_range=this.track_config.values.max_value-this.track_config.values.min_value;(function(g){var k=false;var j=false;var h=$("<div class='track-resize'>");$(g.container_div).hover(function(){k=true;h.show()},function(){k=false;if(!j){h.hide()}});h.hide().bind("dragstart",function(l,m){j=true;m.original_height=$(g.content_div).height()}).bind("drag",function(m,n){var l=Math.min(Math.max(n.original_height+n.deltaY,g.min_height_px),g.max_height_px);$(g.content_div).css("height",l);g.height_px=l;g.draw(true)}).bind("dragend",function(l,m){g.tile_cache.clear();j=false;if(!k){h.hide()}g.track_config.values.height=g.height_px}).appendTo(g.container_div)})(this)};$.extend(LineTrack.prototype,TiledTrack.prototype,{predraw_init:function(){var a=this,b=a.view.tracks.indexOf(a);a.vertical_range=undefined;return $.getJSON(a.data_url,{stats:true,chrom:a.view.chrom,low:null,high:null,hda_ldda:a.hda_ldda,dataset_id:a.dataset_id},function(c){a.container_div.addClass("line-track");var e=c.data;if(isNaN(parseFloat(a.prefs.min_value))||isNaN(parseFloat(a.prefs.max_value))){a.prefs.min_value=e.min;a.prefs.max_value=e.max;$("#track_"+b+"_minval").val(a.prefs.min_value);$("#track_"+b+"_maxval").val(a.prefs.max_value)}a.vertical_range=a.prefs.max_value-a.prefs.min_value;a.total_frequency=e.total_frequency;a.container_div.find(".yaxislabel").remove();var f=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_minval").text(round_1000(a.prefs.min_value));var d=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_maxval").text(round_1000(a.prefs.max_value));d.css({position:"absolute",top:"24px",left:"10px"});d.prependTo(a.container_div);f.css({position:"absolute",bottom:"2px",left:"10px"});f.prependTo(a.container_div)})},draw_tile:function(j,q,t,c,e){if(this.vertical_range===undefined){return}var o=this,u=t*DENSITY*q,a=DENSITY*q,B=q+"_"+t,v={hda_ldda:this.hda_ldda,dataset_id:this.dataset_id,resolution:this.view.resolution};var b=document.createElement("canvas"),z=j.data;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(b)}b=$(b);b.get(0).width=Math.ceil(a*e);b.get(0).height=o.height_px;var p=b.get(0).getContext("2d"),k=false,l=o.prefs.min_value,g=o.prefs.max_value,n=o.vertical_range,w=o.total_frequency,d=o.height_px,m=o.mode;var A=Math.round(d+l/n*d);p.beginPath();p.moveTo(0,A);p.lineTo(a*e,A);p.fillStyle="#aaa";p.stroke();p.beginPath();p.fillStyle=o.prefs.color;var x,h,f;if(z.length>1){f=Math.ceil((z[1][0]-z[0][0])*e)}else{f=10}for(var r=0,s=z.length;r<s;r++){x=Math.round((z[r][0]-u)*e);h=z[r][1];if(h===null){if(k&&m==="Filled"){p.lineTo(x,d)}k=false;continue}if(h<l){h=l}else{if(h>g){h=g}}if(m==="Histogram"){h=Math.round(h/n*d);p.fillRect(x,A,f,-h)}else{if(m==="Intensity"){h=255-Math.floor((h-l)/n*255);p.fillStyle="rgb("+h+","+h+","+h+")";p.fillRect(x,0,f,d)}else{h=Math.round(d-(h-l)/n*d);if(k){p.lineTo(x,h)}else{k=true;if(m==="Filled"){p.moveTo(x,d);p.lineTo(x,h)}else{p.moveTo(x,h)}}}}}if(m==="Filled"){if(k){p.lineTo(x,A);p.lineTo(0,A)}p.fill()}else{p.stroke()}return b}});var FeatureTrack=function(a,f,e,j,h,c,d,g){var b=this;this.track_type="FeatureTrack";this.display_modes=["Auto","Dense","Squish","Pack"];this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{key:"show_counts",label:"Show summary counts",type:"bool",default_value:true},{key:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:h,onchange:function(){b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;Track.call(this,a,f,f.viewport_container);TiledTrack.call(this,c,d,g);this.height_px=0;this.container_div.addClass("feature-track");this.hda_ldda=e;this.dataset_id=j;this.original_dataset_id=j;this.zo_slots={};this.show_labels_scale=0.001;this.showing_details=false;this.summary_draw_height=30;this.default_font=DEFAULT_FONT;this.inc_slots={};this.start_end_dct={};this.tile_cache=new Cache(CACHED_TILES_FEATURE);this.data_cache=new DataManager(20,this);this.left_offset=200};$.extend(FeatureTrack.prototype,TiledTrack.prototype,{incremental_slots:function(a,h,p){var q=this.inc_slots[a];if(!q||(q.mode!==p)){q={};q.w_scale=a;q.mode=p;this.inc_slots[a]=q;this.start_end_dct[a]={}}var l=q.w_scale,w=[],x=[],j=0,n=this.view.max_low;for(var u=0,v=h.length;u<v;u++){var g=h[u],k=g[0];if(q[k]!==undefined){j=Math.max(j,q[k]);x.push(q[k])}else{w.push(u)}}var d=this.start_end_dct[a];var m=function(D,E){for(var C=0;C<=MAX_FEATURE_DEPTH;C++){var A=false,F=d[C];if(F!==undefined){for(var z=0,B=F.length;z<B;z++){var y=F[z];if(E>y[0]&&D<y[1]){A=true;break}}}if(!A){return C}}return -1};for(var u=0,v=w.length;u<v;u++){var g=h[w[u]],k=g[0],s=g[1],b=g[2],o=g[3],c=Math.floor((s-n)*l),f=Math.ceil((b-n)*l),t=CONTEXT.measureText(o).width,e;if(o!==undefined&&p==="Pack"){t+=(LABEL_SPACING+PACK_SPACING);if(c-t>=0){c-=t;e="left"}else{f+=t;e="right"}}var r=m(c,f);if(r>=0){if(d[r]===undefined){d[r]=[]}d[r].push([c,f]);q[k]=r;j=Math.max(j,r)}else{}}return j+1},draw_summary_tree:function(b,o,n,l,r,j,f,e){var c=j+LABEL_SPACING+CHAR_HEIGHT_PX;delta_x_px=Math.ceil(n*r);var h=$("<div />").addClass("yaxislabel");h.text(l);h.css({position:"absolute",top:"22px",left:"10px"});h.prependTo(this.container_div);var q=b.get(0).getContext("2d");for(var d=0,g=o.length;d<g;d++){var m=Math.floor((o[d][0]-f)*r);var k=o[d][1];if(!k){continue}var p=k/l*j;q.fillStyle="black";q.fillRect(m+e,c-p,delta_x_px,p);var a=4;if(this.prefs.show_counts&&(q.measureText(k).width+a)<delta_x_px){q.fillStyle="#666";q.textAlign="center";q.fillText(k,m+e+(delta_x_px/2),10)}}},draw_element:function(p,f,g,x,j,r,I,M,N,a,A){var u=x[0],K=x[1],C=x[2]-1,s=x[3],D=Math.floor(Math.max(0,(K-r)*M)),q=Math.ceil(Math.min(a,Math.max(0,(C-r)*M))),B=ERROR_PADDING+(g==="Dense"?0:(0+j))*N,o,G,t=null,O=null,d=this.prefs.block_color,F=this.prefs.label_color;if(g==="Dense"){p.fillStyle=d;p.fillRect(D+A,B,q-D,DENSE_FEATURE_HEIGHT)}else{if(g==="no_detail"){p.fillStyle=d;p.fillRect(D+A,B+5,q-D,DENSE_FEATURE_HEIGHT)}else{var n=x[4],z=x[5],E=x[6],e=x[7];if(z&&E){t=Math.floor(Math.max(0,(z-r)*M));O=Math.ceil(Math.min(a,Math.max(0,(E-r)*M)))}var L,v;if(g==="Squish"){L=1;v=SQUISH_FEATURE_HEIGHT}else{L=5;v=PACK_FEATURE_HEIGHT}if(!e){if(x.strand){if(x.strand==="+"){p.fillStyle=RIGHT_STRAND_INV}else{if(x.strand==="-"){p.fillStyle=LEFT_STRAND_INV}}}else{p.fillStyle=d}p.fillRect(D+A,B,q-D,v)}else{var m,w;if(g==="Squish"){p.fillStyle=CONNECTOR_COLOR;m=B+Math.floor(SQUISH_FEATURE_HEIGHT/2)+1;w=1}else{if(n){var m=B;var w=v;if(n==="+"){p.fillStyle=RIGHT_STRAND}else{if(n==="-"){p.fillStyle=LEFT_STRAND}}}else{p.fillStyle=CONNECTOR_COLOR;m+=(SQUISH_FEATURE_HEIGHT/2)+1;w=1}}p.fillRect(D+A,m,q-D,w);for(var J=0,c=e.length;J<c;J++){var h=e[J],b=Math.floor(Math.max(0,(h[0]-r)*M)),y=Math.ceil(Math.min(a,Math.max((h[1]-1-r)*M)));if(b>y){continue}p.fillStyle=d;p.fillRect(b+A,B+(v-L)/2+1,y-b,L);if(t!==undefined&&!(b>O||y<t)){var H=Math.max(b,t),l=Math.min(y,O);p.fillRect(H+A,B+1,l-H,v)}}}if(g==="Pack"&&K>r){p.fillStyle=F;if(f===0&&D-p.measureText(s).width<0){p.textAlign="left";p.fillText(s,q+A+LABEL_SPACING,B+8)}else{p.textAlign="right";p.fillText(s,D+A-LABEL_SPACING,B+8)}p.fillStyle=d}}}},get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="no_detail"){a=NO_DETAIL_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT}}}return a},draw_tile:function(o,x,C,k,m,d){var t=this;var E=C*DENSITY*x,a=(C+1)*DENSITY*x,q=a-E,F={hda_ldda:t.hda_ldda,dataset_id:t.dataset_id,resolution:this.view.resolution,mode:this.mode};var v=Math.ceil(q*m),s=this.mode,H=25,g=this.left_offset,p,h;var c=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(c)}c=$(c);if(s==="Auto"){if(o.dataset_type==="summary_tree"){s=o.dataset_type}else{if(o.extra_info==="no_detail"){s="no_detail"}else{var G=o.data;if((G.length&&G.length<4)||(this.view.high-this.view.low>MIN_SQUISH_VIEW_WIDTH)){s="Squish"}else{s="Pack"}}}}var y=this.get_y_scale(s);if(s==="summary_tree"){h=this.summary_draw_height}if(s==="Dense"){h=H}else{if(s==="no_detail"||s==="Squish"||s==="Pack"){h=this.incremental_slots(m,o.data,s)*y+H;p=this.inc_slots[m]}}c.get(0).width=v+g;c.get(0).height=h;if(o.dataset_type==="summary_tree"){c.get(0).height+=LABEL_SPACING+CHAR_HEIGHT_PX}k.parent().css("height",Math.max(this.height_px,h)+"px");var w=c.get(0).getContext("2d");w.fillStyle=this.prefs.block_color;w.font=this.default_font;w.textAlign="right";this.container_div.find(".yaxislabel").remove();if(s==="summary_tree"){this.draw_summary_tree(c,o.data,o.delta,o.max,m,h,E,g);return c}if(o.message){c.css({"border-top":"1px solid red"});w.fillStyle="red";w.textAlign="left";var r=w.textBaseline;w.textBaseline="top";w.fillText(o.message,g,0);w.textBaseline=r;if(!o.data){return c}}this.example_feature=(o.data.length?o.data[0]:undefined);var G=o.data;for(var z=0,B=G.length;z<B;z++){var j=G[z],l=j[0],u=j[1],b=j[2],e=(p&&p[l]!==undefined?p[l]:null);var A=false;var n;for(var D=0;D<this.filters.length;D++){n=this.filters[D];n.update_attrs(j);if(!n.keep(j)){A=true;break}}if(A){continue}if(is_overlap([u,b],[E,a])&&(s=="Dense"||e!==null)){this.draw_element(w,C,s,j,e,E,a,m,y,v,g,d)}}return c}});var VcfTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_type="VcfTrack"};$.extend(VcfTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{draw_element:function(u,p,j,e,x,c,m,v,s){var j=data[i],l=j[0],t=j[1],d=j[2]-1,o=j[3],g=Math.floor(Math.max(0,(t-x)*m)),k=Math.ceil(Math.min(s,Math.max(0,(d-x)*m))),f=ERROR_PADDING+(p==="Dense"?0:(0+e))*v,a,y,b=null,n=null;if(no_label){u.fillStyle=block_color;u.fillRect(g+left_offset,f+5,k-g,1)}else{var w=j[4],r=j[5],h=j[6];a=9;y=1;u.fillRect(g+left_offset,f,k-g,a);if(p!=="Dense"&&o!==undefined&&t>x){u.fillStyle=label_color;if(tile_index===0&&g-u.measureText(o).width<0){u.textAlign="left";u.fillText(o,k+2+left_offset,f+8)}else{u.textAlign="right";u.fillText(o,g-2+left_offset,f+8)}u.fillStyle=block_color}var q=w+" / "+r;if(t>x&&u.measureText(q).width<(k-g)){u.fillStyle="white";u.textAlign="center";u.fillText(q,left_offset+g+(k-g)/2,f+8);u.fillStyle=block_color}}}});var ReadTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{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:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:c,onchange:function(){this.track.tile_cache.clear();this.track.draw()}});this.prefs=this.track_config.values;this.track_type="ReadTrack";this.make_name_popup_menu()};$.extend(ReadTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT;if(this.track_config.values.show_insertions){a*=2}}}return a},draw_read:function(m,d,J,n,D,G,e,o,y,a){m.textAlign="center";var l=this,u=[n,D],C=0,z=0,f=0;var r=[];if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){f=Math.round(J/2)}if(!e){e=[[0,o.length]]}for(var h=0,k=e.length;h<k;h++){var b=e[h],g="MIDNSHP=X"[b[0]],v=b[1];if(g==="H"||g==="S"){C-=v}var x=G+C,B=Math.floor(Math.max(0,(x-n)*J)),E=Math.floor(Math.max(0,(x+v-n)*J));switch(g){case"H":break;case"S":case"M":case"=":var p=compute_overlap([x,x+v],u);if(p!==NO_OVERLAP){var q=o.slice(z,z+v);if(f>0){m.fillStyle=this.prefs.block_color;m.fillRect(B+this.left_offset-f,y+1,E-B,9);m.fillStyle=CONNECTOR_COLOR;for(var I=0,j=q.length;I<j;I++){if(this.track_config.values.show_differences&&a){var s=a[x-n+I];if(!s||s.toLowerCase()===q[I].toLowerCase()){continue}}if(x+I>=n&&x+I<=D){var A=Math.floor(Math.max(0,(x+I-n)*J));m.fillText(q[I],A+this.left_offset,y+9)}}}else{m.fillStyle=this.prefs.block_color;m.fillRect(B+this.left_offset,y+(this.mode!=="Dense"?4:5),E-B,(d!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}z+=v;C+=v;break;case"N":m.fillStyle=CONNECTOR_COLOR;m.fillRect(B+this.left_offset-f,y+5,E-B,1);C+=v;break;case"D":m.fillStyle="red";m.fillRect(B+this.left_offset-f,y+4,E-B,3);C+=v;break;case"P":break;case"I":var p=compute_overlap([x,x+v],u),K=this.left_offset+B-f;if(p!==NO_OVERLAP){var q=o.slice(z,z+v);if(this.track_config.values.show_insertions){var w=this.left_offset+B-(E-B)/2;if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){m.fillStyle="yellow";m.fillRect(w-f,y-9,E-B,9);r[r.length]={type:"triangle",data:[K,y+4,5]};m.fillStyle=CONNECTOR_COLOR;switch(p){case (OVERLAP_START):q=q.slice(n-x);break;case (OVERLAP_END):q=q.slice(0,x-D);break;case (CONTAINED_BY):break;case (CONTAINS):q=q.slice(n-x,x-D);break}for(var I=0,j=q.length;I<j;I++){var A=Math.floor(Math.max(0,(x+I-n)*J));m.fillText(q[I],A+this.left_offset-(E-B)/2,y)}}else{m.fillStyle="yellow";m.fillRect(w,y+(this.mode!=="Dense"?2:5),E-B,(d!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}else{if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){r[r.length]={type:"text",data:[q.length,K,y+9]}}else{}}}z+=v;break;case"X":z+=v;break}}m.fillStyle="yellow";var t,L,H;for(var F=0;F<r.length;F++){t=r[F];L=t.type;H=t.data;if(L==="text"){m.font="bold "+DEFAULT_FONT;m.fillText(H[0],H[1],H[2]);m.font=DEFAULT_FONT}else{if(L=="triangle"){m.drawDownwardEquilateralTriangle(H[0],H[1],H[2])}}}},draw_element:function(w,y,r,k,e,A,b,n,x,u,f,c){var m=k[0],v=k[1],d=k[2],o=k[3],h=Math.floor(Math.max(0,(v-A)*n)),j=Math.ceil(Math.min(u,Math.max(0,(d-A)*n))),g=(r==="Dense"?1:(1+e))*x,z=this.prefs.block_color,l=this.prefs.label_color,t=0;if((r==="Pack"||this.mode==="Auto")&&n>CHAR_WIDTH_PX){var t=Math.round(n/2)}w.fillStyle=z;if(k[5] instanceof Array){var s=Math.floor(Math.max(0,(k[4][0]-A)*n)),q=Math.ceil(Math.min(u,Math.max(0,(k[4][1]-A)*n))),p=Math.floor(Math.max(0,(k[5][0]-A)*n)),a=Math.ceil(Math.min(u,Math.max(0,(k[5][1]-A)*n)));if(k[4][1]>=A&&k[4][0]<=b&&k[4][2]){this.draw_read(w,r,n,A,b,k[4][0],k[4][2],k[4][3],g,c)}if(k[5][1]>=A&&k[5][0]<=b&&k[5][2]){this.draw_read(w,r,n,A,b,k[5][0],k[5][2],k[5][3],g,c)}if(p>q){w.fillStyle=CONNECTOR_COLOR;w.dashedLine(q+f-t,g+5,f+p-t,g+5)}}else{w.fillStyle=z;this.draw_read(w,r,n,A,b,v,k[4],k[5],g,c)}if(r==="Pack"&&v>A){w.fillStyle=this.prefs.label_color;if(y===0&&h-w.measureText(o).width<0){w.textAlign="left";w.fillText(o,j+f+LABEL_SPACING-t,g+8)}else{w.textAlign="right";w.fillText(o,h+f-LABEL_SPACING-t,g+8)}w.fillStyle=z}}});var ToolDataFeatureTrack=function(e,c,g,a,d,f,b){FeatureTrack.call(this,e,c,g,a,d,f,{},b);this.track_type="ToolDataFeatureTrack";this.data_url=raw_data_url;this.data_query_wait=1000;this.dataset_check_url=dataset_state_url};$.extend(ToolDataFeatureTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{predraw_init:function(){var b=this;var a=function(){if(b.data_cache.size()===0){setTimeout(a,300)}else{b.data_url=default_data_url;b.data_query_wait=DEFAULT_DATA_QUERY_WAIT;b.dataset_state_url=converted_datasets_state_url;$.getJSON(b.dataset_state_url,{dataset_id:b.dataset_id,hda_ldda:b.hda_ldda},function(c){})}};a()}}); \ No newline at end of file +CanvasRenderingContext2D.prototype.dashedLine=function(c,j,b,h,f){if(f===undefined){f=4}var e=b-c;var d=h-j;var g=Math.floor(Math.sqrt(e*e+d*d)/f);var l=e/g;var k=d/g;var a;for(a=0;a<g;a++,c+=l,j+=k){if(a%2!==0){continue}this.fillRect(c,j,f,1)}};CanvasRenderingContext2D.prototype.drawDownwardEquilateralTriangle=function(b,a,e){var d=b-e/2,c=b+e/2,f=a-Math.sqrt(e*3/2);this.beginPath();this.moveTo(d,f);this.lineTo(c,f);this.lineTo(b,a);this.lineTo(d,f);this.strokeStyle=this.fillStyle;this.fill();this.stroke();this.closePath()};function sortable(a,b){a.bind("drag",{handle:b,relative:true},function(h,j){var g=$(this).parent();var f=g.children();var c;for(c=0;c<f.length;c++){if(j.offsetY<$(f.get(c)).position().top){break}}if(c===f.length){if(this!==f.get(c-1)){g.append(this)}}else{if(this!==f.get(c)){$(this).insertBefore(f.get(c))}}})}var NO_OVERLAP=1001,CONTAINS=1002,OVERLAP_START=1003,OVERLAP_END=1004,CONTAINED_BY=1005;function compute_overlap(e,b){var g=e[0],f=e[1],d=b[0],c=b[1],a;if(g<d){if(f<d){a=NO_OVERLAP}else{if(f<=c){a=OVERLAP_START}else{a=CONTAINS}}}else{if(g>c){a=NO_OVERLAP}else{if(f<=c){a=CONTAINED_BY}else{a=OVERLAP_END}}}return a}function is_overlap(b,a){return(compute_overlap(b,a)!==NO_OVERLAP)}function get_slider_step(c,a){var b=a-c;return(b<=1?0.01:(b<=1000?1:5))}var DENSE_TRACK_HEIGHT=10,NO_DETAIL_TRACK_HEIGHT=3,SQUISH_TRACK_HEIGHT=5,PACK_TRACK_HEIGHT=10,NO_DETAIL_FEATURE_HEIGHT=1,DENSE_FEATURE_HEIGHT=1,SQUISH_FEATURE_HEIGHT=3,PACK_FEATURE_HEIGHT=9,ERROR_PADDING=10,LABEL_SPACING=2,PACK_SPACING=5,MIN_SQUISH_VIEW_WIDTH=12000,DEFAULT_FONT="9px Monaco, Lucida Console, monospace",DENSITY=200,FEATURE_LEVELS=10,MAX_FEATURE_DEPTH=100,DEFAULT_DATA_QUERY_WAIT=5000,MAX_CHROMS_SELECTABLE=100,CONNECTOR_COLOR="#ccc",DATA_ERROR="There was an error in indexing this dataset. ",DATA_NOCONVERTER="A converter for this dataset is not installed. Please check your datatypes_conf.xml file.",DATA_NONE="No data for this chrom/contig.",DATA_PENDING="Currently indexing... please wait",DATA_CANNOT_RUN_TOOL="Tool cannot be rerun: ",DATA_LOADING="Loading data...",DATA_OK="Ready for display",CACHED_TILES_FEATURE=10,CACHED_TILES_LINE=5,CACHED_DATA=5,DUMMY_CANVAS=document.createElement("canvas"),RIGHT_STRAND,LEFT_STRAND;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(DUMMY_CANVAS)}var CONTEXT=DUMMY_CANVAS.getContext("2d");CONTEXT.font=DEFAULT_FONT;var CHAR_WIDTH_PX=CONTEXT.measureText("A").width,CHAR_HEIGHT_PX=9;var right_img=new Image();right_img.src=image_path+"/visualization/strand_right.png";right_img.onload=function(){RIGHT_STRAND=CONTEXT.createPattern(right_img,"repeat")};var left_img=new Image();left_img.src=image_path+"/visualization/strand_left.png";left_img.onload=function(){LEFT_STRAND=CONTEXT.createPattern(left_img,"repeat")};var right_img_inv=new Image();right_img_inv.src=image_path+"/visualization/strand_right_inv.png";right_img_inv.onload=function(){RIGHT_STRAND_INV=CONTEXT.createPattern(right_img_inv,"repeat")};var left_img_inv=new Image();left_img_inv.src=image_path+"/visualization/strand_left_inv.png";left_img_inv.onload=function(){LEFT_STRAND_INV=CONTEXT.createPattern(left_img_inv,"repeat")};function round_1000(a){return Math.round(a*1000)/1000}var Cache=function(a){this.num_elements=a;this.clear()};$.extend(Cache.prototype,{get:function(b){var a=this.key_ary.indexOf(b);if(a!==-1){this.move_key_to_end(b,a)}return this.obj_cache[b]},set:function(b,c){if(!this.obj_cache[b]){if(this.key_ary.length>=this.num_elements){var a=this.key_ary.shift();delete this.obj_cache[a]}this.key_ary.push(b)}this.obj_cache[b]=c;return c},move_key_to_end:function(b,a){this.key_ary.splice(a,1);this.key_ary.push(b)},clear:function(){this.obj_cache={};this.key_ary=[]},size:function(){return this.key_ary.length}});var DataManager=function(b,a,c){Cache.call(this,b);this.track=a;this.subset=(c!==undefined?c:true)};$.extend(DataManager.prototype,Cache.prototype,{load_data:function(h,j,d,g,a,f){var c={chrom:h,low:j,high:d,mode:g,resolution:a,dataset_id:this.track.dataset_id,hda_ldda:this.track.hda_ldda};$.extend(c,f);var k=[];for(var e=0;e<this.track.filters.length;e++){k[k.length]=this.track.filters[e].name}c.filter_cols=JSON.stringify(k);var b=this;return $.getJSON(this.track.data_url,c,function(l){b.set_data(j,d,g,l)})},get_data:function(j,k,c,h,b,f){var l=this.get(this.gen_key(k,c,h));if(l){return l}if(this.subset){var m,g,a,e,h,l;for(var d=0;d<this.key_ary.length;d++){m=this.key_ary[d];g=this.split_key(m);a=g[0];e=g[1];if(k>=a&&c<=e){l=this.obj_cache[m];if(l.dataset_type!=="summary_tree"&&l.extra_info!=="no_detail"){this.move_key_to_end(m,d);return l}}}}return this.load_data(j,k,c,h,b,f)},set_data:function(b,c,d,a){return this.set(this.gen_key(b,c,d),a)},gen_key:function(a,c,d){var b=a+"_"+c+"_"+d;return b},split_key:function(a){return a.split("_")}});var View=function(a,d,c,b,e){this.container=a;this.chrom=null;this.vis_id=c;this.dbkey=b;this.title=d;this.tracks=[];this.label_tracks=[];this.max_low=0;this.max_high=0;this.num_tracks=0;this.track_id_counter=0;this.zoom_factor=3;this.min_separation=30;this.has_changes=false;this.init(e);this.canvas_manager=new CanvasManager(a.get(0).ownerDocument);this.reset()};$.extend(View.prototype,{init:function(d){var c=this.container,a=this;this.top_container=$("<div/>").addClass("top-container").appendTo(c);this.content_div=$("<div/>").addClass("content").css("position","relative").appendTo(c);this.bottom_container=$("<div/>").addClass("bottom-container").appendTo(c);this.top_labeltrack=$("<div/>").addClass("top-labeltrack").appendTo(this.top_container);this.viewport_container=$("<div/>").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div);this.intro_div=$("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide();this.nav_labeltrack=$("<div/>").addClass("nav-labeltrack").appendTo(this.bottom_container);this.nav_container=$("<div/>").addClass("nav-container").prependTo(this.top_container);this.nav=$("<div/>").addClass("nav").appendTo(this.nav_container);this.overview=$("<div/>").addClass("overview").appendTo(this.bottom_container);this.overview_viewport=$("<div/>").addClass("overview-viewport").appendTo(this.overview);this.overview_close=$("<a href='javascript:void(0);'>Close Overview</a>").addClass("overview-close").hide().appendTo(this.overview_viewport);this.overview_highlight=$("<div/>").addClass("overview-highlight").hide().appendTo(this.overview_viewport);this.overview_box_background=$("<div/>").addClass("overview-boxback").appendTo(this.overview_viewport);this.overview_box=$("<div/>").addClass("overview-box").appendTo(this.overview_viewport);this.default_overview_height=this.overview_box.height();this.nav_controls=$("<div/>").addClass("nav-controls").appendTo(this.nav);this.chrom_select=$("<select/>").attr({name:"chrom"}).css("width","15em").addClass("no-autocomplete").append("<option value=''>Loading</option>").appendTo(this.nav_controls);var b=function(f){if(f.type==="focusout"||(f.keyCode||f.which)===13||(f.keyCode||f.which)===27){if((f.keyCode||f.which)!==27){a.go_to($(this).val())}$(this).hide();$(this).val("");a.location_span.show();a.chrom_select.show()}};this.nav_input=$("<input/>").addClass("nav-input").hide().bind("keyup focusout",b).appendTo(this.nav_controls);this.location_span=$("<span/>").addClass("location").appendTo(this.nav_controls);this.location_span.bind("click",function(){a.location_span.hide();a.chrom_select.hide();a.nav_input.val(a.chrom+":"+a.low+"-"+a.high);a.nav_input.css("display","inline-block");a.nav_input.select();a.nav_input.focus()});if(this.vis_id!==undefined){this.hidden_input=$("<input/>").attr("type","hidden").val(this.vis_id).appendTo(this.nav_controls)}this.zo_link=$("<a id='zoom-out' />").click(function(){a.zoom_out();a.redraw()}).appendTo(this.nav_controls);this.zi_link=$("<a id='zoom-in' />").click(function(){a.zoom_in();a.redraw()}).appendTo(this.nav_controls);this.load_chroms({low:0},d);this.chrom_select.bind("change",function(){a.change_chrom(a.chrom_select.val())});this.intro_div.show();this.content_div.bind("click",function(f){$(this).find("input").trigger("blur")});this.content_div.bind("dblclick",function(f){a.zoom_in(f.pageX,this.viewport_container)});this.overview_box.bind("dragstart",function(f,g){this.current_x=g.offsetX}).bind("drag",function(f,h){var j=h.offsetX-this.current_x;this.current_x=h.offsetX;var g=Math.round(j/a.viewport_container.width()*(a.max_high-a.max_low));a.move_delta(-g)});this.overview_close.bind("click",function(){for(var f=0,e=a.tracks.length;f<e;f++){a.tracks[f].is_overview=false}$(this).siblings().filter("canvas").remove();$(this).parent().css("height",a.overview_box.height());a.overview_highlight.hide();$(this).hide()});this.viewport_container.bind("draginit",function(f,g){if(f.clientX>a.viewport_container.width()-16){return false}}).bind("dragstart",function(f,g){g.original_low=a.low;g.current_height=f.clientY;g.current_x=g.offsetX}).bind("drag",function(h,k){var f=$(this);var l=k.offsetX-k.current_x;var g=f.scrollTop()-(h.clientY-k.current_height);f.scrollTop(g);k.current_height=h.clientY;k.current_x=k.offsetX;var j=Math.round(l/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}).bind("mousewheel",function(h,k,g,f){if(g){var j=Math.round(-g/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}});this.top_labeltrack.bind("dragstart",function(f,g){return $("<div />").css({height:a.content_div.height()+a.top_labeltrack.height()+a.nav_labeltrack.height()+1,top:"0px",position:"absolute","background-color":"#ccf",opacity:0.5,"z-index":1000}).appendTo($(this))}).bind("drag",function(k,l){$(l.proxy).css({left:Math.min(k.pageX,l.startX),width:Math.abs(k.pageX-l.startX)});var g=Math.min(k.pageX,l.startX)-a.container.offset().left,f=Math.max(k.pageX,l.startX)-a.container.offset().left,j=(a.high-a.low),h=a.viewport_container.width();a.update_location(Math.round(g/h*j)+a.low,Math.round(f/h*j)+a.low)}).bind("dragend",function(l,m){var g=Math.min(l.pageX,m.startX),f=Math.max(l.pageX,m.startX),j=(a.high-a.low),h=a.viewport_container.width(),k=a.low;a.low=Math.round(g/h*j)+k;a.high=Math.round(f/h*j)+k;$(m.proxy).remove();a.redraw()});this.add_label_track(new LabelTrack(this,this.top_labeltrack));this.add_label_track(new LabelTrack(this,this.nav_labeltrack));$(window).bind("resize",function(){a.resize_window()});$(document).bind("redraw",function(){a.redraw()});this.reset();$(window).trigger("resize")},update_location:function(a,b){this.location_span.text(commatize(a)+" - "+commatize(b));this.nav_input.val(this.chrom+":"+commatize(a)+"-"+commatize(b))},load_chroms:function(b,c){b.num=MAX_CHROMS_SELECTABLE;$.extend(b,(this.vis_id!==undefined?{vis_id:this.vis_id}:{dbkey:this.dbkey}));var a=this;$.ajax({url:chrom_url,data:b,dataType:"json",success:function(e){if(e.chrom_info.length===0){alert("Invalid chromosome: "+b.chrom);return}if(e.reference){a.add_label_track(new ReferenceTrack(a))}a.chrom_data=e.chrom_info;var h='<option value="">Select Chrom/Contig</option>';for(var g=0,d=a.chrom_data.length;g<d;g++){var f=a.chrom_data[g].chrom;h+='<option value="'+f+'">'+f+"</option>"}if(e.prev_chroms){h+='<option value="previous">Previous '+MAX_CHROMS_SELECTABLE+"</option>"}if(e.next_chroms){h+='<option value="next">Next '+MAX_CHROMS_SELECTABLE+"</option>"}a.chrom_select.html(h);if(c){c()}a.chrom_start_index=e.start_index},error:function(){alert("Could not load chroms for this dbkey:",a.dbkey)}})},change_chrom:function(e,b,g){if(!e||e==="None"){return}var d=this;if(e==="previous"){d.load_chroms({low:this.chrom_start_index-MAX_CHROMS_SELECTABLE});return}if(e==="next"){d.load_chroms({low:this.chrom_start_index+MAX_CHROMS_SELECTABLE});return}var f=$.grep(d.chrom_data,function(j,k){return j.chrom===e})[0];if(f===undefined){d.load_chroms({chrom:e},function(){d.change_chrom(e,b,g)});return}else{if(e!==d.chrom){d.chrom=e;if(!d.chrom){d.intro_div.show()}else{d.intro_div.hide()}d.chrom_select.val(d.chrom);d.max_high=f.len-1;d.reset();d.redraw(true);for(var h=0,a=d.tracks.length;h<a;h++){var c=d.tracks[h];if(c.init){c.init()}}}if(b!==undefined&&g!==undefined){d.low=Math.max(b,0);d.high=Math.min(g,d.max_high)}d.reset_overview();d.redraw()}},go_to:function(f){var k=this,a,d,b=f.split(":"),h=b[0],j=b[1];if(j!==undefined){try{var g=j.split("-");a=parseInt(g[0].replace(/,/g,""),10);d=parseInt(g[1].replace(/,/g,""),10)}catch(c){return false}}k.change_chrom(h,a,d)},move_fraction:function(c){var a=this;var b=a.high-a.low;this.move_delta(c*b)},move_delta:function(c){var a=this;var b=a.high-a.low;if(a.low-c<a.max_low){a.low=a.max_low;a.high=a.max_low+b}else{if(a.high-c>a.max_high){a.high=a.max_high;a.low=a.max_high-b}else{a.high-=c;a.low-=c}}a.redraw()},add_track:function(a){a.view=this;a.track_id=this.track_id_counter;this.tracks.push(a);if(a.init){a.init()}a.container_div.attr("id","track_"+a.track_id);sortable(a.container_div,".draghandle");this.track_id_counter+=1;this.num_tracks+=1},add_label_track:function(a){a.view=this;this.label_tracks.push(a)},remove_track:function(a){this.has_changes=true;a.container_div.fadeOut("slow",function(){$(this).remove()});delete this.tracks[this.tracks.indexOf(a)];this.num_tracks-=1},reset:function(){this.low=this.max_low;this.high=this.max_high;this.viewport_container.find(".yaxislabel").remove()},redraw:function(h){var g=this.high-this.low,f=this.low,b=this.high;if(f<this.max_low){f=this.max_low}if(b>this.max_high){b=this.max_high}if(this.high!==0&&g<this.min_separation){b=f+this.min_separation}this.low=Math.floor(f);this.high=Math.ceil(b);this.resolution=Math.pow(10,Math.ceil(Math.log((this.high-this.low)/200)/Math.LN10));this.zoom_res=Math.pow(FEATURE_LEVELS,Math.max(0,Math.ceil(Math.log(this.resolution,FEATURE_LEVELS)/Math.log(FEATURE_LEVELS))));var a=(this.low/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var e=((this.high-this.low)/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var j=13;this.overview_box.css({left:a,width:Math.max(j,e)}).show();if(e<j){this.overview_box.css("left",a-(j-e)/2)}if(this.overview_highlight){this.overview_highlight.css({left:a,width:e})}this.update_location(this.low,this.high);if(!h){for(var c=0,d=this.tracks.length;c<d;c++){if(this.tracks[c]&&this.tracks[c].enabled){this.tracks[c].draw()}}for(c=0,d=this.label_tracks.length;c<d;c++){this.label_tracks[c].draw()}}},zoom_in:function(b,c){if(this.max_high===0||this.high-this.low<this.min_separation){return}var d=this.high-this.low,e=d/2+this.low,a=(d/this.zoom_factor)/2;if(b){e=b/this.viewport_container.width()*(this.high-this.low)+this.low}this.low=Math.round(e-a);this.high=Math.round(e+a);this.redraw()},zoom_out:function(){if(this.max_high===0){return}var b=this.high-this.low,c=b/2+this.low,a=(b*this.zoom_factor)/2;this.low=Math.round(c-a);this.high=Math.round(c+a);this.redraw()},resize_window:function(){this.viewport_container.height(this.container.height()-this.top_container.height()-this.bottom_container.height());this.nav_container.width(this.container.width());this.redraw()},reset_overview:function(){this.overview_viewport.find("canvas").remove();this.overview_viewport.height(this.default_overview_height);this.overview_box.height(this.default_overview_height);this.overview_close.hide();this.overview_highlight.hide()}});var Tool=function(g){this.name=g.name;this.params=[];var a=g.params;for(var e=0;e<a.length;e++){var d=a[e],c=d.name,b=d.label,f=d.type;if(f==="int"||f==="float"){this.params[this.params.length]=new NumberParameter(c,b,d.min,d.max,d.value)}else{if(f=="select"){this.params[this.params.length]=new SelectParameter(c,b,d.options)}else{console.log("WARNING: unrecognized tool parameter type:",c,f)}}}};$.extend(Tool.prototype,{get_param_values_dict:function(){var b={};for(var a=0;a<this.params.length;a++){var c=this.params[a];b[c.name]=JSON.stringify(c.value)}return b},get_param_values:function(){var b=[];for(var a=0;a<this.params.length;a++){b[a]=this.params[a].value}return b}});var NumberParameter=function(c,b,e,a,d){this.name=c;this.label=b;this.min=e;this.max=a;this.value=d};var SelectParameter=function(c,b,a){this.name=c;this.label=b;this.options=a;this.value=(a.length!==0?a[0][1]:null)};var Filter=function(b,a,c){this.name=b;this.index=a;this.value=c};var NumberFilter=function(b,a){this.name=b;this.index=a;this.low=-Number.MAX_VALUE;this.high=Number.MAX_VALUE;this.min=Number.MAX_VALUE;this.max=-Number.MAX_VALUE;this.slider=null;this.slider_label=null};$.extend(NumberFilter.prototype,{applies_to:function(a){if(a.length>this.index){return true}return false},keep:function(a){if(!this.applies_to(a)){return true}return(a[this.index]>=this.low&&a[this.index]<=this.high)},update_attrs:function(b){var a=false;if(!this.applies_to(b)){return a}if(b[this.index]<this.min){this.min=Math.floor(b[this.index]);a=true}if(b[this.index]>this.max){this.max=Math.ceil(b[this.index]);a=true}return a},update_ui_elt:function(){var b=this.slider.slider("option","min"),a=this.slider.slider("option","max");if(this.min<b||this.max>a){this.slider.slider("option","min",this.min);this.slider.slider("option","max",this.max);this.slider.slider("option","step",get_slider_step(this.min,this.max));this.slider.slider("option","values",[this.min,this.max])}}});var get_filters_from_dict=function(a){var g=[];for(var d=0;d<a.length;d++){var f=a[d];var c=f.name,e=f.type,b=f.index;if(e==="int"||e==="float"){g[d]=new NumberFilter(c,b)}else{g[d]=new Filter(c,b,e)}}return g};var TrackConfig=function(a){this.track=a.track;this.params=a.params;this.values={};if(a.saved_values){this.restore_values(a.saved_values)}this.onchange=a.onchange};$.extend(TrackConfig.prototype,{restore_values:function(a){var b=this;$.each(this.params,function(c,d){if(a[d.key]!==undefined){b.values[d.key]=a[d.key]}else{b.values[d.key]=d.default_value}})},build_form:function(){var b=this;var a=$("<div />");$.each(this.params,function(f,d){if(!d.hidden){var c="param_"+f;var l=$("<div class='form-row' />").appendTo(a);l.append($("<label />").attr("for",c).text(d.label+":"));if(d.type==="bool"){l.append($('<input type="checkbox" />').attr("id",c).attr("name",c).attr("checked",b.values[d.key]))}else{if(d.type==="color"){var h=b.values[d.key];var g=$("<input />").attr("id",c).attr("name",c).val(h);var j=$("<div class='tipsy tipsy-north' style='position: absolute;' />").hide();var e=$("<div style='background-color: black; padding: 10px;'></div>").appendTo(j);var k=$("<div/>").appendTo(e).farbtastic({width:100,height:100,callback:g,color:h});$("<div />").append(g).append(j).appendTo(l).bind("click",function(m){j.css({left:$(this).position().left+($(g).width()/2)-60,top:$(this).position().top+$(this.height)}).show();$(document).bind("click.color-picker",function(){j.hide();$(document).unbind("click.color-picker")});m.stopPropagation()})}else{l.append($("<input />").attr("id",c).attr("name",c).val(b.values[d.key]))}}}});return a},update_from_form:function(a){var c=this;var b=false;$.each(this.params,function(d,f){if(!f.hidden){var g="param_"+d;var e=a.find("#"+g).val();if(f.type==="float"){e=parseFloat(e)}else{if(f.type==="int"){e=parseInt(e)}else{if(f.type==="bool"){e=a.find("#"+g).is(":checked")}}}if(e!==c.values[f.key]){c.values[f.key]=e;b=true}}});if(b){this.onchange()}}});var Tile=function(a,b,c){this.track=a;this.canvas=b;this.histo_max=c};var Track=function(b,a,e,c,d){this.name=b;this.view=a;this.parent_element=e;this.data_url=(c?c:default_data_url);this.data_url_extra_params={};this.data_query_wait=(d?d:DEFAULT_DATA_QUERY_WAIT);this.dataset_check_url=converted_datasets_state_url;this.container_div=$("<div />").addClass("track").css("position","relative");if(!this.hidden){this.header_div=$("<div class='track-header' />").appendTo(this.container_div);if(this.view.editor){this.drag_div=$("<div class='draghandle' />").appendTo(this.header_div)}this.name_div=$("<div class='menubutton popup' />").appendTo(this.header_div);this.name_div.text(this.name);this.name_div.attr("id",this.name.replace(/\s+/g,"-").replace(/[^a-zA-Z0-9\-]/g,"").toLowerCase())}this.content_div=$("<div class='track-content'>").appendTo(this.container_div);this.parent_element.append(this.container_div)};$.extend(Track.prototype,{init:function(){var a=this;a.enabled=false;a.tile_cache.clear();a.data_cache.clear();a.initial_canvas=undefined;a.content_div.css("height","auto");a.container_div.removeClass("nodata error pending");if(!a.dataset_id){return}$.getJSON(converted_datasets_state_url,{hda_ldda:a.hda_ldda,dataset_id:a.dataset_id,chrom:a.view.chrom},function(b){if(!b||b==="error"||b.kind==="error"){a.container_div.addClass("error");a.content_div.text(DATA_ERROR);if(b.message){var d=a.view.tracks.indexOf(a);var c=$(" <a href='javascript:void(0);'></a>").text("View error").bind("click",function(){show_modal("Trackster Error","<pre>"+b.message+"</pre>",{Close:hide_modal})});a.content_div.append(c)}}else{if(b==="no converter"){a.container_div.addClass("error");a.content_div.text(DATA_NOCONVERTER)}else{if(b==="no data"||(b.data!==undefined&&(b.data===null||b.data.length===0))){a.container_div.addClass("nodata");a.content_div.text(DATA_NONE)}else{if(b==="pending"){a.container_div.addClass("pending");a.content_div.text(DATA_PENDING);setTimeout(function(){a.init()},a.data_query_wait)}else{if(b.status==="data"){if(b.valid_chroms){a.valid_chroms=b.valid_chroms;a.make_name_popup_menu()}a.content_div.text(DATA_OK);if(a.view.chrom){a.content_div.text("");a.content_div.css("height",a.height_px+"px");a.enabled=true;$.when(a.predraw_init()).done(function(){a.draw()})}}}}}}})},predraw_init:function(){},update_name:function(a){this.old_name=this.name;this.name=a;this.name_div.text(this.name)},revert_name:function(){this.name=this.old_name;this.name_div.text(this.name)}});var TiledTrack=function(b,h,o){var c=this,p=c.view;this.filters=(b!==undefined?get_filters_from_dict(b):[]);this.filters_available=false;this.filters_visible=false;this.tool=(h!==undefined&&obj_length(h)>0?new Tool(h):undefined);this.parent_track=o;this.child_tracks=[];if(c.hidden){return}var k=function(r,s,t){r.click(function(){var u=s.text();max=parseFloat(t.slider("option","max")),input_size=(max<=1?4:max<=1000000?max.toString().length:6),multi_value=false;if(t.slider("option","values")){input_size=2*input_size+1;multi_value=true}s.text("");$("<input type='text'/>").attr("size",input_size).attr("maxlength",input_size).attr("value",u).appendTo(s).focus().select().click(function(v){v.stopPropagation()}).blur(function(){$(this).remove();s.text(u)}).keyup(function(z){if(z.keyCode===27){$(this).trigger("blur")}else{if(z.keyCode===13){var x=t.slider("option","min"),v=t.slider("option","max"),y=function(A){return(isNaN(A)||A>v||A<x)},w=$(this).val();if(!multi_value){w=parseFloat(w);if(y(w)){alert("Parameter value must be in the range ["+x+"-"+v+"]");return $(this)}}else{w=w.split("-");w=[parseFloat(w[0]),parseFloat(w[1])];if(y(w[0])||y(w[1])){alert("Parameter value must be in the range ["+x+"-"+v+"]");return $(this)}}t.slider((multi_value?"values":"value"),w)}}})})};if(this.parent_track){this.header_div.find(".draghandle").removeClass("draghandle").addClass("child-track-icon").addClass("icon-button");this.parent_element.addClass("child-track");this.tool=undefined}this.filters_div=$("<div/>").addClass("filters").hide();this.header_div.after(this.filters_div);this.filters_div.bind("drag",function(r){r.stopPropagation()}).bind("click",function(r){r.stopPropagation()}).bind("dblclick",function(r){r.stopPropagation()});$.each(this.filters,function(x,s){var u=$("<div/>").addClass("slider-row").appendTo(c.filters_div);var r=$("<div/>").addClass("slider-label").appendTo(u);var z=$("<span/>").addClass("slider-name").text(s.name+" ").appendTo(r);var t=$("<span/>");var v=$("<span/>").addClass("slider-value").appendTo(r).append("[").append(t).append("]");var y=$("<div/>").addClass("slider").appendTo(u);s.control_element=$("<div/>").attr("id",s.name+"-filter-control").appendTo(y);var w=[0,0];s.control_element.slider({range:true,min:Number.MAX_VALUE,max:-Number.MIN_VALUE,values:[0,0],slide:function(A,B){w=B.values;t.text(B.values[0]+"-"+B.values[1]);setTimeout(function(){if(B.values[0]==w[0]&&B.values[1]==w[1]){var C=B.values;t.text(C[0]+"-"+C[1]);s.low=C[0];s.high=C[1];c.draw(true,true)}},50)},change:function(A,B){s.control_element.slider("option","slide").call(s.control_element,A,B)}});s.slider=s.control_element;s.slider_label=t;k(v,t,s.control_element);$("<div style='clear: both;'/>").appendTo(u)});if(this.tool){this.dynamic_tool_div=$("<div/>").addClass("dynamic-tool").hide();this.header_div.after(this.dynamic_tool_div);this.dynamic_tool_div.bind("drag",function(r){r.stopPropagation()}).bind("click",function(r){r.stopPropagation()}).bind("dblclick",function(r){r.stopPropagation()});var n=$("<div class='tool-name'>").appendTo(this.dynamic_tool_div).text(this.tool.name);var m=this.tool.params;var c=this;$.each(this.tool.params,function(A,s){if(s instanceof NumberParameter){var x=$("<div>").addClass("slider-row").appendTo(c.dynamic_tool_div);var u=$("<div>").addClass("slider-label").appendTo(x);var C=$("<span/>").addClass("slider-name").text(s.label+" ").appendTo(u);var t=$("<span/>").text(s.value);var y=$("<span/>").addClass("slider-value").appendTo(u).append("[").append(t).append("]");var B=$("<div/>").addClass("slider").appendTo(x);var r=$("<div id='"+s.name+"-param-control'>").appendTo(B);r.slider({min:s.min,max:s.max,step:get_slider_step(s.min,s.max),value:s.value,slide:function(F,H){var G=H.value;s.value=G;if(0<G&&G<1){G=parseFloat(G).toFixed(2)}t.text(G)},change:function(F,G){r.slider("option","slide").call(r,F,G)}});k(y,t,r);$("<div style='clear: both;'/>").appendTo(x)}else{if(s instanceof SelectParameter){var x=$("<div>").addClass("slider-row").appendTo(c.dynamic_tool_div);var u=$("<div>").addClass("slider-label").appendTo(x);var C=$("<span/>").addClass("slider-name").text(s.label+" ").appendTo(u);var E=$("<div/>").addClass("slider").appendTo(x);var w=$("<select/>").appendTo(E);w.change(function(){s.value=$(this).val()});var D=w.attr("options");for(var z=0;z<s.options.length;z++){var v=s.options[z];D[D.length]=new Option(v[0],v[1])}$("<div style='clear: both;'/>").appendTo(x)}}});var q=$("<div>").addClass("slider-row").appendTo(this.dynamic_tool_div);var l=$("<input type='submit'>").attr("value","Run").appendTo(q);var c=this;l.click(function(){c.run_tool()})}c.child_tracks_container=$("<div/>").addClass("child-tracks-container").hide();c.container_div.append(c.child_tracks_container);if(c.display_modes!==undefined){if(c.mode_div===undefined){c.mode_div=$("<div class='right-float menubutton popup' />").appendTo(c.header_div);var e=(c.track_config&&c.track_config.values.mode?c.track_config.values.mode:c.display_modes[0]);c.mode=e;c.mode_div.text(e);var d=function(r){c.mode_div.text(r);c.mode=r;c.track_config.values.mode=r;c.tile_cache.clear();c.draw()};var a={};for(var f=0,j=c.display_modes.length;f<j;f++){var g=c.display_modes[f];a[g]=function(r){return function(){d(r)}}(g)}make_popupmenu(c.mode_div,a)}else{c.mode_div.hide()}}this.make_name_popup_menu()};$.extend(TiledTrack.prototype,Track.prototype,{make_name_popup_menu:function(){var b=this;var a={};a["Edit configuration"]=function(){var h=function(){hide_modal();$(window).unbind("keypress.check_enter_esc")},f=function(){b.track_config.update_from_form($(".dialog-box"));hide_modal();$(window).unbind("keypress.check_enter_esc")},g=function(j){if((j.keyCode||j.which)===27){h()}else{if((j.keyCode||j.which)===13){f()}}};$(window).bind("keypress.check_enter_esc",g);show_modal("Configure Track",b.track_config.build_form(),{Cancel:h,OK:f})};if(b.filters_available>0){var e=(b.filters_div.is(":visible")?"Hide filters":"Show filters");a[e]=function(){b.filters_visible=(b.filters_div.is(":visible"));b.filters_div.toggle();b.make_name_popup_menu()}}if(b.tool){var e=(b.dynamic_tool_div.is(":visible")?"Hide tool":"Show tool");a[e]=function(){if(!b.dynamic_tool_div.is(":visible")){b.update_name(b.name+b.tool_region_and_parameters_str())}else{menu_option_text="Show dynamic tool";b.revert_name()}b.dynamic_tool_div.toggle();b.make_name_popup_menu()}}if(b.valid_chroms){a["List chrom/contigs with data"]=function(){show_modal("Chrom/contigs with data","<p>"+b.valid_chroms.join("<br/>")+"</p>",{Close:function(){hide_modal()}})}}var c=view;var d=function(){$("#no-tracks").show()};if(this.parent_track){c=this.parent_track;d=function(){}}a.Remove=function(){c.remove_track(b);if(c.num_tracks===0){d()}};make_popupmenu(b.name_div,a)},draw:function(a,d){var s=this.view.low,g=this.view.high,j=g-s,l=this.view.container.width(),f=l/j,m=this.view.resolution,e=$("<div style='position: relative;'></div>");if(!d){this.content_div.children().remove()}this.content_div.append(e);this.max_height=0;var o=Math.floor(s/m/DENSITY);var c={};while((o*DENSITY*m)<g){var r=l+"_"+f+"_"+o;var h=this.tile_cache.get(r);var p=o*DENSITY*this.view.resolution;var b=p+DENSITY*this.view.resolution;if(!a&&h){this.show_tile(h,e,p,f)}else{this.delayed_draw(a,r,p,b,o,m,e,f,c)}o+=1}var k=this;var q=setInterval(function(){if(obj_length(c)===0){clearInterval(q);if(d){var v=k.content_div.children();var u=false;for(var w=v.length-1,t=0;w>=t;w--){var z=$(v[w]);if(u){z.remove()}else{if(z.children().length!==0){u=true}}}}for(var y=0;y<k.filters.length;y++){k.filters[y].update_ui_elt()}var x=false;if(k.example_feature){for(var y=0;y<k.filters.length;y++){if(k.filters[y].applies_to(k.example_feature)){x=true;break}}}if(k.filters_available!==x){k.filters_available=x;if(!k.filters_available){k.filters_div.hide()}k.make_name_popup_menu()}}},50);for(var n=0;n<this.child_tracks.length;n++){this.child_tracks[n].draw(a,d)}},delayed_draw:function(b,j,g,l,c,e,k,m,f){var d=this;var h=function(u,n,p,o,s,t,q){returned_tile=d.draw_tile(n,p,o,s,t,q);var r=$("<div class='track-tile'>").prepend(returned_tile);tile_element=r;d.tile_cache.set(j,tile_element);d.show_tile(tile_element,s,g,t);delete f[u]};var a=setTimeout(function(){if(g<=d.view.high&&l>=d.view.low){var n=(b?undefined:d.tile_cache.get(j));if(n){d.show_tile(n,k,g,m);delete f[a]}else{$.when(d.data_cache.get_data(view.chrom,g,l,d.mode,e,d.data_url_extra_params)).then(function(o){if(view.reference_track&&m>CHAR_WIDTH_PX){$.when(view.reference_track.data_cache.get_data(view.chrom,g,l,d.mode,e,view.reference_track.data_url_extra_params)).then(function(p){h(a,o,e,c,k,m,p)})}else{h(a,o,e,c,k,m)}})}}},50);f[a]=true},show_tile:function(a,f,d,g){var b=this;var c=this.view.high-this.view.low,e=(d-this.view.low)*g;if(this.left_offset){e-=this.left_offset}a.css({position:"absolute",top:0,left:e,height:""});f.append(a);b.max_height=Math.max(b.max_height,a.height());b.content_div.css("height",b.max_height+"px");f.children().css("height",b.max_height+"px")},set_overview:function(){var a=this.view;if(this.initial_canvas&&this.is_overview){a.overview_close.show();a.overview_viewport.append(this.initial_canvas);a.overview_highlight.show().height(this.initial_canvas.height());a.overview_viewport.height(this.initial_canvas.height()+a.overview_box.height())}$(window).trigger("resize")},run_tool:function(){var b={dataset_id:this.original_dataset_id,chrom:this.view.chrom,low:this.view.low,high:this.view.high,tool_id:this.tool.name};$.extend(b,this.tool.get_param_values_dict());var d=this,c=b.tool_id+d.tool_region_and_parameters_str(b.chrom,b.low,b.high),e;if(d.track_type==="FeatureTrack"){e=new ToolDataFeatureTrack(c,view,d.hda_ldda,undefined,{},{},d)}this.add_track(e);e.content_div.text("Starting job.");view.has_changes=true;var a=function(){$.getJSON(run_tool_url,b,function(f){if(f==="no converter"){e.container_div.addClass("error");e.content_div.text(DATA_NOCONVERTER)}else{if(f.error){e.container_div.addClass("error");e.content_div.text(DATA_CANNOT_RUN_TOOL+f.message)}else{if(f==="pending"){e.container_div.addClass("pending");e.content_div.text("Converting input data so that it can be easily reused.");setTimeout(a,2000)}else{e.dataset_id=f.dataset_id;e.content_div.text("Running job.");e.init()}}}})};a()},tool_region_and_parameters_str:function(c,a,d){var b=this,e=(c!==undefined&&a!==undefined&&d!==undefined?c+":"+a+"-"+d:"all");return" - region=["+e+"], parameters=["+b.tool.get_param_values().join(", ")+"]"},add_track:function(a){a.track_id=this.track_id+"_"+this.child_tracks.length;a.container_div.attr("id","track_"+a.track_id);this.child_tracks_container.append(a.container_div);sortable(a.container_div,".child-track-icon");if(!$(this.child_tracks_container).is(":visible")){this.child_tracks_container.show()}this.child_tracks.push(a)},remove_track:function(a){a.container_div.fadeOut("slow",function(){$(this).remove()})}});var LabelTrack=function(a,b){this.track_type="LabelTrack";this.hidden=true;Track.call(this,null,a,b);this.container_div.addClass("label-track")};$.extend(LabelTrack.prototype,Track.prototype,{draw:function(){var c=this.view,d=c.high-c.low,g=Math.floor(Math.pow(10,Math.floor(Math.log(d)/Math.log(10)))),a=Math.floor(c.low/g)*g,e=this.view.container.width(),b=$("<div style='position: relative; height: 1.3em;'></div>");while(a<c.high){var f=(a-c.low)/d*e;b.append($("<div class='label'>"+commatize(a)+"</div>").css({position:"absolute",left:f-1}));a+=g}this.content_div.children(":first").remove();this.content_div.append(b)}});var ReferenceTrack=function(a){this.track_type="ReferenceTrack";this.hidden=true;Track.call(this,null,a,a.top_labeltrack);TiledTrack.call(this);a.reference_track=this;this.left_offset=200;this.height_px=12;this.font=DEFAULT_FONT;this.container_div.addClass("reference-track");this.content_div.css("background","none");this.content_div.css("min-height","0px");this.content_div.css("border","none");this.data_url=reference_url;this.data_url_extra_params={dbkey:a.dbkey};this.data_cache=new DataManager(CACHED_DATA,this,false);this.tile_cache=new Cache(CACHED_TILES_LINE)};$.extend(ReferenceTrack.prototype,TiledTrack.prototype,{draw_tile:function(m,g,b,j,n){var f=this,d=DENSITY*g;if(n>CHAR_WIDTH_PX){if(m===null){f.content_div.css("height","0px");return}var e=this.view.canvas_manager.new_canvas();var l=e.getContext("2d");e.width=Math.ceil(d*n+f.left_offset);e.height=f.height_px;l.font=DEFAULT_FONT;l.textAlign="center";for(var h=0,k=m.length;h<k;h++){var a=Math.round(h*n);l.fillText(m[h],a+f.left_offset,10)}return e}this.content_div.css("height","0px")}});var LineTrack=function(e,c,f,a,d){var b=this;this.track_type="LineTrack";this.display_modes=["Histogram","Line","Filled","Intensity"];this.mode="Histogram";Track.call(this,e,c,c.viewport_container);TiledTrack.call(this);this.min_height_px=16;this.max_height_px=400;this.height_px=80;this.hda_ldda=f;this.dataset_id=a;this.original_dataset_id=a;this.data_cache=new DataManager(CACHED_DATA,this);this.tile_cache=new Cache(CACHED_TILES_LINE);this.track_config=new TrackConfig({track:this,params:[{key:"color",label:"Color",type:"color",default_value:"black"},{key:"min_value",label:"Min Value",type:"float",default_value:undefined},{key:"max_value",label:"Max Value",type:"float",default_value:undefined},{key:"mode",type:"string",default_value:this.mode,hidden:true},{key:"height",type:"int",default_value:this.height_px,hidden:true}],saved_values:d,onchange:function(){b.vertical_range=b.prefs.max_value-b.prefs.min_value;$("#linetrack_"+b.track_id+"_minval").text(b.prefs.min_value);$("#linetrack_"+b.track_id+"_maxval").text(b.prefs.max_value);b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;this.height_px=this.track_config.values.height;this.vertical_range=this.track_config.values.max_value-this.track_config.values.min_value;this.add_resize_handle()};$.extend(LineTrack.prototype,TiledTrack.prototype,{add_resize_handle:function(){var a=this;var d=false;var c=false;var b=$("<div class='track-resize'>");$(a.container_div).hover(function(){d=true;b.show()},function(){d=false;if(!c){b.hide()}});b.hide().bind("dragstart",function(f,g){c=true;g.original_height=$(a.content_div).height()}).bind("drag",function(g,h){var f=Math.min(Math.max(h.original_height+h.deltaY,a.min_height_px),a.max_height_px);$(a.content_div).css("height",f);a.height_px=f;a.draw(true)}).bind("dragend",function(f,g){a.tile_cache.clear();c=false;if(!d){b.hide()}a.track_config.values.height=a.height_px}).appendTo(a.container_div)},predraw_init:function(){var a=this,b=a.view.tracks.indexOf(a);a.vertical_range=undefined;return $.getJSON(a.data_url,{stats:true,chrom:a.view.chrom,low:null,high:null,hda_ldda:a.hda_ldda,dataset_id:a.dataset_id},function(c){a.container_div.addClass("line-track");var e=c.data;if(isNaN(parseFloat(a.prefs.min_value))||isNaN(parseFloat(a.prefs.max_value))){a.prefs.min_value=e.min;a.prefs.max_value=e.max;$("#track_"+b+"_minval").val(a.prefs.min_value);$("#track_"+b+"_maxval").val(a.prefs.max_value)}a.vertical_range=a.prefs.max_value-a.prefs.min_value;a.total_frequency=e.total_frequency;a.container_div.find(".yaxislabel").remove();var f=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_minval").text(round_1000(a.prefs.min_value));var d=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_maxval").text(round_1000(a.prefs.max_value));d.css({position:"absolute",top:"24px",left:"10px"});d.prependTo(a.container_div);f.css({position:"absolute",bottom:"2px",left:"10px"});f.prependTo(a.container_div)})},draw_tile:function(m,e,b,j,l){if(this.vertical_range===undefined){return}var f=b*DENSITY*e,d=DENSITY*e,a=Math.ceil(d*l),h=this.height_px;var c=this.view.canvas_manager.new_canvas();c.width=a,c.height=h;var k=c.getContext("2d");var g=new LinePainter(m.data,f,f+d,this.prefs.min_value,this.prefs.max_value,this.prefs.color,this.mode);g.draw(k,a,h);return c}});var FeatureTrack=function(a,f,e,j,h,c,d,g){var b=this;this.track_type="FeatureTrack";this.display_modes=["Auto","Dense","Squish","Pack"];this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{key:"show_counts",label:"Show summary counts",type:"bool",default_value:true},{key:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:h,onchange:function(){b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;Track.call(this,a,f,f.viewport_container);TiledTrack.call(this,c,d,g);this.height_px=0;this.container_div.addClass("feature-track");this.hda_ldda=e;this.dataset_id=j;this.original_dataset_id=j;this.zo_slots={};this.show_labels_scale=0.001;this.showing_details=false;this.summary_draw_height=30;this.default_font=DEFAULT_FONT;this.inc_slots={};this.start_end_dct={};this.tile_cache=new Cache(CACHED_TILES_FEATURE);this.data_cache=new DataManager(20,this);this.left_offset=200;this.painter=LinkedFeaturePainter};$.extend(FeatureTrack.prototype,TiledTrack.prototype,{incremental_slots:function(d,b,c){var a=this.inc_slots[d];if(!a||(a.mode!==c)){a=new FeatureSlotter(d,c==="Pack",function(e){return CONTEXT.measureText(e)});a.mode=c;this.inc_slots[d]=a}return a.slot_features(b)},get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="no_detail"){a=NO_DETAIL_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT}}}return a},draw_tile:function(o,w,A,k,m,d){var t=this,C=A*DENSITY*w,b=(A+1)*DENSITY*w,q=b-C,u=Math.ceil(q*m),s=this.mode,G=25,e=this.left_offset,p,g;if(s==="Auto"){if(o.dataset_type==="summary_tree"){s=o.dataset_type}else{if(o.extra_info==="no_detail"){s="no_detail"}else{var F=o.data;if((F.length&&F.length<4)||(this.view.high-this.view.low>MIN_SQUISH_VIEW_WIDTH)){s="Squish"}else{s="Pack"}}}}if(s==="summary_tree"){g=this.summary_draw_height;k.parent().css("height",Math.max(this.height_px,g)+"px");this.container_div.find(".yaxislabel").remove();var a=$("<div />").addClass("yaxislabel");a.text(o.max);a.css({position:"absolute",top:"22px",left:"10px"});a.prependTo(this.container_div);var c=this.view.canvas_manager.new_canvas();c.width=u+e;c.height=g+LABEL_SPACING+CHAR_HEIGHT_PX;var D=new SummaryTreePainter(o.data,o.delta,o.max,C,b,this.prefs.show_counts);var v=c.getContext("2d");v.translate(e,0);D.draw(v,u,g);return c}var p,j=1;if(s==="no_detail"||s==="Squish"||s==="Pack"){j=this.incremental_slots(m,o.data,s);p=this.inc_slots[m].slots}var l=[];if(o.data){for(var x=0,z=o.data.length;x<z;x++){var h=o.data[x];var y=false;var n;for(var B=0,E=this.filters.length;B<E;B++){n=this.filters[B];n.update_attrs(h);if(!n.keep(h)){y=true;break}}if(!y){l.push(h)}}}var D=new (this.painter)(l,C,b,this.prefs,s,d);var g=D.get_required_height(j)+ERROR_PADDING;var c=this.view.canvas_manager.new_canvas();c.width=u+e;c.height=g;k.parent().css("height",Math.max(this.height_px,g)+"px");var v=c.getContext("2d");v.fillStyle=this.prefs.block_color;v.font=this.default_font;v.textAlign="right";this.container_div.find(".yaxislabel").remove();if(o.message){$(c).css({"border-top":"1px solid red"});v.fillStyle="red";v.textAlign="left";var r=v.textBaseline;v.textBaseline="top";v.fillText(o.message,e,0);v.textBaseline=r;if(!o.data){return c}}this.example_feature=(o.data.length?o.data[0]:undefined);v.translate(e,ERROR_PADDING);D.draw(v,u,g,p);return c}});var VcfTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_type="VcfTrack";this.painter=VariantPainter};$.extend(VcfTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype);var ReadTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{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:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:c,onchange:function(){this.track.tile_cache.clear();this.track.draw()}});this.prefs=this.track_config.values;this.track_type="ReadTrack";this.painter=ReadPainter;this.make_name_popup_menu()};$.extend(ReadTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype);var ToolDataFeatureTrack=function(e,c,g,a,d,f,b){FeatureTrack.call(this,e,c,g,a,d,f,{},b);this.track_type="ToolDataFeatureTrack";this.data_url=raw_data_url;this.data_query_wait=1000;this.dataset_check_url=dataset_state_url};$.extend(ToolDataFeatureTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{predraw_init:function(){var b=this;var a=function(){if(b.data_cache.size()===0){setTimeout(a,300)}else{b.data_url=default_data_url;b.data_query_wait=DEFAULT_DATA_QUERY_WAIT;b.dataset_state_url=converted_datasets_state_url;$.getJSON(b.dataset_state_url,{dataset_id:b.dataset_id,hda_ldda:b.hda_ldda},function(c){})}};a()}});var extend=function(){var c=arguments[0];for(var b=1;b<arguments.length;b++){var a=arguments[b];for(key in a){c[key]=a[key]}}};var CanvasManager=function(a){this.document=a};CanvasManager.prototype.new_canvas=function(){var a=this.document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(a)}return a};var FeatureSlotter=function(c,b,a){this.slots={};this.start_end_dct={};this.w_scale=c;this.include_label=b;this.measureText=a};FeatureSlotter.prototype.slot_features=function(g){var k=this.w_scale,n=this.slots,c=this.start_end_dct,t=[],u=[],h=0;for(var r=0,s=g.length;r<s;r++){var e=g[r],j=e[0];if(n[j]!==undefined){h=Math.max(h,n[j]);u.push(n[j])}else{t.push(r)}}var l=function(A,B){for(var z=0;z<=MAX_FEATURE_DEPTH;z++){var x=false,C=c[z];if(C!==undefined){for(var w=0,y=C.length;w<y;w++){var v=C[w];if(B>v[0]&&A<v[1]){x=true;break}}}if(!x){return z}}return -1};for(var r=0,s=t.length;r<s;r++){var e=g[t[r]],j=e[0],p=e[1],a=e[2],m=e[3],b=Math.floor(p*k),f=Math.ceil(a*k),q=this.measureText(m).width,d;if(m!==undefined&&this.include_label){q+=(LABEL_SPACING+PACK_SPACING);if(b-q>=0){b-=q;d="left"}else{f+=q;d="right"}}var o=l(b,f);if(o>=0){if(c[o]===undefined){c[o]=[]}c[o].push([b,f]);n[j]=o;h=Math.max(h,o)}else{}}return h+1};var SummaryTreePainter=function(d,f,b,e,a,c){this.data=d;this.delta=f;this.max=b;this.view_start=e;this.view_end=a;this.show_counts=c};SummaryTreePainter.prototype.draw=function(o,a,n){var f=this.view_start,q=this.view_end-this.view_start,p=a/q;var l=this.data,k=this.delta,h=this.max,c=n+LABEL_SPACING+CHAR_HEIGHT_PX;delta_x_px=Math.ceil(k*p);o.save();for(var d=0,e=l.length;d<e;d++){var j=Math.floor((l[d][0]-f)*p);var g=l[d][1];if(!g){continue}var m=g/h*n;o.fillStyle="black";o.fillRect(j,c-m,delta_x_px,m);var b=4;if(this.show_counts&&(o.measureText(g).width+b)<delta_x_px){o.fillStyle="#666";o.textAlign="center";o.fillText(g,j+(delta_x_px/2),10)}}o.restore()};var LinePainter=function(d,g,a,b,f,c,e){this.data=d;this.view_start=g;this.view_end=a;this.min_value=b;this.max_value=f;this.color=c;this.mode=e};LinePainter.prototype.draw=function(o,n,l){var g=false,h=this.min_value,e=this.max_value,k=e-h,a=l,b=this.view_start,m=this.view_end-this.view_start,c=n/m,j=this.mode,s=this.data;o.save();var t=Math.round(l+h/k*l);if(j!=="Intensity"){o.beginPath();o.moveTo(0,t);o.lineTo(n,t);o.fillStyle="#aaa";o.stroke()}o.beginPath();o.fillStyle=this.color;var r,f,d;if(s.length>1){d=Math.ceil((s[1][0]-s[0][0])*c)}else{d=10}for(var p=0,q=s.length;p<q;p++){r=Math.round((s[p][0]-b)*c);f=s[p][1];if(f===null){if(g&&j==="Filled"){o.lineTo(r,a)}g=false;continue}if(f<h){f=h}else{if(f>e){f=e}}if(j==="Histogram"){f=Math.round(f/k*a);o.fillRect(r,t,d,-f)}else{if(j==="Intensity"){f=255-Math.floor((f-h)/k*255);o.fillStyle="rgb("+f+","+f+","+f+")";o.fillRect(r,0,d,a)}else{f=Math.round(a-(f-h)/k*a);if(g){o.lineTo(r,f)}else{g=true;if(j==="Filled"){o.moveTo(r,a);o.lineTo(r,f)}else{o.moveTo(r,f)}}}}}if(j==="Filled"){if(g){o.lineTo(r,t);o.lineTo(0,t)}o.fill()}else{o.stroke()}o.restore()};var FeaturePainter=function(c,e,a,b,d){this.data=c;this.view_start=e;this.view_end=a;this.prefs=b;this.mode=d};extend(FeaturePainter.prototype,{get_required_height:function(b){var a=y_scale=this.get_row_height(),c=this.mode;if(c==="no_detail"||c==="Squish"||c==="Pack"){a=b*y_scale}return a+Math.round(y_scale/2)},draw:function(n,d,m,j){var g=this.data,k=this.view_start,o=this.view_end;n.save();n.fillStyle=this.prefs.block_color;n.textAlign="right";var r=this.view_end-this.view_start,q=d/r,c=this.get_row_height();for(var f=0,h=g.length;f<h;f++){var p=g[f],e=p[0],a=p[1],b=p[2],l=(j&&j[e]!==undefined?j[e]:null);if(is_overlap([a,b],[k,o])&&(this.mode=="Dense"||l!==null)){this.draw_element(n,this.mode,p,l,k,o,q,c,d)}}n.restore()}});var LinkedFeaturePainter=function(c,e,a,b,d){FeaturePainter.call(this,c,e,a,b,d)};extend(LinkedFeaturePainter.prototype,FeaturePainter.prototype,{get_row_height:function(){var b=this.mode,a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="no_detail"){a=NO_DETAIL_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT}}}return a},draw_element:function(p,g,x,j,r,H,L,M,a){var u=x[0],J=x[1],B=x[2]-1,s=x[3],C=Math.floor(Math.max(0,(J-r)*L)),q=Math.ceil(Math.min(a,Math.max(0,(B-r)*L))),A=(g==="Dense"?0:(0+j))*M,o,F,t=null,N=null,d=this.prefs.block_color,E=this.prefs.label_color;if(g==="Dense"){p.fillStyle=d;p.fillRect(C,A,q-C,DENSE_FEATURE_HEIGHT)}else{if(g==="no_detail"){p.fillStyle=d;p.fillRect(C,A+5,q-C,DENSE_FEATURE_HEIGHT)}else{var n=x[4],z=x[5],D=x[6],e=x[7];if(z&&D){t=Math.floor(Math.max(0,(z-r)*L));N=Math.ceil(Math.min(a,Math.max(0,(D-r)*L)))}var K,v;if(g==="Squish"){K=1;v=SQUISH_FEATURE_HEIGHT}else{K=5;v=PACK_FEATURE_HEIGHT}if(!e){if(x.strand){if(x.strand==="+"){p.fillStyle=RIGHT_STRAND_INV}else{if(x.strand==="-"){p.fillStyle=LEFT_STRAND_INV}}}else{p.fillStyle=d}p.fillRect(C,A,q-C,v)}else{var m,w;if(g==="Squish"){p.fillStyle=CONNECTOR_COLOR;m=A+Math.floor(SQUISH_FEATURE_HEIGHT/2)+1;w=1}else{if(n){var m=A;var w=v;if(n==="+"){p.fillStyle=RIGHT_STRAND}else{if(n==="-"){p.fillStyle=LEFT_STRAND}}}else{p.fillStyle=CONNECTOR_COLOR;m+=(SQUISH_FEATURE_HEIGHT/2)+1;w=1}}p.fillRect(C,m,q-C,w);for(var I=0,c=e.length;I<c;I++){var h=e[I],b=Math.floor(Math.max(0,(h[0]-r)*L)),y=Math.ceil(Math.min(a,Math.max((h[1]-1-r)*L)));if(b>y){continue}p.fillStyle=d;p.fillRect(b,A+(v-K)/2+1,y-b,K);if(t!==undefined&&!(b>N||y<t)){var G=Math.max(b,t),l=Math.min(y,N);p.fillRect(G,A+1,l-G,v)}}}if(g==="Pack"&&J>r){p.fillStyle=E;var f=1;if(f===0&&C-p.measureText(s).width<0){p.textAlign="left";p.fillText(s,q+LABEL_SPACING,A+8)}else{p.textAlign="right";p.fillText(s,C-LABEL_SPACING,A+8)}p.fillStyle=d}}}}});var VariantPainter=function(c,e,a,b,d){FeaturePainter.call(this,c,e,a,b,d)};extend(VariantPainter.prototype,FeaturePainter.prototype,{draw_element:function(u,p,j,e,x,c,m,v,s){var j=data[i],l=j[0],t=j[1],d=j[2]-1,o=j[3],g=Math.floor(Math.max(0,(t-x)*m)),k=Math.ceil(Math.min(s,Math.max(0,(d-x)*m))),f=(p==="Dense"?0:(0+e))*v,a,y,b=null,n=null;if(no_label){u.fillStyle=block_color;u.fillRect(g+left_offset,f+5,k-g,1)}else{var w=j[4],r=j[5],h=j[6];a=9;y=1;u.fillRect(g+left_offset,f,k-g,a);if(p!=="Dense"&&o!==undefined&&t>x){u.fillStyle=label_color;if(tile_index===0&&g-u.measureText(o).width<0){u.textAlign="left";u.fillText(o,k+2+left_offset,f+8)}else{u.textAlign="right";u.fillText(o,g-2+left_offset,f+8)}u.fillStyle=block_color}var q=w+" / "+r;if(t>x&&u.measureText(q).width<(k-g)){u.fillStyle="white";u.textAlign="center";u.fillText(q,left_offset+g+(k-g)/2,f+8);u.fillStyle=block_color}}}});var ReadPainter=function(d,f,a,c,e,b){FeaturePainter.call(this,d,f,a,c,e);this.ref_seq=b};extend(ReadPainter.prototype,FeaturePainter.prototype,{get_row_height:function(){var a,b=this.mode;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT;if(this.prefs.show_insertions){a*=2}}}return a},draw_read:function(z,u,p,E,d,y,m,j,h){z.textAlign="center";var x=this,b=[E,d],s=0,A=0,w=0;ref_seq=this.ref_seq;var J=[];if((u==="Pack"||this.mode==="Auto")&&j!==undefined&&p>CHAR_WIDTH_PX){w=Math.round(p/2)}if(!m){m=[[0,j.length]]}for(var q=0,C=m.length;q<C;q++){var n=m[q],e="MIDNSHP=X"[n[0]],r=n[1];if(e==="H"||e==="S"){s-=r}var k=y+s,I=Math.floor(Math.max(0,(k-E)*p)),l=Math.floor(Math.max(0,(k+r-E)*p));switch(e){case"H":break;case"S":case"M":case"=":var t=compute_overlap([k,k+r],b);if(t!==NO_OVERLAP){var v=j.slice(A,A+r);if(w>0){z.fillStyle=this.prefs.block_color;z.fillRect(I-w,h+1,l-I,9);z.fillStyle=CONNECTOR_COLOR;for(var G=0,a=v.length;G<a;G++){if(this.prefs.show_differences&&ref_seq){var o=ref_seq[k-E+G];if(!o||o.toLowerCase()===v[G].toLowerCase()){continue}}if(k+G>=E&&k+G<=d){var H=Math.floor(Math.max(0,(k+G-E)*p));z.fillText(v[G],H,h+9)}}}else{z.fillStyle=this.prefs.block_color;z.fillRect(I,h+(this.mode!=="Dense"?4:5),l-I,(u!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}A+=r;s+=r;break;case"N":z.fillStyle=CONNECTOR_COLOR;z.fillRect(I-w,h+5,l-I,1);s+=r;break;case"D":z.fillStyle="red";z.fillRect(I-w,h+4,l-I,3);s+=r;break;case"P":break;case"I":var t=compute_overlap([k,k+r],b),D=I-w;if(t!==NO_OVERLAP){var v=j.slice(A,A+r);if(this.prefs.show_insertions){var g=I-(l-I)/2;if((u==="Pack"||this.mode==="Auto")&&j!==undefined&&p>CHAR_WIDTH_PX){z.fillStyle="yellow";z.fillRect(g-w,h-9,l-I,9);J[J.length]={type:"triangle",data:[D,h+4,5]};z.fillStyle=CONNECTOR_COLOR;switch(t){case (OVERLAP_START):v=v.slice(E-k);break;case (OVERLAP_END):v=v.slice(0,k-d);break;case (CONTAINED_BY):break;case (CONTAINS):v=v.slice(E-k,k-d);break}for(var G=0,a=v.length;G<a;G++){var H=Math.floor(Math.max(0,(k+G-E)*p));z.fillText(v[G],H-(l-I)/2,h)}}else{z.fillStyle="yellow";z.fillRect(g,h+(this.mode!=="Dense"?2:5),l-I,(u!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}else{if((u==="Pack"||this.mode==="Auto")&&j!==undefined&&p>CHAR_WIDTH_PX){J[J.length]={type:"text",data:[v.length,D,h+9]}}else{}}}A+=r;break;case"X":A+=r;break}}z.fillStyle="yellow";var F,f,K;for(var B=0;B<J.length;B++){F=J[B];f=F.type;K=F.data;if(f==="text"){z.font="bold "+DEFAULT_FONT;z.fillText(K[0],K[1],K[2]);z.font=DEFAULT_FONT}else{if(f=="triangle"){z.drawDownwardEquilateralTriangle(K[0],K[1],K[2])}}}},draw_element:function(u,p,g,d,x,b,l,v,s){var k=g[0],t=g[1],c=g[2],m=g[3],f=Math.floor(Math.max(0,(t-x)*l)),h=Math.ceil(Math.min(s,Math.max(0,(c-x)*l))),e=(p==="Dense"?1:(1+d))*v,y=this.prefs.block_color,j=this.prefs.label_color,r=0;if((p==="Pack"||this.mode==="Auto")&&l>CHAR_WIDTH_PX){var r=Math.round(l/2)}u.fillStyle=y;if(g[5] instanceof Array){var q=Math.floor(Math.max(0,(g[4][0]-x)*l)),o=Math.ceil(Math.min(s,Math.max(0,(g[4][1]-x)*l))),n=Math.floor(Math.max(0,(g[5][0]-x)*l)),a=Math.ceil(Math.min(s,Math.max(0,(g[5][1]-x)*l)));if(g[4][1]>=x&&g[4][0]<=b&&g[4][2]){this.draw_read(u,p,l,x,b,g[4][0],g[4][2],g[4][3],e)}if(g[5][1]>=x&&g[5][0]<=b&&g[5][2]){this.draw_read(u,p,l,x,b,g[5][0],g[5][2],g[5][3],e)}if(n>o){u.fillStyle=CONNECTOR_COLOR;u.dashedLine(o-r,e+5,n-r,e+5)}}else{u.fillStyle=y;this.draw_read(u,p,l,x,b,t,g[4],g[5],e)}if(p==="Pack"&&t>x){u.fillStyle=this.prefs.label_color;var w=1;if(w===0&&f-u.measureText(m).width<0){u.textAlign="left";u.fillText(m,h+LABEL_SPACING-r,e+8)}else{u.textAlign="right";u.fillText(m,f-LABEL_SPACING-r,e+8)}u.fillStyle=y}}}); \ No newline at end of file Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: kanwei: Remove array_tree datatype; add tabix
by Bitbucket 31 Mar '11

31 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/dd867c332729/ changeset: r5294:dd867c332729 user: kanwei date: 2011-04-01 00:58:02 summary: Remove array_tree datatype; add tabix affected #: 1 file (5 bytes) --- a/datatypes_conf.xml.sample Thu Mar 31 17:22:10 2011 -0400 +++ b/datatypes_conf.xml.sample Thu Mar 31 18:58:02 2011 -0400 @@ -128,9 +128,9 @@ <converter file="wiggle_to_simple_converter.xml" target_datatype="interval"/></datatype> - <datatype extension="array_tree" type="galaxy.datatypes.data:Data" /><datatype extension="summary_tree" type="galaxy.datatypes.data:Data" /><datatype extension="interval_index" type="galaxy.datatypes.data:Data" /> + <datatype extension="tabix" type="galaxy.datatypes.data:Data" /><datatype extension="acedb" type="galaxy.datatypes.data:Text"/><datatype extension="asn1" type="galaxy.datatypes.data:Text"/> Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: jgoecks: Trackster visual analytics: enable datasets that cannot be indexed--and hence cannot be subseted--to be used as tool inputs.
by Bitbucket 31 Mar '11

31 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/dc8701726b13/ changeset: r5293:dc8701726b13 user: jgoecks date: 2011-03-31 23:22:10 summary: Trackster visual analytics: enable datasets that cannot be indexed--and hence cannot be subseted--to be used as tool inputs. affected #: 1 file (621 bytes) --- a/lib/galaxy/web/controllers/tracks.py Thu Mar 31 15:07:02 2011 -0400 +++ b/lib/galaxy/web/controllers/tracks.py Thu Mar 31 17:22:10 2011 -0400 @@ -670,6 +670,8 @@ if not tool: return messages.NO_TOOL tool_params = dict( [ ( p.name, p.value ) for p in original_job.parameters ] ) + # TODO: need to handle updates to conditional parameters; conditional + # params are stored in dicts (and dicts within dicts). tool_params.update( dict( [ ( key, value ) for key, value in kwargs.items() if key in tool.inputs ] ) ) tool_params = tool.params_from_strings( tool_params, self.app ) @@ -685,13 +687,16 @@ messages_list = [] for jida in original_job.input_datasets: input_dataset = jida.dataset - track_type, data_sources = input_dataset.datatype.get_track_type() - # Convert to datasource that provides 'data' because we need to - # extract the original data. - data_source = data_sources[ 'data' ] - msg = self._convert_dataset( trans, input_dataset, data_source ) - if msg is not None: - messages_list.append( msg ) + # TODO: put together more robust way to determine if a dataset can be indexed. + if hasattr( input_dataset, 'get_track_type' ): + # Can index dataset. + track_type, data_sources = input_dataset.datatype.get_track_type() + # Convert to datasource that provides 'data' because we need to + # extract the original data. + data_source = data_sources[ 'data' ] + msg = self._convert_dataset( trans, input_dataset, data_source ) + if msg is not None: + messages_list.append( msg ) # Return any messages generated during conversions. return_message = _get_highest_priority_msg( messages_list ) @@ -707,38 +712,42 @@ messages_list = [] for jida in original_job.input_datasets: input_dataset = jida.dataset - track_type, data_sources = input_dataset.datatype.get_track_type() - data_source = data_sources[ 'data' ] - converted_dataset = input_dataset.get_converted_dataset( trans, data_source ) + if hasattr( input_dataset, 'get_track_type' ): + # + # Dataset can be indexed and hence a subset can be extracted. + # + track_type, data_sources = input_dataset.datatype.get_track_type() + data_source = data_sources[ 'data' ] + converted_dataset = input_dataset.get_converted_dataset( trans, data_source ) - # - # Create new HDA for input dataset's subset. - # - subset_dataset = trans.app.model.HistoryDatasetAssociation( extension=input_dataset.ext, \ - dbkey=input_dataset.dbkey, \ - create_dataset=True, \ - sa_session=trans.sa_session, - name="Subset [%s:%i-%i] of data %i" % \ - ( chrom, low, high, input_dataset.hid ), - visible=False ) - job_history.add_dataset( subset_dataset ) - trans.sa_session.add( subset_dataset ) - trans.app.security_agent.set_all_dataset_permissions( subset_dataset.dataset, hda_permissions ) + # + # Create new HDA for input dataset's subset. + # + new_dataset = trans.app.model.HistoryDatasetAssociation( extension=input_dataset.ext, \ + dbkey=input_dataset.dbkey, \ + create_dataset=True, \ + sa_session=trans.sa_session, + name="Subset [%s:%i-%i] of data %i" % \ + ( chrom, low, high, input_dataset.hid ), + visible=False ) + job_history.add_dataset( new_dataset ) + trans.sa_session.add( new_dataset ) + trans.app.security_agent.set_all_dataset_permissions( new_dataset.dataset, hda_permissions ) - # Write data subset to new HDA. - data_provider_class = get_data_provider( original_dataset=input_dataset ) - data_provider = data_provider_class( original_dataset=input_dataset, - converted_dataset=converted_dataset ) - data_provider.write_data_to_file( chrom, low, high, subset_dataset.file_name ) + # Write subset of data to new dataset + data_provider_class = get_data_provider( original_dataset=input_dataset ) + data_provider = data_provider_class( original_dataset=input_dataset, + converted_dataset=converted_dataset ) + data_provider.write_data_to_file( chrom, low, high, new_dataset.file_name ) - # TODO: size not working. - subset_dataset.set_size() - subset_dataset.info = "Data subset for trackster" - subset_dataset.set_dataset_state( trans.app.model.Dataset.states.OK ) - trans.sa_session.flush() + # TODO: size not working. + new_dataset.set_size() + new_dataset.info = "Data subset for trackster" + new_dataset.set_dataset_state( trans.app.model.Dataset.states.OK ) + trans.sa_session.flush() - # Add dataset to tool's parameters. - tool_params[ jida.name ] = subset_dataset + # Add dataset to tool's parameters. + tool_params[ jida.name ] = new_dataset # # Start tool and handle outputs. Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: jgoecks: Trackster visual analytics: add support for static select parameters.
by Bitbucket 31 Mar '11

31 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/846542872d17/ changeset: r5292:846542872d17 user: jgoecks date: 2011-03-31 21:07:02 summary: Trackster visual analytics: add support for static select parameters. affected #: 3 files (2.6 KB) --- a/lib/galaxy/visualization/tracks/visual_analytics.py Thu Mar 31 14:09:47 2011 -0400 +++ b/lib/galaxy/visualization/tracks/visual_analytics.py Thu Mar 31 15:07:02 2011 -0400 @@ -1,5 +1,5 @@ -from galaxy.tools.parameters.basic import IntegerToolParameter, FloatToolParameter - +from galaxy.tools.parameters.basic import IntegerToolParameter, FloatToolParameter, SelectToolParameter +from galaxy.tools.parameters.dynamic_options import DynamicOptions def get_dataset_job( hda ): # Get dataset's job. @@ -29,13 +29,16 @@ tool_param_values = tool.params_from_strings( tool_param_values, trans.app, ignore_errors=True ) for name, input in tool.inputs.items(): if type( input ) == IntegerToolParameter: - tool_params.append( { 'name' : name, 'label': input.label, 'type': 'int', \ - 'value': tool_param_values.get( name, input.value ), \ - 'min' : input.min, 'max' : input.max } ) + tool_params.append( { 'name' : name, 'label' : input.label, \ + 'value' : tool_param_values.get( name, input.value ), \ + 'type' : 'int', 'min' : input.min, 'max' : input.max } ) elif type( input ) == FloatToolParameter: - tool_params.append( { 'name' : name, 'label': input.label, 'type': 'float', \ - 'value': tool_param_values.get( name, input.value ), \ - 'min' : input.min, 'max' : input.max } ) + tool_params.append( { 'name' : name, 'label' : input.label, \ + 'value' : tool_param_values.get( name, input.value ), \ + 'type' : 'float', 'min' : input.min, 'max' : input.max } ) + elif type( input ) == SelectToolParameter and type( input.options ) != DynamicOptions: + tool_params.append( { 'name' : name, 'label' : input.label, 'type' : 'select', \ + 'options' : [ option[:2] for option in input.get_options( trans, None ) ] } ) # If tool has parameters that can be interactively modified, return tool. # Return empty set otherwise. --- a/static/scripts/packed/trackster.js Thu Mar 31 14:09:47 2011 -0400 +++ b/static/scripts/packed/trackster.js Thu Mar 31 15:07:02 2011 -0400 @@ -1,1 +1,1 @@ -CanvasRenderingContext2D.prototype.dashedLine=function(c,j,b,h,f){if(f===undefined){f=4}var e=b-c;var d=h-j;var g=Math.floor(Math.sqrt(e*e+d*d)/f);var l=e/g;var k=d/g;var a;for(a=0;a<g;a++,c+=l,j+=k){if(a%2!==0){continue}this.fillRect(c,j,f,1)}};CanvasRenderingContext2D.prototype.drawDownwardEquilateralTriangle=function(b,a,e){var d=b-e/2,c=b+e/2,f=a-Math.sqrt(e*3/2);this.beginPath();this.moveTo(d,f);this.lineTo(c,f);this.lineTo(b,a);this.lineTo(d,f);this.strokeStyle=this.fillStyle;this.fill();this.stroke();this.closePath()};function sortable(a,b){a.bind("drag",{handle:b,relative:true},function(h,j){var g=$(this).parent();var f=g.children();var c;for(c=0;c<f.length;c++){if(j.offsetY<$(f.get(c)).position().top){break}}if(c===f.length){if(this!==f.get(c-1)){g.append(this)}}else{if(this!==f.get(c)){$(this).insertBefore(f.get(c))}}})}var NO_OVERLAP=1001,CONTAINS=1002,OVERLAP_START=1003,OVERLAP_END=1004,CONTAINED_BY=1005;function compute_overlap(e,b){var g=e[0],f=e[1],d=b[0],c=b[1],a;if(g<d){if(f<d){a=NO_OVERLAP}else{if(f<=c){a=OVERLAP_START}else{a=CONTAINS}}}else{if(g>c){a=NO_OVERLAP}else{if(f<=c){a=CONTAINED_BY}else{a=OVERLAP_END}}}return a}function is_overlap(b,a){return(compute_overlap(b,a)!==NO_OVERLAP)}function get_slider_step(c,a){var b=a-c;return(b<=1?0.01:(b<=1000?1:5))}var DENSE_TRACK_HEIGHT=10,NO_DETAIL_TRACK_HEIGHT=3,SQUISH_TRACK_HEIGHT=5,PACK_TRACK_HEIGHT=10,NO_DETAIL_FEATURE_HEIGHT=1,DENSE_FEATURE_HEIGHT=1,SQUISH_FEATURE_HEIGHT=3,PACK_FEATURE_HEIGHT=9,ERROR_PADDING=10,LABEL_SPACING=2,PACK_SPACING=5,MIN_SQUISH_VIEW_WIDTH=12000,DEFAULT_FONT="9px Monaco, Lucida Console, monospace",DENSITY=200,FEATURE_LEVELS=10,MAX_FEATURE_DEPTH=100,DEFAULT_DATA_QUERY_WAIT=5000,MAX_CHROMS_SELECTABLE=100,CONNECTOR_COLOR="#ccc",DATA_ERROR="There was an error in indexing this dataset. ",DATA_NOCONVERTER="A converter for this dataset is not installed. Please check your datatypes_conf.xml file.",DATA_NONE="No data for this chrom/contig.",DATA_PENDING="Currently indexing... please wait",DATA_CANNOT_RUN_TOOL="Tool cannot be rerun: ",DATA_LOADING="Loading data...",DATA_OK="Ready for display",CACHED_TILES_FEATURE=10,CACHED_TILES_LINE=5,CACHED_DATA=5,DUMMY_CANVAS=document.createElement("canvas"),RIGHT_STRAND,LEFT_STRAND;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(DUMMY_CANVAS)}var CONTEXT=DUMMY_CANVAS.getContext("2d");CONTEXT.font=DEFAULT_FONT;var CHAR_WIDTH_PX=CONTEXT.measureText("A").width,CHAR_HEIGHT_PX=9;var right_img=new Image();right_img.src=image_path+"/visualization/strand_right.png";right_img.onload=function(){RIGHT_STRAND=CONTEXT.createPattern(right_img,"repeat")};var left_img=new Image();left_img.src=image_path+"/visualization/strand_left.png";left_img.onload=function(){LEFT_STRAND=CONTEXT.createPattern(left_img,"repeat")};var right_img_inv=new Image();right_img_inv.src=image_path+"/visualization/strand_right_inv.png";right_img_inv.onload=function(){RIGHT_STRAND_INV=CONTEXT.createPattern(right_img_inv,"repeat")};var left_img_inv=new Image();left_img_inv.src=image_path+"/visualization/strand_left_inv.png";left_img_inv.onload=function(){LEFT_STRAND_INV=CONTEXT.createPattern(left_img_inv,"repeat")};function round_1000(a){return Math.round(a*1000)/1000}var Cache=function(a){this.num_elements=a;this.clear()};$.extend(Cache.prototype,{get:function(b){var a=this.key_ary.indexOf(b);if(a!==-1){this.move_key_to_end(b,a)}return this.obj_cache[b]},set:function(b,c){if(!this.obj_cache[b]){if(this.key_ary.length>=this.num_elements){var a=this.key_ary.shift();delete this.obj_cache[a]}this.key_ary.push(b)}this.obj_cache[b]=c;return c},move_key_to_end:function(b,a){this.key_ary.splice(a,1);this.key_ary.push(b)},clear:function(){this.obj_cache={};this.key_ary=[]},size:function(){return this.key_ary.length}});var DataManager=function(b,a,c){Cache.call(this,b);this.track=a;this.subset=(c!==undefined?c:true)};$.extend(DataManager.prototype,Cache.prototype,{load_data:function(h,j,d,g,a,f){var c={chrom:h,low:j,high:d,mode:g,resolution:a,dataset_id:this.track.dataset_id,hda_ldda:this.track.hda_ldda};$.extend(c,f);var k=[];for(var e=0;e<this.track.filters.length;e++){k[k.length]=this.track.filters[e].name}c.filter_cols=JSON.stringify(k);var b=this;return $.getJSON(this.track.data_url,c,function(l){b.set_data(j,d,g,l)})},get_data:function(j,k,c,h,b,f){var l=this.get(this.gen_key(k,c,h));if(l){return l}if(this.subset){var m,g,a,e,h,l;for(var d=0;d<this.key_ary.length;d++){m=this.key_ary[d];g=this.split_key(m);a=g[0];e=g[1];if(k>=a&&c<=e){l=this.obj_cache[m];if(l.dataset_type!=="summary_tree"&&l.extra_info!=="no_detail"){this.move_key_to_end(m,d);return l}}}}return this.load_data(j,k,c,h,b,f)},set_data:function(b,c,d,a){return this.set(this.gen_key(b,c,d),a)},gen_key:function(a,c,d){var b=a+"_"+c+"_"+d;return b},split_key:function(a){return a.split("_")}});var View=function(a,d,c,b,e){this.container=a;this.chrom=null;this.vis_id=c;this.dbkey=b;this.title=d;this.tracks=[];this.label_tracks=[];this.max_low=0;this.max_high=0;this.num_tracks=0;this.track_id_counter=0;this.zoom_factor=3;this.min_separation=30;this.has_changes=false;this.init(e);this.reset()};$.extend(View.prototype,{init:function(d){var c=this.container,a=this;this.top_container=$("<div/>").addClass("top-container").appendTo(c);this.content_div=$("<div/>").addClass("content").css("position","relative").appendTo(c);this.bottom_container=$("<div/>").addClass("bottom-container").appendTo(c);this.top_labeltrack=$("<div/>").addClass("top-labeltrack").appendTo(this.top_container);this.viewport_container=$("<div/>").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div);this.intro_div=$("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide();this.nav_labeltrack=$("<div/>").addClass("nav-labeltrack").appendTo(this.bottom_container);this.nav_container=$("<div/>").addClass("nav-container").prependTo(this.top_container);this.nav=$("<div/>").addClass("nav").appendTo(this.nav_container);this.overview=$("<div/>").addClass("overview").appendTo(this.bottom_container);this.overview_viewport=$("<div/>").addClass("overview-viewport").appendTo(this.overview);this.overview_close=$("<a href='javascript:void(0);'>Close Overview</a>").addClass("overview-close").hide().appendTo(this.overview_viewport);this.overview_highlight=$("<div/>").addClass("overview-highlight").hide().appendTo(this.overview_viewport);this.overview_box_background=$("<div/>").addClass("overview-boxback").appendTo(this.overview_viewport);this.overview_box=$("<div/>").addClass("overview-box").appendTo(this.overview_viewport);this.default_overview_height=this.overview_box.height();this.nav_controls=$("<div/>").addClass("nav-controls").appendTo(this.nav);this.chrom_select=$("<select/>").attr({name:"chrom"}).css("width","15em").addClass("no-autocomplete").append("<option value=''>Loading</option>").appendTo(this.nav_controls);var b=function(f){if(f.type==="focusout"||(f.keyCode||f.which)===13||(f.keyCode||f.which)===27){if((f.keyCode||f.which)!==27){a.go_to($(this).val())}$(this).hide();$(this).val("");a.location_span.show();a.chrom_select.show()}};this.nav_input=$("<input/>").addClass("nav-input").hide().bind("keyup focusout",b).appendTo(this.nav_controls);this.location_span=$("<span/>").addClass("location").appendTo(this.nav_controls);this.location_span.bind("click",function(){a.location_span.hide();a.chrom_select.hide();a.nav_input.val(a.chrom+":"+a.low+"-"+a.high);a.nav_input.css("display","inline-block");a.nav_input.select();a.nav_input.focus()});if(this.vis_id!==undefined){this.hidden_input=$("<input/>").attr("type","hidden").val(this.vis_id).appendTo(this.nav_controls)}this.zo_link=$("<a id='zoom-out' />").click(function(){a.zoom_out();a.redraw()}).appendTo(this.nav_controls);this.zi_link=$("<a id='zoom-in' />").click(function(){a.zoom_in();a.redraw()}).appendTo(this.nav_controls);this.load_chroms({low:0},d);this.chrom_select.bind("change",function(){a.change_chrom(a.chrom_select.val())});this.intro_div.show();this.content_div.bind("click",function(f){$(this).find("input").trigger("blur")});this.content_div.bind("dblclick",function(f){a.zoom_in(f.pageX,this.viewport_container)});this.overview_box.bind("dragstart",function(f,g){this.current_x=g.offsetX}).bind("drag",function(f,h){var j=h.offsetX-this.current_x;this.current_x=h.offsetX;var g=Math.round(j/a.viewport_container.width()*(a.max_high-a.max_low));a.move_delta(-g)});this.overview_close.bind("click",function(){for(var f=0,e=a.tracks.length;f<e;f++){a.tracks[f].is_overview=false}$(this).siblings().filter("canvas").remove();$(this).parent().css("height",a.overview_box.height());a.overview_highlight.hide();$(this).hide()});this.viewport_container.bind("draginit",function(f,g){if(f.clientX>a.viewport_container.width()-16){return false}}).bind("dragstart",function(f,g){g.original_low=a.low;g.current_height=f.clientY;g.current_x=g.offsetX}).bind("drag",function(h,k){var f=$(this);var l=k.offsetX-k.current_x;var g=f.scrollTop()-(h.clientY-k.current_height);f.scrollTop(g);k.current_height=h.clientY;k.current_x=k.offsetX;var j=Math.round(l/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}).bind("mousewheel",function(h,k,g,f){if(g){var j=Math.round(-g/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}});this.top_labeltrack.bind("dragstart",function(f,g){return $("<div />").css({height:a.content_div.height()+a.top_labeltrack.height()+a.nav_labeltrack.height()+1,top:"0px",position:"absolute","background-color":"#ccf",opacity:0.5,"z-index":1000}).appendTo($(this))}).bind("drag",function(k,l){$(l.proxy).css({left:Math.min(k.pageX,l.startX),width:Math.abs(k.pageX-l.startX)});var g=Math.min(k.pageX,l.startX)-a.container.offset().left,f=Math.max(k.pageX,l.startX)-a.container.offset().left,j=(a.high-a.low),h=a.viewport_container.width();a.update_location(Math.round(g/h*j)+a.low,Math.round(f/h*j)+a.low)}).bind("dragend",function(l,m){var g=Math.min(l.pageX,m.startX),f=Math.max(l.pageX,m.startX),j=(a.high-a.low),h=a.viewport_container.width(),k=a.low;a.low=Math.round(g/h*j)+k;a.high=Math.round(f/h*j)+k;$(m.proxy).remove();a.redraw()});this.add_label_track(new LabelTrack(this,this.top_labeltrack));this.add_label_track(new LabelTrack(this,this.nav_labeltrack));$(window).bind("resize",function(){a.resize_window()});$(document).bind("redraw",function(){a.redraw()});this.reset();$(window).trigger("resize")},update_location:function(a,b){this.location_span.text(commatize(a)+" - "+commatize(b));this.nav_input.val(this.chrom+":"+commatize(a)+"-"+commatize(b))},load_chroms:function(b,c){b.num=MAX_CHROMS_SELECTABLE;$.extend(b,(this.vis_id!==undefined?{vis_id:this.vis_id}:{dbkey:this.dbkey}));var a=this;$.ajax({url:chrom_url,data:b,dataType:"json",success:function(e){if(e.chrom_info.length===0){alert("Invalid chromosome: "+b.chrom);return}if(e.reference){a.add_label_track(new ReferenceTrack(a))}a.chrom_data=e.chrom_info;var h='<option value="">Select Chrom/Contig</option>';for(var g=0,d=a.chrom_data.length;g<d;g++){var f=a.chrom_data[g].chrom;h+='<option value="'+f+'">'+f+"</option>"}if(e.prev_chroms){h+='<option value="previous">Previous '+MAX_CHROMS_SELECTABLE+"</option>"}if(e.next_chroms){h+='<option value="next">Next '+MAX_CHROMS_SELECTABLE+"</option>"}a.chrom_select.html(h);if(c){c()}a.chrom_start_index=e.start_index},error:function(){alert("Could not load chroms for this dbkey:",a.dbkey)}})},change_chrom:function(e,b,g){if(!e||e==="None"){return}var d=this;if(e==="previous"){d.load_chroms({low:this.chrom_start_index-MAX_CHROMS_SELECTABLE});return}if(e==="next"){d.load_chroms({low:this.chrom_start_index+MAX_CHROMS_SELECTABLE});return}var f=$.grep(d.chrom_data,function(j,k){return j.chrom===e})[0];if(f===undefined){d.load_chroms({chrom:e},function(){d.change_chrom(e,b,g)});return}else{if(e!==d.chrom){d.chrom=e;if(!d.chrom){d.intro_div.show()}else{d.intro_div.hide()}d.chrom_select.val(d.chrom);d.max_high=f.len-1;d.reset();d.redraw(true);for(var h=0,a=d.tracks.length;h<a;h++){var c=d.tracks[h];if(c.init){c.init()}}}if(b!==undefined&&g!==undefined){d.low=Math.max(b,0);d.high=Math.min(g,d.max_high)}d.reset_overview();d.redraw()}},go_to:function(f){var k=this,a,d,b=f.split(":"),h=b[0],j=b[1];if(j!==undefined){try{var g=j.split("-");a=parseInt(g[0].replace(/,/g,""),10);d=parseInt(g[1].replace(/,/g,""),10)}catch(c){return false}}k.change_chrom(h,a,d)},move_fraction:function(c){var a=this;var b=a.high-a.low;this.move_delta(c*b)},move_delta:function(c){var a=this;var b=a.high-a.low;if(a.low-c<a.max_low){a.low=a.max_low;a.high=a.max_low+b}else{if(a.high-c>a.max_high){a.high=a.max_high;a.low=a.max_high-b}else{a.high-=c;a.low-=c}}a.redraw()},add_track:function(a){a.view=this;a.track_id=this.track_id_counter;this.tracks.push(a);if(a.init){a.init()}a.container_div.attr("id","track_"+a.track_id);sortable(a.container_div,".draghandle");this.track_id_counter+=1;this.num_tracks+=1},add_label_track:function(a){a.view=this;this.label_tracks.push(a)},remove_track:function(a){this.has_changes=true;a.container_div.fadeOut("slow",function(){$(this).remove()});delete this.tracks[this.tracks.indexOf(a)];this.num_tracks-=1},reset:function(){this.low=this.max_low;this.high=this.max_high;this.viewport_container.find(".yaxislabel").remove()},redraw:function(h){var g=this.high-this.low,f=this.low,b=this.high;if(f<this.max_low){f=this.max_low}if(b>this.max_high){b=this.max_high}if(this.high!==0&&g<this.min_separation){b=f+this.min_separation}this.low=Math.floor(f);this.high=Math.ceil(b);this.resolution=Math.pow(10,Math.ceil(Math.log((this.high-this.low)/200)/Math.LN10));this.zoom_res=Math.pow(FEATURE_LEVELS,Math.max(0,Math.ceil(Math.log(this.resolution,FEATURE_LEVELS)/Math.log(FEATURE_LEVELS))));var a=(this.low/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var e=((this.high-this.low)/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var j=13;this.overview_box.css({left:a,width:Math.max(j,e)}).show();if(e<j){this.overview_box.css("left",a-(j-e)/2)}if(this.overview_highlight){this.overview_highlight.css({left:a,width:e})}this.update_location(this.low,this.high);if(!h){for(var c=0,d=this.tracks.length;c<d;c++){if(this.tracks[c]&&this.tracks[c].enabled){this.tracks[c].draw()}}for(c=0,d=this.label_tracks.length;c<d;c++){this.label_tracks[c].draw()}}},zoom_in:function(b,c){if(this.max_high===0||this.high-this.low<this.min_separation){return}var d=this.high-this.low,e=d/2+this.low,a=(d/this.zoom_factor)/2;if(b){e=b/this.viewport_container.width()*(this.high-this.low)+this.low}this.low=Math.round(e-a);this.high=Math.round(e+a);this.redraw()},zoom_out:function(){if(this.max_high===0){return}var b=this.high-this.low,c=b/2+this.low,a=(b*this.zoom_factor)/2;this.low=Math.round(c-a);this.high=Math.round(c+a);this.redraw()},resize_window:function(){this.viewport_container.height(this.container.height()-this.top_container.height()-this.bottom_container.height());this.nav_container.width(this.container.width());this.redraw()},reset_overview:function(){this.overview_viewport.find("canvas").remove();this.overview_viewport.height(this.default_overview_height);this.overview_box.height(this.default_overview_height);this.overview_close.hide();this.overview_highlight.hide()}});var Tool=function(a,b){this.name=a;this.params=b};$.extend(Tool.prototype,{get_param_values_dict:function(){var b={};for(var a=0;a<this.params.length;a++){var c=this.params[a];b[c.name]=c.value}return b},get_param_values:function(){var b=[];for(var a=0;a<this.params.length;a++){b[a]=this.params[a].value}return b}});var NumberToolParameter=function(c,b,e,a,d){this.name=c;this.label=b;this.min=e;this.max=a;this.value=d};var get_tool_from_dict=function(f){if(obj_length(f)===0){return undefined}var b=f.name;var l=f.params;var c=Array();for(var e=0;e<l.length;e++){var g=l[e];var a=g.name,k=g.label,h=g.type,d=g.min,j=g.max,m=g.value;c[c.length]=new NumberToolParameter(a,k,d,j,m)}return new Tool(b,c)};var Filter=function(b,a,c){this.name=b;this.index=a;this.value=c};var NumberFilter=function(b,a){this.name=b;this.index=a;this.low=-Number.MAX_VALUE;this.high=Number.MAX_VALUE;this.min=Number.MAX_VALUE;this.max=-Number.MAX_VALUE;this.slider=null;this.slider_label=null};$.extend(NumberFilter.prototype,{applies_to:function(a){if(a.length>this.index){return true}return false},keep:function(a){if(!this.applies_to(a)){return true}return(a[this.index]>=this.low&&a[this.index]<=this.high)},update_attrs:function(b){var a=false;if(!this.applies_to(b)){return a}if(b[this.index]<this.min){this.min=Math.floor(b[this.index]);a=true}if(b[this.index]>this.max){this.max=Math.ceil(b[this.index]);a=true}return a},update_ui_elt:function(){var b=this.slider.slider("option","min"),a=this.slider.slider("option","max");if(this.min<b||this.max>a){this.slider.slider("option","min",this.min);this.slider.slider("option","max",this.max);this.slider.slider("option","step",get_slider_step(this.min,this.max));this.slider.slider("option","values",[this.min,this.max])}}});var get_filters_from_dict=function(a){var g=[];for(var d=0;d<a.length;d++){var f=a[d];var c=f.name,e=f.type,b=f.index;if(e==="int"||e==="float"){g[d]=new NumberFilter(c,b)}else{g[d]=new Filter(c,b,e)}}return g};var TrackConfig=function(a){this.track=a.track;this.params=a.params;this.values={};if(a.saved_values){this.restore_values(a.saved_values)}this.onchange=a.onchange};$.extend(TrackConfig.prototype,{restore_values:function(a){var b=this;$.each(this.params,function(c,d){if(a[d.key]!==undefined){b.values[d.key]=a[d.key]}else{b.values[d.key]=d.default_value}})},build_form:function(){var b=this;var a=$("<div />");$.each(this.params,function(f,d){if(!d.hidden){var c="param_"+f;var l=$("<div class='form-row' />").appendTo(a);l.append($("<label />").attr("for",c).text(d.label+":"));if(d.type==="bool"){l.append($('<input type="checkbox" />').attr("id",c).attr("name",c).attr("checked",b.values[d.key]))}else{if(d.type==="color"){var h=b.values[d.key];var g=$("<input />").attr("id",c).attr("name",c).val(h);var j=$("<div class='tipsy tipsy-north' style='position: absolute;' />").hide();var e=$("<div style='background-color: black; padding: 10px;'></div>").appendTo(j);var k=$("<div/>").appendTo(e).farbtastic({width:100,height:100,callback:g,color:h});$("<div />").append(g).append(j).appendTo(l).bind("click",function(m){j.css({left:$(this).position().left+($(g).width()/2)-60,top:$(this).position().top+$(this.height)}).show();$(document).bind("click.color-picker",function(){j.hide();$(document).unbind("click.color-picker")});m.stopPropagation()})}else{l.append($("<input />").attr("id",c).attr("name",c).val(b.values[d.key]))}}}});return a},update_from_form:function(a){var c=this;var b=false;$.each(this.params,function(d,f){if(!f.hidden){var g="param_"+d;var e=a.find("#"+g).val();if(f.type==="float"){e=parseFloat(e)}else{if(f.type==="int"){e=parseInt(e)}else{if(f.type==="bool"){e=a.find("#"+g).is(":checked")}}}if(e!==c.values[f.key]){c.values[f.key]=e;b=true}}});if(b){this.onchange()}}});var Track=function(b,a,e,c,d){this.name=b;this.view=a;this.parent_element=e;this.data_url=(c?c:default_data_url);this.data_url_extra_params={};this.data_query_wait=(d?d:DEFAULT_DATA_QUERY_WAIT);this.dataset_check_url=converted_datasets_state_url;this.container_div=$("<div />").addClass("track").css("position","relative");if(!this.hidden){this.header_div=$("<div class='track-header' />").appendTo(this.container_div);if(this.view.editor){this.drag_div=$("<div class='draghandle' />").appendTo(this.header_div)}this.name_div=$("<div class='menubutton popup' />").appendTo(this.header_div);this.name_div.text(this.name);this.name_div.attr("id",this.name.replace(/\s+/g,"-").replace(/[^a-zA-Z0-9\-]/g,"").toLowerCase())}this.content_div=$("<div class='track-content'>").appendTo(this.container_div);this.parent_element.append(this.container_div)};$.extend(Track.prototype,{init:function(){var a=this;a.enabled=false;a.tile_cache.clear();a.data_cache.clear();a.initial_canvas=undefined;a.content_div.css("height","auto");a.container_div.removeClass("nodata error pending");if(!a.dataset_id){return}$.getJSON(converted_datasets_state_url,{hda_ldda:a.hda_ldda,dataset_id:a.dataset_id,chrom:a.view.chrom},function(b){if(!b||b==="error"||b.kind==="error"){a.container_div.addClass("error");a.content_div.text(DATA_ERROR);if(b.message){var d=a.view.tracks.indexOf(a);var c=$(" <a href='javascript:void(0);'></a>").text("View error").bind("click",function(){show_modal("Trackster Error","<pre>"+b.message+"</pre>",{Close:hide_modal})});a.content_div.append(c)}}else{if(b==="no converter"){a.container_div.addClass("error");a.content_div.text(DATA_NOCONVERTER)}else{if(b==="no data"||(b.data!==undefined&&(b.data===null||b.data.length===0))){a.container_div.addClass("nodata");a.content_div.text(DATA_NONE)}else{if(b==="pending"){a.container_div.addClass("pending");a.content_div.text(DATA_PENDING);setTimeout(function(){a.init()},a.data_query_wait)}else{if(b.status==="data"){if(b.valid_chroms){a.valid_chroms=b.valid_chroms;a.make_name_popup_menu()}a.content_div.text(DATA_OK);if(a.view.chrom){a.content_div.text("");a.content_div.css("height",a.height_px+"px");a.enabled=true;$.when(a.predraw_init()).done(function(){a.draw()})}}}}}}})},predraw_init:function(){},update_name:function(a){this.old_name=this.name;this.name=a;this.name_div.text(this.name)},revert_name:function(){this.name=this.old_name;this.name_div.text(this.name)}});var TiledTrack=function(b,j,o){var c=this,p=c.view;this.filters=(b!==undefined?get_filters_from_dict(b):[]);this.filters_available=false;this.filters_visible=false;this.tool=(j!==undefined?get_tool_from_dict(j):undefined);this.parent_track=o;this.child_tracks=[];if(c.hidden){return}var k=function(r,s,t){r.click(function(){var u=s.text();max=parseFloat(t.slider("option","max")),input_size=(max<=1?4:max<=1000000?max.toString().length:6),multi_value=false;if(t.slider("option","values")){input_size=2*input_size+1;multi_value=true}s.text("");$("<input type='text'/>").attr("size",input_size).attr("maxlength",input_size).attr("value",u).appendTo(s).focus().select().click(function(v){v.stopPropagation()}).blur(function(){$(this).remove();s.text(u)}).keyup(function(z){if(z.keyCode===27){$(this).trigger("blur")}else{if(z.keyCode===13){var x=t.slider("option","min"),v=t.slider("option","max"),y=function(A){return(isNaN(A)||A>v||A<x)},w=$(this).val();if(!multi_value){w=parseFloat(w);if(y(w)){alert("Parameter value must be in the range ["+x+"-"+v+"]");return $(this)}}else{w=w.split("-");w=[parseFloat(w[0]),parseFloat(w[1])];if(y(w[0])||y(w[1])){alert("Parameter value must be in the range ["+x+"-"+v+"]");return $(this)}}t.slider((multi_value?"values":"value"),w)}}})})};if(this.parent_track){this.header_div.find(".draghandle").removeClass("draghandle").addClass("child-track-icon").addClass("icon-button");this.parent_element.addClass("child-track");this.tool=undefined}this.filters_div=$("<div/>").addClass("filters").hide();this.header_div.after(this.filters_div);this.filters_div.bind("drag",function(r){r.stopPropagation()}).bind("click",function(r){r.stopPropagation()}).bind("dblclick",function(r){r.stopPropagation()});$.each(this.filters,function(x,s){var u=$("<div/>").addClass("slider-row").appendTo(c.filters_div);var r=$("<div/>").addClass("slider-label").appendTo(u);var z=$("<span/>").addClass("slider-name").text(s.name+" ").appendTo(r);var t=$("<span/>");var v=$("<span/>").addClass("slider-value").appendTo(r).append("[").append(t).append("]");var y=$("<div/>").addClass("slider").appendTo(u);s.control_element=$("<div/>").attr("id",s.name+"-filter-control").appendTo(y);var w=[0,0];s.control_element.slider({range:true,min:Number.MAX_VALUE,max:-Number.MIN_VALUE,values:[0,0],slide:function(A,B){w=B.values;t.text(B.values[0]+"-"+B.values[1]);setTimeout(function(){if(B.values[0]==w[0]&&B.values[1]==w[1]){var C=B.values;t.text(C[0]+"-"+C[1]);s.low=C[0];s.high=C[1];c.draw(true,true)}},50)},change:function(A,B){s.control_element.slider("option","slide").call(s.control_element,A,B)}});s.slider=s.control_element;s.slider_label=t;k(v,t,s.control_element);$("<div style='clear: both;'/>").appendTo(u)});if(this.tool){this.dynamic_tool_div=$("<div/>").addClass("dynamic-tool").hide();this.header_div.after(this.dynamic_tool_div);this.dynamic_tool_div.bind("drag",function(r){r.stopPropagation()}).bind("click",function(r){r.stopPropagation()}).bind("dblclick",function(r){r.stopPropagation()});var n=$("<div class='tool-name'>").appendTo(this.dynamic_tool_div).text(this.tool.name);var m=this.tool.params;var c=this;$.each(this.tool.params,function(x,s){var v=$("<div>").addClass("slider-row").appendTo(c.dynamic_tool_div);var u=$("<div>").addClass("slider-label").appendTo(v);var z=$("<span/>").addClass("slider-name").text(s.label+" ").appendTo(u);var t=$("<span/>").text(s.value);var w=$("<span/>").addClass("slider-value").appendTo(u).append("[").append(t).append("]");var y=$("<div/>").addClass("slider").appendTo(v);var r=$("<div id='"+s.name+"-param-control'>").appendTo(y);r.slider({min:s.min,max:s.max,step:get_slider_step(s.min,s.max),value:s.value,slide:function(A,C){var B=C.value;s.value=B;if(0<B&&B<1){B=parseFloat(B).toFixed(2)}t.text(B)},change:function(A,B){r.slider("option","slide").call(r,A,B)}});k(w,t,r);$("<div style='clear: both;'/>").appendTo(v)});var q=$("<div>").addClass("slider-row").appendTo(this.dynamic_tool_div);var l=$("<input type='submit'>").attr("value","Run").appendTo(q);var c=this;l.click(function(){c.run_tool()})}c.child_tracks_container=$("<div/>").addClass("child-tracks-container").hide();c.container_div.append(c.child_tracks_container);if(c.display_modes!==undefined){if(c.mode_div===undefined){c.mode_div=$("<div class='right-float menubutton popup' />").appendTo(c.header_div);var e=(c.track_config&&c.track_config.values.mode?c.track_config.values.mode:c.display_modes[0]);c.mode=e;c.mode_div.text(e);var d=function(r){c.mode_div.text(r);c.mode=r;c.track_config.values.mode=r;c.tile_cache.clear();c.draw()};var a={};for(var f=0,h=c.display_modes.length;f<h;f++){var g=c.display_modes[f];a[g]=function(r){return function(){d(r)}}(g)}make_popupmenu(c.mode_div,a)}else{c.mode_div.hide()}}this.make_name_popup_menu()};$.extend(TiledTrack.prototype,Track.prototype,{make_name_popup_menu:function(){var b=this;var a={};a["Edit configuration"]=function(){var h=function(){hide_modal();$(window).unbind("keypress.check_enter_esc")},f=function(){b.track_config.update_from_form($(".dialog-box"));hide_modal();$(window).unbind("keypress.check_enter_esc")},g=function(j){if((j.keyCode||j.which)===27){h()}else{if((j.keyCode||j.which)===13){f()}}};$(window).bind("keypress.check_enter_esc",g);show_modal("Configure Track",b.track_config.build_form(),{Cancel:h,OK:f})};if(b.filters_available>0){var e=(b.filters_div.is(":visible")?"Hide filters":"Show filters");a[e]=function(){b.filters_visible=(b.filters_div.is(":visible"));b.filters_div.toggle();b.make_name_popup_menu()}}if(b.tool){var e=(b.dynamic_tool_div.is(":visible")?"Hide tool":"Show tool");a[e]=function(){if(!b.dynamic_tool_div.is(":visible")){b.update_name(b.name+b.tool_region_and_parameters_str())}else{menu_option_text="Show dynamic tool";b.revert_name()}b.dynamic_tool_div.toggle();b.make_name_popup_menu()}}if(b.valid_chroms){a["List chrom/contigs with data"]=function(){show_modal("Chrom/contigs with data","<p>"+b.valid_chroms.join("<br/>")+"</p>",{Close:function(){hide_modal()}})}}var c=view;var d=function(){$("#no-tracks").show()};if(this.parent_track){c=this.parent_track;d=function(){}}a.Remove=function(){c.remove_track(b);if(c.num_tracks===0){d()}};make_popupmenu(b.name_div,a)},draw:function(a,d){var s=this.view.low,g=this.view.high,j=g-s,l=this.view.container.width(),m=this.view.resolution;var e=$("<div style='position: relative;'></div>"),f=l/j;if(!d){this.content_div.children().remove()}this.content_div.append(e);this.max_height=0;var o=Math.floor(s/m/DENSITY);var c={};while((o*DENSITY*m)<g){var r=l+"_"+f+"_"+o;var h=this.tile_cache.get(r);var p=o*DENSITY*this.view.resolution;var b=p+DENSITY*this.view.resolution;if(!a&&h){this.show_tile(h,e,p,f)}else{this.delayed_draw(a,r,p,b,o,m,e,f,c)}o+=1}var k=this;var q=setInterval(function(){if(obj_length(c)===0){clearInterval(q);if(d){var v=k.content_div.children();var u=false;for(var w=v.length-1,t=0;w>=t;w--){var z=$(v[w]);if(u){z.remove()}else{if(z.children().length!==0){u=true}}}}for(var y=0;y<k.filters.length;y++){k.filters[y].update_ui_elt()}var x=false;if(k.example_feature){for(var y=0;y<k.filters.length;y++){if(k.filters[y].applies_to(k.example_feature)){x=true;break}}}if(k.filters_available!==x){k.filters_available=x;if(!k.filters_available){k.filters_div.hide()}k.make_name_popup_menu()}}},50);for(var n=0;n<this.child_tracks.length;n++){this.child_tracks[n].draw(a,d)}},delayed_draw:function(b,j,g,l,c,e,k,m,f){var d=this;var h=function(u,n,p,o,s,t,q){returned_tile=d.draw_tile(n,p,o,s,t,q);var r=$("<div class='track-tile'>").prepend(returned_tile);tile_element=r;d.tile_cache.set(j,tile_element);d.show_tile(tile_element,s,g,t);delete f[u]};var a=setTimeout(function(){if(g<=d.view.high&&l>=d.view.low){var n=(b?undefined:d.tile_cache.get(j));if(n){d.show_tile(n,k,g,m);delete f[a]}else{$.when(d.data_cache.get_data(view.chrom,g,l,d.mode,e,d.data_url_extra_params)).then(function(){var o=d.data_cache.get_data(view.chrom,g,l,d.mode,e,d.data_url_extra_params);if(view.reference_track&&m>CHAR_WIDTH_PX){$.when(view.reference_track.data_cache.get_data(view.chrom,g,l,d.mode,e,view.reference_track.data_url_extra_params)).then(function(){var p=view.reference_track.data_cache.get_data(view.chrom,g,l,d.mode,e,view.reference_track.data_url_extra_params);h(a,o,e,c,k,m,p)})}else{h(a,o,e,c,k,m)}})}}},50);f[a]=true},show_tile:function(a,f,d,g){var b=this;var c=this.view.high-this.view.low,e=(d-this.view.low)*g;if(this.left_offset){e-=this.left_offset}a.css({position:"absolute",top:0,left:e,height:""});f.append(a);b.max_height=Math.max(b.max_height,a.height());b.content_div.css("height",b.max_height+"px");f.children().css("height",b.max_height+"px")},set_overview:function(){var a=this.view;if(this.initial_canvas&&this.is_overview){a.overview_close.show();a.overview_viewport.append(this.initial_canvas);a.overview_highlight.show().height(this.initial_canvas.height());a.overview_viewport.height(this.initial_canvas.height()+a.overview_box.height())}$(window).trigger("resize")},run_tool:function(){var b={dataset_id:this.original_dataset_id,chrom:this.view.chrom,low:this.view.low,high:this.view.high,tool_id:this.tool.name};$.extend(b,this.tool.get_param_values_dict());var d=this,c=b.tool_id+d.tool_region_and_parameters_str(b.chrom,b.low,b.high),e;if(d.track_type==="FeatureTrack"){e=new ToolDataFeatureTrack(c,view,d.hda_ldda,undefined,{},{},d)}this.add_track(e);e.content_div.text("Starting job.");view.has_changes=true;var a=function(){$.getJSON(run_tool_url,b,function(f){if(f==="no converter"){e.container_div.addClass("error");e.content_div.text(DATA_NOCONVERTER)}else{if(f.error){e.container_div.addClass("error");e.content_div.text(DATA_CANNOT_RUN_TOOL+f.message)}else{if(f==="pending"){e.container_div.addClass("pending");e.content_div.text("Converting input data so that it can be easily reused.");setTimeout(a,2000)}else{e.dataset_id=f.dataset_id;e.content_div.text("Running job.");e.init()}}}})};a()},tool_region_and_parameters_str:function(c,a,d){var b=this,e=(c!==undefined&&a!==undefined&&d!==undefined?c+":"+a+"-"+d:"all");return" - region=["+e+"], parameters=["+b.tool.get_param_values().join(", ")+"]"},add_track:function(a){a.track_id=this.track_id+"_"+this.child_tracks.length;a.container_div.attr("id","track_"+a.track_id);this.child_tracks_container.append(a.container_div);sortable(a.container_div,".child-track-icon");if(!$(this.child_tracks_container).is(":visible")){this.child_tracks_container.show()}this.child_tracks.push(a)},remove_track:function(a){a.container_div.fadeOut("slow",function(){$(this).remove()})}});var LabelTrack=function(a,b){this.track_type="LabelTrack";this.hidden=true;Track.call(this,null,a,b);this.container_div.addClass("label-track")};$.extend(LabelTrack.prototype,Track.prototype,{draw:function(){var c=this.view,d=c.high-c.low,g=Math.floor(Math.pow(10,Math.floor(Math.log(d)/Math.log(10)))),a=Math.floor(c.low/g)*g,e=this.view.container.width(),b=$("<div style='position: relative; height: 1.3em;'></div>");while(a<c.high){var f=(a-c.low)/d*e;b.append($("<div class='label'>"+commatize(a)+"</div>").css({position:"absolute",left:f-1}));a+=g}this.content_div.children(":first").remove();this.content_div.append(b)}});var ReferenceTrack=function(a){this.track_type="ReferenceTrack";this.hidden=true;Track.call(this,null,a,a.top_labeltrack);TiledTrack.call(this);a.reference_track=this;this.left_offset=200;this.height_px=12;this.font=DEFAULT_FONT;this.container_div.addClass("reference-track");this.content_div.css("background","none");this.content_div.css("min-height","0px");this.content_div.css("border","none");this.data_url=reference_url;this.data_url_extra_params={dbkey:a.dbkey};this.data_cache=new DataManager(CACHED_DATA,this,false);this.tile_cache=new Cache(CACHED_TILES_LINE)};$.extend(ReferenceTrack.prototype,TiledTrack.prototype,{draw_tile:function(m,g,b,j,n){var f=this,d=DENSITY*g;if(n>CHAR_WIDTH_PX){if(m===null){f.content_div.css("height","0px");return}var e=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(e)}e=$(e);var l=e.get(0).getContext("2d");e.get(0).width=Math.ceil(d*n+f.left_offset);e.get(0).height=f.height_px;l.font=DEFAULT_FONT;l.textAlign="center";for(var h=0,k=m.length;h<k;h++){var a=Math.round(h*n);l.fillText(m[h],a+f.left_offset,10)}return e}this.content_div.css("height","0px")}});var LineTrack=function(e,c,f,a,d){var b=this;this.track_type="LineTrack";this.display_modes=["Histogram","Line","Filled","Intensity"];this.mode="Histogram";Track.call(this,e,c,c.viewport_container);TiledTrack.call(this);this.min_height_px=16;this.max_height_px=400;this.height_px=80;this.hda_ldda=f;this.dataset_id=a;this.original_dataset_id=a;this.data_cache=new DataManager(CACHED_DATA,this);this.tile_cache=new Cache(CACHED_TILES_LINE);this.track_config=new TrackConfig({track:this,params:[{key:"color",label:"Color",type:"color",default_value:"black"},{key:"min_value",label:"Min Value",type:"float",default_value:undefined},{key:"max_value",label:"Max Value",type:"float",default_value:undefined},{key:"mode",type:"string",default_value:this.mode,hidden:true},{key:"height",type:"int",default_value:this.height_px,hidden:true}],saved_values:d,onchange:function(){b.vertical_range=b.prefs.max_value-b.prefs.min_value;$("#linetrack_"+b.track_id+"_minval").text(b.prefs.min_value);$("#linetrack_"+b.track_id+"_maxval").text(b.prefs.max_value);b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;this.height_px=this.track_config.values.height;this.vertical_range=this.track_config.values.max_value-this.track_config.values.min_value;(function(g){var k=false;var j=false;var h=$("<div class='track-resize'>");$(g.container_div).hover(function(){k=true;h.show()},function(){k=false;if(!j){h.hide()}});h.hide().bind("dragstart",function(l,m){j=true;m.original_height=$(g.content_div).height()}).bind("drag",function(m,n){var l=Math.min(Math.max(n.original_height+n.deltaY,g.min_height_px),g.max_height_px);$(g.content_div).css("height",l);g.height_px=l;g.draw(true)}).bind("dragend",function(l,m){g.tile_cache.clear();j=false;if(!k){h.hide()}g.track_config.values.height=g.height_px}).appendTo(g.container_div)})(this)};$.extend(LineTrack.prototype,TiledTrack.prototype,{predraw_init:function(){var a=this,b=a.view.tracks.indexOf(a);a.vertical_range=undefined;return $.getJSON(a.data_url,{stats:true,chrom:a.view.chrom,low:null,high:null,hda_ldda:a.hda_ldda,dataset_id:a.dataset_id},function(c){a.container_div.addClass("line-track");var e=c.data;if(isNaN(parseFloat(a.prefs.min_value))||isNaN(parseFloat(a.prefs.max_value))){a.prefs.min_value=e.min;a.prefs.max_value=e.max;$("#track_"+b+"_minval").val(a.prefs.min_value);$("#track_"+b+"_maxval").val(a.prefs.max_value)}a.vertical_range=a.prefs.max_value-a.prefs.min_value;a.total_frequency=e.total_frequency;a.container_div.find(".yaxislabel").remove();var f=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_minval").text(round_1000(a.prefs.min_value));var d=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_maxval").text(round_1000(a.prefs.max_value));d.css({position:"absolute",top:"24px",left:"10px"});d.prependTo(a.container_div);f.css({position:"absolute",bottom:"2px",left:"10px"});f.prependTo(a.container_div)})},draw_tile:function(j,q,t,c,e){if(this.vertical_range===undefined){return}var o=this,u=t*DENSITY*q,a=DENSITY*q,B=q+"_"+t,v={hda_ldda:this.hda_ldda,dataset_id:this.dataset_id,resolution:this.view.resolution};var b=document.createElement("canvas"),z=j.data;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(b)}b=$(b);b.get(0).width=Math.ceil(a*e);b.get(0).height=o.height_px;var p=b.get(0).getContext("2d"),k=false,l=o.prefs.min_value,g=o.prefs.max_value,n=o.vertical_range,w=o.total_frequency,d=o.height_px,m=o.mode;var A=Math.round(d+l/n*d);p.beginPath();p.moveTo(0,A);p.lineTo(a*e,A);p.fillStyle="#aaa";p.stroke();p.beginPath();p.fillStyle=o.prefs.color;var x,h,f;if(z.length>1){f=Math.ceil((z[1][0]-z[0][0])*e)}else{f=10}for(var r=0,s=z.length;r<s;r++){x=Math.round((z[r][0]-u)*e);h=z[r][1];if(h===null){if(k&&m==="Filled"){p.lineTo(x,d)}k=false;continue}if(h<l){h=l}else{if(h>g){h=g}}if(m==="Histogram"){h=Math.round(h/n*d);p.fillRect(x,A,f,-h)}else{if(m==="Intensity"){h=255-Math.floor((h-l)/n*255);p.fillStyle="rgb("+h+","+h+","+h+")";p.fillRect(x,0,f,d)}else{h=Math.round(d-(h-l)/n*d);if(k){p.lineTo(x,h)}else{k=true;if(m==="Filled"){p.moveTo(x,d);p.lineTo(x,h)}else{p.moveTo(x,h)}}}}}if(m==="Filled"){if(k){p.lineTo(x,A);p.lineTo(0,A)}p.fill()}else{p.stroke()}return b}});var FeatureTrack=function(a,f,e,j,h,c,d,g){var b=this;this.track_type="FeatureTrack";this.display_modes=["Auto","Dense","Squish","Pack"];this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{key:"show_counts",label:"Show summary counts",type:"bool",default_value:true},{key:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:h,onchange:function(){b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;Track.call(this,a,f,f.viewport_container);TiledTrack.call(this,c,d,g);this.height_px=0;this.container_div.addClass("feature-track");this.hda_ldda=e;this.dataset_id=j;this.original_dataset_id=j;this.zo_slots={};this.show_labels_scale=0.001;this.showing_details=false;this.summary_draw_height=30;this.default_font=DEFAULT_FONT;this.inc_slots={};this.start_end_dct={};this.tile_cache=new Cache(CACHED_TILES_FEATURE);this.data_cache=new DataManager(20,this);this.left_offset=200};$.extend(FeatureTrack.prototype,TiledTrack.prototype,{incremental_slots:function(a,h,p){var q=this.inc_slots[a];if(!q||(q.mode!==p)){q={};q.w_scale=a;q.mode=p;this.inc_slots[a]=q;this.start_end_dct[a]={}}var l=q.w_scale,w=[],x=[],j=0,n=this.view.max_low;for(var u=0,v=h.length;u<v;u++){var g=h[u],k=g[0];if(q[k]!==undefined){j=Math.max(j,q[k]);x.push(q[k])}else{w.push(u)}}var d=this.start_end_dct[a];var m=function(D,E){for(var C=0;C<=MAX_FEATURE_DEPTH;C++){var A=false,F=d[C];if(F!==undefined){for(var z=0,B=F.length;z<B;z++){var y=F[z];if(E>y[0]&&D<y[1]){A=true;break}}}if(!A){return C}}return -1};for(var u=0,v=w.length;u<v;u++){var g=h[w[u]],k=g[0],s=g[1],b=g[2],o=g[3],c=Math.floor((s-n)*l),f=Math.ceil((b-n)*l),t=CONTEXT.measureText(o).width,e;if(o!==undefined&&p==="Pack"){t+=(LABEL_SPACING+PACK_SPACING);if(c-t>=0){c-=t;e="left"}else{f+=t;e="right"}}var r=m(c,f);if(r>=0){if(d[r]===undefined){d[r]=[]}d[r].push([c,f]);q[k]=r;j=Math.max(j,r)}else{}}return j+1},draw_summary_tree:function(b,o,n,l,r,j,f,e){var c=j+LABEL_SPACING+CHAR_HEIGHT_PX;delta_x_px=Math.ceil(n*r);var h=$("<div />").addClass("yaxislabel");h.text(l);h.css({position:"absolute",top:"22px",left:"10px"});h.prependTo(this.container_div);var q=b.get(0).getContext("2d");for(var d=0,g=o.length;d<g;d++){var m=Math.floor((o[d][0]-f)*r);var k=o[d][1];if(!k){continue}var p=k/l*j;q.fillStyle="black";q.fillRect(m+e,c-p,delta_x_px,p);var a=4;if(this.prefs.show_counts&&(q.measureText(k).width+a)<delta_x_px){q.fillStyle="#666";q.textAlign="center";q.fillText(k,m+e+(delta_x_px/2),10)}}},draw_element:function(p,f,g,x,j,r,I,M,N,a,A){var u=x[0],K=x[1],C=x[2]-1,s=x[3],D=Math.floor(Math.max(0,(K-r)*M)),q=Math.ceil(Math.min(a,Math.max(0,(C-r)*M))),B=ERROR_PADDING+(g==="Dense"?0:(0+j))*N,o,G,t=null,O=null,d=this.prefs.block_color,F=this.prefs.label_color;if(g==="Dense"){p.fillStyle=d;p.fillRect(D+A,B,q-D,DENSE_FEATURE_HEIGHT)}else{if(g==="no_detail"){p.fillStyle=d;p.fillRect(D+A,B+5,q-D,DENSE_FEATURE_HEIGHT)}else{var n=x[4],z=x[5],E=x[6],e=x[7];if(z&&E){t=Math.floor(Math.max(0,(z-r)*M));O=Math.ceil(Math.min(a,Math.max(0,(E-r)*M)))}var L,v;if(g==="Squish"){L=1;v=SQUISH_FEATURE_HEIGHT}else{L=5;v=PACK_FEATURE_HEIGHT}if(!e){if(x.strand){if(x.strand==="+"){p.fillStyle=RIGHT_STRAND_INV}else{if(x.strand==="-"){p.fillStyle=LEFT_STRAND_INV}}}else{p.fillStyle=d}p.fillRect(D+A,B,q-D,v)}else{var m,w;if(g==="Squish"){p.fillStyle=CONNECTOR_COLOR;m=B+Math.floor(SQUISH_FEATURE_HEIGHT/2)+1;w=1}else{if(n){var m=B;var w=v;if(n==="+"){p.fillStyle=RIGHT_STRAND}else{if(n==="-"){p.fillStyle=LEFT_STRAND}}}else{p.fillStyle=CONNECTOR_COLOR;m+=(SQUISH_FEATURE_HEIGHT/2)+1;w=1}}p.fillRect(D+A,m,q-D,w);for(var J=0,c=e.length;J<c;J++){var h=e[J],b=Math.floor(Math.max(0,(h[0]-r)*M)),y=Math.ceil(Math.min(a,Math.max((h[1]-1-r)*M)));if(b>y){continue}p.fillStyle=d;p.fillRect(b+A,B+(v-L)/2+1,y-b,L);if(t!==undefined&&!(b>O||y<t)){var H=Math.max(b,t),l=Math.min(y,O);p.fillRect(H+A,B+1,l-H,v)}}}if(g==="Pack"&&K>r){p.fillStyle=F;if(f===0&&D-p.measureText(s).width<0){p.textAlign="left";p.fillText(s,q+A+LABEL_SPACING,B+8)}else{p.textAlign="right";p.fillText(s,D+A-LABEL_SPACING,B+8)}p.fillStyle=d}}}},get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="no_detail"){a=NO_DETAIL_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT}}}return a},draw_tile:function(o,x,C,k,m,d){var t=this;var E=C*DENSITY*x,a=(C+1)*DENSITY*x,q=a-E,F={hda_ldda:t.hda_ldda,dataset_id:t.dataset_id,resolution:this.view.resolution,mode:this.mode};var v=Math.ceil(q*m),s=this.mode,H=25,g=this.left_offset,p,h;var c=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(c)}c=$(c);if(s==="Auto"){if(o.dataset_type==="summary_tree"){s=o.dataset_type}else{if(o.extra_info==="no_detail"){s="no_detail"}else{var G=o.data;if((G.length&&G.length<4)||(this.view.high-this.view.low>MIN_SQUISH_VIEW_WIDTH)){s="Squish"}else{s="Pack"}}}}var y=this.get_y_scale(s);if(s==="summary_tree"){h=this.summary_draw_height}if(s==="Dense"){h=H}else{if(s==="no_detail"||s==="Squish"||s==="Pack"){h=this.incremental_slots(m,o.data,s)*y+H;p=this.inc_slots[m]}}c.get(0).width=v+g;c.get(0).height=h;if(o.dataset_type==="summary_tree"){c.get(0).height+=LABEL_SPACING+CHAR_HEIGHT_PX}k.parent().css("height",Math.max(this.height_px,h)+"px");var w=c.get(0).getContext("2d");w.fillStyle=this.prefs.block_color;w.font=this.default_font;w.textAlign="right";this.container_div.find(".yaxislabel").remove();if(s==="summary_tree"){this.draw_summary_tree(c,o.data,o.delta,o.max,m,h,E,g);return c}if(o.message){c.css({"border-top":"1px solid red"});w.fillStyle="red";w.textAlign="left";var r=w.textBaseline;w.textBaseline="top";w.fillText(o.message,g,0);w.textBaseline=r;if(!o.data){return c}}this.example_feature=(o.data.length?o.data[0]:undefined);var G=o.data;for(var z=0,B=G.length;z<B;z++){var j=G[z],l=j[0],u=j[1],b=j[2],e=(p&&p[l]!==undefined?p[l]:null);var A=false;var n;for(var D=0;D<this.filters.length;D++){n=this.filters[D];n.update_attrs(j);if(!n.keep(j)){A=true;break}}if(A){continue}if(is_overlap([u,b],[E,a])&&(s=="Dense"||e!==null)){this.draw_element(w,C,s,j,e,E,a,m,y,v,g,d)}}return c}});var VcfTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_type="VcfTrack"};$.extend(VcfTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{draw_element:function(u,p,j,e,x,c,m,v,s){var j=data[i],l=j[0],t=j[1],d=j[2]-1,o=j[3],g=Math.floor(Math.max(0,(t-x)*m)),k=Math.ceil(Math.min(s,Math.max(0,(d-x)*m))),f=ERROR_PADDING+(p==="Dense"?0:(0+e))*v,a,y,b=null,n=null;if(no_label){u.fillStyle=block_color;u.fillRect(g+left_offset,f+5,k-g,1)}else{var w=j[4],r=j[5],h=j[6];a=9;y=1;u.fillRect(g+left_offset,f,k-g,a);if(p!=="Dense"&&o!==undefined&&t>x){u.fillStyle=label_color;if(tile_index===0&&g-u.measureText(o).width<0){u.textAlign="left";u.fillText(o,k+2+left_offset,f+8)}else{u.textAlign="right";u.fillText(o,g-2+left_offset,f+8)}u.fillStyle=block_color}var q=w+" / "+r;if(t>x&&u.measureText(q).width<(k-g)){u.fillStyle="white";u.textAlign="center";u.fillText(q,left_offset+g+(k-g)/2,f+8);u.fillStyle=block_color}}}});var ReadTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{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:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:c,onchange:function(){this.track.tile_cache.clear();this.track.draw()}});this.prefs=this.track_config.values;this.track_type="ReadTrack";this.make_name_popup_menu()};$.extend(ReadTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT;if(this.track_config.values.show_insertions){a*=2}}}return a},draw_read:function(m,d,J,n,D,G,e,o,y,a){m.textAlign="center";var l=this,u=[n,D],C=0,z=0,f=0;var r=[];if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){f=Math.round(J/2)}if(!e){e=[[0,o.length]]}for(var h=0,k=e.length;h<k;h++){var b=e[h],g="MIDNSHP=X"[b[0]],v=b[1];if(g==="H"||g==="S"){C-=v}var x=G+C,B=Math.floor(Math.max(0,(x-n)*J)),E=Math.floor(Math.max(0,(x+v-n)*J));switch(g){case"H":break;case"S":case"M":case"=":var p=compute_overlap([x,x+v],u);if(p!==NO_OVERLAP){var q=o.slice(z,z+v);if(f>0){m.fillStyle=this.prefs.block_color;m.fillRect(B+this.left_offset-f,y+1,E-B,9);m.fillStyle=CONNECTOR_COLOR;for(var I=0,j=q.length;I<j;I++){if(this.track_config.values.show_differences&&a){var s=a[x-n+I];if(!s||s.toLowerCase()===q[I].toLowerCase()){continue}}if(x+I>=n&&x+I<=D){var A=Math.floor(Math.max(0,(x+I-n)*J));m.fillText(q[I],A+this.left_offset,y+9)}}}else{m.fillStyle=this.prefs.block_color;m.fillRect(B+this.left_offset,y+(this.mode!=="Dense"?4:5),E-B,(d!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}z+=v;C+=v;break;case"N":m.fillStyle=CONNECTOR_COLOR;m.fillRect(B+this.left_offset-f,y+5,E-B,1);C+=v;break;case"D":m.fillStyle="red";m.fillRect(B+this.left_offset-f,y+4,E-B,3);C+=v;break;case"P":break;case"I":var p=compute_overlap([x,x+v],u),K=this.left_offset+B-f;if(p!==NO_OVERLAP){var q=o.slice(z,z+v);if(this.track_config.values.show_insertions){var w=this.left_offset+B-(E-B)/2;if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){m.fillStyle="yellow";m.fillRect(w-f,y-9,E-B,9);r[r.length]={type:"triangle",data:[K,y+4,5]};m.fillStyle=CONNECTOR_COLOR;switch(p){case (OVERLAP_START):q=q.slice(n-x);break;case (OVERLAP_END):q=q.slice(0,x-D);break;case (CONTAINED_BY):break;case (CONTAINS):q=q.slice(n-x,x-D);break}for(var I=0,j=q.length;I<j;I++){var A=Math.floor(Math.max(0,(x+I-n)*J));m.fillText(q[I],A+this.left_offset-(E-B)/2,y)}}else{m.fillStyle="yellow";m.fillRect(w,y+(this.mode!=="Dense"?2:5),E-B,(d!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}else{if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){r[r.length]={type:"text",data:[q.length,K,y+9]}}else{}}}z+=v;break;case"X":z+=v;break}}m.fillStyle="yellow";var t,L,H;for(var F=0;F<r.length;F++){t=r[F];L=t.type;H=t.data;if(L==="text"){m.font="bold "+DEFAULT_FONT;m.fillText(H[0],H[1],H[2]);m.font=DEFAULT_FONT}else{if(L=="triangle"){m.drawDownwardEquilateralTriangle(H[0],H[1],H[2])}}}},draw_element:function(w,y,r,k,e,A,b,n,x,u,f,c){var m=k[0],v=k[1],d=k[2],o=k[3],h=Math.floor(Math.max(0,(v-A)*n)),j=Math.ceil(Math.min(u,Math.max(0,(d-A)*n))),g=(r==="Dense"?1:(1+e))*x,z=this.prefs.block_color,l=this.prefs.label_color;t=0;w.fillStyle=z;if(k[5] instanceof Array){var s=Math.floor(Math.max(0,(k[4][0]-A)*n)),q=Math.ceil(Math.min(u,Math.max(0,(k[4][1]-A)*n))),p=Math.floor(Math.max(0,(k[5][0]-A)*n)),a=Math.ceil(Math.min(u,Math.max(0,(k[5][1]-A)*n)));if(k[4][1]>=A&&k[4][0]<=b&&k[4][2]){this.draw_read(w,r,n,A,b,k[4][0],k[4][2],k[4][3],g,c)}if(k[5][1]>=A&&k[5][0]<=b&&k[5][2]){this.draw_read(w,r,n,A,b,k[5][0],k[5][2],k[5][3],g,c)}if(p>q){w.fillStyle=CONNECTOR_COLOR;w.dashedLine(q+f,g+5,f+p,g+5)}}else{w.fillStyle=z;this.draw_read(w,r,n,A,b,v,k[4],k[5],g,c)}if(r==="Pack"&&v>A){w.fillStyle=this.prefs.label_color;if((r==="Pack"||this.mode==="Auto")&&n>CHAR_WIDTH_PX){var t=Math.round(n/2)}if(y===0&&h-w.measureText(o).width<0){w.textAlign="left";w.fillText(o,j+f+LABEL_SPACING-t,g+8)}else{w.textAlign="right";w.fillText(o,h+f-LABEL_SPACING-t,g+8)}w.fillStyle=z}}});var ToolDataFeatureTrack=function(e,c,g,a,d,f,b){FeatureTrack.call(this,e,c,g,a,d,f,{},b);this.track_type="ToolDataFeatureTrack";this.data_url=raw_data_url;this.data_query_wait=1000;this.dataset_check_url=dataset_state_url};$.extend(ToolDataFeatureTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{predraw_init:function(){var b=this;var a=function(){if(b.data_cache.size()===0){setTimeout(a,300)}else{b.data_url=default_data_url;b.data_query_wait=DEFAULT_DATA_QUERY_WAIT;b.dataset_state_url=converted_datasets_state_url;$.getJSON(b.dataset_state_url,{dataset_id:b.dataset_id,hda_ldda:b.hda_ldda},function(c){})}};a()}}); \ No newline at end of file +CanvasRenderingContext2D.prototype.dashedLine=function(c,j,b,h,f){if(f===undefined){f=4}var e=b-c;var d=h-j;var g=Math.floor(Math.sqrt(e*e+d*d)/f);var l=e/g;var k=d/g;var a;for(a=0;a<g;a++,c+=l,j+=k){if(a%2!==0){continue}this.fillRect(c,j,f,1)}};CanvasRenderingContext2D.prototype.drawDownwardEquilateralTriangle=function(b,a,e){var d=b-e/2,c=b+e/2,f=a-Math.sqrt(e*3/2);this.beginPath();this.moveTo(d,f);this.lineTo(c,f);this.lineTo(b,a);this.lineTo(d,f);this.strokeStyle=this.fillStyle;this.fill();this.stroke();this.closePath()};function sortable(a,b){a.bind("drag",{handle:b,relative:true},function(h,j){var g=$(this).parent();var f=g.children();var c;for(c=0;c<f.length;c++){if(j.offsetY<$(f.get(c)).position().top){break}}if(c===f.length){if(this!==f.get(c-1)){g.append(this)}}else{if(this!==f.get(c)){$(this).insertBefore(f.get(c))}}})}var NO_OVERLAP=1001,CONTAINS=1002,OVERLAP_START=1003,OVERLAP_END=1004,CONTAINED_BY=1005;function compute_overlap(e,b){var g=e[0],f=e[1],d=b[0],c=b[1],a;if(g<d){if(f<d){a=NO_OVERLAP}else{if(f<=c){a=OVERLAP_START}else{a=CONTAINS}}}else{if(g>c){a=NO_OVERLAP}else{if(f<=c){a=CONTAINED_BY}else{a=OVERLAP_END}}}return a}function is_overlap(b,a){return(compute_overlap(b,a)!==NO_OVERLAP)}function get_slider_step(c,a){var b=a-c;return(b<=1?0.01:(b<=1000?1:5))}var DENSE_TRACK_HEIGHT=10,NO_DETAIL_TRACK_HEIGHT=3,SQUISH_TRACK_HEIGHT=5,PACK_TRACK_HEIGHT=10,NO_DETAIL_FEATURE_HEIGHT=1,DENSE_FEATURE_HEIGHT=1,SQUISH_FEATURE_HEIGHT=3,PACK_FEATURE_HEIGHT=9,ERROR_PADDING=10,LABEL_SPACING=2,PACK_SPACING=5,MIN_SQUISH_VIEW_WIDTH=12000,DEFAULT_FONT="9px Monaco, Lucida Console, monospace",DENSITY=200,FEATURE_LEVELS=10,MAX_FEATURE_DEPTH=100,DEFAULT_DATA_QUERY_WAIT=5000,MAX_CHROMS_SELECTABLE=100,CONNECTOR_COLOR="#ccc",DATA_ERROR="There was an error in indexing this dataset. ",DATA_NOCONVERTER="A converter for this dataset is not installed. Please check your datatypes_conf.xml file.",DATA_NONE="No data for this chrom/contig.",DATA_PENDING="Currently indexing... please wait",DATA_CANNOT_RUN_TOOL="Tool cannot be rerun: ",DATA_LOADING="Loading data...",DATA_OK="Ready for display",CACHED_TILES_FEATURE=10,CACHED_TILES_LINE=5,CACHED_DATA=5,DUMMY_CANVAS=document.createElement("canvas"),RIGHT_STRAND,LEFT_STRAND;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(DUMMY_CANVAS)}var CONTEXT=DUMMY_CANVAS.getContext("2d");CONTEXT.font=DEFAULT_FONT;var CHAR_WIDTH_PX=CONTEXT.measureText("A").width,CHAR_HEIGHT_PX=9;var right_img=new Image();right_img.src=image_path+"/visualization/strand_right.png";right_img.onload=function(){RIGHT_STRAND=CONTEXT.createPattern(right_img,"repeat")};var left_img=new Image();left_img.src=image_path+"/visualization/strand_left.png";left_img.onload=function(){LEFT_STRAND=CONTEXT.createPattern(left_img,"repeat")};var right_img_inv=new Image();right_img_inv.src=image_path+"/visualization/strand_right_inv.png";right_img_inv.onload=function(){RIGHT_STRAND_INV=CONTEXT.createPattern(right_img_inv,"repeat")};var left_img_inv=new Image();left_img_inv.src=image_path+"/visualization/strand_left_inv.png";left_img_inv.onload=function(){LEFT_STRAND_INV=CONTEXT.createPattern(left_img_inv,"repeat")};function round_1000(a){return Math.round(a*1000)/1000}var Cache=function(a){this.num_elements=a;this.clear()};$.extend(Cache.prototype,{get:function(b){var a=this.key_ary.indexOf(b);if(a!==-1){this.move_key_to_end(b,a)}return this.obj_cache[b]},set:function(b,c){if(!this.obj_cache[b]){if(this.key_ary.length>=this.num_elements){var a=this.key_ary.shift();delete this.obj_cache[a]}this.key_ary.push(b)}this.obj_cache[b]=c;return c},move_key_to_end:function(b,a){this.key_ary.splice(a,1);this.key_ary.push(b)},clear:function(){this.obj_cache={};this.key_ary=[]},size:function(){return this.key_ary.length}});var DataManager=function(b,a,c){Cache.call(this,b);this.track=a;this.subset=(c!==undefined?c:true)};$.extend(DataManager.prototype,Cache.prototype,{load_data:function(h,j,d,g,a,f){var c={chrom:h,low:j,high:d,mode:g,resolution:a,dataset_id:this.track.dataset_id,hda_ldda:this.track.hda_ldda};$.extend(c,f);var k=[];for(var e=0;e<this.track.filters.length;e++){k[k.length]=this.track.filters[e].name}c.filter_cols=JSON.stringify(k);var b=this;return $.getJSON(this.track.data_url,c,function(l){b.set_data(j,d,g,l)})},get_data:function(j,k,c,h,b,f){var l=this.get(this.gen_key(k,c,h));if(l){return l}if(this.subset){var m,g,a,e,h,l;for(var d=0;d<this.key_ary.length;d++){m=this.key_ary[d];g=this.split_key(m);a=g[0];e=g[1];if(k>=a&&c<=e){l=this.obj_cache[m];if(l.dataset_type!=="summary_tree"&&l.extra_info!=="no_detail"){this.move_key_to_end(m,d);return l}}}}return this.load_data(j,k,c,h,b,f)},set_data:function(b,c,d,a){return this.set(this.gen_key(b,c,d),a)},gen_key:function(a,c,d){var b=a+"_"+c+"_"+d;return b},split_key:function(a){return a.split("_")}});var View=function(a,d,c,b,e){this.container=a;this.chrom=null;this.vis_id=c;this.dbkey=b;this.title=d;this.tracks=[];this.label_tracks=[];this.max_low=0;this.max_high=0;this.num_tracks=0;this.track_id_counter=0;this.zoom_factor=3;this.min_separation=30;this.has_changes=false;this.init(e);this.reset()};$.extend(View.prototype,{init:function(d){var c=this.container,a=this;this.top_container=$("<div/>").addClass("top-container").appendTo(c);this.content_div=$("<div/>").addClass("content").css("position","relative").appendTo(c);this.bottom_container=$("<div/>").addClass("bottom-container").appendTo(c);this.top_labeltrack=$("<div/>").addClass("top-labeltrack").appendTo(this.top_container);this.viewport_container=$("<div/>").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div);this.intro_div=$("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide();this.nav_labeltrack=$("<div/>").addClass("nav-labeltrack").appendTo(this.bottom_container);this.nav_container=$("<div/>").addClass("nav-container").prependTo(this.top_container);this.nav=$("<div/>").addClass("nav").appendTo(this.nav_container);this.overview=$("<div/>").addClass("overview").appendTo(this.bottom_container);this.overview_viewport=$("<div/>").addClass("overview-viewport").appendTo(this.overview);this.overview_close=$("<a href='javascript:void(0);'>Close Overview</a>").addClass("overview-close").hide().appendTo(this.overview_viewport);this.overview_highlight=$("<div/>").addClass("overview-highlight").hide().appendTo(this.overview_viewport);this.overview_box_background=$("<div/>").addClass("overview-boxback").appendTo(this.overview_viewport);this.overview_box=$("<div/>").addClass("overview-box").appendTo(this.overview_viewport);this.default_overview_height=this.overview_box.height();this.nav_controls=$("<div/>").addClass("nav-controls").appendTo(this.nav);this.chrom_select=$("<select/>").attr({name:"chrom"}).css("width","15em").addClass("no-autocomplete").append("<option value=''>Loading</option>").appendTo(this.nav_controls);var b=function(f){if(f.type==="focusout"||(f.keyCode||f.which)===13||(f.keyCode||f.which)===27){if((f.keyCode||f.which)!==27){a.go_to($(this).val())}$(this).hide();$(this).val("");a.location_span.show();a.chrom_select.show()}};this.nav_input=$("<input/>").addClass("nav-input").hide().bind("keyup focusout",b).appendTo(this.nav_controls);this.location_span=$("<span/>").addClass("location").appendTo(this.nav_controls);this.location_span.bind("click",function(){a.location_span.hide();a.chrom_select.hide();a.nav_input.val(a.chrom+":"+a.low+"-"+a.high);a.nav_input.css("display","inline-block");a.nav_input.select();a.nav_input.focus()});if(this.vis_id!==undefined){this.hidden_input=$("<input/>").attr("type","hidden").val(this.vis_id).appendTo(this.nav_controls)}this.zo_link=$("<a id='zoom-out' />").click(function(){a.zoom_out();a.redraw()}).appendTo(this.nav_controls);this.zi_link=$("<a id='zoom-in' />").click(function(){a.zoom_in();a.redraw()}).appendTo(this.nav_controls);this.load_chroms({low:0},d);this.chrom_select.bind("change",function(){a.change_chrom(a.chrom_select.val())});this.intro_div.show();this.content_div.bind("click",function(f){$(this).find("input").trigger("blur")});this.content_div.bind("dblclick",function(f){a.zoom_in(f.pageX,this.viewport_container)});this.overview_box.bind("dragstart",function(f,g){this.current_x=g.offsetX}).bind("drag",function(f,h){var j=h.offsetX-this.current_x;this.current_x=h.offsetX;var g=Math.round(j/a.viewport_container.width()*(a.max_high-a.max_low));a.move_delta(-g)});this.overview_close.bind("click",function(){for(var f=0,e=a.tracks.length;f<e;f++){a.tracks[f].is_overview=false}$(this).siblings().filter("canvas").remove();$(this).parent().css("height",a.overview_box.height());a.overview_highlight.hide();$(this).hide()});this.viewport_container.bind("draginit",function(f,g){if(f.clientX>a.viewport_container.width()-16){return false}}).bind("dragstart",function(f,g){g.original_low=a.low;g.current_height=f.clientY;g.current_x=g.offsetX}).bind("drag",function(h,k){var f=$(this);var l=k.offsetX-k.current_x;var g=f.scrollTop()-(h.clientY-k.current_height);f.scrollTop(g);k.current_height=h.clientY;k.current_x=k.offsetX;var j=Math.round(l/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}).bind("mousewheel",function(h,k,g,f){if(g){var j=Math.round(-g/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}});this.top_labeltrack.bind("dragstart",function(f,g){return $("<div />").css({height:a.content_div.height()+a.top_labeltrack.height()+a.nav_labeltrack.height()+1,top:"0px",position:"absolute","background-color":"#ccf",opacity:0.5,"z-index":1000}).appendTo($(this))}).bind("drag",function(k,l){$(l.proxy).css({left:Math.min(k.pageX,l.startX),width:Math.abs(k.pageX-l.startX)});var g=Math.min(k.pageX,l.startX)-a.container.offset().left,f=Math.max(k.pageX,l.startX)-a.container.offset().left,j=(a.high-a.low),h=a.viewport_container.width();a.update_location(Math.round(g/h*j)+a.low,Math.round(f/h*j)+a.low)}).bind("dragend",function(l,m){var g=Math.min(l.pageX,m.startX),f=Math.max(l.pageX,m.startX),j=(a.high-a.low),h=a.viewport_container.width(),k=a.low;a.low=Math.round(g/h*j)+k;a.high=Math.round(f/h*j)+k;$(m.proxy).remove();a.redraw()});this.add_label_track(new LabelTrack(this,this.top_labeltrack));this.add_label_track(new LabelTrack(this,this.nav_labeltrack));$(window).bind("resize",function(){a.resize_window()});$(document).bind("redraw",function(){a.redraw()});this.reset();$(window).trigger("resize")},update_location:function(a,b){this.location_span.text(commatize(a)+" - "+commatize(b));this.nav_input.val(this.chrom+":"+commatize(a)+"-"+commatize(b))},load_chroms:function(b,c){b.num=MAX_CHROMS_SELECTABLE;$.extend(b,(this.vis_id!==undefined?{vis_id:this.vis_id}:{dbkey:this.dbkey}));var a=this;$.ajax({url:chrom_url,data:b,dataType:"json",success:function(e){if(e.chrom_info.length===0){alert("Invalid chromosome: "+b.chrom);return}if(e.reference){a.add_label_track(new ReferenceTrack(a))}a.chrom_data=e.chrom_info;var h='<option value="">Select Chrom/Contig</option>';for(var g=0,d=a.chrom_data.length;g<d;g++){var f=a.chrom_data[g].chrom;h+='<option value="'+f+'">'+f+"</option>"}if(e.prev_chroms){h+='<option value="previous">Previous '+MAX_CHROMS_SELECTABLE+"</option>"}if(e.next_chroms){h+='<option value="next">Next '+MAX_CHROMS_SELECTABLE+"</option>"}a.chrom_select.html(h);if(c){c()}a.chrom_start_index=e.start_index},error:function(){alert("Could not load chroms for this dbkey:",a.dbkey)}})},change_chrom:function(e,b,g){if(!e||e==="None"){return}var d=this;if(e==="previous"){d.load_chroms({low:this.chrom_start_index-MAX_CHROMS_SELECTABLE});return}if(e==="next"){d.load_chroms({low:this.chrom_start_index+MAX_CHROMS_SELECTABLE});return}var f=$.grep(d.chrom_data,function(j,k){return j.chrom===e})[0];if(f===undefined){d.load_chroms({chrom:e},function(){d.change_chrom(e,b,g)});return}else{if(e!==d.chrom){d.chrom=e;if(!d.chrom){d.intro_div.show()}else{d.intro_div.hide()}d.chrom_select.val(d.chrom);d.max_high=f.len-1;d.reset();d.redraw(true);for(var h=0,a=d.tracks.length;h<a;h++){var c=d.tracks[h];if(c.init){c.init()}}}if(b!==undefined&&g!==undefined){d.low=Math.max(b,0);d.high=Math.min(g,d.max_high)}d.reset_overview();d.redraw()}},go_to:function(f){var k=this,a,d,b=f.split(":"),h=b[0],j=b[1];if(j!==undefined){try{var g=j.split("-");a=parseInt(g[0].replace(/,/g,""),10);d=parseInt(g[1].replace(/,/g,""),10)}catch(c){return false}}k.change_chrom(h,a,d)},move_fraction:function(c){var a=this;var b=a.high-a.low;this.move_delta(c*b)},move_delta:function(c){var a=this;var b=a.high-a.low;if(a.low-c<a.max_low){a.low=a.max_low;a.high=a.max_low+b}else{if(a.high-c>a.max_high){a.high=a.max_high;a.low=a.max_high-b}else{a.high-=c;a.low-=c}}a.redraw()},add_track:function(a){a.view=this;a.track_id=this.track_id_counter;this.tracks.push(a);if(a.init){a.init()}a.container_div.attr("id","track_"+a.track_id);sortable(a.container_div,".draghandle");this.track_id_counter+=1;this.num_tracks+=1},add_label_track:function(a){a.view=this;this.label_tracks.push(a)},remove_track:function(a){this.has_changes=true;a.container_div.fadeOut("slow",function(){$(this).remove()});delete this.tracks[this.tracks.indexOf(a)];this.num_tracks-=1},reset:function(){this.low=this.max_low;this.high=this.max_high;this.viewport_container.find(".yaxislabel").remove()},redraw:function(h){var g=this.high-this.low,f=this.low,b=this.high;if(f<this.max_low){f=this.max_low}if(b>this.max_high){b=this.max_high}if(this.high!==0&&g<this.min_separation){b=f+this.min_separation}this.low=Math.floor(f);this.high=Math.ceil(b);this.resolution=Math.pow(10,Math.ceil(Math.log((this.high-this.low)/200)/Math.LN10));this.zoom_res=Math.pow(FEATURE_LEVELS,Math.max(0,Math.ceil(Math.log(this.resolution,FEATURE_LEVELS)/Math.log(FEATURE_LEVELS))));var a=(this.low/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var e=((this.high-this.low)/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var j=13;this.overview_box.css({left:a,width:Math.max(j,e)}).show();if(e<j){this.overview_box.css("left",a-(j-e)/2)}if(this.overview_highlight){this.overview_highlight.css({left:a,width:e})}this.update_location(this.low,this.high);if(!h){for(var c=0,d=this.tracks.length;c<d;c++){if(this.tracks[c]&&this.tracks[c].enabled){this.tracks[c].draw()}}for(c=0,d=this.label_tracks.length;c<d;c++){this.label_tracks[c].draw()}}},zoom_in:function(b,c){if(this.max_high===0||this.high-this.low<this.min_separation){return}var d=this.high-this.low,e=d/2+this.low,a=(d/this.zoom_factor)/2;if(b){e=b/this.viewport_container.width()*(this.high-this.low)+this.low}this.low=Math.round(e-a);this.high=Math.round(e+a);this.redraw()},zoom_out:function(){if(this.max_high===0){return}var b=this.high-this.low,c=b/2+this.low,a=(b*this.zoom_factor)/2;this.low=Math.round(c-a);this.high=Math.round(c+a);this.redraw()},resize_window:function(){this.viewport_container.height(this.container.height()-this.top_container.height()-this.bottom_container.height());this.nav_container.width(this.container.width());this.redraw()},reset_overview:function(){this.overview_viewport.find("canvas").remove();this.overview_viewport.height(this.default_overview_height);this.overview_box.height(this.default_overview_height);this.overview_close.hide();this.overview_highlight.hide()}});var Tool=function(g){this.name=g.name;this.params=[];var a=g.params;for(var e=0;e<a.length;e++){var d=a[e],c=d.name,b=d.label,f=d.type;if(f==="int"||f==="float"){this.params[this.params.length]=new NumberParameter(c,b,d.min,d.max,d.value)}else{if(f=="select"){this.params[this.params.length]=new SelectParameter(c,b,d.options)}else{console.log("WARNING: unrecognized tool parameter type:",c,f)}}}};$.extend(Tool.prototype,{get_param_values_dict:function(){var b={};for(var a=0;a<this.params.length;a++){var c=this.params[a];b[c.name]=JSON.stringify(c.value)}return b},get_param_values:function(){var b=[];for(var a=0;a<this.params.length;a++){b[a]=this.params[a].value}return b}});var NumberParameter=function(c,b,e,a,d){this.name=c;this.label=b;this.min=e;this.max=a;this.value=d};var SelectParameter=function(c,b,a){this.name=c;this.label=b;this.options=a;this.value=(a.length!==0?a[0][1]:null)};var Filter=function(b,a,c){this.name=b;this.index=a;this.value=c};var NumberFilter=function(b,a){this.name=b;this.index=a;this.low=-Number.MAX_VALUE;this.high=Number.MAX_VALUE;this.min=Number.MAX_VALUE;this.max=-Number.MAX_VALUE;this.slider=null;this.slider_label=null};$.extend(NumberFilter.prototype,{applies_to:function(a){if(a.length>this.index){return true}return false},keep:function(a){if(!this.applies_to(a)){return true}return(a[this.index]>=this.low&&a[this.index]<=this.high)},update_attrs:function(b){var a=false;if(!this.applies_to(b)){return a}if(b[this.index]<this.min){this.min=Math.floor(b[this.index]);a=true}if(b[this.index]>this.max){this.max=Math.ceil(b[this.index]);a=true}return a},update_ui_elt:function(){var b=this.slider.slider("option","min"),a=this.slider.slider("option","max");if(this.min<b||this.max>a){this.slider.slider("option","min",this.min);this.slider.slider("option","max",this.max);this.slider.slider("option","step",get_slider_step(this.min,this.max));this.slider.slider("option","values",[this.min,this.max])}}});var get_filters_from_dict=function(a){var g=[];for(var d=0;d<a.length;d++){var f=a[d];var c=f.name,e=f.type,b=f.index;if(e==="int"||e==="float"){g[d]=new NumberFilter(c,b)}else{g[d]=new Filter(c,b,e)}}return g};var TrackConfig=function(a){this.track=a.track;this.params=a.params;this.values={};if(a.saved_values){this.restore_values(a.saved_values)}this.onchange=a.onchange};$.extend(TrackConfig.prototype,{restore_values:function(a){var b=this;$.each(this.params,function(c,d){if(a[d.key]!==undefined){b.values[d.key]=a[d.key]}else{b.values[d.key]=d.default_value}})},build_form:function(){var b=this;var a=$("<div />");$.each(this.params,function(f,d){if(!d.hidden){var c="param_"+f;var l=$("<div class='form-row' />").appendTo(a);l.append($("<label />").attr("for",c).text(d.label+":"));if(d.type==="bool"){l.append($('<input type="checkbox" />').attr("id",c).attr("name",c).attr("checked",b.values[d.key]))}else{if(d.type==="color"){var h=b.values[d.key];var g=$("<input />").attr("id",c).attr("name",c).val(h);var j=$("<div class='tipsy tipsy-north' style='position: absolute;' />").hide();var e=$("<div style='background-color: black; padding: 10px;'></div>").appendTo(j);var k=$("<div/>").appendTo(e).farbtastic({width:100,height:100,callback:g,color:h});$("<div />").append(g).append(j).appendTo(l).bind("click",function(m){j.css({left:$(this).position().left+($(g).width()/2)-60,top:$(this).position().top+$(this.height)}).show();$(document).bind("click.color-picker",function(){j.hide();$(document).unbind("click.color-picker")});m.stopPropagation()})}else{l.append($("<input />").attr("id",c).attr("name",c).val(b.values[d.key]))}}}});return a},update_from_form:function(a){var c=this;var b=false;$.each(this.params,function(d,f){if(!f.hidden){var g="param_"+d;var e=a.find("#"+g).val();if(f.type==="float"){e=parseFloat(e)}else{if(f.type==="int"){e=parseInt(e)}else{if(f.type==="bool"){e=a.find("#"+g).is(":checked")}}}if(e!==c.values[f.key]){c.values[f.key]=e;b=true}}});if(b){this.onchange()}}});var Tile=function(a,b,c){this.track=a;this.canvas=b;this.histo_max=c};var Track=function(b,a,e,c,d){this.name=b;this.view=a;this.parent_element=e;this.data_url=(c?c:default_data_url);this.data_url_extra_params={};this.data_query_wait=(d?d:DEFAULT_DATA_QUERY_WAIT);this.dataset_check_url=converted_datasets_state_url;this.container_div=$("<div />").addClass("track").css("position","relative");if(!this.hidden){this.header_div=$("<div class='track-header' />").appendTo(this.container_div);if(this.view.editor){this.drag_div=$("<div class='draghandle' />").appendTo(this.header_div)}this.name_div=$("<div class='menubutton popup' />").appendTo(this.header_div);this.name_div.text(this.name);this.name_div.attr("id",this.name.replace(/\s+/g,"-").replace(/[^a-zA-Z0-9\-]/g,"").toLowerCase())}this.content_div=$("<div class='track-content'>").appendTo(this.container_div);this.parent_element.append(this.container_div)};$.extend(Track.prototype,{init:function(){var a=this;a.enabled=false;a.tile_cache.clear();a.data_cache.clear();a.initial_canvas=undefined;a.content_div.css("height","auto");a.container_div.removeClass("nodata error pending");if(!a.dataset_id){return}$.getJSON(converted_datasets_state_url,{hda_ldda:a.hda_ldda,dataset_id:a.dataset_id,chrom:a.view.chrom},function(b){if(!b||b==="error"||b.kind==="error"){a.container_div.addClass("error");a.content_div.text(DATA_ERROR);if(b.message){var d=a.view.tracks.indexOf(a);var c=$(" <a href='javascript:void(0);'></a>").text("View error").bind("click",function(){show_modal("Trackster Error","<pre>"+b.message+"</pre>",{Close:hide_modal})});a.content_div.append(c)}}else{if(b==="no converter"){a.container_div.addClass("error");a.content_div.text(DATA_NOCONVERTER)}else{if(b==="no data"||(b.data!==undefined&&(b.data===null||b.data.length===0))){a.container_div.addClass("nodata");a.content_div.text(DATA_NONE)}else{if(b==="pending"){a.container_div.addClass("pending");a.content_div.text(DATA_PENDING);setTimeout(function(){a.init()},a.data_query_wait)}else{if(b.status==="data"){if(b.valid_chroms){a.valid_chroms=b.valid_chroms;a.make_name_popup_menu()}a.content_div.text(DATA_OK);if(a.view.chrom){a.content_div.text("");a.content_div.css("height",a.height_px+"px");a.enabled=true;$.when(a.predraw_init()).done(function(){a.draw()})}}}}}}})},predraw_init:function(){},update_name:function(a){this.old_name=this.name;this.name=a;this.name_div.text(this.name)},revert_name:function(){this.name=this.old_name;this.name_div.text(this.name)}});var TiledTrack=function(b,h,o){var c=this,p=c.view;this.filters=(b!==undefined?get_filters_from_dict(b):[]);this.filters_available=false;this.filters_visible=false;this.tool=(h!==undefined&&obj_length(h)>0?new Tool(h):undefined);this.parent_track=o;this.child_tracks=[];if(c.hidden){return}var k=function(r,s,t){r.click(function(){var u=s.text();max=parseFloat(t.slider("option","max")),input_size=(max<=1?4:max<=1000000?max.toString().length:6),multi_value=false;if(t.slider("option","values")){input_size=2*input_size+1;multi_value=true}s.text("");$("<input type='text'/>").attr("size",input_size).attr("maxlength",input_size).attr("value",u).appendTo(s).focus().select().click(function(v){v.stopPropagation()}).blur(function(){$(this).remove();s.text(u)}).keyup(function(z){if(z.keyCode===27){$(this).trigger("blur")}else{if(z.keyCode===13){var x=t.slider("option","min"),v=t.slider("option","max"),y=function(A){return(isNaN(A)||A>v||A<x)},w=$(this).val();if(!multi_value){w=parseFloat(w);if(y(w)){alert("Parameter value must be in the range ["+x+"-"+v+"]");return $(this)}}else{w=w.split("-");w=[parseFloat(w[0]),parseFloat(w[1])];if(y(w[0])||y(w[1])){alert("Parameter value must be in the range ["+x+"-"+v+"]");return $(this)}}t.slider((multi_value?"values":"value"),w)}}})})};if(this.parent_track){this.header_div.find(".draghandle").removeClass("draghandle").addClass("child-track-icon").addClass("icon-button");this.parent_element.addClass("child-track");this.tool=undefined}this.filters_div=$("<div/>").addClass("filters").hide();this.header_div.after(this.filters_div);this.filters_div.bind("drag",function(r){r.stopPropagation()}).bind("click",function(r){r.stopPropagation()}).bind("dblclick",function(r){r.stopPropagation()});$.each(this.filters,function(x,s){var u=$("<div/>").addClass("slider-row").appendTo(c.filters_div);var r=$("<div/>").addClass("slider-label").appendTo(u);var z=$("<span/>").addClass("slider-name").text(s.name+" ").appendTo(r);var t=$("<span/>");var v=$("<span/>").addClass("slider-value").appendTo(r).append("[").append(t).append("]");var y=$("<div/>").addClass("slider").appendTo(u);s.control_element=$("<div/>").attr("id",s.name+"-filter-control").appendTo(y);var w=[0,0];s.control_element.slider({range:true,min:Number.MAX_VALUE,max:-Number.MIN_VALUE,values:[0,0],slide:function(A,B){w=B.values;t.text(B.values[0]+"-"+B.values[1]);setTimeout(function(){if(B.values[0]==w[0]&&B.values[1]==w[1]){var C=B.values;t.text(C[0]+"-"+C[1]);s.low=C[0];s.high=C[1];c.draw(true,true)}},50)},change:function(A,B){s.control_element.slider("option","slide").call(s.control_element,A,B)}});s.slider=s.control_element;s.slider_label=t;k(v,t,s.control_element);$("<div style='clear: both;'/>").appendTo(u)});if(this.tool){this.dynamic_tool_div=$("<div/>").addClass("dynamic-tool").hide();this.header_div.after(this.dynamic_tool_div);this.dynamic_tool_div.bind("drag",function(r){r.stopPropagation()}).bind("click",function(r){r.stopPropagation()}).bind("dblclick",function(r){r.stopPropagation()});var n=$("<div class='tool-name'>").appendTo(this.dynamic_tool_div).text(this.tool.name);var m=this.tool.params;var c=this;$.each(this.tool.params,function(A,s){if(s instanceof NumberParameter){var x=$("<div>").addClass("slider-row").appendTo(c.dynamic_tool_div);var u=$("<div>").addClass("slider-label").appendTo(x);var C=$("<span/>").addClass("slider-name").text(s.label+" ").appendTo(u);var t=$("<span/>").text(s.value);var y=$("<span/>").addClass("slider-value").appendTo(u).append("[").append(t).append("]");var B=$("<div/>").addClass("slider").appendTo(x);var r=$("<div id='"+s.name+"-param-control'>").appendTo(B);r.slider({min:s.min,max:s.max,step:get_slider_step(s.min,s.max),value:s.value,slide:function(F,H){var G=H.value;s.value=G;if(0<G&&G<1){G=parseFloat(G).toFixed(2)}t.text(G)},change:function(F,G){r.slider("option","slide").call(r,F,G)}});k(y,t,r);$("<div style='clear: both;'/>").appendTo(x)}else{if(s instanceof SelectParameter){var x=$("<div>").addClass("slider-row").appendTo(c.dynamic_tool_div);var u=$("<div>").addClass("slider-label").appendTo(x);var C=$("<span/>").addClass("slider-name").text(s.label+" ").appendTo(u);var E=$("<div/>").addClass("slider").appendTo(x);var w=$("<select/>").appendTo(E);w.change(function(){s.value=$(this).val()});var D=w.attr("options");for(var z=0;z<s.options.length;z++){var v=s.options[z];D[D.length]=new Option(v[0],v[1])}$("<div style='clear: both;'/>").appendTo(x)}}});var q=$("<div>").addClass("slider-row").appendTo(this.dynamic_tool_div);var l=$("<input type='submit'>").attr("value","Run").appendTo(q);var c=this;l.click(function(){c.run_tool()})}c.child_tracks_container=$("<div/>").addClass("child-tracks-container").hide();c.container_div.append(c.child_tracks_container);if(c.display_modes!==undefined){if(c.mode_div===undefined){c.mode_div=$("<div class='right-float menubutton popup' />").appendTo(c.header_div);var e=(c.track_config&&c.track_config.values.mode?c.track_config.values.mode:c.display_modes[0]);c.mode=e;c.mode_div.text(e);var d=function(r){c.mode_div.text(r);c.mode=r;c.track_config.values.mode=r;c.tile_cache.clear();c.draw()};var a={};for(var f=0,j=c.display_modes.length;f<j;f++){var g=c.display_modes[f];a[g]=function(r){return function(){d(r)}}(g)}make_popupmenu(c.mode_div,a)}else{c.mode_div.hide()}}this.make_name_popup_menu()};$.extend(TiledTrack.prototype,Track.prototype,{make_name_popup_menu:function(){var b=this;var a={};a["Edit configuration"]=function(){var h=function(){hide_modal();$(window).unbind("keypress.check_enter_esc")},f=function(){b.track_config.update_from_form($(".dialog-box"));hide_modal();$(window).unbind("keypress.check_enter_esc")},g=function(j){if((j.keyCode||j.which)===27){h()}else{if((j.keyCode||j.which)===13){f()}}};$(window).bind("keypress.check_enter_esc",g);show_modal("Configure Track",b.track_config.build_form(),{Cancel:h,OK:f})};if(b.filters_available>0){var e=(b.filters_div.is(":visible")?"Hide filters":"Show filters");a[e]=function(){b.filters_visible=(b.filters_div.is(":visible"));b.filters_div.toggle();b.make_name_popup_menu()}}if(b.tool){var e=(b.dynamic_tool_div.is(":visible")?"Hide tool":"Show tool");a[e]=function(){if(!b.dynamic_tool_div.is(":visible")){b.update_name(b.name+b.tool_region_and_parameters_str())}else{menu_option_text="Show dynamic tool";b.revert_name()}b.dynamic_tool_div.toggle();b.make_name_popup_menu()}}if(b.valid_chroms){a["List chrom/contigs with data"]=function(){show_modal("Chrom/contigs with data","<p>"+b.valid_chroms.join("<br/>")+"</p>",{Close:function(){hide_modal()}})}}var c=view;var d=function(){$("#no-tracks").show()};if(this.parent_track){c=this.parent_track;d=function(){}}a.Remove=function(){c.remove_track(b);if(c.num_tracks===0){d()}};make_popupmenu(b.name_div,a)},draw:function(a,d){var s=this.view.low,g=this.view.high,j=g-s,l=this.view.container.width(),f=l/j,m=this.view.resolution,e=$("<div style='position: relative;'></div>");if(!d){this.content_div.children().remove()}this.content_div.append(e);this.max_height=0;var o=Math.floor(s/m/DENSITY);var c={};while((o*DENSITY*m)<g){var r=l+"_"+f+"_"+o;var h=this.tile_cache.get(r);var p=o*DENSITY*this.view.resolution;var b=p+DENSITY*this.view.resolution;if(!a&&h){this.show_tile(h,e,p,f)}else{this.delayed_draw(a,r,p,b,o,m,e,f,c)}o+=1}var k=this;var q=setInterval(function(){if(obj_length(c)===0){clearInterval(q);if(d){var v=k.content_div.children();var u=false;for(var w=v.length-1,t=0;w>=t;w--){var z=$(v[w]);if(u){z.remove()}else{if(z.children().length!==0){u=true}}}}for(var y=0;y<k.filters.length;y++){k.filters[y].update_ui_elt()}var x=false;if(k.example_feature){for(var y=0;y<k.filters.length;y++){if(k.filters[y].applies_to(k.example_feature)){x=true;break}}}if(k.filters_available!==x){k.filters_available=x;if(!k.filters_available){k.filters_div.hide()}k.make_name_popup_menu()}}},50);for(var n=0;n<this.child_tracks.length;n++){this.child_tracks[n].draw(a,d)}},delayed_draw:function(b,j,g,l,c,e,k,m,f){var d=this;var h=function(u,n,p,o,s,t,q){returned_tile=d.draw_tile(n,p,o,s,t,q);var r=$("<div class='track-tile'>").prepend(returned_tile);tile_element=r;d.tile_cache.set(j,tile_element);d.show_tile(tile_element,s,g,t);delete f[u]};var a=setTimeout(function(){if(g<=d.view.high&&l>=d.view.low){var n=(b?undefined:d.tile_cache.get(j));if(n){d.show_tile(n,k,g,m);delete f[a]}else{$.when(d.data_cache.get_data(view.chrom,g,l,d.mode,e,d.data_url_extra_params)).then(function(o){if(view.reference_track&&m>CHAR_WIDTH_PX){$.when(view.reference_track.data_cache.get_data(view.chrom,g,l,d.mode,e,view.reference_track.data_url_extra_params)).then(function(p){h(a,o,e,c,k,m,p)})}else{h(a,o,e,c,k,m)}})}}},50);f[a]=true},show_tile:function(a,f,d,g){var b=this;var c=this.view.high-this.view.low,e=(d-this.view.low)*g;if(this.left_offset){e-=this.left_offset}a.css({position:"absolute",top:0,left:e,height:""});f.append(a);b.max_height=Math.max(b.max_height,a.height());b.content_div.css("height",b.max_height+"px");f.children().css("height",b.max_height+"px")},set_overview:function(){var a=this.view;if(this.initial_canvas&&this.is_overview){a.overview_close.show();a.overview_viewport.append(this.initial_canvas);a.overview_highlight.show().height(this.initial_canvas.height());a.overview_viewport.height(this.initial_canvas.height()+a.overview_box.height())}$(window).trigger("resize")},run_tool:function(){var b={dataset_id:this.original_dataset_id,chrom:this.view.chrom,low:this.view.low,high:this.view.high,tool_id:this.tool.name};$.extend(b,this.tool.get_param_values_dict());var d=this,c=b.tool_id+d.tool_region_and_parameters_str(b.chrom,b.low,b.high),e;if(d.track_type==="FeatureTrack"){e=new ToolDataFeatureTrack(c,view,d.hda_ldda,undefined,{},{},d)}this.add_track(e);e.content_div.text("Starting job.");view.has_changes=true;var a=function(){$.getJSON(run_tool_url,b,function(f){if(f==="no converter"){e.container_div.addClass("error");e.content_div.text(DATA_NOCONVERTER)}else{if(f.error){e.container_div.addClass("error");e.content_div.text(DATA_CANNOT_RUN_TOOL+f.message)}else{if(f==="pending"){e.container_div.addClass("pending");e.content_div.text("Converting input data so that it can be easily reused.");setTimeout(a,2000)}else{e.dataset_id=f.dataset_id;e.content_div.text("Running job.");e.init()}}}})};a()},tool_region_and_parameters_str:function(c,a,d){var b=this,e=(c!==undefined&&a!==undefined&&d!==undefined?c+":"+a+"-"+d:"all");return" - region=["+e+"], parameters=["+b.tool.get_param_values().join(", ")+"]"},add_track:function(a){a.track_id=this.track_id+"_"+this.child_tracks.length;a.container_div.attr("id","track_"+a.track_id);this.child_tracks_container.append(a.container_div);sortable(a.container_div,".child-track-icon");if(!$(this.child_tracks_container).is(":visible")){this.child_tracks_container.show()}this.child_tracks.push(a)},remove_track:function(a){a.container_div.fadeOut("slow",function(){$(this).remove()})}});var LabelTrack=function(a,b){this.track_type="LabelTrack";this.hidden=true;Track.call(this,null,a,b);this.container_div.addClass("label-track")};$.extend(LabelTrack.prototype,Track.prototype,{draw:function(){var c=this.view,d=c.high-c.low,g=Math.floor(Math.pow(10,Math.floor(Math.log(d)/Math.log(10)))),a=Math.floor(c.low/g)*g,e=this.view.container.width(),b=$("<div style='position: relative; height: 1.3em;'></div>");while(a<c.high){var f=(a-c.low)/d*e;b.append($("<div class='label'>"+commatize(a)+"</div>").css({position:"absolute",left:f-1}));a+=g}this.content_div.children(":first").remove();this.content_div.append(b)}});var ReferenceTrack=function(a){this.track_type="ReferenceTrack";this.hidden=true;Track.call(this,null,a,a.top_labeltrack);TiledTrack.call(this);a.reference_track=this;this.left_offset=200;this.height_px=12;this.font=DEFAULT_FONT;this.container_div.addClass("reference-track");this.content_div.css("background","none");this.content_div.css("min-height","0px");this.content_div.css("border","none");this.data_url=reference_url;this.data_url_extra_params={dbkey:a.dbkey};this.data_cache=new DataManager(CACHED_DATA,this,false);this.tile_cache=new Cache(CACHED_TILES_LINE)};$.extend(ReferenceTrack.prototype,TiledTrack.prototype,{draw_tile:function(m,g,b,j,n){var f=this,d=DENSITY*g;if(n>CHAR_WIDTH_PX){if(m===null){f.content_div.css("height","0px");return}var e=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(e)}e=$(e);var l=e.get(0).getContext("2d");e.get(0).width=Math.ceil(d*n+f.left_offset);e.get(0).height=f.height_px;l.font=DEFAULT_FONT;l.textAlign="center";for(var h=0,k=m.length;h<k;h++){var a=Math.round(h*n);l.fillText(m[h],a+f.left_offset,10)}return e}this.content_div.css("height","0px")}});var LineTrack=function(e,c,f,a,d){var b=this;this.track_type="LineTrack";this.display_modes=["Histogram","Line","Filled","Intensity"];this.mode="Histogram";Track.call(this,e,c,c.viewport_container);TiledTrack.call(this);this.min_height_px=16;this.max_height_px=400;this.height_px=80;this.hda_ldda=f;this.dataset_id=a;this.original_dataset_id=a;this.data_cache=new DataManager(CACHED_DATA,this);this.tile_cache=new Cache(CACHED_TILES_LINE);this.track_config=new TrackConfig({track:this,params:[{key:"color",label:"Color",type:"color",default_value:"black"},{key:"min_value",label:"Min Value",type:"float",default_value:undefined},{key:"max_value",label:"Max Value",type:"float",default_value:undefined},{key:"mode",type:"string",default_value:this.mode,hidden:true},{key:"height",type:"int",default_value:this.height_px,hidden:true}],saved_values:d,onchange:function(){b.vertical_range=b.prefs.max_value-b.prefs.min_value;$("#linetrack_"+b.track_id+"_minval").text(b.prefs.min_value);$("#linetrack_"+b.track_id+"_maxval").text(b.prefs.max_value);b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;this.height_px=this.track_config.values.height;this.vertical_range=this.track_config.values.max_value-this.track_config.values.min_value;(function(g){var k=false;var j=false;var h=$("<div class='track-resize'>");$(g.container_div).hover(function(){k=true;h.show()},function(){k=false;if(!j){h.hide()}});h.hide().bind("dragstart",function(l,m){j=true;m.original_height=$(g.content_div).height()}).bind("drag",function(m,n){var l=Math.min(Math.max(n.original_height+n.deltaY,g.min_height_px),g.max_height_px);$(g.content_div).css("height",l);g.height_px=l;g.draw(true)}).bind("dragend",function(l,m){g.tile_cache.clear();j=false;if(!k){h.hide()}g.track_config.values.height=g.height_px}).appendTo(g.container_div)})(this)};$.extend(LineTrack.prototype,TiledTrack.prototype,{predraw_init:function(){var a=this,b=a.view.tracks.indexOf(a);a.vertical_range=undefined;return $.getJSON(a.data_url,{stats:true,chrom:a.view.chrom,low:null,high:null,hda_ldda:a.hda_ldda,dataset_id:a.dataset_id},function(c){a.container_div.addClass("line-track");var e=c.data;if(isNaN(parseFloat(a.prefs.min_value))||isNaN(parseFloat(a.prefs.max_value))){a.prefs.min_value=e.min;a.prefs.max_value=e.max;$("#track_"+b+"_minval").val(a.prefs.min_value);$("#track_"+b+"_maxval").val(a.prefs.max_value)}a.vertical_range=a.prefs.max_value-a.prefs.min_value;a.total_frequency=e.total_frequency;a.container_div.find(".yaxislabel").remove();var f=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_minval").text(round_1000(a.prefs.min_value));var d=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_maxval").text(round_1000(a.prefs.max_value));d.css({position:"absolute",top:"24px",left:"10px"});d.prependTo(a.container_div);f.css({position:"absolute",bottom:"2px",left:"10px"});f.prependTo(a.container_div)})},draw_tile:function(j,q,t,c,e){if(this.vertical_range===undefined){return}var o=this,u=t*DENSITY*q,a=DENSITY*q,B=q+"_"+t,v={hda_ldda:this.hda_ldda,dataset_id:this.dataset_id,resolution:this.view.resolution};var b=document.createElement("canvas"),z=j.data;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(b)}b=$(b);b.get(0).width=Math.ceil(a*e);b.get(0).height=o.height_px;var p=b.get(0).getContext("2d"),k=false,l=o.prefs.min_value,g=o.prefs.max_value,n=o.vertical_range,w=o.total_frequency,d=o.height_px,m=o.mode;var A=Math.round(d+l/n*d);p.beginPath();p.moveTo(0,A);p.lineTo(a*e,A);p.fillStyle="#aaa";p.stroke();p.beginPath();p.fillStyle=o.prefs.color;var x,h,f;if(z.length>1){f=Math.ceil((z[1][0]-z[0][0])*e)}else{f=10}for(var r=0,s=z.length;r<s;r++){x=Math.round((z[r][0]-u)*e);h=z[r][1];if(h===null){if(k&&m==="Filled"){p.lineTo(x,d)}k=false;continue}if(h<l){h=l}else{if(h>g){h=g}}if(m==="Histogram"){h=Math.round(h/n*d);p.fillRect(x,A,f,-h)}else{if(m==="Intensity"){h=255-Math.floor((h-l)/n*255);p.fillStyle="rgb("+h+","+h+","+h+")";p.fillRect(x,0,f,d)}else{h=Math.round(d-(h-l)/n*d);if(k){p.lineTo(x,h)}else{k=true;if(m==="Filled"){p.moveTo(x,d);p.lineTo(x,h)}else{p.moveTo(x,h)}}}}}if(m==="Filled"){if(k){p.lineTo(x,A);p.lineTo(0,A)}p.fill()}else{p.stroke()}return b}});var FeatureTrack=function(a,f,e,j,h,c,d,g){var b=this;this.track_type="FeatureTrack";this.display_modes=["Auto","Dense","Squish","Pack"];this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{key:"show_counts",label:"Show summary counts",type:"bool",default_value:true},{key:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:h,onchange:function(){b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;Track.call(this,a,f,f.viewport_container);TiledTrack.call(this,c,d,g);this.height_px=0;this.container_div.addClass("feature-track");this.hda_ldda=e;this.dataset_id=j;this.original_dataset_id=j;this.zo_slots={};this.show_labels_scale=0.001;this.showing_details=false;this.summary_draw_height=30;this.default_font=DEFAULT_FONT;this.inc_slots={};this.start_end_dct={};this.tile_cache=new Cache(CACHED_TILES_FEATURE);this.data_cache=new DataManager(20,this);this.left_offset=200};$.extend(FeatureTrack.prototype,TiledTrack.prototype,{incremental_slots:function(a,h,p){var q=this.inc_slots[a];if(!q||(q.mode!==p)){q={};q.w_scale=a;q.mode=p;this.inc_slots[a]=q;this.start_end_dct[a]={}}var l=q.w_scale,w=[],x=[],j=0,n=this.view.max_low;for(var u=0,v=h.length;u<v;u++){var g=h[u],k=g[0];if(q[k]!==undefined){j=Math.max(j,q[k]);x.push(q[k])}else{w.push(u)}}var d=this.start_end_dct[a];var m=function(D,E){for(var C=0;C<=MAX_FEATURE_DEPTH;C++){var A=false,F=d[C];if(F!==undefined){for(var z=0,B=F.length;z<B;z++){var y=F[z];if(E>y[0]&&D<y[1]){A=true;break}}}if(!A){return C}}return -1};for(var u=0,v=w.length;u<v;u++){var g=h[w[u]],k=g[0],s=g[1],b=g[2],o=g[3],c=Math.floor((s-n)*l),f=Math.ceil((b-n)*l),t=CONTEXT.measureText(o).width,e;if(o!==undefined&&p==="Pack"){t+=(LABEL_SPACING+PACK_SPACING);if(c-t>=0){c-=t;e="left"}else{f+=t;e="right"}}var r=m(c,f);if(r>=0){if(d[r]===undefined){d[r]=[]}d[r].push([c,f]);q[k]=r;j=Math.max(j,r)}else{}}return j+1},draw_summary_tree:function(b,o,n,l,r,j,f,e){var c=j+LABEL_SPACING+CHAR_HEIGHT_PX;delta_x_px=Math.ceil(n*r);var h=$("<div />").addClass("yaxislabel");h.text(l);h.css({position:"absolute",top:"22px",left:"10px"});h.prependTo(this.container_div);var q=b.get(0).getContext("2d");for(var d=0,g=o.length;d<g;d++){var m=Math.floor((o[d][0]-f)*r);var k=o[d][1];if(!k){continue}var p=k/l*j;q.fillStyle="black";q.fillRect(m+e,c-p,delta_x_px,p);var a=4;if(this.prefs.show_counts&&(q.measureText(k).width+a)<delta_x_px){q.fillStyle="#666";q.textAlign="center";q.fillText(k,m+e+(delta_x_px/2),10)}}},draw_element:function(p,f,g,x,j,r,I,M,N,a,A){var u=x[0],K=x[1],C=x[2]-1,s=x[3],D=Math.floor(Math.max(0,(K-r)*M)),q=Math.ceil(Math.min(a,Math.max(0,(C-r)*M))),B=ERROR_PADDING+(g==="Dense"?0:(0+j))*N,o,G,t=null,O=null,d=this.prefs.block_color,F=this.prefs.label_color;if(g==="Dense"){p.fillStyle=d;p.fillRect(D+A,B,q-D,DENSE_FEATURE_HEIGHT)}else{if(g==="no_detail"){p.fillStyle=d;p.fillRect(D+A,B+5,q-D,DENSE_FEATURE_HEIGHT)}else{var n=x[4],z=x[5],E=x[6],e=x[7];if(z&&E){t=Math.floor(Math.max(0,(z-r)*M));O=Math.ceil(Math.min(a,Math.max(0,(E-r)*M)))}var L,v;if(g==="Squish"){L=1;v=SQUISH_FEATURE_HEIGHT}else{L=5;v=PACK_FEATURE_HEIGHT}if(!e){if(x.strand){if(x.strand==="+"){p.fillStyle=RIGHT_STRAND_INV}else{if(x.strand==="-"){p.fillStyle=LEFT_STRAND_INV}}}else{p.fillStyle=d}p.fillRect(D+A,B,q-D,v)}else{var m,w;if(g==="Squish"){p.fillStyle=CONNECTOR_COLOR;m=B+Math.floor(SQUISH_FEATURE_HEIGHT/2)+1;w=1}else{if(n){var m=B;var w=v;if(n==="+"){p.fillStyle=RIGHT_STRAND}else{if(n==="-"){p.fillStyle=LEFT_STRAND}}}else{p.fillStyle=CONNECTOR_COLOR;m+=(SQUISH_FEATURE_HEIGHT/2)+1;w=1}}p.fillRect(D+A,m,q-D,w);for(var J=0,c=e.length;J<c;J++){var h=e[J],b=Math.floor(Math.max(0,(h[0]-r)*M)),y=Math.ceil(Math.min(a,Math.max((h[1]-1-r)*M)));if(b>y){continue}p.fillStyle=d;p.fillRect(b+A,B+(v-L)/2+1,y-b,L);if(t!==undefined&&!(b>O||y<t)){var H=Math.max(b,t),l=Math.min(y,O);p.fillRect(H+A,B+1,l-H,v)}}}if(g==="Pack"&&K>r){p.fillStyle=F;if(f===0&&D-p.measureText(s).width<0){p.textAlign="left";p.fillText(s,q+A+LABEL_SPACING,B+8)}else{p.textAlign="right";p.fillText(s,D+A-LABEL_SPACING,B+8)}p.fillStyle=d}}}},get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="no_detail"){a=NO_DETAIL_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT}}}return a},draw_tile:function(o,x,C,k,m,d){var t=this;var E=C*DENSITY*x,a=(C+1)*DENSITY*x,q=a-E,F={hda_ldda:t.hda_ldda,dataset_id:t.dataset_id,resolution:this.view.resolution,mode:this.mode};var v=Math.ceil(q*m),s=this.mode,H=25,g=this.left_offset,p,h;var c=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(c)}c=$(c);if(s==="Auto"){if(o.dataset_type==="summary_tree"){s=o.dataset_type}else{if(o.extra_info==="no_detail"){s="no_detail"}else{var G=o.data;if((G.length&&G.length<4)||(this.view.high-this.view.low>MIN_SQUISH_VIEW_WIDTH)){s="Squish"}else{s="Pack"}}}}var y=this.get_y_scale(s);if(s==="summary_tree"){h=this.summary_draw_height}if(s==="Dense"){h=H}else{if(s==="no_detail"||s==="Squish"||s==="Pack"){h=this.incremental_slots(m,o.data,s)*y+H;p=this.inc_slots[m]}}c.get(0).width=v+g;c.get(0).height=h;if(o.dataset_type==="summary_tree"){c.get(0).height+=LABEL_SPACING+CHAR_HEIGHT_PX}k.parent().css("height",Math.max(this.height_px,h)+"px");var w=c.get(0).getContext("2d");w.fillStyle=this.prefs.block_color;w.font=this.default_font;w.textAlign="right";this.container_div.find(".yaxislabel").remove();if(s==="summary_tree"){this.draw_summary_tree(c,o.data,o.delta,o.max,m,h,E,g);return c}if(o.message){c.css({"border-top":"1px solid red"});w.fillStyle="red";w.textAlign="left";var r=w.textBaseline;w.textBaseline="top";w.fillText(o.message,g,0);w.textBaseline=r;if(!o.data){return c}}this.example_feature=(o.data.length?o.data[0]:undefined);var G=o.data;for(var z=0,B=G.length;z<B;z++){var j=G[z],l=j[0],u=j[1],b=j[2],e=(p&&p[l]!==undefined?p[l]:null);var A=false;var n;for(var D=0;D<this.filters.length;D++){n=this.filters[D];n.update_attrs(j);if(!n.keep(j)){A=true;break}}if(A){continue}if(is_overlap([u,b],[E,a])&&(s=="Dense"||e!==null)){this.draw_element(w,C,s,j,e,E,a,m,y,v,g,d)}}return c}});var VcfTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_type="VcfTrack"};$.extend(VcfTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{draw_element:function(u,p,j,e,x,c,m,v,s){var j=data[i],l=j[0],t=j[1],d=j[2]-1,o=j[3],g=Math.floor(Math.max(0,(t-x)*m)),k=Math.ceil(Math.min(s,Math.max(0,(d-x)*m))),f=ERROR_PADDING+(p==="Dense"?0:(0+e))*v,a,y,b=null,n=null;if(no_label){u.fillStyle=block_color;u.fillRect(g+left_offset,f+5,k-g,1)}else{var w=j[4],r=j[5],h=j[6];a=9;y=1;u.fillRect(g+left_offset,f,k-g,a);if(p!=="Dense"&&o!==undefined&&t>x){u.fillStyle=label_color;if(tile_index===0&&g-u.measureText(o).width<0){u.textAlign="left";u.fillText(o,k+2+left_offset,f+8)}else{u.textAlign="right";u.fillText(o,g-2+left_offset,f+8)}u.fillStyle=block_color}var q=w+" / "+r;if(t>x&&u.measureText(q).width<(k-g)){u.fillStyle="white";u.textAlign="center";u.fillText(q,left_offset+g+(k-g)/2,f+8);u.fillStyle=block_color}}}});var ReadTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{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:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:c,onchange:function(){this.track.tile_cache.clear();this.track.draw()}});this.prefs=this.track_config.values;this.track_type="ReadTrack";this.make_name_popup_menu()};$.extend(ReadTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT;if(this.track_config.values.show_insertions){a*=2}}}return a},draw_read:function(m,d,J,n,D,G,e,o,y,a){m.textAlign="center";var l=this,u=[n,D],C=0,z=0,f=0;var r=[];if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){f=Math.round(J/2)}if(!e){e=[[0,o.length]]}for(var h=0,k=e.length;h<k;h++){var b=e[h],g="MIDNSHP=X"[b[0]],v=b[1];if(g==="H"||g==="S"){C-=v}var x=G+C,B=Math.floor(Math.max(0,(x-n)*J)),E=Math.floor(Math.max(0,(x+v-n)*J));switch(g){case"H":break;case"S":case"M":case"=":var p=compute_overlap([x,x+v],u);if(p!==NO_OVERLAP){var q=o.slice(z,z+v);if(f>0){m.fillStyle=this.prefs.block_color;m.fillRect(B+this.left_offset-f,y+1,E-B,9);m.fillStyle=CONNECTOR_COLOR;for(var I=0,j=q.length;I<j;I++){if(this.track_config.values.show_differences&&a){var s=a[x-n+I];if(!s||s.toLowerCase()===q[I].toLowerCase()){continue}}if(x+I>=n&&x+I<=D){var A=Math.floor(Math.max(0,(x+I-n)*J));m.fillText(q[I],A+this.left_offset,y+9)}}}else{m.fillStyle=this.prefs.block_color;m.fillRect(B+this.left_offset,y+(this.mode!=="Dense"?4:5),E-B,(d!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}z+=v;C+=v;break;case"N":m.fillStyle=CONNECTOR_COLOR;m.fillRect(B+this.left_offset-f,y+5,E-B,1);C+=v;break;case"D":m.fillStyle="red";m.fillRect(B+this.left_offset-f,y+4,E-B,3);C+=v;break;case"P":break;case"I":var p=compute_overlap([x,x+v],u),K=this.left_offset+B-f;if(p!==NO_OVERLAP){var q=o.slice(z,z+v);if(this.track_config.values.show_insertions){var w=this.left_offset+B-(E-B)/2;if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){m.fillStyle="yellow";m.fillRect(w-f,y-9,E-B,9);r[r.length]={type:"triangle",data:[K,y+4,5]};m.fillStyle=CONNECTOR_COLOR;switch(p){case (OVERLAP_START):q=q.slice(n-x);break;case (OVERLAP_END):q=q.slice(0,x-D);break;case (CONTAINED_BY):break;case (CONTAINS):q=q.slice(n-x,x-D);break}for(var I=0,j=q.length;I<j;I++){var A=Math.floor(Math.max(0,(x+I-n)*J));m.fillText(q[I],A+this.left_offset-(E-B)/2,y)}}else{m.fillStyle="yellow";m.fillRect(w,y+(this.mode!=="Dense"?2:5),E-B,(d!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}else{if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){r[r.length]={type:"text",data:[q.length,K,y+9]}}else{}}}z+=v;break;case"X":z+=v;break}}m.fillStyle="yellow";var t,L,H;for(var F=0;F<r.length;F++){t=r[F];L=t.type;H=t.data;if(L==="text"){m.font="bold "+DEFAULT_FONT;m.fillText(H[0],H[1],H[2]);m.font=DEFAULT_FONT}else{if(L=="triangle"){m.drawDownwardEquilateralTriangle(H[0],H[1],H[2])}}}},draw_element:function(w,y,r,k,e,A,b,n,x,u,f,c){var m=k[0],v=k[1],d=k[2],o=k[3],h=Math.floor(Math.max(0,(v-A)*n)),j=Math.ceil(Math.min(u,Math.max(0,(d-A)*n))),g=(r==="Dense"?1:(1+e))*x,z=this.prefs.block_color,l=this.prefs.label_color,t=0;if((r==="Pack"||this.mode==="Auto")&&n>CHAR_WIDTH_PX){var t=Math.round(n/2)}w.fillStyle=z;if(k[5] instanceof Array){var s=Math.floor(Math.max(0,(k[4][0]-A)*n)),q=Math.ceil(Math.min(u,Math.max(0,(k[4][1]-A)*n))),p=Math.floor(Math.max(0,(k[5][0]-A)*n)),a=Math.ceil(Math.min(u,Math.max(0,(k[5][1]-A)*n)));if(k[4][1]>=A&&k[4][0]<=b&&k[4][2]){this.draw_read(w,r,n,A,b,k[4][0],k[4][2],k[4][3],g,c)}if(k[5][1]>=A&&k[5][0]<=b&&k[5][2]){this.draw_read(w,r,n,A,b,k[5][0],k[5][2],k[5][3],g,c)}if(p>q){w.fillStyle=CONNECTOR_COLOR;w.dashedLine(q+f-t,g+5,f+p-t,g+5)}}else{w.fillStyle=z;this.draw_read(w,r,n,A,b,v,k[4],k[5],g,c)}if(r==="Pack"&&v>A){w.fillStyle=this.prefs.label_color;if(y===0&&h-w.measureText(o).width<0){w.textAlign="left";w.fillText(o,j+f+LABEL_SPACING-t,g+8)}else{w.textAlign="right";w.fillText(o,h+f-LABEL_SPACING-t,g+8)}w.fillStyle=z}}});var ToolDataFeatureTrack=function(e,c,g,a,d,f,b){FeatureTrack.call(this,e,c,g,a,d,f,{},b);this.track_type="ToolDataFeatureTrack";this.data_url=raw_data_url;this.data_query_wait=1000;this.dataset_check_url=dataset_state_url};$.extend(ToolDataFeatureTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{predraw_init:function(){var b=this;var a=function(){if(b.data_cache.size()===0){setTimeout(a,300)}else{b.data_url=default_data_url;b.data_query_wait=DEFAULT_DATA_QUERY_WAIT;b.dataset_state_url=converted_datasets_state_url;$.getJSON(b.dataset_state_url,{dataset_id:b.dataset_id,hda_ldda:b.hda_ldda},function(c){})}};a()}}); \ No newline at end of file --- a/static/scripts/trackster.js Thu Mar 31 14:09:47 2011 -0400 +++ b/static/scripts/trackster.js Thu Mar 31 15:07:02 2011 -0400 @@ -817,9 +817,27 @@ /** * Encapsulation of tools that users can apply to tracks/datasets. */ -var Tool = function(name, params) { - this.name = name; - this.params = params; +var Tool = function(tool_dict) { + // Unpack tool from dictionary. + this.name = tool_dict.name; + this.params = []; + var params_dict = tool_dict.params; + for (var i = 0; i < params_dict.length; i++) { + var param_dict = params_dict[i], + name = param_dict.name, + label = param_dict.label, + type = param_dict.type; + if (type === "int" || type === "float") { + this.params[this.params.length] = + new NumberParameter(name, label, param_dict.min, param_dict.max, param_dict.value); + } + else if (type == "select") { + this.params[this.params.length] = new SelectParameter(name, label, param_dict.options); + } + else { + console.log("WARNING: unrecognized tool parameter type:", name, type); + } + } }; $.extend(Tool.prototype, { // Returns a dictionary of parameter values; key is parameter name, value @@ -828,7 +846,7 @@ var param_dict = {}; for (var i = 0; i < this.params.length; i++) { var param = this.params[i]; - param_dict[param.name] = param.value; + param_dict[param.name] = JSON.stringify(param.value); } return param_dict; }, @@ -842,36 +860,22 @@ } }); -var NumberToolParameter = function(name, label, min, max, init_value) { +/** + * Tool parameters. + */ +var NumberParameter = function(name, label, min, max, init_value) { this.name = name; this.label = label; this.min = min; this.max = max; this.value = init_value; -} +}; -// Uses a dictionary to construct a tool object. -var get_tool_from_dict = function(tool_dict) { - if (obj_length(tool_dict) === 0) { - return undefined; - } - - // Get tool. - var tool_name = tool_dict.name; - var params_dict = tool_dict.params; - var params = Array(); - for (var i = 0; i < params_dict.length; i++) { - var param_dict = params_dict[i]; - var - name = param_dict.name, - label = param_dict.label, - type = param_dict.type, - min = param_dict.min, - max = param_dict.max, - value = param_dict.value; - params[params.length] = new NumberToolParameter(name, label, min, max, value); - } - return new Tool(tool_name, params); +var SelectParameter = function(name, label, options) { + this.name = name; + this.label = label; + this.options = options; + this.value = (options.length !== 0 ? options[0][1] : null); }; /** @@ -1203,7 +1207,7 @@ } }); -var TiledTrack = function(filters, tool, parent_track) { +var TiledTrack = function(filters, tool_dict, parent_track) { var track = this, view = track.view; @@ -1212,7 +1216,7 @@ // filters_available is determined by data, filters_visible is set by user. this.filters_available = false; this.filters_visible = false; - this.tool = (tool !== undefined ? get_tool_from_dict( tool ) : undefined); + this.tool = (tool_dict !== undefined && obj_length(tool_dict) > 0 ? new Tool(tool_dict) : undefined); // // TODO: Right now there is only the notion of a parent track and multiple child tracks. However, @@ -1381,42 +1385,65 @@ var tool_params = this.tool.params; var track = this; $.each(this.tool.params, function(index, param) { - var param_div = $("<div>").addClass("slider-row").appendTo(track.dynamic_tool_div); - // Slider label. - var label_div = $("<div>").addClass("slider-label").appendTo(param_div); - var name_span = $("<span/>").addClass("slider-name").text(param.label + " ").appendTo(label_div); - var values_span = $("<span/>").text(param.value); - var values_span_container = $("<span/>").addClass("slider-value").appendTo(label_div).append("[").append(values_span).append("]"); + if (param instanceof NumberParameter) { + var param_div = $("<div>").addClass("slider-row").appendTo(track.dynamic_tool_div); - // Slider. - var slider_div = $("<div/>").addClass("slider").appendTo(param_div); - var slider = $("<div id='" + param.name + "-param-control'>").appendTo(slider_div); - // Step must have a value so that (max-min)%step == 0. - slider.slider({ - min: param.min, - max: param.max, - step: get_slider_step(param.min, param.max), - value: param.value, - slide: function(event, ui) { - var value = ui.value; - param.value = value; - // Set new value in UI. - if (0 < value && value < 1) { - value = parseFloat(value).toFixed(2); - } - values_span.text(value); - }, - change: function(event, ui) { - slider.slider("option", "slide").call(slider, event, ui); - } - }); + // Slider label. + var label_div = $("<div>").addClass("slider-label").appendTo(param_div); + var name_span = $("<span/>").addClass("slider-name").text(param.label + " ").appendTo(label_div); + var values_span = $("<span/>").text(param.value); + var values_span_container = $("<span/>").addClass("slider-value").appendTo(label_div).append("[").append(values_span).append("]"); - // Enable users to edit parameter's value via text box. - edit_slider_values(values_span_container, values_span, slider); + // Slider. + var slider_div = $("<div/>").addClass("slider").appendTo(param_div); + var slider = $("<div id='" + param.name + "-param-control'>").appendTo(slider_div); + // Step must have a value so that (max-min)%step == 0. + slider.slider({ + min: param.min, + max: param.max, + step: get_slider_step(param.min, param.max), + value: param.value, + slide: function(event, ui) { + var value = ui.value; + param.value = value; + // Set new value in UI. + if (0 < value && value < 1) { + value = parseFloat(value).toFixed(2); + } + values_span.text(value); + }, + change: function(event, ui) { + slider.slider("option", "slide").call(slider, event, ui); + } + }); - // Add to clear floating layout. - $("<div style='clear: both;'/>").appendTo(param_div); + // Enable users to edit parameter's value via text box. + edit_slider_values(values_span_container, values_span, slider); + + // Add to clear floating layout. + $("<div style='clear: both;'/>").appendTo(param_div); + } + else if (param instanceof SelectParameter) { + var param_div = $("<div>").addClass("slider-row").appendTo(track.dynamic_tool_div); + + // Param label. + var label_div = $("<div>").addClass("slider-label").appendTo(param_div); + var name_span = $("<span/>").addClass("slider-name").text(param.label + " ").appendTo(label_div); + + // Param selector. + var select_div = $("<div/>").addClass("slider").appendTo(param_div); + var select_obj = $("<select/>").appendTo(select_div); + select_obj.change(function() {param.value = $(this).val();} ); + var options = select_obj.attr("options"); + for (var i = 0; i < param.options.length; i++) { + var option_data = param.options[i] + options[options.length] = new Option(option_data[0], option_data[1]); + } + + // Add to clear floating layout. + $("<div style='clear: both;'/>").appendTo(param_div); + } }); // Add 'Go' button. Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: dannon: mapping change: For data libraries of sufficient size, eager loading related to getting the root_folder of a library was causing huge delays. This should reduce the delay in viewing a library of ~500 items by about 90%.
by Bitbucket 31 Mar '11

31 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/3f3740a5f1c9/ changeset: r5291:3f3740a5f1c9 user: dannon date: 2011-03-31 20:09:47 summary: mapping change: For data libraries of sufficient size, eager loading related to getting the root_folder of a library was causing huge delays. This should reduce the delay in viewing a library of ~500 items by about 90%. affected #: 1 file (17 bytes) --- a/lib/galaxy/model/mapping.py Thu Mar 31 11:27:49 2011 -0400 +++ b/lib/galaxy/model/mapping.py Thu Mar 31 14:09:47 2011 -0400 @@ -1268,7 +1268,7 @@ assign_mapper( context, Library, Library.table, properties=dict( root_folder=relation( LibraryFolder, backref=backref( "library_root" ) ) - ) + ) ) assign_mapper( context, LibraryInfoAssociation, LibraryInfoAssociation.table, @@ -1281,26 +1281,26 @@ ) ) assign_mapper( context, LibraryFolder, LibraryFolder.table, - properties=dict( - folders=relation( - LibraryFolder, + properties=dict( + folders=relation( + LibraryFolder, primaryjoin=( LibraryFolder.table.c.parent_id == LibraryFolder.table.c.id ), order_by=asc( LibraryFolder.table.c.name ), backref=backref( "parent", primaryjoin=( LibraryFolder.table.c.parent_id == LibraryFolder.table.c.id ), remote_side=[LibraryFolder.table.c.id] ) ), - active_folders=relation( LibraryFolder, - primaryjoin=( ( LibraryFolder.table.c.parent_id == LibraryFolder.table.c.id ) & ( not_( LibraryFolder.table.c.deleted ) ) ), - order_by=asc( LibraryFolder.table.c.name ), + active_folders=relation( LibraryFolder, + primaryjoin=( ( LibraryFolder.table.c.parent_id == LibraryFolder.table.c.id ) & ( not_( LibraryFolder.table.c.deleted ) ) ), + order_by=asc( LibraryFolder.table.c.name ), lazy=True, #"""sqlalchemy.exceptions.ArgumentError: Error creating eager relationship 'active_folders' on parent class '<class 'galaxy.model.LibraryFolder'>' to child class '<class 'galaxy.model.LibraryFolder'>': Cant use eager loading on a self referential relationship.""" viewonly=True ), datasets=relation( LibraryDataset, - primaryjoin=( ( LibraryDataset.table.c.folder_id == LibraryFolder.table.c.id ) ), - order_by=asc( LibraryDataset.table.c._name ), - lazy=False, + primaryjoin=( ( LibraryDataset.table.c.folder_id == LibraryFolder.table.c.id ) ), + order_by=asc( LibraryDataset.table.c._name ), + lazy=True, viewonly=True ), active_datasets=relation( LibraryDataset, primaryjoin=( ( LibraryDataset.table.c.folder_id == LibraryFolder.table.c.id ) & ( not_( LibraryDataset.table.c.deleted ) ) ), - order_by=asc( LibraryDataset.table.c._name ), - lazy=False, + order_by=asc( LibraryDataset.table.c._name ), + lazy=True, viewonly=True ) ) ) Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: dannon: workflows api: patch from Tobias Wohlfrom <twohlfrom@illumina.com>
by Bitbucket 31 Mar '11

31 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/93ca67adcc56/ changeset: r5290:93ca67adcc56 user: dannon date: 2011-03-31 17:27:49 summary: workflows api: patch from Tobias Wohlfrom <twohlfrom(a)illumina.com> Fixed label output in workflow API in order to map the input datasets. affected #: 1 file (9 bytes) --- a/lib/galaxy/web/api/workflows.py Thu Mar 31 10:16:40 2011 -0400 +++ b/lib/galaxy/web/api/workflows.py Thu Mar 31 11:27:49 2011 -0400 @@ -57,7 +57,7 @@ inputs = {} for step in latest_workflow.steps: if step.type == 'data_input': - inputs[step.id] = {'label':"Input Dataset", 'value':""} + inputs[step.id] = {'label':step.tool_inputs['name'], 'value':""} else: pass # Eventually, allow regular tool parameters to be inserted and modified at runtime. Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: dan: Fix for wrapping input values for change_format and label tags when tool is using check_values="false". Fixes issue seen when e.g. using an output label in a data_source tool.
by Bitbucket 31 Mar '11

31 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/b453988dce62/ changeset: r5289:b453988dce62 user: dan date: 2011-03-31 16:16:40 summary: Fix for wrapping input values for change_format and label tags when tool is using check_values="false". Fixes issue seen when e.g. using an output label in a data_source tool. affected #: 1 file (309 bytes) --- a/lib/galaxy/tools/actions/__init__.py Wed Mar 30 17:20:10 2011 -0400 +++ b/lib/galaxy/tools/actions/__init__.py Thu Mar 31 10:16:40 2011 -0400 @@ -133,16 +133,18 @@ else: new_list.append( value ) return new_list - def wrap_values( inputs, input_values ): + def wrap_values( inputs, input_values, skip_missing_values = False ): # Wrap tool inputs as necessary for input in inputs.itervalues(): + if input.name not in input_values and skip_missing_values: + continue if isinstance( input, Repeat ): for d in input_values[ input.name ]: - wrap_values( input.inputs, d ) + wrap_values( input.inputs, d, skip_missing_values = skip_missing_values ) elif isinstance( input, Conditional ): values = input_values[ input.name ] current = values[ "__current_case__" ] - wrap_values( input.cases[current].inputs, values ) + wrap_values( input.cases[current].inputs, values, skip_missing_values = skip_missing_values ) elif isinstance( input, DataToolParameter ): input_values[ input.name ] = \ galaxy.tools.DatasetFilenameWrapper( input_values[ input.name ], @@ -254,7 +256,7 @@ if output.change_format: if params is None: params = make_dict_copy( incoming ) - wrap_values( tool.inputs, params ) + wrap_values( tool.inputs, params, skip_missing_values = not tool.check_values ) for change_elem in output.change_format: for when_elem in change_elem.findall( 'when' ): check = when_elem.get( 'input', None ) @@ -304,7 +306,7 @@ # <outputs> # <data format="input" name="output" label="Blat on ${<input_param>.name}" /> # </outputs> - wrap_values( tool.inputs, params ) + wrap_values( tool.inputs, params, skip_missing_values = not tool.check_values ) #tool (only needing to be set once) and on_string (set differently for each label) are overwritten for each output dataset label being determined params['tool'] = tool params['on_string'] = on_text Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: jgoecks: Send visual analytics output datasets to user's current history rather than input datasets' history. This enables users not logged in to use visual analytics in shared visualizations.
by Bitbucket 30 Mar '11

30 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/81b332adf892/ changeset: r5288:81b332adf892 user: jgoecks date: 2011-03-30 23:20:10 summary: Send visual analytics output datasets to user's current history rather than input datasets' history. This enables users not logged in to use visual analytics in shared visualizations. affected #: 1 file (11 bytes) --- a/lib/galaxy/web/controllers/tracks.py Wed Mar 30 11:44:08 2011 -0400 +++ b/lib/galaxy/web/controllers/tracks.py Wed Mar 30 17:20:10 2011 -0400 @@ -2,7 +2,7 @@ Support for constructing and viewing custom "track" browsers within Galaxy. """ -import re, time, pkg_resources +import re, pkg_resources pkg_resources.require( "bx-python" ) from bx.seq.twobit import TwoBitFile @@ -13,7 +13,6 @@ from galaxy.web.framework import simplejson from galaxy.web.framework.helpers import time_ago, grids from galaxy.util.bunch import Bunch -from galaxy import util from galaxy.datatypes.interval import Gff from galaxy.visualization.tracks.data_providers import * @@ -703,7 +702,8 @@ # Set input datasets for tool. Input datasets are subsets of full # datasets and are based on chrom, low, high. # - hda_permissions = trans.app.security_agent.history_get_default_permissions( original_dataset.history ) + job_history = trans.get_history( create=True ) + hda_permissions = trans.app.security_agent.history_get_default_permissions( job_history ) messages_list = [] for jida in original_job.input_datasets: input_dataset = jida.dataset @@ -721,7 +721,7 @@ name="Subset [%s:%i-%i] of data %i" % \ ( chrom, low, high, input_dataset.hid ), visible=False ) - input_dataset.history.add_dataset( subset_dataset ) + job_history.add_dataset( subset_dataset ) trans.sa_session.add( subset_dataset ) trans.app.security_agent.set_all_dataset_permissions( subset_dataset.dataset, hda_permissions ) @@ -744,7 +744,7 @@ # Start tool and handle outputs. # try: - subset_job, subset_job_outputs = tool.execute( trans, incoming=tool_params, history=original_dataset.history ) + subset_job, subset_job_outputs = tool.execute( trans, incoming=tool_params, history=job_history ) except Exception, e: # Lots of things can go wrong when trying to execute tool. return to_json_string( { "error" : True, "message" : e.__class__.__name__ + ": " + str(e) } ) Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: jgoecks: Trackster: add BED and GFF support to visual analytics framework, and enable GOPS intersect and subtract tools to work with visual analytics.
by Bitbucket 30 Mar '11

30 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/e1f0a0dc1493/ changeset: r5287:e1f0a0dc1493 user: jgoecks date: 2011-03-30 17:44:08 summary: Trackster: add BED and GFF support to visual analytics framework, and enable GOPS intersect and subtract tools to work with visual analytics. affected #: 5 files (885 bytes) --- a/lib/galaxy/visualization/tracks/data_providers.py Wed Mar 30 10:40:09 2011 -0400 +++ b/lib/galaxy/visualization/tracks/data_providers.py Wed Mar 30 11:44:08 2011 -0400 @@ -487,8 +487,19 @@ col_name_data_attr_mapping = { 4 : { 'index': 4 , 'name' : 'Score' } } def write_data_to_file( self, chrom, start, end, filename ): - # TODO: write function. - pass + source = open( self.original_dataset.file_name ) + index = Indexes( self.converted_dataset.file_name ) + out = open( filename, 'w' ) + for start, end, offset in index.find(chrom, start, end): + source.seek( offset ) + if isinstance( self.original_dataset.datatype, Gff ): + reader = GFFReaderWrapper( source, fix_strand=True ) + feature = reader.next() + for interval in feature.intervals: + out.write(interval.raw_line + '\n') + elif isinstance( self.original_dataset.datatype, Bed ): + out.write( source.readline() ) + out.close() def get_filters( self ): """ Returns a dataset's filters. """ --- a/lib/galaxy/web/controllers/tracks.py Wed Mar 30 10:40:09 2011 -0400 +++ b/lib/galaxy/web/controllers/tracks.py Wed Mar 30 11:44:08 2011 -0400 @@ -724,9 +724,13 @@ input_dataset.history.add_dataset( subset_dataset ) trans.sa_session.add( subset_dataset ) trans.app.security_agent.set_all_dataset_permissions( subset_dataset.dataset, hda_permissions ) - if input_dataset.extension == 'bam': - data_provider = BamDataProvider( original_dataset=input_dataset, converted_dataset=converted_dataset ) - data_provider.write_data_to_file( chrom, low, high, subset_dataset.file_name ) + + # Write data subset to new HDA. + data_provider_class = get_data_provider( original_dataset=input_dataset ) + data_provider = data_provider_class( original_dataset=input_dataset, + converted_dataset=converted_dataset ) + data_provider.write_data_to_file( chrom, low, high, subset_dataset.file_name ) + # TODO: size not working. subset_dataset.set_size() subset_dataset.info = "Data subset for trackster" --- a/static/scripts/trackster.js Wed Mar 30 10:40:09 2011 -0400 +++ b/static/scripts/trackster.js Wed Mar 30 11:44:08 2011 -0400 @@ -1392,6 +1392,7 @@ // Slider. var slider_div = $("<div/>").addClass("slider").appendTo(param_div); var slider = $("<div id='" + param.name + "-param-control'>").appendTo(slider_div); + // Step must have a value so that (max-min)%step == 0. slider.slider({ min: param.min, max: param.max, --- a/tools/new_operations/intersect.xml Wed Mar 30 10:40:09 2011 -0400 +++ b/tools/new_operations/intersect.xml Wed Mar 30 11:44:08 2011 -0400 @@ -28,7 +28,7 @@ <param format="interval,gff" name="input2" type="data" help="Second dataset"><label>that intersect</label></param> - <param name="min" size="4" type="integer" value="1" help="(bp)"> + <param name="min" size="4" type="integer" value="1" min="0" max="600000" help="(bp)"><label>for at least</label></param></inputs> --- a/tools/new_operations/subtract.xml Wed Mar 30 10:40:09 2011 -0400 +++ b/tools/new_operations/subtract.xml Wed Mar 30 11:44:08 2011 -0400 @@ -31,7 +31,7 @@ <option value="-p">Non-overlapping pieces of intervals</option></param> - <param name="min" size="4" type="integer" value="1" help="(bp)"> + <param name="min" size="4" type="integer" value="1" min="0" max="600000" help="(bp)"><label>where minimal overlap is</label></param></inputs> Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: dan: Minor fix for 5283:41a416e61021.
by Bitbucket 30 Mar '11

30 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/3844b6d684b6/ changeset: r5286:3844b6d684b6 user: dan date: 2011-03-30 16:40:09 summary: Minor fix for 5283:41a416e61021. affected #: 1 file (4 bytes) --- a/lib/galaxy/datatypes/data.py Wed Mar 30 10:38:45 2011 -0400 +++ b/lib/galaxy/datatypes/data.py Wed Mar 30 10:40:09 2011 -0400 @@ -441,7 +441,7 @@ est_lines = self.estimate_file_lines(dataset) dataset.blurb = "~%s %s" % ( util.commaify(util.roundify(str(est_lines))), inflector.cond_plural(est_lines, self.line_class) ) else: - dataset.blurb = "%s %s" % util.commaify( str(line_count) ), inflector.cond_plural(line_count, self.line_class) + dataset.blurb = "%s %s" % ( util.commaify( str(line_count) ), inflector.cond_plural(line_count, self.line_class) ) else: dataset.peek = 'file does not exist' dataset.blurb = 'file purged from disk' Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: dannon: Removing a debug print from previous commit.
by Bitbucket 30 Mar '11

30 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/61036b55f4e4/ changeset: r5285:61036b55f4e4 user: dannon date: 2011-03-30 16:38:45 summary: Removing a debug print from previous commit. affected #: 1 file (25 bytes) --- a/lib/galaxy/datatypes/tabular.py Wed Mar 30 10:34:21 2011 -0400 +++ b/lib/galaxy/datatypes/tabular.py Wed Mar 30 10:38:45 2011 -0400 @@ -224,7 +224,6 @@ out.append( '%s</td></tr>' % escape( comments.pop(0) ) ) return "".join( out ) def set_peek( self, dataset, line_count=None, is_multi_byte=False): - print line_count super(Tabular, self).set_peek( dataset, line_count=line_count, is_multi_byte=is_multi_byte) if dataset.metadata.comment_lines: dataset.blurb = "%s, %s comments" % ( dataset.blurb, util.commaify( str( dataset.metadata.comment_lines ) ) ) Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: dan: Minor fix for 5283:41a416e61021.
by Bitbucket 30 Mar '11

30 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/09d9091ec0a4/ changeset: r5284:09d9091ec0a4 user: dan date: 2011-03-30 16:34:21 summary: Minor fix for 5283:41a416e61021. affected #: 1 file (4 bytes) --- a/lib/galaxy/datatypes/data.py Wed Mar 30 07:14:20 2011 -0400 +++ b/lib/galaxy/datatypes/data.py Wed Mar 30 10:34:21 2011 -0400 @@ -436,7 +436,7 @@ #Small dataset, recount all lines and reset peek afterward. lc = self.count_data_lines(dataset) dataset.metadata.data_lines = lc - dataset.blurb = "%s %s" % util.commaify( str(lc) ), inflector.cond_plural(lc, self.line_class) + dataset.blurb = "%s %s" % ( util.commaify( str(lc) ), inflector.cond_plural(lc, self.line_class) ) else: est_lines = self.estimate_file_lines(dataset) dataset.blurb = "~%s %s" % ( util.commaify(util.roundify(str(est_lines))), inflector.cond_plural(est_lines, self.line_class) ) Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: dannon: Refactor set_peek to a single method in class Text. Should also fix bug introduced in 5236 that prevented setting of some metadata.
by Bitbucket 30 Mar '11

30 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/41a416e61021/ changeset: r5283:41a416e61021 user: dannon date: 2011-03-30 13:14:20 summary: Refactor set_peek to a single method in class Text. Should also fix bug introduced in 5236 that prevented setting of some metadata. affected #: 3 files (2.1 KB) --- a/lib/galaxy/datatypes/data.py Tue Mar 29 16:27:35 2011 -0400 +++ b/lib/galaxy/datatypes/data.py Wed Mar 30 07:14:20 2011 -0400 @@ -354,6 +354,7 @@ class Text( Data ): file_ext = 'txt' + line_class = 'line' """Add metadata elements""" MetadataElement( name="data_lines", default=0, desc="Number of data lines", readonly=True, optional=True, visible=False, no_value=0 ) @@ -417,26 +418,30 @@ data_lines += 1 return data_lines def set_peek( self, dataset, line_count=None, is_multi_byte=False ): + """ + Set the peek. This method is used by various subclasses of Text. + """ if not dataset.dataset.purged: # The file must exist on disk for the get_file_peek() method dataset.peek = get_file_peek( dataset.file_name, is_multi_byte=is_multi_byte ) if line_count is None: # See if line_count is stored in the metadata - if dataset.metadata.data_lines is not None: - dataset.blurb = "%s %s" % ( util.commaify( str(dataset.metadata.data_lines) ), inflector.cond_plural(dataset.metadata.data_lines, "line") ) + if dataset.metadata.data_lines: + dataset.blurb = "%s %s" % ( util.commaify( str(dataset.metadata.data_lines) ), inflector.cond_plural(dataset.metadata.data_lines, self.line_class) ) else: # Number of lines is not known ( this should not happen ), and auto-detect is # needed to set metadata # This can happen when the file is larger than max_optional_metadata_filesize. if int(dataset.get_size()) <= 1048576: #Small dataset, recount all lines and reset peek afterward. - dataset.metadata.data_lines = self.count_data_lines(dataset) - self.set_peek(dataset) + lc = self.count_data_lines(dataset) + dataset.metadata.data_lines = lc + dataset.blurb = "%s %s" % util.commaify( str(lc) ), inflector.cond_plural(lc, self.line_class) else: est_lines = self.estimate_file_lines(dataset) - dataset.blurb = "~%s %s" % ( util.commaify(util.roundify(str(est_lines))), inflector.cond_plural(est_lines, "line") ) + dataset.blurb = "~%s %s" % ( util.commaify(util.roundify(str(est_lines))), inflector.cond_plural(est_lines, self.line_class) ) else: - dataset.blurb = "%s %s" % util.commaify( str(line_count) ), inflector.cond_plural(line_count, "line") + dataset.blurb = "%s %s" % util.commaify( str(line_count) ), inflector.cond_plural(line_count, self.line_class) else: dataset.peek = 'file does not exist' dataset.blurb = 'file purged from disk' --- a/lib/galaxy/datatypes/interval.py Tue Mar 29 16:27:35 2011 -0400 +++ b/lib/galaxy/datatypes/interval.py Wed Mar 30 07:14:20 2011 -0400 @@ -45,6 +45,7 @@ class Interval( Tabular ): """Tab delimited data containing interval information""" file_ext = "interval" + line_class = "region" """Add metadata elements""" MetadataElement( name="chromCol", default=1, desc="Chrom column", param=metadata.ColumnParameter ) @@ -60,23 +61,6 @@ self.add_display_app ( 'ucsc', 'display at UCSC', 'as_ucsc_display_file', 'ucsc_links' ) def init_meta( self, dataset, copy_from=None ): Tabular.init_meta( self, dataset, copy_from=copy_from ) - def set_peek( self, dataset, line_count=None, is_multi_byte=False ): - """Set the peek and blurb text""" - if not dataset.dataset.purged: - dataset.peek = data.get_file_peek( dataset.file_name, is_multi_byte=is_multi_byte ) - if line_count is None: - # See if line_count is stored in the metadata - if dataset.metadata.data_lines is not None: - dataset.blurb = "%s regions" % util.commaify( str( dataset.metadata.data_lines ) ) - else: - # Number of lines is not known ( this should not happen ), and auto-detect is - # needed to set metadata - dataset.blurb = "~%s regions" % util.commaify(util.roundify(str(self.estimate_file_lines(dataset)))) - else: - dataset.blurb = "%s regions" % util.commaify( str( line_count ) ) - else: - dataset.peek = 'file does not exist' - dataset.blurb = 'file purged from disk' def set_meta( self, dataset, overwrite = True, first_line_is_header = False, **kwd ): """Tries to guess from the line the location number of the column for the chromosome, region start-end and strand""" Tabular.set_meta( self, dataset, overwrite = overwrite, skip = 0 ) --- a/lib/galaxy/datatypes/tabular.py Tue Mar 29 16:27:35 2011 -0400 +++ b/lib/galaxy/datatypes/tabular.py Wed Mar 30 07:14:20 2011 -0400 @@ -223,8 +223,9 @@ out.append( '<tr><td>' ) out.append( '%s</td></tr>' % escape( comments.pop(0) ) ) return "".join( out ) - def set_peek( self, dataset, line_count=None, is_multi_byte=False ): - data.Text.set_peek( self, dataset, line_count=line_count, is_multi_byte=is_multi_byte ) + def set_peek( self, dataset, line_count=None, is_multi_byte=False): + print line_count + super(Tabular, self).set_peek( dataset, line_count=line_count, is_multi_byte=is_multi_byte) if dataset.metadata.comment_lines: dataset.blurb = "%s, %s comments" % ( dataset.blurb, util.commaify( str( dataset.metadata.comment_lines ) ) ) def display_peek( self, dataset ): @@ -383,6 +384,7 @@ class Pileup( Tabular ): """Tab delimited data in pileup (6- or 10-column) format""" file_ext = "pileup" + line_class = "genomic coordinate" """Add metadata elements""" MetadataElement( name="chromCol", default=1, desc="Chrom column", param=metadata.ColumnParameter ) @@ -392,24 +394,6 @@ def init_meta( self, dataset, copy_from=None ): Tabular.init_meta( self, dataset, copy_from=copy_from ) - def set_peek( self, dataset, line_count=None, is_multi_byte=False ): - """Set the peek and blurb text""" - if not dataset.dataset.purged: - dataset.peek = data.get_file_peek( dataset.file_name, is_multi_byte=is_multi_byte ) - if line_count is None: - # See if line_count is stored in the metadata - if dataset.metadata.data_lines is not None: - dataset.blurb = "%s genomic coordinates" % util.commaify( str( dataset.metadata.data_lines ) ) - else: - # Number of lines is not known ( this should not happen ), and auto-detect is - # needed to set metadata - dataset.blurb = "? genomic coordinates" - else: - dataset.blurb = "%s genomic coordinates" % util.commaify( str( line_count ) ) - else: - dataset.peek = 'file does not exist' - dataset.blurb = 'file purged from disk' - def make_html_table( self, dataset, skipchars=[] ): """Create HTML table, used for displaying peek""" out = ['<table cellspacing="0" cellpadding="3">'] Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: jgoecks: Trackster: simplify use of jQuery deferreds for getting data.
by Bitbucket 29 Mar '11

29 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/7e383f2a3e6f/ changeset: r5282:7e383f2a3e6f user: jgoecks date: 2011-03-29 22:27:35 summary: Trackster: simplify use of jQuery deferreds for getting data. affected #: 1 file (448 bytes) --- a/static/scripts/trackster.js Tue Mar 29 14:28:17 2011 -0400 +++ b/static/scripts/trackster.js Tue Mar 29 16:27:35 2011 -0400 @@ -1071,6 +1071,15 @@ }); /** + * Tiles for TiledTracks. + */ +var Tile = function(track, canvas, histo_max) { + this.track = track; + this.canvas = canvas; + this.histo_max = histo_max; +}; + +/** * Tracks are objects can be added to the View. * * Track object hierarchy: @@ -1113,7 +1122,7 @@ this.content_div = $("<div class='track-content'>").appendTo(this.container_div); this.parent_element.append(this.container_div); }; -$.extend( Track.prototype, { +$.extend(Track.prototype, { /** * Initialize and draw the track. */ @@ -1476,7 +1485,7 @@ } */ }; -$.extend( TiledTrack.prototype, Track.prototype, { +$.extend(TiledTrack.prototype, Track.prototype, { /** * Make popup menu for track name. */ @@ -1732,23 +1741,17 @@ // Really draw tile: get data, seq data if available, and draw tile. // $.when(track.data_cache.get_data(view.chrom, tile_low, tile_high, track.mode, - resolution, track.data_url_extra_params)).then(function() { - // Data available for track. - var result = track.data_cache.get_data(view.chrom, tile_low, tile_high, track.mode, - resolution, track.data_url_extra_params); + resolution, track.data_url_extra_params)).then(function(tile_data) { // If sequence data needed, get that and draw. Otherwise draw. if (view.reference_track && w_scale > CHAR_WIDTH_PX) { $.when(view.reference_track.data_cache.get_data(view.chrom, tile_low, tile_high, track.mode, resolution, - view.reference_track.data_url_extra_params)).then(function() { - var seq_data = view.reference_track.data_cache.get_data(view.chrom, tile_low, tile_high, - track.mode, resolution, - view.reference_track.data_url_extra_params); - draw_and_show_tile(id, result, resolution, tile_index, parent_element, w_scale, seq_data); + view.reference_track.data_url_extra_params)).then(function(seq_data) { + draw_and_show_tile(id, tile_data, resolution, tile_index, parent_element, w_scale, seq_data); }); } else { - draw_and_show_tile(id, result, resolution, tile_index, parent_element, w_scale); + draw_and_show_tile(id, tile_data, resolution, tile_index, parent_element, w_scale); } }); } Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: jgoecks: Fix read id bug in Trackster BAM data provider.
by Bitbucket 29 Mar '11

29 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/4a63c840c6ab/ changeset: r5281:4a63c840c6ab user: jgoecks date: 2011-03-29 20:28:17 summary: Fix read id bug in Trackster BAM data provider. affected #: 1 file (6 bytes) --- a/lib/galaxy/visualization/tracks/data_providers.py Tue Mar 29 13:59:07 2011 -0400 +++ b/lib/galaxy/visualization/tracks/data_providers.py Tue Mar 29 14:28:17 2011 -0400 @@ -306,12 +306,12 @@ if read.is_proper_pair: if qname in paired_pending: # one in dict is always first pair = paired_pending[qname] - results.append( [ "%i_%s" % ( read.pos, qname ), + results.append( [ "%i_%s" % ( pair['start'], qname ), pair['start'], read.pos + read_len, qname, [ pair['start'], pair['end'], pair['cigar'], pair['seq'] ], - [ read.pos, read.pos + read_len, read.cigar, seq] + [ read.pos, read.pos + read_len, read.cigar, seq ] ] ) del paired_pending[qname] else: Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: kellyv: Modified add_manual_builds script so that it will include the build in parentheses after the name even if there are no chromosome lengths listed (previously would not because of line break after name); also added a couple of new manual builds
by Bitbucket 29 Mar '11

29 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/c761ea39e3c9/ changeset: r5280:c761ea39e3c9 user: kellyv date: 2011-03-29 19:59:07 summary: Modified add_manual_builds script so that it will include the build in parentheses after the name even if there are no chromosome lengths listed (previously would not because of line break after name); also added a couple of new manual builds affected #: 2 files (454 bytes) --- a/cron/add_manual_builds.py Tue Mar 29 13:43:24 2011 -0400 +++ b/cron/add_manual_builds.py Tue Mar 29 13:59:07 2011 -0400 @@ -21,12 +21,12 @@ build_file_out = open(build_file,'a') for line in open(input_file): try: - fields = line.split("\t") + fields = line.replace("\n","").replace("\r","").split("\t") build = fields.pop(0) if build in existing_builds: continue # if build exists, leave alone name = fields.pop(0) try: # get chrom lens if included in file, otherwise still add build - chrs = fields.pop(0).replace("\n","").replace("\r","").split(",") + chrs = fields.pop(0).split(",") except: chrs = [] print>>build_file_out, build+"\t"+name+" ("+build+")" --- a/tool-data/shared/ucsc/manual_builds.txt Tue Mar 29 13:43:24 2011 -0400 +++ b/tool-data/shared/ucsc/manual_builds.txt Tue Mar 29 13:59:07 2011 -0400 @@ -698,3 +698,5 @@ Hydra_JCVI Hydra magnipapillata str. 105 Araly1 Arabidopsis lyrata Zea_mays_B73_RefGen_v2 Maize (Zea mays) chr1=301354135,chr2=237068928,chr3=232140222,chr4=241473566,chr5=217872898,chr6=169174371,chr7=176764813,chr8=175793772,chr9=156750718,chr10=150189513,chr11=7140224 +Homo_sapiens_AK1 Korean Man chrM=16571,chr1=247249719,chr2=242951149,chr3=199501827,chr4=191273063,chr5=180857866,chr6=170899992,chr7=158821424,chr8=146274826,chr9=140273252,chr10=135374737,chr11=134452384,chr12=132349534,chr13=114142980,chr14=106368585,chr15=100338915,chr16=88827254,chr17=78774742,chr18=76117153,chr19=63811651,chr20=62435964,chr21=46944323,chr22=49691432,chrX=154913754,chrY=57772954 +Tcas_3.0 Red Flour Beetle (Tribolium castaneum) Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: jgoecks: Trackster: use gap to correctly position read connector in Pack mode. Also some code cleanup and commenting.
by Bitbucket 29 Mar '11

29 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/96ada6a6b2d8/ changeset: r5279:96ada6a6b2d8 user: jgoecks date: 2011-03-29 19:43:24 summary: Trackster: use gap to correctly position read connector in Pack mode. Also some code cleanup and commenting. affected #: 1 file (26 bytes) --- a/static/scripts/trackster.js Tue Mar 29 08:18:49 2011 -0400 +++ b/static/scripts/trackster.js Tue Mar 29 13:43:24 2011 -0400 @@ -1594,10 +1594,10 @@ high = this.view.high, range = high - low, width = this.view.container.width(), - resolution = this.view.resolution; - - var parent_element = $("<div style='position: relative;'></div>"), - w_scale = width / range; + // w_scale units are pixels per base. + w_scale = width / range, + resolution = this.view.resolution, + parent_element = $("<div style='position: relative;'></div>"); if (!clear_after) { this.content_div.children().remove(); } this.content_div.append( parent_element ); @@ -3029,8 +3029,7 @@ */ draw_element: function(ctx, tile_index, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width, left_offset, ref_seq) { // All features need a start, end, and vertical center. - var - feature_uid = feature[0], + var feature_uid = feature[0], feature_start = feature[1], feature_end = feature[2], feature_name = feature[3], @@ -3038,8 +3037,14 @@ f_end = Math.ceil( Math.min(width, Math.max(0, (feature_end - tile_low) * w_scale)) ), y_center = (mode === "Dense" ? 1 : (1 + slot)) * y_scale, block_color = this.prefs.block_color, - label_color = this.prefs.label_color; - gap = 0; // Left-gap for label text since we align chrom text to the position tick + label_color = this.prefs.label_color, + // Left-gap for label text since we align chrom text to the position tick. + gap = 0; + + // TODO: fix gap usage; also see note on gap in draw_read. + if ((mode === "Pack" || this.mode === "Auto") && w_scale > CHAR_WIDTH_PX) { + var gap = Math.round(w_scale/2); + } // Draw read. ctx.fillStyle = block_color; @@ -3061,8 +3066,7 @@ // Draw connector. if (b2_start > b1_end) { ctx.fillStyle = CONNECTOR_COLOR; - //ctx.fillRect(b1_end + left_offset, y_center + 5, b2_start - b1_end, 1); - ctx.dashedLine(b1_end + left_offset, y_center + 5, left_offset + b2_start, y_center + 5); + ctx.dashedLine(b1_end + left_offset - gap, y_center + 5, left_offset + b2_start - gap, y_center + 5); } } else { // Read is single. @@ -3072,9 +3076,6 @@ if (mode === "Pack" && feature_start > tile_low) { // Draw label. ctx.fillStyle = this.prefs.label_color; - if ( (mode === "Pack" || this.mode === "Auto") && w_scale > CHAR_WIDTH_PX) { - var gap = Math.round(w_scale/2); - } if (tile_index === 0 && f_start - ctx.measureText(feature_name).width < 0) { ctx.textAlign = "left"; ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING - gap, y_center + 8); Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: natefoo: Use new_file_path as tempfile's tempdir, obviates the need for $TEMP in the environment.
by Bitbucket 29 Mar '11

29 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/2be2b8e0e916/ changeset: r5278:2be2b8e0e916 user: natefoo date: 2011-03-29 14:18:49 summary: Use new_file_path as tempfile's tempdir, obviates the need for $TEMP in the environment. affected #: 1 file (56 bytes) --- a/lib/galaxy/config.py Mon Mar 28 15:27:14 2011 -0400 +++ b/lib/galaxy/config.py Tue Mar 29 08:18:49 2011 -0400 @@ -2,7 +2,7 @@ Universe configuration builder. """ -import sys, os +import sys, os, tempfile import logging, logging.config import ConfigParser from galaxy.util import string_as_bool @@ -39,6 +39,7 @@ # Where dataset files are stored self.file_path = resolve_path( kwargs.get( "file_path", "database/files" ), self.root ) self.new_file_path = resolve_path( kwargs.get( "new_file_path", "database/tmp" ), self.root ) + tempfile.tempdir = self.new_file_path self.openid_consumer_cache_path = resolve_path( kwargs.get( "openid_consumer_cache_path", "database/openid_consumer_cache" ), self.root ) self.cookie_path = kwargs.get( "cookie_path", "/" ) # web API Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: jgoecks: Another pass on Trackster filtering. Filtering now supports (a) score columns in BED and GFF and (b) GTF attributes. Refactoring so that slider behavior for dynamic tools and filters are the same.
by Bitbucket 28 Mar '11

28 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/9af3a7580efa/ changeset: r5277:9af3a7580efa user: jgoecks date: 2011-03-28 21:27:14 summary: Another pass on Trackster filtering. Filtering now supports (a) score columns in BED and GFF and (b) GTF attributes. Refactoring so that slider behavior for dynamic tools and filters are the same. affected #: 6 files (6.3 KB) --- a/lib/galaxy/visualization/tracks/data_providers.py Fri Mar 25 13:26:40 2011 -0400 +++ b/lib/galaxy/visualization/tracks/data_providers.py Mon Mar 28 15:27:14 2011 -0400 @@ -11,13 +11,16 @@ pkg_resources.require( "pysam" ) pkg_resources.require( "numpy" ) from galaxy.datatypes.util.gff_util import * +from galaxy.util.json import from_json_string from bx.interval_index_file import Indexes from bx.arrays.array_tree import FileArrayTreeDict from bx.bbi.bigwig_file import BigWigFile from galaxy.util.lrucache import LRUCache from galaxy.visualization.tracks.summary import * from galaxy.datatypes.tabular import Vcf -from galaxy.datatypes.interval import Bed, Gff +from galaxy.datatypes.interval import Bed, Gff, Gtf +from galaxy.datatypes.util.gff_util import parse_gff_attributes + from pysam import csamtools MAX_VALS = 5000 # only display first MAX_VALS features @@ -126,7 +129,7 @@ return st.chrom_blocks.keys() - def get_summary( self, chrom, start, end, **kwargs): + def get_summary( self, chrom, start, end, **kwargs ): filename = self.converted_dataset.file_name st = self.CACHE[filename] if st is None: @@ -170,7 +173,7 @@ self.CACHE[filename] = st # Check for data. - return st.chrom_blocks.get(chrom, None) is not None or st.chrom_blocks.get(chrom[3:], None) is not None + return st.chrom_blocks.get(chrom, None) is not None or (chrom and st.chrom_blocks.get(chrom[3:], None) is not None) class VcfDataProvider( TracksDataProvider ): """ @@ -486,7 +489,63 @@ def write_data_to_file( self, chrom, start, end, filename ): # TODO: write function. pass - + + def get_filters( self ): + """ Returns a dataset's filters. """ + + # is_ functions taken from Tabular.set_meta + def is_int( column_text ): + try: + int( column_text ) + return True + except: + return False + def is_float( column_text ): + try: + float( column_text ) + return True + except: + if column_text.strip().lower() == 'na': + return True #na is special cased to be a float + return False + + # + # Get filters. + # TODOs: + # (a) might be useful to move this into each datatype's set_meta method; + # (b) could look at first N lines to ensure GTF attribute types are consistent. + # + filters = [] + # HACK: first 8 fields are for drawing, so start filter column index at 9. + filter_col = 8 + if isinstance( self.original_dataset.datatype, Gff ): + # Can filter by score and GTF attributes. + filters = [ { 'name': 'Score', 'type': 'int', 'index': filter_col } ] + filter_col += 1 + if isinstance( self.original_dataset.datatype, Gtf ): + for i, line in enumerate( open(self.original_dataset.file_name) ): + if not line.startswith('#'): + # Look at first line for attributes and types. + attributes = parse_gff_attributes( line.split('\t')[8] ) + for attr, value in attributes.items(): + # Get attribute type. + if is_int( value ): + attr_type = 'int' + elif is_float( value ): + attr_type = 'float' + else: + attr_type = 'str' + # Add to filters. + if attr_type is not 'str': + filters.append( { 'name': attr, 'type': attr_type, 'index': filter_col } ) + filter_col += 1 + break + elif isinstance( self.original_dataset.datatype, Bed ): + # Can filter by score column only. + filters = [ { 'name': 'Score', 'type': 'int', 'index': filter_col } ] + + return filters + def get_data( self, chrom, start, end, **kwargs ): start, end = int(start), int(end) source = open( self.original_dataset.file_name ) @@ -509,6 +568,7 @@ # # First three entries are mandatory, others are optional. # + filter_cols = from_json_string( kwargs.get( "filter_cols", "[]" ) ) no_detail = ( "no_detail" in kwargs ) for start, end, offset in index.find(chrom, start, end): if count >= MAX_VALS: @@ -522,7 +582,7 @@ # GFF dataset. reader = GFFReaderWrapper( source, fix_strand=True ) feature = reader.next() - payload = package_gff_feature( feature, no_detail ) + payload = package_gff_feature( feature, no_detail, filter_cols ) payload.insert( 0, offset ) elif isinstance( self.original_dataset.datatype, Bed ): # BED dataset. @@ -536,15 +596,11 @@ #end = min( len( feature ), 8 ) #payload.extend( feature[ 3:end ] ) - # Name, score, strand, thick start, thick end. + # Name, strand, thick start, thick end. if length >= 4: payload.append(feature[3]) - if length >= 5: - payload.append( float(feature[4]) ) if length >= 6: payload.append(feature[5]) - - # Thick start, end. if length >= 8: payload.append(int(feature[6])) payload.append(int(feature[7])) @@ -555,7 +611,11 @@ block_starts = [ int(n) for n in feature[11].split(',') if n != '' ] blocks = zip( block_sizes, block_starts ) payload.append( [ ( start + block[1], start + block[1] + block[0] ) for block in blocks ] ) - + + # Score (filter data) + if length >= 5 and filter_cols and filter_cols[0] == "Score": + payload.append( float(feature[4]) ) + results.append( payload ) return { 'data': results, 'message': message } @@ -644,7 +704,7 @@ pass return data_provider -def package_gff_feature( feature, no_detail=False ): +def package_gff_feature( feature, no_detail=False, filter_cols=[] ): """ Package a GFF feature in an array for data providers. """ feature = convert_gff_coords_to_bed( feature ) @@ -656,7 +716,6 @@ payload = [ feature.start, feature.end, feature.name(), - feature.score, feature.strand, # No notion of thick start, end in GFF, so make everything # thick. @@ -677,4 +736,13 @@ blocks = zip( block_sizes, block_starts ) payload.append( [ ( feature.start + block[1], feature.start + block[1] + block[0] ) for block in blocks ] ) + # Add filter data to payload. + for col in filter_cols: + if col == "Score": + payload.append( feature.score ) + elif col in feature.attributes: + payload.append( feature.attributes[col] ) + else: + # Dummy value. + payload.append( "na" ) return payload --- a/static/june_2007_style/blue/trackster.css Fri Mar 25 13:26:40 2011 -0400 +++ b/static/june_2007_style/blue/trackster.css Mon Mar 28 15:27:14 2011 -0400 @@ -38,7 +38,6 @@ .top-labeltrack{position:relative;border-bottom:solid #999 1px;} .nav-labeltrack{border-top:solid #999 1px;border-bottom:solid #333 1px;} input{font:10px verdana;} -.values{padding-left:0.25em;} .dynamic-tool,.filters{width:400px;margin-left:0.25em;padding-bottom:0.5em;} .slider-row{margin-top:0.4em;margin-left:1em;} .slider-label{float:left;font-weight:bold;} --- a/static/june_2007_style/trackster.css.tmpl Fri Mar 25 13:26:40 2011 -0400 +++ b/static/june_2007_style/trackster.css.tmpl Mon Mar 28 15:27:14 2011 -0400 @@ -228,9 +228,6 @@ input { font: 10px verdana; } -.values { - padding-left: 0.25em; -} .dynamic-tool, .filters { width: 400px; margin-left: 0.25em; --- a/static/scripts/packed/trackster.js Fri Mar 25 13:26:40 2011 -0400 +++ b/static/scripts/packed/trackster.js Mon Mar 28 15:27:14 2011 -0400 @@ -1,1 +1,1 @@ -CanvasRenderingContext2D.prototype.dashedLine=function(c,j,b,h,f){if(f===undefined){f=4}var e=b-c;var d=h-j;var g=Math.floor(Math.sqrt(e*e+d*d)/f);var l=e/g;var k=d/g;var a;for(a=0;a<g;a++,c+=l,j+=k){if(a%2!==0){continue}this.fillRect(c,j,f,1)}};CanvasRenderingContext2D.prototype.drawDownwardEquilateralTriangle=function(b,a,e){var d=b-e/2,c=b+e/2,f=a-Math.sqrt(e*3/2);this.beginPath();this.moveTo(d,f);this.lineTo(c,f);this.lineTo(b,a);this.lineTo(d,f);this.strokeStyle=this.fillStyle;this.fill();this.stroke();this.closePath()};function sortable(a,b){a.bind("drag",{handle:b,relative:true},function(h,j){var g=$(this).parent();var f=g.children();var c;for(c=0;c<f.length;c++){if(j.offsetY<$(f.get(c)).position().top){break}}if(c===f.length){if(this!==f.get(c-1)){g.append(this)}}else{if(this!==f.get(c)){$(this).insertBefore(f.get(c))}}})}var NO_OVERLAP=1001,CONTAINS=1002,OVERLAP_START=1003,OVERLAP_END=1004,CONTAINED_BY=1005;function compute_overlap(e,b){var g=e[0],f=e[1],d=b[0],c=b[1],a;if(g<d){if(f<d){a=NO_OVERLAP}else{if(f<=c){a=OVERLAP_START}else{a=CONTAINS}}}else{if(g>c){a=NO_OVERLAP}else{if(f<=c){a=CONTAINED_BY}else{a=OVERLAP_END}}}return a}function is_overlap(b,a){return(compute_overlap(b,a)!==NO_OVERLAP)}var DENSE_TRACK_HEIGHT=10,NO_DETAIL_TRACK_HEIGHT=3,SQUISH_TRACK_HEIGHT=5,PACK_TRACK_HEIGHT=10,NO_DETAIL_FEATURE_HEIGHT=1,DENSE_FEATURE_HEIGHT=1,SQUISH_FEATURE_HEIGHT=3,PACK_FEATURE_HEIGHT=9,ERROR_PADDING=10,LABEL_SPACING=2,PACK_SPACING=5,MIN_SQUISH_VIEW_WIDTH=12000,DEFAULT_FONT="9px Monaco, Lucida Console, monospace",DENSITY=200,FEATURE_LEVELS=10,MAX_FEATURE_DEPTH=100,DEFAULT_DATA_QUERY_WAIT=5000,MAX_CHROMS_SELECTABLE=100,CONNECTOR_COLOR="#ccc",DATA_ERROR="There was an error in indexing this dataset. ",DATA_NOCONVERTER="A converter for this dataset is not installed. Please check your datatypes_conf.xml file.",DATA_NONE="No data for this chrom/contig.",DATA_PENDING="Currently indexing... please wait",DATA_CANNOT_RUN_TOOL="Tool cannot be rerun: ",DATA_LOADING="Loading data...",DATA_OK="Ready for display",CACHED_TILES_FEATURE=10,CACHED_TILES_LINE=5,CACHED_DATA=5,DUMMY_CANVAS=document.createElement("canvas"),RIGHT_STRAND,LEFT_STRAND;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(DUMMY_CANVAS)}var CONTEXT=DUMMY_CANVAS.getContext("2d");CONTEXT.font=DEFAULT_FONT;var CHAR_WIDTH_PX=CONTEXT.measureText("A").width,CHAR_HEIGHT_PX=9;var right_img=new Image();right_img.src=image_path+"/visualization/strand_right.png";right_img.onload=function(){RIGHT_STRAND=CONTEXT.createPattern(right_img,"repeat")};var left_img=new Image();left_img.src=image_path+"/visualization/strand_left.png";left_img.onload=function(){LEFT_STRAND=CONTEXT.createPattern(left_img,"repeat")};var right_img_inv=new Image();right_img_inv.src=image_path+"/visualization/strand_right_inv.png";right_img_inv.onload=function(){RIGHT_STRAND_INV=CONTEXT.createPattern(right_img_inv,"repeat")};var left_img_inv=new Image();left_img_inv.src=image_path+"/visualization/strand_left_inv.png";left_img_inv.onload=function(){LEFT_STRAND_INV=CONTEXT.createPattern(left_img_inv,"repeat")};function round_1000(a){return Math.round(a*1000)/1000}var Cache=function(a){this.num_elements=a;this.clear()};$.extend(Cache.prototype,{get:function(b){var a=this.key_ary.indexOf(b);if(a!==-1){this.move_key_to_end(b,a)}return this.obj_cache[b]},set:function(b,c){if(!this.obj_cache[b]){if(this.key_ary.length>=this.num_elements){var a=this.key_ary.shift();delete this.obj_cache[a]}this.key_ary.push(b)}this.obj_cache[b]=c;return c},move_key_to_end:function(b,a){this.key_ary.splice(a,1);this.key_ary.push(b)},clear:function(){this.obj_cache={};this.key_ary=[]},size:function(){return this.key_ary.length}});var DataManager=function(b,a,c){Cache.call(this,b);this.track=a;this.subset=(c!==undefined?c:true)};$.extend(DataManager.prototype,Cache.prototype,{load_data:function(d,a,f,h,b,e){var g={chrom:d,low:a,high:f,mode:h,resolution:b,dataset_id:this.track.dataset_id,hda_ldda:this.track.hda_ldda};$.extend(g,e);var c=this;return $.getJSON(this.track.data_url,g,function(j){c.set_data(a,f,h,j)})},get_data:function(j,k,c,h,b,f){var l=this.get(this.gen_key(k,c,h));if(l){return l}if(this.subset){var m,g,a,e,h,l;for(var d=0;d<this.key_ary.length;d++){m=this.key_ary[d];g=this.split_key(m);a=g[0];e=g[1];if(k>=a&&c<=e){l=this.obj_cache[m];if(l.dataset_type!=="summary_tree"&&l.extra_info!=="no_detail"){this.move_key_to_end(m,d);return l}}}}return this.load_data(j,k,c,h,b,f)},set_data:function(b,c,d,a){return this.set(this.gen_key(b,c,d),a)},gen_key:function(a,c,d){var b=a+"_"+c+"_"+d;return b},split_key:function(a){return a.split("_")}});var View=function(a,d,c,b,e){this.container=a;this.chrom=null;this.vis_id=c;this.dbkey=b;this.title=d;this.tracks=[];this.label_tracks=[];this.max_low=0;this.max_high=0;this.num_tracks=0;this.track_id_counter=0;this.zoom_factor=3;this.min_separation=30;this.has_changes=false;this.init(e);this.reset()};$.extend(View.prototype,{init:function(d){var c=this.container,a=this;this.top_container=$("<div/>").addClass("top-container").appendTo(c);this.content_div=$("<div/>").addClass("content").css("position","relative").appendTo(c);this.bottom_container=$("<div/>").addClass("bottom-container").appendTo(c);this.top_labeltrack=$("<div/>").addClass("top-labeltrack").appendTo(this.top_container);this.viewport_container=$("<div/>").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div);this.intro_div=$("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide();this.nav_labeltrack=$("<div/>").addClass("nav-labeltrack").appendTo(this.bottom_container);this.nav_container=$("<div/>").addClass("nav-container").prependTo(this.top_container);this.nav=$("<div/>").addClass("nav").appendTo(this.nav_container);this.overview=$("<div/>").addClass("overview").appendTo(this.bottom_container);this.overview_viewport=$("<div/>").addClass("overview-viewport").appendTo(this.overview);this.overview_close=$("<a href='javascript:void(0);'>Close Overview</a>").addClass("overview-close").hide().appendTo(this.overview_viewport);this.overview_highlight=$("<div/>").addClass("overview-highlight").hide().appendTo(this.overview_viewport);this.overview_box_background=$("<div/>").addClass("overview-boxback").appendTo(this.overview_viewport);this.overview_box=$("<div/>").addClass("overview-box").appendTo(this.overview_viewport);this.default_overview_height=this.overview_box.height();this.nav_controls=$("<div/>").addClass("nav-controls").appendTo(this.nav);this.chrom_select=$("<select/>").attr({name:"chrom"}).css("width","15em").addClass("no-autocomplete").append("<option value=''>Loading</option>").appendTo(this.nav_controls);var b=function(f){if(f.type==="focusout"||(f.keyCode||f.which)===13||(f.keyCode||f.which)===27){if((f.keyCode||f.which)!==27){a.go_to($(this).val())}$(this).hide();$(this).val("");a.location_span.show();a.chrom_select.show()}};this.nav_input=$("<input/>").addClass("nav-input").hide().bind("keyup focusout",b).appendTo(this.nav_controls);this.location_span=$("<span/>").addClass("location").appendTo(this.nav_controls);this.location_span.bind("click",function(){a.location_span.hide();a.chrom_select.hide();a.nav_input.val(a.chrom+":"+a.low+"-"+a.high);a.nav_input.css("display","inline-block");a.nav_input.select();a.nav_input.focus()});if(this.vis_id!==undefined){this.hidden_input=$("<input/>").attr("type","hidden").val(this.vis_id).appendTo(this.nav_controls)}this.zo_link=$("<a id='zoom-out' />").click(function(){a.zoom_out();a.redraw()}).appendTo(this.nav_controls);this.zi_link=$("<a id='zoom-in' />").click(function(){a.zoom_in();a.redraw()}).appendTo(this.nav_controls);this.load_chroms({low:0},d);this.chrom_select.bind("change",function(){a.change_chrom(a.chrom_select.val())});this.intro_div.show();this.content_div.bind("click",function(f){$(this).find("input").trigger("blur")});this.content_div.bind("dblclick",function(f){a.zoom_in(f.pageX,this.viewport_container)});this.overview_box.bind("dragstart",function(f,g){this.current_x=g.offsetX}).bind("drag",function(f,h){var j=h.offsetX-this.current_x;this.current_x=h.offsetX;var g=Math.round(j/a.viewport_container.width()*(a.max_high-a.max_low));a.move_delta(-g)});this.overview_close.bind("click",function(){for(var f=0,e=a.tracks.length;f<e;f++){a.tracks[f].is_overview=false}$(this).siblings().filter("canvas").remove();$(this).parent().css("height",a.overview_box.height());a.overview_highlight.hide();$(this).hide()});this.viewport_container.bind("draginit",function(f,g){if(f.clientX>a.viewport_container.width()-16){return false}}).bind("dragstart",function(f,g){g.original_low=a.low;g.current_height=f.clientY;g.current_x=g.offsetX}).bind("drag",function(h,k){var f=$(this);var l=k.offsetX-k.current_x;var g=f.scrollTop()-(h.clientY-k.current_height);f.scrollTop(g);k.current_height=h.clientY;k.current_x=k.offsetX;var j=Math.round(l/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}).bind("mousewheel",function(h,k,g,f){if(g){var j=Math.round(-g/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}});this.top_labeltrack.bind("dragstart",function(f,g){return $("<div />").css({height:a.content_div.height()+a.top_labeltrack.height()+a.nav_labeltrack.height()+1,top:"0px",position:"absolute","background-color":"#ccf",opacity:0.5,"z-index":1000}).appendTo($(this))}).bind("drag",function(k,l){$(l.proxy).css({left:Math.min(k.pageX,l.startX),width:Math.abs(k.pageX-l.startX)});var g=Math.min(k.pageX,l.startX)-a.container.offset().left,f=Math.max(k.pageX,l.startX)-a.container.offset().left,j=(a.high-a.low),h=a.viewport_container.width();a.update_location(Math.round(g/h*j)+a.low,Math.round(f/h*j)+a.low)}).bind("dragend",function(l,m){var g=Math.min(l.pageX,m.startX),f=Math.max(l.pageX,m.startX),j=(a.high-a.low),h=a.viewport_container.width(),k=a.low;a.low=Math.round(g/h*j)+k;a.high=Math.round(f/h*j)+k;$(m.proxy).remove();a.redraw()});this.add_label_track(new LabelTrack(this,this.top_labeltrack));this.add_label_track(new LabelTrack(this,this.nav_labeltrack));$(window).bind("resize",function(){a.resize_window()});$(document).bind("redraw",function(){a.redraw()});this.reset();$(window).trigger("resize")},update_location:function(a,b){this.location_span.text(commatize(a)+" - "+commatize(b));this.nav_input.val(this.chrom+":"+commatize(a)+"-"+commatize(b))},load_chroms:function(b,c){b.num=MAX_CHROMS_SELECTABLE;$.extend(b,(this.vis_id!==undefined?{vis_id:this.vis_id}:{dbkey:this.dbkey}));var a=this;$.ajax({url:chrom_url,data:b,dataType:"json",success:function(e){if(e.chrom_info.length===0){alert("Invalid chromosome: "+b.chrom);return}if(e.reference){a.add_label_track(new ReferenceTrack(a))}a.chrom_data=e.chrom_info;var h='<option value="">Select Chrom/Contig</option>';for(var g=0,d=a.chrom_data.length;g<d;g++){var f=a.chrom_data[g].chrom;h+='<option value="'+f+'">'+f+"</option>"}if(e.prev_chroms){h+='<option value="previous">Previous '+MAX_CHROMS_SELECTABLE+"</option>"}if(e.next_chroms){h+='<option value="next">Next '+MAX_CHROMS_SELECTABLE+"</option>"}a.chrom_select.html(h);if(c){c()}a.chrom_start_index=e.start_index},error:function(){alert("Could not load chroms for this dbkey:",a.dbkey)}})},change_chrom:function(e,b,g){if(!e||e==="None"){return}var d=this;if(e==="previous"){d.load_chroms({low:this.chrom_start_index-MAX_CHROMS_SELECTABLE});return}if(e==="next"){d.load_chroms({low:this.chrom_start_index+MAX_CHROMS_SELECTABLE});return}var f=$.grep(d.chrom_data,function(j,k){return j.chrom===e})[0];if(f===undefined){d.load_chroms({chrom:e},function(){d.change_chrom(e,b,g)});return}else{if(e!==d.chrom){d.chrom=e;if(!d.chrom){d.intro_div.show()}else{d.intro_div.hide()}d.chrom_select.val(d.chrom);d.max_high=f.len-1;d.reset();d.redraw(true);for(var h=0,a=d.tracks.length;h<a;h++){var c=d.tracks[h];if(c.init){c.init()}}}if(b!==undefined&&g!==undefined){d.low=Math.max(b,0);d.high=Math.min(g,d.max_high)}d.reset_overview();d.redraw()}},go_to:function(f){var k=this,a,d,b=f.split(":"),h=b[0],j=b[1];if(j!==undefined){try{var g=j.split("-");a=parseInt(g[0].replace(/,/g,""),10);d=parseInt(g[1].replace(/,/g,""),10)}catch(c){return false}}k.change_chrom(h,a,d)},move_fraction:function(c){var a=this;var b=a.high-a.low;this.move_delta(c*b)},move_delta:function(c){var a=this;var b=a.high-a.low;if(a.low-c<a.max_low){a.low=a.max_low;a.high=a.max_low+b}else{if(a.high-c>a.max_high){a.high=a.max_high;a.low=a.max_high-b}else{a.high-=c;a.low-=c}}a.redraw()},add_track:function(a){a.view=this;a.track_id=this.track_id_counter;this.tracks.push(a);if(a.init){a.init()}a.container_div.attr("id","track_"+a.track_id);sortable(a.container_div,".draghandle");this.track_id_counter+=1;this.num_tracks+=1},add_label_track:function(a){a.view=this;this.label_tracks.push(a)},remove_track:function(a){this.has_changes=true;a.container_div.fadeOut("slow",function(){$(this).remove()});delete this.tracks[this.tracks.indexOf(a)];this.num_tracks-=1},reset:function(){this.low=this.max_low;this.high=this.max_high;this.viewport_container.find(".yaxislabel").remove()},redraw:function(h){var g=this.high-this.low,f=this.low,b=this.high;if(f<this.max_low){f=this.max_low}if(b>this.max_high){b=this.max_high}if(this.high!==0&&g<this.min_separation){b=f+this.min_separation}this.low=Math.floor(f);this.high=Math.ceil(b);this.resolution=Math.pow(10,Math.ceil(Math.log((this.high-this.low)/200)/Math.LN10));this.zoom_res=Math.pow(FEATURE_LEVELS,Math.max(0,Math.ceil(Math.log(this.resolution,FEATURE_LEVELS)/Math.log(FEATURE_LEVELS))));var a=(this.low/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var e=((this.high-this.low)/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var j=13;this.overview_box.css({left:a,width:Math.max(j,e)}).show();if(e<j){this.overview_box.css("left",a-(j-e)/2)}if(this.overview_highlight){this.overview_highlight.css({left:a,width:e})}this.update_location(this.low,this.high);if(!h){for(var c=0,d=this.tracks.length;c<d;c++){if(this.tracks[c]&&this.tracks[c].enabled){this.tracks[c].draw()}}for(c=0,d=this.label_tracks.length;c<d;c++){this.label_tracks[c].draw()}}},zoom_in:function(b,c){if(this.max_high===0||this.high-this.low<this.min_separation){return}var d=this.high-this.low,e=d/2+this.low,a=(d/this.zoom_factor)/2;if(b){e=b/this.viewport_container.width()*(this.high-this.low)+this.low}this.low=Math.round(e-a);this.high=Math.round(e+a);this.redraw()},zoom_out:function(){if(this.max_high===0){return}var b=this.high-this.low,c=b/2+this.low,a=(b*this.zoom_factor)/2;this.low=Math.round(c-a);this.high=Math.round(c+a);this.redraw()},resize_window:function(){this.viewport_container.height(this.container.height()-this.top_container.height()-this.bottom_container.height());this.nav_container.width(this.container.width());this.redraw()},reset_overview:function(){this.overview_viewport.find("canvas").remove();this.overview_viewport.height(this.default_overview_height);this.overview_box.height(this.default_overview_height);this.overview_close.hide();this.overview_highlight.hide()}});var Tool=function(a,b){this.name=a;this.params=b};$.extend(Tool.prototype,{get_param_values_dict:function(){var b={};for(var a=0;a<this.params.length;a++){var c=this.params[a];b[c.name]=c.value}return b},get_param_values:function(){var b=[];for(var a=0;a<this.params.length;a++){b[a]=this.params[a].value}return b}});var NumberToolParameter=function(c,b,e,a,d){this.name=c;this.label=b;this.min=e;this.max=a;this.value=d};var get_tool_from_dict=function(f){if(obj_length(f)===0){return undefined}var b=f.name;var l=f.params;var c=Array();for(var e=0;e<l.length;e++){var g=l[e];var a=g.name,k=g.label,h=g.type,d=g.min,j=g.max,m=g.value;c[c.length]=new NumberToolParameter(a,k,d,j,m)}return new Tool(b,c)};var Filter=function(b,a,c){this.name=b;this.index=a;this.value=c};var NumberFilter=function(b,a){this.name=b;this.index=a;this.low=-Number.MAX_VALUE;this.high=Number.MAX_VALUE;this.slider_min=Number.MAX_VALUE;this.slider_max=-Number.MAX_VALUE;this.slider=null;this.slider_label=null};$.extend(NumberFilter.prototype,{applies_to:function(a){if(a.length>this.index){return true}return false},keep:function(a){if(!this.applies_to(a)){return true}return(a[this.index]>=this.low&&a[this.index]<=this.high)},update_attrs:function(b){var a=false;if(!this.applies_to(b)){return a}if(b[this.index]<this.slider_min){this.slider_min=b[this.index];a=true}if(b[this.index]>this.slider_max){this.slider_max=b[this.index];a=false}return a},update_ui_elt:function(){var b=this.slider.slider("option","min"),a=this.slider.slider("option","max");if(this.slider_min<b||this.slider_max>a){this.slider.slider("option","min",this.slider_min);this.slider.slider("option","max",this.slider_max);this.slider.slider("option","values",[this.slider_min,this.slider_max])}}});var get_filters_from_dict=function(a){var g=[];for(var d=0;d<a.length;d++){var f=a[d];var c=f.name,e=f.type,b=f.index;if(e==="int"||e==="float"){g[d]=new NumberFilter(c,b)}else{g[d]=new Filter(c,b,e)}}return g};var TrackConfig=function(a){this.track=a.track;this.params=a.params;this.values={};if(a.saved_values){this.restore_values(a.saved_values)}this.onchange=a.onchange};$.extend(TrackConfig.prototype,{restore_values:function(a){var b=this;$.each(this.params,function(c,d){if(a[d.key]!==undefined){b.values[d.key]=a[d.key]}else{b.values[d.key]=d.default_value}})},build_form:function(){var b=this;var a=$("<div />");$.each(this.params,function(f,d){if(!d.hidden){var c="param_"+f;var l=$("<div class='form-row' />").appendTo(a);l.append($("<label />").attr("for",c).text(d.label+":"));if(d.type==="bool"){l.append($('<input type="checkbox" />').attr("id",c).attr("name",c).attr("checked",b.values[d.key]))}else{if(d.type==="color"){var h=b.values[d.key];var g=$("<input />").attr("id",c).attr("name",c).val(h);var j=$("<div class='tipsy tipsy-north' style='position: absolute;' />").hide();var e=$("<div style='background-color: black; padding: 10px;'></div>").appendTo(j);var k=$("<div/>").appendTo(e).farbtastic({width:100,height:100,callback:g,color:h});$("<div />").append(g).append(j).appendTo(l).bind("click",function(m){j.css({left:$(this).position().left+($(g).width()/2)-60,top:$(this).position().top+$(this.height)}).show();$(document).bind("click.color-picker",function(){j.hide();$(document).unbind("click.color-picker")});m.stopPropagation()})}else{l.append($("<input />").attr("id",c).attr("name",c).val(b.values[d.key]))}}}});return a},update_from_form:function(a){var c=this;var b=false;$.each(this.params,function(d,f){if(!f.hidden){var g="param_"+d;var e=a.find("#"+g).val();if(f.type==="float"){e=parseFloat(e)}else{if(f.type==="int"){e=parseInt(e)}else{if(f.type==="bool"){e=a.find("#"+g).is(":checked")}}}if(e!==c.values[f.key]){c.values[f.key]=e;b=true}}});if(b){this.onchange()}}});var Track=function(b,a,e,c,d){this.name=b;this.view=a;this.parent_element=e;this.data_url=(c?c:default_data_url);this.data_url_extra_params={};this.data_query_wait=(d?d:DEFAULT_DATA_QUERY_WAIT);this.dataset_check_url=converted_datasets_state_url;this.container_div=$("<div />").addClass("track").css("position","relative");if(!this.hidden){this.header_div=$("<div class='track-header' />").appendTo(this.container_div);if(this.view.editor){this.drag_div=$("<div class='draghandle' />").appendTo(this.header_div)}this.name_div=$("<div class='menubutton popup' />").appendTo(this.header_div);this.name_div.text(this.name);this.name_div.attr("id",this.name.replace(/\s+/g,"-").replace(/[^a-zA-Z0-9\-]/g,"").toLowerCase())}this.content_div=$("<div class='track-content'>").appendTo(this.container_div);this.parent_element.append(this.container_div)};$.extend(Track.prototype,{init:function(){var a=this;a.enabled=false;a.tile_cache.clear();a.data_cache.clear();a.initial_canvas=undefined;a.content_div.css("height","auto");a.container_div.removeClass("nodata error pending");if(!a.dataset_id){return}$.getJSON(converted_datasets_state_url,{hda_ldda:a.hda_ldda,dataset_id:a.dataset_id,chrom:a.view.chrom},function(b){if(!b||b==="error"||b.kind==="error"){a.container_div.addClass("error");a.content_div.text(DATA_ERROR);if(b.message){var d=a.view.tracks.indexOf(a);var c=$(" <a href='javascript:void(0);'></a>").text("View error").bind("click",function(){show_modal("Trackster Error","<pre>"+b.message+"</pre>",{Close:hide_modal})});a.content_div.append(c)}}else{if(b==="no converter"){a.container_div.addClass("error");a.content_div.text(DATA_NOCONVERTER)}else{if(b==="no data"||(b.data!==undefined&&(b.data===null||b.data.length===0))){a.container_div.addClass("nodata");a.content_div.text(DATA_NONE)}else{if(b==="pending"){a.container_div.addClass("pending");a.content_div.text(DATA_PENDING);setTimeout(function(){a.init()},a.data_query_wait)}else{if(b.status==="data"){if(b.valid_chroms){a.valid_chroms=b.valid_chroms;a.make_name_popup_menu()}a.content_div.text(DATA_OK);if(a.view.chrom){a.content_div.text("");a.content_div.css("height",a.height_px+"px");a.enabled=true;$.when(a.predraw_init()).done(function(){a.draw()})}}}}}}})},predraw_init:function(){},update_name:function(a){this.old_name=this.name;this.name=a;this.name_div.text(this.name)},revert_name:function(){this.name=this.old_name;this.name_div.text(this.name)}});var TiledTrack=function(b,j,n){var c=this,o=c.view;this.filters=(b!==undefined?get_filters_from_dict(b):[]);this.filters_available=false;this.filters_visible=false;this.tool=(j!==undefined?get_tool_from_dict(j):undefined);this.parent_track=n;this.child_tracks=[];if(c.hidden){return}if(this.parent_track){this.header_div.find(".draghandle").removeClass("draghandle").addClass("child-track-icon").addClass("icon-button");this.parent_element.addClass("child-track");this.tool=undefined}this.filters_div=$("<div/>").addClass("filters").hide();this.header_div.after(this.filters_div);this.filters_div.bind("drag",function(q){q.stopPropagation()}).bind("dblclick",function(q){q.stopPropagation()});$.each(this.filters,function(t,w){var u=$("<div/>").addClass("slider-row").appendTo(c.filters_div);var v=$("<div/>").addClass("slider-label").appendTo(u);var s=$("<span/>").addClass("name").appendTo(v);s.text(w.name+" ");var r=$("<span/>").addClass("values").appendTo(v);var q=$("<div/>").addClass("slider").appendTo(u);w.control_element=$("<div/>").attr("id",w.name+"-filter-control").appendTo(q);w.control_element.slider({range:true,min:Number.MAX_VALUE,max:-Number.MIN_VALUE,values:[0,0],slide:function(y,z){var x=z.values;r.text("["+x[0]+"-"+x[1]+"]");w.low=x[0];w.high=x[1];c.draw(true,true)},change:function(x,y){w.control_element.slider("option","slide").call(w.control_element,x,y)}});w.slider=w.control_element;w.slider_label=r;$("<div style='clear: both;'/>").appendTo(u)});if(this.tool){this.dynamic_tool_div=$("<div/>").addClass("dynamic-tool").hide();this.header_div.after(this.dynamic_tool_div);this.dynamic_tool_div.bind("drag",function(q){q.stopPropagation()}).bind("click",function(q){q.stopPropagation()}).bind("dblclick",function(q){q.stopPropagation()});var m=$("<div class='tool-name'>").appendTo(this.dynamic_tool_div).text(this.tool.name);var l=this.tool.params;var c=this;$.each(this.tool.params,function(x,s){var v=$("<div>").addClass("slider-row").appendTo(c.dynamic_tool_div);var u=$("<div>").addClass("slider-label").appendTo(v);var z=$("<span class='param-name'>").text(s.label+" ").appendTo(u);var t=$("<span/>").text(s.value);var w=$("<span class='param-value'>").appendTo(u).append("[").append(t).append("]");var y=$("<div/>").addClass("slider").appendTo(v);var q=$("<div id='"+s.name+"-param-control'>").appendTo(y);var r=(s.max<=1?0.01:(s.max<=1000?1:5));q.slider({min:s.min,max:s.max,step:r,value:s.value,slide:function(A,C){var B=C.value;s.value=B;if(0<B&&B<1){B=parseFloat(B).toFixed(2)}t.text(B)},change:function(A,B){s.value=B.value}});w.click(function(){var C=t,B=C.text(),A=(s.max<=1?4:s.max.length);C.text("");$("<input type='text'/>").attr("size",A).attr("maxlength",A).attr("value",B).appendTo(C).focus().select().click(function(D){D.stopPropagation()}).blur(function(){$(this).remove();C.text(B)}).keyup(function(F){if(F.keyCode===27){$(this).trigger("blur")}else{if(F.keyCode===13){var D=$(this),E=parseFloat(D.val());if(isNaN(E)||E>s.max||E<s.min){alert("Parameter value must be in the range ["+s.min+"-"+s.max+"]");return $(this)}C.text(E);q.slider("value",E);s.value=E}}})});$("<div style='clear: both;'/>").appendTo(v)});var p=$("<div>").addClass("slider-row").appendTo(this.dynamic_tool_div);var k=$("<input type='submit'>").attr("value","Run").appendTo(p);var c=this;k.click(function(){c.run_tool()})}c.child_tracks_container=$("<div/>").addClass("child-tracks-container").hide();c.container_div.append(c.child_tracks_container);if(c.display_modes!==undefined){if(c.mode_div===undefined){c.mode_div=$("<div class='right-float menubutton popup' />").appendTo(c.header_div);var e=(c.track_config&&c.track_config.values.mode?c.track_config.values.mode:c.display_modes[0]);c.mode=e;c.mode_div.text(e);var d=function(q){c.mode_div.text(q);c.mode=q;c.track_config.values.mode=q;c.tile_cache.clear();c.draw()};var a={};for(var f=0,h=c.display_modes.length;f<h;f++){var g=c.display_modes[f];a[g]=function(q){return function(){d(q)}}(g)}make_popupmenu(c.mode_div,a)}else{c.mode_div.hide()}}this.make_name_popup_menu()};$.extend(TiledTrack.prototype,Track.prototype,{make_name_popup_menu:function(){var b=this;var a={};a["Edit configuration"]=function(){var h=function(){hide_modal();$(window).unbind("keypress.check_enter_esc")},f=function(){b.track_config.update_from_form($(".dialog-box"));hide_modal();$(window).unbind("keypress.check_enter_esc")},g=function(j){if((j.keyCode||j.which)===27){h()}else{if((j.keyCode||j.which)===13){f()}}};$(window).bind("keypress.check_enter_esc",g);show_modal("Configure Track",b.track_config.build_form(),{Cancel:h,OK:f})};if(b.filters_available>0){var e=(b.filters_div.is(":visible")?"Hide filters":"Show filters");a[e]=function(){b.filters_visible=(b.filters_div.is(":visible"));b.filters_div.toggle();b.make_name_popup_menu()}}if(b.tool){var e=(b.dynamic_tool_div.is(":visible")?"Hide Tool":"Show Tool");a[e]=function(){if(!b.dynamic_tool_div.is(":visible")){b.update_name(b.name+b.tool_region_and_parameters_str())}else{menu_option_text="Show dynamic tool";b.revert_name()}b.dynamic_tool_div.toggle();b.make_name_popup_menu()}}if(b.valid_chroms){a["List chrom/contigs with data"]=function(){show_modal("Chrom/contigs with data","<p>"+b.valid_chroms.join("<br/>")+"</p>",{Close:function(){hide_modal()}})}}var c=view;var d=function(){$("#no-tracks").show()};if(this.parent_track){c=this.parent_track;d=function(){}}a.Remove=function(){c.remove_track(b);if(c.num_tracks===0){d()}};make_popupmenu(b.name_div,a)},draw:function(a,d){var s=this.view.low,g=this.view.high,j=g-s,l=this.view.container.width(),m=this.view.resolution;var e=$("<div style='position: relative;'></div>"),f=l/j;if(!d){this.content_div.children().remove()}this.content_div.append(e);this.max_height=0;var o=Math.floor(s/m/DENSITY);var c={};while((o*DENSITY*m)<g){var r=l+"_"+f+"_"+o;var h=this.tile_cache.get(r);var p=o*DENSITY*this.view.resolution;var b=p+DENSITY*this.view.resolution;if(!a&&h){this.show_tile(h,e,p,f)}else{this.delayed_draw(a,r,p,b,o,m,e,f,c)}o+=1}if(d){var k=this;var q=setInterval(function(){if(obj_length(c)===0){var v=k.content_div.children();var u=false;for(var w=v.length-1,t=0;w>=t;w--){var x=$(v[w]);if(u){x.remove()}else{if(x.children().length!==0){u=true}}}clearInterval(q)}},50)}for(var n=0;n<this.child_tracks.length;n++){this.child_tracks[n].draw(a,d)}},delayed_draw:function(b,j,g,l,c,e,k,m,f){var d=this;var h=function(u,n,p,o,s,t,q){returned_tile=d.draw_tile(n,p,o,s,t,q);var r=$("<div class='track-tile'>").prepend(returned_tile);tile_element=r;d.tile_cache.set(j,tile_element);d.show_tile(tile_element,s,g,t);delete f[u]};var a=setTimeout(function(){if(g<=d.view.high&&l>=d.view.low){var n=(b?undefined:d.tile_cache.get(j));if(n){d.show_tile(n,k,g,m);delete f[a]}else{$.when(d.data_cache.get_data(view.chrom,g,l,d.mode,e,d.data_url_extra_params)).then(function(){var o=d.data_cache.get_data(view.chrom,g,l,d.mode,e,d.data_url_extra_params);if(view.reference_track&&m>CHAR_WIDTH_PX){$.when(view.reference_track.data_cache.get_data(view.chrom,g,l,d.mode,e,view.reference_track.data_url_extra_params)).then(function(){var p=view.reference_track.data_cache.get_data(view.chrom,g,l,d.mode,e,view.reference_track.data_url_extra_params);h(a,o,e,c,k,m,p)})}else{h(a,o,e,c,k,m)}})}}},50);f[a]=true},show_tile:function(h,j,e,k){var a=this;var c=this.view.high-this.view.low,b=(e-this.view.low)*k;if(this.left_offset){b-=this.left_offset}h.css({position:"absolute",top:0,left:b,height:""});j.append(h);a.max_height=Math.max(a.max_height,h.height());a.content_div.css("height",a.max_height+"px");j.children().css("height",a.max_height+"px");if(a.hidden){return}for(var g=0;g<a.filters.length;g++){a.filters[g].update_ui_elt()}var d=false;if(a.example_feature){for(var g=0;g<a.filters.length;g++){if(a.filters[g].applies_to(a.example_feature)){d=true;break}}}if(a.filters_available!==d){a.filters_available=d;if(!a.filters_available){a.filters_div.hide()}a.make_name_popup_menu()}},set_overview:function(){var a=this.view;if(this.initial_canvas&&this.is_overview){a.overview_close.show();a.overview_viewport.append(this.initial_canvas);a.overview_highlight.show().height(this.initial_canvas.height());a.overview_viewport.height(this.initial_canvas.height()+a.overview_box.height())}$(window).trigger("resize")},run_tool:function(){var b={dataset_id:this.original_dataset_id,chrom:this.view.chrom,low:this.view.low,high:this.view.high,tool_id:this.tool.name};$.extend(b,this.tool.get_param_values_dict());var d=this,c=b.tool_id+d.tool_region_and_parameters_str(b.chrom,b.low,b.high),e;if(d.track_type==="FeatureTrack"){e=new ToolDataFeatureTrack(c,view,d.hda_ldda,undefined,{},{},d)}this.add_track(e);e.content_div.text("Starting job.");view.has_changes=true;var a=function(){$.getJSON(run_tool_url,b,function(f){if(f==="no converter"){e.container_div.addClass("error");e.content_div.text(DATA_NOCONVERTER)}else{if(f.error){e.container_div.addClass("error");e.content_div.text(DATA_CANNOT_RUN_TOOL+f.message)}else{if(f==="pending"){e.container_div.addClass("pending");e.content_div.text("Converting input data so that it can be easily reused.");setTimeout(a,2000)}else{e.dataset_id=f.dataset_id;e.content_div.text("Running job.");e.init()}}}})};a()},tool_region_and_parameters_str:function(c,a,d){var b=this,e=(c!==undefined&&a!==undefined&&d!==undefined?c+":"+a+"-"+d:"all");return" - region=["+e+"], parameters=["+b.tool.get_param_values().join(", ")+"]"},add_track:function(a){a.track_id=this.track_id+"_"+this.child_tracks.length;a.container_div.attr("id","track_"+a.track_id);this.child_tracks_container.append(a.container_div);sortable(a.container_div,".child-track-icon");if(!$(this.child_tracks_container).is(":visible")){this.child_tracks_container.show()}this.child_tracks.push(a)},remove_track:function(a){a.container_div.fadeOut("slow",function(){$(this).remove()})}});var LabelTrack=function(a,b){this.track_type="LabelTrack";this.hidden=true;Track.call(this,null,a,b);this.container_div.addClass("label-track")};$.extend(LabelTrack.prototype,Track.prototype,{draw:function(){var c=this.view,d=c.high-c.low,g=Math.floor(Math.pow(10,Math.floor(Math.log(d)/Math.log(10)))),a=Math.floor(c.low/g)*g,e=this.view.container.width(),b=$("<div style='position: relative; height: 1.3em;'></div>");while(a<c.high){var f=(a-c.low)/d*e;b.append($("<div class='label'>"+commatize(a)+"</div>").css({position:"absolute",left:f-1}));a+=g}this.content_div.children(":first").remove();this.content_div.append(b)}});var ReferenceTrack=function(a){this.track_type="ReferenceTrack";this.hidden=true;Track.call(this,null,a,a.top_labeltrack);TiledTrack.call(this);a.reference_track=this;this.left_offset=200;this.height_px=12;this.font=DEFAULT_FONT;this.container_div.addClass("reference-track");this.content_div.css("background","none");this.content_div.css("min-height","0px");this.content_div.css("border","none");this.data_url=reference_url;this.data_url_extra_params={dbkey:a.dbkey};this.data_cache=new DataManager(CACHED_DATA,this,false);this.tile_cache=new Cache(CACHED_TILES_LINE)};$.extend(ReferenceTrack.prototype,TiledTrack.prototype,{draw_tile:function(m,g,b,j,n){var f=this,d=DENSITY*g;if(n>CHAR_WIDTH_PX){if(m===null){f.content_div.css("height","0px");return}var e=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(e)}e=$(e);var l=e.get(0).getContext("2d");e.get(0).width=Math.ceil(d*n+f.left_offset);e.get(0).height=f.height_px;l.font=DEFAULT_FONT;l.textAlign="center";for(var h=0,k=m.length;h<k;h++){var a=Math.round(h*n);l.fillText(m[h],a+f.left_offset,10)}return e}this.content_div.css("height","0px")}});var LineTrack=function(e,c,f,a,d){var b=this;this.track_type="LineTrack";this.display_modes=["Histogram","Line","Filled","Intensity"];this.mode="Histogram";Track.call(this,e,c,c.viewport_container);TiledTrack.call(this);this.min_height_px=16;this.max_height_px=400;this.height_px=80;this.hda_ldda=f;this.dataset_id=a;this.original_dataset_id=a;this.data_cache=new DataManager(CACHED_DATA,this);this.tile_cache=new Cache(CACHED_TILES_LINE);this.track_config=new TrackConfig({track:this,params:[{key:"color",label:"Color",type:"color",default_value:"black"},{key:"min_value",label:"Min Value",type:"float",default_value:undefined},{key:"max_value",label:"Max Value",type:"float",default_value:undefined},{key:"mode",type:"string",default_value:this.mode,hidden:true},{key:"height",type:"int",default_value:this.height_px,hidden:true}],saved_values:d,onchange:function(){b.vertical_range=b.prefs.max_value-b.prefs.min_value;$("#linetrack_"+b.track_id+"_minval").text(b.prefs.min_value);$("#linetrack_"+b.track_id+"_maxval").text(b.prefs.max_value);b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;this.height_px=this.track_config.values.height;this.vertical_range=this.track_config.values.max_value-this.track_config.values.min_value;(function(g){var k=false;var j=false;var h=$("<div class='track-resize'>");$(g.container_div).hover(function(){k=true;h.show()},function(){k=false;if(!j){h.hide()}});h.hide().bind("dragstart",function(l,m){j=true;m.original_height=$(g.content_div).height()}).bind("drag",function(m,n){var l=Math.min(Math.max(n.original_height+n.deltaY,g.min_height_px),g.max_height_px);$(g.content_div).css("height",l);g.height_px=l;g.draw(true)}).bind("dragend",function(l,m){g.tile_cache.clear();j=false;if(!k){h.hide()}g.track_config.values.height=g.height_px}).appendTo(g.container_div)})(this)};$.extend(LineTrack.prototype,TiledTrack.prototype,{predraw_init:function(){var a=this,b=a.view.tracks.indexOf(a);a.vertical_range=undefined;return $.getJSON(a.data_url,{stats:true,chrom:a.view.chrom,low:null,high:null,hda_ldda:a.hda_ldda,dataset_id:a.dataset_id},function(c){a.container_div.addClass("line-track");var e=c.data;if(isNaN(parseFloat(a.prefs.min_value))||isNaN(parseFloat(a.prefs.max_value))){a.prefs.min_value=e.min;a.prefs.max_value=e.max;$("#track_"+b+"_minval").val(a.prefs.min_value);$("#track_"+b+"_maxval").val(a.prefs.max_value)}a.vertical_range=a.prefs.max_value-a.prefs.min_value;a.total_frequency=e.total_frequency;a.container_div.find(".yaxislabel").remove();var f=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_minval").text(round_1000(a.prefs.min_value));var d=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_maxval").text(round_1000(a.prefs.max_value));d.css({position:"absolute",top:"24px",left:"10px"});d.prependTo(a.container_div);f.css({position:"absolute",bottom:"2px",left:"10px"});f.prependTo(a.container_div)})},draw_tile:function(j,q,t,c,e){if(this.vertical_range===undefined){return}var o=this,u=t*DENSITY*q,a=DENSITY*q,B=q+"_"+t,v={hda_ldda:this.hda_ldda,dataset_id:this.dataset_id,resolution:this.view.resolution};var b=document.createElement("canvas"),z=j.data;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(b)}b=$(b);b.get(0).width=Math.ceil(a*e);b.get(0).height=o.height_px;var p=b.get(0).getContext("2d"),k=false,l=o.prefs.min_value,g=o.prefs.max_value,n=o.vertical_range,w=o.total_frequency,d=o.height_px,m=o.mode;var A=Math.round(d+l/n*d);p.beginPath();p.moveTo(0,A);p.lineTo(a*e,A);p.fillStyle="#aaa";p.stroke();p.beginPath();p.fillStyle=o.prefs.color;var x,h,f;if(z.length>1){f=Math.ceil((z[1][0]-z[0][0])*e)}else{f=10}for(var r=0,s=z.length;r<s;r++){x=Math.round((z[r][0]-u)*e);h=z[r][1];if(h===null){if(k&&m==="Filled"){p.lineTo(x,d)}k=false;continue}if(h<l){h=l}else{if(h>g){h=g}}if(m==="Histogram"){h=Math.round(h/n*d);p.fillRect(x,A,f,-h)}else{if(m==="Intensity"){h=255-Math.floor((h-l)/n*255);p.fillStyle="rgb("+h+","+h+","+h+")";p.fillRect(x,0,f,d)}else{h=Math.round(d-(h-l)/n*d);if(k){p.lineTo(x,h)}else{k=true;if(m==="Filled"){p.moveTo(x,d);p.lineTo(x,h)}else{p.moveTo(x,h)}}}}}if(m==="Filled"){if(k){p.lineTo(x,A);p.lineTo(0,A)}p.fill()}else{p.stroke()}return b}});var FeatureTrack=function(a,f,e,j,h,c,d,g){var b=this;this.track_type="FeatureTrack";this.display_modes=["Auto","Dense","Squish","Pack"];this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{key:"show_counts",label:"Show summary counts",type:"bool",default_value:true},{key:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:h,onchange:function(){b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;Track.call(this,a,f,f.viewport_container);TiledTrack.call(this,c,d,g);this.height_px=0;this.container_div.addClass("feature-track");this.hda_ldda=e;this.dataset_id=j;this.original_dataset_id=j;this.zo_slots={};this.show_labels_scale=0.001;this.showing_details=false;this.summary_draw_height=30;this.default_font=DEFAULT_FONT;this.inc_slots={};this.start_end_dct={};this.tile_cache=new Cache(CACHED_TILES_FEATURE);this.data_cache=new DataManager(20,this);this.left_offset=200};$.extend(FeatureTrack.prototype,TiledTrack.prototype,{incremental_slots:function(a,h,p){var q=this.inc_slots[a];if(!q||(q.mode!==p)){q={};q.w_scale=a;q.mode=p;this.inc_slots[a]=q;this.start_end_dct[a]={}}var l=q.w_scale,w=[],x=[],j=0,n=this.view.max_low;for(var u=0,v=h.length;u<v;u++){var g=h[u],k=g[0];if(q[k]!==undefined){j=Math.max(j,q[k]);x.push(q[k])}else{w.push(u)}}var d=this.start_end_dct[a];var m=function(D,E){for(var C=0;C<=MAX_FEATURE_DEPTH;C++){var A=false,F=d[C];if(F!==undefined){for(var z=0,B=F.length;z<B;z++){var y=F[z];if(E>y[0]&&D<y[1]){A=true;break}}}if(!A){return C}}return -1};for(var u=0,v=w.length;u<v;u++){var g=h[w[u]],k=g[0],s=g[1],b=g[2],o=g[3],c=Math.floor((s-n)*l),f=Math.ceil((b-n)*l),t=CONTEXT.measureText(o).width,e;if(o!==undefined&&p==="Pack"){t+=(LABEL_SPACING+PACK_SPACING);if(c-t>=0){c-=t;e="left"}else{f+=t;e="right"}}var r=m(c,f);if(r>=0){if(d[r]===undefined){d[r]=[]}d[r].push([c,f]);q[k]=r;j=Math.max(j,r)}else{}}return j+1},draw_summary_tree:function(b,o,n,l,r,j,f,e){var c=j+LABEL_SPACING+CHAR_HEIGHT_PX;delta_x_px=Math.ceil(n*r);var h=$("<div />").addClass("yaxislabel");h.text(l);h.css({position:"absolute",top:"22px",left:"10px"});h.prependTo(this.container_div);var q=b.get(0).getContext("2d");for(var d=0,g=o.length;d<g;d++){var m=Math.floor((o[d][0]-f)*r);var k=o[d][1];if(!k){continue}var p=k/l*j;q.fillStyle="black";q.fillRect(m+e,c-p,delta_x_px,p);var a=4;if(this.prefs.show_counts&&(q.measureText(k).width+a)<delta_x_px){q.fillStyle="#666";q.textAlign="center";q.fillText(k,m+e+(delta_x_px/2),10)}}},draw_element:function(p,f,g,x,j,r,I,M,N,a,A){var u=x[0],K=x[1],C=x[2]-1,s=x[3],D=Math.floor(Math.max(0,(K-r)*M)),q=Math.ceil(Math.min(a,Math.max(0,(C-r)*M))),B=ERROR_PADDING+(g==="Dense"?0:(0+j))*N,o,G,t=null,O=null,d=this.prefs.block_color,F=this.prefs.label_color;if(g==="Dense"){p.fillStyle=d;p.fillRect(D+A,B,q-D,DENSE_FEATURE_HEIGHT)}else{if(g==="no_detail"){p.fillStyle=d;p.fillRect(D+A,B+5,q-D,DENSE_FEATURE_HEIGHT)}else{var n=x[5],z=x[6],E=x[7],e=x[8];if(z&&E){t=Math.floor(Math.max(0,(z-r)*M));O=Math.ceil(Math.min(a,Math.max(0,(E-r)*M)))}var L,v;if(g==="Squish"){L=1;v=SQUISH_FEATURE_HEIGHT}else{L=5;v=PACK_FEATURE_HEIGHT}if(!e){if(x.strand){if(x.strand==="+"){p.fillStyle=RIGHT_STRAND_INV}else{if(x.strand==="-"){p.fillStyle=LEFT_STRAND_INV}}}else{p.fillStyle=d}p.fillRect(D+A,B,q-D,v)}else{var m,w;if(g==="Squish"){p.fillStyle=CONNECTOR_COLOR;m=B+Math.floor(SQUISH_FEATURE_HEIGHT/2)+1;w=1}else{if(n){var m=B;var w=v;if(n==="+"){p.fillStyle=RIGHT_STRAND}else{if(n==="-"){p.fillStyle=LEFT_STRAND}}}else{p.fillStyle=CONNECTOR_COLOR;m+=(SQUISH_FEATURE_HEIGHT/2)+1;w=1}}p.fillRect(D+A,m,q-D,w);for(var J=0,c=e.length;J<c;J++){var h=e[J],b=Math.floor(Math.max(0,(h[0]-r)*M)),y=Math.ceil(Math.min(a,Math.max((h[1]-1-r)*M)));if(b>y){continue}p.fillStyle=d;p.fillRect(b+A,B+(v-L)/2+1,y-b,L);if(t!==undefined&&!(b>O||y<t)){var H=Math.max(b,t),l=Math.min(y,O);p.fillRect(H+A,B+1,l-H,v)}}}if(g==="Pack"&&K>r){p.fillStyle=F;if(f===0&&D-p.measureText(s).width<0){p.textAlign="left";p.fillText(s,q+A+LABEL_SPACING,B+8)}else{p.textAlign="right";p.fillText(s,D+A-LABEL_SPACING,B+8)}p.fillStyle=d}}}},get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="no_detail"){a=NO_DETAIL_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT}}}return a},draw_tile:function(o,x,C,k,m,d){var t=this;var E=C*DENSITY*x,a=(C+1)*DENSITY*x,q=a-E,F={hda_ldda:t.hda_ldda,dataset_id:t.dataset_id,resolution:this.view.resolution,mode:this.mode};var v=Math.ceil(q*m),s=this.mode,H=25,g=this.left_offset,p,h;var c=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(c)}c=$(c);if(s==="Auto"){if(o.dataset_type==="summary_tree"){s=o.dataset_type}else{if(o.extra_info==="no_detail"){s="no_detail"}else{var G=o.data;if((G.length&&G.length<4)||(this.view.high-this.view.low>MIN_SQUISH_VIEW_WIDTH)){s="Squish"}else{s="Pack"}}}}var y=this.get_y_scale(s);if(s==="summary_tree"){h=this.summary_draw_height}if(s==="Dense"){h=H}else{if(s==="no_detail"||s==="Squish"||s==="Pack"){h=this.incremental_slots(m,o.data,s)*y+H;p=this.inc_slots[m]}}c.get(0).width=v+g;c.get(0).height=h;if(o.dataset_type==="summary_tree"){c.get(0).height+=LABEL_SPACING+CHAR_HEIGHT_PX}k.parent().css("height",Math.max(this.height_px,h)+"px");var w=c.get(0).getContext("2d");w.fillStyle=this.prefs.block_color;w.font=this.default_font;w.textAlign="right";this.container_div.find(".yaxislabel").remove();if(s==="summary_tree"){this.draw_summary_tree(c,o.data,o.delta,o.max,m,h,E,g);return c}if(o.message){c.css({"border-top":"1px solid red"});w.fillStyle="red";w.textAlign="left";var r=w.textBaseline;w.textBaseline="top";w.fillText(o.message,g,0);w.textBaseline=r;if(!o.data){return c}}this.example_feature=(o.data.length?o.data[0]:undefined);var G=o.data;for(var z=0,B=G.length;z<B;z++){var j=G[z],l=j[0],u=j[1],b=j[2],e=(p&&p[l]!==undefined?p[l]:null);var A=false;var n;for(var D=0;D<this.filters.length;D++){n=this.filters[D];n.update_attrs(j);if(!n.keep(j)){A=true;break}}if(A){continue}if(is_overlap([u,b],[E,a])&&(s=="Dense"||e!==null)){this.draw_element(w,C,s,j,e,E,a,m,y,v,g,d)}}return c}});var VcfTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_type="VcfTrack"};$.extend(VcfTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{draw_element:function(u,p,j,e,x,c,m,v,s){var j=data[i],l=j[0],t=j[1],d=j[2]-1,o=j[3],g=Math.floor(Math.max(0,(t-x)*m)),k=Math.ceil(Math.min(s,Math.max(0,(d-x)*m))),f=ERROR_PADDING+(p==="Dense"?0:(0+e))*v,a,y,b=null,n=null;if(no_label){u.fillStyle=block_color;u.fillRect(g+left_offset,f+5,k-g,1)}else{var w=j[4],r=j[5],h=j[6];a=9;y=1;u.fillRect(g+left_offset,f,k-g,a);if(p!=="Dense"&&o!==undefined&&t>x){u.fillStyle=label_color;if(tile_index===0&&g-u.measureText(o).width<0){u.textAlign="left";u.fillText(o,k+2+left_offset,f+8)}else{u.textAlign="right";u.fillText(o,g-2+left_offset,f+8)}u.fillStyle=block_color}var q=w+" / "+r;if(t>x&&u.measureText(q).width<(k-g)){u.fillStyle="white";u.textAlign="center";u.fillText(q,left_offset+g+(k-g)/2,f+8);u.fillStyle=block_color}}}});var ReadTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{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:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:c,onchange:function(){this.track.tile_cache.clear();this.track.draw()}});this.prefs=this.track_config.values;this.track_type="ReadTrack";this.make_name_popup_menu()};$.extend(ReadTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT;if(this.track_config.values.show_insertions){a*=2}}}return a},draw_read:function(m,d,J,n,D,G,e,o,y,a){m.textAlign="center";var l=this,u=[n,D],C=0,z=0,f=0;var r=[];if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){f=Math.round(J/2)}if(!e){e=[[0,o.length]]}for(var h=0,k=e.length;h<k;h++){var b=e[h],g="MIDNSHP=X"[b[0]],v=b[1];if(g==="H"||g==="S"){C-=v}var x=G+C,B=Math.floor(Math.max(0,(x-n)*J)),E=Math.floor(Math.max(0,(x+v-n)*J));switch(g){case"H":break;case"S":case"M":case"=":var p=compute_overlap([x,x+v],u);if(p!==NO_OVERLAP){var q=o.slice(z,z+v);if(f>0){m.fillStyle=this.prefs.block_color;m.fillRect(B+this.left_offset-f,y+1,E-B,9);m.fillStyle=CONNECTOR_COLOR;for(var I=0,j=q.length;I<j;I++){if(this.track_config.values.show_differences&&a){var s=a[x-n+I];if(!s||s.toLowerCase()===q[I].toLowerCase()){continue}}if(x+I>=n&&x+I<=D){var A=Math.floor(Math.max(0,(x+I-n)*J));m.fillText(q[I],A+this.left_offset,y+9)}}}else{m.fillStyle=this.prefs.block_color;m.fillRect(B+this.left_offset,y+(this.mode!=="Dense"?4:5),E-B,(d!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}z+=v;C+=v;break;case"N":m.fillStyle=CONNECTOR_COLOR;m.fillRect(B+this.left_offset-f,y+5,E-B,1);C+=v;break;case"D":m.fillStyle="red";m.fillRect(B+this.left_offset-f,y+4,E-B,3);C+=v;break;case"P":break;case"I":var p=compute_overlap([x,x+v],u),K=this.left_offset+B-f;if(p!==NO_OVERLAP){var q=o.slice(z,z+v);if(this.track_config.values.show_insertions){var w=this.left_offset+B-(E-B)/2;if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){m.fillStyle="yellow";m.fillRect(w-f,y-9,E-B,9);r[r.length]={type:"triangle",data:[K,y+4,5]};m.fillStyle=CONNECTOR_COLOR;switch(p){case (OVERLAP_START):q=q.slice(n-x);break;case (OVERLAP_END):q=q.slice(0,x-D);break;case (CONTAINED_BY):break;case (CONTAINS):q=q.slice(n-x,x-D);break}for(var I=0,j=q.length;I<j;I++){var A=Math.floor(Math.max(0,(x+I-n)*J));m.fillText(q[I],A+this.left_offset-(E-B)/2,y)}}else{m.fillStyle="yellow";m.fillRect(w,y+(this.mode!=="Dense"?2:5),E-B,(d!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}else{if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){r[r.length]={type:"text",data:[q.length,K,y+9]}}else{}}}z+=v;break;case"X":z+=v;break}}m.fillStyle="yellow";var t,L,H;for(var F=0;F<r.length;F++){t=r[F];L=t.type;H=t.data;if(L==="text"){m.font="bold "+DEFAULT_FONT;m.fillText(H[0],H[1],H[2]);m.font=DEFAULT_FONT}else{if(L=="triangle"){m.drawDownwardEquilateralTriangle(H[0],H[1],H[2])}}}},draw_element:function(w,y,r,k,e,A,b,n,x,u,f,c){var m=k[0],v=k[1],d=k[2],o=k[3],h=Math.floor(Math.max(0,(v-A)*n)),j=Math.ceil(Math.min(u,Math.max(0,(d-A)*n))),g=(r==="Dense"?1:(1+e))*x,z=this.prefs.block_color,l=this.prefs.label_color;t=0;w.fillStyle=z;if(k[5] instanceof Array){var s=Math.floor(Math.max(0,(k[4][0]-A)*n)),q=Math.ceil(Math.min(u,Math.max(0,(k[4][1]-A)*n))),p=Math.floor(Math.max(0,(k[5][0]-A)*n)),a=Math.ceil(Math.min(u,Math.max(0,(k[5][1]-A)*n)));if(k[4][1]>=A&&k[4][0]<=b&&k[4][2]){this.draw_read(w,r,n,A,b,k[4][0],k[4][2],k[4][3],g,c)}if(k[5][1]>=A&&k[5][0]<=b&&k[5][2]){this.draw_read(w,r,n,A,b,k[5][0],k[5][2],k[5][3],g,c)}if(p>q){w.fillStyle=CONNECTOR_COLOR;w.dashedLine(q+f,g+5,f+p,g+5)}}else{w.fillStyle=z;this.draw_read(w,r,n,A,b,v,k[4],k[5],g,c)}if(r==="Pack"&&v>A){w.fillStyle=this.prefs.label_color;if((r==="Pack"||this.mode==="Auto")&&n>CHAR_WIDTH_PX){var t=Math.round(n/2)}if(y===0&&h-w.measureText(o).width<0){w.textAlign="left";w.fillText(o,j+f+LABEL_SPACING-t,g+8)}else{w.textAlign="right";w.fillText(o,h+f-LABEL_SPACING-t,g+8)}w.fillStyle=z}}});var ToolDataFeatureTrack=function(e,c,g,a,d,f,b){FeatureTrack.call(this,e,c,g,a,d,f,{},b);this.track_type="ToolDataFeatureTrack";this.data_url=raw_data_url;this.data_query_wait=1000;this.dataset_check_url=dataset_state_url};$.extend(ToolDataFeatureTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{predraw_init:function(){var b=this;var a=function(){if(b.data_cache.size()===0){setTimeout(a,300)}else{b.data_url=default_data_url;b.data_query_wait=DEFAULT_DATA_QUERY_WAIT;b.dataset_state_url=converted_datasets_state_url;$.getJSON(b.dataset_state_url,{dataset_id:b.dataset_id,hda_ldda:b.hda_ldda},function(c){})}};a()}}); \ No newline at end of file +CanvasRenderingContext2D.prototype.dashedLine=function(c,j,b,h,f){if(f===undefined){f=4}var e=b-c;var d=h-j;var g=Math.floor(Math.sqrt(e*e+d*d)/f);var l=e/g;var k=d/g;var a;for(a=0;a<g;a++,c+=l,j+=k){if(a%2!==0){continue}this.fillRect(c,j,f,1)}};CanvasRenderingContext2D.prototype.drawDownwardEquilateralTriangle=function(b,a,e){var d=b-e/2,c=b+e/2,f=a-Math.sqrt(e*3/2);this.beginPath();this.moveTo(d,f);this.lineTo(c,f);this.lineTo(b,a);this.lineTo(d,f);this.strokeStyle=this.fillStyle;this.fill();this.stroke();this.closePath()};function sortable(a,b){a.bind("drag",{handle:b,relative:true},function(h,j){var g=$(this).parent();var f=g.children();var c;for(c=0;c<f.length;c++){if(j.offsetY<$(f.get(c)).position().top){break}}if(c===f.length){if(this!==f.get(c-1)){g.append(this)}}else{if(this!==f.get(c)){$(this).insertBefore(f.get(c))}}})}var NO_OVERLAP=1001,CONTAINS=1002,OVERLAP_START=1003,OVERLAP_END=1004,CONTAINED_BY=1005;function compute_overlap(e,b){var g=e[0],f=e[1],d=b[0],c=b[1],a;if(g<d){if(f<d){a=NO_OVERLAP}else{if(f<=c){a=OVERLAP_START}else{a=CONTAINS}}}else{if(g>c){a=NO_OVERLAP}else{if(f<=c){a=CONTAINED_BY}else{a=OVERLAP_END}}}return a}function is_overlap(b,a){return(compute_overlap(b,a)!==NO_OVERLAP)}function get_slider_step(c,a){var b=a-c;return(b<=1?0.01:(b<=1000?1:5))}var DENSE_TRACK_HEIGHT=10,NO_DETAIL_TRACK_HEIGHT=3,SQUISH_TRACK_HEIGHT=5,PACK_TRACK_HEIGHT=10,NO_DETAIL_FEATURE_HEIGHT=1,DENSE_FEATURE_HEIGHT=1,SQUISH_FEATURE_HEIGHT=3,PACK_FEATURE_HEIGHT=9,ERROR_PADDING=10,LABEL_SPACING=2,PACK_SPACING=5,MIN_SQUISH_VIEW_WIDTH=12000,DEFAULT_FONT="9px Monaco, Lucida Console, monospace",DENSITY=200,FEATURE_LEVELS=10,MAX_FEATURE_DEPTH=100,DEFAULT_DATA_QUERY_WAIT=5000,MAX_CHROMS_SELECTABLE=100,CONNECTOR_COLOR="#ccc",DATA_ERROR="There was an error in indexing this dataset. ",DATA_NOCONVERTER="A converter for this dataset is not installed. Please check your datatypes_conf.xml file.",DATA_NONE="No data for this chrom/contig.",DATA_PENDING="Currently indexing... please wait",DATA_CANNOT_RUN_TOOL="Tool cannot be rerun: ",DATA_LOADING="Loading data...",DATA_OK="Ready for display",CACHED_TILES_FEATURE=10,CACHED_TILES_LINE=5,CACHED_DATA=5,DUMMY_CANVAS=document.createElement("canvas"),RIGHT_STRAND,LEFT_STRAND;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(DUMMY_CANVAS)}var CONTEXT=DUMMY_CANVAS.getContext("2d");CONTEXT.font=DEFAULT_FONT;var CHAR_WIDTH_PX=CONTEXT.measureText("A").width,CHAR_HEIGHT_PX=9;var right_img=new Image();right_img.src=image_path+"/visualization/strand_right.png";right_img.onload=function(){RIGHT_STRAND=CONTEXT.createPattern(right_img,"repeat")};var left_img=new Image();left_img.src=image_path+"/visualization/strand_left.png";left_img.onload=function(){LEFT_STRAND=CONTEXT.createPattern(left_img,"repeat")};var right_img_inv=new Image();right_img_inv.src=image_path+"/visualization/strand_right_inv.png";right_img_inv.onload=function(){RIGHT_STRAND_INV=CONTEXT.createPattern(right_img_inv,"repeat")};var left_img_inv=new Image();left_img_inv.src=image_path+"/visualization/strand_left_inv.png";left_img_inv.onload=function(){LEFT_STRAND_INV=CONTEXT.createPattern(left_img_inv,"repeat")};function round_1000(a){return Math.round(a*1000)/1000}var Cache=function(a){this.num_elements=a;this.clear()};$.extend(Cache.prototype,{get:function(b){var a=this.key_ary.indexOf(b);if(a!==-1){this.move_key_to_end(b,a)}return this.obj_cache[b]},set:function(b,c){if(!this.obj_cache[b]){if(this.key_ary.length>=this.num_elements){var a=this.key_ary.shift();delete this.obj_cache[a]}this.key_ary.push(b)}this.obj_cache[b]=c;return c},move_key_to_end:function(b,a){this.key_ary.splice(a,1);this.key_ary.push(b)},clear:function(){this.obj_cache={};this.key_ary=[]},size:function(){return this.key_ary.length}});var DataManager=function(b,a,c){Cache.call(this,b);this.track=a;this.subset=(c!==undefined?c:true)};$.extend(DataManager.prototype,Cache.prototype,{load_data:function(h,j,d,g,a,f){var c={chrom:h,low:j,high:d,mode:g,resolution:a,dataset_id:this.track.dataset_id,hda_ldda:this.track.hda_ldda};$.extend(c,f);var k=[];for(var e=0;e<this.track.filters.length;e++){k[k.length]=this.track.filters[e].name}c.filter_cols=JSON.stringify(k);var b=this;return $.getJSON(this.track.data_url,c,function(l){b.set_data(j,d,g,l)})},get_data:function(j,k,c,h,b,f){var l=this.get(this.gen_key(k,c,h));if(l){return l}if(this.subset){var m,g,a,e,h,l;for(var d=0;d<this.key_ary.length;d++){m=this.key_ary[d];g=this.split_key(m);a=g[0];e=g[1];if(k>=a&&c<=e){l=this.obj_cache[m];if(l.dataset_type!=="summary_tree"&&l.extra_info!=="no_detail"){this.move_key_to_end(m,d);return l}}}}return this.load_data(j,k,c,h,b,f)},set_data:function(b,c,d,a){return this.set(this.gen_key(b,c,d),a)},gen_key:function(a,c,d){var b=a+"_"+c+"_"+d;return b},split_key:function(a){return a.split("_")}});var View=function(a,d,c,b,e){this.container=a;this.chrom=null;this.vis_id=c;this.dbkey=b;this.title=d;this.tracks=[];this.label_tracks=[];this.max_low=0;this.max_high=0;this.num_tracks=0;this.track_id_counter=0;this.zoom_factor=3;this.min_separation=30;this.has_changes=false;this.init(e);this.reset()};$.extend(View.prototype,{init:function(d){var c=this.container,a=this;this.top_container=$("<div/>").addClass("top-container").appendTo(c);this.content_div=$("<div/>").addClass("content").css("position","relative").appendTo(c);this.bottom_container=$("<div/>").addClass("bottom-container").appendTo(c);this.top_labeltrack=$("<div/>").addClass("top-labeltrack").appendTo(this.top_container);this.viewport_container=$("<div/>").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div);this.intro_div=$("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide();this.nav_labeltrack=$("<div/>").addClass("nav-labeltrack").appendTo(this.bottom_container);this.nav_container=$("<div/>").addClass("nav-container").prependTo(this.top_container);this.nav=$("<div/>").addClass("nav").appendTo(this.nav_container);this.overview=$("<div/>").addClass("overview").appendTo(this.bottom_container);this.overview_viewport=$("<div/>").addClass("overview-viewport").appendTo(this.overview);this.overview_close=$("<a href='javascript:void(0);'>Close Overview</a>").addClass("overview-close").hide().appendTo(this.overview_viewport);this.overview_highlight=$("<div/>").addClass("overview-highlight").hide().appendTo(this.overview_viewport);this.overview_box_background=$("<div/>").addClass("overview-boxback").appendTo(this.overview_viewport);this.overview_box=$("<div/>").addClass("overview-box").appendTo(this.overview_viewport);this.default_overview_height=this.overview_box.height();this.nav_controls=$("<div/>").addClass("nav-controls").appendTo(this.nav);this.chrom_select=$("<select/>").attr({name:"chrom"}).css("width","15em").addClass("no-autocomplete").append("<option value=''>Loading</option>").appendTo(this.nav_controls);var b=function(f){if(f.type==="focusout"||(f.keyCode||f.which)===13||(f.keyCode||f.which)===27){if((f.keyCode||f.which)!==27){a.go_to($(this).val())}$(this).hide();$(this).val("");a.location_span.show();a.chrom_select.show()}};this.nav_input=$("<input/>").addClass("nav-input").hide().bind("keyup focusout",b).appendTo(this.nav_controls);this.location_span=$("<span/>").addClass("location").appendTo(this.nav_controls);this.location_span.bind("click",function(){a.location_span.hide();a.chrom_select.hide();a.nav_input.val(a.chrom+":"+a.low+"-"+a.high);a.nav_input.css("display","inline-block");a.nav_input.select();a.nav_input.focus()});if(this.vis_id!==undefined){this.hidden_input=$("<input/>").attr("type","hidden").val(this.vis_id).appendTo(this.nav_controls)}this.zo_link=$("<a id='zoom-out' />").click(function(){a.zoom_out();a.redraw()}).appendTo(this.nav_controls);this.zi_link=$("<a id='zoom-in' />").click(function(){a.zoom_in();a.redraw()}).appendTo(this.nav_controls);this.load_chroms({low:0},d);this.chrom_select.bind("change",function(){a.change_chrom(a.chrom_select.val())});this.intro_div.show();this.content_div.bind("click",function(f){$(this).find("input").trigger("blur")});this.content_div.bind("dblclick",function(f){a.zoom_in(f.pageX,this.viewport_container)});this.overview_box.bind("dragstart",function(f,g){this.current_x=g.offsetX}).bind("drag",function(f,h){var j=h.offsetX-this.current_x;this.current_x=h.offsetX;var g=Math.round(j/a.viewport_container.width()*(a.max_high-a.max_low));a.move_delta(-g)});this.overview_close.bind("click",function(){for(var f=0,e=a.tracks.length;f<e;f++){a.tracks[f].is_overview=false}$(this).siblings().filter("canvas").remove();$(this).parent().css("height",a.overview_box.height());a.overview_highlight.hide();$(this).hide()});this.viewport_container.bind("draginit",function(f,g){if(f.clientX>a.viewport_container.width()-16){return false}}).bind("dragstart",function(f,g){g.original_low=a.low;g.current_height=f.clientY;g.current_x=g.offsetX}).bind("drag",function(h,k){var f=$(this);var l=k.offsetX-k.current_x;var g=f.scrollTop()-(h.clientY-k.current_height);f.scrollTop(g);k.current_height=h.clientY;k.current_x=k.offsetX;var j=Math.round(l/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}).bind("mousewheel",function(h,k,g,f){if(g){var j=Math.round(-g/a.viewport_container.width()*(a.high-a.low));a.move_delta(j)}});this.top_labeltrack.bind("dragstart",function(f,g){return $("<div />").css({height:a.content_div.height()+a.top_labeltrack.height()+a.nav_labeltrack.height()+1,top:"0px",position:"absolute","background-color":"#ccf",opacity:0.5,"z-index":1000}).appendTo($(this))}).bind("drag",function(k,l){$(l.proxy).css({left:Math.min(k.pageX,l.startX),width:Math.abs(k.pageX-l.startX)});var g=Math.min(k.pageX,l.startX)-a.container.offset().left,f=Math.max(k.pageX,l.startX)-a.container.offset().left,j=(a.high-a.low),h=a.viewport_container.width();a.update_location(Math.round(g/h*j)+a.low,Math.round(f/h*j)+a.low)}).bind("dragend",function(l,m){var g=Math.min(l.pageX,m.startX),f=Math.max(l.pageX,m.startX),j=(a.high-a.low),h=a.viewport_container.width(),k=a.low;a.low=Math.round(g/h*j)+k;a.high=Math.round(f/h*j)+k;$(m.proxy).remove();a.redraw()});this.add_label_track(new LabelTrack(this,this.top_labeltrack));this.add_label_track(new LabelTrack(this,this.nav_labeltrack));$(window).bind("resize",function(){a.resize_window()});$(document).bind("redraw",function(){a.redraw()});this.reset();$(window).trigger("resize")},update_location:function(a,b){this.location_span.text(commatize(a)+" - "+commatize(b));this.nav_input.val(this.chrom+":"+commatize(a)+"-"+commatize(b))},load_chroms:function(b,c){b.num=MAX_CHROMS_SELECTABLE;$.extend(b,(this.vis_id!==undefined?{vis_id:this.vis_id}:{dbkey:this.dbkey}));var a=this;$.ajax({url:chrom_url,data:b,dataType:"json",success:function(e){if(e.chrom_info.length===0){alert("Invalid chromosome: "+b.chrom);return}if(e.reference){a.add_label_track(new ReferenceTrack(a))}a.chrom_data=e.chrom_info;var h='<option value="">Select Chrom/Contig</option>';for(var g=0,d=a.chrom_data.length;g<d;g++){var f=a.chrom_data[g].chrom;h+='<option value="'+f+'">'+f+"</option>"}if(e.prev_chroms){h+='<option value="previous">Previous '+MAX_CHROMS_SELECTABLE+"</option>"}if(e.next_chroms){h+='<option value="next">Next '+MAX_CHROMS_SELECTABLE+"</option>"}a.chrom_select.html(h);if(c){c()}a.chrom_start_index=e.start_index},error:function(){alert("Could not load chroms for this dbkey:",a.dbkey)}})},change_chrom:function(e,b,g){if(!e||e==="None"){return}var d=this;if(e==="previous"){d.load_chroms({low:this.chrom_start_index-MAX_CHROMS_SELECTABLE});return}if(e==="next"){d.load_chroms({low:this.chrom_start_index+MAX_CHROMS_SELECTABLE});return}var f=$.grep(d.chrom_data,function(j,k){return j.chrom===e})[0];if(f===undefined){d.load_chroms({chrom:e},function(){d.change_chrom(e,b,g)});return}else{if(e!==d.chrom){d.chrom=e;if(!d.chrom){d.intro_div.show()}else{d.intro_div.hide()}d.chrom_select.val(d.chrom);d.max_high=f.len-1;d.reset();d.redraw(true);for(var h=0,a=d.tracks.length;h<a;h++){var c=d.tracks[h];if(c.init){c.init()}}}if(b!==undefined&&g!==undefined){d.low=Math.max(b,0);d.high=Math.min(g,d.max_high)}d.reset_overview();d.redraw()}},go_to:function(f){var k=this,a,d,b=f.split(":"),h=b[0],j=b[1];if(j!==undefined){try{var g=j.split("-");a=parseInt(g[0].replace(/,/g,""),10);d=parseInt(g[1].replace(/,/g,""),10)}catch(c){return false}}k.change_chrom(h,a,d)},move_fraction:function(c){var a=this;var b=a.high-a.low;this.move_delta(c*b)},move_delta:function(c){var a=this;var b=a.high-a.low;if(a.low-c<a.max_low){a.low=a.max_low;a.high=a.max_low+b}else{if(a.high-c>a.max_high){a.high=a.max_high;a.low=a.max_high-b}else{a.high-=c;a.low-=c}}a.redraw()},add_track:function(a){a.view=this;a.track_id=this.track_id_counter;this.tracks.push(a);if(a.init){a.init()}a.container_div.attr("id","track_"+a.track_id);sortable(a.container_div,".draghandle");this.track_id_counter+=1;this.num_tracks+=1},add_label_track:function(a){a.view=this;this.label_tracks.push(a)},remove_track:function(a){this.has_changes=true;a.container_div.fadeOut("slow",function(){$(this).remove()});delete this.tracks[this.tracks.indexOf(a)];this.num_tracks-=1},reset:function(){this.low=this.max_low;this.high=this.max_high;this.viewport_container.find(".yaxislabel").remove()},redraw:function(h){var g=this.high-this.low,f=this.low,b=this.high;if(f<this.max_low){f=this.max_low}if(b>this.max_high){b=this.max_high}if(this.high!==0&&g<this.min_separation){b=f+this.min_separation}this.low=Math.floor(f);this.high=Math.ceil(b);this.resolution=Math.pow(10,Math.ceil(Math.log((this.high-this.low)/200)/Math.LN10));this.zoom_res=Math.pow(FEATURE_LEVELS,Math.max(0,Math.ceil(Math.log(this.resolution,FEATURE_LEVELS)/Math.log(FEATURE_LEVELS))));var a=(this.low/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var e=((this.high-this.low)/(this.max_high-this.max_low)*this.overview_viewport.width())||0;var j=13;this.overview_box.css({left:a,width:Math.max(j,e)}).show();if(e<j){this.overview_box.css("left",a-(j-e)/2)}if(this.overview_highlight){this.overview_highlight.css({left:a,width:e})}this.update_location(this.low,this.high);if(!h){for(var c=0,d=this.tracks.length;c<d;c++){if(this.tracks[c]&&this.tracks[c].enabled){this.tracks[c].draw()}}for(c=0,d=this.label_tracks.length;c<d;c++){this.label_tracks[c].draw()}}},zoom_in:function(b,c){if(this.max_high===0||this.high-this.low<this.min_separation){return}var d=this.high-this.low,e=d/2+this.low,a=(d/this.zoom_factor)/2;if(b){e=b/this.viewport_container.width()*(this.high-this.low)+this.low}this.low=Math.round(e-a);this.high=Math.round(e+a);this.redraw()},zoom_out:function(){if(this.max_high===0){return}var b=this.high-this.low,c=b/2+this.low,a=(b*this.zoom_factor)/2;this.low=Math.round(c-a);this.high=Math.round(c+a);this.redraw()},resize_window:function(){this.viewport_container.height(this.container.height()-this.top_container.height()-this.bottom_container.height());this.nav_container.width(this.container.width());this.redraw()},reset_overview:function(){this.overview_viewport.find("canvas").remove();this.overview_viewport.height(this.default_overview_height);this.overview_box.height(this.default_overview_height);this.overview_close.hide();this.overview_highlight.hide()}});var Tool=function(a,b){this.name=a;this.params=b};$.extend(Tool.prototype,{get_param_values_dict:function(){var b={};for(var a=0;a<this.params.length;a++){var c=this.params[a];b[c.name]=c.value}return b},get_param_values:function(){var b=[];for(var a=0;a<this.params.length;a++){b[a]=this.params[a].value}return b}});var NumberToolParameter=function(c,b,e,a,d){this.name=c;this.label=b;this.min=e;this.max=a;this.value=d};var get_tool_from_dict=function(f){if(obj_length(f)===0){return undefined}var b=f.name;var l=f.params;var c=Array();for(var e=0;e<l.length;e++){var g=l[e];var a=g.name,k=g.label,h=g.type,d=g.min,j=g.max,m=g.value;c[c.length]=new NumberToolParameter(a,k,d,j,m)}return new Tool(b,c)};var Filter=function(b,a,c){this.name=b;this.index=a;this.value=c};var NumberFilter=function(b,a){this.name=b;this.index=a;this.low=-Number.MAX_VALUE;this.high=Number.MAX_VALUE;this.min=Number.MAX_VALUE;this.max=-Number.MAX_VALUE;this.slider=null;this.slider_label=null};$.extend(NumberFilter.prototype,{applies_to:function(a){if(a.length>this.index){return true}return false},keep:function(a){if(!this.applies_to(a)){return true}return(a[this.index]>=this.low&&a[this.index]<=this.high)},update_attrs:function(b){var a=false;if(!this.applies_to(b)){return a}if(b[this.index]<this.min){this.min=Math.floor(b[this.index]);a=true}if(b[this.index]>this.max){this.max=Math.ceil(b[this.index]);a=true}return a},update_ui_elt:function(){var b=this.slider.slider("option","min"),a=this.slider.slider("option","max");if(this.min<b||this.max>a){this.slider.slider("option","min",this.min);this.slider.slider("option","max",this.max);this.slider.slider("option","step",get_slider_step(this.min,this.max));this.slider.slider("option","values",[this.min,this.max])}}});var get_filters_from_dict=function(a){var g=[];for(var d=0;d<a.length;d++){var f=a[d];var c=f.name,e=f.type,b=f.index;if(e==="int"||e==="float"){g[d]=new NumberFilter(c,b)}else{g[d]=new Filter(c,b,e)}}return g};var TrackConfig=function(a){this.track=a.track;this.params=a.params;this.values={};if(a.saved_values){this.restore_values(a.saved_values)}this.onchange=a.onchange};$.extend(TrackConfig.prototype,{restore_values:function(a){var b=this;$.each(this.params,function(c,d){if(a[d.key]!==undefined){b.values[d.key]=a[d.key]}else{b.values[d.key]=d.default_value}})},build_form:function(){var b=this;var a=$("<div />");$.each(this.params,function(f,d){if(!d.hidden){var c="param_"+f;var l=$("<div class='form-row' />").appendTo(a);l.append($("<label />").attr("for",c).text(d.label+":"));if(d.type==="bool"){l.append($('<input type="checkbox" />').attr("id",c).attr("name",c).attr("checked",b.values[d.key]))}else{if(d.type==="color"){var h=b.values[d.key];var g=$("<input />").attr("id",c).attr("name",c).val(h);var j=$("<div class='tipsy tipsy-north' style='position: absolute;' />").hide();var e=$("<div style='background-color: black; padding: 10px;'></div>").appendTo(j);var k=$("<div/>").appendTo(e).farbtastic({width:100,height:100,callback:g,color:h});$("<div />").append(g).append(j).appendTo(l).bind("click",function(m){j.css({left:$(this).position().left+($(g).width()/2)-60,top:$(this).position().top+$(this.height)}).show();$(document).bind("click.color-picker",function(){j.hide();$(document).unbind("click.color-picker")});m.stopPropagation()})}else{l.append($("<input />").attr("id",c).attr("name",c).val(b.values[d.key]))}}}});return a},update_from_form:function(a){var c=this;var b=false;$.each(this.params,function(d,f){if(!f.hidden){var g="param_"+d;var e=a.find("#"+g).val();if(f.type==="float"){e=parseFloat(e)}else{if(f.type==="int"){e=parseInt(e)}else{if(f.type==="bool"){e=a.find("#"+g).is(":checked")}}}if(e!==c.values[f.key]){c.values[f.key]=e;b=true}}});if(b){this.onchange()}}});var Track=function(b,a,e,c,d){this.name=b;this.view=a;this.parent_element=e;this.data_url=(c?c:default_data_url);this.data_url_extra_params={};this.data_query_wait=(d?d:DEFAULT_DATA_QUERY_WAIT);this.dataset_check_url=converted_datasets_state_url;this.container_div=$("<div />").addClass("track").css("position","relative");if(!this.hidden){this.header_div=$("<div class='track-header' />").appendTo(this.container_div);if(this.view.editor){this.drag_div=$("<div class='draghandle' />").appendTo(this.header_div)}this.name_div=$("<div class='menubutton popup' />").appendTo(this.header_div);this.name_div.text(this.name);this.name_div.attr("id",this.name.replace(/\s+/g,"-").replace(/[^a-zA-Z0-9\-]/g,"").toLowerCase())}this.content_div=$("<div class='track-content'>").appendTo(this.container_div);this.parent_element.append(this.container_div)};$.extend(Track.prototype,{init:function(){var a=this;a.enabled=false;a.tile_cache.clear();a.data_cache.clear();a.initial_canvas=undefined;a.content_div.css("height","auto");a.container_div.removeClass("nodata error pending");if(!a.dataset_id){return}$.getJSON(converted_datasets_state_url,{hda_ldda:a.hda_ldda,dataset_id:a.dataset_id,chrom:a.view.chrom},function(b){if(!b||b==="error"||b.kind==="error"){a.container_div.addClass("error");a.content_div.text(DATA_ERROR);if(b.message){var d=a.view.tracks.indexOf(a);var c=$(" <a href='javascript:void(0);'></a>").text("View error").bind("click",function(){show_modal("Trackster Error","<pre>"+b.message+"</pre>",{Close:hide_modal})});a.content_div.append(c)}}else{if(b==="no converter"){a.container_div.addClass("error");a.content_div.text(DATA_NOCONVERTER)}else{if(b==="no data"||(b.data!==undefined&&(b.data===null||b.data.length===0))){a.container_div.addClass("nodata");a.content_div.text(DATA_NONE)}else{if(b==="pending"){a.container_div.addClass("pending");a.content_div.text(DATA_PENDING);setTimeout(function(){a.init()},a.data_query_wait)}else{if(b.status==="data"){if(b.valid_chroms){a.valid_chroms=b.valid_chroms;a.make_name_popup_menu()}a.content_div.text(DATA_OK);if(a.view.chrom){a.content_div.text("");a.content_div.css("height",a.height_px+"px");a.enabled=true;$.when(a.predraw_init()).done(function(){a.draw()})}}}}}}})},predraw_init:function(){},update_name:function(a){this.old_name=this.name;this.name=a;this.name_div.text(this.name)},revert_name:function(){this.name=this.old_name;this.name_div.text(this.name)}});var TiledTrack=function(b,j,o){var c=this,p=c.view;this.filters=(b!==undefined?get_filters_from_dict(b):[]);this.filters_available=false;this.filters_visible=false;this.tool=(j!==undefined?get_tool_from_dict(j):undefined);this.parent_track=o;this.child_tracks=[];if(c.hidden){return}var k=function(r,s,t){r.click(function(){var u=s.text();max=parseFloat(t.slider("option","max")),input_size=(max<=1?4:max<=1000000?max.toString().length:6),multi_value=false;if(t.slider("option","values")){input_size=2*input_size+1;multi_value=true}s.text("");$("<input type='text'/>").attr("size",input_size).attr("maxlength",input_size).attr("value",u).appendTo(s).focus().select().click(function(v){v.stopPropagation()}).blur(function(){$(this).remove();s.text(u)}).keyup(function(z){if(z.keyCode===27){$(this).trigger("blur")}else{if(z.keyCode===13){var x=t.slider("option","min"),v=t.slider("option","max"),y=function(A){return(isNaN(A)||A>v||A<x)},w=$(this).val();if(!multi_value){w=parseFloat(w);if(y(w)){alert("Parameter value must be in the range ["+x+"-"+v+"]");return $(this)}}else{w=w.split("-");w=[parseFloat(w[0]),parseFloat(w[1])];if(y(w[0])||y(w[1])){alert("Parameter value must be in the range ["+x+"-"+v+"]");return $(this)}}t.slider((multi_value?"values":"value"),w)}}})})};if(this.parent_track){this.header_div.find(".draghandle").removeClass("draghandle").addClass("child-track-icon").addClass("icon-button");this.parent_element.addClass("child-track");this.tool=undefined}this.filters_div=$("<div/>").addClass("filters").hide();this.header_div.after(this.filters_div);this.filters_div.bind("drag",function(r){r.stopPropagation()}).bind("click",function(r){r.stopPropagation()}).bind("dblclick",function(r){r.stopPropagation()});$.each(this.filters,function(x,s){var u=$("<div/>").addClass("slider-row").appendTo(c.filters_div);var r=$("<div/>").addClass("slider-label").appendTo(u);var z=$("<span/>").addClass("slider-name").text(s.name+" ").appendTo(r);var t=$("<span/>");var v=$("<span/>").addClass("slider-value").appendTo(r).append("[").append(t).append("]");var y=$("<div/>").addClass("slider").appendTo(u);s.control_element=$("<div/>").attr("id",s.name+"-filter-control").appendTo(y);var w=[0,0];s.control_element.slider({range:true,min:Number.MAX_VALUE,max:-Number.MIN_VALUE,values:[0,0],slide:function(A,B){w=B.values;t.text(B.values[0]+"-"+B.values[1]);setTimeout(function(){if(B.values[0]==w[0]&&B.values[1]==w[1]){var C=B.values;t.text(C[0]+"-"+C[1]);s.low=C[0];s.high=C[1];c.draw(true,true)}},50)},change:function(A,B){s.control_element.slider("option","slide").call(s.control_element,A,B)}});s.slider=s.control_element;s.slider_label=t;k(v,t,s.control_element);$("<div style='clear: both;'/>").appendTo(u)});if(this.tool){this.dynamic_tool_div=$("<div/>").addClass("dynamic-tool").hide();this.header_div.after(this.dynamic_tool_div);this.dynamic_tool_div.bind("drag",function(r){r.stopPropagation()}).bind("click",function(r){r.stopPropagation()}).bind("dblclick",function(r){r.stopPropagation()});var n=$("<div class='tool-name'>").appendTo(this.dynamic_tool_div).text(this.tool.name);var m=this.tool.params;var c=this;$.each(this.tool.params,function(x,s){var v=$("<div>").addClass("slider-row").appendTo(c.dynamic_tool_div);var u=$("<div>").addClass("slider-label").appendTo(v);var z=$("<span/>").addClass("slider-name").text(s.label+" ").appendTo(u);var t=$("<span/>").text(s.value);var w=$("<span/>").addClass("slider-value").appendTo(u).append("[").append(t).append("]");var y=$("<div/>").addClass("slider").appendTo(v);var r=$("<div id='"+s.name+"-param-control'>").appendTo(y);r.slider({min:s.min,max:s.max,step:get_slider_step(s.min,s.max),value:s.value,slide:function(A,C){var B=C.value;s.value=B;if(0<B&&B<1){B=parseFloat(B).toFixed(2)}t.text(B)},change:function(A,B){r.slider("option","slide").call(r,A,B)}});k(w,t,r);$("<div style='clear: both;'/>").appendTo(v)});var q=$("<div>").addClass("slider-row").appendTo(this.dynamic_tool_div);var l=$("<input type='submit'>").attr("value","Run").appendTo(q);var c=this;l.click(function(){c.run_tool()})}c.child_tracks_container=$("<div/>").addClass("child-tracks-container").hide();c.container_div.append(c.child_tracks_container);if(c.display_modes!==undefined){if(c.mode_div===undefined){c.mode_div=$("<div class='right-float menubutton popup' />").appendTo(c.header_div);var e=(c.track_config&&c.track_config.values.mode?c.track_config.values.mode:c.display_modes[0]);c.mode=e;c.mode_div.text(e);var d=function(r){c.mode_div.text(r);c.mode=r;c.track_config.values.mode=r;c.tile_cache.clear();c.draw()};var a={};for(var f=0,h=c.display_modes.length;f<h;f++){var g=c.display_modes[f];a[g]=function(r){return function(){d(r)}}(g)}make_popupmenu(c.mode_div,a)}else{c.mode_div.hide()}}this.make_name_popup_menu()};$.extend(TiledTrack.prototype,Track.prototype,{make_name_popup_menu:function(){var b=this;var a={};a["Edit configuration"]=function(){var h=function(){hide_modal();$(window).unbind("keypress.check_enter_esc")},f=function(){b.track_config.update_from_form($(".dialog-box"));hide_modal();$(window).unbind("keypress.check_enter_esc")},g=function(j){if((j.keyCode||j.which)===27){h()}else{if((j.keyCode||j.which)===13){f()}}};$(window).bind("keypress.check_enter_esc",g);show_modal("Configure Track",b.track_config.build_form(),{Cancel:h,OK:f})};if(b.filters_available>0){var e=(b.filters_div.is(":visible")?"Hide filters":"Show filters");a[e]=function(){b.filters_visible=(b.filters_div.is(":visible"));b.filters_div.toggle();b.make_name_popup_menu()}}if(b.tool){var e=(b.dynamic_tool_div.is(":visible")?"Hide tool":"Show tool");a[e]=function(){if(!b.dynamic_tool_div.is(":visible")){b.update_name(b.name+b.tool_region_and_parameters_str())}else{menu_option_text="Show dynamic tool";b.revert_name()}b.dynamic_tool_div.toggle();b.make_name_popup_menu()}}if(b.valid_chroms){a["List chrom/contigs with data"]=function(){show_modal("Chrom/contigs with data","<p>"+b.valid_chroms.join("<br/>")+"</p>",{Close:function(){hide_modal()}})}}var c=view;var d=function(){$("#no-tracks").show()};if(this.parent_track){c=this.parent_track;d=function(){}}a.Remove=function(){c.remove_track(b);if(c.num_tracks===0){d()}};make_popupmenu(b.name_div,a)},draw:function(a,d){var s=this.view.low,g=this.view.high,j=g-s,l=this.view.container.width(),m=this.view.resolution;var e=$("<div style='position: relative;'></div>"),f=l/j;if(!d){this.content_div.children().remove()}this.content_div.append(e);this.max_height=0;var o=Math.floor(s/m/DENSITY);var c={};while((o*DENSITY*m)<g){var r=l+"_"+f+"_"+o;var h=this.tile_cache.get(r);var p=o*DENSITY*this.view.resolution;var b=p+DENSITY*this.view.resolution;if(!a&&h){this.show_tile(h,e,p,f)}else{this.delayed_draw(a,r,p,b,o,m,e,f,c)}o+=1}var k=this;var q=setInterval(function(){if(obj_length(c)===0){clearInterval(q);if(d){var v=k.content_div.children();var u=false;for(var w=v.length-1,t=0;w>=t;w--){var z=$(v[w]);if(u){z.remove()}else{if(z.children().length!==0){u=true}}}}for(var y=0;y<k.filters.length;y++){k.filters[y].update_ui_elt()}var x=false;if(k.example_feature){for(var y=0;y<k.filters.length;y++){if(k.filters[y].applies_to(k.example_feature)){x=true;break}}}if(k.filters_available!==x){k.filters_available=x;if(!k.filters_available){k.filters_div.hide()}k.make_name_popup_menu()}}},50);for(var n=0;n<this.child_tracks.length;n++){this.child_tracks[n].draw(a,d)}},delayed_draw:function(b,j,g,l,c,e,k,m,f){var d=this;var h=function(u,n,p,o,s,t,q){returned_tile=d.draw_tile(n,p,o,s,t,q);var r=$("<div class='track-tile'>").prepend(returned_tile);tile_element=r;d.tile_cache.set(j,tile_element);d.show_tile(tile_element,s,g,t);delete f[u]};var a=setTimeout(function(){if(g<=d.view.high&&l>=d.view.low){var n=(b?undefined:d.tile_cache.get(j));if(n){d.show_tile(n,k,g,m);delete f[a]}else{$.when(d.data_cache.get_data(view.chrom,g,l,d.mode,e,d.data_url_extra_params)).then(function(){var o=d.data_cache.get_data(view.chrom,g,l,d.mode,e,d.data_url_extra_params);if(view.reference_track&&m>CHAR_WIDTH_PX){$.when(view.reference_track.data_cache.get_data(view.chrom,g,l,d.mode,e,view.reference_track.data_url_extra_params)).then(function(){var p=view.reference_track.data_cache.get_data(view.chrom,g,l,d.mode,e,view.reference_track.data_url_extra_params);h(a,o,e,c,k,m,p)})}else{h(a,o,e,c,k,m)}})}}},50);f[a]=true},show_tile:function(a,f,d,g){var b=this;var c=this.view.high-this.view.low,e=(d-this.view.low)*g;if(this.left_offset){e-=this.left_offset}a.css({position:"absolute",top:0,left:e,height:""});f.append(a);b.max_height=Math.max(b.max_height,a.height());b.content_div.css("height",b.max_height+"px");f.children().css("height",b.max_height+"px")},set_overview:function(){var a=this.view;if(this.initial_canvas&&this.is_overview){a.overview_close.show();a.overview_viewport.append(this.initial_canvas);a.overview_highlight.show().height(this.initial_canvas.height());a.overview_viewport.height(this.initial_canvas.height()+a.overview_box.height())}$(window).trigger("resize")},run_tool:function(){var b={dataset_id:this.original_dataset_id,chrom:this.view.chrom,low:this.view.low,high:this.view.high,tool_id:this.tool.name};$.extend(b,this.tool.get_param_values_dict());var d=this,c=b.tool_id+d.tool_region_and_parameters_str(b.chrom,b.low,b.high),e;if(d.track_type==="FeatureTrack"){e=new ToolDataFeatureTrack(c,view,d.hda_ldda,undefined,{},{},d)}this.add_track(e);e.content_div.text("Starting job.");view.has_changes=true;var a=function(){$.getJSON(run_tool_url,b,function(f){if(f==="no converter"){e.container_div.addClass("error");e.content_div.text(DATA_NOCONVERTER)}else{if(f.error){e.container_div.addClass("error");e.content_div.text(DATA_CANNOT_RUN_TOOL+f.message)}else{if(f==="pending"){e.container_div.addClass("pending");e.content_div.text("Converting input data so that it can be easily reused.");setTimeout(a,2000)}else{e.dataset_id=f.dataset_id;e.content_div.text("Running job.");e.init()}}}})};a()},tool_region_and_parameters_str:function(c,a,d){var b=this,e=(c!==undefined&&a!==undefined&&d!==undefined?c+":"+a+"-"+d:"all");return" - region=["+e+"], parameters=["+b.tool.get_param_values().join(", ")+"]"},add_track:function(a){a.track_id=this.track_id+"_"+this.child_tracks.length;a.container_div.attr("id","track_"+a.track_id);this.child_tracks_container.append(a.container_div);sortable(a.container_div,".child-track-icon");if(!$(this.child_tracks_container).is(":visible")){this.child_tracks_container.show()}this.child_tracks.push(a)},remove_track:function(a){a.container_div.fadeOut("slow",function(){$(this).remove()})}});var LabelTrack=function(a,b){this.track_type="LabelTrack";this.hidden=true;Track.call(this,null,a,b);this.container_div.addClass("label-track")};$.extend(LabelTrack.prototype,Track.prototype,{draw:function(){var c=this.view,d=c.high-c.low,g=Math.floor(Math.pow(10,Math.floor(Math.log(d)/Math.log(10)))),a=Math.floor(c.low/g)*g,e=this.view.container.width(),b=$("<div style='position: relative; height: 1.3em;'></div>");while(a<c.high){var f=(a-c.low)/d*e;b.append($("<div class='label'>"+commatize(a)+"</div>").css({position:"absolute",left:f-1}));a+=g}this.content_div.children(":first").remove();this.content_div.append(b)}});var ReferenceTrack=function(a){this.track_type="ReferenceTrack";this.hidden=true;Track.call(this,null,a,a.top_labeltrack);TiledTrack.call(this);a.reference_track=this;this.left_offset=200;this.height_px=12;this.font=DEFAULT_FONT;this.container_div.addClass("reference-track");this.content_div.css("background","none");this.content_div.css("min-height","0px");this.content_div.css("border","none");this.data_url=reference_url;this.data_url_extra_params={dbkey:a.dbkey};this.data_cache=new DataManager(CACHED_DATA,this,false);this.tile_cache=new Cache(CACHED_TILES_LINE)};$.extend(ReferenceTrack.prototype,TiledTrack.prototype,{draw_tile:function(m,g,b,j,n){var f=this,d=DENSITY*g;if(n>CHAR_WIDTH_PX){if(m===null){f.content_div.css("height","0px");return}var e=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(e)}e=$(e);var l=e.get(0).getContext("2d");e.get(0).width=Math.ceil(d*n+f.left_offset);e.get(0).height=f.height_px;l.font=DEFAULT_FONT;l.textAlign="center";for(var h=0,k=m.length;h<k;h++){var a=Math.round(h*n);l.fillText(m[h],a+f.left_offset,10)}return e}this.content_div.css("height","0px")}});var LineTrack=function(e,c,f,a,d){var b=this;this.track_type="LineTrack";this.display_modes=["Histogram","Line","Filled","Intensity"];this.mode="Histogram";Track.call(this,e,c,c.viewport_container);TiledTrack.call(this);this.min_height_px=16;this.max_height_px=400;this.height_px=80;this.hda_ldda=f;this.dataset_id=a;this.original_dataset_id=a;this.data_cache=new DataManager(CACHED_DATA,this);this.tile_cache=new Cache(CACHED_TILES_LINE);this.track_config=new TrackConfig({track:this,params:[{key:"color",label:"Color",type:"color",default_value:"black"},{key:"min_value",label:"Min Value",type:"float",default_value:undefined},{key:"max_value",label:"Max Value",type:"float",default_value:undefined},{key:"mode",type:"string",default_value:this.mode,hidden:true},{key:"height",type:"int",default_value:this.height_px,hidden:true}],saved_values:d,onchange:function(){b.vertical_range=b.prefs.max_value-b.prefs.min_value;$("#linetrack_"+b.track_id+"_minval").text(b.prefs.min_value);$("#linetrack_"+b.track_id+"_maxval").text(b.prefs.max_value);b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;this.height_px=this.track_config.values.height;this.vertical_range=this.track_config.values.max_value-this.track_config.values.min_value;(function(g){var k=false;var j=false;var h=$("<div class='track-resize'>");$(g.container_div).hover(function(){k=true;h.show()},function(){k=false;if(!j){h.hide()}});h.hide().bind("dragstart",function(l,m){j=true;m.original_height=$(g.content_div).height()}).bind("drag",function(m,n){var l=Math.min(Math.max(n.original_height+n.deltaY,g.min_height_px),g.max_height_px);$(g.content_div).css("height",l);g.height_px=l;g.draw(true)}).bind("dragend",function(l,m){g.tile_cache.clear();j=false;if(!k){h.hide()}g.track_config.values.height=g.height_px}).appendTo(g.container_div)})(this)};$.extend(LineTrack.prototype,TiledTrack.prototype,{predraw_init:function(){var a=this,b=a.view.tracks.indexOf(a);a.vertical_range=undefined;return $.getJSON(a.data_url,{stats:true,chrom:a.view.chrom,low:null,high:null,hda_ldda:a.hda_ldda,dataset_id:a.dataset_id},function(c){a.container_div.addClass("line-track");var e=c.data;if(isNaN(parseFloat(a.prefs.min_value))||isNaN(parseFloat(a.prefs.max_value))){a.prefs.min_value=e.min;a.prefs.max_value=e.max;$("#track_"+b+"_minval").val(a.prefs.min_value);$("#track_"+b+"_maxval").val(a.prefs.max_value)}a.vertical_range=a.prefs.max_value-a.prefs.min_value;a.total_frequency=e.total_frequency;a.container_div.find(".yaxislabel").remove();var f=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_minval").text(round_1000(a.prefs.min_value));var d=$("<div />").addClass("yaxislabel").attr("id","linetrack_"+b+"_maxval").text(round_1000(a.prefs.max_value));d.css({position:"absolute",top:"24px",left:"10px"});d.prependTo(a.container_div);f.css({position:"absolute",bottom:"2px",left:"10px"});f.prependTo(a.container_div)})},draw_tile:function(j,q,t,c,e){if(this.vertical_range===undefined){return}var o=this,u=t*DENSITY*q,a=DENSITY*q,B=q+"_"+t,v={hda_ldda:this.hda_ldda,dataset_id:this.dataset_id,resolution:this.view.resolution};var b=document.createElement("canvas"),z=j.data;if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(b)}b=$(b);b.get(0).width=Math.ceil(a*e);b.get(0).height=o.height_px;var p=b.get(0).getContext("2d"),k=false,l=o.prefs.min_value,g=o.prefs.max_value,n=o.vertical_range,w=o.total_frequency,d=o.height_px,m=o.mode;var A=Math.round(d+l/n*d);p.beginPath();p.moveTo(0,A);p.lineTo(a*e,A);p.fillStyle="#aaa";p.stroke();p.beginPath();p.fillStyle=o.prefs.color;var x,h,f;if(z.length>1){f=Math.ceil((z[1][0]-z[0][0])*e)}else{f=10}for(var r=0,s=z.length;r<s;r++){x=Math.round((z[r][0]-u)*e);h=z[r][1];if(h===null){if(k&&m==="Filled"){p.lineTo(x,d)}k=false;continue}if(h<l){h=l}else{if(h>g){h=g}}if(m==="Histogram"){h=Math.round(h/n*d);p.fillRect(x,A,f,-h)}else{if(m==="Intensity"){h=255-Math.floor((h-l)/n*255);p.fillStyle="rgb("+h+","+h+","+h+")";p.fillRect(x,0,f,d)}else{h=Math.round(d-(h-l)/n*d);if(k){p.lineTo(x,h)}else{k=true;if(m==="Filled"){p.moveTo(x,d);p.lineTo(x,h)}else{p.moveTo(x,h)}}}}}if(m==="Filled"){if(k){p.lineTo(x,A);p.lineTo(0,A)}p.fill()}else{p.stroke()}return b}});var FeatureTrack=function(a,f,e,j,h,c,d,g){var b=this;this.track_type="FeatureTrack";this.display_modes=["Auto","Dense","Squish","Pack"];this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{key:"show_counts",label:"Show summary counts",type:"bool",default_value:true},{key:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:h,onchange:function(){b.tile_cache.clear();b.draw()}});this.prefs=this.track_config.values;Track.call(this,a,f,f.viewport_container);TiledTrack.call(this,c,d,g);this.height_px=0;this.container_div.addClass("feature-track");this.hda_ldda=e;this.dataset_id=j;this.original_dataset_id=j;this.zo_slots={};this.show_labels_scale=0.001;this.showing_details=false;this.summary_draw_height=30;this.default_font=DEFAULT_FONT;this.inc_slots={};this.start_end_dct={};this.tile_cache=new Cache(CACHED_TILES_FEATURE);this.data_cache=new DataManager(20,this);this.left_offset=200};$.extend(FeatureTrack.prototype,TiledTrack.prototype,{incremental_slots:function(a,h,p){var q=this.inc_slots[a];if(!q||(q.mode!==p)){q={};q.w_scale=a;q.mode=p;this.inc_slots[a]=q;this.start_end_dct[a]={}}var l=q.w_scale,w=[],x=[],j=0,n=this.view.max_low;for(var u=0,v=h.length;u<v;u++){var g=h[u],k=g[0];if(q[k]!==undefined){j=Math.max(j,q[k]);x.push(q[k])}else{w.push(u)}}var d=this.start_end_dct[a];var m=function(D,E){for(var C=0;C<=MAX_FEATURE_DEPTH;C++){var A=false,F=d[C];if(F!==undefined){for(var z=0,B=F.length;z<B;z++){var y=F[z];if(E>y[0]&&D<y[1]){A=true;break}}}if(!A){return C}}return -1};for(var u=0,v=w.length;u<v;u++){var g=h[w[u]],k=g[0],s=g[1],b=g[2],o=g[3],c=Math.floor((s-n)*l),f=Math.ceil((b-n)*l),t=CONTEXT.measureText(o).width,e;if(o!==undefined&&p==="Pack"){t+=(LABEL_SPACING+PACK_SPACING);if(c-t>=0){c-=t;e="left"}else{f+=t;e="right"}}var r=m(c,f);if(r>=0){if(d[r]===undefined){d[r]=[]}d[r].push([c,f]);q[k]=r;j=Math.max(j,r)}else{}}return j+1},draw_summary_tree:function(b,o,n,l,r,j,f,e){var c=j+LABEL_SPACING+CHAR_HEIGHT_PX;delta_x_px=Math.ceil(n*r);var h=$("<div />").addClass("yaxislabel");h.text(l);h.css({position:"absolute",top:"22px",left:"10px"});h.prependTo(this.container_div);var q=b.get(0).getContext("2d");for(var d=0,g=o.length;d<g;d++){var m=Math.floor((o[d][0]-f)*r);var k=o[d][1];if(!k){continue}var p=k/l*j;q.fillStyle="black";q.fillRect(m+e,c-p,delta_x_px,p);var a=4;if(this.prefs.show_counts&&(q.measureText(k).width+a)<delta_x_px){q.fillStyle="#666";q.textAlign="center";q.fillText(k,m+e+(delta_x_px/2),10)}}},draw_element:function(p,f,g,x,j,r,I,M,N,a,A){var u=x[0],K=x[1],C=x[2]-1,s=x[3],D=Math.floor(Math.max(0,(K-r)*M)),q=Math.ceil(Math.min(a,Math.max(0,(C-r)*M))),B=ERROR_PADDING+(g==="Dense"?0:(0+j))*N,o,G,t=null,O=null,d=this.prefs.block_color,F=this.prefs.label_color;if(g==="Dense"){p.fillStyle=d;p.fillRect(D+A,B,q-D,DENSE_FEATURE_HEIGHT)}else{if(g==="no_detail"){p.fillStyle=d;p.fillRect(D+A,B+5,q-D,DENSE_FEATURE_HEIGHT)}else{var n=x[4],z=x[5],E=x[6],e=x[7];if(z&&E){t=Math.floor(Math.max(0,(z-r)*M));O=Math.ceil(Math.min(a,Math.max(0,(E-r)*M)))}var L,v;if(g==="Squish"){L=1;v=SQUISH_FEATURE_HEIGHT}else{L=5;v=PACK_FEATURE_HEIGHT}if(!e){if(x.strand){if(x.strand==="+"){p.fillStyle=RIGHT_STRAND_INV}else{if(x.strand==="-"){p.fillStyle=LEFT_STRAND_INV}}}else{p.fillStyle=d}p.fillRect(D+A,B,q-D,v)}else{var m,w;if(g==="Squish"){p.fillStyle=CONNECTOR_COLOR;m=B+Math.floor(SQUISH_FEATURE_HEIGHT/2)+1;w=1}else{if(n){var m=B;var w=v;if(n==="+"){p.fillStyle=RIGHT_STRAND}else{if(n==="-"){p.fillStyle=LEFT_STRAND}}}else{p.fillStyle=CONNECTOR_COLOR;m+=(SQUISH_FEATURE_HEIGHT/2)+1;w=1}}p.fillRect(D+A,m,q-D,w);for(var J=0,c=e.length;J<c;J++){var h=e[J],b=Math.floor(Math.max(0,(h[0]-r)*M)),y=Math.ceil(Math.min(a,Math.max((h[1]-1-r)*M)));if(b>y){continue}p.fillStyle=d;p.fillRect(b+A,B+(v-L)/2+1,y-b,L);if(t!==undefined&&!(b>O||y<t)){var H=Math.max(b,t),l=Math.min(y,O);p.fillRect(H+A,B+1,l-H,v)}}}if(g==="Pack"&&K>r){p.fillStyle=F;if(f===0&&D-p.measureText(s).width<0){p.textAlign="left";p.fillText(s,q+A+LABEL_SPACING,B+8)}else{p.textAlign="right";p.fillText(s,D+A-LABEL_SPACING,B+8)}p.fillStyle=d}}}},get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="no_detail"){a=NO_DETAIL_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT}}}return a},draw_tile:function(o,x,C,k,m,d){var t=this;var E=C*DENSITY*x,a=(C+1)*DENSITY*x,q=a-E,F={hda_ldda:t.hda_ldda,dataset_id:t.dataset_id,resolution:this.view.resolution,mode:this.mode};var v=Math.ceil(q*m),s=this.mode,H=25,g=this.left_offset,p,h;var c=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(c)}c=$(c);if(s==="Auto"){if(o.dataset_type==="summary_tree"){s=o.dataset_type}else{if(o.extra_info==="no_detail"){s="no_detail"}else{var G=o.data;if((G.length&&G.length<4)||(this.view.high-this.view.low>MIN_SQUISH_VIEW_WIDTH)){s="Squish"}else{s="Pack"}}}}var y=this.get_y_scale(s);if(s==="summary_tree"){h=this.summary_draw_height}if(s==="Dense"){h=H}else{if(s==="no_detail"||s==="Squish"||s==="Pack"){h=this.incremental_slots(m,o.data,s)*y+H;p=this.inc_slots[m]}}c.get(0).width=v+g;c.get(0).height=h;if(o.dataset_type==="summary_tree"){c.get(0).height+=LABEL_SPACING+CHAR_HEIGHT_PX}k.parent().css("height",Math.max(this.height_px,h)+"px");var w=c.get(0).getContext("2d");w.fillStyle=this.prefs.block_color;w.font=this.default_font;w.textAlign="right";this.container_div.find(".yaxislabel").remove();if(s==="summary_tree"){this.draw_summary_tree(c,o.data,o.delta,o.max,m,h,E,g);return c}if(o.message){c.css({"border-top":"1px solid red"});w.fillStyle="red";w.textAlign="left";var r=w.textBaseline;w.textBaseline="top";w.fillText(o.message,g,0);w.textBaseline=r;if(!o.data){return c}}this.example_feature=(o.data.length?o.data[0]:undefined);var G=o.data;for(var z=0,B=G.length;z<B;z++){var j=G[z],l=j[0],u=j[1],b=j[2],e=(p&&p[l]!==undefined?p[l]:null);var A=false;var n;for(var D=0;D<this.filters.length;D++){n=this.filters[D];n.update_attrs(j);if(!n.keep(j)){A=true;break}}if(A){continue}if(is_overlap([u,b],[E,a])&&(s=="Dense"||e!==null)){this.draw_element(w,C,s,j,e,E,a,m,y,v,g,d)}}return c}});var VcfTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_type="VcfTrack"};$.extend(VcfTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{draw_element:function(u,p,j,e,x,c,m,v,s){var j=data[i],l=j[0],t=j[1],d=j[2]-1,o=j[3],g=Math.floor(Math.max(0,(t-x)*m)),k=Math.ceil(Math.min(s,Math.max(0,(d-x)*m))),f=ERROR_PADDING+(p==="Dense"?0:(0+e))*v,a,y,b=null,n=null;if(no_label){u.fillStyle=block_color;u.fillRect(g+left_offset,f+5,k-g,1)}else{var w=j[4],r=j[5],h=j[6];a=9;y=1;u.fillRect(g+left_offset,f,k-g,a);if(p!=="Dense"&&o!==undefined&&t>x){u.fillStyle=label_color;if(tile_index===0&&g-u.measureText(o).width<0){u.textAlign="left";u.fillText(o,k+2+left_offset,f+8)}else{u.textAlign="right";u.fillText(o,g-2+left_offset,f+8)}u.fillStyle=block_color}var q=w+" / "+r;if(t>x&&u.measureText(q).width<(k-g)){u.fillStyle="white";u.textAlign="center";u.fillText(q,left_offset+g+(k-g)/2,f+8);u.fillStyle=block_color}}}});var ReadTrack=function(d,b,f,a,c,e){FeatureTrack.call(this,d,b,f,a,c,e);this.track_config=new TrackConfig({track:this,params:[{key:"block_color",label:"Block color",type:"color",default_value:"#444"},{key:"label_color",label:"Label color",type:"color",default_value:"black"},{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:"mode",type:"string",default_value:this.mode,hidden:true},],saved_values:c,onchange:function(){this.track.tile_cache.clear();this.track.draw()}});this.prefs=this.track_config.values;this.track_type="ReadTrack";this.make_name_popup_menu()};$.extend(ReadTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{get_y_scale:function(b){var a;if(b==="summary_tree"){}if(b==="Dense"){a=DENSE_TRACK_HEIGHT}else{if(b==="Squish"){a=SQUISH_TRACK_HEIGHT}else{a=PACK_TRACK_HEIGHT;if(this.track_config.values.show_insertions){a*=2}}}return a},draw_read:function(m,d,J,n,D,G,e,o,y,a){m.textAlign="center";var l=this,u=[n,D],C=0,z=0,f=0;var r=[];if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){f=Math.round(J/2)}if(!e){e=[[0,o.length]]}for(var h=0,k=e.length;h<k;h++){var b=e[h],g="MIDNSHP=X"[b[0]],v=b[1];if(g==="H"||g==="S"){C-=v}var x=G+C,B=Math.floor(Math.max(0,(x-n)*J)),E=Math.floor(Math.max(0,(x+v-n)*J));switch(g){case"H":break;case"S":case"M":case"=":var p=compute_overlap([x,x+v],u);if(p!==NO_OVERLAP){var q=o.slice(z,z+v);if(f>0){m.fillStyle=this.prefs.block_color;m.fillRect(B+this.left_offset-f,y+1,E-B,9);m.fillStyle=CONNECTOR_COLOR;for(var I=0,j=q.length;I<j;I++){if(this.track_config.values.show_differences&&a){var s=a[x-n+I];if(!s||s.toLowerCase()===q[I].toLowerCase()){continue}}if(x+I>=n&&x+I<=D){var A=Math.floor(Math.max(0,(x+I-n)*J));m.fillText(q[I],A+this.left_offset,y+9)}}}else{m.fillStyle=this.prefs.block_color;m.fillRect(B+this.left_offset,y+(this.mode!=="Dense"?4:5),E-B,(d!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}z+=v;C+=v;break;case"N":m.fillStyle=CONNECTOR_COLOR;m.fillRect(B+this.left_offset-f,y+5,E-B,1);C+=v;break;case"D":m.fillStyle="red";m.fillRect(B+this.left_offset-f,y+4,E-B,3);C+=v;break;case"P":break;case"I":var p=compute_overlap([x,x+v],u),K=this.left_offset+B-f;if(p!==NO_OVERLAP){var q=o.slice(z,z+v);if(this.track_config.values.show_insertions){var w=this.left_offset+B-(E-B)/2;if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){m.fillStyle="yellow";m.fillRect(w-f,y-9,E-B,9);r[r.length]={type:"triangle",data:[K,y+4,5]};m.fillStyle=CONNECTOR_COLOR;switch(p){case (OVERLAP_START):q=q.slice(n-x);break;case (OVERLAP_END):q=q.slice(0,x-D);break;case (CONTAINED_BY):break;case (CONTAINS):q=q.slice(n-x,x-D);break}for(var I=0,j=q.length;I<j;I++){var A=Math.floor(Math.max(0,(x+I-n)*J));m.fillText(q[I],A+this.left_offset-(E-B)/2,y)}}else{m.fillStyle="yellow";m.fillRect(w,y+(this.mode!=="Dense"?2:5),E-B,(d!=="Dense"?SQUISH_FEATURE_HEIGHT:DENSE_FEATURE_HEIGHT))}}else{if((d==="Pack"||this.mode==="Auto")&&o!==undefined&&J>CHAR_WIDTH_PX){r[r.length]={type:"text",data:[q.length,K,y+9]}}else{}}}z+=v;break;case"X":z+=v;break}}m.fillStyle="yellow";var t,L,H;for(var F=0;F<r.length;F++){t=r[F];L=t.type;H=t.data;if(L==="text"){m.font="bold "+DEFAULT_FONT;m.fillText(H[0],H[1],H[2]);m.font=DEFAULT_FONT}else{if(L=="triangle"){m.drawDownwardEquilateralTriangle(H[0],H[1],H[2])}}}},draw_element:function(w,y,r,k,e,A,b,n,x,u,f,c){var m=k[0],v=k[1],d=k[2],o=k[3],h=Math.floor(Math.max(0,(v-A)*n)),j=Math.ceil(Math.min(u,Math.max(0,(d-A)*n))),g=(r==="Dense"?1:(1+e))*x,z=this.prefs.block_color,l=this.prefs.label_color;t=0;w.fillStyle=z;if(k[5] instanceof Array){var s=Math.floor(Math.max(0,(k[4][0]-A)*n)),q=Math.ceil(Math.min(u,Math.max(0,(k[4][1]-A)*n))),p=Math.floor(Math.max(0,(k[5][0]-A)*n)),a=Math.ceil(Math.min(u,Math.max(0,(k[5][1]-A)*n)));if(k[4][1]>=A&&k[4][0]<=b&&k[4][2]){this.draw_read(w,r,n,A,b,k[4][0],k[4][2],k[4][3],g,c)}if(k[5][1]>=A&&k[5][0]<=b&&k[5][2]){this.draw_read(w,r,n,A,b,k[5][0],k[5][2],k[5][3],g,c)}if(p>q){w.fillStyle=CONNECTOR_COLOR;w.dashedLine(q+f,g+5,f+p,g+5)}}else{w.fillStyle=z;this.draw_read(w,r,n,A,b,v,k[4],k[5],g,c)}if(r==="Pack"&&v>A){w.fillStyle=this.prefs.label_color;if((r==="Pack"||this.mode==="Auto")&&n>CHAR_WIDTH_PX){var t=Math.round(n/2)}if(y===0&&h-w.measureText(o).width<0){w.textAlign="left";w.fillText(o,j+f+LABEL_SPACING-t,g+8)}else{w.textAlign="right";w.fillText(o,h+f-LABEL_SPACING-t,g+8)}w.fillStyle=z}}});var ToolDataFeatureTrack=function(e,c,g,a,d,f,b){FeatureTrack.call(this,e,c,g,a,d,f,{},b);this.track_type="ToolDataFeatureTrack";this.data_url=raw_data_url;this.data_query_wait=1000;this.dataset_check_url=dataset_state_url};$.extend(ToolDataFeatureTrack.prototype,TiledTrack.prototype,FeatureTrack.prototype,{predraw_init:function(){var b=this;var a=function(){if(b.data_cache.size()===0){setTimeout(a,300)}else{b.data_url=default_data_url;b.data_query_wait=DEFAULT_DATA_QUERY_WAIT;b.dataset_state_url=converted_datasets_state_url;$.getJSON(b.dataset_state_url,{dataset_id:b.dataset_id,hda_ldda:b.hda_ldda},function(c){})}};a()}}); \ No newline at end of file --- a/static/scripts/trackster.js Fri Mar 25 13:26:40 2011 -0400 +++ b/static/scripts/trackster.js Mon Mar 28 15:27:14 2011 -0400 @@ -121,6 +121,14 @@ } /** + * Calculates step for slider with a given min, max. + */ +function get_slider_step(min, max) { + var range = max - min; + return (range <= 1 ? 0.01 : (range <= 1000 ? 1 : 5)); +} + +/** * Init constants & functions used throughout trackster. */ var @@ -255,10 +263,20 @@ * Load data from server; returns AJAX object so that use of Deferred is possible. */ load_data: function(chrom, low, high, mode, resolution, extra_params) { + // Setup data request params. var params = {"chrom": chrom, "low": low, "high": high, "mode": mode, "resolution": resolution, "dataset_id" : this.track.dataset_id, "hda_ldda": this.track.hda_ldda}; $.extend(params, extra_params); + + // Add track filters to params. + var filter_names = []; + for (var i = 0; i < this.track.filters.length; i++) { + filter_names[filter_names.length] = this.track.filters[i].name; + } + params.filter_cols = JSON.stringify(filter_names); + + // Do request. var manager = this; return $.getJSON(this.track.data_url, params, function (result) { manager.set_data(low, high, mode, result); @@ -864,6 +882,9 @@ this.index = index; this.value = value; }; +/** + * Number filters have a min, max as well as a low, high; low and high are used + */ var NumberFilter = function(name, index) { this.name = name; // Index into payload to filter. @@ -872,21 +893,25 @@ this.low = -Number.MAX_VALUE; this.high = Number.MAX_VALUE; // Slide min/max. These values are used to set/update slider. - this.slider_min = Number.MAX_VALUE; - this.slider_max = -Number.MAX_VALUE; + this.min = Number.MAX_VALUE; + this.max = -Number.MAX_VALUE; // UI Slider element and label that is associated with filter. this.slider = null; this.slider_label = null; }; $.extend(NumberFilter.prototype, { - // Returns true if filter can be applied to element. + /** + * Returns true if filter can be applied to element. + */ applies_to: function(element) { if (element.length > this.index) { return true; } return false; }, - // Returns true iff element is in [low, high]; range is inclusive. + /** + * Returns true iff element is in [low, high]; range is inclusive. + */ keep: function(element) { if ( !this.applies_to( element ) ) { // No element to filter on. @@ -894,7 +919,9 @@ } return (element[this.index] >= this.low && element[this.index] <= this.high); }, - // Update filter's min and max values based on element's values. + /** + * Update filter's min and max values based on element's values. + */ update_attrs: function(element) { var updated = false; if (!this.applies_to(element) ) { @@ -902,29 +929,32 @@ } // Update filter's min, max based on element values. - if (element[this.index] < this.slider_min) { - this.slider_min = element[this.index]; + if (element[this.index] < this.min) { + this.min = Math.floor(element[this.index]); updated = true; } - if (element[this.index] > this.slider_max) { - this.slider_max = element[this.index]; - updated = false; + if (element[this.index] > this.max) { + this.max = Math.ceil(element[this.index]); + updated = true; } return updated; }, - // Update filter's slider. + /** + * Update filter's slider. + */ update_ui_elt: function () { var slider_min = this.slider.slider("option", "min"), slider_max = this.slider.slider("option", "max"); - if (this.slider_min < slider_min || this.slider_max > slider_max) { - // Need to update slider. - this.slider.slider("option", "min", this.slider_min); - this.slider.slider("option", "max", this.slider_max); + if (this.min < slider_min || this.max > slider_max) { + // Update slider min, max, step. + this.slider.slider("option", "min", this.min); + this.slider.slider("option", "max", this.max); + this.slider.slider("option", "step", get_slider_step(this.min, this.max)); // Refresh slider: // TODO: do we want to keep current values or reset to min/max? // Currently we reset values: - this.slider.slider("option", "values", [this.slider_min, this.slider_max]); + this.slider.slider("option", "values", [this.min, this.max]); // To use the current values. //var values = this.slider.slider( "option", "values" ); //this.slider.slider( "option", "values", values ); @@ -932,7 +962,9 @@ } }); -// Parse filters dict and return filters. +/** + * Parse filters dict and return filters. + */ var get_filters_from_dict = function(filters_dict) { var filters = []; for (var i = 0; i < filters_dict.length; i++) { @@ -947,6 +979,9 @@ return filters; }; +/** + * Container for track configuration data. + */ var TrackConfig = function( options ) { this.track = options.track; this.params = options.params; @@ -1185,6 +1220,66 @@ // Init HTML elements for tool, filters. // + // Function that supports inline text editing of slider values for tools, filters. + // Enable users to edit parameter's value via a text box. + var edit_slider_values = function(container, span, slider) { + container.click(function() { + var cur_value = span.text(); + max = parseFloat(slider.slider("option", "max")), + input_size = (max <= 1 ? 4 : max <= 1000000 ? max.toString().length : 6), + multi_value = false; + // Increase input size if there are two values. + if (slider.slider("option", "values")) { + input_size = 2*input_size + 1; + multi_value = true; + } + span.text(""); + // Temporary input for changing value. + $("<input type='text'/>").attr("size", input_size).attr("maxlength", input_size) + .attr("value", cur_value).appendTo(span).focus().select() + .click(function(e) { + // Don't want click to propogate up to values_span and restart everything. + e.stopPropagation(); + }).blur(function() { + $(this).remove(); + span.text(cur_value); + }).keyup(function(e) { + if (e.keyCode === 27) { + // Escape key. + $(this).trigger("blur"); + } else if (e.keyCode === 13) { + // + // Enter/return key initiates callback. If new value(s) are in slider range, + // change value (which calls slider's change() function). + // + var slider_min = slider.slider("option", "min"), + slider_max = slider.slider("option", "max"), + invalid = function(a_val) { + return (isNaN(a_val) || a_val > slider_max || a_val < slider_min); + }, + new_value = $(this).val(); + if (!multi_value) { + new_value = parseFloat(new_value); + if (invalid(new_value)) { + alert("Parameter value must be in the range [" + slider_min + "-" + slider_max + "]"); + return $(this); + } + } + else { // Multi value. + new_value = new_value.split("-"); + new_value = [parseFloat(new_value[0]), parseFloat(new_value[1])]; + if (invalid(new_value[0]) || invalid(new_value[1])) { + alert("Parameter value must be in the range [" + slider_min + "-" + slider_max + "]"); + return $(this); + } + } + slider.slider((multi_value ? "values" : "value"), new_value); + } + }); + }); + }; + + // If track has parent: // -replace drag handle with child-track icon button; (TODO: eventually, we'll want to be able // to make a set of child tracks dragable.) @@ -1201,6 +1296,8 @@ // Disable dragging, double clicking on div so that actions on slider do not impact viz. this.filters_div.bind("drag", function(e) { e.stopPropagation(); + }).bind("click", function( e ) { + e.stopPropagation(); }).bind("dblclick", function(e) { e.stopPropagation(); }); @@ -1209,36 +1306,49 @@ // Set up filter label (name, values). var filter_label = $("<div/>").addClass("slider-label").appendTo(filter_div) - var name_span = $("<span/>").addClass("name").appendTo(filter_label); - name_span.text(filter.name + " "); // Extra spacing to separate name and values - var values_span = $("<span/>").addClass("values").appendTo(filter_label); + var name_span = $("<span/>").addClass("slider-name").text(filter.name + " ").appendTo(filter_label); + var values_span = $("<span/>"); + var values_span_container = $("<span/>").addClass("slider-value").appendTo(filter_label).append("[").append(values_span).append("]"); // Set up slider for filter. - // TODO: generate custom interaction elements based on filter type. var slider_div = $("<div/>").addClass("slider").appendTo(filter_div); filter.control_element = $("<div/>").attr("id", filter.name + "-filter-control").appendTo(slider_div); + var prev_values = [0,0]; filter.control_element.slider({ range: true, min: Number.MAX_VALUE, max: -Number.MIN_VALUE, values: [0, 0], slide: function(event, ui) { - var values = ui.values; - // Set new values in UI. - values_span.text("[" + values[0] + "-" + values[1] + "]"); - // Set new values in filter. - filter.low = values[0]; - filter.high = values[1]; - // Redraw track. - track.draw(true, true); + // + // Always update UI values, but set timeout for doing more--especially drawing-- + // so that viz is more responsive. + // + prev_values = ui.values; + values_span.text(ui.values[0] + "-" + ui.values[1]); + setTimeout(function() { + if (ui.values[0] == prev_values[0] && ui.values[1] == prev_values[1]) { + var values = ui.values; + // Set new values in UI. + values_span.text(values[0] + "-" + values[1]); + // Set new values in filter. + filter.low = values[0]; + filter.high = values[1]; + // Redraw track. + track.draw(true, true); + } + }, 50); }, - change: function( event, ui ) { - filter.control_element.slider("option", "slide").call( filter.control_element, event, ui ); + change: function(event, ui) { + filter.control_element.slider("option", "slide").call(filter.control_element, event, ui); } }); filter.slider = filter.control_element; filter.slider_label = values_span; + // Enable users to edit slider values via text box. + edit_slider_values(values_span_container, values_span, filter.control_element); + // Add to clear floating layout. $("<div style='clear: both;'/>").appendTo(filter_div); }); @@ -1266,19 +1376,17 @@ // Slider label. var label_div = $("<div>").addClass("slider-label").appendTo(param_div); - var name_span = $("<span class='param-name'>").text(param.label + " ").appendTo(label_div); + var name_span = $("<span/>").addClass("slider-name").text(param.label + " ").appendTo(label_div); var values_span = $("<span/>").text(param.value); - var values_span_container = $("<span class='param-value'>").appendTo(label_div).append("[").append(values_span).append("]"); + var values_span_container = $("<span/>").addClass("slider-value").appendTo(label_div).append("[").append(values_span).append("]"); // Slider. var slider_div = $("<div/>").addClass("slider").appendTo(param_div); var slider = $("<div id='" + param.name + "-param-control'>").appendTo(slider_div); - // Make step reasonable. - var step = (param.max <= 1 ? 0.01 : (param.max <= 1000 ? 1 : 5)); slider.slider({ min: param.min, max: param.max, - step: step, + step: get_slider_step(param.min, param.max), value: param.value, slide: function(event, ui) { var value = ui.value; @@ -1290,47 +1398,12 @@ values_span.text(value); }, change: function(event, ui) { - param.value = ui.value; + slider.slider("option", "slide").call(slider, event, ui); } }); - // Enable users to edit parameter's value via a text box. - values_span_container.click(function() { - var span = values_span, - cur_value = span.text(), - // TODO: is there a better way to handle input size when param max is <= 1? - input_size = (param.max <= 1 ? 4 : param.max.length); - span.text(""); - // Temporary input for changing value. - $("<input type='text'/>").attr("size", input_size).attr("maxlength", input_size) - .attr("value", cur_value).appendTo(span).focus().select() - .click(function(e) { - // Don't want click to propogate up to values_span and restart everything. - e.stopPropagation(); - }).blur(function() { - $(this).remove(); - span.text(cur_value); - }).keyup(function(e) { - if ( e.keyCode === 27 ) { - // Escape key. - $(this).trigger("blur"); - } else if ( e.keyCode === 13 ) { - // Enter/return key sets new value. - var input = $(this), - new_value = parseFloat(input.val()); - if (isNaN(new_value) || new_value > param.max || new_value < param.min) { - // TODO: display popup menu instead of alert? - alert("Parameter value must be in the range [" + param.min + "-" + param.max + "]"); - return $(this); - } - // Update value in three places; update param value last b/c slider updates param value - // as well and slider may round values depending on its settings. - span.text(new_value); - slider.slider('value', new_value); - param.value = new_value; - } - }); - }); + // Enable users to edit parameter's value via text box. + edit_slider_values(values_span_container, values_span, slider); // Add to clear floating layout. $("<div style='clear: both;'/>").appendTo(param_div); @@ -1467,7 +1540,7 @@ // if (track.tool) { // Show/hide dynamic tool menu item. - var text = (track.dynamic_tool_div.is(":visible") ? "Hide Tool" : "Show Tool"); + var text = (track.dynamic_tool_div.is(":visible") ? "Hide tool" : "Show tool"); track_dropdown[text] = function() { // Set track name, toggle tool div, and remake menu. if (!track.dynamic_tool_div.is(":visible")) { @@ -1551,15 +1624,17 @@ } // - // Actions to take after tiles have been drawn: - // (1) remove old tile(s); - // (2) update filtering UI elements. + // Post-draw actions: // - if (clear_after) { - var track = this; - var intervalId = setInterval(function() { - if (obj_length(draw_tile_dict) === 0) { - // All tiles have been drawn; clear out track content in order to show the most recent content. + var track = this; + var intervalId = setInterval(function() { + if (obj_length(draw_tile_dict) === 0) { + // All tiles have been drawn. + clearInterval(intervalId); + + // Clear tiles? + if (clear_after) { + // Clear out track content in order to show the most recent content. // Most recent content is the div with children (tiles) most recently appended to track. // However, do not delete recently-appended empty content as calls to draw() may still be active // and using these divs. @@ -1575,12 +1650,38 @@ remove = true; } } + } + + // + // Update filter attributes, UI. + // - // Method complete; do not call it again. - clearInterval(intervalId); + // Update filtering UI. + for (var f = 0; f < track.filters.length; f++) { + track.filters[f].update_ui_elt(); } - }, 50); - } + + // Determine if filters are available; this is based on the example feature. + var filters_available = false; + if (track.example_feature) { + for (var f = 0; f < track.filters.length; f++) { + if (track.filters[f].applies_to(track.example_feature)) { + filters_available = true; + break; + } + } + } + + // If filter availability changed, hide filter div if necessary and update menu. + if (track.filters_available !== filters_available) { + track.filters_available = filters_available; + if (!track.filters_available) { + track.filters_div.hide(); + } + track.make_name_popup_menu(); + } + } + }, 50); // // Draw child tracks. @@ -1678,40 +1779,7 @@ parent_element.append(tile_element); track.max_height = Math.max(track.max_height, tile_element.height()); track.content_div.css("height", track.max_height + "px"); - parent_element.children().css("height", track.max_height + "px"); - - if (track.hidden) { return; } - - // - // Update filter attributes, UI. - // TODO: this could be done after all tiles are drawn, but there's no reliable way to detect - // that right now. - // - - // Update filtering UI. - for (var f = 0; f < track.filters.length; f++) { - track.filters[f].update_ui_elt(); - } - - // Determine if filters are available; this is based on the example feature. - var filters_available = false; - if (track.example_feature) { - for (var f = 0; f < track.filters.length; f++) { - if (track.filters[f].applies_to(track.example_feature)) { - filters_available = true; - break; - } - } - } - - // If filter availability changed, hide filter div if necessary and update menu. - if (track.filters_available !== filters_available) { - track.filters_available = filters_available; - if (!track.filters_available) { - track.filters_div.hide(); - } - track.make_name_popup_menu(); - } + parent_element.children().css("height", track.max_height + "px"); }, // Set track as the overview track in the visualization. set_overview: function() { @@ -2376,10 +2444,10 @@ } else { // Mode is either Squish or Pack: // Feature details. - var feature_strand = feature[5], - feature_ts = feature[6], - feature_te = feature[7], - feature_blocks = feature[8]; + var feature_strand = feature[4], + feature_ts = feature[5], + feature_te = feature[6], + feature_blocks = feature[7]; if (feature_ts && feature_te) { thick_start = Math.floor( Math.max(0, (feature_ts - tile_low) * w_scale) ); @@ -2642,15 +2710,15 @@ var filter; for (var f = 0; f < this.filters.length; f++) { filter = this.filters[f]; - filter.update_attrs( feature ); - if ( !filter.keep( feature ) ) { + filter.update_attrs(feature); + if (!filter.keep(feature)) { hide_feature = true; break; } } if (hide_feature) { continue; - } + } // Draw feature if there's overlap and mode is dense or feature is slotted (as it must be for all non-dense modes). if (is_overlap([feature_start, feature_end], [tile_low, tile_high]) && (mode == "Dense" || slot !== null)) { @@ -3051,7 +3119,7 @@ track.data_url = default_data_url; track.data_query_wait = DEFAULT_DATA_QUERY_WAIT; track.dataset_state_url = converted_datasets_state_url; - $.getJSON(track.dataset_state_url, { dataset_id : track.dataset_id, hda_ldda: track.hda_ldda }, function(track_data) {}); + $.getJSON(track.dataset_state_url, {dataset_id : track.dataset_id, hda_ldda: track.hda_ldda}, function(track_data) {}); } }; post_init(); --- a/templates/tracks/browser.mako Fri Mar 25 13:26:40 2011 -0400 +++ b/templates/tracks/browser.mako Mon Mar 28 15:27:14 2011 -0400 @@ -69,6 +69,7 @@ chrom_url = "${h.url_for( action='chroms' )}", dataset_state_url = "${h.url_for( action='dataset_state' )}", converted_datasets_state_url = "${h.url_for( action='converted_datasets_state' )}", + filters_url = "${h.url_for( action='filters' )}", addable_track_types = { "LineTrack": LineTrack, "FeatureTrack": FeatureTrack, "ReadTrack": ReadTrack }, view; Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0

commit/galaxy-central: fubar: Remove bogus makeGFF from rgutils
by Bitbucket 25 Mar '11

25 Mar '11

1 new changeset in galaxy-central: http://bitbucket.org/galaxy/galaxy-central/changeset/9d6a34b0a4fa/ changeset: r5276:9d6a34b0a4fa user: fubar date: 2011-03-25 18:26:40 summary: Remove bogus makeGFF from rgutils affected #: 1 file (1 byte) --- a/tools/rgenetics/rgutils.py Fri Mar 25 13:21:13 2011 -0400 +++ b/tools/rgenetics/rgutils.py Fri Mar 25 13:26:40 2011 -0400 @@ -62,6 +62,7 @@ chr1 67065090 67065317 - CCDS635.1_cds_2_0_chr1_67065091_r chr1 67066082 67066181 - CCDS635.1_cds_3_0_chr1_67066083_r + see http://genome.ucsc.edu/FAQ/FAQtracks.html#tracks1 we need to add 1 to start coordinates on the way through - but length calculations are easier """ Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.

1 0