From 2c948bc4b81ec981aed1ba1524feb3137402efb6 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Fri, 4 May 2018 09:26:07 +0200
Subject: [PATCH 1/4] JSDoc types added to OverlayPanel

---
 .../src/main/js/gui/leftPanel/OverlayPanel.js | 80 ++++++++++++++++++-
 1 file changed, 77 insertions(+), 3 deletions(-)

diff --git a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
index c538683bf..3b593e457 100644
--- a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
+++ b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
@@ -13,10 +13,21 @@ var Functions = require('../../Functions');
 
 var Promise = require('bluebird');
 
+/**
+ *
+ * @param {Object} params
+ * @param {Configuration} [params.configuration]
+ * @param {HTMLElement} params.element
+ * @param {Project} params.project
+ * @param {CustomMap} params.customMap
+ * @param params.parent
+ * @constructor
+ * @extends Panel
+ */
 function OverlayPanel(params) {
-  params.panelName = "overlays";
-  params.scrollable = true;
-  params.helpTip = "<p>Overlays tab allows to display or generate custom coloring of elements and interactions in the map.</p>"
+  params["panelName"] = "overlays";
+  params["scrollable"] = true;
+  params["helpTip"] = "<p>Overlays tab allows to display or generate custom coloring of elements and interactions in the map.</p>"
     + "<p>General overlays are overlays accessible for every user viewing the content.</p>"
     + "<p>Custom overlays are user-provided overlays, this menu becomes available upon login (see below).</p>";
   Panel.call(this, params);
@@ -81,6 +92,10 @@ function OverlayPanel(params) {
 OverlayPanel.prototype = Object.create(Panel.prototype);
 OverlayPanel.prototype.constructor = OverlayPanel;
 
+/**
+ *
+ * @private
+ */
 OverlayPanel.prototype._createOverlayPanelGui = function () {
   var generalOverlaysDiv = Functions.createElement({
     type: "div",
@@ -156,6 +171,11 @@ OverlayPanel.prototype.clear = function () {
   table.clear().draw();
 };
 
+/**
+ *
+ * @param {boolean} edit
+ * @returns {HTMLElement}
+ */
 OverlayPanel.prototype.createTableHeader = function (edit) {
   var result = document.createElement("thead");
 
@@ -183,6 +203,12 @@ OverlayPanel.prototype.createTableHeader = function (edit) {
   return result;
 };
 
+/**
+ *
+ * @param {DataOverlay} overlay
+ * @param {boolean} checked
+ * @returns {HTMLElement}
+ */
 OverlayPanel.prototype.createOverlayRow = function (overlay, checked) {
   var self = this;
   var guiUtils = self.getGuiUtils();
@@ -243,6 +269,12 @@ OverlayPanel.prototype.createOverlayRow = function (overlay, checked) {
   return result;
 };
 
+/**
+ *
+ * @param {DataOverlay} overlay
+ * @param {boolean} checked
+ * @returns {Array}
+ */
 OverlayPanel.prototype.overlayToDataRow = function (overlay, checked) {
   // if (checked && !overlay.getInputDataAvailable()) {
   //   result.className = "active";
@@ -273,6 +305,10 @@ OverlayPanel.prototype.overlayToDataRow = function (overlay, checked) {
   return result;
 };
 
+/**
+ *
+ * @param {DataOverlay} overlay
+ */
 OverlayPanel.prototype.openEditOverlayDialog = function (overlay) {
   var self = this;
   var guiUtils = self.getGuiUtils();
@@ -325,6 +361,11 @@ OverlayPanel.prototype.openEditOverlayDialog = function (overlay) {
   });
 };
 
+/**
+ *
+ * @param {boolean} showDefault
+ * @returns {PromiseLike}
+ */
 OverlayPanel.prototype.refresh = function (showDefault) {
   var self = this;
   var user = null;
@@ -431,15 +472,27 @@ OverlayPanel.prototype.refresh = function (showDefault) {
   });
 };
 
+/**
+ *
+ * @param {string} customOverlaysMessage
+ */
 OverlayPanel.prototype.setCustomOverlaysMessage = function (customOverlaysMessage) {
   this._customOverlaysMessage = customOverlaysMessage;
 };
 
+/**
+ *
+ * @returns {string}
+ */
 OverlayPanel.prototype.getCustomOverlaysMessage = function () {
   return this._customOverlaysMessage;
 };
 
 
+/**
+ *
+ * @returns {PromiseLike}
+ */
 OverlayPanel.prototype.openAddOverlayDialog = function () {
   var self = this;
   if (self._addOverlayDialog !== undefined) {
@@ -459,6 +512,10 @@ OverlayPanel.prototype.openAddOverlayDialog = function () {
   });
 };
 
+/**
+ *
+ * @returns {PromiseLike}
+ */
 OverlayPanel.prototype.init = function () {
   var self = this;
   var backgroundOverlay = ServerConnector.getSessionData().getSelectedBackgroundOverlay();
@@ -501,6 +558,13 @@ OverlayPanel.prototype.init = function () {
 
   return this.refresh(showDefault);
 };
+
+/**
+ *
+ * @param {number} overlayId
+ * @param {number} order
+ * @returns {PromiseLike}
+ */
 OverlayPanel.prototype.updateOverlayOrder = function (overlayId, order) {
   var self = this;
   return self.getProject().getDataOverlayById(overlayId).then(function (overlay) {
@@ -508,6 +572,12 @@ OverlayPanel.prototype.updateOverlayOrder = function (overlayId, order) {
     return ServerConnector.updateOverlay(overlay);
   });
 };
+
+/**
+ *
+ * @param {DataOverlay} overlay
+ * @returns {PromiseLike<any>}
+ */
 OverlayPanel.prototype.removeOverlay = function (overlay) {
   self = this;
   return self.getMap().hideDataOverlay(overlay.getId()).then(function () {
@@ -517,6 +587,10 @@ OverlayPanel.prototype.removeOverlay = function (overlay) {
   })
 };
 
+/**
+ *
+ * @returns {PromiseLike}
+ */
 OverlayPanel.prototype.destroy = function () {
   var self = this;
   Panel.prototype.destroy.call(this);
-- 
GitLab


From 04f7544198d437b0b1b476ca03ac432b95496957 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Fri, 4 May 2018 09:34:47 +0200
Subject: [PATCH 2/4] OverlayPanel uses local pointer to ServerConnector

---
 .../src/main/js/gui/AbstractGuiElement.js     |  1 +
 frontend-js/src/main/js/gui/Panel.js          | 19 ++++++++++---------
 .../src/main/js/gui/leftPanel/OverlayPanel.js | 18 +++++++++---------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend-js/src/main/js/gui/AbstractGuiElement.js b/frontend-js/src/main/js/gui/AbstractGuiElement.js
index b44f29a2d..3ba1e7fdc 100644
--- a/frontend-js/src/main/js/gui/AbstractGuiElement.js
+++ b/frontend-js/src/main/js/gui/AbstractGuiElement.js
@@ -179,4 +179,5 @@ AbstractGuiElement.prototype.askConfirmRemoval = function (params) {
   })
 };
 
+
 module.exports = AbstractGuiElement;
diff --git a/frontend-js/src/main/js/gui/Panel.js b/frontend-js/src/main/js/gui/Panel.js
index 5d9f683e9..9c234d065 100644
--- a/frontend-js/src/main/js/gui/Panel.js
+++ b/frontend-js/src/main/js/gui/Panel.js
@@ -77,7 +77,7 @@ Panel.prototype.disablePanel = function (message) {
   var self = this;
 
   $(self.getElement()).children().css("visibility", "hidden");
-  $("[class='minerva-help-button']",self.getElement()).children().css("visibility", "visible");
+  $("[class='minerva-help-button']", self.getElement()).children().css("visibility", "visible");
   var hideReasonDiv = document.createElement("div");
   hideReasonDiv.className = "searchPanel";
 
@@ -99,14 +99,6 @@ Panel.prototype.setMap = function (map) {
   this._map = map;
 };
 
-/**
- *
- * @returns {CustomMap}
- */
-Panel.prototype.getMap = function () {
-  return this._map;
-};
-
 Panel.prototype.setPanelName = function (panelName) {
   this._panelName = panelName;
 };
@@ -304,4 +296,13 @@ Panel.prototype.destroy = function () {
   }
 };
 
+/**
+ *
+ * @returns {ServerConnector}
+ */
+Panel.prototype.getServerConnector = function () {
+  return this.getMap().getServerConnector();
+};
+
+
 module.exports = Panel;
diff --git a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
index 3b593e457..7ccaf090b 100644
--- a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
+++ b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
@@ -75,7 +75,7 @@ function OverlayPanel(params) {
   });
   $(self.getElement()).on("click", "[name='download-overlay']", function () {
     var overlayId = $(this).attr("data");
-    return ServerConnector.getOverlaySourceDownloadUrl({
+    return self.getServerConnector().getOverlaySourceDownloadUrl({
       overlayId: overlayId
     }).then(function (url) {
       return self.downloadFile(url);
@@ -327,7 +327,7 @@ OverlayPanel.prototype.openEditOverlayDialog = function (overlay) {
       var windowSelf = this;
       overlay.setName(nameInput.value);
       overlay.setDescription(descriptionInput.value);
-      return ServerConnector.updateOverlay(overlay).then(function () {
+      return self.getServerConnector().updateOverlay(overlay).then(function () {
         return self.refresh();
       }).then(function () {
         $(windowSelf).dialog("close");
@@ -373,9 +373,9 @@ OverlayPanel.prototype.refresh = function (showDefault) {
   var overlayTypes = [];
   var selectedOverlay = [];
 
-  return ServerConnector.getOverlayTypes().then(function (types) {
+  return self.getServerConnector().getOverlayTypes().then(function (types) {
     overlayTypes = types;
-    return ServerConnector.getLoggedUser();
+    return self.getServerConnector().getLoggedUser();
   }).then(function (loggedUser) {
     user = loggedUser;
     return self.getMap().getVisibleDataOverlays();
@@ -384,7 +384,7 @@ OverlayPanel.prototype.refresh = function (showDefault) {
       selectedOverlay[visibleDataOverlays[j].getId()] = true;
     }
 
-    return ServerConnector.getOverlays({
+    return self.getServerConnector().getOverlays({
       publicOverlay: false,
       creator: user.getLogin()
     });
@@ -518,7 +518,7 @@ OverlayPanel.prototype.openAddOverlayDialog = function () {
  */
 OverlayPanel.prototype.init = function () {
   var self = this;
-  var backgroundOverlay = ServerConnector.getSessionData().getSelectedBackgroundOverlay();
+  var backgroundOverlay = self.getServerConnector().getSessionData().getSelectedBackgroundOverlay();
   var showDefault = (backgroundOverlay === undefined || backgroundOverlay === "undefined");
   var table = $(this.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE)).DataTable({
     columns: [{
@@ -569,7 +569,7 @@ OverlayPanel.prototype.updateOverlayOrder = function (overlayId, order) {
   var self = this;
   return self.getProject().getDataOverlayById(overlayId).then(function (overlay) {
     overlay.setOrder(order);
-    return ServerConnector.updateOverlay(overlay);
+    return self.getServerConnector().updateOverlay(overlay);
   });
 };
 
@@ -579,9 +579,9 @@ OverlayPanel.prototype.updateOverlayOrder = function (overlayId, order) {
  * @returns {PromiseLike<any>}
  */
 OverlayPanel.prototype.removeOverlay = function (overlay) {
-  self = this;
+  var self = this;
   return self.getMap().hideDataOverlay(overlay.getId()).then(function () {
-    return ServerConnector.removeOverlay({overlayId: overlay.getId()});
+    return self.getServerConnector().removeOverlay({overlayId: overlay.getId()});
   }).then(function () {
     return self.refresh();
   })
-- 
GitLab


From f7cc264cd6e1adfbc10d3ebf58e8d963153ed316 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Fri, 4 May 2018 09:40:08 +0200
Subject: [PATCH 3/4] fix on warnings due to type mismatch

---
 frontend-js/src/main/js/gui/AddOverlayDialog.js    |  5 +++++
 .../src/main/js/gui/leftPanel/OverlayPanel.js      | 14 ++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend-js/src/main/js/gui/AddOverlayDialog.js b/frontend-js/src/main/js/gui/AddOverlayDialog.js
index 2e4cd33aa..8d730471a 100644
--- a/frontend-js/src/main/js/gui/AddOverlayDialog.js
+++ b/frontend-js/src/main/js/gui/AddOverlayDialog.js
@@ -179,8 +179,13 @@ AddOverlayDialog.prototype.addOverlay = function () {
   });
 };
 
+/**
+ *
+ * @returns {PromiseLike}
+ */
 AddOverlayDialog.prototype.destroy = function () {
   $(this.getElement()).dialog("destroy");
+  return Promise.resolve();
 };
 
 AddOverlayDialog.prototype.open = function () {
diff --git a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
index 7ccaf090b..f9e95e7d3 100644
--- a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
+++ b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
@@ -173,10 +173,13 @@ OverlayPanel.prototype.clear = function () {
 
 /**
  *
- * @param {boolean} edit
+ * @param {boolean} [edit=false]
  * @returns {HTMLElement}
  */
 OverlayPanel.prototype.createTableHeader = function (edit) {
+  if (edit === undefined) {
+    edit = false;
+  }
   var result = document.createElement("thead");
 
   var row = document.createElement("tr");
@@ -363,10 +366,13 @@ OverlayPanel.prototype.openEditOverlayDialog = function (overlay) {
 
 /**
  *
- * @param {boolean} showDefault
+ * @param {boolean} [showDefault=false]
  * @returns {PromiseLike}
  */
 OverlayPanel.prototype.refresh = function (showDefault) {
+  if (showDefault === undefined) {
+    showDefault = false;
+  }
   var self = this;
   var user = null;
 
@@ -439,7 +445,7 @@ OverlayPanel.prototype.refresh = function (showDefault) {
       title.innerHTML = self.getCustomOverlaysMessage();
       addButton.style.display = "block";
 
-      table = $(tableElement).on('order.dt', function (e) {
+      table = $(tableElement).on('order.dt', function () {
         if ($(tableElement).dataTable().fnSettings().aaSorting[0][0] === 0) {
           table.rowReorder.enable();
         } else {
@@ -544,7 +550,7 @@ OverlayPanel.prototype.init = function () {
     info: false,
     rowReorder: true
   });
-  table.on('row-reorder', function (e, diff, edit) {
+  table.on('row-reorder', function (e, diff) {
     var promises = [];
 
     for (var i = 0, ien = diff.length; i < ien; i++) {
-- 
GitLab


From 7fe2fb353f117e4d3254aa2f6ad5294aa71532ef Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Fri, 4 May 2018 10:23:23 +0200
Subject: [PATCH 4/4] overlays tool tip (with description) is not hidden after
 few seconds

---
 frontend-js/src/main/css/global.css           | 52 +++++++++++++++----
 .../src/main/js/gui/leftPanel/OverlayPanel.js | 17 ++++--
 2 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/frontend-js/src/main/css/global.css b/frontend-js/src/main/css/global.css
index a4164f27c..d47e63792 100644
--- a/frontend-js/src/main/css/global.css
+++ b/frontend-js/src/main/css/global.css
@@ -677,14 +677,14 @@ a.adminLink:hover {
 
 .minerva-login-form {
     height: 100%;
-    background-color:#FFFFFF;
-    box-shadow:0 3px 30px #B9B9B9;
-    width:320px;
-    padding:20px;
-    margin:20px auto;
-    color:#666666;
-    font-size:13px;
-    font-weight:900;
+    background-color: #FFFFFF;
+    box-shadow: 0 3px 30px #B9B9B9;
+    width: 320px;
+    padding: 20px;
+    margin: 20px auto;
+    color: #666666;
+    font-size: 13px;
+    font-weight: 900;
 }
 
 .minerva-login-form-title {
@@ -705,21 +705,51 @@ a.adminLink:hover {
     font-weight: 900
 }
 
-.minerva-ol-bottom-left{
+.minerva-ol-bottom-left {
     bottom: .5em;
     left: .5em;
 }
 
-.minerva-ol-bottom-right{
+.minerva-ol-bottom-right {
     bottom: .5em;
     right: .5em;
 }
 
-.minerva-ol-top-right{
+.minerva-ol-top-right {
     top: .5em;
     right: .5em;
 }
 
 .popover {
     max-width: 600px;
+}
+
+/*
+https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip
+ */
+.minerva-tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.minerva-tooltip .minerva-tooltip-text {
+    visibility: hidden;
+    width: 120px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+}
+
+.minerva-tooltip:hover .minerva-tooltip-text {
+    visibility: visible;
+}
+
+.minerva-overlay-panel {
+    overflow-x: hidden;
 }
\ No newline at end of file
diff --git a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
index f9e95e7d3..0a0034794 100644
--- a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
+++ b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
@@ -32,6 +32,10 @@ function OverlayPanel(params) {
     + "<p>Custom overlays are user-provided overlays, this menu becomes available upon login (see below).</p>";
   Panel.call(this, params);
 
+  //overflow is defined in minerva-overlay-panel, so remove the one that is already there
+  $(params.element).css("overflow", "");
+  $(params.element).addClass("minerva-overlay-panel");
+
   var self = this;
 
   self._createOverlayPanelGui();
@@ -279,11 +283,6 @@ OverlayPanel.prototype.createOverlayRow = function (overlay, checked) {
  * @returns {Array}
  */
 OverlayPanel.prototype.overlayToDataRow = function (overlay, checked) {
-  // if (checked && !overlay.getInputDataAvailable()) {
-  //   result.className = "active";
-  // }
-  // result.title = overlay.getDescription();
-
   var result = [];
   result[0] = overlay.getOrder();
   result[1] = overlay.getName();
@@ -305,6 +304,14 @@ OverlayPanel.prototype.overlayToDataRow = function (overlay, checked) {
   } else {
     result[4] = "";
   }
+  if (overlay.getDescription() !== "") {
+    for (var i = 0; i < result.length; i++) {
+
+      result[i] = "<div class=\"minerva-tooltip\">" + result[i] +
+        "<span class=\"minerva-tooltip-text\">" + overlay.getDescription() + "</span>" +
+        "</div>";
+    }
+  }
   return result;
 };
 
-- 
GitLab