With FoamTree 3.4.5 and later you can control the moment when FoamTree computes the layout of child groups. You can use this mechanism to improve performance when visualizing deeply nested hierarchies with hundreds of groups on the top level.
The following demo generates a deeply-nested hierarchy with hundreds of groups on the top level. Upon
initialization, only the the top level groups (without child groups) are shown. Once the layout stabilizes,
the attach(group)
method is called to compute the layout for individual top-level groups.
To keep the browser's user interface responsive, the code initialized a limited number of top-level groups
in one requestAnimationFrame()
callback.
To further speed things up, the third level of the hierarchy is initialized only when the user chooses to inspect the parent group, for example by double clicking it.
Setting FoamTree to initially lay out only the top-level groups of our large and deeply nested hierarchy.
The GroupAttacher
utility for laying out individual top level groups per one animation
frame to ensure responsiveness while the complete diagram is being computed.
Tuning of visual properties to better match deeply-nested hierarchies.