lywsvip/supabase
1
0
Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-06-20 03:27:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): explain tab scroll area and small improvements (#41713)

Browse Source 
* fix: add extra slack to bottom of explain scroll area

* chore: match styling of total time to other inline stats

* feat: tidy up explain visualizer header for space

* fix: small syntax fix

* fix: divide instead of border bottom for rows
This commit is contained in:
kemal.earth
2026-01-05 15:39:24 +00:00
committed by GitHub
parent d89c409c81
commit 46cf0d37d8
4 changed files with 45 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx
View File

@@ -1,4 +1,4 @@
import { ArrowUp, Eye, Code } from 'lucide-react'
import { ArrowUp, Eye, Code, HelpCircle } from 'lucide-react'
import { useFlag } from 'common'
import { AiIconAnimation, Button } from 'ui'
@@ -8,6 +8,7 @@ import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
import { buildExplainPrompt } from './ExplainVisualizer.ai'
import type { QueryPlanRow } from './ExplainVisualizer.types'
import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
export interface ExplainSummary {
totalTime: number
@@ -61,14 +62,46 @@ export function ExplainHeader({ mode, onToggleMode, summary, id, rows }: Explain
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-2">
<h3 className="font-medium text-foreground">Query Execution Plan</h3>
<Tooltip>
<TooltipTrigger>
<HelpCircle
size="14"
strokeWidth={2}
className="text-foreground-lighter hover:text-foreground-light transition-colors cursor-help"
/>
</TooltipTrigger>
<TooltipContent side="top" className="max-w-xs p-4">
<h3 className="text-xs font-medium mb-2">How to read</h3>
<p className="text-foreground-light text-xs">
Start at the bottom where data is read from tables, then follow upward as each step
processes the results.
</p>
{isVisual && (
<>
<h3 className="text-xs font-medium mt-4 mb-2">Key</h3>
<div className="flex flex-col gap-1 text-foreground-light">
<div className="flex items-center gap-1.5">
<span className="inline-block w-1.5 h-1.5 rounded-full bg-warning" />
<span>Seq Scan (slow)</span>
</div>
<div className="flex items-center gap-1.5">
<span className="inline-block w-1.5 h-1.5 rounded-full bg-brand" />
<span>Index Scan (fast)</span>
</div>
</div>
</>
)}
</TooltipContent>
</Tooltip>
{/* Summary stats - only show in visual mode when we have the data */}
{hasSummaryStats && (
<div className="flex items-center gap-4 flex-wrap">
{summary.totalTime > 0 && (
<div className="flex items-center gap-1.5">
<span className="text-foreground-light">/</span>
<div className="flex items-center gap-2">
<span className="text-foreground-muted">/</span>
<span className="text-foreground-light">Total time</span>
<span className="font-mono font-medium text-foreground">
<span className="font-medium text-foreground">
{summary.totalTime.toFixed(2)}ms
</span>
</div>
@@ -97,30 +130,6 @@ export function ExplainHeader({ mode, onToggleMode, summary, id, rows }: Explain
</Button>
</div>
</div>
{/* How to read */}
<div className="flex items-center gap-2 text-foreground-lighter">
<ArrowUp size={12} className="text-foreground-light" />
<span className="font-medium text-foreground-light">How to read:</span>
<span>
Start at the bottom where data is read from tables, then follow upward as each step
processes the results.
</span>
</div>
{/* Icon legend - only relevant in visual mode */}
{isVisual && (
<div className="flex items-center gap-4 flex-wrap text-foreground-lighter">
<div className="flex items-center gap-1.5">
<span className="inline-block w-2 h-2 rounded-full bg-warning" />
<span>Seq Scan (slow)</span>
</div>
<div className="flex items-center gap-1.5">
<span className="inline-block w-2 h-2 rounded-full bg-brand" />
<span>Index Scan (fast)</span>
</div>
</div>
)}
</div>
)
}