mirror of https://gitee.com/bigwinds/arangodb
403 lines
13 KiB
HTML
403 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="style/bootstrap.min.css" type="text/css"/>
|
|
<link rel="stylesheet" href="style/graphlayout.css" type="text/css"/>
|
|
|
|
<script src="../lib/d3.v3.min.js"></script>
|
|
<script src="../lib/underscore.js"></script>
|
|
<script src="../lib/jquery-1.8.3.js"></script>
|
|
<script src="../lib/jquery.livequery.js"></script>
|
|
<script src="graph/forceLayouter.js"></script>
|
|
<script src="graph/eventLibrary.js"></script>
|
|
<script src="graph/eventDispatcher.js"></script>
|
|
<script src="graph/nodeShaper.js"></script>
|
|
<script src="graph/edgeShaper.js"></script>
|
|
<script src="graph/arangoAdapter.js"></script>
|
|
<script src="graphViewer.js"></script>
|
|
<script>
|
|
|
|
//var arangodb = "http://localhost:8529";
|
|
var arangodb = "nirvana.org";
|
|
|
|
var createCollection = function(name, type, callback) {
|
|
if (type !== "Document" && type !== "Edge") {
|
|
throw "Unsupported type";
|
|
}
|
|
var data = {
|
|
"name": name,
|
|
"type": type,
|
|
"journalSize": 1048576
|
|
};
|
|
$.ajax({
|
|
cache: false,
|
|
type: "POST",
|
|
url: arangodb + "/_api/collection",
|
|
data: JSON.stringify(data),
|
|
contentType: "application/json",
|
|
processData: false,
|
|
async: false,
|
|
success: function(data) {
|
|
callback(data.id);
|
|
},
|
|
error: function(data) {
|
|
throw data.statusText;
|
|
}
|
|
});
|
|
};
|
|
|
|
var insertEdge = function (collectionID, from, to) {
|
|
$.ajax({
|
|
cache: false,
|
|
type: "POST",
|
|
async: false,
|
|
url: arangodb + "/_api/edge?collection=" + collectionID + "&from=" + from + "&to=" + to,
|
|
data: JSON.stringify({}),
|
|
contentType: "application/json",
|
|
processData: false,
|
|
success: function(data) {
|
|
return data._id;
|
|
},
|
|
error: function(data) {
|
|
throw data.statusText;
|
|
}
|
|
});
|
|
};
|
|
var insertNode = function (collectionID, node) {
|
|
var id;
|
|
$.ajax({
|
|
cache: false,
|
|
type: "POST",
|
|
async: false,
|
|
url: arangodb + "/_api/document?collection=" + collectionID,
|
|
data: JSON.stringify(node),
|
|
contentType: "application/json",
|
|
processData: false,
|
|
success: function(data) {
|
|
id = data._id;
|
|
},
|
|
error: function(data) {
|
|
throw data.statusText;
|
|
}
|
|
});
|
|
return id;
|
|
};
|
|
|
|
var setupArangoContent = function() {
|
|
var nodesCollection = "Classes";
|
|
var edgesCollection = "Connections";
|
|
|
|
//deleteArangoContent();
|
|
|
|
createCollection(nodesCollection, "Document", function(id) {nodesCollId = id;});
|
|
createCollection(edgesCollection, "Edge", function(id) {edgesCollId = id;});
|
|
|
|
var c1 = insertNode(nodesCollection, {id: 1, name: "graphViewer", type: "Controller"}),
|
|
c2 = insertNode(nodesCollection, {id: 2, name: "Shaper", type: "AbstractView"}),
|
|
c3 = insertNode(nodesCollection, {id: 3, name: "NodeShaper", type: "View"}),
|
|
c4 = insertNode(nodesCollection, {id: 4, name: "EdgeShaper", type: "View"}),
|
|
c5 = insertNode(nodesCollection, {id: 5, name: "Adapter", type: "AbstractModel"}),
|
|
c6 = insertNode(nodesCollection, {id: 6, name: "ArangoAdapter", type: "Model"}),
|
|
c7 = insertNode(nodesCollection, {id: 7, name: "JSONAdapter", type: "Model"}),
|
|
c8 = insertNode(nodesCollection, {id: 8, name: "Layouter", type: "AbstractView"}),
|
|
c9 = insertNode(nodesCollection, {id: 9, name: "forceLayouter", type: "View"}),
|
|
c10 = insertNode(nodesCollection, {id: 10, name: "eventLibrary", type: "Events"}),
|
|
|
|
|
|
c11 = insertNode(nodesCollection, {id: 11, name: "Configuration", type: "JSON"}),
|
|
c12 = insertNode(nodesCollection, {id: 12, name: "Configuration", type: "JSON"}),
|
|
|
|
c13 = insertNode(nodesCollection, {id: 13, name: "Configuration", type: "JSON"}),
|
|
c14 = insertNode(nodesCollection, {id: 14, name: "Configuration", type: "JSON"}),
|
|
c15 = insertNode(nodesCollection, {id: 15, name: "Configuration", type: "JSON"}),
|
|
|
|
|
|
nsc1 = insertNode(nodesCollection, {id: 16, name: "shape", type: "NodeShaper.shapes"}),
|
|
nsc2 = insertNode(nodesCollection, {id: 17, name: "label", type: "string||function(node)"}),
|
|
nsc3 = insertNode(nodesCollection, {id: 18, name: "size", type: "double||function(node)"}),
|
|
nsc4 = insertNode(nodesCollection, {id: 19, name: "ondrag", type: "function(node)"}),
|
|
nsc5 = insertNode(nodesCollection, {id: 20, name: "onclick", type: "function(node)"}),
|
|
nsc6 = insertNode(nodesCollection, {id: 21, name: "onupdate", type: "function(node)"});
|
|
|
|
insertEdge(edgesCollection, c1, c2);
|
|
insertEdge(edgesCollection, c1, c5);
|
|
insertEdge(edgesCollection, c1, c8);
|
|
insertEdge(edgesCollection, c1, c10);
|
|
|
|
insertEdge(edgesCollection, c2, c3);
|
|
insertEdge(edgesCollection, c2, c4);
|
|
|
|
insertEdge(edgesCollection, c5, c6);
|
|
insertEdge(edgesCollection, c5, c7);
|
|
|
|
insertEdge(edgesCollection, c8, c9);
|
|
|
|
insertEdge(edgesCollection, c10, c8);
|
|
insertEdge(edgesCollection, c10, c5);
|
|
insertEdge(edgesCollection, c10, c2);
|
|
|
|
insertEdge(edgesCollection, c3, c11);
|
|
insertEdge(edgesCollection, c4, c12);
|
|
insertEdge(edgesCollection, c6, c13);
|
|
insertEdge(edgesCollection, c7, c14);
|
|
|
|
insertEdge(edgesCollection, c9, c15);
|
|
|
|
insertEdge(edgesCollection, c11, nsc1);
|
|
insertEdge(edgesCollection, c11, nsc2);
|
|
insertEdge(edgesCollection, c11, nsc3);
|
|
insertEdge(edgesCollection, c11, nsc4);
|
|
insertEdge(edgesCollection, c11, nsc5);
|
|
insertEdge(edgesCollection, c11, nsc6);
|
|
};
|
|
|
|
function loadGraphFromNode() {
|
|
viewer.loadGraph($("#startNode").attr("value"));
|
|
}
|
|
|
|
function loadGraphFromAttribute() {
|
|
viewer.loadGraphWithAttributeValue($("#attribute").attr("value"), $("#value").attr("value"));
|
|
}
|
|
|
|
function createViewer() {
|
|
var nshape,
|
|
nlabel,
|
|
nsize,
|
|
ncentr,
|
|
ndragable,
|
|
nsconfig,
|
|
|
|
host,
|
|
ecol,
|
|
ncol,
|
|
aaconfig,
|
|
|
|
esconfig,
|
|
|
|
evconfig,
|
|
|
|
layouterConfig;
|
|
|
|
|
|
|
|
|
|
nshape = $("#nodeShape")[0];
|
|
nshape = nshape.options[nshape.selectedIndex].value;
|
|
|
|
nslabel = $("#nodeLabel")[0].value;
|
|
|
|
nsize = parseFloat($("#nodeSize")[0].value);
|
|
|
|
ncentr = $("#nodeCentrality")[0];
|
|
ncentr = ncentr.options[ncentr.selectedIndex].value;
|
|
|
|
ndragable = $("#dragable")[0].checked;
|
|
|
|
host = $("#host")[0].value;
|
|
ecol = $("#edgeCollection")[0].value;
|
|
ncol = $("#nodeCollection")[0].value;
|
|
|
|
|
|
/*
|
|
* shape: nodeShaper.shapes.CIRCLE,
|
|
* label: "key" \\ function(node),
|
|
* onclick: function(node),
|
|
* ondrag: function(node),
|
|
* onupdate: function(nodes)
|
|
*/
|
|
nsconfig = {
|
|
shape: NodeShaper.shapes[nshape],
|
|
label: nslabel,
|
|
size: nsize
|
|
};
|
|
|
|
if (ncentr === "children") {
|
|
nsconfig.childrenCentrality = true;
|
|
}
|
|
|
|
if (ndragable) {
|
|
nsconfig.dragable = true;
|
|
}
|
|
|
|
|
|
aaconfig = {
|
|
type: "arango",
|
|
nodeCollection: ncol,
|
|
edgeCollection: ecol,
|
|
host: host
|
|
};
|
|
|
|
esconfig = {};
|
|
|
|
|
|
|
|
evconfig = {
|
|
expand: {target: "nodes", type: "click"},
|
|
createNode: {target: $("#createNode"), type: "click", callback: function(newNode) {console.log(newNode);}}
|
|
};
|
|
|
|
|
|
layouterConfig = {
|
|
"type": "force",
|
|
"gravity": 0.01,
|
|
"distance": 100,
|
|
"charge": -300
|
|
};
|
|
|
|
|
|
$("#creationDialog")[0].style.display = "none";
|
|
viewer = new GraphViewer(d3.select("svg"), 980, 640, aaconfig, nsconfig, esconfig, layouterConfig, evconfig);
|
|
}
|
|
|
|
function bindExpander() {
|
|
viewer.rebind({expand: {target: "nodes", type: "click"}});
|
|
}
|
|
|
|
function bindEdit() {
|
|
|
|
}
|
|
|
|
function bindDelete() {
|
|
viewer.rebind({deleteNode: {target: "nodes", type: "click", callback: function() {console.log("Gone AWAY!");}}})
|
|
}
|
|
|
|
var viewer;
|
|
</script>
|
|
<title>DEMO</title>
|
|
</head>
|
|
<!--<body onload="setupArangoContent()"> -->
|
|
<body>
|
|
<form action="javascript:void(0);" autocomplete="on" class="form-horizontal" id="creationDialog">
|
|
<fieldset>
|
|
<legend>Create the Viewer</legend>
|
|
<fieldset>
|
|
<legend>Setup Arango Connection</legend>
|
|
<div class="control-group">
|
|
<label for="host" class="control-label">Host</label>
|
|
<div class="controls">
|
|
<input id="host" type="text" name="host" placeholder="Host" maxlength="75" class="input-xlarge" value="http://localhost:8529">
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="nodeCollection" class="control-label">Node Collection</label>
|
|
<div class="controls">
|
|
<input id="nodeCollection" type="text" name="nodeCollection" placeholder="Node Collection" maxlength="75" class="input-xlarge" value="Classes">
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="edgeCollection" class="control-label">Edge Collection</label>
|
|
<div class="controls">
|
|
<input id="edgeCollection" type="text" name="edgeCollection" placeholder="Edge Collection" maxlength="75" class="input-xlarge" value="Connections">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Nodes</legend>
|
|
<div class="control-group">
|
|
<label for="nodeShape" class="control-label">Node Shape</label>
|
|
<div class="controls">
|
|
<select class="input-xlarge" id="nodeShape" name="nodeShape">
|
|
<option value="CIRCLE">circle</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="nodeSize" class="control-label">Node Size</label>
|
|
<div class="controls">
|
|
<input id="nodeSize" type="text" name="nodeSize" placeholder="size" maxlength="75" class="input-xlarge" value="12">
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="nodeLabel" class="control-label">Node Label</label>
|
|
<div class="controls">
|
|
<input id="nodeLabel" type="text" name="nodeLabel" placeholder="label" maxlength="75" class="input-xlarge" value="id">
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="nodeCentrality" class="control-label">Size Centrality</label>
|
|
<div class="controls">
|
|
<select class="input-xlarge" id="nodeCentrality" name="nodeCentrality">
|
|
<option value="children">children</option>
|
|
<option value="none">none</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="nodeCentrality" class="control-label">Dragable</label>
|
|
<div class="controls">
|
|
<input type="checkbox" value="dragable" id="dragable">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<button type="submit" class="btn btn-primary" onclick="createViewer()">Create</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
|
|
<form action="javascript:void(0);" autocomplete="on" class="form-horizontal" id="creationDialog">
|
|
<fieldset>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<button id="expander" type="submit" class="btn btn-primary" onclick="bindExpander()">Expand</button>
|
|
<button id="edit" type="submit" class="btn btn-primary" onclick="bindEdit()">Edit</button>
|
|
<button id="delete" type="submit" class="btn btn-primary" onclick="bindDelete()">Delete</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
|
|
<svg width="980" height="640" id="svg"/>
|
|
<br />
|
|
<form action="javascript:void(0);" autocomplete="on" class="form-vertical" id="creationDialog">
|
|
<fieldset>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<input type="text" id="startNode" placeholder="Start-Node (1)" />
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<button type="submit" class="btn btn-primary" onclick="loadGraphFromNode()">Load</button>
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<button id="createNode" type="submit" class="btn btn-primary">Create Node</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
<br />
|
|
<form action="javascript:void(0);" autocomplete="on" class="form-vertical" id="creationDialog2">
|
|
<fieldset>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<input type="text" id="attribute" placeholder="Attribute" />
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<input type="text" id="value" placeholder="Value" />
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<button type="submit" class="btn btn-primary" onclick="loadGraphFromAttribute()">Load</button>
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<button id="createNode" type="submit" class="btn btn-primary">Create Node</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
|
|
|
|
</body>
|
|
</html> |