4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T4cd2,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { FileViewer, FileViewerContent, FileViewerControls, FileViewerHeader, FileViewerInset, FileViewerLegend, FileViewerProvider, FileViewerSidebar, FileViewerSidebarContent, FileViewerSidebarHeader, FileViewerSidebarTrigger, FileViewerTitle, FileViewerViewport, } from "@/components/ui/file-viewer"; import { PdfViewerPages, PdfViewerProvider, type PdfViewerHandle, } from "@/components/ui/pdf-viewer"; import { PageRibbon, type RibbonRow } from "@/components/ui/page-ribbon"; import { SegmentLegend } from "@/components/ui/segment-legend"; import type { DocumentSegment } from "@/components/ui/segmented-document-model"; import { useSegmentInteraction } from "@/components/ui/use-segment-interaction"; type SegmentVoteCounts = Record; type Segment = { type: string; startPage: number; endPage: number; }; type SegmentRow = { id: string; label: string; shortLabel: string; ribbonSegments: DocumentSegment[]; }; type SegmentDiagramDoc = { fileName: string; label: string; pageCount: number; pdfUrl: string; legendSegments: DocumentSegment[]; rows: SegmentRow[]; ribbonRows: RibbonRow[]; diffRibbonRow: RibbonRow; }; type DiagramOrientation = "horizontal" | "vertical"; type DiagramSegmentInteraction = ReturnType; const HARRIS_SOURCE = { kind: "url" as const, url: "/samples/harris_2023_federal_state_returns.pdf", fileName: "harris_2023_federal_state_returns.pdf", }; const TYPE_COLORS = new Map([ ["Form 1040", "#4E79A7"], ["misc_form", "#F28E2B"], ["Schedule 2 (Form 1040)", "#59A14F"], ["Schedule B (Form 1040)", "#B6992D"], ["Schedule H (Form 1040)", "#499894"], ["supplement", "#E15759"], ["Form 8960", "#A0CBE8"], ["Schedule 1 (Form 1040)", "#FFBE7D"], ["Schedule A (Form 1040)", "#8CD17D"], ["Schedule C (Form 1040)", "#F1CE63"], ["Schedule SE (Form 1040)", "#86BCB6"], ]); const TYPE_ORDER = Array.from(TYPE_COLORS.keys()); /** Floor for the diff shading so a single dissenting vote still reads clearly. */ const DIFF_MIN_PERCENT = 40; const VERTICAL_LANE_WIDTH = 32; const VOTE_SEGMENTS: Segment[][] = [ [ segment("Form 1040", 1, 2), segment("Schedule 1 (Form 1040)", 3, 4), segment("Schedule 2 (Form 1040)", 5, 6), segment("Schedule A (Form 1040)", 7, 7), segment("Schedule B (Form 1040)", 8, 8), segment("Schedule C (Form 1040)", 9, 9), segment("Schedule SE (Form 1040)", 10, 10), segment("Schedule H (Form 1040)", 11, 12), segment("misc_form", 13, 13), segment("Form 8960", 14, 14), segment("supplement", 15, 20), segment("misc_form", 21, 40), ], [ segment("Form 1040", 1, 2), segment("Schedule 1 (Form 1040)", 3, 4), segment("Schedule 2 (Form 1040)", 5, 6), segment("Schedule A (Form 1040)", 7, 7), segment("Schedule B (Form 1040)", 8, 8), segment("Schedule C (Form 1040)", 9, 9), segment("Schedule SE (Form 1040)", 10, 10), segment("Schedule H (Form 1040)", 11, 12), segment("misc_form", 13, 13), segment("Form 8960", 14, 14), segment("supplement", 15, 20), segment("misc_form", 21, 39), segment("supplement", 40, 40), ], [ segment("Form 1040", 1, 2), segment("Schedule 1 (Form 1040)", 3, 4), segment("Schedule 2 (Form 1040)", 5, 6), segment("Schedule A (Form 1040)", 7, 7), segment("Schedule B (Form 1040)", 8, 8), segment("Schedule C (Form 1040)", 9, 9), segment("Schedule SE (Form 1040)", 10, 10), segment("Schedule H (Form 1040)", 11, 12), segment("misc_form", 13, 13), segment("Form 8960", 14, 15), segment("supplement", 16, 20), segment("misc_form", 21, 39), segment("supplement", 40, 40), ], [ segment("Form 1040", 1, 2), segment("Schedule 1 (Form 1040)", 3, 4), segment("Schedule 2 (Form 1040)", 5, 6), segment("Schedule A (Form 1040)", 7, 7), segment("Schedule B (Form 1040)", 8, 8), segment("Schedule C (Form 1040)", 9, 9), segment("Schedule SE (Form 1040)", 10, 10), segment("Schedule H (Form 1040)", 11, 12), segment("misc_form", 13, 13), segment("Form 8960", 14, 14), segment("supplement", 15, 20), segment("misc_form", 21, 40), ], [ segment("Form 1040", 1, 2), segment("Schedule 1 (Form 1040)", 3, 4), segment("Schedule 2 (Form 1040)", 5, 6), segment("Schedule A (Form 1040)", 7, 7), segment("Schedule B (Form 1040)", 8, 8), segment("Schedule C (Form 1040)", 9, 9), segment("Schedule SE (Form 1040)", 10, 10), segment("Schedule H (Form 1040)", 11, 12), segment("misc_form", 13, 13), segment("Form 8960", 14, 14), segment("supplement", 15, 20), segment("misc_form", 21, 39), segment("supplement", 40, 40), ], ]; const HARRIS_CONSOLIDATION_SEGMENTS = weightedConsolidationSegments( VOTE_SEGMENTS, 40, ); const HARRIS_SEGMENT_ROWS: SegmentRow[] = [ createSegmentRow( "harris-consolidation", "consolidation", "cons", HARRIS_CONSOLIDATION_SEGMENTS, ), ...VOTE_SEGMENTS.map((segments, index) => createSegmentRow( `harris-vote-${index + 1}`, `vote ${index + 1}`, `v${index + 1}`, segments, ), ), ]; const HARRIS_SEGMENT_DOC: SegmentDiagramDoc = { fileName: HARRIS_SOURCE.fileName, label: "Harris 2023 Federal / State Returns", pageCount: 40, pdfUrl: HARRIS_SOURCE.url, legendSegments: createLegendSegments(HARRIS_CONSOLIDATION_SEGMENTS), rows: HARRIS_SEGMENT_ROWS, ribbonRows: HARRIS_SEGMENT_ROWS.map(toRibbonRow), diffRibbonRow: createDiffRibbonRow({ id: "harris-diff", voteRows: VOTE_SEGMENTS, pageCount: 40, }), }; export function SplitConsensusSegmentDiagramViewer({ orientation, }: { orientation: DiagramOrientation; }) { const [currentPage, setCurrentPage] = React.useState(1); const [scrollProgress, setScrollProgress] = React.useState(0); const segmentInteraction = useSegmentInteraction(); const pdfRef = React.useRef(null); const isHorizontal = orientation === "horizontal"; const jumpToPage = React.useCallback((page: number) => { const nextPage = clampPage(page, HARRIS_SEGMENT_DOC.pageCount); setCurrentPage(nextPage); pdfRef.current?.scrollToPage(nextPage, { behavior: "smooth" }); }, []); return (

{isHorizontal ? (

Segment diagram

{HARRIS_SEGMENT_DOC.rows.length - 1} votes /{" "} {HARRIS_SEGMENT_DOC.pageCount} pages

) : null} {isHorizontal ? ( ) : ( )} jumpToPage(firstLegendPage(segment))} columns={4} variant="plain" showUnusedToggle className="px-3 py-2" /> setCurrentPage( clampPage(page, HARRIS_SEGMENT_DOC.pageCount), ) } onScrollProgressChange={setScrollProgress} />

); } function HorizontalSegmentDiagram({ doc, currentPage, scrollProgress, interaction, onJumpToPage, }: { doc: SegmentDiagramDoc; currentPage: number; scrollProgress: number; interaction: DiagramSegmentInteraction; onJumpToPage: (page: number) => void; }) { const rows = [...doc.ribbonRows, doc.diffRibbonRow]; return (

{rows.map((row) => (

{row.label}

))}

); } function VerticalSegmentDiagram({ doc, currentPage, scrollProgress, interaction, onJumpToPage, }: { doc: SegmentDiagramDoc; currentPage: number; scrollProgress: number; interaction: DiagramSegmentInteraction; onJumpToPage: (page: number) => void; }) { const rows = [...doc.ribbonRows, doc.diffRibbonRow]; return (

{doc.rows.map((row) => (

{row.shortLabel}

))}

diff

); } function DiagramIntro({ doc, compact = false, }: { doc: SegmentDiagramDoc; compact?: boolean; }) { return (

Segment diagram

Consolidation, all {doc.rows.length - 1} raw consensus votes, and a per-page vote-disagreement diff.

{doc.label}

); } function segment(type: string, startPage: number, endPage: number): Segment { return { type, startPage, endPage }; } function createSegmentRow( id: string, label: string, shortLabel: string, segments: Segment[], ): SegmentRow { return { id, label, shortLabel, ribbonSegments: createRibbonSegments(id, segments), }; } function toRibbonRow(row: SegmentRow): RibbonRow { return { id: row.id, label: row.label, segments: row.ribbonSegments, }; } function createLegendSegments(segments: readonly Segment[]): DocumentSegment[] { return TYPE_ORDER.map((type, index) => ({ id: segmentIdForType(type), label: type, pages: segmentPagesForType(segments, type), color: colorForType(type), index, confidence: null, })); } function createRibbonSegments( rowId: string, segments: readonly Segment[], ): DocumentSegment[] { return segments.map((segment, index) => ({ id: segmentIdForType(segment.type), sourceId: `${rowId}-${index}`, label: segment.type, pages: pagesInRange(segment.startPage, segment.endPage), color: colorForType(segment.type), index, confidence: null, })); } /** * The "diff" lane: each page shaded proportionally to how much the votes * disagree on it. A page where every vote assigns the same type reads as empty; * an even split reads as full-strength. Intensity is the share of dissenting * votes, normalized so a maximally-split page (the most even split possible for * the vote count) saturates the color — floored to DIFF_MIN_PERCENT so any * non-zero disagreement stays visible. */ function createDiffRibbonRow({ id, voteRows, pageCount, }: { id: string; voteRows: readonly (readonly Segment[])[]; pageCount: number; }): RibbonRow { const pageVotes = buildPageVotes(voteRows, pageCount); const maxDissent = Math.max(1, Math.floor(voteRows.length / 2)); const pagesByPercent = new Map(); for (let page = 1; page <= pageCount; page += 1) { const counts = Object.values(pageVotes[page]!); const total = counts.reduce((sum, count) => sum + count, 0); if (total === 0) continue; const dissent = total - Math.max(...counts); if (dissent <= 0) continue; // Proportional to the dissent share, but floored so even a single // dissenting vote stays clearly visible rather than reading as empty. const normalized = Math.min(1, dissent / maxDissent); const percent = Math.round( DIFF_MIN_PERCENT + normalized * (100 - DIFF_MIN_PERCENT), ); const bucket = pagesByPercent.get(percent) ?? []; bucket.push(page); pagesByPercent.set(percent, bucket); } const segments: DocumentSegment[] = Array.from(pagesByPercent.entries()) .sort(([left], [right]) => left - right) .map(([percent, pages], index) => ({ id: `${id}-diff-${percent}`, label: `${percent}% disagreement`, pages: pages.sort((left, right) => left - right), color: `color-mix(in oklab, var(--warning) ${percent}%, transparent)`, index, confidence: null, })); return { id, label: "diff", segments, }; } function segmentPagesForType(segments: readonly Segment[], type: string) { const pages = new Set(); segments .filter((segment) => segment.type === type) .forEach((segment) => { pagesInRange(segment.startPage, segment.endPage).forEach((page) => pages.add(page), ); }); return Array.from(pages).sort((left, right) => left - right); } function firstLegendPage(segment: DocumentSegment) { return segment.pages[0] ?? 1; } function pagesInRange(startPage: number, endPage: number) { const start = Math.max(1, Math.min(startPage, endPage)); const end = Math.max(start, endPage); return Array.from({ length: end - start + 1 }, (_, index) => start + index); } function segmentIdForType(type: string) { const index = TYPE_ORDER.indexOf(type); return `segment-type-${index === -1 ? type : index}`; } function buildPageVotes( voteRows: readonly (readonly Segment[])[], pageCount: number, ): SegmentVoteCounts[] { const pageVotes: SegmentVoteCounts[] = Array.from( { length: pageCount + 1 }, () => ({}), ); voteRows.forEach((segments) => { segments.forEach((seg) => { for (let page = seg.startPage; page <= seg.endPage; page += 1) { if (page < 1 || page > pageCount) continue; pageVotes[page]![seg.type] = (pageVotes[page]![seg.type] ?? 0) + 1; } }); }); return pageVotes; } function weightedConsolidationSegments( voteRows: readonly (readonly Segment[])[], pageCount: number, ): Segment[] { const pageVotes = buildPageVotes(voteRows, pageCount); const weightedSegments: Segment[] = []; let currentKey = voteSignature(pageVotes[1]!); let startPage: number | null = currentKey === "" ? null : 1; for (let page = 2; page <= pageCount; page += 1) { const nextKey = voteSignature(pageVotes[page]!); if (nextKey === currentKey) continue; if (currentKey !== "" && startPage !== null) { weightedSegments.push( weightedSegment(pageVotes[startPage]!, startPage, page - 1), ); } currentKey = nextKey; startPage = nextKey === "" ? null : page; } if (currentKey !== "" && startPage !== null) { weightedSegments.push( weightedSegment(pageVotes[startPage]!, startPage, pageCount), ); } return weightedSegments; } function weightedSegment( voteCounts: SegmentVoteCounts, startPage: number, endPage: number, ): Segment { return { type: winningType(voteCounts), startPage, endPage, }; } function voteSignature(voteCounts: SegmentVoteCounts) { return Object.entries(voteCounts) .sort(([left], [right]) => left.localeCompare(right)) .map(([type, count]) => `${type}:${count}`) .join("|"); } function winningType(voteCounts: SegmentVoteCounts) { return ( Object.entries(voteCounts).sort( ([leftType, leftCount], [rightType, rightCount]) => rightCount === leftCount ? leftType.localeCompare(rightType) : rightCount - leftCount, )[0]?.[0] ?? "unassigned" ); } function colorForType(type: string) { return TYPE_COLORS.get(type) ?? "#888"; } function clampPage(page: number, pageCount: number) { if (!Number.isFinite(page)) return 1; return Math.max(1, Math.min(pageCount, Math.round(page))); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":["@retab/file-viewer","@retab/pdf-viewer","@retab/segment-legend","@retab/page-ribbon","@retab/use-segment-interaction"]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.retab.com/r/split-consensus-diagram-horizontal-viewer-block.json","proxyUrl":"https://shadcnregistry.com/r/retab/split-consensus-diagram-horizontal-viewer-block","itemId":"@retab/split-consensus-diagram-horizontal-viewer-block"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/new-york-v4/blocks/split-consensus-diagram-horizontal-viewer-block.tsx","content":"\"use client\";\n\nimport { SplitConsensusSegmentDiagramViewer } from \"@/components/blocks/split-consensus-segment-diagram\";\n\nexport function SplitConsensusDiagramHorizontalViewerBlock() {\n return ;\n}\n","type":"registry:component","target":"@components/blocks/split-consensus-diagram-horizontal-viewer-block.tsx"},{"path":"registry/new-york-v4/blocks/split-consensus-segment-diagram.tsx","content":"$51","type":"registry:component","target":"@components/blocks/split-consensus-segment-diagram.tsx"}]}]]}],"$L52"]}]

Split Consensus Diagram Horizontal

Installation

Files

@components

Styles