Settings for Graph Visualization

The Settings modal lets you specify options that control how graph data is displayed when it is visualized.

You can invoke the settings modal by clicking the settings icon as shown highlighted in the following figure:

Description of the illustration settings_icon.png

The settings dialog box appears as follows:

Description of graph_settings_dialog.png follows

Description of the illustration graph_settings_dialog.png

The Settings modal contains the following tabs that group the options according to their scope:

The specific settings available on each tab can vary depending on the type of visualization. This page focuses on settings for a graph visualization.

Setup

The Setup tab contains the general settings that affect the entire visualization, including search-related options. The following options are included:

Option	Description
Height	Height of the visualization. Setting the value to 0 will take the default height.
Display Graph Legend	When enabled, the graph legend will be displayed.
Maximum Visible Label Length	Maximum character length of a truncated label.
Truncate Labels	If enabled, labels will be truncated at a specific length (see option Maximum Visible Label Length).
Show Label on Hover	When enabled, full labels will appear as a tooltip when hovering over a vertex.
Number of Hops	Number of hops for graph manipulation.
Enable Visible Graph Mode	Enables you to store your visible graph along with any graph manipulation actions in a variable.
Enable Live Search	Enables the search, adds the search input to the visualization, and allows to further customize the search. Live search adds a live "fuzzy" search score to each item, so you can create a highlight that shows the results of the search in the graph immediately. (In the Highlights section, specify an Interpolate value of `LiveSearch`.)
Enable Search In	For live search, you can select whether you want to search the properties of vertices, edges, or both.
Properties To Search	For live search, based on the preceding setting, you will be allowed to set one or more properties to search in. When you disable the search for edges but you had a property from edges selected, it will be stored and added back when you enable search for the edges again. The same applies for vertices.
Advanced Settings	If you want to fine tune the search even more, you can enable the advanced settings for the search. Each of the advanced options is documented with context help, visible upon enabling.

Customization Settings

These are visualization settings that affect the visual aspects of the display. Customization settings can include the following options:

General

Option	Description
Dimension	Switches between 2D (default) and 3D views.
Theme	Toggles the visualization between light and dark theme (useful for presentations).
Edge Marker	Determines if the outgoing edges have an arrow to show the flow direction.
Similar Edges	Collects similar edges when this button is checked. Toggled edges give no overview of specific edges but a generalized tooltip.
Page Size	Determines how many entries from the result set should be visualized.
Animate Changes	Toggles animation on or off.

Layouts

Graph Studio supports many different graph layouts. Each layout has its own algorithm, which computes the positions of the nodes and affects the visual structure of the graph.

The following graph layout options are supported:

Option	Description
Random Layout	Puts nodes in random positions within the viewport.
Grid Layout	Puts vertices in a well-spaced grid. It supports the following configurable properties: Rows: Sets the number of rows in the grid. Columns: Sets the number of columns in the grid. Avoid Overlap: Prevents overlapping of vertices (may cause some of the vertices to be placed outside the viewport if there is not enough space within the viewport).
Circle Layout	Positions vertices in a circle. It supports the following configurable properties: SaveRadius: Sets the radius of the circle. Radius: Prevents overlapping of vertices (may cause the some of the vertices to be placed outside the viewport if there is not enough space within the viewport).
Concentric Layout	Positions vertices in concentric circles. It supports the following configurable properties Minimum Node Spacing: Sets the minimum spacing in between vertices (used for radius adjustment). Avoid Overlap: Prevents overlapping of vertices (may cause the some of the vertices to be placed outside the viewport if there is not enough space within the viewport).
Force Layout	Attempts to create an aesthetically-pleasing graph based on the structure of the graph, with the goal of positioning the vertices in the viewport so that all the edges are of approximately equal length and there are as few crossing edges as possible. It has the following configurable properties: Edge Distance: Sets every edge to the specified length (can affect the padding between vertices). Force Strength: Influences the underlying forces (such as to remain within the viewport or to push vertices away from each other). Velocity Decay: Determines the speed at which the simulation ends. Vertex Padding: Determines the proximity of different vertices when rendered.
Geographical Layout	Enables you to overlay the graph on a map, given latitude and longitude coordinates. The latitude and longitude positions can be selected from the vertex properties.
Hierarchical Layout	Organizes the graph using a DAG (Directed Acyclic Graph) system. It is especially suitable for DAGs and trees. It supports the following configurable properties: Ranking Algorithm: Specifies the type of algorithm used to rank the vertices. Possible values are Network Simplex, Tight Tree and Longest Path. Network Simplex: Assigns ranks to each vertex in the input graph and iteratively improves the ranking to reduce the length of the edges. Tight Tree: Constructs a spanning tree with tight edges by adjusting the ranks of the input vertex. The length of a tight edge matches its `minlen` attribute. Longest Path: Pushes vertices to the lowest layer possible, leaving the bottom ranks wide and leaving edges longer than necessary. Direction: Specifies the direction of the graph. Possible values are Top Bottom, Bottom Top, Left Right, and Right Left Alignment of Rank Nodes: Determines the alignment of the ranked vertices. Possible values are Up Left, Up Right, Down Left and Down Right Vertex Separation: Sets the horizontal separation between the vertices. Edge Separation: Sets the horizontal separation between the edges. Rank Separation: Sets the separation between two ranks (levels) in the graph.
Radial Layout	Displays the dependency chain of a graph by using an outwards expanding tree structure. It can be especially useful if the graph data has a hierarchical structure and contains many children for each parent vertex. It has the following configurable properties: Starting Point (left, top, right, bottom): Defines the starting point of the radial layout and thus allows you to change the orientation. Arc Degree slider (0° - 360°): Specifies the arc degree of the circle used for the radial layout. Higher arc degree values can help to detangle the network; lower values make it more compact. Packing slider (0 - 5): Reduces the separation gap between neighboring vertices if they share the same parent vertex. If set to 0, no packing will be applied. Intelligent Separation: Reduces the separation gap proportionally to the depth level of each vertex.

Labeling of Nodes and Edges

The following graph options are supported for labeling of nodes and edges:

Option	Description
Node Label	The selected property will be displayed on the node.
Node Label Orientation	Determines where the selected property will be displayed. Options are: bottom, center, top, right, left.
Edge Label	The selected property will be displayed on the edge.

Network Evolution

Enable Network Evolution: Enables you to visualize the evolution of a graph over time.

Highlights Settings

Highlights let you customize the appearance of nodes and edges based on search criteria. You can create new highlights or edit existing ones. As you create or edit a highlight, an automatic preview is displayed.

Search criteria can include:

Element type to search for (node or edge).
Search conditions.
Condition operator (match all or any).

Each search condition includes:

The property of that element (such as its ID value).
The operator to be applied (such as smaller, greater, equal, or regex).
The value that must be fulfilled for the operator and property.

You can highlight all elements that fulfill the criteria. However, you can instead use the list of elements that fulfill the criteria as a base, and then highlight just the incoming or outgoing edges. If the search was applied to edges, you can also highlight the nodes from the start or end of the edge.

A highlight value can either be a constant or an interpolation based on some property value. Interpolation settings include:

The property of the element
The min or max value (If not specified, the min or max property value from all matched elements will be used, and the highlight will be applied proportionally between the selected min and max values of the specified property.)

The following options apply to highlights:

Option	Description
Size	Sets the size of the node/edge to the specific value. If interpolation is selected, the slider will have two ends and the size of the node/edge is interpolated based on the result of the search criteria.
Color	Sets the color of the node/edge. If interpolation is selected, the combobox will let you add multiple colors. All nodes/edges are interpolated between these colors based on the result of the search criteria.
Icon	Sets an icon for the node (not applicable to edges). If interpolation is selected, multiple icons can be selected.
Label	Sets the label for the node (not applicable to edges).
Image	Sets an image for the node based on an `href` property (not applicable to edges).
Animations	Lets you set certain animation CSS classes for nodes and edges (such as flashing, dotted-line, animated dotted-line, pulsating) and the duration of an animation cycle.
Legend	Adds text in the graph legend for elements where this highlight applies. When you create a highlight, you can choose to include the highlight in the legend displayed next to the graph by providing a title. Updates to the highlight will be reflected in the legend.

Smart Explorer Settings

Smart expand: Allows you to expand vertices based on the specified conditions for properties of navigation and destination vertices or edges.
Smart group: Allows you to group vertices based on specified conditions.