1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by...
-
Upload
janice-summers -
Category
Documents
-
view
232 -
download
0
Transcript of 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by...
![Page 1: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/1.jpg)
1
Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout
Presented by Denis Dubé
August 27, 2005
![Page 2: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/2.jpg)
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
![Page 3: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/3.jpg)
3
Graph grammars: previous work
Automatic latex code documentation generator Eliminates lack of or inaccurate documentation
![Page 4: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/4.jpg)
4
Automatic documentation
![Page 5: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/5.jpg)
5
Why linear constraints? FSA graph grammar based simulator
A simple linear constraint could have moved the “Current State” box over the active state
![Page 6: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/6.jpg)
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?
![Page 7: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/7.jpg)
7
Pacman example: QOCA off
NOTE: Connections are not visible (but present)
![Page 8: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/8.jpg)
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
![Page 9: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/9.jpg)
9
Pacman simulation grammar
LHS of GG rule RHS of GG rule
![Page 10: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/10.jpg)
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
![Page 11: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/11.jpg)
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
![Page 12: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/12.jpg)
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
![Page 13: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/13.jpg)
13
Hierarchical: Random test graph
![Page 14: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/14.jpg)
14
Hierarchical: Class diagrams
Bond graph meta-model by Sagar Sen
![Page 15: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/15.jpg)
15
Hierarchical: Reachability graph
Graph generated from a Petri-Net
![Page 16: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/16.jpg)
16
Hierarchical: GPSS models
![Page 17: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/17.jpg)
17
Random layout: Devs model
![Page 18: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/18.jpg)
18
Force Transfer Algorithm: Devs model
![Page 19: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/19.jpg)
19
Statechart controlled layout: Devs
![Page 20: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/20.jpg)
20
Spring-Electrical layout: Random test graph
![Page 21: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/21.jpg)
21
Tree-like layout: Random test graph
![Page 22: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/22.jpg)
22
Circle layout: Random test graph
![Page 23: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/23.jpg)
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
![Page 24: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/24.jpg)
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
![Page 25: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/25.jpg)
25
Graphical user interface (Before)
![Page 26: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/26.jpg)
26
Graphical user interface (After)
![Page 27: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/27.jpg)
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
![Page 28: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/28.jpg)
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)
![Page 29: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/29.jpg)
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
![Page 30: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/30.jpg)
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
![Page 31: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/31.jpg)
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
![Page 32: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/32.jpg)
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
![Page 33: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/33.jpg)
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
![Page 34: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/34.jpg)
34
Conclusion
AToM3 now posses a powerful user interface and many algorithms to tackle graph layout
![Page 35: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/35.jpg)
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)
![Page 36: 1 Linear constraints layout in graph grammars, layout algorithms, and scoped UI layout Presented by Denis Dubé August 27, 2005.](https://reader035.fdocuments.in/reader035/viewer/2022062301/56649ef55503460f94c08d47/html5/thumbnails/36.jpg)
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