fix: working latency toggles

The toggles for all the percentiles werent actually working right, now fixed.

apps/studio/components/interfaces/QueryInsights/components/MetricToggleButtons.tsx

@@ -7,15 +7,9 @@ import { MetricPill } from './MetricPill'
 
 // Define the exact shape of the visibleMetrics state
 export interface VisibleMetricsState {
-  // Old keys for backward compatibility
-  p50?: boolean
-  p95?: boolean
-  p99?: boolean
-  p99_9?: boolean
-
-  // New latency keys
+  // Latency keys (mapped)
   latency_p50?: boolean
-  latency_p90?: boolean
+  latency_p95?: boolean
   latency_p99?: boolean
 
   // Common keys
@@ -30,6 +24,8 @@ export interface VisibleMetricsState {
   cache_miss_ratio: boolean
   calls: boolean
   query_calls: boolean
+  issues: boolean
+  query_issues: boolean
   [key: string]: boolean | undefined // Allow string indexing with optional values
 }
 
@@ -39,6 +35,7 @@ interface MetricToggleButtonsProps {
   setVisibleMetrics: (value: React.SetStateAction<VisibleMetricsState>) => void
   metric: MetricType
   selectedQuery: QueryInsightsQuery | null
+  keyMappings?: Record<string, string> // Add keyMappings prop
 }
 
 export const MetricToggleButtons = ({
@@ -47,6 +44,7 @@ export const MetricToggleButtons = ({
   setVisibleMetrics,
   metric,
   selectedQuery,
+  keyMappings = {},
 }: MetricToggleButtonsProps) => {
   if (!chartConfig) return null
 
@@ -58,7 +56,7 @@ export const MetricToggleButtons = ({
         // If we have a selected query, hide the query-specific metrics since they'll
         // be shown inside the Selected Query pill
         if (
-          (key === 'query_rows' || key === 'query_latency' || key === 'query_calls') &&
+          (key === 'query_rows' || key === 'query_latency' || key === 'query_calls' || key === 'query_issues') &&
           selectedQuery
         ) {
           return null
@@ -66,7 +64,7 @@ export const MetricToggleButtons = ({
 
         // Only show query-specific metrics when a query is selected
         if (
-          (key === 'query_rows' || key === 'query_latency' || key === 'query_calls') &&
+          (key === 'query_rows' || key === 'query_latency' || key === 'query_calls' || key === 'query_issues') &&
           !selectedQuery
         ) {
           return null
@@ -143,13 +141,20 @@ export const MetricToggleButtons = ({
               value={formattedValue}
               color={(value as any).color}
               metricType={metric}
-              isActive={visibleMetrics[key]}
-              onClick={() =>
+              isActive={visibleMetrics[keyMappings[key] || key]}
+              onClick={() => {
+                const targetKey = keyMappings[key] || key
+                console.log(`[MetricToggleButtons] Toggle clicked for ${key}:`, {
+                  targetKey,
+                  currentValue: visibleMetrics[targetKey],
+                  keyMappings: keyMappings,
+                  allVisibleMetrics: visibleMetrics
+                })
                 setVisibleMetrics((prev) => ({
                   ...prev,
-                  [key]: !prev[key],
+                  [targetKey]: !prev[targetKey],
                 }))
-              }
+              }}
             />
           </motion.div>
         )

apps/studio/components/interfaces/QueryInsights/components/MetricsChart.tsx

@@ -37,14 +37,9 @@ export function MetricsChart(props: MetricsChartProps) {
   const { data, metric, isLoading, startTime, endTime, selectedQuery, hoveredQuery } = props
 
   const [visibleMetrics, setVisibleMetrics] = useState<VisibleMetricsState>({
-    // Old keys for backward compatibility
-    p50: true,
-    p95: true,
-    p99: true,
-    p99_9: true,
-    // Latency
+    // Latency (using mapped keys)
     latency_p50: true,
-    latency_p90: true,
+    latency_p95: true,
     latency_p99: true,
     query_latency: true,
     // Rows
@@ -158,21 +153,6 @@ export function MetricsChart(props: MetricsChartProps) {
 
   const { config, chartData } = chartConfig
 
-  // Debug logging to identify why query_rows isn't rendering
-  console.log('[MetricsChart] Rendering chart with:', {
-    metric,
-    selectedQuery: selectedQuery?.query_id,
-    chartDataLength: chartData.length,
-    configKeys: Object.keys(config),
-    querySpecificData: chartData.filter(
-      (point) => point.query_rows > 0 || point.query_latency > 0 || point.query_calls > 0
-    ),
-    visibleMetrics: {
-      query_rows: visibleMetrics.query_rows,
-      rows: visibleMetrics.rows,
-    },
-  })
-
   return (
     <div className="h-[320px] flex flex-col">
       <div className="flex flex-col flex-1 min-h-0">
@@ -184,6 +164,7 @@ export function MetricsChart(props: MetricsChartProps) {
               setVisibleMetrics={setVisibleMetrics}
               metric={metric}
               selectedQuery={selectedQuery}
+              keyMappings={keyMappings}
             />
           </div>
 
@@ -249,8 +230,23 @@ export function MetricsChart(props: MetricsChartProps) {
                 // Map the key to the corresponding visibleMetrics key
                 const visibleMetricsKey = (keyMappings as Record<string, string>)[key] || key
 
+                // Debug logging for toggle button troubleshooting
+                console.log(`[MetricsChart] Rendering series ${key}:`, {
+                  visibleMetricsKey,
+                  visibleMetricsValue: visibleMetrics[visibleMetricsKey],
+                  directValue: visibleMetrics[key],
+                  shouldRender: visibleMetrics[visibleMetricsKey] || visibleMetrics[key],
+                  keyMappings: keyMappings
+                })
+
                 // Skip series not enabled in visible metrics
-                if (!visibleMetrics[visibleMetricsKey] && !visibleMetrics[key]) return null
+                // If we have keyMappings, only check the mapped key
+                // Otherwise, check both mapped and direct keys for backward compatibility
+                const shouldRender = keyMappings && Object.keys(keyMappings).length > 0
+                  ? visibleMetrics[visibleMetricsKey]
+                  : (visibleMetrics[visibleMetricsKey] || visibleMetrics[key])
+                
+                if (!shouldRender) return null
 
                 // Skip query-specific metrics when not needed
                 if (
@@ -258,16 +254,11 @@ export function MetricsChart(props: MetricsChartProps) {
                   !selectedQuery &&
                   !hoveredQuery
                 ) {
-                  console.log(`[MetricsChart] Skipping ${key} - no selected or hovered query`)
                   return null
                 }
 
                 // Skip showing full series data for query-specific metrics
                 if (key === 'query_rows' || key === 'query_latency' || key === 'query_calls' || key === 'query_issues') {
-                  console.log(
-                    `[MetricsChart] Rendering ${key} with selectedQuery=${!!selectedQuery}`
-                  )
-
                   // If hovering and not selected, show hover style
                   if (hoveredQuery && !selectedQuery) {
                     return (
@@ -304,7 +295,6 @@ export function MetricsChart(props: MetricsChartProps) {
                       />
                     )
                   }
-                  console.log(`[MetricsChart] Not rendering ${key} - conditions not met`)
                   return null
                 }
 

apps/studio/components/interfaces/QueryInsights/hooks/useChartConfig.ts

@@ -126,7 +126,7 @@ export function useQueryLatencyChart({
     yAxisTickCount: 5,
     keyMappings: {
       p50: 'latency_p50',
-      p95: 'latency_p90',
+      p95: 'latency_p95',
       p99: 'latency_p99',
     },
   }