# trustgraph-ai/trustgraph-ui architecture

> Architecture diagram of the GitHub repository trustgraph-ai/trustgraph-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/trustgraph-ai/trustgraph-ui
- Repository: https://github.com/trustgraph-ai/trustgraph-ui

## Overview

TrustGraph UX is a React portal and component ecosystem for interacting with TrustGraph knowledge services. Users enter through the portal, choose workflows such as ingestion, graph exploration, or RAG, and receive visualized data or streamed answers. The map includes shared state and connection layers, plus ontology/query tooling and domain plugins. Sampled source confirms selected call paths; other major portal capabilities are included from the README and file tree, with uncertain implementation links omitted.

Main entry points: [`packages/portal/src/App.tsx`](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/portal/src/App.tsx) (Portal shell), [`packages/trustgraph-react-provider/src/SocketProvider.tsx`](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustgraph-react-provider/src/SocketProvider.tsx) (Socket provider), [`packages/portal/src/pages/IngestPage.tsx`](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/portal/src/pages/IngestPage.tsx) (Document ingestion), [`packages/portal/src/pages/GraphView.tsx`](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/portal/src/pages/GraphView.tsx) (Graph exploration)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portal["Portal workflows"]
  node_app["Portal shell<br/>[App.tsx]"]
  node_ingest["Document ingestion<br/>[IngestPage.tsx]"]
end

subgraph group_knowledge["Knowledge exploration"]
  node_graphview["Graph exploration<br/>[GraphView.tsx]"]
  node_graphrag["Graph RAG<br/>[useGraphRag.ts]"]
  node_docrag["Document RAG<br/>[useDocumentRag.ts]"]
  node_explaining["Explainability views"]
  node_querytools["Query workbenches<br/>[QueryWorkbench.tsx]"]
end

subgraph group_shared["Shared runtime"]
  node_state["Workflow state"]
  node_provider["Socket provider<br/>[SocketProvider.tsx]"]
  node_client["TrustGraph client"]
  node_trustkit["Shared UI toolkit"]
  node_ingeststate["Ingestion state hooks<br/>[chunked-upload.ts]"]
  node_graphstate["Graph query state<br/>[graph-query.ts]"]
end

subgraph group_authoring["Data and configuration"]
  node_ontology["Ontology management"]
  node_schemas["Schema management"]
end

subgraph group_plugins["Domain plugins"]
  node_pluginretail["Retail assistant"]
  node_pluginlaw["Legal explorer<br/>[LawExplorer.tsx]"]
  node_plugininnovation["Innovation explorer"]
  node_otherplugins["Other domain explorers"]
end

node_user(("User"))
node_backend{{"TrustGraph services"}}

node_user -->|"uses portal"| node_app
node_app -->|"routes to"| node_ingest
node_app -->|"routes to"| node_graphview
node_app -->|"routes workflows"| node_graphrag
node_app -->|"routes workflows"| node_docrag
node_app -->|"routes workflows"| node_ontology
node_app -->|"routes workflows"| node_schemas
node_app -->|"dispatches plugin"| node_pluginretail
node_app -->|"dispatches plugin"| node_pluginlaw
node_app -->|"dispatches plugin"| node_plugininnovation
node_app -->|"dispatches plugins"| node_otherplugins
node_ingest -->|"uses upload state"| node_ingeststate
node_ingest -->|"reads workflow data"| node_state
node_graphview -->|"loads graph data"| node_graphstate
node_graphstate -->|"uses socket"| node_provider
node_graphrag -->|"invokes inference"| node_state
node_docrag -->|"invokes inference"| node_state
node_graphrag -->|"emits explain events"| node_explaining
node_docrag -->|"emits explain events"| node_explaining
node_graphview -->|"renders with"| node_trustkit
node_querytools -->|"uses components"| node_trustkit
node_pluginretail -->|"uses socket"| node_provider
node_pluginlaw -->|"queries via socket"| node_provider
node_plugininnovation -->|"queries via socket"| node_provider
node_provider -->|"provides connection"| node_client
node_client -->|"calls services"| node_backend

click node_app "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/portal/src/App.tsx"
click node_ingest "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/portal/src/pages/IngestPage.tsx"
click node_graphview "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/portal/src/pages/GraphView.tsx"
click node_graphrag "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustkit/src/hooks/useGraphRag.ts"
click node_docrag "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustkit/src/hooks/useDocumentRag.ts"
click node_explaining "https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustkit/src/components/explain"
click node_querytools "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustkit/src/components/common/QueryWorkbench.tsx"
click node_ontology "https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustkit/src/components/ontology"
click node_schemas "https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustkit/src/components/schema"
click node_state "https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustgraph-react-state/src/state"
click node_provider "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustgraph-react-provider/src/SocketProvider.tsx"
click node_client "https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustgraph-client/src"
click node_trustkit "https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustkit/src/components"
click node_ingeststate "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustgraph-react-state/src/state/chunked-upload.ts"
click node_graphstate "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustgraph-react-state/src/state/graph-query.ts"
click node_pluginretail "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/plugin-retail-brand/src/hooks/useRetailOrchestrator.ts"
click node_pluginlaw "https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/plugin-law/src/LawExplorer.tsx"
click node_otherplugins "https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages"

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_ingest,node_user toneBlue
class node_graphview,node_graphrag,node_docrag,node_explaining,node_querytools toneAmber
class node_state,node_provider,node_client,node_trustkit,node_ingeststate,node_graphstate toneMint
class node_ontology,node_schemas toneRose
class node_pluginretail,node_pluginlaw,node_plugininnovation,node_otherplugins,node_backend toneIndigo
```

## Components

### Portal workflows

- [Portal shell](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/portal/src/App.tsx): `packages/portal/src/App.tsx`
- [Document ingestion](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/portal/src/pages/IngestPage.tsx): `packages/portal/src/pages/IngestPage.tsx`

### Knowledge exploration

- [Graph exploration](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/portal/src/pages/GraphView.tsx): `packages/portal/src/pages/GraphView.tsx`
- [Graph RAG](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustkit/src/hooks/useGraphRag.ts): `packages/trustkit/src/hooks/useGraphRag.ts`
- [Document RAG](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustkit/src/hooks/useDocumentRag.ts): `packages/trustkit/src/hooks/useDocumentRag.ts`
- [Explainability views](https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustkit/src/components/explain): `packages/trustkit/src/components/explain`
- [Query workbenches](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustkit/src/components/common/QueryWorkbench.tsx): `packages/trustkit/src/components/common/QueryWorkbench.tsx`

### Shared runtime

- [Workflow state](https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustgraph-react-state/src/state): `packages/trustgraph-react-state/src/state`
- [Socket provider](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustgraph-react-provider/src/SocketProvider.tsx): `packages/trustgraph-react-provider/src/SocketProvider.tsx`
- [TrustGraph client](https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustgraph-client/src): `packages/trustgraph-client/src`
- [Shared UI toolkit](https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustkit/src/components): `packages/trustkit/src/components`
- [Ingestion state hooks](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustgraph-react-state/src/state/chunked-upload.ts): `packages/trustgraph-react-state/src/state/chunked-upload.ts`
- [Graph query state](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/trustgraph-react-state/src/state/graph-query.ts): `packages/trustgraph-react-state/src/state/graph-query.ts`

### Data and configuration

- [Ontology management](https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustkit/src/components/ontology): `packages/trustkit/src/components/ontology`
- [Schema management](https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages/trustkit/src/components/schema): `packages/trustkit/src/components/schema`

### Domain plugins

- [Retail assistant](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/plugin-retail-brand/src/hooks/useRetailOrchestrator.ts): `packages/plugin-retail-brand/src/hooks/useRetailOrchestrator.ts`
- [Legal explorer](https://github.com/trustgraph-ai/trustgraph-ui/blob/master/packages/plugin-law/src/LawExplorer.tsx): `packages/plugin-law/src/LawExplorer.tsx`
- **Innovation explorer**
- [Other domain explorers](https://github.com/trustgraph-ai/trustgraph-ui/tree/master/packages): `packages`

### Other components

- **User**
- **TrustGraph services**

## Connections

- User → Portal shell: uses portal
- Portal shell → Document ingestion: routes to
- Portal shell → Graph exploration: routes to
- Portal shell → Graph RAG: routes workflows
- Portal shell → Document RAG: routes workflows
- Portal shell → Ontology management: routes workflows
- Portal shell → Schema management: routes workflows
- Portal shell → Retail assistant: dispatches plugin
- Portal shell → Legal explorer: dispatches plugin
- Portal shell → Innovation explorer: dispatches plugin
- Portal shell → Other domain explorers: dispatches plugins
- Document ingestion → Ingestion state hooks: uses upload state
- Document ingestion → Workflow state: reads workflow data
- Graph exploration → Graph query state: loads graph data
- Graph query state → Socket provider: uses socket
- Graph RAG → Workflow state: invokes inference
- Document RAG → Workflow state: invokes inference
- Graph RAG → Explainability views: emits explain events
- Document RAG → Explainability views: emits explain events
- Graph exploration → Shared UI toolkit: renders with
- Query workbenches → Shared UI toolkit: uses components
- Retail assistant → Socket provider: uses socket
- Legal explorer → Socket provider: queries via socket
- Innovation explorer → Socket provider: queries via socket
- Socket provider → TrustGraph client: provides connection
- TrustGraph client → TrustGraph services: calls services