Visual Query Builder

Visual Query Builder(VQB) provides a visual approach to building your graph business logic. In the Build Graph Patterns page, you can create visual patterns in a drag-and-drop fashion to represent the questions you want to ask instead of writing GSQL queries.

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!

vqb overview

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, widgets and pattern views.

This is a basic vertex pattern within a visual pattern:

vertex pattern basic

This is a vertex pattern with 2 filters, 1 attachment, 2 ordering, and limit:

vertex pattern full 3.3

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:

vertex pattern full output 3.3

This is a basic edge pattern:

edge pattern basic

This is an edge pattern with 1 filter:

edge pattern filter

This is an edge pattern that will be output in the pattern execution result:

edge pattern filter output

This is a union widget:

widget

A widget has input vertex patterns and output vertex patterns:

intput output

This is a visual pattern with a pattern view:app-name:

pattern view part

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:

demo 1

This is the visual pattern matching all the departments having at least one male employee:

demo 2

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:

demo 3 3.3

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:

demo 4 3.3

This visual pattern matches all the people that born in Redwood City and attended Stanford university, but didn’t work for Google:

demo 5

Now you have a first sight about 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 in the top left corner of working panel:

pattern working panel

If you click the message indicating errors, the Console will switch to Problems tab:

pattern errors

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 highlight error

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 image to create new patterns, or click image to delete existing ones.

image

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.

image

After changing the description, don’t forget to confirm the change:

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.

image

Click image to run the pattern.

Toolbar

The toolbar options, from left to right, are the following:

Toolbar option Functionality

save btn

Save the graph pattern.

image

Save the graph pattern as a different pattern under a new name.

gsql (1)

Save as GSQL query: show the GSQL query generated from the pattern and save. See more information at Save as GSQL Query.

console btn

Console: open/close the console panel.

config panel btn

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 option btn

Render pattern options: config how much detail is shown on the pattern. See more information here.

start loading

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.

redo undo btn

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: edit the selected vertex pattern or edge pattern. This is same as double-clicking one vertex or edge pattern.

delete btn

Delete: delete selected vertex patterns, edge patterns and widgets. You can hold the Shift key to select multiple elements to delete.

add vertex type

Add a vertex pattern: add a new vertex pattern into the current visual pattern.

add edge type

Add an edge pattern: add a new edge pattern into the current visual pattern.

pick btn

Pick: a shortcut for adding vertex patterns and edge patterns into the visual pattern.

merge btn

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.

add pattern view btn

Add a pattern view: select one or more vertex or edge patterns, and click this button to create a pattern view containing all these vertex and edge patterns.

widget btn

Widget: see more information here.

filter

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.

agg btn

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.

sort btn

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 btn

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 btn

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 the Configuration Panel.

If you want to use vertex ID or edge ID as an attribute, check the "AS ATTRIBUTE" box in the Design Schema section for the corresponding vertex type. If a vertex or edge type’s primary ID is set as an attibute, you can use its ID in features such as filter, attachment and order by like any other attribute.

Vertex patterns

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.

image

The name supplied in the panel will be used as the vertex’s JSON key when producing output and when the pattern is saved as a GSQL query.

You can add/drop IDs in the list:

image

Or add an input parameter:

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.

image

The name supplied in the panel will be used as the edge’s JSON key when producing output and when the pattern is saved as a GSQL query.

When finished editing, you need to confirm the change. You can also cancel the change if you made a mistake:

image
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:

image

Click image besides the filter expression and enter editing mode of the filter:

image

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.

image

When finished with editing, you need confirm or cancel the change:

image

Attachment

If you expand the Attachment section, you can add/edit/delete attachments for the selected vertex pattern (attachment on edge patterns is not supported):

image

Click image beside one attachment and enter editing mode for the attachment. You can edit both the attachment expression and attachment name:

image

When finished with editing, you need to confirm or cancel the change:

image

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:

image
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:

image

We have the following attachment 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):

image

Click image 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:

image

When finished with 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):

image

Toggle use limit checkbox to enable/disable limit. You can also edit the limit number:

image

When finished editing, you need confirm or cancel the change:

image

Console

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

image

Expand/Collapse: expand or collapse the Console panel.

image

Graph schema: show the graph schema.

image

Visualize graph result: show the visual result of the last run pattern.

image

View JSON result: show the raw text result in JSON format of the last run pattern.

image

Problems: show the errors in the visual pattern.

Graph schema

Viewing graph schema makes it more convenient for developers to refer to the schema topology logic and easier to construct the visual pattern.

image

Visualize graph result

If the pattern execution result contains a graph structure, the result will be visualized in this panel as a graph. The panel is the same as the Explore Graph panel. The only difference is that each time you run a pattern, the previous result will be erased. In Explore Graph, the results are added incrementally.

image

You can switch to the JSON Result panel to see the result in JSON format.

View JSON result

You can see the JSON response of running the visual pattern from this tab:

image

Problems

If the visual pattern contains errors, you can see them here and debug:

image

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 us say that the user saves the following pattern:

image

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.

image

Here is the dialog that prompts the user to enter a name for the new pattern:

image

After entering the name the user gets redirected to the new pattern:

image

Here is the previous pattern returned to its last saved state:

image

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

image

Render pattern options

There are three different rendering options.

image

By default, Pattern detail and Output glow are checked. All the filters, attachments, ordering conditions and limits are rendered, and the vertex and edge patterns that will be in result will be highlighted with glow:

image

If Pattern detail is not checked, add-on marks will indicate that there are filters, attachments, ordering conditions and limits on corresponding vertex patterns and edge patterns:

image

If Pattern add-on is not checked, the add-ons will be hidden:

image

If Output glow is not checked, the output indicating glow is hidden:

image

Add a vertex pattern

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

image

Add an edge pattern

Click image , then click the source vertex pattern of the edge pattern:

image

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:

image

Pick

Pick is a fast way to build your visual pattern. You can pick from either graph schema or visual result.

Click image , then click one vertex type in the graph schema tab:

image

A vertex pattern will be added to the visual pattern:

image

Click image, then click one edge type in the graph schema tab:

image

An edge pattern together with two vertex patterns will be added to the visual pattern:

image

Click image , then click one vertex in the visualize graph result tab:

image

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:

image

Merge

You can merge multiple vertex patterns of the same vertex type into one vertex pattern.

Hold Shift key to select multiple vertex patterns:

image

Then click image , and you will get a larger visual pattern:

image

Use pick and merge together and you can create a complicated visual pattern quickly.

Add a pattern view

The pattern view functionality allows us to group a subset of a visual pattern within a connected component together as a pattern view. The pattern view is applied on the pattern match results and outputs a deduplicated subset of the original match results.

To add a pattern view to your visual pattern:

  1. Select the vertices and edges in the visual pattern that you want to include in the pattern view.

  2. Click on the 'Add a pattern view' button add pattern view btn on the toolbar to add all selected vertices and edges to the pattern view.

    • If you select an edge pattern, both vertices on the ends of the edge pattern will be included within the pattern view.

    • If you select two vertex patterns with an edge/edges between the two vertex patterns the edge/edges between the two vertex patterns will be included in the pattern view.

Self edges might not visually appear to be included within the pattern view, but if the self edge or the vertex with the self edge was selected, then it is in the pattern view.

A pattern view can only consist of vertices and edges, and so widgets are not included within a pattern view.

Each pattern view must have an alias. GraphStudio generates a default name for each pattern view upon creation, and you can change its name from the configuration panel.

image

To delete a pattern view, you will need to select the pattern view and then click on the 'Delete' button on the toolbar. Vertex and edge patterns within a pattern view can not be deleted before the pattern view itself has been deleted. If you attempt to do so an error message such as the one below will be shown:

image

Examples

Example 1

Here we have a pattern view that includes part of a visual pattern:

  • Pattern view

  • Results

image
Figure 1. Pattern view that includes part of a visual pattern

Running this visual pattern would give us the following result:

image

As you can see putting a pattern view over a part of the visual pattern would mean applying the pattern view on only a sub-graph of the pattern match result of the whole pattern.

In this case, it is the sub-graph which matches the sub-pattern (person AS p)-person_has_skill→(skill). In this case the output of the pattern view is just the sub -graph of the pattern match result.

Example 2

Here we have a pattern view that includes the whole visual pattern:

  • Pattern view

  • Results

Pattern view example
Figure 2. Pattern view that includes

Running this visual pattern would give us the following result:

Pattern view example results

As you can see putting a pattern view over the whole visual pattern would mean applying the pattern view on the pattern match result of the whole pattern. In this case, the output of the pattern view is just the projection of the whole pattern match result again.

Example 3

Here we have a pattern view which includes only a vertex within the visual pattern:

  • Pattern view

  • Results

image
Figure 3. Pattern view that includes one vertex within a visual pattern

Running the visual pattern would give us the following result:

image

As you can see putting a pattern view over only a vertex within a visual pattern would mean applying the pattern view on only a single vertex type of the pattern match result of the whole pattern. In this case, it is all the vertices of type 'person'. The output of this pattern view is just the projection of all the distinct vertices of type person within the whole pattern match result. This is the same behavior as when we just output a single vertex.

Limitations

  • Overlapping pattern views are not allowed:

    image
  • Pattern views across different connected components are not allowed:

    image
  • Vertex patterns within a pattern view cannot be merged with any other vertex patterns:

  • We currently do not allow creating edge patterns between vertex patterns in the same pattern view:

  • Drag-and-drop is not supported within a pattern view. However, the pattern view itself can be dragged around, and the vertex and edge patterns within it will be dragged along with the pattern view.

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 image , then click two vertex patterns of the same vertex type:

image

And an intersection widget is added to the visual pattern:

image

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 image , then click two vertex patterns of the same vertex type. A union widget is added to the visual pattern:

image

The output vertex pattern means matching all company vertices located at redwood city, or belongs to big data industry.

Subtract

Click image , then click two vertex patterns of the same vertex type. A subtract widget is added to the visual pattern:

image

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 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 Within widget, 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.

image

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.

image

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:

image

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.

Next Step

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!