first working synch between left panel and map for search

there is still a lot to do

frontend-js/src/main/js/GuiConnector.js

@@ -49,6 +49,12 @@ GuiConnector.getCustomMap = function() {
 };
 
 GuiConnector.init = function() {
+  // bootstrap tab initialization
+  $("ul.nav-tabs a").click(function(e) {
+    e.preventDefault();
+    $(this).tab('show');
+  });
+
   // find GuiConnector.getParams
   document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function() {
     function decode(s) {
@@ -67,11 +73,6 @@ GuiConnector.init = function() {
   GuiConnector.leftPanelTabNavi = new TabNavi("tabView", {
     top : "17px"
   });
-  GuiConnector.searchTabNavi = new TabNavi("tabView:mainForm:dTable", {
-    hideRemaining : false,
-    tabSize : 1,
-    top : "5px"
-  });
   GuiConnector.drugTabNavi = new TabNavi("tabView:drugForm:drugResults", {
     hideRemaining : false,
     tabSize : 1,

frontend-js/src/main/js/ObjectWithListeners.js

@@ -143,15 +143,17 @@ ObjectWithListeners.prototype.callListeners = function(type) {
     throw new Error("Unknown listener type: " + type);
   }
   var listenerList = this._validListeners[type];
+  var promises = [];
   if (listenerList.length > 0) {
     for ( var i in listenerList) {
       var e = {
         type : type,
         object : this,
       };
-      listenerList[i](e);
+      promises.push(listenerList[i](e));
     }
   }
+  return Promise.all(promises);
 };
 
 /**

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

@@ -906,7 +906,7 @@ ServerConnector.getReactions = function(reactionIds, projectId, columns) {
 ServerConnector.getAliases = function(aliasIds, projectId, columns) {
   var self = this;
   return new Promise(function(resolve, reject) {
-    self.getProjectId(projectId).then(function(result) {
+    return self.getProjectId(projectId).then(function(result) {
       projectId = result;
       return self.getToken();
     }).then(function(token) {
@@ -918,9 +918,7 @@ ServerConnector.getAliases = function(aliasIds, projectId, columns) {
         result.push(new Alias(array[i]));
       }
       resolve(result);
-    }).catch(function(exception){
-      reject(exception);
-    });
+    }).catch(reject);
   });
 };
 

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

+"use strict";
+
+var Promise = require("bluebird");
+
+var Alias = require('../map/data/Alias');
+var Reaction = require('../map/data/Reaction');
+var logger = require('../logger');
+var Functions = require('../Functions');
+
+function SearchPanel(params) {
+  var self = this;
+
+  this.setElement(params.element);
+  this.setMap(params.customMap);
+
+  var searchDb = self.getMap().getOverlayByName('search');
+  if (searchDb === undefined) {
+    throw new Error("Cannot find search db overlay");
+  }
+  searchDb.addListener("onSearch", function() {
+    return self.refreshSearchResults();
+  });
+
+  this._tabIdCount = 0;
+}
+
+SearchPanel.prototype.setMap = function(map) {
+  this._map = map;
+};
+
+SearchPanel.prototype.getMap = function() {
+  return this._map;
+};
+
+SearchPanel.prototype.setElement = function(element) {
+  if (element === undefined) {
+    throw new Error("DOM Element must be defined");
+  }
+  this._element = element;
+
+  if (this.getNavElement() === undefined) {
+    throw new Error("No nav-tabs div found in the search panel element");
+  }
+  if (this.getContentElement() === undefined) {
+    throw new Error("No tab-content div found in the search panel element");
+  }
+};
+
+SearchPanel.prototype.getSearchQueryElement = function() {
+  var children = this.getElement().children;
+  for (var i = 0; i < children.length; i++) {
+    var child = children[i];
+    if (child.getAttribute("name") === "searchQuery") {
+      return child;
+    }
+  }
+};
+
+SearchPanel.prototype.getSearchResultsElement = function() {
+  var children = this.getElement().children;
+  for (var i = 0; i < children.length; i++) {
+    var child = children[i];
+    if (child.getAttribute("name") === "searchResults") {
+      return child;
+    }
+  }
+};
+
+SearchPanel.prototype.getNavElement = function() {
+  var searchResultsElement = this.getSearchResultsElement();
+
+  if (searchResultsElement) {
+    var children = searchResultsElement.children;
+    for (var i = 0; i < children.length; i++) {
+      var child = children[i];
+      if (child.className.indexOf("nav-tabs") !== -1) {
+        return child;
+      }
+    }
+  }
+};
+
+SearchPanel.prototype.getContentElement = function() {
+  var searchResultsElement = this.getSearchResultsElement();
+
+  if (searchResultsElement) {
+    var children = searchResultsElement.children;
+    for (var i = 0; i < children.length; i++) {
+      var child = children[i];
+      if (child.className.indexOf("tab-content") !== -1) {
+        return child;
+      }
+    }
+  }
+};
+
+SearchPanel.prototype.getElement = function() {
+  return this._element;
+};
+
+SearchPanel.prototype.clearResults = function() {
+  var navElement = this.getNavElement();
+  while (navElement.firstChild) {
+    navElement.removeChild(navElement.firstChild);
+  }
+
+  var contentElement = this.getContentElement();
+  while (contentElement.firstChild) {
+    contentElement.removeChild(contentElement.firstChild);
+  }
+};
+
+SearchPanel.prototype.refreshSearchResults = function() {
+  var self = this;
+  self.clearResults();
+  var searchDb = self.getMap().getOverlayByName('search');
+  var queries = searchDb.getQueries();
+
+  var promises = [];
+  for (var i = 0; i < queries.length; i++) {
+    promises.push(searchDb.getElementsByQuery(queries[i]));
+  }
+  return Promise.all(promises).then(function(results) {
+    for (var i = 0; i < queries.length; i++) {
+      self.addResultTab(queries[i], results[i]);
+    }
+  });
+};
+
+SearchPanel.prototype.addResultTab = function(query, elements) {
+  var tabId = "searchTab_" + this._tabIdCount;
+  this._tabIdCount++;
+
+  var navElement = this.getNavElement();
+  var contentElement = this.getContentElement();
+  var navClass = '';
+  var contentClass = 'tab-pane';
+  if (navElement.children.length === 0) {
+    navClass = "active";
+    contentClass = "tab-pane active";
+  }
+
+  var navLi = document.createElement("li");
+  navLi.className = navClass;
+  var navLink = document.createElement("a");
+  navLink.href = "#" + tabId;
+  navLi.appendChild(navLink);
+  if (query.name !== undefined) {
+    navLink.innerHTML = query.name;
+  }
+  navElement.appendChild(navLi);
+
+  var contentDiv = document.createElement("div");
+  contentDiv.className = contentClass;
+  contentDiv.id = tabId;
+
+  contentElement.appendChild(contentDiv);
+
+  var tableDiv = document.createElement("table");
+  tableDiv.className = "result-table";
+  contentDiv.appendChild(tableDiv);
+
+  for (var i = 0; i < elements.length; i++) {
+    var element = elements[i];
+    if (element instanceof Alias) {
+      tableDiv.appendChild(this.createAliasElement(element));
+    } else if (element instanceof Reaction) {
+      tableDiv.appendChild(this.createReactionElement(element));
+    } else {
+      throw new Error("Unknown element type: " + element.constructor.name);
+    }
+  }
+};
+
+SearchPanel.prototype.createReactionElement = function(reaction) {
+  var self = this;
+  var result = document.createElement("tr");
+  var td = document.createElement("td");
+  result.appendChild(td);
+  var div = document.createElement("div");
+  td.appendChild(div);
+
+  div.appendChild(createLabel("Reaction: " + reaction.getReactionId()));
+  var lineBreak = document.createElement("hr");
+  div.appendChild(lineBreak);
+
+  if (reaction.getModelId() != self.getMap().getId()) {
+    div.appendChild(createSubMapLink(reaction));
+  }
+  div.appendChild(createNewLine(3));
+
+  div.appendChild(createParamLine("Symbol: ", reaction.getSymbol()));
+  div.appendChild(createParamLine("Abbreviation: ", reaction.getAbbreviation()));
+  div.appendChild(createParamLine("Formula: ", reaction.getFormula()));
+  div.appendChild(createParamLine("Mechanical Confidence Score: ", reaction.getMechanicalConfidenceScore()));
+  div.appendChild(createParamLine("Lower Bound: ", reaction.getLowerBound()));
+  div.appendChild(createParamLine("Upper Bound: ", reaction.getUpperBound()));
+  div.appendChild(createParamLine("Gene Protein Reaction: ", reaction.getGeneProteinReaction()));
+  div.appendChild(createParamLine("Subsystem: ", reaction.getSubsystem()));
+  div.appendChild(createArrayParamLine("Synonyms: ", reaction.getSynonyms()));
+  div.appendChild(createParamLine("Description: ", reaction.getDescription()));
+  div.appendChild(createReactantsLine(reaction.getReactants()));
+  div.appendChild(createProductsLine(reaction.getProducts()));
+  div.appendChild(createModifiersLine(reaction.getModifiers()));
+  div.appendChild(createCandidates("Candidates: ", reaction.getOther('dataMining')));
+  div.appendChild(createAnnotations("Annotations: ", reaction.getReferences()));
+
+  return result;
+};
+
+function createLabel(value) {
+  var result = document.createElement("span");
+  result.innerHTML = value;
+  result.className = "searchDescriptionLabel";
+  return result;
+};
+
+function createLabelText(value) {
+  var result = document.createElement("span");
+  result.innerHTML = value;
+  return result;
+};
+
+function createSeparator() {
+  var result = document.createElement("hr");
+  return result;
+};
+
+function createNewLine(count) {
+  var result = document.createElement("p");
+  result.style.width = "10px";
+  if (count > 0) {
+    result.style.width = (count * 10) + "px";
+  }
+  return result;
+};
+
+function createParamLine(label, value) {
+  var result = document.createElement("div");
+  if (value !== undefined) {
+    result.appendChild(createLabel(label));
+    result.appendChild(createLabelText(value));
+    result.appendChild(createNewLine());
+  }
+  return result;
+};
+
+function createArrayParamLine(label, value) {
+  var result = document.createElement("div");
+  if (value !== undefined && value.length > 0) {
+    result.appendChild(createLabel(label));
+    result.appendChild(createLabelText(value.join(",")));
+    result.appendChild(createNewLine());
+  }
+  return result;
+};
+
+function createReactantsLine(label, value) {
+  var result = document.createElement("div");
+  if (value !== undefined && value.length > 0) {
+    for (var i = 0; i < value.length; i++) {
+      result.appendChild(createParamLine("Reactant: ", value[i]));
+    }
+  }
+  return result;
+};
+
+function createProductsLine(label, value) {
+  var result = document.createElement("div");
+  if (value !== undefined && value.length > 0) {
+    for (var i = 0; i < value.length; i++) {
+      result.appendChild(createParamLine("Product: ", value[i]));
+    }
+  }
+  return result;
+};
+
+function createModifiersLine(label, value) {
+  var result = document.createElement("div");
+  if (value !== undefined && value.length > 0) {
+    for (var i = 0; i < value.length; i++) {
+      result.appendChild(createParamLine("Modifier: ", value[i]));
+    }
+  }
+  return result;
+};
+
+function createPostTranslationalModifications(label, value) {
+  var result = document.createElement("div");
+  if (value !== undefined) {
+    throw new Error("Not implemented");
+  }
+  return result;
+};
+
+function createCandidates(label, value) {
+  var result = document.createElement("div");
+  if (value !== undefined) {
+    throw new Error("Not implemented");
+  }
+  return result;
+};
+
+function createChebiTree(label, value) {
+  var result = document.createElement("div");
+  if (value !== undefined) {
+    throw new Error("Not implemented");
+  }
+  return result;
+};
+
+function createAnnotations(label, value) {
+  var result = document.createElement("div");
+  if (value !== undefined && value.length > 0) {
+    throw new Error("Not implemented");
+  }
+  return result;
+};
+
+SearchPanel.prototype.createAliasElement = function(alias) {
+  var self = this;
+
+  var result = document.createElement("tr");
+  var td = document.createElement("td");
+  result.appendChild(td);
+  var div = document.createElement("div");
+  td.appendChild(div);
+
+  div.appendChild(createParamLine(alias.getType() + ": ", alias.getName()));
+
+  if (alias.getModelId() != self.getMap().getId()) {
+    div.appendChild(createSubMapLink(alias));
+  }
+  div.appendChild(createNewLine(3));
+
+  div.appendChild(createParamLine("Full name: ", alias.getFullName()));
+  div.appendChild(createParamLine("Symbol: ", alias.getSymbol()));
+  div.appendChild(createParamLine("Abbreviation: ", alias.getAbbreviation()));
+  div.appendChild(createParamLine("Formula: ", alias.getFormula()));
+  div.appendChild(createArrayParamLine("Former symbols: ", alias.getFormerSymbols()));
+  div.appendChild(createPostTranslationalModifications("Posttranslational modifications: ", alias
+      .getOther('posttranslationalModifications')));
+  div.appendChild(createParamLine("Charge: ", alias.getCharge()));
+  div.appendChild(createParamLine("Synonyms: ", alias.getSynonyms()));
+  div.appendChild(createLabelText(alias.getDescription()));
+  div.appendChild(createCandidates("Candidates: ", alias.getOther('dataMining')));
+  div.appendChild(createChebiTree("Chebi ontology: ", alias.getOther('chebiTree')));
+  div.appendChild(createAnnotations("Annotations: ", alias.getReferences()));
+
+  div.appendChild(createSeparator());
+
+  return result;
+};
+
+module.exports = SearchPanel;

frontend-js/src/main/js/map/data/Alias.js

@@ -42,17 +42,18 @@ Alias.prototype.update = function(javaObject) {
   if (javaObject.name === undefined) {
     return;
   }
-  this.description = javaObject.notes;
-  this.type = javaObject.type;
-  this.symbol = javaObject.symbol;
-  this.fullName = javaObject.fullName;
-  this.abbreviation = javaObject.abbreviation;
-  this.formula = javaObject.formula;
-  this.name = javaObject.name;
-  this.synonyms = javaObject.synonyms;
-  this.formerSymbols = javaObject.formerSymbols;
-  this.references = javaObject.references;
-  this.other = javaObject.other;
+  this.setDescription(javaObject.notes);
+  this.setType(javaObject.type);
+  this.setCharge(javaObject.charge);
+  this.setSymbol(javaObject.symbol);
+  this.setFullName(javaObject.fullName);
+  this.setAbbreviation(javaObject.abbreviation);
+  this.setFormula(javaObject.formula);
+  this.setName(javaObject.name);
+  this.setSynonyms(javaObject.synonyms);
+  this.setFormerSymbols(javaObject.formerSymbols);
+  this.setReferences(javaObject.references);
+  this.setOther(javaObject.other);
   this.setIsComplete(true);
 };
 
@@ -69,6 +70,48 @@ Alias.prototype.setId = function(id) {
   this.id = id;
 };
 
+Alias.prototype.getFormula = function() {
+  return this.formula;
+};
+
+Alias.prototype.setFormula = function(formula) {
+  this.formula = formula;
+};
+
+Alias.prototype.getDescription = function() {
+  return this.description;
+};
+
+Alias.prototype.setDescription = function(description) {
+  this.description = description;
+};
+
+Alias.prototype.getCharge = function() {
+  return this.charge;
+};
+
+Alias.prototype.setCharge = function(charge) {
+  this.charge = charge;
+};
+
+Alias.prototype.getFormerSymbols = function() {
+  return this.formerSymbols;
+};
+
+Alias.prototype.setFormerSymbols = function(formerSymbols) {
+  this.formerSymbols = formerSymbols;
+};
+
+Alias.prototype.getOther = function(type) {
+  if (this.other !== undefined) {
+    return this.other[type];
+  }
+};
+
+Alias.prototype.setOther = function(other) {
+  this.other = other;
+};
+
 /**
  * Returns model identifier where {@link Alias} is located.
  * 
@@ -110,10 +153,50 @@ Alias.prototype.getName = function() {
   return this.name;
 };
 
+Alias.prototype.setName = function(name) {
+  this.name = name;
+};
+
+Alias.prototype.getSynonyms = function() {
+  return this.synonyms;
+};
+
+Alias.prototype.setSynonyms = function(synonyms) {
+  this.synonyms = synonyms;
+};
+
+Alias.prototype.getReferences = function() {
+  return this.references;
+};
+
+Alias.prototype.setReferences = function(references) {
+  this.references = references;
+};
+
 Alias.prototype.getFullName = function() {
   return this.fullName;
 };
 
+Alias.prototype.setFullName = function(fullName) {
+  this.fullName = fullName;
+};
+
+Alias.prototype.getSymbol = function() {
+  return this.symbol;
+};
+
+Alias.prototype.setSymbol = function(symbol) {
+  this.symbol = symbol;
+};
+
+Alias.prototype.getAbbreviation = function() {
+  return this.abbreviation;
+};
+
+Alias.prototype.setAbbreviation = function(abbreviation) {
+  this.abbreviation = abbreviation;
+};
+
 Alias.prototype.setType = function(type) {
   this.type = type;
 };

frontend-js/src/main/js/map/data/MapModel.js

@@ -176,12 +176,12 @@ MapModel.prototype.getReactionById = function(id, complete) {
 
 MapModel.prototype.getCompleteReactionById = function(id) {
   var self = this;
-  return new Promise(function(resolve) {
+  return new Promise(function(resolve, reject) {
     if (self._reactions[id] instanceof Reaction && self._reactions[id].isComplete()) {
       resolve(self._reactions[id]);
     } else {
       var result;
-      ServerConnector.getReactions([id]).then(function(reactions){
+      return ServerConnector.getReactions([id]).then(function(reactions){
         if (self._reactions[id] === undefined) {
           self._reactions[id] = reactions[0];
         } else {
@@ -231,7 +231,7 @@ MapModel.prototype.getCompleteReactionById = function(id) {
           }
         }
         resolve(result);
-      });
+      }).catch(reject);
     }
   });
 };
@@ -601,4 +601,14 @@ MapModel.prototype._getLayouts = function() {
   return result;
 };
 
+MapModel.prototype.getByIdentifiedElement = function(ie, complete) {
+  if (ie.getType()==="ALIAS") {
+    return this.getAliasById(ie.getId(), complete);
+  } else if (ie.getType()==="REACTION") {
+    return this.getReactionById(ie.getId());
+  } else {
+    throw new Error("Unknown type: "+ie.getType(), complete);
+  }