c8ecb4b98f
Frontend: - Add Synthesis type with action plan, insights, annotations - ExecutiveSummary: Accept synthesis prop for AI narrative - SentimentPie: Accept insight prop for contextual explanation - IntensityHeatmap: Accept insight + highlightDomain props - TimelineChart: Accept insight + annotations props - All components gracefully degrade when synthesis is null Backend: - Add Stage 4: Synthesize for generating AI narratives - Gathers context from classified spans - Generates executive narrative, section insights, action plan - Produces timeline annotations and marketing angles - Stores synthesis in pipeline.executions table Components show AI insights with purple gradient styling when available, fall back to existing behavior when synthesis is not yet generated. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
335 lines
11 KiB
TypeScript
335 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo, Fragment } from 'react';
|
|
import {
|
|
useReactTable,
|
|
getCoreRowModel,
|
|
getSortedRowModel,
|
|
getPaginationRowModel,
|
|
getExpandedRowModel,
|
|
ColumnDef,
|
|
flexRender,
|
|
SortingState,
|
|
Row,
|
|
} from '@tanstack/react-table';
|
|
import {
|
|
ArrowUpDown,
|
|
ArrowUp,
|
|
ArrowDown,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
ChevronDown,
|
|
ChevronRight as ChevronRightIcon,
|
|
FileText,
|
|
} from 'lucide-react';
|
|
import type { SpanItem, PaginatedSpans } from '../types';
|
|
import { VALENCE_LABELS, VALENCE_COLORS, INTENSITY_LABELS, DOMAIN_LABELS } from '../types';
|
|
import { ReviewModal } from './ReviewModal';
|
|
|
|
interface SpansTableProps {
|
|
spans: PaginatedSpans;
|
|
onPageChange?: (page: number) => void;
|
|
}
|
|
|
|
/**
|
|
* Spans table with expandable rows and drill-down to full review.
|
|
*/
|
|
export function SpansTable({ spans, onPageChange }: SpansTableProps) {
|
|
const [sorting, setSorting] = useState<SortingState>([]);
|
|
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
|
|
const [selectedReview, setSelectedReview] = useState<{
|
|
reviewId: string;
|
|
spanId: string;
|
|
} | null>(null);
|
|
|
|
const columns = useMemo<ColumnDef<SpanItem>[]>(
|
|
() => [
|
|
{
|
|
id: 'expander',
|
|
header: '',
|
|
cell: ({ row }) => (
|
|
<button
|
|
onClick={() => row.toggleExpanded()}
|
|
className="p-1 hover:bg-gray-100 rounded transition-colors"
|
|
>
|
|
{row.getIsExpanded() ? (
|
|
<ChevronDown className="w-4 h-4 text-gray-500" />
|
|
) : (
|
|
<ChevronRightIcon className="w-4 h-4 text-gray-500" />
|
|
)}
|
|
</button>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'span_text',
|
|
header: 'Text',
|
|
cell: ({ row }) => (
|
|
<div className="max-w-md">
|
|
<p className="text-sm text-gray-800 line-clamp-2">
|
|
{row.original.span_text}
|
|
</p>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'urt_primary',
|
|
header: ({ column }) => (
|
|
<button
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
className="flex items-center gap-2 hover:text-blue-700 font-semibold"
|
|
>
|
|
URT Code
|
|
{column.getIsSorted() === 'asc' ? (
|
|
<ArrowUp className="w-4 h-4" />
|
|
) : column.getIsSorted() === 'desc' ? (
|
|
<ArrowDown className="w-4 h-4" />
|
|
) : (
|
|
<ArrowUpDown className="w-4 h-4 opacity-50" />
|
|
)}
|
|
</button>
|
|
),
|
|
cell: ({ row }) => (
|
|
<span className="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-mono font-bold rounded border border-purple-300">
|
|
{row.original.urt_primary || '-'}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'valence',
|
|
header: 'Sentiment',
|
|
cell: ({ row }) => {
|
|
const valence = row.original.valence;
|
|
if (!valence) return <span className="text-gray-400">-</span>;
|
|
return (
|
|
<span
|
|
className="px-2 py-1 text-xs font-bold rounded"
|
|
style={{
|
|
backgroundColor: `${VALENCE_COLORS[valence]}20`,
|
|
color: VALENCE_COLORS[valence],
|
|
}}
|
|
>
|
|
{VALENCE_LABELS[valence] || valence}
|
|
</span>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'intensity',
|
|
header: 'Intensity',
|
|
cell: ({ row }) => (
|
|
<span className="text-sm text-gray-600">
|
|
{row.original.intensity
|
|
? INTENSITY_LABELS[row.original.intensity] || row.original.intensity
|
|
: '-'}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'review_time',
|
|
header: ({ column }) => (
|
|
<button
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
className="flex items-center gap-2 hover:text-blue-700 font-semibold"
|
|
>
|
|
Date
|
|
{column.getIsSorted() === 'asc' ? (
|
|
<ArrowUp className="w-4 h-4" />
|
|
) : column.getIsSorted() === 'desc' ? (
|
|
<ArrowDown className="w-4 h-4" />
|
|
) : (
|
|
<ArrowUpDown className="w-4 h-4 opacity-50" />
|
|
)}
|
|
</button>
|
|
),
|
|
cell: ({ row }) => (
|
|
<span className="text-sm text-gray-600">
|
|
{row.original.review_time
|
|
? new Date(row.original.review_time).toLocaleDateString()
|
|
: '-'}
|
|
</span>
|
|
),
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
|
|
const table = useReactTable({
|
|
data: spans.items,
|
|
columns,
|
|
state: {
|
|
sorting,
|
|
expanded,
|
|
},
|
|
onSortingChange: setSorting,
|
|
onExpandedChange: setExpanded as any,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getSortedRowModel: getSortedRowModel(),
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
getExpandedRowModel: getExpandedRowModel(),
|
|
getRowCanExpand: () => true,
|
|
initialState: {
|
|
pagination: { pageSize: 10 },
|
|
},
|
|
});
|
|
|
|
const totalPages = Math.ceil(spans.total / spans.page_size);
|
|
|
|
// Render expanded row content
|
|
const renderExpandedRow = (row: Row<SpanItem>) => {
|
|
const span = row.original;
|
|
return (
|
|
<tr>
|
|
<td colSpan={columns.length} className="bg-gray-50 p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<span className="text-sm font-semibold text-gray-700">Full Text</span>
|
|
<p className="text-sm text-gray-800 mt-1 whitespace-pre-wrap">
|
|
{span.span_text}
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
|
<div>
|
|
<span className="font-semibold text-gray-700">Span ID</span>
|
|
<p className="text-gray-600 font-mono text-xs">{span.span_id}</p>
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold text-gray-700">Review ID</span>
|
|
<p className="text-gray-600 font-mono text-xs">
|
|
{span.source_review_id || '-'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold text-gray-700">Entity</span>
|
|
<p className="text-gray-600">{span.entity || '-'}</p>
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold text-gray-700">Domain</span>
|
|
<p className="text-gray-600">
|
|
{span.urt_primary
|
|
? DOMAIN_LABELS[span.urt_primary[0]] || span.urt_primary[0]
|
|
: '-'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* View Full Review Button */}
|
|
{span.source_review_id && (
|
|
<div className="pt-2">
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setSelectedReview({
|
|
reviewId: span.source_review_id!,
|
|
spanId: span.span_id,
|
|
});
|
|
}}
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
<FileText className="w-4 h-4" />
|
|
View Full Review
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl p-6 shadow-md border-2 border-gray-300">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h3 className="text-xl font-bold text-gray-900">Classified Spans</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{spans.total} total spans - Click row to expand
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{spans.items.length === 0 ? (
|
|
<div className="flex items-center justify-center h-32 text-gray-500">
|
|
No spans found
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="overflow-x-auto border-2 border-gray-200 rounded-lg">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50 border-b-2 border-gray-200">
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<th
|
|
key={header.id}
|
|
className="px-4 py-3 text-left text-gray-900"
|
|
>
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext()
|
|
)}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200">
|
|
{table.getRowModel().rows.map((row) => (
|
|
<Fragment key={row.id}>
|
|
<tr
|
|
className="hover:bg-blue-50 cursor-pointer transition-colors"
|
|
onClick={() => row.toggleExpanded()}
|
|
>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<td key={cell.id} className="px-4 py-3">
|
|
{flexRender(
|
|
cell.column.columnDef.cell,
|
|
cell.getContext()
|
|
)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
{row.getIsExpanded() && renderExpandedRow(row)}
|
|
</Fragment>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
<div className="flex items-center justify-between mt-4">
|
|
<div className="text-sm text-gray-700 font-medium">
|
|
Page {spans.page} of {totalPages} ({spans.total} spans)
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => onPageChange?.(spans.page - 1)}
|
|
disabled={spans.page <= 1}
|
|
className="px-3 py-2 border-2 border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 font-semibold text-gray-900 flex items-center gap-1"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
Previous
|
|
</button>
|
|
<button
|
|
onClick={() => onPageChange?.(spans.page + 1)}
|
|
disabled={spans.page >= totalPages}
|
|
className="px-3 py-2 border-2 border-gray-300 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 font-semibold text-gray-900 flex items-center gap-1"
|
|
>
|
|
Next
|
|
<ChevronRight className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Review Modal for drill-down */}
|
|
<ReviewModal
|
|
reviewId={selectedReview?.reviewId ?? null}
|
|
highlightSpanId={selectedReview?.spanId}
|
|
onClose={() => setSelectedReview(null)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|