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 03b2d66aec..f8619dd5a8 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 @@ -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( '
' + '' + 'Fetching graph data. Please wait ...


' + @@ -795,8 +891,13 @@ ); return; } else { - $('#content').append( - '
' + + var style = 'right: 25px; bottom: 45px;'; + if (this.aqlMode) { + style = 'position: absolute; left: 30px; margin-top: -37px;'; + } + + $(this.el).append( + '
' + '' + graph.nodes.length + ' nodes' + '' + graph.edges.length + ' edges' + '
' @@ -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 += '
'; } - $('#content').append(string); + $(self.el).append(string); } }; diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/queryView.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/queryView.js index 8fe58b1b01..c739e41435 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/js/views/queryView.js +++ b/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('
'); $('#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) { diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView.scss index 62dd497599..61fba92511 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView.scss +++ b/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;