-
Notifications
You must be signed in to change notification settings - Fork 0
/
hideshownodes.js
201 lines (169 loc) · 6.33 KB
/
hideshownodes.js
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
// Create shared shown category count dict
window.shownNodesCategoryCount = getShownNodesCategoryCount();
window.shownEdgesCategoryCount = getShownEdgesCategoryCount();
// Get shown nodes count for each category
function getShownNodesCategoryCount() {
let shownNodesCategoryCount = {};
for (const [nodeId, node] of Object.entries(window.nodes)) {
if (!node.isHidden) {
if (!shownNodesCategoryCount[node.category]) shownNodesCategoryCount[node.category] = 0;
shownNodesCategoryCount[node.category] += 1;
}
}
return shownNodesCategoryCount;
}
// Get shown edges count for each category
function getShownEdgesCategoryCount() {
let shownEdgesCategoryCount = {};
for (const edge of window.edges) {
if (!edge.isHidden) {
if (!shownEdgesCategoryCount[edge.category]) shownEdgesCategoryCount[edge.category] = 0;
shownEdgesCategoryCount[edge.category] += 1;
}
}
return shownEdgesCategoryCount;
}
// Hide edge
function hideEdge(edge) {
if (edge.isHidden) return;
var connection = document.getElementById(edge.id);
connection.style.display = "none";
// Mark the edge as hidden
edge.isHidden = true;
shownEdgesCategoryCount[edge.category]--;
// Turn the hide/show nodes button of same category into show type if it was last node of the category
if (window.shownEdgesCategoryCount[edge.category] === 0) {
var button = document.getElementById(`${edge.category}-toggle`);
button.blur();
button.classList.replace("edge-toggle-hide", "edge-toggle-show");
button.classList.replace("is-danger", "is-link");
button.innerHTML = `<span>${edge.category.toUpperCase()}</span>
<span class="icon is-small"><i class="fas fa-eye"></i></span>`;
}
}
// Hide node edges
function hideNodeEdges(node) {
for (let edge of window.edges) {
if (edge.srcNodeId === node.id || edge.dstNodeId === node.id) {
hideEdge(edge);
}
}
}
// Show edge
function showEdge(edge) {
if (!edge.isHidden) return;
var connection = document.getElementById(edge.id);
connection.style.display = "block";
// Mark the edge as hidden
edge.isHidden = false;
shownEdgesCategoryCount[edge.category]++;
// Turn the hide/show nodes button of same category into hide type
var button = document.getElementById(`${edge.category}-toggle`);
button.blur();
button.classList.replace("edge-toggle-show", "edge-toggle-hide");
button.classList.replace("is-link", "is-danger");
button.innerHTML = `<span>${edge.category.toUpperCase()}</span>
<span class="icon is-small"><i class="fas fa-eye-slash"></i></span>`;
}
// Show node edges
function showNodeEdges(node) {
for (let edge of window.edges) {
if (edge.srcNodeId === node.id) {
const dstNode = window.nodes[edge.dstNodeId];
if (!dstNode.isHidden) showEdge(edge);
} else if (edge.dstNodeId === node.id) {
const srcNode = window.nodes[edge.srcNodeId];
if (!srcNode.isHidden) showEdge(edge);
}
}
}
// Hide node
function hideNode(node) {
var nodeElem = document.getElementById(node.id);
document.getElementById("graph-viewer").removeChild(nodeElem);
// Mark the node as hidden
node.isHidden = true;
window.shownNodesCategoryCount[node.category]--;
// Hide node edges
hideNodeEdges(node);
// Modify the node
$(nodeElem).removeClass("node").addClass("node-isHidden");
nodeElem.style = {};
// Change button to show type
var nodeMediaRight = nodeElem.querySelector(".media-right");
nodeMediaRight.innerHTML = `
<button class="button is-link is-outlined is-rounded is-small show-button">
<span class="icon is-small">
<i class="fas fa-eye"></i>
</span>
</button>`;
// Turn the hide/show nodes button of same category into show type if it was last node of the category
if (window.shownNodesCategoryCount[node.category] === 0) {
var button = document.getElementById(`${node.category}-toggle`);
button.blur();
button.classList.replace("node-toggle-hide", "node-toggle-show");
button.classList.replace("is-danger", "is-link");
button.innerHTML = `<span>${node.category.toUpperCase()}</span>
<span class="icon is-small"><i class="fas fa-eye"></i></span>`;
}
// Append the node as hiddenNode
document.getElementById("hidden-nodes").append(nodeElem);
}
// Show a node
function showNode(node) {
var nodeElem = document.getElementById(node.id);
document.getElementById("hidden-nodes").removeChild(nodeElem);
// Mark the node as non-hidden
node.isHidden = false;
window.shownNodesCategoryCount[node.category]++;
// Show node edges
showNodeEdges(node);
// Modify the node element
$(nodeElem).removeClass("node-isHidden").addClass("node");
nodeElem.style = {
position: "absolute",
top: "5%",
left: "5%",
};
// Change button to hide type
var nodeMediaRight = nodeElem.querySelector(".media-right");
nodeMediaRight.innerHTML = `
<button class="button is-danger is-outlined is-rounded is-small hide-button">
<span class="icon is-small">
<i class="fas fa-eye-slash"></i>
</span>
</button>`;
// Turn the hide/show nodes button of same category into hide type
var button = document.getElementById(`${node.category}-toggle`);
button.blur();
button.classList.replace("node-toggle-show", "node-toggle-hide");
button.classList.replace("is-link", "is-danger");
button.innerHTML = `<span>${node.category.toUpperCase()}</span>
<span class="icon is-small"><i class="fas fa-eye-slash"></i></span>`;
// Append to shown nodes div
document.getElementById("graph-viewer").append(nodeElem);
}
// Event delegation for hide buttons
document.getElementById("graph-viewer").addEventListener("click", function (e) {
if (e.target.closest(".hide-button")) {
// Get the pressed hide button
button = e.target.closest(".hide-button");
// Get the node and remove it from graph viewer
const nodeElem = button.closest(".node");
const nodeId = nodeElem.id;
let node = window.nodes[nodeId];
hideNode(node);
}
});
// Event delegation for show buttons
document.getElementById("hidden-nodes").addEventListener("click", function (e) {
if (e.target.closest(".show-button")) {
// Get the pressed hide button
button = e.target.closest(".show-button");
// Get the node and remove it from hidden nodes
const nodeElem = button.closest(".node-isHidden");
const nodeId = nodeElem.id;
let node = window.nodes[nodeId];
showNode(node);
}
});