adding overlays implemented

frontend-js/package.json

@@ -12,6 +12,7 @@
   "author": "Piotr Gawron",
   "devDependencies": {
     "assert": "1.4.1",
+    "blob-util": "^1.2.1",
     "bluebird": "^3.4.6",
     "bootstrap": "^3.3.7",
     "browserify": "^13.1.1",

frontend-js/src/main/js/gui/OverlayPanel.js

@@ -29,10 +29,19 @@ function OverlayPanel(params) {
   if (self.getCustomOverlaysTitleElement() === undefined) {
     throw new Error("Couldn't find element: customOverlaysTitle");
   }
+
   if (self.getCustomOverlaysTabElement() === undefined) {
     throw new Error("Couldn't find element: customOverlaysTab");
   }
 
+  if (self.getAddButtonElement() === undefined) {
+    throw new Error("Couldn't find element: getAddButtonElement");
+  } else {
+    self.getAddButtonElement().onclick = function(){
+      self.openAddOverlayDialog();
+    }
+  }
+
   self.setCustomOverlaysMessage(self.getCustomOverlaysTitleElement().innerHTML);
 
   self.refresh();
@@ -206,7 +215,7 @@ OverlayPanel.prototype.refresh = function() {
   var user = null;
 
   var overlayTypes = [];
-  
+
   return ServerConnector.getOverlayTypes().then(function(types) {
     overlayTypes = types;
     return ServerConnector.getLoggedUser();
@@ -248,10 +257,13 @@ OverlayPanel.prototype.refresh = function() {
     }
 
     var title = self.getCustomOverlaysTitleElement();
+    var addButton = self.getAddButtonElement();
     if (user.getLogin() === "anonymous") {
       title.innerHTML = "YOU ARE NOT LOGGED IN. PLEASE, LOG IN TO UPLOAD AND VIEW CUSTOM OVERLAYS";
+      addButton.style.display="none";
     } else {
       title.innerHTML = self.getCustomOverlaysMessage();
+      addButton.style.display="block";
 
       table = self.getCustomOverlaysTabElement();
       table.appendChild(self.createTableHeader(true));
@@ -282,6 +294,9 @@ OverlayPanel.prototype.getCustomOverlaysElement = function() {
 OverlayPanel.prototype.getCustomOverlaysTitleElement = function() {
   return this.getElementByName(this.getElement(), "customOverlaysTitle");
 };
+OverlayPanel.prototype.getAddButtonElement = function() {
+  return this.getElementByName(this.getElement(), "addOverlay");
+};
 OverlayPanel.prototype.getCustomOverlaysTabElement = function() {
   return this.getElementByName(this.getElement(), "customOverlaysTab");
 };
@@ -294,4 +309,117 @@ OverlayPanel.prototype.getCustomOverlaysMessage = function() {
   return this._customOverlaysMessage;
 };
 
+OverlayPanel.prototype.parseFile = function(fileContent) {
+  var result = {};
+  var lines = fileContent.split("\n");
+  for (var i=0;i<lines.length;i++) {
+    var line = lines[i];
+    if (line.startsWith("#")) {
+      if (line.indexOf("=")>0) {
+        var name = line.substring(1, line.indexOf("=")).trim();
+        var value = line.substring(line.indexOf("=")+1).trim();
+        if (name==="NAME") {
+          result.name = value;
+        } else if (name==="DESCRIPTION") {
+          result.description= value;
+        } else if (name==="TYPE") {
+          result.type= value;
+        }
+      } else {
+        logger.warn("Invalid overlay header line: "+line);
+      }
+    } else {
+      break;
+    }
+  }
+  return result;
+};
+
+OverlayPanel.prototype.openAddOverlayDialog = function() {
+  var self = this;
+  var fileContent = null;
+  return new Promise(function(resolve, reject){
+
+    var content = document.createElement("div");
+    content.style.width="100%";
+    content.style.height="100%";
+    content.appendChild(self.createLabel("Name"));
+    var nameInput = self.createInputText();
+    content.appendChild(nameInput);
+    content.appendChild(self.createNewLine());
+
+    content.appendChild(self.createLabel("Description"));
+    content.appendChild(self.createNewLine());
+    var descriptionInput = self.createTextArea();
+    content.appendChild(descriptionInput);
+    content.appendChild(self.createNewLine());
+
+    content.appendChild(self.createLabel("File"));
+    var fileInput = self.createFileButton();
+    fileInput.addEventListener("change", function(){
+      fileContent = null;
+      var file = fileInput.files[0];
+      if (file) {
+        var reader = new FileReader();
+        reader.readAsText(file, "UTF-8");
+        reader.onload = function (evt) {
+          fileContent = evt.target.result;
+          var data = self.parseFile(fileContent);
+          if (data.name!==undefined) {
+            nameInput.value =data.name; 
+          } else {
+            var filename = fileInput.value;
+            if (filename.indexOf(".")>0) {
+              filename.substr(0,filename.indexOf(".")-1);
+            }
+            nameInput.value =filename; 
+          }
+          if (data.description!==undefined) {
+            descriptionInput.value =data.description; 
+          }
+        }
+        reader.onerror = function (evt) {
+          GuiConnector.alert("Problem reading file");
+        }
+      }
+    }, false);
+    content.appendChild(fileInput);
+    content.appendChild(self.createNewLine());
+
+    var buttons = [ {
+      text : "UPLOAD",
+      click : function() {
+        var dialog = this;
+        if (fileContent===null) {
+          GuiConnector.alert("No file was selected");
+        } else {
+          var data = {
+              name : nameInput.value,
+              description : descriptionInput.value,
+              content : fileContent,
+              filename : fileInput.value
+          }          
+          return ServerConnector.addOverlay(data).then(function(){
+            return self.refresh();
+          }).then(function(){
+            $(dialog).dialog("close");
+          });
+        }
+      }
+    }, {
+      text : "CANCEL",
+      click : function() {
+        $(this).dialog("close");
+      }
+    } ];
+    self.openDialog(content, {
+      id : "addOverlay",
+      modal: true,
+      buttons : buttons,
+    });
+
+    resolve();
+  });
+};
+
 module.exports = OverlayPanel;

frontend-js/src/main/js/gui/Panel.js

@@ -221,6 +221,11 @@ Panel.prototype.createTextArea = function(value) {
   }
   return result;
 };
+Panel.prototype.createFileButton = function() {
+  var result = document.createElement("input");
+  result.setAttribute('type', 'file');
+  return result;
+};
 
 Panel.prototype.createParamLine = function(label, value) {
   var result = document.createElement("div");
@@ -358,8 +363,14 @@ Panel.prototype.openDialog = function(content, options) {
     contentDiv.removeChild(contentDiv.lastChild);
   }
   contentDiv.appendChild(content);
+  contentDiv.style.display="block";
 
-  $(div).dialog();
+  $(div).dialog({
+    close : function() {
+      contentDiv.style.display="none";
+      $(this).dialog('destroy');
+    }
+  });
 
   this.assignDialogOptions(div, options);
 

frontend-js/src/test/js/gui/OverlayPanel-test.js

@@ -9,6 +9,7 @@ var OverlayPanel = require('../../../main/js/gui/OverlayPanel');
 var chai = require('chai');
 var assert = chai.assert;
 var logger = require('../logger');
+var blobUtil = require('blob-util');
 
 describe('OverlayPanel', function() {
 
@@ -105,4 +106,35 @@ describe('OverlayPanel', function() {
     });
   });
 
+  it('openAddOverlayDialog', function() {
+    var div = helper.createOverlayTab();
+
+    var map = helper.createCustomMap();
+
+    var panel = new OverlayPanel({
+      element : div,
+      customMap : map
+    });
+
+    return panel.openAddOverlayDialog();
+  });
+
+  it('parse overlay file', function() {
+    var div = helper.createOverlayTab();
+
+    var map = helper.createCustomMap();
+
+    var panel = new OverlayPanel({
+      element : div,
+      customMap : map
+    });
+
+    return ServerConnector.readFile("testFiles/overlay/good.txt").then(function(fileContent) {
+      var obj = panel.parseFile(fileContent);
+      assert.equal(obj.name, "example name");
+      assert.equal(obj.description, "layout description");
+      assert.equal(obj.type, "GENERIC");
+    });
+  });
+
 });

frontend-js/src/test/js/helper.js

@@ -102,6 +102,10 @@ Helper.prototype.createOverlayTab = function() {
   customOverlaysTitleDiv.setAttribute("name", "customOverlaysTitle");
   customOverlaysDiv.appendChild(customOverlaysTitleDiv);
   
+  var addButton = document.createElement("button");
+  addButton.setAttribute("name", "addOverlay");
+  customOverlaysDiv.appendChild(addButton);
+  
   return result;
 };
 

frontend-js/testFiles/overlay/good.txt

+#TYPE=GENERIC						
+# VERSION=1.0
+# NAME=example name
+# DESCRIPTION=layout description
+value	identifier	Chebi
+-0,943978048	HGNC:11138	
+-0,941309505		CHEBI:15377
+1		CHEBI:15376

web/src/main/webapp/WEB-INF/components/map/layoutPanel.xhtml

@@ -17,6 +17,7 @@
 	<div name="customOverlays" class="searchPanel">	
 		<h5 name="customOverlaysTitle">USER-PROVIDED OVERLAYS:</h5>
 		<table cellpadding="4" name="customOverlaysTab" class="table table-bordered"  style="width:100%"/>
+		<center><button name="addOverlay">Add overlay</button></center>
 	</div>
 
 </div>

web/src/main/webapp/resources/css/style.css

@@ -1057,7 +1057,7 @@ a.mainTitle:hover {background-color:#000000; transition: background-color 0.4s e
 
 /*form format*/
 
-input[type=file] {width:280px !important; height:7px !important; top:15px !important;}
+input[type=file] {width:280px !important; top:15px !important;}
 
 
 .ui-inputtext, .ui-password, .ui-autocomplete-input{