Angular-tree-component: Async load is duplicated after updating tree model

Created on 23 Dec 2017 · 10Comments · Source: CirclonGroup/angular-tree-component

Hi there, so my tree has async config with getChildren with promise and every time I update the tree model by creating a new array this.nodes = [newNode, ...this.nodes]; or this.tree.treeModel.update(). The async now is call twice and make 2 api requests with same URL when click to expand the nodes. If I update the tree model again it will increase the async call to 3.
My code base on:

Tree component version 7
Angular 4

Source

anhvupham

Most helpful comment

I found the same issue, using Angular 5, and tree component version 7.0.1.
After some investigation - looks like VirtualRoot stay alive after new nodes re-render.
Only fix i able to do right now - check if virtual root is correct on getChildren call:

@ViewChild("tree") public tree: TreeComponent

getChildren(node: ITreeNode): any {
    if (node.isDescendantOf(this.tree.treeModel.virtualRoot)) { 
      //DO async call to retrieve children
    }
 }

That is only dirty workaround to prevent duplicated calls to API, but doesn't actually fix initial issue.
Any tries to kill virtualroot or clean up data before prior was unsuccessful.
So would be nice to see any valid Solution.

sergeo2 on 2 Jan 2018

👍2 😕1

All 10 comments

@ViewChild("tree") public tree: TreeComponent

getChildren(node: ITreeNode): any {
    if (node.isDescendantOf(this.tree.treeModel.virtualRoot)) { 
      //DO async call to retrieve children
    }
 }

sergeo2 on 2 Jan 2018

👍2 😕1

Ok thanks. My solution was handling the expanding manually instead of using the Tree options and it fixes that for now.

anhvupham on 5 Jan 2018

@anhvupham Can you explain your solution? I could not get @sergeo2 's solution to work (though admittedly, it very well could be user error). I am using Firebase to serve my tree/node data and I'm getting two calls for each node expansion and can't expand beyond the root. Wondering if I need to implement the manual solution for now until I figure out what is wrong with the getChildren option.

1wiseash on 22 Feb 2018

I have @sergeo2's solution mostly working. The method is still called twice each time a node is opened, but that is much better than unhacked case of getting n calls when opening a node (where n is the number of levels down the expanding node is in the tree). Is that at all clear? Add a console.log(...) and you'll see what I mean. Bottom line: the getChildren function is still being called twice (but only twice) when a node is opened for the first time. That's bad for us firebase users since it doubles the cost of navigating the tree asynchronously, so hopefully the bug will get fixed soon.

1wiseash on 23 Feb 2018

Any updates on this issue?

1wiseash on 13 Mar 2018

@1wiseash Can you provide example of your code where it is called twice?
The idea behind my workaround was that getChildren method is still called as many times as it was done a clicks on a node, but code inside the if should happen only once.
That is because other _shadow_ nodes became out of virtual tree after tree rebinding. So validating that we can try to filter off that phantom call from non-tree members.
For my case that works exactly as i expect, so maybe you have some other situation, that is why we need to see your example.

sergeo2 on 13 Mar 2018

Thanks for responding. My code:

this.options = {
    getChildren: (node: TreeNode) => {
        if (node.isDescendantOf(this.forumTree.treeModel.virtualRoot)) {
            console.log(`Opening node ${node.data.id}`);
            return this.forumService.getSubforums(node.data).first().toPromise();
        }
    }
}

Note, the getSubforums() function returns an rxjs.Observable Thanks for your help!

1wiseash on 13 Mar 2018

Output of opening two nodes:

Opening node uh7Wyvq25VY7ldFNBny7
forum-topic-browser.component.ts:39 Opening node uh7Wyvq25VY7ldFNBny7
forum.service.ts:143 Found 6 subforums in 'Root Forum': (6) [{…}, {…}, {…}, {…}, {…}, {…}]
forum.service.ts:143 Found 6 subforums in 'Root Forum': (6) [{…}, {…}, {…}, {…}, {…}, {…}]
forum-topic-browser.component.ts:39 Opening node YakUH9chkp5fS2SkqQmq
forum-topic-browser.component.ts:39 Opening node YakUH9chkp5fS2SkqQmq
forum.service.ts:143 Found 2 subforums in 'Computers': (2) [{…}, {…}]
forum.service.ts:143 Found 2 subforums in 'Computers': (2) [{…}, {…}]

1wiseash on 13 Mar 2018

Actually that looks strange. I mean it looks like you have 2 unique calls from the same tree.
Can you provide some example at Plunker?
Here is a quick i create to reproduce original problem and fix:
https://plnkr.co/edit/8cFaWuC0UGyTpLQDQxo8
After start and refresh button click you may find such situation in console:
app.ts:60 Call node root1-child1-child1
app.ts:62 Call Distinct node root1-child1-child1
app.ts:60 Call node root1-child1-child1

As you can see getChildren was called twice but node generation only once (Distinct ).
You may adopt and provide your example. In other case i think that is something within of your component which makes such double call.

sergeo2 on 14 Mar 2018

Closing this issue due to inactivity. Please open a new issue if the problem still exists.