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

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

  2. In the "Application Settings" panel click on the "VISUALIZATION" row.

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

  1. Main menu (top right) - Page Settings

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

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

  1. Main menu (top right) - Page Settings

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

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

  • "positive" : only nodes that will pass the "propertyFilter" will be added to the visualization.

  • "negative" : all nodes except of nodes that will pass the "propertyFilter" will be added to the visualization.

  • "noFilter" : no filtering is used. Every node from exploring will be added to the visualization.

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:

  • "positive" : only edges that will pass the "propertyFilter" will be added to the visualization.

  • "negative" : all edges except of edges that will pass the "propertyFilter" will be added to the visualization.

  • "noFilter" : no filtering is used. Every edge from exploring will be added to the visualization.

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:

  • "MULTISELECT" : list of values. The list will be populated automatically with distinct values of the defined "property".

  • "RANGE_SLIDER" : Slider with range selection. Values that will be used as default slider values for the lower and higher

PFDO.values

Array of Strings or Numbers

Values that are used as a default setting of the Property Filter. Options:

  • for "type"="MULTISELECT" use an array of Strings (no upper limit), e.g. [ "value 1", "value 2", "value 3" ]

  • for "type"="RANGE_SLIDER" use an array of Numbers with exactly two values, e.g. [ 0.3, 1.0 ]

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:

  • "always" : the filter will be displayed in every exploring of the graph

  • "large" : threshold triggered showing of the filter. The threshold is set with "minNodes" and "minEdges"

  • "never" : the Filter is never automatically displayed. User can access the filter through the menu (arrow) next to the Exploring icon in the Tools panel

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.

Date format

Example of a valid value

Description

"epochTimeNumber"

4255414234

Integer value - number of miliseconds from 1.1.1970 (Unix epoch time). This is the fastest option because no parsing is involved and the value is used directly.

"epochTimeString"

"4255414234"

String that can be parsed to Integer value representing the number of miliseconds from 1.1.1970 (JavaScript epoch time).

"YYYY-MM-DD"

"2015-03-18"

Only date without time. Four digits year. Year first. Dash separator.

"YYYY-MM-DD hh:mm:ss"

"2015-03-18 20:23:59"

Date and time. Four digits year. Year first. Dash separator in date.

"YYYY.MM.DD hh:mm:ss"

"2015.03.18 20:23:59"

Date and time. Four digits year. Year first. Dot separator in date.

"DD.MM.YY hh:mm:ss"

"18.03.15 20:23:59"

Date and time. Two digits year. Day first. Dot separator in date.

"DD.MM.YYYY hh:mm:ss"

"18.03.2015 20:23:59"

Date and time. Four digits year. Day first. Dot separator in date.

timeline.interval

Integer

Interval defined in miliseconds. Typical values:

  • 1 hour = 3600000

  • 1 day = 86400000

  • 1 week = 604800000

  • 1 month (defined as 365days/12) = 2628000000

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:

  • "edges" - true/false for turning On/Off of the edge arrow rendering when the "edges" Relationship Model is used.

  • "dirMergedEdges" - true/false for turning On/Off of the edge arrow rendering when the "dirMergedEdges" Relationship Model is used.

  • "mergedEdges" - true/false for turning On/Off of the edge arrow rendering when the "mergedEdges" Relationship Model is used.

hideToolboxIcons

Array of Strings

List of Tools Panel features that should be turned off (hidden).

Current tools that can be suppressed with this setting:

  • "SELECT_OUTGOING" - hide the button for selecting of outgoing nodes.

  • "SELECT_INCOMING" - hide the button for selecting of incoming nodes.

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:

  • "LASSO"

  • "BOX"

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:

  • "INLINE" : all icons are visible in one line

  • "MENU" : only the last used icon is visible. Other icons are hidden in a drop-down menu.

  • "AUTO" : "INLINE" if the screen is wide enough, otherwise "MENU".

toolboxMenuTypes.selectionTools

String

"AUTO"

Configuration of the Selection Tools menu in the Tools panel. Possible values are:

  • "INLINE" : all icons are visible in one line

  • "MENU" : only the last used icon is visible. Other icons are hidden in a drop-down menu.

  • "AUTO" : "INLINE" if the screen is wide enough, otherwise "MENU".

toolboxMenuTypes.layoutTools

String

"AUTO"

Configuration of the Layout Tools menu in the Tools panel. Possible values are:

  • "INLINE" : all icons are visible in one line

  • "MENU" : only the last used icon is visible. Other icons are hidden in a drop-down menu.

  • "AUTO" : "INLINE" if the screen is wide enough, otherwise "MENU".

toolboxMenuTypes.relationshipModels

String

"AUTO"

Configuration of the Relationships menu in the Tools panel. Possible values are:

  • "INLINE" : all icons are visible in one line

  • "MENU" : only the last used icon is visible. Other icons are hidden in a drop-down menu.

  • "AUTO" : "INLINE" if the screen is wide enough, otherwise "MENU".

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

Default styles

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

Default styles

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

Default styles

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

Default styles

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

Default styles

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

Default styles

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

Default styles

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

Default styles

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

Default styles

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

Default styles

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

Default styles

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.