Newer
Older
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
import * as Helpers from "../helpers";
import jQuery from "jquery";
import * as Config from "../../config";
export { NodeNeighborOverlay };
class NodeNeighborOverlay {
constructor(graph, parentNode, infoOverlay) {
this.graph = graph;
this.parentNode = parentNode;
this.infoOverlay = infoOverlay;
this.activeTabNav = null;
this.activeTabContent = null;
this.tabContentPages = {};
}
create() {
const bottomContainerDiv = Helpers.createDiv(
"bottom-container",
this.parentNode
);
const bottomContainerNavDiv = Helpers.createDiv(
"bottom-container-nav",
bottomContainerDiv
);
const bottomContainerLinkDiv = Helpers.createDiv(
"bottom-container-links",
bottomContainerDiv
);
for (const [cls, color] of Object.entries(this.graph.edgeColors)) {
const navTab = Helpers.createDiv(
"bottom-container-nav-tab",
bottomContainerNavDiv
);
navTab.innerText = cls.slice(0, 3);
navTab.style.backgroundColor = color;
navTab.edgeType = cls; // Attach the edge type to the DOM object to retrieve it during click events
jQuery(navTab).click((event) => this.openTab(event));
const tabContent = Helpers.createDiv(
"bottom-container-tab-content",
bottomContainerLinkDiv
);
tabContent.style.backgroundColor = color;
this.tabContentPages[cls] = tabContent;
}
this.initializeActive(bottomContainerNavDiv, bottomContainerLinkDiv);
}
/**
* Initializes the activeTabNav and activeTabContent variables to a random edge type.
* @param {Element} bottomContainerNavDiv
* @param {Element} bottomContainerLinkDiv
*/
initializeActive(bottomContainerNavDiv, bottomContainerLinkDiv) {
this.activeTabNav = bottomContainerNavDiv.firstChild;
this.activeTabContent = bottomContainerLinkDiv.firstChild;
this.activeTabContent.classList.add("active-tab-content");
this.activeTabNav.classList.add("active-tab-nav");
this.activeTabNav.innerText = this.activeTabNav.edgeType;
}
/**
* Click event handler for the tab headers of the bottom menu.
* @param event
*/
openTab(event) {
const navTab = event.target;
const cls = navTab.edgeType;
this.activeTabNav.classList.remove("active-tab-nav");
this.activeTabNav.innerText = this.activeTabNav.innerText.slice(0, 3);
navTab.classList.add("active-tab-nav");
navTab.innerText = cls;
this.activeTabContent.classList.remove("active-tab-content");
this.tabContentPages[cls].classList.add("active-tab-content");
this.activeTabNav = navTab;
this.activeTabContent = this.tabContentPages[cls];
}
clearTabContentPages() {
for (const page of Object.values(this.tabContentPages)) {
jQuery(page).empty();
}
}
createReference(target) {
const linkDiv = document.createElement("div");
linkDiv.className = "link-img";
if ("image" in target) {
const linkImage = document.createElement("img");
linkImage.src =
Config.PLUGIN_PATH + "datasets/images/" + target.image;
linkDiv.appendChild(linkImage);
}
jQuery(linkDiv).on("click", () => {
this.graph.focusOnNode(target);
this.infoOverlay.updateInfoOverlay(target);
});
return linkDiv;
}
updateTabs(node) {
this.clearTabContentPages();
for (const link of node.links) {
const target = link.source == node ? link.target : link.source;
const reference = this.createReference(target);
this.tabContentPages[link.type].appendChild(reference);
}
}
}