From e721b87d8a19bc55de389921f34d9818f834da96 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Fri, 7 Apr 2017 14:49:06 +0200
Subject: [PATCH] javascript create search panels
---
frontend-js/src/main/js/Functions.js | 20 +++
.../src/main/js/gui/AbstractDbPanel.js | 139 +++++++-----------
frontend-js/src/main/js/gui/ChemicalPanel.js | 4 +-
frontend-js/src/main/js/gui/DrugPanel.js | 3 +-
frontend-js/src/main/js/gui/MiRnaPanel.js | 3 +-
frontend-js/src/main/js/gui/Panel.js | 38 ++++-
.../main/js/gui/PanelControlElementType.js | 15 ++
frontend-js/src/main/js/gui/SearchPanel.js | 28 +++-
.../src/test/js/gui/AbstractPanel-test.js | 35 +++++
.../src/test/js/gui/ChemicalPanel-test.js | 3 +-
frontend-js/src/test/js/gui/DrugPanel-test.js | 4 +-
.../src/test/js/gui/MiRnaPanel-test.js | 4 +-
frontend-js/src/test/js/gui/Panel-test.js | 2 +-
13 files changed, 196 insertions(+), 102 deletions(-)
create mode 100644 frontend-js/src/main/js/gui/PanelControlElementType.js
create mode 100644 frontend-js/src/test/js/gui/AbstractPanel-test.js
diff --git a/frontend-js/src/main/js/Functions.js b/frontend-js/src/main/js/Functions.js
index 1d1872d068..11a23b3d32 100644
--- a/frontend-js/src/main/js/Functions.js
+++ b/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;
diff --git a/frontend-js/src/main/js/gui/AbstractDbPanel.js b/frontend-js/src/main/js/gui/AbstractDbPanel.js
index 87a957301f..5fa212b5cf 100644
--- a/frontend-js/src/main/js/gui/AbstractDbPanel.js
+++ b/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) {
diff --git a/frontend-js/src/main/js/gui/ChemicalPanel.js b/frontend-js/src/main/js/gui/ChemicalPanel.js
index ef4f0c0c3a..4d0f165e39 100644
--- a/frontend-js/src/main/js/gui/ChemicalPanel.js
+++ b/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);
};
diff --git a/frontend-js/src/main/js/gui/DrugPanel.js b/frontend-js/src/main/js/gui/DrugPanel.js
index 241bc72584..d30f17c058 100644
--- a/frontend-js/src/main/js/gui/DrugPanel.js
+++ b/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);
};
diff --git a/frontend-js/src/main/js/gui/MiRnaPanel.js b/frontend-js/src/main/js/gui/MiRnaPanel.js
index b32b179380..c3b8e9c4f7 100644
--- a/frontend-js/src/main/js/gui/MiRnaPanel.js
+++ b/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);
};
diff --git a/frontend-js/src/main/js/gui/Panel.js b/frontend-js/src/main/js/gui/Panel.js
index 370fcb4096..7d02ff730e 100644
--- a/frontend-js/src/main/js/gui/Panel.js
+++ b/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;
diff --git a/frontend-js/src/main/js/gui/PanelControlElementType.js b/frontend-js/src/main/js/gui/PanelControlElementType.js
new file mode 100644
index 0000000000..7bfe18a224
--- /dev/null
+++ b/frontend-js/src/main/js/gui/PanelControlElementType.js
@@ -0,0 +1,15 @@
+"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;
diff --git a/frontend-js/src/main/js/gui/SearchPanel.js b/frontend-js/src/main/js/gui/SearchPanel.js
index d6de27b1ba..e7524d0dc4 100644
--- a/frontend-js/src/main/js/gui/SearchPanel.js
+++ b/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) {
diff --git a/frontend-js/src/test/js/gui/AbstractPanel-test.js b/frontend-js/src/test/js/gui/AbstractPanel-test.js
new file mode 100644
index 0000000000..7959b1c8e9
--- /dev/null
+++ b/frontend-js/src/test/js/gui/AbstractPanel-test.js
@@ -0,0 +1,35 @@
+"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",
+ });
+ });
+
+});
diff --git a/frontend-js/src/test/js/gui/ChemicalPanel-test.js b/frontend-js/src/test/js/gui/ChemicalPanel-test.js
index 021291cf36..99afd8632d 100644
--- a/frontend-js/src/test/js/gui/ChemicalPanel-test.js
+++ b/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);
diff --git a/frontend-js/src/test/js/gui/DrugPanel-test.js b/frontend-js/src/test/js/gui/DrugPanel-test.js
index 33d2ced4c9..1a3b0760ec 100644
--- a/frontend-js/src/test/js/gui/DrugPanel-test.js
+++ b/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);
diff --git a/frontend-js/src/test/js/gui/MiRnaPanel-test.js b/frontend-js/src/test/js/gui/MiRnaPanel-test.js
index 43f7cfda1d..0c72e413b6 100644
--- a/frontend-js/src/test/js/gui/MiRnaPanel-test.js
+++ b/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);
diff --git a/frontend-js/src/test/js/gui/Panel-test.js b/frontend-js/src/test/js/gui/Panel-test.js
index 5d952b5f93..e2c2d41bb8 100644
--- a/frontend-js/src/test/js/gui/Panel-test.js
+++ b/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() {
--
GitLab