display details of subfeatures in default feature detail pane, refere…

…nces #125
GMOD · Oct 30, 2012 · 7d00411 · 7d00411
1 parent 604299a
commit 7d00411
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/main.css b/main.css
@@ -602,13 +602,15 @@ a.dialog-new-window {
 }
 
 /* styles for popup feature detail dialogs from tracks */
-.dijitDialogPaneContent .feature-detail {
-    margin-top: -0.6em;
-}
-
 .feature-detail {
     padding-top: 1em;
 }
+.feature-detail .subfeature-detail {
+    background: #fafafa;
+    background: rgba( 0, 0, 0, 0.1 );
+    border: 1px outset #B9B9B9
+}
+
 .detail .value {
     margin-left: 1em;
     display: inline-block;

diff --git a/src/JBrowse/View/Track/HTMLFeatures.js b/src/JBrowse/View/Track/HTMLFeatures.js
@@ -156,9 +156,9 @@ HTMLFeatures = declare( HTMLFeatures,
      * Make a default feature detail page for the given feature.
      * @returns {HTMLElement} feature detail page HTML
      */
-    defaultFeatureDetail: function( /** JBrowse.Track */ track, /** Object */ f, /** HTMLElement */ div ) {
+    defaultFeatureDetail: function( /** JBrowse.Track */ track, /** Object */ f, /** HTMLElement */ featDiv, /** HTMLElement */ container ) {
         var fmt = dojo.hitch( this, '_fmtDetailField' );
-        var container = dojo.create('div', { className: 'detail feature-detail feature-detail-'+track.name, innerHTML: '' } );
+        container = container || dojo.create('div', { className: 'detail feature-detail feature-detail-'+track.name, innerHTML: '' } );
         container.innerHTML += fmt( 'Name', f.get('name') );
         container.innerHTML += fmt( 'Type', f.get('type') );
         container.innerHTML += fmt( 'Description', f.get('note') );
@@ -175,6 +175,24 @@ HTMLFeatures = declare( HTMLFeatures,
             container.innerHTML += fmt( t, f.get(t) );
         });
 
+        var subfeatures = f.get('subfeatures');
+        if( subfeatures && subfeatures.length ) {
+            var field_container = dojo.create('div', { className: 'field_container subfeatures' }, container );
+            dojo.create( 'h2', { className: 'field subfeatures', innerHTML: 'Subfeatures' }, field_container );
+            var subfeaturesContainer = dojo.create( 'div', { className: 'value subfeatures' }, field_container );
+            array.forEach( subfeatures || [], function( subfeature ) {
+                    this.defaultFeatureDetail(
+                        track,
+                        subfeature,
+                        null,
+                        dojo.create('div', {
+                                        className: 'detail feature-detail subfeature-detail feature-detail-'+track.name+' subfeature-detail-'+track.name,
+                                        innerHTML: ''
+                                    }, subfeaturesContainer )
+                    );
+            },this);
+        }
+
         return container;
     },