Help with Diagram (empty without data, auto layout, ZIndex and resize)

[Marius Fjeldet]

Hi,

I have made this:
https://blazorplayground.syncfusion.com/BjrTtHtnJUKWKwEp

Is it possible to:
1) Have an empty diagram on first load? Currently, it crashes if there are no nodes loaded.

2) Automatically "AutoLayout" after adding new elements?

3) Have Connectors appear in front of nodes? In set 2 and 3, try move the nodes around to see "hidden" connectors.

4) Have the diagram size adopt when parent container is resized? 

I have seen this: https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/RefereshDataSource
... which seems to automatically re-layout everything when DataSource is changed. However, in my scenario I need connectors to appear between more nodes than what a basic Child-Parent relationship (ID and ParentID) can do. I can use DataSource if its possible to apply custom connectors, but I were not able to do that. 

[Kiruthika Manikandan]

 Hi,

Please find the response for your query.

Load an empty diagram on start (I don't want to default load set 1, but it currently crashes if I remove OnInitialized)	We have successfully replicated the reported issue on our end. Currently, we are in the process of validating it and will provide further information on June 11, 2024.
Automatically align the nodes after clicking a button (no manual "Do Layout" click)	If you add any nodes or connectors at runtime, you can use the asynchronous method `AddDiagramElements` in the diagram. This method helps to add the nodes and connectors asynchronously. After adding the nodes and connectors, immediately call the `DoLayout` method; you do not need to call the `DoLayout` method manually. We have shared a code snippet for your reference. Code Snippet:    async void LoadSet2()    {            NodeCollection.Add(BuildNode("Set2-A"));           NodeCollection.Add(BuildNode("Set2-B"));           NodeCollection.Add(BuildNode("Set2-C"));             NodeCollection.Add(BuildConnector("Set2-A", "Set2-B"));           NodeCollection.Add(BuildConnector("Set2-A", "Set2-C"));           NodeCollection.Add(BuildConnector("Set2-B", "Set2-C"));        await sfDiagram.AddDiagramElements(NodeCollection);        sfDiagram.DoLayout();         }
Move connectors to front (try move the nodes in set 2 and 3 around, and you will see)	Could you please confirm if the behavior displayed in the screenshot is expected on your end? If yes, then this is not an issue. The connector renders based on the parent-child relationship you provided, causing the third connector to appear in front of the nodes.
If possible, make Diagram always fit inside SplitterPane on Resize	We can achieve these scenarios by using the OnResizeStop event in the splitter component. By utilizing this event, we can obtain the PaneSize value in the ResizingEventArgs. Therefore, you can adjust the width and height of the diagram based on the PaneSize value. We have provided a modified sample for your reference.
I have seen this: https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/RefereshDataSource. which seems to automatically re-layout everything when DataSource is changed. However, in my scenario I need connectors to appear between more nodes than what a basic Child-Parent relationship (ID and ParentID) can do. I can use DataSource if its possible to apply custom connectors, but I were not able to do that.	The Connector Creating Event is triggered each time a connector is created in the diagram. This event allows you to customize the appearance of the connector. We have provided a User Guide link for more information on the Connector Creating Event and instructions on how to create a mind map using it. https://blazor.syncfusion.com/documentation/diagram/connectors/events#connectorcreating-event https://blazor.syncfusion.com/documentation/diagram/layout/mind-map Note: Please ensure that the ParentID and childID relationship is updated correctly in your sample, and update the User Guide accordingly for this relationship. https://blazor.syncfusion.com/documentation/diagram/data-binding

Screenshot:

Thanks,

Kiruthika M

Attachment: MindmapSample1_f80b6beb.zip

[Marius Fjeldet]

Hi,

Thank you! The code in this example seems to solve most of the things I wanted. Ill wait for feedback on the bug regarding empty Diagram, and just use a placeholder node in the meantime.

One more thing. I tried to add sfDiagram.DoLayout(); on the last line inside the OnResizeStopHandler method, but it did not work. It works if I manually click the Do Layout button. There is probably some kind of work being done inside FitToPage that is not finished by the time I try to do Do Layout.

Is there some kind of EventCallback I can use on the Diagram that will trigger after the diagram is rendered inside FitToPage, so that I can perform a DoLayout() to also automatically layout the diagram when its 

[Kiruthika Manikandan]

Hi,

Please find the response for your query.

Ill wait for feedback on the bug regarding empty Diagram, and just use a placeholder node in the meantime.

We have confirmed that the reported issue is a bug and have logged defect report regarding this. We will fix the issue and include the fix in our upcoming weekly NuGet release which is expected to be rolled out on June 25, 2024. We appreciate your patience until then. Meanwhile, you can track the status of the bug from the following link. Feedback Link: An exception occurs when the mindmap layout is run without any nodes/connectors during the initial rendering in Blazor | Feedback Portal (syncfusion.com) Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

One more thing. I tried to add sfDiagram.DoLayout(); on the last line inside the OnResizeStopHandler method, but it did not work. It works if I manually click the Do Layout button. There is probably some kind of work being done inside FitToPage that is not finished by the time I try to do Do Layout. Is there some kind of EventCallback I can use on the Diagram that will trigger after the diagram is rendered inside FitToPage, so that I can perform a DoLayout() to also automatically layout the diagram when its

We were able to reproduce this issue from our end. The cause of the issue is that the doLayout method is executed before the fit to page action is completed. Therefore, we resolved this issue by adding a delay after calling the fit to page method to complete the action. We have shared a modified sample and code snippet for your reference. Code snippet: public async void OnResizeStopHandler(ResizingEventArgs args) {     int index = 0;     if (args.Index != null)     {         for (int i = 0; i < args.Index.Length; i++)         {             if (args.Index[i] == 1)             {                 index = i;             }         }     }     if (SplitterOrientation == SplitterOrientation.Horizontal)     {         dWidth = (args.PaneSize[index] - 2).ToString() + "px";     }     else     {         dHeight = (args.PaneSize[index] - 2).ToString() + "px";     }       sfDiagram.FitToPage(options);     await Task.Delay(100);     _=sfDiagram.DoLayout(); }

Regards,

Kiruthika M

Attachment: MindmapSample1_c895a366.zip

[Marius Fjeldet]

Thanks for the link to the tracker :) 

About my DoLayout query, is there no other way than adding a delay? I am doing my best to avoid delays as it is a bit unpredictable. There are no events being triggered after a FitToPage is completed?
Its no big deal, after some user testing, it could be I am using a button for Reset View either way.

I have a new, tiny question. Is there a way to have a self-loop or self-reference on a node, like node A in the image below? If I add a connector with the same sourceId and targetId, it also crashes. 

[Kiruthika Manikandan]

Hi,

Please find the response for your query.

About my DoLayout query, is there no other way than adding a delay? I am doing my best to avoid delays as it is a bit unpredictable. There are no events being triggered after a FitToPage is completed?

As of now, no events are being triggered after a FitToPage is completed in our control. We have logged a feature request for the same and have scheduled to implement the feature in one of our upcoming releases. We will notify you once the feature has been implemented. In the meantime, you can track the status of the feature using the following link:   Provide ViewportChangedEvent support for diagram in Blazor | Feedback Portal (syncfusion.com)

I have a new, tiny question. Is there a way to have a self-loop or self-reference on a node, like node A in the image below? If I add a connector with the same sourceId and targetId, it also crashes.

We tried a self-looping connector on a node on our end, but the issue was not reproduced. We have created a similar sample based on the screenshot you provided.   Note: self-looping is not working smoothly. The connector is created, but it appears based on the algorithm provided by our end and is not possible for layout cases as well.

 Thanks,

Kiruthika M

Attachment: ConnectWithNode_6fdd1465.zip

[Marius Fjeldet]

Thank you so much for all examples :)

I see you added a connector without the issue I had when setting source and target to same ID (not that it would visually work anyway).

I will patiently wait for the empty diagram bug to be solved, and then see how my implementation works. I will report back if I face any new issues after that, with proper examples in the playground.

Thanks again! Much appreciated :)

[Preethi Rajakandham]

Hi Marius,

You're welcome. As promised, our team will update you with the fix for the empty diagram bug on June 25th. 

Regards,

Preethi R

[Kiruthika Manikandan]

Hi,

We have fixed the reported issue  “An exception occurs when the mindmap layout is run without any nodes/connectors during the initial rendering” and included the fix in our weekly patch release(v26.1.39). Please update the “Syncfusion.Blazor.Diagram” package to the latest version in your application to resolve the reported issue. Please find the package link below.

https://www.nuget.org/packages/Syncfusion.Blazor.Diagram

 

Root Cause:

Initially, we cannot ensure the nodes count in the mind map layout rendering.

Feedback Link: https://www.syncfusion.com/feedback/58561/an-exception-occurs-when-the-mindmap-layout-is-run-without-any-nodes-connectors

Thanks,
Kiruthika M

[Marius Fjeldet]

Thank you! The new update seems to have fixed the problem :)

[Preethi Rajakandham]

Hi Marius,

You're welcome. We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 

Regards,

Preethi R

[Marius Fjeldet]

Hi again,

I have a couple more issues with the diagram in my solution. 
I have managed to reproduce it here. After running the code, do not immediately resize the window as this seems to kinda repair the diagram:
Syncfusion Blazor Playground: Write, Edit, Compile & Share Code for Blazor Components

When you run the code, the diagram correctly fills the entire area . However, when you load a set of data, the diagram shrinks into bare minimum in the top left corner. If you now resize either the SplitterPane or the entire window, the diagram will change to fill the entire area again, and move the data out of center. If you click on another set of data, the diagram seems to work as expected.
This is not a general problem with the diagram, but it seems to behave so in my setup mixed with tabs and splitters.

Issue 1: Why is the diagram not filling the entire area after loading data?

If you for a while just randomly resize the SplitterPane, resizing the window and switching on data to load, the diagram will once in a while change the zoom level. I am not able to reliably reproduce this issue, but it happens randomly by resizing despite not having the auto zoom enabled. Occasionally the diagram data will be displayed far outside of the view too, and one time I had two horizontal scrollbars for two of the nested containers in the diagram.

Issue 2: Why is the diagram sometimes changing the zoom levels, and displaying the data far away from where it was before resizing? 

I understand this is a complex component, and I am using it in a nested way. 
Is there a workaround (or bug fix) for issue 1? 
And about issue 2, is there a way I can force reset the zoom, scroll and just center the data? Or even better, if you can reproduce and look into the inconsistencies? 

[Kiruthika Manikandan]

Hi Marius,

When you run the code, the diagram correctly fills the entire area . However, when you load a set of data, the diagram shrinks into bare minimum in the top left corner. If you now resize either the SplitterPane or the entire window, the diagram will change to fill the entire area again, and move the data out of center. If you click on another set of data, the diagram seems to work as expected. This is not a general problem with the diagram, but it seems to behave so in my setup mixed with tabs and splitters. Issue 1: Why is the diagram not filling the entire area after loading data?

We are able to reproduce the reported issue at our end. We are currently validating the issue and will provide additional information on July 5, 2024.

If you for a while just randomly resize the SplitterPane, resizing the window and switching on data to load, the diagram will once in a while change the zoom level. I am not able to reliably reproduce this issue, but it happens randomly by resizing despite not having the auto zoom enabled. Occasionally the diagram data will be displayed far outside of the view too, and one time I had two horizontal scrollbars for two of the nested containers in the diagram. Issue 2: Why is the diagram sometimes changing the zoom levels, and displaying the data far away from where it was before resizing?   I understand this is a complex component, and I am using it in a nested way. Is there a workaround (or bug fix) for issue 1? And about issue 2, is there a way I can force reset the zoom, scroll and just center the data? Or even better, if you can reproduce and look into the inconsistencies?

We were able to reproduce the issue you reported on our end. In your sample, you used the "FitToPage" method after resizing the panel. In this case, we update the zoom value based on the viewport size. When we called the ResetZoom method after calling the FitToPage method, the issue was resolved. We have shared a sample for your reference.

Thanks,

Kiruthika M

Attachment: MindmapSample1_854a682f.zip

[Kiruthika Manikandan]

Hi Marius,

We suggested loading Tab content in Dynamic mode, where only the content of the selected Tab will be loaded and available in the DOM. In this mode, the browser maintains the DOM with only the current active tab content, leading to increased page loading performance and rendering of the DOM. Additionally, when resizing the panel, you can use the BringIntoCenter method in your sample for data alignment to the center, instead of using the FitToPage method. We have shared a User Guide link for Content render modes and a sample for your reference.

UG Link:

 https://blazor.syncfusion.com/documentation/tabs/content-render-modes

Thanks,

Kiruthika M

Attachment: MindmapSample1_7fa83746.zip

[Marius Fjeldet]

Hi, 

Thanks for the feedback. I see that changing the tab loading from Init to Dynamic actually works in the Playground example. For some reason, it does not work in my main project where I initially have the issue. Thats strange, it must be more factors... 

However, even if it had worked in my main project, I don't think the Dynamic loading is a good option for me. The user can have multiple tabs open and work in multiple diagrams, and changing tabs will most likely reset everything every time. 

 Do you have any more ideas? Or do you know what the root cause for this is? 

 If you don't, I have a workaround for myself. My use case is mainly to display nodes from a pre defined set of data. Its not really adding anything dynamically after a dataset is loaded. Given this use case, I am simply just remove and re-add the entire Diagram Component whenever a new dataset is loaded. I do this by wrapping the <ComponentDiagram> inside a @if(drawDiagram){ }, and then toggle this bool and trigger this.StateHasChanged(), prepare the nodes and connectors, and then draw a fresh Diagram with the data I want. Its not a pretty solution, and it seems to be performance unoptimized, but at least the data is displayed as it should. Do let me know if you have a better idea.

[Kiruthika Manikandan]

Hi,

We are currently validating your query and will provide additional information by July 11, 2024.

Thanks,

Kiruthika M

[Kiruthika Manikandan]

Hi Marius,

Thank you for your patience.
We calculated the initial diagram bounds using the Js measure call while loading the diagram. However, due to the display: none style settings in the Tab control, the bounds were not properly calculated for the diagram element because it was not rendered on the DOM. To overcome this issue, render the diagram after the tab component is created using the TabCreated Event. We have shared a  simple sample for your reference.

Regards,

Kiruthika M

Attachment: MindmapSample1_c880f8c.zip

[Marius Fjeldet]

Hi,
Thank you - with the root cause for this issue known, I have managed to work around it. I can progress now :)

[Preethi Rajakandham]

Hi Marius,

You're welcome. 

We are happy to hear that you have found a solution on your end. Please let us know if you need further assistance. As always, we are happy to help you out.

Regards,

Preethi R

[Marius Fjeldet]

Hi,

I have some issues again. This time, I am actually unable to reproduce my issue because I get errors in the Playground that I do not get in my main project. Can you help me take a look? 

https://blazorplayground.syncfusion.com/BDBzZlCvfAsvUDPK

The sets share IDs, which I think is related to the actual issue I have in my main project. Do not load two sets at the same time, because right now I have put the Clear in comment. However, here are my questions:

1. Why does Diagram.Clear() only clear connectors?
2. Why does it crash if I clear and load a set again?

[Kiruthika Manikandan]

Hi,

In your sample, you disabled the Delete option in NodeConstraints within the BuildNode() method. This is why the connector only clears when the clear method is called. Once you added the Delete option in NodeConstraints, the issue was resolved. These values are already enabled in the Default option in NodeConstraints. Additionally, if you want to load a different set of layouts at runtime, you need to clear the nodes and connectors before adding new nodes and connectors. We have shared a user guide link for more details about NodeConstraints, as well as a modified sample link for your reference.

 

Sample link:

https://blazorplayground.syncfusion.com/VjVfNPCYLoOFduNO

 

UG link:

https://blazor.syncfusion.com/documentation/diagram/constraints#node-constraints

Thanks,

Kiruthika M

[Marius Fjeldet]

Ahh, of course, that makes sense. Thanks for the clarification. But I do not really want the user to be able to delete anything, only the code. Can I still accomplish this?

Also, your fixed example reproduces the issue I was trying to show you. If you check my code in the BuildNode method, I have a parameter for "bool isMain". If this is set to true, the Node will be colored blue, otherwise the node will be green. 

The issue: 

• if you start by loading set 1, it will color Node1 blue and the rest green. If you then load set 2, Node1 will remain blue and Node2 remains green (expected to be blue).
• If you start by loading set 2 it is the other way around; Node2 will start as blue and Node1 green. If you load set 1, Node2 remains blue and Node1 remains green.

Can you help me check why? It seems the ShapeStyles are not applied the way I expect. 

[Kiruthika Manikandan]

Hi,

Please find the response for your query.

But I do not really want the user to be able to delete anything, only the code. Can I still accomplish this?

We are unable to understand your query regarding your expectations for the delete functionality. Could you please share a video and a simple example to help us better understand your request?

Also, your fixed example reproduces the issue I was trying to show you. If you check my code in the BuildNode method, I have a parameter for "bool isMain". If this is set to true, the Node will be colored blue, otherwise the node will be green.    The issue:  if you start by loading set 1, it will color Node1 blue and the rest green. If you then load set 2, Node1 will remain blue and Node2 remains green (expected to be blue). If you start by loading set 2 it is the other way around; Node2 will start as blue and Node1 green. If you load set 1, Node2 remains blue and Node1 remains green.

We are able to reproduce the reported issue on our end. We are currently validating the issue and will provide additional information on August 23, 2024.

Thanks,

Kiruthika M

[Marius Fjeldet]

Thanks for looking into the color issue. This is the most important one :)

About my delete-question, I wanted to keep the delete constraint so that a user can not click Delete-button to delete anything. However, I also want the diagram to be cleared when the code loads in a new set. 
I found a solution myself, I can keep the Node delete constraint and then when I want to clear the diagram, I can do it like this:

    void Clear2()

    {

        foreach(var node in sfDiagram.Nodes)

        {

            node.Constraints = NodeConstraints.Default;

        }

        sfDiagram.Clear();

    }

[Suganthi Karuppannan]

Hi Marius,

Please find the response for your query.

Thanks for looking into the color issue. This is the most important one	We are currently validating the issue and will provide additional information on August 23, 2024.
About my delete-question, I wanted to keep the delete constraint so that a user can not click Delete-button to delete anything. However, I also want the diagram to be cleared when the code loads in a new set.	This is fine, you can use the code you provided.

Thanks,

Suganthi K.

[Kiruthika Manikandan]

Hi Marius,

We have confirmed that the reported issue is a bug and have logged defect report regarding this. We will fix the issue and include the fix in our upcoming weekly NuGet release which is expected to be rolled out on September 17, 2024. We appreciate your patience until then.

Meanwhile, you can track the status of the bug from the following link.

Feedback Link:

Gradient collections are not cleared properly when the diagram is cleared in Blazor | Feedback Portal (syncfusion.com)

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Thanks,

Kiruthika M

[Kiruthika Manikandan]

Hi,

Reported Issue: Gradient collections are not cleared properly when the diagram is cleared

 

We are glad to announce that our Essential Studio 2024 Volume 3 Main Release v27.1.48  is rolled out and is available for download under the following link.

 

Essential Studio 2024 Volume 3 Main Release v27.1.48 is available for download | Announcements Forums | Syncfusion

 

Feedback URL

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

 

Root Cause: 

Previously, we did not update the gradient value in the dictionary collection when removing a node from the diagram, which resulted in an outdated dictionary. Now, we ensure that the gradient is also removed from the dictionary collection when a node is deleted from the diagram.