From 37a51c126c771ddd1000eca49a841a1f4cde94b0 Mon Sep 17 00:00:00 2001
From: David Hoksza <david.hoksza@uni.lu>
Date: Fri, 9 Mar 2018 16:07:01 +0100
Subject: [PATCH] Fully working version of visualization (still some issues
with litemol not releasing webgl)
---
frontend-js/package.json | 1 +
frontend-js/src/main/css/global.css | 37 +++++++++
frontend-js/src/main/js/gui/ContextMenu.js | 11 ++-
frontend-js/src/main/js/gui/MapContextMenu.js | 11 ++-
.../src/main/js/map/AbstractCustomMap.js | 27 ++++++-
.../src/main/js/map/structure/Protestant.js | 81 +++++++++++++++++++
frontend-js/src/main/js/minerva.js | 7 +-
7 files changed, 168 insertions(+), 7 deletions(-)
create mode 100644 frontend-js/src/main/js/map/structure/Protestant.js
diff --git a/frontend-js/package.json b/frontend-js/package.json
index 5d8c93317d..d396e46e08 100644
--- a/frontend-js/package.json
+++ b/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": {
diff --git a/frontend-js/src/main/css/global.css b/frontend-js/src/main/css/global.css
index 153fdc543f..6a6ae693b2 100644
--- a/frontend-js/src/main/css/global.css
+++ b/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
diff --git a/frontend-js/src/main/js/gui/ContextMenu.js b/frontend-js/src/main/js/gui/ContextMenu.js
index 513666c83a..dd86e1a7a0 100644
--- a/frontend-js/src/main/js/gui/ContextMenu.js
+++ b/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);
diff --git a/frontend-js/src/main/js/gui/MapContextMenu.js b/frontend-js/src/main/js/gui/MapContextMenu.js
index 5fc7af7586..eae962f5cc 100644
--- a/frontend-js/src/main/js/gui/MapContextMenu.js
+++ b/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;
diff --git a/frontend-js/src/main/js/map/AbstractCustomMap.js b/frontend-js/src/main/js/map/AbstractCustomMap.js
index e64db0d71b..538b6c3f75 100644
--- a/frontend-js/src/main/js/map/AbstractCustomMap.js
+++ b/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
diff --git a/frontend-js/src/main/js/map/structure/Protestant.js b/frontend-js/src/main/js/map/structure/Protestant.js
new file mode 100644
index 0000000000..73e8fde30f
--- /dev/null
+++ b/frontend-js/src/main/js/map/structure/Protestant.js
@@ -0,0 +1,81 @@
+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
diff --git a/frontend-js/src/main/js/minerva.js b/frontend-js/src/main/js/minerva.js
index dd99ee55d2..3de20ec536 100644
--- a/frontend-js/src/main/js/minerva.js
+++ b/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 Protestant = require('./map/structure/Protestant');
+
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,
+ protestant: new Protestant(element, customMap)
});
customMap.setContextMenu(mapContextMenu);
--
GitLab