How to Improve Performance of Expand Layout in React Diagram?

This article explains how to improve the performance of expand and collapse actions in the layout of the Syncfusion® React Diagram component. When working with diagrams that include a large number of nodes arranged in a layout, the performance of rendering can sometimes be affected during these interactions. To address this, it is essential to optimize the expand and collapse functionality, especially when dealing with complex or hierarchical structures. The Syncfusion® React Diagram component provides the ability to expand and collapse nodes within a layout dynamically.

   function setNodeDefaults(node) {
       node.shape = { type: 'Text', content: node.data.Name, shape: 'Rectangle', cornerRadius: 5 };
       node.style = { fill: '#659be5', strokeColor: 'none', color: 'white', strokeWidth: 2 };
       node.backgroundColor = '#659be5';
       node.margin = { left: 5, right: 5, bottom: 5, top: 5 };
       node.width = 80;
       node.height = 30;
       node.expandIcon = {
           shape: 'ArrowDown',
       };
       node.collapseIcon = {
           shape: 'ArrowUp',    };
       return node;
   } 

While this feature is highly useful, enabling smooth and seamless rendering during these actions is crucial for an optimal user experience. One effective way to achieve this is by disabling animations during the expand and collapse operations. This can be done by setting the enableAnimation property of the layout to false.

By disabling the animation, the rendering process becomes faster and more efficient, eliminating any potential delays or flickering effects. This is particularly beneficial for applications that require quick interactions and need to maintain a high level of responsiveness even with extensive diagram layouts.

       layout={{
           type: 'HierarchicalTree',
           margin: { left: 10, top: 10 },
           horizontalSpacing: 40.0,
           verticalSpacing: 50.0,
           orientation: 'TopToBottom',
           enableAnimation: false

       }} 

By applying this configuration, you can ensure that the expand and collapse actions are executed efficiently, providing a smooth and consistent user experience while maintaining the performance of the diagram layout.

Conclusion

We hope you enjoyed learning about how to improve the performance of the expand layout in React Diagram.

You can refer to our React Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.

You can also explore our React Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!