Focus view on a node

docs/DOCUMENTATION.md

@@ -811,9 +811,11 @@ components.
     },
     ...
     }
+
     ```
 
     ```
+
 *   `linkCallbacks` **[Array][81]<[Function][86]>** array of callbacks for used defined event handler for link interactions.
 *   `config` **[Object][69]** an object containing rd3g consumer defined configurations [config][87] for the graph.
 *   `highlightedNode` **[string][73]** this value contains a string that represents the some currently highlighted node.

sandbox/Sandbox.jsx

@@ -50,7 +50,10 @@ export default class Sandbox extends React.Component {
         };
     }
 
-    onClickNode = id => !this.state.config.collapsible && window.alert(`Clicked node ${id}`);
+    onClickNode = id => {
+        !this.state.config.collapsible && window.alert(`Clicked node ${id}`);
+        this.setState({ focusedNodeId: this.state.focusedNodeId !== id ? id : null });
+    };
 
     onClickLink = (source, target) => window.alert(`Clicked link between ${source} and ${target}`);
 
@@ -298,7 +301,8 @@ export default class Sandbox extends React.Component {
             onMouseOverNode: this.onMouseOverNode,
             onMouseOutNode: this.onMouseOutNode,
             onMouseOverLink: this.onMouseOverLink,
-            onMouseOutLink: this.onMouseOutLink
+            onMouseOutLink: this.onMouseOutLink,
+            focusedNodeId: this.state.focusedNodeId
         };
 
         if (this.state.fullscreen) {

src/components/graph/Graph.jsx

@@ -372,6 +372,29 @@ export default class Graph extends React.Component {
         this.props.onClickNode && this.props.onClickNode(clickedNodeId);
     };
 
+    /**
+     * Returns the transformation to apply in order to center the graph on the
+     * selected node.
+     * @param   {number} nodeId - node to focus the graph view on.
+     * @returns {string} transform rule to apply.
+     */
+    getCenterAndZoomTransformation = nodeId => {
+        const node = this.state.d3Nodes.find(node => node.id.toString() === nodeId.toString());
+
+        // If node with specified id doesn't exist, don't do anything
+        if (!node) {
+            return;
+        }
+
+        const { width, height, focusZoom } = this.state.config;
+
+        return `
+            translate(${width / 2}, ${height / 2})
+            scale(${focusZoom})
+            translate(${-node.x}, ${-node.y})
+        `;
+    };
+
     render() {
         const { nodes, links } = graphRenderer.buildGraph(
             this.state.nodes,
@@ -398,10 +421,16 @@ export default class Graph extends React.Component {
             width: this.state.config.width
         };
 
+        const { focusedNodeId } = this.props;
+        const containerProps = {
+            style: { transitionDuration: '.75s' },
+            transform: focusedNodeId ? this.getCenterAndZoomTransformation(focusedNodeId) : null
+        };
+
         return (
             <div id={`${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`}>
                 <svg style={svgStyle}>
-                    <g id={`${this.state.id}-${CONST.GRAPH_CONTAINER_ID}`}>
+                    <g id={`${this.state.id}-${CONST.GRAPH_CONTAINER_ID}`} {...containerProps}>
                         {links}
                         {nodes}
                     </g>

src/components/graph/graph.config.js

@@ -54,6 +54,7 @@
  * the value the more the less highlighted nodes will be visible (related to *nodeHighlightBehavior*).
  * @param {number} [maxZoom=8] - max zoom that can be performed against the graph.
  * @param {number} [minZoom=0.1] - min zoom that can be performed against the graph.
+ * @param {number} [focusZoom=1] - zoom that will be applied when the graph view is focused in a node.
  * @param {boolean} [panAndZoom=false] - 🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
  * a similar functionality may be consulted {@link https://bl.ocks.org/mbostock/2a39a768b1d4bc00a09650edef75ad39|here}.
  * @param {boolean} [staticGraph=false] - when setting this value to true the graph will be completely static, thus
@@ -163,6 +164,7 @@ export default {
     linkHighlightBehavior: false,
     maxZoom: 8,
     minZoom: 0.1,
+    focusZoom: 1,
     nodeHighlightBehavior: false,
     panAndZoom: false,
     staticGraph: false,

src/components/graph/graph.helper.js

@@ -364,6 +364,15 @@ function initializeGraphState({ data, id, config }, state) {
     const formatedId = id.replace(/ /g, '_');
     const simulation = _createForceSimulation(newConfig.width, newConfig.height, newConfig.d3 && newConfig.d3.gravity);
 
+    // ensure focus zoom is between minZoom and maxZoom
+    const { minZoom, maxZoom, focusZoom } = newConfig;
+
+    if (focusZoom > maxZoom) {
+        newConfig.focusZoom = maxZoom;
+    } else if (focusZoom < minZoom) {
+        newConfig.focusZoom = minZoom;
+    }
+
     return {
         id: formatedId,
         config: newConfig,