# 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)
```