import { ArrowRight } from 'lucide-react' import { Tooltip, TooltipContent, TooltipTrigger } from 'ui' interface RowCountIndicatorProps { actualRows?: number estimatedRows?: number rowsRemovedByFilter?: number } const formatCount = (value?: number): string => value?.toLocaleString() ?? 'Unknown' type EstimationAccuracy = | 'severely underestimated' | 'underestimated' | 'severely overestimated' | 'overestimated' | 'accurate' | 'unknown' function getEstimationAccuracy(actualRows: number, estimatedRows: number): EstimationAccuracy { if (!estimatedRows || estimatedRows === 0) { // If estimatedRows is zero or falsy, we can't compute a ratio—treat as severely underestimated return 'unknown' } const ratio = actualRows / estimatedRows if (ratio > 10) return 'severely underestimated' if (ratio > 2) return 'underestimated' if (ratio < 0.1) return 'severely overestimated' if (ratio < 0.5) return 'overestimated' return 'accurate' } /** Shows: scanned → filtered out → remaining */ function FilterFlowIndicator({ totalRowsScanned, rowsRemovedByFilter, actualRows, }: { totalRowsScanned: number rowsRemovedByFilter: number actualRows: number }) { return (
{formatCount(totalRowsScanned)} rows -{formatCount(rowsRemovedByFilter)} {formatCount(actualRows)} rows

Filter applied

{formatCount(totalRowsScanned)} rows were scanned, {formatCount(rowsRemovedByFilter)} were filtered out, leaving {formatCount(actualRows)} rows. Consider adding an index to reduce rows scanned.

) } /** Shows a simple count when estimated equals actual */ function SimpleCountIndicator({ rows }: { rows: number }) { return ( {formatCount(rows)} rows

Row count

The planner's estimate matched the actual row count exactly.

) } /** Shows comparison between estimated and actual rows */ function ComparisonIndicator({ actualRows, estimatedRows, }: { actualRows?: number estimatedRows?: number }) { const hasBothValues = actualRows !== undefined && estimatedRows !== undefined const hasOnlyActual = actualRows !== undefined && estimatedRows === undefined const title = hasBothValues ? 'Estimated vs actual rows' : hasOnlyActual ? 'Actual rows' : 'Estimated rows' const description = getComparisonDescription({ actualRows, estimatedRows }) return (
{estimatedRows !== undefined && est. {formatCount(estimatedRows)}} {actualRows !== undefined && ( <> {estimatedRows !== undefined && ( )} {formatCount(actualRows)} rows )}

{title}

{description}

) } function getComparisonDescription({ actualRows, estimatedRows, }: { actualRows?: number estimatedRows?: number }): string { const hasBothValues = actualRows !== undefined && estimatedRows !== undefined if (!hasBothValues) { if (actualRows !== undefined) { return `The operation returned ${formatCount(actualRows)} rows.` } return `The planner estimates this operation will return ${formatCount(estimatedRows)} rows. Run with ANALYZE to see actual counts.` } const accuracy = getEstimationAccuracy(actualRows, estimatedRows) const hasEstimationIssue = accuracy !== 'accurate' if (hasEstimationIssue) { return `The planner ${accuracy} the row count (estimated ${formatCount(estimatedRows)}, got ${formatCount(actualRows)}). This may indicate outdated statistics — consider running ANALYZE on the table.` } return `The planner estimated ${formatCount(estimatedRows)} rows and ${formatCount(actualRows)} were returned. The estimate was reasonably accurate.` } export function RowCountIndicator({ actualRows, estimatedRows, rowsRemovedByFilter, }: RowCountIndicatorProps) { const hasData = actualRows !== undefined || estimatedRows !== undefined if (!hasData) return undefined const hasFilterData = rowsRemovedByFilter !== undefined && actualRows !== undefined const totalRowsScanned = hasFilterData ? actualRows + rowsRemovedByFilter : undefined // Priority 1: Show filter flow if we have filter data if (hasFilterData && totalRowsScanned !== undefined) { return ( ) } // Priority 2: Show simple count if estimate matches actual exactly const estimateMatchesActual = actualRows !== undefined && estimatedRows !== undefined && actualRows === estimatedRows if (estimateMatchesActual) { return } // Priority 3: Show comparison view return }