Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Modeling » Eclipse Layout Kernel » [question] Layout doesn't calculate dimensions(Basic question about layout functionality)
[question] Layout doesn't calculate dimensions [message #1798977] Wed, 28 November 2018 09:18 Go to next message
Enrico Girotto is currently offline Enrico GirottoFriend
Messages: 6
Registered: November 2018
Junior Member
Hi, I try to use ELK to generate a layout for a dataflow.

Our system generate a dataflow using our engine, then we would like to transform it in an ELK graph so we can call a layout algorithm, generate ELK JSON in the server side, and show it in a web front end using Sprotty.

I saw a lot of example and try to generate something like the models showed in Model browser of ELK Graph Viewers page.
The question is: do the ELK layout method calculate the dimensions of labels and ports (and consequently node dimensions) too, or I need to specify it in ElkLabel/ElkPort object as a numeric value?
Our generate labels and ports haven't width or height and we would like to link the dimension of node with the dimension of text label and don't hardcode the dimension of port.

To resume what I do:

In the java class we register the LayoutMetadataProvider using LayeredMetaDataProvider, then we create the root node
ElkNode root = elk.createElkNode();
root.setIdentifier(id);
root.setProperty(CoreOptions.ALGORITHM, "elk.layered");
root.setProperty(LayeredOptions.HIERARCHY_HANDLING, HierarchyHandling.INCLUDE_CHILDREN);

Then we create the Graph using a bridge between our Dataflow definition and the ELK Graph data structure and then we call layout and generate the json
RecursiveGraphLayoutEngine engine = new RecursiveGraphLayoutEngine();
engine.layout(root, new BasicProgressMonitor());
// TODO these options are copied from the docs without thinking
json = ElkGraphJson.forGraph(root)
             .omitLayout(false)
             .omitZeroDimension(true)
             .omitZeroPositions(true)
	     .shortLayoutOptionKeys(false)
             .prettyPrint(true)
             .toJson();

When we build the graph, in each node we use this properties
node.setProperty(CoreOptions.NODE_SIZE_CONSTRAINTS, EnumSet.allOf(SizeConstraint.class));
node.setProperty(CoreOptions.NODE_LABELS_PLACEMENT, NodeLabelPlacement.outsideTopLeft());

The result of this is something like this (copied from generated json)
{
  "id": "G1",
  "children": [
    {
      "id": "N1",
      "labels": [
        {
          "text": "Region presence",
          "id": "N1l",
          "y": -5.0
        }
      ],
      "ports": [
        {
          "id": "N1_out1",
          "layoutOptions": {
            "org.eclipse.elk.port.side": "EAST"
          },
          "x": 84.0,
          "y": 27.0
        }
      ],
      "children": [
        {
          "id": "N1rr",
          "labels": [
            {
              "text": "k.first node",
              "id": "N1_k.rrl",
              "y": -5.0
            }
          ],
          "ports": [
            {
              "id": "N1_k.rr_out",
              "layoutOptions": {
                "org.eclipse.elk.port.side": "EAST"
              },
              "x": 20.0,
              "y": 10.0
            }
          ],
          "layoutOptions": {
            "org.eclipse.elk.nodeSize.constraints": "[PORTS, PORT_LABELS, NODE_LABELS, MINIMUM_SIZE]",
            "org.eclipse.elk.nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]",
            "org.eclipse.elk.resolvedAlgorithm": "Layout Algorithm: org.eclipse.elk.layered",
            "org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN"
          },
          "x": 12.0,
          "y": 17.0,
          "width": 20.0,
          "height": 20.0
        },
        {
          "id": "N1_k.rc",
          "labels": [
            {
              "text": "k.second node",
              "id": "N1_k.rcl",
              "y": -5.0
            }
          ],
          "ports": [
            {
              "id": "N1_k.rc_out",
              "layoutOptions": {
                "org.eclipse.elk.port.side": "EAST"
              },
              "x": 20.0,
              "y": 10.0
            },
            {
              "id": "N1_k.rc_in",
              "layoutOptions": {
                "org.eclipse.elk.port.side": "WEST"
              },
              "y": 10.0
            }
          ],
          "layoutOptions": {
            "org.eclipse.elk.nodeSize.constraints": "[PORTS, PORT_LABELS, NODE_LABELS, MINIMUM_SIZE]",
            "org.eclipse.elk.nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]",
            "org.eclipse.elk.resolvedAlgorithm": "Layout Algorithm: org.eclipse.elk.layered",
            "org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN"
          },
          "x": 52.0,
          "y": 17.0,
          "width": 20.0,
          "height": 20.0
        }
      ],
      "layoutOptions": {
        "org.eclipse.elk.nodeSize.constraints": "[PORT_LABELS]",
        "org.eclipse.elk.nodeLabels.placement": "[H_LEFT, V_TOP, OUTSIDE]",
        "org.eclipse.elk.resolvedAlgorithm": "Layout Algorithm: org.eclipse.elk.layered",
        "org.eclipse.elk.nodeSize.options": "[DEFAULT_MINIMUM_SIZE]",
        "org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN"
      },
      "x": 12.0,
      "y": 17.0,
      "width": 84.0,
      "height": 49.0,
      "edges": [
        {
          "id": "N1_k.rc_feed",
          "sources": [
            "N1_k.rr_out"
          ],
          "targets": [
            "N1_k.rc_in"
          ],
          "sections": [
            {
              "id": "s5",
              "startPoint": {
                "x": 32.0,
                "y": 27.0
              },
              "endPoint": {
                "x": 52.0,
                "y": 27.0
              }
            }
          ],
          "layoutOptions": {
            "org.eclipse.elk.junctionPoints": "()"
          }
        },
        {
          "id": "N1_k.rc_outlink",
          "sources": [
            "N1_k.rc_out"
          ],
          "targets": [
            "N1_out1"
          ],
          "sections": [
            {
              "id": "s6",
              "startPoint": {
                "x": 72.0,
                "y": 27.0
              },
              "endPoint": {
                "x": 84.0,
                "y": 27.0
              }
            }
          ],
          "layoutOptions": {
            "org.eclipse.elk.junctionPoints": "()"
          }
        }
      ]
    }
  ],
  "layoutOptions": {
    "org.eclipse.elk.nodeSize.constraints": "[]",
    "org.eclipse.elk.nodeLabels.placement": "[]",
    "org.eclipse.elk.resolvedAlgorithm": "Layout Algorithm: org.eclipse.elk.layered",
    "org.eclipse.elk.algorithm": "elk.layered",
    "org.eclipse.elk.nodeSize.options": "[DEFAULT_MINIMUM_SIZE]",
    "org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN"
  },
}

This is a little peace of the JSON with some manual modification. I attach the result drawn using the JSON Editor of ELK Graph Viewer page.
The results is the same that I obtain when I draw it in our web using Sprotty, so it seems that this part work.

I understand that this is a question about the basic functionality of ELK, but before writing here, I read a lot of documentation and tried different things without results, so any help will be much appreciated.

Thank!

Report message to a moderator

Re: [question] Layout doesn't calculate dimensions [message #1799044 is a reply to message #1798977] Thu, 29 November 2018 10:36 Go to previous messageGo to next message
Miro Spönemann is currently offline Miro SpönemannFriend
Messages: 78
Registered: March 2015
Location: Kiel, Germany
Member
Enrico Girotto wrote on Wed, 28 November 2018 10:18
Our system generate a dataflow using our engine, then we would like to transform it in an ELK graph so we can call a layout algorithm, generate ELK JSON in the server side, and show it in a web front end using Sprotty.

I saw a lot of example and try to generate something like the models showed in Model browser of ELK Graph Viewers page.
The question is: do the ELK layout method calculate the dimensions of labels and ports (and consequently node dimensions) too, or I need to specify it in ElkLabel/ElkPort object as a numeric value?
Our generate labels and ports haven't width or height and we would like to link the dimension of node with the dimension of text label and don't hardcode the dimension of port.


No, that's something that ELK cannot do because the dimensions of labels depends on how they are actually rendered in the web frontend, which includes evaluating CSS styles etc.

The good news is that Sprotty has a built-in solution for this! You'll find some documentation for it in the Wiki of the old Sprotty repository.

Report message to a moderator

Re: [question] Layout doesn't calculate dimensions [message #1799052 is a reply to message #1799044] Thu, 29 November 2018 12:21 Go to previous messageGo to next message
Enrico Girotto is currently offline Enrico GirottoFriend
Messages: 6
Registered: November 2018
Junior Member
Thank you very much for answer!
Before seeing it, I find a test class in elk code that compute label size to estimate dimension, and the result was not too bad but I know that the solution is horrible.

If I change the `needsClientLayout` option to true, the result is that nodes have correct dimensions to contain labels, but nodes positions and ports seems ignore it (I attach a sample).

If you see the attachment, the most internal nodes, have the correct dimension, but the node position and ports are positioned like the node has minimum width (if I copy the ElkJson in the ELK graph viewer, the dimension of nodes is that)

The code that I use for the elk-to-sprotty-javascript-bridge is a "selection" of your "Elk Graph view" one.

Have you some idea or indication to understand better the way how this work?

Report message to a moderator

Re: [question] Layout doesn't calculate dimensions [message #1799077 is a reply to message #1799052] Thu, 29 November 2018 14:24 Go to previous messageGo to next message
Miro Spönemann is currently offline Miro SpönemannFriend
Messages: 78
Registered: March 2015
Location: Kiel, Germany
Member
That's hard to say without seeing / debugging the code. I would set breakpoints in the server and client code to find out at which point the layout differs from the expected result. Follow the documentation I provided above to understand the general control flow.

Report message to a moderator

Re: [question] Layout doesn't calculate dimensions [message #1799088 is a reply to message #1799077] Thu, 29 November 2018 16:05 Go to previous messageGo to next message
Enrico Girotto is currently offline Enrico GirottoFriend
Messages: 6
Registered: November 2018
Junior Member
Thank Miro, I will try to do this.

It seems there are something strange in our way of graph creation because if needsClientLayout is true, the hierarchy of elements is different from the server one (the file attached explain what I want to say)

There are more sample of javascript elk->sprotty bridge in some other project?

Thank you very much for help and sorry for my heaviness

Report message to a moderator

Re: [question] Layout doesn't calculate dimensions [message #1799679 is a reply to message #1799088] Wed, 12 December 2018 10:08 Go to previous message
Miro Spönemann is currently offline Miro SpönemannFriend
Messages: 78
Registered: March 2015
Location: Kiel, Germany
Member
Enrico Girotto wrote on Thu, 29 November 2018 17:05
There are more sample of javascript elk->sprotty bridge in some other project?


You could check out this example: https://github.com/TypeFox/npm-dependency-graph

Report message to a moderator

Previous Topic:Tutorial incomplete
Next Topic:Mixing nodes to be adjusted with nodes with fixed positions in Elk Layered
Goto Forum:
  

[ Syndicate this forum (XML) ] [ RSS ]

Current Time: Thu Dec 07 17:54:24 GMT 2023

Powered by FUDForum. Page generated in 0.03128 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top

Sign up to our Newsletter

A fresh new issue delivered monthly