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
- In the "Application Menu" (top right) choose page "Project Settings"
- In the "Project Settings" panel click on the "Style Mappers" row.
- 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:
| |
mapping mandatory | Object | Mapping from property values to styleProperty values. Mapping can be defined in several ways based on the value of mapperType: Discrete mapperWhen 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:
Linear mapperWhen 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:
Direct mapperWhen 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