treeModel.expandAll() never returns, bogs down chrome completely with a large tree.

[jdewell]

Hi,
I have been enjoying using angular-tree-component for my tree inplementation. I havent seen any problems until I tried to expandAll() on my tree. The call to treeModel.expandAll() never returns and completely bogs down chrome. My tree has about 30000 nodes in a 3 deep configuration - 500->3000->24000. I have turned on virtual scroll.
The tree component has no performance issues initially displaying the collapsed tree. It takes just a second or so. Also scrolling is performant. Unfortunately, the expandAll() crashes.

Here are my options:

/*
angular2-tree options
 */
private options: ITreeOptions = {
    displayField: "label",
    childrenField: "items",
    useVirtualScroll: true,
    nodeHeight: 22,
    allowDrop: (element, { parent, index }) => {
        this.dragEndItems = _.cloneDeep(this.items);
        if (parent.data.labName) {
            return false;
        } else {
            return true;
        }
    },

    allowDrag: (node) => node.isLeaf,
};

HTML:

<tree-root #tree (moveNode)="onMoveNode($event)"
(dragEnd)="onDragEnd1($event)"
(activate)="treeOnSelect($event)"
[nodes]="tinys" [options]="options">
<ng-template #treeNodeTemplate let-node let-index="index">

{{ node.data.label }}

Attached is my package.json
package.json.txt

Attached is my example json.
slowexpand.json.txt

I am using chrome Version 60.0.3112.113

Thank you.
-John

[jdewell]

Also I have enabled prod mode.

[adamkleingit]

Hi, did u call expandAll on the treeModel or the treeNode?

[jdewell]

The treeModel. On Sep 5, 2017, at 12:52 AM, adam klein <notifications@github.com<mailto:notifications@github.com>> wrote: Hi, did u call expandAll on the treeModel or the treeNode? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#415 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AI14N9fdxvBIOVtRFEMKfNr0D-8IjiCzks5sfO-egaJpZM4PLBUv>.

[adamkleingit]

Yes I see the problem. I'll try to debug and appreciate if you also look into it

[jdewell]

Ok. Thanks for looking into this. I'll see what I can do. On Sep 5, 2017, at 8:07 AM, adam klein <notifications@github.com<mailto:notifications@github.com>> wrote: Yes I see the problem. I'll try to debug and appreciate if you also look into it — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#415 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AI14N5kK3H4wDp6RGHZgAXGF3aYwKnfKks5sfVVFgaJpZM4PLBUv>.

[adamkleingit]

I found the problem - expand returns a Promise.resolve, which turns out to be asynchronous even if it's an immediate resolve.
This causes MobX reactions to run on each node expand and recalculate the entire tree's node positions for virtual scroll.
I need to either debounce it or change the API so that it returns a synchronous Promise (or not a promise at all)

[adamkleingit]

As a bypass I suggest you do something like this:

import { transaction } from 'mobx';

transaction(() => {
  // loop over the nodes recursively and call expand() on each one
}); 

[jdewell]

Thanks much! I'm under the weather today but I'll try that when I get to the office.

…

Sent from my iPhone On Sep 5, 2017, at 8:38 AM, adam klein <notifications@github.com<mailto:notifications@github.com>> wrote: As a bypass I suggest you do something like this: import { transaction } from 'mobx'; transaction(() => { // loop over the nodes recursively and call expand() on each one }); — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#415 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AI14N4SRQGwvxTR7roC0s5212gNQWM0Dks5sfVzKgaJpZM4PLBUv>.

[johnking]

Hi @adamkleingit

the issue #414 I submitted might be due to the same root cause.

Looking forward to the fix.

thanks

[supriyaraj03]

Hi @adamkleingit

I am also using this tree view for my project and must say it is very easy to integrate and user friendly.

But we have the same issue:
I have problems with the expandAll() on my tree. I have just a mock data to build this tree and have just 3 nodes with 10 child nodes underneath. The minute I click on expandAll button, it takes a very long time to expand. The performance is really slow.

I expect that we around 20,000 nodes and also 50 nodes under each node as a child node.

Would be really nice if the expandAll works good !
There is a filter option for this tree view and the performance of that is just so brilliant. Could we have the similar performance for expand all as well ?

I am really looking forward to the fix.

Thanks & Regards

[JuliaRakitina]

+1

[NPGiorgi]

Hi all,

We are having the same issue here, your plugin works great and I think it's the best tree view plugin for angular. If you could solve this issue it would really help us, as the only thing we are missing is the expand all feature to be performant.

I've tried removing some events that I'm not using and removing some of the promises to try to reduce the time it takes to render, but the time reduction wasn't significant so I'm not probably missing something else.

I'm really looking forward for this fix.

Thanks!