kieler/klayjs

bendPoints must be set for interactive layout

Closed this issue · 6 comments

Setting crossMin: "INTERACTIVE" seems to require every edge to have a bendPoints element. There's no reason for this. Not setting it is just as fine as an empty array.

Error:

type: 'de.cau.cs.kieler.klay.gwt.client.layout.UnsupportedJsonGraphException',
text: 'Invalid format of an edge's \'bendPoints\' property.',

Fixed in elkjs.

@uruuru - can you elaborate on the workaround? I set
'bendPoints': []
on the edge and it makes no difference. :-(

If using elkjs fixes this, is it a 'drop-in' replacement for klayjs in the context of cytospace? I can't find much info on that - options look very different etc.

You get exactly the same error? Can you post the whole edge definition?

elkjs's API changed slightly and most of the layout options got renamed (although usually only replacing the de.cau.cs.kieler prefix with org.eclipse.elk). I'm not familiar with the cytoscape integration.

Thanks for getting back to me! :-)

I have lots of edges but they all have the same structure as below. This was copied out of the console that I logged to:

[{
  bendPoints:[],
  data: {
    bendPoints:[],
    id:"b2f822e2-0e04-4f2e-b27d-7b84b2526485",
    source:"16", 
    target:"11"
  }
},
......]

I wasn't sure where 'bendPoints' should go so but it in 'data' and above.

I have a somewhat involved jsfiddle available here.

The problem I'm trying to solve is the randomization when I re-apply the layout after adding a node. (you'll be able to see this in the jsfiddle - I add a new node every 2 seconds). To get around this I'm trying to change the crossingMinimization to INTERACTIVE after the initial render in the hope this won't be random (from the docs it sounded like the nodes have to have an initial placement so that's why I don't start with this).

The problem line is #75. If you comment that back in it throws the exception in the OP.

From a quick look at the code I have the feeling that cytoscape may drop (or ignore) the empty bendPoints array. Guessing cytoscape's way to specify edges I would assume that this is (in theory) the correct way to specify the edge:

{
  data: {
    id:"b2f822e2-0e04-4f2e-b27d-7b84b2526485",
    source:"16", 
    target:"11",
    bendPoints: []
  }
}

However, as soon as layout is invoked internally by cytoscape, the bendPoints vanished. Maybe you can have a look at cytoscape's code that creates the layout graph for klay and what they do with the bendpoints there.

Ah... I think you are right. I looked at the cytoscape.js-klay adapter and it doesn't map the bendPoints property. I'm working on a cytoscape-elk adapter (forked from the klay one) which I know doesn't have the bendPoints issue. Thanks for your time, hopefully this will help someone else in the future.