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.

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.

Vertical Layout

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

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.

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.

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.

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

Right-click a vertex to open the vertex context menu.

Change color

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

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.

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

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

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

More

Click Help to learn about other interactions.