Instance Graph

Interactive visualization of FFO entities and relationships using ReactFlow, showing the live state of infrastructure as a connected graph.

The Instance Graph provides an interactive visualization of entities and relationships stored in the Federal Frontier Ontology (FFO). It renders infrastructure state as a directed graph where nodes represent entities (clusters, nodes, deployments, services, etc.) and edges represent TypeDB relations between them.

How It Works

The graph is built by querying TypeDB for all entities and their relations, then rendering the result using ReactFlow in the Compass frontend.

1. Entity query — The API fetches entities from FFO, limited to 100 nodes to keep the visualization performant.
2. Relation query — Relations between the fetched entities are retrieved, producing edges for the graph.
3. Layout — Nodes are arranged automatically and can be repositioned by dragging.
4. Rendering — ReactFlow renders the nodes and edges with interactive controls (zoom, pan, select).

Entity Types

The graph displays the following FFO entity types, each with a distinct color:

Relations as Edges

Edges represent TypeDB relations from the FFO schema. Common relations visualized include:

• cluster_node — Cluster contains Node
• cluster_deployment — Cluster runs Deployment
• deployment_service — Deployment exposes Service
• deployment_image — Deployment uses Image
• registry_image — Registry hosts Image
• deployment_finding — Deployment has Finding
• cluster_finding — Cluster has Finding
• image_vulnerability — Image has Vulnerability
• service_dependency — Service depends on Service

Edges are directional, drawn from the parent entity to the child entity based on the relation’s role structure in TypeDB.

Interacting with the Graph

Navigation

• Zoom — Scroll wheel or pinch gesture to zoom in/out
• Pan — Click and drag on the canvas background to pan
• Fit view — Double-click the canvas to fit all nodes in the viewport

Inspecting Entities

Click on any node to inspect its attributes. The detail panel shows all TypeDB attributes for that entity, including:

• name — Primary identifier
• entity_name — Display name (used by some entity types like Ceph entities)
• Type-specific attributes (e.g., status, version, namespace, ip_address)

Performance Considerations

The graph is limited to 100 nodes by default. For large ontologies with hundreds of entities, the graph shows a representative subset. If you need to explore specific entity neighborhoods, use the AI Chat interface to query for specific entities and their immediate relations, then use the graph for visual context.

Architecture

The frontend receives a JSON payload containing nodes (with type, attributes, and position hints) and edges (with source, target, and relation type). ReactFlow handles all rendering and interaction.