Collapsible tree example

[techniq]

I derived a simple example from https://vx-demo.now.sh/trees available here: https://codesandbox.io/s/n3w687vmqj

I'm not overly happy with the forceUpdate() and would like to have it animate similar to https://bl.ocks.org/mbostock/4339083, but it's a start

[techniq]

@sghall - any tips on how to use react-move to produce something similar to https://bl.ocks.org/mbostock/4339083?

[techniq]

@hshoff / @sghall - It seems like to be able to make this work we would need to be able to add a <NodeGroup /> here

Maybe if <Tree/> / <Cluster/> receives a children function, we call it instead? Such as:

<Tree
  top={margin.top}
  left={margin.left}
  root={hierarchy(data, d => d.isExpanded ? d.children : null)}
  size={[
    height - margin.top - margin.bottom,
    width - margin.left - margin.right
  ]}
>
  ({ links, descendants }) => (
    // magic here
  )
</Tree>

[hshoff]

@techniq yup that’s a great solution. I’ve been busy with interactions, will get to this when i can. Happy to a review a PR if anyone wants to take a swing at this.

[techniq]

@hshoff No promises, but I'll see if I can get a PR pushed up soonish (should be fairly trivial) but currently this is me just kicking around vx so my other tasks have higher priority.

Seems we would want the same with vx-network and maybe other layouts. I've only recently been getting into d3 beyond the basics so I'm not aware of all the different layouts and their intricacies and how vx has integrated them.

I would love to hear if @sghall has any feedback on this with regards to react-move.

Lastly, I wonder if the child function / render prop should be embraced whole-heartedly throughout vx, in place of some HOCs (such as replacing withTooltip, withParentSize, withScreenSize, ...). I've had good success with it in my react-fetch-component and downshift, and I know Michael Jackson has been a big proponent of it lately

[techniq]

Also, just leaving this for later reference, but it would be nice if the <Tree /> example could, along with being collapsible, show how to reveal a node, similar to Search Collapsible Tree. This drag and drop and pannable example would be nice as well (maybe after from of your current vx-drag / vx-zoom work)

[sghall]

Hey. Off the top of my head, I'd say it's two NodeGroups for nodes and links. Do the links first so the nodes are on top in the SVG...something like...

<Tree
  top={margin.top}
  left={margin.left}
  root={hierarchy(data, d => d.isExpanded ? d.children : null)}
  size={[
    height - margin.top - margin.bottom,
    width - margin.left - margin.right
  ]}
>
  ({ links, descendants }) => (
    <NodeGroup
      data={links} 
      ...
    </NodeGroup>
    <NodeGroup
      data={descendants} 
      ...
    </NodeGroup>
  )
</Tree>

He's doing some magic here with stashing the last layout and using the "diagonal" path generator to get those nice curved lines. You can pass a custom interpolator to react-move to handle that.

This flubber example is using a custom interpolator...
https://react-move.js.org/#/documentation/animate

Also, this piece storing if the children are collapsed is a little sticky. Need some state somewhere with that.

  function collapse(d) {
    if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }

  root.children.forEach(collapse);
  update(root);

If you get something committed I can jump in there and hack on it a little if there's issues.

[techniq]

Thanks @sghall. I have the expand/collapse working currently in this codesandbox and was looking to moving to the next step of animating.

Once I or @hshoff get the child function in place I'll take a stab at the transition but maybe ping you with a WIP codesandbox if I get stuck (especially the the interpolation)?

Looking at the d3 example (linked in the first post), it looks like Mike is using...

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

...for the interpolation so we might be able to do something similar...

[techniq]

Actually d3.svg.diagonal() was replaced in d3 v4 with linkVertical (or horizontal/radial) and is what vx's LinkVertical uses

[techniq]

@hshoff @sghall I've made some progress using react-move to animate the expand/collapse animations of a <Tree /> after the render prop was exposed (thanks again @hshoff )

There is still some work to do:

• Animate the links (source, target)
• Investigate using d3.linkVertical / d3.linkHorizontal as a custom interpolator for nodes so they slide along the link paths instead of a straight line
• Cleanup the example and probably refine the approach (not using this.forceUpdate(), etc)

I currently have it running locally but can move it out to codesandbox.io once a new version of vx-hierarchy is released (I couldn't figure out how to use a git sha version on codesandbox, and also struggled locally with the same, but ended up getting npm link to work and have been tweaking the vx-demo for Tree).

I don't know if I'll get much more time to iterate on this till next week so once I get it on codesandbox, feel free to fork and tweak if you want.

[hshoff]

awesome!

[hshoff]

just published v0.0.141 changelog

[techniq]

Some progress animating links and nodes now collapse to closing parent/grandparent/etc (not just the parent). I've updated my codesandbox with these changes if you want to take a look at the code.

A few items still needing addressed

Expanding grandchildren from grandparent

While collapsing a grandparent will fold all children/grandchildren/etc into the node, expanding currently only transitions from each children's parent's location. This is best demonstrated with an example. Notice when expanding T, nodes A1, A2, A3, C, and others (and their links) do not appear to be sourced from T.

Order of collapsing

Based on how I'm saving x0/y0 only when a node is expanding, if a sibling node is expanded and then the original node is collapsed, the transitions are incorrect. For example,

• Expand T
• Expand A
• Expand B
• Collapse A (wrong transition)
• Collapse B (wrong transition)

There may be other issues as well, especially when compared to the canonical d3 example, but it's progressing. If anyone has any suggestions (alternative approaches) to resolve these issues I'm interested.