# jaegertracing/jaeger-ui architecture

> Architecture diagram of the GitHub repository jaegertracing/jaeger-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jaegertracing/jaeger-ui
- Repository: https://github.com/jaegertracing/jaeger-ui

## Overview

Jaeger UI is a browser application for exploring distributed traces and service behavior. Users search for traces, open a result, and inspect its spans through timeline, flamegraph, and graph views; related workflows compare traces and examine service metrics and dependencies. The UI also includes deep-dependency analysis and an assistant surface. The graph maps the principal routes and query/API boundary, plus domain analysis layers visible in the tree. Several feature links rely on module names and documented hook behavior; unsampled implementation details are not asserted.

Main entry points: [`packages/jaeger-ui/src/api/jaeger.ts`](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/api/jaeger.ts) (Jaeger API client), [`packages/jaeger-ui/src/components/TracePage/index.tsx`](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TracePage/index.tsx) (Trace detail page), [`packages/jaeger-ui/src/components/App/index.tsx`](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/App/index.tsx) (App and routes), [`packages/jaeger-ui/src/components/SearchTracePage/index.tsx`](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/SearchTracePage/index.tsx) (Trace search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_app["App and routes<br/>[index.tsx]"]
  node_query["Query provider"]
  node_assistant["Jaeger assistant"]
end

subgraph group_trace["Trace exploration"]
  node_search["Trace search<br/>[index.tsx]"]
  node_results["Search results<br/>[index.tsx]"]
  node_trace_page["Trace detail page<br/>[index.tsx]"]
  node_timeline["Span timeline<br/>[index.tsx]"]
  node_flamegraph["Trace flamegraph<br/>[index.tsx]"]
  node_trace_graph["Trace graph<br/>[TraceGraph.tsx]"]
end

subgraph group_analysis["Service analysis"]
  node_diff["Trace comparison<br/>[TraceDiff.tsx]"]
  node_monitor["Service monitoring<br/>[index.tsx]"]
  node_dependencies["Service dependencies<br/>[index.tsx]"]
  node_deep_deps["Deep dependency graph<br/>[index.tsx]"]
end

subgraph group_data["Data and models"]
  node_discovery["Trace discovery"]
  node_api["Jaeger API client<br/>[jaeger.ts]"]
  node_trace_load["Trace loading<br/>[useTraceLoading.ts]"]
  node_trace_model["Trace models"]
  node_metrics["Metrics queries<br/>[useMetricsQuery.ts]"]
  node_dep_query["Dependency query"]
  node_ddg_query["Deep graph query"]
  node_ddg_model["Dependency transforms"]
  node_assistant_hook["Assistant hook"]
end

node_user(("Jaeger user"))
node_backend[("Jaeger backend")]

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_search
node_app -->|"provides queries"| node_query
node_app -->|"shows"| node_assistant
node_search -->|"discovers traces"| node_discovery
node_discovery -->|"requests traces"| node_api
node_api -->|"calls"| node_backend
node_search -->|"presents"| node_results
node_results -->|"opens trace"| node_trace_load
node_trace_load -->|"loads trace"| node_api
node_trace_load -->|"transforms data"| node_trace_model
node_trace_page -->|"renders spans"| node_timeline
node_trace_page -->|"renders view"| node_flamegraph
node_trace_page -->|"renders graph"| node_trace_graph
node_trace_page -->|"supports comparison"| node_diff
node_monitor -->|"queries metrics"| node_metrics
node_metrics -->|"fetches metrics"| node_api
node_dependencies -->|"queries dependencies"| node_dep_query
node_dep_query -->|"fetches dependencies"| node_api
node_api -->|"calls"| node_backend
node_deep_deps -->|"queries graph"| node_ddg_query
node_ddg_query -->|"fetches graph data"| node_api
node_ddg_query -->|"transforms payload"| node_ddg_model
node_assistant -->|"uses"| node_assistant_hook

click node_app "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/App/index.tsx"
click node_query "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/query/app-query-client.tsx"
click node_search "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/SearchTracePage/index.tsx"
click node_discovery "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/hooks/useTraceDiscovery.ts"
click node_api "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/api/jaeger.ts"
click node_results "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx"
click node_trace_load "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/hooks/useTraceLoading.ts"
click node_trace_page "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TracePage/index.tsx"
click node_timeline "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.tsx"
click node_flamegraph "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.tsx"
click node_trace_graph "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.tsx"
click node_trace_model "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/model/transform-trace-data.ts"
click node_diff "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.tsx"
click node_monitor "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx"
click node_metrics "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/Monitor/ServicesView/useMetricsQuery.ts"
click node_dependencies "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/DependencyGraph/index.tsx"
click node_dep_query "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/hooks/useDependenciesQuery.ts"
click node_deep_deps "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/DeepDependencies/index.tsx"
click node_ddg_query "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/hooks/useDeepDependencyGraphQuery.ts"
click node_ddg_model "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/model/ddg/transformDdgData.ts"
click node_assistant "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/App/JaegerAssistantPanel.tsx"
click node_assistant_hook "https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/hooks/useJaegerAssistant.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_query,node_assistant,node_user toneBlue
class node_search,node_results,node_trace_page,node_timeline,node_flamegraph,node_trace_graph,node_backend toneAmber
class node_diff,node_monitor,node_dependencies,node_deep_deps toneMint
class node_discovery,node_api,node_trace_load,node_trace_model,node_metrics,node_dep_query,node_ddg_query,node_ddg_model,node_assistant_hook toneRose
```

## Components

### Application shell

- [App and routes](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/App/index.tsx): `packages/jaeger-ui/src/components/App/index.tsx`
- [Query provider](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/query/app-query-client.tsx): `packages/jaeger-ui/src/query/app-query-client.tsx`
- [Jaeger assistant](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/App/JaegerAssistantPanel.tsx): `packages/jaeger-ui/src/components/App/JaegerAssistantPanel.tsx`

### Trace exploration

- [Trace search](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/SearchTracePage/index.tsx): `packages/jaeger-ui/src/components/SearchTracePage/index.tsx`
- [Search results](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx): `packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx`
- [Trace detail page](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TracePage/index.tsx): `packages/jaeger-ui/src/components/TracePage/index.tsx`
- [Span timeline](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.tsx): `packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.tsx`
- [Trace flamegraph](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.tsx): `packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.tsx`
- [Trace graph](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.tsx): `packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.tsx`

### Service analysis

- [Trace comparison](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/TraceDiff/TraceDiff.tsx): `packages/jaeger-ui/src/components/TraceDiff/TraceDiff.tsx`
- [Service monitoring](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx): `packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx`
- [Service dependencies](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/DependencyGraph/index.tsx): `packages/jaeger-ui/src/components/DependencyGraph/index.tsx`
- [Deep dependency graph](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/DeepDependencies/index.tsx): `packages/jaeger-ui/src/components/DeepDependencies/index.tsx`

### Data and models

- [Trace discovery](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/hooks/useTraceDiscovery.ts): `packages/jaeger-ui/src/hooks/useTraceDiscovery.ts`
- [Jaeger API client](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/api/jaeger.ts): `packages/jaeger-ui/src/api/jaeger.ts`
- [Trace loading](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/hooks/useTraceLoading.ts): `packages/jaeger-ui/src/hooks/useTraceLoading.ts`
- [Trace models](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/model/transform-trace-data.ts): `packages/jaeger-ui/src/model/transform-trace-data.ts`
- [Metrics queries](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/components/Monitor/ServicesView/useMetricsQuery.ts): `packages/jaeger-ui/src/components/Monitor/ServicesView/useMetricsQuery.ts`
- [Dependency query](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/hooks/useDependenciesQuery.ts): `packages/jaeger-ui/src/hooks/useDependenciesQuery.ts`
- [Deep graph query](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/hooks/useDeepDependencyGraphQuery.ts): `packages/jaeger-ui/src/hooks/useDeepDependencyGraphQuery.ts`
- [Dependency transforms](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/model/ddg/transformDdgData.ts): `packages/jaeger-ui/src/model/ddg/transformDdgData.ts`
- [Assistant hook](https://github.com/jaegertracing/jaeger-ui/blob/main/packages/jaeger-ui/src/hooks/useJaegerAssistant.ts): `packages/jaeger-ui/src/hooks/useJaegerAssistant.ts`

### Other components

- **Jaeger user**
- **Jaeger backend**

## Connections

- Jaeger user → App and routes: uses
- App and routes → Trace search: routes to
- App and routes → Query provider: provides queries
- App and routes → Jaeger assistant: shows
- Trace search → Trace discovery: discovers traces
- Trace discovery → Jaeger API client: requests traces
- Jaeger API client → Jaeger backend: calls
- Trace search → Search results: presents
- Search results → Trace loading: opens trace
- Trace loading → Jaeger API client: loads trace
- Trace loading → Trace models: transforms data
- Trace detail page → Span timeline: renders spans
- Trace detail page → Trace flamegraph: renders view
- Trace detail page → Trace graph: renders graph
- Trace detail page → Trace comparison: supports comparison
- Service monitoring → Metrics queries: queries metrics
- Metrics queries → Jaeger API client: fetches metrics
- Service dependencies → Dependency query: queries dependencies
- Dependency query → Jaeger API client: fetches dependencies
- Jaeger API client → Jaeger backend: calls
- Deep dependency graph → Deep graph query: queries graph
- Deep graph query → Jaeger API client: fetches graph data
- Deep graph query → Dependency transforms: transforms payload
- Jaeger assistant → Assistant hook: uses