microsoft / microsoft/automatic-graph-layout

Populating a graph and retrieving node positions not working

Open
#362 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
C#
Stars
1.5k
Forks
319
Avg merge
38m
Merged PRs (30d)
1

Description

I am trying to use the MSAGL library to generate node positions. I have gone through the samples and have not found a simple example that helps.

I have my own custom Graph object with a list of custom edges and custom nodes. I am iterating through them, adding them to the GeometryGraph, creating a layered layout, running the graph, iterating back through the nodes, and retrieving the node positions. The resulting nodes positions are incorrect, they are just about all overlapping. I tried scaling the positions by 100x but they still overlap. What am I doing wrong?
(Here's my code)

  1. I create nodes and edges. I make a dictionary for the nodes so I can reuse them in my edges.
Dictionary<string, Microsoft.Msagl.Core.Layout.Node> nMap = new Dictionary<string, Microsoft.Msagl.Core.Layout.Node>();
int radius = 12;
foreach (var myNode in myGraph.nodes)
{
    var curve = CurveFactory.CreateCircle(radius, new Point());

    // var node = new Microsoft.Msagl.Core.Layout.Node(curve, id);
    var node = new Microsoft.Msagl.Core.Layout.Node(curve, myNode.id.ToString());

    graph.Nodes.Add(node);
    nMap.Add(myNode.id.ToString(), mNode);
}

foreach (var activity in myGraph.activities)
{
    var source = nMap[activity.chartInfo.source_id.ToString()];
    var target = nMap[activity.chartInfo.target_id.ToString()];
    graph.GeometryGraph.Edges.Add(new Microsoft.Msagl.Core.Layout.Edge(source, target));
}
  1. Then I create my layout settings. I've tried changing properties on the settings to see if they produce different positions
var settings = new SugiyamaLayoutSettings
{
    Transformation = PlaneTransformation.Rotation(Math.PI / 2),
    EdgeRoutingSettings = { EdgeRoutingMode = Microsoft.Msagl.Core.Routing.EdgeRoutingMode.Spline }
};

// Tested these out but they didn't work
settings.MinimalHeight = 700;
settings.MinimalWidth = 1300;
settings.NodeSeparation = 200;

var llayout = new LayeredLayout(graph.GeometryGraph, settings);
llayout.Run();
  1. Then I get my custom nodes (from a dictionary lookup) and set the positions from the GeometryGraph nodes:
foreach(var node in graph.GeometryGraph.Nodes)
{
    var myNode = myGraphNodeMap[node.UserData.ToString()];
    myNode .x = (int)node.Center.X * 100;
    myNode .y = (int)node.Center.Y* 100;
}

Can someone point me in the right direction? What am I doing wrong?

As an aside, how would you create edges that curve around a node?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied construction and position-reading sequence around Microsoft.Msagl.Core.Layout.Node, GeometryGraph, SugiyamaLayoutSettings, and LayeredLayout.Run(). Reproduce the overlapping positions, then determine what correction is required and how curved edges around nodes should be handled. Done means the example yields distinct node positions and addresses the edge-routing question.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.