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 modal contains the following tabs that group the options according to their scope:

General

The General tab contains the general settings that affect the entire visualization, including search-related options. This tab comprises the following sections:

Customization

These are visualization settings that affect the visual aspects of the display.


Description of customization_setting.png follows
Description of the illustration customization_setting.png

Customization settings include the following options:

Option Description
Height Height of the visualization. Setting the value to 0 will take the default height.
Theme Toggles the visualization between light and dark theme (useful for presentations).
Similar Edges Similar edges can be collected when this button is checked. Toggled edges give no overview of specific edges but a generalized tooltip.
Edge Marker Determines if the outgoing edges have an arrow to show the flow direction.
Display Graph Legend The graph legend will be displayed when this toggle is enabled.

Caption

The Caption section is displayed as shown:


Description of caption_settings.png follows
Description of the illustration caption_settings.png

Caption settings include the following options:

Option Description
Vertex Caption Orientation Determines where the selected property will be displayed. Options are: Bottom, Center, Top, Right, Left.
Vertex Captions A configurable list of captions based on vertex labels and their associated properties. You can add or remove captions, and the selected properties will be displayed on the corresponding vertices in the graph.
Edge Captions A configurable list of captions based on edge labels and their associated properties. You can add or remove captions, and the selected properties will be displayed on the corresponding edges in the graph.
Maximum Visible Caption Length Maximal char length of a truncated caption.
Truncate Captions If enabled, captions will be truncated at a specific length as specified in the previous option.
Show Caption on Hover If enabled, full captions will appear as a tooltip when hovering over a vertex.

Layouts

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


Description of layout_settings.png follows
Description of the illustration layout_settings.png

The following graph layout options are supported:

Option Description
Random Layout Positions the vertices in random positions within the viewport.
Grid Layout Positions the vertices in a well-spaced grid. It supports the following configurable property:
  • Spacing: Sets the space between the elements in the grid.
Circle Layout Positions vertices in a circle. It supports the following configurable property:
  • Radius: Sets the radius of the circle.
Concentric Layout Positions vertices in concentric circles. It supports the following configurable property:
  • Minimum Vertex Spacing: Sets the minimum spacing in between vertices. It is used for radius adjustment.
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:
  • Enable Cluster Layout: Determines if cluster based layout is enabled. If this parameter is switched ON, then the following cluster options will be displayed:
    • Cluster By: By default, the cluster layout uses the first element in vertex labels to form the cluster. Alternatively, this can be set to the property name of a vertex, and the clusters will be formed based on the property value.
    • Distance Between Clusters: Influences the forces among clusters (that is, to push clusters away from each other).
    • Spacing Within Clusters: Determines how close different vertices are rendered next to each other within the clusters.
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 that latitude and longitude coordinates exist as graph properties on the graph's vertices. It has the following configurable properties:
  • Latitude Property: The vertex property to use for determining the latitude of a vertex.
  • Longitude Property: The vertex property to use for determining the longitude of a vertex.
  • Map Type: You can select map type either in map visualization or graph visualisation settings, or provide your own sources and layers. Supported types are:
    • World Map ("oracle-elocation")
    • OSM Positron (default)
    • OSM Bright
    • OSM Darkmatter
    • Custom type: Custom type has the following two additional fields. It is important to note that you must provide these attribute properties separately from visualization because of security reasons.
      • Sources: Provide your own sources in JSON format which will be used in the map. For example:
        { "oracle-elocation":
  {
    "type": "raster",
    "tiles": ["https://elocation.oracle.com/mapviewer/mcserver/ELOCATION_MERCATOR/world_map_mb/{z}/{y}/{x}.png"],
    "tileSize": 256,
    "minzoom": 0,
    "maxzoom": 18
  }
}
      • Layers: Provide the layers that you want to display on the map as an array of JSON elements. For example:
        [{
  "id": "elocation-tiles",
  "type": "raster",
  "source": "oracle-elocation"
}]

Also, note the following when visualizing a graph on a map:

  • You can change the viewport of the map by clicking and dragging the mouse on the map.
  • You can zoom into the map using the + / - buttons, through the scrolling wheel of your mouse, or through pinching motions using your trackpad.
  • You can also use the Shift key and then click and drag the mouse to define a field. The view will zoom into that area, changing both viewport and zoom level at the same time.
  • You can change the orientation and angle of the viewport by pressing Ctrl and then clicking and dragging the mouse on the map.

Pagination

The Pagination section appears as shown:


Description of pagination_settings.png follows
Description of the illustration pagination_settings.png

The parameter that supports pagination is:

  • Page Size: This controls the number of items to be visualized on the page from the result set.

Live Search

The Live Search section appears as shown:


Description of live_search_settings.png follows
Description of the illustration live_search_settings.png

You can enable Live Search to search the displayed graph. Live fuzzy search score is added to each item and you can create a Style which visually shows the results of the search in the graph immediately. See Use Live Search in Graph Visualization for more information.

Graph Exploration

The Graph Exploration tab appears as shown in the following figure:


Description of graph_exploration_settings.png follows
Description of the illustration graph_exploration_settings.png

The Graph Exploration tab comprises the following sections:

Graph exploration

  • Number of Hops: You can specify the number of hops for graph manipulation.

Visible graph sharing

  • Enable Visible Graph Mode: You can enable or disable the visible graph mode.

    See Enable Visible Graph Mode for more information.

Network Evolution

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

See Visualize a Dynamic Graph for more information.

Styles

The Styles tab allows you to customize the appearance of vertices and edges based on search criteria. It allows you to modify collectively styling such as color, size, or icons for vertices or edges that match the search criteria.


Description of styles_tab.png follows
Description of the illustration styles_tab.png

On the Styles tab, you can:
  • View the list of existing styles for vertices and edges.
  • Filter the list of styles based on an input string or applicable tags.
  • Drag and reorder the items on the list.
  • Create custom vertex or edge styles.
  • Edit an existing style.
  • Enable or disable a style.

The following describes the properties and operations when creating a new style:


Description of create_new_style.png follows
Description of the illustration create_new_style.png

  • Name: Name of the style. This adds a text in the graph legend for elements where this style applies. This field is mandatory for styles creation. Style value can be either constant or 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.)
  • Conditions The search condition lets you define how vertices or edges that are influenced by a style are filtered. To configure a search criteria, you must specify the element type to search for (vertex or edge), search conditions, condition operator (match all or any). Each condition includes the property of the given element, the operator you want to apply (=, <, <=, >, >=, !=, ~, *), the property value that needs to be fulfilled for the operator. It uses numeric comparison if the property value is convertible to number and lexicographic comparison otherwise.
  • The following options apply to highlight the vertices or edges that match the search criteria:
    • Size: Sets the size of the vertex or edge to the specific value. If interpolation is selected, the slider will have two ends and the size of the vertex or edge is interpolated based on the result of the search criteria.
    • Color: Sets the color of the vertex or edge. If interpolation is selected, the combobox will allow to add multiple colors. All vertices or edges are interpolated between these colors based on the result of the search criteria.
    • Icon: Sets an icon to the vertex (not applicable to edges). If interpolation is selected, multiple icons can be selected.
    • Caption: Sets the caption to the vertex or edge.
    • Image: Sets an image to the vertex based on an href property (not applicable to edges).
    • Animations: Allows to set certain animation css classes to vertices and edges (such as flashing, dotted-line, animated dotted-line, pulsating) and duration of an animation cycle.

Smart Explorer

The Smart Explorer tab supports the following actions:

  • Smart Expands: Allows you to expand vertices based on the specified conditions for properties of navigation and destination vertices or edges. See Expand Vertices Using Smart Expand for more information.
  • Smart Groups: Allows you to group vertices based on specified conditions. See Group Vertices Using Smart Group for more information.