diff --git a/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js b/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js index a8ae7a7e411f49c94e0851a80e900bb60f441590..5f3db721db820a2ff8a4bddfa6cf0f21e628e62d 100644 --- a/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js @@ -34,57 +34,57 @@ function LeftPanel(params) { LeftPanel.prototype = Object.create(AbstractGuiElement.prototype); LeftPanel.prototype.constructor = LeftPanel; -LeftPanel.prototype._createPanelGui = function() { +LeftPanel.prototype._createPanelGui = function () { var self = this; var panels = self.getPanelsDefinition(); var headerDiv = Functions.createElement({ - type : "div", - id : "headerPanel" + type: "div", + id: "headerPanel" }); var header = new Header({ - element : headerDiv, - customMap : self.getMap(), + element: headerDiv, + customMap: self.getMap(), }); self.getElement().appendChild(headerDiv); var loginDialogDiv = Functions.createElement({ - type : "div", - name : "loginDialog", - style : "display:none", + type: "div", + name: "loginDialog", + style: "display:none", }); self.getElement().appendChild(loginDialogDiv); this.setLoginDialog(new LoginDialog({ - element : loginDialogDiv, - customMap : self.getMap(), + element: loginDialogDiv, + customMap: self.getMap(), })); var tabDiv = Functions.createElement({ - type : "div", - name : "tabView", - className : "tabbable boxed parentTabs" + type: "div", + name: "tabView", + className: "tabbable boxed parentTabs" }); self.getElement().appendChild(tabDiv); var tabMenuDiv = Functions.createElement({ - type : "ul", - className : "nav nav-tabs" + type: "ul", + className: "nav nav-tabs" }); tabDiv.appendChild(tabMenuDiv); var tabContentDiv = Functions.createElement({ - type : "div", - className : "tab-content" + 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", + name: "elementInfoDiv", + type: "div", + style: "background-color:#f3f3f3", + className: "minerva-element-info-div", }); self.elementInfoDiv = elementInfoDiv; @@ -93,27 +93,27 @@ LeftPanel.prototype._createPanelGui = function() { } }; -LeftPanel.prototype.getPanelsDefinition = function() { - return [ { - name : "SEARCH", - className : "fa-search", - panelClass : SearchPanel, +LeftPanel.prototype.getPanelsDefinition = function () { + return [{ + name: "SEARCH", + className: "fa-search", + panelClass: SearchPanel, }, { - name : "OVERLAYS", - className : "fa-th-list", - panelClass : OverlayPanel, + name: "OVERLAYS", + className: "fa-th-list", + panelClass: OverlayPanel, }, { - name : "SUBMAPS", - className : "fa-sitemap", - panelClass : SubmapPanel, + name: "SUBMAPS", + className: "fa-sitemap", + panelClass: SubmapPanel, }, { - name : "INFO", - className : "fa-info", - panelClass : ProjectInfoPanel, - } ]; + name: "INFO", + className: "fa-info", + panelClass: ProjectInfoPanel, + }]; }; -LeftPanel.prototype.hideTab = function(panel) { +LeftPanel.prototype.hideTab = function (panel) { var self = this; var panelDeifinitions = self.getPanelsDefinition(); for (var i = 0; i < panelDeifinitions.length; i++) { @@ -128,7 +128,7 @@ LeftPanel.prototype.hideTab = function(panel) { } }; -LeftPanel.prototype.init = function() { +LeftPanel.prototype.init = function () { var self = this; var promises = []; @@ -137,11 +137,11 @@ LeftPanel.prototype.init = function() { } promises.push(self.getHeader().init()); - var initEvents = new Promise(function(resolve) { - self.getMap().addListener("onBioEntityClick", function(e) { + 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) { + 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 { @@ -155,24 +155,24 @@ LeftPanel.prototype.init = function() { return Promise.all(promises); }; -LeftPanel.prototype.showElementDetails = function(element) { +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 ]); + 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()), - }, + position: { + my: "left bottom", + at: "left bottom", + of: $(self.getElement()) + } }).siblings('.ui-dialog-titlebar').css("background", "gray"); } @@ -183,10 +183,10 @@ LeftPanel.prototype.showElementDetails = function(element) { openTabName = undefined; } - if (element !== undefined && (openTabName.indexOf("SEARCH") === -1 || searchTabName !== "GENERIC")) { + 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 =""; + 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)); @@ -198,28 +198,28 @@ LeftPanel.prototype.showElementDetails = function(element) { } }; -LeftPanel.prototype.prepareElementDetailsContent = function(bioEntity) { +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, + reaction: bioEntity, + showTitle: false, }); } else if (bioEntity instanceof Alias) { return guiUtils.createAliasElement({ - alias : bioEntity, - showTitle : false, + alias: bioEntity, + showTitle: false, }); } else if (bioEntity instanceof PointData) { return Functions.createElement({ - type : "div" + type: "div" }); } else { throw new Error("Unknown element type:" + bioEntity); } }; -LeftPanel.prototype.getElementTitle = function(bioEntity) { +LeftPanel.prototype.getElementTitle = function (bioEntity) { if (bioEntity instanceof Reaction) { return bioEntity.getType() + ": " + bioEntity.getReactionId(); } else if (bioEntity instanceof Alias) { @@ -231,7 +231,7 @@ LeftPanel.prototype.getElementTitle = function(bioEntity) { } }; -LeftPanel.prototype.addTab = function(params, navElement, contentElement) { +LeftPanel.prototype.addTab = function (params, navElement, contentElement) { var self = this; var name = params.name; @@ -262,9 +262,9 @@ LeftPanel.prototype.addTab = function(params, navElement, contentElement) { // '<div class="tngContainer"><div class="tng"></div></div>' navLink.innerHTML = '<div class="maintabdiv"><i class="fa ' + params.className + ' maintab"></i><br>' + name - + '</div>'; + + '</div>'; - navLink.onclick = function() { + navLink.onclick = function () { $(this).tab('show'); }; navLi.appendChild(navLink); @@ -278,42 +278,42 @@ LeftPanel.prototype.addTab = function(params, navElement, contentElement) { contentElement.appendChild(contentDiv); this._panels.push(new params.panelClass({ - element : contentDiv, - customMap : self.getMap(), - parent : self, + element: contentDiv, + customMap: self.getMap(), + parent: self })); }; -LeftPanel.prototype.hide = function() { +LeftPanel.prototype.hide = function () { this.getElement().style.display = "none"; }; -LeftPanel.prototype.show = function() { +LeftPanel.prototype.show = function () { this.getElement().style.display = "block"; }; -LeftPanel.prototype.setHeader = function(header) { +LeftPanel.prototype.setHeader = function (header) { this._header = header; }; -LeftPanel.prototype.getHeader = function() { +LeftPanel.prototype.getHeader = function () { return this._header; }; -LeftPanel.prototype.setLoginDialog = function(loginDialog) { +LeftPanel.prototype.setLoginDialog = function (loginDialog) { this._loginDialog = loginDialog; }; -LeftPanel.prototype.getLoginDialog = function() { +LeftPanel.prototype.getLoginDialog = function () { return this._loginDialog; }; -LeftPanel.prototype.destroy = function() { +LeftPanel.prototype.destroy = function () { var self = this; var promises = []; promises.push(self.getHeader().destroy()); var div = self.elementInfoDiv; - var destroyPanel = new Promise(function(resolve) { + var destroyPanel = new Promise(function (resolve) { if ($(div).hasClass("ui-dialog-content")) { $(div).dialog("destroy"); } diff --git a/frontend-js/src/test/js/gui/leftPanel/LeftPanel-test.js b/frontend-js/src/test/js/gui/leftPanel/LeftPanel-test.js index 16e19770d0ecf7526602a4ba23cbdd5ca1b4afe5..83ff1dfd4f2dfdd767d9f6a4256c0174175243fe 100644 --- a/frontend-js/src/test/js/gui/leftPanel/LeftPanel-test.js +++ b/frontend-js/src/test/js/gui/leftPanel/LeftPanel-test.js @@ -86,4 +86,72 @@ describe('LeftPanel', function() { }); }); + describe('showElementDetails', function() { + it('default', function() { + var map; + var panel; + return ServerConnector.getProject().then(function(project) { + map = helper.createCustomMap(project); + + helper.createSearchDbOverlay(map); + helper.createDrugDbOverlay(map); + helper.createChemicalDbOverlay(map); + helper.createMiRnaDbOverlay(map); + + panel = new LeftPanel({ + element : testDiv, + customMap : map + }); + + return panel.init(); + }).then(function() { + + var element = new IdentifiedElement({ + id : 329163, + type : "ALIAS", + modelId : map.getId() + }); + return map.getModel().getByIdentifiedElement(element, true); + }).then(function(alias) { + return panel.showElementDetails(alias); + }).then(function() { + assert.notOk($(panel.elementInfoDiv).dialog('isOpen')); + return panel.destroy(); + }); + }); + + it('when panel is hidden', function() { + var map; + var panel; + return ServerConnector.getProject().then(function(project) { + map = helper.createCustomMap(project); + + helper.createSearchDbOverlay(map); + helper.createDrugDbOverlay(map); + helper.createChemicalDbOverlay(map); + helper.createMiRnaDbOverlay(map); + + panel = new LeftPanel({ + element : testDiv, + customMap : map + }); + return panel.init(); + }).then(function() { + panel.hide(); + + var element = new IdentifiedElement({ + id : 329163, + type : "ALIAS", + modelId : map.getId() + }); + return map.getModel().getByIdentifiedElement(element, true); + }).then(function(alias) { + return panel.showElementDetails(alias); + }).then(function() { + assert.notOk($(panel.elementInfoDiv).dialog('isOpen')); + return panel.destroy(); + }); + }); + }); + });