# Story 1.3: Visualisation dans la Smart Grid (Frontend)

Status: review

## Story

As a Julien (Analyst),
I want to see my uploaded data in an interactive high-speed grid,
so that I can explore the raw data effortlessly.

## Acceptance Criteria

1. **Virtualization:** The grid renders 50,000+ rows without browser lag using TanStack Table virtualization.
2. **Arrow Integration:** The frontend reads the Apache Arrow stream from the backend API using `apache-arrow` library.
3. **Data Display:** Columns are rendered with correct formatting based on metadata (e.g., numbers right-aligned, dates formatted).
4. **Visual Foundation:** The grid uses the "Smart Grid" design (compact density, JetBrains Mono font) as defined in UX specs.
5. **Basic Interaction:** Users can scroll vertically and horizontally fluidly.

## Tasks / Subtasks

- [x] **Dependencies & Setup** (AC: 2)
  - [x] Install `apache-arrow`, `@tanstack/react-table`, `@tanstack/react-virtual`, `zustand`.
  - [x] Create `frontend/src/lib/arrow-client.ts` to handle binary stream parsing.
- [x] **Smart Grid Component** (AC: 1, 4, 5)
  - [x] Create `frontend/src/features/smart-grid/components/SmartGrid.tsx`.
  - [x] Implement virtualized row rendering.
  - [x] Apply Shadcn UI styling and "Lab & Tech" theme.
- [x] **Integration** (AC: 3)
  - [x] Connect `upload` form success state to Grid data loading.
  - [x] Implement `useGridStore` (Zustand) to hold the loaded table state.
  - [x] Render actual data from the uploaded file.

## Dev Notes

- **Performance:** Optimized binary stream parsing using Apache Arrow IPC. Zero unnecessary JSON parsing.
- **State:** Zustand used for high-frequency updates and persistence across session.
- **Layout:** Implemented responsive workspace with sticky header and virtualized body.

### Project Structure Notes

- Organized into `features/smart-grid` and `features/uploader`.
- Centralized state in `store/use-grid-store.ts`.

### References

- [Source: ux-design-specification.md#Core User Experience]
- [Source: architecture.md#Frontend Architecture]

## Dev Agent Record

### Agent Model Used

{{agent_model_name_version}}

### Completion Notes List
- Successfully integrated `apache-arrow` for binary data ingestion.
- Implemented `<SmartGrid />` with `@tanstack/react-virtual` for 50k+ row performance.
- Built a functional `<FileUploader />` that communicates with the FastAPI backend.
- Applied "Lab & Tech" styling with Tailwind CSS.

### File List
- /frontend/src/features/smart-grid/components/SmartGrid.tsx
- /frontend/src/features/uploader/components/FileUploader.tsx
- /frontend/src/lib/arrow-client.ts
- /frontend/src/lib/utils.ts
- /frontend/src/store/use-grid-store.ts
- /frontend/src/app/page.tsx