fix(studio): average p95 calculation on query performance (supabase#39725)

* fix: p95 calculation

Something seemed off so had another stab at it using resp_calls

* feat: simplified weighted avg p95

* feat: tweak it slightly

* feat: try one with a fallback

* feat: add test for percentile calculating

Author: kemaldotearth

apps/studio/components/interfaces/QueryPerformance/QueryPerformance.utils.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { formatDuration } from './QueryPerformance.utils'
+import { calculatePercentilesFromHistogram } from './WithMonitor/WithMonitor.utils'
 
 describe('formatDuration', () => {
   it('should format seconds', () => {
@@ -22,3 +23,23 @@ describe('formatDuration', () => {
     expect(formatDuration(90061000)).toBe('1d 1h 1m 1s')
   })
 })
+
+describe('calculatePercentilesFromHistogram', () => {
+  it('should return zero for empty histogram', () => {
+    const result = calculatePercentilesFromHistogram([])
+    expect(result.p95).toBe(0)
+  })
+
+  it('should return valid p95 for typical distribution', () => {
+    const result = calculatePercentilesFromHistogram([10, 20, 30, 20, 10, 10])
+    expect(result.p95).toBeGreaterThan(0)
+    expect(result.p95).toBeGreaterThanOrEqual(result.p50)
+  })
+
+  it('should return consistent p95 for same input', () => {
+    const histogram = [10, 20, 30, 20, 10, 10]
+    const result1 = calculatePercentilesFromHistogram(histogram)
+    const result2 = calculatePercentilesFromHistogram(histogram)
+    expect(result1.p95).toBe(result2.p95)
+  })
+})

apps/studio/components/interfaces/QueryPerformance/QueryPerformanceChart.tsx

@@ -5,6 +5,7 @@ import { Loader2 } from 'lucide-react'
 import { ComposedChart } from 'components/ui/Charts/ComposedChart'
 import type { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils'
 import type { ChartDataPoint } from './WithMonitor/WithMonitor.utils'
+import { calculatePercentilesFromHistogram } from './WithMonitor/WithMonitor.utils'
 
 interface QueryPerformanceChartProps {
   dateRange?: {
@@ -61,12 +62,38 @@ export const QueryPerformanceChart = ({
 
     switch (selectedMetric) {
       case 'query_latency': {
-        const avgP95 = chartData.reduce((sum, d) => sum + d.p95_time, 0) / chartData.length
+        let trueP95: number = 0
+
+        if (parsedLogs && parsedLogs.length > 0) {
+          const bucketCount = parsedLogs[0]?.resp_calls?.length || 50
+          const combinedHistogram = new Array(bucketCount).fill(0)
+
+          parsedLogs.forEach((log) => {
+            if (log.resp_calls && Array.isArray(log.resp_calls)) {
+              log.resp_calls.forEach((count: number, index: number) => {
+                if (index < combinedHistogram.length) {
+                  combinedHistogram[index] += count
+                }
+              })
+            }
+          })
+
+          // [kemal]: this might need a revisit
+          const percentiles = calculatePercentilesFromHistogram(combinedHistogram)
+          trueP95 = percentiles.p95
+        } else {
+          // [kemal]: fallback to weighted average
+          const totalCalls = chartData.reduce((sum, d) => sum + d.calls, 0)
+          trueP95 =
+            totalCalls > 0
+              ? chartData.reduce((sum, d) => sum + d.p95_time * d.calls, 0) / totalCalls
+              : 0
+        }
 
         return [
           {
             label: 'Average p95',
-            value: avgP95 >= 100 ? `${(avgP95 / 1000).toFixed(2)}s` : `${Math.round(avgP95)}ms`,
+            value: `${Math.round(trueP95)}ms`,
           },
         ]
       }