East ports are forced to be placed on West side of the node

[edwingamboa]

I use klayjs-d3 0.4.1. and I have a problem with placement of East ports. It occurs with a KGraph, which root node has West and East Ports. But if the East ports are not connected to any other ports and the other ports are connected to other ports, then the East ports are placed on West side of the node. Like in the following image:

Checking the properties of the port, after klay.d3kgraph() has finished, I realized that the de.cau.cs.kieler.portSide property has the wrong value, though portSide side was correctly defined:

{
  "id": "cEast_test-compound-2_output",
  "properties": {
    "portSide": "EAST",
    "de.cau.cs.kieler.portSide": "WEST"
  },
  "labels": [
    {
      "text": "cEast",
      "width": 35,
      "height": 10,
      "x": -38,
      "y": 13
    }
  ],
  "height": 10,
  "description": "-",
  "type": "number",
  "x": 0,
  "y": 40,
  "width": 0
}

However if I remove the dToa edge from the graph above, the node is correctly placed:

The initial graph with the problem is:

{
  "id": "root",
  "children": [
    {
      "id": "test-compound-2",
      "labels": [
        {
          "text": "<<test-compound-2>>",
          "width": 190,
          "height": 18,
          "id": "ArtifactId"
        },
        {
          "text": "",
          "width": 0,
          "height": 18,
          "id": "MemberId"
        }
      ],
      "width": 190,
      "height": 79,
      "ports": [
        {
          "id": "d_test-compound-2_input",
          "properties": {
            "portSide": "WEST"
          },
          "labels": [
            {
              "text": "d",
              "width": 7,
              "height": 10
            }
          ],
          "height": 10,
          "description": "-",
          "type": "number"
        },
        {
          "id": "cEast_test-compound-2_output",
          "properties": {
            "portSide": "EAST"
          },
          "labels": [
            {
              "text": "cEast",
              "width": 35,
              "height": 10
            }
          ],
          "height": 10,
          "description": "-",
          "type": "number"
        }
      ],
      "properties": {
        "portConstraints": "FIXED_SIDE",
        "portLabelPlacement": "OUTSIDE",
        "nodeLabelPlacement": "V_TOP H_CENTER",
        "portAlignment": "BEGIN",
        "portSpacing": 11,
        "borderSpacing": 40
      },
      "children": [
        {
          "id": "elementary1",
          "labels": [
            {
              "text": "<<test-elementary-1>>",
              "width": 210,
              "height": 18,
              "id": "ArtifactId"
            },
            {
              "text": "elementary1",
              "width": 110,
              "height": 18,
              "id": "MemberId"
            }
          ],
          "width": 210,
          "height": 104,
          "ports": [
            {
              "id": "a_elementary1_input",
              "properties": {
                "portSide": "WEST"
              },
              "labels": [
                {
                  "text": "a",
                  "width": 7,
                  "height": 10
                }
              ],
              "height": 10,
              "description": "-",
              "type": "number"
            },
            {
              "id": "a_elementary1_output",
              "properties": {
                "portSide": "EAST"
              },
              "labels": [
                {
                  "text": "a",
                  "width": 7,
                  "height": 10
                }
              ],
              "height": 10,
              "description": "-",
              "type": "number"
            },
            {
              "id": "bEast_elementary1_output",
              "properties": {
                "portSide": "EAST"
              },
              "labels": [
                {
                  "text": "bEast",
                  "width": 35,
                  "height": 10
                }
              ],
              "height": 10,
              "description": "-",
              "type": "number"
            }
          ],
          "properties": {
            "portConstraints": "FIXED_SIDE",
            "portLabelPlacement": "INSIDE",
            "nodeLabelPlacement": "V_TOP H_CENTER",
            "portAlignment": "BEGIN",
            "portSpacing": 11,
            "borderSpacing": 12
          }
        }
      ]
    }
  ],
  "edges": [
    {
      "id": "dToa",
      "labels": [
        {
          "text": "dToa",
          "width": 28,
          "height": 10
        }
      ],
      "source": "test-compound-2",
      "sourcePort": "d_test-compound-2_input",
      "target": "elementary1",
      "targetPort": "a_elementary1_input"
    }
  ]
}

And the initial options:

var layouter = klay.d3kgraph()
          layoutHierarchy: true,
          intCoordinates: true,
          edgeRouting: 'ORTHOGONAL',
          nodeLayering: 'NETWORK_SIMPLEX',
          nodePlace: 'BRANDES_KOEPF',
          crossMin: 'LAYER_SWEEP',
          algorithm: 'de.cau.cs.kieler.klay.layered'
    });

[uruuru]

Looks like an issue with the layoutHierarchy: true option. We'll investigate.

[le-cds]

Since this issue is not JS-specific, I've opened up an ELK ticket to track it.

[le-cds]

Should be fixed in the ELK code. @uruuru can comment on how this fix may find its way into the klayjs code base.

[uruuru]

The fix probably wont make it into klayjs until we migrated to ELK.