Enhanced Document Views for Source Explorer

[kouloumos]

This PR introduces new ways to view documents within our source explorer (/sources), making it easier to navigate through different types of content.

Key Changes

• Added new view modes for sources:
  • Thread View: Groups related documents by their thread URL (only shown for sources with threaded content)
  • Combined Summaries: Dedicated view for summary documents (only shown for sources that have them)
  • Default View: Now excludes combined summaries for cleaner presentation
• Refactored the Documents component into smaller, focused components for better maintainability
• Added source-level metadata to efficiently determine available view modes

Technical Details

An overview of Source Explorer's functionality from my notes to help you better review this change.

1. Entry Point (pages/sources.tsx):

   • Main page component that displays a table of data sources
   • Implements sorting and expandable rows for viewing source details
   • Uses the useSources hook for data fetching
   • Passes source metadata about available view modes

2. Data Fetching Layer:

   • Three API endpoints under elasticSearchProxy/:
     • sources.ts: Retrieves aggregated source data and metadata from Elasticsearch
     • sourceDocuments.ts: Fetches paginated documents with view mode support
     • getDocumentContent.ts: Retrieves full content of a specific document

3. Custom Hooks:

   • useSources.ts: Manages source data and metadata fetching
   • useSourceDocuments.ts: Handles paginated document fetching with view modes
   • useDocumentContent.ts: Manages individual document content retrieval

4. UI Components:

   • Documents.tsx: Main container component orchestrating the document views
   • ViewModeSelector.tsx: Handles switching between view modes based on availability
   • DocumentTable.tsx: Renders flat/summary view of documents
   • ThreadedDocumentTable.tsx: Renders threaded view of documents
   • PaginationControls.tsx: Handles pagination for all view modes
   • DocumentModal.tsx: Displays detailed document content

The flow works as follows:

1. Main page loads and fetches sources with metadata using useSources
2. When a source row is expanded, Documents component initializes
3. User can switch between available view modes (flat/threaded/summaries)
4. Each view mode fetches and displays documents appropriately:
   • Flat view: Shows all documents except combined summaries
   • Threaded view: Groups documents by thread_url (if available)
   • Summaries view: Shows only combined-summary documents (if available)
5. All data is cached using React Query, with Elasticsearch as the backend store

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bitcoinsearch-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2024 0:58am