basic plugin functionality that allows to register plugin

frontend-js/package.json

@@ -22,8 +22,8 @@
     "browserify": "^13.1.1",
     "chai": "^3.5.0",
     "clean-css-cli": "^4.1.10",
-    "del": "^3.0.0",
     "datatables.net": "^1.10.13",
+    "del": "^3.0.0",
     "exorcist": "^0.4.0",
     "file-url": "^2.0.0",
     "istanbul": "0.4.5",

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

@@ -11,6 +11,7 @@ var logger = require('../../logger');
 function GuiUtils(configuration) {
   var self = this;
   self.setConfiguration(configuration);
+  self._tabIdCounter = 0;
 }
 
 GuiUtils.prototype = Object.create(AbstractGuiElement.prototype);
@@ -376,7 +377,7 @@ GuiUtils.prototype.createAliasElement = function (params) {
   div.appendChild(self.createParamLine("Formula: ", alias.getFormula()));
   div.appendChild(self.createArrayParamLine("Former symbols: ", alias.getFormerSymbols()));
   div.appendChild(self.createPostTranslationalModifications("PostTranslational modifications: ", alias
-      .getOther('modifications')));
+    .getOther('modifications')));
   div.appendChild(self.createParamLine("Charge: ", alias.getCharge()));
   div.appendChild(self.createArrayParamLine("Synonyms: ", alias.getSynonyms()));
   div.appendChild(self.createLabelText(alias.getDescription()));
@@ -416,7 +417,7 @@ GuiUtils.prototype.createModifiersLine = function (label, value) {
   return result;
 };
 
-GuiUtils.prototype.createTabMenuObject = function(params) {
+GuiUtils.prototype.createTabMenuObject = function (params) {
   var name = params.name;
   var id = params.id;
   var navigationBar = params.navigationBar;
@@ -434,7 +435,7 @@ GuiUtils.prototype.createTabMenuObject = function(params) {
   if (name !== undefined) {
     navLink.innerHTML = name;
   }
-  navLink.onclick = function() {
+  navLink.onclick = function () {
     $(this).tab('show');
   };
   navLi.appendChild(navLink);
@@ -444,7 +445,7 @@ GuiUtils.prototype.createTabMenuObject = function(params) {
   return navLi;
 };
 
-GuiUtils.prototype.createTabContentObject = function(params) {
+GuiUtils.prototype.createTabContentObject = function (params) {
   var navigationObject = params.navigationObject;
   var tabId = params.id;
   var result = document.createElement("div");
@@ -460,4 +461,81 @@ GuiUtils.prototype.createTabContentObject = function(params) {
   return result;
 };
 
+GuiUtils.prototype.createTabDiv = function (params) {
+  var tabDiv = Functions.createElement({
+    type: "div",
+    name: "tabView",
+    className: "tabbable boxed parentTabs"
+  });
+
+  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);
+
+  if (params !== undefined && params.element !== undefined) {
+    params.element.appendChild(tabDiv);
+  }
+
+  return {
+    element: tabDiv,
+    menu: tabMenuDiv,
+    content: tabContentDiv,
+    tabId: params.id
+  }
+};
+
+GuiUtils.prototype.createTab = function (params) {
+  var self = this;
+  var tabData = params.tabData;
+
+  var tabId = tabData.tabId + "_tab_" + self._tabIdCounter;
+  self._tabIdCounter++;
+
+  var navClass = '';
+  var contentClass = 'tab-pane';
+  if (tabData.menu.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;
+
+  navLink.innerHTML = params.title;
+
+  navLink.onclick = function () {
+    $(this).tab('show');
+  };
+  navLi.appendChild(navLink);
+  tabData.menu.appendChild(navLi);
+
+  var contentDiv = document.createElement("div");
+  contentDiv.style.height = "100%";
+  contentDiv.className = contentClass;
+  contentDiv.id = tabId;
+
+  if (Functions.isDomElement(params.content)) {
+    contentDiv.appendChild(params.content);
+  } else {
+    contentDiv.innerHTML = params.content;
+  }
+  tabData.content.appendChild(contentDiv);
+
+  return {
+    title: navLink,
+    content: contentDiv
+  }
+};
+
 module.exports = GuiUtils;

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

@@ -21,13 +21,13 @@ var Functions = require('../../Functions');
 var logger = require('../../logger');
 
 function LeftPanel(params) {
-    AbstractGuiElement.call(this, params);
-    var self = this;
+  AbstractGuiElement.call(this, params);
+  var self = this;
 
-    this._tabIdCount = 0;
-    this._panels = [];
+  this._tabIdCount = 0;
+  this._panels = [];
 
-    self._createPanelGui();
+  self._createPanelGui();
 
 }
 
@@ -35,297 +35,281 @@ LeftPanel.prototype = Object.create(AbstractGuiElement.prototype);
 LeftPanel.prototype.constructor = LeftPanel;
 
 LeftPanel.prototype._createPanelGui = function () {
-    var self = this;
-    var panels = self.getPanelsDefinition();
-
-    var headerDiv = Functions.createElement({
-        type: "div",
-        id: "headerPanel"
-    });
-    var header = new Header({
-        element: headerDiv,
-        customMap: self.getMap(),
-    });
-    self.getElement().appendChild(headerDiv);
-
-    var loginDialogDiv = Functions.createElement({
-        type: "div",
-        name: "loginDialog",
-        style: "display:none",
-    });
-    self.getElement().appendChild(loginDialogDiv);
-    this.setLoginDialog(new LoginDialog({
-        element: loginDialogDiv,
-        customMap: self.getMap(),
-    }));
-
-    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.setHeader(header);
-
-    var elementInfoDiv = Functions.createElement({
-        name: "elementInfoDiv",
-        type: "div",
-        style: "background-color:#f3f3f3",
-        className: "minerva-element-info-div",
-    });
-    self.elementInfoDiv = elementInfoDiv;
-
-    for (var i = 0; i < panels.length; i++) {
-        self.addTab(panels[i], tabMenuDiv, tabContentDiv);
-    }
+  var self = this;
+  var panels = self.getPanelsDefinition();
+
+  var headerDiv = Functions.createElement({
+    type: "div",
+    id: "headerPanel"
+  });
+  var header = new Header({
+    element: headerDiv,
+    customMap: self.getMap()
+  });
+  self.getElement().appendChild(headerDiv);
+
+  var loginDialogDiv = Functions.createElement({
+    type: "div",
+    name: "loginDialog",
+    style: "display:none"
+  });
+  self.getElement().appendChild(loginDialogDiv);
+  this.setLoginDialog(new LoginDialog({
+    element: loginDialogDiv,
+    customMap: self.getMap()
+  }));
+
+  var guiUtils = self.getGuiUtils();
+  var tabData = guiUtils.createTabDiv({
+    element: self.getElement(),
+    id: "left_panel"
+  });
+
+  self.setHeader(header);
+
+  var elementInfoDiv = Functions.createElement({
+    name: "elementInfoDiv",
+    type: "div",
+    style: "background-color:#f3f3f3",
+    className: "minerva-element-info-div"
+  });
+  self.elementInfoDiv = elementInfoDiv;
+
+  for (var i = 0; i < panels.length; i++) {
+    self.addTab(panels[i], tabData);
+  }
 };
 
 LeftPanel.prototype.getPanelsDefinition = function () {
-    return [{
-        name: "SEARCH",
-        className: "fa-search",
-        panelClass: SearchPanel,
-    }, {
-        name: "OVERLAYS",
-        className: "fa-th-list",
-        panelClass: OverlayPanel,
-    }, {
-        name: "SUBMAPS",
-        className: "fa-sitemap",
-        panelClass: SubmapPanel,
-    }, {
-        name: "INFO",
-        className: "fa-info",
-        panelClass: ProjectInfoPanel,
-    }];
+  return [{
+    name: "SEARCH",
+    className: "fa-search",
+    panelClass: SearchPanel
+  }, {
+    name: "OVERLAYS",
+    className: "fa-th-list",
+    panelClass: OverlayPanel
+  }, {
+    name: "SUBMAPS",
+    className: "fa-sitemap",
+    panelClass: SubmapPanel
+  }, {
+    name: "INFO",
+    className: "fa-info",
+    panelClass: ProjectInfoPanel
+  }];
 };
 
 LeftPanel.prototype.hideTab = function (panel) {
-    var self = this;
-    var panelDefinitions = self.getPanelsDefinition();
-    for (var i = 0; i < panelDefinitions.length; i++) {
-        if (panel instanceof panelDefinitions[i].panelClass) {
-            var liElement = $("li:has(a[href='#left_panel_tab_" + i + "'])", $(self.getElement()))[0];
-            if (liElement !== undefined) {
-                liElement.style.display = "none";
-            } else {
-                logger.warn("Cannot find tab link for panel: " + panel.getPanelName());
-            }
-        }
+  var self = this;
+  var panelDefinitions = self.getPanelsDefinition();
+  for (var i = 0; i < panelDefinitions.length; i++) {
+    if (panel instanceof panelDefinitions[i].panelClass) {
+      var liElement = $("li:has(a[href='#left_panel_tab_" + i + "'])", $(self.getElement()))[0];
+      if (liElement !== undefined) {
+        liElement.style.display = "none";
+      } else {
+        logger.warn("Cannot find tab link for panel: " + panel.getPanelName());
+      }
     }
+  }
 };
 
 LeftPanel.prototype.init = function () {
-    var self = this;
+  var self = this;
 
-    var promises = [];
-    for (var i = 0; i < self._panels.length; i++) {
-        promises.push(self._panels[i].init());
-    }
-    promises.push(self.getHeader().init());
-
-    var initEvents = new Promise(function (resolve) {
-        self.getMap().addListener("onBioEntityClick", function (e) {
-            return self.showElementDetails(e.arg);
-        });
-        self.getMap().getOverlayByName("search").addListener("onSearch", function (e) {
-            if (e.arg.type === AbstractDbOverlay.QueryType.SEARCH_BY_COORDINATES) {
-                return self.showElementDetails(e.arg.identifiedElements[0][0]);
-            } else {
-                return self.showElementDetails(undefined);
-            }
-        });
-        resolve();
+  var promises = [];
+  for (var i = 0; i < self._panels.length; i++) {
+    promises.push(self._panels[i].init());
+  }
+  promises.push(self.getHeader().init());
+
+  var initEvents = new Promise(function (resolve) {
+    self.getMap().addListener("onBioEntityClick", function (e) {
+      return self.showElementDetails(e.arg);
+    });
+    self.getMap().getOverlayByName("search").addListener("onSearch", function (e) {
+      if (e.arg.type === AbstractDbOverlay.QueryType.SEARCH_BY_COORDINATES) {
+        return self.showElementDetails(e.arg.identifiedElements[0][0]);
+      } else {
+        return self.showElementDetails(undefined);
+      }
     });
-    promises.push(initEvents);
+    resolve();
+  });
+  promises.push(initEvents);
   promises.push(self.getLoginDialog().init());
-    return Promise.all(promises);
+  return Promise.all(promises);
 };
 
 LeftPanel.prototype.showElementDetails = function (element) {
-    var self = this;
-    var div = self.elementInfoDiv;
-    if (!$(div).hasClass("ui-dialog-content")) {
-        $(div).dialog({
-            resizable: false,
-            width: $(self.getElement()).width(),
-            height: 200,
-            beforeclose: function () {
-                $(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top]);
-                $(this).dialog('option', 'width', $(this).width());
-                $(this).dialog('option', 'height', $(this).height());
-            },
-            position: {
-                my: "left bottom",
-                at: "left bottom",
-                of: $(self.getElement())
-            }
-        }).siblings('.ui-dialog-titlebar').css("background", "gray");
-    }
-
-    var openTabName = $("[name='tabView'] > ul li.active a > .maintabdiv")[0].innerHTML;
-    var searchTabName = $("[name='tabView'] > ul li.active a > .maintabdiv")[1].innerHTML;
-    var isPanelHidden = (self.getElement().style.display === "none");
-    if (isPanelHidden) {
-        openTabName = undefined;
-    }
+  var self = this;
+  var div = self.elementInfoDiv;
+  if (!$(div).hasClass("ui-dialog-content")) {
+    $(div).dialog({
+      resizable: false,
+      width: $(self.getElement()).width(),
+      height: 200,
+      beforeclose: function () {
+        $(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top]);
+        $(this).dialog('option', 'width', $(this).width());
+        $(this).dialog('option', 'height', $(this).height());
+      },
+      position: {
+        my: "left bottom",
+        at: "left bottom",
+        of: $(self.getElement())
+      }
+    }).siblings('.ui-dialog-titlebar').css("background", "gray");
+  }
+
+  var openTabName = $("[name='tabView'] > ul li.active a > .maintabdiv")[0].innerHTML;
+  var searchTabName = $("[name='tabView'] > ul li.active a > .maintabdiv")[1].innerHTML;
+  var isPanelHidden = (self.getElement().style.display === "none");
+  if (isPanelHidden) {
+    openTabName = undefined;
+  }
 
   if (element !== undefined && openTabName !== undefined && (openTabName.indexOf("SEARCH") === -1 || searchTabName !== "GENERIC")) {
     var model = self.getMap().getSubmapById(element.getModelId()).getModel();
     return model.getByIdentifiedElement(element, true).then(function (bioEntity) {
       div.innerHTML = "";
       div.appendChild(self.prepareElementDetailsContent(bioEntity));
-            $(div).dialog("open");
-            $(div).dialog("option", "title", self.getElementTitle(bioEntity));
-            $(div).scrollTop(0);
-        });
-    } else {
-        $(div).dialog("close");
-        return Promise.resolve();
-    }
+      $(div).dialog("open");
+      $(div).dialog("option", "title", self.getElementTitle(bioEntity));
+      $(div).scrollTop(0);
+    });
+  } else {
+    $(div).dialog("close");
+    return Promise.resolve();
+  }
 };
 
 LeftPanel.prototype.prepareElementDetailsContent = function (bioEntity) {
-    var guiUtils = new GuiUtils(this.getMap().getConfiguration());
-    guiUtils.setMap(this.getMap());
-    if (bioEntity instanceof Reaction) {
-        return guiUtils.createReactionElement({
-            reaction: bioEntity,
-            showTitle: false,
-        });
-    } else if (bioEntity instanceof Alias) {
-        return guiUtils.createAliasElement({
-            alias: bioEntity,
-            showTitle: false,
-        });
-    } else if (bioEntity instanceof PointData) {
-        return Functions.createElement({
-            type: "div"
-        });
-    } else {
-        throw new Error("Unknown element type:" + bioEntity);
-    }
+  var guiUtils = this.getGuiUtils();
+  if (bioEntity instanceof Reaction) {
+    return guiUtils.createReactionElement({
+      reaction: bioEntity,
+      showTitle: false
+    });
+  } else if (bioEntity instanceof Alias) {
+    return guiUtils.createAliasElement({
+      alias: bioEntity,
+      showTitle: false
+    });
+  } else if (bioEntity instanceof PointData) {
+    return Functions.createElement({
+      type: "div"
+    });
+  } else {
+    throw new Error("Unknown element type:" + bioEntity);
+  }
+};
+
+LeftPanel.prototype.getGuiUtils = function () {
+  var self = this;
+  if (self._guiUtils === undefined) {
+    self._guiUtils = new GuiUtils(self.getMap().getConfiguration());
+    self._guiUtils.setMap(self.getMap());
+  }
+  return self._guiUtils;
 };
+
 LeftPanel.prototype.getElementTitle = function (bioEntity) {
-    if (bioEntity instanceof Reaction) {
-        return bioEntity.getType() + ": " + bioEntity.getReactionId();
-    } else if (bioEntity instanceof Alias) {
-        return bioEntity.getType() + ": " + bioEntity.getName();
-    } else if (bioEntity instanceof PointData) {
-        return "POINT: " + bioEntity.getId();
-    } else {
-        throw new Error("Unknown element type:" + bioEntity);
-    }
+  if (bioEntity instanceof Reaction) {
+    return bioEntity.getType() + ": " + bioEntity.getReactionId();
+  } else if (bioEntity instanceof Alias) {
+    return bioEntity.getType() + ": " + bioEntity.getName();
+  } else if (bioEntity instanceof PointData) {
+    return "POINT: " + bioEntity.getId();
+  } else {
+    throw new Error("Unknown element type:" + bioEntity);
+  }
 };
 
-LeftPanel.prototype.addTab = function (params, navElement, contentElement) {
-    var self = this;
+LeftPanel.prototype.addTab = function (params, tabData) {
+  var self = this;
 
-    var name = params.name;
+  var name = params.name;
+  if (name !== undefined) {
+    if (name.length > 12) {
+      name = name.substring(0, 10) + "...";
+    }
+  } else {
+    name = "";
+  }
 
-    var tabId = "left_panel_tab_" + this._tabIdCount;
-    self._tabIdCount++;
 
-    var navClass = '';
-    var contentClass = 'tab-pane';
-    if (navElement.children.length === 0) {
-        navClass = "active";
-        contentClass = "tab-pane active";
-    }
+  var guiUtils = self.getGuiUtils();
+  var data = guiUtils.createTab({
+    tabData: tabData,
+    title: '<div class="maintabdiv"><i class="fa ' + params.className + ' maintab"></i><br>' + name
+    + '</div>',
+    content: ""
+  });
+
+  this._panels.push(new params.panelClass({
+    element: data.content,
+    customMap: self.getMap(),
+    parent: self
+  }));
 
-    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 = "";
-    }
-    // add this when we want to have triangle below
-    // '<div class="tngContainer"><div class="tng"></div></div>'
-
-  navLink.innerHTML = '<div class="maintabdiv"><i class="fa ' + params.className + ' maintab"></i><br>' + name
-      + '</div>';
-
-    navLink.onclick = function () {
-        $(this).tab('show');
-    };
-    navLi.appendChild(navLink);
-    navElement