From cc9b9407afdeeeb699519cc169a019a8df179500 Mon Sep 17 00:00:00 2001 From: Michael Hackstein Date: Thu, 11 Apr 2013 14:50:21 +0200 Subject: [PATCH] GraphViewer: Added GraphViewer to Admin Interface, however Menu is still hidden. Also started with a spec to test if the generated UI conforms to Admin Interface css --- html/admin/index.html | 25 +++- .../specGraphViewer/graphViewerUISpec.js | 26 ++++ html/admin/js/routers/router.js | 9 +- html/admin/js/templates/graphView.ejs | 50 ++++--- html/admin/js/views/graphView.js | 134 +++--------------- 5 files changed, 111 insertions(+), 133 deletions(-) diff --git a/html/admin/index.html b/html/admin/index.html index 57500c08c0..4367c01e28 100644 --- a/html/admin/index.html +++ b/html/admin/index.html @@ -37,6 +37,9 @@ + + + @@ -80,8 +83,7 @@ - - + @@ -96,6 +98,24 @@ + + + + + + + + + + + + + + + + + + @@ -163,6 +183,7 @@ + diff --git a/html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js b/html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js index b99522a7c2..cdea516f06 100644 --- a/html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js +++ b/html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js @@ -53,6 +53,14 @@ document.body.appendChild(div); ui = new GraphViewerUI(div, adapterConfig); this.addMatchers({ + toBeTag: function(name) { + var el = this.actual; + this.message = function() { + return el.tagName.toLowerCase() + " to be a " + name; + }; + return el.tagName.toLowerCase() === name; + }, + toBeADropdownMenu: function() { var div = this.actual, btn = div.children[0], @@ -208,6 +216,24 @@ expect(false).toBeTruthy(); }); + it('should have the same layout as the web interface', function() { + var header = div.children[0], + transHeader = header.firstChild; + searchField = transHeader.children[0], + + content = div.children[1]; + expect(header).toBeTag("ul"); + expect(header.id).toEqual("menubar"); + expect(header.className).toEqual("thumbnails2"); + expect(transHeader).toBeTag("div"); + expect(transHeader.id).toEqual("transparentHeader"); + + expect(searchField).toBeTag("div"); + expect(searchField.id).toEqual("transparentPlaceholder"); + expect(searchField.className).toEqual("pull-left"); + expect(searchField.children[0].id).toEqual("nodeid"); + expect(searchField.children[1].id).toEqual("loadnode"); + }); }); diff --git a/html/admin/js/routers/router.js b/html/admin/js/routers/router.js index e325c984bd..1dcc7ea595 100644 --- a/html/admin/js/routers/router.js +++ b/html/admin/js/routers/router.js @@ -18,7 +18,8 @@ $(document).ready(function() { "application/available/:key" : "applicationInstall", "applications/installed" : "applicationsInstalled", "applications/available" : "applicationsAvailable", - "applications/documentation" : "applicationsDocumentation" + "applications/documentation" : "applicationsDocumentation", + "graph" : "graph" }, initialize: function () { @@ -63,6 +64,7 @@ $(document).ready(function() { this.footerView = new window.footerView(); this.naviView.render(); this.footerView.render(); + this.graphView = new window.graphView(); }, collections: function() { var naviView = this.naviView; @@ -157,6 +159,11 @@ $(document).ready(function() { }); }, + graph: function() { + this.graphView.render(); + this.naviView.selectMenuItem('graph-menu'); + }, + applicationsAvailable: function() { if (this.foxxList === undefined) { this.foxxList = new window.FoxxCollection(); diff --git a/html/admin/js/templates/graphView.ejs b/html/admin/js/templates/graphView.ejs index 853689cd9d..74e217df50 100644 --- a/html/admin/js/templates/graphView.ejs +++ b/html/admin/js/templates/graphView.ejs @@ -1,18 +1,32 @@ - - -
-
Output
-
- - -
- - -
Input
-
- -
\ No newline at end of file +
+
+ Create the Viewer +
+ Setup Arango Connection +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+
+ +
+
+
+
\ No newline at end of file diff --git a/html/admin/js/views/graphView.js b/html/admin/js/views/graphView.js index ce8ac8f604..7b4d95f24e 100644 --- a/html/admin/js/views/graphView.js +++ b/html/admin/js/views/graphView.js @@ -1,132 +1,42 @@ -var graphView = Backbone.View.extend({ +window.graphView = Backbone.View.extend({ el: '#content', - svgWidth: 898, - svgHeight: 350, - scaleFactor: 1, - NODERADIUS: 12, // Constant Node Radius - LINKDIST: 100, // Constant Link Distance - handles: {}, template: new EJS({url: 'js/templates/graphView.ejs'}), initialize: function () { var self = this; - self.force = d3.layout.force(); - self.force.size([self.svgWidth, self.svgHeight]); - self.force.charge(-300); + }, events: { - 'click #submitQueryIcon' : 'submitQuery', - 'click #submitQueryButton' : 'submitQuery', - 'click .clearicon': 'clearOutput' + "click #createViewer" : "createViewer" }, - clearOutput: function() { - $('#graphOutput').empty(); + createViewer: function() { + var host, + ecol, + ncol, + aaconfig; + + host = $("#host")[0].value; + ecol = $("#edgeCollection")[0].value; + ncol = $("#nodeCollection")[0].value; + + aaconfig = { + type: "arango", + nodeCollection: ncol, + edgeCollection: ecol, + host: host + }; + + $("#creationDialog").remove(); + ui = new GraphViewerUI(document.getElementById("content"), aaconfig); }, - submitQuery: function() { - // TODO! - var self = this; - //self.renderGraph("js/graph/testdata/friends.json"); - self.renderGraph("js/graph/testdata/big.json"); - /* - var editor = ace.edit("aqlEditor"); - var data = {query: editor.getValue()}; - - var editor2 = ace.edit("queryOutput"); - - $.ajax({ - type: "POST", - url: "/_api/cursor", - data: JSON.stringify(data), - contentType: "application/json", - processData: false, - success: function(data) { - editor2.setValue(self.FormatJSON(data.result)); - }, - error: function(data) { - try { - var temp = JSON.parse(data.responseText); - editor2.setValue('[' + temp.errorNum + '] ' + temp.errorMessage); - } - catch (e) { - editor2.setValue('ERROR'); - } - } - }); - */ - }, - - renderGraph: function(jsonURL) { - var self = this; - if (self.force) { - self.force.stop(); - } - $('#graphSVG').empty(); - d3.json(jsonURL, function(error, graph) { - var s = (typeof(self.scaleFactor) != "undefined" ? self.scaleFactor : 1); - var r = s * self.NODERADIUS; - var nodes = graph.nodes; - var links = graph.links; - var svg = d3.select("svg"); - - window.graph.startForcebasedLayout(self.force, nodes, links, self.LINKDIST * s, self.forceTick.bind(self)); - var edge = window.graph.drawEdgeWithSimpleArrowHead(svg, links, self.NODERADIUS, s); - var edgeLabel = window.graph.appendLabelToEdges(svg, links, "label"); - var node = window.graph.drawNodes(svg, nodes); - window.graph.makeNodesCircular(node, r); - window.graph.makeNodesDragable(node, self.force); - window.graph.makeNodesClickable(node, self.nodeClicked); - window.graph.appendLabelToNodes(node, "name"); - - self.handles.edge = edge; - self.handles.node = node; - self.handles.edgeLabel = edgeLabel; - self.handles.nodes = nodes; - }); - }, - - forceTick: function() { - var self = this; - var changedDistance = window.graph.tick.nodePosition(self.handles.node, self.handles.nodes, self.x_scale); - window.graph.tick.edgePosition(self.handles.edge); - window.graph.tick.edgeLabelPosition(self.handles.edgeLabel, "label"); - if (changedDistance < 0.5) { - self.force.stop(); - } - }, - - nodeClicked: function(node) { - console.log(node); - }, render: function() { $(this.el).html(this.template.text); - var aqlEditor = ace.edit("aqlEditor"); - aqlEditor.getSession().setMode("ace/mode/javascript"); - aqlEditor.setTheme("ace/theme/merbivore_soft"); - aqlEditor.resize(); - $('#graphOutput').resizable({ - handles: "s", - ghost: true, - stop: function () { - - } - }); - $('#aqlEditor').resizable({ - handles: "n, s", - ghost: true, - helper: "resizable-helper", - stop: function () { - var aqlEditor = ace.edit("aqlEditor"); - aqlEditor.resize(); - } - }); - - $('#aqlEditor .ace_text-input').focus(); return this; }