1

Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout

Presented by Denis Dubé

August 27, 2005

2

Overview

1. Automatic graph layout Graph grammars and QOCA linear constraints General layout algorithms

Hierarchical, Force transfer, Spring-electrical, Circle, Tree-like, Import/Export

2. Graphical user interfaces and statecharts

3

Graph grammars: previous work

Automatic latex code documentation generator Eliminates lack of or inaccurate documentation

4

Automatic documentation

5

Why linear constraints? FSA graph grammar based simulator

A simple linear constraint could have moved the “Current State” box over the active state

6

QOCA is an object-oriented constraint solving toolkit whose source code is available in C++ and Java

QOCA is worth using because: Makes building a custom solver unnecessary Unlike general purpose constraint solvers, it works

incrementally, allowing for rapid re-solving of constraints when small changes occur

(Example: user drags a node)

What is QOCA? Why use it?

7

Pacman example: QOCA off

NOTE: Connections are not visible (but present)

8

Pacman example: QOCA on

Centeringconstraints

To left of constraintTo right of constraint

Bounded by min/max X, YRelative to top-center block

To bottomof constraint

To top of constraint

9

Pacman simulation grammar

LHS of GG rule RHS of GG rule

10

QOCA Pros/Cons

ProsHigh level constraints are easy to set by

formalism developers, no special layout knowledge required

The incremental constraint solver is fast Cons

Linear constraints are not sufficient to capture many aesthetic constraints such as:

Crossing minimization Overlap prevention

11

General layout algorithms

Clearly QOCA cannot solve all our layout woes

Indeed, the NP-Complete nature of satisfying virtually every aesthetic criteria singly, let alone all at once, indicates a need for many different heuristic strategies

12

Hierarchical Layout

A Sugiyama-based algorithm implementation, it works well on many graph types

Hierarchical layout algorithm sketch:Layers nodes from root to leaves and remove

cyclesSwaps nodes on a given layer to minimize

crossingPlaces nodes on a grid, aligns them

13

Hierarchical: Random test graph

14

Hierarchical: Class diagrams

Bond graph meta-model by Sagar Sen

15

Hierarchical: Reachability graph

Graph generated from a Petri-Net

16

Hierarchical: GPSS models

17

Random layout: Devs model

18

Force Transfer Algorithm: Devs model

19

Statechart controlled layout: Devs

20

Spring-Electrical layout: Random test graph

21

Tree-like layout: Random test graph

22

Circle layout: Random test graph

23

Export/Import capabilities

AToM3 can export graphs to the following formats: GML (Graph Modeling Language) , GXL (Graph Exchange Language) , and DOT

Can be imported by: yED, JGraphpad, and GraphViz

In particular, yED is very powerful, and AToM3 can re-import yED output, thus preserving AToM3 model graphics

24

Questions

Graph grammar documentation QOCA linear constraints Hierarchical layout Force transfer layout Sprint-Electrical layout Circle layout Tree-like layout Export/import tool support

Next: GUI and statecharts

25

Graphical user interface (Before)

26

Graphical user interface (After)

27

GUI: List of improvements

Context sensitive popup menus Help dialogs Uncaught exception handler (GUI + Logging) Combined option dialog and option file database Ability to select/manipulate more than one

node/edge at a time Ability to scale nodes and edge drawings Cut/copy/paste nodes or just the semantic

attributes Undo/redo

28

GUI: Under the hood

Old method: if-statements and dictionaryself.UMLmodel.bind("<Button-1>", self.buttonPressed )

def buttonPressed (self, event):

for action in self.userActionsMap.keys():

if self.mode == action:

self.userActionsMap[action](self, event.x, event.y)

return

DChart method: send event to statechart def handler(event):

self.UI_Statechart.event("Fresh Selection", event)

self.UI_Statechart.event("Select Point", event)

self.UI_Statechart.event("Drop Point", event)

self.UI_Statechart.event("Start Drag", event)

canvas.bind("<ButtonPress-1>", handler)

29

Reactive behavior of the user interface described by a DChart

DChart formalism, simulator,and code generator by ThomasFeng

Currently simulating statereached after double-clickingon an arrow to edit the controlpoints

30

GUI: Scoped User Interface

Why have only one DChart for the entire application?

New idea: Divide the canvas into scoped UI zones If input occurs inside a scoped UI zone, send

input to all the DCharts defined for that zone

31

GUI: Scoped User Interface

Scoped UI bindings:canvas.bind("<ButtonPress-1>", lambda event, scopedUI=self.UI_zone:

scopedUI ('<ButtonPress-1>', event))

Scoped UI example on a DChart like model

DChart: Zone A

Composite: Zone B Composite: Zone C

Orthogonal: Zone D

Canvas: Default zone

32

GUI: Scoped User InterfaceDChart: Zone A

Composite: Zone B Composite: Zone C

Orthogonal: Zone D

Canvas: Default zone

DChart: Zone A

Composite: Zone B Composite: Zone C

Orthogonal: Zone D

Canvas: Default zone

<User Input>Use event coordinatesto find the deepest UI

zone in the tree

Send event to each UI statechart

defined for that zone

33

GUI: Scoped User Interface

Advantages:Ability to create domain-specific user interfacesPossibility of multiple domains co-existing with

different behaviorsAbility to assign more than one UI behavior

statechart to a given scope level Although this duplicates the functionality of

orthogonal states, it might be desirable to address different concerns in different statecharts

Example: reactive behavior versus automated layout triggers

34

Conclusion

AToM3 now posses a powerful user interface and many algorithms to tackle graph layout

35

Future work

Finish the new and improved DChart formalism featuring scoped UI

Implement orthogonal layout for formalisms like Causal Block Diagrams

Improve edge routing, perhaps taking inspiration from yED

Extend QOCA integration in AToM3 (on request)

36

Questions

1. Automatic graph layout Graph grammars and QOCA linear constraints General layout algorithms

Hierarchical, Force transfer, Spring-electrical, Circle, Tree-like, Import/Export

2. Graphical user interfaces and statecharts GUI improvements DCharts GUI behavior Scoped UI