Document Viewer

Overview

The DocumentViewer provides a sophisticated interface for viewing multiple document types including PDFs and FHIR resources. It features tabbed navigation, search functionality, citation highlighting, and automatic document processing integration with the SampleHC workflow system.

Basic Usage

import { DocumentViewer } from "@samplehc/ui/components";

function WorkflowDocumentViewer({ asyncResultIds }) {
  return (
    <DocumentViewer
      asyncResultIds={asyncResultIds}
      selectedCitations={[]}
    />
  );
}

import { DocumentViewerBase } from "@samplehc/ui/components";

function DirectDocumentViewer({ documentIds }) {
  return (
    <DocumentViewerBase
      documentIds={documentIds}
      selectedCitations={[]}
    />
  );
}

API Reference

DocumentViewer (Async Results)

string[]

required

Array of async result IDs from document processing workflows. The viewer will automatically extract document IDs from these results.

Citation[]

Array of citations to highlight across documents. Defaults to empty array.

string[]

Filter FHIR documents to show only specific resource types (e.g., [“Observation”, “DiagnosticReport”]).

DocumentViewerBase (Direct Documents)

string[]

required

Array of document IDs to display directly.

Citation[]

Array of citations to highlight across documents. Defaults to empty array.

unknown[]

Dependencies that trigger document refetch when changed. Defaults to empty array.

string[]

Filter FHIR documents to show only specific resource types.

Citation Type

string

required

ID of the document containing the citation.

number

required

Index of the chunk within the document.

number

required

Index of the block within the chunk.

Supported Formats

PDF Documents: Interactive PDF viewing with highlights, text selection, and page navigation
FHIR JSON: Both single JSON documents and JSONL (line-delimited JSON) formats

Features

Document Management

Tabbed Navigation: Switch between multiple documents with file name tabs
Document Type Toggle: Switch between PDF and FHIR document sets
Auto-loading: Automatic document fetching from async processing results

Cross-document Search: Search text across all loaded documents
Real-time Results: Instant search results with highlighted matches
Search Highlighting: Blue highlights for search results with match scores
Citation Navigation: Yellow highlights for referenced citations

PDF Features

Page-based Viewing: Full PDF viewer with zoom, rotation, and page controls
Highlight Overlays: Visual citation and search result highlighting
Page Jump: Navigate directly to pages containing highlights

FHIR Features

Categorized Display: Organize FHIR resources by type (Notes, Observations, etc.)
Timeline View: Chronological organization by months and years
Resource Filtering: Filter by specific FHIR resource types
Collapsible Sections: Expandable/collapsible chunks with preview
Patient Information: Dedicated patient info section

Highlight System

Floating Navigation Panel: Navigate between all highlights with keyboard shortcuts
Citation Highlighting: Automatic highlighting of referenced text passages
Search Highlighting: Visual highlighting of search matches
Cross-document Navigation: Jump between highlights across different documents

Keyboard Shortcuts

Alt + →: Next highlight
Alt + ←: Previous highlight

Advanced Examples

Workflow Integration with Citations

import { DocumentViewer } from "@samplehc/ui/components";
import { useTaskState } from "@samplehc/ui/data";

function CitationDocumentViewer({ asyncResultIds }) {
  const [selectedCitations, setSelectedCitations] = useTaskState("citations", []);
  
  return (
    <div className="h-full">
      <DocumentViewer
        asyncResultIds={asyncResultIds}
        selectedCitations={selectedCitations}
      />
    </div>
  );
}

Filtered FHIR Resource Viewing

import { DocumentViewer } from "@samplehc/ui/components";
import { useState } from "react";
import { Button } from "@/components/ui/button";

function FilteredDocumentViewer({ asyncResultIds }) {
  const [filterTypes, setFilterTypes] = useState<string[]>();
  const [selectedCitations, setSelectedCitations] = useState([]);

  const showOnlyObservations = () => {
    setFilterTypes(["Observation", "DiagnosticReport"]);
  };

  const showAllResources = () => {
    setFilterTypes(undefined);
  };

  return (
    <div className="h-full flex flex-col">
      <div className="p-4 border-b flex gap-2">
        <Button onClick={showOnlyObservations} variant="outline" size="sm">
          Show Labs Only
        </Button>
        <Button onClick={showAllResources} variant="outline" size="sm">
          Show All
        </Button>
      </div>
      <div className="flex-1">
        <DocumentViewer
          asyncResultIds={asyncResultIds}
          selectedCitations={selectedCitations}
          filterFhirResourceTypes={filterTypes}
        />
      </div>
    </div>
  );
}

Direct Document Access

import { DocumentViewerBase } from "@samplehc/ui/components";
import { useDocuments } from "@samplehc/ui/data";
import { useState } from "react";

function DirectDocumentViewer({ documentIds }) {
  const [selectedCitations, setSelectedCitations] = useState([]);
  const { data: documents, isLoading } = useDocuments(documentIds);

  if (isLoading) {
    return <div className="flex h-full items-center justify-center">
      Loading documents...
    </div>;
  }

  return (
    <DocumentViewerBase
      documentIds={documentIds}
      selectedCitations={selectedCitations}
    />
  );
}

import { DocumentViewer } from "@samplehc/ui/components";
import { useTaskState } from "@samplehc/ui/data";
import { Button } from "@/components/ui/button";
import { useState } from "react";

function NavigableDocumentViewer({ asyncResultIds }) {
  const [citations] = useTaskState("extractedCitations", []);
  const [currentCitationIndex, setCurrentCitationIndex] = useState(0);

  const navigateToNext = () => {
    if (currentCitationIndex < citations.length - 1) {
      setCurrentCitationIndex(currentCitationIndex + 1);
    }
  };

  const navigateToPrev = () => {
    if (currentCitationIndex > 0) {
      setCurrentCitationIndex(currentCitationIndex - 1);
    }
  };

  const currentCitation = citations[currentCitationIndex];

  return (
    <div className="h-full flex flex-col">
      {citations.length > 0 && (
        <div className="p-4 border-b flex items-center justify-between">
          <span className="text-sm">
            Citation {currentCitationIndex + 1} of {citations.length}
          </span>
          <div className="flex gap-2">
            <Button 
              onClick={navigateToPrev} 
              disabled={currentCitationIndex === 0}
              size="sm"
            >
              Previous
            </Button>
            <Button 
              onClick={navigateToNext} 
              disabled={currentCitationIndex === citations.length - 1}
              size="sm"
            >
              Next
            </Button>
          </div>
        </div>
      )}
      <div className="flex-1">
        <DocumentViewer
          asyncResultIds={asyncResultIds}
          selectedCitations={currentCitation ? [currentCitation] : []}
        />
      </div>
    </div>
  );
}

Integration Notes

Workflow Integration: The DocumentViewer is designed to work with the SampleHC workflow system. Use DocumentViewer for async processing results and DocumentViewerBase for direct document access.

Performance: The component uses virtual scrolling for large documents and lazy loading for better performance. Documents are cached and refetched only when needed.

Document Processing: Ensure documents are fully processed before viewing. The component will show loading states while async results are being processed.

Best Practices

Citation Management

Use useTaskState to persist citations across workflow steps
Implement citation navigation controls for better user experience
Consider debouncing citation updates for performance

Search Integration

The search functionality works across all loaded documents
Search results are highlighted in blue, citations in yellow
Use the floating navigation panel for efficient highlight traversal

FHIR Resource Filtering

Filter by resource types to focus on specific medical data
Common filters: ["Observation", "DiagnosticReport"] for lab results
Use undefined/null to show all resource types

Document Loading

Always handle loading states for better UX
Consider showing document counts and processing status
Implement error boundaries for failed document loads

Workflows

Screens

Integrations

Other guides

Overview

Basic Usage

API Reference

DocumentViewer (Async Results)

DocumentViewerBase (Direct Documents)

Citation Type

Supported Formats

Features

Document Management

Search & Navigation

PDF Features

FHIR Features

Highlight System

Keyboard Shortcuts

Advanced Examples

Workflow Integration with Citations

Filtered FHIR Resource Viewing

Direct Document Access

Citation Navigation Integration

Integration Notes

Best Practices

Citation Management

Search Integration

FHIR Resource Filtering

Document Loading

​Overview

​Basic Usage

​API Reference

​DocumentViewer (Async Results)

​DocumentViewerBase (Direct Documents)

​Citation Type

​Supported Formats

​Features

​Document Management

​Search & Navigation

​PDF Features

​FHIR Features

​Highlight System

​Keyboard Shortcuts

​Advanced Examples

​Workflow Integration with Citations

​Filtered FHIR Resource Viewing

​Direct Document Access

​Citation Navigation Integration

​Integration Notes

​Best Practices

​Citation Management

​Search Integration

​FHIR Resource Filtering

​Document Loading

Overview

Basic Usage

API Reference

DocumentViewer (Async Results)

DocumentViewerBase (Direct Documents)

Citation Type

Supported Formats

Features

Document Management

Search & Navigation

PDF Features

FHIR Features

Highlight System

Keyboard Shortcuts

Advanced Examples

Workflow Integration with Citations

Filtered FHIR Resource Viewing

Direct Document Access

Citation Navigation Integration

Integration Notes

Best Practices

Citation Management

Search Integration

FHIR Resource Filtering

Document Loading