changed transcript box in 'gene expression' tab to autocomplete from

available transcript service
Arabidopsis-Information-Portal · Aug 19, 2015 · 3bc0073 · 3bc0073
1 parent 3dc7f9e
commit 3bc0073
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 3 deletions.
diff --git a/app/app.html b/app/app.html
@@ -40,7 +40,9 @@ <h3>Enter an Arabidopsis transcript identifier and choose a tissue (or treatment
                 <form name="expression_gene_form" role="form">
                     <div class="form-group col-xs-4">
                         <label for="expression_gene" class="control-label">Transcript (AGI ID, e.g. AT1G33930.1)</label>
-                        <input type="text" name="expression_gene" id="expression_gene" value="AT1G33930.1" class="form-control" placeholder="Transcript (AGI ID)"/>
+                        <select name="expression_gene" id="expression_gene" class="form-control" placeholder="Transcript (AGI ID)">
+                            <option value="AT1G33930.1">AT1G33930.1</option>
+                        </select>
                     </div>
                     <div class="form-group col-xs-4">
                         <label for="expression_tissue" class="control-label">Tissue or Treatment Type</label>

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -287,10 +287,38 @@
     /* go! */
     init();
 
+    $('#expression_gene', appContext).selectize({
+        options: [],
+        maxOptions: 2000,
+        labelField: 'transcript',
+        valueField: 'transcript',
+        searchField: 'transcript',
+        sortField: 'transcript',
+        create: false,
+        persist: false,
+        render: {
+            option: function(item, escape) {
+                return '<div>' + escape(item.transcript) + '</div>';
+            }
+        },
+        load: function (query, callback) {
+            if (!query.length) { return callback(); }
+                var params = { search_term: query };
+                Agave.api.adama.search({
+                    'namespace': 'jcvi',
+                    'service': 'search_available_transcripts_v0.1',
+                    'queryParams': params
+                }, function (search) {
+                       callback(search.obj);
+                   });
+            }
+    });
+
     $('#expression_gene_form_reset').on('click', function() {
         $('.error').empty();
         $('.gene_results').empty();
-        $('#expression_gene').val('');
+        $('#expression_gene', appContext)[0].selectize.clearOptions();
+        $('#expression_gene', appContext)[0].selectize.clear(true);
         $('#expression_tissue').val('none');
     });
 

diff --git a/bower.json b/bower.json
@@ -4,6 +4,7 @@
   "dependencies": {
     "datatables": "~1.10.3",
     "underscore": "~1.7.0",
-    "datatables-bootstrap3": "*"
+    "datatables-bootstrap3": "*",
+    "selectize.js": "Arabidopsis-Information-Portal/selectize.js"
   }
 }
diff --git a/index.html b/index.html
@@ -17,6 +17,8 @@
   <!-- bower:css -->
   <link rel="stylesheet" href="bower_components/datatables/media/css/jquery.dataTables.css" />
   <link rel="stylesheet" href="bower_components/datatables-bootstrap3/BS3/assets/css/datatables.css" />
+  <link rel="stylesheet" href="bower_components/selectize.js/dist/css/selectize.css" />
+  <link rel="stylesheet" href="bower_components/selectize.js/dist/css/selectize.bootstrap3.css" />
   <!-- endbower-->
 
   <style type="text/css">
@@ -79,6 +81,9 @@ <h1>AIP Science Apps <small>Test Runner</small></h1>
   <script src="bower_components/datatables/media/js/jquery.dataTables.js"></script>
   <script src="bower_components/underscore/underscore.js"></script>
   <script src="bower_components/datatables-bootstrap3/BS3/assets/js/datatables.js"></script>
+  <script src="bower_components/sifter/sifter.js"></script>
+  <script src="bower_components/microplugin/src/microplugin.js"></script>
+  <script src="bower_components/selectize.js/dist/js/selectize.js"></script>
   <!-- endbower -->
 
   <!-- application code -->