RowCountIndicator() — supabase Function Reference

Architecture documentation for the RowCountIndicator() function in ExplainVisualizer.RowCountIndicator.tsx from the supabase codebase.

Function tsx ContentManagement AccessControl calls 1

Entity Profile

ContentManagement→ AccessControl→ RowCountIndicator() — supabase Function Reference

Dependency Diagram

graph TD
  ee65fc1c_3360_6d24_12c5_79c0efd97c6d["RowCountIndicator()"]
  10c35384_b339_e176_58f2_5f7785542f12["formatRowCount()"]
  ee65fc1c_3360_6d24_12c5_79c0efd97c6d -->|calls| 10c35384_b339_e176_58f2_5f7785542f12
  style ee65fc1c_3360_6d24_12c5_79c0efd97c6d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.RowCountIndicator.tsx lines 15–94

export function RowCountIndicator({
  actualRows,
  estimatedRows,
  rowsRemovedByFilter,
}: RowCountIndicatorProps) {
  const hasActualRows = actualRows !== undefined
  const hasEstimatedRows = estimatedRows !== undefined
  const hasFilterData = rowsRemovedByFilter !== undefined && hasActualRows
  const totalRowsScanned = hasFilterData ? actualRows + rowsRemovedByFilter : undefined

  // Show filter flow: scanned → filtered out → remaining
  if (hasFilterData && totalRowsScanned !== undefined) {
    return (
      <Tooltip>
        <TooltipTrigger asChild>
          <div className="flex items-center gap-1.5 cursor-help">
            <span className="text-foreground-light">{formatRowCount(totalRowsScanned)}</span>
            <ArrowRight size={10} className="text-foreground-muted" />
            <span className="text-destructive-600 font-medium">
              -{formatRowCount(rowsRemovedByFilter)}
            </span>
            <ArrowRight size={10} className="text-foreground-muted" />
            <span className="text-brand font-medium">
              {formatRowCount(actualRows)} {actualRows === 1 ? 'row' : 'rows'}
            </span>
          </div>
        </TooltipTrigger>
        <TooltipContent side="top" className="max-w-xs font-sans">
          <p className="font-medium">Filter applied</p>
          <p className="text-foreground-lighter text-xs mt-1">
            {formatRowCount(totalRowsScanned)} rows were scanned,{' '}
            {formatRowCount(rowsRemovedByFilter)} were filtered out, leaving{' '}
            {formatRowCount(actualRows)} rows. Consider adding an index to reduce rows scanned.
          </p>
        </TooltipContent>
      </Tooltip>
    )
  }

  // Simple row count with actual rows
  if (hasActualRows) {
    return (
      <Tooltip>
        <TooltipTrigger asChild>
          <span className="text-foreground-light cursor-help">
            {formatRowCount(actualRows)} {actualRows === 1 ? 'row' : 'rows'}
          </span>
        </TooltipTrigger>
        <TooltipContent side="top" className="max-w-xs font-sans">
          <p className="font-medium">Rows returned</p>
          <p className="text-foreground-lighter text-xs mt-1">
            This operation processed and returned {formatRowCount(actualRows)} rows.
          </p>
        </TooltipContent>
      </Tooltip>
    )
  }

  // Only estimated rows available (EXPLAIN without ANALYZE)
  if (hasEstimatedRows) {
    return (
      <Tooltip>
        <TooltipTrigger asChild>
          <span className="text-foreground-muted cursor-help">
            est. {formatRowCount(estimatedRows)} {estimatedRows === 1 ? 'row' : 'rows'}
          </span>
        </TooltipTrigger>
        <TooltipContent side="top" className="max-w-xs font-sans">
          <p className="font-medium">Estimated rows</p>
          <p className="text-foreground-lighter text-xs mt-1">
            The planner estimates this operation will return {formatRowCount(estimatedRows)} rows.
            Run with EXPLAIN ANALYZE to see actual row counts.
          </p>
        </TooltipContent>
      </Tooltip>
    )
  }

  return <span className="text-foreground-muted">-</span>
}