How to handle treeview large data

[bsataric]

Hello,

I've been trying for several days to solve the issue of slow performance/large RAM usage on a treeview that has around 100K nodes. The data treeview is in form of object map containing particular nodes where keys of the map are node IDs (number) and value is node Object itself containing string name and around 9 added fields per node (mostly strings and numbers depicting node properties - type, icon-type, color etc) as well as children array which has child node objects with the same properties pushed on it. All this is stored in the Vuex store and the Object map itself is around 70MB big.

However when rendering this tree it takes around 15-20 sec to load it in the first place. One node has 5000 children and when opened it takes > 5S to open it. When opened the RAM usage goes above 1GB (from around 600MB when all nodes are closed).

I tried testing performance by making a node containing 5000 children that have nothing but ID and NAME and just open that. From my test opening such node also takes couple of sec and memory jumps around 200MB only for this.

Also other useful features such as filtered serch with treeview this big is very slow.

Is this normal and expected treeveiw behaviour or am I doing something wrong in terms of data structure? Maybe I shouldn't be using an object map but a flattened array (with wich I have little experience)? Can someone point to a working example that has thousands of nodes and works fast?

Maybe the only feasable optionis to load children on click dynamically and not try to set all data to the tree at once?

Thanks in advance,

Bogdan