Bugs with focusedNodeId

src/components/graph/Graph.jsx

@@ -133,8 +133,6 @@ export default class Graph extends React.Component {
    * @returns {Object} - Focus and zoom animation properties.
    */
   _generateFocusAnimationProps = () => {
-    const { focusedNodeId } = this.state;
-
     // In case an older animation was still not complete, clear previous timeout to ensure the new one is not cancelled
     if (this.state.enableFocusAnimation) {
       if (this.focusAnimationTimeout) {
@@ -151,7 +149,7 @@ export default class Graph extends React.Component {
 
     return {
       style: { transitionDuration: `${transitionDuration}s` },
-      transform: focusedNodeId ? this.state.focusTransformation : null,
+      transform: this.state.focusTransformation,
     };
   };
 
@@ -538,7 +536,9 @@ export default class Graph extends React.Component {
     const transform = newConfig.panAndZoom !== this.state.config.panAndZoom ? 1 : this.state.transform;
     const focusedNodeId = nextProps.data.focusedNodeId;
     const d3FocusedNode = this.state.d3Nodes.find(node => `${node.id}` === `${focusedNodeId}`);
-    const focusTransformation = getCenterAndZoomTransformation(d3FocusedNode, this.state.config);
+    const containerElId = `${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`;
+    const focusTransformation =
+      getCenterAndZoomTransformation(d3FocusedNode, this.state.config, containerElId) || this.state.focusTransformation;
     const enableFocusAnimation = this.props.data.focusedNodeId !== nextProps.data.focusedNodeId;
 
     // if we're given a function to call when the zoom changes, we create a debounced version of it

src/components/graph/graph.helper.js

@@ -25,6 +25,8 @@ import {
   forceSimulation as d3ForceSimulation,
   forceManyBody as d3ForceManyBody,
 } from "d3-force";
+import { select as d3Select } from "d3-selection";
+import { zoom as d3Zoom, zoomIdentity as d3ZoomIdentity } from "d3-zoom";
 
 import CONST from "./graph.const";
 import DEFAULT_CONFIG from "./graph.config";
@@ -326,21 +328,33 @@ function checkForGraphConfigChanges(nextProps, currentState) {
  * selected node.
  * @param {Object} d3Node - node to focus the graph view on.
  * @param {Object} config - same as {@link #graphrenderer|config in renderGraph}.
+ * @param {string} containerElId - ID of container element
  * @returns {string|undefined} transform rule to apply.
  * @memberof Graph/helper
  */
-function getCenterAndZoomTransformation(d3Node, config) {
+function getCenterAndZoomTransformation(d3Node, config, containerElId) {
   if (!d3Node) {
     return;
   }
 
   const { width, height, focusZoom } = config;
 
+  const selector = d3Select(`#${containerElId}`);
+
+  // in order to initialize the new position
+  selector.call(
+    d3Zoom().transform,
+    d3ZoomIdentity
+      .translate(width / 2, height / 2)
+      .scale(focusZoom)
+      .translate(-d3Node.x, -d3Node.y)
+  );
+
   return `
-        translate(${width / 2}, ${height / 2})
-        scale(${focusZoom})
-        translate(${-d3Node.x}, ${-d3Node.y})
-    `;
+    translate(${width / 2}, ${height / 2})
+    scale(${focusZoom})
+    translate(${-d3Node.x}, ${-d3Node.y})
+  `;
 }
 
 /**

test/graph/__snapshots__/graph.snapshot.spec.js.snap

@@ -113,7 +113,6 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
           "transitionDuration": "0s",
         }
       }
-      transform={null}
     >
       <g>
         <path