Question about DOM Tree Customisation

GoJS
1

sankey_nodes
sankey_nodes3452×2183 1.72 MB

Hello - I am wondering if it’s possible to have the DOM Tree example connect to multiple nodes (similar to how a Sankey flow works) - but also be able to expand the node to reveal more information about that node - e.g. images and a table. See diagram for a general concept - many thanks!

PS - to be clear, SDK’s can connect to multiple App’s and App’s to SDK’s.

2

Those issues are completely independent from each other.

First, use LayeredDigraphLayout instead of TreeLayout.
https://gojs.net/latest/intro/layouts.html#LayeredDigraphLayout

Second, yes you can have nodes expand to show arbitrarily complex details. There are various ways to accomplish that. See for example:
https://gojs.net/latest/intro/buttons.html#PanelExpanderButtons

Also consider:
https://gojs.net/latest/intro/templateMaps.html

Yet a third possibility:
https://gojs.net/latest/intro/subgraphs.html

3

Thanks Walter - appreciate the speedy reply. A couple of quick questions:

  • I presume can change the presentation/style of the node?
  • can each node be expanded as it is presented in the DOM Tree example?
4

Yes and yes. Although I think you want to use what I mentioned last: Groups holding subgraphs. See for example Groups as Nodes in Trees. Each group would have its Group.layout be an instance of TreeLayout.

5

Perfect - thank you!

6

So each expandable node would be a Group that would look like a regular Node when collapsed or when expanded. You would not have any Shape surrounding the group’s Placeholder.

For the detail nodes, use a “Table” Panel inside an “Auto” Panel: GoJS Table Panels -- Northwoods Software. Each cell of the Table Panel might be a Panel again, depending on what you want to show.

If you have a variable number of items to show, have the information be in an Array that is the value of a property of the node data object. See GoJS Item Arrays-- Northwoods Software