[galaxy-commits] commit/galaxy-central: kanwei: trackster:

8 Feb 2011

1 new changeset in galaxy-central:

http://bitbucket.org/galaxy/galaxy-central/changeset/fb559ae27410/
changeset:   r5025:fb559ae27410
user:        kanwei
date:        2011-02-08 23:45:03
summary:     trackster:
- Fix packing overlap issue due to font calculation being different in dummy context vs drawing context
- Refactor incremental_slots for simplicity/readability
- Properly add padding to text label for "pack"-view feature tracks
affected #:  1 file (288 bytes)

--- a/static/scripts/trackster.js	Tue Feb 08 16:48:41 2011 -0500
+++ b/static/scripts/trackster.js	Tue Feb 08 17:45:03 2011 -0500
@@ -1,5 +1,5 @@
 /* Trackster
-    2010, James Taylor, Kanwei Li
+    2010, James Taylor, Kanwei Li, Jeremy Goecks
 */
 
 /**
@@ -68,8 +68,10 @@
     SQUISH_FEATURE_HEIGHT = 3,
     PACK_FEATURE_HEIGHT = 9,
     LABEL_SPACING = 2,
+    PACK_SPACING = 5,
     
     // Other constants.
+    DEFAULT_FONT = "9px Monaco, Lucida Console, monospace",
     DENSITY = 200,
     FEATURE_LEVELS = 10,
     MAX_FEATURE_DEPTH = 100,
@@ -96,6 +98,7 @@
     G_vmlCanvasManager.initElement(DUMMY_CANVAS);
 }
 CONTEXT = DUMMY_CANVAS.getContext("2d");
+CONTEXT.font = DEFAULT_FONT; // To ensure consistent measureText width
 PX_PER_CHAR = CONTEXT.measureText("A").width;
     
 var right_img = new Image();
@@ -1382,8 +1385,8 @@
             resolution = this.view.resolution;
 
         var parent_element = $("<div style='position: relative;'></div>"),
-            w_scale = this.content_div.width() / range;
-
+            w_scale = this.view.container.width() / range;
+        
         this.content_div.append( parent_element );
         this.max_height = 0;
         // Index of first tile that overlaps visible region
@@ -1401,7 +1404,7 @@
             if ( !force && cached ) {
                 this.show_tile( cached, parent_element, tile_low );
             } else {
-                this.delayed_draw(force, key, tile_low, tile_high, tile_index, resolution, parent_element, w_scale, draw_tile_count);
+                this.delayed_draw(force, key, tile_low, tile_high, tile_index, resolution, parent_element, w_scale);
             }
             tile_index += 1;
         }
@@ -1448,7 +1451,7 @@
             this.child_tracks[i].draw(force);
         }
     }, 
-    delayed_draw: function(force, key, tile_low, tile_high, tile_index, resolution, parent_element, w_scale, draw_tile_count) {
+    delayed_draw: function(force, key, tile_low, tile_high, tile_index, resolution, parent_element, w_scale) {
         var track = this;
         // Put a 50ms delay on drawing so that if the user scrolls fast, we don't load extra data
         var id = setTimeout(function() {
@@ -1488,9 +1491,7 @@
                     track.show_tile(tile_element, parent_element, tile_low);
                 }
             }
-            delete draw_tile_count--;
         }, 50);
-        draw_tile_count++
     }, 
     // Show track tile and perform associated actions.
     show_tile: function( tile_element, parent_element, tile_low ) {
@@ -1990,10 +1991,10 @@
     this.show_labels_scale = 0.001;
     this.showing_details = false;
     this.summary_draw_height = 30;
-    this.default_font = "9px Monaco, Lucida Console, monospace";
+    this.default_font = DEFAULT_FONT;
     this.inc_slots = {};
     this.data_queue = {};
-    this.s_e_by_tile = {};
+    this.start_end_dct = {};
     this.tile_cache = new Cache(CACHED_TILES_FEATURE);
     this.data_cache = new DataCache(20);
     this.left_offset = 200;
@@ -2050,7 +2051,7 @@
             inc_slots.w_scale = level;
             inc_slots.mode = mode;
             this.inc_slots[level] = inc_slots;
-            this.s_e_by_tile[level] = {};
+            this.start_end_dct[level] = {};
         }
         
         //
@@ -2063,7 +2064,7 @@
             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.s_e_by_tile[0] === undefined) { this.s_e_by_tile[0] = []; }
+        // 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];
@@ -2078,36 +2079,30 @@
         //
         // Slot unslotted features.
         //
-        var s_e_by_tile = this.s_e_by_tile[level];
+        var start_end_dct = this.start_end_dct[level];
         
-        // Find the first slot s/t current feature doesn't overlap any other features in that slot.
+        // 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) {
-            var found;
-            for (var slot_num = 0, slot; slot_num <= MAX_FEATURE_DEPTH; slot_num++) {
-                found = true;
-                slot = s_e_by_tile[slot_num];
+            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]) {
-                            found = false;
+                            // There is overlap
+                            has_overlap = true;
                             break;
                         }
                     }
                 }
-                if (found) {
-                    break;
+                if (!has_overlap) {
+                    return slot_num;
                 }
             }
-            
-            if (found) {
-                return slot_num;
-            }
-            else {
-                return -1;
-            }
+            return -1;
         };
         
         // Do slotting.
@@ -2126,11 +2121,8 @@
             // 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 && !no_label) {
-                // +2 for gap b/t text and feature, +3 for packing issue. (TODO: it's not clear what
-                // the packing issue is, other than that packing is global but features are drawn locally;
-                // it seems this mismatch is causing features to slightly overlap, perhaps due to features
-                // being compressed onto tiles.)
-                text_len += (LABEL_SPACING + 4);
+                // 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";
@@ -2142,8 +2134,9 @@
                         
             // 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
@@ -2159,17 +2152,16 @@
                 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.
-                slot = s_e_by_tile[slot_num];
-                if (slot === undefined) { 
-                    slot = s_e_by_tile[slot_num] = [];
+                if (start_end_dct[slot_num] === undefined) { 
+                    start_end_dct[slot_num] = [];
                 }
-                slot.push([f_start, f_end]);
+                start_end_dct[slot_num].push([f_start, f_end]);
                 inc_slots[feature_uid] = slot_num;
                 highest_slot = Math.max(highest_slot, slot_num);
             }
@@ -2183,7 +2175,7 @@
         // Debugging: view slots data.
         /*
         for (var i = 0; i < MAX_FEATURE_DEPTH; i++) {
-            var slot = s_e_by_tile[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++) {
@@ -2290,7 +2282,6 @@
             this.get_data(tile_low, tile_high);
             return;
         }
-        
         //
         // Create/set/compute some useful vars.
         //
@@ -2317,18 +2308,14 @@
             if (mode === "Squish") { 
                 y_scale = SQUISH_TRACK_HEIGHT;
                 no_label = true;
-            }
-            else if (mode === "Pack") { 
+            } else if (mode === "Pack") { 
                 y_scale = PACK_TRACK_HEIGHT;
                 // TODO: is there data where there is no label even in pack mode?
                 no_label = false;
-            }
-            // mode == "Auto"
-            else if (result.extra_info === "no_detail") {
+            } else if (result.extra_info === "no_detail") { // mode == "Auto" 
                 y_scale = (result.track_type === "bai" ? SQUISH_TRACK_HEIGHT : NO_DETAIL_TRACK_HEIGHT);
                 no_label = true;
-            }
-            else {
+            } else {
                 y_scale = PACK_TRACK_HEIGHT;
                 no_label = false;
             }
@@ -2564,7 +2551,8 @@
                             ctx.fillRect(f_start + left_offset, y_center + (thick_height-thin_height)/2 + 1, 
                                          f_end - f_start, thick_height);
                         }
-                        else { // There are feature blocks and mode is either Squish or Pack.
+                        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
@@ -2625,10 +2613,10 @@
                             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);
+                                ctx.fillText(feature_name, f_end + left_offset + LABEL_SPACING, y_center + 8);
                             } else {
                                 ctx.textAlign = "right";
-                                ctx.fillText(feature_name, f_start - 2 + left_offset, y_center + 8);
+                                ctx.fillText(feature_name, f_start + left_offset - LABEL_SPACING, y_center + 8);
                             }
                             ctx.fillStyle = block_color;
                         }

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.

    

[galaxy-commits] commit/galaxy-central: kanwei: trackster:

Bitbucket