Style mappers

Permission: Settings management

Style mappers setting is a collection of style mapper objects.

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 different GUI title. Defined style mapper objects are listed in "Style" tab in visualization where user can choose and apply them to style the visualization.

Configuration

  1. Left menu - settings

  2. In panel "Settings list" use icon "Update" for setting "STYLE_MAPPERS".

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

Default configuration

Default configuration contains no mappers.

  1. Left menu - settings

  2. In panel "Settings list" use icon "Update" for setting "STYLE_MAPPERS".

  3. Press button "Default" and store by pressing button "Save".

Automatic configuration

Automatic configuration contains no mappers. You have to create appropriate mappers manually.

  1. Left menu - settings

  2. In panel "Settings list" use icon "Update" for setting "STYLE_MAPPERS".

  3. Press button "Automatic", wait for generator to generate JSON and store by pressing button "Save".

Description of configuration

Configuration is entered as JSON. Example of JSON:

[
{
"id" : "1",
"dataAttr" : "TYPE",
"label" : "Color by type",
"group" : "nodes",
"styleGroup" : "nodeColor",
"mapperType" : "discrete",
"style" : {
"background_color" : {
"TYPE_1" : "rgb(200,100,100)",
"TYPE_2" : {"dataAttr" : "another_property"},
"_notMapped_" : "rgb(100,100,100)",
"_undefined_" : "rgb(0,0,0)"
},
"border_width" : 0
}
},
{
"id" : "2",
"dataAttr" : "NUM_OF_INCIDDENTS",
"label" : "Num of Incidents",
"group" : "nodes",
"styleGroup" : "nodeColor",
"mapperType" : "linear",
"style" : {
"background_color" : {
"minData" : 0,
"minValue" : "#ccc",
"maxData" : 100,
"maxValue" : "#f00",
"_undefined_" : "#000"
},
"border_width" : 0,
"shape" : "roundrectangle"
}
}
]

Explanation of JSON properties:

Property

Values

Default

Description

Usage

id

MANDATORY

String

 

Mapper identification. Id can't start with space " " or exclamation mark "!". It's used for referencing purposes, e.g. in Style views setting.

Visualization

dataAttr

MANDATORY

String

 

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

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

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

Visualization

label

MANDATORY

String

 

Mapper name used in GUI.

Visualization

group

MANDATORY

"nodes", "edges"

 

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

Visualization

styleGroup

MANDATORY

"nodeIcon", "nodeColor", "nodeShape", "nodeSize"

"edgeColor", "edgeType", "edgeWidth"

 

Determines the styling group in GUI where this mapper will be listed for use. All styling groups with mappers are on tab Style in visualization.

When group is set to "nodes" you can use styleGroup values starting with "node" and when group is set to "edges" you can use styleGroup values starting with "edge".

Visualization

mapperType

MANDATORY

"discrete", "linear"

 

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

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

Visualization

style

MANDATORY

Object

 

Mapping from dataAttr values to style values. Mapping is defined as a set of style properties (e.g. background_color, width, height, ...) which can be mapped to DB properties values in a few ways:

  • single value - when you want a style property to be equal for all elements (e.g. "border_width":0)

  • multiple values - mapperType has to be set to "discrete". This mapper is used when you want specific style value to be applied for specific DB property value. In this case you have to define all DB property values and their mapped style values. In case you want use a value of another DB property as the mapped style value just put {"dataAttr":"<attr_name>"} as the mapped value (put the name of the other DB property in place of <attr_name>). There are also two special values which you can use in place of DB property value:

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

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

  • range of values - mapperType has to be set to "linear". This mapper can be used only when you want a color or size transition according to numerical DB property values. Linear transition is defined with 2 data points which have associated 2 style values and the mapper calculates style values for elements according to these 2 points. Definition of these points is as follows:

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

    • "maxData" - DB property (dataAttr) value which is associated with 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 (dataAttr) not defined or set to null

Supported styling properties 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 some issues with data storing mechanism of Cytoscape.js. Full list of supported style properties and their values is as follows:

  • Node style properties:

    • Shape:

      • width: number

      • height: number

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

    • Background:

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

      • background_image: URL of external image, URL of internal icon or data URI with embedded image

    • Border:

      • border_width: number

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

  • Relationship style properties:

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

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

    • width: number

Visualization

Default styles

There are default styling values which are used as starting settings. Defaults are as follows:

  • Nodes

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

    • background_image : "none"

    • border_color : "rgb(200, 200, 200)"

    • border_width : 3

    • shape : "ellipse"

    • height : 30

    • width : 30

    • font_size : 14

  • Relationships

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

    • line_style : "solid"

    • width : 1

    • font_size : 14

  • Merged relationships

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

    • line_style : "solid"

    • width : 5

    • font_size : 14