How to customize the appearance of the nodes and edges

To customize the appearance of the nodes and edges on the LEPTON GUI, custom configuration properties must be provided. This tutorial explains how to define the LEPTON configuration.

Stylesheets

The LEPTON underlying graph representation and visualization relies on the GraphStream API. The way GraphStream allows to customize the appearance of the nodes and edges on a GUI is described in the GraphStream documentation. It relies on CSS-like stylesheets.

In LEPTON, a default stylesheet is provided that can be overwritten by providing a custom stylesheet, through the stylesheet or stylesheet_file properties. Those stylesheets should define the appearance of nodes or edges according to:

• the status of nodes or edges
• the tags associated to nodes or edges

The CSS selectors available in this stylesheet are in the form:

• edge, edge.<edge_status>, edge.<edge_tag>, with:
  • <edge_status>: CONNECTED, DISCONNECTED
  • <edge_tag>: TAG, ...
• node, node.<node_status>, node.<node_tag>, with:
  • <node_status>: ONLINE, OFFLINE
  • <node_tag>: TAG, ...

Example:

stylesheet_file=<path/to/the/stylesheet_file>

with the stylesheet_file containing:

graph {
   fill-mode : none;
}

/* Default representation of nodes */
node {
   fill-mode: plain; 
   text-alignment: above; 
   size: 8px; 
   fill-color: black;
}

/* Representation of nodes with the tag "TAG" */
node.TAG {
   stroke-mode: plain; 
   stroke-color: green; 
   stroke-width: 2;
}

/* Representation of OFFLINE nodes */
node.OFFLINE {
   fill-color: #808080;
}

/* Default representation of edges */
edge {
   shape: line; 
   fill-mode: dyn-plain; 
   size: 1px; 
   fill-color: blue;
}

/* Representation of CONNECTED edges */
edge.CONNECTED {
   size: 2px; 
   fill-color: red;
} 

/* Representation of edges with the tag "TAG" */
edge.TAG {
   stroke-mode: plain; 
   stroke-color: green; 
   stroke-width: 2;
}

Customize node labels

Each node is displayed with a label, that contains the id of the node. In order to customize the labels that appear aside each node, a file containing lines in the form <node_id>=<label> should be provided, to define associations between node ids and labels. The name of this file is given through the node_labels property. Example:

node_labels=<path/to/the/nodes_labels_file>

with the nodes_labels_file containing:

N00=Alice
N01=Bob
N02=Carol

Hide/show edges according to their status

The hidden_edges configuration property allows to define which edges should be displayed or hidden on the LEPTON GUI. It contains a ',' separated list of status for which the edges are hidden. Example:

hidden_edges=DISCONNECTED        # display only CONNECTED edges