Graph Pages

Two graph surfaces exist. They are distinct:

Attack Graph (/graph) — Explorer

Route: App.tsx:71 lazy → features/graph/AttackGraphPage.tsx:37. Mounted under Layout. Gated by api.graph_route:true (docs/api.md: Graph Explorer Routes).

Endpoint mapping (from graphApi.ts:8 + docs/api.md)

All queryKeys graphExplorer (graphApi.ts:23):

Retry (graphApi.ts:35): no retry on 404 (disabled/no-graph). staleTime 5s.

DTOs mirror backend to_dict() exactly (features/graph/graphTypes.ts:1): GraphExplorerNode/Edge, GraphRunResponse (nodes/edges/total_nodes/truncated), GraphSummaryResponse (summary.nodes/edges + stats), GraphConflict, GraphNeighborsResponse, GraphPathsResponse (distance 1… steps omitting start node).

Page state (AttackGraphPage.tsx:37)

filters: {runId, nodeTypes:[], statuses:[], q:"", minConfidence:0}
selectedNodeId, expandedNodes/Edges, pathNodeIds/pathEdgeIds,
pathMode, conflictsOpen, legendOpen, minimapOpen, filtersOpen, detailsOpen,
fitRequest, resetRequest, focusRequest, expansion:{nodeId,hops,ts}

• useGraphRun(runId, {nodeTypes,statuses,q}) (AttackGraphPage.tsx:63) + useGraphSummary + useGraphConflicts (when open) + useGraphPolling.
• useGraphNeighbors(runId, expansion.nodeId, hops, 200) on demand; merge into expandedNodes/Edges via mergeNodes/mergeEdges (AttackGraphPage.tsx:442) when expansion.ts !== lastExpansionTs.
• Client-side minConfidence filter is view-only (AttackGraphPage.tsx:108).
• viewNodes = mergeNodes(baseNodes, expandedNodes); viewEdges = mergeEdges(graph.edges, expandedEdges) filtered to edges where both ids in view (AttackGraphPage.tsx:114).
• Changing any server filter (filterSig JSON of nodeTypes/statuses/q) or runId resets expanded + path overlay (AttackGraphPage.tsx:122).
• truncated = graph.truncated || total_nodes>500 → yellow banner (AttackGraphPage.tsx:152).
• selectedNode derived from viewNodes.

Layout

<header> title + subtitle + RunSelect (label "Run (scope)")
<status bar> <GraphStats summary + conflict count + hub> + truncated banner
<GraphToolbar>
<GraphActiveFilters> chips
┌──────────────┬──────────────────┬──────────────┐
│ filters aside│ canvas (flex:1)  │ details aside│
│ <GraphFilters>│ <AttackGraphCanvas> + overlays │ <GraphDetailsPanel>
│ (GraphSearch) │  legend / conflicts / path finder│
└──────────────┴──────────────────┴──────────────┘

• Filters/details are absolute overlays on mobile (lg:static else) with scrim + X close (AttackGraphPage.tsx:226).
• RunSelect (AttackGraphPage.tsx:353): useRuns(50,0) sorted active-first, <select> with runLabel (title || target).
• ConflictsPanel (AttackGraphPage.tsx:399): absolute right-3 top-3, AlertTriangle, list of conflicts (existing→proposed confidence + reason), empty message when none.
• Errors: graphLoading → Loader2 "Building graph…", graphError (404→ graph_disabled hint api.graph_route:true), no runId → "Select a run", zero nodes → "No graph nodes…" (AttackGraphPage.tsx:278).

Filters (GraphFilters.tsx:36)

GraphActiveFilters.tsx — chip strip for current filters with clear actions.

Toolbar (GraphToolbar.tsx)

GraphToolbar controls:

GraphSearch.tsx inside toolbar focuses a node; GraphStats.tsx renders summaryChips(stats) (graphTransforms.ts:310) chips (Nodes/Hosts/Services/Findings/… + highest-degree hub).

Canvas (AttackGraphCanvas.tsx:58)

ReactFlowProvider → CanvasInner. Stack: reactflow@11.11.4 (package.json:35).

GraphLegend.tsx — floating palette of NODE_TYPE_CATEGORIES colors/icons.

Node rendering (GraphNodeTypes.tsx)

GraphFlowNode (GraphFlowNodeData: {node, path, focus, start, end, dimmed, selected}): nodeTypeMeta(node_type) icon (Network/Server/Globe/Layers/Plug/Link2/AppWindow/Cpu/Hash/User/BadgeCheck/KeyRound/Shield/Boxes/Bug/AlertTriangle/HelpCircle/FileText/Eye/Zap/ShieldCheck/Box, graphTransforms.ts:52), color bg/border, confidence/status bar, value truncate, selection ring vs dim.

Presentation helpers (graphTransforms.ts)

Details panel (GraphDetailsPanel.tsx)

GraphDetailsPanel — when nodeId provided, calls useGraphNode(runId, nodeId). Shows: node_id, value, node_type badge (color from nodeTypeMeta), status dot, confidence bar, scope, source, first_seen/last_seen (formatRelative), observation/contradiction counts, properties (merging dedicated rows for severity/cvss_score/vuln_class not repeated under generic Metadata), evidence_refs via parseEvidenceRef, connected nodes grouped by edge_type with onSelect focus.

Only renders real metadata; no invented severity when absent.

Path finder (GraphPathFinder.tsx)

Form: start/end <select> from nodes, max_length (1–8) + max_paths (1–8). Calls useGraphPaths. Renders list of paths: GraphPathStep[][] — each path shows sequence distance 1… nodes+edges. onShowPath builds Set<nodeId> = Set(start, ...steps.node.node_id) + Set(edge.edge_id) + focus first node. Clear removes overlay.

Per-Run Graph (/runs/:runId/graph + RunPage tab)

routes/GraphPage.tsx:11 (GraphPage)

Full-page wrapper (Button ← Back + truncateId + Attack Path title). useArtifacts(runId) → artifactNames set; enhancedReady = includes("enhanced/enhanced_report.json"). Height DAG_HEIGHT = clamp(320..640, innerHeight-220). Renders <AttackGraphDag runId height={DAG_HEIGHT}> then <AttackGraph runId ready={enhancedReady}>. Artifacts fetch error shows Retry.

components/AttackGraphDag.tsx

Lightweight DAG from GET /runs/<id>/graph (RunGraphResponse api/types.ts:857 with nodes: {id,type,label,status?,chain_id?} type tool|target|step + edges: {source,target,relation: enables|targets}), or from explorer nodes/edges. Validates type and renders React Flow similar to AttackGraphCanvas but smaller. Used in RunPage:Attacks Path tab as primary viz.

components/AttackGraph.tsx

Renders enhanced/enhanced_report.json (EnhancedReport api/types.ts:528 with exploitation_chains[] + technical_findings[]) as chain cards + CVSSScore badge + remediation. Gate ready prop prevents 404 before artifact exists (see RunPage:344).

Edge types (real backend only)

GraphEdgeType (graphTypes.ts:15): resolves_to/hosts/exposes/runs/depends_on/reachable_from/authenticates_to/has_role/trusts/related_to/supported_by/contradicted_by/derived_from/affected_by/protected_by/connected_to/same_as/observed_on. GraphNodeType (graphTypes.ts:8): asset/host/domain/ip/service/port/endpoint/application/technology/version/identity/role/credential_reference/trust_boundary/network_segment/vulnerability_candidate/finding/hypothesis/evidence/capability/security_control/observation. Never invent others (graphTransforms.ts:52, graphTypes.ts:1 comment).