Drawing layered graphs with port constraints

Abstract

Complex software systems are often modeled using data flow diagrams, in which nodes are connected to each other through dedicated connection points called ports. The influence a layout algorithm has on the placement of ports is determined by port constraints defined on the corresponding node.

In this paper we present approaches for integrating port constraints into the layer-based approach to graph drawing pioneered by Sugiyama et al. We show how our layout algorithm, called KLay Layered, progresses from relaxed to more restricted port constraint levels as it executes, and how established algorithms for crossing minimization and edge routing can be extended to support port constraints. Compared to the previous layout algorithms supporting ports, our algorithm produces fewer edge crossings and bends and yields pleasing results.

We also explain and evaluate how layout algorithms can be kept simple by using the concept of intermediate processors to structure them in a modular way. A case study integrating our layout algorithm into UC Berkeley's Ptolemy tool illustrates how KLay Layered can be integrated into Java-based applications.

Introduction

With up to ten million lines of code, software-based functions account for 50–70% of the effort in the development of automotive electronic control units [3]. To keep up with the growing complexity and tightening time-to-market requirements, embedded software domains such as the automotive, rail, or aerospace industries increasingly take advantage of graphical model-based development tools that follow the actor-oriented approach [19] such as Simulink (The MathWorks), SCADE (Esterel Technologies), ASCET (ETAS), or Ptolemy (UC Berkeley). Herein, graphical diagrams are used as input representations for simulators, rapid prototyping systems, and code generators. Fig. 1 shows a typical data flow diagram from Ptolemy and reveals the basic components of such a diagram, namely actors (also called blocks or operators), connections between the actors, and ports that define the interface of actors and the kind of data that is transported by connections.

While it is generally assumed that graphical diagrams are more readable than textual programs, the readability of a diagram strongly depends on its layout. Therefore, when creating or changing a model, an estimated 25% of a user's time is spent on manual layout adjustments according to Klauske [16]. Using graph layout algorithms to automate layout adjustments, this time can be better spent improving the model itself instead of its graphical representation.

Since in data flow diagrams actors are connected through ports, graph layout algorithms have to provide support for them. The position of a port relative to its actor need not even be fixed; instead, the layout algorithm can be made responsible for finding a good position. The degree of freedom it has in doing so is given by port constraints placed on the actor. Traditional layout algorithms support these requirements only in very limited ways, if at all.

Contributions: In this paper, we address the automatic layout of graphs with port constraints, building on the layer-based approach that has already proven successful in many domains but so far has received little attention with respect to port constraints. We introduce a structured way for transitioning from relaxed to restricted port constraint levels during the algorithm. We describe how the popular barycenter-based crossing minimization heuristic can be extended to support ports and compare different methods for doing so. We also introduce methods for sorting ports where their order is not fixed. We describe how inverted ports can be handled that require connected edges to be routed around a node. For handling north/south-side ports, we introduce layout units and a new flexible method for dummy node creation. We also present the concept of intermediate processors to structure layout algorithms in a modular way, including an account of our practical experience with this concept.

As explained above, the development of the methods presented here was primarily motivated by the desire for automatic layout of data flow diagrams as used in embedded software development. However, our results should be applicable to other application areas as well, such as electronic circuit diagrams or any other graph representation with port constraints.

Outline: The rest of this section defines the necessary notation, introduces the layer-based approach to graph drawing, and gives an overview of related work in this area. Section 2 describes a clean approach for handling port constraint levels in a layout algorithm. Since port constraints have large implications for crossing minimization and edge routing, the necessary modifications are described in depth in 3 Crossing minimization with port constraints, 4 Edge routing with port constraints. Shifting towards a more practical perspective, we give details on the algorithm's modular architecture and a case study describing its integration into an existing software product in Section 5. We finish with a detailed evaluation of the algorithm in Section 6 and conclude with Section 7.

Let (V,E) be a directed graph and $v\in V$. We denote the set of incoming edges of v by $E_{\mathrm{i}}\left(v\right)$ and the set of outgoing edges of v by $E_{\mathrm{o}}\left(v\right)$. The source node of an edge $e=(u,u\text{'})$ is $v_{\mathrm{s}}\left(e\right)=u$, and its target node is $v_{\mathrm{t}}\left(e\right)=u\text{'}$. In a port-based graph each edge is connected to its source and target over specific ports. The set of ports attached to v is denoted by P(v). An edge e has a source port $p_{\mathrm{s}}\left(e\right)\in P\left(v_{\mathrm{s}}\right(e\left)\right)$ and a target port $p_{\mathrm{t}}\left(e\right)\in P\left(v_{\mathrm{t}}\right(e\left)\right)$. For a port $p\in P\left(v\right)$ we write $E_{\mathrm{i}}\left(p\right)$ for the subset of incoming edges of v that have p as their target port, and $E_{\mathrm{o}}\left(p\right)$ for the subset of outgoing edges of v that have p as their source port. Furthermore, we define $E\left(p\right)=E_{\mathrm{i}}\left(p\right)\cup E_{\mathrm{o}}\left(p\right)$.

The drawing of a port-based graph maps each node $v\in V$ to an area bounded by a rectangle with its upper left corner at $\mathrm{pos}\left(v\right)=(x,y)\in {\mathbb{R}}^2$ and its bottom right corner at $(x+w,y+h)$ with $w,h>0$. Likewise, each port $p\in P\left(v\right)$ is mapped to a position $\mathrm{pos}\left(p\right)\in {\mathbb{R}}^2$, but that position is constrained to the boundary of the bounding rectangle of v. As a consequence, p can be assigned to a side $s\in \{\mathsf{north},\mathsf{east},\mathsf{south},\mathsf{west}\}$ depending on which side of the bounding rectangle of v is chosen. The vertical axis is assumed to point downwards.

Edges are drawn with series of line segments that are each determined by a start point, an end point, and a sequence of bend points. Usually orthogonal routing is applied to port-based graphs: all line segments are aligned either horizontally or vertically.

During its execution, an algorithm may add and remove additional nodes. We distinguish such additional nodes from the nodes originally present in the graph and call them dummy nodes and regular nodes, respectively.

Many modeling applications that use ports do not allow graph drawing algorithms too modify the positions of ports relative to the node they are attached to, i.e. $\mathrm{pos}\left(p\right)-\mathrm{pos}\left(v\right)$ must be constant for each $p\in P\left(v\right)$. Other applications allow repositioning ports within certain constraints. The port constraints model used here assigns a constraint level $\mathrm{PC}\left(v\right)$ to each node v, which can be chosen from five different levels:

Free

Ports can be placed at arbitrary positions on the boundary of node v.

FixedSide

A side of v, denoted by $\mathrm{side}\left(p\right)\in \{\mathsf{north},\mathsf{east},\mathsf{south},\mathsf{west}\}$, is assigned to each port $p\in P\left(v\right)$.

FixedOrder

The side of each port is fixed, and the ports of each side have to be placed in a specific order.

FixedRatio

Each port is assigned a position, relative to the containing node v; if v is resized, the position is scaled accordingly.

FixedPos

Each port is assigned a relative position that must not be modified by the layout algorithm.

The layer-based graph layout approach was introduced by Sugiyama et al. [26]. Given a directed acyclic graph, this approach arranges all edges in the same direction by organizing the nodes in subsequent layers, which are also called hierarchies or levels in graph drawing literature. All algorithms are described with the assumption that the main orientation of edges is from left to right, hence the nodes of each layer are arranged vertically. While this is inconsistent with most of the graph drawing literature, which assumes top-to-bottom layout [10], [26], the left-to-right layout is commonly used for data flow diagrams.

The layer-based approach solves the graph layout problem by dividing it into five consecutive phases.

• Elimination of cycles. Directed cycles can be eliminated by reversing a subset of the edges. The aim is to minimize this subset in order to have as many edges as possible pointing in the same direction in the final drawing. A popular algorithm for this problem is the heuristic of Eades et al. [4].

• Layer assignment: Nodes are assigned to layers $L_1,\dots ,L_k$ such that all edges point from layers of lower index to layers of higher index. Edges that span more than one layer (long edges) are split with dummy nodes in order to obtain a proper layering, where all edges connect nodes placed in consecutive layers. The number of required dummy nodes can be minimized efficiently with the algorithm of Gansner et al. [10].

• Crossing minimization: The nodes of each layer L_i are ordered with the goal of minimizing the number of edge crossings that can occur between pairs of layers. The barycenter heuristic, proposed by Sugiyama et al. [26], is very simple, fast, and gives reasonably good results [15].

• Node placement: The nodes of each layer L_i are assigned vertical positions according to the order determined in the previous step. Positions should be chosen such that the edges can be drawn as straight as possible, e.g. with the method of Sander [21] or the method of Brandes and Köpf [2].

• Edge routing: This final phase adds bend points to edges, depending on the desired routing style. Methods for orthogonal routing that also support hyperedges (edges connecting multiple ports) have been proposed by Eschbach et al. [7] and Sander [22].

The barycenter heuristic for crossing minimization is an important basis for the extensions proposed in this paper. It reduces the ordering problem to consider only two layers L_a and L_b at a time, where L_a is kept fixed and L_b is reordered. In the following, we assume that L_a is left of L_b in the ordering of layers; thus we consider only the set $E_{\mathrm{i}}$ of incoming edges of the nodes in L_b, but the symmetric case can be computed in the same way by considering the set $E_{\mathrm{o}}$ of outgoing edges of the nodes in L_a. For each node $v\in L_a$, let r(v) be its position in the fixed order of L_a. The barycenter value for each node $w\in L_b$ is defined by

$$b\left(w\right)=\frac{1}{\left|E_{\mathrm{i}}\right(w\left)\right|}\sum _{(v,w)\in E_{\mathrm{i}}\left(w\right)}r\left(v\right),$$

that is the average position of the connected nodes in L_a. The order of L_b is obtained by sorting the contained nodes by their barycenter values. The barycenter method can be used to order all layers using the layer sweep algorithm:

• Determine a random order for the nodes of L₁.

• Repeat for $i=2,\dots ,k$: Reorder the nodes of L_i to reduce the number of crossings of edges with their source in $L_{i-1}$ and their target in L_i.

• Repeat for $i=k-1,\dots ,1$: Reorder the nodes of L_i to reduce the number of crossings of edges with their source in L_i and their target in $L_{i+1}$.

• Repeat steps 2 and 3 until the total number of crossings is not further reduced.

Generally the result of the layer sweep algorithm can be improved by repeating it with different random initial orderings, and then selecting the result that produced the least number of edge crossings. This selection process as well as step 4 of the layer sweep algorithm require a method for counting the number of crossings that result from a given layering. There are simple and efficient algorithms for counting crossings, e.g. the algorithm of Barth et al. [1].

More details on layer-based layout are reported by Healy and Nikolov [14].

The first contributions to the problem of integrating port constraints in the layer-based approach were motivated by the layout of data structures, where certain fields of a structure may contain pointers to other structures. Gansner et al. showed how node positioning can be extended for including offsets derived from port positions [10]. Sander introduced the idea of handling side ports by adding dummy nodes in order to route the respective edges [21]. The problem of crossing minimization with port constraints was first discussed by Waddle, who adapted the barycenter heuristic to consider port positions [28]. These contributions employ FixedPos constraints with spline curve edge routing, but they do not support inverted ports or other port constraints and are not sufficient for the layout of data flow diagrams. Basic approaches for handling multiple levels of port constraints were proposed by Spönemann et al. [25].

Schreiber proposed different solutions in the context of drawing bio-chemical networks [23]. The crossing minimization phase is adapted by inserting dummy nodes for each port and adding constraints to respect the order of ports. Side ports are handled by routing the incident edges locally for each node, which is done through transformation into a two-layer crossing minimization problem. This suffices for treating FixedPos constraints, but can lead to unpleasant layouts since the number of resulting bend points is possibly higher than necessary (see Section 4). The approach of Siebenhaller suffers from the same problem because it also routes edges of side ports locally [24]. However, it supports more flexible port constraints by associating them with individual edges. The consequence is that a node may have some edges that are constrained to ports, and some that are not. This flexibility can be useful for the layout of UML diagrams, where it is possible that only a subset of the edges is connected to fixed points of a node. The crossing minimization problem that results from this additional degree of freedom can be partly solved by reducing it to a network flow problem. The extension of our approaches to consider such mixed constraints is not required for most data flow languages and is left for future research.

Klauske and Dziobek introduced a specialized node placement for Fixed-Ratio constraints [16], [17] in the context of the Simulink modeling language. Their approach is an extension of the linear program for node placement proposed by Gansner et al. [10]. This extension does not only determine vertical positions for the nodes, but also modifies their height in order to find an optimal placement of ports.

Gutwenger et al. introduced the concept of embedding constraints for modeling the port constraints of a node [12], but that model captures only the order of ports, and not their concrete positions. Such constraints are used in the context of planarization based layout, e.g. the topology-shape-metrics approach [27]. Harrigan and Healy applied embedding constraints to level planarization [13], which consists in finding a planar subgraph respecting a given layer assignment.

Klauske et al. proposed a new approach in which edges connected to north/[0]south-side ports are routed through dummy nodes that are allowed to be interleaved with dummy nodes of long edges, giving more freedom to the edge routing [18]. However, the order of the dummy nodes is fixed and minimizes crossings only locally. This approach is compared with a new approach that does not fix the order of the dummy nodes in this paper. For handling inverted ports, Klauske et al. also introduced the concept of in-layer edges that connect two nodes in the same layer, and described the algorithmic modifications necessary to support them. Finally, Klause et al. introduced a way for structuring layout algorithms in a modular way, allowing them to dynamically adapt to different layout tasks. We follow this up in this paper with an account of our practical experience with this concept after having made extensive use of it.