Skip to content

Panel-level performance attribution system #1265

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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 33 commits into
base: main
Choose a base branch
from
Open

Panel-level performance attribution system #1265

wants to merge 33 commits into from

Conversation

dprokop
Copy link
Collaborator

@dprokop dprokop commented Oct 7, 2025 •
edited by scenes-repo-bot-access-token bot
Loading

Description

This PR introduces comprehensive panel-level performance attribution that provides granular visibility into individual panel performance within dashboard interactions. The system enables precise identification of performance bottlenecks and optimization opportunities through observer pattern architecture.

Panel-level performance tracking

  • Complete lifecycle tracking for panels (plugin load, query execution, data transformation, field configuration, rendering)
  • Sub-millisecond precision timing with Chrome DevTools integration via performance marks
  • Correlation between dashboard interactions and specific panel operations
  • Real-time performance data aggregation for analytics

Modern observer architecture

  • Unified event-driven system using ScenePerformanceTracker as central coordinator
  • Clean separation between performance tracking and business logic
  • Extensible pattern supporting multiple performance observers without coupling
  • Type-safe performance data interfaces with comprehensive TypeScript support

Developer experience improvements

  • Conditional performance logging controlled by localStorage flags
  • Standardized logging patterns across all performance components
  • Comprehensive test coverage (70+ test cases)
  • Analytics-ready structured data format

API modernization

  • Removed deprecated getPanelMetrics() method and unused interfaces
  • Consolidated performance APIs into consistent observer pattern
  • Event-specific TypeScript interfaces for better type safety
  • Simplified panel profiler attachment with cleaner return types

How to test

  1. Enable tracking: localStorage.setItem('grafana.debug.sceneProfiling', 'true')
  2. Test panel performance: Create dashboard with multiple panels, check Chrome DevTools Performance tab for marks and console logs
  3. Test observer pattern: Add custom observers using registerPerformanceObserver(), verify event distribution
  4. Run tests: yarn test VizPanelRenderProfiler SceneRenderProfiler PanelProfilingManager
📦 Published PR as canary version: 6.40.0--canary.1265.18325783397.0

✨ Test out this PR locally via:

npm install @grafana/[email protected]
npm install @grafana/[email protected]
# or 
yarn add @grafana/[email protected]
yarn add @grafana/[email protected]

dprokop added 27 commits September 2, 2025 23:09
@dprokop
feat(performance): extend SceneInteractionProfileEvent with panel met…
b0533f7 
…rics

- Add optional panelMetrics array to performance events
- Include comprehensive panel timing and performance data
- Maintain backward compatibility with existing profiling
- Part of panel-level performance attribution implementation
@dprokop
feat(performance): add VizPanelRenderProfiler behavior for panel-leve…
12ea7b8 
…l performance tracking

- Add VizPanelRenderProfiler behavior to track individual panel performance metrics
- Integrate with PanelPerformanceCollector for metrics collection
- Track plugin load, query, data processing, and render phases
- Add comprehensive test coverage
- Support long frame detection per panel
- Fix startPanelTracking call in activation to resolve 'Panel not found' error
@dprokop
feat(performance): update package.json for VizPanelRenderProfiler int…
ab05100 
…egration
@dprokop
Merge remote-tracking branch 'origin/main' into feat/panel-level-perf…
b436daf 
…ormance-attribution
@dprokop
VizPanelRenderProfiler: Remove long frame detection
4de9886 
- Remove enableLongFrameDetection from interface and constructor
- Remove updateLongFrameMetrics from PanelPerformanceCollectorLike
- Remove _setupLongFrameDetection() method and _longFrameObserver
- Update tests to remove Long Frame Detection test suite
- Simplify cleanup method and constructor defaults
- Long frame detection to be implemented in later project phase
@dprokop
S3.0: Panel Lifecycle Tracking - Hook panel lifecycle events
e29c60c 
- Add plugin loading tracking in VizPanel._loadPlugin()
- Implement field config processing tracking with data metrics
- Add dual render measurement (React Profiler + manual timing)
- Integrate query execution tracking via registerQueryWithController
- Add comprehensive panel re-render and state change handling
- Implement type-safe instanceof checks (no 'as any')
- Add localStorage debug flags for React Profiler and render comparison
- Add comprehensive test coverage (16/16 tests passing)
- Add performance marks for Chrome DevTools visibility
- Support SceneDataTransformer query tracking
@dprokop
feat(performance): S3.1 data transformation performance tracking
bdf9364 
- Add findPanelProfiler() shared utility to eliminate code duplication
- Make VizPanelRenderProfiler implement QueryProfilerLike interface
- Add comprehensive transformation timing in SceneDataTransformer
- Add transformation complexity metrics (simple/moderate/complex)
- Add centralized logging through VizPanelRenderProfiler methods
- Add performance marks for Chrome DevTools visibility
- Add error handling with proper timing tracking
- Add manual reprocessing support for reprocessTransformations()
- Integrate with PanelLifecyclePhase.DataProcessing phase
@dprokop
S4.0: Interaction correlation - SceneRenderProfiler and VizPanelRende…
23a1ceb 
…rProfiler correlation with InteractionBridge

- Enhanced SceneRenderProfiler to notify InteractionBridge of dashboard interactions
- Added correlation context tracking to VizPanelRenderProfiler for all performance phases
- Implemented _logWithCorrelation method for consistent correlation logging
- Added correlation context to panel metrics data for analytics integration
- Enhanced interruption detection and logging when interactions are cancelled
- Fixed timing synchronization between dashboard and panel profilers
@dprokop
S5.0: Metrics aggregation - SceneRenderProfiler collects panel metric…
10f0a17 
…s for analytics

- Enhanced SceneRenderProfiler to collect panel metrics from VizPanelRenderProfiler instances
- Added collectPanelMetrics() method to discover and aggregate panel performance data
- Include panel metrics in SceneInteractionProfileEvent for complete analytics correlation
- Added comprehensive unit tests for panel metrics collection functionality
- Handles error cases gracefully (no query controller, missing profilers, etc.)
- Complete end-to-end analytics flow now includes both dashboard and panel metrics
@dprokop
S5.0: Fix panel metrics collection scene graph traversal
88aa434 
- Improved collectPanelMetrics() to traverse to scene root before searching
- Added debug logging to show search root and found panel count
- Ensures VizPanel instances are discovered correctly in dashboard hierarchy
@dprokop
S4.0 + S5.0: Complete interaction correlation and metrics aggregation
c93e7bb 
S4.0: Interaction Correlation
- Add interactionContext field to SceneInteractionProfileEvent interface
- Enhance correlationContext in panel metrics with full interaction details
- Fix timing race condition: get interaction context before clearing
- Enable complete dashboard-to-panel correlation traceability

S5.0: Metrics Aggregation
- Add collectPanelMetrics() method to SceneRenderProfiler
- Implement robust scene graph traversal with proper root detection
- Include panel metrics array in SceneInteractionProfileEvent
- Enable panel-level performance attribution in analytics events

Technical fixes:
- Resolved interaction clearing before analytics event timing issue
- Fixed scene graph search to traverse from query controller to scene root
- Added comprehensive correlation context to both dashboard and panel levels

Result: Complete end-to-end correlation from user interaction to analytics with panel attribution
@dprokop
Remove PanelPerformanceCollectorLike interface and update tests
b58e1c2 
- Remove legacy PanelPerformanceCollectorLike interface from all files
- Update VizPanelRenderProfiler tests to use EnhancedPanelPerformanceCollector
- Fix all TypeScript lint errors in test files
- Complete unified collector implementation cleanup

All tests passing, ready for human verification.
@dprokop
Refactor VizPanelRenderProfiler to use observer pattern and callback-…
faa8f11 
…based operation tracking

- Remove all direct performance.mark() and performance.measure() calls from VizPanelRenderProfiler
- Implement observer pattern with ScenePerformanceTracker for centralized event management
- Refactor all operation tracking (render, transform, fieldconfig, plugin, query) to use callback pattern
- Ensure guaranteed correlation of start/end events using operation IDs in closures
- Remove legacy PanelPerformanceCollector and consolidate into clean observer architecture
- Update all tests to reflect new callback-based API patterns
- Add proper TypeScript interfaces for performance data (Dashboard, Panel, Query)
@dprokop
Remove InteractionBridge and legacy profile callback architecture
40bd335 
- Remove InteractionBridge imports and usage from VizPanelRenderProfiler and SceneRenderProfiler
- Remove SceneInteractionProfileEvent interface and onProfileComplete callback
- Extract render comparison logic into reusable utility
- Clean up verbose comments and simplify code structure
- Update tests to work with observer pattern
- Remove unused correlation context and logging methods
- All performance tracking now uses ScenePerformanceTracker observer pattern
@dprokop
Clean up comments and fix TypeScript errors
b57c789 
- Simplified and updated comments across all performance tracking files
- Updated ScenePerformanceTracker file header to be more concise
- Cleaned up SceneRenderProfiler comments and removed commented code
- Removed unnecessary comments about removed functionality in SceneDataTransformer
- Fixed findPanelProfiler function to use SceneObject instead of SceneObjectBase<any>
- Removed PanelLifecyclePhase import from VizPanelRenderProfiler test
- All TypeScript compilation errors resolved
- All tests passing (70 total test cases)
@dprokop
Replace DashboardPanelProfilingBehavior with PanelProfilingManager co…
b5f245e 
…mposition

- Create PanelProfilingManager class for managing VizPanelRenderProfiler instances
- Integrate PanelProfilingManager into SceneRenderProfiler via composition
- Add watchStateKey configuration for efficient state change monitoring
- Remove legacy onProfileComplete and SceneInteractionProfileEvent interfaces
- Clean up type exports and index files
@dprokop
Performance attribution: Remove legacy code and implement conditional…
2f1304a 
… logging

- Remove dashboardUIDs from PanelProfilingConfig interface
- Remove queryController parameter from SceneRenderProfiler constructor
- Refactor SceneRenderProfiler to use generic metadata instead of dashboard-specific properties
- Remove unused registerPanelMetrics and clearPanelMetricsRegistry methods
- Create BasePerformanceEvent interface to reduce duplication across performance data types
- Remove legacy React Profiler integration and render comparison utilities
- Remove legacy 'component-to-effects' string and renderType metadata from render tracking
- Replace all writeSceneLog calls with conditional writePerformanceLog function
- Add writePerformanceLog utility for conditional performance logging based on localStorage flag
@dprokop
Merge remote-tracking branch 'origin/main' into feat/faro-tracing-int…
8d94f08 
…egration-part1
@dprokop
Fix circular dependency by extracting interaction constants to separa…
57d4139 
…te file

- Create interactionConstants.ts to hold all dashboard interaction constants
- Update SceneTimeRange, variables, and components to import from new location
- Re-export constants from index files for backward compatibility
- Remove unused imports from SceneRenderProfiler
- Resolves 'Cannot access before initialization' errors in tests
@dprokop
Add long frames tracking to PerformanceEventData interface
8a2600d 
- Add longFramesCount and longFramesTotalTime as required properties
- These values are always tracked by SceneRenderProfiler during interactions
- Provides better structure for performance event data
@dprokop
Refactor PerformanceEventData into event-specific interfaces
778bdb1 
- Split PerformanceEventData into three specific interfaces:
  - DashboardInteractionStartData: interactionType + base properties
  - DashboardInteractionMilestoneData: interactionType, milestone + base properties
  - DashboardInteractionCompleteData: interactionType, networkDuration, longFramesCount, longFramesTotalTime + base properties
- Update ScenePerformanceObserver interface methods to use specific types
- Update ScenePerformanceTracker notify methods with proper type signatures
- Update SceneRenderProfiler to use DashboardInteractionCompleteData for completion events
- Export new interfaces in behaviors/index.ts and main index.ts
- Provides better type safety and clearer data contracts for each event phase
@dprokop
Refactor panel performance tracking: consolidate APIs and simplify me…
ed252cb 
…tadata

- Remove onPanelLifecycleStart/Complete methods, use consistent notifyPanelOperationStart/Complete for all panel operations including render
- Remove unnecessary type guards from discriminated union handlers (TypeScript provides automatic type narrowing)
- Comment out FieldConfigMetadata and RenderMetadata fields for now (interfaces preserved for future use)
- Update VizPanelRenderProfiler to use empty metadata objects for render and fieldConfig operations
- Remove lifecycle method mocks from test files
- Update DashboardAnalyticsAggregator to use simplified fieldConfigOperations type
- Maintain selective migration approach for panel vs non-panel query tracking
- Plugin-load remains as direct operation type (no longer lifecycle phase)
@dprokop
Remove duplicate SceneInteractionProfileEvent interface
b7729b5 
- Remove SceneInteractionProfileEvent from behaviors/types.ts
- Interface now only exists locally in grafana DashboardProfiler.ts
- Simplifies interface duplication and maintains clean API surface
@dprokop
Performance profiling refinements: consistent logging, architectural …
7f2fb65 
…improvements

- Fix corrupted startInteraction method name in SceneRenderProfiler
- Update comment references from ScenePerformanceService to ScenePerformanceLogger
- Simplify interaction completion logs to single-line format
- Remove commented dead code in SceneRenderProfiler
- Update VizPanelRenderProfiler docs for ScenePerformanceLogger
- Clean up SceneRenderProfiler.test.ts with correct service references
@dprokop
Simplify attachProfilerToPanel method return type
e3ecb94 
- Remove unnecessary boolean return type from attachProfilerToPanel methods
- Change return type from boolean to void since return value was never used
- Simplify SceneRenderProfiler delegation to PanelProfilingManager
- Clean up API surface by removing unused success/failure indicators
@dprokop
Refactor performance profiling system architecture
b3a93ce 
- Standardize logging in LongFrameDetector to use writePerformanceLog
- Remove deprecated getPanelMetrics method from VizPanelRenderProfiler
- Clean up unused VizPanelRenderProfilerLike interface
- Update related test cases to reflect observer pattern usage
- Maintain consistency with ScenePerformanceTracker design
@dprokop
Merge branch 'main' into feat/faro-tracing-integration-part1
031a4e9
@dprokop dprokop changed the title Refactor performance profiling system architecture Panel-level performance attribution system Oct 7, 2025
@dprokop dprokop added patch Increment the patch version when merged release Create a release when this pr is merged labels Oct 7, 2025
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
packages/scenes/src/performance/ScenePerformanceTracker.ts
let operationCounter = 0;
export function generateOperationId(prefix = 'op'): string {
return `${prefix}-${Date.now()}-${++operationCounter}`;
}
Copy link
Collaborator

@mdvictor mdvictor Oct 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

treat this as more of a nit, I reckon it won't cause any issues anywhere, but for extra safety and not having that global counter there, maybe we can use a uuid instead?

mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
packages/scenes/src/performance/ScenePerformanceTracker.ts
this.observers.push(observer);

// Return unsubscribe function
return () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this used anywhere currently? do we need it or would we just rely on clearObservers?

mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
packages/scenes/src/performance/VizPanelRenderProfiler.ts
/**
* Track data transformation with operation ID correlation
*/
public onDataTransformStart(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also a nit, but I think adding types for this methods params and return would help as it is a bit confusing.

mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
mdvictor
mdvictor reviewed Oct 16, 2025
View reviewed changes
Copy link
Collaborator

@mdvictor mdvictor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've left some comments, mostly nits, code looks amazing, the new observer arch looks really good, I'll also test this together with the core PR soon.

@mdvictor
Copy link
Collaborator

mdvictor commented Oct 17, 2025 •
edited
Loading

Tested and commented here. I think this is amazing and with some small changes this is good to land!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mdvictor mdvictor mdvictor left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

minor Increment the minor version when merged release Create a release when this pr is merged

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@dprokop @mdvictor