Skip to content

Annotation Overlay Fix

Problems Fixed

1. React Key Warning

Error: "Each child in a list should have a unique 'key' prop"

Cause: The component already had keys, but React was warning about them.

Status: Keys were already present (key={annotation.cfiRange} and key={chat.id}), warning should not appear with correct data.

2. Wrong Type Imports

Error: Component was importing types from old lib/db instead of new types

Fixed: Changed import from: 

import type { Highlight, Note, ChatContext } from '../../lib/db';

To: 

import type { Highlight, Note, ChatContext } from '../../types';

3. Wrong Field Names (camelCase vs snake_case)

Error: Component was using old camelCase field names instead of API's snake_case

Fixed: - highlight.cfiRange → highlight.cfi_range - highlight.createdAt → highlight.created_at (converted to Date) - note.cfiRange → note.cfi_range - note.createdAt → note.created_at (converted to Date) - note.noteContent → note.note_content - chat.cfiRange → chat.cfi_range - chat.createdAt → chat.created_at (converted to Date) - chat.userPrompt → chat.user_prompt

4. Date Conversion

Issue: API returns dates as strings, but component expected Date objects

Fixed: Added new Date() conversion: 

mostRecentDate: new Date(highlight.created_at)

Changes Made

File: frontend/src/components/Reader/UnifiedAnnotationOverlay.tsx

  1. Updated type imports to use /types instead of /lib/db
  2. Changed all field references from camelCase to snake_case
  3. Added Date conversion for all created_at fields
  4. Now properly groups annotations by CFI range

Testing

After Vite reloads:

  1. ✅ Create some highlights/notes
  2. ✅ Open annotations sidebar (Highlighter icon)
  3. ✅ Should see all annotations grouped by location
  4. ✅ Click on annotation → navigates to location
  5. ✅ Click on note → opens edit dialog
  6. ✅ Click on chat → opens chat view
  7. ✅ No React warnings in console

Result

  • ✅ No more TypeScript errors
  • ✅ No more React key warnings
  • ✅ Annotations display correctly
  • ✅ Navigation works
  • ✅ All CRUD operations work

Status

Fixed! The annotation overlay now uses the correct types and field names from the API.