Commit d0a7a012 authored by Piotr Gawron's avatar Piotr Gawron
Browse files

Merge branch 'structure-viewer' into 'master'

Structure viewer

See merge request piotr.gawron/minerva!256
parents b776f926 46ee3622
Pipeline #4324 passed with stages
in 6 minutes and 18 seconds
......@@ -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",
......
......@@ -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": {
......
......@@ -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;
}
......@@ -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);
......
......@@ -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;
......@@ -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
......
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;
......@@ -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);
......
......@@ -101,6 +101,11 @@ before(function () {
return {};
};
// ---
// MolStar is inproperly packed
global.MolStar = function(){
};
// ---
require('jquery-ui-dist/jquery-ui.js');
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment