Configuring Settings in Graph Visualization for VS Code

You can click the Settings gear icon to open the Visualization settings slider.

The slider comprises the following four tabs:

General

The General tab is displayed as shown:

The following table describes the attributes in the General tab:

Figure: General Settings

Description of the illustration vscode_general_tab.png

Table: General Tab Attributes

Attribute	Description
Layout	Supported layouts are: Circle, Concentric, Force (default), Grid, Hierarchical, Preset, Radial, Random, and Geographical. The Force layout also supports a clustering option, which allows you to visualize a graph with clustered vertices. See Layouts in Property Graph Visualization Developer's Guide and Reference for more information.
Similar Edge Grouping	When this option is enabled, multiple edges between the same source and target vertices are grouped in the graph. Grouped edges appear as a single edge labeled with a number indicating how many edges were grouped.
Format Numbers	By default, this option is enabled so that numbers are displayed according to your regional or language settings, such as decimal and grouping separators.
Toolbar Size	Determines the size of the buttons and search box placed in the toolbar.
Edge Marker	Supported edge markers are: None Arrow (default)
Display Size	Determines the number of graph elements to be visualized on a page from the result set.

Graph Exploration

The Graph Exploration tab is displayed as shown:

Figure: Graph Exploration

Description of the illustration vscode_graph_exploration.png

You can configure the hop count when expanding one or more selected vertices using the Maximum Number of Hops drop-down in the Expand section.

You can visualize the evolution of a graph over time using the Network Evolution feature. The following table describes the attributes for configuring network evolution.

Table: Network Evolution Settings

Attribute	Description
Network Evolution	Switch on this toggle to configure network evolution for the graph.
Based On	Select the graph element to use for network evolution. You can base the network evolution on vertices, edges, or both.
Vertex Start Property	Select the property used to filter vertices. The graph time frame starts after this property value.
Vertex End Property	Optionally, select the property used to filter vertices. The graph time frame ends before this property value.
Edge Start Property	Select the property used to filter edges. The graph time frame starts after this property value.
Edge End Property	Optionally, select the property used to filter edges. The graph time frame ends before this property value.
Property Type	Select the data type of the selected property. Supported values are Integer and Date.
Advanced Settings	Optionally, expand to configure the following advanced network evolution options. Height: Select a value to specify the height of the network evolution chart. Chart Type: Select the chart type used to display network evolution. Granularity: Specify the aggregation granularity for the selected input unit. Exclude Values: Specify one or more values to exclude from the network evolution chart. Playback Step: Specify how often the playback advances, in milliseconds. Playback Timeout: Specify how many steps are taken per timeout during playback.

Styles

The Styles tab is displayed as shown:

Figure: Styles Settings

Description of the illustration vscode_styles_tab.png

To add a new vertex or edge style, click New vertex style or New edge style as appropriate and configure the following values:

Name: Name of the style.
Conditions: Click + to add a condition for an element (vertex or edge) and provide the following values:
- Property of the vertex or edge element.
- Operator to be applied. The following operators are supported:
  - = (equal to)
  - < (less than)
  - <= (less than or equal to)
  - > (greater than)
  - >= (greater than or equal to)
  - != (not equal to)
  - ~ (filter is a regular expression)
  - CONTAINS
  - CONTAINS_REGEX
- Value that needs to be fulfilled for the property and the operator
For all elements that meet the conditions, you can configure any of the following styling highlights:
- Interpolation: Configure interpolation based on the size or color of the vertices or edges. Interpolation will be applied proportionally, between the Minimum and Maximum values.
- Size: Size of the vertex or edge.
- Color: Color of the vertex or edge.
- Caption: Caption for the vertex or edge. You can also configure the caption font size, color, orientation, and maximum length.
- Animations: Type of animation (Pulsating or Flashing) .
- Animation timing: Duration of the animation cycle.
- Border: Border size and color for the vertex. This option does not apply for edges.
- Icon: Image for the vertex. This option does not apply for edges.
- Shape: Shape of the vertex (does not apply for edges). Supported values are Circle, Ellipse Square, Rectangle, Triangle, Diamond, Pentagon, Hexagon, and Octagon.

The following example shows a vertex style configuration that uses linear color interpolation based on the ID property, ranging from 100 ( minimum) to 900 ( maximum).

Figure: Adding a New Vertex Style

Description of the illustration vscode_add_vertex_style.png

Groups

The Groups tab is displayed as shown:

Figure: Groups Configuration

Description of the illustration vscode_groups_tab.png

To add a new vertex or edge group, click New Vertex Group or New Edge Group as required and configure the following values:

Name: Name of the group.
Group by: Property to group elements by. If specified, then one group per each available value of the specified property from all vertices fulfilling the given conditions is created. Otherwise, the grouping results in just one group containing all allowable vertices.
Apply group on load: Switch ON this toggle if you wish the grouping to be automatically applied each time the graph is loaded.
Conditions: Click + Add more to define one or more conditions that determine which vertices or edges are included in the group. For each condition, specify:
- Property of the vertex or edge element.
- Operator to be applied. The following operators are supported:
  - = (equal to)
  - < (less than)
  - <= (less than or equal to)
  - > (greater than)
  - >= (greater than or equal to)
  - != (not equal to)
  - ~ (filter is a regular expression)
- Value that needs to be fulfilled for the property and the operator
Aggregations: Click + Add aggregation to define aggregated properties for the group. For each aggregation, specify:
- Property: The property to aggregate.
- Aggregation: The aggregation function to apply. Supported values are: average, min, max, sum, count and distinctCount.
Click Save.

The following example shows the configuration of a vertex group. The configuration creates one grouped vertex for each vertex label, considering only vertices with ID < 300, and calculates the average aggregation of the BALANCE property in each group.

Figure: Adding a New Vertex Group

Description of the illustration vscode_add_vertex_group.png

If the grouping is configured to be automatically applied during graph loading, then the conditional grouping is applied on the whole graph displayed in the visualization panel.

Otherwise, you can apply the predefined group as shown:

Click the Select Group Option list in the graph visualization toolbar
Select the group name.

Figure: Predefined Group Visualization

Description of the illustration vscode_grouping_viz.png

In the preceding visualization, the grouping criterion is ID < 300. All vertices whose ID is less than 300 are combined into a single grouped vertex. The tooltip shows the group count and the aggregated property value.