spec: add frontend dashboard requirements, design, and tasks (phase 16)
This commit is contained in:
Celes Renata
@@ -166,6 +166,30 @@ Responsibilities:
|
||||
- provide Athena-like SQL access to MinIO-hosted tables
|
||||
- support dashboard datasets and ad hoc exploration
|
||||
- support joins between market facts, AI predictions, and executed trades
|
||||
|
||||
### 4.13 Web Dashboard (Frontend)
|
||||
Technology:
|
||||
- React 18+ with TypeScript
|
||||
- Vite for build tooling
|
||||
- TanStack Router for client-side routing
|
||||
- TanStack Query for API data fetching and caching
|
||||
- Recharts for time-series and analytical charts
|
||||
- Monaco Editor for SQL query editing
|
||||
- Tailwind CSS for styling
|
||||
- Served as a static SPA from the query-api container or a dedicated nginx container
|
||||
|
||||
Responsibilities:
|
||||
- provide a unified web UI for all operational and analytical functions
|
||||
- company, watchlist, alias, and source CRUD management
|
||||
- document timeline browsing with intelligence drill-down
|
||||
- trend summary visualization with evidence chain navigation
|
||||
- recommendation review with full provenance display
|
||||
- order and position tracking with audit trail views
|
||||
- trading mode controls, risk configuration, approval workflow, and lockout management
|
||||
- DevOps dashboards for pipeline health, ingestion throughput, model performance, and source coverage
|
||||
- interactive SQL query explorer with result visualization (Athena-like)
|
||||
- pre-built analytical dashboards with chart interactions (QuickSight-like)
|
||||
- all API interactions go through the existing Query API, Symbol Registry, and Risk Engine endpoints
|
||||
#
|
||||
# 5. Storage Model
|
||||
|
||||
@@ -431,6 +455,63 @@ Suggested starter dashboards:
|
||||
- model extraction quality
|
||||
- source coverage and ingestion lag
|
||||
|
||||
### 9.3 Web Dashboard Architecture
|
||||
|
||||
#### Page structure
|
||||
The SPA is organized into the following top-level sections accessible from a persistent sidebar:
|
||||
|
||||
| Section | Route prefix | Primary API source |
|
||||
|---------|-------------|-------------------|
|
||||
| Home / Overview | `/` | Query API `/api/ops/pipeline/health`, `/api/ops/ingestion/summary` |
|
||||
| Companies | `/companies` | Symbol Registry `/companies`, Query API `/api/companies` |
|
||||
| Documents | `/documents` | Query API `/api/documents` |
|
||||
| Trends | `/trends` | Query API `/api/trends` |
|
||||
| Recommendations | `/recommendations` | Query API `/api/recommendations` |
|
||||
| Orders | `/orders` | Query API `/api/orders` |
|
||||
| Positions | `/positions` | Query API `/api/positions` |
|
||||
| Trading Controls | `/trading` | Query API `/api/admin/trading/*`, Risk Engine `/approvals/*` |
|
||||
| Source Management | `/sources` | Query API `/api/admin/sources/*` |
|
||||
| Pipeline Health | `/ops/pipeline` | Query API `/api/ops/pipeline/health` |
|
||||
| Ingestion Monitor | `/ops/ingestion` | Query API `/api/ops/ingestion/*` |
|
||||
| Model Performance | `/ops/model` | Query API `/api/ops/model/*` |
|
||||
| Source Coverage | `/ops/coverage` | Query API `/api/ops/sources/coverage-gaps` |
|
||||
| SQL Explorer | `/analytics/query` | Trino via Query API proxy endpoint |
|
||||
| Dashboards | `/analytics/dashboards` | Trino via Query API proxy endpoint |
|
||||
|
||||
#### SQL Explorer design
|
||||
The SQL explorer provides an Athena-like experience:
|
||||
- Monaco Editor instance with SQL syntax highlighting
|
||||
- Schema browser sidebar listing Trino catalogs, schemas, and tables
|
||||
- Query execution via a new `/api/analytics/query` proxy endpoint on the Query API that forwards SQL to Trino
|
||||
- Results rendered in a virtual-scrolling table with sortable columns
|
||||
- Chart builder that maps result columns to axes and renders via Recharts
|
||||
- Saved queries stored in PostgreSQL with name, description, and SQL text
|
||||
|
||||
#### Pre-built dashboards
|
||||
Each dashboard is a React component that fetches data from the SQL explorer proxy or dedicated API endpoints:
|
||||
- Symbol Overview: company card grid with trend direction, latest recommendation, position status
|
||||
- Sentiment Heatmap: sector × time matrix colored by aggregated sentiment
|
||||
- Prediction Accuracy: scatter plot of predicted confidence vs realized price move
|
||||
- Paper Trading PnL: equity curve, daily PnL bars, win rate metrics
|
||||
- Model Quality: extraction success rate over time, latency distribution, retry rate
|
||||
- Source Coverage: company × source type matrix with health indicators
|
||||
|
||||
#### API proxy for Trino
|
||||
A new endpoint on the Query API:
|
||||
```
|
||||
POST /api/analytics/query
|
||||
Body: { "sql": "SELECT ...", "limit": 1000 }
|
||||
Response: { "columns": [...], "rows": [...], "row_count": N, "elapsed_ms": N }
|
||||
```
|
||||
This proxies SQL to Trino, enforces row limits, and returns structured results.
|
||||
|
||||
#### Deployment
|
||||
The frontend is built as a static SPA and served either:
|
||||
- From the query-api container via FastAPI's `StaticFiles` mount
|
||||
- From a dedicated lightweight nginx container
|
||||
|
||||
The Helm chart adds a `dashboard` service entry when the frontend is enabled.
|
||||
|
||||
## 10. Reliability and Safety
|
||||
- Broker submission must be idempotent.
|
||||
- Live trading must be disabled by default.
|
||||
@@ -458,6 +539,7 @@ Recommended Kubernetes workloads:
|
||||
- `trino-coordinator`
|
||||
- `trino-worker`
|
||||
- `superset-web`
|
||||
- `dashboard` (React SPA served via nginx or query-api static mount)
|
||||
- `postgres`
|
||||
- `redis`
|
||||
- `minio`
|
||||
|
||||
Reference in New Issue
Block a user