search panel uses GuiUtils tab manager

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

@@ -89,7 +89,11 @@ AbstractGuiElement.prototype.setProject = function (project) {
  */
 AbstractGuiElement.prototype.getProject = function () {
   if (this._project === undefined || this._project === null) {
-    return this.getMap().getProject();
+    if (this.getMap()) {
+      return this.getMap().getProject();
+    } else {
+      return null;
+    }
   } else {
     return this._project;
   }

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

@@ -18,7 +18,7 @@ var Functions = require('../../Functions');
  * @constructor
  * @extends Panel
  */
-function AbstractPanel(params) {
+function AbstractDbPanel(params) {
   Panel.call(this, params);
   var self = this;
 
@@ -30,10 +30,10 @@ function AbstractPanel(params) {
 
 }
 
-AbstractPanel.prototype = Object.create(Panel.prototype);
-AbstractPanel.prototype.constructor = AbstractPanel;
+AbstractDbPanel.prototype = Object.create(Panel.prototype);
+AbstractDbPanel.prototype.constructor = AbstractDbPanel;
 
-AbstractPanel.prototype._createEventHandlers = function () {
+AbstractDbPanel.prototype._createEventHandlers = function () {
   var self = this;
   var searchButton = self.getControlElement(PanelControlElementType.SEARCH_BUTTON);
   var searchInput = self.getControlElement(PanelControlElementType.SEARCH_INPUT);
@@ -77,7 +77,7 @@ AbstractPanel.prototype._createEventHandlers = function () {
 
 };
 
-AbstractPanel.prototype._initializeGui = function (placeholder) {
+AbstractDbPanel.prototype._initializeGui = function (placeholder) {
   var searchQueryDiv = Functions.createElement({
     type: "div",
     name: "searchQuery",
@@ -170,7 +170,7 @@ AbstractPanel.prototype._initializeGui = function (placeholder) {
 
 };
 
-AbstractPanel.prototype.setOverlayDb = function (overlayDb) {
+AbstractDbPanel.prototype.setOverlayDb = function (overlayDb) {
   if (overlayDb === undefined) {
     throw new Error("Undefined overlayDb for panel: " + this.getPanelName());
   }
@@ -181,11 +181,11 @@ AbstractPanel.prototype.setOverlayDb = function (overlayDb) {
  *
  * @returns {AbstractDbOverlay}
  */
-AbstractPanel.prototype.getOverlayDb = function () {
+AbstractDbPanel.prototype.getOverlayDb = function () {
   return this._overlayDb;
 };
 
-AbstractPanel.prototype.clearResults = function () {
+AbstractDbPanel.prototype.clearResults = function () {
   var navElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_NAV_TAB);
   while (navElement.firstChild) {
     navElement.removeChild(navElement.firstChild);
@@ -197,7 +197,7 @@ AbstractPanel.prototype.clearResults = function () {
   }
 };
 
-AbstractPanel.prototype.refreshSearchResults = function () {
+AbstractDbPanel.prototype.refreshSearchResults = function () {
   var self = this;
   self.clearResults();
   var searchDb = self.getOverlayDb();
@@ -216,15 +216,15 @@ AbstractPanel.prototype.refreshSearchResults = function () {
   });
 };
 
-AbstractPanel.prototype.getAutocomplete = function () {
+AbstractDbPanel.prototype.getAutocomplete = function () {
   logger.warn("Get autocomplete not implemented");
 };
 
-AbstractPanel.prototype.searchByQuery = function () {
+AbstractDbPanel.prototype.searchByQuery = function () {
   throw new Error("searchByQuery is not implemented");
 };
 
-AbstractPanel.prototype.addResultTab = function (query, elements) {
+AbstractDbPanel.prototype.addResultTab = function (query, elements) {
   var self = this;
   var name = JSON.parse(query).query;
 
@@ -291,7 +291,7 @@ AbstractPanel.prototype.addResultTab = function (query, elements) {
  *
  * @returns {Promise<HTMLTableRowElement>}
  */
-AbstractPanel.prototype.createTableElement = function () {
+AbstractDbPanel.prototype.createTableElement = function () {
   throw new Error("Not implemented");
 };
 
@@ -301,7 +301,7 @@ AbstractPanel.prototype.createTableElement = function () {
  * @param {string} icon
  * @returns {Promise<HTMLTableRowElement>}
  */
-AbstractPanel.prototype.createTargetRow = function (target, icon) {
+AbstractDbPanel.prototype.createTargetRow = function (target, icon) {
   var self = this;
   var guiUtils = self.getGuiUtils();
   var result = document.createElement("tr");
@@ -369,7 +369,7 @@ AbstractPanel.prototype.createTargetRow = function (target, icon) {
   return Promise.resolve(result);
 };
 
-AbstractPanel.prototype.computeAutocompleteDictionary = function (queries) {
+AbstractDbPanel.prototype.computeAutocompleteDictionary = function (queries) {
   var result = {};
 
   var i, j, k, mainString, substring, list;
@@ -423,4 +423,4 @@ AbstractPanel.prototype.computeAutocompleteDictionary = function (queries) {
 };
 
 
-module.exports = AbstractPanel;
+module.exports = AbstractDbPanel;

frontend-js/src/main/js/gui/leftPanel/GuiUtils.js

@@ -139,7 +139,7 @@ GuiUtils.prototype.createPostTranslationalModifications = function (label, value
     });
     for (var i = 0; i < value.length; i++) {
       var modification = value[i];
-      var row = self.createModificationRow(modification, self);
+      var row = self.createModificationRow(modification);
       if (row !== null) {
         list.appendChild(row);
         count++;
@@ -784,6 +784,7 @@ GuiUtils.prototype.createTabMenuObject = function (params) {
     navLink.innerHTML = name;
   }
   navLink.onclick = function () {
+    console.log("SHOW", $(this)[0].href);
     $(this).tab('show');
   };
   navLi.appendChild(navLink);
@@ -956,7 +957,6 @@ GuiUtils.prototype.initTabContent = function (abstractGuiElement) {
   }
 
   abstractGuiElement._panels = [];
-  abstractGuiElement._tabIdCount = 0;
 
   var tabDiv = Functions.createElement({
     type: "div",
@@ -981,11 +981,12 @@ GuiUtils.prototype.initTabContent = function (abstractGuiElement) {
  * @param {AbstractGuiElement} abstractGuiElement
  * @param {Object} params
  * @param {string} params.name
+ * @param {Object} [params.options] - optional parameters passed to the panel constructor
  * @param {function} params.panelClass
  */
 GuiUtils.prototype.addTab = function (abstractGuiElement, params) {
-  var tabId = "admin_panel_tab_" + abstractGuiElement._tabIdCount;
-  abstractGuiElement._tabIdCount++;
+  var tabId = "panel_tab_" + tabIdCounter;
+  tabIdCounter++;
 
   var navElement = $(abstractGuiElement.getElement()).find("> .parentTabs > .nav-tabs")[0];
   var contentElement = $(abstractGuiElement.getElement()).find("> .parentTabs > .tab-content")[0];
@@ -1004,12 +1005,20 @@ GuiUtils.prototype.addTab = function (abstractGuiElement, params) {
 
   contentElement.appendChild(contentDiv);
 
-  abstractGuiElement._panels.push(new params.panelClass({
+  var options = {
     element: contentDiv,
     name: params.name,
     configuration: this.getConfiguration(),
-    serverConnector: abstractGuiElement.getServerConnector()
-  }));
+    serverConnector: abstractGuiElement.getServerConnector(),
+    customMap: abstractGuiElement.getMap(),
+    project: abstractGuiElement.getProject()
+  };
+
+  if (params.options !== undefined) {
+    options = jQuery.extend(options, params.options);
+  }
+
+  abstractGuiElement._panels.push(new params.panelClass(options));
 };
 
 module.exports = GuiUtils;

frontend-js/src/main/js/gui/leftPanel/LeftPanel.js

@@ -177,7 +177,7 @@ LeftPanel.prototype.showElementDetails = function (element) {
     }).siblings('.ui-dialog-titlebar').css("background", "gray");
   }
 
-  var openedTabs = $("[name='tabView'] > ul li.active a > .maintabdiv");
+  var openedTabs = $("[name='tabView'] > ul > li.active > a");
   var openTabName = openedTabs[0].innerHTML;
   var searchTabName = openedTabs[1].innerHTML;
   var isPanelHidden = (self.getElement().style.display === "none");

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

@@ -10,73 +10,74 @@ var DrugPanel = require('./DrugPanel');
 var MiRnaPanel = require('./MiRnaPanel');
 var GenericSearchPanel = require('./GenericSearchPanel');
 
-var Functions = require('../../Functions');
 var logger = require('../../logger');
 
+/**
+ *
+ * @param {Configuration} params.configuration
+ * @param {HTMLElement} params.element
+ * @param {Project} params.project
+ * @param {CustomMap} params.customMap
+ * @param params.parent
+ *
+ * @constructor
+ * @extends AbstractGuiElement
+ */
 function SearchPanel(params) {
-  params.panelName = "global-search";
+  params["panelName"] = "global-search";
   Panel.call(this, params);
   var self = this;
 
-  this._tabIdCount = 0;
-  this._panels = [];
-
   self._createPanelGui();
-
 }
 
 SearchPanel.prototype = Object.create(Panel.prototype);
 SearchPanel.prototype.constructor = SearchPanel;
 
-SearchPanel.prototype._createPanelGui = function() {
+/**
+ *
+ * @private
+ */
+SearchPanel.prototype._createPanelGui = function () {
   var self = this;
-  var panels = self.getPanelsDefinition();
 
-  var tabDiv = Functions.createElement({
-    type : "div",
-    name : "tabView",
-    className : "tabbable boxed parentTabs"
-  });
-  self.getElement().appendChild(tabDiv);
-
-  var tabMenuDiv = Functions.createElement({
-    type : "ul",
-    className : "nav nav-tabs"
-  });
-  tabDiv.appendChild(tabMenuDiv);
-
-  var tabContentDiv = Functions.createElement({
-    type : "div",
-    className : "tab-content"
-  });
-  tabDiv.appendChild(tabContentDiv);
+  self.getGuiUtils().initTabContent(self);
 
+  var panels = self.getPanelsDefinition();
   for (var i = 0; i < panels.length; i++) {
-    self.addTab(panels[i], tabMenuDiv, tabContentDiv);
+    self.getGuiUtils().addTab(self, panels[i]);
   }
 };
 
-SearchPanel.prototype.getPanelsDefinition = function() {
-  return [ {
-    name : "GENERIC",
-    className : "fa-search",
-    panelClass : GenericSearchPanel
+/**
+ *
+ * @returns {*[]}
+ */
+SearchPanel.prototype.getPanelsDefinition = function () {
+  return [{
+    name: "GENERIC",
+    panelClass: GenericSearchPanel,
+    options: {parent: this}
   }, {
-    name : "DRUG",
-    className : "fa-map-marker",
-    panelClass : DrugPanel
+    name: "DRUG",
+    panelClass: DrugPanel,
+    options: {parent: this}
   }, {
-    name : "CHEMICAL",
-    className : "fa-map-marker",
-    panelClass : ChemicalPanel
+    name: "CHEMICAL",
+    panelClass: ChemicalPanel,
+    options: {parent: this}
   }, {
-    name : "MiRNA",
-    className : "fa-map-marker",
-    panelClass : MiRnaPanel
-  } ];
+    name: "MiRNA",
+    panelClass: MiRnaPanel,
+    options: {parent: this}
+  }];
 };
 
-SearchPanel.prototype.hideTab = function(panel) {
+/**
+ *
+ * @param {AbstractDbPanel} panel
+ */
+SearchPanel.prototype.hideTab = function (panel) {
   var self = this;
   var panelDefinitions = self.getPanelsDefinition();
   for (var i = 0; i < panelDefinitions.length; i++) {
@@ -91,7 +92,11 @@ SearchPanel.prototype.hideTab = function(panel) {
   }
 };
 
-SearchPanel.prototype.init = function() {
+/**
+ *
+ * @returns {Promise}
+ */
+SearchPanel.prototype.init = function () {
   var self = this;
 
   var promises = [];
@@ -101,59 +106,12 @@ SearchPanel.prototype.init = function() {
   return Promise.all(promises);
 };
 
-SearchPanel.prototype.addTab = function(params, navElement, contentElement) {
-  var self = this;
-
-  var name = params.name;
-
-  var tabId = "search_panel_tab_" + this._tabIdCount;
-  self._tabIdCount++;
-
-  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) + "...";
-    }
-  } else {
-    name = "";
-  }
-  navLink.innerHTML = "<div class='maintabdiv'>" + name + "</div>";
-
-  navLink.onclick = function() {
-    $(this).tab('show');
-  };
-
-  navLi.appendChild(navLink);
-
-  navElement.appendChild(navLi);
-
-  var contentDiv = document.createElement("div");
-  contentDiv.style.height = "100%";
-  contentDiv.className = contentClass;
-  contentDiv.id = tabId;
-
-  contentElement.appendChild(contentDiv);
-
-  this._panels.push(new params.panelClass({
-    element : contentDiv,
-    customMap : self.getMap(),
-    parent : self
-  }));
-};
-
+/**
+ *
+ * @returns {Promise}
+ */
 SearchPanel.prototype.destroy = function () {
-    return Promise.resolve();
+  return Promise.resolve();
 };