Visualization settings
Required Permission: Settings management (Read more about Permissions)
Table of Contents
Visualization setting is used to configure default visualization functionality and styling when user creates a new visualization.
Configuration
In the "Application menu" (top right) choose page "Settings"
In the "Application Settings" panel click on the "VISUALIZATION" row.
Enter JSON configuration and confirm by pressing "Save" button.
Default configuration
Default configuration contains several default attributes to see how configuration should looks like. Probably this configuration doesn't match model of your data but can serve as example of short configuration.
Main menu (top right) - Page Settings
In panel "Settings list" use icon "Update" for setting "VISUALIZATION".
Press button "Default" and store by pressing button "Save".
Automatic configuration
Automatic configuration is used to generate configuration which contains automatically detected "nodeLabelAttr".
This automatically generated configuration can be used as a good starting point to create your own configuration.
Main menu (top right) - Page Settings
In panel "Settings list" use icon "Update" for setting "VISUALIZATION".
Press button "Automatic", wait for generator to generate JSON and store by pressing button "Save".
Description of configuration
Configuration is entered in JSON format. Example:
{
"relationshipModel":"dirMergedEdges",
"nodeTitleProp":"db_or_virtual_property_key",
"relTitleProp":"db_or_virtual_property_key",
"mergedRelTitleProp":"virtual_property_key",
"dirMergedRelTitleProp":"virtual_property_key",
"showInfoPanelOnInit":true,
"geoMap" : {
"latitudeProperty":"latitude_prop",
"longitudeProperty":"longitude_prop",
"mapBoxConfig":"vector",
"showMapOnInit":true
},
"exploringFilter":{
"maxNodesForAnimation":200,
"maxNodesToExplore":200,
"maxNodesFromExploring":5000,
"nodes":{
"type":"positive",
"labels":["Node Label 1", "Node Label 2"],
"propertyFilter":[
{
"property":"ontology",
"type":"MULTISELECT",
"values":["Some value 1", "Some value 2"]
}
]
},
"edges":{
"type":"positive",
"types":["RELATED_TO"],
"propertyFilter":[
{
"property":"property name",
"type":"RANGE_SLIDER",
"values":[
0.5,
1.0
],
"minValue":0.4,
"maxValue":1.0
}
]
},
"showFilter":{
"behavior":"always",
"minNodes":20,
"minEdges":20
}
},
"timeline":{
"isOn":true,
"startDateProperty":"property",
"endDateProperty":"property",
"dateFormat":"YYYY-MM-DD",
"interval":604800000,
"ranges":[
{
"title" : "Last 1 year",
"range" : 31536000000
},
{
"title" : "Last 5 years",
"range" : 157766400000
},
{
"title" : "Last 10 years",
"range" : 315532800000
},
{
"title" : "Last 20 years",
"range" : 631152000000
}
],
profiles: [
{
"title" : "Profile 1",
"startDateProperty" : "startDate",
"endDateProperty" : "endDate"
},
{
"title" : "Profile 2",
"startDateProperty" : "startDate2",
"endDateProperty" : "endDate2"
}
]
},
"autoRefresh":{
"enabled" : false,
"interval" : 60,
"onRefresh" : "console.log(changes.nodes.length);"
},
"arrowRendering":{
"edges":true,
"mergedEdges":true,
"dirMergedEdges":true
},
"hideToolboxIcons":[
"SELECT_OUTGOING",
"SELECT_INCOMING"
],
"propertyCharts":{
"maxDimensionValues":200
},
"selections":{
"mode" : "LASSO",
"polygonColor" : "#CCC",
"selectedStateColor" : "#1D8ECE"
},
"shortestPathMaxLength": 15,
"toolboxMenuTypes":{
"graphTools" : "INLINE",
"selectionTools" : "AUTO",
"layoutTools" : "MENU",
"relationshipModels" : "AUTO"
},
"nodeTooltipProps":[
{
"property":"db_or_virtual_property_key_1"
},
{
"property":"db_or_virtual_property_key_2"
}
],
"relTooltipProps":[
{
"property":"db_or_virtual_property_key_3"
},
{
"property":"db_or_virtual_property_key_4"
}
],
"mergedRelTooltipProps":[
{
"property":"virtual_property_key_1"
}
],
"dirMergedRelTooltipProps":[
{
"property":"virtual_property_key_2"
}
],
"nodeSnippetProps":[
{
"property":"db_or_virtual_property_key_1"
},
{
"property":"db_or_virtual_property_key_2"
}
],
"nodeFilterProps":[
{
"property":"db_or_virtual_property_key_1"
},
{
"property":"db_or_virtual_property_key_2"
}
],
"mappers":{
"nodes":{
"background_color":{
"id":"1"
},
"background_image":{
"id":"2"
},
"border_width":{
"id":"21"
},
"border_color":{
"id":"22"
},
"size":{
"id":"3"
},
"shape":{
"id":"6"
}
},
"rels":{
"line_color":{
"id":"5"
},
"line_style":{
"id":"9"
},
"width":{
"id":"4"
},
"curve_style":{
"id":"42"
},
"target_arrow_shape":{
"id":"18"
}
}
}
}
Explanation of JSON properties:
Property |
Values |
Default |
Description |
||||||||||||||||||||||||
relationshipModel |
"edges", "mergedEdges", "dirMergedEdges" |
"edges" |
Default Relationship Model set at new visualization initialization (when user creates a new visualization). |
||||||||||||||||||||||||
showInfoPanelOnInit |
true, false |
true |
Turns on/off the right Info Panel on visualization initialization. |
||||||||||||||||||||||||
geoMap |
Object |
disabled |
Configuration of the geographical layer in visualization. |
||||||||||||||||||||||||
geoMap.latitudeProperty |
String |
Property key with latitude data (latitude in decimal format). |
|||||||||||||||||||||||||
geoMap.longitudeProperty |
String |
Property key with longitude data (longitude in decimal format). |
|||||||||||||||||||||||||
geoMap.mapBoxConfig |
String or Object |
"vector" |
MapBox configuration object. There are two predefined configurations "vector" and "raster" or a custom configuration object can be used. For examples please see Geo Map Server Integration. |
||||||||||||||||||||||||
geoMap.showMapOnInit |
Boolean |
false |
Turns on/off of the map on visualization initialization. |
||||||||||||||||||||||||
exploringFilter |
Object |
Default configuration of the Exploring Filter for every new visualization that is created. |
|||||||||||||||||||||||||
exploringFilter. maxNodesForAnimation |
Integer greater than zero |
200 |
The max number of nodes that will be added with animation after an exploring action. If the number of nodes is higher the nodes will be rendered on their final positions without the animation effect. The exploring itself or the result of the exploring action is not affected in any way by this setting. |
||||||||||||||||||||||||
exploringFilter. maxNodesToExplore |
Integer greater than zero |
null |
Limit for the maximum number of nodes that can be explored (queried for relationships) at once. This is an upper limit used for better user experience in graphs with high degree nodes where users can easier end up with long queries in exploring actions. If set to null then the number of explored nodes is not limited. |
||||||||||||||||||||||||
exploringFilter. maxNodesFromExploring |
Integer greater than zero |
null |
The maximum number of nodes that can be added to the visualization in one exploring action (one double-clicking on a node or after exploring a number of nodes). This upper limit is applied after all filtering is done and the number of nodes is still very high. It's mostly used for better user experience in graphs with high degree nodes where users can easier end up with long queries in exploring actions. If set to null then the number of added nodes is not limited. |
||||||||||||||||||||||||
exploringFilter.nodes |
Object |
Configuration of the node filter |
|||||||||||||||||||||||||
exploringFilter.nodes.type |
String |
"noFilter" |
Type of the node filter. Options:
|
||||||||||||||||||||||||
exploringFilter.nodes.labels |
Array of Strings |
Empty array |
An array of node labels. Node will pass the filter only when the node has at least one of the node labels listed in this setting. |
||||||||||||||||||||||||
exploringFilter.nodes.propertyFilter |
Array of PFDO |
Empty array |
Array of PFDO (Property Filter Definition Objects). See below for more information about PFDO structure. |
||||||||||||||||||||||||
exploringFilter. edges |
Object |
Configuration of the edge (relationship) filter |
|||||||||||||||||||||||||
exploringFilter. edges.type |
String |
"noFilter" |
Type of the edge (relationship) filter. Options:
|
||||||||||||||||||||||||
exploringFilter. edges.types |
Array of Strings |
Empty array |
An array of edge (relationship) types. Edge will pass the filter only when the edge has set one of the edge types listed in this setting. |
||||||||||||||||||||||||
exploringFilter. edges. propertyFilter |
Array of PFDO |
Empty array |
Array of PFDO (Property Filter Definition Objects). See below for more information about PFDO structure. |
||||||||||||||||||||||||
PFDO.property |
String |
Name of the property based on which the filter will be filtering graph elements from exploring result. |
|||||||||||||||||||||||||
PFDO.type |
String |
Type of the filter. Options:
|
|||||||||||||||||||||||||
PFDO.values |
Array of Strings or Numbers |
Values that are used as a default setting of the Property Filter. Options:
|
|||||||||||||||||||||||||
PFDO.minValue |
Number |
Minimal value of the slider UI element. Used together with "type"="RANGE_SLIDER". |
|||||||||||||||||||||||||
PFDO.maxValue |
Number |
Maximal value of the slider UI element. Used together with "type"="RANGE_SLIDER". |
|||||||||||||||||||||||||
exploringFilter. showFilter |
Object |
Object with configuration of the Exploring FIlter pop-up behavior and thresholds. |
|||||||||||||||||||||||||
exploringFilter. showFilter.behavior |
String |
"never" |
Configuration of the pop-up behavior of the filter. Options:
|
||||||||||||||||||||||||
exploringFilter. showFilter.minNodes |
Integer greater than zero |
20 |
The minimal number of nodes that will trigger the Exploring Filter to be shown (after an exploring action). This configuration is used only when the "behavior" is set to "large". |
||||||||||||||||||||||||
exploringFilter. showFilter.minEdges |
Integer greater than zero |
20 |
The minimal number of edges (relationships) that will trigger the Exploring Filter to be shown (after an exploring action). This configuration is used only when the "behavior" is set to "large". |
||||||||||||||||||||||||
timeline |
Object |
Timeline configuration. If "timeline" configuration is not present then the Timeline widget is not activated in the visualization. |
|||||||||||||||||||||||||
timeline.isOn |
Boolean |
false |
If set to true then the Timeline widget is turned on when a new visualization is created and only data for preset date interval is visualized (see "timeline.interval" setting below). |
||||||||||||||||||||||||
timeline.startDateProperty |
String |
Name of a property where the element's start date of the time validity interval is stored. If your data model has only one datetime point (e.g. events or workflows) then simply set "startDate" and "endDate" to the same datetime (same property name). |
|||||||||||||||||||||||||
timeline.endDateProperty |
String |
Name of a property where the element's end date of the time validity interval is stored. If your data model has only one datetime point (e.g. events or workflows) then simply set "startDate" and "endDate" to the same datetime (same property name). |
|||||||||||||||||||||||||
timeline.dateFormat |
"epochTimeNumber", "epochTimeString", "YYYY-MM-DD", "DD.MM.YYYY", "YYYY.MM.DD hh:mm:ss", "DD.MM.YY hh:mm:ss", "DD.MM.YYYY hh:mm:ss" |
Configuration for datetime parser which reads the datetime data from timeline.startDateProperty and timeline.endDateProperty values.
|
|||||||||||||||||||||||||
timeline.interval |
Integer |
Interval defined in miliseconds. Typical values:
|
|||||||||||||||||||||||||
timeline.ranges |
Array of TRDOs |
List of TRDOs (Timeline Range Definition Object). Timeline Ranges are pre-defined ranges that can be used to change the timeline slider to match the range (upper timeline date is not changed and the lower timeline date is changed to match the pre-defined range between lower and upper timeline date. Default pre-defined ranges are "Last 1 year", "Last 5 years", "Last 10 years", "Last 20 years" |
|||||||||||||||||||||||||
TRDO.title |
String |
Title of the range used in the UI. |
|||||||||||||||||||||||||
TRDO.range |
Number |
Range to be set in the Timeline defined in ms. Example: to set a range of 10 days use the number 864000000. |
|||||||||||||||||||||||||
timeline.profiles |
Array of TPDOs |
List of TPDOs (Timeline Profile Definition Object). Profiles are definitions of database properties that should be used to compute timeline validity data for graph elements (nodes and relationships). It's useful to have different timeline profiles if you need to analyze the graph in regards to different business dates defined as separate timeline profiles. |
|||||||||||||||||||||||||
TPDO.title |
String |
Title of the profile used in the UI. |
|||||||||||||||||||||||||
TPDO.startDateProperty |
String |
Name of the property where the start date is stored on graph elements. |
|||||||||||||||||||||||||
TPDO.endDateProperty |
String |
Name of the property where the end date is stored on graph elements. |
|||||||||||||||||||||||||
timeline.ranges.title |
String |
Name of the range that will be shown in the UI. |
|||||||||||||||||||||||||
timeline.ranges.range |
Integer greater than 0 |
The number of milliseconds that will be used to set the range after picking it. The maximum value of the Timeline slider will be set to the maximal value possible and the minimum value will be set to the maximal minus the range value. |
|||||||||||||||||||||||||
autoRefresh |
Object |
Configuration of the Auto-Refresh functionality which can be used to periodically check for graph data changes in the graph database and to act upon any detected change. |
|||||||||||||||||||||||||
autoRefresh.enabled |
Boolean |
false |
If true the Auto-Refresh is performing periodical checks to detect any graph data changes. |
||||||||||||||||||||||||
autoRefresh.interval |
Integer |
60 |
Interval in seconds between two automatic refresh checks. |
||||||||||||||||||||||||
autoRefresh.onRefresh |
Function Body (String) |
Body of a JS functional that should be called after changes are detected with the Auto-Refresh feature. This is not a good place for a lot of logic, use it only to call some internal API, custom widget methods (runtime inserted JS), or to console.log something. |
|||||||||||||||||||||||||
arrowRendering |
Object |
{ "edges" : true, "dirMergedEdges" : true, "mergedEdges" : false } |
Configuration of edge arrows rendering for different Relationship Models. Contains three boolean flags:
|
||||||||||||||||||||||||
hideToolboxIcons |
Array of Strings |
List of Tools Panel features that should be turned off (hidden). Current tools that can be suppressed with this setting:
|
|||||||||||||||||||||||||
propertyCharts |
Object |
Configuration of the histogram chart on tab Statistics in the visualization's Control Panel. |
|||||||||||||||||||||||||
propertyCharts.maxDimensionValues |
Integer greater than 4 |
200 |
The maximum number of nodes for which the dimension chart type will be available. The Dimension chart outputs all values of the property which can clutter the UI in large visualizations. |
||||||||||||||||||||||||
selections |
Object |
Configuration of the batch selection mode. |
|||||||||||||||||||||||||
selections.mode |
String |
"LASSO" |
Selection mode - shape of the selection overlay polygon. Values:
|
||||||||||||||||||||||||
selections.polygonColor |
String |
#CCC |
Color of the overlay polygon drawn during the batch selection process (usually started with CTRL + mouse drag gesture). |
||||||||||||||||||||||||
selections.selectedStateColor |
String |
#1D8ECE |
Color of the node and relationship overlay when they are in the selected state. |
||||||||||||||||||||||||
shortestPathMaxLength |
Number |
10 |
The maximal length of shortest paths that the shortest path algorithm should calculate. It's possible to greatly improve the performance of the algorithm by setting the max length to a lower number in graphs with numerous components and high degree nodes. |
||||||||||||||||||||||||
toolboxMenuTypes |
Object |
Configuration of the menu types for tools in the Tools panel. |
|||||||||||||||||||||||||
toolboxMenuTypes.graphTools |
String |
"AUTO" |
Configuration of the Graph Tools menu in the Tools panel. Possible values are:
|
||||||||||||||||||||||||
toolboxMenuTypes.selectionTools |
String |
"AUTO" |
Configuration of the Selection Tools menu in the Tools panel. Possible values are:
|
||||||||||||||||||||||||
toolboxMenuTypes.layoutTools |
String |
"AUTO" |
Configuration of the Layout Tools menu in the Tools panel. Possible values are:
|
||||||||||||||||||||||||
toolboxMenuTypes.relationshipModels |
String |
"AUTO" |
Configuration of the Relationships menu in the Tools panel. Possible values are:
|
||||||||||||||||||||||||
nodeTitleProp |
String |
First node DB property defined in Data schema.nodeProperties.database |
Name of DB property used in several places in visualization (node title, tooltip title, tab Detail title, node snippet title) to identify the node. For best results, it should be DB property with unique identification or name for nodes. If set to null or not defined then the first Database Property Definition from "nodeProperties"."database" in Data schema is used. |
||||||||||||||||||||||||
relTitleProp |
String |
Name of DB property used as relationship title in visualization. If set to null or not defined then no relationship titles are shown in the visualization. |
|||||||||||||||||||||||||
mergedRelTitleProp |
String |
Name of virtual property used as merged relationship title in visualization. If set to null or not defined then no merged relationship titles are shown in the visualization. |
|||||||||||||||||||||||||
dirMergedRelTitleProp |
String |
Name of virtual property used as direction merged relationship title in visualization. If set to null or not defined then no direction merged relationship titles are shown in the visualization. |
|||||||||||||||||||||||||
nodeTooltipProps |
Array of objects |
An array of node DB properties that are listed in node tooltip. Each property is defined as a simple object with only one item - property. If set to null or not defined then no DB properties are printed in node tooltip. Ordering in GUI is the same as in this setting. Example: "nodeTooltipProps" : [ { "property" : "db_or_virtual_property_key" }, { "property" : "db_or_virtual_property_key" } ] |
|||||||||||||||||||||||||
relTooltipProps |
Array of objects |
An array of relationship DB properties that are listed in relationship tooltip. Each property is defined as a simple object with only one item - property. If set to null or not defined then no data is printed in relationship tooltip. Ordering in GUI is the same as in this setting. Example: "relTooltipProps" : [ { "property" : "db_or_virtual_property_key" }, { "property" : "db_or_virtual_property_key" } ] |
|||||||||||||||||||||||||
mergedRelTooltipProps |
Array of objects |
An array of merged relationship virtual properties that are listed in merged relationship tooltip. Each property is defined as a simple object with only one item - property. If set to null or not defined then no data is printed in merged relationship tooltip. Ordering in GUI is the same as in this setting. Example: "mergedRelTooltipProps" : [ { "property" : "virtual_property_key" } ] |
|||||||||||||||||||||||||
dirMergedRelTooltipProps |
Array of objects |
An array of direction merged relationship virtual properties which are listed in direction merged relationship tooltip. Each property is defined as a simple object with only one item - property. If set to null or not defined then no data is printed in direction merged relationship tooltip. Ordering in GUI is the same as in this setting. Example: "dirMergedRelTooltipProps" : [ { "property" : "virtual_property_key" } ] |
|||||||||||||||||||||||||
nodeSnippetProps |
Array of objects |
An array of node DB properties which are used as additional node identification in visualization tabs, e.g. in search or in node details. If set to null or not defined then no additional information is used in GUI and the only identification of node is nodeTitleProp. Example: "nodeSnippetProps" : [ { "property" : "db_or_virtual_property_key" }, { "property" : "db_or_virtual_property_key" } ] |
|||||||||||||||||||||||||
nodeFilterProps |
Array of objects |
All node DB properties defined in Data schema with dataRole="dimension" |
An array of node DB properties that are used in the advanced filter in the search tab in visualization. Ordering in GUI is the same as in this setting. If set to null or not defined then all DB properties from "nodeProperties" in Data schema which have dataRole set to "dimension" are used. Example: "nodeFilterProps" : [ { "property" : "db_or_virtual_property_key" }, { "property" : "db_or_virtual_property_key" } ] |
||||||||||||||||||||||||
mappers |
Object |
Contains two properties : "nodes" and "rels" with default style mappers definitions which are used when user creates a new visualization. |
|||||||||||||||||||||||||
mappers.nodes |
Object |
Empty object |
The "nodes" object contains references to specific style mappers that should be used to style nodes when user creates a new visualization (these mappers has to be already defined in the Style mappers setting and then referenced with the mapper's id property). There can be one and only one mapper defined for every style property (e.g. for line color, width, curve style, ...). When no mapper is defined for some style properties then the internal default values are used automatically. |
||||||||||||||||||||||||
mappers.nodes.background_color |
Object |
Definition of node background color mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |
|||||||||||||||||||||||||
mappers.nodes.background_image |
Object |
Definition of node background image mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |
|||||||||||||||||||||||||
mappers.nodes.border_width |
Object |
Definition of node border width mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |
|||||||||||||||||||||||||
mappers.nodes.border_color |
Object |
Definition of node border color mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |
|||||||||||||||||||||||||
mappers.nodes.shape |
Object |
Definition of node shape mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |
|||||||||||||||||||||||||
mappers.nodes.size |
Object |
Definition of node size mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |
|||||||||||||||||||||||||
mappers.rels |
Object |
The "rels" object contains references to specific style mappers that should be used to style relationships when user creates a new visualization (these mappers has to be already defined in the Style mappers setting and then referenced with the mapper's id property). There can be one and only one mapper defined for every style property (e.g. for line color, width, curve style, ...). When no mapper is defined for some style properties then the internal default values are used automatically. |
|||||||||||||||||||||||||
mappers.rels.line_color |
Object |
Definition of relationship line color mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |
|||||||||||||||||||||||||
mappers.rels.line_style |
Object |
Definition of relationship line type mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |
|||||||||||||||||||||||||
mappers.rels.width |
Object |
Definition of relationship width mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |
|||||||||||||||||||||||||
mappers.rels.curve_style |
Object |
Definition of relationship curve style mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |
|||||||||||||||||||||||||
mappers.rels.target_arrow_shape |
Object |
Definition of relationship target arrow shape style mapper. This object contains only property id which is the ID of a style mapper that should be used when the user creates a new visualization. If not defined or set to null then the default styles are applied. |