diff --git a/frontend-js/src/main/js/gui/leftPanel/ChemicalPanel.js b/frontend-js/src/main/js/gui/leftPanel/ChemicalPanel.js index 26f6f3c6b71406b7b7bba300978eb0cbdbb98031..ea848298f1135c906dc340cc4953aa1d76feab6c 100644 --- a/frontend-js/src/main/js/gui/leftPanel/ChemicalPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/ChemicalPanel.js @@ -10,9 +10,15 @@ var PanelControlElementType = require('../PanelControlElementType'); function ChemicalPanel(params) { params.panelName = "chemical"; + params.helpTip = '<p>source: Comparative Toxicogenomics Database <a target="_ctd" href="http://ctdbase.org/">ctdbase.org</a></p>' + + '<p>use only the full name of chemicals according to <a target="_ctd_chemicals" href="http://ctdbase.org/voc.go?type=chem/"> ctdbase/chem</a> for search</p>' + + '<p>only curated associations between genes and chemicals with direct evidence to ' + + 'Parkinson Disease (<a href="http://bioportal.bioontology.org/ontologies/1351?p=terms&conceptid=D010300" target="_blank">D010300</a>) are displayed</p>' + + '<p>separate multiple search by semicolon'; + AbstractDbPanel.call(this, params); - if (params.disease===undefined) { + if (params.disease === undefined) { this.disablePanel("DISEASE NOT DEFINED FOR PROJECT. PLEASE, DEFINE IT IN THE ADMIN SECTION."); } } @@ -29,7 +35,8 @@ ChemicalPanel.prototype.createPreamble = function(chemical) { result.appendChild(self.createParamLine("Description: ", chemical.getDescription())); result.appendChild(self.createArrayParamLine("Synonyms: ", chemical.getSynonyms())); result.appendChild(self.createParamLine("Direct Evidence: ", chemical.getDirectEvidence())); - result.appendChild(self.createAnnotations("Directe Evidence Publications: ", chemical.getDirectEvidenceReferences())); + result.appendChild(self + .createAnnotations("Directe Evidence Publications: ", chemical.getDirectEvidenceReferences())); result.appendChild(self.createAnnotations("Sources: ", chemical.getReferences())); result.appendChild(self.createNewLine()); } @@ -44,13 +51,13 @@ ChemicalPanel.prototype.createTableElement = function(target, icon) { ChemicalPanel.prototype.searchByQuery = function() { var self = this; var query = self.getControlElement(PanelControlElementType.SEARCH_INPUT).value; - + return self.getOverlayDb().searchByQuery(query); }; ChemicalPanel.prototype.init = function() { var query = ServerConnector.getSessionData().getChemicalQuery(); - if (query!==undefined) { + if (query !== undefined) { return this.getOverlayDb().searchByEncodedQuery(query); } else { return Promise.resolve(); diff --git a/frontend-js/src/main/js/gui/leftPanel/DrugPanel.js b/frontend-js/src/main/js/gui/leftPanel/DrugPanel.js index 35bb1ed00af18945b5ea8e11d0fddc5ea1a5e585..7a75adeedbf84d352cf0e8e6ce6d8b6131c31338 100644 --- a/frontend-js/src/main/js/gui/leftPanel/DrugPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/DrugPanel.js @@ -10,6 +10,9 @@ var PanelControlElementType = require('../PanelControlElementType'); function DrugPanel(params) { params.panelName = "drug"; + params.helpTip = '<p>source: <a target="_drugbank" href="http://www.drugbank.ca/">DrugBank</a> and' + + '<a target="_drugbank" href="https://www.ebi.ac.uk/chembl/">ChEMBL</a></p>' + + "<p>use of drug names, synonyms and brand names is supported<p>separate multiple search by semicolon</p>"; AbstractDbPanel.call(this, params); } DrugPanel.prototype = Object.create(AbstractDbPanel.prototype); diff --git a/frontend-js/src/main/js/gui/leftPanel/MiRnaPanel.js b/frontend-js/src/main/js/gui/leftPanel/MiRnaPanel.js index f18cc3f083a7adea47e71b777bea28b8c0338de4..52b9af9e396c5b7c6525c423e45769d52bc88460 100644 --- a/frontend-js/src/main/js/gui/leftPanel/MiRnaPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/MiRnaPanel.js @@ -10,6 +10,9 @@ var PanelControlElementType = require('../PanelControlElementType'); function MiRnaPanel(params) { params.panelName = "mirna"; + params.helpTip = '<p>source: <a target="_mirtarbase" href="http://mirtarbase.mbc.nctu.edu.tw/">miRTarBase</a></p>' + + '<p>use only mature sequence IDs according to <a target="_mirbase" href="http://www.mirbase.org">www.mirbase.org</a> (e.g., hsa-miR-125a-3p)</p>' + + '<p>only targets with strong evidence as defined by miRTarBase are displayed<p>separate multiple search by semicolon</p>'; AbstractDbPanel.call(this, params); } MiRnaPanel.prototype = Object.create(AbstractDbPanel.prototype); @@ -21,9 +24,9 @@ MiRnaPanel.prototype.createPreamble = function(miRna) { if (miRna === undefined || miRna.getName() === undefined) { result.appendChild(self.createLabel("NOT FOUND")); } else { - var line= document.createElement("div"); + var line = document.createElement("div"); line.appendChild(self.createLabel("μRna: ")); - line.appendChild(self.createLink("http://www.mirbase.org/cgi-bin/mirna_entry.pl?acc=",miRna.getName())); + line.appendChild(self.createLink("http://www.mirbase.org/cgi-bin/mirna_entry.pl?acc=", miRna.getName())); line.appendChild(self.createNewLine()); result.appendChild(line); @@ -45,7 +48,7 @@ MiRnaPanel.prototype.searchByQuery = function() { MiRnaPanel.prototype.init = function() { var query = ServerConnector.getSessionData().getMiRnaQuery(); - if (query!==undefined) { + if (query !== undefined) { return this.getOverlayDb().searchByEncodedQuery(query); } else { return Promise.resolve(); diff --git a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js index 4938fcc5f4d075b85e987889bb6cc5f59dc44886..99e5be32a5e80ea3677e71344f403494f68b7d5d 100644 --- a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js @@ -12,6 +12,9 @@ var Functions = require('../../Functions'); function OverlayPanel(params) { params.panelName = "overlays"; params.scrollable = true; + params.helpTip = "<p>Overlays tab allows to display or generate custom coloring of elements and interactions in the map.</p>" + + "<p>General overlays are overlays accessible for every user viewing the content.</p>" + + "<p>Custom overlays are user-provided overlays, this menu becomes available upon login (see below).</p>"; Panel.call(this, params); var self = this; diff --git a/frontend-js/src/main/js/gui/leftPanel/Panel.js b/frontend-js/src/main/js/gui/leftPanel/Panel.js index 0c1d683e28de744652eb1ff236ca48e7c6f18928..71c51b32961ba47743b1016b1ada0476e51cc490 100644 --- a/frontend-js/src/main/js/gui/leftPanel/Panel.js +++ b/frontend-js/src/main/js/gui/leftPanel/Panel.js @@ -20,6 +20,14 @@ function Panel(params) { if (params.scrollable) { $(self.getElement()).addClass("pre-scrollable"); + } else { + $(self.getElement()).css("overflow-y", "auto"); + } + + $(self.getElement()).css("position", "relative"); + if (params.helpTip !== undefined) { + self.createHelpButton(); + self.setHelpTip(params.helpTip); } GuiConnector.addWindowResizeEvent(function() { @@ -34,6 +42,33 @@ function Panel(params) { Panel.prototype = Object.create(AbstractGuiElement.prototype); Panel.prototype.constructor = Panel; +Panel.prototype.createHelpButton = function() { + var self = this; + var helpTipButton = Functions.createElement({ + type : "button", + style : "position: absolute; top:5px; right: 5px;width:18px", + content : '<span class="ui-icon ui-icon-help" style="margin-left: -0.5em;"/>', + }); + helpTipButton.onclick = function() { + var helpDialogDiv = Functions.createElement({ + type : "div", + content : self.getHelpTip(), + }); + $(helpDialogDiv).dialog({ + close : function(event, ui) { + $(this).dialog('destroy').remove(); + }, + position : { + my : "left top", + at : "left bottom", + of : helpTipButton + }, + }); + $('.ui-dialog').find("a").blur(); + }; + self.getElement().appendChild(helpTipButton); +}; + Panel.prototype.disablePanel = function(message) { var self = this; @@ -418,6 +453,14 @@ Panel.prototype.getParent = function() { return this._parent; }; +Panel.prototype.setHelpTip = function(helpTip) { + this._helpTip = helpTip; +}; + +Panel.prototype.getHelpTip = function() { + return this._helpTip; +}; + Panel.prototype.onresize = function() { var self = this; var footerPosition = window.innerHeight; diff --git a/frontend-js/src/main/js/gui/leftPanel/SearchPanel.js b/frontend-js/src/main/js/gui/leftPanel/SearchPanel.js index eb9088ade8cb2d86b0f7a931ed40c247484339ee..9f557a5bdf848f0fccedc9908e344197cd655ff9 100644 --- a/frontend-js/src/main/js/gui/leftPanel/SearchPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/SearchPanel.js @@ -14,6 +14,10 @@ var Functions = require('../../Functions'); function SearchPanel(params) { params.panelName = "search"; + params.helpTip = "<p>search tab allows to search for particular elements or interactions in the map</p>" + + "<p>perfect match tick box active: only terms with an exact match to the query will be returned</p>" + + "<p>separate multiple search by semicolon</p>"; + AbstractDbPanel.call(this, params); this.createSearchGui(); diff --git a/frontend-js/src/main/js/gui/leftPanel/SubmapPanel.js b/frontend-js/src/main/js/gui/leftPanel/SubmapPanel.js index 8c037cebdbcf7dce3d400eb661479f855ffbf272..4bf412882cfb7e4dbb7e1863ec4ff16351703c75 100644 --- a/frontend-js/src/main/js/gui/leftPanel/SubmapPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/SubmapPanel.js @@ -12,6 +12,8 @@ var Functions = require('../../Functions'); function SubmapPanel(params) { params.panelName = "submap"; + params.helpTip = "The Submaps tab summarizes all the submap networks uploaded together and linked to the main network of <b>'" + + params.parent.getMap().getProject().getName() + "'</b> project."; Panel.call(this, params); var self = this; diff --git a/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js b/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js index ba8e4c9a08899b56edab9a9303f864eb4530fdca..8c061adfa8601778368222d8a4491bffa41fd31a 100644 --- a/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js +++ b/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js @@ -85,7 +85,7 @@ describe('OverlayPanel', function() { var downloadButton; for (var i = 0; i < buttons.length; i++) { var name = buttons[i].getAttribute("name"); - if (name !== undefined && name.indexOf("download-overlay") >= 0) { + if (name !== undefined && name !== null && name.indexOf("download-overlay") >= 0) { downloadButton = buttons[i]; } } diff --git a/frontend-js/src/test/js/gui/leftPanel/SubmapPanel-test.js b/frontend-js/src/test/js/gui/leftPanel/SubmapPanel-test.js index 909889fcb22b5006ead007079e1ae141ce340d1d..00b2afcee70462ac7c3c6aef11b66d326c7e9b77 100644 --- a/frontend-js/src/test/js/gui/leftPanel/SubmapPanel-test.js +++ b/frontend-js/src/test/js/gui/leftPanel/SubmapPanel-test.js @@ -24,11 +24,16 @@ describe('SubmapPanel', function() { new SubmapPanel({ element : div, - customMap : map + customMap : map, + parent : { + getMap : function() { + return map; + } + } }); assert.equal(logger.getWarnings().length, 0); var buttons = div.getElementsByTagName("button"); - assert.equal(buttons.length, 0); + assert.equal(buttons.length, 1); }); - + }); diff --git a/web/src/main/webapp/resources/css/global.css b/web/src/main/webapp/resources/css/global.css index 00d7cc706f37d48ace8726b035430c40602bc054..98e7f575a38ca67dfad1f9514b41e8fd00f0f2ab 100644 --- a/web/src/main/webapp/resources/css/global.css +++ b/web/src/main/webapp/resources/css/global.css @@ -1,3 +1,5 @@ +.ui-widget-content a{text-decoration: underline;} + table.mapInfoBoxResultsTable { border-collapse: collapse; } diff --git a/web/src/main/webapp/resources/css/style.css b/web/src/main/webapp/resources/css/style.css index d5e030aac033e4f1f3ffb464621a6ebbd1f31edc..1b28a7043276466ad717cb8072fe0dd7aae80b6d 100644 --- a/web/src/main/webapp/resources/css/style.css +++ b/web/src/main/webapp/resources/css/style.css @@ -81,7 +81,6 @@ html,body { .ui-widget .ui-widget{font-size:1em;} .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{font-family:Verdana, Arial, sans-serif;font-size:1em;} .ui-widget-content{border:1px solid #cccccc;background:#F2F1F1 repeat-x scroll 0 0;color:#222222;} -.ui-widget-content a{color:#222222;} .ui-widget-header{border:none; background:#A3A3A3;color:#ffffff; font-weight:500; margin:0; padding:0;} .ui-widget-header a{color:#F9F7F7;} /* Interaction states----------------------------------*/