Home / Function/ ExplainVisualizer() — supabase Function Reference

ExplainVisualizer() — supabase Function Reference

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

Function tsx ContentManagement Collections calls 3

Entity Profile

Dependency Diagram

graph TD
  9441c419_825c_eb70_b2a5_2509ac4ef05d["ExplainVisualizer()"]
  1354dff2_a00a_a836_6d23_6b19e617f15f["createNodeTree()"]
  9441c419_825c_eb70_b2a5_2509ac4ef05d -->|calls| 1354dff2_a00a_a836_6d23_6b19e617f15f
  817121da_442e_1740_6f00_8b0ae43d50d7["calculateMaxDuration()"]
  9441c419_825c_eb70_b2a5_2509ac4ef05d -->|calls| 817121da_442e_1740_6f00_8b0ae43d50d7
  e8479e1a_684f_e89b_ec5c_39ea7bfa4ee4["calculateSummary()"]
  9441c419_825c_eb70_b2a5_2509ac4ef05d -->|calls| e8479e1a_684f_e89b_ec5c_39ea7bfa4ee4
  style 9441c419_825c_eb70_b2a5_2509ac4ef05d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.tsx lines 13–50

export function ExplainVisualizer({ rows, onShowRaw, id }: ExplainVisualizerProps) {
  const parsedTree = useMemo(() => createNodeTree(rows), [rows])
  const maxDuration = useMemo(() => calculateMaxDuration(parsedTree), [parsedTree])
  const summary = useMemo(() => calculateSummary(parsedTree), [parsedTree])

  if (parsedTree.length === 0) {
    return (
      <div className="bg-studio">
        <p className="m-0 border-0 px-4 py-3 font-mono text-sm text-foreground-light">
          No execution plan data available
        </p>
      </div>
    )
  }

  return (
    <div className="bg-studio h-full flex flex-col min-h-0">
      {onShowRaw && (
        <ExplainHeader
          mode="visual"
          onToggleMode={onShowRaw}
          summary={summary}
          id={id}
          rows={rows}
        />
      )}

      {/* Plan nodes */}
      <div className="flex-1 overflow-auto min-h-0">
        <div className="flex flex-col min-w-max pb-1 divide-y divide-border-muted">
          {parsedTree.map((node, idx) => (
            <ExplainNodeRow key={idx} node={node} depth={0} maxDuration={maxDuration} />
          ))}
        </div>
      </div>
    </div>
  )
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does ExplainVisualizer() do?
ExplainVisualizer() is a function in the supabase codebase.
What does ExplainVisualizer() call?
ExplainVisualizer() calls 3 function(s): calculateMaxDuration, calculateSummary, createNodeTree.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free