allow to show/hide overview image from plugin

CHANGELOG

 minerva (12.3.0~alpha.0) unstable; urgency=low
-  * Feature: annotators are more flexible - you can define set of input and outputs used by
-    annotator (#617)
-  * Small improvement: added current username next to logout button in admin panel (#660)
-  * Small improvement: New comment dialog does not contain content of previous comment dialog (#680)
+  * Feature: annotators are more flexible - you can define set of input and 
+    outputs used by annotator (#617)
+  * Small improvement: added current username next to logout button in admin 
+    panel (#660)
+  * Small improvement: New comment dialog does not contain content of previous 
+    comment dialog (#680)
   * Small improvement: Left logo is configurable (#731)
-  * Bug fix: progress bar of gene genome mapping upload is refreshing properly (#728)
+  * Small improvement: Plugin API provides list of overview images (#702)
+  * Small improvement: Plugin API allows to show/hide overview images (#702)
+  * Bug fix: progress bar of gene genome mapping upload is refreshing properly 
+    (#728)
 
 minerva (12.2.0~beta.2) unstable; urgency=medium
   * Bug fix: order of the overlays is defined explicitly also for general

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

@@ -255,7 +255,17 @@ OverviewDialog.prototype.drawClickableShapes = function (canvas, ratio) {
  *
  */
 OverviewDialog.prototype.destroy = function () {
-  $(this.getElement()).dialog("destroy");
+  var div = $(this.getElement());
+  if (div.hasClass("ui-dialog-content")) {
+    div.dialog("destroy");
+  }
+};
+
+/**
+ *
+ */
+OverviewDialog.prototype.close = function () {
+  $(this.getElement()).dialog('close');
 };
 
 module.exports = OverviewDialog;

frontend-js/src/main/js/gui/topMenu/TopMenu.js

@@ -228,6 +228,7 @@ TopMenu.prototype.init = function () {
       return self._overviewDialog.showOverview();
     };
     $(showOverviewButton).css("display", "inline-block");
+    self.getMap().setOverviewDialog(self._overviewDialog);
   }
 
   if (self.getServerConnector().getSessionData().getShowComments()) {

frontend-js/src/main/js/map/CustomMap.js

@@ -10,8 +10,9 @@ var Alias = require('./data/Alias');
 var CommentDialog = require('../gui/CommentDialog');
 var ConfigurationType = require('../ConfigurationType');
 var CustomMapOptions = require('./CustomMapOptions');
-var IdentifiedElement = require('./data/IdentifiedElement');
 var DataOverlay = require('./data/DataOverlay');
+var IdentifiedElement = require('./data/IdentifiedElement');
+var OverviewDialog = require('../gui/OverviewDialog');
 var Reaction = require('./data/Reaction');
 var ReferenceGenome = require('./data/ReferenceGenome');
 var SecurityError = require('../SecurityError');
@@ -1153,6 +1154,34 @@ CustomMap.prototype.getSelectedPolygon = function () {
   return this._selectedPolygon;
 };
 
+/**
+ *
+ * @param {OverviewDialog} overviewDialog
+ */
+CustomMap.prototype.setOverviewDialog = function (overviewDialog) {
+  this._overviewDialog = overviewDialog;
+};
+
+/**
+ *
+ * @returns {OverviewDialog}
+ */
+CustomMap.prototype.getOverviewDialog = function () {
+  var self = this;
+  if (this._overviewDialog === undefined) {
+    logger.warn("OverviewDialog is not defined");
+    var overviewDialogDiv = Functions.createElement({type: "div"});
+    self.getElement().appendChild(overviewDialogDiv);
+    this._overviewDialog = new OverviewDialog({
+      customMap: self,
+      configuration: self.getConfiguration(),
+      project: self.getProject(),
+      element: overviewDialogDiv
+    });
+  }
+  return this._overviewDialog;
+};
+
 /**
  *
  * @param {number} params.modelId
@@ -1244,6 +1273,13 @@ CustomMap.prototype.destroy = function () {
   if (self.getSelectionContextMenu() !== undefined) {
     self.getSelectionContextMenu().destroy();
   }
+
+  if (self._overviewDialog !== undefined) {
+    var div = $(self._overviewDialog.getElement());
+    if (div.hasClass("ui-dialog-content")) {
+      div.dialog("destroy");
+    }
+  }
 };
 
 /**

frontend-js/src/main/js/plugin/MinervaPluginProxy.js

@@ -47,6 +47,8 @@ var Promise = require("bluebird");
  * @property {function(): (Promise<DataOverlay[]>|*)} getVisibleDataOverlays
  * @property {function(number|DataOverlay): (Promise<DataOverlay[]>|*)} showDataOverlay
  * @property {function(number|DataOverlay): (Promise<DataOverlay[]>|*)} hideDataOverlay
+ * @property {function({id: number}): void} showOverviewImage
+ * @property {function(): void} hideOverviewImage
  * @property {function(*)} addListener
  * @property {function(*)} removeListener
  * @property {function(): Array} removeAllListeners
@@ -434,6 +436,21 @@ function createProjectMap(options) {
     hideDataOverlay: function (param) {
       return map.hideDataOverlay(param);
     },
+    /**
+     *
+     * @param {Object} param
+     * @param {number} param.id
+     */
+    showOverviewImage: function (param) {
+      map.getOverviewDialog().showOverview(param.id);
+    },
+    /**
+     *
+     */
+    hideOverviewImage: function () {
+      map.getOverviewDialog().close();
+    },
+
     /**
      *
      * @param {Object} param

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

@@ -12,33 +12,35 @@ var logger = require('../logger');
 
 describe('OverviewDialog', function () {
 
-  it('open image', function () {
-    helper.setUrl("http://test/?id=complex_model_with_images");
-    return ServerConnector.getProject().then(function (project) {
-      var map = helper.createCustomMap(project);
-
-      var dialog = new OverviewDialog({
-        element: testDiv,
-        customMap: map
-      });
+  describe('showOverview', function () {
+    it('valid image', function () {
+      helper.setUrl("http://test/?id=complex_model_with_images");
+      return ServerConnector.getProject().then(function (project) {
+        var map = helper.createCustomMap(project);
+
+        var dialog = new OverviewDialog({
+          element: testDiv,
+          customMap: map
+        });
 
-      dialog.showOverview(project.getOverviewImages()[1].idObject);
-      dialog.destroy();
+        dialog.showOverview(project.getOverviewImages()[1].idObject);
+        dialog.destroy();
+      });
     });
-  });
 
-  it('open invalid image', function () {
-    helper.setUrl("http://test/?id=complex_model_with_images");
-    return ServerConnector.getProject().then(function (project) {
-      var map = helper.createCustomMap(project);
+    it('invalid image', function () {
+      helper.setUrl("http://test/?id=complex_model_with_images");
+      return ServerConnector.getProject().then(function (project) {
+        var map = helper.createCustomMap(project);
 
-      var dialog = new OverviewDialog({
-        element: testDiv,
-        customMap: map
-      });
+        var dialog = new OverviewDialog({
+          element: testDiv,
+          customMap: map
+        });
 
-      dialog.showOverview(-1123);
-      dialog.destroy();
+        dialog.showOverview(-1123);
+        dialog.destroy();
+      });
     });
   });
 

frontend-js/src/test/js/plugin/MinervaPluginProxy-test.js

@@ -654,6 +654,25 @@ describe('MinervaPluginProxy', function () {
     });
   });
 
+  it('showOverviewImage', function () {
+    helper.setUrl("http://test/?id=complex_model_with_images");
+    var map, proxy, overlay;
+    var html;
+    return ServerConnector.getProject().then(function (project) {
+      map = helper.createCustomMap(project);
+      return map.init();
+    }).then(function () {
+      proxy = createProxy(map);
+      html = document.body.innerHTML;
+      return proxy.project.map.showOverviewImage(proxy.project.data.getOverviewImages()[0]);
+    }).then(function () {
+      assert.ok(html !== document.body.innerHTML);
+      return proxy.project.map.hideOverviewImage();
+    }).then(function () {
+      return map.destroy();
+    });
+  });
+
   describe('hideDataOverlay', function () {
     it('by id', function () {
       var map, proxy, overlay;