make dataset selector a type-ahead combobox, fixes #752

GMOD · Apr 28, 2018 · a9eaaa2 · a9eaaa2
1 parent 890f5a6
commit a9eaaa2
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 34 deletions.
diff --git a/css/menubar.scss b/css/menubar.scss
@@ -104,35 +104,53 @@ a.topLink, a.topLink * {
 
 
 /* dataset selector */
-.menuBar > .menu, .menuBar > .dataset_select {
+.menuBar > .menu, .menuBar  > .dijitComboBox {
     float: left;
     font-size: 120%;
     color: white;
-}
-.menuBar > .dataset_select {
-    margin: 1px 0 0 1px;
-    font-weight: bold;
-    height: 100%;
     background: transparent;
+    height: 100%;
     border: none;
-
-    .dijitSelectLabel {
-        padding: 0 0.5em;
-        vertical-align: middle;
-    }
-
-    &.dijitSelectHover td {
-        color: white;
-    }
-    .dijitButtonContents {
-        background: transparent;
-        border-color: transparent;
+}
+.menuBar > .dijitComboBox {
+    > .dijitInputContainer {
+        height: 100%;
     }
     .dijitArrowButton {
-        padding: 0;
+        padding: 0 3px 0 2px;
+        height: 100%;
 
         .dijitArrowButtonInner {
             background: url("../img/spriteArrows.png") no-repeat scroll -56px center;
+            margin-top: 4px;
+        }
+
+        &:hover {
+            background: rgba(255,255,255,0.2)
+        }
+    }
+    .dataset_select {
+        font-weight: bold;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font-size: inherit;
+        font-style: italic;
+        height: 100%;
+        padding-bottom: 1px;
+        padding-left: 3px;
+
+        .dijitSelectLabel {
+            padding: 0 0.5em;
+            vertical-align: middle;
+        }
+
+        &.dijitSelectHover td {
+            color: white;
+        }
+        .dijitButtonContents {
+            background: transparent;
+            border-color: transparent;
         }
     }
 }

diff --git a/release-notes.txt b/release-notes.txt
@@ -2,6 +2,10 @@
 
 ## Minor improvements
 
+ * The dropdown dataset selector in "classic menu" mode is now a type-ahead combo box, enabling
+   fast searching through large numbers of datasets. Thanks to @keiranmraine for the suggestion!
+   (issue #752, @rbuels)
+
  * Improve the calculation of feature density for GFF3Tabix and add new one for GFF3 in-memory.
    Thanks to @hkmoon for the suggestion! (issue #1039, issue #913, @cmdcolin)
 

diff --git a/src/JBrowse/Browser.js b/src/JBrowse/Browser.js
@@ -18,6 +18,7 @@ define( [
             'dijit/layout/BorderContainer',
             'dijit/Dialog',
             'dijit/form/ComboBox',
+            'dojo/store/Memory',
             'dijit/form/Button',
             'dijit/form/Select',
             'dijit/form/ToggleButton',
@@ -79,6 +80,7 @@ define( [
             dijitBorderContainer,
             dijitDialog,
             dijitComboBox,
+            dojoMemoryStore,
             dijitButton,
             dijitSelectBox,
             dijitToggleButton,
@@ -1069,26 +1071,27 @@ renderDatasetSelect: function( parent ) {
         var datasetChoices = [];
         for( var id in dsconfig ) {
             if( ! /^_/.test(id) )
-                datasetChoices.push( dojo.mixin({ id: id }, dsconfig[id] ) );
+                datasetChoices.push( Object.assign({ id: id }, dsconfig[id] ) );
         }
 
-        new dijitSelectBox(
+        const combobox = new dijitComboBox(
             {
                 name: 'dataset',
                 className: 'dataset_select',
-                value: this.config.dataset_id,
-                options: array.map(
-                    datasetChoices,
-                    function( dataset ) {
-                        return { label: dataset.name, value: dataset.id };
-                    }),
-                onChange: dojo.hitch(this, function( dsID ) {
-                                         var ds = (this.config.datasets||{})[dsID];
-                                         if( ds )
-                                             window.location = ds.url;
-                                         return false;
-                                     })
-            }).placeAt( parent );
+                value: this.config.datasets[this.config.dataset_id].name,
+                store: new dojoMemoryStore({
+                    data: datasetChoices,
+                }),
+                onChange: dsName => {
+                    if (!dsName) return false
+                    const dsID = datasetChoices.find(d => d.name === dsName).id
+                    const ds = (this.config.datasets||{})[dsID]
+                    if (ds) window.location = ds.url
+                    return false
+                },
+            })
+        combobox.placeAt( parent )
+        combobox.focusNode.onclick = function() { this.select() }
     }
     else {
         if( this.config.datasets && this.config.dataset_id ) {