-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
106 lines (94 loc) · 3.18 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
<html>
<head>
<script type="text/javascript" src="http://localhost:5000/data.js"></script>
<script>
function showFile(uri) {
found_element = window.orbacleFiles.find(function(elem) { return (elem[0] == uri) })
filetext = atob(found_element[1]);
window.currentRawText = filetext;
code = document.getElementById('code')
code.innerHTML = window.currentRawText
const nodelist = document.getElementById('nodelist');
const nodesForFile = orbacleNodes.filter(function(node) { return (node[2] == uri)});
nodelist.innerHTML = nodesForFile.map(function(node) { return (`<tr onclick='highlight(${node[3]}, ${node[4]}, ${node[5]}, ${node[6]}, "${node[1]}")'><td>${node[3]}:${node[4]} - ${node[5]}:${node[6]}</td><td>${node[0]}</td><td>${node[1]}</td></tr>`)}).join("\n");
}
function highlight(startLine, startCharacter, endLine, endCharacter, type) {
oldLines = window.currentRawText.split("\n")
code = document.getElementById('code')
if (startLine == endLine) {
startLineContent = oldLines[startLine];
newStartLineContent = startLineContent.substr(0, startCharacter) + '<b>' + startLineContent.substr(startCharacter, endCharacter - startCharacter + 1) + '</b>' + startLineContent.substr(endCharacter + 1);
oldLines[startLine] = newStartLineContent;
} else {
startLineContent = oldLines[startLine];
newStartLineContent = startLineContent.substr(0, startCharacter) + '<b>' + startLineContent.substr(startCharacter);
oldLines[startLine] = newStartLineContent;
endLineContent = oldLines[endLine];
newEndLineContent = endLineContent.substr(0, endCharacter + 1) + '</b>' + endLineContent.substr(endCharacter + 1);
oldLines[endLine] = newEndLineContent;
}
code.innerHTML = oldLines.join("\n");
const typeNode = document.getElementById('type')
typeNode.innerHTML = `Type of selected element: <b>${type}<b>`;
}
window.onload = function(e){
const filesList = document.getElementById('fileslist');
const filePaths = orbacleFiles.map(function(file) { return file[0]; });
filesList.innerHTML = filePaths.map(function(file) { return (`<a href='#' onclick='showFile("${file}");'>${file}</a>`) }).join(" | ");
}
</script>
<style>
#code b {
background-color: red;
}
#files, #left, #type, #code, #nodes {
border: black 1px solid;
display: block;
}
#files {
width: 100%;
}
#left {
float: left;
width: 700px;
}
#type {
float: left;
width: 100%;
height: 50px;
text-align: center;
}
#code {
float: left;
width: 100%;
font-family: "Courier New", Courier, monospace;
white-space: pre-wrap;
max-height: 700px;
overflow-y: scroll;
}
#nodes {
width: 700px;
float: left;
max-height: 700px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="files">
<ul id="fileslist">
<li><a onclick="showFile('data_flow_graph.rb')">data_flow_graph.rb</a></li>
</ul>
</div>
<div id="left">
<div id="type">Unknown</div>
<div id="code">
Load some file on the left
</div>
</div>
<div id="nodes">
<table id="nodelist">
</table>
</div>
</body>
</html>