-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (140 loc) · 4.88 KB
/
index.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<html>
<head>
<title>Dot Viewer</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/viz.js.css"/>
<script type="text/javascript" src="js/ace/ace.js"></script>
<script type="text/javascript" src="js/Split.js/split.min.js"></script>
<script type="text/javascript" src="js/fabric.js/fabric.min.js"></script>
<script type="text/javascript" src="js/svg-pan-zoom/svg-pan-zoom.min.js"></script>
<script type="text/javascript" src="js/viz.js/viz.js"></script>
<script type="text/javascript" src="js/js/getURLParams.js"></script>
</head>
<body>
<div id="app">
<div id="panes" class="split split-horizontal">
<div id="editor" class="split">
</div>
<div id="graph" class="split">
<div id="options">
<label id="engine">
Viz:
<select>
<option>circo</option>
<option selected="selected">dot</option>
<option>fdp</option>
<option>neato</option>
<option>osage</option>
<option>twopi</option>
</select>
</label>
<label id="format">
Fmt:
<select>
<option selected="selected">svg</option>
<option>png-image-element</option>
<option>json</option>
<option>xdot</option>
<option>plain</option>
<option>ps</option>
</select>
</label>
<label id="raw">
<input type="checkbox"/>raw</label>
<label id="datafile">
Data:
<select>
<option value="DCAT_2014.dot">DCAT 2014</option>
<option value="DCAT_v2_summary.dot">DCAT v2 Summary</option>
<option value="DCAT_v2_showing_changes.dot">DCAT v2 Showing Changes</option>
<option value="UCR_summary.dot">UCR Summary</option>
</select>
</label>
<button onClick="driver(document.querySelector('#datafile select').value)">Change File</button>
<label id="url">URL:
<input id="urlVal" value="https://raw.githubusercontent.com/pwin/model-viewer/master/dot_files/DCAT_v2_summary.dot"></input>
</label>
<button onClick="load_url(document.querySelector('#url input').value)">Load URL</button>
<a href="https://github.com/pwin/model-viewer" target="_repo">[repo]</a>
</div>
<div id="output">
<div id="error"/>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="resources/viz.js.app.js"></script>
<script>
// Create the XHR object.
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
//alert("with Credentials");
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
xhr.setRequestHeader("Accept", "text/plain");
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
//alert("Domain request");
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}
// Make the actual CORS request.
function makeCorsRequest(url) {
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
editor.setValue(text);
};
xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};
xhr.send();
}
//some test URLs
var url1 = 'https://raw.githubusercontent.com/pwin/model-viewer/master/dot_files/';
var url = 'simple1.dot';
function driver(url){
if(confirm("do you want to change the data source?")){
var f = url1 + url;
console.log(f)
makeCorsRequest(f);
}
else {
return false
}
}
function load_url(url){
if(confirm("do you want to change the data source?")){
var f = url;
console.log(f)
makeCorsRequest(f);
}
else {
return false
}
}
var dot = getUrlParameter('dot');
if (dot && isValidURL(dot) && confirm("do you want to change the data source to \n" + dot + "\n?")) {
document.getElementById("urlVal").value = dot
makeCorsRequest(dot);
updateGraph();
}
else
{
makeCorsRequest(url1 + url);
updateGraph();
}
</script>
</body>
</html>