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:

• General
  
• Styles
  

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 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. Caution: Adding Vertex Caption in the General tab will not be supported in future releases of the Oracle SQL Developer Graph Visualization for VSCode extension. It is recommended that you add or edit a vertex caption by editing the style of the vertex element in the legend panel of your graph visualization.
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. Caution: Adding Edge Caption in the General tab will not be supported in future releases of the Oracle SQL Developer Graph Visualization for VSCode extension. It is recommended that you add or edit an edge caption by editing the style of the edge element in the legend panel of your graph visualization.
Maximum Visible Caption Length	Determines the maximum caption length before truncating.
Edge Marker	Supported edge markers are: None Arrow (default)
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.

10.1.2 Styles

The Styles tab is displayed as shown:

Figure 10-3 Styles Settings

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 Adding a New Vertex Style"