diff --git a/@types/bionym-components.d.ts b/@types/bionym-components.d.ts
new file mode 100644
index 000000000..df5fb12a1
--- /dev/null
+++ b/@types/bionym-components.d.ts
@@ -0,0 +1,58 @@
+// bionym-components ships plain JavaScript with no types. These cover the
+// parts the gene page's graph explorer uses; see the package's README.
+declare module "bionym-components" {
+  export interface BionymComponentsNode {
+    id: string;
+    label: string;
+    type: string;
+    url: string | null;
+  }
+
+  export interface BionymComponentsEdge {
+    confidence: number;
+    object: string;
+    predicate: string;
+    subject: string;
+  }
+
+  export interface BionymComponentsGraph {
+    edges: BionymComponentsEdge[];
+    metadata: { query: string };
+    nodes: BionymComponentsNode[];
+  }
+
+  export type BionymNetworkLayout = "columns" | "force";
+
+  export interface BionymNetworkOptions {
+    layout?: BionymNetworkLayout;
+    minConfidence?: number;
+    onSelect?: (node: BionymComponentsNode | null) => void;
+  }
+
+  export interface BionymNetworkInstance {
+    destroy(): void;
+    fit(): void;
+    setMinConfidence(minConfidence: number): void;
+    zoomBy(factor: number): void;
+  }
+
+  export function BionymNetwork(
+    el: HTMLElement,
+    graph: BionymComponentsGraph,
+    opts?: BionymNetworkOptions
+  ): BionymNetworkInstance;
+
+  export interface BionymOverviewOptions {
+    onBarClick?: (nodeType: string) => void;
+  }
+
+  export interface BionymOverviewInstance {
+    destroy(): void;
+  }
+
+  export function BionymOverview(
+    el: HTMLElement,
+    graph: BionymComponentsGraph,
+    opts?: BionymOverviewOptions
+  ): BionymOverviewInstance;
+}
diff --git a/backend/api/app/api/v1/genes.py b/backend/api/app/api/v1/genes.py
index 15e1a97c8..3ca1a3063 100644
--- a/backend/api/app/api/v1/genes.py
+++ b/backend/api/app/api/v1/genes.py
@@ -5,7 +5,7 @@
 from fastapi import APIRouter, Depends, HTTPException
 
 from app.core.dependencies import get_bionym_graphs, get_gene_catalog_service
-from app.models.genes import BionymClaims, GeneResponse
+from app.models.genes import BionymClaims, BionymGraph, GeneResponse
 from app.services.bionym_graphs import BionymGraphStore
 from app.services.gene_catalog import GeneCatalogService
 
@@ -42,3 +42,18 @@ def get_gene_bionym(
             status_code=404, detail=f"Gene {gene_uid} has no BioNym graph"
         )
     return claims
+
+
+@router.get("/{gene_uid}/bionym/graph", response_model=BionymGraph)
+def get_gene_bionym_graph(
+    gene_uid: UUID,
+    graphs: BionymGraphStore = Depends(get_bionym_graphs),
+) -> BionymGraph:
+    """Every node and edge in the gene's BioNym graph, for the gene page's
+    graph explorer. Like the claims, read from the graph alone."""
+    graph = graphs.get_graph(gene_uid)
+    if graph is None:
+        raise HTTPException(
+            status_code=404, detail=f"Gene {gene_uid} has no BioNym graph"
+        )
+    return graph
diff --git a/backend/api/app/models/genes.py b/backend/api/app/models/genes.py
index 6a67bbfeb..33868ae86 100644
--- a/backend/api/app/models/genes.py
+++ b/backend/api/app/models/genes.py
@@ -115,6 +115,38 @@ class BionymSource(_CamelModel):
     claims: List[BionymClaim]
 
 
+class BionymGraphNode(_CamelModel):
+    """A node in a gene's BioNym graph: a gene, protein, paper, dataset,
+    claim or another kind of thing BioNym found."""
+
+    id: str
+    type: str
+    label: str
+    # Null unless the graph gives an https: link.
+    url: Optional[str]
+
+
+class BionymGraphEdge(_CamelModel):
+    """An edge in a gene's BioNym graph, with BioNym's confidence in it,
+    from 0 to 1."""
+
+    subject: str
+    predicate: str
+    object: str
+    confidence: float
+
+
+class BionymGraph(_CamelModel):
+    """A gene's BioNym graph: every node and edge, with only the fields the
+    gene page's graph explorer draws."""
+
+    gene_uid: UUID
+    # The id of the gene's own node, the graph's root.
+    query: str
+    nodes: List[BionymGraphNode]
+    edges: List[BionymGraphEdge]
+
+
 class BionymClaims(_CamelModel):
     """The claims in a gene's BioNym graph, grouped by source."""
 
diff --git a/backend/api/app/services/bionym_graphs.py b/backend/api/app/services/bionym_graphs.py
index 2dd0cf005..50ffae7f5 100644
--- a/backend/api/app/services/bionym_graphs.py
+++ b/backend/api/app/services/bionym_graphs.py
@@ -1,9 +1,12 @@
-"""BioNym's claims about a gene, read from the gene's BioNym graph.
+"""BioNym's claims about a gene, and the graph itself, read from the gene's
+BioNym graph.
 
 A BioNym graph is BioNym's JSON output for one gene: nodes, edges between
 them, and metadata about the run. Each claim is a Claim node that a
 Publication or Dataset node `reports`; the edge holds BioNym's confidence in
 the claim, and its one piece of evidence holds the quote the claim rests on.
+The graph view keeps every node and edge, but only the fields the gene
+page's graph explorer draws.
 
 The graphs are checked in, gzipped and named by gene UID, under
 app/data/bionym (see its README) until they are published to the gene data
@@ -21,7 +24,14 @@
 
 from pydantic import BaseModel
 
-from app.models.genes import BionymClaim, BionymClaims, BionymSource
+from app.models.genes import (
+    BionymClaim,
+    BionymClaims,
+    BionymGraph,
+    BionymGraphEdge,
+    BionymGraphNode,
+    BionymSource,
+)
 
 BIONYM_GRAPHS_DIR = Path(__file__).resolve().parent.parent / "data" / "bionym"
 
@@ -53,6 +63,7 @@ class _Edge(BaseModel):
 
 class _Metadata(BaseModel):
     input: str
+    query: str
 
 
 class _Graph(BaseModel):
@@ -124,22 +135,66 @@ def build_claims(gene_uid: UUID, graph: _Graph) -> BionymClaims:
     )
 
 
+def build_graph(gene_uid: UUID, graph: _Graph) -> BionymGraph:
+    """Every node and edge in the graph, in BioNym's order, with only the
+    fields the graph explorer draws and only https: links.
+
+    Raises:
+        ValueError: The graph's query isn't a node, or an edge ends at an id
+            that isn't a node.
+    """
+    if graph.metadata.query not in graph.nodes:
+        raise ValueError(f"the graph's query {graph.metadata.query!r} isn't a node")
+    for edge in graph.edges:
+        for end in (edge.subject, edge.object):
+            if end not in graph.nodes:
+                raise ValueError(
+                    f"an edge {edge.predicate!r} ends at {end!r}, not a node"
+                )
+    return BionymGraph(
+        gene_uid=gene_uid,
+        query=graph.metadata.query,
+        nodes=[
+            BionymGraphNode(
+                id=node_id, type=node.type, label=node.label, url=_https_url(node.url)
+            )
+            for node_id, node in graph.nodes.items()
+        ],
+        edges=[
+            BionymGraphEdge(
+                subject=edge.subject,
+                predicate=edge.predicate,
+                object=edge.object,
+                confidence=edge.confidence,
+            )
+            for edge in graph.edges
+        ],
+    )
+
+
 class BionymGraphStore:
     """The BioNym graphs in a directory, each named <gene_uid>.json.gz.
 
-    Every graph's claims are built when the store is made: on the first
-    BioNym request, and in the tests over every checked-in graph, so a graph
-    of the wrong shape fails the tests rather than reaching a gene's page.
+    Every graph's claims and graph view are built when the store is made: on
+    the first BioNym request, and in the tests over every checked-in graph, so
+    a graph of the wrong shape fails the tests rather than reaching a gene's
+    page.
     """
 
     def __init__(self, directory: Path):
         self._claims: Dict[UUID, BionymClaims] = {}
+        self._graphs: Dict[UUID, BionymGraph] = {}
         for path in directory.glob("*.json.gz"):
             gene_uid = UUID(path.name.removesuffix(".json.gz"))
             with gzip.open(path, "rb") as f:
                 graph = _Graph.model_validate_json(f.read())
             self._claims[gene_uid] = build_claims(gene_uid, graph)
+            self._graphs[gene_uid] = build_graph(gene_uid, graph)
 
     def get_claims(self, gene_uid: UUID) -> Optional[BionymClaims]:
         """The gene's claims, or None if it has no graph."""
         return self._claims.get(gene_uid)
+
+    def get_graph(self, gene_uid: UUID) -> Optional[BionymGraph]:
+        """The gene's graph view, or None if it has no graph."""
+        return self._graphs.get(gene_uid)
diff --git a/backend/api/tests/test_genes_api.py b/backend/api/tests/test_genes_api.py
index 4d838812f..4c74168d3 100644
--- a/backend/api/tests/test_genes_api.py
+++ b/backend/api/tests/test_genes_api.py
@@ -280,9 +280,10 @@ def test_transcripts_are_in_genome_order(client, gene_uid):
 def write_graph(directory, gene_uid: str, sources: dict) -> None:
     """Write a BioNym graph in which each source reports one claim.
 
-    sources maps a source's node ID to its node type and URL.
+    sources maps a source's node ID to its node type and URL. The graph's
+    query is a gene node, PF3D7_0000000, with no edges.
     """
-    nodes = {}
+    nodes = {"PF3D7_0000000": {"type": "Gene", "label": "PF3D7_0000000", "url": None}}
     edges = []
     for i, (source_id, (node_type, url)) in enumerate(sources.items()):
         claim_id = f"claim:claim {i}"
@@ -302,7 +303,11 @@ def write_graph(directory, gene_uid: str, sources: dict) -> None:
                 ],
             }
         )
-    graph = {"nodes": nodes, "edges": edges, "metadata": {"input": "PF3D7_0000000"}}
+    graph = {
+        "nodes": nodes,
+        "edges": edges,
+        "metadata": {"input": "PF3D7_0000000", "query": "PF3D7_0000000"},
+    }
     with gzip.open(directory / f"{gene_uid}.json.gz", "wt") as f:
         json.dump(graph, f)
 
@@ -354,9 +359,38 @@ def test_every_checked_in_bionym_graph_is_read(checked_in_graphs, gene_uid, locu
     assert {s.kind for s in claims.sources} == {"paper", "dataset"}
 
 
-def test_gene_without_a_bionym_graph_is_404(tmp_path):
+def test_bionym_graph(checked_in_graphs):
+    response = make_client(graphs=checked_in_graphs).get(
+        f"/api/v1/genes/{KELCH13_UID}/bionym/graph"
+    )
+    assert response.status_code == 200
+    body = response.json()
+    assert body["geneUid"] == KELCH13_UID
+    # The whole graph, ortholog-group members included.
+    assert len(body["nodes"]) == 5239
+    assert len(body["edges"]) == 6536
+    assert sum(e["predicate"] == "has_member" for e in body["edges"]) == 2460
+    [root] = [n for n in body["nodes"] if n["id"] == body["query"]]
+    assert (root["id"], root["type"]) == ("PF3D7_1343700", "Gene")
+    # Only the fields the explorer draws.
+    assert set(root) == {"id", "type", "label", "url"}
+    assert set(body["edges"][0]) == {"subject", "predicate", "object", "confidence"}
+
+
+@pytest.mark.parametrize("gene_uid, locus_tag", BIONYM_GENES.items())
+def test_every_checked_in_bionym_graph_has_its_gene_as_root(
+    checked_in_graphs, gene_uid, locus_tag
+):
+    graph = checked_in_graphs.get_graph(uuid.UUID(gene_uid))
+    assert graph is not None
+    assert graph.query == locus_tag
+    assert {n.type for n in graph.nodes if n.id == locus_tag} == {"Gene"}
+
+
+@pytest.mark.parametrize("path", ["bionym", "bionym/graph"])
+def test_gene_without_a_bionym_graph_is_404(tmp_path, path):
     response = make_client(graphs=BionymGraphStore(tmp_path)).get(
-        f"/api/v1/genes/{uuid.uuid4()}/bionym"
+        f"/api/v1/genes/{uuid.uuid4()}/{path}"
     )
     assert response.status_code == 404
 
@@ -391,6 +425,18 @@ def test_bionym_links_other_than_https_are_dropped(tmp_path):
         "dataset:3": ("dataset", None),
         "dataset:4": ("dataset", None),
     }
+    nodes = (
+        make_client(graphs=BionymGraphStore(tmp_path))
+        .get(f"/api/v1/genes/{uid}/bionym/graph")
+        .json()["nodes"]
+    )
+    assert {n["id"]: n["url"] for n in nodes if n["type"] != "Claim"} == {
+        "PF3D7_0000000": None,
+        "pubmed:1": "https://pubmed.ncbi.nlm.nih.gov/1/",
+        "pubmed:2": None,
+        "dataset:3": None,
+        "dataset:4": None,
+    }
 
 
 def test_bionym_claim_from_a_node_that_is_not_a_source_is_an_error(tmp_path):
@@ -398,3 +444,34 @@ def test_bionym_claim_from_a_node_that_is_not_a_source_is_an_error(tmp_path):
     write_graph(tmp_path, str(uid), {"assembly:1": ("Assembly", None)})
     with pytest.raises(ValueError, match="isn't a source"):
         BionymGraphStore(tmp_path)
+
+
+def _rewrite_graph(directory, gene_uid: str, change) -> None:
+    path = directory / f"{gene_uid}.json.gz"
+    with gzip.open(path, "rt") as f:
+        graph = json.load(f)
+    change(graph)
+    with gzip.open(path, "wt") as f:
+        json.dump(graph, f)
+
+
+def test_bionym_graph_whose_query_is_not_a_node_is_an_error(tmp_path):
+    uid = str(uuid.uuid4())
+    write_graph(tmp_path, uid, {"pubmed:1": ("Publication", None)})
+    _rewrite_graph(tmp_path, uid, lambda g: g["metadata"].update(query="PF3D7_9999999"))
+    with pytest.raises(ValueError, match="isn't a node"):
+        BionymGraphStore(tmp_path)
+
+
+def test_bionym_graph_edge_to_a_missing_node_is_an_error(tmp_path):
+    uid = str(uuid.uuid4())
+    write_graph(tmp_path, uid, {"pubmed:1": ("Publication", None)})
+    _rewrite_graph(
+        tmp_path,
+        uid,
+        lambda g: g["edges"].append(
+            {**g["edges"][0], "predicate": "cited_in", "object": "pubmed:missing"}
+        ),
+    )
+    with pytest.raises(ValueError, match="not a node"):
+        BionymGraphStore(tmp_path)
diff --git a/package-lock.json b/package-lock.json
index 08ad2d004..b86d71900 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "@tanstack/react-query": "^5.90.21",
         "@tanstack/react-table": "^8.21.3",
         "@tanstack/react-virtual": "^3.13.13",
+        "bionym-components": "0.1.1",
         "copy-to-clipboard": "^3.3.3",
         "d3-color": "^3.1.0",
         "d3-hierarchy": "^3.1.2",
@@ -8064,6 +8065,15 @@
       "integrity": "sha512-H0ea4Fd3lS1+sTEB2TgcLoK21lLhwEJzlQv3IN47pJS976Gx4zoWe0ak3q+uYh60ppQxg9F16Ri4tS1sfD4+jA==",
       "license": "MIT"
     },
+    "node_modules/bionym-components": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/bionym-components/-/bionym-components-0.1.1.tgz",
+      "integrity": "sha512-uYrAAgSrSJDbfoAbkr1j2XnsOeVR+b2uzXOrGSTbvSbfS05efVVFxNBSa6blwcatZKQeil0IRRTeqFI5pzBnkA==",
+      "license": "MIT",
+      "dependencies": {
+        "d3": "^7.9.0"
+      }
+    },
     "node_modules/boxen": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz",
diff --git a/package.json b/package.json
index 043cc54e0..234e91fc6 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.13",
+    "bionym-components": "0.1.1",
     "copy-to-clipboard": "^3.3.3",
     "d3-color": "^3.1.0",
     "d3-hierarchy": "^3.1.2",
diff --git a/packages/shared/hooks/useGeneBionymGraph.ts b/packages/shared/hooks/useGeneBionymGraph.ts
new file mode 100644
index 000000000..b2488d205
--- /dev/null
+++ b/packages/shared/hooks/useGeneBionymGraph.ts
@@ -0,0 +1,26 @@
+import { fetchGeneBionymGraph } from "@repo/shared/services/genes/api";
+import { type BionymGraph } from "@repo/shared/services/genes/types";
+import { useQuery } from "@tanstack/react-query";
+
+export type GeneBionymGraphResult =
+  | { graph: BionymGraph; status: "found" }
+  | { status: "loading" }
+  | { status: "unavailable" };
+
+/**
+ * Fetch a gene's BioNym graph, for the graph explorer.
+ * @param geneUid - The gene's UID.
+ * @returns The graph; loading while it loads; or unavailable when the gene
+ * has no graph or the API can't be reached.
+ */
+export function useGeneBionymGraph(geneUid: string): GeneBionymGraphResult {
+  const { data, isError, isPending } = useQuery({
+    queryFn: ({ signal }) => fetchGeneBionymGraph(geneUid, signal),
+    queryKey: ["gene-bionym-graph", geneUid],
+    // The graphs only change at a deploy, so a loaded graph isn't refetched.
+    staleTime: Infinity,
+  });
+  if (isPending) return { status: "loading" };
+  if (isError || !data) return { status: "unavailable" };
+  return { graph: data, status: "found" };
+}
diff --git a/packages/shared/services/api-client/api-client.ts b/packages/shared/services/api-client/api-client.ts
index 529dd5ab4..76a1fd25a 100644
--- a/packages/shared/services/api-client/api-client.ts
+++ b/packages/shared/services/api-client/api-client.ts
@@ -1,6 +1,7 @@
 import { API_BASE_URL } from "@repo/shared/config/api";
 import {
   type BionymClaims,
+  type BionymGraph,
   type GeneResponse,
 } from "@repo/shared/services/genes/types";
 import ky, { type HTTPError } from "ky";
@@ -91,6 +92,19 @@ export const apiClient = {
       .json();
   },
 
+  getGeneBionymGraph: async (
+    geneUid: string,
+    signal?: AbortSignal
+  ): Promise<BionymGraph> => {
+    // ky doesn't retry; useGeneBionymGraph's query does.
+    return httpClient
+      .get(`genes/${encodeURIComponent(geneUid)}/bionym/graph`, {
+        retry: 0,
+        signal,
+      })
+      .json();
+  },
+
   getLoganSearches: async (
     offset = 0,
     limit = 20
diff --git a/packages/shared/services/genes/api.ts b/packages/shared/services/genes/api.ts
index 7f0bd869f..86e6e7a1c 100644
--- a/packages/shared/services/genes/api.ts
+++ b/packages/shared/services/genes/api.ts
@@ -1,6 +1,6 @@
 import { apiClient } from "@repo/shared/services/api-client/api-client";
 import { HTTPError } from "ky";
-import { type BionymClaims, type Gene } from "./types";
+import { type BionymClaims, type BionymGraph, type Gene } from "./types";
 
 export type GeneResult =
   | { gene: Gene; status: "found" }
@@ -45,6 +45,25 @@ export async function fetchGeneBionym(
   }
 }
 
+/**
+ * Fetch a gene's BioNym graph.
+ * @param geneUid - The gene's UID.
+ * @param signal - Aborts the request.
+ * @returns The graph, or null when the gene has no BioNym graph.
+ * @throws When the API can't be reached.
+ */
+export async function fetchGeneBionymGraph(
+  geneUid: string,
+  signal?: AbortSignal
+): Promise<BionymGraph | null> {
+  try {
+    return await apiClient.getGeneBionymGraph(geneUid, signal);
+  } catch (error) {
+    if (isNotFound(error)) return null;
+    throw error;
+  }
+}
+
 /**
  * Whether a gene API request failed because what it asked for doesn't exist.
  * @param error - The request's error.
diff --git a/packages/shared/services/genes/types.ts b/packages/shared/services/genes/types.ts
index 3407127c5..56183c165 100644
--- a/packages/shared/services/genes/types.ts
+++ b/packages/shared/services/genes/types.ts
@@ -120,3 +120,38 @@ export interface BionymClaims {
   runDate: string;
   sources: BionymSource[];
 }
+
+/**
+ * A node in a gene's BioNym graph: a gene, protein, paper, dataset, claim or
+ * another kind of thing BioNym found.
+ */
+export interface BionymGraphNode {
+  id: string;
+  label: string;
+  type: string;
+  // Null unless the graph gives an https: link.
+  url: string | null;
+}
+
+/**
+ * An edge in a gene's BioNym graph, with BioNym's confidence in it, from 0
+ * to 1.
+ */
+export interface BionymGraphEdge {
+  confidence: number;
+  object: string;
+  predicate: string;
+  subject: string;
+}
+
+/**
+ * A gene's BioNym graph: every node and edge, with only the fields the graph
+ * explorer draws.
+ */
+export interface BionymGraph {
+  edges: BionymGraphEdge[];
+  geneUid: string;
+  nodes: BionymGraphNode[];
+  // The id of the gene's own node, the graph's root.
+  query: string;
+}
diff --git a/sites/brc-analytics/tsconfig.json b/sites/brc-analytics/tsconfig.json
index d98256ad4..cdfc557ec 100644
--- a/sites/brc-analytics/tsconfig.json
+++ b/sites/brc-analytics/tsconfig.json
@@ -16,6 +16,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
+    "../../@types/bionym-components.d.ts",
     "../../@types/findable-ui.d.ts",
     "../../packages/shared/@types/theme.d.ts",
     "../../@types/vega-embed.d.ts"
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/bionymSection.styles.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/bionymSection.styles.ts
index 71676ac21..79613fc83 100644
--- a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/bionymSection.styles.ts
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/bionymSection.styles.ts
@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 
 // The label, slider and count on one row, wrapping onto more on a narrow
 // screen rather than overflowing the panel.
-export const ConfidenceControl = styled.div`
+export const ConfidenceRow = styled.div`
   align-items: center;
   display: flex;
   flex-wrap: wrap;
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/bionymSection.tsx b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/bionymSection.tsx
index 3c78e7bf7..c00ddcbae 100644
--- a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/bionymSection.tsx
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/bionymSection.tsx
@@ -1,60 +1,47 @@
 import { GenesPanel } from "@brc/components/Genes/genes.styles";
+import { Tabs } from "@databiosphere/findable-ui/lib/components/common/Tabs/tabs";
 import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
 import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
-import { Slider, Typography } from "@mui/material";
-import { Tooltip } from "@repo/shared/components/Tooltip/tooltip";
+import { Typography } from "@mui/material";
 import { formatDate } from "@repo/shared/utils/date-fns/utils";
 import { SectionTitle } from "@repo/shared/views/EntityView/ui/SectionTitle/sectionTitle";
 import { parseISO } from "date-fns";
-import {
-  type JSX,
-  memo,
-  useDeferredValue,
-  useId,
-  useMemo,
-  useState,
-} from "react";
-import {
-  ClaimList,
-  ConfidenceControl,
-  Source,
-  SourceList,
-} from "./bionymSection.styles";
-import {
-  BIONYM_URL,
-  CONFIDENCE_STEP,
-  DEFAULT_MIN_CONFIDENCE,
-  SOURCE_KIND_LABEL,
-} from "./constants";
-import {
-  type BionymSectionProps,
-  type ClaimItemProps,
-  type SourceListViewProps,
-} from "./types";
-import { countClaims, roundToStep, visibleSources } from "./utils";
+import dynamic from "next/dynamic";
+import { type JSX, useId, useState } from "react";
+import { ClaimsPanel } from "./components/ClaimsPanel/claimsPanel";
+import { GraphLoading } from "./components/GraphLoading/graphLoading";
+import { BIONYM_URL, DEFAULT_MIN_CONFIDENCE, TAB, TABS } from "./constants";
+import { useBionymTab } from "./hooks/useBionymTab";
+import { type BionymSectionProps } from "./types";
+import { getActiveTab } from "./utils";
+
+// The graph explorer brings D3 and BioNym's components with it, so it loads
+// only when its tab is first opened, and only in the browser.
+const GraphPanel = dynamic(
+  () => import("./components/GraphPanel/graphPanel").then((m) => m.GraphPanel),
+  {
+    loading: GraphLoading,
+    ssr: false,
+  }
+);
 
 /**
- * The claims BioNym drew about a gene, grouped by source, with a slider that
- * sets the lowest confidence shown. Kept apart from the gene's facts, and
- * labelled as BioNym's scored judgments.
+ * What BioNym gathered about a gene, kept apart from the gene's facts and
+ * labelled as BioNym's scored judgments: its claims on one tab and its graph
+ * on another, the tab chosen by the URL hash. The tabs share one minimum
+ * confidence.
  * @param props - Component props.
  * @param props.bionym - The claims in the gene's BioNym graph.
  * @returns The section.
  */
 export const BionymSection = ({ bionym }: BionymSectionProps): JSX.Element => {
   const headingId = useId();
-  const sliderLabelId = useId();
+  const { selectTab, tab } = useBionymTab();
   const [minConfidence, setMinConfidence] = useState(DEFAULT_MIN_CONFIDENCE);
-  // The list follows the slider without holding up its drag: a gene can have
-  // over a thousand claims, and the list is memoized, so a slider move
-  // re-renders it only once the deferred value catches up.
-  const deferredMinConfidence = useDeferredValue(minConfidence);
-  const totalCount = countClaims(bionym.sources);
-  const sources = useMemo(
-    () => visibleSources(bionym.sources, deferredMinConfidence),
-    [bionym, deferredMinConfidence]
-  );
-  const shownCount = countClaims(sources);
+  const [graphOpened, setGraphOpened] = useState(tab === TAB.GRAPH);
+  // Set during render, not in an effect, so the graph shows on the same render
+  // as the tab that opens it.
+  if (tab === TAB.GRAPH && !graphOpened) setGraphOpened(true);
 
   return (
     <GenesPanel aria-labelledby={headingId} as="section">
@@ -70,104 +57,34 @@ export const BionymSection = ({ bionym }: BionymSectionProps): JSX.Element => {
         language model, and each was scored by{" "}
         <Link label="BioNym" url={BIONYM_URL} /> with a confidence from 0 to 1.
         They are BioNym&apos;s judgments, not facts about the gene. BioNym
-        gathered them on {formatDate(parseISO(bionym.runDate))}. Hover over a
-        claim to see the quote it was drawn from.
+        gathered them on {formatDate(parseISO(bionym.runDate))}.
       </Typography>
-      <ConfidenceControl>
-        <Typography
-          id={sliderLabelId}
-          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}
-        >
-          Minimum confidence
-        </Typography>
-        <Slider
-          aria-labelledby={sliderLabelId}
-          max={1}
-          min={0}
-          onChange={(_, value): void =>
-            setMinConfidence(roundToStep(value as number))
-          }
-          size="small"
-          step={CONFIDENCE_STEP}
-          value={minConfidence}
-          valueLabelDisplay="auto"
+      <Tabs
+        onTabChange={(value): void => {
+          selectTab(getActiveTab(String(value)));
+        }}
+        tabs={TABS}
+        value={tab}
+      />
+      {tab === TAB.CLAIMS && (
+        <ClaimsPanel
+          bionym={bionym}
+          minConfidence={minConfidence}
+          onMinConfidenceChange={setMinConfidence}
         />
-        <Typography
-          color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
-        >
-          {shownCount} of {totalCount} claims
-        </Typography>
-      </ConfidenceControl>
-      <SourceListView sources={sources} />
+      )}
+      {/* Once opened, the graph stays on the page, hidden while the Claims tab
+      shows, so its filters, layout and selection survive a tab switch and
+      the network isn't drawn again. */}
+      {graphOpened && (
+        <div hidden={tab !== TAB.GRAPH}>
+          <GraphPanel
+            geneUid={bionym.geneUid}
+            minConfidence={minConfidence}
+            onMinConfidenceChange={setMinConfidence}
+          />
+        </div>
+      )}
     </GenesPanel>
   );
 };
-
-/**
- * One claim, showing its text, with its quote in a tooltip on hover.
- * Memoized: filtering keeps each claim object, so a slider move renders only
- * the claims it adds.
- * @param props - Component props.
- * @param props.claim - The claim.
- * @returns The claim.
- */
-const ClaimItem = memo(function ClaimItem({
-  claim,
-}: ClaimItemProps): JSX.Element {
-  return (
-    <li>
-      {/* describeChild keeps the claim text as the item's accessible name, with
-          the quote as its description, rather than the quote replacing it. */}
-      <Tooltip arrow describeChild title={claim.quote}>
-        <Typography
-          component="span"
-          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
-        >
-          {claim.text}
-        </Typography>
-      </Tooltip>
-    </li>
-  );
-});
-
-/**
- * The sources shown, each with its claims. Memoized, so a slider move doesn't
- * re-render it until the sources shown change.
- * @param props - Component props.
- * @param props.sources - The sources to show, each with the claims to show.
- * @returns The list.
- */
-const SourceListView = memo(function SourceListView({
-  sources,
-}: SourceListViewProps): JSX.Element {
-  return (
-    <SourceList>
-      {sources.map((source) => (
-        <Source key={source.id}>
-          <Typography
-            component="h3"
-            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}
-          >
-            {source.url ? (
-              <Link label={source.title} url={source.url} />
-            ) : (
-              source.title
-            )}
-          </Typography>
-          <Typography
-            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
-          >
-            {SOURCE_KIND_LABEL[source.kind]}
-          </Typography>
-          <ClaimList>
-            {source.claims.map((claim) => (
-              <ClaimItem claim={claim} key={claim.text} />
-            ))}
-          </ClaimList>
-        </Source>
-      ))}
-    </SourceList>
-  );
-});
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ClaimsPanel/claimsPanel.tsx b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ClaimsPanel/claimsPanel.tsx
new file mode 100644
index 000000000..f3266e95c
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ClaimsPanel/claimsPanel.tsx
@@ -0,0 +1,135 @@
+import {
+  ClaimList,
+  Source,
+  SourceList,
+} from "@brc/views/GeneDetailView/components/BionymSection/bionymSection.styles";
+import { ConfidenceControl } from "@brc/views/GeneDetailView/components/BionymSection/components/ConfidenceControl/confidenceControl";
+import { SOURCE_KIND_LABEL } from "@brc/views/GeneDetailView/components/BionymSection/constants";
+import {
+  countClaims,
+  formatConfidence,
+  visibleSources,
+} from "@brc/views/GeneDetailView/components/BionymSection/utils";
+import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
+import { Typography } from "@mui/material";
+import { Tooltip } from "@repo/shared/components/Tooltip/tooltip";
+import { type JSX, memo, useDeferredValue, useMemo } from "react";
+import {
+  type ClaimItemProps,
+  type ClaimsPanelProps,
+  type SourceListViewProps,
+} from "./types";
+
+/**
+ * The Claims tab: the claims BioNym drew about the gene, grouped by source,
+ * at or above the section's minimum confidence.
+ * @param props - Component props.
+ * @param props.bionym - The claims in the gene's BioNym graph.
+ * @param props.minConfidence - The lowest confidence shown.
+ * @param props.onMinConfidenceChange - Called with a new minimum confidence.
+ * @returns The panel.
+ */
+export const ClaimsPanel = ({
+  bionym,
+  minConfidence,
+  onMinConfidenceChange,
+}: ClaimsPanelProps): JSX.Element => {
+  // The list follows the slider without holding up its drag: a gene can have
+  // over a thousand claims, and the list is memoized, so a slider move
+  // re-renders it only once the deferred value catches up.
+  const deferredMinConfidence = useDeferredValue(minConfidence);
+  const totalCount = countClaims(bionym.sources);
+  const sources = useMemo(
+    () => visibleSources(bionym.sources, deferredMinConfidence),
+    [bionym, deferredMinConfidence]
+  );
+  return (
+    <>
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}>
+        Hover over a claim to see the quote it was drawn from.
+      </Typography>
+      <ConfidenceControl
+        count={`${countClaims(sources)} of ${totalCount} claims`}
+        minConfidence={minConfidence}
+        onMinConfidenceChange={onMinConfidenceChange}
+      />
+      <SourceListView sources={sources} />
+    </>
+  );
+};
+
+/**
+ * One claim, showing its text and confidence, with its quote in a tooltip on
+ * hover. Memoized: filtering keeps each claim object, so a slider move
+ * renders only the claims it adds.
+ * @param props - Component props.
+ * @param props.claim - The claim.
+ * @returns The claim.
+ */
+const ClaimItem = memo(function ClaimItem({
+  claim,
+}: ClaimItemProps): JSX.Element {
+  return (
+    <li>
+      {/* describeChild keeps the claim text as the item's accessible name, with
+          the quote as its description, rather than the quote replacing it. */}
+      <Tooltip arrow describeChild title={claim.quote}>
+        <Typography
+          component="span"
+          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
+        >
+          {claim.text}{" "}
+          <Typography
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            component="span"
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
+          >
+            (confidence {formatConfidence(claim.confidence)})
+          </Typography>
+        </Typography>
+      </Tooltip>
+    </li>
+  );
+});
+
+/**
+ * The sources shown, each with its claims. Memoized, so a slider move doesn't
+ * re-render it until the sources shown change.
+ * @param props - Component props.
+ * @param props.sources - The sources to show, each with the claims to show.
+ * @returns The list.
+ */
+const SourceListView = memo(function SourceListView({
+  sources,
+}: SourceListViewProps): JSX.Element {
+  return (
+    <SourceList>
+      {sources.map((source) => (
+        <Source key={source.id}>
+          <Typography
+            component="h3"
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}
+          >
+            {source.url ? (
+              <Link label={source.title} url={source.url} />
+            ) : (
+              source.title
+            )}
+          </Typography>
+          <Typography
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
+          >
+            {SOURCE_KIND_LABEL[source.kind]}
+          </Typography>
+          <ClaimList>
+            {source.claims.map((claim) => (
+              <ClaimItem claim={claim} key={claim.text} />
+            ))}
+          </ClaimList>
+        </Source>
+      ))}
+    </SourceList>
+  );
+});
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ClaimsPanel/types.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ClaimsPanel/types.ts
new file mode 100644
index 000000000..1dbf50752
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ClaimsPanel/types.ts
@@ -0,0 +1,18 @@
+import { type MinConfidenceProps } from "@brc/views/GeneDetailView/components/BionymSection/types";
+import {
+  type BionymClaim,
+  type BionymClaims,
+  type BionymSource,
+} from "@repo/shared/services/genes/types";
+
+export interface ClaimsPanelProps extends MinConfidenceProps {
+  bionym: BionymClaims;
+}
+
+export interface ClaimItemProps {
+  claim: BionymClaim;
+}
+
+export interface SourceListViewProps {
+  sources: BionymSource[];
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ConfidenceControl/confidenceControl.tsx b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ConfidenceControl/confidenceControl.tsx
new file mode 100644
index 000000000..394bc67a5
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ConfidenceControl/confidenceControl.tsx
@@ -0,0 +1,48 @@
+import { ConfidenceRow } from "@brc/views/GeneDetailView/components/BionymSection/bionymSection.styles";
+import { CONFIDENCE_STEP } from "@brc/views/GeneDetailView/components/BionymSection/constants";
+import { roundToStep } from "@brc/views/GeneDetailView/components/BionymSection/utils";
+import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
+import { Slider, Typography } from "@mui/material";
+import { type JSX, useId } from "react";
+import { type ConfidenceControlProps } from "./types";
+
+/**
+ * The minimum-confidence slider, with a count of what it lets through.
+ * @param props - Component props.
+ * @param props.count - What the slider lets through, as "N of M claims".
+ * @param props.minConfidence - The slider's value.
+ * @param props.onMinConfidenceChange - Called with the slider's new value.
+ * @returns The control.
+ */
+export const ConfidenceControl = ({
+  count,
+  minConfidence,
+  onMinConfidenceChange,
+}: ConfidenceControlProps): JSX.Element => {
+  const labelId = useId();
+  return (
+    <ConfidenceRow>
+      <Typography id={labelId} variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}>
+        Minimum confidence
+      </Typography>
+      <Slider
+        aria-labelledby={labelId}
+        max={1}
+        min={0}
+        onChange={(_, value): void =>
+          onMinConfidenceChange(roundToStep(value as number))
+        }
+        size="small"
+        step={CONFIDENCE_STEP}
+        value={minConfidence}
+        valueLabelDisplay="auto"
+      />
+      <Typography
+        color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+        variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
+      >
+        {count}
+      </Typography>
+    </ConfidenceRow>
+  );
+};
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ConfidenceControl/types.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ConfidenceControl/types.ts
new file mode 100644
index 000000000..fa2f5e353
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/ConfidenceControl/types.ts
@@ -0,0 +1,5 @@
+import { type MinConfidenceProps } from "@brc/views/GeneDetailView/components/BionymSection/types";
+
+export interface ConfidenceControlProps extends MinConfidenceProps {
+  count: string;
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphLoading/graphLoading.tsx b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphLoading/graphLoading.tsx
new file mode 100644
index 000000000..49582122b
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphLoading/graphLoading.tsx
@@ -0,0 +1,20 @@
+import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
+import { Typography } from "@mui/material";
+import { type JSX } from "react";
+import { type GraphLoadingProps } from "./types";
+
+/**
+ * What the Graph tab shows while its code or its graph loads, or if its code
+ * fails to load, as it can for a page left open across a deploy. Kept apart
+ * from the Graph tab's code, which loads only when the tab opens.
+ * @param props - Component props.
+ * @param props.error - The error loading the tab's code, if it failed.
+ * @returns The message.
+ */
+export const GraphLoading = ({ error }: GraphLoadingProps): JSX.Element => (
+  <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+    {error
+      ? "The graph couldn't be loaded. Please reload the page."
+      : "Loading the graph…"}
+  </Typography>
+);
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphLoading/types.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphLoading/types.ts
new file mode 100644
index 000000000..27a5885ce
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphLoading/types.ts
@@ -0,0 +1,4 @@
+export interface GraphLoadingProps {
+  // Set by next/dynamic when the tab's code failed to load.
+  error?: Error | null;
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/EdgeKindSwitches/edgeKindSwitches.tsx b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/EdgeKindSwitches/edgeKindSwitches.tsx
new file mode 100644
index 000000000..e00d4349d
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/EdgeKindSwitches/edgeKindSwitches.tsx
@@ -0,0 +1,48 @@
+import { SwitchGrid } from "@brc/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel.styles";
+import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
+import { FormControlLabel, Switch, Typography } from "@mui/material";
+import { type JSX, useId } from "react";
+import { type EdgeKindSwitchesProps } from "./types";
+
+/**
+ * A switch for each kind of edge in the graph, with its count, to show or
+ * hide it.
+ * @param props - Component props.
+ * @param props.counts - Each kind of edge and its count, most first.
+ * @param props.hidden - The kinds of edge hidden.
+ * @param props.onToggle - Called with the kind of edge switched.
+ * @returns The switches.
+ */
+export const EdgeKindSwitches = ({
+  counts,
+  hidden,
+  onToggle,
+}: EdgeKindSwitchesProps): JSX.Element => {
+  const labelId = useId();
+  return (
+    <div aria-labelledby={labelId} role="group">
+      <Typography
+        component="h3"
+        id={labelId}
+        variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}
+      >
+        Kinds of edge
+      </Typography>
+      <SwitchGrid>
+        {counts.map(([predicate, count]) => (
+          <FormControlLabel
+            control={
+              <Switch
+                checked={!hidden.has(predicate)}
+                onChange={(): void => onToggle(predicate)}
+                size="small"
+              />
+            }
+            key={predicate}
+            label={`${predicate} (${count})`}
+          />
+        ))}
+      </SwitchGrid>
+    </div>
+  );
+};
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/EdgeKindSwitches/types.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/EdgeKindSwitches/types.ts
new file mode 100644
index 000000000..fe4914d62
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/EdgeKindSwitches/types.ts
@@ -0,0 +1,6 @@
+export interface EdgeKindSwitchesProps {
+  // Each kind of edge in the graph and its count, most first.
+  counts: [string, number][];
+  hidden: ReadonlySet<string>;
+  onToggle: (predicate: string) => void;
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NetworkView/networkView.tsx b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NetworkView/networkView.tsx
new file mode 100644
index 000000000..82c1da084
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NetworkView/networkView.tsx
@@ -0,0 +1,109 @@
+import { ZOOM_STEP } from "@brc/views/GeneDetailView/components/BionymSection/components/GraphPanel/constants";
+import { NetworkToolbar } from "@brc/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel.styles";
+import { toComponentsGraph } from "@brc/views/GeneDetailView/components/BionymSection/components/GraphPanel/utils";
+import FitScreenRoundedIcon from "@mui/icons-material/FitScreenRounded";
+import ZoomInRoundedIcon from "@mui/icons-material/ZoomInRounded";
+import ZoomOutRoundedIcon from "@mui/icons-material/ZoomOutRounded";
+import { IconButton, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import {
+  BionymNetwork,
+  type BionymNetworkInstance,
+  type BionymNetworkLayout,
+} from "bionym-components";
+import { type JSX, useEffect, useRef, useState } from "react";
+import { type NetworkViewProps } from "./types";
+
+/**
+ * BioNym's network, drawn into a div, with a layout switch and zoom buttons,
+ * since the network has no buttons of its own.
+ * @param props - Component props.
+ * @param props.graph - The graph to draw.
+ * @param props.minConfidence - The lowest confidence drawn.
+ * @param props.onSelect - Called with the node clicked, or null when no node
+ * is selected, including after each redraw.
+ * @returns The network.
+ */
+export const NetworkView = ({
+  graph,
+  minConfidence,
+  onSelect,
+}: NetworkViewProps): JSX.Element => {
+  const elRef = useRef<HTMLDivElement>(null);
+  const networkRef = useRef<BionymNetworkInstance | null>(null);
+  const minConfidenceRef = useRef(minConfidence);
+  const onSelectRef = useRef(onSelect);
+  const [layout, setLayout] = useState<BionymNetworkLayout>("columns");
+
+  useEffect(() => {
+    onSelectRef.current = onSelect;
+  }, [onSelect]);
+
+  // Drawn afresh when the graph or layout changes, which resets pan and zoom,
+  // as the network's own update does. Each drawing starts with no node
+  // selected, and the network doesn't report that, so this does.
+  useEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const network = BionymNetwork(el, toComponentsGraph(graph), {
+      layout,
+      minConfidence: minConfidenceRef.current,
+      onSelect: (node) => onSelectRef.current(node?.id ?? null),
+    });
+    networkRef.current = network;
+    onSelectRef.current(null);
+    return (): void => {
+      network.destroy();
+      networkRef.current = null;
+    };
+  }, [graph, layout]);
+
+  // A new minimum confidence redraws the network, keeping pan and zoom but
+  // dropping its selection.
+  useEffect(() => {
+    if (minConfidenceRef.current === minConfidence) return;
+    minConfidenceRef.current = minConfidence;
+    networkRef.current?.setMinConfidence(minConfidence);
+    onSelectRef.current(null);
+  }, [minConfidence]);
+
+  return (
+    <div>
+      <NetworkToolbar>
+        <ToggleButtonGroup
+          aria-label="Layout"
+          exclusive
+          onChange={(_, value: BionymNetworkLayout | null): void => {
+            if (value) setLayout(value);
+          }}
+          size="small"
+          value={layout}
+        >
+          <ToggleButton value="columns">Columns</ToggleButton>
+          <ToggleButton value="force">Force</ToggleButton>
+        </ToggleButtonGroup>
+        <IconButton
+          aria-label="Zoom in"
+          onClick={(): void => networkRef.current?.zoomBy(ZOOM_STEP)}
+          size="small"
+        >
+          <ZoomInRoundedIcon />
+        </IconButton>
+        <IconButton
+          aria-label="Zoom out"
+          onClick={(): void => networkRef.current?.zoomBy(1 / ZOOM_STEP)}
+          size="small"
+        >
+          <ZoomOutRoundedIcon />
+        </IconButton>
+        <IconButton
+          aria-label="Fit the graph"
+          onClick={(): void => networkRef.current?.fit()}
+          size="small"
+        >
+          <FitScreenRoundedIcon />
+        </IconButton>
+      </NetworkToolbar>
+      <div ref={elRef} />
+    </div>
+  );
+};
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NetworkView/types.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NetworkView/types.ts
new file mode 100644
index 000000000..51fde22e1
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NetworkView/types.ts
@@ -0,0 +1,9 @@
+import { type BionymGraph } from "@repo/shared/services/genes/types";
+
+export interface NetworkViewProps {
+  graph: BionymGraph;
+  minConfidence: number;
+  // Called with the id of the node clicked, or null when no node is selected:
+  // after a click that clears it, and after each redraw, which clears it too.
+  onSelect: (nodeId: string | null) => void;
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NodeDetail/nodeDetail.tsx b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NodeDetail/nodeDetail.tsx
new file mode 100644
index 000000000..b3ff60c8c
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NodeDetail/nodeDetail.tsx
@@ -0,0 +1,81 @@
+import {
+  DetailPanel,
+  EdgeList,
+} from "@brc/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel.styles";
+import {
+  httpsUrl,
+  nodeEdges,
+} from "@brc/views/GeneDetailView/components/BionymSection/components/GraphPanel/utils";
+import { formatConfidence } from "@brc/views/GeneDetailView/components/BionymSection/utils";
+import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
+import { Typography } from "@mui/material";
+import { type JSX, useId, useMemo } from "react";
+import { type NodeDetailProps } from "./types";
+
+/**
+ * The node clicked in the network: its label and type, a link to its source
+ * when that is an https: link, and its edges shown at the minimum confidence,
+ * each with its confidence. It has no close button: the network can drop its
+ * selection only by redrawing, which moves the nodes in the Force layout, so
+ * the panel closes when a click on empty space or another node changes the
+ * network's selection.
+ * @param props - Component props.
+ * @param props.graph - The graph drawn.
+ * @param props.minConfidence - The lowest confidence shown.
+ * @param props.node - The node.
+ * @returns The panel.
+ */
+export const NodeDetail = ({
+  graph,
+  minConfidence,
+  node,
+}: NodeDetailProps): JSX.Element => {
+  const headingId = useId();
+  const url = httpsUrl(node);
+  // The panel re-renders as the slider moves, but its threshold changes only
+  // once the slider settles.
+  const edges = useMemo(
+    () => nodeEdges(graph, node.id, minConfidence),
+    [graph, node.id, minConfidence]
+  );
+  return (
+    <aside aria-labelledby={headingId}>
+      <DetailPanel elevation={0}>
+        <Typography
+          component="h3"
+          id={headingId}
+          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}
+        >
+          {node.label}
+        </Typography>
+        <Typography
+          color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
+        >
+          {node.type}
+        </Typography>
+        {url && <Link label="Source" url={url} />}
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+          {edges.length} {edges.length === 1 ? "edge" : "edges"}
+        </Typography>
+        <EdgeList>
+          {edges.map(({ edge, other, outgoing }, i) => (
+            <li key={`${edge.subject} ${edge.predicate} ${edge.object} ${i}`}>
+              <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}>
+                {outgoing ? "→" : "←"} {edge.predicate} {other.label}{" "}
+                <Typography
+                  color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+                  component="span"
+                  variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
+                >
+                  (confidence {formatConfidence(edge.confidence)})
+                </Typography>
+              </Typography>
+            </li>
+          ))}
+        </EdgeList>
+      </DetailPanel>
+    </aside>
+  );
+};
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NodeDetail/types.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NodeDetail/types.ts
new file mode 100644
index 000000000..9175a3d02
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/NodeDetail/types.ts
@@ -0,0 +1,10 @@
+import {
+  type BionymGraph,
+  type BionymGraphNode,
+} from "@repo/shared/services/genes/types";
+
+export interface NodeDetailProps {
+  graph: BionymGraph;
+  minConfidence: number;
+  node: BionymGraphNode;
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/OverviewView/overviewView.tsx b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/OverviewView/overviewView.tsx
new file mode 100644
index 000000000..ae7e6824c
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/OverviewView/overviewView.tsx
@@ -0,0 +1,35 @@
+import { toComponentsGraph } from "@brc/views/GeneDetailView/components/BionymSection/components/GraphPanel/utils";
+import { BionymOverview } from "bionym-components";
+import { type JSX, useEffect, useRef } from "react";
+import { type OverviewViewProps } from "./types";
+
+/**
+ * BioNym's bar chart of the graph's nodes by type, drawn into a div. A bar
+ * click hides or shows that type of node.
+ * @param props - Component props.
+ * @param props.graph - The whole graph, so every type keeps its bar.
+ * @param props.onTypeClick - Called with the type whose bar was clicked.
+ * @returns The chart.
+ */
+export const OverviewView = ({
+  graph,
+  onTypeClick,
+}: OverviewViewProps): JSX.Element => {
+  const elRef = useRef<HTMLDivElement>(null);
+  const onTypeClickRef = useRef(onTypeClick);
+
+  useEffect(() => {
+    onTypeClickRef.current = onTypeClick;
+  }, [onTypeClick]);
+
+  useEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const overview = BionymOverview(el, toComponentsGraph(graph), {
+      onBarClick: (nodeType) => onTypeClickRef.current(nodeType),
+    });
+    return (): void => overview.destroy();
+  }, [graph]);
+
+  return <div ref={elRef} />;
+};
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/OverviewView/types.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/OverviewView/types.ts
new file mode 100644
index 000000000..a250c46fd
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/components/OverviewView/types.ts
@@ -0,0 +1,7 @@
+import { type BionymGraph } from "@repo/shared/services/genes/types";
+
+export interface OverviewViewProps {
+  graph: BionymGraph;
+  // Called with the type of node whose bar was clicked.
+  onTypeClick: (nodeType: string) => void;
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/constants.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/constants.ts
new file mode 100644
index 000000000..d716d8524
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/constants.ts
@@ -0,0 +1,23 @@
+// The kinds of edge hidden when the graph first opens, chosen on the three
+// checked-in graphs at the default 0.8. Each adds many nodes that crowd out
+// the rest:
+// - has_member links the gene's ortholog group to every protein in it
+//   (2,460 for Kelch13);
+// - same_as links aliases of one entity;
+// - has_candidate_gene links candidate genes in related assemblies;
+// - annotated_in links those genes to the assemblies they're annotated in.
+// Hidden, they take Kelch13 from 5,111 nodes to 1,002, CRT from 2,386 to
+// 1,452 and AMA1 from 1,475 to 1,061, and its gene column from 1,590 genes to
+// 35. Each can be shown again with its switch.
+export const DEFAULT_HIDDEN_PREDICATES: ReadonlySet<string> = new Set([
+  "annotated_in",
+  "has_candidate_gene",
+  "has_member",
+  "same_as",
+]);
+
+// How long the slider must rest before the network is redrawn at its value.
+export const SLIDER_SETTLE_MS = 150;
+
+// How far each zoom button zooms.
+export const ZOOM_STEP = 1.4;
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel.styles.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel.styles.ts
new file mode 100644
index 000000000..b6b157c07
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel.styles.ts
@@ -0,0 +1,59 @@
+import { RoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/components/RoundedPaper/roundedPaper";
+import { bpDown1024 } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import styled from "@emotion/styled";
+
+// The network, with the detail panel beside it, or under it on a narrow
+// screen.
+export const GraphLayout = styled.div`
+  align-items: start;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0, 1fr) 320px;
+
+  ${bpDown1024} {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`;
+
+export const NetworkToolbar = styled.div`
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+`;
+
+// findable-ui's bordered, rounded card, kept to its content's height rather
+// than stretched to the network's.
+export const DetailPanel = styled(RoundedPaper)`
+  align-self: start;
+  display: grid;
+  gap: 8px;
+  overflow-wrap: anywhere;
+  padding: 12px 16px;
+`;
+
+// A node such as the gene itself can have hundreds of edges, so the list
+// scrolls within the panel.
+export const EdgeList = styled.ul`
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  max-height: 480px;
+  overflow-y: auto;
+  padding-left: 0;
+  list-style: none;
+`;
+
+export const HiddenTypes = styled.div`
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
+export const SwitchGrid = styled.div`
+  display: grid;
+  gap: 0 16px;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+`;
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel.tsx b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel.tsx
new file mode 100644
index 000000000..8dc9531c2
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel.tsx
@@ -0,0 +1,150 @@
+import { ConfidenceControl } from "@brc/views/GeneDetailView/components/BionymSection/components/ConfidenceControl/confidenceControl";
+import { GraphLoading } from "@brc/views/GeneDetailView/components/BionymSection/components/GraphLoading/graphLoading";
+import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
+import { Chip, Typography } from "@mui/material";
+import { useGeneBionymGraph } from "@repo/shared/hooks/useGeneBionymGraph";
+import "bionym-components/styles.css";
+import { type JSX, useMemo, useState } from "react";
+import { EdgeKindSwitches } from "./components/EdgeKindSwitches/edgeKindSwitches";
+import { NetworkView } from "./components/NetworkView/networkView";
+import { NodeDetail } from "./components/NodeDetail/nodeDetail";
+import { OverviewView } from "./components/OverviewView/overviewView";
+import { DEFAULT_HIDDEN_PREDICATES, SLIDER_SETTLE_MS } from "./constants";
+import { GraphLayout, HiddenTypes } from "./graphPanel.styles";
+import { useSettledValue } from "./hooks/useSettledValue";
+import { type GraphExplorerProps, type GraphPanelProps } from "./types";
+import { countPredicates, countShown, filterGraph, toggled } from "./utils";
+
+/**
+ * The Graph tab: the gene's BioNym graph, once it has loaded.
+ * @param props - Component props.
+ * @param props.geneUid - The gene's UID.
+ * @param props.minConfidence - The lowest confidence shown.
+ * @param props.onMinConfidenceChange - Called with a new minimum confidence.
+ * @returns The panel.
+ */
+export const GraphPanel = ({
+  geneUid,
+  minConfidence,
+  onMinConfidenceChange,
+}: GraphPanelProps): JSX.Element => {
+  const result = useGeneBionymGraph(geneUid);
+  if (result.status === "loading") return <GraphLoading />;
+  if (result.status === "unavailable")
+    return (
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+        The graph is unavailable right now. Please try again later.
+      </Typography>
+    );
+  return (
+    <GraphExplorer
+      graph={result.graph}
+      minConfidence={minConfidence}
+      onMinConfidenceChange={onMinConfidenceChange}
+    />
+  );
+};
+
+/**
+ * The graph explorer: an overview of the graph's nodes by type, BioNym's
+ * network, and a panel for the node clicked. Kinds of edge and types of node
+ * can be hidden; the slider filters the network by confidence.
+ * @param props - Component props.
+ * @param props.graph - The gene's whole graph.
+ * @param props.minConfidence - The lowest confidence shown.
+ * @param props.onMinConfidenceChange - Called with a new minimum confidence.
+ * @returns The explorer.
+ */
+const GraphExplorer = ({
+  graph,
+  minConfidence,
+  onMinConfidenceChange,
+}: GraphExplorerProps): JSX.Element => {
+  const [hiddenPredicates, setHiddenPredicates] = useState(
+    DEFAULT_HIDDEN_PREDICATES
+  );
+  const [hiddenTypes, setHiddenTypes] = useState<ReadonlySet<string>>(
+    () => new Set()
+  );
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const drawn = useMemo(
+    () => filterGraph(graph, hiddenPredicates, hiddenTypes),
+    [graph, hiddenPredicates, hiddenTypes]
+  );
+  const predicateCounts = useMemo(() => countPredicates(graph), [graph]);
+  // The network, the panel and the count take the slider's value once it
+  // settles, so the count always describes the network on screen.
+  const settledMinConfidence = useSettledValue(minConfidence, SLIDER_SETTLE_MS);
+  const shown = countShown(drawn, settledMinConfidence);
+  const selected = selectedId
+    ? drawn.nodes.find((node) => node.id === selectedId)
+    : undefined;
+
+  const togglePredicate = (predicate: string): void =>
+    setHiddenPredicates((hidden) => toggled(hidden, predicate));
+  const toggleType = (nodeType: string): void =>
+    setHiddenTypes((hidden) => toggled(hidden, nodeType));
+
+  return (
+    <>
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}>
+        The graph links the gene to what BioNym found about it: its relatives,
+        assemblies, papers, datasets and the claims drawn from them. Click a
+        node to see its edges.
+      </Typography>
+      <ConfidenceControl
+        count={`${shown.nodes} nodes and ${shown.edges} of ${graph.edges.length} edges`}
+        minConfidence={minConfidence}
+        onMinConfidenceChange={onMinConfidenceChange}
+      />
+      {/* The bars count the whole graph, not the network drawn below, so
+      every type keeps a bar to click. */}
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+        Every node in BioNym&apos;s graph, by type. Click a bar to hide or show
+        that type.
+      </Typography>
+      <OverviewView graph={graph} onTypeClick={toggleType} />
+      {hiddenTypes.size > 0 && (
+        <HiddenTypes>
+          <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+            Hidden types of node:
+          </Typography>
+          {[...hiddenTypes].sort().map((nodeType) => (
+            <Chip
+              key={nodeType}
+              label={nodeType}
+              onDelete={(): void => toggleType(nodeType)}
+              size="small"
+            />
+          ))}
+        </HiddenTypes>
+      )}
+      <GraphLayout>
+        <NetworkView
+          graph={drawn}
+          minConfidence={settledMinConfidence}
+          onSelect={setSelectedId}
+        />
+        {selected ? (
+          <NodeDetail
+            graph={drawn}
+            minConfidence={settledMinConfidence}
+            node={selected}
+          />
+        ) : (
+          <Typography
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
+          >
+            Click a node to see its edges.
+          </Typography>
+        )}
+      </GraphLayout>
+      <EdgeKindSwitches
+        counts={predicateCounts}
+        hidden={hiddenPredicates}
+        onToggle={togglePredicate}
+      />
+    </>
+  );
+};
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/hooks/useSettledValue.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/hooks/useSettledValue.ts
new file mode 100644
index 000000000..863816245
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/hooks/useSettledValue.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+/**
+ * A value that follows another once it has stopped changing for a moment.
+ * The slider moves in steps of 0.01 while it's dragged, and each value the
+ * network takes redraws it in full; this lets a drag redraw it once.
+ * @param value - The changing value.
+ * @param delayMs - How long the value must hold before it's followed.
+ * @returns The settled value.
+ */
+export function useSettledValue<T>(value: T, delayMs: number): T {
+  const [settled, setSettled] = useState(value);
+  useEffect(() => {
+    const id = setTimeout(() => setSettled(value), delayMs);
+    return (): void => clearTimeout(id);
+  }, [value, delayMs]);
+  return settled;
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/types.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/types.ts
new file mode 100644
index 000000000..2eb08c1ca
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/types.ts
@@ -0,0 +1,27 @@
+import { type MinConfidenceProps } from "@brc/views/GeneDetailView/components/BionymSection/types";
+import {
+  type BionymGraph,
+  type BionymGraphEdge,
+  type BionymGraphNode,
+} from "@repo/shared/services/genes/types";
+
+export interface GraphPanelProps extends MinConfidenceProps {
+  geneUid: string;
+}
+
+export interface GraphExplorerProps extends MinConfidenceProps {
+  graph: BionymGraph;
+}
+
+// How many of a graph's nodes and edges are shown.
+export interface GraphCounts {
+  edges: number;
+  nodes: number;
+}
+
+// A node's edge, seen from the node: the edge, and the node at its other end.
+export interface NodeEdge {
+  edge: BionymGraphEdge;
+  other: BionymGraphNode;
+  outgoing: boolean;
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/utils.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/utils.ts
new file mode 100644
index 000000000..05f8214bd
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/utils.ts
@@ -0,0 +1,185 @@
+import {
+  type BionymGraph,
+  type BionymGraphEdge,
+  type BionymGraphNode,
+} from "@repo/shared/services/genes/types";
+import { type BionymComponentsGraph } from "bionym-components";
+import { type GraphCounts, type NodeEdge } from "./types";
+
+/**
+ * The graph in the shape BioNym's components read, with its root given as
+ * metadata.query, which they always keep.
+ * @param graph - The gene's graph, as the API gives it.
+ * @returns The graph for BioNym's components.
+ */
+export function toComponentsGraph(graph: BionymGraph): BionymComponentsGraph {
+  return {
+    edges: graph.edges,
+    metadata: { query: graph.query },
+    nodes: graph.nodes,
+  };
+}
+
+/**
+ * The graph without the hidden kinds of edge or types of node, and without the
+ * nodes that leaves with no edges. The gene's own node is always kept.
+ * @param graph - The gene's graph.
+ * @param hiddenPredicates - The kinds of edge to hide.
+ * @param hiddenTypes - The types of node to hide.
+ * @returns The graph to draw.
+ */
+export function filterGraph(
+  graph: BionymGraph,
+  hiddenPredicates: ReadonlySet<string>,
+  hiddenTypes: ReadonlySet<string>
+): BionymGraph {
+  const byId = nodesById(graph);
+  const isShown = (id: string): boolean =>
+    !hiddenTypes.has(edgeEnd(byId, id).type);
+  const edges = graph.edges.filter(
+    (edge) =>
+      !hiddenPredicates.has(edge.predicate) &&
+      isShown(edge.subject) &&
+      isShown(edge.object)
+  );
+  const kept = shownNodeIds(graph.query, edges);
+  return {
+    ...graph,
+    edges,
+    nodes: graph.nodes.filter((node) => kept.has(node.id)),
+  };
+}
+
+/**
+ * How many of a graph's nodes and edges are shown at a minimum confidence, as
+ * BioNym's network shows them: the edges at or above it, the nodes they join,
+ * and the gene's own node.
+ * @param graph - The graph drawn.
+ * @param minConfidence - The lowest confidence shown.
+ * @returns The counts.
+ */
+export function countShown(
+  graph: BionymGraph,
+  minConfidence: number
+): GraphCounts {
+  const edges = graph.edges.filter((edge) => edge.confidence >= minConfidence);
+  return { edges: edges.length, nodes: shownNodeIds(graph.query, edges).size };
+}
+
+/**
+ * The nodes a set of edges shows: the nodes they join, and the gene's own
+ * node, which is always shown.
+ * @param query - The id of the gene's own node.
+ * @param edges - The edges shown.
+ * @returns The ids of the nodes shown.
+ */
+function shownNodeIds(query: string, edges: BionymGraphEdge[]): Set<string> {
+  const ids = new Set([query]);
+  for (const edge of edges) {
+    ids.add(edge.subject);
+    ids.add(edge.object);
+  }
+  return ids;
+}
+
+/**
+ * The graph's kinds of edge, each with how many edges it has, most first.
+ * @param graph - The gene's graph.
+ * @returns Each kind of edge and its count.
+ */
+export function countPredicates(graph: BionymGraph): [string, number][] {
+  const counts = new Map<string, number>();
+  for (const edge of graph.edges) {
+    counts.set(edge.predicate, (counts.get(edge.predicate) ?? 0) + 1);
+  }
+  return [...counts].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+}
+
+/**
+ * A node's edges shown at a minimum confidence, each with the node at its
+ * other end, highest confidence first.
+ * @param graph - The graph drawn.
+ * @param nodeId - The node.
+ * @param minConfidence - The lowest confidence shown.
+ * @returns The node's edges.
+ */
+export function nodeEdges(
+  graph: BionymGraph,
+  nodeId: string,
+  minConfidence: number
+): NodeEdge[] {
+  const byId = nodesById(graph);
+  return graph.edges
+    .filter(
+      (edge) =>
+        edge.confidence >= minConfidence &&
+        (edge.subject === nodeId || edge.object === nodeId)
+    )
+    .map((edge) => {
+      const outgoing = edge.subject === nodeId;
+      return {
+        edge,
+        other: edgeEnd(byId, outgoing ? edge.object : edge.subject),
+        outgoing,
+      };
+    })
+    .sort((a, b) => b.edge.confidence - a.edge.confidence);
+}
+
+/**
+ * The node's link, if it is an https: URL. The API passes only https: links;
+ * this checks again before a link is drawn, since a link with another scheme,
+ * such as javascript:, can run code when clicked.
+ * @param node - A node.
+ * @returns The link, or null.
+ */
+export function httpsUrl(node: BionymGraphNode): string | null {
+  if (!node.url) return null;
+  try {
+    return new URL(node.url).protocol === "https:" ? node.url : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * A graph's nodes, by id.
+ * @param graph - A graph.
+ * @returns The nodes, by id.
+ */
+function nodesById(graph: BionymGraph): Map<string, BionymGraphNode> {
+  return new Map(graph.nodes.map((node) => [node.id, node]));
+}
+
+/**
+ * The node at one end of an edge. The API gives only graphs whose every edge
+ * ends at one of their nodes, so a missing node is a broken contract.
+ * @param byId - The graph's nodes, by id.
+ * @param id - The id at the edge's end.
+ * @returns The node.
+ * @throws {Error} If no node has the id.
+ */
+function edgeEnd(
+  byId: Map<string, BionymGraphNode>,
+  id: string
+): BionymGraphNode {
+  const node = byId.get(id);
+  if (!node) throw new Error(`An edge ends at ${id}, which isn't a node`);
+  return node;
+}
+
+/**
+ * A set with a value added if it was missing, or removed if it was there.
+ * @param set - The set.
+ * @param value - The value.
+ * @returns A new set.
+ */
+export function toggled(
+  set: ReadonlySet<string>,
+  value: string
+): ReadonlySet<string> {
+  const next = new Set(set);
+  if (next.has(value)) next.delete(value);
+  else next.add(value);
+  return next;
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/constants.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/constants.ts
index 460b39524..e43ccbd41 100644
--- a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/constants.ts
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/constants.ts
@@ -15,3 +15,14 @@ export const SOURCE_KIND_LABEL: Record<BionymSourceKind, string> = {
 
 // The slider's step. Confidences are given to two decimal places.
 export const CONFIDENCE_STEP = 0.01;
+
+// The section's tabs, each shown at its URL hash, as #claims or #graph.
+export const TAB = {
+  CLAIMS: "claims",
+  GRAPH: "graph",
+} as const;
+
+export const TABS = [
+  { label: "Claims", value: TAB.CLAIMS },
+  { label: "Graph", value: TAB.GRAPH },
+];
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/hooks/useBionymTab.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/hooks/useBionymTab.ts
new file mode 100644
index 000000000..dd72ddf32
--- /dev/null
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/hooks/useBionymTab.ts
@@ -0,0 +1,39 @@
+import {
+  type BionymTab,
+  type BionymTabState,
+} from "@brc/views/GeneDetailView/components/BionymSection/types";
+import {
+  getActiveTab,
+  rethrowUnlessCancelled,
+} from "@brc/views/GeneDetailView/components/BionymSection/utils";
+import { useHash } from "@databiosphere/findable-ui/lib/components/Layout/components/Outline/hooks/UseHash/hook";
+import { useRouter } from "next/router";
+import { useRef, useState } from "react";
+
+/**
+ * The tab the section shows, and a function to choose another.
+ * The tab follows the URL hash, as on the back button. Next writes the new
+ * hash with no hashchange event, so the section sees it only when Next renders
+ * the navigation. A chosen tab therefore shows at once, until the last
+ * navigation asked for is done; the tabs ignore a click on the tab they show
+ * as selected, so a quick second click would otherwise be lost.
+ * @returns The tab shown, and a function that navigates to a tab.
+ */
+export function useBionymTab(): BionymTabState {
+  const { push } = useRouter();
+  const hashTab = getActiveTab(useHash().hash);
+  const [chosenTab, setChosenTab] = useState<BionymTab | null>(null);
+  const lastNavigation = useRef(0);
+
+  const selectTab = (tab: BionymTab): void => {
+    const navigation = ++lastNavigation.current;
+    setChosenTab(tab);
+    // Next's router, not the History API, so Next records the history entry
+    // and renders the gene page again when the back button returns to it.
+    push(`#${tab}`, undefined, { scroll: false }).then(() => {
+      if (navigation === lastNavigation.current) setChosenTab(null);
+    }, rethrowUnlessCancelled);
+  };
+
+  return { selectTab, tab: chosenTab ?? hashTab };
+}
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/types.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/types.ts
index 3851ccc08..eb68ee5ae 100644
--- a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/types.ts
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/types.ts
@@ -1,17 +1,20 @@
-import {
-  type BionymClaim,
-  type BionymClaims,
-  type BionymSource,
-} from "@repo/shared/services/genes/types";
+import { type BionymClaims } from "@repo/shared/services/genes/types";
+import { type TAB } from "./constants";
+
+export type BionymTab = (typeof TAB)[keyof typeof TAB];
 
 export interface BionymSectionProps {
   bionym: BionymClaims;
 }
 
-export interface ClaimItemProps {
-  claim: BionymClaim;
+// The confidence threshold the section's tabs share, and how to change it.
+export interface MinConfidenceProps {
+  minConfidence: number;
+  onMinConfidenceChange: (minConfidence: number) => void;
 }
 
-export interface SourceListViewProps {
-  sources: BionymSource[];
+// The tab the section shows, and how to choose another.
+export interface BionymTabState {
+  selectTab: (tab: BionymTab) => void;
+  tab: BionymTab;
 }
diff --git a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/utils.ts b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/utils.ts
index daab48233..9792e57bb 100644
--- a/sites/brc-analytics/views/GeneDetailView/components/BionymSection/utils.ts
+++ b/sites/brc-analytics/views/GeneDetailView/components/BionymSection/utils.ts
@@ -1,5 +1,6 @@
 import { type BionymSource } from "@repo/shared/services/genes/types";
-import { CONFIDENCE_STEP } from "./constants";
+import { CONFIDENCE_STEP, TAB } from "./constants";
+import { type BionymTab } from "./types";
 
 /**
  * The number of claims across the given sources.
@@ -10,6 +11,39 @@ export function countClaims(sources: BionymSource[]): number {
   return sources.reduce((count, source) => count + source.claims.length, 0);
 }
 
+/**
+ * Format a confidence for display, to two decimal places.
+ * @param confidence - A confidence, from 0 to 1.
+ * @returns The formatted confidence.
+ */
+export function formatConfidence(confidence: number): string {
+  return confidence.toFixed(2);
+}
+
+/**
+ * The tab a URL hash selects; the Claims tab for any other hash.
+ * @param hash - The URL hash, without its leading "#".
+ * @returns The tab.
+ */
+export function getActiveTab(hash: string): BionymTab {
+  return hash === TAB.GRAPH ? TAB.GRAPH : TAB.CLAIMS;
+}
+
+/**
+ * Rethrow a navigation's error, unless Next cancelled the navigation for a
+ * newer one, as it does when a second tab is chosen before the first renders.
+ * @param error - The error a Next navigation rejected with.
+ */
+export function rethrowUnlessCancelled(error: unknown): void {
+  if (
+    error instanceof Error &&
+    "cancelled" in error &&
+    error.cancelled === true
+  )
+    return;
+  throw error;
+}
+
 /**
  * Round a slider value to the slider's step. The slider's arrow keys add the
  * step without rounding, so five steps from 0.8 give 0.8500000000000001, which
diff --git a/tests/hooks/useGeneBionymGraph.test.tsx b/tests/hooks/useGeneBionymGraph.test.tsx
new file mode 100644
index 000000000..7afa2b94f
--- /dev/null
+++ b/tests/hooks/useGeneBionymGraph.test.tsx
@@ -0,0 +1,124 @@
+import { useGeneBionymGraph } from "@repo/shared/hooks/useGeneBionymGraph";
+import { fetchGeneBionymGraph } from "@repo/shared/services/genes/api";
+import { type BionymGraph } from "@repo/shared/services/genes/types";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import { HTTPError } from "ky";
+import { type JSX, type ReactNode } from "react";
+
+// fetchGeneBionymGraph tells "no graph" from "unavailable" with instanceof, so the
+// stub carries an error class of its own; the API client is built with
+// ky.create.
+const mockGet = jest.fn();
+jest.mock("ky", () => {
+  class StubHTTPError extends Error {
+    response: { status: number };
+    constructor(status: number) {
+      super(`HTTP ${status}`);
+      this.response = { status };
+    }
+  }
+  return {
+    HTTPError: StubHTTPError,
+    __esModule: true,
+    default: {
+      // Delegate at call time: create() runs while this module is still
+      // initialising, so naming the jest.fn() directly would hit the TDZ.
+      create: (): unknown => ({
+        delete: jest.fn(),
+        get: (...args: unknown[]): unknown => mockGet(...args),
+        post: jest.fn(),
+      }),
+    },
+  };
+});
+
+const MockHTTPError = HTTPError as unknown as new (status: number) => Error;
+
+const UID = "f0adadd3-973b-5c61-9e11-7c688b4e0895";
+const GRAPH: BionymGraph = {
+  edges: [],
+  geneUid: UID,
+  nodes: [{ id: "PF3D7_1343700", label: "Kelch13", type: "Gene", url: null }],
+  query: "PF3D7_1343700",
+};
+
+/**
+ * A ky response stub that resolves to the graph.
+ * @returns An object shaped like ky's response promise.
+ */
+function found(): { json: () => Promise<unknown> } {
+  return { json: () => Promise.resolve(GRAPH) };
+}
+
+/**
+ * A ky response stub that rejects.
+ * @param error - What the request rejects with.
+ * @returns An object shaped like ky's response promise.
+ */
+function fails(error: Error): { json: () => Promise<never> } {
+  return { json: () => Promise.reject(error) };
+}
+
+/**
+ * Render useGeneBionymGraph with a query client that doesn't retry.
+ * @param geneUid - The gene UID to fetch.
+ * @returns The hook's result.
+ */
+function renderUseGeneBionymGraph(geneUid: string): {
+  result: { current: ReturnType<typeof useGeneBionymGraph> };
+} {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const wrapper = ({ children }: { children: ReactNode }): JSX.Element => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+  return renderHook(() => useGeneBionymGraph(geneUid), { wrapper });
+}
+
+beforeEach(() => mockGet.mockReset());
+
+describe("fetchGeneBionymGraph", () => {
+  it("returns the graph", async () => {
+    mockGet.mockReturnValue(found());
+    await expect(fetchGeneBionymGraph(UID)).resolves.toEqual(GRAPH);
+    expect(mockGet).toHaveBeenCalledWith(
+      `genes/${UID}/bionym/graph`,
+      expect.anything()
+    );
+  });
+
+  it.each([404, 422])("treats %i as no graph", async (status) => {
+    mockGet.mockReturnValue(fails(new MockHTTPError(status)));
+    await expect(fetchGeneBionymGraph(UID)).resolves.toBeNull();
+  });
+
+  it("throws on a 503", async () => {
+    const error = new MockHTTPError(503);
+    mockGet.mockReturnValue(fails(error));
+    await expect(fetchGeneBionymGraph(UID)).rejects.toBe(error);
+  });
+});
+
+describe("useGeneBionymGraph", () => {
+  it("is loading, then returns the graph", async () => {
+    mockGet.mockReturnValue(found());
+    const { result } = renderUseGeneBionymGraph(UID);
+    expect(result.current).toEqual({ status: "loading" });
+    await waitFor(() =>
+      expect(result.current).toEqual({ graph: GRAPH, status: "found" })
+    );
+  });
+
+  it.each([
+    ["the gene has no graph", 404],
+    ["the API is unavailable", 503],
+  ])("is unavailable when %s", async (_, status) => {
+    mockGet.mockReturnValue(fails(new MockHTTPError(status)));
+    const { result } = renderUseGeneBionymGraph(UID);
+    await waitFor(() =>
+      expect(result.current).toEqual({ status: "unavailable" })
+    );
+  });
+});
diff --git a/tests/views/bionymGraphPanel.test.tsx b/tests/views/bionymGraphPanel.test.tsx
new file mode 100644
index 000000000..652168a71
--- /dev/null
+++ b/tests/views/bionymGraphPanel.test.tsx
@@ -0,0 +1,382 @@
+import { GraphLoading } from "@brc/views/GeneDetailView/components/BionymSection/components/GraphLoading/graphLoading";
+import { ZOOM_STEP } from "@brc/views/GeneDetailView/components/BionymSection/components/GraphPanel/constants";
+import { GraphPanel } from "@brc/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel";
+import {
+  filterGraph,
+  httpsUrl,
+} from "@brc/views/GeneDetailView/components/BionymSection/components/GraphPanel/utils";
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { createTheme, ThemeProvider } from "@mui/material";
+import { type GeneBionymGraphResult } from "@repo/shared/hooks/useGeneBionymGraph";
+import {
+  type BionymGraph,
+  type BionymGraphNode,
+} from "@repo/shared/services/genes/types";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { type JSX, useState } from "react";
+// jest-dom matchers aren't registered globally in this repo's jest config.
+import "@testing-library/jest-dom";
+
+// What the fake BioNym components were drawn with, newest last.
+interface MockDrawing {
+  graph: BionymGraph;
+  instance: Record<string, jest.Mock>;
+  opts: {
+    layout?: string;
+    minConfidence?: number;
+    onBarClick?: (nodeType: string) => void;
+    onSelect?: (node: BionymGraphNode | null) => void;
+  };
+}
+const mockNetworks: MockDrawing[] = [];
+const mockOverviews: MockDrawing[] = [];
+
+// BioNym's components are ES modules that draw with D3, which Jest can't
+// load; these fakes record what they're drawn with. The graph they're given
+// is in BioNym's shape, with its root as metadata.query; the tests read it
+// back in the API's shape.
+jest.mock("bionym-components", () => {
+  const record =
+    (drawings: MockDrawing[], methods: string[]) =>
+    (
+      _el: HTMLElement,
+      graph: {
+        edges: BionymGraph["edges"];
+        metadata: { query: string };
+        nodes: BionymGraph["nodes"];
+      },
+      opts: MockDrawing["opts"] = {}
+    ): Record<string, jest.Mock> => {
+      const instance = Object.fromEntries(methods.map((m) => [m, jest.fn()]));
+      drawings.push({
+        graph: {
+          edges: graph.edges,
+          geneUid: "",
+          nodes: graph.nodes,
+          query: graph.metadata.query,
+        },
+        instance,
+        opts,
+      });
+      return instance;
+    };
+  // Delegate at call time: the components are imported while this module is
+  // still initialising, so naming the arrays here directly would hit the TDZ.
+  return {
+    BionymNetwork: (
+      ...args: Parameters<ReturnType<typeof record>>
+    ): Record<string, jest.Mock> =>
+      record(mockNetworks, ["destroy", "fit", "setMinConfidence", "zoomBy"])(
+        ...args
+      ),
+    BionymOverview: (
+      ...args: Parameters<ReturnType<typeof record>>
+    ): Record<string, jest.Mock> => record(mockOverviews, ["destroy"])(...args),
+  };
+});
+
+let mockResult: GeneBionymGraphResult = { status: "loading" };
+jest.mock("@repo/shared/hooks/useGeneBionymGraph", () => ({
+  useGeneBionymGraph: (): GeneBionymGraphResult => mockResult,
+}));
+
+const NODES: BionymGraphNode[] = [
+  {
+    id: "PF3D7_0000000",
+    label: "Gene 1",
+    type: "Gene",
+    url: "https://veupathdb.org/gene/PF3D7_0000000",
+  },
+  {
+    id: "pubmed:1",
+    label: "A paper",
+    type: "Publication",
+    url: "https://pubmed.ncbi.nlm.nih.gov/1/",
+  },
+  { id: "claim:1", label: "Claim 1", type: "Claim", url: null },
+  { id: "claim:2", label: "Claim 2", type: "Claim", url: null },
+  { id: "protein:1", label: "Protein 1", type: "Protein", url: null },
+  {
+    id: "dataset:1",
+    label: "A dataset",
+    type: "Dataset",
+    url: "javascript:alert(1)",
+  },
+];
+
+const GRAPH: BionymGraph = {
+  edges: [
+    {
+      confidence: 1,
+      object: "PF3D7_0000000",
+      predicate: "cited_in",
+      subject: "pubmed:1",
+    },
+    {
+      confidence: 0.99,
+      object: "claim:1",
+      predicate: "reports",
+      subject: "pubmed:1",
+    },
+    {
+      confidence: 0.5,
+      object: "claim:2",
+      predicate: "reports",
+      subject: "pubmed:1",
+    },
+    // A kind of edge hidden by default.
+    {
+      confidence: 1,
+      object: "protein:1",
+      predicate: "has_member",
+      subject: "PF3D7_0000000",
+    },
+    {
+      confidence: 0.9,
+      object: "PF3D7_0000000",
+      predicate: "measured_in",
+      subject: "dataset:1",
+    },
+  ],
+  geneUid: "f0adadd3-973b-5c61-9e11-7c688b4e0895",
+  nodes: NODES,
+  query: "PF3D7_0000000",
+};
+
+const theme = createTheme();
+
+/**
+ * The Graph tab, holding the minimum confidence as the section does.
+ * @returns The tab.
+ */
+function Harness(): JSX.Element {
+  const [minConfidence, setMinConfidence] = useState(0.8);
+  return (
+    <GraphPanel
+      geneUid={GRAPH.geneUid}
+      minConfidence={minConfidence}
+      onMinConfidenceChange={setMinConfidence}
+    />
+  );
+}
+
+/**
+ * Render the Graph tab.
+ */
+function renderPanel(): void {
+  render(
+    <ThemeProvider theme={theme}>
+      <EmotionThemeProvider theme={theme}>
+        <Harness />
+      </EmotionThemeProvider>
+    </ThemeProvider>
+  );
+}
+
+/**
+ * The network as last drawn.
+ * @returns The latest drawing.
+ */
+function network(): MockDrawing {
+  const drawing = mockNetworks.at(-1);
+  if (!drawing) throw new Error("No network drawn");
+  return drawing;
+}
+
+/**
+ * The ids of the nodes the network was last drawn with.
+ * @returns The ids, sorted.
+ */
+function drawnNodeIds(): string[] {
+  return network()
+    .graph.nodes.map((node) => node.id)
+    .sort();
+}
+
+/**
+ * Click a node in the network, as BioNym's network reports it.
+ * @param id - The node's id.
+ */
+function selectNode(id: string): void {
+  const node = NODES.find((n) => n.id === id) ?? null;
+  act(() => network().opts.onSelect?.(node));
+}
+
+beforeEach(() => {
+  mockNetworks.length = 0;
+  mockOverviews.length = 0;
+  mockResult = { graph: GRAPH, status: "found" };
+});
+
+describe("GraphPanel", () => {
+  it("says so while the graph loads, or when it's unavailable", () => {
+    mockResult = { status: "loading" };
+    const { rerender } = render(<Harness />);
+    expect(screen.getByText("Loading the graph…")).toBeInTheDocument();
+    mockResult = { status: "unavailable" };
+    rerender(<Harness />);
+    expect(
+      screen.getByText(/The graph is unavailable right now/)
+    ).toBeInTheDocument();
+    expect(mockNetworks).toHaveLength(0);
+  });
+
+  it("draws the network without the kinds of edge hidden by default", () => {
+    renderPanel();
+    expect(drawnNodeIds()).toStrictEqual([
+      "PF3D7_0000000",
+      "claim:1",
+      "claim:2",
+      "dataset:1",
+      "pubmed:1",
+    ]);
+    expect(network().graph.query).toBe("PF3D7_0000000");
+    expect(network().opts).toMatchObject({
+      layout: "columns",
+      minConfidence: 0.8,
+    });
+    // The overview counts the whole graph, so every type keeps its bar.
+    expect(mockOverviews.at(-1)?.graph.nodes).toHaveLength(NODES.length);
+    expect(screen.getByText("4 nodes and 3 of 5 edges")).toBeInTheDocument();
+    expect(
+      screen.getByRole("switch", { name: "has_member (1)" })
+    ).not.toBeChecked();
+    expect(screen.getByRole("switch", { name: "reports (2)" })).toBeChecked();
+  });
+
+  it("draws a kind of edge when its switch is turned on", () => {
+    renderPanel();
+    fireEvent.click(screen.getByRole("switch", { name: "has_member (1)" }));
+    expect(drawnNodeIds()).toContain("protein:1");
+    expect(screen.getByText("5 nodes and 4 of 5 edges")).toBeInTheDocument();
+  });
+
+  it("filters the drawn network by the slider once it settles, without redrawing it", async () => {
+    renderPanel();
+    const drawn = network();
+    selectNode("pubmed:1");
+    const before = screen.getByText(/ nodes and /).textContent;
+    fireEvent.change(
+      screen.getByRole("slider", { name: "Minimum confidence" }),
+      { target: { value: 0.95 } }
+    );
+    // The network and the count follow the slider together, once it settles.
+    expect(screen.getByText(/ nodes and /)).toHaveTextContent(before ?? "");
+    expect(drawn.instance.setMinConfidence).not.toHaveBeenCalled();
+    await waitFor(() =>
+      expect(drawn.instance.setMinConfidence).toHaveBeenCalledWith(0.95)
+    );
+    expect(screen.getByText("3 nodes and 2 of 5 edges")).toBeInTheDocument();
+    expect(network()).toBe(drawn);
+    // Redrawn, the network has no node selected, so the panel closes.
+    expect(screen.queryByRole("complementary")).not.toBeInTheDocument();
+  });
+
+  it("hides a type of node when its bar is clicked, until its chip is removed", () => {
+    renderPanel();
+    // The bars count the whole graph, and say so.
+    expect(
+      screen.getByText(/^Every node in BioNym's graph, by type\./)
+    ).toBeInTheDocument();
+    act(() => mockOverviews.at(-1)?.opts.onBarClick?.("Claim"));
+    expect(drawnNodeIds()).not.toContain("claim:1");
+    const chip = screen.getByRole("button", { name: "Claim" });
+    fireEvent.click(within(chip).getByTestId("CancelIcon"));
+    expect(drawnNodeIds()).toContain("claim:1");
+  });
+
+  it("shows a clicked node's edges, each with its confidence, and its https: link", () => {
+    renderPanel();
+    selectNode("pubmed:1");
+    const panel = screen.getByRole("complementary", { name: "A paper" });
+    expect(panel).toHaveTextContent("Publication");
+    expect(within(panel).getByRole("link", { name: "Source" })).toHaveAttribute(
+      "href",
+      "https://pubmed.ncbi.nlm.nih.gov/1/"
+    );
+    expect(
+      within(panel)
+        .getAllByRole("listitem")
+        .map((item) => item.textContent)
+    ).toStrictEqual([
+      "→ cited_in Gene 1 (confidence 1.00)",
+      "→ reports Claim 1 (confidence 0.99)",
+    ]);
+    // No close button: the network can't be told to drop its selection.
+    expect(within(panel).queryByRole("button")).not.toBeInTheDocument();
+    // A click on empty space deselects the node, and the panel closes.
+    selectNode("none");
+    expect(screen.queryByRole("complementary")).not.toBeInTheDocument();
+  });
+
+  it("links no node whose URL isn't https:", () => {
+    renderPanel();
+    selectNode("dataset:1");
+    const panel = screen.getByRole("complementary", { name: "A dataset" });
+    expect(within(panel).queryByRole("link")).not.toBeInTheDocument();
+  });
+
+  it("redraws in the force layout, and zooms and fits", () => {
+    renderPanel();
+    const columns = network();
+    fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+    fireEvent.click(screen.getByRole("button", { name: "Zoom out" }));
+    fireEvent.click(screen.getByRole("button", { name: "Fit the graph" }));
+    expect(columns.instance.zoomBy.mock.calls).toStrictEqual([
+      [ZOOM_STEP],
+      [1 / ZOOM_STEP],
+    ]);
+    expect(columns.instance.fit).toHaveBeenCalled();
+    selectNode("pubmed:1");
+    fireEvent.click(screen.getByRole("button", { name: "Force" }));
+    expect(columns.instance.destroy).toHaveBeenCalled();
+    expect(network().opts.layout).toBe("force");
+    expect(screen.queryByRole("complementary")).not.toBeInTheDocument();
+  });
+});
+
+describe("filterGraph", () => {
+  it("keeps the gene's own node when its type is hidden", () => {
+    const filtered = filterGraph(GRAPH, new Set(), new Set(["Gene"]));
+    expect(filtered.nodes.map((node) => node.id)).toContain("PF3D7_0000000");
+    expect(
+      filtered.edges.some(
+        (edge) =>
+          edge.subject === "PF3D7_0000000" || edge.object === "PF3D7_0000000"
+      )
+    ).toBe(false);
+  });
+});
+
+describe("httpsUrl", () => {
+  it.each([
+    [
+      "https://pubmed.ncbi.nlm.nih.gov/1/",
+      "https://pubmed.ncbi.nlm.nih.gov/1/",
+    ],
+    ["http://pubmed.ncbi.nlm.nih.gov/1/", null],
+    ["javascript:alert(1)", null],
+    ["not a url", null],
+    [null, null],
+  ])("gives %s as %s", (url, expected) => {
+    expect(httpsUrl({ id: "x", label: "x", type: "Dataset", url })).toBe(
+      expected
+    );
+  });
+});
+
+describe("GraphLoading", () => {
+  it("says so when the Graph tab's code fails to load", () => {
+    render(<GraphLoading error={new Error("ChunkLoadError")} />);
+    expect(
+      screen.getByText("The graph couldn't be loaded. Please reload the page.")
+    ).toBeInTheDocument();
+  });
+});
diff --git a/tests/views/bionymSection.utils.test.ts b/tests/views/bionymSection.utils.test.ts
new file mode 100644
index 000000000..4d310b50c
--- /dev/null
+++ b/tests/views/bionymSection.utils.test.ts
@@ -0,0 +1,15 @@
+import { rethrowUnlessCancelled } from "../../sites/brc-analytics/views/GeneDetailView/components/BionymSection/utils";
+
+describe("rethrowUnlessCancelled", () => {
+  it("ignores a navigation Next cancelled for a newer one", () => {
+    const cancelled = Object.assign(new Error("Cancel rendering route"), {
+      cancelled: true,
+    });
+    expect(() => rethrowUnlessCancelled(cancelled)).not.toThrow();
+  });
+
+  it("rethrows any other error", () => {
+    const failed = new Error("Failed to load script");
+    expect(() => rethrowUnlessCancelled(failed)).toThrow(failed);
+  });
+});
diff --git a/tests/views/geneDetailView.test.tsx b/tests/views/geneDetailView.test.tsx
index cebc82078..5b61a8f27 100644
--- a/tests/views/geneDetailView.test.tsx
+++ b/tests/views/geneDetailView.test.tsx
@@ -5,15 +5,82 @@ import {
   type BionymClaims,
   type Gene,
 } from "@repo/shared/services/genes/types";
-import { fireEvent, render, screen, within } from "@testing-library/react";
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import { type JSX } from "react";
 // jest-dom matchers aren't registered globally in this repo's jest config.
 import "@testing-library/jest-dom";
 
-// findable-ui's StaticImage reads the base path from the router.
+// The navigations the section has asked Next's router for, not yet made.
+const mockNavigations: { done: () => void; url: string }[] = [];
+
+// findable-ui's StaticImage reads the base path from the router; the BioNym
+// section's tabs navigate with it. A navigation changes the hash only when a
+// test makes it: Next writes the hash with no hashchange event, so the section
+// sees it only when Next renders the navigation.
 jest.mock("next/router", () => ({
-  useRouter: (): { basePath: string } => ({ basePath: "" }),
+  useRouter: (): {
+    basePath: string;
+    push: (url: string) => Promise<boolean>;
+  } => ({
+    basePath: "",
+    push: (url: string): Promise<boolean> =>
+      new Promise((resolve) => {
+        mockNavigations.push({ done: () => resolve(true), url });
+      }),
+  }),
 }));
 
+/**
+ * The URLs of the navigations the section has asked for, not yet made.
+ * @returns The URLs.
+ */
+function navigationUrls(): string[] {
+  return mockNavigations.map(({ url }) => url);
+}
+
+/**
+ * Change the URL hash, and wait for the hashchange the section follows.
+ * @param hash - The new hash.
+ */
+async function setHash(hash: string): Promise<void> {
+  await act(
+    () =>
+      new Promise((resolve) => {
+        window.addEventListener("hashchange", resolve, { once: true });
+        window.location.hash = hash;
+      })
+  );
+}
+
+/**
+ * Make the navigations the section has asked for, in order, as Next would.
+ */
+async function navigate(): Promise<void> {
+  for (const { done, url } of mockNavigations.splice(0)) {
+    await setHash(url);
+    await act(async () => done());
+  }
+}
+
+// The Graph tab loads BioNym's D3 components, which Jest can't load as ES
+// modules; its own tests cover it. Here it shows the threshold it's given.
+jest.mock(
+  "../../sites/brc-analytics/views/GeneDetailView/components/BionymSection/components/GraphPanel/graphPanel",
+  () => ({
+    GraphPanel: ({
+      geneUid,
+      minConfidence,
+    }: {
+      geneUid: string;
+      minConfidence: number;
+    }): JSX.Element => (
+      <div data-testid="graph-panel">
+        Graph of {geneUid} at {minConfidence}
+      </div>
+    ),
+  })
+);
+
 // AMA1, as the gene API returns it for the checked-in 3D7 snapshot. Typed in
 // full, not cast, so the type checker sees every GeneOrganism field.
 const GENE: Gene = {
@@ -351,6 +418,21 @@ describe("GeneDetailView", () => {
 });
 
 describe("GeneDetailView's BioNym section", () => {
+  beforeEach(() => {
+    window.location.hash = "";
+    mockNavigations.length = 0;
+  });
+
+  /**
+   * Select one of the section's tabs, as a reader would.
+   * @param name - The tab's label.
+   */
+  function selectTab(name: string): void {
+    act(() => {
+      fireEvent.click(within(getSection()).getByRole("tab", { name }));
+    });
+  }
+
   /**
    * The section, found by its heading.
    * @returns The section.
@@ -399,15 +481,15 @@ describe("GeneDetailView's BioNym section", () => {
     ).toHaveAttribute("href", "https://github.com/d-callan/bionym");
   });
 
-  it("shows claims at or above 0.8, by source, as their text alone", () => {
+  it("shows claims at or above 0.8, by source, each with its confidence", () => {
     renderGene(GENE, BIONYM);
     const section = getSection();
     expect(section).toHaveTextContent("3 of 4 claims");
     // The source with more claims shown comes first.
     expect(sourceTitles()).toStrictEqual(["B dataset", "A paper"]);
-    expect(within(section).getByText("Claim B1")).toBeInTheDocument();
+    expect(section).toHaveTextContent("Claim B1 (confidence 0.99)");
+    // The quote is in a tooltip, not on the page.
     expect(section).not.toHaveTextContent("Quote B1.");
-    expect(section).not.toHaveTextContent("0.99");
     expect(within(section).queryByText("Claim A2")).not.toBeInTheDocument();
     expect(
       within(section).getByRole("link", { name: "A paper" })
@@ -448,4 +530,96 @@ describe("GeneDetailView's BioNym section", () => {
     fireEvent.mouseOver(within(getSection()).getByText("Claim B1"));
     expect(await screen.findByRole("tooltip")).toHaveTextContent("Quote B1.");
   });
+
+  it("opens on the Claims tab, with the graph not yet loaded", () => {
+    renderGene(GENE, BIONYM);
+    expect(
+      within(getSection()).getByRole("tab", { name: "Claims" })
+    ).toHaveAttribute("aria-selected", "true");
+    expect(screen.queryByTestId("graph-panel")).not.toBeInTheDocument();
+  });
+
+  it("shows the graph on the Graph tab, and navigates to its URL hash", async () => {
+    renderGene(GENE, BIONYM);
+    selectTab("Graph");
+    expect(navigationUrls()).toStrictEqual(["#graph"]);
+    await navigate();
+    expect(await screen.findByTestId("graph-panel")).toHaveTextContent(
+      `Graph of ${GENE.geneUid}`
+    );
+    expect(screen.queryByText("Claim B1")).not.toBeInTheDocument();
+    selectTab("Claims");
+    expect(navigationUrls()).toStrictEqual(["#claims"]);
+    await navigate();
+    expect(await screen.findByText("Claim B1")).toBeInTheDocument();
+  });
+
+  it("shows a chosen tab before the URL hash changes", async () => {
+    renderGene(GENE, BIONYM);
+    selectTab("Graph");
+    expect(window.location.hash).toBe("");
+    expect(
+      within(getSection()).getByRole("tab", { name: "Graph" })
+    ).toHaveAttribute("aria-selected", "true");
+    expect(await screen.findByTestId("graph-panel")).toBeVisible();
+  });
+
+  it("keeps the graph on the page, hidden, while the Claims tab shows", async () => {
+    renderGene(GENE, BIONYM);
+    selectTab("Graph");
+    await navigate();
+    const graph = await screen.findByTestId("graph-panel");
+    selectTab("Claims");
+    await navigate();
+    expect(await screen.findByText("Claim B1")).toBeVisible();
+    // The same element, not a new one: the explorer's state lives in it.
+    expect(screen.getByTestId("graph-panel")).toBe(graph);
+    expect(graph).not.toBeVisible();
+    selectTab("Graph");
+    await navigate();
+    expect(screen.getByTestId("graph-panel")).toBe(graph);
+    expect(graph).toBeVisible();
+  });
+
+  it("keeps a second tab click made before the first navigation", async () => {
+    window.location.hash = "#graph";
+    renderGene(GENE, BIONYM);
+    selectTab("Claims");
+    selectTab("Graph");
+    const graphTab = within(getSection()).getByRole("tab", { name: "Graph" });
+    expect(graphTab).toHaveAttribute("aria-selected", "true");
+    // The first navigation lands, then the second: the Graph tab stays shown.
+    const first = mockNavigations.shift() as { done: () => void; url: string };
+    await setHash(first.url);
+    await act(async () => first.done());
+    expect(graphTab).toHaveAttribute("aria-selected", "true");
+    await navigate();
+    expect(graphTab).toHaveAttribute("aria-selected", "true");
+    expect(await screen.findByTestId("graph-panel")).toBeVisible();
+  });
+
+  it("follows the URL hash when it changes, as on the back button", async () => {
+    renderGene(GENE, BIONYM);
+    window.location.hash = "#graph";
+    expect(await screen.findByTestId("graph-panel")).toBeInTheDocument();
+  });
+
+  it("opens on the Graph tab for a #graph link", async () => {
+    window.location.hash = "#graph";
+    renderGene(GENE, BIONYM);
+    expect(
+      within(getSection()).getByRole("tab", { name: "Graph" })
+    ).toHaveAttribute("aria-selected", "true");
+    expect(await screen.findByTestId("graph-panel")).toBeInTheDocument();
+  });
+
+  it("shares one minimum confidence between the tabs", async () => {
+    renderGene(GENE, BIONYM);
+    setMinConfidence(0.95);
+    selectTab("Graph");
+    await navigate();
+    expect(await screen.findByTestId("graph-panel")).toHaveTextContent(
+      "at 0.95"
+    );
+  });
 });