Size Mapping and Color Mapping for Elements in a Graph View

Size Mapping and Color Mapping, i.e. defining the size or color of graph elements (nodes and edges) in reference to another property value, can be done in two ways. The easiest way is to use the Mapping Tool. However, as the mapping tool is considered an interactive feature, the mapping tool settings can currently not be stored in View Templates, and thus, cannot be reused. If this is no problem for you head over to the linked article. If you need to recall the size and color mapping, e.g. as the result of a Workflow, then continue reading.

An alternative and reusable way to achieve size mapping is the use of a Reference or a Converter to set the view property value(s) that define the size of an element. For nodes, these view properties are Width and Height. For edges, it is Thickness. This article describes how to do this.

Size mapping without the mapping tool

Setting a size property with direct reference to another property

Soley Studio allows you to set any property with direct reference to another property. For this to work the data types of the properties should match. All properties defining the size of an element in the graph visualization are predefined numeric view properties. So, to set such a view property in reference you need another numeric property to refer to. This can be any other view property or, more likely, a data property. As an example, let us assume we want to map the size of all nodes of the class Part to the numeric data property cost of this node class. Parts with high costs should be shown bigger while parts with low costs should be smaller.

  1. Make sure you have a numeric property defined in your metamodel that you want to refer to. In our example, this is the attribute cost of the node class Part.
  2. Make sure that the property value is set or calculated. The easiest way to check this is to open the graph in graph or table view, select an element and check the property value. For our example, we assume that we have a graph with Part nodes that have different cost values.
  3. Open your data graph in a graph view and open the View Manager tool.
  4. In the View Manager, select the Node or Edge series that you want alter by clicking on it. The series becomes highlighted in blue and the Properties Pad should move to the front, where you can now alter the view properties for the complete node series. If this does not work click somewhere on the graph background and then select the series again. In our example, we select the series Part. You can also select multiple series by holding the CTRL button.

    View Manager for graph view with multiple node series selected
    View Manager for a graph with multiple node series selected
  5. Now navigate to the Properties Pad where you will see the View Properties of the selected series.

    View Properties - properties pad for node series
    View Properties – properties pad for node series
  6.  To set the size of a node element you need to alter the Height and Width view property values.  If you want to alter the “size” of an edge you can only change the edge Thickness. For our example, click on the … button next to the Width property to start the Edit Property dialog. In the dialog you have the options to directly define a constant value, to set the value in reference to another property or to use a converter. We want to set the value in reference, so click on that option and pick a property from the drop-down menu. The menu will only show you feasible (=numeric) view and data properties of the selected node class(es). We want to set the Width in reference to the cost value.

    Edit property dialog setting the numeric view property Width in reference to the data property cost
    Edit property dialog for view property Width with Reference setting selected
  7. Confirm the dialog with OK. The width of the Part nodes will now be directly defined by the cost attribute. If the cost is 10 then the node will be 10px wide and if it is 1000 it will be 1000px wide. If you want to map the value within a certain range you will need to use the Mapping Converter, which we will discuss later. For now, we also need to edit the Height property to scale the nodes correctly. Start the Edit Property dialog for the Height property, activate Reference, select Width (or cost) as the reference and confirm with OK. You have now achieved a size mapping with direct reference to a numeric property value.
  8. You can extract the View Template of this graph view to save the setting for reuse. Just navigate to the View Manager and use the Extract view template button on the top to save the template.

    Extract a View Template and Save It for Reuse. You find it under My View Templates in the Open View Dialog
    Extract a View Template and Save It for Reuse

Setting a size property in an indirect/mapped reference to another property

Setting a size property in direct reference sometimes does not create the wanted result, e.g. if the values differ greatly or if 0 values occur. To achieve the same effect as the size mapping known from the Mapping tool, i.e. a linear mapping of values to a numeric range between an upper and a lower limit, you can set the size properties (Width, Height, Thickness) using a Converter, such as the Mapping converter or the Math converter.

To learn everything about the use of converters please go to this article.

Color mapping without the mapping tool

Color mapping, i.e. defining the color of graph elements with reference to an attribute value, works analog to the size mapping described above. The defining view properties for the color of graph elements are FillColor for nodes and OutlineColor for edges. Color definitions can be made as described in this article. Thus, the referenced property has to be a string stating a color name (red, black, …) or a hexadecimal color code (#FFFFFF, #15A1DB, …).

To create such a reference a dedicated data property often makes sense, which can be set based on rules. For example, you could add a string attribute named color to your metamodel and set the value of color with one or more graph transformation rules.

In addition to the use of a dedicated data property Converters can be of great help to define the color property. Please have a look at the Mapping Converter and the RGB Converter, which are described in this article.

Was this article helpful?

Related Articles