> ## Documentation Index
> Fetch the complete documentation index at: https://hub-docs.wundergraph.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Explore Your Graph

> Search types, fields, and service boundaries directly on the canvas before you touch anything.

Before you make a change, you need to know what the graph already has, which service resolves it, and who owns it. Hub puts the whole supergraph on a visual canvas so you can answer those questions without digging through repositories or asking teammates.

## Search for a Type or Field

To locate a subgraph, click **Search Subgraph**. The panel lists every subgraph under a **Subgraphs** heading. Select one and click **Show on Canvas** to navigate to it.

<div style={{position: "relative", paddingBottom: "calc(49.26% + 0px)", width: "100%", height: 0, transform: "scale(1)"}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/xz9vsvxnrsdn?embed=inline" name="sl-embed" allow="fullscreen" allowFullScreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "1px solid rgba(63,95,172,0.35)", boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)", borderRadius: "10px", boxSizing: "border-box"}} />
</div>

Enable **Multi-select mode** to select multiple results at once, then apply the selection to navigate to all of them together.

Click **Search Field** in the toolbar at the bottom of the canvas. The panel groups results into two sections: **Types** lists every object type in the supergraph, and **Fields/Members** lists fields with their parent type prefixed in pink, for example `Query.user`. Type a name to filter both sections at once. Click any result to navigate to it on the canvas.

<div style={{position: "relative", paddingBottom: "calc(49.26% + 0px)", width: "100%", height: 0, transform: "scale(1)"}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/lqnmlpaxlqu0?embed=inline" name="sl-embed" allow="fullscreen" allowFullScreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "1px solid rgba(63,95,172,0.35)", boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)", borderRadius: "10px", boxSizing: "border-box"}} />
</div>

## Inspect a Type

Each type appears on the canvas as a card showing its name and kind badge. The badge reflects the type's kind: **object** for plain object types, **entity** for federated entity types. Fields are listed with their name and return type. The key icon on a field marks it as the entity key. The footer reads "Showing X / Y fields" when not all fields are visible, and "Showing all X fields" when every field on the type is displayed.

<div style={{position: "relative", paddingBottom: "calc(49.26% + 0px)", width: "100%", height: 0, transform: "scale(1)"}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/izjuk4tmtts9?embed=inline" name="sl-embed" allow="fullscreen" allowFullScreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "1px solid rgba(63,95,172,0.35)", boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)", borderRadius: "10px", boxSizing: "border-box"}} />
</div>

Each field row has a row of icon controls. Click the arrow at the right edge of a field row to open a **Navigate to subgraph** popover, which shows the subgraph that resolves that field with a navigation arrow, and a **View in all above subgraphs** option to see every subgraph that implements it.

## See Which Subgraphs Resolve a Type

Click the settings gear in the toolbar to open **Canvas Settings**. Hover over **Internal Edges** to expand the submenu, which lists **All Internal Edges**, **Supergraph**, and each individual subgraph. Click any item to toggle its edges on or off. Use **Intergraph Edges** the same way to control edges between subgraphs. Its submenu lists **All Intergraph Edges** and each individual subgraph.

<div style={{position: "relative", paddingBottom: "calc(49.26% + 0px)", width: "100%", height: 0, transform: "scale(1)"}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/mhicg8rtunrx?embed=inline" name="sl-embed" allow="fullscreen" allowFullScreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "1px solid rgba(63,95,172,0.35)", boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)", borderRadius: "10px", boxSizing: "border-box"}} />
</div>

When edges are visible, each subgraph appears as a color-coded container on the canvas, labeled with the subgraph name in the top-left corner. Connection lines run from the supergraph container to each subgraph container. Inside each subgraph container, type cards show only the fields that subgraph resolves, so the same type appears once in the supergraph with all its fields, and once per subgraph with only the fields that service owns.

## Inspect a Specific Field's Subgraph Assignment

Hover over a field row on a type card to highlight its connection line. Click the connection line to select it. The line becomes dotted. Hover over the dotted line to open an inline popover showing two columns: **Supergraph** on the left with the field as it appears in the supergraph, and the subgraph name on the right with the field as that service resolves it. Each column has a navigation arrow to jump directly to that node.

<div style={{position: "relative", paddingBottom: "calc(49.26% + 0px)", width: "100%", height: 0, transform: "scale(1)"}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/rlflwsgrnitu?embed=inline" name="sl-embed" allow="fullscreen" allowFullScreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "1px solid rgba(63,95,172,0.35)", boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)", borderRadius: "10px", boxSizing: "border-box"}} />
</div>

## Check Ownership

Click **Governance** in the top bar to open the **Governance Management** modal. The modal has three tabs: **Graph Admins**, **Subgraphs**, and **Types**. Each tab lists the owners assigned to that resource. Use the search input to find a specific owner or resource by name.

<div style={{position: "relative", paddingBottom: "calc(48.40% + 0px)", width: "100%", height: 0, transform: "scale(1)"}}>
  <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/tqnd3dmrnj3x?embed=inline" name="sl-embed" allow="fullscreen" allowFullScreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "1px solid rgba(63,95,172,0.35)", boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)", borderRadius: "10px", boxSizing: "border-box"}} />
</div>

<Check title="What You Should Have at This Point">
  A clear picture of your graph: which types exist, what fields they contain, which subgraphs resolve them, and who owns each resource. No repository browsing or asking around required.
</Check>
