123 lines
3.0 KiB
Markdown
123 lines
3.0 KiB
Markdown
# Data Model: Superset-Style UX Redesign
|
|
|
|
**Feature**: 019-superset-ux-redesign
|
|
**Date**: 2026-02-09
|
|
|
|
## Overview
|
|
|
|
This feature primarily introduces frontend state management and UI components. No new database tables are required. The data model focuses on client-side stores for managing UI state.
|
|
|
|
## Frontend Stores
|
|
|
|
### 1. SidebarStore
|
|
|
|
**Purpose**: Manage sidebar visibility and collapse state
|
|
|
|
```typescript
|
|
interface SidebarState {
|
|
isExpanded: boolean; // true = full width, false = icons only
|
|
activeCategory: string; // 'dashboards' | 'datasets' | 'storage' | 'admin'
|
|
activeItem: string; // Current route path
|
|
isMobileOpen: boolean; // For mobile overlay mode
|
|
}
|
|
```
|
|
|
|
**Persistence**: localStorage key `sidebar_state`
|
|
|
|
### 2. TaskDrawerStore
|
|
|
|
**Purpose**: Manage Task Drawer visibility and resource-to-task mapping
|
|
|
|
```typescript
|
|
interface TaskDrawerState {
|
|
isOpen: boolean;
|
|
activeTaskId: string | null;
|
|
resourceTaskMap: Record<string, {
|
|
taskId: string;
|
|
status: 'IDLE' | 'RUNNING' | 'WAITING_INPUT' | 'SUCCESS' | 'ERROR';
|
|
}>;
|
|
}
|
|
```
|
|
|
|
**Example**:
|
|
```javascript
|
|
resourceTaskMap: {
|
|
"dashboard-uuid-123": { taskId: "task-abc", status: "RUNNING" },
|
|
"dataset-uuid-456": { taskId: "task-def", status: "SUCCESS" }
|
|
}
|
|
```
|
|
|
|
### 3. ActivityStore
|
|
|
|
**Purpose**: Track count of active tasks for navbar indicator
|
|
|
|
```typescript
|
|
interface ActivityState {
|
|
activeCount: number; // Number of RUNNING tasks
|
|
recentTasks: TaskSummary[]; // Last 5 tasks for quick access
|
|
}
|
|
|
|
interface TaskSummary {
|
|
taskId: string;
|
|
resourceName: string;
|
|
resourceType: 'dashboard' | 'dataset';
|
|
status: string;
|
|
startedAt: string;
|
|
}
|
|
```
|
|
|
|
### 4. SettingsStore
|
|
|
|
**Purpose**: Cache settings data for consolidated settings page
|
|
|
|
```typescript
|
|
interface SettingsState {
|
|
activeTab: 'environments' | 'connections' | 'llm' | 'logging' | 'system';
|
|
environments: Environment[];
|
|
connections: Connection[];
|
|
llmSettings: LLMSettings;
|
|
loggingSettings: LoggingSettings;
|
|
}
|
|
```
|
|
|
|
## Backend Entities (Existing)
|
|
|
|
The following entities are used but not modified:
|
|
|
|
### Task (from `backend/src/models/task.py`)
|
|
- `id`: UUID
|
|
- `status`: Enum (RUNNING, SUCCESS, ERROR, WAITING_INPUT)
|
|
- `plugin_name`: String
|
|
- `created_at`: DateTime
|
|
- `metadata`: JSON (includes `resource_id`, `resource_type`)
|
|
|
|
### Environment (from `backend/src/models/connection.py`)
|
|
- Used for Source Environment selector in hubs
|
|
|
|
## State Transitions
|
|
|
|
### Task Status in Resource Grid
|
|
|
|
```
|
|
IDLE → (user triggers action) → RUNNING
|
|
RUNNING → (task needs input) → WAITING_INPUT
|
|
RUNNING → (task completes) → SUCCESS
|
|
RUNNING → (task fails) → ERROR
|
|
WAITING_INPUT → (user provides input) → RUNNING
|
|
```
|
|
|
|
### Sidebar State Flow
|
|
|
|
```
|
|
Expanded ←→ Collapsed (user toggle)
|
|
Hidden (mobile) → Overlay Open (hamburger click) → Hidden (outside click)
|
|
```
|
|
|
|
### Task Drawer State Flow
|
|
|
|
```
|
|
Closed → Open (click status badge or activity indicator)
|
|
Open → Closed (click X or select different task)
|
|
Open → Open+DifferentTask (click different status badge)
|
|
```
|