Focus view on a node

.eslintrc.js

@@ -16,6 +16,9 @@ module.exports = {
         }
     },
     plugins: ['standard', 'promise', 'react', 'jest', 'cypress'],
+    env: {
+        browser: true
+    },
     rules: {
         'react/jsx-uses-react': 'error',
         'react/jsx-uses-vars': 'error',

docs/DOCUMENTATION.md

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

package.json

@@ -25,7 +25,8 @@
         "start": "http-server ./sandbox/ -p 8888 -c-1",
         "test:clean": "jest --no-cache --updateSnapshot --verbose --coverage --config jest.config.js",
         "test:watch": "jest --verbose --coverage --watchAll --config jest.config.js",
-        "test": "jest --verbose --coverage --config jest.config.js"
+        "test": "jest --verbose --coverage --config jest.config.js",
+        "sandbox": "npm run dist:sandbox && npm run start"
     },
     "lint-staged": {
         "*.{js,jsx,json,css,md}": [

sandbox/Sandbox.jsx

@@ -53,7 +53,15 @@ export default class Sandbox extends React.Component {
 
     onClickGraph = () => console.info(`Clicked the graph`);
 
-    onClickNode = id => !this.state.config.collapsible && window.alert(`Clicked node ${id}`);
+    onClickNode = id => {
+        !this.state.config.collapsible && window.alert(`Clicked node ${id}`);
+        this.setState({
+            data: {
+                ...this.state.data,
+                focusedNodeId: this.state.data.focusedNodeId !== id ? id : null
+            }
+        });
+    };
 
     onRightClickNode = (event, id) => {
         event.preventDefault();
@@ -299,7 +307,8 @@ export default class Sandbox extends React.Component {
         // to true in the constructor we will provide nodes with initial positions
         const data = {
             nodes: this.decorateGraphNodesWithInitialPositioning(this.state.data.nodes),
-            links: this.state.data.links
+            links: this.state.data.links,
+            focusedNodeId: this.state.data.focusedNodeId
         };
 
         const graphProps = {

src/components/graph/Graph.jsx

@@ -165,7 +165,12 @@ export default class Graph extends React.Component {
      * Handles d3 drag 'start' event.
      * @returns {undefined}
      */
-    _onDragStart = () => this.pauseSimulation();
+    _onDragStart = () => {
+        this.pauseSimulation();
+        if (this.state.enableFocusAnimation) {
+            this.setState({ enableFocusAnimation: false });
+        }
+    };
 
     /**
      * Sets nodes and links highlighted value.
@@ -309,6 +314,7 @@ export default class Graph extends React.Component {
             utils.throwErr(this.constructor.name, ERRORS.GRAPH_NO_ID_PROP);
         }
 
+        this.focusAnimationTimeout = null;
         this.state = graphHelper.initializeGraphState(this.props, this.state);
     }
 
@@ -337,13 +343,21 @@ 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 = graphHelper.getCenterAndZoomTransformation(d3FocusedNode, this.state.config);
+        const enableFocusAnimation = this.props.data.focusedNodeId !== nextProps.data.focusedNodeId;
+
         this.setState({
             ...state,
             config,
             configUpdated,
             d3ConfigUpdated,
             newGraphElements,
-            transform
+            transform,
+            focusedNodeId,
+            enableFocusAnimation,
+            focusTransformation
         });
     }
 
@@ -413,6 +427,10 @@ export default class Graph extends React.Component {
      * @returns {undefined}
      */
     onClickGraph = e => {
+        if (this.state.enableFocusAnimation) {
+            this.setState({ enableFocusAnimation: false });
+        }
+
         // Only trigger the graph onClickHandler, if not clicked a node or link.
         // toUpperCase() is added as a precaution, as the documentation says tagName should always
         // return in UPPERCASE, but chrome returns lowercase
@@ -424,6 +442,35 @@ export default class Graph extends React.Component {
         }
     };
 
+    /**
+     * Obtain a set of properties which will be used to perform the focus and zoom animation if
+     * required. In case there's not a focus and zoom animation in progress, it should reset the
+     * transition duration to zero and clear transformation styles.
+     * @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) {
+                clearTimeout(this.focusAnimationTimeout);
+            }
+
+            this.focusAnimationTimeout = setTimeout(
+                () => this.setState({ enableFocusAnimation: false }),
+                this.state.config.focusAnimationDuration * 1000
+            );
+        }
+
+        const transitionDuration = this.state.enableFocusAnimation ? this.state.config.focusAnimationDuration : 0;
+
+        return {
+            style: { transitionDuration: `${transitionDuration}s` },
+            transform: focusedNodeId ? this.state.focusTransformation : null
+        };
+    };
+
     render() {
         const { nodes, links, defs } = graphRenderer.buildGraph(
             this.state.nodes,
@@ -452,11 +499,13 @@ export default class Graph extends React.Component {
             width: this.state.config.width
         };
 
+        const containerProps = this._generateFocusAnimationProps();
+
         return (
             <div id={`${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`}>
                 <svg name={`svg-container-${this.state.id}`} style={svgStyle} onClick={this.onClickGraph}>
                     {defs}
-                    <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

@@ -59,6 +59,9 @@
  * 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. Its value must be between
+ * *minZoom* and *maxZoom*. If the specified *focusZoom* is out of this range, *minZoom* or *maxZoom* will be applied instead.
+ * @param {number} [focusAnimationDuration=0.75] - duration (in seconds) for the animation that takes place when focusing the graph on 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
@@ -182,6 +185,8 @@ export default {
     linkHighlightBehavior: false,
     maxZoom: 8,
     minZoom: 0.1,
+    focusZoom: 1,
+    focusAnimationDuration: 0.75,
     nodeHighlightBehavior: false,
     panAndZoom: false,
     staticGraph: false,

src/components/graph/graph.helper.js

@@ -112,7 +112,7 @@ function _initializeLinks(graphLinks, config) {
             links[target] = {};
         }
 
-        const value = l.value || 1;
+        const value = config.collapsible && l.isHidden ? 0 : l.value || 1;
 
         links[source][target] = value;
 
@@ -475,6 +475,14 @@ function initializeGraphState({ data, id, config }, state) {
     const formatedId = id.replace(/ /g, '_');
     const simulation = _createForceSimulation(newConfig.width, newConfig.height, newConfig.d3 && newConfig.d3.gravity);
 
+    const { minZoom, maxZoom, focusZoom } = newConfig;
+
+    if (focusZoom > maxZoom) {
+        newConfig.focusZoom = maxZoom;
+    } else if (focusZoom < minZoom) {
+        newConfig.focusZoom = minZoom;
+    }
+
     return {
         id: formatedId,
         config: newConfig,
@@ -521,11 +529,34 @@ function updateNodeHighlightedValue(nodes, links, config, id, value = false) {
     };
 }
 
+/**
+ * Returns the transformation to apply in order to center the graph on the
+ * selected node.
+ * @param {Object} d3Node - node to focus the graph view on.
+ * @param {Object} config - same as {@link #buildGraph|config in buildGraph}.
+ * @returns {string} transform rule to apply.
+ * @memberof Graph/helper
+ */
+function getCenterAndZoomTransformation(d3Node, config) {
+    if (!d3Node) {
+        return;
+    }
+
+    const { width, height, focusZoom } = config;
+
+    return `
+        translate(${width / 2}, ${height / 2})
+        scale(${focusZoom})
+        translate(${-d3Node.x}, ${-d3Node.y})
+    `;
+}
+
 export {
     buildLinkProps,
     buildNodeProps,
     checkForGraphConfigChanges,
     checkForGraphElementsChanges,
     initializeGraphState,
-    updateNodeHighlightedValue
+    updateNodeHighlightedValue,
+    getCenterAndZoomTransformation
 };

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

@@ -108,6 +108,12 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
     </defs>
     <g
       id="graphId-graph-container-zoomable"
+      style={
+        Object {
+          "transitionDuration": "0s",
+        }
+      }
+      transform={null}
     >
       <path
         className="link"