Customizing Link Bundles

Styling > Customizing Links > Customizing Link Bundles

Customizing Link Bundles

A link bundle has two graphic representations. The collapsed representation shows the bundle as a single link (overview link) connecting two end points. In this representation, all CSS properties described for links also apply to link bundles (see Link Representation).

When the link bundle is expanded, the overview link is replaced by the child links, which are then represented as a link set. In the expanded representation, the link bundle can be customized through the following property:

Table 5.8 CSS Properties for Link Bundles

Property Name	Type	Default Value	Description
`linkDistance`	`float`	`2`	Defines the distance between the links that are part of the link bundle.

How to Customize a Link Bundle Representation through CSS

Please refer to the following sample to learn how to customize a link bundle representation in its collapsed and expanded forms:

<installdir>/samples/network/links/

where <installdir> is the directory where you have installed JViews TGO.

The following CSS extract customizes the width of all link bundles to be larger than the standard links. It also customizes the link bundle identified as linkBundle78 to display a distance of 5 pixels between its inner links:

object."ilog.tgo.model.IltLinkBundle" {
  forcedWidth: 10;
}
 
#linkBundle78 {
  linkDistance: 5;
}

You can also customize the visibility of the container icon that is automatically displayed and allows you to expand/collapse the link bundle. The following CSS properties allow you to do this customization:

Table 5.9 CSS Properties for Link Bundle Container Icons

Property Name	Type	Default Value	Description
`containerStatusVisible`	`boolean`	`true`	Indicates whether the container icon collapses or expands and whether it should be visible or not in an object
`containerExpansionIconVisible`	`boolean`	`true`	Indicates whether the in-place expansion icon is added to the overview object of a container. (The value of `containerStatusVisible` must be set to `true`.)
`containerCollapseIconVisible`	`boolean`	`true`	Indicates whether the collapse icon is added to the child objects of a link bundle. (The value of `containerStatusVisible` must be set to `true`.)

PREVIOUS NEXT