The buttons on the right let you switch between two modes: Graph Manipulation and Zoom/Move.

• Graph Manipulation mode lets you execute actions that modify the visualization. These actions include:
  • Drop removes selected vertices from visualization. Can also be executed from the tooltip.
  • Group selects multiple vertices and collapses them into a single one.
  • Ungroup selects a group of collapsed vertices and ungroups them.
  • Expand retrieves a configurable number of neighbors (hops) of selected vertices. Can also be executed from the tooltip.
  • Focus, like Expand, retrieves a configurable number of neighbors, but also drops all other vertices. Can also be executed from the tooltip.
  • Undo undoes the last action.
  • Redo redoes the last action.
  • Reset resets the visualization to the original state after the query.
• Zoom/Move mode lets you zoom in and out, as well as to move to another part of the visualization. The Pan to Center button resets the zoom and returns the view to the original one.

An additional mode, called Sticky mode, lets you cancel the action of dragging the nodes around.

You can click the Settings gear icon to display the Graph Visualization settings window.

The settings window lets you modify some parameters for the visualization, and it has tabs for General, Visualization, and Highlights. The following figure shows this window, with the Visualization tab selected.

Figure 19-8 Graph Visualization Settings Window

Description of "Figure 19-8 Graph Visualization Settings Window"

The General tab includes the following:

• Number of hops: The configurable number of hops for the expand and focus actions.
• Truncate label: Truncates the label if it exceeds the maximum length.
• Max. visible label length: Maximum length before truncating.
• Show Label On Hover: Controls whether the label is shown on hover.
• Display the graph legend: Controls whether the legend is displayed.

The Visualization tab includes the following:

• Theme: Select a light or dark mode.
• Edge Style: Select straight or curved edges.
• Edge Marker: Select arrows or no edge marker. This only applies to directed edges.
• Similar Edges: Select keep or collect.
• Page Size: Specify how many vertices and edges are displayed per page.
• Layouts: Select between different layouts (random, grid, circle, concentric, ...).
• Vertex Label: Select which property to use as the vertex label.
• Vertex Label Orientation: Select the relative position of the vertex label.
• Edge Label: Select which property to use as the edge label.

The Highlights tab includes customization options that let you modify the appearance of edges and vertices. Highlighting can be applied based on conditions (filters) on single or multiple elements. The following figure shows a condition (country = United States) and visual highlight options for vertices.

Figure 19-9 Highlights Options for Vertices

Description of "Figure 19-9 Highlights Options for Vertices"

A filter for highlights can contain multiple conditions on any property of the element. The following conditions 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)
• * (any: like a wildcard, can match to anything)

The visual highlight customization options include:

• Edges:
  • Width
  • Color
  • Label
  • Style
  • Animations
• Vertices:
  • Size
  • Color
  • Icon
  • Label
  • Image
  • Animations

You can export and import highlight options by clicking the Save and Import buttons in the main window. Save lets you persist the highlight options, and Load lets you apply previously saved highlight options.

When you click Save, a file is saved containing a JSON object with the highlights configuration. Later, you can load that file to restore the highlights of the saved session.

Live Search lets you to search the displayed graph and add live fuzzy search score to each item, so you can create a Highlight which visually shows the results of the search in the graph immediately.

If you run a query, and a graph is displayed, you can add the live search, which is on the settings dialog. On the bottom of the General tab, you will see these options.

• Enable Live Search: Enables the Live Search feature, adds the search input to the visualization, and lets you further customize the search.
• Enable Search In: You can select whether you want to search the properties of Vertices, Edges, or both.
• Properties To Search: Based on what you selected for Enable Search In, you can set one or more properties to search in. For example, if 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. (This also works for vertices.)
• Advanced Settings: You can fine-tune the search even more. Each of the advanced options is documented with context help, visible upon enabling.
  • Location: Determines approximately where in the text the pattern is expected to be found.
  • Distance: Determines how close the match must be to the fuzzy location (specified by location). An exact letter match which is distance characters away from the fuzzy location would score as a complete mismatch. A distance of 0 requires the match be at the exact location specified, a distance of 1000 would require a perfect match to be within 800 characters of the location to be found using a threshold of 0.8.
  • Maximum Pattern Length: The maximum length of the pattern. The longer the pattern (that is, the search query), the more intensive the search operation will be. Whenever the pattern exceeds this value, an error will be thrown.
  • Min Char Match: The minimum length of the pattern. Whenever the pattern length is below this value, an error will be thrown.

When the search is enabled, the input will be displayed in the top left part of the Graph Visualization component. If you start typing, the search will add a score to every vertex or edge, based on the settings and the search match.

To be able to see the results visually, you have to add a Highlight with interpolation set to a Live Search score and other settings based on the desired visual change.

You can provide the Graph Visualization application input data through URL parameters instead of using the form fields of the user interface.

If you supply the parameters in the URL, the Graph Visualization application automatically executes the specified query and hides the input form fields from the screen, so only the resulting visualization output is visible. This feature is useful if you want to embed the resulting graph visualization into an existing application, such as through an iframe. However, it is important to note that the application must run on the same domain as the graph visualization application.

The following table specifies the available URL parameters:

The following URL shows an example of visualizing the PGQL query SELECT v, e MATCH (v) -[e]-> () LIMIT 10 on graph myGraph with parallelism 4:

https://myhost:7007/ui/?query=SELECT%20v%2C%20e%20MATCH%20%28v%29%20-%5Be%5D-%3E%20%28%29%20LIMIT%2010&graph=myGraph&parallelism=4