diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx index 9e99e9d7ced..a1d53ccbc30 100644 --- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx +++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx @@ -123,9 +123,10 @@ export const ChartConfig = ({ if (!resultKeys.length) { return ( -
+
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx index fca349dcb0a..85a05fb02e6 100644 --- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx +++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx @@ -1,14 +1,6 @@ import { useParams } from 'common' import { toast } from 'sonner' -import { - Tabs_Shadcn_, - TabsContent_Shadcn_, - TabsList_Shadcn_, - TabsTrigger_Shadcn_, - Tooltip, - TooltipContent, - TooltipTrigger, -} from 'ui' +import { Tabs_Shadcn_, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui' import { ChartConfig } from './ChartConfig' import { UtilityActions } from './UtilityActions' @@ -71,8 +63,7 @@ export const UtilityPanel = ({ const handleTabChange = (tab: string) => { // When switching to the explain tab, trigger the explain query - if (tab === 'explain') { - if (!hasSql) return + if (tab === 'explain' && hasSql) { executeExplainQuery() } onActiveTabChange?.(tab) @@ -147,18 +138,9 @@ export const UtilityPanel = ({ Results - - - - - Explain - - - - {!hasSql && ( - Add a query to view its execution plan - )} - + + Explain + Chart @@ -198,7 +180,7 @@ export const UtilityPanel = ({ - + diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx index e1713eaa6b8..69c3bdab8d9 100644 --- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx +++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx @@ -1,4 +1,4 @@ -import { Loader2 } from 'lucide-react' +import { Loader2, Workflow } from 'lucide-react' import { useState } from 'react' import { Tooltip, TooltipContent, TooltipTrigger } from 'ui' @@ -15,13 +15,30 @@ import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2' export type UtilityTabExplainProps = { id: string isExecuting?: boolean + hasSql?: boolean } -export function UtilityTabExplain({ id, isExecuting }: UtilityTabExplainProps) { +export function UtilityTabExplain({ id, isExecuting, hasSql = true }: UtilityTabExplainProps) { const snapV2 = useSqlEditorV2StateSnapshot() const explainResult = snapV2.explainResults[id] const [mode, setMode] = useState<'visual' | 'raw'>('visual') + if (!hasSql) { + return ( +
+
+ +
+

No execution plan to show

+

+ Add a query to view its execution plan. +

+
+
+
+ ) + } + if (isExecuting) { return (