# propeller-heads/tycho-explorer architecture

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

- Interactive diagram: https://gitdiagram.com/propeller-heads/tycho-explorer
- Repository: https://github.com/propeller-heads/tycho-explorer

## Overview

Tycho Explorer presents on-chain liquidity pools as searchable/filterable lists and token-protocol graphs, with pool inspection and swap simulation. The backend maintains simulation state from a Tycho processor and exposes health, simulation, and WebSocket routes; the frontend graph path is explicit in sampled source. Several data-loading and side-panel connections are unsampled, so those relationships are shown only where the tree or sampled code supports them.

Main entry points: [`frontend/src/components/dexscan/graph/GraphPipeline.jsx`](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/GraphPipeline.jsx) (Graph orchestrator), [`frontend/src/components/dexscan/app/DexScanContent.tsx`](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/app/DexScanContent.tsx) (DexScan content), [`frontend/src/components/dexscan/shared/hooks/useFilterManager.js`](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/shared/hooks/useFilterManager.js) (Filter manager), [`api/src/main.rs`](https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/main.rs) (Service startup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Explorer frontend"]
  node_app["Application shell<br/>[App.tsx]"]
  node_content["DexScan content<br/>[DexScanContent.tsx]"]
  node_pooldata["Pool data context"]
  node_filters["Filter manager"]
  node_poollist["Pool list and metrics<br/>[ListView.tsx]"]
  node_filterui["Filter controls<br/>[index.ts]"]
  node_sidepanel["Swap interface<br/>[SwapInterface.jsx]"]
  node_simulationclient["Swap simulation client<br/>[simulation.js]"]
end

subgraph group_graph["Graph visualization"]
  node_graphview["Graph view"]
  node_graphpipe["Graph orchestrator<br/>[GraphPipeline.jsx]"]
  node_transform["Pool transformation"]
  node_enrich["Graph enrichment<br/>[EnrichPipeline.js]"]
  node_render["Network rendering<br/>[RenderPipeline.js]"]
  node_interact["Graph interactions"]
  node_display["Tooltip display"]
end

subgraph group_backend["Simulation service"]
  node_backendmain["Service startup<br/>[main.rs]"]
  node_routes["HTTP and WS routes<br/>[routes.rs]"]
  node_ws["WebSocket handler<br/>[ws.rs]"]
  node_processor["Simulation processor<br/>[mod.rs]"]
  node_simulationapi["Simulation API<br/>[routes.rs]"]
end

subgraph group_state["Pool state"]
  node_simstate[("Simulation state<br/>[state.rs]")]
end

node_user(("Explorer user"))
node_tycho{{"Tycho service"}}

node_user -->|"opens explorer"| node_app
node_app -->|"renders route"| node_content
node_content -->|"uses pool data"| node_pooldata
node_content -->|"presents pools"| node_poollist
node_content -->|"offers graph view"| node_graphview
node_content -->|"offers swap UI"| node_sidepanel
node_filterui -->|"updates selections"| node_filters
node_filters -->|"reads chain data"| node_pooldata
node_poollist -->|"uses selections"| node_filters
node_graphview -->|"renders graph"| node_graphpipe
node_graphpipe -->|"transforms pools"| node_transform
node_graphpipe -->|"enriches graph"| node_enrich
node_graphpipe -->|"renders network"| node_render
node_graphpipe -->|"handles interaction"| node_interact
node_graphpipe -->|"shows tooltips"| node_display
node_graphpipe -->|"filters pools"| node_filters
node_sidepanel -->|"requests simulation"| node_simulationclient
node_simulationclient -->|"posts simulation"| node_simulationapi
node_user -->|"starts service"| node_backendmain
node_backendmain -->|"starts API"| node_routes
node_backendmain -->|"starts processor"| node_processor
node_processor -->|"streams pool updates"| node_tycho
node_processor -->|"updates state"| node_simstate
node_routes -->|"dispatches WebSocket"| node_ws
node_routes -->|"dispatches simulation"| node_simulationapi
node_simulationapi -->|"reads pool state"| node_simstate

click node_app "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/App.tsx"
click node_content "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/app/DexScanContent.tsx"
click node_pooldata "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/shared/PoolDataContext.tsx"
click node_filters "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/shared/hooks/useFilterManager.js"
click node_poollist "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/pools/ListView.tsx"
click node_filterui "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/shared/filters/index.ts"
click node_sidepanel "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/side-panel/SwapInterface.jsx"
click node_simulationclient "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/side-panel/simulation.js"
click node_graphview "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/GraphViewContent.jsx"
click node_graphpipe "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/GraphPipeline.jsx"
click node_transform "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/pipelines/TransformPipeline.js"
click node_enrich "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/pipelines/EnrichPipeline.js"
click node_render "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/pipelines/RenderPipeline.js"
click node_interact "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/pipelines/InteractPipeline.js"
click node_display "https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/pipelines/DisplayPipeline.jsx"
click node_backendmain "https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/main.rs"
click node_routes "https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/api/routes.rs"
click node_ws "https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/api/ws.rs"
click node_processor "https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/simulation/mod.rs"
click node_simstate "https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/simulation/state.rs"
click node_simulationapi "https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/api/routes.rs"

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_content,node_pooldata,node_filters,node_poollist,node_filterui,node_sidepanel,node_simulationclient,node_user toneBlue
class node_graphview,node_graphpipe,node_transform,node_enrich,node_render,node_interact,node_display toneAmber
class node_backendmain,node_routes,node_ws,node_processor,node_simulationapi toneMint
class node_simstate toneRose
class node_tycho toneIndigo
```

## Components

### Explorer frontend

- [Application shell](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [DexScan content](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/app/DexScanContent.tsx): `frontend/src/components/dexscan/app/DexScanContent.tsx`
- [Pool data context](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/shared/PoolDataContext.tsx): `frontend/src/components/dexscan/shared/PoolDataContext.tsx`
- [Filter manager](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/shared/hooks/useFilterManager.js): `frontend/src/components/dexscan/shared/hooks/useFilterManager.js`
- [Pool list and metrics](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/pools/ListView.tsx): `frontend/src/components/dexscan/pools/ListView.tsx`
- [Filter controls](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/shared/filters/index.ts): `frontend/src/components/dexscan/shared/filters/index.ts`
- [Swap interface](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/side-panel/SwapInterface.jsx): `frontend/src/components/dexscan/side-panel/SwapInterface.jsx`
- [Swap simulation client](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/side-panel/simulation.js): `frontend/src/components/dexscan/side-panel/simulation.js`

### Graph visualization

- [Graph view](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/GraphViewContent.jsx): `frontend/src/components/dexscan/graph/GraphViewContent.jsx`
- [Graph orchestrator](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/GraphPipeline.jsx): `frontend/src/components/dexscan/graph/GraphPipeline.jsx`
- [Pool transformation](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/pipelines/TransformPipeline.js): `frontend/src/components/dexscan/graph/pipelines/TransformPipeline.js`
- [Graph enrichment](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/pipelines/EnrichPipeline.js): `frontend/src/components/dexscan/graph/pipelines/EnrichPipeline.js`
- [Network rendering](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/pipelines/RenderPipeline.js): `frontend/src/components/dexscan/graph/pipelines/RenderPipeline.js`
- [Graph interactions](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/pipelines/InteractPipeline.js): `frontend/src/components/dexscan/graph/pipelines/InteractPipeline.js`
- [Tooltip display](https://github.com/propeller-heads/tycho-explorer/blob/main/frontend/src/components/dexscan/graph/pipelines/DisplayPipeline.jsx): `frontend/src/components/dexscan/graph/pipelines/DisplayPipeline.jsx`

### Simulation service

- [Service startup](https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/main.rs): `api/src/main.rs`
- [HTTP and WS routes](https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/api/routes.rs): `api/src/api/routes.rs`
- [WebSocket handler](https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/api/ws.rs): `api/src/api/ws.rs`
- [Simulation processor](https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/simulation/mod.rs): `api/src/simulation/mod.rs`
- [Simulation API](https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/api/routes.rs): `api/src/api/routes.rs`

### Pool state

- [Simulation state](https://github.com/propeller-heads/tycho-explorer/blob/main/api/src/simulation/state.rs): `api/src/simulation/state.rs`

### Other components

- **Explorer user**
- **Tycho service**

## Connections

- Explorer user → Application shell: opens explorer
- Application shell → DexScan content: renders route
- DexScan content → Pool data context: uses pool data
- DexScan content → Pool list and metrics: presents pools
- DexScan content → Graph view: offers graph view
- DexScan content → Swap interface: offers swap UI
- Filter controls → Filter manager: updates selections
- Filter manager → Pool data context: reads chain data
- Pool list and metrics → Filter manager: uses selections
- Graph view → Graph orchestrator: renders graph
- Graph orchestrator → Pool transformation: transforms pools
- Graph orchestrator → Graph enrichment: enriches graph
- Graph orchestrator → Network rendering: renders network
- Graph orchestrator → Graph interactions: handles interaction
- Graph orchestrator → Tooltip display: shows tooltips
- Graph orchestrator → Filter manager: filters pools
- Swap interface → Swap simulation client: requests simulation
- Swap simulation client → Simulation API: posts simulation
- Explorer user → Service startup: starts service
- Service startup → HTTP and WS routes: starts API
- Service startup → Simulation processor: starts processor
- Simulation processor → Tycho service: streams pool updates
- Simulation processor → Simulation state: updates state
- HTTP and WS routes → WebSocket handler: dispatches WebSocket
- HTTP and WS routes → Simulation API: dispatches simulation
- Simulation API → Simulation state: reads pool state