Overview
A Viewlet is a small piece of JavaScript code that determines how a graph is rendered. Maltego ships with a number of pre-configured Viewlets that can be selected from the left sidebar of a graph under the View heading:
In effect, Viewlets split the graph view from the information contained in the graph.
A Viewlet has the ability to set two node aspects:
- The color of a ball
- The size of a ball
A Viewlet must have the following:
- A name
- A binding (to either the ball size or the ball color)
The ball color is specified as a hash ‘#’ and RRGGBB in hexadecimal. For example, #FF0000 will be solid red and #00FF00 will be solid green.
The ball sizes number between 50 and 500. Should the number be under or over this range, the size will be clipped to the limits.
Adding a Viewlet
Let’s look at creating a new Viewlet. You can open the View Manager in the Maltego Client by clicking the View tab then clicking the Manage View drop-down and then the Manage View button:
Next we’ll click on New Viewlet.
Assign a name to the Viewlet and the Viewlet will appear in the list - ready to be edited. Click on the [+] button to add a binding for the Viewlet:
We can now select which binding we want, the ball size or the Entity (ball) color.
For this example, let’s assume we want to select the ball size. We want all the balls to have the same size, 500 being the maximum size. So in this case, we have to return a constant – 500. We can test the Viewlet by clicking on the ‘Test’ button:
To see what this looks like on the graph we click "OK". We can now decide how our Viewlet should look inside Maltego. We can choose whether or not it is displayed in the toolbar (like the preset Viewlets), or in the drop-down menu, or in both. This behavior can be configured using the checkboxes:
In this example, we’ve set our Viewlet to be visible in the drop-down menu only and not in the toolbar. If used in the toolbar it is useful to assign the Viewlet a specific icon so that it is easily found. When we click on "OK"to save the Viewlet, the current Viewlet is applied and available in the dropdown:
Though this particular Viewlet example is not especially useful, we can explore a few more practical-use examples. When any of the Transforms which use search engines return Entities, weight is assigned to the Entity. We can use the following Viewlet to assign a color to returned Entities according to their weight:
var maxColor = 200;
var minColor = 0;
var maxWeight = 100;
var minWeight = 50;
var color = maxColor * (maxWeight-weight) /(maxWeight-minWeight) ;
var rg = color.toString(16);
"#"+rg+rg+"ff";
To edit our current Viewlet, we click on the three dots […] next to the name:
Remember to change the binding at the top to ‘Entity Color’ as this is what we’ll be returning in this section. Using this Viewlet we get:
We can also decide to make the ball size a function of the weight of the node. To do this, we will change the binding back to the ball size. We know that the weight of a node is always between 1-100 and so we can simply change the script to:
weight*5
The resulting graph looks as follows:
Through this exercise you can determine that ‘weight’ is a variable available to the developer of a Viewlet. There are many other functions and variables available. These can be found in the Viewlet editor:
Examples of Viewlets
Color by gender (assuming that your Entities contain a property called ‘gender’ – binding is color)
if (getPropertyValue("gender") == "female") {
"#B40000";
}
else if (getPropertyValue("gender") == "male") {
"#008040";
}Printing property names (useful for debugging)
var names="";
for(i=0;i<propertyKeys.length;i++) {
names+=propertyKeys[i];
names+=", ";
}
names.substr(0, names.length-2);
Accessing the Rest of the Graph (Advanced Viewlets)
The [Entity] type has the following methods:
- getWeight()
- getValue()
- getPropertyValue(name)
- getType()
- getBookmark()
- getNotes()
And the following members:
- incoming()
- outgoing()
- links()
The [link] type has the following methods:
- getValue()
- getPropertyValue(name)
And the following members:
- source()
- target()
These methods and members can be used to access other parts of the graph. Consider the following Viewlet which sizes balls according to its grandparent weight (this applies if the Type is a Person Entity). Binding is size:
if (isType("maltego.Person")) {
var cumulativeWeight = 0;
for(i=0;i<entity.incoming().length;i++) {
var parent = entity.incoming()[i].source();
for(j=0;j<parent.incoming().length;j++) {
var grandparent = parent.incoming()[j].source();
cumulativeWeight+=grandparent.getWeight();
}
}
cumulativeWeight+weight;
}
else {
50;
}However, there are a couple of things to keep in mind when using Viewlets. Viewlet code runs in the UI thread, so when you have infinite loops, circular references or very complex calculations your UI will slow down and in some cases, can even crash a Maltego session. Also, malicious Viewlets can do harm to a host. It is therefore recommended that you always visually inspect the Viewlet code before running it.
Viewlets can be distributed with configuration export and import:
