G GremlinStudio

Graph Visualization

Interactive graph rendering with Sigma.js, force-directed layouts, and custom styling.

Overview

GremlinStudio renders query results as interactive graphs using Sigma.js v3 with WebGL acceleration. Whether you are exploring a Cosmos DB graph, analyzing relationships in Apache TinkerPop, or presenting graph database visualization results to your team, the graph canvas gives you a responsive and intuitive way to work with connected data. Every query result that contains vertices and edges is automatically rendered as a navigable graph.

Force-Directed Layout with ForceAtlas2

GremlinStudio uses the ForceAtlas2 algorithm to position nodes on the canvas. Force-directed layouts treat edges as springs and nodes as repelling particles, then simulate the physical system until it reaches equilibrium. The result is that tightly connected clusters of nodes are drawn close together while loosely connected groups drift apart, making the structure of your data immediately visible.

ForceAtlas2 is particularly well suited to graph database visualization because it scales to medium-sized graphs without requiring manual positioning. After the layout completes its fixed number of iterations, GremlinStudio runs a noverlap pass that nudges overlapping nodes apart so that labels remain readable. This two-phase approach keeps the organic feel of the force-directed layout while guaranteeing that no nodes are hidden behind each other.

The graph canvas supports several interaction modes for exploring your data:

  • Zoom — Scroll the mouse wheel to zoom in and out. Zooming focuses on the cursor position, so you can quickly drill into a dense cluster.
  • Pan — Click and drag the background to move the viewport. This is useful after zooming in to navigate to a different part of the graph.
  • Drag Nodes — Click and drag any node to reposition it. The node stays where you place it, which is helpful for untangling overlapping areas.
  • Click to Select — Left-click a node to select it. The selected node is highlighted and its properties appear in the results panel below.
  • Hover for Tooltip — Hover over a node or edge to see a tooltip with its label and key properties without needing to select it.
  • Double-Click to Center — Double-click any node to center the viewport on it and zoom in slightly. This is a fast way to focus on a specific vertex and its immediate neighborhood.

Node and Edge Display

Vertices and edges are rendered with sensible defaults that you can customize through style rules:

  • Labels — Each node displays its vertex label and a key property value so you can identify it at a glance.
  • Arrows — Directed edges are drawn with arrowheads indicating traversal direction, using the EdgeArrowProgram from Sigma.js for crisp WebGL rendering.
  • Colors — Nodes are automatically assigned colors based on their vertex label. Each label receives a distinct color from a built-in palette, making it easy to distinguish vertex types.
  • Sizes — Node sizes can reflect the degree (connection count) of each vertex, giving highly connected nodes more visual prominence.

Edge-Only Query Handling

When you run edge-centric queries such as g.V('id').bothE() or g.E().hasLabel('knows'), the Gremlin server returns edges without their endpoint vertices. Without intervention, these edges would be invisible because there are no nodes to anchor them.

GremlinStudio solves this with smart vertex discovery. The backend automatically detects when a query result contains edges whose source or target vertices are missing, then issues follow-up queries to fetch those endpoint vertices. The result is that edges are always displayed with their source and target nodes visible on the canvas. If a follow-up fetch fails for any reason, the frontend creates placeholder nodes from the edge metadata so you still see the full structure.

Table and Graph Interaction

The Table view and Graph view are linked. Clicking a row in the Table view highlights the corresponding node on the graph canvas and centers the viewport on it. This cross-view interaction makes it easy to find specific vertices in a large graph: sort or filter in the table, then click a row to jump directly to that node in the visualization. The same works in reverse — selecting a node on the graph scrolls the table to the matching row.

Context Menu for CRUD Operations

Right-click on the graph canvas for quick data operations:

  • On empty space — Create a new vertex with a label and properties of your choice.
  • On a node — Edit its properties, create an edge to another node, or delete the vertex.
  • On an edge — Edit its properties or delete the edge.

All CRUD operations are executed immediately against the connected database and the graph updates in place.

Full-Screen Mode

Click the maximize button in the result panel header to expand the graph view to fill the entire application window. The editor and sidebar are hidden, giving you a clean canvas for exploration or presentations. Press Escape or click the maximize button again to return to the normal layout. Full-screen mode is ideal for taking screenshots or screen-sharing during meetings when you want to visualize Cosmos DB graph data without UI clutter.

Style Rules

Customize the visual appearance of your graph with conditional style rules:

  1. Open the Styles panel from the sidebar.
  2. Create rules that match vertices or edges by label, property name, or property value.
  3. Set colors, sizes, labels, and opacity for matched elements.
  4. Import and export style configurations as JSON files to share with your team.

Style rules are evaluated in order, and the first matching rule wins. This lets you create general defaults and then override them with more specific rules for particular vertex types or property values.

Performance Tips

  • Use .limit() for large result sets. Queries that return thousands of vertices will be slow to lay out and render. Adding .limit(200) keeps the graph responsive while still showing representative data.
  • ForceAtlas2 iteration count is fixed. The layout algorithm runs for a predetermined number of iterations and then stops. It does not run continuously, so the CPU cost is bounded.
  • Large graphs above 1000 nodes may be slow. WebGL rendering handles drawing efficiently, but the force-directed layout calculation scales with the number of edges. For very large graphs, consider filtering your query to a subgraph of interest.
  • Use the Schema panel first. Understanding your graph structure before writing queries helps you write targeted traversals that return manageable result sets, making Gremlin query visualization faster and more useful.