work in progress

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

@@ -142,6 +142,14 @@ Configuration.prototype.setMiriamTypes = function (miriamTypes) {
       this._miriamTypes.push(new MiriamType(typeData, key));
     }
   }
+  this._miriamTypes.sort(function compare(a, b) {
+      if (a.getCommonName() < b.getCommonName())
+        return -1;
+      if (a.getCommonName() > b.getCommonName())
+        return 1;
+      return 0;
+    }
+  );
 };
 
 Configuration.prototype.setPrivilegeTypes = function (privilegeTypes) {
@@ -169,6 +177,10 @@ Configuration.prototype.getMiriamTypeByName = function (name) {
   return null;
 };
 
+Configuration.prototype.getMiriamTypes = function () {
+  return this._miriamTypes;
+};
+
 Configuration.prototype.setModificationStateTypes = function (modificationStateTypes) {
   this._modificationStateTypes = [];
   for (var key in modificationStateTypes) {

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

@@ -5,6 +5,7 @@ var Promise = require("bluebird");
 
 var AbstractGuiElement = require('../AbstractGuiElement');
 var ChooseAnnotatorsDialog = require('./ChooseAnnotatorsDialog');
+var ChooseValidatorsDialog = require('./ChooseValidatorsDialog');
 var GuiConnector = require('../../GuiConnector');
 var UserPreferences = require("../../map/data/UserPreferences");
 
@@ -106,6 +107,22 @@ AddProjectDialog.prototype.showAnnotatorsDialog = function () {
     return self._annotatorsDialog.open();
   });
 };
+AddProjectDialog.prototype.showValidatorsDialog = function () {
+  var self = this;
+  var promise;
+  if (self._validatorsDialog === undefined) {
+    self._validatorsDialog = new ChooseValidatorsDialog({
+      element: Functions.createElement({type: "div"}),
+      customMap: null
+    });
+    promise = self._validatorsDialog.init();
+  } else {
+    promise = Promise.resolve();
+  }
+  return promise.then(function () {
+    return self._validatorsDialog.open();
+  });
+};
 AddProjectDialog.prototype.createGeneralTabContent = function () {
   var self = this;
 
@@ -167,9 +184,17 @@ AddProjectDialog.prototype.createGeneralTabContent = function () {
       return self.showAnnotatorsDialog().then(null, GuiConnector.alert);
     }
   });
+  var showValidatorsButton = Functions.createElement({
+    type: "button",
+    name: "project-show-validators",
+    content: "Advanced",
+    onclick: function () {
+      return self.showValidatorsDialog().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("Verify manual annotations:", false, "project-verify-annotations", [showValidatorsButton]));
   table.appendChild(self.createCheckboxRow("Cache data:", false, "project-cache-data"));
   table.appendChild(self.createCheckboxRow("Auto margin:", true, "project-auto-margin"));
   table.appendChild(self.createCheckboxRow("Display as SBGN:", false, "project-sbgn-visualization"));
@@ -384,6 +409,9 @@ AddProjectDialog.prototype.destroy = function () {
   if (self._annotatorsDialog !== undefined) {
     self._annotatorsDialog.destroy();
   }
+  if (self._validatorsDialog !== undefined) {
+    self._validatorsDialog.destroy();
+  }
 };
 
 AddProjectDialog.prototype.open = function () {

frontend-js/src/main/js/gui/admin/ChooseValidatorsDialog.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 ChooseValidatorsDialog(params) {
+  AbstractGuiElement.call(this, params);
+  var self = this;
+  self.createGui();
+}
+
+ChooseValidatorsDialog.prototype = Object.create(AbstractGuiElement.prototype);
+ChooseValidatorsDialog.prototype.constructor = ChooseValidatorsDialog;
+
+ChooseValidatorsDialog.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);
+};
+
+ChooseValidatorsDialog.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 validAnnotationSelect = Functions.createElement({
+      type: "select",
+      className: "minerva-multi-select"
+    });
+
+    var miriamTypes = configuration.getMiriamTypes();
+
+    var validAnnotations = user.getPreferences().getElementValidAnnotations(elementType.className);
+
+    for (var i = 0; i < miriamTypes.length; i++) {
+      var miriamType = miriamTypes[i];
+      var selected = false;
+      for (var j = 0; j < validAnnotations.length; j++) {
+        if (miriamType.getName() === validAnnotations[j]) {
+          selected = true;
+        }
+      }
+      var option = new Option();
+      option.value = miriamType.getName();
+      option.attributes.selected = selected;
+      option.innerHTML = "<div>" + miriamType.getCommonName() + "</div>";
+      validAnnotationSelect.appendChild(option);
+    }
+
+    element.appendChild(validAnnotationSelect);
+    new DualListbox(validAnnotationSelect, {
+      addEvent: function (value) {
+        var miriamTypes = configuration.getMiriamTypes();
+        var miriamType;
+        for (var i = 0; i < miriamTypes.length; i++) {
+          if (value === miriamTypes[i].getName()) {
+            miriamType = miriamTypes[i];
+          }
+        }
+        validAnnotations.push(miriamType.getName());
+
+        var data = new UserPreferences();
+
+        var elementAnnotators = {};
+        elementAnnotators[elementType.className] = validAnnotations;
+        data.setElementValidAnnotations(elementAnnotators);
+        return ServerConnector.updateUserPreferences({user: user, preferences: data}).then(null, GuiConnector.alert);
+      },
+      removeEvent: function (value) {
+        var miriamTypes = configuration.getMiriamTypes();
+        var miriamType;
+        for (var i = 0; i < miriamTypes.length; i++) {
+          if (value === miriamTypes[i].getName()) {
+            miriamType = miriamTypes[i];
+          }
+        }
+        var index = validAnnotations.indexOf(miriamType.getName());
+        if (index > -1) {
+          validAnnotations.splice(index, 1);
+        }
+
+        var data = new UserPreferences();
+
+        var elementAnnotators = {};
+        elementAnnotators[elementType.className] = validAnnotations;
+        data.setElementValidAnnotations(elementAnnotators);
+        return ServerConnector.updateUserPreferences({user: user, preferences: data}).then(null, GuiConnector.alert);
+      },
+      availableTitle: 'Available',
+      selectedTitle: 'Used',
+      addButtonText: '>',
+      removeButtonText: '<',
+      addAllButtonText: '>>',
+      removeAllButtonText: '<<'
+    });
+  });
+
+};
+
+ChooseValidatorsDialog.prototype.init = function () {
+  var self = this;
+  return ServerConnector.getConfiguration().then(function (configuration) {
+
+    var treeData = self.createElementTree(configuration);
+
+    var element = $('[name="elementTree"]', self.getElement());
+    element.jstree({
+      core: {
+        data: treeData
+      }
+    }).on('ready.jstree', function () {
+      element.jstree("open_all");
+    }).on("select_node.jstree",
+      function (evt, data) {
+        return self.setElementType(data.node.data);
+      }
+    );
+  });
+};
+
+ChooseValidatorsDialog.prototype.createElementTree = function (configuration) {
+
+  var elementTypes = configuration.getElementTypes();
+  var reactionTypes = configuration.getReactionTypes();
+
+  var treeNodes = {
+    "lcsb.mapviewer.model.map.BioEntity": {
+      text: "BioEntity",
+      children: []
+    }
+  };
+
+  var i;
+  for (i = 0; i < elementTypes.length; i++) {
+    var type = elementTypes[i];
+    var name = type.className;
+    if (name.indexOf(".") > 0) {
+      name = name.substr(name.lastIndexOf(".") + 1);
+    }
+    treeNodes[type.className] = {
+      text: name,
+      data: type,
+      children: []
+    };
+  }
+
+  for (i = 0; i < reactionTypes.length; i++) {
+    var type = reactionTypes[i];
+    treeNodes[type.className] = {
+      text: type.name,
+      data: type,
+      children: []
+    };
+  }
+
+  for (var treeNodeName in treeNodes) {
+    if (treeNodes.hasOwnProperty(treeNodeName)) {
+      var treeNode = treeNodes[treeNodeName];
+      if (treeNode.data !== undefined) {
+        var parentNode = treeNodes[treeNode.data.parentClass];
+        parentNode.children.push(treeNode);
+      }
+    }
+  }
+
+  return treeNodes["lcsb.mapviewer.model.map.BioEntity"];
+};
+
+ChooseValidatorsDialog.prototype.destroy = function () {
+  $(this.getElement()).dialog("destroy");
+};
+
+ChooseValidatorsDialog.prototype.open = function () {
+  var self = this;
+  var div = self.getElement();
+  if (!$(div).hasClass("ui-dialog-content")) {
+    $(div).dialog({
+      title: "Select valid annotations",
+      modal: true,
+      width: window.innerWidth / 2,
+      height: window.innerHeight / 2
+
+    });
+  }
+
+  $(div).dialog("open");
+};
+
+module.exports = ChooseValidatorsDialog;

frontend-js/src/main/js/map/data/UserPreferences.js

@@ -70,6 +70,7 @@ UserPreferences.prototype.toExport = function () {
       "semantic-zooming": this._projectUpload.semanticZooming
     },
     "element-annotators": this._elementAnnotators,
+    "element-valid-annotations": this._elementValidAnnotations
   };
 };
 

frontend-js/src/test/js/gui/admin/ChooseValidatorsDialog-test.js

+"use strict";
+
+/* exported assert */
+/* exported logger */
+require("../../mocha-config");
+
+var ChooseValidatorsDialog = require('../../../../main/js/gui/admin/ChooseValidatorsDialog');
+var logger = require('../../logger');
+
+var chai = require('chai');
+var assert = chai.assert;
+
+describe('ChooseValidatorsDialog', function () {
+  it('init', function () {
+    var dialog = new ChooseValidatorsDialog({
+      element: testDiv,
+      customMap: null
+    });
+    return dialog.init();
+  });
+
+  it('createElementTree', function () {
+    var dialog = new ChooseValidatorsDialog({
+      element: testDiv,
+      customMap: null
+    });
+    return ServerConnector.getConfiguration().then(function (configuration) {
+      var treeData = dialog.createElementTree(configuration);
+
+      assert.ok(treeData);
+      assert.ok(treeData.text);
+      assert.ok(treeData.children);
+      assert.equal(2, treeData.children.length);
+    })
+  });
+
+  it('setElementType', function () {
+    var dialog = new ChooseValidatorsDialog({
+      element: testDiv,
+      customMap: null
+    });
+    return ServerConnector.getConfiguration().then(function (configuration) {
+      return dialog.setElementType(configuration.getReactionTypes()[0]);
+    })
+  });
+
+});

web/src/main/webapp/admin-new.xhtml

@@ -15,9 +15,11 @@
 	<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js" type="text/javascript"/>
 
 	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
+  <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>	
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
 	
 	<link rel="shortcut icon" href="./resources/images/favicon.png" type="image/png" />
 

web/src/main/webapp/export.xhtml

@@ -16,11 +16,13 @@
 
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
 
 
 	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>	
 	<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
-	
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
+  	
 	<link rel="shortcut icon" href="./resources/images/favicon.png" type="image/png" />
 
 	<h:outputScript library="js" name="minerva.js"  />