We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Diagram component freezes whole UI while loading the data

Hi, 

I have been using the diagram component, while fetching around 100+ data, it hangs or freezes the whole UI, 


bug 1 : you can't click other menu while loading

bug2 : when first load, datagram connection shows correctly and diagram position is top to bottom, but if you navigate from other menu like count, position changes to left to right and connections doesn't showing properly 

is there any workaround to fix the issues ? 

I have attached the solution. 


Attachment: diagramPOC_d5dcdd42.rar

6 Replies

BR Balavignesh RaviChandran Syncfusion Team April 14, 2023 02:04 PM UTC

Please find the responses for the following queries

Queries

Response

bug 1 : you can't click other menu while loading

 

We were able to reproduce the issue and are currently validating it. We will provide additional information on April 18, 2023.

bug 2 : when first load, datagram connection shows correctly and diagram position is top to bottom, but if you navigate from other menu like count, position changes to left to right and connections doesn't showing properly 

 

We have validated the reported issue and found the root cause of the issue. We found that, while trying to create a layout using a data source, and you were trying to add a connector to the Diagram Connector collection. As you might already know, in our diagram control, the connections are automatically created based on the data source for the layout, so there is no need to add them through the Diagram's connector collection. We have removed the connector from the collection, and the issue has been resolved. We have also attached the corrected sample.

 Could you please confirm to us the need for adding additional connectors?





Attachment: diagramPOC_ad5dbc05.zip


AR Asifur Rahman April 14, 2023 03:22 PM UTC

Thanks for the reply,  solved the bug 2 issues. 


if you can check the bug 1, we have only loaded around 80+ diagrams only, if we increase the number of diagrams like 100+ or 150+ or 200+, it really hangs or freeze the UI, which is causing the issues. 

Please check the issues, if you can give us the walkthrough, that would be really helpful. 



BR Balavignesh RaviChandran Syncfusion Team April 18, 2023 06:19 PM UTC

 We are still validating the issue where the Blazor server Application UI freezes upon loading of diagram and will provide additional information on April 19, 2023



BR Balavignesh RaviChandran Syncfusion Team April 21, 2023 12:11 PM UTC

We have validated the reported issue using the provided sample and concluded that the issue is related to the framework. The reported UI freezing issue is not reproduced in the Blazor Serve project. As the Wasm sample operates on a single thread, performing asynchronous operations is not as smooth as with the Server projects, which support multi-threaded operations, and UI freezing is a common issue around the Webassembly project. Samples of the two project types have been attached for your reference to help differentiate their performances. We have made some corrections to the provided sample (Blazor Webassemble project) to reduce the delay when loading the data source.


Attachment: Samples_f151374d.zip


AR Asifur Rahman June 2, 2023 08:27 AM UTC

Hi, I have been trying to use the Js library of syncfusion, Diagram component in a blazor webassembly. and i have created a poc [attched the project file], but seems like it's giving me a issues while using it with the IJSRuntime

.

is it possible to help or let me know  what's the issues ? 


step to reproduce : check the "/" or index page, check browser console.  


Attachment: jsdiagram_72f6e030.zip


SU Sumathi Uthayakumar Syncfusion Team June 5, 2023 02:25 PM UTC

In general, we recommend using the Blazor component within the Blazor platform. Within this platform, we have already created a diagram component specifically designed to improve web assembly efficiency. Therefore, we advise utilizing our Blazor diagram component in a web assembly. For your reference, we have provided a simple diagram sample.


Could you please let us know the purpose of creating a JS diagram in Blazor?


Attachment: Sample_1a8be671.zip

Loader.
Live Chat Icon For mobile
Up arrow icon