nextui graph improvements

[hellt]

Ideas and issues

• make link blocks with link names (e1-1) aligned with the link line to avoid overlaying the labels
• alternatively, make link labels to disappear with a click of a button. When link labels are not displayed, make them visible when hover over the node or a link element
• make nextui a default template so that both --template and --static-dir can be omitted
• fix link tooltip to have a single line source and destination where source would be leaf1:e1-1.
• provide an option to define an icon per-node/kind. This can be done via extras field that we have for NodeDefinition.
• allow to set custom color per node/group
• explore if export to PNG is possible
• node tooltip doesn't fit long image URLs (demo) [fixed in Fix NextUI node tooltip to accommodate long image URLs. #834 ]
• add a field in the node tooltip that will open a web based ssh terminal to connect to the node directly

[hellt]

for "fix link tooltip to have a single line source and destination where source would be leaf1:e1-1" here is a prototype that can be used to achieve this

iDebugAll/devnet_marathon_endgame@4aeb72c

[ahmedalodhari]

• make link blocks with link names (e1-1) aligned with the link line to avoid overlaying the labels

Something like this?

• fix link tooltip to have a single line source and destination where source would be leaf1:e1-1.
• explore if export to PNG is possible

Great Ideas. I'll look into them

• provide an option to define an icon per-node/kind. This can be done via extras field that we have for NodeDefinition.
• allow to set custom color per node/group

Ideally, the graph options such as sortOrder, node icon, node color, etc. should be driven by the Clab configuration file. So, it would be nice if we can pass that info to the graph template.

• node tooltip doesn't fit long image URLs (demo)

Already fixed by #834

[hellt]

Something like this?

yes, they can still be in this nice rectangular shapes with rounded corners, just aligned with the angle the link line has. This, potentially, will remove clutter when a node has several links located close to each other

[asadarafat]

• options to draw overlay services that can be part of the clab.
  i made some prototype here, but struggling to make the links drawed on top of the group layer.
  @ahmedalodhari , maybe you coud give me some advice here to arrange elements Z-aligned...
  https://github.com/asadarafat/containerlab/blob/main/templates/graph/nextui/static/js/script.js

[ahmedalodhari]

@asadarafat, since the z-index of the SVG elements is define by the order they appear in the DOM (SVG 1.1 Spec), you have to reorder the <g> elements and put the GroupsLayer before the LinksLayer.

One way to do this is by using Node.insertBefore():

var link_layer_el = document.querySelectorAll('[data-nx-type="nx.graphic.Topology.LinksLayer"]')
var group_layer_el = document.querySelectorAll('[data-nx-type="nx.graphic.Topology.GroupsLayer"]')
var parent_el = link_layer_el[0].parentNode
parent_el.insertBefore(group_layer_el[0], link_layer_el[0])

[asadarafat]

Thanks @ahmedalodhari it works like magic 😄

[asadarafat]

Hi @ahmedalodhari, i would need your favor again to advice me on the following usecase:
supposed i have te following data/script https://github.com/asadarafat/containerlab/blob/main/templates/graph/nextui/static/js/script.js
i can get the following topology

however is seems the layout algorithm applied on all the node and it's makes the groups overlaped.
would it be possible to applied layout algorithm in selected nodes only (ie: L2-Layer) and then the nodes in L3-Layer will be posisioned relative to the corresponding node in L2?
ie: supposed node L2-10.10.10.1 has posisition (x,y) then the node L3-10.10.10.3 position will be (x, y+50)

the target layout would be something like this

Thanks in advance

[ahmedalodhari]

@asadarafat, one way to avoid the overlapping group layers is to use the automatic hierarchical layout function to organize your nodes where the L3 nodes are ordered first and then the L2 nodes.