Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Possible solution for hierarchical design

See original GitHub issue

Issue Description

Hi, after last update I would like to point out one possible solution for hierarchical design but I would need your help. I found really good tutorial here:

Here are the steps I took: 1.Changed diagram.ts a) import * as _ from ‘lodash’; b)

initCola(): any { // eslint-disable-line @typescript-eslint/no-explicit-any return cola.d3adaptor() .avoidOverlaps(true) .handleDisconnected(false) .symmetricDiffLinkLengths(100) .linkDistance(100) .size([this.options.width, this.options.height]); }

c) inside render function I added this `const levelGroups = _.groupBy(nodes, “level”); console.log(levelGroups)
for (const level of Object.keys(levelGroups)) { const nodeGroup = levelGroups[level]; const constraint = { type: “alignment”, axis: “y”, offsets: [], }; let prevNodeId = “none”; for (const node of nodeGroup) { constraint.offsets.push({ node: _.findIndex(nodes, (d) => ===, offset: 0, });

              if (prevNodeId !== "none") {
                console.log(_.findIndex(nodes, (d) => === prevNodeId));
                console.log(_.findIndex(nodes, (d) => ===;
                  axis: "x",
                  left: _.findIndex(nodes, (d) => === prevNodeId),
                  right:_.findIndex(nodes, (d) => ===,
                  gap: 50,
              prevNodeId =;

d) in node.ts I added level property in NodeDataType - level: number, in Node Class - public level: number; in constructor - this.level = data.level;

e) in package.json in dependencies I added@types/lodash”: “^4.14.168”, “lodash”: “^4.17.20”,

JSON here - you can see I added level property: { "nodes": [ { "level":1, "name": "testPERMANENT-", "meta": { "tenant-ip": "" }, "icon": "/static/images/router.png" }, { "level":1, "name": "testPERMANENT-", "meta": { "tenant-ip": "" }, "icon": "/static/images/router.png" }, { "level":2, "name": "INTERNET", "icon": "/static/images/router.png" }, { "level":3, "name": "AZ1-testpermanent-123-muc-vpn1", "meta": { "name": "vpn1" }, "icon": "/static/images/router.png" }, { "level":3, "name": "AZ2-testpermanent-123-muc-vpn2", "meta": { "name": "vpn2" }, "icon": "/static/images/router.png" }, { "level":4, "name": "AZ1-testpermanent-muc-rs1", "meta": { "name": "rs1" }, "icon": "/static/images/router.png" }, { "level":4, "name": "AZ1-testpermanent-muc-rs2", "meta": { "name": "rs2" }, "icon": "/static/images/router.png" }, { "level":4, "name": "AZ2-testpermanent-muc-rs3", "meta": { "name": "rs3" }, "icon": "/static/images/router.png" }, { "level":4, "name": "AZ2-testpermanent-muc-rs4", "meta": { "name": "rs4" }, "icon": "/static/images/router.png" }, { "level":5, "name": "" }, { "level":5, "name": "" }, { "level":6, "name": "POD1-FCIPOCLEAF101", "meta": { "name": "FCIPOCLEAF101" }, "icon": "/static/images/router.png" }, { "level":7, "name": "POD1-FCIPOCLEAF102", "meta": { "name": "FCIPOCLEAF102" }, "icon": "/static/images/router.png" }, { "level":6, "name": "POD2-FCIPOCLEAF202", "meta": { "name": "FCIPOCLEAF202" }, "icon": "/static/images/router.png" }, { "level":7, "name": "POD2-FCIPOCLEAF201", "meta": { "name": "FCIPOCLEAF201" }, "icon": "/static/images/router.png" } ], "links": [ { "source": "", "target": "AZ1-testpermanent-muc-rs1" }, { "source": "", "target": "AZ1-testpermanent-muc-rs2" }, { "source": "", "target": "POD1-FCIPOCLEAF102" }, { "source": "", "target": "POD1-FCIPOCLEAF101" }, { "source": "", "target": "POD2-FCIPOCLEAF201" }, { "source": "", "target": "POD2-FCIPOCLEAF202" }, { "source": "", "target": "AZ2-testpermanent-muc-rs3" }, { "source": "", "target": "AZ2-testpermanent-muc-rs4" }, { "source": "", "target": "POD1-FCIPOCLEAF102" }, { "source": "", "target": "POD1-FCIPOCLEAF101" }, { "source": "", "target": "POD2-FCIPOCLEAF201" }, { "source": "", "target": "POD2-FCIPOCLEAF202" }, { "source": "INTERNET", "target": "AZ1-testpermanent-123-muc-vpn1" }, { "source": "INTERNET", "target": "AZ2-testpermanent-123-muc-vpn2" }, { "source": "INTERNET", "target": "testPERMANENT-" }, { "source": "INTERNET", "target": "testPERMANENT-" }, { "source": "", "target": "AZ1-testpermanent-123-muc-vpn1" }, { "source": "", "target": "AZ2-testpermanent-123-muc-vpn2" } ] }

I think it works but not 100% because in the link I provided the generated graph is topdown but for example here LEVEL 1 is displayed at the bottom. And for example if I have groups, one node is displayed at the same level even though its one level lower. So I think it has to do something with groups and constraints.

JSON to image below: vpns are level 1 internet is level 2 etc. but if you look at LEAFS which are aligned with RS this should not be like that because they have different levels but grouping is a problem maybe


you can see without groups it works better but still not great image

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:17 (6 by maintainers)

github_iconTop GitHub Comments

marhynocommented, Mar 5, 2021

By the way, in your diagram mentioned here, do three groups overlap each other at the bottom, don’t they?

Hi, yes they overlap only because I used both grouping and inner groups. This could also be solvable by changing behavior slightly be adding margin so we can see header of groups

Besides that, we need to examine the magic number 50, 50, 50 is reasonable for other layouts. Or we should make them configurable maybe.

Yeah I did not test it with higher or lower numbers

codeoutcommented, Mar 5, 2021

Thanks! This is awesome 🎉

So I think you can include option into Diagram class

Yes, that’s the last thing we have to do. I’d like to introduce a switch to plug setCola stuff into the original inet-henge, so that users can choose expected behavior - note that injecting constraints will cause extra CPU load in each calculation tick.

Besides that, we need to examine the magic number 50, 50, 50 is reasonable for other layouts. Or we should make them configurable maybe.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Achieve maximum performance with a hierarchical design flow
With a hierarchical design flow, these tools allow you to reduce the number of iterations spent running PAR (Place And Route) and then...
Read more >
Topology Planning and Hierarchical Design - Zuken EN
Therefore, topology planning is an important part of managing the placement of systems and sub-systems. The hierarchical design is a top-down design approach...
Read more >
Advantages of Hierarchical Block Diagrams and Schematic ...
Hierarchical Structure encourages team design. With the ability to easily add block symbols that point to different schematic designs, multiple ...
Read more >
Hierarchical Design for VLSI - CaltechCONF
This paper describes the hierarchical design process for. VLSI circuits and discusses the ... One possible solution is to avoid the mapping problem...
Read more >
What is Hierarchical Network Design? - Auvik Networks
A hierarchical design separates a network into distinct layers, where each layer has a series of functions that define its role in the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found