• 0
XDskynet

Graph in Vertex

Question

Hi,

 

to begin with: Thank you for GraphX! I used it already for two mini tools and it just works so fine!!!

 

Now, I am about to create a third tool. In that tool, some graph hierarchy should be included. There are about 10 graphs with about 100 vertices each.

The goal is to draw a top level graph with that 10 vertices, 1 for each graph.

 

Then, I want to provide 2 options:

(Black boxes = zoomcontrols)

 

1. Image:

The user should be able to click on 2 of that 10 vertices. In a second and third zoomcontrol (possibly contained by 2 vertices in an underlying zoomcontrol... would be a graph in a vertex then), the two graphs are shown next to eachother and the edges which exist between that 2 graphs are shown. The new zoomcontrols also can be 1 instead of 2, but the clear seperation somehow has to be there (a line would be totaly awesome).

 

post-270-0-17766500-1458316059_thumb.png

 

2. and 3. Image:

The user should be able to click on a vertex or two of them and these vertices are replaced by their containing graphs.

 

post-270-0-93072100-1458316137_thumb.png

post-270-0-76797200-1458316146_thumb.png

 

Are these things possible with GraphX? What are the steps you would recommend? Are there any things already implemented? Which things do I need to implement by myself at a minimum?

... and a 1000 more questions... :D

 

Greetings,

XDskynet

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Hello, here are some thoughts i have about the task

 

a) There are two modes available. 1 - you set the bounds and lay out the graph inside, 2 - you lay out graph and bounds are calculated automatically using top left and bottom right vertices.

b ) You don't have to use different graphareas and can try solve the task by custom layout algorithm. Take the grouped graph algorithm as the base and modify it to be able to layout different vertex groups as you need (mode 1 or 2 from above). E.g. you set the strict border size for lower left and right graphs.

c) For pic 2 and 3 you can try to:

 - Hide group borders

 - Hide/remove vertices from the lower parts or in case of 3 the ones you want to remove

 - Use ZoomControl::ZoomToFill on the remaining graph (upper one)

d) You have the border size rectangles so you can try to hook to vertex position change event or customize DragBehavior logic to implement the check for vertices to not to go outside of the known boundaries,

Share this post


Link to post
Share on other sites
  • 0

Hello! Sorry for late response, i was quite busy recently.

 

1. You're talking about complex stuff :) You can try to distinct vertex groups by using the grouped graph algorithm (may require some tweaks). This way you'll know the vertex group boundaries and will be able to draw the border around them.

2/3. I don't know how to easily implement this without the graph relayout. With relayout it is quite simple, you just have to modify the Graph by replacing the vertex by its "containing graph" to incorporate into the core Graph and then relayout.

Share this post


Link to post
Share on other sites
  • 0

Hi,

 

thanks a lot for your help!

 

to 1.:

I checked the grouped graph algorithm example in your showcase and this is already really close to what I wish to have.

This is how I understand what you suggested:

- use 1 zoomcontrol with its grapharea for the upper graph

- use 1 zoomcontrol with its grapharea for the two graphs below

- set one graph to group 1 and the other graph to group 2

- draw a box around group 1 and a box around group 2

 

This leaves only the following to think about:

a) in your showcase, the size of the rectangle border is preset. If I want to scale it with the number of vertices of my graph, I have to find a scaling by myself I guess?

b ) in your showcase, the groups are layouted and then the rectangle borders are drawn around it. However, in image 1 from above, I want to restrict the layouting to the given area in the lower left part for group 1 and lower right part for group 2. Basically, I want to set the rectangle borders and then layout the graph inside it. This itself, then, could be solved by dividing the zoomcontrol or grapharea in 2 parts (maybe give the bigger graph 66% and the smaller one 33%), layouting the group 1 in the one area and group 2 in the other and finally only a vertical line is needed to complete image 1 from above. Is there a way to preset the position of the areas for the groups or a similar way of achieving image 1?

c) for image 2: A complete relayouting destroys the visual perception of the graph, I guess. So, is there a way to minimize the relayouting... maybe partial relayouting or only push the vertices, which are close to the new "exploded" graph, a bit away to gain space for the new graph? Another possible way came to my mind, but for this I need to know more on b ): I could relayout the whole graphs as groups, draw border "over" each group to hide them / to pack them into a single node (the border) and then on click remove the border (and set some edges and stuff). The problem however is, that I need edges to the border which kind of is a totally different thing then. Buuut, I could use a zoomcontrol/grapharea inside a vertex, can??t I?

d) how do I restrict the "Drag" to the area of such a border around a group?

 

Greetings,

XDskynet

Share this post


Link to post
Share on other sites
  • 0

Hi, I'm using your library for one of my projects and first of all I would like to thank you for the very good library provided.

 

I your Showcase WPF application you have also created a Grouped layout so that some vertex can be grouped in a limited space and over the graphic area you rendered a rectangle for the group.

 

I would like to use the same grouped layout and add some features I need:

- each group can be dragged

- each group can be collapsed to an edge (optional)

 

Can you please suggest me how I can use your library / code to make the groups draggable?

 

Thank you,

 

Luca

Share this post


Link to post
Share on other sites
  • 0

Hi, I'm using your library for one of my projects and first of all I would like to thank you for the very good library provided.

 

I your Showcase WPF application you have also created a Grouped layout so that some vertex can be grouped in a limited space and over the graphic area you rendered a rectangle for the group.

 

I would like to use the same grouped layout and add some features I need:

- each group can be dragged

- each group can be collapsed to an edge (optional)

 

Can you please suggest me how I can use your library / code to make the groups draggable?

 

Thank you,

 

Luca

This is tricky. Group background itself is a simple border, so you can add some mouse handling events for it and store a link that will point that this particular Border is for particular vertex group. So when you drag your Border you can iterate through related vertices and translate them to new coordinates according to the dragged Border. This approach will require a lot of coordinates calculations.

 

As of collapseble groups you can try to implement custom Filter which will hide/show group vertices and add/remove an edge instead of them.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now