add a getHighlight and setHighlight in the Browser object, a GlobalHi…

…ghlight data model, and support in the gridtrack for rendering a highlighted region, references #76

main.css

@@ -22,6 +22,10 @@ html, body {
     text-align: center;
 }
 
+.track .global_highlight {
+    position: absolute;
+    background: rgba( 255, 255, 0, 0.7 );
+}
 
 
 .tundra input {

src/JBrowse/Browser.js

@@ -27,6 +27,7 @@ define( [
             'JBrowse/View/InfoDialog',
             'JBrowse/View/FileDialog',
             'JBrowse/View/LocationChoiceDialog',
+            'JBrowse/Model/GlobalHighlight',
             'dijit/focus',
             'lazyload', // for dynamic CSS loading
             'dojo/domReady!'
@@ -59,6 +60,7 @@ define( [
             InfoDialog,
             FileDialog,
             LocationChoiceDialog,
+            GlobalHighlight,
             dijitFocus,
             LazyLoad
         ) {
@@ -2114,6 +2116,22 @@ Browser.prototype.createNavBox = function( parent ) {
     return navbox;
 };
 
+/**
+ * Return the current
+ */
+Browser.prototype.getHighlight = function() {
+    return this._highlight || null;
+};
+Browser.prototype.setHighlight = function( newHighlight ) {
+    if( ! newHighlight )
+        delete this._highlight;
+    else if( newHighlight instanceof GlobalHighlight )
+        this._highlight = newHighlight;
+    else
+        this._highlight = new GlobalHighlight( newHighlight );
+
+    return this.getHighlight();
+};
 
 return Browser;
 

src/JBrowse/GenomeView.js

@@ -184,7 +184,9 @@ var GenomeView = function( browser, elem, stripeWidth, refseq, zoomLevel ) {
     this.staticTrack = new LocationScaleTrack({
         label: "static_track",
         labelClass: "pos-label",
-        posHeight: this.posHeight
+        posHeight: this.posHeight,
+        browser: this.browser,
+        refSeq: this.ref
     });
     this.staticTrack.setViewInfo( this, function(height) {}, this.stripeCount,
                                  this.scaleTrackDiv, undefined, this.stripePercent,
@@ -197,7 +199,10 @@ var GenomeView = function( browser, elem, stripeWidth, refseq, zoomLevel ) {
     gridTrackDiv.className = "track";
     gridTrackDiv.style.cssText = "top: 0px; height: 100%;";
     gridTrackDiv.id = "gridtrack";
-    var gridTrack = new GridLinesTrack();
+    var gridTrack = new GridLinesTrack({
+                                           browser: this.browser,
+                                           refSeq: this.ref
+                                       });
     gridTrack.setViewInfo( this, function(height) {}, this.stripeCount,
                           gridTrackDiv, undefined, this.stripePercent,
                           this.stripeWidth, this.pxPerBp,
@@ -261,7 +266,9 @@ var GenomeView = function( browser, elem, stripeWidth, refseq, zoomLevel ) {
     this.addOverviewTrack(new LocationScaleTrack({
         label: "overview_loc_track",
         labelClass: "overview-pos",
-        posHeight: this.overviewPosHeight
+        posHeight: this.overviewPosHeight,
+        browser: this.browser,
+        refSeq: this.ref
     }));
     this.showFine();
     this.showCoarse();
@@ -967,7 +974,9 @@ GenomeView.prototype.setLocation = function(refseq, startbp, endbp) {
     this.addOverviewTrack(new LocationScaleTrack({
             label: "overview_loc_track",
             labelClass: "overview-pos",
-            posHeight: this.overviewPosHeight
+            posHeight: this.overviewPosHeight,
+            browser: this.browser,
+            refSeq: this.ref
         }));
         this.sizeInit();
         this.setY(0);

src/JBrowse/Model/GlobalHighlight.js

@@ -0,0 +1,32 @@
+define( [
+            'dojo/_base/declare',
+            'JBrowse/Model/Location'
+        ],
+        function(
+            declare,
+            Location
+        ) {
+
+return declare( Location, {
+
+  constructor: function( args ) {
+      if( args ) {
+
+          if( typeof args == 'string' )
+              args = Util.parseLocString( args );
+
+          this.objectName = args.objectName;
+
+      }
+  },
+
+  toString: function() {
+      var locstring = this.inherited(arguments);
+      if( this.objectName )
+          return locString + ' ('+this.objectName + ')';
+      else
+          return locstring;
+  }
+
+});
+});

src/JBrowse/View/Track/GridLines.js

@@ -1,5 +1,9 @@
-define(['dojo/_base/declare','JBrowse/View/Track/BlockBased'],
-       function( declare, BlockBased ) {
+define([
+           'dojo/_base/declare',
+           'dojo/dom-construct',
+           'JBrowse/View/Track/BlockBased'
+       ],
+       function( declare, dom, BlockBased ) {
 return dojo.declare( BlockBased,
  /**
   * @lends JBrowse.View.Track.GridLines.prototype
@@ -23,6 +27,11 @@ return dojo.declare( BlockBased,
 
     fillBlock: function( args ) {
         this.renderGridlines( args.block, args.leftBase, args.rightBase );
+
+        var highlight = this.browser.getHighlight();
+        if( highlight && highlight.ref == this.refSeq.name )
+            this.renderHighlight( args, highlight );
+
         args.finishCallback();
         this.heightUpdate(100, args.blockIndex);
     },
@@ -35,7 +44,7 @@ return dojo.declare( BlockBased,
             !( base_span % 10 ) ? 10 :
             !( base_span % 5  ) ? 5  :
             !( base_span % 2  ) ? 2  :
-            0;
+                                  0;
         var major_count = base_span == 20 ? 2 : base_span > 0 ? 1 : 0;
 
         var new_gridline = function( glclass, position ) {
@@ -54,6 +63,42 @@ return dojo.declare( BlockBased,
             block.appendChild( new_gridline( cls, pos) );
         }
 
+    },
+
+    renderHighlight: function( args, highlight ) {
+        // do nothing if the highlight does not overlap this region
+        if( highlight.start > args.rightBase || highlight.end < args.leftBase )
+            return;
+
+        var block_span = args.rightBase - args.leftBase;
+
+        var left = highlight.start;
+        var right = highlight.end;
+
+        // trim left and right to avoid making a huge element that can cause problems
+        var trimLeft = args.leftBase - left;
+        if( trimLeft > 0 ) {
+            left += trimLeft;
+        }
+        var trimRight = right - args.rightBase;
+        if( trimRight > 0 ) {
+            right -= trimRight;
+        }
+
+        function toPct ( coord ) {
+            return (coord - args.leftBase) / block_span * 100;
+        }
+
+        left = toPct( left );
+        var width = toPct(right)-left;
+        var el = dom.create('div', {
+                                className: 'global_highlight',
+                                style: {
+                                    left: left+'%',
+                                    width: width+'%',
+                                    height: '100%'
+                                }
+                            }, args.block );
     }
 });
 });