autocomplete functionality for search panel

frontend-js/package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "assert": "1.4.1",
     "bluebird": "^3.4.6",
+    "bootstrap": "^3.3.7",
     "browserify": "^13.1.1",
     "chai": "^3.5.0",
     "exorcist": "^0.4.0",
@@ -28,7 +29,7 @@
   "dependencies": {
     "log4js": "0.6.38",
     "pileup": "^0.6.8",
-    "js-cookie" : "^2.1.3",
+    "js-cookie": "^2.1.3",
     "request": "^2.79.0"
   }
 }

frontend-js/src/main/js/ServerConnector.js

@@ -594,6 +594,14 @@ ServerConnector.getProjectUrl = function(projectId, token) {
   });
 };
 
+ServerConnector.getSuggestedQueryListUrl = function(params) {
+  return this.getApiUrl({type:"project",
+    method: "getSuggestedQueryList",
+    params: params,
+  });
+};
+
+
 ServerConnector.addCommentUrl = function() {
   return this.getApiUrl({type:"comment",
     method: "addComment",
@@ -1042,4 +1050,20 @@ ServerConnector.addComment = function(params) {
   });
 };
 
+ServerConnector.getSuggestedQueryList = function(projectId) {
+  var self = this;
+  return new Promise(function(resolve, reject) {
+    return self.getProjectId(projectId).then(function(result) {
+      projectId = result;
+      return self.getToken();
+    }).then(function(token) {
+      return self.sendPostRequest(self.getSuggestedQueryListUrl(),{projectId:projectId,token:token});
+    }).then(function(content) {
+        resolve(JSON.parse(content));
+    }).catch(function(exception){
+      reject(exception);
+    });
+  });
+};
+
 module.exports = ServerConnector;

frontend-js/src/main/js/gui/SearchPanel.js

@@ -29,6 +29,20 @@ function SearchPanel(params) {
     }
   };
   
+  
+  $(self.getSearchInput()).typeahead({
+    minLength: 1,
+  },{
+    source: function(query, callback){
+      callback(self.getMap().getSearchAutocomplete(query));
+    }
+  });
+
+  $(self.getSearchInput()).on('typeahead:select', function(evt, item) {
+    searchByQuery();  
+  });
+
+
   if (searchDb === undefined) {
     throw new Error("Cannot find search db overlay");
   }
@@ -205,6 +219,9 @@ SearchPanel.prototype.addResultTab = function(query, elements) {
   var navLink = document.createElement("a");
   navLink.href = "#" + tabId;
   if (name!==undefined) {
+    if (name.length>12) {
+      name = name.substring(0,10)+"...";
+    }
     navLink.innerHTML = name;
   }
   navLink.onclick = function(){

frontend-js/src/main/js/map/CustomMap.js

@@ -1821,4 +1821,43 @@ CustomMap.prototype.fetchIdentifiedElements = function(elements, complete) {
   
 };
 
+CustomMap.prototype.refreshSearchAutocomplete = function(){
+  var self = this;
+  self._searchAutocomplete=[];
+  return new Promise(function(resolve, reject){
+    return ServerConnector.getSuggestedQueryList().then(function(queries){
+      for (var i = 0; i < queries.length; i++) {
+        var mainString = queries[i];
+        for (var j = 0; j < mainString.length; j++) {
+          var substring = mainString.substring(0, j + 1);
+          if (self._searchAutocomplete[substring] !== undefined) {
+            continue;
+          }
+
+          var list = [];
+          for (var k = 0; k < 5; k++) {
+            if (k + i >= queries.length) {
+              break;
+            } else if (queries[k + i].toLowerCase().startsWith(substring.toLowerCase())) {
+              list.push(queries[k + i]);
+            }
+          }
+
+          self._searchAutocomplete[substring]=list;
+        }
+      }
+      resolve(self._searchAutocomplete);
+    }).catch(reject);
+  });
+};
+
+CustomMap.prototype.getSearchAutocomplete = function(query){
+  if (this._searchAutocomplete===undefined) {
+    this.refreshSearchAutocomplete();
+    return [];
+  }
+  
+  return this._searchAutocomplete[query];
+};
+
 module.exports = CustomMap;

frontend-js/src/test/js/map/CustomMap-test.js

@@ -201,6 +201,24 @@ describe('CustomMap', function() {
     });
   });
 
+  it("getSearchAutocomplete", function() {
+    var map = helper.createCustomMap();
+
+    var t = map.getSearchAutocomplete("s");
+    assert.ok(t);
+    assert.equal(t.length, 0);
+  });
+
+  it("getSearchAutocomplete 2", function() {
+    var map = helper.createCustomMap();
+
+    return map.refreshSearchAutocomplete("s").then(function() {
+      var t = map.getSearchAutocomplete("s");
+      assert.ok(t);
+      assert.ok(t.length > 0);
+    });
+  });
+
   it("openInfoWindowForMarker", function() {
 
     var onSendOverlayDetailDataRequest = 0;
@@ -421,20 +439,20 @@ describe('CustomMap', function() {
     assert.equal(map.getId(), map.getActiveSubmapId());
 
   });
-  
+
   it("left click on map", function() {
     var map = helper.createCustomMap();
     map.getModel().setId(15781);
-    
+
     var searchOverlay = helper.createSearchDbOverlay(map);
-    
+
     var mev = {
       stop : null,
       latLng : new google.maps.LatLng(40.0, -90.0)
     };
 
     assert.notOk(map.getActiveSubmapId());
-    return google.maps.event.trigger(map.getGoogleMap(), 'click', mev).then(function(){
+    return google.maps.event.trigger(map.getGoogleMap(), 'click', mev).then(function() {
       assert.equal(map.getId(), map.getActiveSubmapId());
       assert.ok(searchOverlay.aliasMarkers[329173]);
     });
@@ -443,16 +461,16 @@ describe('CustomMap', function() {
   it("left click on reaction", function() {
     var map = helper.createCustomMap();
     map.getModel().setId(15781);
-    
+
     var searchOverlay = helper.createSearchDbOverlay(map);
-    
+
     var mev = {
       stop : null,
       latLng : new google.maps.LatLng(42.0, -90.0)
     };
 
     assert.notOk(map.getActiveSubmapId());
-    return google.maps.event.trigger(map.getGoogleMap(), 'click', mev).then(function(){
+    return google.maps.event.trigger(map.getGoogleMap(), 'click', mev).then(function() {
       assert.equal(map.getId(), map.getActiveSubmapId());
       assert.ok(searchOverlay.reactionMarkers[153515]);
       assert.ok(searchOverlay.reactionMarkers[153515].isShown());
@@ -550,7 +568,7 @@ describe('CustomMap', function() {
     var map = helper.createCustomMap();
     map.getModel().setId(15781);
     var commentsOverlay = helper.createCommentDbOverlay(map);
-    
+
     ServerConnector.getSessionData().setShowComments(true);
     return map.refreshComments().then(function() {
       assert.ok(commentsOverlay.pointMarkers['(241.01,372.35)']);

frontend-js/src/test/js/mocha-config.js

@@ -11,6 +11,10 @@ global.window = document.defaultView;
 
 global.$ = require('jQuery');
 global.jQuery = $;
+global.window.$ = $;
+
+require("bootstrap");
+
 
 global.google = require('./google-map-mock');
 
@@ -32,13 +36,25 @@ function removeCookies(){
   }
 }
 
-beforeEach(function() {
+function mockBootstrap() {
+  $.fn.typeahead = function () {
+    logger.debug("Mock typeahead function call");
+  }
+}
+
+before(function() {
   Promise.longStackTraces();
+  
+  mockBootstrap();
+});
+
+beforeEach(function() {
 
   logger.flushBuffer();
   
   removeCookies();
   
+  
   ServerConnector.init();
   ServerConnector.setToken("MOCK_TOKEN_ID");
   
@@ -54,7 +70,7 @@ beforeEach(function() {
   
 });
 
-after(function() {
+afterEach(function() {
   document.body.removeChild(global.testDiv);
   document.body.removeChild(global.dialogDiv);
   delete global.testDiv;

frontend-js/testFiles/apiCalls/project/getSuggestedQueryList/projectId=sample&token=MOCK_TOKEN_ID&

+["acetoacetate","adp","atp","bdh1","carney complex multiple neoplasia and lentiginosis","cnc","d-beta hydroxybutyrate","gdp","gfsdhj","gtp","h+","nad+","nadh","ncx1","s1","s10","s11","s12","s13","s14","s2","s22","s23","s3","s4","s5","s6","s7","s8","s9"]
\ No newline at end of file

web/src/main/webapp/WEB-INF/components/map/searchPanel.xhtml

@@ -18,7 +18,7 @@
 												</tr>
 												<tr>
 																<td>
-																		<input name="searchInput" class="input-field"/>
+																		<input name="searchInput" class="input-field typeahead" autocomplete="off"/>
 																</td>
 																<td>
 																		<a name="searchButton" href="#">

web/src/main/webapp/index.xhtml

@@ -18,7 +18,9 @@
 	<!-- Google Maps API version 3.20	-->
 	<script src="https://maps.google.com/maps/api/js?libraries=drawing&amp;v=3.22" type="text/javascript"/>
 
-	<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js" type="text/javascript"/>
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"/>
+	<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js" type="text/javascript"/>
+
 
 	
 	<link rel="shortcut icon" href="./resources/images/favicon.png" type="image/png" />

web/src/main/webapp/resources/css/global.css

@@ -27,4 +27,53 @@
 	border-spacing: 2px;
 	-webkit-border-horizontal-spacing: 2px;
 	-webkit-border-vertical-spacing: 2px;
-}
\ No newline at end of file
+}
+
+/* twitter typeahead */
+.tt-query /* UPDATE: newer versions use tt-input instead of tt-query */
+ {
+    width: 396px;
+    height: 30px;
+    padding: 8px 12px;
+    font-size: 24px;
+    line-height: 30px;
+    border: 2px solid #ccc;
+    border-radius: 8px;
+    outline: none;
+}
+
+.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+    color: #999;
+}
+
+.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
+    width: 222px;
+    margin-top: 12px;
+    padding: 8px 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.tt-suggestion {
+    padding: 3px 20px;
+    line-height: 24px;
+}
+
+.tt-suggestion:hover {
+  cursor: pointer;
+  color: #fff;
+  background-color: #0097cf;
+}
+
+.tt-suggestion.tt-cursor {
+  color: #fff;
+  background-color: #0097cf;
+
+}