wifi-densepose/crates/rvlite/examples/dashboard/docs/QUICK_REFERENCE.md

Bulk Vector Import - Quick Reference Card

🚀 30-Second Integration

# 1. Run script
./apply-bulk-import.sh

# 2. Add functions (copy sections 4-8 from bulk-import-code.tsx)
# Paste after line ~850 in App.tsx

# 3. Add button (copy section 9 from bulk-import-code.tsx)
# Paste after line ~1956 in App.tsx

# 4. Add modal (copy section 10 from bulk-import-code.tsx)
# Paste after line ~2296 in App.tsx

# 5. Test
npm run dev

📝 What to Add Where

What	Where	Lines	Section
FileSpreadsheet icon	Line ~78	1	1
Modal hook	Line ~527	1	2
State variables	Line ~539	5	3
CSV parser	Line ~850	45	4
JSON parser	Line ~890	30	5
Preview handler	Line ~920	15	6
Import handler	Line ~935	55	7
File handler	Line ~990	20	8
Button	Line ~1964	4	9
Modal	Line ~2306	155	10

📂 File Guide

File	Purpose	When to Use
INTEGRATION_GUIDE.md	Step-by-step instructions	First time integration
bulk-import-code.tsx	Copy-paste code	Actually coding
VISUAL_INTEGRATION_MAP.md	Diagrams & structure	Understanding flow
IMPLEMENTATION_SUMMARY.md	Feature overview	Before starting
sample-bulk-import.csv	Test CSV	Testing CSV import
sample-bulk-import.json	Test JSON	Testing JSON import

🎯 Code Sections (bulk-import-code.tsx)

Section	What	Lines
1	Icon import	1
2	Modal hook	1
3	State (5 vars)	5
4	CSV parser	45
5	JSON parser	30
6	Preview handler	15
7	Import handler	55
8	File handler	20
9	Button	4
10	Modal	155

🧪 Testing Checklist

• CSV upload works
• JSON upload works
• Preview shows 5 vectors
• Progress bar appears
• Success message logged
• Vector count updates
• Modal auto-closes
• Error handling works

🔧 Common Issues

Problem	Solution
Button not visible	Add icon import (Section 1)
Modal won't open	Add hook (Section 2)
Preview fails	Add parsers (Sections 4-5)
Import fails	Add handler (Section 7)

📊 CSV Format

id,embedding,metadata
vec1,"[1.0,2.0,3.0]","{\"key\":\"value\"}"

📋 JSON Format

[
  { "id": "vec1", "embedding": [1.0, 2.0, 3.0], "metadata": {} }
]

⚡ State Variables

bulkImportData: string               // Raw text
bulkImportFormat: 'csv' | 'json'     // Format type
bulkImportPreview: Vector[]          // Preview data
bulkImportProgress: {current, total, errors}
isBulkImporting: boolean             // In progress

🔄 Functions

parseCsvVectors(text)      → Vector[]
parseJsonVectors(text)     → Vector[]
handleGeneratePreview()    → void
handleBulkImport()         → Promise<void>
handleBulkImportFileUpload() → void

🎨 UI Components

Button: Bulk Import Vectors        (Quick Actions)
Modal: Bulk Import Modal           (After Import Modal)
  ├─ Format Selector
  ├─ File Upload
  ├─ Preview Button
  ├─ Format Guide
  ├─ Data Textarea
  ├─ Preview Panel
  └─ Progress Indicator

📏 Line Numbers

~78   : Icon import
~527  : Modal hook
~539  : State variables
~850  : Functions start
~1964 : Button location
~2306 : Modal location

🎯 Integration Order

1. ✅ Icon (1 line)
2. ✅ Hook (1 line)
3. ✅ State (5 lines)
4. ✅ Functions (5 functions, ~165 lines)
5. ✅ Button (4 lines)
6. ✅ Modal (155 lines)

Total: ~331 lines

🚦 Status After Integration

Feature	Status
CSV import	✅ Working
JSON import	✅ Working
File upload	✅ Working
Preview	✅ Working
Progress	✅ Working
Errors	✅ Handled
Theme	✅ Dark
Tests	⏳ Pending

📞 Help

• Integration: INTEGRATION_GUIDE.md
• Code: bulk-import-code.tsx
• Visual: VISUAL_INTEGRATION_MAP.md
• Overview: IMPLEMENTATION_SUMMARY.md

---

Quick Copy-Paste:

cat docs/bulk-import-code.tsx