Style Mappers

Required Permission: Project Settings management (Read more about permissions in User Groups)

Table of Contents


The "Style Mappers" setting is a collection of the project's style mapper objects which are available in every visualization. These global mappers can't be changed by the user but users can use them as starting points for their own mappers created in the visualization - read more about visualization styling in Styling the visualization.

A style mapper object is a simple configuration object which defines mappings of node or relationship DB property values to style values, e.g. color, width, or shape. These style values are used for visualization styling/rendering. You can create multiple mappers based on the same DB property but with different styling conditions and a different GUI title. Defined style mapper objects are listed in the "Settings" tab in visualization where users can choose and apply them to style the visualization.

Configuration

  1. In the "Application Menu" (top right) choose page "Project Settings"

  2. In the " Project Settings" panel click on the "Style Mappers" row.

  3. Enter JSON configuration and confirm by pressing the "Save" button.

Description of configuration

Configuration is entered in JSON format. Example:

[
{
"id":"1",
"title":"Color by type",
"group":"nodes",
"mapperType":"discrete",
"property":"TYPE",
"styleProperty":"background_color",
"mapping":{
"TYPE_1":"rgb(200,100,100)",
"TYPE_2":"rgb(100,200,100)",
"_notMapped_":"rgb(100,100,100)",
"_undefined_":"rgb(0,0,0)"
}
},
{
"id":"2",
"title":"Num of Incidents",
"group":"nodes",
"mapperType":"linear",
"property":"NUM_OF_INCIDDENTS",
"styleProperty":"background_color",
"mapping":{
"minData":0,
"minValue":"#ccc",
"maxData":100,
"maxValue":"#f00",
"_undefined_":"#000"
}
},
{
"id":"3",
"title":"Icon by type",
"group":"nodes",
"mapperType":"discrete",
"property":"TYPE",
"styleProperty":"background_image",
"mapping":{
"TYPE_1":"/icons/monitor_1_blueLight.png",
"TYPE_2":"/icons/virtual_1_red.png",
"_notMapped_":"/icons/unknown_1_blueLight.png",
"_undefined_":"/icons/unknown_1_blueLight.png"
}
},
{
"id":"4",
"title":"Direct mapper",
"group":"nodes",
"mapperType":"direct",
"property":"TYPE",
"styleProperty":"background_color",
"mapping":{
"TYPE_1":"/icons/monitor_1_blueLight.png",
"TYPE_2":"/icons/virtual_1_red.png",
"_notMapped_":"/icons/unknown_1_blueLight.png",
"_undefined_":"/icons/unknown_1_blueLight.png"
}
}
]


Explanation of JSON properties:

Property

Values

Default

Description

id

MANDATORY

String


Mapper identification used for referencing purposes, e.g. in Style views setting.

Id can't start with space " " or exclamation mark "!".

title

MANDATORY

String


Mapper title used in GUI.

group

MANDATORY

"nodes", "edges", "mergedEdges", "dirMergedEdges"


Determines if this mapper is used to style nodes or relationships (edges).

mapperType

MANDATORY

"discrete", "linear", "direct"


A discrete mapper is best used with properties that have a finite number of distinct values that can be directly mapped to style values (types, categories, ...). When you choose a "discrete" mapper you have to define mappings as a single value or multiple values (see description of style for more information).

A linear mapper is best used with continuous numeric values (number of incidents, weight, performance indicators, ...). When you choose a "linear" mapper you have to define mappings as a single value or range of values (see description of style for more information).

A direct mapper can be used to bypass the mapping and use values stored in graph properties directly.

property

MANDATORY

String


Name of the DB property used in the mapping. Values of this DB property will be used for determining the styling/rendering values in visualization when this mapper is used.

Set property to "_dbLabels" if you want to style nodes by DB labels.

Set property to "_dbRelType" if you want to style relationships by DB types.

styleProperty

MANDATORY

"background_color", "background_image", "border_width", "border_color", "size", "shape", "line_color", "line_style", "width", "curve_style", "target_arrow_shape"


Name of a style property for which the mapping is defined. There are different style properties for nodes and different for edges so be sure to use the appropriate style properties based on the group value.

Supported styling properties ("styleProperty" values) are based on Cytoscape.js style properties. You can read more about every style property in Cytoscape.js documentation on Style but be aware that not all style properties are supported and you have to change dash ("-") to underscore ("_") in the name of every used style property due to issues with data storing mechanism of Cytoscape.js. The full list of supported style properties and their values is as follows:

  • Node style properties (when group is set to "nodes"):

    • background_image: name of an image file (Graphlytic's internal icon or a custom icon) in the format "/icons/name_of_icon_file". To find the icon name, hover over the icon in the visualization's icon selector (on the Settings tab, in the Background color mapper).

    • background_color: hexadecimal (e.g. "#ad42d3", "#d02") or rgb (e.g. "rgb(50,75,123)") values.

    • shape: "rectangle", "roundrectangle", "ellipse", "triangle", "pentagon", "hexagon", "heptagon", "octagon", "star", "diamond", "vee", "rhomboid", or "polygon".

    • border_width: number in pixels.

    • border_color: hexadecimal (e.g. "#ad42d3", "#d02") or rgb (e.g. "rgb(50,75,123)") values.

    • size: number in pixels.

  • Relationship style properties (when group is set to "edges", "mergedEdges", or "dirMergedEdges"):

    • line_color: hexadecimal (e.g. "#ad42d3", "#d02") or rgb (e.g. "rgb(50,75,123)") values.

    • width: number in pixels.

    • line_style: "solid", "dotted", "dashed".

    • curve_style: "bezier", "triangle", "taxi" ( right-angled lines ), "haystack" (straight lines without arrows - for better performance).

    • target_arrow_shape: "triangle", "triangle-tee", "circle-triangle", "triangle-cross", "triangle-backcurve", "vee", "tee", "square", "circle", "diamond", "chevron", "none".

mapping

MANDATORY

Object


Mapping from property values to styleProperty values. Mapping can be defined in several ways based on the value of mapperType:

Discrete mapper

When mapperType is set to "discrete": this mapper is used when you want a specific style value to be applied for a specific DB property value (e.g. when there's "A" in a property use red color for the background and when there's "B" use green color).

There are two special values that you can use in place of DB property value:

  • "_notMapped_" - can be used to style all elements that have some value in DB property (property) but the value is not mapped.

  • "_undefined_" - can be used to style all elements that do not have the property defined.

Linear mapper

When mapperType is set to "linear": this mapper can be used only with color or size style properties because these are the only ones where the values are continuous and therefore can be dynamically calculated. Linear transition is defined with 2 data points that have 2 style values associated and the mapper calculates style values for elements according to these 2 points. The definition of these points is as follows:

  • minData - DB property (property) value which is associated with a lower transition definition point. If not defined or set to null then the minimum value from all elements in visualization is used

  • maxData - DB property (property) value which is associated with a higher transition definition point. If not defined or set to null then the maximal value from all elements in visualization is used

  • minValue - mandatory - styling value associated with lower transition definition point

  • maxValue - mandatory - styling value associated with higher transition definition point

  • _undefined_ - styling value used for elements with mapped DB property (property) not defined or set to null

Direct mapper

When mapperType is set to "direct" the value of the mapped property is directly used as the mapped value. This way it's possible to use values like colors or icon names stored in the graph directly to style the visualization.

In this case, the "mapping" object is empty.

Default styles

Default styling values which are used as initial settings in a new visualization:

  • Nodes

    • background_color : "rgb(255, 255, 255)"

    • background_image : "public-resources/images/icon/unknown_1_blueLight.png"

    • border_color : "rgb(29, 142, 206)"

    • border_width : 2

    • shape : "ellipse"

    • size : 15

    • font_size : 12

  • Relationships

    • line_color : "rgb(149, 55, 52)"

    • line_style : "solid"

    • curve_style : "bezier"

    • target_arrow_shape : "triangle"

    • width : 2

    • font_size : 12

  • Merged relationships

    • line_color : "rgb(191, 191, 191)"

    • line_style : "solid"

    • curve_style : "bezier"

    • target_arrow_shape : "none"

    • width : 2

    • font_size : 12

  • Direction Merged relationships:

    • line_color : "rgb(191, 191, 191)"

    • line_style : "solid"

    • curve_style : "bezier"

    • target_arrow_shape : "triangle"

    • width : 2

    • font_size : 12