Port-to-Port Edge Overlap

[JHERR1112]

I have created a simple graph in the ELK Demonstrators site as follows:

As you can see, I am creating 2 edges from n1.p1 to n2.p1. I expected there to be space between the edges, but they seem to overlap. Is there anyway we can apply space between the edges?

[uruuru]

You would have to use separate ports, or do not use ports at all.

[alexei-tilikin]

Hi, I have a question related to this one. For orthogonal edges, is it possible to let the edges only merge on the very last junction reaching the port, and not along most of the path?

In the example, I use a single port for all incoming edges on node n4. There are edges coming in from different layers, and they are heavily merged. I'm looking for a way to draw all these edges as separate lines, merging only the very last part they are approaching the target port.

[soerendomroes]

I cannot think of any option that does this. The only solution is to add separate ports. Have you tried to add multiple ports with the exact same fixed port position? For example like this.

[alexei-tilikin]

@soerendomroes, that's an interesting idea. I'll try that, thanks!

[alexei-tilikin]

Hmm, for some reason it's not working with v0.7.1 for me.

Tried converting all edges to use only ports. All ports are defined and have width=1 and x=1 (using JSON format). Tried 'FIXED_POS' and 'FIXED_ORDER' with index + portSide.

Keep getting this exception:

TypeError: Cannot read properties of null (reading 'x_0')
    at createExternalPortDummy (elkjs-rebundle.js:31846:45)
    at $transformHierarchyEdges (elkjs-rebundle.js:31075:25)
    at $transformHierarchyEdges (elkjs-rebundle.js:31065:20)
    at $process_1 (elkjs-rebundle.js:30912:3)
    at $doCompoundLayout (elkjs-rebundle.js:27852:3)
    at LayeredLayoutProvider.layout_2 [as layout] (elkjs-rebundle.js:28169:160)
    at $executeAlgorithm (elkjs-rebundle.js:61787:20)
    at $layoutRecursively (elkjs-rebundle.js:61877:5)
    at $layout_3 (elkjs-rebundle.js:61822:3)
    at layout_11 (elkjs-rebundle.js:73955:3)
    at Dispatcher.dispatch (elkjs-rebundle.js:73884:11)
    at Dispatcher.saveDispatch (elkjs-rebundle.js:73892:15)
    at elkjs-rebundle.js:73909:26

Any clue? I couldn't get any useful info about the port (which edge/node) during debugging.

The line it fails on:

informationAboutIt = portPosition.x_0;

portPosition is null. How can I define portPosition?

I have a hierarchical graph with hierarchyHandling='INCLUDE_CHILDREN' and the problem seems to happen only when there are nested nodes.

[soerendomroes]

Can you provide me with a minimal example via the ELK Demonstrator (Json)?

[alexei-tilikin]

I'll try preparing something later on. Thank you for the help.

[alexei-tilikin]

@soerendomroes here it is:

https://rtsys.informatik.uni-kiel.de/elklive/json.html?compressedContent=N4KABGBECWAmkC4oH1kCUDyGAqrIBpwoBjAC2gBtYAnAUwDtEwBtIiUCTqOJyegRgJtOkAA4B7agBcAzk1ZcuHRVxjwkkWvwQAFDGmwIMAVWxCVqgO5wppJv0IWRADyYBafgAZHTqBQCGAJ7iAK5SGKJS0OL0ckjKvlC0FADWAHQS0mkycLS8AMom2AAS5olJqRmSUmnQ9LC0rkiewioAvq2cHSoAuj5WNnZI-ACs3p2QpLTQAOakUvYATC1cbf1gCSI8GjPUosiC6xCQZJQ0DPKd7Fdb6lD0i2VOYtVxLDdKH4pqvFq6+oYAJIAOSe5Ug1lgtnsR18kCaYC8sOeAWCYQiURib025Qq6UyNRyDV4wIBpWRcOS+OqtXqjXsX1WjLA3V8fS+EMG9jGFOOU1m8yWKwsrK47JUkFRoXCkWisSYOJEVLS9HEDXy0AAXrQ0sQsVJqP46rJeABZEGA03GU3IfKAgBaAFEwaplar1VqdQBbOrQL0hL28AAUy28ngAlC6lZVRP5YLA6jNeMwpOJRABeAAs3moAqk6aRACNxFJU16s94KLQAGb5rw9SCdUUsojipKwGa0N4KTiKn4aLRRyAyULUYhdy7PP56AxGUyN3qwyBSfzUTsmpA9iXTgEIEELxQ9YSstuSoLSjFy7HCTSVfwUGaSaC2QMaVG0Ojwda39IJujETFGA0AARDAAHVQR8H80kNepxC9fJaFoO5+H4AB2KDlRkWNiETFU1VoYECPsTxxmOZV30-bIcLw91CIIgAhWgpEsJD6AAGSCD83n4ZZMMqbD-Fw+gZjSZDO0dDs8iQDCiGgwThNE8T6OJYYyLxaihLw5TJM7JiWLYzjAm4phZPIgSaJEqppB0aomHU6CCQAYX1Q1jTeSAADFAQADUdYDkH0YDHTQMpHOqABBChZnoL0GBqBpq38EIKAWDQnMdYFsBCsLlQJbJchJMlcosrSrL1L0JHoeKXMqmJ4qFfj0ko5C0kovCZANfwpFoGZAl4JyME8zzTQi4FkAAcTQCLigi00SuariqPa8rxGrasvX8egJsNUh-C9NqloY0J6iYTMmsO4yqOIQJiCrBi6H8FIOq6nq+t4YKdBKZBvLQfIzAulrYF1ahxBkHIRNNX0fU1bq5WyV7ev6jR2IigBNELbTAx1HR0BbLo-Vq6J0AJxzi+hCUR96NGBR1sDA-QAGlbUtHR2MdHz8aB-CGhJoTaHJmokoAN0kfIurzXSJyQA0QloQGlqJgi+bJ+K0kLdJlPFty5h6+hE14VnMAANUdW1sGmwEJuKbBafyfIucV4G9ViXJqFNAiKAwagGmoBHDTe5GoFJYL8mQMaAv8ibHQdzCpLQaUDY0MkMAmjBgQi9iwUmaAP1XMhAmKLbYGikTDeBJz2OMYLkCc4pAXY4C0Eyg8OjaIA

It actually works with the demonstrator, but when I use elkjs@0.7.1 from npm it fails wit hnow different exception:

Error: java.lang.IllegalStateException: NEdge must have a source and target NNode specified.
    at IllegalStateException_0.createError (elkjs-rebundle.js:7957:10)
    at IllegalStateException_0.initializeBackingError (elkjs-rebundle.js:7977:40)
    at IllegalStateException_0.Throwable_0 (elkjs-rebundle.js:7933:8)
    at IllegalStateException_0.RuntimeException_0 (elkjs-rebundle.js:7996:15)
    at new IllegalStateException_0 (elkjs-rebundle.js:11084:22)
    at $create_1 (elkjs-rebundle.js:20789:16)
    at $transformEdge_0 (elkjs-rebundle.js:52518:11)
    at NetworkSimplexPlacer$lambda$5$Type.accept_125 [as accept] (elkjs-rebundle.js:53029:3)
    at $lambda$0_1 (elkjs-rebundle.js:19175:14)
    at StreamImpl$FilterSpliterator$lambda$0$Type.accept_29 [as accept] (elkjs-rebundle.js:19203:3)
    at $tryAdvance (elkjs-rebundle.js:17082:14)
    at Spliterators$IteratorSpliterator_0.tryAdvance_2 [as tryAdvance] (elkjs-rebundle.js:17121:10)
    at StreamImpl$1.tryAdvance_12 [as tryAdvance] (elkjs-rebundle.js:19108:21)
    at StreamImpl$FilterSpliterator.tryAdvance_14 [as tryAdvance] (elkjs-rebundle.js:19189:39)
    at $forEachRemaining_0 (elkjs-rebundle.js:3237:22)
    at StreamImpl$FilterSpliterator.forEachRemaining_34 [as forEachRemaining] (elkjs-rebundle.js:17191:3)
    at $forEach_3 (elkjs-rebundle.js:18977:27)
    at $buildInitialAuxiliaryGraph (elkjs-rebundle.js:52187:3)
    at $process_70 (elkjs-rebundle.js:52455:3)
    at NetworkSimplexPlacer.process_67 [as process] (elkjs-rebundle.js:52657:3)
    at $hierarchicalLayout (elkjs-rebundle.js:27916:21)
    at $doCompoundLayout (elkjs-rebundle.js:27853:3)
    at LayeredLayoutProvider.layout_2 [as layout] (elkjs-rebundle.js:28169:160)
    at $executeAlgorithm (elkjs-rebundle.js:61787:20)
    at $layoutRecursively (elkjs-rebundle.js:61877:5)
    at $layout_3 (elkjs-rebundle.js:61822:3)
    at layout_11 (elkjs-rebundle.js:73955:3)
    at Dispatcher.dispatch (elkjs-rebundle.js:73884:11)
    at Dispatcher.saveDispatch (elkjs-rebundle.js:73892:15)

[alexei-tilikin]

I'm also reproducing the first exception I mentioned TypeError: Cannot read properties of null (reading 'x_0'). With only 2 edges here: https://rtsys.informatik.uni-kiel.de/elklive/json.html?compressedContent=N4KABGBECWAmkC4oH1kCUDyGAqrIBpwoBjAC2gBtYAnAUwDtEwBtIiUCTqOJyAc2oB7AK4AHZMUH0ALgENo9WtWQCR4gEwE2nSGUo0GTVly4cTXGPCT8hYiVLkKlK2+ICMW8xb1U6jJMZeptpBEJa89IKwtMgADJ6hFgDucNKkTG4ArLGEiRaktNB8pNIZ6gDMIV4Avrl5ZnncVlCR0ciadY2QKbBpGdmdeZAFRSVllY21VeYNQzzWrTEA7AldooLU0gDORtOhs41h81C0sHy0CMQM0s5uCIvIS8gAChhouACSAHKrh2E9fSQbkGf0gAA8Mjk9olIBRZABPETSDCiaTQKQ7JAHP4nCgAawAdOtNgStnBaLwvm9sAAJX443GE4nSAkKaIQoHQ0LVLnmHl-AC6INC3VS6SBA15OhGxVKQIqUv5oSFXNhCKRKLRGKY2PMkFo+IJiwAytAAF60AmSehbaTUeQyTFQACy3w+zoAqs7kMaPgAtACi9K8+sNolksFgCj4vGY0kEogAvAAWHLUUbSRNuHIAI0E0njAFsU7EBZAuUq+VUVXq4YjhMjUeibTq9qHCSbzZbrbb7QptrxXV93V6ff6g8KwgamRGo-QY9Y4wmS-h07Ks7n80WS2WqpWwFNgnrjrprrdg5BmU7AjNVSfTudLmflHdVHY3C9qcgMB7sMHkmKGSTjoHJgAAtNmwFhHWGpNtqWJSu2RIbCyZLRLwxo-rS-4mEhzKsvQ7JMLEFZ7IeXi6jo95nBcVwyLc9xRMsn7vN+v44f8gFAlBUCgRBUIwjBDaas2TqURY07ISSaEUtYmG-nSPFTmGKEEURSAkYk+5cNpYA1rhALimAWQCbhMpjPKEycEq+n6jR17aNi4TWA+tHPsgr6uB5F5bCI1BXA5QR2Y+dE3C+CBvu4LG4Fh5bmPpFhyNQ5wDgEbaRfYMgOs4GUeNW2jkewVTOScNFPvR4UPCswqQL5wj+bQgUhq55VhR5jFtE8rysbF1Y1UlKVNXqLWhQxVXRcg3xxSYAoFUQtlCY2WotghEmGrIFB8Bs0BpIWvB1kopy-EhUZ0MQy28AAIhgADqPx1Eh9qEYIhbGrQR1Am4SwPZJWzhsQ0ZGkxXxMZCplIQddCwKS-2A4sIPRAAQrQ0hJO99AADIIkoTpuOo4O-bD84Eq5AY0Uw31EEhf2yADxOuQjsnGQTho03TfAkzRZPnMjqPo1j8I4xTP2s0THPMs8KHESLTIoQAwhidoOqlUAAGIfAAGgGl3fmgl0BmgCR4ShACCFBFPQhbXAS0QAGayMIFBylAcsBl82AG0bkn4TJlLUopVOE7TgOSIW6yKDICth1I1xlCzhKQ6cBKQ4DvayDcfDwrwcsYKrqvOibXzIAA4mgJs0ibzpe4aifQynxOSLbtuFrI9DF-apCyIWyfY9QiMiIRTDJjLPeC1DVrwsQFC0IjdCyHiqdKxnWfWPrzy0sg6toMaf4j7XVpCFsZLzs6CjQIW5rp82pJL7Qme8BjJsAJoGz6N0BgGzzVwnvdJ4szxwiuFbGQN97TL14IjMuXx9bGmQAAaQwJ-VW39R6HWhj2ck1BnRMQoBgag0RqCgPTnfFeUAqQwOQIXHW2ti4BmNF7GiaAkTRl4P7DAxcMBfBNhjY65AlCyH8qQeENJW6wHNvOXg3w5YYw9PrZAcsaQfAxpdNAbtpo8mqEAA

[soerendomroes]

If you set your nodePlacement.strategy to something else than NETWORK_SIMPLEX it works and creates this drawing:

I guess the algorithm fails to put the port, which is created since the edge crosses a hierarchy boundary, on grp1 on the north side of the node and the network simplex algorithm cannot deal with that.

PS: You can embed links with [name](url)

[soerendomroes]

For your other problem, I suggest creating a ticket in ELK.

[alexei-tilikin]

OK, thank you. I was jumping between NETWORK_SIMPLEX and BRANDES_KOEPF for 'nodePlacement.strategy'. That might explain why I was getting two different exceptions. I'll file an issue for the second one.

[alexei-tilikin]

I found this ticket and it quite describes the problem I'm having: https://github.com/eclipse/elk/issues/754

Looks like it's going to be fixed in 0.8.0, right? I also managed to reproduce the exception directly in the demonstrator. In my original code I'm using a lot of default layoutOptions, and one of them is 'elk.portConstraints': 'FIXED_POS'. When this option is added to a nested group inside a group (group_1 in my example), the exception reproduces. Same for 'elk.portConstraints': 'FIXED_ORDER'.

Here: https://rtsys.informatik.uni-kiel.de/elklive/json.html?compressedContent=N4KABGBECWAmkC4oH1kCUDyGAqrIBpwoBjAC2gBtYAnAUwDtEwBtIiUCTqOJyAc2oB7AK4AHZACYCbTpDKUaDJqy5cOqrjHhJ+QscgCM0jZvlU6jJCpNqZNiFt71BsWsgAMx+5oDucAC6kTAYArO6E3pqktNB8pP7BEgDMdiYAvhGR6pHc2lDOrpJeOZB+sIHBYZkl0bHxiSk5Gaka2ZGOOgVuAOzF7aKC1P4Azsot9m05Djw6tLB8tAjEDP601IYIXcjdyAAKGGi4AJIAcn1TUGUVSAbVF1AAHsHh496QFACGAJ4i-hii-mggnooyQk3ukFoFAA1gA6AZDWHDOC0XgnA7YAAS5whULhCP8sOg9FcTxur3saQpGipFwAunc3lcgjcqtTZLU4gkbsl2bT7AyKe9vr9-oDgaCwOCNJCYbCugBlaAAL1osOIEv81A+xJGvAAsqcjvqAKr65AKo4ALQAojiZXj4R9YLBiXxeMx-IJRABeAAs4WodX8PoM4QARoJ-F6ALb+8IUWgAMxDYbp9tUsvxg38AGFNdrdZLIAAxI4ADRtABFkAcqza0BmuBT+TTUoKZZ8fsI-gCgSCmNKoI7FSq1RqQVqdfQ9TpDSdjWaLda7YzZI7RM7XfR3TpPd74-gg1zQxGo7HD4mU6f02vW2BmrYZTMSCs1oYcZACZLrK0hS-IXmRZlhnd8DAQAQRHEAw9gxWsTWwJtLgCFkwFuIUyTAABaMM100LtRT7CVB3ZLN4RzJEUV4BUMAQ7E8MzDcKOJUkmHcFtxkfEwh2mPJAIWJY33WcCth2fZDngxCGIcZlgmkx4mBwl43gInsxX7SUePXOUCUo1xqNorEkIcJjERY2hMPY7x7y4GywA7TNZNZZTM05eoeUaTh+Qc-jaB-GRwQ6YcgME0DhIgvRoM-YYRGoZZ-JsXzQtWcLIP0GDxNwQzIHbNdIH8D5qAWWcWHGXQoI-dsZC49hUiCpKQJSjZROi2L4rGRK5gExqwM2FwelgiTstyuqCqK2gSt-RiQp68LRMG44ziq2yiB81Te3FAcwRkMiPgoPhBmgQIY14Ls1jmPoyNdOhiE23gqwwAB1M5MjI7USUEGMFVoC6bgMbpXsdYZN2IN15X6k5+ueFyyLOuhYCREGwa6SHXAAIQmnwfvoAAZb41klAwJBhoGkZ3WEutoG0gKYAGiDI4GPlB8nKdR1EbhJuVGeZvgKaA6mFgx-wsYYPGvgJ2nAa5sneYJXYczYqXsyGfNJ0LGdizLSsazrBsvDIgkAEEKFiegYxWWFXCTD5hAobkoFzG0TmwPWlfIxFkX0nR0UOej6dJpmwY1GMBnoFZ8xD4EVkSTm4ThuZYThsHhinVY+C+XhcwwEsS31Q2TmQABxNBDcxQ39X1x144RpPyY1JMkxjD56EL7VSA+GNE-x6g0ZEEkmD9N3q-VL5iETNG6A+aFk9T2h0-um1dixZAyzQBUpP9uVh+IIRhmRHd9WJaAYxVD5NqRWf550HHDYATQbC1HptRfK637uE66XZPmWc2Zwv7U04Zx0GjEuJx6wKmQAAaQwIvEsr847vwRhOT2ax9T9QoBgagrhqD-zPnPIBUB0TgOQPnGs1ZC42gVJXICaBfhul4BiTEGBC4YBOIbHGl1yBrEKmQL4mJm6wBNjuXgpxcw4xNPWZAuZMRHBxlWNATs+hECpGkIAA

[soerendomroes]

No that is a different issue and seems to relate to cross hierarchy edges.

[alexei-tilikin]

I just the problem I'm facing with elkjs@next which points to 0.7.3-dev. The problem is still reproducing. Going to file a different ticket then.