Panel-level performance attribution system

packages/scenes/src/behaviors/SceneInteractionTracker.ts

@@ -1,6 +1,6 @@
 import { SceneObjectBase } from '../core/SceneObjectBase';
 import { SceneObject, SceneStatelessBehavior } from '../core/types';
-import { SceneRenderProfiler } from './SceneRenderProfiler';
+import { SceneRenderProfiler } from '../performance/SceneRenderProfiler';
 import { SceneInteractionTrackerState } from './types';
 
 export function isInteractionTracker(s: SceneObject | SceneStatelessBehavior): s is SceneInteractionTracker {

packages/scenes/src/behaviors/SceneQueryController.ts

@@ -1,7 +1,7 @@
 import { SceneObjectBase } from '../core/SceneObjectBase';
 import { SceneObject, SceneStatelessBehavior } from '../core/types';
 import { writeSceneLog } from '../utils/writeSceneLog';
-import { SceneRenderProfiler } from './SceneRenderProfiler';
+import { SceneRenderProfiler } from '../performance/SceneRenderProfiler';
 import { SceneQueryControllerEntry, SceneQueryControllerLike, SceneQueryStateControllerState } from './types';
 
 export function isQueryController(s: SceneObject | SceneStatelessBehavior): s is SceneQueryControllerLike {

packages/scenes/src/behaviors/types.ts

@@ -16,22 +16,7 @@ export interface SceneQueryControllerEntry {
 export type SceneQueryControllerEntryType = 'data' | 'annotations' | 'variable' | 'alerts' | 'plugin' | string;
 
 // Long Frame Detection types (re-exported from LongFrameDetector)
-export type { LongFrameEvent, LongFrameCallback } from './LongFrameDetector';
-
-export interface SceneInteractionProfileEvent {
-  origin: string;
-  duration: number;
-  networkDuration: number;
-  jsHeapSizeLimit: number;
-  usedJSHeapSize: number;
-  totalJSHeapSize: number;
-  crumbs: string[];
-  startTs: number;
-  endTs: number;
-  longFramesCount: number;
-  longFramesTotalTime: number;
-  // add more granular data,i.e. network times? slow frames?
-}
+export type { LongFrameEvent, LongFrameCallback } from '../performance/LongFrameDetector';
 
 export interface SceneComponentInteractionEvent {
   origin: string;
@@ -49,7 +34,6 @@ export interface SceneInteractionTrackerState extends SceneObjectState {
 export interface SceneQueryStateControllerState extends SceneObjectState {
   isRunning: boolean;
   enableProfiling?: boolean;
-  onProfileComplete?(event: SceneInteractionProfileEvent): void;
 }
 
 export interface SceneQueryControllerLike extends SceneObject<SceneQueryStateControllerState> {

packages/scenes/src/components/SceneRefreshPicker.tsx

@@ -8,7 +8,7 @@ import { SceneObjectBase } from '../core/SceneObjectBase';
 import { sceneGraph } from '../core/sceneGraph';
 import { SceneComponentProps, SceneObject, SceneObjectState, SceneObjectUrlValues } from '../core/types';
 import { SceneObjectUrlSyncConfig } from '../services/SceneObjectUrlSyncConfig';
-import { REFRESH_INTERACTION } from '../behaviors/SceneRenderProfiler';
+import { REFRESH_INTERACTION } from '../performance/interactionConstants';
 
 export const DEFAULT_INTERVALS = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];
 

packages/scenes/src/components/VizPanel/VizPanel.tsx

@@ -37,6 +37,7 @@ import { cloneDeep, isArray, isEmpty, merge, mergeWith } from 'lodash';
 import { UserActionEvent } from '../../core/events';
 import { evaluateTimeRange } from '../../utils/evaluateTimeRange';
 import { LiveNowTimer } from '../../behaviors/LiveNowTimer';
+import { VizPanelRenderProfiler } from '../../performance/VizPanelRenderProfiler';
 import { registerQueryWithController, wrapPromiseInStateObservable } from '../../querying/registerQueryWithController';
 import { SceneDataTransformer } from '../../querying/SceneDataTransformer';
 import { SceneQueryRunner } from '../../querying/SceneQueryRunner';
@@ -140,6 +141,23 @@ export class VizPanel<TOptions = {}, TFieldConfig extends {} = {}> extends Scene
     });
   }
 
+  /**
+   * Get the VizPanelRenderProfiler behavior if attached
+   */
+  public getProfiler(): VizPanelRenderProfiler | undefined {
+    if (!this.state.$behaviors) {
+      return undefined;
+    }
+
+    for (const behavior of this.state.$behaviors) {
+      if (behavior instanceof VizPanelRenderProfiler) {
+        return behavior;
+      }
+    }
+
+    return undefined;
+  }
+
   private _onActivate() {
     if (!this._plugin) {
       this._loadPlugin(this.state.pluginId);
@@ -157,14 +175,21 @@ export class VizPanel<TOptions = {}, TFieldConfig extends {} = {}> extends Scene
     overwriteFieldConfig?: FieldConfigSource,
     isAfterPluginChange?: boolean
   ) {
+    const profiler = this.getProfiler();
     const plugin = loadPanelPluginSync(pluginId);
 
     if (plugin) {
+      // Plugin was loaded from cache
+      const endPluginLoadCallback = profiler?.onPluginLoadStart(pluginId);
+      endPluginLoadCallback?.(plugin, true);
       this._pluginLoaded(plugin, overwriteOptions, overwriteFieldConfig, isAfterPluginChange);
     } else {
       const { importPanelPlugin } = getPluginImportUtils();
 
       try {
+        // Start profiling plugin load - get end callback
+        const endPluginLoadCallback = profiler?.onPluginLoadStart(pluginId);
+
         const panelPromise = importPanelPlugin(pluginId);
 
         const queryControler = sceneGraph.getQueryController(this);
@@ -175,6 +200,10 @@ export class VizPanel<TOptions = {}, TFieldConfig extends {} = {}> extends Scene
         }
 
         const result = await panelPromise;
+
+        // End profiling plugin load (not from cache)
+        endPluginLoadCallback?.(result, false);
+
         this._pluginLoaded(result, overwriteOptions, overwriteFieldConfig, isAfterPluginChange);
       } catch (err: unknown) {
         this._pluginLoaded(getPanelPluginNotFound(pluginId));
@@ -457,8 +486,11 @@ export class VizPanel<TOptions = {}, TFieldConfig extends {} = {}> extends Scene
    * Called from the react render path to apply the field config to the data provided by the data provider
    */
   public applyFieldConfig(rawData?: PanelData): PanelData {
+    const timestamp = performance.now();
     const plugin = this._plugin;
 
+    const profiler = this.getProfiler();
+
     if (!plugin || plugin.meta.skipDataQuery || !rawData) {
       // TODO setup time range subscription instead
       return emptyPanelData;
@@ -469,6 +501,9 @@ export class VizPanel<TOptions = {}, TFieldConfig extends {} = {}> extends Scene
       return this._dataWithFieldConfig;
     }
 
+    // Start profiling data processing - get end callback
+    const endFieldConfigCallback = profiler?.onFieldConfigStart(timestamp);
+
     const pluginDataSupport: PanelPluginDataSupport = plugin.dataSupport || { alertStates: false, annotations: false };
 
     const fieldConfigRegistry = plugin.fieldConfigRegistry;
@@ -515,6 +550,12 @@ export class VizPanel<TOptions = {}, TFieldConfig extends {} = {}> extends Scene
     }
 
     this._prevData = rawData;
+
+    // End profiling data processing
+    if (profiler) {
+      endFieldConfigCallback?.(performance.now());
+    }
+
     return this._dataWithFieldConfig;
   }
 

packages/scenes/src/components/VizPanel/VizPanelRenderer.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@grafana/i18n';
-import React, { RefCallback, useCallback, useEffect, useMemo } from 'react';
+import React, { RefCallback, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
 import { useMeasure } from 'react-use';
 
 // @ts-ignore
@@ -51,6 +51,32 @@ export function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {
     [setPanelAttention]
   );
 
+  // S3.0 RENDER TRACKING: Simple timing for performance measurement
+  const profiler = useMemo(() => model.getProfiler(), [model]);
+
+  // Capture render start time immediately when component function runs
+  const currentRenderStart = performance.now();
+
+  const endRenderCallbackRef = React.useRef<((endTimestamp: number, duration: number) => void) | null>(null);
+
+  useLayoutEffect(() => {
+    if (profiler) {
+      const callback = profiler.onSimpleRenderStart(currentRenderStart);
+      endRenderCallbackRef.current = callback || null;
+    }
+  });
+
+  // Use useEffect (after DOM updates) to measure complete render cycle timing
+  useEffect(() => {
+    if (endRenderCallbackRef.current) {
+      const timestamp = performance.now();
+      // Measure from component start to after DOM updates AND effects (complete render cycle)
+      const duration = timestamp - currentRenderStart;
+      endRenderCallbackRef.current(timestamp, duration);
+      endRenderCallbackRef.current = null; // Clear callback after use
+    }
+  });
+
   const plugin = model.getPlugin();
 
   const { dragClass, dragClassCancel } = getDragClasses(model);

packages/scenes/src/core/SceneTimeRange.tsx

@@ -13,7 +13,7 @@ import { isValid } from '../utils/date';
 import { getQueryController } from './sceneGraph/getQueryController';
 import { writeSceneLog } from '../utils/writeSceneLog';
 import { isEmpty } from 'lodash';
-import { TIME_RANGE_CHANGE_INTERACTION } from '../behaviors/SceneRenderProfiler';
+import { TIME_RANGE_CHANGE_INTERACTION } from '../performance/interactionConstants';
 
 export class SceneTimeRange extends SceneObjectBase<SceneTimeRangeState> implements SceneTimeRangeLike {
   protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['from', 'to', 'timezone', 'time', 'time.window'] });

packages/scenes/src/index.ts

@@ -29,6 +29,8 @@ export * from './core/types';
 export * from './core/events';
 export { sceneGraph } from './core/sceneGraph';
 export * as behaviors from './behaviors';
+export * as performanceUtils from './performance';
+export { writePerformanceLog } from './utils/writePerformanceLog';
 export * as dataLayers from './querying/layers';
 
 export { SceneObjectBase, useSceneObjectState } from './core/SceneObjectBase';
@@ -53,9 +55,7 @@ export type {
   SceneQueryControllerLike,
   SceneQueryControllerEntryType,
   SceneQueryControllerEntry,
-  SceneInteractionProfileEvent,
 } from './behaviors/types';
-export { SceneRenderProfiler } from './behaviors/SceneRenderProfiler';
 
 export * from './variables/types';
 export { VariableDependencyConfig } from './variables/VariableDependencyConfig';

packages/scenes/src/behaviors/LongFrameDetector.ts → packages/scenes/src/performance/LongFrameDetector.ts

@@ -1,4 +1,4 @@
-import { writeSceneLog } from '../utils/writeSceneLog';
+import { writePerformanceLog } from '../utils/writePerformanceLog';
 
 const LONG_FRAME_THRESHOLD = 50; // Threshold for both LoAF and manual tracking (ms)
 
@@ -49,7 +49,7 @@ export class LongFrameDetector {
    */
   public start(callback: LongFrameCallback): void {
     if (this.#isTracking) {
-      writeSceneLog('LongFrameDetector', 'Already tracking frames, stopping previous session');
+      writePerformanceLog('LFD', 'Already tracking frames, stopping previous session');
       this.stop();
     }
 
@@ -62,8 +62,8 @@ export class LongFrameDetector {
       this.startManualFrameTracking();
     }
 
-    writeSceneLog(
-      'LongFrameDetector',
+    writePerformanceLog(
+      'LFD',
       `Started tracking with ${
         this.isLoAFAvailable() ? 'LoAF API' : 'manual'
       } method, threshold: ${LONG_FRAME_THRESHOLD}ms`
@@ -99,7 +99,7 @@ export class LongFrameDetector {
    */
   private startLoAFTracking(): void {
     if (!this.isLoAFAvailable()) {
-      writeSceneLog('LongFrameDetector', 'LoAF API not available, falling back to manual tracking');
+      writePerformanceLog('LFD', 'LoAF API not available, falling back to manual tracking');
       this.startManualFrameTracking();
       return;
     }
@@ -138,13 +138,13 @@ export class LongFrameDetector {
             }
           }
 
-          writeSceneLog('LongFrameDetector', `Long frame detected (LoAF): ${entry.duration}ms at ${entry.startTime}ms`);
+          writePerformanceLog('LFD', `Long frame detected (LoAF): ${entry.duration}ms at ${entry.startTime}ms`);
         }
       });
 
       this.#loafObserver.observe({ type: 'long-animation-frame', buffered: false });
     } catch (error) {
-      writeSceneLog('LongFrameDetector', 'Failed to start LoAF tracking, falling back to manual:', error);
+      writePerformanceLog('LFD', 'Failed to start LoAF tracking, falling back to manual:', error);
       this.startManualFrameTracking();
     }
   }
@@ -156,7 +156,7 @@ export class LongFrameDetector {
     if (this.#loafObserver) {
       this.#loafObserver.disconnect();
       this.#loafObserver = null;
-      writeSceneLog('LongFrameDetector', 'Stopped LoAF tracking');
+      writePerformanceLog('LFD', 'Stopped LoAF tracking');
     }
   }
 
@@ -175,7 +175,7 @@ export class LongFrameDetector {
     if (this.#frameTrackingId) {
       cancelAnimationFrame(this.#frameTrackingId);
       this.#frameTrackingId = null;
-      writeSceneLog('LongFrameDetector', 'Stopped manual frame tracking');
+      writePerformanceLog('LFD', 'Stopped manual frame tracking');
     }
   }
 
@@ -222,8 +222,8 @@ export class LongFrameDetector {
         }
       }
 
-      writeSceneLog(
-        'LongFrameDetector',
+      writePerformanceLog(
+        'LFD',
         `Long frame detected (manual): ${frameLength}ms (threshold: ${LONG_FRAME_THRESHOLD}ms)`
       );
     }

packages/scenes/src/performance/PanelProfilingManager.ts

@@ -0,0 +1,90 @@
+import { Unsubscribable } from 'rxjs';
+import { VizPanel } from '../components/VizPanel/VizPanel';
+import { VizPanelRenderProfiler } from './VizPanelRenderProfiler';
+import { SceneObject } from '../core/types';
+import { sceneGraph } from '../core/sceneGraph';
+
+export interface PanelProfilingConfig {
+  watchStateKey?: string; // State property to watch for structural changes (e.g., 'body', 'children')
+}
+
+/**
+ * Manages VizPanelRenderProfiler instances for all panels in a scene object.
+ * Extracted from DashboardPanelProfilingBehavior to allow composition with SceneRenderProfiler.
+ */
+export class PanelProfilingManager {
+  private _sceneObject?: SceneObject;
+  private _subscriptions: Unsubscribable[] = [];
+
+  public constructor(private _config: PanelProfilingConfig) {}
+
+  /**
+   * Attach panel profiling to a scene object
+   */
+  public attachToScene(sceneObject: SceneObject) {
+    this._sceneObject = sceneObject;
+
+    // Subscribe to scene state changes to add profilers to new panels
+    const subscription = sceneObject.subscribeToState((newState: any, prevState: any) => {
+      // If watchStateKey is specified, only react to changes in that specific property
+      if (this._config.watchStateKey) {
+        if (newState[this._config.watchStateKey] !== prevState[this._config.watchStateKey]) {
+          this._attachProfilersToPanels();
+        }
+      } else {
+        // Fallback: react to any state change
+        this._attachProfilersToPanels();
+      }
+    });
+
+    this._subscriptions.push(subscription);
+
+    // Attach profilers to existing panels
+    this._attachProfilersToPanels();
+  }
+
+  /**
+   * Attach VizPanelRenderProfiler to a specific panel if it doesn't already have one
+   * @param panel - The VizPanel to attach profiling to
+   */
+  public attachProfilerToPanel(panel: VizPanel): void {
+    // Check if profiler already exists
+    const existingProfiler = panel.state.$behaviors?.find((b) => b instanceof VizPanelRenderProfiler);
+
+    if (existingProfiler) {
+      return; // Already has a profiler
+    }
+
+    // Add profiler behavior
+    const profiler = new VizPanelRenderProfiler();
+
+    panel.setState({
+      $behaviors: [...(panel.state.$behaviors || []), profiler],
+    });
+  }
+
+  /**
+   * Attach VizPanelRenderProfiler to all VizPanels that don't already have one
+   */
+  private _attachProfilersToPanels() {
+    if (!this._sceneObject) {
+      return;
+    }
+
+    // Use scene graph to find all VizPanels in the scene
+    const panels = sceneGraph.findAllObjects(this._sceneObject, (obj) => obj instanceof VizPanel) as VizPanel[];
+
+    panels.forEach((panel) => {
+      this.attachProfilerToPanel(panel);
+    });
+  }
+
+  /**
+   * Clean up subscriptions and references
+   */
+  public cleanup() {
+    this._subscriptions.forEach((sub) => sub.unsubscribe());
+    this._subscriptions = [];
+    this._sceneObject = undefined;
+  }
+}