Architecture & Data Flows
Overall Application Architecture
Data Flow Pattern
Every user interaction follows this pipeline:
Flow 1: User Login
State touched: Auth Context only (no Zustand)
Flow 2: Create a Synthetic Data Generator
API calls: GET /api/v1/schema-registry/schemas, POST /api/v1/generators
State: React Hook Form (local), React Query cache invalidation
Flow 3: Design a Data Pipeline
API calls: GET /operator-templates, GET /schemas, PUT /pipelines/{id}, POST /compile, POST /deploy
State: Zustand (nodes, edges, configs) + IndexedDB (persistence) + React Query (catalog, schemas)
Service Communication Map
State Persistence Strategy
| Store | Backend | Key | Scope |
|---|---|---|---|
| Pipeline Designer | IndexedDB | dtx-pipeline-autosave | Survives refresh + crashes |
| Workflow Designer | localStorage | workflow-designer-storage | Survives refresh |
| Access Management | sessionStorage | dtx-access-management | Current tab only |
| React Query | In-memory | — | Lost on refresh |
| Auth tokens | Keycloak instance | — | Managed by Keycloak JS |