Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork11k
feature: add explain with AI in query performance#41415
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:master
Are you sure you want to change the base?
Conversation
vercelbot commentedDec 16, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
The latest updates on your projects. Learn more aboutVercel for GitHub.
6 Skipped Deployments
|
coderabbitaibot commentedDec 16, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
WalkthroughThis change integrates AI-assisted query explanation into the QueryPerformance interface. Users can now click an "Explain with AI" button in the query detail panel, which constructs a comprehensive prompt from performance metrics, opens the AI assistant, and logs telemetry data. Changes
Sequence DiagramsequenceDiagram participant User participant QueryDetail participant AI as AI Module participant Sidebar as AI Assistant Sidebar participant Telemetry User->>QueryDetail: Click "Explain with AI" button activate QueryDetail QueryDetail->>AI: buildQueryExplanationPrompt(selectedRow) activate AI AI->>AI: Extract metrics & metadata AI->>AI: Append index advisor & cost data AI->>AI: Construct detailed prompt AI-->>QueryDetail: Return { query, prompt } deactivate AI QueryDetail->>Sidebar: Open AI Assistant activate Sidebar QueryDetail->>Sidebar: Start chat with SQL snippet Sidebar-->>QueryDetail: Chat initialized deactivate Sidebar QueryDetail->>Telemetry: Send query_performance_ai_explanation_clicked activate Telemetry Telemetry-->>QueryDetail: Event logged deactivate Telemetry QueryDetail->>QueryDetail: Invoke onClose callback QueryDetail-->>User: Close detail panel deactivate QueryDetailEstimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
This pull request has been ignored for the connected project Preview Branches by Supabase. |
| interfaceQueryDetailProps{ | ||
| reportType:QUERY_PERFORMANCE_REPORT_TYPES | ||
| selectedRow:any | ||
| selectedRow:QueryPerformanceRow |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Hatred for any continues and RAGES
github-actionsbot commentedDec 16, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
🎭 Playwright Test Results
Details
Flaky testsFeatures › database.spec.ts › Database › Triggers › CRUD operations works as expected Skipped testsFeatures › sql-editor.spec.ts › SQL Editor › snippet favourite works as expected |
jordienr left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
only 1 nitpick non blocker
Uh oh!
There was an error while loading.Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/studio/components/interfaces/QueryPerformance/QueryPerformance.ai.ts (1)
11-20:Consider adding time units for clarity in the AI prompt.The metadata values lack units for time fields (e.g.,
total_time,mean_time). While the AI may infer these, explicitly including "ms" would make the prompt more precise.const metadata = [- `Total Time: ${selectedRow.total_time.toLocaleString()}`,+ `Total Time: ${selectedRow.total_time.toLocaleString()}ms`, `Calls: ${selectedRow.calls.toLocaleString()}`,- `Mean Time: ${selectedRow.mean_time.toLocaleString()}`,- `Max Time: ${selectedRow.max_time.toLocaleString()}`,- `Min Time: ${selectedRow.min_time.toLocaleString()}`,+ `Mean Time: ${selectedRow.mean_time.toLocaleString()}ms`,+ `Max Time: ${selectedRow.max_time.toLocaleString()}ms`,+ `Min Time: ${selectedRow.min_time.toLocaleString()}ms`, `Rows Read: ${selectedRow.rows_read.toLocaleString()}`, `Cache Hit Rate: ${selectedRow.cache_hit_rate.toLocaleString()}%`, `Role: ${selectedRow.rolname}`, ].join('\n')apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx (1)
44-44:UnusedreportTypeprop.The
reportTypeprop is declared in the interface and destructured but not used anywhere in the component. Consider removing it if not needed, or add a comment if reserved for future use.-export const QueryDetail = ({ selectedRow, onClickViewSuggestion, onClose }: QueryDetailProps) => {+export const QueryDetail = ({+ selectedRow,+ onClickViewSuggestion,+ onClose,+}: Omit<QueryDetailProps, 'reportType'>) => {Or update the interface to remove
reportTypeif it's no longer needed.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx(3 hunks)apps/studio/components/interfaces/QueryPerformance/QueryPerformance.ai.ts(1 hunks)apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx(1 hunks)packages/common/telemetry-constants.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
apps/studio/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/studio-best-practices.mdc)
apps/studio/**/*.{ts,tsx}: Assign complex conditions to descriptive variables instead of using multiple conditions in a single expression
Use consistent naming conventions for boolean variables:isprefix for state/identity,hasprefix for possession,canprefix for capability/permission,shouldprefix for conditional behavior
Derive boolean state from existing state instead of storing it separately
Use early returns for guard clauses instead of deeply nested conditionals
Extract complex logic into custom hooks when logic becomes reusable or complex
Return objects from custom hooks instead of arrays for better extensibility and clearer API
Use discriminated unions for complex state management instead of multiple independent state fields
Avoid type casting (e.g.,as any,as Type); instead validate values at runtime using zod schemas
Files:
apps/studio/components/interfaces/QueryPerformance/QueryPerformance.ai.tsapps/studio/components/interfaces/QueryPerformance/QueryDetail.tsxapps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
apps/studio/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/studio-best-practices.mdc)
apps/studio/**/*.tsx: Components should ideally be under 200-300 lines; break down large components with multiple distinct UI sections, complex conditional rendering, or multiple unrelated useState hooks
Extract repeated JSX patterns into reusable components instead of copying similar JSX blocks
Use consistent loading/error/success pattern: handle loading state first with early returns, then error state, then empty state, then render success state
Keep state as local as possible and only lift up when needed
Group related state using objects or reducers instead of multiple useState calls, preferring react-hook-form for form state management
Name event handlers consistently: useonprefix for prop callbacks andhandleprefix for internal handlers
Avoid inline arrow functions for expensive operations; use useCallback to maintain stable function references
Use appropriate conditional rendering patterns: && for simple show/hide, ternary for binary choice, early returns or extracted components for multiple conditions
Avoid nested ternaries in JSX; use separate conditions or early returns instead
Use useMemo for expensive computations when the computation is genuinely expensive and the value is passed to memoized children
Define prop interfaces explicitly for React components with proper typing of props and callback handlers
Files:
apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsxapps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
🧠 Learnings (1)
📚 Learning: 2025-12-12T05:20:17.409Z
Learnt from: joshenlimRepo: supabase/supabase PR: 41258File: apps/studio/pages/project/[ref]/storage/vectors/buckets/[bucketId].tsx:9-9Timestamp: 2025-12-12T05:20:17.409ZLearning: In apps/studio/**/*.{ts,tsx}, use named imports for DefaultLayout: import { DefaultLayout } from 'components/layouts/DefaultLayout' instead of default import. This is the new practice being adopted across the studio app.Applied to files:
apps/studio/components/interfaces/QueryPerformance/QueryPerformance.ai.tsapps/studio/components/interfaces/QueryPerformance/QueryDetail.tsxapps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
🧬 Code graph analysis (1)
apps/studio/components/interfaces/QueryPerformance/QueryPerformance.ai.ts (1)
apps/studio/components/interfaces/QueryPerformance/QueryPerformance.types.ts (1)
QueryPerformanceRow(3-18)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test
🔇 Additional comments (5)
packages/common/telemetry-constants.ts (1)
2552-2562:LGTM!The new telemetry event interface follows the established patterns in the file with proper JSDoc documentation and consistent typing.
apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx (1)
617-617:LGTM!The
onClosecallback correctly mirrors the Sheet'sonOpenChangebehavior, allowing the QueryDetail component to programmatically close the panel when opening the AI assistant.apps/studio/components/interfaces/QueryPerformance/QueryPerformance.ai.ts (1)
31-48:LGTM!The prompt structure is well-designed with clear sections for performance metrics, optional index advisor context, and focused instructions for concise, actionable responses.
apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx (2)
65-91:LGTM!The
handleExplainQueryfunction correctly:
- Guards against missing query data
- Builds the AI prompt using the extracted helper
- Opens the AI assistant sidebar and initiates a chat with context
- Sends the telemetry event with proper project/org grouping
- Closes the detail panel to reveal the AI assistant
The telemetry event addresses the feedback from the previous review.
96-106:LGTM!The UI integration follows consistent patterns with proper button styling and icon usage. The header layout with flex and justify-between is clean.
Uh oh!
There was an error while loading.Please reload this page.
I have read theCONTRIBUTING.md file.
YES
What kind of change does this PR introduce?
Simple button to add context of query performance into the AI chat
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.