-
Notifications
You must be signed in to change notification settings - Fork 5
/
graphviz.html
84 lines (75 loc) · 3.6 KB
/
graphviz.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html>
<head>
<!-- Import all the libraries we need. -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<link rel="stylesheet" type="text/css" href="joint.min.css" />
<script src="dagre.min.js"></script>
<script src="graphlib.min.js"></script>
<script src="joint.js"></script>
<!-- Define the styles of the graphs. -->
<style>
g text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.object rect{
fill:rgba(255,0,0,0.3);
}
.pred rect{
fill:rgba(0,255,0,0.3);
}
.attr rect{
fill:rgba(0,0,255,0.3);
}
</style>
</head>
<body>
<!-- List basic statistics of the graph. -->
<div class='container'>
<div style='margin: 10px;' class="row">
<div class="col-4">
<div class="row" align='center'>
<div class="col-4">
<div class='stat_element'>Objects:</div>
<div class='stat_element'><span id='num_objects'></span></div>
</div>
<div class="col-4">
<div class='stat_element'>Attributes: </div>
<div class='stat_element'><span id='num_attributes'></span></div>
</div>
<div class="col-4">
<div class='stat_element'>Relationships: </div>
<div class='stat_element'><span id='num_relationships'></span></div>
</div>
</div>
<!-- Add the image to the image-container div. -->
<div id='image-container'></div>
</div>
<div class="col-8">
<!-- Creates the graph visualization in the image-graph div. -->
<div style='margin: 50px;' id='image-graph'></div>
</div>
</div>
</div>
<!-- Location of where the graph is stored as js file. I read from a javascript file to avoid cross origin errors. -->
<script type='text/javascript' src='scene_graph.js'></script>
<!-- Load function that generates the graph visualization. -->
<script type='text/javascript' src='render-scene-graph.js'></script>
<!-- Read the graph, display the image and generate the graph visualization. -->
<script>
var imageContainer = $('#image-container');
var image = $("<img style='width:400px; height:400px;' src='" + graph.url + "'></img>");
imageContainer.append(image);
$('#num_objects').text(graph.objects.length)
$('#num_attributes').text(graph.attributes.length)
$('#num_relationships').text(graph.relationships.length)
renderSceneGraph('#image-graph', graph);
</script>
</body>
</html>