Radial Tree Diagram Slowness When Rebinding Dynamically

[Cullen Chow]

Hi,

I've been experiencing slowness when using the radial tree diagram and overview components with larger datasets and rebinding different datasets to it dynamically. I'm using your example as a baseline, and changed the data and node models to work with the data I'm using. When rebinding data dynamically, I'm doing something like this.

this.dataSource = {
                id: 'id', parentId: 'parentId',
                dataSource: new DataManager(this.diagramUtility.GetRadialTreeChartData(data)),               
                doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
                    this.diagramUtility.BindDataToRadialTreeNode(nodeModel, data, diagram);
                }
            };

if (this.diagram) {
            this.diagram.reset();
            this.diagram.fitToPage();
            this.diagram.dataBind();
        }

I'm currently using datasets with around 400 nodes, but will need to potentially use larger ones. It's currently taking around 40 seconds to rebind a totally different dataset with a different origin node. My question is what is the most optimal way to rebind a new dataset to the radial tree diagram? I've also tried these to no success.

// Doesn't pick up the new dataset and displays the previous one

this.dataSource.dataSource = new DataManager(this.diagramUtility.GetRadialTreeChartData(data));

this.diagram.dataBind();

// Correctly gets the new dataset and refreshes quicker, but diagram calls such as reset() are off center, and the Overview control shows nothing

this.diagram.clear();

this.dataSource.dataSource.dataSource.json = this.diagramUtility.GetRadialTreeChartData(data);

this.diagram.refresh();

Thanks in advance!

[Aravind Ravi]

Hi Cullen, 

 

We are have created a sample for the radial tree with overview. On analyzing the provided code snippet you have changed the local dataSource variable. So that only radial tree does not gets refreshed with new set of data. To load the radial tree with new set of data, access the dataSource property from the diagram and change the data instead of change it in local variable.  By using the dataSource property of diagram’s dataSourceSettings we can add new set of data to layout. After add the new set of data call diagram dataBind method to refresh the layout with new set of data. Please find the below code snippet for how to change data at run time.  

 

this.diagram.dataSourceSettings.dataSource = new DataManager(this.Data2); 

this.diagram.dataBind();     

  

After changed the data, diagram has been loaded with new set of data and in overview also changes gets applied. To load the layout with new set of data it took less than 3 seconds and this is the maximum optimized possible from our side. We are not able to find the bottle necks to improve the performance further.  

 

We have attached a sample for your reference. Please find the sample in below link 

 

Sample: https://stackblitz.com/edit/angular-a2cv3x 

 

Regards 

Aravind Ravi 

[Cullen Chow]

Aravind,

Thanks for your answer. Unfortunately, I had tried that solution as well and it didn't help. I see that your example used 100 nodes, which if I limited my dataset down to I was able to reduce down to about the same speed. For me, loading the diagram with my larger dataset was quick, it's just rebinding a different dataset was causing the slowness.

I have found a workaround for my solution by removing my diagram component, and recreating a new one with any new dataset though.

Thanks,

Cullen

[Aravind Ravi]

Hi Cullen, 

 

We are glad that you found the solution. Please get back to us if you need further any assistance on queries regarding radial tree layout. 

 

Regards 

Aravind Ravi