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
The General tab is displayed as shown:
The following table describes the attributes in the General tab:
Description of the illustration vscode_general_tab.png
Table: 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:
|
| 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. |
Styles
The Styles tab is displayed as shown:
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
Click + to add a condition for an element (vertex or edge) and provide the following values:
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.
-
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 example shows a vertex style configuration that uses linear color interpolation based on the ID property, ranging from 100 ( minimum) to 900 ( maximum).
