Flattening of very large data is slow

[cheton]

Flattening of very large data is slow

[FoolHen]

Seems like there was an issue with the flatten library that addChildNodes is using. It was fixed in version 0.11.1 but infinite-tree is still using the previous version. I was having this issue and updating the dependency increased the performance noticeably. Updated in a PR @cheton

[cheton]

The "flatten" and "rowRenderer" functions, especially the "rowRenderer", would use the most CPU time while trying to load a large tree:

https://github.com/cheton/infinite-tree/blob/master/src/infinite-tree.js#L686
https://github.com/cheton/infinite-tree/blob/master/src/infinite-tree.js#L712

// Flatten nodes
this.nodes = flatten(data, { openAllNodes: this.options.autoOpen });

// Update rows
this.rows = this.nodes.map(node => this.options.rowRenderer(node, this.options));

One solution is to render only visible rows, it should be able to significantly reduce the rendering time from 10s to <0.1s.

Another workaround is to use lazy loading, you can load first batch of top-level nodes (e.g. 1000 top-level nodes in one batch) at the first time, when you scroll to the bottom, then call tree.addChildNodes(nodes) to load another batch of top-level nodes.

[bharatpatil]

I guess if already flattened list is provided to loadData() then it would solve problem for 1st line.

[kinow]

I guess if already flattened list is provided to loadData() then it would solve problem for 1st line.

+1 We are working a similar idea. At the moment we are adding InfiniteTree to a Vue component. We had a component implemented with recursion, and some Vue components that would create their children components on the fly. Which would cause style reflows, event bubbling, and be hard to render when you had ~thousands of nodes.

With the InfiniteTree, the performance is already better. But our GraphQL data is flatten already. We thought we would be able to use it, but in the end had to keep the hierarchical data, and pass if to the new component.

We now want to investigate if it would be possible to skip the step where the flatten data is created. I already know it is possible to create an empty InfiniteTree by not giving it any data in the constructor. If there is a nice way to tell it to load the flatten data, I think this issue will be solved, and the component will be even faster.