gv improvements

js/apps/system/_admin/aardvark/APP/frontend/js/arango/arango.js

@@ -279,10 +279,10 @@
     buildGraphSubNav: function (graph, activeKey) {
       var menus = {
         Content: {
-          route: '#graph2/' + encodeURIComponent(graph)
+          route: '#graph/' + encodeURIComponent(graph)
         },
         Settings: {
-          route: '#graph2/' + encodeURIComponent(graph) + '/settings'
+          route: '#graph/' + encodeURIComponent(graph) + '/settings'
         }
       };
 

js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js

@@ -40,8 +40,8 @@
       'node/:name': 'node',
       'logs': 'logs',
       'helpus': 'helpUs',
-      'graph2/:name': 'graph2',
-      'graph2/:name/settings': 'graph2settings',
+      'graph/:name': 'graph',
+      'graph/:name/settings': 'graphSettings',
       'support': 'support'
     },
 
@@ -54,9 +54,9 @@
         callback.apply(this, args);
       }
 
-      if (this.graphViewer2) {
-        if (this.graphViewer2.graphSettingsView) {
-          this.graphViewer2.graphSettingsView.hide();
+      if (this.graphViewer) {
+        if (this.graphViewer.graphSettingsView) {
+          this.graphViewer.graphSettingsView.hide();
         }
       }
     },
@@ -681,31 +681,31 @@
       this.queryView.render();
     },
 
-    graph2: function (name, initialized) {
+    graph: function (name, initialized) {
       this.checkUser();
       if (!initialized) {
-        this.waitForInit(this.graph2.bind(this), name);
+        this.waitForInit(this.graph.bind(this), name);
         return;
       }
-      if (this.graphViewer2) {
-        if (this.graphViewer2.graphSettingsView) {
-          this.graphViewer2.graphSettingsView.remove();
+      if (this.graphViewer) {
+        if (this.graphViewer.graphSettingsView) {
+          this.graphViewer.graphSettingsView.remove();
         }
-        this.graphViewer2.remove();
+        this.graphViewer.remove();
       }
-      this.graphViewer2 = new window.GraphViewer2({
+      this.graphViewer = new window.GraphViewer2({
         name: name,
         documentStore: this.arangoDocumentStore,
         collection: new window.GraphCollection(),
         userConfig: this.userConfig
       });
-      this.graphViewer2.render();
+      this.graphViewer.render();
     },
 
-    graph2settings: function (name, initialized) {
+    graphSettings: function (name, initialized) {
       this.checkUser();
       if (!initialized) {
-        this.waitForInit(this.graph2settings.bind(this), name);
+        this.waitForInit(this.graphSettings.bind(this), name);
         return;
       }
       if (this.graphSettingsView) {
@@ -893,8 +893,8 @@
       if (this.naviView) {
         this.naviView.resize();
       }
-      if (this.graphViewer2) {
-        this.graphViewer2.resize();
+      if (this.graphViewer) {
+        this.graphViewer.resize();
       }
       if (this.documentsView) {
         this.documentsView.resize();

js/apps/system/_admin/aardvark/APP/frontend/js/templates/graphSettingsView.ejs

@@ -10,7 +10,7 @@
 
   <div id="graphSettingsView" class="innerContent">
     
-    <div class="pure-g" style="margin-top: -15px">
+    <div class="pure-g" style="margin-top: -13px">
       <div class="pure-u-1-1 pure-u-md-1-1 pure-u-lg-1-1 pure-u-xl-1-1">
     
         <div class="pure-g pure-table pure-table-body">

js/apps/system/_admin/aardvark/APP/frontend/js/templates/graphViewer2.ejs

@@ -28,7 +28,7 @@
           <li class="enabled">
             <a id="selectNodes" class="headerButton">
               <span title="Lasso tool - Select and delete multiple nodes">
-                <i class="fa fa-pencil fa-stack-1x"></i>
+                <i class="fa fa-paint-brush fa-stack-1x"></i>
               </span>
             </a>
           </li>

js/apps/system/_admin/aardvark/APP/frontend/js/views/graphManagementView.js

@@ -25,7 +25,6 @@
       'keyup #graphManagementSearchInput': 'search',
       'click #graphManagementSearchSubmit': 'search',
       'click .tile-graph': 'redirectToGraphViewer',
-      'click #gv2': 'redirectToGraphViewer2',
       'click #graphManagementToggle': 'toggleGraphDropdown',
       'click .css-label': 'checkBoxes',
       'change #graphSortDesc': 'sorting'
@@ -47,15 +46,7 @@
     redirectToGraphViewer: function (e) {
       var name = $(e.currentTarget).attr('id');
       name = name.substr(0, name.length - 5);
-      window.location.hash = window.location.hash.substr(0, window.location.hash.length - 1) + '2/' + encodeURIComponent(name);
-    },
-
-    // please remove this when gv2 is launched
-    redirectToGraphViewer2: function (e) {
-      e.preventDefault();
-      var name = $(e.currentTarget).parent().parent().attr('id');
-      name = name.substr(0, name.length - 5);
-      window.App.navigate('graph2/' + encodeURIComponent(name), {trigger: true});
+      window.location.hash = window.location.hash.substr(0, window.location.hash.length - 1) + '/' + encodeURIComponent(name);
     },
 
     loadGraphViewer: function (graphName, refetch) {

js/apps/system/_admin/aardvark/APP/frontend/js/views/graphSettingsView.js

@@ -20,13 +20,13 @@
       },
       'nodeStart': {
         type: 'string',
-        name: 'Starting node',
+        name: 'Startnode',
         desc: 'A valid node id. If empty, a random node will be chosen.',
         value: 2
       },
       'layout': {
         type: 'select',
-        name: 'Layout algorithm',
+        name: 'Layout',
         desc: 'Different graph algorithms. No overlap is very fast (more than 5000 nodes), force is slower (less than 5000 nodes) and fruchtermann is the slowest (less than 500 nodes). The calculation time strongly depends on your nodes and edges counts.',
         noverlap: {
           name: 'No overlap',
@@ -57,7 +57,7 @@
       'depth': {
         desc: 'Search depth, starting from your start node.',
         type: 'number',
-        name: 'Search depth',
+        name: 'Search Depth',
         value: 2
       },
       'limit': {
@@ -81,7 +81,7 @@
       },
       'nodeLabelByCollection': {
         type: 'select',
-        name: 'Use collection name',
+        name: 'Use Collection Name',
         desc: 'Set label text by collection. If activated node label attribute will be ignored.',
         yes: {
           name: 'Yes',
@@ -94,7 +94,7 @@
       },
       'nodeColorByCollection': {
         type: 'select',
-        name: 'Use collection color',
+        name: 'Use Collection Color',
         no: {
           name: 'No',
           val: 'false'
@@ -113,12 +113,12 @@
       },
       'nodeColorAttribute': {
         type: 'string',
-        name: 'Color attribute',
+        name: 'Color Attribute',
         desc: 'If an attribute is given, nodes will then be colorized by the attribute. This setting ignores default node color if set.'
       },
       'nodeSizeByEdges': {
         type: 'select',
-        name: 'Size by edge count',
+        name: 'Size By Edges',
         yes: {
           name: 'Yes',
           val: 'true'
@@ -127,11 +127,11 @@
           name: 'No',
           val: 'false'
         },
-        desc: 'Should nodes be sized by their edges? If enabled, node sizing attribute will be ignored.'
+        desc: 'Should nodes be sized by their edges count? If enabled, node sizing attribute will be ignored.'
       },
       'nodeSize': {
         type: 'string',
-        name: 'Sizing attribute',
+        name: 'Sizing Attribute',
         desc: 'Default node size. Numeric value > 0.'
       },
       'edges': {
@@ -145,7 +145,7 @@
       },
       'edgeLabelByCollection': {
         type: 'select',
-        name: 'Use collection name',
+        name: 'Use Collection Name',
         desc: 'Set label text by collection. If activated edge label attribute will be ignored.',
         yes: {
           name: 'Yes',
@@ -158,7 +158,7 @@
       },
       'edgeColorByCollection': {
         type: 'select',
-        name: 'Use collection color',
+        name: 'Use Collection Color',
         no: {
           name: 'No',
           val: 'false'
@@ -177,7 +177,7 @@
       },
       'edgeColorAttribute': {
         type: 'string',
-        name: 'Color attribute',
+        name: 'Color Attribute',
         desc: 'If an attribute is given, edges will then be colorized by the attribute. This setting ignores default edge color if set.'
       },
       'edgeEditable': {
@@ -251,9 +251,11 @@
     },
 
     checkinput: function (e) {
-      if (e.currentTarget.id === this.lastFocussed) {
-        if (this.lastFocussedValue !== $(e.currentTarget).val()) {
-          this.saveGraphSettings();
+      if ((new Date() - this.lastSaved > 500)) {
+        if (e.currentTarget.id === this.lastFocussed) {
+          if (this.lastFocussedValue !== $(e.currentTarget).val()) {
+            this.saveGraphSettings();
+          }
         }
       }
     },
@@ -284,6 +286,7 @@
 
     saveGraphSettings: function (event, color, nodeStart, overwrite) {
       var self = this;
+      self.lastSaved = new Date();
       var combinedName = window.App.currentDB.toJSON().name + '_' + this.name;
 
       var config = {};
@@ -337,20 +340,21 @@
         layout: 'force',
         renderer: 'canvas',
         depth: '2',
+        limit: '250',
         nodeColor: '#2ecc71',
         nodeColorAttribute: '',
         nodeColorByCollection: 'true',
         edgeColor: '#cccccc',
         edgeColorAttribute: '',
-        edgeColorByCollection: 'false',
+        edgeColorByCollection: 'true',
         nodeLabel: '_key',
         edgeLabel: '',
         edgeType: 'arrow',
         nodeSize: '',
         nodeSizeByEdges: 'true',
-        edgeEditable: 'true',
+        edgeEditable: 'false',
         nodeLabelByCollection: 'false',
-        edgeLabelByCollection: 'true',
+        edgeLabelByCollection: 'false',
         nodeStart: '',
         barnesHutOptimize: true
       };
@@ -382,6 +386,7 @@
 
     render: function () {
       this.getGraphSettings(true);
+      this.lastSaved = new Date();
     },
 
     handleDependencies: function () {

js/apps/system/_admin/aardvark/APP/frontend/js/views/graphViewer2.js

@@ -122,7 +122,7 @@
     resize: function () {
       // adjust container widht + height
       $('#graph-container').width($('.centralContent').width());
-      $('#graph-container').height($('.centralRow').height() - 150);
+      $('#graph-container').height($('.centralRow').height() - 155);
     },
 
     toggleSettings: function () {
@@ -356,7 +356,7 @@
 
       // clear dom
       $('#nodeContextMenu').remove();
-      var string = '<div id="nodeContextMenu" class="nodeContextMenu"></div>';
+      var string = '<div id="nodeContextMenu" class="nodeContextMenu animated zoomIn"></div>';
       $('#graph-container').append(string);
 
       // clear state
@@ -779,64 +779,67 @@
       });
     },
 
-    // right click nodes context menu
-    createNodesContextMenu: function (e) {
+    nodesContextMenuCheck: function (e) {
+      this.nodesContextEventState = e;
+      this.openNodesDate = new Date();
+    },
+
+    // click nodes context menu
+    /*
+    createNodesContextMenu: function () {
       var self = this;
+      var e = self.nodesContextEventState;
 
-      // if right click
-      if (e.which === 3) {
-        var x = e.clientX - 50;
-        var y = e.clientY - 50;
-        this.clearOldContextMenu();
+      var x = e.clientX - 50;
+      var y = e.clientY - 50;
+      self.clearOldContextMenu();
 
-        var generateMenu = function (e) {
-          var Wheelnav = wheelnav;
+      var generateMenu = function (e) {
+        var Wheelnav = wheelnav;
 
-          var wheel = new Wheelnav('nodeContextMenu');
-          wheel.maxPercent = 1.0;
-          wheel.wheelRadius = 50;
-          wheel.clockwise = false;
-          wheel.colors = self.colors.hotaru;
-          wheel.multiSelect = true;
-          wheel.clickModeRotate = false;
-          wheel.slicePathFunction = slicePath().DonutSlice;
-          if (self.viewStates.captureMode) {
-            wheel.createWheel([icon.plus, icon.trash]);
-          } else {
-            wheel.createWheel([icon.trash, icon.arrowleft2]);
-          }
+        var wheel = new Wheelnav('nodeContextMenu');
+        wheel.maxPercent = 1.0;
+        wheel.wheelRadius = 50;
+        wheel.clockwise = false;
+        wheel.colors = self.colors.hotaru;
+        wheel.multiSelect = true;
+        wheel.clickModeRotate = false;
+        wheel.slicePathFunction = slicePath().DonutSlice;
+        if (self.viewStates.captureMode) {
+          wheel.createWheel([icon.plus, icon.trash]);
+        } else {
+          wheel.createWheel([icon.trash, icon.arrowleft2]);
+        }
 
-          wheel.navItems[0].selected = false;
-          wheel.navItems[0].hovered = false;
-          // add menu events
+        wheel.navItems[0].selected = false;
+        wheel.navItems[0].hovered = false;
+        // add menu events
 
-          // function 0: remove all selectedNodes
-          wheel.navItems[0].navigateFunction = function (e) {
-            self.clearOldContextMenu();
-            self.deleteNodesModal();
-          };
-
-          // function 1: clear contextmenu
-          wheel.navItems[1].navigateFunction = function (e) {
-            self.clearOldContextMenu();
-          };
-
-          // deselect active default entry
-          wheel.navItems[0].selected = false;
-          wheel.navItems[0].hovered = false;
+        // function 0: remove all selectedNodes
+        wheel.navItems[0].navigateFunction = function (e) {
+          self.clearOldContextMenu();
+          self.deleteNodesModal();
         };
 
-        $('#nodeContextMenu').css('position', 'fixed');
-        $('#nodeContextMenu').css('left', x);
-        $('#nodeContextMenu').css('top', y);
-        $('#nodeContextMenu').width(100);
-        $('#nodeContextMenu').height(100);
+        // function 1: clear contextmenu
+        wheel.navItems[1].navigateFunction = function (e) {
+          self.clearOldContextMenu();
+        };
 
-        generateMenu(e);
-      } else {
-        self.clearOldContextMenu();
-      }
+        // deselect active default entry
+        wheel.navItems[0].selected = false;
+        wheel.navItems[0].hovered = false;
+      };
+
+      $('#nodeContextMenu').css('position', 'fixed');
+      $('#nodeContextMenu').css('left', x);
+      $('#nodeContextMenu').css('top', y);
+      $('#nodeContextMenu').width(100);
+      $('#nodeContextMenu').height(100);
+
+      generateMenu(e);
     },
+    */
 
     // right click background context menu
     createContextMenu: function (e) {
@@ -887,7 +890,7 @@
       generateMenu(e);
     },
 
-    // right click edge context menu
+    // click edge context menu
     createEdgeContextMenu: function (edgeId, e) {
       var self = this;
       var x = this.cursorX - 165;
@@ -939,7 +942,7 @@
       generateMenu(e, edgeId);
     },
 
-    // right click node context menu
+    // click node context menu
     createNodeContextMenu: function (nodeId, e) {
       var self = this;
       var x; var y; var size;
@@ -988,9 +991,17 @@
         wheel.colors = hotaru;
         wheel.multiSelect = false;
         wheel.clickModeRotate = false;
-        wheel.sliceHoverAttr = {stroke: '#fff', 'stroke-width': 4};
+        wheel.sliceHoverAttr = {stroke: '#fff', 'stroke-width': 2};
         wheel.slicePathFunction = slicePath().DonutSlice;
-        wheel.createWheel([icon.edit, icon.trash, icon.flag, icon.connect, icon.expand]);
+        wheel.createWheel([
+          'imgsrc:img/gv_edit.png',
+          'imgsrc:img/gv_trash.png',
+          'imgsrc:img/gv_flag.png',
+          'imgsrc:img/gv_link.png',
+          'imgsrc:img/gv_expand.png'
+        ]);
+
+        $('#nodeContextMenu').addClass('animated bounceIn');
 
         window.setTimeout(function () {
           // add menu events
@@ -1287,6 +1298,16 @@
           });
         }
 
+        var style = 'position: absolute; right: 25px; bottom: 45px;';
+
+        if (!$('#deleteNodes').is(':visible')) {
+          $(self.el).append(
+            '<button style=" ' + style + ' "id="deleteNodes" class="button-danger fadeIn animated">Delete selected nodes</button>'
+          );
+          var c = document.getElementById('deleteNodes');
+          c.addEventListener('click', self.deleteNodesModal.bind(self), false);
+        }
+
         self.activeNodes = nodes;
         sigmaInstance.refresh();
       });
@@ -1312,13 +1333,13 @@
             });
           }
 
-          var style = 'position: absolute; left: 25px; bottom: 45px;';
+          var style = 'position: absolute; left: 25px; bottom: 50px;';
           if (this.aqlMode) {
             style = 'position: absolute; left: 30px; margin-top: -37px;';
           }
 
           $(this.el).append(
-            '<div style="' + style + '">' +
+            '<div style="' + style + ' animated fadeIn">' +
               '<span style="margin-right: 10px" class="arangoState"><span id="nodesCount">' + graph.nodes.length + '</span> nodes</span>' +
                 '<span class="arangoState"><span id="edgesCount">' + graph.edges.length + '</span> edges</span>' +
                   '</div>'
@@ -1352,7 +1373,7 @@
         defaultNodeBorderColor: '#8c8c8c',
         doubleClickEnabled: false,
         minNodeSize: 5,
-        labelThreshold: 15,
+        labelThreshold: 10,
         maxNodeSize: 15,
         batchEdgesDrawing: true,
         minEdgeSize: 10,
@@ -1373,11 +1394,12 @@
       };
 
       // halo settings
-      settings.nodeHaloColor = '#FF7A7A';
+      // settings.nodeHaloColor = '#FF7A7A';
+      settings.nodeHaloColor = 'rgba(146,197,192, 0.8)';
       settings.nodeHaloStroke = false;
       settings.nodeHaloStrokeColor = '#000';
-      settings.nodeHaloStrokeWidth = 0.5;
-      settings.nodeHaloSize = 15;
+      settings.nodeHaloStrokeWidth = 0;
+      settings.nodeHaloSize = 25;
       settings.nodeHaloClustering = false;
       settings.nodeHaloClusteringMaxRadius = 1000;
       settings.edgeHaloColor = '#fff';
@@ -1486,18 +1508,19 @@
               var callback = function (error, data) {
                 if (!error) {
                   var attributes = '';
-                  attributes += 'ID <span class="nodeId">' + data._id + '</span>';
+                  attributes += '<span>ID </span> <span class="nodeId">' + data._id + '</span>';
                   if (Object.keys(data).length > 3) {
-                    attributes += 'KEYS ';
+                    attributes += '<span>KEYS </span>';
                   }
                   _.each(data, function (value, key) {
                     if (key !== '_key' && key !== '_id' && key !== '_rev' && key !== '_from' && key !== '_to') {
                       attributes += '<span class="nodeAttribute">' + key + '</span>';
                     }
                   });
-                  var string = '<div id="nodeInfoDiv" class="nodeInfoDiv">' + attributes + '</div>';
+                  var string = '<div id="nodeInfoDiv" class="nodeInfoDiv" style="display: none;">' + attributes + '</div>';
 
                   $(self.el).append(string);
+                  $('#nodeInfoDiv').fadeIn('slow');
                 }
               };
 
@@ -1799,10 +1822,16 @@
     },
 
     toggleLasso: function () {
+      var self = this;
+
       if (this.graphLasso.isActive) {
+        var y = document.getElementById('deleteNodes');
+        y.removeEventListener('click', self.deleteNodesModal, false);
+        $('#deleteNodes').remove();
+
         // remove event
         var c = document.getElementsByClassName('sigma-lasso')[0];
-        c.removeEventListener('mouseup', this.createNodesContextMenu.bind(this), false);
+        c.removeEventListener('mouseup', this.nodesContextMenuCheck.bind(this), false);
 
         $('#selectNodes').removeClass('activated');
         this.graphLasso.deactivate();
@@ -1817,7 +1846,7 @@
 
         // add event
         var x = document.getElementsByClassName('sigma-lasso')[0];
-        x.addEventListener('mouseup', this.createNodesContextMenu.bind(this), false);
+        x.addEventListener('mouseup', self.nodesContextMenuCheck.bind(this), false);
       }
     },
 

js/apps/system/_admin/aardvark/APP/frontend/scss/_graphViewer2.scss

@@ -45,7 +45,7 @@
 
 .nodeInfoDiv {
   border-radius: 3px;
-  bottom: 0;
+  bottom: 4px;
   color: $c-bluegrey-dark;
   font-weight: 500;
   height: 25px;
@@ -63,16 +63,31 @@
     font-weight: 100;
     margin-right: 5px;
     padding: 2px 5px;
+
+    &::selection {
+      background: rgba(64, 74, 83, .8);
+    }
+
+    &::-moz-selection {
+      background: rgba(64, 74, 83, .8);
+    }
   }
 
   .nodeId {
     background-color: $c-positive;
   }
 
+  span {
+    float: left;
+    margin-bottom: 10px;
+    margin-right: 5px;
+  }
+
 }
 
 .nodeContextMenu {
 
+  animation-duration: .15s !important;
   position: fixed;
 
   svg {
@@ -122,8 +137,9 @@
   min-width: 400px;
   position: fixed;
   right: -1px;
-  top: 103px;
+  top: 100px;
   width: 400px;
+  z-index: 10;
 
   .pure-g {
 
@@ -153,6 +169,8 @@
     }
 
     .pure-u-1-3 {
+      font-size: 9pt;
+      font-weight: 100;
       line-height: 30px;
     }
 
@@ -169,9 +187,17 @@
     }
 
     .heading {
-      border-bottom: 1px solid $c-white;
+      background: rgba(0, 0, 0, .3);
+      border-bottom: 1px solid rgba(255, 255, 255, .2);
+      border-top: 1px solid rgba(255, 255, 255, .2);
+      font-size: 12pt;
+      font-weight: 100;
       height: 10px;
+      line-height: 9pt;
       margin-bottom: 15px;
+      margin-left: -10px;
+      padding-left: 10px;
+      padding-right: 10px;
     }
 
     .rangeLabel {
@@ -215,6 +241,7 @@
   }
 
   .pure-table {
+    overflow-x: hidden;
     padding-left: 10px;
     padding-right: 10px;
   }