calculateTimeConsumedWidth() — supabase Function Reference

Architecture documentation for the calculateTimeConsumedWidth() function in QueryPerformanceGrid.tsx from the supabase codebase.

Function tsx ContentManagement MediaManagement calls 1 called by 1

Entity Profile

ContentManagement→ MediaManagement→ calculateTimeConsumedWidth() — supabase Function Reference

Dependency Diagram

graph TD
  4bcd66b1_59a5_36a7_803f_344ffaaee8b5["calculateTimeConsumedWidth()"]
  8824adb1_743f_95b6_9f48_ece3e426ebcf["QueryPerformanceGrid()"]
  8824adb1_743f_95b6_9f48_ece3e426ebcf -->|calls| 4bcd66b1_59a5_36a7_803f_344ffaaee8b5
  c766db49_5dcb_39c9_bf9f_6de30e40e28b["formatDuration()"]
  4bcd66b1_59a5_36a7_803f_344ffaaee8b5 -->|calls| c766db49_5dcb_39c9_bf9f_6de30e40e28b
  style 4bcd66b1_59a5_36a7_803f_344ffaaee8b5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx lines 54–74

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)}%`
      const durationText = formatDuration(totalTime)
      const fullText = `${percentageText} / ${durationText}`
      const estimatedWidth = fullText.length * 8 + 40

      maxWidth = Math.max(maxWidth, estimatedWidth)
    }
  })

  return Math.min(maxWidth, 300)
}