Customizing node and link layouts

Properties for customizing the layout of nodes or links

The customization of the layout is based on the properties listed in the following table.

CSS properties for node and link layout

Property Name	Type	Default Value	Description
`linkPorts`	`IltLinkPort[]`	`Top` , `Bottom` , `Left` , `Right` and `Center`	Applies only to nodes. This property denotes which link ports are recognized by the node when links are attached to it. This property affects the link layout when set to IltLinkLayout or IltShortLinkLayout. Possible values are: `Top` , `Bottom` , `Left` , `Right` or `Center` . It is possible to create new link ports by creating new instances of `IltLinkPort` .
`fromPort`	`IltLinkPort`	`null`	Applies only to links. Denotes the preferred link port at the "from" end side. Only effective when an IltShortLinkLayout is used.
`toPort`	`IltLinkPort`	`null`	Applies only to links. Denotes the preferred link port at the "to" end side. Only effective when an IltShortLinkLayout is used.

How to customize the layout for links

The following CSS extract illustrates how to customize the link layout using link ports. This example features two network elements identified as NE1 and NE2 . Each network element has a set of link ports defined to connect the links that are attached to the node. In addition, there is a link connecting NE1 to NE2 . For this link, the example specifies the link ports where the link should be attached by the link layout.

#NE1 {
  linkPorts[0]: "Center";
}

#NE2 {
  linkPorts[0]: Left;
  linkPorts[1]: Top;
  linkPorts[2]: Bottom;
}

#Link1 {
  fromPort: Center;
  toPort: Left;
}

Link ports are only available when the network or equipment components are configured to use the IltShortLinkLayout. Refer to The LinkLayout rule.

Setting parameters to customize nodes or links in a layout

You can set parameters for a particular node or link in a graph layout. This typically applies to certain types of layout, like IlvBusLayout (to set the bus object) or the IlvTreeLayout (to specify the root object), but you can also set parameters to specify that certain nodes or links must remain fixed. For more information, refer to The GraphLayout rule.