Tree: Unable to render tree structure with large data causing UI frontend (angular code crash)

[silarapusandhya]

Description: As per our requirement, we need to render tree structure inside a modal, we need to select a child from the XML structure represented as JSON structure, with parent and child's (only text values are in the Json, we made that improvement already to see if that would help, but it seems after testing we get same issue) This is a business object structure of ION documents, which needs to show so that we can select a path. This functionality is working in GWT (our previous framework), but while having IDS Tree component UI stops working and goes code crash, for the somewhat larger documents, smaller are loading and shown in the tree view as expected.

For that reason, we need to have this fixed as soon as possible since we get UI frontend (angular code crash) issues while trying to load the structure. Our complete UI node crashes because of this.

Reproducing steps create a basic tree structure (ids tree). add that into modal or in normal space. append large Json data.

in this stackbliz we added both small n large Json's, so that we can evaluate easily. I added Json which we are using with name of SalesOrder.json in this stackbliz we can find small tree is appending in modal, but unable to load large Json's. any suggestions to render this kind of large messages in tree.

Link:

https://stackblitz.com/edit/stackblitz-starters-vyjtdx?file=src%2Fapp%2Fexample%2Fexample.component.ts,src%2Fapp%2Fdata.servcie.ts,src%2Fapi%2FSalesOrder.json,src%2Fapp%2Fexample%2Fexample.component.html

Note:

This is a blocking issue. As part of the 2024.10 ION release we are committed to releasing the Kafka connector and selecting an attribute from a large structure from a tree is part of it.

[mvwinsen]

We've reproduced the issue with latest IDS code and latest code from ION Side. The UI front end stops responding, and crashes. It crashes somewhere in the rendering part i assume. Tried to add a stack of some kind, but was unable. We can only continue our work refreshing the UI, but we never get that tree window, crashes every time.

[tmcconechy]

As discussed i suggest using a pager with the tree or using the tree grid with virtualization.

https://main.wc.design.infor.com/ids-data-grid/tree-grid-virtual-scroll.html

You should be able to use that for this case.

Adding virtualization to the tree will probably be a good deal of work to schedule. So try that for now. But will discuss this in the next grooming. Can also try to see if any performance can be added to the tree that is easier than virtualization (problem is virtualizing collapsed/expanded nodes)

How many records is the "large" tree is it only two? with 80+ children? Not sure im looking in the right place.

[tmcconechy]

@mvwinsen looking into this i can see some modifications that should help with the rendering