Visual Query Builder Overview

Visual Query Builder

In TigerGraph 3.0, we are proudly introducing Visual Query Builder -- a visual way of building your graph business logic. In the Build Graph Patterns page, you can create visual patterns in drag-and-drop fashion, which intuitively represent the questions you want to ask. For these cases, you don't need to write GSQL anymore!
By adding the Visual Query Builder component, GraphStudio becomes a complete visual SDK for users to build graph applications from end to end without writing a single line of code!
Currently, Visual Query Builder is still in beta phase. Please expect lots of improvements and changes coming in the future!

Basic Concepts

A visual pattern is a declarative way of describing a template subgraph structure, and all the subgraph structures that the visual pattern is homomorphic with are valid matching results.
Visual patterns are constructed by vertex patterns, edge patterns and widgets.
This is a basic vertex pattern within a visual pattern:
This is a vertex pattern with 2 filters, 1 attachment, 2 ordering, and limit:
This is a vertex pattern that will be output in the pattern execution result. You can see the glow around the border and the highlight at the label:
This is a basic edge pattern:
This is an edge pattern with 1 filter:
This is an edge pattern that will be output in the pattern execution result:
This is a union widget:
A widget has input vertex patterns and output vertex patterns:
This is the visual pattern matching all the people who are younger than 30 years old in the year 2019. The filter ((2019 - birthYear) < 30) on the person vertex pattern provides the matching condition:
This is the visual pattern matching all the departments having at least one male employee:
This is the visual pattern that matches the hometown of the most people having the programming skill. The attachment COUNT(DISTINCT p) as cnt annotates the number of people born in each city that have the programming skill. Then we order the city vertices by their descending cnt value, and choose the top 1 city:
This is the visual pattern matching all such three persons A, B and C, where A is B's friend, and A is C's friend, and B is C's manager:
This visual pattern matches all the people that either are born in Redwood City or attended Stanford University, but didn't work for Google:
Now you understa how the visual patterns look like. Let's walk through all the concepts in depth.

Working Panel

Working panel is the central component (both visually and logically) of Visual Query Builder. Your visual patterns are rendered here.
Like other pages in GraphStudio, you can zoom-in, zoom-out and drag the visual pattern. If you have unsaved changes to the pattern, or containing errors in the pattern, some warning messages will show at the top left corner of working panel:
If you click the message indicating errors, the Console will switch to Problems tab:
You can click the error messages. For some errors, the vertex patterns, edge patterns and widgets involved in the error will be marked red to facilitate your debugging:

Pattern List

The pattern list panel contains three sections:

Graph patterns

The graph patterns section lists all the visual patterns you have created for current graph. You can click
to create new patterns, or click
to delete existing ones.

Description

Other than the visual view of the graph pattern, you can optionally add a description for the pattern. This can help other users to understand what problem you are trying to solve.
After changing the description, don't forget to confirm the change:
Could not load image
Changing description is considered as a change to the visual pattern, don't forget to save the pattern in the end.

Pattern parameters

If you added some parameters in your visual pattern, you need to provide the values to the parameters when running the pattern.
Click
to run the pattern.

Toolbar

The toolbar options, from left to right, are the following:
Toolbar option
Functionality
Save the graph pattern.
Save the graph pattern as a different pattern under a new name.
Save as GSQL query: show the GSQL query generated from the pattern and save. See more information here.
Console: open/close the console panel.
Configuration panel: open/close the config panel. By default the config panel is closed. You can either open the panel by clicking this button, or double click a vertex pattern or edge pattern in the visual pattern to open the config panel.
Render pattern options: config how much detail is shown on the pattern. See more information here.
Run: run the visual pattern. If the pattern doesn't have any parameters, it will run directly, otherwise the Pattern parameters section will expand for you to provide the parameter values.
Undo and redo: undo and redo the changes on the visual pattern. The whole editing history of each visual pattern since entering Build Graph Patterns page is preserved.
Edit: edit the selected vertex pattern or edge pattern. This is same as double-clicking one vertex or edge pattern.
Delete: delete selected vertex patterns, edge patterns and widgets. You can hold the Shift key to select multiple elements to delete.
Add a vertex pattern: add a new vertex pattern into the current visual pattern. See more information here.
Add an edge pattern: add a new edge pattern into the current visual pattern. See more information here.
Pick: a shortcut for adding vertex patterns and edge patterns into the visual pattern. See more information here.
Merge: select multiple vertex patterns, and click this button to merge them together. This is a fast way to connect multiple shorter patterns into a longer one. See more information here.
Widget: see more information here.
Filter: click this button then click a vertex pattern or edge pattern, and the config panel will enter editing mode for the selected vertex or edge pattern, with the Filter section expanded.
Attachment: click this button then click a vertex pattern, and the config panel will enter editing mode for the selected vertex pattern, with the Attachment section expanded.
Order by: click this button then click a vertex pattern, and the config panel will enter editing mode for the selected vertex pattern, with the Order section expanded.
Limit: click this button then click a vertex pattern, and the config panel will enter editing mode for the selected vertex pattern, with the Limit section expanded.
Output: click this button, then click vertex patterns and edge patterns of the visual pattern to toggle whether to output them or not. You can see the output glow of the selected vertices or edges
turning on and off.

Configuration Panel

You can edit vertex patterns and edge patterns from config panel.

Basic Info for vertex pattern

If you enter editing mode of a vertex pattern and expand the Basic Info section, you can edit its name, decide whether or not to put it into result, change its vertex type, provide optional matching conditions by giving a list of ids, or provide a parameter name.
Could not load image
You can add/drop id in the list:
Could not load image
Or add an input parameter:
Could not load image

Basic Info for edge pattern

If you enter editing mode of an edge pattern and expand the Basic Info section, you can edit its name, decide whether or not to put it into result, or change its edge type. You can also specify this edge pattern as a regex match by providing Repeat as least (a non-negative integer) and Repeat at most (a positive integer). Due to current GSQL limitations, if you decide to change these numbers, you cannot give the edge pattern a name or put it into result.
When finished editing, you need to confirm the change. You can also cancel the change if you made a mistake:
If you want another vertex pattern or edge pattern to refer to current selected vertex or edge pattern's attributes, you need to give it a name.

Filter

If you expand the Filter section, you can add/edit/delete filters for the selected vertex or edge pattern:
Click
besides the filter expression and enter editing mode of the filter:
You can add multiple filters for each vertex and edge pattern, and they are AND relationship when executing the pattern. Building the filter is similar with building attribute filter in Explore Graph page. One thing special here is that you can refer to attributes on other vertex patterns and edge patterns. Choose **Attribute of vertex or edge **as expression type, then choose the name of the vertex or edge pattern whose attribute you want to refer to (see above why we need give a name to vertex or edge patterns), then choose the attribute you want to refer to.
When finished editing, you need confirm or cancel the change:

Attachment

If you expand the Attachment section, you can add/edit/delete attachments for the selected vertex pattern (aggregation on edge patterns is not supported):
Click
beside one attachment and enter editing mode for the attachment. You can edit both the attachment expression and attachment name:
When finished editing, you need to confirm or cancel the change:
In attachments, you can either attach a single value or attach the results of an aggregation function, to all the matched vertex entity results.
Attaching a single value means attaching the given value to all vertex entities within the matched result. If for example, you choose to attach the integer value 1, then that value will be attached to all the matched vertex entity results where the attachment was applied to. If the attachment is applied to an entity that is involved in multiple matches, then the attached value is non-deterministic.
Attaching the results of an aggregation function means grouping all the matching results by the vertex entity which match the vertex pattern, and then aggregated based on the expression.
Take this example:
Name
Attachment expression
Explanation
singleValueInt
1
Attach the integer number 1 to each matched city vertex.
singleValueReal
1.5
Attach the real number 1.5 to each matched city vertex.
singleValueString
"singleValueString"
Attach the string "singleValueString" to each matched city vertex.
singleValueBool
true
Attach the boolean value true to each matched city vertex.
singleValueDatetime
2021-01-01
Attach the datetime value 2021-01-01 to each matched city vertex.
singleValueVertex
p
Attach one of the vertex ids of the matched vertices p to the matched city vertex connected to vertices p.
singleValueEdge
b
Attach one of the edge ids of the matched edges b_i to the matched city vertex with edges b.
singleValueAttribute
name
Attach the attribute name of the matched city vertex to the matched city vertex itself.
singleValueAttributeOfVertexOrEdge
p.name
Attach one of the name attribute of the matched vertices p to the matched city vertex connected to vertices p.
countP
COUNT(DISTINCT p)
Count number of distinct person vertices matched to each city vertex.
countMatched
COUNT(*)
Count number of matches each city vertex involves in.
sumPHeight
SUM(p.height)
Sum the height attribute of all person vertices matched to each city vertex.
minPBirthyear
MIN(p.birthYear)
Get the minimal height attribute of all person vertices matched to each city vertex.
maxPBirthyear
MAX(p.birthYear)
Get the maximal height attribute of all person vertices matched to each city vertex.
avgPBirthyear
AVG(p.birthYear)
Get the average value of height attribute of all person vertices matched to each city vertex.
collectP
COLLECT(p)
Collect all person vertices matched to each city vertex.
collectPMarried
COLLECT(DISTINCT p.married)
Collect all distinct person vertices' married status matched to each city vertex.
avgPAge
AVG2021 - p.birthYear
Calculate the average age of all person vertices matched to each city vertex.
Consider we have the following matching result:
We have the following aggregation result table for city vertex san jose:
City vertex
Attachment result
Explanation
san jose
singleValueInt = 1
Just attach the integer number 1 on the matched city vertex.
san jose
singleValueReal = 1.5
Just attach the real number 1.5 on the matched city vertex.
san jose
singleValueString = singleValueString
Just attach the string value "singleValueString" on the matched city vertex.
san jose
singleValueBool = true
Just attach the boolean value true on the matched city vertex.
san jose
singleValueDatetime = ["2020-01-01 00:00:00"]
Just attach the datetime value 2020-01-01 on the matched city vertex.
san jose
singleValueVertex = ["Emily"] OR singleValueVertex = ["Kevin"]
There are two person vertices connected to city vertex san jose "Emily" and "Kevin". The resulting value stored in singleValueVertex is non deterministic and could be either "Emily" or "Kevin".
san jose
singleValueEdge = [ { "attributes": { "birthday": "1992-05-23 00:00:00" }, "directed": true, "e_type": "born_in", "from_id": "Emily", "from_type": "person", "to_id": "san jose", "to_type": "city" } ] OR singleValueEdge = [ { "attributes": { "birthday": "1992-05-23 00:00:00" }, "directed": true, "e_type": "born_in", "from_id": "Emily", "from_type": "person", "to_id": "san jose", "to_type": "city" } ]
The city vertex san jose is connected to two born in edges, one of them connects the san jose vertex to the person vertex "Kevin" and the second edge connects the san jose vertex to the person vertex "Emily". The resulting value stored in singleValueEdge is non deterministic and could be either one of these edges.
san jose
singleValueAttribute = redwood city
The city vertex san jose has the attribute name and the value of that is attribute is attached to the san jose vertex.
san jose
singleValueAttributeOfVertexOrEdge = Emily OR singleValueAttributeOfVertexOrEdge = Kevin
The city vertex san jose is connected to two person vertices, one of them has the attribute name = "Emily" and the other has the attribute name = "Kevin". The resulting value stored in singleValueAttributeOfVertexOrEdge is non deterministic and could be either "Emily" or "Kevin".
san jose
countP = 2
Kevin and Emily
san jose
countMatched = 3
(san jose)←[born_in]-(Kevin)-[person_has_skill]→(programming)
(san jose)←[born_in]-(Kevin)-[person_has_skill]→(public speech)
(san jose)←[born_in]-(Emily)-[person_has_skill]→(human resource)
san jose
sumPHeight = 511
Kevin.height + Kevin.height + Emily.height = 173 + 173 + 165
san jose
minPBirthyear = 1991
Min(Kevin.birthYear, Kevin.birthYear, Emily.birthYear)
san jose
maxPBirthyear = 1992
Max(Kevin.birthYear, Kevin.birthYear, Emily.birthYear)
san jose
avgPBirthyear = 1991.33333
(Kevin.birthYear + Kevin.birthYear Emily.birthYear) / 3
san jose
collectP = [Kevin, Kevin, Emily]
san jose
collectPName = [false]
Both Kevin and Emily’s married status is false.
san jose
avgPAge = 29.6667
2021 - Kevin.birthYear) + (2021 - Kevin.birthYear) + (2021 - Emily.birthYear / 3
As you can see above the values of attaching a single value for datetime, vertex and edge are stored in a list. This is because, we currently do not have an accumulator to store these data types directly yet.
The data types supported for single value attachments are: integer, real, string, bool, datetime, vertex and edge.

Order

If you expand the Order section, you can add/edit/delete ordering for the selected vertex pattern (ordering on edge patterns is not supported):
Click
beside the ordering and enter editing mode for the ordering. You can edit both the ordering expression and whether results are in ascending or descending order:
When finished editing, you need to confirm the change:
You can refer to attachments in ordering expression. You can add multiple orderings, which follow the multi-key ordering rule (upper ordering dominates).
We support ordering by data of types: integer, real, string and datetime. However, single value attachments with the type datetime are stored in a list, thus, we currently do not support ordering based on single value attachments that have the datetime data type.

Limit

If you only want a subset of your matching result, you can use limit. Only the top limit results will be returned based on your ordering settings. If you don't have orderings, the result will be randomly picked from all matchings.
If you expand the Limit section, you can add/edit/delete limit for the selected vertex pattern (limit on edge patterns is not supported):
Toggle use limit checkbox to enable/disable limit. You can also edit the limit number:
When finished editing, you need confirm or cancel the change:

Console panel

The console panel toolbar is located on the left side of the console. The toolbar provides options for you to configure the way content is displayed in the console.
The console panel
The Console panel shows the graph schema, the result of the last pattern execution result, and errors the visual pattern has. Each execution of a pattern generates two types of results: a visualized graph and JSON text. On the left is a toolbar with buttons for switching between the tabs. The buttons, from top to bottom, are the following:
Menu option
Functionality
Expand/Collapse: expand or collapse the Console panel.
Graph schema: show the graph schema.
Visualize graph result: show the visual result of the last run pattern.
View table result: show query result in a tabular format
View JSON result: show the raw text result in JSON format of the last run pattern.
Problems: show the errors in the visual pattern.Graph schema

Save as

The 'Save as' feature allows users to save the current pattern as a new pattern under a new name. After clicking the 'Save as' button the user will be asked to input a unique name for the new pattern. Then, the user will be redirected to the new pattern, and the pattern the user saved as the new pattern will return to its last saved state.
For example, let's say that the user saves the following pattern:
The user then continues to make changes and then decides to save this pattern as a new pattern with a new name, and clicks on the 'Save as' button.
Here is the dialog that prompts the user to enter a name for the new pattern:
After entering the name the user gets redirected to the new pattern:
Here is the previous pattern returned to its last saved state:
The new pattern contains all the history (can undo and redo) of the previous pattern, whilst the previous pattern loses its history. This imitates the behavior of most text editors.

Save as GSQL query

You can view the GSQL query generated from your visual pattern and save it. Then you can access this query from Write Queries page, modify your query, interpret it, install it and run it.

Render pattern options

There are three different rendering options.
By default, Pattern detail and Output glow are checked. All the filters, aggregations, ordering conditions and limits are rendered, and the vertex and edge patterns that will be in result will be highlighted with glow:
If Pattern detail is not checked, add-on marks will indicate that there are filters, aggregations, ordering conditions and limits on corresponding vertex patterns and edge patterns:
If Pattern add-on is not checked, the add-ons will be hidden:
If Output glow is not checked, the output indicating glow is hidden:

Add a vertex pattern

Click
, and a new vertex pattern will be added to the visual pattern. You are in the editing mode of the newly added vertex pattern.

Add an edge pattern

Click
, then click the source vertex pattern of the edge pattern:
Then click the target vertex pattern of the edge pattern. A new edge pattern will be added to the visual pattern. You are in the editing mode of the newly added edge pattern:

Pick

Pick is a fast way to build your visual pattern. You can pick from either graph schema or visual result.
Click
, then click one vertex type in the graph schema tab:
A vertex pattern will be added to the visual pattern:
Click
, then click one edge type in the graph schema tab:
An edge pattern together with two vertex patterns will be added to the visual pattern:
Click
, then click one vertex in the visualize graph result tab:
A vertex pattern will be added to the visual pattern. Note that the vertex pattern contains an id condition because it is picked from an actual vertex entity from the graph:

Merge

You can merge multiple vertex patterns of the same vertex type into one vertex pattern.
Hold Shift key to select multiple vertex patterns:
Then click
, and you will get a larger visual pattern:
Use pick and merge together and you can create a complicated visual pattern quickly.

Widget

As described in the Basic Concepts, a visual pattern represents a graph pattern matching problem. In graph theory, graph pattern matching is declarative. However, graph pattern matching is not the full story. In a lot of cases you need to represent procedural computation flow. That's why we are introducing widgets.

Intersect

Click
, then click two vertex patterns of the same vertex type:
And an intersection widget is added to the visual pattern:
The output vertex pattern means matching all company vertices located at redwood city, and belongs to big data industry.
The output company vertex pattern can be part of another larger pattern. You can think of the input vertex patterns of the widget as constraints of the output vertex pattern.

Union

Click
, then click two vertex patterns of the same vertex type. A union widget is added to the visual pattern:
The output vertex pattern means matching all company vertices located at redwood city, or belongs to big data industry.

Subtract

Click
, then click two vertex patterns of the same vertex type. A subtract widget is added to the visual pattern:
The output vertex pattern means matching all company vertices located at redwood city, but not belong to big data industry.

Within

The Within widget allows you to create a vertex pattern whose matching result is constrained within the matching result of another vertex pattern.
For example, say you have a vertex pattern for all people who currently work at company A, and you want to select from them everyone who has bought product B. You can use the Within widget to select from the vertex pattern with all person vertices that work at company A, and create a another pattern for people who have bought product B. The output from the second pattern will be a subset of the matching result of the first pattern - that is, the output from the second pattern will be people who work at company A, who bought product B.
Click the Within widget button
, and then select a vertex pattern whose result you want to select from. This creates a within widget on the first vertex pattern, and you will see a second vertex pattern added to the graph pattern. Below are two visual examples to select results within a vertex pattern.
Within widget pattern
In the above example, the graph pattern outputs two bottom patterns which are both within the top pattern. The output vertex pattern means matching all company vertices or all city vertices that a person who attends san jose university is working at or was born in. In other words, a person vertex that attends san jose university needs either a work_at edge connected to a company vertex, or a born_in edge connected to a city vertex to be included in the result.
Within widget pattern example 2
The output vertex pattern means matching all company vertices and the city vertices that a person who attends san jose university is working at and was born in. In other words, a person vertex needs to have both a word_at edge connected to a company and a born_in edge connected to a city to be included in the result.

Downward import

We now support importing visual patterns from a higher version to a lower version.
Here is an example of the dialog that will be shown when an imported solution contains visual patterns which contain features that are unsupported in the current version:
Users can choose to either ignore the message and keep the pattern or delete it. If the user chooses to ignore the message and keep the pattern, the pattern will not be deleted, but it will not be displayed or accessible to the users.
Now you have a basic idea about all different functionalities of Visual Query Builder. Let's go to the next page to walk through how to build some visual patterns to solve your business questions!