Fully working version of visualization (still some issues with litemol not releasing webgl)

frontend-js/package.json

@@ -35,6 +35,7 @@
     "log4js-memory-appender": "1.0.5",
     "mkdirp": "^0.5.1",
     "mocha": "^3.5.3",
+    "protestant": "git://github.com/davidhoksza/protestant.git",
     "uglifyjs": "^2.4.10"
   },
   "dependencies": {

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

@@ -623,4 +623,41 @@ h1 {
     font-weight: 700;
 }
 
+.dropdown-menu a.disabled-link, .dropdown-menu a.disabled-link:hover {
+    color: darkgrey;
+}
+
+.minerva-protestant-container {
+    position: absolute;
+    left:0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: white;
+    border: 30px solid rgba(0,0,0,0.5);
+    -moz-background-clip: padding;     /* Firefox 3.6 */
+    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
+    background-clip: padding-box;    
+    z-index: 100;
+    display: none;    
+}
+
+.minerva-protestant-close-button {
+    position: absolute;    
+    left: 3px;
+    top: 3px;
+    font-size: 17px;
+    padding-top: 2px;
+    background:rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    border-radius: 3px;
+    text-align: center;
+    z-index: 101
+}
+
+.minerva-protestant-close-button:hover{
+    background:rgba(0, 0, 0, 0.4);
 
+}
\ No newline at end of file

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

@@ -29,7 +29,8 @@ function ContextMenu(params) {
 ContextMenu.prototype = Object.create(AbstractGuiElement.prototype);
 ContextMenu.prototype.constructor = ContextMenu;
 
-ContextMenu.prototype.addOption = function (name, handler) {
+ContextMenu.prototype.addOption = function (name, handler, disabled) {
+  if (!disabled) disabled = false;
   var self = this;
   if (name instanceof SubMenu) {
     self.getElement().appendChild(name.getElement());
@@ -38,10 +39,14 @@ ContextMenu.prototype.addOption = function (name, handler) {
       type: "li"
     });
     var link = Functions.createElement({
-      type: "a",
-      href: "#",
+      type: "a",      
       content: name
     });
+    if (!disabled) {
+      link.href = "#";      
+    } else {
+      link.className = 'disabled-link';
+    }
     $(link).data("handler", handler);
     option.appendChild(link);
     self.getElement().appendChild(option);

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

@@ -11,6 +11,7 @@ function MapContextMenu(params) {
   var self = this;
 
   self._createMapContextMenuGui();
+  self.setProtestant(params.protestant);
 }
 
 MapContextMenu.prototype = Object.create(ContextMenu.prototype);
@@ -24,7 +25,7 @@ MapContextMenu.prototype._createMapContextMenuGui = function() {
   });
   self.addOption("Select mode", function() {
     return self.getMap().turnOnOffDrawing();
-  });
+  });  
 };
 
 MapContextMenu.prototype.init = function() {
@@ -37,4 +38,12 @@ MapContextMenu.prototype.init = function() {
   });
 };
 
+MapContextMenu.prototype.setProtestant = function(protestant){
+  this._protestant = protestant;
+}
+
+MapContextMenu.prototype.getProtestant = function(){
+  return this._protestant;
+}
+
 module.exports = MapContextMenu;

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

@@ -369,7 +369,9 @@ AbstractCustomMap.prototype.registerMapClickEvents = function () {
   // select last clicked map
   google.maps.event.addListener(this.getGoogleMap(), 'rightclick', function (mouseEvent) {
     customMap.setActiveSubmapId(self.getId());
-    customMap.setActiveSubmapClickCoordinates(self.fromLatLngToPoint(mouseEvent.latLng));
+    var coordinates = self.fromLatLngToPoint(mouseEvent.latLng)
+    customMap.setActiveSubmapClickCoordinates(coordinates);
+    activateProtestantLink(coordinates, self);
   });
 
   // prepare for image export
@@ -405,6 +407,29 @@ AbstractCustomMap.prototype.registerMapClickEvents = function () {
   });
 };
 
+function activateProtestantLink(coordinates, map){
+  ServerConnector.getClosestElementsByCoordinates({
+    modelId: map.getId(),
+    coordinates: coordinates,
+    count: 1
+  }).then(function(identifiedElements) {    
+    if (identifiedElements[0].type !== 'ALIAS') return Promise.reject(new Error());
+    return map.getModel().getAliasById(identifiedElements[0].id, true)
+  }).then (function(element){
+    for (var i =0; i < element.references.length; i++) {
+      var ref = element.references[i];
+      if (ref.constructor.name === 'Annotation' && ref.getType() === 'UNIPROT') {
+        var uniprotId = ref.getResource();
+        map.getContextMenu().getProtestant().activateInContextMenu(uniprotId);
+        return;
+      }
+    }
+    map.getContextMenu().getProtestant().deactivateInContextMenu();
+  }, function(){
+    map.getContextMenu().getProtestant().deactivateInContextMenu();
+  });
+}
+
 /**
  * It toggle drawing manager used on the map: if it's on then it will turn it
  * off, if it's off it will turn it on

frontend-js/src/main/js/map/structure/Protestant.js

+var functions = require('../../Functions');
+
+var ProtestantPlugin = require('protestant');
+
+function Protestant(containerParentElement, customMap) {    
+
+    var protestantDiv = functions.createElement({
+        type: "div",
+        id: "minervaProtestantContainer",
+        className: "minerva-protestant-container"
+      });
+      containerParentElement.appendChild(protestantDiv);
+
+    this.setContainerElement(protestantDiv);
+    this._customMap = customMap;
+}
+
+Protestant.prototype.setContainerElement = function (containerElement) {
+    this._containerElement = containerElement;
+}
+
+Protestant.prototype.getContainerElement = function () {
+    return this._containerElement;
+}
+
+
+function removeFromContextMenu(menu){    
+    $(menu.getElement()).find('li:contains("PROTESTANT")').remove();
+}
+
+Protestant.prototype.activateInContextMenu = function(uniprotId) {
+
+    var self = this;
+    
+    var menu = this._customMap.getContextMenu();
+    removeFromContextMenu(menu);
+    menu.addOption("Open PROTESTANT (" + uniprotId + ")", function() {
+        uniprotId ? self._activate(uniprotId) : self._activate('O60260');
+      }, false);
+}
+
+Protestant.prototype.deactivateInContextMenu = function() {
+    var menu = this._customMap.getContextMenu();
+    removeFromContextMenu(menu);
+    menu.addOption("Open PROTESTANT", null, true);
+}
+
+Protestant.prototype._deactivate = function () {
+    var container = this.getContainerElement();
+    container.style.display = 'none';
+    $(container).empty();
+    this.protestant = undefined;
+}
+
+Protestant.prototype._activate = function (uniprotId) {
+
+    var self = this;
+
+    var container = this.getContainerElement();
+    if (!container) return;
+
+    var protestantCloseButton = functions.createElement({
+        type: "div",    
+        className: "minerva-protestant-close-button",
+        content: 'x'
+    });  
+    protestantCloseButton.addEventListener('click', function(){
+        self._deactivate();    
+        return false;
+    });
+    container.appendChild(protestantCloseButton);
+
+    this.protestant = new ProtestantPlugin({
+        uniprotId: uniprotId,
+        containerId: container.id
+    });
+    container.style.display = 'block';
+}
+
+
+module.exports = Protestant;
\ No newline at end of file

frontend-js/src/main/js/minerva.js

@@ -21,6 +21,8 @@ var SelectionContextMenu = require('./gui/SelectionContextMenu');
 var GuiConnector = require('./GuiConnector');
 var OriginalServerConnector = require('./ServerConnector');
 
+var Protestant = require('./map/structure/Protestant');
+
 var Promise = require("bluebird");
 
 var logger = require('./logger');
@@ -81,7 +83,7 @@ function insertGoogleAnalyticsCode() {
   });
 }
 
-function createDivStructure(element) {
+function createDivStructure(element) {    
   var tableDiv = functions.createElement({
     type: "div",
     style: "display: table; width:100%; height: 100%"
@@ -297,7 +299,8 @@ function create(params) {
 
     mapContextMenu = new MapContextMenu({
       element: functions.getElementByName(element, "contextMenu"),
-      customMap: customMap
+      customMap: customMap,
+      protestant: new Protestant(element, customMap)
     });
     customMap.setContextMenu(mapContextMenu);