67 lines
2.7 KiB
Markdown
67 lines
2.7 KiB
Markdown
# 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 |