Position of DotElements in InductiveVisualMiner Panel

makbn

Hi all, I need to know that how each DotElement like LocalDotNode and LocalDotEdge get X and Y position on the screen?

what I found is a Log file convert to an IvMEfficientTree after creating InductiveVisualMinerState and tree, pass them to an InductiveVisualMinerPanel that has a graph panel.

graph panel consists of Elements, I'm trying to find a helper class that assigns a position to each one of this element but I can't find it, I need to change the way that nodes of Process Tree draw in the panel and change the position of each node of tree, can anybody help me?

kfgz087

Hi makbn,

I already asked my colleague who made this plugin to answer your question. Please wait for a while.

sjjleemans

=== the short answer ===
If you want to get the position of node in the IvM panel, use DotToken2GraphVizToken.getCenter(node, state.getSVGDiagram()).

The layouting of the graphs is done by GraphViz, and is highly customisable. For instance, you can change the horizontal and vertical distance between nodes independently. I would suggest to have a look at whether there is a GraphViz option that does what you want, as this is by far the easiest (from the back of my head: you can even fix nodes on (x,y) coordinates and have the rest of the graph computed around the fixed nodes...)
If you want to set the position of a node in the IvM panel, be prepared to dive into SVG code and manually re-route edges using bezier-curves.

=== the long answer ===
LocalDotElements are the nodes and edges of the graph, so they are very abstract.
These nodes and edges are layouted as a graph by GraphViz. The result of this step is an SVG-image.
This svg-image is what you need, as in this image, each LocalDotNode and LocalDotEdge correspond to a group of SVG elements, which can be freely edited.
Given an LocalDotNode or LocalDotEdge, you can obtain the SVG element using the static method DotPanel.getSVGElementOf(image, node).
(you can get the image from state.getSVGDiagram())

It will require some puzzling, but you can do whatever you want with the SVGElement that you obtain with this method.
Once you are done updating the SVG, you can display it using panel.getGraph().changeDot(state.getDot(), state.getSVGDiagram(), true);
(please note that this last step needs to be on the main thread).

Hope this helps

makbn

sjjleemans said:

=== the short answer ===
If you want to get the position of node in the IvM panel, use DotToken2GraphVizToken.getCenter(node, state.getSVGDiagram()).

The layouting of the graphs is done by GraphViz, and is highly customisable. For instance, you can change the horizontal and vertical distance between nodes independently. I would suggest to have a look at whether there is a GraphViz option that does what you want, as this is by far the easiest (from the back of my head: you can even fix nodes on (x,y) coordinates and have the rest of the graph computed around the fixed nodes...)
If you want to set the position of a node in the IvM panel, be prepared to dive into SVG code and manually re-route edges using bezier-curves.

=== the long answer ===
LocalDotElements are the nodes and edges of the graph, so they are very abstract.
These nodes and edges are layouted as a graph by GraphViz. The result of this step is an SVG-image.
This svg-image is what you need, as in this image, each LocalDotNode and LocalDotEdge correspond to a group of SVG elements, which can be freely edited.
Given an LocalDotNode or LocalDotEdge, you can obtain the SVG element using the static method DotPanel.getSVGElementOf(image, node).
(you can get the image from state.getSVGDiagram())

It will require some puzzling, but you can do whatever you want with the SVGElement that you obtain with this method.
Once you are done updating the SVG, you can display it using panel.getGraph().changeDot(state.getDot(), state.getSVGDiagram(), true);
(please note that this last step needs to be on the main thread).

Hope this helps

first thanks for your explanation, it's really helped me to understand the relationship between each Dot element and final generated diagram! but I have a problem with this part of your answer:

from the back of my head: you can even fix nodes on (x,y) coordinates and have the rest of the graph computed around the fixed nodes...)
If you want to set the position of a node in the IvM panel, be prepared to dive into SVG code and manually re-route edges using bezier-curves.

this is exactly what I want! I want to set a fixed x and y coordinate to each node! I found that final Dot convert to a string and each Element has a list of options that I can set my desired positions on this list :

digraph G {
nodesep="0.25";
rankdir="LR";
compound="true";
ranksep="0.50";
"eab378b85-58cd-4cbc-93b1-ed4bfab21726" [label="", id="eab378b85-58cd-4cbc-93b1-ed4bfab21726",fillcolor="#80ff00",shape="circle",width="0.2",style="filled"];
"ea08f5c10-406d-4225-b16e-2ab35fe7d9c1" [label="", id="ea08f5c10-406d-4225-b16e-2ab35fe7d9c1",fillcolor="#E40000",shape="circle",width="0.2",style="filled"];
"e0a80a05d-d67f-44fb-a622-3cfe4145eee1" [label="", id="e0a80a05d-d67f-44fb-a622-3cfe4145eee1",shape="circle",width="0.05"];
"e5878c701-eb01-496c-8bd6-0c14408fbf79" [label="Create Purchase Requisition
608", id="e5878c701-eb01-496c-8bd6-0c14408fbf79",fillcolor="#5e5eff",shape="box",fontsize="12",fontcolor="#ffffff",style="rounded,filled"];
"e8cf32418-9603-4ece-9b8b-e2d09350d853" [label="", id="e8cf32418-9603-4ece-9b8b-e2d09350d853",shape="circle",width="0.05"];
"ec3af6627-b79d-4565-8767-712ceaec382a" [label="", id="ec3af6627-b79d-4565-8767-712ceaec382a",shape="circle",width="0.05"];
"ea341cbf2-65f6-4e86-86f1-e8ff02a1c923" [label="", id="ea341cbf2-65f6-4e86-86f1-e8ff02a1c923",shape="circle",width="0.05"];
...

and I checkout GraphViz project from the repository, but in this module, I can't find any lines of code that set x,y for each node! its very complicated project I cant find this part of the code by debugging and tracing method calls, I would be thankful if you'd have some points about this and help me.

sjjleemans

GraphViz is a graph layouting algorithm, and it is included in ProM as a pre-compiled executable to avoid licensing issues. To add to the confusion, there is also a ProM package called GraphViz that simply wraps this executable. This ProM-package provides some object on which you can set properties. These properties are then converted into a large String (as you copied in your message), and this String is passed on to the GraphViz-binaries to be layouted as an SVG image. Hope that makes it a little bit more clear.

To fix nodes, I would suggest trying the following (obtained from https://stackoverflow.com/questions/5343899/how-to-force-node-position-x-and-y-in-graphviz)
- set a node option to fix the position: node.setOption("pos", "x,y!") with x, y being your coordinates
- change the graph's layouting engine to neato or fdp: dot.setOption("engine", "neato");

I never tried to do this, so I'm curious whether it works.

makbn

hi,
i followed your instructions and as you said i set neato (and fdp)as an engin option and set pos for each LocalDotNode here is my graphs result:

digraph G {
engine="neato";
nodesep="0.25";
rankdir="LR";
compound="true";
ranksep="0.50";
"ef94ce31f-364a-4dee-b1ad-88f2fa34c57d" [label="END", id="ef94ce31f-364a-4dee-b1ad-88f2fa34c57d",fillcolor="#80ff00",shape="circle",pos="20,5!",width="0.2",style="filled"];
"eb04119c6-cf9f-4c7c-a330-30022be7199f" [label="START", id="eb04119c6-cf9f-4c7c-a330-30022be7199f",fillcolor="#E40000",shape="circle",pos="390,353!",width="0.2",style="filled"];
"e8d5a0ad2-34f9-4c6b-aab1-5964d61e5628" [label="", id="e8d5a0ad2-34f9-4c6b-aab1-5964d61e5628",shape="circle",pos="321,462!",width="0.05"];...}

but generated graph view is not changed! I really don't know what should I do more to set the position of each element

makbn

how can i set -n flag?

sjjleemans

The ProM-graphviz package (specifically: the Dot2Image-class) now checks whether you change the engine to neato and updates accordingly; please update.
(today the svn version, tomorrow the nightly build)