implementation of Dialog that allows to change annotators

annotation/src/main/java/lcsb/mapviewer/annotation/services/annotators/BiocompendiumAnnotator.java

@@ -32,7 +32,9 @@ import lcsb.mapviewer.converter.model.celldesigner.annotation.RestAnnotationPars
 import lcsb.mapviewer.model.map.BioEntity;
 import lcsb.mapviewer.model.map.MiriamData;
 import lcsb.mapviewer.model.map.MiriamType;
+import lcsb.mapviewer.model.map.species.Gene;
 import lcsb.mapviewer.model.map.species.Protein;
+import lcsb.mapviewer.model.map.species.Rna;
 
 /**
  * This class is responsible for connection to Vencata annotation service. The
@@ -72,7 +74,7 @@ public class BiocompendiumAnnotator extends ElementAnnotator implements IExterna
 	 * Default constructor.
 	 */
 	public BiocompendiumAnnotator() {
-		super(BiocompendiumAnnotator.class, new Class[] { Protein.class, Protein.class, Protein.class }, true);
+		super(BiocompendiumAnnotator.class, new Class[] { Protein.class, Gene.class, Rna.class }, true);
 	}
 
 	@Override

frontend-js/.idea/inspectionProfiles/Project_Default.xml

-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="JSHint" enabled="true" level="ERROR" enabled_by_default="true" />
-  </profile>
-</component>
\ No newline at end of file

frontend-js/package.json

@@ -41,6 +41,7 @@
     "file-saver": "^1.3.3",
     "http-status-codes": "^1.3.0",
     "js-cookie": "^2.1.3",
+    "jstree": "^3.3.4",
     "log4js": "0.6.38",
     "mkdirp": "^0.5.1",
     "pileup": "^0.6.8",

frontend-js/src/main/js/Configuration.js

@@ -4,6 +4,7 @@
 
 var logger = require('./logger');
 
+var Annotator = require('./map/data/Annotator');
 var ConfigurationType = require('./ConfigurationType');
 var MiriamType = require('./map/data/MiriamType');
 var PrivilegeType = require('./map/data/PrivilegeType');
@@ -50,6 +51,7 @@ function Configuration(json) {
   self.setMiriamTypes(json.miriamTypes);
   self.setModificationStateTypes(json.modificationStateTypes);
   self.setPrivilegeTypes(json.privilegeTypes);
+  self.setAnnotators(json.annotators);
 }
 
 Configuration.prototype.setOption = function (type, value) {
@@ -94,6 +96,37 @@ Configuration.prototype.getElementTypeNames = function () {
   return result;
 };
 
+Configuration.prototype.getParentType = function (elementType) {
+  var i;
+  for (var i = 0; i < this._elementTypes.length; i++) {
+    if (this._elementTypes[i].className === elementType.parentClass) {
+      return this._elementTypes[i];
+    }
+  }
+  for (var i = 0; i < this._reactionTypes.length; i++) {
+    if (this._reactionTypes[i].className === elementType.parentClass) {
+      return this._reactionTypes[i];
+    }
+  }
+  return null;
+};
+
+Configuration.prototype.getSimpleElementTypeNames = function () {
+  var classesToBeExcluded = {};
+  var i;
+  for (i = 0; i < this._elementTypes.length; i++) {
+    classesToBeExcluded[this._elementTypes[i].parentClass] = true;
+  }
+  var result = [];
+  for (i = 0; i < this._elementTypes.length; i++) {
+    if (classesToBeExcluded[this._elementTypes[i].className] === undefined) {
+      result.push(this._elementTypes[i].name);
+    }
+  }
+  return result;
+};
+
+
 Configuration.prototype.setReactionTypes = function (reactionTypes) {
   this._reactionTypes = reactionTypes;
 };
@@ -156,4 +189,42 @@ Configuration.prototype.getModificationStateTypeByName = function (name) {
   return null;
 };
 
+Configuration.prototype.setAnnotators = function (annotators) {
+  this._annotators = [];
+  for (var key in annotators) {
+    if (annotators.hasOwnProperty(key)) {
+      var annotator = annotators[key];
+      this._annotators.push(new Annotator(annotators[key], this));
+    }
+  }
+};
+
+Configuration.prototype.getElementAnnotators = function (type) {
+  if (type === undefined) {
+    return this._annotators;
+  }
+  var result = [];
+  for (var i = 0; i < this._annotators.length; i++) {
+    var annotator = this._annotators[i];
+    var ok = false;
+    var elementTypes = annotator.getElementTypes();
+    for (var j = 0; j < elementTypes.length; j++) {
+      var elementType = elementTypes[j];
+      var checkedType = type;
+      while (checkedType !== null) {
+        if (elementType.className === checkedType.className) {
+          ok = true;
+          checkedType = null;
+        } else {
+          checkedType = this.getParentType(checkedType);
+        }
+      }
+    }
+    if (ok) {
+      result.push(annotator);
+    }
+  }
+  return result;
+};
+
 module.exports = Configuration;

frontend-js/src/main/js/Functions.js

@@ -12,7 +12,7 @@ var Functions = {};
  * Bounds value between opt_min and opt_max (result will be not smaller than
  * opt_min and not bigger than opt_max).
  */
-Functions.bound = function(value, minVal, maxVal) {
+Functions.bound = function (value, minVal, maxVal) {
   if (minVal !== null && minVal !== undefined) {
     value = Math.max(value, minVal);
   }
@@ -22,15 +22,15 @@ Functions.bound = function(value, minVal, maxVal) {
   return value;
 };
 
-Functions.degreesToRadians = function(deg) {
+Functions.degreesToRadians = function (deg) {
   return deg * (Math.PI / 180);
 };
 
-Functions.radiansToDegrees = function(rad) {
+Functions.radiansToDegrees = function (rad) {
   return rad / (Math.PI / 180);
 };
 
-Functions.intToColorString = function(value) {
+Functions.intToColorString = function (value) {
   /* jslint bitwise: true */
   var trimmedValue = (value & 0xFFFFFF);
   var colorStr = trimmedValue.toString(16);
@@ -42,24 +42,24 @@ Functions.intToColorString = function(value) {
 
 /**
  * Returns stack trace.
- * 
+ *
  * @returns stack trace
  */
-Functions.stackTrace = function() {
+Functions.stackTrace = function () {
   var err = new Error();
   return err.stack;
 };
 
 /**
  * Returns the position of the element on html page.
- * 
+ *
  * @param element
  *          element for which we want to get the position (top left corner)
- * 
+ *
  * @return coordinates of the element
- * 
+ *
  */
-Functions.getPosition = function(element) {
+Functions.getPosition = function (element) {
   var xPosition = 0;
   var yPosition = 0;
 
@@ -69,8 +69,8 @@ Functions.getPosition = function(element) {
     element = element.offsetParent;
   }
   return {
-    x : xPosition,
-    y : yPosition
+    x: xPosition,
+    y: yPosition
   };
 };
 
@@ -78,15 +78,15 @@ Functions.getPosition = function(element) {
  * Checks if the point given as a first argument belongs to a polygon defined as
  * a second parameter. Both: point and polygon should use google.map.point
  * class.
- * 
+ *
  * @param point
  *          point which we want to check
- * 
+ *
  * @param polygon
  *          polygon where we check the point
  */
 
-Functions.pointInsidePolygon = function(point, polygon) {
+Functions.pointInsidePolygon = function (point, polygon) {
   var x = point.x;
   var y = point.y;
 
@@ -107,7 +107,7 @@ Functions.pointInsidePolygon = function(point, polygon) {
  * using. Right now only IE is supported.
  */
 Functions.browser = {
-  init : function() {
+  init: function () {
 
     this.name = "Unknown";
     this.version = "Unknown";
@@ -142,29 +142,29 @@ Functions.browser.init();
 
 /**
  * Returns true if parameter is integer, false otherwise.
- * 
+ *
  * @param n
  *          object to check
  */
-Functions.isInt = function(n) {
+Functions.isInt = function (n) {
   return Number(n) === n && n % 1 === 0;
 };
 
 /**
  * Returns true if parameter is a DOM element, false otherwise.
- * 
+ *
  * @param o
  *          object to check
  */
-Functions.isDomElement = function(o) {
+Functions.isDomElement = function (o) {
   if (!o) {
     return false;
   }
   return (typeof HTMLElement === "object" ? o instanceof HTMLElement : // DOM2
-  o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string");
+    o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string");
 };
 
-Functions.overlayToColor = function(elementOverlay) {
+Functions.overlayToColor = function (elementOverlay) {
   var self = this;
   /* jslint bitwise: true */
   if (elementOverlay === null || elementOverlay === undefined) {
@@ -187,7 +187,7 @@ Functions.overlayToColor = function(elementOverlay) {
       promiseColor = ServerConnector.getSimpleOverlayColorInt();
     }
 
-    return promiseColor.then(function(color) {
+    return promiseColor.then(function (color) {
 
       ratio = 1 - ratio;
       var MAX_RED = 0xFF0000;
@@ -216,7 +216,7 @@ Functions.overlayToColor = function(elementOverlay) {
   }
 };
 
-Functions.getElementByName = function(element, name) {
+Functions.getElementByName = function (element, name) {
   if (element !== undefined) {
     if (element.getAttribute("name") === name) {
       return element;
@@ -233,7 +233,7 @@ Functions.getElementByName = function(element, name) {
   return undefined;
 };
 
-Functions.createElement = function(params) {
+Functions.createElement = function (params) {
   var result = document.createElement(params.type);
   if (params.id !== null && params.id !== undefined) {
     result.id = params.id;
@@ -291,7 +291,8 @@ function distToSegmentSquared(p, v, w) {
 
   return dist2(p, new google.maps.Point(v.x + t * (w.x - v.x), v.y + t * (w.y - v.y)));
 }
-Functions.distance = function(p1, el2) {
+
+Functions.distance = function (p1, el2) {
   if (el2 instanceof google.maps.Point) {
     var p2 = el2;
     return Math.sqrt((Math.pow(p1.x - p2.x, 2)) + (Math.pow(p1.y - p2.y, 2)));
@@ -299,4 +300,11 @@ Functions.distance = function(p1, el2) {
     return Math.sqrt(distToSegmentSquared(p1, el2.start, el2.end));
   }
 };
+
+Functions.removeChildren = function (element) {
+  while (element.firstChild) {
+    element.removeChild(element.firstChild);
+  }
+};
+
 module.exports = Functions;

frontend-js/src/main/js/gui/admin/AddProjectDialog.js

@@ -4,7 +4,9 @@
 var Promise = require("bluebird");
 
 var AbstractGuiElement = require('../AbstractGuiElement');
+var ChooseAnnotatorsDialog = require('./ChooseAnnotatorsDialog');
 var GuiConnector = require('../../GuiConnector');
+var UserPreferences = require("../../map/data/UserPreferences");
 
 var Functions = require('../../Functions');
 var logger = require('../../logger');
@@ -88,6 +90,22 @@ AddProjectDialog.prototype.addTab = function (params) {
   params.tabContentDiv.appendChild(contentDiv);
 };
 
+AddProjectDialog.prototype.showAnnotatorsDialog = function () {
+  var self = this;
+  var promise;
+  if (self._annotatorsDialog === undefined) {
+    self._annotatorsDialog = new ChooseAnnotatorsDialog({
+      element: Functions.createElement({type: "div"}),
+      customMap: null
+    });
+    promise = self._annotatorsDialog.init();
+  } else {
+    promise = Promise.resolve();
+  }
+  return promise.then(function () {
+    return self._annotatorsDialog.open();
+  });
+};
 AddProjectDialog.prototype.createGeneralTabContent = function () {
   var self = this;
 
@@ -125,14 +143,14 @@ AddProjectDialog.prototype.createGeneralTabContent = function () {
     var file = e.arg;
     return self.setFileParserForFilename(file.name);
   });
-  table.appendChild(self.createRow(guiUtils.createLabel("Upload file: "), fileInput));
+  table.appendChild(self.createRow([guiUtils.createLabel("Upload file: "), fileInput]));
 
   var fileFormatSelect = Functions.createElement({
     type: "select",
     name: "project-format"
   });
 
-  table.appendChild(self.createRow(guiUtils.createLabel("File format: "), fileFormatSelect));
+  table.appendChild(self.createRow([guiUtils.createLabel("File format: "), fileFormatSelect]));
 
   table.appendChild(self.createInputRow("ProjectId:", "id", "project-id"));
   table.appendChild(self.createInputRow("Project name:", "UNKNOWN DISEASE MAP", "project-name"));
@@ -141,7 +159,16 @@ AddProjectDialog.prototype.createGeneralTabContent = function () {
   table.appendChild(self.createInputRow("Version:", "", "project-version"));
   table.appendChild(self.createInputRow("Notify email:", "", "project-notify-email"));
 
-  table.appendChild(self.createCheckboxRow("Annotate model automatically:", false, "project-annotate-automatically"));
+  var showAnnotatorsButton = Functions.createElement({
+    type: "button",
+    name: "project-show-annotators",
+    content: "Advanced",
+    onclick: function () {
+      return self.showAnnotatorsDialog().then(null, GuiConnector.alert);
+    }
+  });
+
+  table.appendChild(self.createCheckboxRow("Annotate model automatically:", false, "project-annotate-automatically", [showAnnotatorsButton]));
   table.appendChild(self.createCheckboxRow("Verify manual annotations:", false, "project-verify-annotations"));
   table.appendChild(self.createCheckboxRow("Cache data:", false, "project-cache-data"));
   table.appendChild(self.createCheckboxRow("Auto margin:", true, "project-auto-margin"));
@@ -188,10 +215,10 @@ AddProjectDialog.prototype.createInputRow = function (labelName, defaultValue, i
     style: "display:table-cell",
     content: "<input name='" + inputName + "' value='" + defaultValue + "'/>"
   });
-  return this.createRow(label, input);
+  return this.createRow([label, input]);
 };
 
-AddProjectDialog.prototype.createCheckboxRow = function (labelName, defaultValue, inputName) {
+AddProjectDialog.prototype.createCheckboxRow = function (labelName, defaultValue, inputName, elements) {
   var label = new Functions.createElement({
     type: "div",
     style: "display:table-cell",
@@ -206,32 +233,32 @@ AddProjectDialog.prototype.createCheckboxRow = function (labelName, defaultValue
     style: "display:table-cell",
     content: "<input type='checkbox' name='" + inputName + "' " + checked + "/>"
   });
-  return this.createRow(label, checkbox);
+  var rowElements = [label, checkbox];
+  if (elements !== undefined) {
+    for (var i = 0; i < elements.length; i++) {
+      rowElements.push(elements[i]);
+    }
+  }
+  return this.createRow(rowElements);
 };
 
-AddProjectDialog.prototype.createRow = function (label, value) {
+AddProjectDialog.prototype.createRow = function (elements) {
   var result = new Functions.createElement({
     type: "div",
     style: "display:table-row"
   });
-  if (label.tagName.toLowerCase() !== 'div') {
-    var labelContainer = new Functions.createElement({
-      type: "div",
-      style: "display:table-cell"
-    });
-    labelContainer.appendChild(label);
-    label = labelContainer;
-  }
-  result.appendChild(label);
-  if (value.tagName.toLowerCase() !== 'div') {
-    var valueContainer = new Functions.createElement({
-      type: "div",
-      style: "display:table-cell"
-    });
-    valueContainer.appendChild(value);
-    value = valueContainer;
+  for (var i = 0; i < elements.length; i++) {
+    var element = elements[i];
+    if (element.tagName.toLowerCase() !== 'div') {
+      var labelContainer = new Functions.createElement({
+        type: "div",
+        style: "display:table-cell"
+      });
+      labelContainer.appendChild(element);
+      element = labelContainer;
+    }
+    result.appendChild(element);
   }
-  result.appendChild(value);
   return result;
 
 };
@@ -349,7 +376,14 @@ AddProjectDialog.prototype.bindProjectUploadPreferences = function (user, type,
 };
 
 AddProjectDialog.prototype.destroy = function () {
-  $(this.getElement()).dialog("destroy");
+  var self = this;
+  var div = self.getElement();
+  if ($(div).hasClass("ui-dialog-content")) {
+    $(div).dialog("destroy");
+  }
+  if (self._annotatorsDialog !== undefined) {
+    self._annotatorsDialog.destroy();
+  }
 };
 
 AddProjectDialog.prototype.open = function () {

frontend-js/src/main/js/gui/admin/ChooseAnnotatorsDialog.js

+"use strict";
+
+/* exported logger */
+
+var AbstractGuiElement = require('../AbstractGuiElement');
+var DualListbox = require('dual-listbox').DualListbox;
+var GuiConnector = require("../../GuiConnector");
+var UserPreferences = require("../../map/data/UserPreferences");
+
+var Functions = require('../../functions');
+var logger = require('../../logger');
+
+var Promise = require("bluebird");
+
+function ChooseAnnotatorsDialog(params) {
+  AbstractGuiElement.call(this, params);
+  var self = this;
+  self.createGui();
+}
+
+ChooseAnnotatorsDialog.prototype = Object.create(AbstractGuiElement.prototype);
+ChooseAnnotatorsDialog.prototype.constructor = ChooseAnnotatorsDialog;
+
+ChooseAnnotatorsDialog.prototype.createGui = function () {
+  var self = this;
+  var content = Functions.createElement({
+    type: "div",
+    style: "display:table"
+  });
+  content.appendChild(Functions.createElement({
+    type: "div",
+    style: "display:table-cell",
+    content: "<div name='elementTree'/>"
+  }));
+
+  content.appendChild(Functions.createElement({
+    type: "div",
+    style: "display:table-cell",
+    content: "<div name='annotatorListBox'/>"
+  }));
+
+  self.getElement().appendChild(content);
+};
+
+ChooseAnnotatorsDialog.prototype.setElementType = function (elementType) {
+  var self = this;
+
+  var configuration;
+
+  return ServerConnector.getConfiguration().then(function (result) {
+    configuration = result;
+    return ServerConnector.getLoggedUser();
+  }).then(function (user) {
+    var element = $("[name='annotatorListBox']", self.getElement())[0];
+    Functions.removeChildren(element);
+
+    var selectElement = Functions.createElement({
+      type: "select",
+      className: "minerva-multi-select"
+    });
+
+    var annotators = configuration.getElementAnnotators(elementType);
+
+    var selectedAnnotators = user.getPreferences().getElementAnnotators(elementType.className);
+
+    for (var i = 0; i < annotators.length; i++) {
+      var annotator = annotators[i];
+      var selected = false;
+      for (var j = 0; j < selectedAnnotators.length; j++) {
+        if (annotator.getName() === selectedAnnotators[j]) {
+          selected = true;
+        }
+      }
+      var option = new Option();
+      option.value = annotator.getClassName();
+      option.attributes.selected = selected;
+      option.innerHTML = "<div>" + annotator.getName() + "</div>";
+      selectElement.appendChild(option);
+    }
+
+    element.appendChild(selectElement);
+    new DualListbox(selectElement, {
+      addEvent: function (value) {
+        var annotators = configuration.getElementAnnotators();
+        var annotator;
+        for (var i = 0; i < annotators.length; i++) {
+          if (value === annotators[i].getClassName()) {
+            annotator = annotators[i];
+          }
+        }
+        selectedAnnotators.push(annotator.getName());
+
+        var data = new UserPreferences();
+
+        var elementAnnotators = {};
+        elementAnnotators[elementType.className] = selectedAnnotators;
+        data.setElementAnnotators(elementAnnotators);
+        return ServerConnector.updateUserPreferences({user: user, preferences: data}).then(null, GuiConnector.alert);
+      },
+      removeEvent: function (value) {
+        var annotators = configuration.getElementAnnotators();
+        var annotator;
+        for (var i = 0; i < annotators.length; i++) {
+          if (value === annotators[i].getClassName()) {
+            annotator = annotators[i];
+          }
+        }
+        var index = selectedAnnotators.indexOf(annotator.getName());
+        if (index > -1) {
+          selectedAnnotators.splice(index, 1);
+        }
+
+        var data = new UserPreferences();
+
+        var elementAnnotators = {};
+        elementAnnotators[elementType.className] = selectedAnnotators;
+        data.setElementAnnotators(elementAnnotators);
+        return ServerConnector.updateUserPreferences({user: user, preferences: data}).then(null, GuiConnector.alert);
+      },
+      availableTitle: 'Available',
+      selectedTitle: 'Used',
+      addButtonText: '>',
+      removeButtonText: '<',
+      addAllButtonText: '>>',
+      removeAllButtonText: '<<'
+    });
+  });
+
+};