Repository: supabase/supabase
File: apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx (TypeScript)

Code before:
  TabsList_Shadcn_,
  TabsTrigger_Shadcn_,
  Tabs_Shadcn_,
  cn,
  CodeBlock,
  SheetTitle,
} from 'ui'
import { InfoTooltip } from 'ui-patterns/info-tooltip'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { hasIndexRecommendations } from './index-advisor.utils'
import { IndexSuggestionIcon } from './IndexSuggestionIcon'
import { QueryDetail } from './QueryDetail'
import { QueryIndexes } from './QueryIndexes'
import {
  QUERY_PERFORMANCE_COLUMNS,
  QUERY_PERFORMANCE_REPORT_TYPES,
  QUERY_PERFORMANCE_ROLE_DESCRIPTION,
} from './QueryPerformance.constants'
import { useQueryPerformanceSort } from './hooks/useQueryPerformanceSort'
import { formatDuration } from './QueryPerformance.utils'

interface QueryPerformanceGridProps {
  queryPerformanceQuery: DbQueryHook<any>
}

const calculateTimeConsumedWidth = (data: any[]) => {
  if (!data || data.length === 0) return 150 // fallback

  let maxWidth = 150 // minimum width

  data.forEach((row) => {
    const percentage = row.prop_total_time || 0
    const totalTime = row.total_time || 0

    if (percentage && totalTime) {
      // Estimate width based on content
      const percentageText = `${percentage.toFixed(1)}%`
      const durationText = formatDuration(totalTime)
      const fullText = `${percentageText} / ${durationText}`

      // Rough estimation: ~8px per character + padding
      const estimatedWidth = fullText.length * 8 + 40 // 40px for padding/margins
      maxWidth = Math.max(maxWidth, estimatedWidth)
    }
  })

  return Math.min(maxWidth, 300) // cap at reasonable maximum
}

export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformanceGridProps) => {
  const { sort, setSortConfig } = useQueryPerformanceSort()

Review comment (bug):
is it possible to use the type here? If not we should validate the rows before trying to access the properties, so that it doesn't crash if something unexpected is returned from the API.

Code after:
  TabsList_Shadcn_,
  TabsTrigger_Shadcn_,
  Tabs_Shadcn_,
  cn,
  CodeBlock,
  SheetTitle,
} from 'ui'
import { InfoTooltip } from 'ui-patterns/info-tooltip'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { hasIndexRecommendations } from './index-advisor.utils'
import { IndexSuggestionIcon } from './IndexSuggestionIcon'
import { QueryDetail } from './QueryDetail'
import { QueryIndexes } from './QueryIndexes'
import {
  QUERY_PERFORMANCE_COLUMNS,
  QUERY_PERFORMANCE_REPORT_TYPES,
  QUERY_PERFORMANCE_ROLE_DESCRIPTION,
} from './QueryPerformance.constants'
import { useQueryPerformanceSort } from './hooks/useQueryPerformanceSort'
import { formatDuration } from './QueryPerformance.utils'
import { GetIndexAdvisorResultResponse } from 'data/database/retrieve-index-advisor-result-query'

interface QueryPerformanceGridProps {
  queryPerformanceQuery: DbQueryHook<any>
}

interface QueryPerformanceRow {
  query: string
  prop_total_time: number
  total_time: number
  calls: number
  max_time: number
  mean_time: number
  min_time: number
  rows_read: number
  cache_hit_rate: string
  rolname: string
  index_advisor_result: GetIndexAdvisorResultResponse | null
}

const calculateTimeConsumedWidth = (data: QueryPerformanceRow[]) => {
  if (!data || data.length === 0) return 150

  let maxWidth = 150

  data.forEach((row) => {
    const percentage = row.prop_total_time || 0
    const totalTime = row.total_time || 0

    if (percentage && totalTime) {
      const percentageText = `${percentage.toFixed(1)}%`