Merge branch '92-help-tips' into 'master'

Resolve "Help tips"

Closes #92

See merge request !32

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();

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);

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("&mu;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();

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;

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;

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();

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;

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];
         }
       }

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);
   });
-  
+
 });

web/src/main/webapp/resources/css/global.css

+.ui-widget-content a{text-decoration: underline;}
+
 table.mapInfoBoxResultsTable {
 	border-collapse: collapse;
 }

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----------------------------------*/