Excel 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  sourceToXlsxCell,
27  useXlsxSourceTarget,
28} from "@/components/ui/xlsx-source";
29import { XlsxViewer, type XlsxViewerHandle } from "@/components/ui/xlsx-viewer";
30import xlsxSample from "@/components/viewers/sample-data/xlsx-sources.json";
31 
32const XLSX_URL = "/samples/nvidia-financials-fy2024.xlsx";
33const XLSX_SOURCE = {
34  kind: "url" as const,
35  url: XLSX_URL,
36  fileName: "nvidia-financials-fy2024.xlsx",
37};
38 
39type XlsxField = SourceField & { source: Source };
40 
41const FIELDS = (xlsxSample as XlsxField[]).map((field) => ({
42  ...field,
43  hint:
44    field.source.anchor.kind === "spreadsheet_cell"
45      ? `${field.source.anchor.sheet_name ?? `Sheet ${field.source.anchor.sheet_index + 1}`} · ${field.source.anchor.coordinate ?? ""}`
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 * Excel sources block — extracted values linked to the spreadsheet cells they
59 * came from, across sheets. Hovering a field switches to its sheet, highlights
60 * the cell, and scrolls to it. Segmented source interaction owns
61 * preview/selection while the XLSX source adapter owns sheet-aware navigation.
62 */
63export function XlsxSourcesBlock() {
64  const viewerRef = React.useRef<XlsxViewerHandle>(null);
65 
66  return (
67    <SegmentedDocumentProvider model={SEGMENTED_DOCUMENT}>
68      <XlsxSourcesContent viewerRef={viewerRef} />
69    </SegmentedDocumentProvider>
70  );
71}
72 
73function XlsxSourcesContent({
74  viewerRef,
75}: {
76  viewerRef: React.RefObject<XlsxViewerHandle | null>;
77}) {
78  const target = useXlsxSourceTarget(viewerRef);
79// … truncated