Can you show the topology as a tree?

[happychen666]

[happychen666]

hey , friend .
Can you make the topology display in a hierarchical tree structure?
Can you customize the color and thickness of the line?
Thx very much.

[codeout]

Can you make the topology display in a hierarchical tree structure?

No, inet-henge doesn't support that style unfortunately.

Can you customize the color and thickness of the line?

Yes, css is available. Let's say we have a json below:

{
  "nodes": [
    { "name": "POP1-A" },
    { "name": "POP1-B" },
    { "name": "POP2-A", "icon": "https://inet-henge.herokuapp.com/images/router.png" },
    { "name": "POP2-B", "icon": "https://inet-henge.herokuapp.com/images/router.png" },
    { "name": "POP3-A", "icon": "https://inet-henge.herokuapp.com/images/router.png" }
  ],

  "links": [
    { "source": "POP1-A", "target": "POP1-B",
      "meta": { "interface": { "source": "ge-0/{0,1}/0", "target": "Te0/{0,1}/0/0" }, "bandwidth": "20G" } },
    { "source": "POP2-A", "target": "POP2-B",
      "meta": { "interface": { "source": "ge-0/{0,1}/0", "target": "Te0/0/{0,1}/0" }, "bandwidth": "20G" } },
    { "source": "POP1-A", "target": "POP2-A",
      "meta": { "interface": { "source": "ge-0/0/1", "target": "Te0/0/0/1" }, "bandwidth": "10G" } },
    { "source": "POP1-B", "target": "POP2-B",
      "meta": { "interface": { "source": "ge-0/0/1", "target": "Te0/0/0/1" }, "bandwidth": "10G" } },
    { "source": "POP3-A", "target": "POP2-B"}
  ]
}

And apply this:

.group rect { opacity: 0.5; }
.node, .group rect { cursor: move; }

.group.pop1 rect { fill: #4ecdc4 !important; }
.node.pop1-a rect { fill: #c7f464 !important; }
.link.pop1-a-pop1-b { stroke: #c44d58; }

.link:hover { stroke-width: 5px; }
.link:hover ~ .path-label {
   font-weight: bold;
   visibility: visible !important;
}

<-- default style / customized style -->

[bharath-ravindranath]

@codeout all the css mentioned works great (thanks a lot for this project BTW).

In my use case, no matter what, I will always have a jumbled up topology and the labels/links are on top of one another (I have may fully meshed topologies with ~10 routers). So I am trying to make it easier to read the interface labels when hovering over the link. The stroke and font-weight font works. But I still have these issue:

• Links are on top of label (of course I can drag the endpoints connected. I am trying to come up with some alternatives)
• Label size cannot be increased (tried font-size, size etc)

If there is a way to make the below possible, it would be very helpful:

• When hovering over a link, increase the size of the label (interface)
• When hovering over a link, bring the label to the foreground (so that links are not on top of them)
• When hovering over a link, make a filled background for the label (if there are any links going under that label, it will not mess up the view)
• hover over label (I tried .path-label:hover and others, but did not work)
• If we can make all other labels invisible(except the one attached to the link/label) when hovering over a particular link (maybe a little farfetched??)

Please let me know your thoughts.

[codeout]

I'm trying to implement your list:

• When hovering over a link, increase the size of the label (interface)
• When hovering over a link, bring the label to the foreground (so that links are not on top of them)
• When hovering over a link, make a filled background for the label (if there are any links going under that label, it will not mess up the view)
• hover over label (I tried .path-label:hover and others, but did not work)
• If we can make all other labels invisible(except the one attached to the link/label) when hovering over a particular link (maybe a little farfetched??)

https://codeout.github.io/inet-henge/issue09.html

I'd think that we need js tricks for further implementation. Please give me some time before I answer your question.

[codeout]

@bharath-ravindranath Your topic sounds slightly different from this issue by the way. Could you open a new issue so that we can track the progress there?

[bharath-ravindranath]

@codeout , definitely. Opening a new request now