chore: Disable tabs when no data is available

Author: lewisjared

frontend/src/components/ui/tabs.tsx

@@ -53,7 +53,7 @@ function TabsTrigger<T extends string = string>({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[disabled=true]:text-muted-foreground data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

frontend/src/routes/_app/diagnostics.$providerSlug.$diagnosticSlug/route.tsx

@@ -121,18 +121,30 @@ const DiagnosticInfoLayout = () => {
               Execution Groups
             </Link>
           </TabsTrigger>
-          <TabsTrigger value="scalars" asChild>
+          <TabsTrigger
+            value="scalars"
+            asChild
+            disabled={!data.has_scalar_values}
+            data-disabled={!data.has_scalar_values ? "true" : undefined}
+          >
             <Link
               to="/diagnostics/$providerSlug/$diagnosticSlug/scalars"
               params={{ providerSlug, diagnosticSlug }}
+              disabled={!data.has_scalar_values}
             >
               Scalar Values
             </Link>
           </TabsTrigger>
-          <TabsTrigger value="series" asChild>
+          <TabsTrigger
+            value="series"
+            asChild
+            disabled={!data.has_series_values}
+          >
             <Link
               to="/diagnostics/$providerSlug/$diagnosticSlug/series"
               params={{ providerSlug, diagnosticSlug }}
+              disabled={!data.has_series_values}
+              data-disabled={!data.has_series_values ? "true" : undefined}
             >
               Series Values
             </Link>

frontend/src/routes/_app/executions.$groupId.tsx

@@ -14,7 +14,11 @@ import ExecutionDatasetTable from "@/components/execution/executionDatasetTable.
 import { ExecutionFilesContainer } from "@/components/execution/executionFiles";
 import { ExecutionLogContainer } from "@/components/execution/executionLogs";
 import { Values } from "@/components/execution/values";
-import type { MetricValueCollection } from "@/components/execution/values/types";
+import {
+  isScalarValue,
+  isSeriesValue,
+  type MetricValueCollection,
+} from "@/components/execution/values/types";
 import { Badge } from "@/components/ui/badge";
 import {
   Card,
@@ -62,6 +66,10 @@ const ExecutionInfo = () => {
     }),
   );
 
+  const values = metricValues?.data as MetricValueCollection | undefined;
+  const hasScalar = values?.data.filter(isScalarValue)?.length ?? false;
+  const hasSeries = values?.data.filter(isSeriesValue)?.length ?? false;
+
   return (
     <>
       {/*<PageHeader*/}
@@ -167,8 +175,24 @@ const ExecutionInfo = () => {
               <TabsTrigger value="datasets">Datasets</TabsTrigger>
               <TabsTrigger value="executions">Executions</TabsTrigger>
               <TabsTrigger value="files">Files</TabsTrigger>
-              <TabsTrigger value="scalar-values">Scalar Values</TabsTrigger>
-              <TabsTrigger value="series-values">Series Values</TabsTrigger>
+              <TabsTrigger
+                value="scalar-values"
+                disabled={metricValues.isLoading || !hasScalar}
+                data-disabled={
+                  metricValues.isLoading || !hasScalar ? "true" : undefined
+                }
+              >
+                Scalar Values
+              </TabsTrigger>
+              <TabsTrigger
+                value="series-values"
+                disabled={metricValues.isLoading || !hasSeries}
+                data-disabled={
+                  metricValues.isLoading || !hasSeries ? "true" : undefined
+                }
+              >
+                Series Values
+              </TabsTrigger>
               <TabsTrigger value="logs">Logs</TabsTrigger>
             </TabsList>