Text Sources

1"use client";
2 
3import * as React from "react";
4 
5import type { Source } from "@/lib/document-source";
6import {
7  FileViewer,
8  FileViewerContent,
9  FileViewerHeader,
10  FileViewerTitle,
11  FileViewerProvider,
12  FileViewerSidebar,
13  FileViewerSidebarContent,
14  FileViewerInset,
15  FileViewerControls,
16  FileViewerViewport,
17} from "@/components/ui/file-viewer";
18import { SegmentedDocumentProvider } from "@/components/ui/segmented-document-provider";
19import { useSegmentedSourceFieldLink } from "@/components/ui/source-field-link";
20import {
21  SourceFieldList,
22  type SourceField,
23} from "@/components/ui/source-field-list";
24import { createSourcesSegmentedDocumentModel } from "@/components/ui/source-segmented-document-model";
25import {
26  sourceToTextHighlight,
27  useTextSourceTarget,
28} from "@/components/ui/text-source";
29import { TextViewer, type TextViewerHandle } from "@/components/ui/text-viewer";
30import textSample from "@/components/viewers/sample-data/text-sources.json";
31 
32const TEXT_URL = "/samples/extraction-run.log";
33const TEXT_SOURCE = {
34  kind: "url" as const,
35  url: TEXT_URL,
36  fileName: "extraction-run.log",
37};
38 
39type TextField = SourceField & { source: Source };
40 
41const FIELDS = (textSample as TextField[]).map((field) => ({
42  ...field,
43  hint:
44    field.source.anchor.kind === "text_span"
45      ? `Line ${field.source.anchor.line_start}`
46      : undefined,
47}));
48const FIELD_BY_KEY = new Map(FIELDS.map((field) => [field.key, field]));
49const SEGMENTED_DOCUMENT = createSourcesSegmentedDocumentModel(
50  FIELDS.map((field) => ({
51    id: field.key,
52    label: field.label,
53    source: field.source,
54  })),
55);
56 
57/**
58 * Text sources block — values extracted from a log file, linked to the lines
59 * they came from. Hovering a field highlights its line range and scrolls to it.
60 * Segmented source interaction owns field preview/selection while the text
61 * source adapter owns line-range scrolling and highlighting.
62 */
63export function TextSourcesBlock() {
64  const viewerRef = React.useRef<TextViewerHandle>(null);
65 
66  return (
67    <SegmentedDocumentProvider model={SEGMENTED_DOCUMENT}>
68      <TextSourcesContent viewerRef={viewerRef} />
69    </SegmentedDocumentProvider>
70  );
71}
72 
73function TextSourcesContent({
74  viewerRef,
75}: {
76  viewerRef: React.RefObject<TextViewerHandle | null>;
77}) {
78  const target = useTextSourceTarget(viewerRef);
79  const segmentedLink = useSegmentedSourceFieldLink({
80    initialSourcePath: FIELDS[0]?.key,
81  });
82  const link = useTargetedSourceFieldLink({
83// … truncated