Commit 23094f85 authored by Piotr Gawron's avatar Piotr Gawron
Browse files

autocomplete functionality for search panel

parent 66f09be9
......@@ -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"
}
}
......@@ -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;
......@@ -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(){
......
......@@ -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;
......@@ -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)']);
......
......@@ -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;
......
["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
......@@ -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="#">
......
......@@ -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" />
......
......@@ -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;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment