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 settings_icon.png follows
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

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.
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.
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.

Labeling

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

Option Description
Vertex Label The selected property will be displayed on the vertex.
Vertex 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

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.

Filter By can include:

  • Element type to search for (vertices or edges).
  • Filter conditions.
  • Condition operator (match all or any).

Each filter 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 vertex 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 minimum or maximum value (If not specified, the minimum or maximum property value from all matched elements will be used, and the highlight will be applied proportionally between the selected minimum and maximum 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 Title 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

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