feat: add empty state for charts tab instead

apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx

@@ -123,9 +123,10 @@ export const ChartConfig = ({
 
   if (!resultKeys.length) {
     return (
-      <div className="p-2">
+      <div className="p-2 h-full">
         <NoDataPlaceholder
           size="normal"
+          isFullHeight
           description="Execute a query and configure the chart options."
         />
       </div>

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 = ({
           <TabsTrigger_Shadcn_ className="py-3 text-xs" value="results">
             <span className="translate-y-px">Results</span>
           </TabsTrigger_Shadcn_>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span>
-                <TabsTrigger_Shadcn_ className="py-3 text-xs" value="explain" disabled={!hasSql}>
-                  <span className="translate-y-px">Explain</span>
-                </TabsTrigger_Shadcn_>
-              </span>
-            </TooltipTrigger>
-            {!hasSql && (
-              <TooltipContent side="bottom">Add a query to view its execution plan</TooltipContent>
-            )}
-          </Tooltip>
+          <TabsTrigger_Shadcn_ className="py-3 text-xs" value="explain">
+            <span className="translate-y-px">Explain</span>
+          </TabsTrigger_Shadcn_>
           <TabsTrigger_Shadcn_ className="py-3 text-xs" value="chart">
             <span className="translate-y-px">Chart</span>
           </TabsTrigger_Shadcn_>
@@ -198,7 +180,7 @@ export const UtilityPanel = ({
       </TabsContent_Shadcn_>
 
       <TabsContent_Shadcn_ asChild value="explain" className="mt-0 grow">
-        <UtilityTabExplain id={id} isExecuting={isExplainExecuting} />
+        <UtilityTabExplain id={id} isExecuting={isExplainExecuting} hasSql={hasSql} />
       </TabsContent_Shadcn_>
 
       <TabsContent_Shadcn_ asChild value="chart" className="mt-0 grow">

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 (
+      <div className="h-full p-2">
+        <div className="border-control flex h-full w-full flex-col items-center justify-center gap-y-2 border border-dashed text-center">
+          <Workflow size={20} className="text-border-stronger" strokeWidth={1.5} />
+          <div className="px-1">
+            <p className="text-foreground-light text-xs">No execution plan to show</p>
+            <p className="text-foreground-lighter text-xs">
+              Add a query to view its execution plan.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   if (isExecuting) {
     return (
       <div className="flex items-center gap-x-4 px-6 py-4 bg-table-header-light in-data-[theme*=dark]:bg-table-header-dark">