# Research: Migration Dashboard Grid

## Unknowns & Clarifications

### 1. Pagination vs Client-side Filtering
**Context**: The spec mentions "Client-side (Fetch all, filter locally)" (FR-004) but also "Pagination (e.g., 20 per page)" (FR-008).
**Resolution**: 
- We will fetch ALL dashboard metadata from the Superset API in one go. The metadata (ID, Title, Status, Date) is lightweight. Even for 1000 dashboards, the payload is small (~100KB).
- **Client-side Pagination**: We will implement pagination purely on the frontend. This satisfies "Pagination" for UI performance/usability while keeping the "Fetch all" requirement for fast filtering.
- **Decision**: Fetch all, paginate locally.

### 2. Superset API for Dashboard Metadata
**Context**: Need to fetch `title`, `changed_on`, `published`.
**Research**:
- Superset API endpoint: `/api/v1/dashboard/`
- Standard response includes `result` array with `dashboard_title`, `changed_on_utc`, `published`.
- **Decision**: Use `GET /api/v1/dashboard/` with `q` parameter to select specific columns to minimize payload.
  - Columns: `id`, `dashboard_title`, `changed_on_utc`, `published`.

### 3. Grid Component
**Context**: Need a grid with sorting, filtering, and selection.
**Options**:
- **Custom Svelte Table**: Lightweight, full control.
- **3rd Party Lib (e.g. svelte-headless-table)**: Powerful but maybe overkill.
- **Decision**: **Custom Svelte Component** (`DashboardGrid.svelte`).
  - Why: Requirements are specific (Select All across pages, custom status pill, specific columns). A custom component using standard HTML table + Tailwind is simple and maintainable for this scope.

## Design Decisions

### Data Model
- **Dashboard**:
  - `id`: string (or int, depends on Superset version, usually int for dashboards but we treat as ID)
  - `title`: string
  - `last_modified`: string (ISO date)
  - `status`: 'published' | 'draft'

### Architecture
- **Backend**:
  - `SupersetClient.get_dashboards()`: Fetches list from Superset.
  - `GET /api/environments/{id}/dashboards`: Proxy endpoint.
- **Frontend**:
  - `DashboardGrid.svelte`: Handles display, sorting, pagination, and selection logic.
  - `migration/+page.svelte`: Orchestrates fetching and passes data to Grid.

### UX/UI
- **Status Column**: Badge (Green for Published, Gray for Draft).
- **Selection**: Checkbox in first column.
- **Pagination**: Simple "Prev 1 of 5 Next" controls at bottom.