Changing Behavior of inline layout

[JahedulAnowar]

1. I have three groups (might be more in future). If i don't connect nodes in-between the groups, they are just placed below one another.

Is there a way to place them side-by-side without adding extra connections?
Or maybe place the groups in a horizontal layout?

2. Also in each group, lines are overlapping one another.

But i was hoping to have a layout something similar to the following image without adding extra connections.

[codeout]

I have an idea to resolve your problem. Could you share your json data with me so that I can reproduce it?

[JahedulAnowar]

{
  "nodes": [
    {
      "name": "cassini-3",
      "group": "G1",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "dummy-sw-1",
      "group": "G1",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "dummy-sw-2",
      "group": "G2",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "dummy-sw-3",
      "group": "G2",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "dummy-sw-4",
      "group": "G3",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "dummy-sw-5",
      "group": "G3",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "8K-1",
      "meta": { "description": "This is a Node", "type": "Sender" },
      "type": "Sender",
      "group": "G3"
    },
    {
      "name": "8K-3",
      "meta": { "description": "This is a Node", "type": "Sender" },
      "type": "Sender",
      "group": "G1"
    },
    {
      "name": "IPT-10G2-SDI-1PT240142",
      "meta": { "description": "This is a Node", "type": "Sender" },
      "type": "Sender",
      "group": "G2"
    },
    {
      "name": "8K-2",
      "meta": { "description": "This is a Node", "type": "Sender" },
      "type": "Receiver",
      "group": "G3"
    },
    {
      "name": "8K-4",
      "meta": { "description": "This is a Node", "type": "Sender" },
      "type": "Receiver",
      "group": "G1"
    },
    {
      "name": "IPR-10G2-1PR240145",
      "meta": { "description": "This is a Node", "type": "Sender" },
      "type": "Receiver",
      "group": "G2"
    }
  ],
  "links": [
    {
      "source": "dummy-sw-4",
      "target": "8K-1",
      "meta": {
        "bandwidth": "30G",
        "intf-name": { "source": "Ethernet7", "target": "Ethernet7" }
      }
    },
    {
      "source": "cassini-3",
      "target": "8K-3",
      "meta": {
        "bandwidth": "10G",
        "intf-name": { "source": "Ethernet1", "target": "Ethernet1" }
      }
    },
    {
      "source": "dummy-sw-2",
      "target": "IPT-10G2-SDI-1PT240142",
      "meta": {
        "bandwidth": "20G",
        "intf-name": { "source": "Ethernet3", "target": "Ethernet3" }
      }
    },
    {
      "source": "dummy-sw-4",
      "target": "8K-2",
      "meta": {
        "bandwidth": "30G",
        "intf-name": { "source": "Ethernet8", "target": "Ethernet8" }
      }
    },
    {
      "source": "cassini-3",
      "target": "8K-4",
      "meta": {
        "bandwidth": "10G",
        "intf-name": { "source": "Ethernet2", "target": "Ethernet2" }
      }
    },
    {
      "source": "dummy-sw-2",
      "target": "IPR-10G2-1PR240145",
      "meta": {
        "bandwidth": "20G",
        "intf-name": { "source": "Ethernet4", "target": "Ethernet4" }
      }
    },
    {
      "source": "dummy-sw-5",
      "target": "8K-1",
      "meta": {
        "bandwidth": "30G",
        "intf-name": { "source": "Ethernet9", "target": "Ethernet9" }
      }
    },
    {
      "source": "dummy-sw-1",
      "target": "8K-3",
      "meta": {
        "bandwidth": "10G",
        "intf-name": { "source": "Ethernet2", "target": "Ethernet2" }
      }
    },
    {
      "source": "dummy-sw-3",
      "target": "IPT-10G2-SDI-1PT240142",
      "meta": {
        "bandwidth": "20G",
        "intf-name": { "source": "Ethernet5", "target": "Ethernet5" }
      }
    },
    {
      "source": "dummy-sw-5",
      "target": "8K-2",
      "meta": {
        "bandwidth": "30G",
        "intf-name": { "source": "Ethernet10", "target": "Ethernet10" }
      }
    },
    {
      "source": "dummy-sw-1",
      "target": "8K-4",
      "meta": {
        "bandwidth": "10G",
        "intf-name": { "source": "Ethernet1", "target": "Ethernet1" }
      }
    },
    {
      "source": "dummy-sw-3",
      "target": "IPR-10G2-1PR240145",
      "meta": {
        "bandwidth": "20G",
        "intf-name": { "source": "Ethernet6", "target": "Ethernet6" }
      }
    }
  ]
}

[codeout]

Thanks, I'll take a look and get back to you soon.

[codeout]

Hi, this is a known issue where inet-henge fails to calculate a completely symmetric diagram.

Could you try initialTicks option?

const diagram = new Diagram('#diagram', 'index.json', {
  positionCache: false, // Optional
  initialTicks: 10,
});
diagram.init('intf-name');

Your diagram gets stuck in the main iteration, but initialTicks can inject an initial offset into nodes before the main iteration starts.

[codeout]

I got this diagram in my environment.

[JahedulAnowar]

Thank you for reply. I also got similar diagram.
However, when i change the json to generate a bit more complex diagram, outcome is not quite to my requirement.
*json data for the diagram is in the next comment.

It seems as more nodes and connections are added, it fails to draw a symmetric diagram.

[JahedulAnowar]

{
  "nodes": [
    {
      "name": "cassini-3",
      "group": "G1",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "dummy-sw-1",
      "group": "G1",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "dummy-sw-2",
      "group": "G2",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "dummy-sw-3",
      "group": "G2",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "dummy-sw-4",
      "group": "G3",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "dummy-sw-5",
      "group": "G3",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "ocnos-30",
      "group": "G4",
      "meta": { "description": "This is a Switch", "type": "Transponder" },
      "icon": "../static/images/router.png"
    },
    {
      "name": "C8K",
      "meta": { "description": "This is a Node", "type": "Sender" },
      "type": "Sender",
      "group": "G1"
    },
    {
      "name": "A8K",
      "meta": {
        "description": "This is a Node",
        "type": "Sender"
      },
      "type": "Sender",
      "group": "G3"
    },
    {
      "name": "IPT-10G2-SDI-1PT240113",
      "meta": {
        "description": "This is a Node",
        "type": "Sender"
      },
      "type": "Sender",
      "group": "G4"
    },
    {
      "name": "IPT-10G2-SDI-1PT240107",
      "meta": {
        "description": "This is a Node",
        "type": "Sender"
      },
      "type": "Sender",
      "group": "G4"
    },
    {
      "name": "IPT-10G2-SDI-1PT240142",
      "meta": {
        "description": "This is a Node",
        "type": "Sender"
      },
      "type": "Sender",
      "group": "G2"
    },
    {
      "name": "D8K",
      "meta": { "description": "This is a Node", "type": "Sender" },
      "type": "Receiver",
      "group": "G1"
    },
    {
      "name": "B8K",
      "meta": {
        "description": "This is a Node",
        "type": "Receiver"
      },
      "type": "Receiver",
      "group": "G3"
    },
    {
      "name": "IPR-10G2-1PR240178",
      "meta": {
        "description": "This is a Node",
        "type": "Receiver"
      },
      "type": "Receiver",
      "group": "G4"
    },
    {
      "name": "IPR-10G2-1PR240133",
      "meta": {
        "description": "This is a Node",
        "type": "Receiver"
      },
      "type": "Receiver",
      "group": "G4"
    },
    {
      "name": "IPR-10G2-1PR240145",
      "meta": {
        "description": "This is a Node",
        "type": "Receiver"
      },
      "type": "Receiver",
      "group": "G2"
    }
  ],
  "links": [
    {
      "source": "cassini-3",
      "target": "C8K",
      "meta": {
        "bandwidth": "10G",
        "intf-name": { "source": "Ethernet1", "target": "Ethernet1" }
      }
    },
    {
      "source": "dummy-sw-4",
      "target": "A8K",
      "meta": {
        "bandwidth": "30G",
        "intf-name": { "source": "Ethernet7", "target": "Ethernet7" }
      }
    },
    {
      "source": "ocnos-30",
      "target": "IPT-10G2-SDI-1PT240113",
      "meta": {
        "bandwidth": "40G",
        "intf-name": { "source": "xe0", "target": "xe0" }
      }
    },
    {
      "source": "ocnos-30",
      "target": "IPT-10G2-SDI-1PT240107",
      "meta": {
        "bandwidth": "40G",
        "intf-name": { "source": "xe09", "target": "xe09" }
      }
    },
    {
      "source": "dummy-sw-2",
      "target": "IPT-10G2-SDI-1PT240142",
      "meta": {
        "bandwidth": "20G",
        "intf-name": { "source": "Ethernet3", "target": "Ethernet3" }
      }
    },
    {
      "source": "cassini-3",
      "target": "D8K",
      "meta": {
        "bandwidth": "10G",
        "intf-name": { "source": "Ethernet2", "target": "Ethernet2" }
      }
    },
    {
      "source": "dummy-sw-4",
      "target": "B8K",
      "meta": {
        "bandwidth": "30G",
        "intf-name": { "source": "Ethernet8", "target": "Ethernet8" }
      }
    },
    {
      "source": "ocnos-30",
      "target": "IPR-10G2-1PR240178",
      "meta": {
        "bandwidth": "40G",
        "intf-name": { "source": "xe04", "target": "xe04" }
      }
    },
    {
      "source": "ocnos-30",
      "target": "IPR-10G2-1PR240133",
      "meta": {
        "bandwidth": "40G",
        "intf-name": { "source": "xe13", "target": "xe13" }
      }
    },
    {
      "source": "dummy-sw-2",
      "target": "IPR-10G2-1PR240145",
      "meta": {
        "bandwidth": "20G",
        "intf-name": { "source": "Ethernet4", "target": "Ethernet4" }
      }
    },
    {
      "source": "dummy-sw-1",
      "target": "C8K",
      "meta": {
        "bandwidth": "10G",
        "intf-name": { "source": "Ethernet2", "target": "Ethernet2" }
      }
    },
    {
      "source": "dummy-sw-5",
      "target": "A8K",
      "meta": {
        "bandwidth": "30G",
        "intf-name": { "source": "Ethernet9", "target": "Ethernet9" }
      }
    },
    {
      "source": "ocnos-30",
      "target": "IPT-10G2-SDI-1PT240113",
      "meta": {
        "bandwidth": "40G",
        "intf-name": { "source": "xe1", "target": "xe1" }
      }
    },
    {
      "source": "ocnos-30",
      "target": "IPT-10G2-SDI-1PT240107",
      "meta": {
        "bandwidth": "40G",
        "intf-name": { "source": "xe08", "target": "xe08" }
      }
    },
    {
      "source": "dummy-sw-3",
      "target": "IPT-10G2-SDI-1PT240142",
      "meta": {
        "bandwidth": "20G",
        "intf-name": { "source": "Ethernet5", "target": "Ethernet5" }
      }
    },
    {
      "source": "dummy-sw-1",
      "target": "D8K",
      "meta": {
        "bandwidth": "10G",
        "intf-name": { "source": "Ethernet1", "target": "Ethernet1" }
      }
    },
    {
      "source": "dummy-sw-5",
      "target": "B8K",
      "meta": {
        "bandwidth": "30G",
        "intf-name": { "source": "Ethernet10", "target": "Ethernet10" }
      }
    },
    {
      "source": "ocnos-30",
      "target": "IPR-10G2-1PR240178",
      "meta": {
        "bandwidth": "40G",
        "intf-name": { "source": "xe05", "target": "xe05" }
      }
    },
    {
      "source": "ocnos-30",
      "target": "IPR-10G2-1PR240133",
      "meta": {
        "bandwidth": "40G",
        "intf-name": { "source": "xe12", "target": "xe12" }
      }
    },
    {
      "source": "dummy-sw-3",
      "target": "IPR-10G2-1PR240145",
      "meta": {
        "bandwidth": "20G",
        "intf-name": { "source": "Ethernet6", "target": "Ethernet6" }
      }
    }
  ]
}

[codeout]

OK, things are likely more complicated than I thought. I'll dig into the calculation process.

[JahedulAnowar]

Is there any update to this?

[codeout]

Still working on this issue.

After my investigation, it's unfortunately difficult to cover all topologies with a fixed custom parameter like initialTicks: 10. The best value depends on the outline of your changing network.

So, I'm currently working to introduce user-defined position hinting, something like a rule where "node dummy-sw-1 and 8K-3 must be placed horizontally".

ref: #27