Angular-tree-component: Performance issues with large trees

[0cv]

That's a nice plugin but there are serious performance issues by large trees. A node with only 1000 children will take 10-15s to load on Chrome (latest version). 10K nodes will simply crash the window after 1 minute or so of freeze.

Is there anything which could be improved on this side?

[adamkleingit]

I plan to introduce performance support for large trees in the near future.
Did you investigate why it happens?

2 options:

• Change detection takes too long - In such case I need to export another
  TreeComponent that allow OnPush strategy.
• Too many DOM elements - In such case I need to allow virtual scrolling.

I want to eventually introduce both.

--

• Adam Klein http://il.linkedin.com/in/adamklein500
• CTO @ 500Tech.com http://500tech.com/
• AngularJS, ReactJS, NodeJS
• Development, consulting, training and public speaking
• ([phone]

On Mon, Dec 5, 2016 at 1:42 PM, Christophe Vidal [e-mail]
wrote:

That's a nice plugin but there are serious performance issues by large
trees. A node with only 1000 children will take 10-15s to load on Chrome
(latest version). 10K nodes will simply crash the window after 1 minute or
so of freeze.

Is there anything which could be improved on this side?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular2-tree-component/issues/121, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AA2SSooQI5IqjTgLKZbuxL8zjQrUjNF-ks5rE_iJgaJpZM4LEIZU
.

[0cv]

No sorry, didn't spend time to investigate. I'm not so sure which strategy is the best to be honest. A performant alternative would be to delegate some listener to a document listener, or overall component listener, but that would be quite dirty I think... ( renderer.listen(elementRef.nativeElement, 'click', (event) => {...}))

I dont know how well the more "Angular" method are performing with a massive number of nodes.

[Provson]

Hi,

With 100 elements, the tree takes 40 sec to load.
38 sec for the Event Dom Click.
Someone has a solution ?

[bhavyaw]

+1

[denkomanceski]

@Provson its probably something from your side that is the problem.. I can load a lot of nodes without any problems..

[stestaub]

I have the same problem. When I open a node with ~1500 children, it takes about 30 seconds in chrome. I did some profiling and it seems to be the addEventListener method the most time consuming operation.

[JulienOrain]

+1

[elvisbegovic]

+1

[alsh76]

I have same issue. My tree consists of about 200 2nd level nodes. Each of them has 0-10 children. There are no 4th level nodes.

Collapsing / expanding of the whole tree takes about 5 second. Maybe it would be appropriate in the first time but second and other times it is annoying a bit

Children of 2nd level nodes are loaded dynamically. After the tree data updating I call this.tree.treeModel.update() and it updates the tree view with 3 second delay despite of small number of new children (usually less than 10)

Any ideas about performance improving? I would appreciate any advice

[denkomanceski]

Maybe the author can explain in brief what was his idea of optimizing it, so I can try and make a pull request? That would really help

[elvisbegovic]

Virtual repeat!! Logical

[alsh76]

Also it would be nice to have lazy loading mechanism to update/refresh only current node and its children.

getChildren is not called for me after node expanding and I am forced to update whole tree

options = {
  getChildren: (node:TreeNode) => {
    return request('/api/children/' + node.id);
  }
}

[adamkleingit]

Hey guys,
I was in sickness leave for a long time.
Did anyone check what makes it slow?

--

• Adam Klein http://il.linkedin.com/in/adamklein500
• CTO @ 500Tech.com http://500tech.com/
• AngularJS, ReactJS, NodeJS
• Development, consulting, training and public speaking
• ([phone]

On Mon, Jan 30, 2017 at 8:40 PM, Aleksey Shishkevich <
[email protected]> wrote:

Also it would be nice to have lazy loading mechanism to update/refresh
only current node and its children.

getChildren is not called for me after node expanding and I am forced to
update whole tree

options = {
getChildren: (node:TreeNode) => {
return request('/api/children/' + node.id);
}
}

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular2-tree-component/issues/121#issuecomment-276150715,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSvnM70cAqrk9GLus3fQNPmqGhNuoks5rXi6JgaJpZM4LEIZU
.

[alsh76]

I have to mention delays in production version are not such significant. Collapsing / expanding of the tree takes about 1 second. That is acceptable for me

Nevertheless jsTree jquery plugin renders the tree faster a bit and supports lazy loading

[webnugget]

Hi Guys,
i just did some profiling with chrome,

i'm not very good at interpreting this, but it looks like a change detection issue.

The node for the tree are generated with the following function inside onInit.
So The Tree has 10000 toplevel nodes, with 4 Children. This is a realistic size for my app, but it's way to slow.

````
buildnodes(){
let newNodes = [];
for(let i=0;i<10000;i++){
newNodes.push({
id: i,
name: 'root'+i,
children: [
{ id: 'child-'+(i+1), name: 'child-1-from-' +i},
{ id: 'child-'+(i+2), name: 'child-2-from-' +i},
{ id: 'child-'+(i+3), name: 'child-3-from-' +i},
{ id: 'child-'+(i+4), name: 'child-4-from-' +i}
]
});

}
return newNodes;

}
````

[adamkleingit]

Hey guys,
I'll work on this during the weekend. I hope I can solve it in a couple of days, I'll keep you posted

[anselpeters]

looking forward to seeing this one resolved.. great component btw.. thanks for your effort on this one

[adamkleingit]

It's really close to being finished

--

• Adam Klein http://il.linkedin.com/in/adamklein500
• CTO @ 500Tech.com http://500tech.com/
• AngularJS, ReactJS, NodeJS
• Development, consulting, training and public speaking
• ([phone]

On Sat, Feb 25, 2017 at 3:10 PM, anselpeters [e-mail]
wrote:

looking forward to seeing this one resolved.. great component btw.. thanks
for your effort on this one

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular2-tree-component/issues/121#issuecomment-282483036,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSqsfXvNJv2w8QuLnZmtmpG8fdGEvks5rgCgqgaJpZM4LEIZU
.

[denkomanceski]

It it going to be infinite tree ? :D

[adamkleingit]

Infinite no. But you can load 10,000 nodes and the tree should scroll
smoothly (when you enableProdMode())

--

• Adam Klein http://il.linkedin.com/in/adamklein500
• CTO @ 500Tech.com http://500tech.com/
• AngularJS, ReactJS, NodeJS
• Development, consulting, training and public speaking
• ([phone]

On Sat, Feb 25, 2017 at 4:59 PM, Denko Manceski [e-mail]
wrote:

It it going to be infinite tree ? :D

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular2-tree-component/issues/121#issuecomment-282489161,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSlYDRgUKSSBAEGB5r4VbsWK62xdCks5rgEHVgaJpZM4LEIZU
.

[0cv]

Do the nodes always stay in the DOM once loaded, or are they "dynamically" removed (from the DOM, but kept in memory) when, for example, a node is collapsed?

[adamkleingit]

They are dynamically destroyed and created.
When a node is collapsed - that's already supported in the tree (I use ngIf
for the children).
The virtual scroll feature will also make sure that only the nodes in the
current viewport are on the DOM, and allow the user to feel a smooth scroll
as if the entire tree is rendered

--

• Adam Klein http://il.linkedin.com/in/adamklein500
• CTO @ 500Tech.com http://500tech.com/
• AngularJS, ReactJS, NodeJS
• Development, consulting, training and public speaking
• ([phone]

On Sun, Feb 26, 2017 at 3:47 PM, Christophe Vidal [e-mail]
wrote:

Do the nodes always stay in the DOM once loaded, or are they "dynamically"
removed (from the DOM, but kept in memory) when, for example, a node is
collapsed?

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular2-tree-component/issues/121#issuecomment-282557025,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSsJLsFDz1LOLn1CABlTxb9ziKKE3ks5rgYJYgaJpZM4LEIZU
.

[0cv]

Wow that sounds great, I assume then it can support much more than 10k nodes, the limit being actually regarding the memory, so something like way above 100K if not millions .. ?

[adamkleingit]

Well, there will be 3 limits:

• browser limit of the viewport height, which will allow for around 0.5 million nodes - depending on their height.
• client side memory of holding all of the nodes
• heavy client side actions, like filtering or drag and drop / dynamically updating the tree (which forces to recalculate the node positions)

[albrechta]

Yesterday, I experimented with version 3.0.2 and virtual scrolling. There is an issue with large node templates (e.g. height 150px). If I start to scroll down slowly from the top of the tree, the content suddenly jumps and a couple of nodes are skipped (disappear from the viewport).

I think it is related to the number of tree nodes that are part of the tree node collection initially. The number of elements in the DOM is not constant at the beginning. It increases as I start scrolling down. My guess is that this results in this odd jump because some property (height?) is recalculated.

Is there a way to fix the number of elements? Once the number of tree nodes is not changing anymore, scrolling works as expected.

[adamkleingit]

Hi @albrechta @Krisa @Provson @anselpeters @alsh76 ,
can you try with 3.1.0 - it looks like it's stable and solved virtual scrolling.
Use enableProdMode() with many nodes.

Thanks

[elvisbegovic]

this plugin not works correctly after all theses changes ! i use 3.1.0 and when open child sometimes the tree's noeuds are cutted, and sometimes scroll is jumping directly to top ! is there a documentations for this virtual scroll, do I need specify height of each node ? do I need height somewhere ? is there a example to realize this virtual scroll :S

here you are my gif with scroll problem with fixed height :

https://cloud.githubusercontent.com/assets/2789203/23503223/f75ad830-ff3a-11e6-9f7d-f8fe213f8711.gif

here you are my cutted noeds because i want to my height takes 100% always without scroll:

https://cloud.githubusercontent.com/assets/2789203/23503292/6482bf72-ff3b-11e6-85a0-286902ef07c6.gif

cc @adamkleingit

[Provson]

1) create 2 directives (draggable and droppable)
2) Draggable code :

import { Directive, Input, ElementRef, AfterContentInit, OnDestroy } from '@angular/core';

@Directive({
    selector: '[makeDraggable]'
})
export class MakeDraggable implements AfterContentInit, OnDestroy {
    //Contient l'objet que l'on veut déplacer
    @Input('makeDraggable') data: any;

    constructor(private _elementRef: ElementRef) { }

    ngAfterContentInit() {
        //On récupère le native element
        let el = this._elementRef.nativeElement;

        // Set the draggable attribute to the element
        el.draggable = 'true';

        el.addEventListener('dragstart', (e) => {
            if (e.stopPropagation) {
                e.stopPropagation();
            }

            el.classList.add('dragStart')
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text', JSON.stringify(this.data));
        });

        // Remove the drag-src class
        el.addEventListener('dragend', (e) => {
            e.preventDefault();
            el.classList.remove('dragStart')
        });
    }

    //On supprime les event listener
    ngOnDestroy() {
        let el = this._elementRef.nativeElement;

        el.removeEventListener('dragstart');
        el.removeEventListener('dragend');
    }
}

3) Droppable code :

import { Directive, AfterContentInit, ElementRef, Output, EventEmitter, OnDestroy, NgZone } from '@angular/core';

@Directive({
    selector: '[makeDroppable]'
})
export class MakeDroppable implements AfterContentInit, OnDestroy {
    //Evenement emit lors du drop
    @Output() dropped: EventEmitter<number> = new EventEmitter();

    constructor(private _elementRef: ElementRef, private ngZone: NgZone) { }

    ngAfterContentInit() {
        //On récupère le native element
        let el = this._elementRef.nativeElement;

        this.ngZone.runOutsideAngular(() => {
            //Ajout class over
            el.addEventListener('dragenter', (e) => {
                el.classList.add('over');
            });

            //Suppression class over
            el.addEventListener('dragleave', (e) => {
                el.classList.remove('over');
            });

            //Ajout class move
            el.addEventListener('dragover', (e) => {
                if (e.preventDefault) {
                    e.preventDefault();
                }

                e.dataTransfer.dropEffect = 'move';
                return false;
            });
        });


        let self = this;
        //Au drop, on emet un event avec l'objet que l'on drop
        el.addEventListener('drop', (e) => {
            this.ngZone.run(() => {
                if (e.stopPropagation) {
                    e.stopPropagation();
                }

                el.classList.remove('over');
                let data: any = JSON.parse(e.dataTransfer.getData('text'));

                self.dropped.emit(data.id);

                return false;
            })
        })
    }

    //On supprime tous les event listener
    ngOnDestroy() {
        let el = this._elementRef.nativeElement;

        el.removeEventListener('dragenter');
        el.removeEventListener('dragleave');
        el.removeEventListener('dragover');
        el.removeEventListener('drop');
    }
}

4) For html element with need to be draggable :
<button class="btn btn-primary btn-sm" [makeDraggable]="'MyData">Yolo</button>

5) For html with need to be droppable :
<div makeDroppable (dropped)="onDrop($event)"></div>

The slowness comes from Angular. Iwas obliged to use 'ngZone'.

[albrechta]

@adamkleingit Unfortunately, scrolling is still an issue with large nodes (e.g. height of node is 150px). The problem is not performace anymore but the virtual scrolling, which scrolls too fast. If I scroll through a tree, a node changes 2 or three levels as you recalculate the marginTop.

[adamkleingit]

Can you share your code?
Which browser + OS version?
Thanks

[adamkleingit]

@albrechta did you set the nodeHeight property on the options?
You can set it to either a number or a function.

If you have, and there's still a problem - please re-open the issue and paste your code.

Thanks!

[ibookhotel]

Hi All,

Really great component.

Thanks for great effort. I spent last two week learning and working with component.

Is it possible to attach event on virtual scroll to trigger fetching data form server and appending to current node being scrolled?

It basically like infinite scroll per child node.

Thanks!
Ivan

[faizanu94]

Hi,

I'm also facing performance issues working with large trees (>5K nodes) when below function is called on the tree.

(click)="tree.treeModel.expandAll()"

The performance is relatively slow at the event of expand() compared to collapse().

I came across plenty of solutions in this thread, issue# 173 & issue# 463 and have tried some of them as well, but still this is not solved.

Please suggest which one is the correct one, specially in terms of performance?

Thanks,
Faizan