Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

labels for network edges #307

Merged
merged 4 commits into from
Dec 4, 2023
Merged

labels for network edges #307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
13cad2d
labels for network edge
kishore881 Dec 4, 2023
707f5cd
Merge branch 'NodeSecure:master' into master
kishore881 Dec 4, 2023
dc05531
removing edge labels
kishore881 Dec 4, 2023
c49460e
select edges when adding label
kishore881 Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions workspaces/vis-network/src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,3 +85,24 @@ export const COLORS = Object.freeze({
}
}
});

export const LABELS = Object.freeze({
INCOMING: {
label: "child of",
font: {
background: "#EEE"
}
},
OUTGOING: {
label: "parent of",
font: {
background: "#EEE"
}
},
NONE: {
label: " ", // A space is used to simulate resetting the edge laebl
kishore881 marked this conversation as resolved.
Show resolved Hide resolved
font: {
background: "Transparent",
}
}
})
29 changes: 27 additions & 2 deletions workspaces/vis-network/src/network.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@ export const NETWORK_OPTIONS = {
arrows: "from",
hoverWidth: 3,
selectionWidth: 3,
width: 2
width: 2,
font: {
align: "middle",
face: "Roboto",
size: 40
}
},
physics: {
forceAtlas2Based: {
Expand Down Expand Up @@ -197,6 +202,11 @@ export default class NodeSecureNetwork {
const allNodes = this.nodes.get({ returnType: "Object" });
const allEdges = this.edges.get();

// reset all edge labels - even if user clicks on empty space
for(let id = 0; id < allEdges.length; id++) {
Object.assign(allEdges[id], CONSTANTS.LABELS.NONE);
}

// if something is selected:
if (params.nodes.length > 0) {
this.highlightEnabled = true;
Expand Down Expand Up @@ -230,7 +240,21 @@ export default class NodeSecureNetwork {
// the main node gets its own color and its label back.
Object.assign(allNodes[selectedNode], this.colors.SELECTED);

this.network.focus(selectedNode, { animation: true, scale: 0.35 });
// select and label edges connected to the selected node
const connectedEdges = this.network.getConnectedEdges(selectedNode);
this.network.selectEdges(connectedEdges);
for (let id = 0; id < connectedEdges.length; id++) {
const edgeIndex = allEdges.findIndex(edge => edge.id === connectedEdges[id]);
// the arrow on the edge is set to point into the 'from' node
if(allEdges[edgeIndex].from === selectedNode) {
Object.assign(allEdges[edgeIndex], CONSTANTS.LABELS.INCOMING);
} else if(allEdges[edgeIndex].to === selectedNode){
Object.assign(allEdges[edgeIndex], CONSTANTS.LABELS.OUTGOING);
}
}

// offset set to 250 to compensate for the package info slide in on the left of screen
this.network.focus(selectedNode, { animation: true, scale: 0.35, offset: { x:250, y:0 }});
}
else if (this.highlightEnabled) {
this.highlightEnabled = false;
Expand All @@ -243,6 +267,7 @@ export default class NodeSecureNetwork {

// transform the object into an array
this.nodes.update(Object.values(allNodes));
this.edges.update(allEdges);
this.network.stopSimulation();
}
}
Loading