Diagram: Auto Layout

[Garry Mc]

Greetings

We're making use of the diagram control to visualize process flows. Ideally we'd like to have the control automatically generate the most appealing layout. While I know you have a DirectedTreeLayout it doesn't work when you have a node with multiple parents. As many process flows will have this (ours included) this feature doesn't work for us and we've had to craft our own layout routines, which is going to require a lot of work to make it work in most scenarios.

So we want to know if we've overlooked something and the control already supports this feature, or if not if there are plans to support this feature or you have sample code which can be used as a basis to handle this scenario.

I've attached a visual that shows a sample of how we're visualizing the tree via our custom layout logic.

Additional

Also we'd like to know if the control has an auto zoom/scale feature so that it will automatically scale based on the available space.

Thanks

Garry Mc

Multiparent_diagram_cbff33ba.zip

[Ramya Thirugnanam]

Hi Garry,

Please find the responses to your queries as below.

S.No	Queries	Response
1.	Directed Tree Layout doesn't work when you have a node with multiple parents	Currently, Directed Tree Layout supports Node with Multiple Parents. This layout arranges the child Node which has more than one parent based on any one of the Parent Node (Not placed in Centre of the Parent Nodes). We will provide more custom options for Directed Tree Layout in our future releases. We have created a simple sample to meet your requirement. Please refer to the sample from the attachment. Limitations: 1. Directed TreeLayout does not support Cyclic Path.
2.	We’d like to know if the control has an auto zoom/scale feature so that it will automatically scale based on the available space.	Regarding “Fit To Page” support in SfDiagram, Currently we do not have support for the requested feature. This feature is already in our feature queue. We will implement this feature in any of our upcoming releases. Feature information: 1. Fit To Page:         Fit-to-page will bring the whole diagram into the viewport using the zooming options. This helps you view the whole diagram page in the viewport without having to scroll.

If this feature information does not suits your requirement, please give us further details, so that we will consider them when we plan to implement it.

Please let us know if you need any further assistance.
Regards,
Ramya

112415_d1b96bdd.zip

[Garry Mc]

Thanks for the prompt reply! Now I have some good news and some no so good news. The good news is I could get your sample to run. The bad is I couldn't get it to work in my application. This drove me crazy all day, however I seem to have isolated the issue and I believe there's a bug in the control.

I've attached a repro for your analysis. However, in short the issue seems to be if I execute an Async IO call (the sample uses HttpClient) prior to running the Diagram code the diagram fails to render correctly. This is probably why I couldn't get it to render initially, and thought the control didn't support the multiple parents (which I though was in the docs btw).

I'd be most interested if you know of a workaround for this issue while its being fixed.

Garry Mc

AutoLayoutTest_a5830008.zip

[Ramya Thirugnanam]

Hi Garry,

Thanks for the sample.

Reported Problem:
            Execute an async IO call (the sample uses HttpClient) prior to running the Diagram code the diagram fails to render correctly.

Cause to the Problem:
           It is by design, specified automatic layout will be updated during the first loaded event of SfDiagram. So, Nodes and Connectors should be populated before diagram is getting loaded. In your case, initially SfDiagram is loaded, but populating of Nodes and Connectors logic is invoked after the await method (“IBreakItems”). Hence layout is not updated.

 

Solution 1:

Populate the nodes and connection before diagram is getting loaded.

 

Solution 2:

Layout can be updated manually by calling the UpdateLayout() after populating the Nodes and Connectors Collections. Please refer to the following code snippet for updating the Layout.

 

CodeSnippet:

 

 

//Code for Updating the Layout

 sfdiagram.LayoutManager.Layout.UpdateLayout();

Here, sfdiagram is an instance of SfDiagram.

 

We have modified the given sample to resolve the reported issue. Please refer to the modified sample from the attachment.

 

Please refer to the following online help documentation link for more information UpdateLayout.

Link: http://help.syncfusion.com/UG/winrt/Documents/automaticlayouts.htm

 

Please let us know if you need any further assistance.
Regards,
Ramya

AutoLayoutTest_a5830008_2599a8b4.zip

[Garry Mc]

Thanks again for the prompt reply! I now have it working :) However, I looked at the documentation link you provided and it gave no indication of this 'feature' that once the diagram has been drawn (though with Nodes =null) that you must update the layout. This omission caused a lot of churn on my part as it was not obvious why the control was not behaving correctly.

I would recommend a change be made to the control that if the entire node/connection tree is replaced as is the case in my example that the Layout be automatically updated. There should also be much better and clearer documentation on this.

Now while I have your control working with auto layout it unfortunately suffers from the same layout issues as my simple home grown version. It seems it doesn't try to optimize the layout based on the connections (ie re-order nodes for better layout) or try to re-routine connections which results in lines cutting directly through nodes (rather unsightly). It also seems to have an issue with the first node being cut off a little. I've included four images, one set with how I'd like the diagram to render (which each routine produced for one dataset) and the other set showing how it fails to render nicely (again both routines produce this issue - of note is the 'data' is the same just the nodes are in different order). It was this issue I was hoping your layout logic would have solved. As both datasets are trying to represent exactly the same process flow, just the ordering of the nodes being processed is different.

At this stage we might stick with our home-grown layout routine as it seems to produce a slightly nicer render when the data is in the right order. However, we welcome any improvements in your layout routines as we would rather not have to maintain the extra code.

Layouts_47e35167.zip

[Ramya Thirugnanam]

Hi Garry,

Sorry about the inconvenience caused.

Please find the responses to queries as below.

S.No	Queries	Response
1.	no indication of this 'feature' that once the diagram has been drawn (though with Nodes =null) that you must update the layout in Documentation	We will update the documentation with necessary information in near future. Thanks for the feedback.
2.	I would recommend a change be made to the control that if the entire node/connection tree is replaced as is the case in my example that the Layout be automatically updated. There should also be much better and clearer documentation on this.	As already said, specified automatic layout will be updated during the first loaded event of SfDiagram. The Updating Layout is time consuming process, proportional to the number of nodes and connections used. It affects the Performance of SfDiagram, when call frequently. When we provide some inbuilt options to update it, we must also provide some options to disable to avoid unnecessary calls to improve performance or unwanted changes. This will lead to more API, difficult to understand the inbuilt behaviors. To make it simple, we will provide simplest way to update the layout, with a simple function. It needs to be called at necessary point of time. This point of time should be determined in application side using some events. Currently we do not have event that is fired when Node/Connector is changed, we are planning to provide more events in our upcoming release. We will consider more aspects for layout update too. Feature information: New events to notify the changes in the Nodes or Connections property.
3.	It also seems to have an issue with the first node being cut off a little.	The reported issue “Root Node being Cut while using Left to Right Orientation in Automatic Layout" is confirmed as a defect and we have logged an issue report to fix this. This fix will be available in our upcoming WinRT service pack release.
4.	a) optimize the layout based on the connections (i.e. re-order nodes for better layout) or   b)I've included four images, one set with how I'd like the diagram to render (which each routine produced for one dataset) and the other set showing how it fails to render nicely (again both routines produce this issue - of note is the 'data' is the same just the nodes are in different order). It was this issue I was hoping your layout logic would have solved. As both datasets are trying to represent exactly the same process flow, just the ordering of the nodes being processed is different.	The Layout follows the order in which Node and Connections are added in the SfDiagram for Arranging the Nodes/Connections. The Order of the Child Nodes can be Changed for Layout by overriding methods of Layout. Please refer to the virtual methods as below. Virtual Methods: 1.GetFirstChild 2.GetLastChild 3.GetPreviousSibling 4.GetNextSibiling

 

Please let us know if you need any further assistance.
Regards,
Ramya

[Garry Mc]

Thanks for the detailed reply. Regarding the following points:

2. I understand the perf issues, hence the recommendation to only do it when the whole collection is updated. It makes no sense that a complete replacement of the data doesn't trigger a change in layout, especially if the nodes are currently null. If the nodes are empty (ie user about to add one by one via loop) then the overhead is virtually nil as there's no nodes to process anyway. Though better documentation would at least be better assuming the dev reads it :)

4) I'm sure I can override this and that to get the desired result, however that kind of defeats the point of having an 'auto-layout' feature doesn't it? If we look at most diagramming tools on the market, such as the Class Diagram feature in Visual Studio it has an auto-layout feature which optimizes the layout based on the nodes and connections. While the results are not perfect they are much better than having lines cut through nodes. At the moment your auto-layout is fairly simple (I wrote my equivalent in a few hours) so doesn't provide the sophistication I'd expect in a diagramming control.

[Ramya Thirugnanam]

Hi Garry,

We have considered your requirements as feature request

1)   Update the Layout automatically when whole Node and Connectors Collection is changed or assigned.

2)   Automatic layout : Rearranging the Order of child nodes in layout to avoid the Connector overlapping.

We have create an incident # 113785 to follow up these feature updates. Our Direct Trac support system can be accessed from the following link:

                               

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

 

Please let us know if you need any further assistance.
Regards,
Ramya

[Ramya Thirugnanam]

Hi Garry,

 

We are glad to announce that our Essential Studio Vol 4 2013 is rolled out and is available for download under the following link.

 

http://www.syncfusion.com/support/forums/general/115004/Essential-Studio-2013-Volume-4-Final-Release-v114026-available-for-download

 

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.

 

Feature Description:

FitToPage:
 This feature enables to fit the Diagram into View. Please refer to the following codesippet to use FitToPage Command.

Without Parameter:

 

[C#]

 

(diagram.Info as IGraphInfo).Commands.FitToPage.Execute(null);

 

With Parameter:

Parameter type: FitToPageParameter implemented from IFitToPage

FitToPage properties:

S.No	Property Name	Property Type	Example
1.	FitToPage	Enum	FitToPage=FitToPage.FitToWidth
2.	Margin	Thickness	Margin=new Thickness(5)

 

Please refer to the following code snippet to use FitPage with Parameters.

[C#]

 

(diagram.Info as IGraphInfo).Commands.FitToPage.Execute(new FitToPageParameter()
{

    FitToPage=FitToPage.FitToPage ,

    Margin=new Thickness(5)

});

 

 

Please let us know if you have any concerns.

Regards,

Ramya