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 (