Style mappers

Permission: Settings management

Style mappers setting is a collection of global 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.

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",
"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"
}
}
]

Explanation of JSON properties:

Property

Values

Default

Description

Usage

id

MANDATORY

String

 

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

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

Visualization

title

MANDATORY

String

 

Mapper title used in GUI.

Visualization

group

MANDATORY

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

 

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

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

property

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 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.

Visualization

styleProperty

MANDATORY

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

 

Name of 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.

When group is set to "nodes" you can use these style properties:

  • "background_color"

  • "background_image"

  • "border_width"

  • "border_color"

  • "size"

  • "shape"

When group is set to "edges" or "mergedEdges" you can use these style properties:

  • "line_color"

  • "line_style"

  • "width"

  • "curve_style"

Visualization

mapping

MANDATORY

Object

 

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

Discrete mapper

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

There are 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 (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 which have 2 style values associated and the mapper calculates style values for elements according to these 2 points. Definition of these points is as follows:

  • minData - DB property (property) 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 (property) 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 (property) 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 issues with data storing mechanism of Cytoscape.js. Full list of supported style properties and their values is as follows:

  • Node style properties:

    • 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, data URI with embedded image or URL of custom icon included in GL solution (uploaded to /icons/ directory in GL installation. URL of such icon is "/icons/name_of_icon_file")

    • border_width: number

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

    • size: number

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

  • 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

    • curve_style: "haystack" (straight lines without arrows - for better performance) or "bezier"

Visualization

Default styles

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

  • 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",

    • width : 2

    • font_size : 12

  • Merged relationships

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

    • line_style : "solid"

    • curve_style : "bezier",

    • width : 2

    • font_size : 12

  • Direction Merged relationships:

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

    • line_style : "solid"

    • curve_style : "bezier",

    • width : 2

    • font_size : 12