diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphViewer2.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphViewer2.js
index 75d14c2594..da7bded52b 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphViewer2.js
+++ b/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphViewer2.js
@@ -369,8 +369,6 @@
// clear events
var c = document.getElementsByClassName('sigma-mouse')[0];
c.removeEventListener('mousemove', self.drawLine.bind(this), false);
-
- // clear info div
},
trackCursorPosition: function (e) {
@@ -1032,6 +1030,7 @@
self.contextState.fromY = y;
var c = document.getElementsByClassName('sigma-mouse')[0];
+ self.drawHelp('Now click destination node, or click background to cancel.');
c.addEventListener('mousemove', self.drawLine.bind(this), false);
self.clearOldContextMenu();
@@ -1043,7 +1042,22 @@
self.expandNode(nodeId);
};
- // on hover
+ // add menu hover functions
+
+ var descriptions = [
+ 'Edit the node.',
+ 'Delete node.',
+ 'Set as startnode.',
+ 'Draw edge.',
+ 'Expand the node.'
+ ];
+
+ // hover functions
+ _.each(descriptions, function (val, key) {
+ wheel.navItems[key].navTitle.mouseover(function () { self.drawHelp(val); });
+ wheel.navItems[key].navTitle.mouseout(function () { self.removeHelp(); });
+ });
+
/* TODO
wheel.navItems[0].navSlice.mouseover(function (a) {
$(a.target).css('opacity', '1');
@@ -1072,6 +1086,20 @@
generateMenu(e, nodeId);
},
+ drawHelp: function (val) {
+ if (document.getElementById('helpTooltip') === null) {
+ $(this.el).append('
' + val + '
');
+ } else {
+ $('#helpTooltip span').text(val);
+ }
+
+ $('#helpTooltip').show();
+ },
+
+ removeHelp: function () {
+ $('#helpTooltip').remove();
+ },
+
clearMouseCanvas: function () {
var c = document.getElementsByClassName('sigma-mouse')[0];
var ctx = c.getContext('2d');
@@ -1188,7 +1216,7 @@
*/
drawLine: function (e) {
- var context = window.App.graphViewer2.contextState;
+ var context = window.App.graphViewer.contextState;
if (context.createEdge) {
var fromX = context.fromX;
@@ -1535,6 +1563,9 @@
s.bind('clickNode', function (e) {
if (self.contextState.createEdge === true) {
+ self.clearMouseCanvas();
+ self.removeHelp();
+
// create the edge
self.contextState._to = e.data.node.id;
var fromCollection = self.contextState._from.split('/')[0];
@@ -1543,6 +1574,7 @@
// validate edgeDefinitions
var foundEdgeDefinitions = self.getEdgeDefinitionCollections(fromCollection, toCollection);
self.addEdgeModal(foundEdgeDefinitions, self.contextState._from, self.contextState._to);
+ self.clearOldContextMenu(true);
} else {
if (!self.dragging) {
if (self.contextState.createEdge === true) {
@@ -1580,6 +1612,10 @@
if (e.data.captor.isDragging) {
self.clearOldContextMenu(true);
self.clearMouseCanvas();
+ } else if (self.contextState.createEdge === true) {
+ self.clearOldContextMenu(true);
+ self.clearMouseCanvas();
+ self.removeHelp();
} else {
// stage menu
if (!$('#nodeContextMenu').is(':visible')) {
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_graphViewer2.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_graphViewer2.scss
index 59e1ed62fe..5ba46f6020 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_graphViewer2.scss
+++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_graphViewer2.scss
@@ -246,3 +246,19 @@
padding-right: 10px;
}
}
+
+.helpTooltip {
+ position: fixed;
+ right: 0;
+ text-align: center;
+ top: 120px;
+ width: 100%;
+
+ span {
+ background-color: $c-bluegrey-dark;
+ border-radius: 2px;
+ color: $c-white;
+ padding: 10px;
+ padding-left: 150px;
+ }
+}
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_subNavbar.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_subNavbar.scss
index e36d4d92e2..9dabe77b4a 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_subNavbar.scss
+++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_subNavbar.scss
@@ -85,7 +85,6 @@
margin: 0;
&.top {
- //background-color: $c-navbar-main-color;
background-color: $c-bluegrey-dark;
height: 60px;
width: 100%;