first version of working drug interface

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

@@ -72,11 +72,6 @@ GuiConnector.init = function() {
   GuiConnector.leftPanelTabNavi = new TabNavi("tabView", {
     top : "17px"
   });
-  GuiConnector.drugTabNavi = new TabNavi("tabView:drugForm:drugResults", {
-    hideRemaining : false,
-    tabSize : 1,
-    top : "5px"
-  });
   if (document.getElementById("tabView:chemicalForm:chemicalResults") !== null
       && document.getElementById("tabView:chemicalForm:chemicalResults") !== undefined) {
     GuiConnector.chemicalTabNavi = new TabNavi("tabView:chemicalForm:chemicalResults", {

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

@@ -9,6 +9,7 @@ var request = require('request');
 
 var Alias = require('./map/data/Alias');
 var Comment = require('./map/data/Comment');
+var Drug = require('./map/data/Drug');
 var ConfigurationType = require('./ConfigurationType');
 var IdentifiedElement= require('./map/data/IdentifiedElement');
 var LayoutAlias = require('./map/data/LayoutAlias');
@@ -52,20 +53,12 @@ ServerConnector.setDataMiningQuery = function(value) {
   document.getElementById(ServerConnector.formIdentifier + ':missingConnectionParam').value = "" + value;
 };
 
-/**
- * Sets drug search query that will be handled by server.
- */
-ServerConnector.setDrugQuery = function(value) {
-  document.getElementById(ServerConnector.formIdentifier + ':drugParam').value = "" + value;
-};
-
 /**
  * Sets selected polygon. This might be in futer used oto extract/analyze data
  * in the polygon by the server side.
  */
 ServerConnector.setSelectedPolygon = function(value) {
   document.getElementById(ServerConnector.formIdentifier + ':selectedPolygon').value = "" + value;
-  document.getElementById(ServerConnector.formIdentifier + ':selectedDrugPolygon').value = "" + value;
 };
 
 /**
@@ -153,11 +146,6 @@ ServerConnector.updateOverlayCollection = function(overlayName, data, fitBounds)
  */
 ServerConnector.DATA_MINING_OVERLAY_NAME = 'missingConnection';
 
-/**
- * Name of the overlay for 'drug' overlay.
- */
-ServerConnector.DRUG_OVERLAY_NAME = 'drug';
-
 /**
  * Name of the overlay for 'chemical' overlay.
  */
@@ -192,47 +180,6 @@ ServerConnector.clearDataMiningOverlay = function() {
   _clearMissingConnectionOverlayCollection();
 };
 
-/**
- * Register 'drug' overlay on the server.
- */
-ServerConnector.registerDrugOverlay = function() {
-  _registerDrugOverlayCollection([ {
-    name : "overlayName",
-    value : ServerConnector.DRUG_OVERLAY_NAME,
-  } ]);
-};
-
-ServerConnector.requestDrugDetailDataFunction = function(identfiedElement, id) {
-  logger.debug("Requesting drug details: ", identfiedElement, id);
-  _requestDrugDetailDataFunction([ {
-    name : "searchResultIdentifier",
-    value : id,
-  }, {
-    name : "objectIdentifier",
-    value : identfiedElement.getId(),
-  }, {
-    name : "modelIdentifier",
-    value : identfiedElement.getModelId(),
-  }, {
-    name : "type",
-    value : identfiedElement.getType(),
-  } ]);
-};
-
-/**
- * Sends request to the server to refresh data in 'drug' overlay.
- */
-ServerConnector.refreshDrugOverlay = function() {
-  _refreshDrugOverlayCollection();
-};
-
-/**
- * Clear data related to 'drug' overlay.
- */
-ServerConnector.clearDrugOverlay = function() {
-  _clearDrugOverlayCollection();
-};
-
 ServerConnector.registerChemicalOverlay = function() {
   _registerChemicalOverlayCollection([ {
     name : "overlayName",
@@ -326,16 +273,6 @@ ServerConnector._overlayMethods[ServerConnector.DATA_MINING_OVERLAY_NAME] = {
     clearFunction : ServerConnector.clearDataMiningOverlay,
 };
 
-/**
- * Define pack of methods for 'drug' overlay.
- */
-ServerConnector._overlayMethods[ServerConnector.DRUG_OVERLAY_NAME] = {
-    initFunction : ServerConnector.registerDrugOverlay,
-    refreshFunction : ServerConnector.refreshDrugOverlay,
-    clearFunction : ServerConnector.clearDrugOverlay,
-    requestDetailDataFunction : ServerConnector.requestDrugDetailDataFunction,
-};
-
 /**
  * Define pack of methods for 'chemical' overlay.
  */
@@ -764,6 +701,41 @@ ServerConnector.getElementsByQueryUrl = function(params) {
   });
 };
 
+ServerConnector.getDrugsByQueryUrl = function(params) {
+  var query = params.query;
+  var projectId = params.projectId;
+  var token = params.token;
+
+  return this.getApiUrl({type:"drug",
+    method:"getDrugsByQuery",
+    params: {
+      projectId: projectId, 
+      query: query, 
+      token: token},
+  });
+};
+
+ServerConnector.getDrugsByTargetUrl = function(params) {
+  var query = params.query;
+  var projectId = params.projectId;
+  var token = params.token;
+  var columns = this.idsToString(params.columns);
+  var targetId = params.target.getId();
+  var targetType = params.target.getType();
+  
+  return this.getApiUrl({type:"drug",
+    method:"getDrugsByTarget",
+    params: {
+      projectId: projectId, 
+      query: query, 
+      columns: columns, 
+      token: token,
+      targetId: targetId,
+      targetType: targetType,
+      },
+  });
+};
+
 ServerConnector.getConfigurationParam = function(paramId) {
   var self = this;
   return new Promise(function(resolve, reject) {
@@ -1029,6 +1001,51 @@ ServerConnector.getElementsByQuery = function(params) {
   });
 };
 
+ServerConnector.getDrugsByQuery = function(params) {
+  var self = this;
+  return new Promise(function(resolve, reject) {
+    return self.getProjectId(params.projectId).then(function(result) {
+      params.projectId = result;
+      return self.getToken();
+    }).then(function(token) {
+      params.token = token;
+      return self.readFile(self.getDrugsByQueryUrl(params));
+    }).then(function(content) {
+      var array=JSON.parse(content);
+      var result = [];
+      for (var i = 0; i < array.length; i++) {
+        result.push(new Drug(array[i]));
+      }
+      resolve(result);
+    }).catch(function(exception){
+      reject(exception);
+    });
+  });
+};
+
+ServerConnector.getDrugNamesByTarget = function(params) {
+  var self = this;
+  params.columns = ["name"];
+  return new Promise(function(resolve, reject) {
+    return self.getProjectId(params.projectId).then(function(result) {
+      params.projectId = result;
+      return self.getToken();
+    }).then(function(token) {
+      params.token = token;
+      return self.readFile(self.getDrugsByTargetUrl(params));
+    }).then(function(content) {
+      var result = [];
+      var object = JSON.parse(content);
+      for (var i=0;i<object.length;i++){
+        result.push(object[i].name);
+      }
+      resolve(result);
+    }).catch(function(exception){
+      reject(exception);
+    });
+  });
+};
+
 ServerConnector.addComment = function(params) {
   var self = this;
   return new Promise(function(resolve, reject) {

frontend-js/src/main/js/SessionData.js

@@ -38,6 +38,20 @@ SessionData.prototype.getSearchQuery = function() {
   return result;
 };
 
+SessionData.prototype.setDrugQuery = function(value) {
+  var key = this.getKey(SessionObjectType.DRUG_QUERY);
+  Cookies.set(key, JSON.stringify(value));
+};
+
+SessionData.prototype.getDrugQuery = function() {
+  var key = this.getKey(SessionObjectType.DRUG_QUERY);
+  var result = Cookies.get(key);
+  if (result !== undefined) {
+    result = JSON.parse(result);
+  }
+  return result;
+};
+
 SessionData.prototype.setShowComments = function(value) {
   var key = this.getKey(SessionObjectType.SHOW_COMMENT);
   Cookies.set(key, value + "");

frontend-js/src/main/js/SessionObjectType.js

 "use strict";
 
 var SessionObjectType = {
+  DRUG_QUERY : "DRUG_QUERY",
   SHOW_COMMENT : "SHOW_COMMENT",
   SELECTED_BACKGROUND_OVERLAY : "SELECTED_BACKGROUND_OVERLAY",
   SEARCH_QUERY : "SEARCH_QUERY",
   VISIBLE_OVERLAYS : "VISIBLE_OVERLAYS",
-  
 
   CENTER : "CENTER",
   ZOOM_LEVEL : "ZOOM_LEVEL",

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

@@ -109,35 +109,85 @@ AbstractPanel.prototype.createNewLine=function(count) {
   return result;
 }
 
-AbstractPanel.prototype.createAnnotations=function(label, value) {
+AbstractPanel.prototype.createAnnotationLink=function(element, showType) {
+  var name, type, link, hint;
+  if (element.title!==undefined) {
+    hint = element.title+" "+element.authors.join(", ")+", "+element.year+", "+ element.journal;
+    link = element.link;
+    type = "PUBMED";
+    name = element.id;
+  } else {
+    name = element.name;
+    link = element.link;
+    type = element.type;
+  }
+  var link = document.createElement("a");
+  link.href = element.link;
+  if (showType) {
+    link.innerHTML = type + " (" + name + ")";
+  } else {
+    link.innerHTML = name ;
+  }
+  link.style.textDecoration = "underline";
+  if (hint!==undefined) {
+    var div = document.createElement("div");
+    div.title = hint;
+    div.appendChild(link);
+    return div;
+  } else {
+    return link;
+  }
+};
+
+AbstractPanel.prototype.createAnnotations=function(label, value, options) {
+  var showType = true;
+  var inline = false;
+  if (options!== undefined) {
+    if (options.showType!==undefined) {
+      showType = options.showType;
+    }
+    if (options.inline!==undefined) {
+      inline = options.inline;
+    }
+  }
   var result = document.createElement("div");
   if (value !== undefined && value.length > 0) {
     var self = this;
-    result.appendChild(self.createLabel("Annotations: "));
-    result.appendChild(self.createNewLine());
+    result.appendChild(self.createLabel(label));
+    if (!inline) {
+      result.appendChild(self.createNewLine());
+    }
     for (var i = 0; i < value.length; i++) {
       var element = value[i];
-      var row = document.createElement("div");
-      row.style.height = "24px";
-      if (i % 2 === 0) {
-        row.className = "annotationRowOdd";
+      var link = this.createAnnotationLink(element, showType);
+      if (inline) {
+        if (i>0){
+          var coma = document.createElement("span");
+          coma.innerHTML = ", ";
+          result.appendChild(coma);
+        }
+        result.appendChild(link);
       } else {
-        row.className = "annotationRowEven";
+
+        var row = document.createElement("div");
+        row.style.height = "26px";
+        if (i % 2 === 0) {
+          row.className = "annotationRowOdd";
+        } else {
+          row.className = "annotationRowEven";
+        }
+        var header = document.createElement("div");
+        header.style.width = "24px";
+        header.style.float = "left";
+        header.innerHTML = "[" + (i + 1) + "]";
+        row.appendChild(header);
+
+        var body = document.createElement("div");
+        body.style.float = "left";
+        body.appendChild(link);
+        row.appendChild(body);
+        result.appendChild(row);
       }
-      var header = document.createElement("div");
-      header.style.width = "24px";
-      header.style.float = "left";
-      header.innerHTML = "[" + (i + 1) + "]";
-      row.appendChild(header);
-
-      var body = document.createElement("div");
-      body.style.float = "left";
-      var link = document.createElement("a");
-      link.href = element.link;
-      link.innerHTML = element.type + " (" + element.name + ")";
-      body.appendChild(link);
-      row.appendChild(body);
-      result.appendChild(row);
     }
   }
   return result;
@@ -152,7 +202,7 @@ AbstractPanel.prototype.getMap = function() {
 };
 
 AbstractPanel.prototype.setElement = function(element) {
-  if (element === undefined) {
+  if (element === undefined || element === null) {
     throw new Error("DOM Element must be defined");
   }
   this._element = element;
@@ -169,9 +219,6 @@ AbstractPanel.prototype.setElement = function(element) {
   if (this.getSearchInput() === undefined) {
     throw new Error("No searchInput found in the search panel element");
   }
-  if (this.getSearchPerfectMatch() === undefined) {
-    throw new Error("No searchPerfectMatch found in the search panel element");
-  }
 };
 
 AbstractPanel.prototype.getSearchQueryElement = function() {
@@ -307,7 +354,7 @@ AbstractPanel.prototype.createParamLine = function(label, value) {
 
 AbstractPanel.prototype.createIcon = function(icon) {
   var result = document.createElement("div");
-  if (icon !== undefined) {
+  if (icon !== undefined && icon !== null) {
     var img = document.createElement("img");
     img.src=GuiConnector.getImgPrefix()+icon;
     img.style.float="left";
@@ -343,4 +390,14 @@ AbstractPanel.prototype.createSubMapLink = function(label, element) {
   return result;
 };
 
+AbstractPanel.prototype.getAutocomplete = function(query) {
+  logger.warn("Get autocomplete not implemented");
+};
+
+AbstractPanel.prototype.searchByQuery = function() {
+  throw new Error("searchByQuery is not implemnted");
+};
+
+
+
 module.exports = AbstractPanel;

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

+"use strict";
+
+/* exported logger */
+var logger = require('../logger');
+
+var Promise = require("bluebird");
+
+var AbstractPanel = require('./AbstractPanel');
+var Alias = require('../map/data/Alias');
+var GuiConnector = require('../GuiConnector');
+var Reaction = require('../map/data/Reaction');
+
+function DrugPanel(params) {
+  params.panelName = "drug";
+  AbstractPanel.call(this, params);
+}
+DrugPanel.prototype = Object.create(AbstractPanel.prototype);
+DrugPanel.prototype.constructor = DrugPanel;
+
+DrugPanel.prototype.createDrugHeader = function(drug) {
+  var self = this;
+  var result = document.createElement("div");
+  result.appendChild(self.createParamLine("Drug: ", drug.getName()));
+  result.appendChild(self.createParamLine("Description: ", drug.getDescription()));
+  result.appendChild(self.createArrayParamLine("Synonyms: ", drug.getSynonyms()));
+  result.appendChild(self.createArrayParamLine("Brand names: ", drug.getBrandNames()));
+  result.appendChild(self.createParamLine("Blood brain barrier: ", drug.getBloodBrainBarrier()));
+  result.appendChild(self.createAnnotations("Sources: ", drug.getReferences()));
+  result.appendChild(self.createNewLine());
+
+  return result;
+};
+
+DrugPanel.prototype.createTargetElement = function(target, icon) {
+  var self = this;
+  var result = document.createElement("tr");
+  var iconColumn = document.createElement("td");
+  iconColumn.style.width = "20px";
+  iconColumn.style.verticalAlign = "middle";
+  iconColumn.style.textAlign = "center";
+  result.appendChild(iconColumn);
+  if (target.getTargetElements().length > 0) {
+    iconColumn.appendChild(self.createIcon(icon));
+    var checkbox = document.createElement('input');
+    checkbox.type = "checkbox";
+    checkbox.checked = target.isVisible();
+    checkbox.onclick = function(){
+      target.setIsVisible(!target.isVisible());
+      self.getOverlayDb().callListeners("onTargetVisibilityChange");
+    };
+
+    iconColumn.appendChild(checkbox);
+  }
+
+  var descColumn = document.createElement("td");
+  result.appendChild(descColumn);
+
+  descColumn.appendChild(self.createParamLine("Name: ", target.getName()))
+  descColumn.appendChild(self.createAnnotations("Elements: ", target.getTargetParticipants(), {
+    showType : false,
+    inline : true
+  }));
+  descColumn.appendChild(self.createAnnotations("References: ", target.getReferences(), {
+    showType : false,
+  }));
+  return result;
+};
+
+DrugPanel.prototype.addResultTab = function(query, elements) {
+  var name = JSON.parse(query).query;
+
+  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;
+  if (name !== undefined) {
+    if (name.length > 12) {
+      name = name.substring(0, 10) + "...";
+    }
+    navLink.innerHTML = name;
+  }
+  navLink.onclick = function() {
+    $(this).tab('show');
+  };
+  navLi.appendChild(navLink);
+  if (query.name !== undefined) {
+    navLink.innerHTML = query.name;
+  }
+  navElement.appendChild(navLi);
+
+  var contentDiv = document.createElement("div");
+  contentDiv.className = "pre-scrollable " + contentClass;
+  contentDiv.style.height = "100%";
+  contentDiv.id = tabId;
+
+  contentElement.appendChild(contentDiv);
+
+  contentDiv.appendChild(this.createDrugHeader(elements.drug));
+
+  var tableDiv = document.createElement("table");
+  tableDiv.className = "table table-bordered";
+  contentDiv.appendChild(tableDiv);
+  var tableBody = document.createElement("tbody")
+  tableDiv.appendChild(tableBody);
+
+  for (var i = 0; i < elements.length; i++) {
+    var element = elements[i].target;
+    var icon = elements[i].icon;
+    tableBody.appendChild(this.createTargetElement(element, icon));
+  }
+};
+
+DrugPanel.prototype.searchByQuery = function() {
+  var self = this;
+  var query = self.getSearchInput().value;
+  return self.getOverlayDb().searchByQuery(query);
+};
+
+module.exports = DrugPanel;

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

@@ -14,6 +14,9 @@ function SearchPanel(params) {
   params.panelName = "search";
   AbstractPanel.call(this, params);
 
+  if (this.getSearchPerfectMatch() === undefined) {
+    throw new Error("No searchPerfectMatch found in the search panel element");
+  }
 }
 
 SearchPanel.prototype = Object.create(AbstractPanel.prototype);
@@ -193,4 +196,9 @@ SearchPanel.prototype.searchByQuery = function() {
   return self.getOverlayDb().searchByQuery(query, perfect);
 };
 
+SearchPanel.prototype.getAutocomplete = function(query) {
+  return this.getMap().getSearchAutocomplete(query);
+};
+
+
 module.exports = SearchPanel;

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

@@ -10,6 +10,7 @@ var AliasMarker = require('./marker/AliasMarker');
 var CommentDialog = require('../gui/CommentDialog');
 var ControlType = require('./ControlType');
 var CustomMapOptions = require('./CustomMapOptions');
+var DrugDbCollection = require('./overlay/DrugDbOverlay');
 var IdentifiedElement = require('./data/IdentifiedElement');
 var OverlayCollection = require('./overlay/OverlayCollection');
 var PointMarker = require('./marker/PointMarker');
@@ -205,7 +206,7 @@ CustomMap.prototype.refreshOverlays = function() {
   for ( var overlayName in this.overlayCollections) {
     if (this.overlayCollections.hasOwnProperty(overlayName)) {
       var collection = this.overlayCollections[overlayName];
-      if (!(collection instanceof SearchDbCollection)) {
+      if (!(collection instanceof SearchDbCollection)&&!(collection instanceof DrugDbCollection)) {
         promises.push(collection.refresh());
       }
     }
@@ -433,11 +434,20 @@ CustomMap.prototype.registerSource = function(overlayCollection) {
   overlayCollection.pointMarkers = [];
   overlayCollection.reactionMarkers = [];
 
-  if (overlayCollection.name==="search") {
+  if (overlayCollection.getName()==="search") {
     overlayCollection.addListener("onSearch", function() {
       return self.updateOverlayCollection(overlayCollection, false);
     });
   }
+  if (overlayCollection.getName() === "drug") {
+    overlayCollection.addListener("onSearch", function() {
+      return self.updateOverlayCollection(overlayCollection, false);
+    });
+    
+    overlayCollection.addListener("onTargetVisibilityChange", function() {
+      return self.updateOverlayCollection(overlayCollection, false);
+    });
+  }