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 three 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.
Property Formats	Enables you to configure the format for number and date properties defined in the graph schema. You can specify the locale, prefix, and suffix for number and date values. The configured format is applied consistently in graph captions and property tooltips.

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.
  
  Nested JSON scalar properties are displayed using dot notation, for example, hr_data.department.
- 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.
  
  Figure: Adding a New Vertex Style
  
  Description of the illustration vscode_add_vertex_style.png
- Opacity: Opacity of the vertex or edge.
- 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.
- Image: Specifies an image to use as the background for a vertex. Select Property to use the image URL from a selected property value. Alternatively, select URL and enter an image URL directly. Use Scale to adjust the image size. This option applies only to vertices.
- Grouping: Groups vertices based on a selected property. Enable Group, select the Group by property, and optionally enable Apply on load to apply grouping automatically when the graph loads. Use Add aggregation to configure aggregated property values for the group. This option applies only to vertices.
  
  The following example groups country vertices under a region.
  
  Figure: Adding a New Vertex Group
  
  Description of the illustration vscode_add_vertex_group.png