ui aql graph support

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

@@ -18,19 +18,30 @@
     initialize: function (options) {
       var self = this;
 
+      if (options.id) {
+        // dynamically set id if available
+        this.setElement(options.id);
+        this.graphData = options.data;
+        this.aqlMode = true;
+      }
+
       this.name = options.name;
       this.userConfig = options.userConfig;
       this.documentStore = options.documentStore;
       this.initSigma();
 
-      this.collection.fetch({
-        cache: false,
-        success: function (data) {
-          self.model = self.collection.findWhere({_key: options.name}).toJSON();
-        }
-      });
+      if (this.name !== undefined) {
+        this.collection.fetch({
+          cache: false,
+          success: function (data) {
+            self.model = self.collection.findWhere({_key: options.name}).toJSON();
+          }
+        });
+      }
     },
 
+    aqlMode: false,
+
     events: {
       'click #downloadPNG': 'downloadSVG',
       'click #reloadGraph': 'reloadGraph',
@@ -110,6 +121,91 @@
       this.fetchGraph(toFocus);
     },
 
+    renderAQL: function (data) {
+      this.$el.html(this.template.render({}));
+
+      // remove not needed elements
+      this.$el.find('.headerBar').remove();
+
+      // set graph box height
+      var height = $('.centralRow').height() - 250;
+      this.$el.find('#graph-container').css('height', height);
+
+      // render
+      this.graphData.modified = this.parseData(this.graphData.original, this.graphData.graphInfo);
+      this.renderGraph(this.graphData.modified);
+    },
+
+    parseData: function (data, type) {
+      var vertices = {}; var edges = {};
+      var returnObj = {
+        nodes: [],
+        edges: [],
+        settings: {}
+      };
+
+      if (type === 'object') {
+        _.each(data, function (obj) {
+          if (obj.edges && obj.vertices) {
+            _.each(obj.edges, function (edge) {
+              edges[edge._id] = {
+                id: edge._id,
+                source: edge._from,
+                label: edge._key,
+                color: '#cccccc',
+                target: edge._to
+              };
+            });
+
+            _.each(obj.vertices, function (node) {
+              vertices[node._id] = {
+                id: node._id,
+                label: node._key,
+                size: 10,
+                color: '#2ecc71',
+                x: Math.random(),
+                y: Math.random()
+              };
+            });
+          }
+        });
+
+        _.each(vertices, function (node) {
+          returnObj.nodes.push(node);
+        });
+
+        _.each(edges, function (edge) {
+          returnObj.edges.push(edge);
+        });
+      } else if (type === 'array') {
+        _.each(data, function (edge) {
+          vertices[edge._from] = null;
+          vertices[edge._to] = null;
+
+          returnObj.edges.push({
+            id: edge._id,
+            source: edge._from,
+            label: edge._key,
+            color: '#cccccc',
+            target: edge._to
+          });
+        });
+
+        _.each(vertices, function (val, key) {
+          returnObj.nodes.push({
+            id: key,
+            label: key,
+            size: 10,
+            color: '#2ecc71',
+            x: Math.random(),
+            y: Math.random()
+          });
+        });
+      }
+
+      return returnObj;
+    },
+
     rerender: function () {
       this.fetchGraph();
     },
@@ -117,7 +213,7 @@
     fetchGraph: function (toFocus) {
       var self = this;
       // arangoHelper.buildGraphSubNav(self.name, 'Content');
-      $('#content').append(
+      $(this.el).append(
         '<div id="calculatingGraph" style="position: absolute; left: 25px; top: 130px;">' +
         '<i class="fa fa-circle-o-notch fa-spin" style="margin-right: 10px;"></i>' +
         '<span id="calcText">Fetching graph data. Please wait ... </span></br></br></br>' +
@@ -795,8 +891,13 @@
         );
         return;
       } else {
-        $('#content').append(
-          '<div style="position: absolute; right: 25px; bottom: 45px;">' +
+        var style = 'right: 25px; bottom: 45px;';
+        if (this.aqlMode) {
+          style = 'position: absolute; left: 30px; margin-top: -37px;';
+        }
+
+        $(this.el).append(
+          '<div style="' + style + '">' +
           '<span style="margin-right: 10px" class="arangoState">' + graph.nodes.length + ' nodes</span>' +
           '<span class="arangoState">' + graph.edges.length + ' edges</span>' +
           '</div>'
@@ -806,7 +907,7 @@
       this.Sigma = sigma;
 
       // defaults
-      var algorithm = 'noverlap';
+      var algorithm = 'force';
       var renderer = 'canvas';
 
       if (this.graphConfig) {
@@ -880,10 +981,12 @@
       });
       this.currentGraph = s;
 
-      sigma.plugins.fullScreen({
-        container: 'graph-container',
-        btnId: 'graph-fullscreen-btn'
-      });
+      if (!this.aqlMode) {
+        sigma.plugins.fullScreen({
+          container: 'graph-container',
+          btnId: 'graph-fullscreen-btn'
+        });
+      }
 
       if (algorithm === 'noverlap') {
         var noverlapListener = s.configNoverlap({
@@ -919,10 +1022,12 @@
 
       // for canvas renderer allow graph editing
       if (renderer === 'canvas') {
-        s.bind('rightClickStage', function (e) {
-          self.createContextMenu(e);
-          self.clearMouseCanvas();
-        });
+        if (!self.aqlMode) {
+          s.bind('rightClickStage', function (e) {
+            self.createContextMenu(e);
+            self.clearMouseCanvas();
+          });
+        }
 
         s.bind('overNode', function (e) {
           $('.nodeInfoDiv').remove();
@@ -958,7 +1063,7 @@
                   string += '</pre></div>';
                 }
 
-                $('#content').append(string);
+                $(self.el).append(string);
               }
             };
 

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

@@ -28,6 +28,8 @@
       }
     },
 
+    graphs: [],
+
     settings: {
       aqlWidth: undefined
     },
@@ -1487,7 +1489,7 @@
         } else if (result.defaultType === 'graph') {
           $('#outputEditorWrapper' + counter + ' .arangoToolbarTop').after('<div id="outputGraph' + counter + '"></div>');
           $('#outputGraph' + counter).show();
-          self.renderOutputGraph(result, data);
+          self.renderOutputGraph(result, counter);
 
           $('#outputEditor' + counter).hide();
         }
@@ -1646,6 +1648,7 @@
           if (percentagea >= 95) {
             found = true;
             toReturn.defaultType = 'graph';
+            toReturn.graphInfo = 'object';
           }
         } else {
           // case b) 95% have _from and _to attribute
@@ -1663,6 +1666,7 @@
           if (percentageb >= 95) {
             found = true;
             toReturn.defaultType = 'graph';
+            toReturn.graphInfo = 'array';
             // then display as graph
           }
         }
@@ -1698,11 +1702,9 @@
 
           var rate;
 
-          console.log(attributes);
           _.each(attributes, function (val, key) {
             rate = (val / result.length) * 100;
 
-            console.log(rate);
             if (check !== false) {
               if (rate <= 95) {
                 check = false;
@@ -1825,15 +1827,19 @@
         part = [];
       });
 
-      console.log(counter);
       $('#outputTable' + counter).append(this.table.render({content: tableDescription}));
-
-      console.log(tableDescription.titles);
-      console.log(tableDescription.rows);
     },
 
-    renderOutputGraph: function () {
-
+    renderOutputGraph: function (data, counter) {
+      this.graphViewer2 = new window.GraphViewer2({
+        name: undefined,
+        documentStore: window.App.arangoDocumentStore,
+        collection: new window.GraphCollection(),
+        userConfig: window.App.userConfig,
+        id: '#outputGraph' + counter,
+        data: data
+      });
+      this.graphViewer2.renderAQL();
     },
 
     getAQL: function (originCallback) {

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

@@ -365,6 +365,13 @@
     }
   }
 
+  .graphContent {
+    border-left: 1px solid $c-content-border;
+    border-right: 1px solid $c-content-border;
+    margin-right: -2px;
+    margin-top: 0;
+  }
+
   .switchAce {
     background-color: rgba(0, 0, 0, .6);
     border-radius: 3px;