Graph Layout for Domain-Specifie Modeling Denis Dubé Supervisor: Prof. Hans Vangheluwe School of Computer Science Mc Gill University, Montréal, Canada A thesis submitted to the Faculty of Graduate Studies and Research in partial fulfilment of the requirements of the degree of Master of Science in Computer Science Copyright @2006 by Denis Dubé AlI rights reserved Library and Bibliothèque et 1+1 Archives Canada Archives Canada Published Heritage Direction du Branch Patrimoine de l'édition 395 Wellington Street 395, rue Wellington Ottawa ON K1A ON4 Ottawa ON K1A ON4 Canada Canada Your file Votre référence ISBN: 978-0-494-24658-0 Our file Notre référence ISBN: 978-0-494-24658-0 NOTICE: AVIS: The author has granted a non­ L'auteur a accordé une licence non exclusive exclusive license allowing Library permettant à la Bibliothèque et Archives and Archives Canada to reproduce, Canada de reproduire, publier, archiver, publish, archive, preserve, conserve, sauvegarder, conserver, transmettre au public communicate to the public by par télécommunication ou par l'Internet, prêter, telecommunication or on the Internet, distribuer et vendre des thèses partout dans loan, distribute and sell theses le monde, à des fins commerciales ou autres, worldwide, for commercial or non­ sur support microforme, papier, électronique commercial purposes, in microform, et/ou autres formats. paper, electronic and/or any other formats. The author retains copyright L'auteur conserve la propriété du droit d'auteur ownership and moral rights in et des droits moraux qui protège cette thèse. this thesis. Neither the thesis Ni la thèse ni des extraits substantiels de nor substantial extracts from it celle-ci ne doivent être imprimés ou autrement may be printed or otherwise reproduits sans son autorisation. reproduced without the author's permission. ln compliance with the Canadian Conformément à la loi canadienne Privacy Act some supporting sur la protection de la vie privée, forms may have been removed quelques formulaires secondaires from this thesis. ont été enlevés de cette thèse. While these forms may be included Bien que ces formulaires in the document page cou nt, aient inclus dans la pagination, their removal does not represent il n'y aura aucun contenu manquant. any loss of content from the thesis. ••• Canada Abstract The aim of this thesis is to investigate automatic graph layout in the context of domain-specifie modeling. Inherent in the nature of domain-specifie modeling is the creation of new formalisms to solve the current problem as well as the combined use of multiple formalisms. Unfortunately, graph layout algorithms tend to be formalism-specific, thus limiting their applicability. As a starting point, all major graph drawing techniques and many of their variants are summa­ rized from the literature. Thereafter, several of these graph drawing techniques are chosen and implemented in AToM3, A Tool for Multi-formalism and Meta-Modeling. A new means of specifying formalism-specific user-interface behaviour is then described. By fully modeling the reactive behaviour of a formalism-specific modeling environment, including layout, existing graph drawing algorithms can be re-used without modification. The DCharts formalism is modeled to demonstrate the effectiveness of this approach. Le dessein de cette thèse est d'examiner le dessin de graphe automatique dans le contexte de modelage domaine-spécifique. Inhérent dans la nature du modelage domaine-spécifique est la création de nouveaux formalismes pour résoudre le problème actuel de même que l'usage combiné de formalismes multiples. Malheureusement, les algorithmes de dessin de graphe ont tendance à être formalisme-spécifiques, ainsi limitant leur validité d'application. Comme un point de départ, tout les techniques majeurs pour le dessin de graphe et beaucoup de leurs variantes sont résumées de la littérature. Par la suite, plusieurs de ces techniques de dessin de graphe sont choisi et sont appliqué dans le logiciel AToM3. Un nouveaux moyens de définir le comportement d'interface utilisateur formalisme-spécifique est alors décrit. En modelant entièrement le comportement réactif d'un environnement de modelage formalisme-spécifique, y compris le dessin, les algorithmes de dessin de graphique existants peuvent être remploient sans modification. Le formalisme de DCharts est modelé pour démontrer l'efficacité de cette méthode. ii Acknowledgements 1 would like to thank my supervisor Hans Vangheluwe. Without his advice and encouragement 1 would never have realized my potential to make a contribution to domain-specifie visual modeling. 1 love modeling and co ding things that can be seen and this has been a great opportunity to do both. A special thanks to Ernesto Posse, who helped me work out sorne of the mechanics of thesis writing, including introducing me to the LyX word processor used to create this document. Finally, a big thank you to my parents, without whose encouragement and support 1 might not have studied for so long, let alone completed this thesis. iii iv Contents 1 Graph Drawing 5 1.1 Graph Basics ............. 5 1.1.1 Modeling problems as graphs 6 1.1.2 Model constraints 6 1.2 Visual Aesthetics . 7 1.2.1 Graph Area .... 8 1.2.2 Vertex Placement . 8 1.2.3 Edge Crossings 8 1.2.4 Edge Bends ... 9 1.2.5 Direction of flow 9 1.2.6 Edge Length .. 9 1.2.7 Mental Map ... 9 1.2.8 Vertex Connections . 9 1.3 Techniques for graph drawing 10 1.3.1 Layered .... 10 1.3.2 Force-directed. 17 1.3.3 Orthogonal .... 20 1.3.4 Linear Constraints 24 1.3.5 Expensive Methods . 25 1.3.6 Other Techniques . 27 2 Graph Drawing Technique Implementations 31 2.1 AToM3 ............ 32 2.2 Graph exports and imports 33 2.3 Abstraction layer design 34 2.4 Layered ....... 37 2.4.1 Design .... 38 2.4.2 Pseudo-code . 38 2.4.3 Analysis .. 48 2.4.4 Case-study 53 2.5 Spring-embedder .. 53 2.5.1 Pseudo-code . 53 2.5.2 Analysis .. 56 2.5.3 Case-study 57 2.6 Force-transfer 57 v 2.6.1 Design .... 57 2.6.2 Pseudo-code . 57 2.6.3 Analysis .. 60 2.6.4 Case-study 60 2.7 Tree-like and circle 61 2.7.1 Pseudo-code . 61 2.7.2 Analysis ... 63 2.7.3 Case-study 64 2.8 Experimental time performance 64 2.9 Linear Constraints . 67 2.9.1 Design ........ 67 2.9.2 Linear constraints and AToM3 69 3 Formalism-Specific UI and layout 71 3.1 Motivation and background .......... 71 3.1.1 Domains, Formalisms, and Meta-models 72 3.1.2 Nested and zooming user-interfaces 73 3.1.3 Nested events in GUI libraries 73 3.1.4 Variable scoping in programming languages 74 3.2 Formalism-specific UI ....... 74 3.2.1 Generic UI behaviour ... 74 3.2.2 Formalism-specific behaviour 76 3.2.3 Pre/post UI observers 78 3.2.4 Behavioural conformity ... 79 3.3 Case-study: DCharts formalism 79 3.3.1 DCharts formalism overview . 80 3.3.2 DCharts meta-model . 81 3.4 Formalism-specific UI modeling . 84 3.4.1 Buttons model ..... 84 3.4.2 Button Behaviour model 85 3.4.3 Pre/post observer statechart models 85 3.4.4 Formalism entity-specific behaviour models 88 3.4.5 Layout Behaviour 92 4 Glossary 99 Bibliography 110 vi List of Figures 2.1 Abstraction layer class diagram .... 34 2.2 Abstraction layer class diagram details 36 2.3 Abstraction layer class diagram details 37 2.4 Class diagram for the layered drawing technique implementation 38 2.5 Ballistic model in Causal Block Diagram formalism 50 2.6 Telephone model in the GPSS formalism 51 2.7 Model generated from a Petri Net in the Reachability Graph formalism 52 2.8 Transmitter model in the Petri Net formalism 58 2.9 Force-transfer class diagram ...... 59 2.10 Sample model in the DEVS formalism . 61 2.11 Dependency model in Generic formalism 65 2.12 Time performance (logarithmic and normal time) 66 2.13 QOCA server class diagram . 67 2.14 QOCA client class diagram ... 68 2.15 Example model in the PacMan formalism 69 3.1 Generic user-interface behaviour statechart 75 3.2 text to list of figures . 77 3.3 text to list of figures . 77 3.4 Example model in the FSA formalism (layered layout used) 80 3.5 DCharts Meta-model in the Class Diagram formalism (layered and manual lay- out) .............. 82 3.6 Button behaviour statechart 85 3.7 Pre UI observer statechart 86 3.8 Post VI observer statechart . 86 3.9 Post UI observer statechart bootstrapped in the new DCharts formalism 87 3.10 DC DChart behaviour statechart. 89 3.11 DC _ Composite behaviour statechart 90 3.12 DC _ Hyperedge behaviour statechart 91 3.13 Force-Transfer Layout Statechart . 92 3.14 Wristwatch behaviour model in the new DCharts formalism 94 vii viii List of Algorithms 1 Greedy cycle removal 39 2 Longest-path layering 40 3 Minimum width layering 41 4 minWidthStopCondition 42 5 Proper layering . 42 6 Layer-by-layer sweep .. 44 7 Barycenter heuristic .. 45 8 Adjacent exchange heuristic 46 9 Priority-barycenter heuristic 46 10 pushMove .... 47 11 Spring-Embedder 54 12 Repulsion 55 13 Attractive . 56 14 Gravity .... 56 15 Force Transfer 59 16 calculateForce 60 17 Tree-like 62 18 findRoot Vertices 62 19 layoutNode 63 20 Circle ...... 64 2 1ntrod uction ln recent years a trend has emerged whereby systems of increasing complexity are being modeled. This is due in no small part to the effectiveness of models in aiding the design and/or analysis of complex systems such as those found in the software and physical domains.