Merge branch '787-reorder-items-in-the-contextual-menu' into 'master'

Resolve "Reorder items in the contextual menu"

Closes #787

See merge request !1015

CHANGELOG

@@ -9,6 +9,7 @@ minerva (15.0.0~alpha.1) stable; urgency=medium
     unobserved structure regions in the sequence view.
   * Small improvement: list of genomes is automatically refreshed during genome
     upload (#820)
+  * Small improvement: items in context menu are reorganized (#787)
   * Bug fix: structural states of proteins are imported properly from SBGNML PD
     (#995)
   * Bug fix: clear button icon, refresh comments button and show overview

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

@@ -2215,7 +2215,7 @@ ServerConnector.getImageDownloadUrl = function (params) {
  * @param {number[]} [params.overlayIds]
  * @param {number[]} [params.elementIds]
  * @param {number[]} [params.reactionIds]
- * @returns {Promise}
+ * @returns {Promise<String>}
  */
 ServerConnector.getModelDownloadUrl = function (params) {
   var self = this;

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

@@ -68,30 +68,44 @@ ContextMenu.prototype.destroy = function () {
 
 /**
  *
- * @param {string|SubMenu} name
- * @param {function} [handler]
- * @param {boolean} [disabled]
+ * @param {Object} params
+ * @param {string} [params.name]
+ * @param {SubMenu} [params.submenu]
+ * @param {function} [params.handler]
+ * @param {boolean} [params.disabled]
+ * @param {number} [params.position]
  */
-ContextMenu.prototype.addOption = function (name, handler, disabled) {
-  if (!disabled) disabled = false;
-  var self = this;
-  if (name instanceof SubMenu) {
-    self.getElement().appendChild(name.getElement());
+ContextMenu.prototype.addOption = function (params) {
+  if (!params.disabled) {
+    params.disabled = false;
+  }
+  var self = this, option;
+  if (params.submenu instanceof SubMenu) {
+    option = params.submenu.getElement();
   } else {
-    var option = Functions.createElement({
+    option = Functions.createElement({
       type: "li"
     });
     var link = Functions.createElement({
       type: "a",
       className: "dropdown-item",
       href: "#",
-      content: name
+      content: params.name
     });
-    if (disabled) {
+    if (params.disabled) {
       link.className = 'dropdown-item disabled';
     }
-    $(link).data("handler", handler);
+    $(link).data("handler", params.handler);
     option.appendChild(link);
+  }
+  if (Functions.isInt(params.position)) {
+    var child = self.getElement().childNodes[params.position];
+    if (child !== null && child !== undefined) {
+      self.getElement().insertBefore(option, child);
+    } else {
+      self.getElement().appendChild(option);
+    }
+  } else {
     self.getElement().appendChild(option);
   }
 };
@@ -175,21 +189,24 @@ ContextMenu.prototype.createExportAsImageSubmenu = function () {
 
     var map = self.getMap();
     converters.forEach(function (converter) {
-      submenu.addOption(converter.name, function () {
-        return map.getVisibleDataOverlays().then(function (visibleDataOverlays) {
-          var submapId = map.getActiveSubmapId();
-
-          return map.getServerConnector().getImageDownloadUrl({
-            polygonString: map.getSelectedPolygon(),
-            modelId: submapId,
-            handlerClass: converter.handler,
-            backgroundOverlayId: map.getBackgroundDataOverlay().getId(),
-            zoomLevel: map.getSubmapById(submapId).getZoom(),
-            overlayIds: extractDataOverlayIds(visibleDataOverlays)
-          });
-        }).then(function (url) {
-          return self.downloadFile(url);
-        }).catch(GuiConnector.alert);
+      submenu.addOption({
+        name: converter.name,
+        handler: function () {
+          return map.getVisibleDataOverlays().then(function (visibleDataOverlays) {
+            var submapId = map.getActiveSubmapId();
+
+            return map.getServerConnector().getImageDownloadUrl({
+              polygonString: map.getSelectedPolygon(),
+              modelId: submapId,
+              handlerClass: converter.handler,
+              backgroundOverlayId: map.getBackgroundDataOverlay().getId(),
+              zoomLevel: map.getSubmapById(submapId).getZoom(),
+              overlayIds: extractDataOverlayIds(visibleDataOverlays)
+            });
+          }).then(function (url) {
+            return self.downloadFile(url);
+          }).catch(GuiConnector.alert);
+        }
       });
     });
     return submenu;
@@ -214,19 +231,22 @@ ContextMenu.prototype.createExportAsModelSubmenu = function () {
 
     var map = self.getMap();
     converters.forEach(function (converter) {
-      submenu.addOption(converter.name, function () {
-        return map.getVisibleDataOverlays().then(function (visibleDataOverlays) {
-          return map.getServerConnector().getModelDownloadUrl({
-            polygonString: map.getSelectedPolygon(),
-            modelId: map.getActiveSubmapId(),
-            handlerClass: converter.handler,
-            backgroundOverlayId: map.getBackgroundDataOverlay().getId(),
-            zoomLevel: map.getZoom(),
-            overlayIds: extractDataOverlayIds(visibleDataOverlays)
-          });
-        }).then(function (url) {
-          return self.downloadFile(url);
-        }).catch(GuiConnector.alert);
+      submenu.addOption({
+        name: converter.name,
+        handler: function () {
+          return map.getVisibleDataOverlays().then(function (visibleDataOverlays) {
+            return map.getServerConnector().getModelDownloadUrl({
+              polygonString: map.getSelectedPolygon(),
+              modelId: map.getActiveSubmapId(),
+              handlerClass: converter.handler,
+              backgroundOverlayId: map.getBackgroundDataOverlay().getId(),
+              zoomLevel: map.getZoom(),
+              overlayIds: extractDataOverlayIds(visibleDataOverlays)
+            });
+          }).then(function (url) {
+            return self.downloadFile(url);
+          }).catch(GuiConnector.alert);
+        }
       });
     });
     return submenu;

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

@@ -34,27 +34,33 @@ MapContextMenu.prototype.constructor = MapContextMenu;
  *
  * @private
  */
-MapContextMenu.prototype._createMapContextMenuGui = function() {
+MapContextMenu.prototype._createMapContextMenuGui = function () {
   var self = this;
-  self.addOption("Add comment", function() {
-    return self.getMap().openCommentDialog();
+  self.addOption({
+    name: "Add comment",
+    handler: function () {
+      return self.getMap().openCommentDialog();
+    }
   });
-  self.addOption("Select mode", function() {
-    return self.getMap().toggleDrawing();
-  });  
 };
 
 /**
  *
  * @returns {Promise}
  */
-MapContextMenu.prototype.init = function() {
+MapContextMenu.prototype.init = function () {
   var self = this;
-  return self.createExportAsImageSubmenu().then(function(submenu){
-    self.addOption(submenu);
+  return self.createExportAsImageSubmenu().then(function (submenu) {
+    self.addOption({submenu: submenu});
     return self.createExportAsModelSubmenu();
-  }).then(function(submenu){
-    self.addOption(submenu);
+  }).then(function (submenu) {
+    self.addOption({submenu: submenu});
+    self.addOption({
+      name: "Select mode",
+      handler: function () {
+        return self.getMap().toggleDrawing();
+      }
+    });
   });
 };
 
@@ -62,7 +68,7 @@ MapContextMenu.prototype.init = function() {
  *
  * @param {MolArt} molArt
  */
-MapContextMenu.prototype.setMolArt = function(molArt){
+MapContextMenu.prototype.setMolArt = function (molArt) {
   this._molArt = molArt;
 };
 
@@ -70,7 +76,7 @@ MapContextMenu.prototype.setMolArt = function(molArt){
  *
  * @returns {MolArt}
  */
-MapContextMenu.prototype.getMolArt = function(){
+MapContextMenu.prototype.getMolArt = function () {
   return this._molArt;
 };
 

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

@@ -34,20 +34,24 @@ OptionsMenu.prototype.constructor = OptionsMenu;
  */
 OptionsMenu.prototype._createMenuGui = function () {
   var self = this;
-  self.addOption("Plugins", function () {
-    var initPromise = Promise.resolve();
-    if (self._pluginDialog === undefined) {
-      self._pluginDialog = new PluginDialog({
-        element: document.createElement("div"),
-        customMap: self.getMap(),
-        pluginManager: self.getPluginManager(),
-        configuration: self.getConfiguration()
-      });
-      initPromise = self._pluginDialog.init();
+  self.addOption({
+    name: "Plugins",
+    handler: function () {
+      var initPromise = Promise.resolve();
+      if (self._pluginDialog === undefined) {
+        self._pluginDialog = new PluginDialog({
+          element: document.createElement("div"),
+          customMap: self.getMap(),
+          pluginManager: self.getPluginManager(),
+          configuration: self.getConfiguration(),
+          project:self.getProject()
+        });
+        initPromise = self._pluginDialog.init();
+      }
+      return initPromise.then(function () {
+        return self._pluginDialog.open();
+      })
     }
-    return initPromise.then(function () {
-      return self._pluginDialog.open();
-    })
   });
 };
 

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

@@ -36,10 +36,10 @@ SelectionContextMenu.prototype.constructor = SelectionContextMenu;
 SelectionContextMenu.prototype.init = function () {
   var self = this;
   return self.createExportAsImageSubmenu().then(function (submenu) {
-    self.addOption(submenu);
+    self.addOption({submenu: submenu});
     return self.createExportAsModelSubmenu();
   }).then(function (submenu) {
-    self.addOption(submenu);
+    self.addOption({submenu: submenu});
   });
 };
 
@@ -49,10 +49,12 @@ SelectionContextMenu.prototype.init = function () {
  */
 SelectionContextMenu.prototype._createSelectionContextMenuGui = function () {
   var self = this;
-  self.addOption("Remove Selection", function () {
-    self.getMap().removeSelection();
-    if (self.getMap().isDrawingOn()) {
-      self.getMap().toggleDrawing();
+  self.addOption({
+    name: "Remove Selection", handler: function () {
+      self.getMap().removeSelection();
+      if (self.getMap().isDrawingOn()) {
+        self.getMap().toggleDrawing();
+      }
     }
   });
 };

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

@@ -44,10 +44,17 @@ SubMenu.prototype._createGui = function (params) {
   self.setUl(ul);
 
 };
-SubMenu.prototype.addOption = function (name, handler) {
+/**
+ *
+ * @param {Object} params
+ * @param {string} [params.name]
+ * @param {SubMenu} [params.submenu]
+ * @param {function} [params.handler]
+ */
+SubMenu.prototype.addOption = function (params) {
   var self = this;
-  if (name instanceof SubMenu) {
-    self.getElement().appendChild(name.getElement());
+  if (params.submenu instanceof SubMenu) {
+    self.getElement().appendChild(params.submenu.getElement());
   } else {
     var option = Functions.createElement({
       type: "li"
@@ -56,9 +63,9 @@ SubMenu.prototype.addOption = function (name, handler) {
       type: "a",
       href: "#",
       className: "dropdown-item",
-      content: name
+      content: params.name
     });
-    $(link).data("handler", handler);
+    $(link).data("handler", params.handler);
     option.appendChild(link);
     self.getUl().appendChild(option);
   }

frontend-js/src/main/js/map/structure/MolArt.js

@@ -82,11 +82,14 @@ MolArt.prototype.activateInContextMenu = function (uniprotIds, alias) {
     customMap: self._customMap
   });
   uniprotIds.forEach(function (uniprotId) {
-    submenu.addOption(uniprotId, function () {
-      self._activate(uniprotId);
-    }, false);
+    submenu.addOption({
+      name: uniprotId,
+      handler: function () {
+        self._activate(uniprotId);
+      }
+    });
   });
-  menu.addOption(submenu);
+  menu.addOption({submenu: submenu, position: 0});
 
 };
 
@@ -96,8 +99,13 @@ MolArt.prototype.activateInContextMenu = function (uniprotIds, alias) {
 MolArt.prototype.deactivateInContextMenu = function () {
   var menu = this._customMap.getContextMenu();
   removeFromContextMenu(menu);
-  menu.addOption("Open MolArt (no UniProt ID available)", function () {
-  }, true);
+  menu.addOption({
+    name: "Open MolArt (no UniProt ID available)",
+    handler: function () {
+    },
+    disabled: true,
+    position: 0
+  });
 };
 
 /**
@@ -195,7 +203,9 @@ var constructVariantsData = function (sequence, variants) {
         alternativeSequence: v.aaTo ? v.aaTo : 'd',
         consequence: v.varType,
       }
-    })}
+    }
+)
+}
 };
 
 var retrieveVariants = function (customMap, elementId) {

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

@@ -58,10 +58,12 @@ describe('MapContextMenu', function () {
     return ServerConnector.getProject().then(function (project) {
       map = helper.createCustomMap(project);
 
-      new MapContextMenu({
+      var menu= new MapContextMenu({
         element: testDiv,
         customMap: map
       });
+      return menu.init();
+    }).then(function () {
       map.setActiveSubmapId(map.getProject().getModels()[0].getId());
       map.setActiveSubmapClickCoordinates(new Point(2, 12));
 

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

@@ -18,7 +18,7 @@ describe('SubMenu', function () {
       customMap: map
     });
 
-    menu.addOption("xxx");
+    menu.addOption({name: "xxx"});
 
     assert.equal(logger.getWarnings().length, 0);
   });