CSV Sources

1"use client";
2 
3import * as React from "react";
4 
5import type { Source } from "@/lib/document-source";
6import {
7  sourceToCsvCell,
8  useCsvSourceTarget,
9} from "@/components/ui/csv-source";
10import {
11  CsvViewerDocument,
12  type CsvViewerHandle,
13} from "@/components/ui/csv-viewer";
14import {
15  FileViewer,
16  FileViewerContent,
17  FileViewerHeader,
18  FileViewerTitle,
19  FileViewerProvider,
20  FileViewerSidebar,
21  FileViewerSidebarContent,
22  FileViewerInset,
23  FileViewerControls,
24  FileViewerViewport,
25} from "@/components/ui/file-viewer";
26import { SegmentedDocumentProvider } from "@/components/ui/segmented-document-provider";
27import { useSegmentedSourceFieldLink } from "@/components/ui/source-field-link";
28import {
29  SourceFieldList,
30  type SourceField,
31} from "@/components/ui/source-field-list";
32import { createSourcesSegmentedDocumentModel } from "@/components/ui/source-segmented-document-model";
33import csvSample from "@/components/viewers/sample-data/csv-sources.json";
34 
35const CSV_TEXT = `region,quarter,revenue,customers,nrr
36North America,Q1,1240000,48,1.12
37North America,Q2,1510000,61,1.21
38EMEA,Q1,820000,33,1.08
39EMEA,Q2,910000,39,1.15
40APAC,Q1,430000,18,1.04
41APAC,Q2,560000,24,1.11`;
42const CSV_SOURCE = {
43  kind: "text" as const,
44  text: CSV_TEXT,
45  fileName: "sales.csv",
46};
47 
48type CsvField = SourceField & { source: Source };
49 
50const FIELDS = (csvSample as CsvField[]).map((field) => ({
51  ...field,
52  hint:
53    field.source.anchor.kind === "csv_cell"
54      ? `Cell ${field.source.anchor.coordinate ?? field.source.anchor.column}`
55      : undefined,
56}));
57const FIELD_BY_KEY = new Map(FIELDS.map((field) => [field.key, field]));
58const SEGMENTED_DOCUMENT = createSourcesSegmentedDocumentModel(
59  FIELDS.map((field) => ({
60    id: field.key,
61    label: field.label,
62    source: field.source,
63  })),
64);
65 
66/**
67 * CSV sources block — extracted values linked to the spreadsheet cells they came
68 * from. Hovering a field highlights its cell and scrolls to it. Segmented
69 * source interaction owns preview/selection while the CSV source adapter owns
70 * cell navigation.
71 */
72export function CsvSourcesBlock() {
73  const viewerRef = React.useRef<CsvViewerHandle>(null);
74 
75  return (
76    <SegmentedDocumentProvider model={SEGMENTED_DOCUMENT}>
77      <CsvSourcesContent viewerRef={viewerRef} />
78    </SegmentedDocumentProvider>
79  );
80}
81 
82function CsvSourcesContent({
83  viewerRef,
84}: {
85  viewerRef: React.RefObject<CsvViewerHandle | null>;
86}) {
87  const target = useCsvSourceTarget(viewerRef);
88// … truncated