feat(overlay): Profile Tree (#857)

Closes #694.

https://github.com/user-attachments/assets/95ad4cd0-2fe2-4557-8f6d-4b7f67afb3b5

Author: Shubhdeep12

.changeset/purple-emus-jump.md

@@ -0,0 +1,5 @@
+---
+"@spotlightjs/overlay": minor
+---
+
+- Added support to visualize Profile in specific Trace

packages/overlay/package.json

@@ -54,6 +54,7 @@
     "eslint-plugin-react-refresh": "^0.4.12",
     "happy-dom": "^15.10.2",
     "magic-string": "^0.30.11",
+    "nanovis": "^0.1.3",
     "platformicons": "^7.0.4",
     "react": "^18.3.1",
     "react-diff-viewer-continued": "^3.4.0",

packages/overlay/src/index.css

@@ -14,6 +14,10 @@
   --color-primary-800: #3730a3;
   --color-primary-900: #312e81;
   --color-primary-950: #1e1b4b;
+
+  --color-frame-application: #d0d1f5;
+  --color-frame-system: #ffe0e4;
+  --color-frame-unknown: #f3f4f6;
 }
 
 .spotlight-fullscreen-blur {

packages/overlay/src/integrations/sentry/components/traces/TraceDetails/components/TraceProfileTree.tsx

@@ -0,0 +1,184 @@
+import type { TreeNode } from "nanovis";
+import { useEffect, useRef, useState } from "react";
+import { FRAME_TYPES } from "~/integrations/sentry/constants/profile";
+import useMouseTracking from "~/integrations/sentry/hooks/useMouseTracking";
+import type { NanovisTreeNode } from "~/integrations/sentry/types";
+import { cn } from "~/lib/cn";
+import type { SentryProfileWithTraceMeta } from "../../../../store/types";
+import { convertSentryProfileToNormalizedTree } from "../../../../utils/profileTree";
+
+interface NanovisVisualization {
+  el: HTMLElement;
+  events: {
+    on(event: "select" | "hover", callback: (node: NanovisTreeNode) => void): void;
+  };
+}
+
+type VisualizationType = "flame" | "treemap" | "sunburst";
+
+interface TraceProfileTreeProps {
+  profile: SentryProfileWithTraceMeta;
+}
+
+const FlamegraphLegend = () => {
+  return (
+    <div className="flex items-center gap-4">
+      {FRAME_TYPES.map(({ label, color }) => (
+        <span key={label} className="flex items-center gap-1 text-sm">
+          <span className={cn("inline-block size-4 rounded-xs", color)} />
+          {label}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export default function TraceProfileTree({ profile }: TraceProfileTreeProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const visualizationRef = useRef<NanovisVisualization | null>(null);
+  const [visualizationType, setVisualizationType] = useState<VisualizationType>("flame");
+  const [hoveredNode, setHoveredNode] = useState<NanovisTreeNode | null>(null);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+
+    (async () => {
+      if (!containerRef.current || !profile) return;
+
+      const tree = await convertSentryProfileToNormalizedTree(profile);
+
+      const nanovisModule = await import("nanovis");
+      const { Flamegraph, Treemap, Sunburst } = nanovisModule;
+
+      if (visualizationRef.current) {
+        visualizationRef.current.el.remove();
+        visualizationRef.current = null;
+      }
+
+      const options = {
+        getColor: (node: TreeNode<unknown>) => node.color,
+      };
+
+      let visualization: NanovisVisualization;
+      switch (visualizationType) {
+        case "treemap":
+          visualization = new Treemap(tree, options) as NanovisVisualization;
+          break;
+        case "sunburst":
+          visualization = new Sunburst(tree, options) as NanovisVisualization;
+          break;
+        default:
+          visualization = new Flamegraph(tree, options) as NanovisVisualization;
+          break;
+      }
+
+      visualizationRef.current = visualization;
+
+      visualization.events.on("select", (node: NanovisTreeNode) => {
+        console.log("Selected node:", node);
+      });
+
+      visualization.events.on("hover", (node: NanovisTreeNode | null) => {
+        setHoveredNode(node);
+      });
+
+      if (containerRef.current) {
+        containerRef.current.appendChild(visualization.el);
+      }
+      window.addEventListener("mousemove", handleMouseMove);
+    })();
+
+    return () => {
+      if (visualizationRef.current) {
+        visualizationRef.current.el.remove();
+        visualizationRef.current = null;
+      }
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [profile, visualizationType]);
+
+  if (!profile) {
+    return <div className="text-primary-300 px-6 py-4">No profile data available</div>;
+  }
+
+  const getVisualizationName = (type: VisualizationType): string => {
+    switch (type) {
+      case "flame":
+        return "Flamegraph";
+      case "treemap":
+        return "Treemap";
+      case "sunburst":
+        return "Sunburst";
+      default:
+        return "Flamegraph";
+    }
+  };
+
+  const mouseTrackingProps = useMouseTracking({
+    elem: containerRef,
+    onPositionChange: args => {
+      if (args) {
+        const { left, top } = args;
+        setMousePosition({ x: left, y: top });
+      }
+    },
+  });
+
+  return (
+    <div className="w-full h-full relative p-4">
+      <div className="mb-4">
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-lg font-semibold text-primary-200">Profile</h3>
+          <div className="flex items-center space-x-2">
+            <span className="text-sm text-primary-400">View:</span>
+            <div className="flex bg-primary-800 rounded-md p-1">
+              {(["flame", "treemap", "sunburst"] as VisualizationType[]).map(type => (
+                <button
+                  key={type}
+                  type="button"
+                  onClick={() => setVisualizationType(type)}
+                  className={`px-3 py-1 text-xs rounded-md transition-colors ${
+                    visualizationType === type
+                      ? "bg-primary-600 text-white"
+                      : "text-primary-300 hover:text-primary-200 hover:bg-primary-700"
+                  }`}
+                >
+                  {getVisualizationName(type)}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <p className="text-sm text-primary-400">
+          Visual representation of profile using {getVisualizationName(visualizationType).toLowerCase()}
+        </p>
+      </div>
+      <FlamegraphLegend />
+      <div onMouseLeave={() => setHoveredNode(null)}>
+        <div
+          ref={containerRef}
+          className="w-full border border-primary-700 rounded-md overflow-auto p-2 my-4"
+          {...mouseTrackingProps}
+        >
+          {hoveredNode && (
+            <div
+              className="bg-primary-900 border-primary-400 absolute flex flex-col min-w-[200px] rounded-lg border p-3 shadow-lg z-50"
+              style={{
+                left: mousePosition.x + 12,
+                top: mousePosition.y + 12,
+                pointerEvents: "none",
+              }}
+            >
+              <span className="text-primary-200 font-semibold">{hoveredNode.text}</span>
+              <span className="text-primary-400 text-xs">{hoveredNode.subtext}</span>
+              <span className="text-primary-400 text-xs">Total Time: {hoveredNode.size}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

packages/overlay/src/integrations/sentry/components/traces/TraceDetails/index.tsx

@@ -5,6 +5,7 @@ import { createTab } from "~/integrations/sentry/utils/tabs";
 
 import { useSentryEvents } from "~/integrations/sentry/data/useSentryEvents";
 import { isLocalTrace } from "~/integrations/sentry/store/helpers";
+import useSentryStore from "~/integrations/sentry/store/store";
 import type { Trace } from "~/integrations/sentry/types";
 import { getFormattedDuration } from "~/integrations/sentry/utils/duration";
 import { isErrorEvent } from "~/integrations/sentry/utils/sentry";
@@ -14,6 +15,7 @@ import AITraceSplitView from "../../insights/aiTraces/AITraceSplitView";
 import { hasAISpans } from "../../insights/aiTraces/sdks/aiLibraries";
 import LogsList from "../../log/LogsList";
 import DateTime from "../../shared/DateTime";
+import TraceProfileTree from "./components/TraceProfileTree";
 
 type TraceDetailsProps = {
   trace: Trace;
@@ -66,6 +68,7 @@ export default function TraceDetails({ trace, aiConfig }: TraceDetailsProps) {
   }
 
   const events = useSentryEvents(trace.trace_id);
+  const profile = useSentryStore.getState().getProfileByTraceId(trace.trace_id);
   const errorCount = useMemo(
     () =>
       events.filter(
@@ -86,6 +89,10 @@ export default function TraceDetails({ trace, aiConfig }: TraceDetailsProps) {
     }),
   ];
 
+  if (profile) {
+    tabs.push(createTab("profileTree", "Profile"));
+  }
+
   return (
     <div className="flex h-full flex-col">
       {aiConfig.mode && hasAI ? (
@@ -99,6 +106,7 @@ export default function TraceDetails({ trace, aiConfig }: TraceDetailsProps) {
               <Route path="errors" element={<EventList traceId={trace.trace_id} />} />
               <Route path="logs" element={<LogsList traceId={trace.trace_id} />} />
               <Route path="logs/:id" element={<LogsList traceId={trace.trace_id} />} />
+              {profile && <Route path="profileTree" element={<TraceProfileTree profile={profile} />} />}
               {/* Default tab */}
               <Route path="*" element={<Navigate to="context" replace />} />
             </Routes>

packages/overlay/src/integrations/sentry/constants.ts

@@ -1,3 +1,5 @@
+import type { NanovisTreeNode } from "./types";
+
 export const DB_SPAN_REGEX = /^db(?:\.[A-Za-z]+)*$/;
 
 export const AGGREGATE_CALL_PROFILES_SORT_KEYS = {
@@ -356,3 +358,15 @@ export const LOGS_HEADERS = [
     align: "right",
   },
 ];
+
+export const SAMPLE_EMPTY_PROFILE_FRAME: NanovisTreeNode = Object.freeze({
+  id: "empty",
+  text: "No profile data",
+  subtext: "",
+  sizeSelf: 0,
+  size: 0,
+  children: [],
+  color: "#6b7280",
+  frameId: -1,
+  sampleCount: 0,
+});

packages/overlay/src/integrations/sentry/constants/profile.ts

@@ -0,0 +1,10 @@
+export const FRAME_COLOR = {
+  application: "#d0d1f5",
+  system: "#ffe0e4",
+  unknown: "#f3f4f6",
+};
+
+export const FRAME_TYPES = [
+  { label: "Application Frame", color: "bg-frame-application" },
+  { label: "System Frame", color: "bg-frame-system" },
+];

packages/overlay/src/integrations/sentry/types.ts

@@ -1,4 +1,5 @@
 import type { EventEnvelopeHeaders, Measurements, SerializedLog } from "@sentry/core";
+import type { ColorValue } from "nanovis";
 
 export type TraceId = string;
 export type SpanId = string;
@@ -369,3 +370,66 @@ export type AILibraryHandler = {
   getTypeBadge: (trace: SpotlightAITrace) => string;
   getTokensDisplay: (trace: SpotlightAITrace) => string;
 };
+
+/**
+ * A generic tree node used to represent hierarchical performance data
+ * for visualizations like flamegraphs, sunbursts, and treemaps.
+ *
+ * Each node corresponds to a stack frame in a profiling trace and includes
+ * metrics like self time, total time, and sample count to support rendering
+ * and interactive analysis.
+ */
+export type NanovisTreeNode = {
+  /**
+   * Unique identifier for the node, typically derived from frame ID and depth.
+   */
+  id: string;
+
+  /**
+   * Display text (label) for this node — usually the function name.
+   */
+  text: string;
+
+  /**
+   * Additional text shown under the label — e.g., file path, line number.
+   */
+  subtext: string;
+
+  /**
+   * Number of samples where this frame was the leaf (exclusive time).
+   * Represents how much time this function spent doing its own work.
+   */
+  sizeSelf: number;
+
+  /**
+   * Total number of samples passing through this frame, including children.
+   * This is the inclusive time (self + all descendants).
+   */
+  size: number;
+
+  /**
+   * Child nodes (functions called by this frame).
+   */
+  children: NanovisTreeNode[];
+
+  /**
+   * Color used for rendering this node in the flamegraph.
+   */
+  color: ColorValue;
+
+  /**
+   * Metadata about the frame (function name, file, etc.).
+   * Optional: may be undefined for root or placeholder nodes.
+   */
+  frame?: EventFrame;
+
+  /**
+   * ID of the frame this node represents. Useful for lookups and deduplication.
+   */
+  frameId: number;
+
+  /**
+   * Total number of samples that included this frame.
+   */
+  sampleCount: number;
+};