Merge branch 'structure-viewer' into 'master'

Structure viewer

See merge request piotr.gawron/minerva!256

frontend-js/package-lock.json

@@ -10,6 +10,21 @@
       "integrity": "sha512-bYDPZTX0/s1aihdjLuAgogUAT5M+TpoWChEMea2p0yOcfn5bu3k6cJb9cp6nw268XeSNIGGr+4+/8V5K6BGzLQ==",
       "dev": true
     },
+    "@types/react": {
+      "version": "15.6.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-15.6.14.tgz",
+      "integrity": "sha512-k6YJBmHfzkCtk3iT6aN2hclkPYL2fxlSc3dW//G2kENlmMJ/V+pKhqsHdJJeVluIi1bA296cCLLGATLm7WXToQ==",
+      "dev": true
+    },
+    "@types/react-dom": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-15.5.7.tgz",
+      "integrity": "sha512-XGLjgNtPnBuO1cITYWZAk4KbH0UEDqMg2kuG3xx0UgnrcSd6ijO57Fp9rimmrDKcBnx3b2vFQuEYRXu2GihRYQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "15.6.14"
+      }
+    },
     "JSONStream": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
@@ -20,6 +35,43 @@
         "through": "2.3.8"
       }
     },
+    "MolStar": {
+      "version": "git://github.com/davidhoksza/MolStar.git#45c20d0ab3ed81bdb555349b953b8add61ae1c55",
+      "dev": true,
+      "requires": {
+        "ProtVista": "git://github.com/davidhoksza/protvista.git#4e4bb737ba1e183291505bd25f8bae2e651ce21e",
+        "downloadjs": "1.4.7",
+        "jquery": "3.3.1",
+        "litemol": "github:dsehnal/LiteMol#a5419c696faa84530dd93acd55b747cf8136902b"
+      },
+      "dependencies": {
+        "jquery": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+          "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
+          "dev": true
+        }
+      }
+    },
+    "ProtVista": {
+      "version": "git://github.com/davidhoksza/protvista.git#4e4bb737ba1e183291505bd25f8bae2e651ce21e",
+      "dev": true,
+      "requires": {
+        "d3": "3.5.17",
+        "file-saver": "1.3.3",
+        "jquery": "2.2.4",
+        "jszip": "3.1.4",
+        "underscore": "1.8.3"
+      },
+      "dependencies": {
+        "jquery": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
+          "integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI=",
+          "dev": true
+        }
+      }
+    },
     "abab": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.3.tgz",
@@ -1048,6 +1100,12 @@
         "domelementtype": "1.3.0"
       }
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=",
+      "dev": true
+    },
     "dual-listbox": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/dual-listbox/-/dual-listbox-1.0.7.tgz",
@@ -1992,6 +2050,14 @@
         "immediate": "3.0.6"
       }
     },
+    "litemol": {
+      "version": "github:dsehnal/LiteMol#a5419c696faa84530dd93acd55b747cf8136902b",
+      "dev": true,
+      "requires": {
+        "@types/react": "15.6.14",
+        "@types/react-dom": "15.5.7"
+      }
+    },
     "lodash": {
       "version": "4.17.4",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",

frontend-js/package.json

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

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

@@ -636,6 +636,45 @@ table.dataTable tbody td.no_padding, table.dataTable thead th.no_padding {
     padding-right: 3px;
 }
 
+.dropdown-menu a.disabled-link, .dropdown-menu a.disabled-link:hover {
+    color: darkgrey;
+}
+
+.minerva-molstar-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-molstar-close-button {
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    font-size: 17px;
+    padding-top: 2px;
+    background:rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    width: 28px;
+    height: 28px;
+    border-radius: 3px;
+    text-align: center;
+    z-index: 101
+}
+
+.minerva-molstar-close-button:hover{
+    background:rgba(0, 0, 0, 0.4);
+
+}
+
 button:disabled {
     color: graytext;
 }

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.setMolStar(params.molStar);
 }
 
 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.setMolStar = function(molStar){
+  this._molStar = molStar;
+}
+
+MapContextMenu.prototype.getMolStar = function(){
+  return this._molStar;
+}
+
 module.exports = MapContextMenu;

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

@@ -375,7 +375,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);
+    activateMolStarLink(coordinates, self);
   });
 
   // prepare for image export
@@ -411,6 +413,40 @@ AbstractCustomMap.prototype.registerMapClickEvents = function () {
   });
 };
 
+function activateMolStarLink(coordinates, map){
+
+  ServerConnector.getClosestElementsByCoordinates({
+    modelId: map.getId(),
+    coordinates: coordinates,
+    count: 1
+  }).then(function(identifiedElements){
+    return map.getDistance({
+      modelId: map.getId(),
+      coordinates: coordinates,
+      element: identifiedElements[0]
+    }).then(function(distance){
+      if (distance == 0) return identifiedElements;
+      else return Promise.reject(new Error());
+    })
+
+  }).then(function(identifiedElements) {
+    if (identifiedElements[0].type !== 'ALIAS') return Promise.reject(new Error());
+    return map.getModel().getAliasById(identifiedElements[0].id, true)
+  }).then (function(element){
+    var uniprotIds = [];
+    for (var i =0; i < element.references.length; i++) {
+      var ref = element.references[i];
+      if (ref.constructor.name === 'Annotation' && ref.getType() === 'UNIPROT') {
+          uniprotIds.push(ref.getResource());
+      }
+    }
+    if (uniprotIds.length > 0) map.getContextMenu().getMolStar().activateInContextMenu(uniprotIds);
+    else map.getContextMenu().getMolStar().deactivateInContextMenu();
+  }, function(){
+    map.getContextMenu().getMolStar().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/MolStar.js

+var Functions = require('../../Functions');
+var SubMenu = require('../../gui/SubMenu');
+
+
+function MolStar(containerParentElement, customMap) {
+
+  var molstarDiv = Functions.createElement({
+    type: "div",
+    id: "minervaMolStarContainer",
+    className: "minerva-molstar-container"
+  });
+  containerParentElement.appendChild(molstarDiv);
+
+  this.setContainerElement(molstarDiv);
+  this._customMap = customMap;
+}
+
+MolStar.prototype.setContainerElement = function (containerElement) {
+  this._containerElement = containerElement;
+};
+
+MolStar.prototype.getContainerElement = function () {
+  return this._containerElement;
+};
+
+function removeFromContextMenu(menu) {
+  $(menu.getElement()).find('li:contains("MolStar")').remove();
+}
+
+MolStar.prototype.activateInContextMenu = function (uniprotIds) {
+
+  var self = this;
+  var menu = this._customMap.getContextMenu();
+  removeFromContextMenu(menu);
+
+  var submenu = new SubMenu({
+    element: Functions.createElement({type: "li"}),
+    name: "Open MolStar",
+    customMap: self._customMap
+  });
+  for (var i = 0; i < uniprotIds.length; i++) {
+    var uniprotId = uniprotIds[i];
+    submenu.addOption(uniprotId, function () {
+      self._activate(uniprotId);
+    }, false);
+  }
+  menu.addOption(submenu);
+
+};
+
+MolStar.prototype.deactivateInContextMenu = function () {
+  var menu = this._customMap.getContextMenu();
+  removeFromContextMenu(menu);
+  menu.addOption("Open MolStar (no UniProt ID available)", function () {
+  }, true);
+};
+
+MolStar.prototype._deactivate = function () {
+  var container = this.getContainerElement();
+  container.style.display = 'none';
+  $(container).empty();
+  this.molStar.destroy();
+  this.molStar = undefined;
+};
+
+MolStar.prototype._activate = function (uniprotId) {
+
+  var self = this;
+
+  var container = this.getContainerElement();
+  if (!container) return;
+
+  var molStarCloseButton = Functions.createElement({
+    type: "div",
+    className: "minerva-molstar-close-button",
+    content: 'x'
+  });
+  molStarCloseButton.addEventListener('click', function () {
+    self._deactivate();
+    return false;
+  });
+  container.appendChild(molStarCloseButton);
+
+  var MolStarPlugin = require('MolStar');
+
+  this.molStar = new MolStarPlugin({
+    uniprotId: uniprotId,
+    containerId: container.id
+  });
+  container.style.display = 'block';
+};
+
+
+module.exports = MolStar;

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

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

frontend-js/src/test/js/mocha-config.js

@@ -101,6 +101,11 @@ before(function () {
     return {};
   };
 // ---
+  // MolStar is inproperly packed
+  global.MolStar = function(){
+
+  };
+// ---
 
   require('jquery-ui-dist/jquery-ui.js');