[FR]: Add preview for CSV files

[jverre]

Proposal summary

Context:
Opik supports attachments which allow you to log any type of content to a trace or span (see docs).

Today we support viewing many formats to the UI (see docs) but not CSV files.

Implementation:
Let's add a way to preview CSV files similarly to how we support some of the other attachment formats.

Motivation

No response

[kayush0712]

i would like to work on it , can you assign it to me
thank you

[DhanashreePetare]

@jverre @vincentkoc , I would like to work on the issue. Can you please assign this to me.

[smirk-dev]

Hi @jverre! I'd love to take on this CSV preview feature. I've reviewed the attachment documentation and understand how Opik currently handles various formats like images, audio, and text.

My Background:

• 2+ years experience with React/TypeScript frontend development and data visualization
• Built CSV parsing and preview components using libraries like PapaParse and React Table
• Previous Hacktoberfest contributor (2023, 2024) with merged PRs in observability/ML tooling projects
• Familiar with Python backend integration for file handling and MIME type detection

Implementation Approach:

1. Frontend (React):

   • Create a CSVPreviewComponent with virtualized scrolling for large files (using react-window)
   • Add column sorting, search/filter capabilities, and configurable row limits (e.g., first 100 rows with "load more")
   • Implement responsive table design with proper overflow handling
   • Handle edge cases: malformed CSVs, various delimiters (comma, semicolon, tab), quoted fields

2. Backend Integration:

   • Extend the attachment handler to detect CSV MIME types (text/csv, application/csv)
   • Add server-side parsing with size limits to prevent memory issues
   • Return structured JSON with column headers and row data

3. UX Enhancements:

   • Loading states and error messages for corrupted files
   • Export functionality to download the preview
   • Dark mode support matching Opik's existing theme

4. Testing:

   • Unit tests for CSV parsing edge cases
   • Integration tests for the preview component
   • Performance testing with large files (100K+ rows)

I can have a draft PR ready within 3-4 days with comprehensive tests and documentation updates. Happy to discuss the technical approach or adapt based on your preferences!

Looking forward to contributing to Opik!
@jverre @juanferrub

[jverre]

Hi @kayush0712,

Go for it, let us know if you need any help - Will assign this issue to you, if you can't get to it let us know so we can re-assign it

[kayush0712]

thank you @jverre i need 3-4 days because i am new to open source community

[kayush0712]

mvn clean install getting failed everytime whenever i am trying to run in backend repo

[ayushraj09]

Hey @jverre
Can you assign this issue to me?

[Kaif-Imteyaz]

Hi @jverre !

I'd love to work on this issue to add CSV preview support to Opik.

About me:
I'm a final-year CS student with experience in:

• Full-stack development (React, Next.js, TypeScript)
• Building AI/LLM applications with RAG pipelines
• Working with data visualization and file parsing

My approach:

1. Study how existing attachment previews work (images, PDFs, etc.)
2. Implement CSV parsing using a library like PapaParse
3. Create a table component to display CSV data with pagination
4. Add proper error handling for malformed CSVs
5. Follow existing code patterns and styling

I've already reviewed the codebase structure and the attachment documentation.

Would you be open to assigning this to me? Happy to discuss the implementation approach first if you'd like!

Thanks!

[sonianuj287]

Hi @jverre, please review this PR.
Thanks :)