Allow adding children to node without refreshing the whole tree

[fsvergara]

Use case: Dynamically add children (after an API call for example) to nodes without refreshing the whole tree (and expanding all nodes).

Problem: When displaying a big tree, we'll fetch the children via API to avoid getting all information at once since it might be too big in size. The problem with that approach is that if we add those new nodes to the data prop, the whole tree will be refreshed with new ids and will have collapsed: false by default, so it will expand even the collapsed nodes, making the navigation confusing as you load more nodes.

Proposed solution:

• Add dataKey prop to the Tree model. If the dataKey is not present or changes, we should update the whole tree, but if the data prop changes but the dataKey is the same, it means is the same tree, so we shouldn’t update.
• Add addChildren method to the Node model exposed props, to allow adding children dynamically from each node.

Here's a screencast explaining the changes and the use case for this:

https://www.loom.com/share/70e372804b7d4d46a1b7a09564c5d3bf

[bkrem]

Apologies about the silence here, this clearly slipped through in my email notifications.

Thank you for this @fsvergara, especially the thoughtful and detailed PR description outlining why this is necessary based on your experience 🙏

Will try to review fully by the end of the week.

Btw, Github is showing me this but not clear what the conflict is:

[dev-john-nguyen]

This there any update on this MR? I would like to take advantage of these changes.

[fsvergara]

Apologies about the silence here, this clearly slipped through in my email notifications.

Thank you for this @fsvergara, especially the thoughtful and detailed PR description outlining why this is necessary based on your experience 🙏

Will try to review fully by the end of the week.

Btw, Github is showing me this but not clear what the conflict is:

@bkrem sorry for the delay answering to this message. I just resolved the conflicts (I'm also importing RawNodeDatum to src/Node/index.tsx, that why there was a conflict)

[dev-john-nguyen]

@bkrem Is it possible to get this reviewed and merged?

[bkrem]

Published as https://github.com/bkrem/react-d3-tree/releases/tag/v3.6.0

h/t also to @dev-john-nguyen for helping drive this to completion!