feat: add labels to network edges (#307)

* labels for network edge

* removing edge labels

* select edges when adding label

Author: kishore881

workspaces/vis-network/src/constants.js

@@ -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
+    font: {
+      background: "Transparent",
+    }
+  }
+})

workspaces/vis-network/src/network.js

@@ -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: {
@@ -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;
@@ -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;
@@ -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();
   }
 }