From 64794ebbd0cfee4f14bdde553b1891c8ce3155ff Mon Sep 17 00:00:00 2001 From: kemal Date: Mon, 11 Aug 2025 17:09:48 +0100 Subject: [PATCH] fix: working latency toggles The toggles for all the percentiles werent actually working right, now fixed. --- .../components/MetricToggleButtons.tsx | 33 +++++++------ .../QueryInsights/components/MetricsChart.tsx | 48 ++++++++----------- .../QueryInsights/hooks/useChartConfig.ts | 2 +- 3 files changed, 39 insertions(+), 44 deletions(-) diff --git a/apps/studio/components/interfaces/QueryInsights/components/MetricToggleButtons.tsx b/apps/studio/components/interfaces/QueryInsights/components/MetricToggleButtons.tsx index 051562dbb62..5211cdfa563 100644 --- a/apps/studio/components/interfaces/QueryInsights/components/MetricToggleButtons.tsx +++ b/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) => void metric: MetricType selectedQuery: QueryInsightsQuery | null + keyMappings?: Record // 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], })) - } + }} /> ) diff --git a/apps/studio/components/interfaces/QueryInsights/components/MetricsChart.tsx b/apps/studio/components/interfaces/QueryInsights/components/MetricsChart.tsx index 95b3af0e682..0b4facff88b 100644 --- a/apps/studio/components/interfaces/QueryInsights/components/MetricsChart.tsx +++ b/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({ - // 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 (
@@ -184,6 +164,7 @@ export function MetricsChart(props: MetricsChartProps) { setVisibleMetrics={setVisibleMetrics} metric={metric} selectedQuery={selectedQuery} + keyMappings={keyMappings} />
@@ -249,8 +230,23 @@ export function MetricsChart(props: MetricsChartProps) { // Map the key to the corresponding visibleMetrics key const visibleMetricsKey = (keyMappings as Record)[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 } diff --git a/apps/studio/components/interfaces/QueryInsights/hooks/useChartConfig.ts b/apps/studio/components/interfaces/QueryInsights/hooks/useChartConfig.ts index 478ee82f283..f66a602cc84 100644 --- a/apps/studio/components/interfaces/QueryInsights/hooks/useChartConfig.ts +++ b/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', }, }