Query UI
PuppyGraph has a built-in Gremlin query UI that can run Gremlin queries, display results, and visualize them. The visualized graph can be expanded and customized with various configurations.

Query UI with Visualization
Getting Started
Find the Query UI on the left navigation under Query.
Use the default Gremlin query or type your own, then click Run
.
The query results will be displayed as history. If the results are visualizable, the right canvas will automatically display the graph.
Run more queries to combine results on the same canvas for interactive graph analysis.
Click Help
to learn about all available options.
Customizations
The query UI canvas allows customization of the visualized graph, including layout updates, moving, dragging, zooming, label display, and color changes. Users can interact with the graph, and the UI can generate queries to expand the graph, fetch, and search properties.
Layouts
Radial Layout (default)
Places vertices based on their path positions, with starting points inside. Good for visualizing graphs starting from a few nodes and expanding.

Radial Layout
Vertical Layout
Places vertices based on their path positions, with starting points on the left.

Vertical Layout
Force Layout
Uses the force graph algorithm to simulate vertex positions, pulling vertices together using edges as spring-like forces while vertices expel each other.

Force Graph
Interactions
Canvas
Move the canvas view by dragging the background. Zoom using the mouse wheel.
Move a vertex by dragging it with the mouse.
Properties
Left-click a vertex to display its properties.

Vertex Properties
Focus on an edge by hovering over one of its end vertices and moving the mouse towards the edge. Click the focused edge to display its properties.

Edge Properties
Canvas context menu
Right-click an empty canvas position to open the canvas context menu.

Canvas Context Menu
Vertex context menu
Right-click a vertex to open the vertex context menu.

Vertex Context Menu
Change color
Change vertex or edge color by clicking the rectangles on the graph legend.

Update Color
Properties prefetch, search and display
Enable search in the canvas context menu and wait for properties to be prefetched. A progress bar will appear at the bottom during fetching.

Enable Properties Prefetch
Search using the format "prop=value" in the search bar after properties are fetched.

Search Bar
After enabled properties prefetch, the label format can be updated for vertices and edges by clicking the same legend rectangle used for color updates.

Update Label Format
Use curly brackets to reference property values, e.g., ID: {id} name: {name}
.

Custom Label Format
More
Click Help
to learn about other interactions.

Help Menu