plugin dialog contains help button with short description how to use it

frontend-js/src/main/css/global.css

@@ -399,6 +399,13 @@ table.minerva-window-drug-table td {
     width: 18px;
 }
 
+.minerva-plugin-dialog .minerva-help-button {
+    position: absolute;
+    top: 4px;
+    right: 1px;
+    width: 18px;
+}
+
 .minerva-left-panel .minerva-label, .minerva-element-info-div .minerva-label {
     font-weight: 900;
     line-height: 24px;

frontend-js/src/main/js/Export.js

@@ -54,7 +54,8 @@ Export.prototype._createGui = function () {
   new Header({
     element: headerDiv,
     customMap: null,
-    project: self.getProject()
+    project: self.getProject(),
+    configuration: self.getConfiguration()
   });
   self.getElement().appendChild(headerDiv);
 

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

@@ -88,7 +88,8 @@ Header.prototype._createHeaderGui = function (guiParams) {
     document.body.appendChild(optionsElement);
     self._optionsMenu = new OptionsMenu({
       customMap: self.getMap(),
-      element: optionsElement
+      element: optionsElement,
+      configuration: self.getConfiguration()
     });
 
     var menuLink = Functions.createElement({

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

@@ -40,7 +40,8 @@ OptionsMenu.prototype._createMenuGui = function () {
       self._pluginDialog = new PluginDialog({
         element: document.createElement("div"),
         customMap: self.getMap(),
-        pluginManager: self.getPluginManager()
+        pluginManager: self.getPluginManager(),
+        configuration: self.getConfiguration()
       });
       initPromise = self._pluginDialog.init();
     }

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

@@ -4,6 +4,7 @@ var GuiConnector = require('../GuiConnector');
 var GuiUtils = require('./leftPanel/GuiUtils');
 
 var Functions = require('../Functions');
+var Promise = require('bluebird');
 
 /**
  *
@@ -34,7 +35,7 @@ PluginDialog.prototype.constructor = PluginDialog;
  */
 PluginDialog.prototype._createPluginGui = function () {
   var self = this;
-  var guiUtils = new GuiUtils();
+  var guiUtils = new GuiUtils(self.getConfiguration());
 
   self.getElement().innerHTML = "";
 
@@ -66,6 +67,13 @@ PluginDialog.prototype._createPluginGui = function () {
     }
   });
   pluginFormTab.appendChild(guiUtils.createTableRow([pluginUrlLabel, pluginUrlInput, loadPluginButton]));
+  var helpButton = guiUtils.createHelpButton(
+    "Plugins allow creating client-side custom visualizations, independent from the core functionalities of MINERVA. " +
+    "In the URL field one needs to supply a URL to the plugin, written in JavaScript. To learn how to write your own " +
+    "plugins, please, visit the <a href='https://git-r3lab.uni.lu/minerva/plugins/starter-kit' target='_starter_kit'>“Plugin starter kit” repository</a>. " +
+    "For example, you can use a link for an example plugin: <a href='https://minerva-dev.lcsb.uni.lu/plugins/starter-kit/plugin.js' " +
+    "target='_starter_kit_source'>https://minerva-dev.lcsb.uni.lu/plugins/starter-kit/plugin.js</a>");
+  self.getElement().appendChild(helpButton);
 
   var pluginManager = self.getPluginManager();
 
@@ -135,13 +143,12 @@ PluginDialog.prototype._createPluginGui = function () {
  */
 PluginDialog.prototype.init = function () {
   var self = this;
-  return ServerConnector.getConfiguration().then(function (configuration) {
-    var pluginsData = configuration.getPluginsData();
-    for (var i = 0; i < pluginsData.length; i++) {
-      var pluginData = pluginsData[i];
-      self._knownPlugins.push({url: ServerConnector.getServerBaseUrl() + pluginData.url});
-    }
-  });
+  var pluginsData = self.getConfiguration().getPluginsData();
+  for (var i = 0; i < pluginsData.length; i++) {
+    var pluginData = pluginsData[i];
+    self._knownPlugins.push({url: self.getServerConnector().getServerBaseUrl() + pluginData.url});
+  }
+  return Promise.resolve();
 };
 
 /**
@@ -155,11 +162,12 @@ PluginDialog.prototype.open = function () {
     $(div).dialog({
       autoOpen: false,
       resizable: false,
-      width: 400
+      width: 400,
+      classes: {"ui-dialog": "minerva-plugin-dialog"}
     });
   }
 
-  $(div).dialog('option', 'title', 'PLUGINS');
+  $(div).dialog('option', 'title', 'PLUGINS [BETA]');
   $(div).dialog("open");
 };
 

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

@@ -57,7 +57,8 @@ LeftPanel.prototype._createPanelGui = function () {
   var header = new Header({
     element: headerDiv,
     customMap: self.getMap(),
-    optionsMenu: true
+    optionsMenu: true,
+    configuration: self.getConfiguration()
   });
   self.getElement().appendChild(headerDiv);
 

frontend-js/src/test/js/gui/OptionsMenu-test.js

@@ -28,7 +28,8 @@ describe('OptionsMenu', function () {
     var div = document.createElement("div");
     var menu = new OptionsMenu({
       element: div,
-      customMap: map
+      customMap: map,
+      configuration: helper.getConfiguration()
     });
     var pluginManager;
     return ServerConnector.getProject().then(function (project) {