Allow adding children to node without refreshing the whole tree (#417)

Author: Francisco Vergara

src/Node/index.tsx

@@ -1,8 +1,7 @@
 import React, { SyntheticEvent } from 'react';
 import { HierarchyPointNode } from 'd3-hierarchy';
 import { select } from 'd3-selection';
-
-import { Orientation, Point, TreeNodeDatum, RenderCustomNodeElementFn } from '../types/common.js';
+import { Orientation, Point, TreeNodeDatum, RawNodeDatum, RenderCustomNodeElementFn } from '../types/common.js';
 import DefaultNodeElement from './DefaultNodeElement.js';
 
 type NodeEventHandler = (
@@ -30,6 +29,7 @@ type NodeProps = {
   onNodeMouseOut: NodeEventHandler;
   subscriptions: object;
   centerNode: (hierarchyPointNode: HierarchyPointNode<TreeNodeDatum>) => void;
+  handleAddChildrenToNode: (nodeId: string, children: RawNodeDatum[]) => void;
 };
 
 type NodeState = {
@@ -141,6 +141,7 @@ export default class Node extends React.Component<NodeProps, NodeState> {
       onNodeClick: this.handleOnClick,
       onNodeMouseOver: this.handleOnMouseOver,
       onNodeMouseOut: this.handleOnMouseOut,
+      addChildren: this.handleAddChildren,
     };
 
     return renderNode(nodeProps);
@@ -164,6 +165,10 @@ export default class Node extends React.Component<NodeProps, NodeState> {
     this.props.onNodeMouseOut(this.props.hierarchyPointNode, evt);
   };
 
+  handleAddChildren = childrenData => {
+    this.props.handleAddChildrenToNode(this.props.data.__rd3t.id, childrenData);
+  };
+
   componentWillLeave(done) {
     const { orientation, transitionDuration, position, parent } = this.props;
     const transform = this.setTransform(position, parent, orientation, true);

src/Tree/index.tsx

@@ -19,6 +19,7 @@ type TreeState = {
   d3: { translate: Point; scale: number };
   isTransitioning: boolean;
   isInitialRenderForDataset: boolean;
+  dataKey: string;
 };
 
 class Tree extends React.Component<TreeProps, TreeState> {
@@ -54,6 +55,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
     hasInteractiveNodes: false,
     dimensions: undefined,
     centeringTransitionDuration: 800,
+    dataKey: undefined,
   };
 
   state: TreeState = {
@@ -62,6 +64,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
     d3: Tree.calculateD3Geometry(this.props),
     isTransitioning: false,
     isInitialRenderForDataset: true,
+    dataKey: this.props.dataKey,
   };
 
   private internalState = {
@@ -75,11 +78,14 @@ class Tree extends React.Component<TreeProps, TreeState> {
   static getDerivedStateFromProps(nextProps: TreeProps, prevState: TreeState) {
     let derivedState: Partial<TreeState> = null;
     // Clone new data & assign internal properties if `data` object reference changed.
-    if (nextProps.data !== prevState.dataRef) {
+    // If the dataKey was present but didn't change, then we don't need to re-render the tree
+    const dataKeyChanged = !nextProps.dataKey || prevState.dataKey !== nextProps.dataKey;
+    if (nextProps.data !== prevState.dataRef && dataKeyChanged) {
       derivedState = {
         dataRef: nextProps.data,
         data: Tree.assignInternalProperties(clone(nextProps.data)),
         isInitialRenderForDataset: true,
+        dataKey: nextProps.dataKey,
       };
     }
     const d3 = Tree.calculateD3Geometry(nextProps);
@@ -322,6 +328,23 @@ class Tree extends React.Component<TreeProps, TreeState> {
     }
   };
 
+  handleAddChildrenToNode = (nodeId: string, childrenData: RawNodeDatum[]) => {
+    const data = clone(this.state.data);
+    const matches = this.findNodesById(nodeId, data, []);
+
+    if (matches.length > 0) {
+      const targetNodeDatum = matches[0];
+
+      const depth = targetNodeDatum.__rd3t.depth;
+      const formattedChildren = clone(childrenData).map((node: RawNodeDatum) =>
+        Tree.assignInternalProperties([node], depth + 1)
+      );
+      targetNodeDatum.children.push(...formattedChildren.flat());
+
+      this.setState({ data });
+    }
+  };
+
   /**
    * Handles the user-defined `onNodeClick` function.
    */
@@ -576,6 +599,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
                   onNodeClick={this.handleOnNodeClickCb}
                   onNodeMouseOver={this.handleOnNodeMouseOverCb}
                   onNodeMouseOut={this.handleOnNodeMouseOutCb}
+                  handleAddChildrenToNode={this.handleAddChildrenToNode}
                   subscriptions={subscriptions}
                   centerNode={this.centerNode}
                 />

src/Tree/types.ts

@@ -310,4 +310,13 @@ export interface TreeProps {
    * {@link Tree.defaultProps.hasInteractiveNodes | Default value}
    */
   hasInteractiveNodes?: boolean;
+
+  /**
+   * Indicates the tree being represented by the data. If the dataKey changes, then we should re-render the tree.
+   * If the data changes but the dataKey keeps being the same, then it's a change (like adding children to a node) for the same tree,
+   * so we shouldn't re-render the tree.
+   *
+   * {@link Tree.defaultProps.dataKey | Default value}
+   */
+  dataKey?: string;
 }