Analysis/_bmad-output/implementation-artifacts/1-3-visualisation-dans-la-smart-grid-frontend.md

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

• Dependencies & Setup (AC: 2)
  • Install apache-arrow, @tanstack/react-table, @tanstack/react-virtual, zustand.
  • Create frontend/src/lib/arrow-client.ts to handle binary stream parsing.
• Smart Grid Component (AC: 1, 4, 5)
  • Create frontend/src/features/smart-grid/components/SmartGrid.tsx.
  • Implement virtualized row rendering.
  • Apply Shadcn UI styling and "Lab & Tech" theme.
• Integration (AC: 3)
  • Connect upload form success state to Grid data loading.
  • Implement useGridStore (Zustand) to hold the loaded table state.
  • 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