inf-graphdraw: automatic graph drawing lecture 1

Inf-GraphDraw:Automatic Graph Drawing

Lecture 1

Modeling Pragmatics

Reinhard von Hanxledenrvh@informatik.uni-kiel.de

We:Prof. Reinhard von Hanxledenrvh@informatik.uni-kiel.de, R1117

Sören Domrösnbw@informatik.uni-kiel.de, R1112

Christoph Daniel Schulzecds@informatik.uni-kiel.de, R1112

Connor Schönbernerstu204235@informatik.uni-kiel.de

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