A Graph Diagram Engine
for the Transformation-Driven Architecture
Janis Barzdins Karlis Cerans Sergejs Kozlovics
Edgars Rencis Andris Zarins
Institute of Mathematics and Computer Science, University of Latvia
Raina blvd. 29, LV-1459, Riga, Latvia
{janis.barzdins, karlis.cerans, sergejs.kozlovics, edgars.rencis, andris.zarins}@lumii.lv
ABSTRACT the Graph Diagram Metamodel and the Graph Diagram Engine
The transformation driven architecture (TDA) is a system are explained. Sect. 4 presents a way of implementing animation
building (in particular, tool building) approach that is based on mechanism for graph diagrams. Finally, Sect. 5 concludes the
model transformations, interface metamodels with corresponding paper.
engines, and event/command mechanism. This paper describes a
metamodel and the corresponding engine for graph diagram
2. THE ESSENCE OF THE
presentations within TDA. The facilities of the metamodel and the TRANSFORMATION-DRIVEN
engine include static diagram presentations, as well as graph ARCHITECTURE (TDA)
diagram animations. The Transformation-Driven Architecture (TDA) [6] is a
metamodel-based system (in particular, tool) building approach,
Keywords where the system metamodel consists of one or more presentation
Transformation-Driven Architecture, model transformations, metamodels served by the corresponding engines and the
metamodels, graph diagrams, diagram animation, modeling tools. (optional) Domain Metamodel. There is also the Core Metamodel
(fixed) with the corresponding Head Engine. Model
transformations are used for linking instances of the mentioned
1. INTRODUCTION metamodels (see Fig. 1).
The increasing variety of metamodel-based tools such as
MetaEdit [1], Eclipse GMF [2], Microsoft DSL Tools [3], The Head Engine is a special engine, whose role is to provide
DiaGen/DiaMeta [4] and METAclipse [5] has lead to study of services for transformations as well as for presentation engines.
principles behind tool architecture. Such tools allow domain data For instance, when in some presentation engine a user event (such
to be represented in a graphical form according to some (perhaps, as a mouse click) occurs, the Head Engine may be asked to call
implicit) presentation metamodel. In [6] we have developed an the corresponding transformation for handling this event. Also, a
approach called the Transformation-Driven Architecture (TDA), transformation may give commands to presentation engines.
where not just one, but several presentation metamodels are Thus, the Core Metamodel contains classes Event and Command,
allowed. And the link between domain and presentation models and the Head Engine is used as an event/command manager.
within a modeling tool is established by means of model
The TDA has its own framework that comes with the built-in
transformations.
Head Engine (serving the Core Metamodel) and some predefined
Since a presentation model is not yet the end interface that can be pluggable engines (the Graph Diagram Engine is one of them).
shown to the user, some engine is needed to construct the Other presentation engines may also be written and plugged-in,
corresponding diagram itself from the instance of the presentation when needed. The TDA framework is common to all the tools
metamodel. Such engines form an essential part of the TDA. built upon the TDA. The framework is brought to life by means of
Developing a presentation engine and the corresponding transformations. One can choose between writing different
metamodel may be a non-trivial job. But once implemented, the transformations for different tools and writing one configurable
corresponding engine can be reused in several tools built upon the transformation covering several tools.
TDA.
In this paper a metamodel for graph diagram presentations within 3. GRAPH DIAGRAM METAMODEL AND
TDA and the corresponding engine for drawing/editing graph GRAPH DIAGRAM ENGINE
diagrams is presented. The metamodel along with the engine is a The visual elements of the presentation (see Fig. 2) correspond to
development over previous authors’ work [7] by fully elaborating the classes GraphDiagram, Box, Line, and Port along with
the metamodel and putting it within the context of TDA. The Compartment corresponding to text fields that may be placed
graph diagram animation facilities are also newly sketched here. inside boxes or attached to lines and ports. Instances of the classes
The paper is organized as follows. The next section lists some just mentioned will be diagrams and graphical elements created
ideas of the TDA and explains how the proposed Graph Diagram by the user. Every element, compartment and graph diagram has
Engine can be integrated within the TDA Framework. In Sect. 3 its style (see the ElementStyle class with its subclasses as well as
classes CompartmentStyle and GraphDiagramStyle) being a
CEUR
ceur-ws.org
Workshop ISSN 1613-0073
Proceedings
Figure 1: Metamodels and engines in the Transformation-Driven Architecture
composition of various style attributes. For example, the element as effective internal diagram representation structures allowing to
style attributes supported by the graph diagram engine include handle the visualization tasks efficiently even for large diagrams.
line color, background color, shape, line width, attached pictures,
etc. The compartment style attributes include such items as
4. GRAPH DIAGRAM ANIMATION
alignment, adornment, visibility, text font, etc.
Although there are several approaches for metamodel-based
Every GraphDiagram has its Palette consisting of handling of dynamic multimedia objects that include animations
PaletteElements, each of them being a line, a box or a port. (see, for instance, [11]), our goal here is more specific — to
Toolbars* consisting of ToolbarItems* can also be associated with provide simple animation facilities for graph diagrams explained
the GraphDiagram. Additional MenuItems* could also be in Sect. 3. Complex interactive animations (such as animations
associated with the graph diagram. When the graph diagram is that can be created in Microsoft Silverlight [12] or Adobe Flash
being activated, the corresponding toolbars and menu items are [13]) are beyond our scope.
made visible. The currently active diagram is pointed to by the In Fig. 3 we extend the metamodel of Fig. 2 by classes for
ActiveDiagramPointer singleton instance. The elements currently describing graph diagram animations. The animation of graph
selected are linked to a CollectionOfActiveElements. diagrams is based on the notion of token that is associated with
The metamodel allows the user to specify also a PopUpMenu* some element (box or line) in a graph diagram. Tokens do not
consisting of PopUpMenuItems*. Such a menu is usually activated imply any semantics, they are used only for managing the
when the user clicks the right mouse button. animation process. The semantics is up to transformations.
The Graph Diagram Metamodel defines engine-specific events A token is started by StartTokenCmd that specifies also its
and commands that are subclasses of Event* and Command*. duration (how long the token “lives”). There are also commands
Every event and every command during tool runtime is placed for starting, stopping, pausing and resuming a token in the
within the context defined by the metamodel. For example, the diagram, as well as pausing, resuming and stopping all tokens in
NewBoxEvent is attached to the PaletteBox with which it is being the diagram. The “end of life” of a token is observed by the
created, and the Box in which it is being put (see associations presentation engine — at that time it creates a corresponding
from class NewBoxEvent). EndTokenEvent. There can be several tokens living concurrently
in the diagram.
The singleton class GraphDiagramEngine contains attributes that
correspond to engine’s events. In the beginning a transformation An explicit token is able to simulate the activity of the associated
can assign values for these attributes, each value representing the element for the given duration. The visual effect of the simulation
name of the transformation that has to be called when the is determined by TokenStyle instance associated with the token. If
particular event occurs. an ElementStyle instance is associated with the token style, then
the animation consists of just changing the element style for the
The graph diagram engine is responsible for visualizing instances token’s lifetime. Other options of animation consist of moving a
of the Graph Diagram Metamodel. The engine is developed on the bullet of certain size or some image along the line in the diagram,
basis of graphical engines for GRADE tools family [8]. The or animating a box by a line flowing over it in certain direction,
engine relies on advanced graph layout algorithms [9, 10] as well with or without leaving the trailing part in the specified color. In
the case of AUTOMATIC direction, the actual line flowing
direction is determined by the presentation engine on the basis of
*
the placement of the actual outgoing line from the box. A hidden
From the Core Metamodel. token doesn’t animate any element, but just “lives” for the
From the Core Metamodel 1 <>
ToolbarItem
RefreshMenu Menubar
SelectEvent
0..1 Command *
Command 1
previous {ordered} * parent {ordered} RefreshToolbar
0..1 next Command ToolbarItem
MenuItem name: String
1
name: String picture: String
isVisible: Boolean Toolbar isVisible: Boolean
MenuItem 1 isEnabled: Boolean *
Engine Event isVisible: String isEnabled: Boolean
SelectEvent onMenuItemSelectEvent: String {ordered} onToolbarItemSelectEvent: String
* *
* *
<>
GraphDiagramEngine
onOpenDiagramEvent: String GraphDiagram
1
onCloseDiagramEvent: String OpenDiagram name: String
onOKStyleDialogEvent Command GraphDiagramStyle
onLeftClickEvent: String
1 * name: String
onRightClickEvent: String 1
CloseDiagram layoutMode: TLayoutMode
onDoubleClickEvent: String *
Command layoutAlgorithm: TLayoutAlgorithm
onNewLineEvent: String
backgroundColor: TColor
onNewBoxEvent: String
onNewPortEvent: String ActivateDiagram 1
onChangeContainerEvent: String Command 1 OpenDiagramEvent
onMoveLineStartPointEvent: String
onMoveLineEndPointEvent: String CloseDiagramEvent
onKeyDownEvent: String
SaveDiagram 1 1
Command
1
RefreshPalette
<> Command
ActiveDiagramPointer PaletteElement
RefreshDiagramCommand 1 1
name: String
*
{ordered} picture: String
1 1 Palette
*
PasteElementsCommand
CollectionOfActiveElements 0..1
* *
PaletteLine PaletteBox PalettePort
* 1
Element
*
localStyle: String 1
* ElementStyle
location: String
OKStyleDialogEvent name: String
hint: String *
lineWidth: Integer
* LeftClickEvent dashLength: Integer
ShowStyleDialogCommand 0..1 breakLength: Integer
RightClickEvent lineColor: TColor BoxStyle
1 0..1 backgroundColor: TColor
ActivateElementCommand shapeCode: TBoxShapeCode
0..1 DoubleClickEvent shapeStyle: TBoxShapeStyle
picture: TPictureRef
start
LocalStyleToElementStyleCommand
* pictureWidth: Integer
1 nStart NewLineEvent Box
pictureHegth: Integer
end *
* picturePos: TPicturePosition
ElementStyleToLocalStyleCommand 1 nEnd container pictureStyle: TPictureStyle
0..1 width: Integer
NewBoxEvent 0..1
heigth: Integer
parent
NewPortEvent 1
1 PortStyle
KeyDownEvent ChangeContainer shapeCode: TBoxShapeCode
0..1 shapeStyle: TBoxShapeStyle
keyName: String Event
targetContainer picture: TPictureRef
pictureWidth: Integer
pictureHegth: Integer
*
picturePosition: TPicturePosition
Port pictureStyle: TPictureStyle
From the Core Metamodel
width: Integer
heigth: Integer
Line
ActivatePopUpMenu
Command start *
1 lStart LineStyle
1 lineType: TLineType
end * startShapeCode: TLineEndShapeCode
PopUpMenu 1 lEnd startLineWidth: Integer
MoveLine startDashLength: Integer
target 1 startBreakLenght: Integer
StartPointEvent
{ordered} * parent {ordered} * 1 startBackgroundColor: TColor
target MoveLine 1 startLineColor: TColor
PopUpMenuItem endShapeCode: TLineEndShapeCode
name: String 1 EndPointEvent
endLineWidth: Integer
isVisible: Boolean endDashLength: Integer
isEnabled: Boolean CompartmentStyle endBreakLength: Integer
onPopUpMenuItemSelectEvent: String {ordered} *
name: String endBackgroundColor: TColor
1 Compartment 0..1
isVisible: Boolean endLineColor: TColor
value: String alignment: TTexAlignment middleShapeCode: TLineEndShapeCode
PopUpMenuItem adjustment: TCompartmentAdjustment middleLineWidth: Integer
picture: TPictureRef middleDashLength: Integer
SelectEvent
picturePosition: TPicturePosition middleBreakLength: Integer
adornment: TAdornmentCode middleBackgroundColor: TColor
textFont: TFont middleLineColor: TColor
Figure 2: The Graph Diagram Metamodel. Ellipses are Command subclasses, while rounded rectangles are Event subclasses.
M. Zviedris for their efforts in materializing the ideas presented in
PauseAllTokensCmd ResumeAllTokensCmd StopAllTokensCmd
this paper.
ResumeTokenCmd
PauseTokenCmd 1 StopTokenCmd
7. REFERENCES
1 [1] MetaEdit+ (http://www.metacase.com).
Token
status: TokenStatus 1 [2] A. Shatalin and A. Tikhomirov. Graphical Modeling
StartTokenCmd 1 timeElapsed: Real
duration: Real TokenEndEvent Framework Architecture Overview. Eclipse Modeling
1 Symposium, 2006.
Element
[3] S. Cook, G. Jones, S. Kent and A. C. Wills. Domain-Specific
HiddenToken ExplicitToken
1 (from Development with Visual Studio DSL Tools, Addison-
Graph Diagram Wesley, 2007.
Metamodel)
style 1
<> [4] DiaGen/DiaMeta (http://www.unibw.de/inf2/DiaGen).
TokenStatus TokenStyle 0..1
ElementStyle [5] A. Kalnins, O. Vilitis, E. Celms, E. Kalnina, A. Sostaks and
MOVING
(from
PAUSED J. Barzdins. Building Tools by Model Transformations in
Graph Diagram
STOPPED
Metamodel) Eclipse. Proceedings of DSM’07 Workshop of OOPSLA
2007, Montreal, Canada, Jyvaskyla University Printing
<> BoxTokenStyle LineTokenStyle
Direction tokenWidth: Integer tokenSize: Integer
House, pp. 194–207, 2007.
LEFT TO RIGHT tokenColor: TColor tokenColor: TColor
RIGHT TO LEFT tokenDirection: Direction picture: TPictureRef
[6] J. Barzdins, S. Kozlovics, E. Rencis. The Transformation-
UP TO DOWN fillBehind: Boolean ... Driven Architecture. Proceedings of DSM’08 Workshop of
DOWN TO UP fillColor: TColor
AUTOMATIC ... OOPSLA 2008, Nashville, USA, pp. 60–63, 2008.
[7] J.Barzdins, A.Zarins, K.Cerans, A,Kalnins, E.Rencis,
Figure 3: Adding animation capabilities to the Graph L.Lace, R.Liepins and A.Sprogis. GrTP: Transformation
Diagram Metamodel Based Graphical Tool Building Platform. Proceedings of
specified amount of time. Hidden tokens can be useful, e.g., for MDDAUI Workshop of MoDELS 2007, Nashville, USA,
accounting the global animation time, or for creating certain 2007.
breakpoints during the animation when the control is transferred [8] GRADE tools (http://www.gradetools.com).
to transformations for some semantic actions.
[9] P. Kikusts and P. Rucevskis. Layout Algorithms of Graph-
The implementation of animation facilities in our graph diagram Like Diagrams for GRADE Windows Graphic Editors.
engine is currently under development. Proceedings of Graph Drawing ’95, LNCS, vol. 1027, pp.
361–364, Springer-Verlag, 1996.
5. CONCLUSIONS [10] K. Freivalds and P. Kikusts. Optimum Layout Adjustment
The Graph Diagram Engine has been successfully implemented in Supporting Ordering Constraints in Graph-Like Diagram
recent version of transformation-based tool building platform Drawing. Proceedings of The Latvian Academy of Sciences,
GrTP [7]. The GrTP tool is now being transformed to the TDA Section B, vol. 55, No. 1, pp. 43–51, 2001.
framework, which should become publicly available soon. At the
[11] A. Pleuss, A. Vitzthum, H. Hussmann. Integrating
moment, the TDA framework consists of two predefined engines
Heterogeneous Tools into Model-Centric Development of
(one of them is the Graph Diagram Engine and the other is the
Interactive Application. MoDELS 2007, LNCS, vol. 4735,
Dialog Engine), and the interaction between these engines and
pp. 241–355, Springer-Verlag, 2007.
model transformations performed by means of commands and
events works well. We are working on ameliorating the TDA [12] Silverlight Animation Overwiew. MSDN, Microsoft Corp.
framework and its engines. One of the research topics here is (http://msdn.microsoft.com/en-us/library
adding advanced graph diagram layout capabilities to the Graph /cc189019(vs.95).aspx).
Diagram Engine. We are working also on implementing diagram [13] Adobe Flash (http://www.adobe.com/products/flash).
animations within the Graph Diagram Engine for TDA.
[14] G. Barzdins, E. Liepins, E., M. Veilande, M. Zviedris.
Several diagram editors (such as class diagram editor and activity Semantic Latvia Approach in the Medical Domain. In Haav,
diagram editor) have been successfully built using the Graph H-M., & Kalja, A. (eds), Proceedings of the 8th
Diagram Engine. This engine has been also used in [14]. We are International Baltic Conference (Baltic DB&IS2008), June
looking forward for applying the TDA and its engines in the 2-5, Tallin, Estonia, Tallinn University of Technology Press,
Semantic Web domain. pp. 89–102, 2008.
6. ACKNOWLEDGMENTS
The authors would like to acknowledge (alphabetically)
A. Kalnins, L. Lace, R. Liepins, A. Sprogis, R. Zarits and