Merge branch '172-session-expiry-notification' into 'master'

Resolve "Session expiry notification"

Closes #172

See merge request !421

commons/src/main/java/lcsb/mapviewer/common/Configuration.java

@@ -100,6 +100,11 @@ public final class Configuration {
    */
   public static final String ANONYMOUS_LOGIN = "anonymous";
 
+  /**
+   * Max session length in seconds.
+   */
+  private static int sessionLength = 60 * 120;
+
   /**
    * Should the application cache be turned on.
    */
@@ -425,4 +430,12 @@ public final class Configuration {
     return result;
   }
 
+  public static int getSessionLength() {
+    return sessionLength;
+  }
+
+  public static void setSessionLength(int sessionLength) {
+    Configuration.sessionLength = sessionLength;
+  }
+
 }

frontend-js/src/main/css/global.css

@@ -20,6 +20,17 @@
     padding-left: 15px;
 }
 
+.minerva-header-right-menu {
+    height: 36px;
+    line-height: 35px;
+    font-size: 13px;
+    font-weight: 900;
+    color: #ffffff;
+    display: inline;
+    width: auto;
+    float: right
+}
+
 .minerva-header a:hover {
     background-color: #000000;
     transition: background-color 0.4s ease-in-out 0s;
@@ -97,14 +108,14 @@
     to(#13ACE0));
 }
 
-.headerHideDivButton {
+.minerva-header-hide-div-button {
     display: inline;
     width: auto;
     height: 36px;
     float: left
 }
 
-.headerHideButton {
+.minerva-header-hide-button {
     color: #FFFFFF;
     height: 36px;
     line-height: 36px;
@@ -118,12 +129,12 @@
     transition: background-color 0.4s ease-in-out 0s;
 }
 
-.headerHideButton:hover {
+.minerva-header-hide-button:hover {
     background-color: #01536D;
     transition: background-color 0.4s ease-in-out 0s;
 }
 
-.headerTextBold {
+.minerva-version-div {
     display: inline;
     width: auto;
     height: 36px;
@@ -137,6 +148,32 @@
     border-right: 1px solid #9DE1F8;
 }
 
+.minerva-session-expire {
+    background: #EE0000;
+    display: inline;
+    width: auto;
+    height: 36px;
+    float: left;
+    line-height: 34px;
+    padding: 0 0 0 17px;
+    color: #FFFFFF;
+    font-weight: 900;
+    font-size: 13px;
+    text-align: center;
+    border-right: 1px solid #9DE1F8;
+}
+
+.minerva-extend-session-button {
+    background-color: #CC0000;
+    margin-left: 10px;
+    border: 0px;
+}
+
+.minerva-extend-session-button:hover {
+    background-color: #880000;
+    transition: background-color 0.4s ease-in-out 0s;
+}
+
 .minerva-legend {
     position: absolute;
     bottom: 10px;

frontend-js/src/main/js/ConfigurationType.js

@@ -15,6 +15,7 @@ var ConfigurationType = {
   REQUEST_ACCOUNT_EMAIL: "REQUEST_ACCOUNT_EMAIL",
   REQUEST_ACCOUNT_DEFAULT_CONTENT: "REQUEST_ACCOUNT_DEFAULT_CONTENT",
   SIMPLE_COLOR_VAL: "SIMPLE_COLOR_VAL",
+  SESSION_LENGTH: "SESSION_LENGTH",
   SHOW_ELEMENT_ABBREVIATION: "SHOW_ELEMENT_ABBREVIATION",
   SHOW_ELEMENT_ANNOTATIONS: "SHOW_ELEMENT_ANNOTATIONS",
   SHOW_ELEMENT_CHARGE: "SHOW_ELEMENT_CHARGE",

frontend-js/src/main/js/ServerConnector.js

@@ -489,7 +489,7 @@ ServerConnector.getReferenceGenomeUrl = function (queryParams, filterParams) {
 
     return this.getApiUrl({
       type: "genomics/taxonomies/" + queryParams.organism + "/genomeTypes/" + queryParams.type + "/versions/" + version
-      + "/",
+        + "/",
       params: filterParams
     });
   }
@@ -539,7 +539,7 @@ ServerConnector.getReferenceGenomeGeneMappingsUrl = function (queryParams, filte
 ServerConnector.getAvailableGenomeUrlsUrl = function (queryParams, filterParams) {
   return this.getApiUrl({
     type: "genomics/taxonomies/" + queryParams.organism.getResource() + "/genomeTypes/" + queryParams.type + "/versions/" + queryParams.version
-    + ":getAvailableRemoteUrls",
+      + ":getAvailableRemoteUrls",
     params: filterParams
   });
 };
@@ -933,6 +933,14 @@ ServerConnector.getConfiguration = function () {
   }
 };
 
+/**
+ *
+ * @returns {Promise}
+ */
+ServerConnector.extendSession = function () {
+  return this.sendGetRequest(this.getConfigurationUrl())
+};
+
 ServerConnector.getConfigurationParam = function (paramId) {
   if (paramId === undefined) {
     return Promise.reject(new Error("Unknown param type"));

frontend-js/src/main/js/SessionData.js

@@ -15,12 +15,33 @@ var logger = require('./logger');
  * @constructor
  */
 function SessionData(project) {
+  var self = this;
   if (project === undefined) {
     throw new Error("Project must be passed as an argument");
   }
-  this.setProject(project);
+  self.setProject(project);
+
+  ServerConnector.addListener("onDataLoadStart", function () {
+    self.setLastRequestTimeStamp(Math.floor(Date.now() / 1000));
+  });
 }
 
+/**
+ *
+ * @param {number} timestamp time stamp in seconds
+ */
+SessionData.prototype.setLastRequestTimeStamp = function (timestamp) {
+  this._lastRequestTimeStamp = timestamp;
+};
+
+/**
+ *
+ * @returns {number} time stamp in seconds
+ */
+SessionData.prototype.getLastRequestTimeStamp = function () {
+  return this._lastRequestTimeStamp;
+};
+
 /**
  *
  * @param {Project} project

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

@@ -36,7 +36,7 @@ OverviewDialog.prototype.constructor = OverviewDialog;
 
 /**
  *
- * @param {number} overviewImageId
+ * @param {number} [overviewImageId]
  */
 OverviewDialog.prototype.showOverview = function (overviewImageId) {
   var self = this;

frontend-js/src/main/js/gui/topMenu/TopMenu.js

@@ -5,11 +5,13 @@ var Promise = require("bluebird");
 /* exported logger */
 
 var AbstractGuiElement = require('../AbstractGuiElement');
+var ConfigurationType = require('../../ConfigurationType');
 var GuiConnector = require('../../GuiConnector');
 var OverviewDialog = require('../OverviewDialog');
 var PanelControlElementType = require('../PanelControlElementType');
 
 var Functions = require('../../Functions');
+// noinspection JSUnusedLocalSymbols
 var logger = require('../../logger');
 
 /**
@@ -30,6 +32,12 @@ function TopMenu(params) {
   var self = this;
 
   self._createGui();
+
+  self._cronFunction = function () {
+    return self.checkIfSessionIsGoingToExpire();
+  };
+
+  setInterval(self._cronFunction, 1000);
 }
 
 TopMenu.prototype = Object.create(AbstractGuiElement.prototype);
@@ -42,43 +50,43 @@ TopMenu.prototype.constructor = TopMenu;
 TopMenu.prototype._createGui = function () {
   var self = this;
 
-  var overviewDialogDiv = Functions.createElement({
-    type: "div",
-    name: "overviewDialog"
-  });
+  var overviewDialogDiv = Functions.createElement({type: "div"});
   self.getElement().appendChild(overviewDialogDiv);
   self.setControlElement(PanelControlElementType.OVERVIEW_DIALOG_DIV, overviewDialogDiv);
 
   var hideButtonDiv = Functions.createElement({
     type: "div",
-    className: "headerHideDivButton"
+    className: "minerva-header-hide-div-button"
   });
   self.getElement().appendChild(hideButtonDiv);
 
   var hideButton = Functions.createElement({
     type: "button",
-    className: "headerHideButton",
-    name: "hideButton"
+    className: "minerva-header-hide-button"
   });
   hideButtonDiv.appendChild(hideButton);
   self.setControlElement(PanelControlElementType.MENU_HIDE_LEFT_PANEL_BUTTON, hideButton);
 
   var hideButtonIcon = Functions.createElement({
     type: "i",
-    className: "fa fa-chevron-left",
-    name: "hideButtonIcon"
+    className: "fa fa-chevron-left"
   });
   hideButton.appendChild(hideButtonIcon);
   self.setControlElement(PanelControlElementType.MENU_HIDE_LEFT_PANEL_BUTTON_ICON, hideButtonIcon);
 
   var versionDiv = Functions.createElement({
     type: "div",
-    className: "headerTextBold",
-    name: "versionDiv"
+    className: "minerva-version-div"
   });
   self.getElement().appendChild(versionDiv);
   self.setControlElement(PanelControlElementType.MENU_VERSION_DIV, versionDiv);
 
+  self.getElement().appendChild(Functions.createElement({
+    type: "div",
+    className: "minerva-session-expire",
+    style: "display:none;"
+  }));
+
   var showOverviewDiv = Functions.createElement({
     type: "div",
     style: "float: left;"
@@ -88,7 +96,6 @@ TopMenu.prototype._createGui = function () {
   var showOverviewButton = Functions.createElement({
     type: "button",
     className: "minerva-overview-button",
-    name: "showOverviewButton",
     content: "<i class='fa fa-sitemap' style='font-size:18px; font-weight:400; padding-right:10px;'></i><span >SHOW OVERVIEW</span>",
     style: "display:none",
     xss: false
@@ -98,7 +105,7 @@ TopMenu.prototype._createGui = function () {
 
   var rightHeaderMenuDiv = Functions.createElement({
     type: "div",
-    className: "rightHeaderMenu"
+    className: "minerva-header-right-menu"
   });
   self.getElement().appendChild(rightHeaderMenuDiv);
 
@@ -110,8 +117,7 @@ TopMenu.prototype._createGui = function () {
 
   var legendCheckbox = Functions.createElement({
     type: "input",
-    inputType: "checkbox",
-    name: "legendCheckbox"
+    inputType: "checkbox"
   });
   div4checkboxes.appendChild(legendCheckbox);
   self.setControlElement(PanelControlElementType.MENU_LEGEND_CHECKBOX, legendCheckbox);
@@ -137,7 +143,6 @@ TopMenu.prototype._createGui = function () {
   var refreshCommentButton = Functions.createElement({
     type: "button",
     className: "minerva-overview-button",
-    name: "refreshCommentButton",
     content: "<i class='fa fa-refresh' style='font-size:21px; font-weight:400;'></i>",
     style: "display:none",
     xss: false
@@ -148,7 +153,6 @@ TopMenu.prototype._createGui = function () {
   var clearButton = Functions.createElement({
     type: "button",
     className: "minerva-overview-button",
-    name: "clearButton",
     content: "<i class='fa fa-times' style='font-size:18px; font-weight:300; padding-right:10px;'></i>CLEAR",
     xss: false
   });
@@ -187,16 +191,15 @@ TopMenu.prototype.init = function () {
   commentCheckbox.onclick = function () {
     ServerConnector.getSessionData(project).setShowComments(commentCheckbox.checked);
     if (commentCheckbox.checked) {
-      $(refreshCommentButton).css("display","inline");
+      $(refreshCommentButton).css("display", "inline");
     } else {
-      $(refreshCommentButton).css("display","none");
+      $(refreshCommentButton).css("display", "none");
     }
     return self.getMap().refreshComments().then(null, GuiConnector.alert);
   };
   refreshCommentButton.onclick = (function () {
     return function () {
-      self.getMap().refreshComments();
-      return false;
+      return self.getMap().refreshComments();
     };
   })();
 
@@ -207,16 +210,18 @@ TopMenu.prototype.init = function () {
     };
   })();
 
-  if (project.getTopOverviewImage() !== undefined && project.getTopOverviewImage() !== null) {
+  if (project.getTopOverviewImage() !== undefined) {
     self._overviewDialog = new OverviewDialog({
       customMap: self.getMap(),
+      configuration: self.getConfiguration(),
+      project: self.getProject(),
       element: self.getControlElement(PanelControlElementType.OVERVIEW_DIALOG_DIV)
     });
     var showOverviewButton = self.getControlElement(PanelControlElementType.MENU_SHOW_OVERVIEW_BUTTON);
     showOverviewButton.onclick = function () {
       return self._overviewDialog.showOverview();
     };
-    $(showOverviewButton).css("display","inline-block");
+    $(showOverviewButton).css("display", "inline-block");
   }
 
   if (ServerConnector.getSessionData().getShowComments()) {
@@ -268,6 +273,7 @@ TopMenu.prototype.destroy = function () {
   if (self._overviewDialog !== undefined) {
     self._overviewDialog.destroy();
   }
+  clearInterval(self._cronFunction);
   return Promise.resolve();
 };
 
@@ -284,4 +290,57 @@ TopMenu.prototype.toggleLegend = function () {
   }
 };
 
+/**
+ *
+ * @returns {Promise}
+ */
+TopMenu.prototype.checkIfSessionIsGoingToExpire = function () {
+  var self = this;
+  var lastAccessTimestamp = self.getServerConnector().getSessionData().getLastRequestTimeStamp();
+  var sessionInactivityOption = self.getConfiguration().getOption(ConfigurationType.SESSION_LENGTH);
+  var sessionInactivityLength = parseInt(sessionInactivityOption.getValue());
+  var sessionExpireTimestamp = lastAccessTimestamp + sessionInactivityLength;
+  var currentTimestamp = Math.floor(Date.now() / 1000);
+
+  //if session is going to expire in 10 minutes show information
+  if (sessionExpireTimestamp - currentTimestamp < 10 * 60) {
+    self.showSessionExpire(sessionExpireTimestamp - currentTimestamp);
+  } else {
+    self.hideSessionExpire();
+  }
+
+  //if session expired
+  if (sessionExpireTimestamp < currentTimestamp) {
+    return self.getServerConnector().logout();
+  }
+  return Promise.resolve();
+};
+
+/**
+ *
+ * @param {number} timeInSeconds
+ */
+TopMenu.prototype.showSessionExpire = function (timeInSeconds) {
+  var self = this;
+  var minutes = Math.floor(timeInSeconds / 60);
+  var seconds = Math.floor(timeInSeconds - minutes * 60);
+  var message = "Session expires in " + minutes + " minutes " + seconds + " seconds";
+  var button = Functions.createElement({
+    type: "button",
+    content: "EXTEND",
+    className: "minerva-extend-session-button",
+    onclick: function () {
+      return self.getServerConnector().extendSession();
+    }
+  });
+  $(".minerva-session-expire", self.getElement()).empty().append("<span>" + message + "</span>").append(button).show();
+};
+
+/**
+ *
+ */
+TopMenu.prototype.hideSessionExpire = function () {
+  $(".minerva-session-expire", this.getElement()).empty().hide();
+};
+
 module.exports = TopMenu;
\ No newline at end of file

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

@@ -298,7 +298,11 @@ Project.prototype.getTopOverviewImage = function () {
  * @param {OverviewImage} topOverviewImage
  */
 Project.prototype.setTopOverviewImage = function (topOverviewImage) {
-  this._topOverviewImage = topOverviewImage;
+  if (topOverviewImage === null) {
+    this._topOverviewImage = undefined;
+  } else {
+    this._topOverviewImage = topOverviewImage;
+  }
 };