added feature description text, along with description and `style.m…

…axDescriptionLength` config variables to control it

main.css

@@ -324,11 +324,6 @@ div.tracklist-label {
     border-right: 1px solid #555;
 }
 
-a.feature-label {
-    color: black;
-}
-
-
 /* .dojoDndItemSelected, .dojoDndItemAnchor { */
 /*     background: rgba( 220, 220, 255, 0.8); */
 /* } */
@@ -347,6 +342,7 @@ div.tracklist-container {
     padding-bottom: 2px;
 }
 
+/* styles for feature labels */
 .feature-label {
     position: absolute;
     border: 0px;
@@ -358,6 +354,13 @@ div.tracklist-container {
     z-index: 10;
     cursor: pointer;
 }
+a.feature-label {
+    color: black;
+}
+.feature-description {
+    color: blue;
+    margin-top: -0.2em;
+}
 
 .rubber-highlight {
     border: 1px solid black;

release-notes.txt

@@ -28,6 +28,15 @@
    both prettier, and more comprehensive, displaying all available
    data for the feature.
 
+ * Added the long-missing ability to render a second line of label
+   text for features containing their description, which is taken from
+   the feature's 'Note' or 'description' attribute, if present.  The
+   description is only displayed if the track's `description`
+   configuration variable is set to a true value, which is the
+   default.  There is also a style.maxDescriptionLength value, that
+   can be set to control how long a description can be before it is
+   truncated with ellipses.  It defaults to 70 characters.
+
  * Added a small helper script, `add-track-json.pl` that developers
    and advanced users can use to programmatically add a block of track
    configuration JSON to an existing JBrowse configuration file.

src/JBrowse/View/Track/HTMLFeatures.js

@@ -120,11 +120,13 @@ var HTMLFeatures = declare( BlockBased,
     loadSuccess: function(trackInfo, url) {
 
         var defaultConfig = {
+            description: true,
             style: {
                 className: "feature2",
                 histScale: 4,
                 labelScale: 50,
-                subfeatureScale: 80
+                subfeatureScale: 80,
+                maxDescriptionLength: 70
             },
             hooks: {
                 create: function(track, feat ) {
@@ -551,8 +553,8 @@ var HTMLFeatures = declare( BlockBased,
         heightTest.style.visibility = "hidden";
         heightTest.appendChild(document.createTextNode("1234567890"));
         document.body.appendChild(heightTest);
-        this.nameHeight = heightTest.clientHeight;
-        this.nameWidth = heightTest.clientWidth / 10;
+        this.labelHeight = heightTest.clientHeight;
+        this.labelWidth = heightTest.clientWidth / 10;
         document.body.removeChild(heightTest);
 
         //measure the height of glyphs
@@ -610,11 +612,21 @@ var HTMLFeatures = declare( BlockBased,
         // if the label extends beyond the feature, use the
         // label end position as the end position for layout
         var name = feature.get('name');
-        if (name && (scale >= this.labelScale)) {
-	    featureEnd = Math.max(featureEnd,
-                                  featureStart + ((name ? name.length : 0)
-				                  * (this.nameWidth / scale) ) );
-            levelHeight += this.nameHeight;
+        var description = this.config.description && ( feature.get('note') || feature.get('description') );
+        if( description && description.length > this.config.style.maxDescriptionLength )
+            description = description.substr(0, this.config.style.maxDescriptionLength )+String.fromCharCode(8230);
+
+        // add the label div (which includes the description) to the
+        // calculated height of the feature if it will be displayed
+        if( scale >= this.labelScale ) {
+            if (name) {
+	        featureEnd = Math.max(featureEnd, featureStart + (''+name).length * this.labelWidth / scale );
+                levelHeight += this.labelHeight;
+            }
+            if( description ) {
+                featureEnd = Math.max( featureEnd, featureStart + (''+description).length * this.labelWidth / scale );
+                levelHeight += this.labelHeight;
+            }
         }
         featureEnd += Math.max(1, this.padding / scale);
 
@@ -692,9 +704,10 @@ var HTMLFeatures = declare( BlockBased,
         if (name && (scale >= this.labelScale)) {
             var labelDiv = dojo.create( 'div', {
                     className: "feature-label",
-                    innerHTML: name,
+                    innerHTML: '<div class="feature-name">'+name+'</div>'
+                               +( description ? ' <div class="feature-description">'+description+'</div>' : '' ),
                     style: {
-                        top: (top + this.glyphHeight) + "px",
+                        top: (top + this.glyphHeight + 2) + "px",
                         left: (100 * (featureStart - block.startBase) / blockWidth)+'%'
                     }
                 }, block );