15.1 Painting a small view
Every painter starts his career with a simple painting. Let’s follow the same road and see a hands-on example of how to visualize models using Mondrian.
For the purpose of this exercise, let’s take as case study of exposing the dependencies between the namespaces (or packages) of a software system. One idea to do that is to visualize the situation as a graph in which namespaces are nodes and the dependencies between them are edges.
We start with a fresh canvas:
| view |
view := MOViewRenderer new.
view open.
A fresh canvas is just too simple even for a beginner. So, let’s fill it with a node for each namespace entity from our Moose model:
| view namespaces |
namespaces := MooseModel root allModels first allModelNamespaces.
view := MOViewRenderer new.
view nodes: namespaces.
view open.
It starts to get interesting. The next thing we need are the edges. We know that from each namespace we can obtain the providerNamespaces
. Thus, we can create an edge for each such relationship:
| view namespaces |
namespaces := MooseModel root allModels first allModelNamespaces.
view := MOViewRenderer new.
view nodes: namespaces.
view edgesToAll: #providerNamespaces.
view open.
Now, to make the drawing more relevant, let us layout the graph so that the namespaces that are not used by any other are at the top and those that use no other at the bottom. We simply use a dominanceTreeLayout
:
| view namespaces |
namespaces := MooseModel root allModels first allModelNamespaces.
view := MOViewRenderer new.
view nodes: namespaces.
view edgesToAll: #providerNamespaces.
view dominanceTreeLayout.
view open.
To provide more context to the picture, we might also want to add more information on the nodes by mapping the number of classes, methods and lines of code on the width, height and color respectively:
| view namespaces |
namespaces := MooseModel root allModels first allModelNamespaces.
view := MOViewRenderer new.
view shape rectangle
width: #numberOfClasses;
height: #numberOfMethods;
linearFillColor: #numberOfLinesOfCode within: namespaces.
view nodes: namespaces.
view edgesToAll: #providerNamespaces.
view dominanceTreeLayout.
view open.
Executing this code in a Smalltalk workspace reveals a visualization as shown below (provided you have a Moose model already loaded).
There are more visualization and interaction options offered by Mondrian, but in this example we wanted to start with a small painting. Ok, maybe this painting was not that small, but it was rather simple. Once data was around and we knew what we wanted, creating the view was a few keystrokes away. In fact, these keystrokes are so few that it is hard to imagine any excuse to continue to let graph data shapeless.