inf-graphdraw: automatic graph drawing lecture 1
TRANSCRIPT
We:Prof. Reinhard von [email protected], R1117
Sören Domrö[email protected], R1112
Christoph Daniel [email protected], R1112
Connor Schö[email protected]
2
You?
3
Class Materials[Tammassia 13]Roberto Tamassia, EditorHandbook of Graph Drawing and VisualizationCRC Press, 2013Chapters 1, 2, 5, 12, 13, 15On-line: https://cs.brown.edu/~rt/gdhandbook/
[Di Battista et al. 99]Giuseppe Di Battista, Peter Eades, Roberto Tamassia, Ioannis TollisGraph Drawing: Algorithms for the Visualization of GraphsPrentice Hall, 1999
[Kaufmann, Wagner 01]Michael Kaufmann, Dorothea Wagner (Eds.)Drawing Graphs – Methods and ModelsLNCS 2025, Springer, 2001
Plus original papersMost (if not all) should be on-line, at least within CAU
4
Your GradeYour grade is given by final (probably written) exam + homework assignments
• Tentative exam date: Mon 3 Feb. 2020
• Need at least 50% in final exam to pass
• Grade = max (final exam, 85% final exam + 15% homeworks)
• In borderline cases, also consider participation in class
Requirement to be admitted to final exam:
• Received at least 50% of homework assignment points
5
Outline (Tentative)• Modeling Pragmatics, Terminology, Aesthetics
• Tooling, usage of ELK and KIELER
• Force-based drawing
• Hierarchical graph drawing
• Drawing trees
• Planarization-based graph drawing
• Labeling approaches
• Human-Computer Interaction (HCI)6
Discussion
1. What graphical languages do you know? Whichtextual ones?
2. What are pro‘s and con‘s of graphical and textuallanguages?
3. What could be a motivation for automatic graphdrawing?
Modeling Pragmatics
• Goal: Better use of 1) designer’s time, 2) screen real estate
• State of Practice:
1. Modeler draws view of a model (manual place & route – tedious!)
2. Tool infers model
• Our approach:
1. Modeler constructs model
2. Tool continuously updates view of a model, with automatic layout and filtering
9
10
11
12
13
14
15
16
Pragmatics Un-Aware ModelingPainful editing technology
17
Are Textual DSLs the Answer?
• Editing text much less tedious than editing graphics
• Revision control simpler
• Portable, tool independent18
Still Want Graphical Views!
• Text requires string matching to uncover structure
• Diagram makes structure obvious
• Unreachable state in model emerges19
Still Want Graphical Views!
• Diagram uncovers specification flaw (upper right corner)
20
Pragmatics-Aware ModelingFree user of tedious mechanical work, such as . . .• manual placing of graphical objects• manual navigation in complex modelsFocus on pragmatics:• New interaction methodologies• New analysis methodologies• New ways to synthesize modelsOur experimental platforms:
21
Eclipse Layout Kernel
Key to Pragmatics: The MVC Paradigm
• A model represents knowledge.A model could be a single object (rather uninteresting), or it could be some structure of objects.
• A view is a (visual) representation of its model.It would ordinarily highlight certain attributes of the model and suppress others. It is thus acting as a presentation filter.
• A controller is the link between a user and the system.It provides the user with input by arranging for relevant views to present themselves in appropriate places on the screen.
Trygve ReenskaugModels - Views - Controllers Xerox PARC technical note, 1979 22
Key to Pragmatics: The MVC Paradigm
Fuhrmann, von HanxledenOn the Pragmatics of Model-Based Design 15th Monterey Workshop 2008, LNCS 6028 (2010)23
OverviewPragmatics-Aware Modeling
• Definition and Motivation
• MVC a Key to Pragmatics!
Pragmatics/KIELER Spotlights
• Eclipse Layout Kernel (ELK)
• An Experiment
Wrap-Up24
Eclipse Layout Kernel
25
• GMF
• Graphiti
• Papyrus
• Yakindu
• Graphviz (Dot, Neato, FDP, Twopi, Circo)
• Open Graph Drawing Framework (OGDF)(Layer-based, Planarization, Force-directed)
• Own Implementations (Data flow diagrams)
Eclipse Layout Kernel
26
Official Eclipse projectSome users:•Embraer (in-house Simulink autolayout)• itemis (Franca project)•Papyrus (Sequence Diagram Editor)•UC Berkeley (Ptolemy)•Sigasi (Sigasi Studio)•National Instruments (netlistsvg)•BSH Hausgeräte (in-house specification)•Bosch/ETAS (EHANDBOOK)
I'm super impressed with this. Layout is a non-trivial problemand this tool is amazing. ELK iswritten in Java and transpiled tojavascript.This tool is really powerful andI'm still learning the ins andouts of how to use it. ELK iscapable of port positioning forinstance. ...
25.1.2018 https://camo.githubusercontent.com/9b16db89aa566ab4b54e0b82f4ea82f6ebda0896/68747470733a2f2f63646e2e7261776769742e636f6d2f6e7475726c6…
https://camo.githubusercontent.com/9b16db89aa566ab4b54e0b82f4ea82f6ebda0896/68747470733a2f2f63646e2e7261776769742e636f6d2f6e7475726c65792f6… 1/1
clockdata_in
up
down
carry_out
borrow_out
count_out
parity_out
11
10
01
00
101
0:8
9:17
18:26
0
1
2
0
1
9
0:8
9
0:8
ELK is using a layered approach (Sugiyama, Ganser), similar to dot in the Graphviz package. You can read abouttheir algorithm here: https://rtsys.informatik.uni-kiel.de/%7Ebiblio/downloads/papers/jvlc13.pdf
Neil Turley, National Instrumentshttps://github.com/nturley/netlistsvg#elkjs
Dr. Andreas Seibel, BSH Hausgeräte GmbHE-Mail from Oct. 6, 2017
In our experience over many years my colleagues and I concluded that textual modeling is the only practical way,but that a graphical view of the models is a must-have as well.Your technology closes exactly that gap.
28
Bronze für ETAS – EHANDBOOK erhält den dritten Preis bei der Leserwahl zum Produkt des JahresEin Preis mit Tradition – bereits zum 18. Mal fand die Leserwahl für das „Produkt des Jahres“ der Zeitschriften Elektronik und Elektronik automotive sowie des Portals elektroniknet.destatt. In elf Kategorien standen jeweils zehn Produkte zur Wahl.
https://www.etas.com/de/news-22885.php
30
31
32
Example: Component Clustering
Christoph BleesEine Methode zur Entwicklung modularer Produktfamilien Dissertation, TU Hamburg-Harburg, Schriftenreihe Produktentwicklung und Konstruktionstechnik vol. 3, 2011
33
Example: Net Lists
34
Example: Control Flow Graph
35
Example: Component Diagram
36
Example: Component Diagram
37
Example: Component Diagram
38
Editing Efficiency: An ExperimentTask: Create diagram from textual specification
Fuhrmann, v. HanxledenTaming Graphical Modeling Proceedings of the ACM/IEEE 13th International Conference on Model Driven Engineering Languages and Systems (MoDELS’10), volume 6394 of LNCS, page 196–210, October 2010
• The Problem: Lots of productivity wasted with drawing diagrams manually
• Our Approach: Pragmatics-aware modeling
• Let designer concentrate on model, automatically synthesize views
• Employ filtering to synthesize views customized to user stories
• Key enabler: automatic layout
40
Wrap-Up Modeling Pragmatics
Problem Set 1• Due: Mon, Oct. 28, 10am
• Generally, you may write in German or English
Problem 1: Study [Fuhrmann, von Hanxleden MODELS’10] and answer the following questions:
1. What does focus & context mean? Give an example of where you used this, or would have liked to use it.
2. Give an example application of when you have used DND editing. In that application, would alternatives have been useful/feasible?
3. What is view management? Give an example where you have used this. Give another example where you would have liked to use it but could not do so because of tool limitations.
Fuhrmann, v. HanxledenTaming Graphical Modeling Proceedings of the ACM/IEEE 13th International Conference on Model Driven Engineering Languages and Systems (MoDELS’10), volume 6394 of LNCS, page 196–210, October 2010
Problem Set 1
Problem 2: Study [Petre, CACM’95] and answer the following questions:
1. Name an example of where you used secondary notation in a visual language
2. What arguments do you see in the paper for/against the usage of automatic layout
Marian PetreWhy Looking Isn’t Always Seeing: Readership Skills and Graphical Programming Communications of the ACM (CACM), June 1995, Vol. 38, No. 6, 33–44