Graph forces must be reconfigured if some d3 config is updated (#117)

Author: danielcaldas

src/components/graph/Graph.jsx

@@ -312,8 +312,7 @@ export default class Graph extends React.Component {
         );
         const state = graphElementsUpdated ? graphHelper.initializeGraphState(nextProps, this.state) : this.state;
         const newConfig = nextProps.config || {};
-        const configUpdated =
-            newConfig && !utils.isObjectEmpty(newConfig) && !utils.isDeepEqual(newConfig, this.state.config);
+        const { configUpdated, d3ConfigUpdated } = graphHelper.checkForGraphConfigChanges(nextProps, this.state);
         const config = configUpdated ? utils.merge(DEFAULT_CONFIG, newConfig) : this.state.config;
 
         // in order to properly update graph data we need to pause eventual d3 ongoing animations
@@ -325,6 +324,7 @@ export default class Graph extends React.Component {
             ...state,
             config,
             configUpdated,
+            d3ConfigUpdated,
             newGraphElements,
             transform
         });
@@ -334,10 +334,10 @@ export default class Graph extends React.Component {
         // if the property staticGraph was activated we want to stop possible ongoing simulation
         this.state.config.staticGraph && this.pauseSimulation();
 
-        if (!this.state.config.staticGraph && this.state.newGraphElements) {
+        if (!this.state.config.staticGraph && (this.state.newGraphElements || this.state.d3ConfigUpdated)) {
             this._graphForcesConfig();
             this.restartSimulation();
-            this.setState({ newGraphElements: false });
+            this.setState({ newGraphElements: false, d3ConfigUpdated: false });
         }
 
         if (this.state.configUpdated) {

src/components/graph/graph.helper.js

@@ -392,6 +392,23 @@ function checkForGraphElementsChanges(nextProps, currentState) {
     return { graphElementsUpdated, newGraphElements };
 }
 
+/**
+ * Logic to check for changes in graph config.
+ * @param {Object} nextProps - nextProps that graph will receive.
+ * @param {Object} currentState - the current state of the graph.
+ * @returns {Object.<string, boolean>} returns object containing update check flags:
+ * - configUpdated - global flag that indicates if any property was updated.
+ * - d3ConfigUpdated - specific flag that indicates changes in d3 configurations.
+ */
+function checkForGraphConfigChanges(nextProps, currentState) {
+    const newConfig = nextProps.config || {};
+    const configUpdated =
+        newConfig && !utils.isObjectEmpty(newConfig) && !utils.isDeepEqual(newConfig, currentState.config);
+    const d3ConfigUpdated = newConfig && newConfig.d3 && !utils.isDeepEqual(newConfig.d3, currentState.config.d3);
+
+    return { configUpdated, d3ConfigUpdated };
+}
+
 /**
  * Encapsulates common procedures to initialize graph.
  * @param {Object} props - Graph component props, object that holds data, id and config.
@@ -579,9 +596,9 @@ function getNodeCardinality(nodeId, linksMatrix) {
 }
 
 export {
-    NODE_PROPS_WHITELIST,
     buildLinkProps,
     buildNodeProps,
+    checkForGraphConfigChanges,
     checkForGraphElementsChanges,
     disconnectLeafNodeConnections,
     getLeafNodeConnections,