10.1 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 two tabs:

Parent topic: Getting Started with the Graph Visualization Extension for VS Code

10.1.1 General

The General tab is displayed as shown:

The following table describes the attributes in the General tab:

Figure 10-2 General Settings


Description of Figure 10-2 follows
Description of "Figure 10-2 General Settings"

Table 10-1 General Tab Attributes

Attribute Description
Vertex Label Orientation Determines where the selected vertex property will be displayed.
Vertex Caption Determines the property to be displayed for a vertex.

Click + Add more to add a vertex caption and select the required vertex Label and vertex Property.

Edge Caption Determines the property to be displayed for an edge.

Click + Add more to add an edge caption and select the required edge Label and edge Property.

Maximum Visible Caption Length Determines the maximum caption length before truncating.
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.

Display Size Determines the number of graph elements to be visualized on a page from the result set.

Parent topic: Configuring Settings in Graph Visualization for VS Code

10.1.2 Styles

The Styles tab is displayed as shown:

Figure 10-3 Styles Settings


Description of Figure 10-3 follows
Description of "Figure 10-3 Styles Settings"

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

Table 10-2 Configuring Vertex or Edge Style Attributes

Attribute Description
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:

  • Size: Size of the vertex or edge.
  • Color: Color of the vertex or edge.
  • Caption: Caption for the vertex or edge.
  • Animations: Type of animation (Pulsating or Flashing) .
  • Animation timing: Duration of the animation cycle.
  • Icon: Image for the vertex (does not apply for edges).

The following shows an example of vertex style configuration.

Figure 10-4 Adding a New Vertex Style


Description of Figure 10-4 follows
Description of "Figure 10-4 Adding a New Vertex Style"

Parent topic: Configuring Settings in Graph Visualization for VS Code