Question about DOM Tree Customisation


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.

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
https://gojs.net/latest/samples/entityRelationship.html
https://gojs.net/latest/samples/IVRtree.html
Also consider:
https://gojs.net/latest/intro/templateMaps.html

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

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?

Yes and yes. Although I think you want to use what I mentioned last: Groups holding subgraphs. See for example https://gojs.net/extras/groupsInTrees.html. Each group would have its Group.layout be an instance of TreeLayout.

Perfect - thank you!

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: https://gojs.net/latest/intro/tablePanels.html. 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 https://gojs.net/latest/intro/itemArrays.html