inet-henge
inet-henge copied to clipboard
Published
20 hours ago •
codeout
codeout
Changing Behavior of inline layout
- 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?
- 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.
I have an idea to resolve your problem. Could you share your json data with me so that I can reproduce it?
{
"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" }
}
}
]
}
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.
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.
{
"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" }
}
}
]
}
OK, things are likely more complicated than I thought. I'll dig into the calculation process.
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