javascript create search panels

frontend-js/src/main/js/Functions.js

@@ -225,4 +225,24 @@ Functions.getElementByName = function(element, name) {
   return undefined;
 };
 
+Functions.createElement = function(params) {
+  var result = document.createElement(params.type);
+  if (params.id !== null && params.id !== undefined) {
+    result.id = params.id;
+  }
+  if (params.name !== null && params.name !== undefined) {
+    result.setAttribute("name", params.name);
+  }
+  if (params.className !== null && params.className !== undefined) {
+    result.className = params.className;
+  }
+  if (params.inputType !== null && params.inputType !== undefined) {
+    result.type = params.inputType;
+  }
+  if (params.content !== null && params.content !== undefined) {
+    result.innerHTML = params.content;
+  }
+  return result;
+};
+
 module.exports = Functions;

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

@@ -5,8 +5,10 @@
 var Promise = require("bluebird");
 
 var Panel = require('./Panel');
+var PanelControlElementType = require('./PanelControlElementType');
 
 var logger = require('../logger');
+var Functions = require('../Functions');
 
 
 function AbstractPanel(params) {
@@ -14,34 +16,36 @@ function AbstractPanel(params) {
 
   var self = this;
 
-  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");
-  }
-  if (this.getSearchButton() === undefined) {
-    throw new Error("No searchButton found in the search panel element");
-  }
-  if (this.getSearchInput() === undefined) {
-    throw new Error("No searchInput found in the search panel element");
-  }
-
+  this._initializeGui();
   this.setOverlayDb (self.getMap().getOverlayByName(params.panelName));
+  this._createEventHandlers()
+
+  this._tabIdCount = 0;
+}
+
+AbstractPanel.prototype = Object.create(Panel.prototype);
+AbstractPanel.prototype.constructor = AbstractPanel;
+
+
+AbstractPanel.prototype._createEventHandlers = function(){
+  var self = this;
+  var searchButton = self.getControlElement(PanelControlElementType.SEARCH_BUTTON);
+  var searchInput =self.getControlElement(PanelControlElementType.SEARCH_INPUT); 
 
   var searchByQuery = function(){
     return self.searchByQuery();
   };
   
-  self.getSearchButton().onclick = searchByQuery;
-  self.getSearchInput().onkeypress = function(event){
+
+  searchButton.onclick = searchByQuery;
+  searchInput.onkeypress = function(event){
     if (event.keyCode === 13) {
       searchByQuery();  
     }
   };
-  
-  
-  $(self.getSearchInput()).typeahead({
+
+
+  $(searchInput).typeahead({
     minLength: 1,
   },{
     source: function(query, callback){
@@ -49,7 +53,7 @@ function AbstractPanel(params) {
     }
   });
 
-  $(self.getSearchInput()).on('typeahead:select', function() {
+  $(searchInput).on('typeahead:select', function() {
     searchByQuery();  
   });
 
@@ -57,87 +61,58 @@ function AbstractPanel(params) {
   self.getOverlayDb().addListener("onSearch", function() {
     return self.refreshSearchResults();
   });
+};
 
-  this._tabIdCount = 0;
-}
+AbstractPanel.prototype._initializeGui = function(){
+  var searchQueryDiv = Functions.createElement({type:"div", name:"searchQuery", className:"searchPanel" });
+  this.getElement().appendChild(searchQueryDiv);
+  this.setControlElement(PanelControlElementType.SEARCH_DIV, searchQueryDiv);
 
-AbstractPanel.prototype = Object.create(Panel.prototype);
-AbstractPanel.prototype.constructor = AbstractPanel;
+  var searchLabel = Functions.createElement({type:"div",name:"searchLabel"} );
+  searchQueryDiv.appendChild(searchLabel);
+  this.setControlElement(PanelControlElementType.SEARCH_LABEL, searchLabel);
 
-AbstractPanel.prototype.setOverlayDb = function(overlayDb){
-  if (overlayDb === undefined) {
-    throw new Error("Undefined overlayDb");
-  }
-  this._overlayDb = overlayDb;
-};
+  var searchInput = Functions.createElement({type:"input", name:"searchInput",className: "input-field typeahead" });
+  searchQueryDiv.appendChild(searchInput);
+  this.setControlElement(PanelControlElementType.SEARCH_INPUT, searchInput);
 
-AbstractPanel.prototype.getOverlayDb = function(){
-  return this._overlayDb;
-};
+  var searchButton = Functions.createElement({type:"a", className:"searchButton",content:'<img src="resources/images/icons/search.png"/>'});
+  searchQueryDiv.appendChild(searchButton);
+  this.setControlElement(PanelControlElementType.SEARCH_BUTTON, searchButton);
 
-AbstractPanel.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;
-    }
-  }
-};
+  var searchResultsDiv = Functions.createElement({type:"div", name:"searchResults", className:"tabbable boxed parentTabs" });
+  this.getElement().appendChild(searchResultsDiv);
+  this.setControlElement(PanelControlElementType.SEARCH_RESULTS_DIV, searchResultsDiv);
 
-AbstractPanel.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;
-    }
-  }
-};
+  var searchResultsNavTabDiv = Functions.createElement({type:"ul", className:"nav nav-tabs", content:'<li class="active"><a href="#set1"/></li>'} );
+  searchResultsDiv.appendChild(searchResultsNavTabDiv);
+  this.setControlElement(PanelControlElementType.SEARCH_RESULTS_NAV_TAB, searchResultsNavTabDiv);
 
-AbstractPanel.prototype.getNavElement = function() {
-  var searchResultsElement = this.getSearchResultsElement();
+  var searchResultsContentTabDiv = Functions.createElement({type:"div", className:"tab-content", content: '<div class="tab-pane fade active in" name="set1" id="set1"/>'});
+  searchResultsDiv.appendChild(searchResultsContentTabDiv);
+  this.setControlElement(PanelControlElementType.SEARCH_RESULTS_CONTENT_TAB, searchResultsContentTabDiv);
 
-  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;
-      }
-    }
-  }
 };
 
-AbstractPanel.prototype.getSearchButton = function() {
-  return this.getElementByName(this.getSearchQueryElement(),"searchButton");
-};
 
-AbstractPanel.prototype.getSearchInput = function() {
-  return this.getElementByName(this.getSearchQueryElement(),"searchInput");
+AbstractPanel.prototype.setOverlayDb = function(overlayDb){
+  if (overlayDb === undefined) {
+    throw new Error("Undefined overlayDb");
+  }
+  this._overlayDb = overlayDb;
 };
 
-AbstractPanel.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;
-      }
-    }
-  }
+AbstractPanel.prototype.getOverlayDb = function(){
+  return this._overlayDb;
 };
 
 AbstractPanel.prototype.clearResults = function() {
-  var navElement = this.getNavElement();
+  var navElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_NAV_TAB);
   while (navElement.firstChild) {
     navElement.removeChild(navElement.firstChild);
   }
 
-  var contentElement = this.getContentElement();
+  var contentElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_CONTENT_TAB);
   while (contentElement.firstChild) {
     contentElement.removeChild(contentElement.firstChild);
   }
@@ -179,8 +154,8 @@ AbstractPanel.prototype.addResultTab = function(query, elements) {
   var tabId = this.getPanelName() + "Tab_" + this._tabIdCount;
   this._tabIdCount++;
 
-  var navElement = this.getNavElement();
-  var contentElement = this.getContentElement();
+  var navElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_NAV_TAB);
+  var contentElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_CONTENT_TAB);
   var navClass = '';
   var contentClass = 'tab-pane';
   if (navElement.children.length === 0) {

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

@@ -4,6 +4,7 @@
 var logger = require('../logger');
 
 var AbstractDbPanel = require('./AbstractDbPanel');
+var PanelControlElementType = require('./PanelControlElementType');
 
 function ChemicalPanel(params) {
   params.panelName = "chemical";
@@ -40,7 +41,8 @@ ChemicalPanel.prototype.createTableElement = function(target, icon) {
 
 ChemicalPanel.prototype.searchByQuery = function() {
   var self = this;
-  var query = self.getSearchInput().value;
+  var query = self.getControlElement(PanelControlElementType.SEARCH_INPUT).value;
+  
   return self.getOverlayDb().searchByQuery(query);
 };
 

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

@@ -4,6 +4,7 @@
 var logger = require('../logger');
 
 var AbstractDbPanel = require('./AbstractDbPanel');
+var PanelControlElementType = require('./PanelControlElementType');
 
 function DrugPanel(params) {
   params.panelName = "drug";
@@ -36,7 +37,7 @@ DrugPanel.prototype.createTableElement = function(target, icon) {
 
 DrugPanel.prototype.searchByQuery = function() {
   var self = this;
-  var query = self.getSearchInput().value;
+  var query = self.getControlElement(PanelControlElementType.SEARCH_INPUT).value;
   return self.getOverlayDb().searchByQuery(query);
 };
 

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

@@ -4,6 +4,7 @@
 var logger = require('../logger');
 
 var AbstractDbPanel = require('./AbstractDbPanel');
+var PanelControlElementType = require('./PanelControlElementType');
 
 function MiRnaPanel(params) {
   params.panelName = "mirna";
@@ -36,7 +37,7 @@ MiRnaPanel.prototype.createTableElement = function(target, icon) {
 
 MiRnaPanel.prototype.searchByQuery = function() {
   var self = this;
-  var query = self.getSearchInput().value;
+  var query = self.getControlElement(PanelControlElementType.SEARCH_INPUT).value;
   return self.getOverlayDb().searchByQuery(query);
 };
 

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

@@ -4,6 +4,7 @@
 
 var GuiConnector = require('../GuiConnector');
 var AbstractGuiElement = require('./AbstractGuiElement');
+var PanelControlElementType = require('./PanelControlElementType');
 
 var logger = require('../logger');
 
@@ -16,14 +17,20 @@ function Panel(params) {
   self.setElement(params.element);
   self.setMap(params.customMap);
 
+  self._controlElements = [];
 }
 
 Panel.prototype = Object.create(AbstractGuiElement.prototype);
 Panel.prototype.constructor = Panel;
 
 Panel.prototype.disablePanel = function(message) {
-  this.getSearchQueryElement().style.visibility = "hidden";
-  this.getSearchResultsElement().style.visibility = "hidden";
+  var self = this;
+  
+  var searchQueryElement = self.getControlElement(PanelControlElementType.SEARCH_DIV);
+  var searchResultsElement = self.getControlElement(PanelControlElementType.SEARCH_RESULTS_DIV);
+  
+  searchQueryElement.style.visibility = "hidden";
+  searchResultsElement.style.visibility = "hidden";
   var hideReasonDiv = document.createElement("div");
   hideReasonDiv.className = "searchPanel";
 
@@ -33,7 +40,7 @@ Panel.prototype.disablePanel = function(message) {
   center.appendChild(messageDiv);
   hideReasonDiv.appendChild(center);
 
-  this.getElement().insertBefore(hideReasonDiv, this.getSearchQueryElement());
+  self.getElement().insertBefore(hideReasonDiv, searchQueryElement);
 };
 
 Panel.prototype.createLabel = function(value) {
@@ -362,11 +369,11 @@ Panel.prototype.openDialog = function(content, options) {
     contentDiv.removeChild(contentDiv.lastChild);
   }
   contentDiv.appendChild(content);
-  contentDiv.style.display="block";
+  contentDiv.style.display = "block";
 
   $(div).dialog({
     close : function() {
-      contentDiv.style.display="none";
+      contentDiv.style.display = "none";
       $(this).dialog('destroy');
     }
   });
@@ -376,4 +383,25 @@ Panel.prototype.openDialog = function(content, options) {
   $(div).dialog("open");
 };
 
+Panel.prototype.setControlElement = function(type, element) {
+  if (type === null || type === undefined) {
+    throw new Error("Unknown controle element type");
+  }
+  if (PanelControlElementType[type] === undefined) {
+    throw new Error("Unknown controle element type: " + type);
+  }
+
+  this._controlElements[type] = element;
+};
+Panel.prototype.getControlElement = function(type) {
+  if (type === null || type === undefined) {
+    throw new Error("Unknown controle element type");
+  }
+  if (PanelControlElementType[type] === undefined) {
+    throw new Error("Unknown controle element type: " + type);
+  }
+
+  return this._controlElements[type];
+};
+
 module.exports = Panel;

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

+"use strict";
+
+var PanelControlElementType = {
+  SEARCH_DIV : "SEARCH_DIV",
+  SEARCH_LABEL : "SEARCH_LABEL",
+  SEARCH_INPUT : "SEARCH_INPUT",
+  SEARCH_BUTTON : "SEARCH_BUTTON",
+  SEARCH_RESULTS_DIV : "SEARCH_RESULTS_DIV",
+  SEARCH_RESULTS_NAV_TAB : "SEARCH_RESULTS_NAV_TAB",
+  SEARCH_RESULTS_CONTENT_TAB : "SEARCH_RESULTS_CONTENT_TAB",
+
+  SEARCH_PERFECT_MATCH_CHECKBOX : "SEARCH_PERFECT_MATCH_CHECKBOX",
+};
+
+module.exports = PanelControlElementType;

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

@@ -4,23 +4,39 @@
 
 var AbstractDbPanel = require('./AbstractDbPanel');
 var Alias = require('../map/data/Alias');
+var PanelControlElementType = require('./PanelControlElementType');
 var Reaction = require('../map/data/Reaction');
+
 var logger = require('../logger');
+var Functions = require('../Functions');
 
 function SearchPanel(params) {
   params.panelName = "search";
   AbstractDbPanel.call(this, params);
 
-  if (this.getSearchPerfectMatch() === undefined) {
-    throw new Error("No searchPerfectMatch found in the search panel element");
-  }
+  this.createSearchGui();
 }
 
 SearchPanel.prototype = Object.create(AbstractDbPanel.prototype);
 SearchPanel.prototype.constructor = SearchPanel;
 
-SearchPanel.prototype.getSearchPerfectMatch = function() {
-  return this.getElementByName(this.getSearchQueryElement(), "searchPerfectMatch");
+SearchPanel.prototype.createSearchGui = function() {
+  var searchDiv = this.getControlElement(PanelControlElementType.SEARCH_DIV);
+
+  var perfectMatchCheckbox = Functions.createElement({
+    type : "input",
+    name : "searchPerfectMatch",
+    inputType : "checkbox",
+  });
+  searchDiv.appendChild(perfectMatchCheckbox);
+  this.setControlElement(PanelControlElementType.SEARCH_PERFECT_MATCH_CHECKBOX, perfectMatchCheckbox);
+
+  var perfectMatchLabel = Functions.createElement({
+    type : "span",
+    content : "PERFECT MATCH"
+  });
+  searchDiv.appendChild(perfectMatchCheckbox);
+
 };
 
 SearchPanel.prototype.createTableElement = function(element, icon) {
@@ -34,7 +50,7 @@ SearchPanel.prototype.createTableElement = function(element, icon) {
 };
 
 SearchPanel.prototype.createPreamble = function() {
- return document.createElement("div");
+  return document.createElement("div");
 };
 
 SearchPanel.prototype.createReactionElement = function(reaction) {

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

+"use strict";
+
+/* exported logger */
+
+var Helper = require('../helper');
+
+require("../mocha-config.js");
+
+var AbstractDbPanel = require('../../../main/js/gui/AbstractDbPanel');
+
+var chai = require('chai');
+var assert = chai.assert;
+var logger = require('../logger');
+
+describe('AbstractDbPanel', function() {
+
+  var helper;
+  before(function() {
+    helper = new Helper();
+  });
+
+  it('contructor', function() {
+    var div = document.createElement("div");
+
+    var map = helper.createCustomMap();
+    map.registerSource(helper.createSearchDbOverlay(map))
+
+    var panel = new AbstractDbPanel({
+      element : div,
+      customMap : map,
+      panelName : "search",
+    });
+  });
+
+});

frontend-js/src/test/js/gui/ChemicalPanel-test.js

@@ -6,6 +6,7 @@ require("../mocha-config.js");
 
 var Chemical = require('../../../main/js/map/data/Chemical');
 var ChemicalPanel = require('../../../main/js/gui/ChemicalPanel');
+var PanelControlElementType = require('../../../main/js/gui/PanelControlElementType');
 
 
 var chai = require('chai');
@@ -88,7 +89,7 @@ describe('ChemicalPanel', function() {
       customMap : map
     });
 
-    panel.getSearchInput().value = "rotenone";
+    panel.getControlElement(PanelControlElementType.SEARCH_INPUT).value = "rotenone";
 
     return panel.searchByQuery().then(function() {
       assert.equal(logger.getWarnings().length, 0);

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

@@ -6,7 +6,7 @@ require("../mocha-config.js");
 
 var Drug = require('../../../main/js/map/data/Drug');
 var DrugPanel = require('../../../main/js/gui/DrugPanel');
-
+var PanelControlElementType = require('../../../main/js/gui/PanelControlElementType');
 
 var chai = require('chai');
 var assert = chai.assert;
@@ -88,7 +88,7 @@ describe('DrugPanel', function() {
       customMap : map
     });
 
-    panel.getSearchInput().value = "aspirin";
+    panel.getControlElement(PanelControlElementType.SEARCH_INPUT).value = "aspirin";
 
     return panel.searchByQuery().then(function() {
       assert.equal(logger.getWarnings().length, 0);

frontend-js/src/test/js/gui/MiRnaPanel-test.js

@@ -6,7 +6,7 @@ require("../mocha-config.js");
 
 var MiRna = require('../../../main/js/map/data/MiRna');
 var MiRnaPanel = require('../../../main/js/gui/MiRnaPanel');
-
+var PanelControlElementType = require('../../../main/js/gui/PanelControlElementType');
 
 var chai = require('chai');
 var assert = chai.assert;
@@ -88,7 +88,7 @@ describe('MiRnaPanel', function() {
       customMap : map
     });
 
-    panel.getSearchInput().value = "hsa-miR-125a-3p";
+    panel.getControlElement(PanelControlElementType.SEARCH_INPUT).value = "hsa-miR-125a-3p";
 
     return panel.searchByQuery().then(function() {
       assert.equal(logger.getWarnings().length, 0);

frontend-js/src/test/js/gui/Panel-test.js

@@ -12,7 +12,7 @@ var chai = require('chai');
 var assert = chai.assert;
 var logger = require('../logger');
 
-describe('SearchPanel', function() {
+describe('Panel', function() {
 
   var helper;
   before(function() {