fix: Add link with custom color in existing graph (#170)

* fix: Add link with custom color in existing graph

When a new link was added in real time by updating an existing graph
instance, if it was configured to have a custom color with the
'link.color' property, that value was ignored and the default color was
displayed instead. This issue was reported in #169.

The source of the problem was that, when generating a d3Link instance in
the '_mapDataLinkToD3Link' method, the value of the color property was
not kept. Only the source and target values were being added to the
d3Link which would actually be rendered in the graph, and the color
property was completely lost by the time the graph was to be drawn on
the screen.

The issue could be solved by adding a color property to the d3Link
object.

* Whitelist new exposed props

* Make _mapDataLinkToD3Link work properly by picking custom props

src/components/graph/graph.helper.js

@@ -34,6 +34,7 @@ import utils from "../../utils";
 import { computeNodeDegree } from "./collapse.helper";
 
 const NODE_PROPS_WHITELIST = ["id", "highlighted", "x", "y", "index", "vy", "vx"];
+const LINK_CUSTOM_PROPS_WHITELIST = ["color", "opacity", "strokeWidth"];
 
 /**
  * Create d3 forceSimulation to be applied on the graph.<br/>
@@ -137,17 +138,22 @@ function _initializeNodes(graphNodes) {
  */
 function _mapDataLinkToD3Link(link, index, d3Links = [], config, state = {}) {
     const d3Link = d3Links[index];
+    const customProps = utils.pick(link, LINK_CUSTOM_PROPS_WHITELIST);
 
     if (d3Link) {
         const toggledDirected = state.config && state.config.directed && config.directed !== state.config.directed;
+        const refinedD3Link = {
+            ...d3Link,
+            ...customProps,
+        };
 
         // every time we toggle directed config all links should be visible again
         if (toggledDirected) {
-            return { ...d3Link, isHidden: false };
+            return { ...refinedD3Link, isHidden: false };
         }
 
         // every time we disable collapsible (collapsible is false) all links should be visible again
-        return config.collapsible ? d3Link : { ...d3Link, isHidden: false };
+        return config.collapsible ? refinedD3Link : { ...refinedD3Link, isHidden: false };
     }
 
     const highlighted = false;
@@ -164,6 +170,7 @@ function _mapDataLinkToD3Link(link, index, d3Links = [], config, state = {}) {
         index,
         source,
         target,
+        ...customProps,
     };
 }