chore: use orderbyasc instead of order by

Since group by is faster is enough no. of threads are used

conf/example.yaml

@@ -440,6 +440,17 @@ traces:
     max_depth_to_auto_expand: 5
     # Threshold below which all spans are returned without windowing.
     max_limit_to_select_all_spans: 10000
+  flamegraph:
+    # Maximum number of BFS depth levels included in a windowed response.
+    max_selected_levels: 50
+    # Maximum spans per level before sampling is applied.
+    max_spans_per_level: 100
+    # Number of highest-latency spans always included when sampling a level.
+    sampling_top_latency_count: 5
+    # Number of timestamp buckets used for uniform sampling within a level.
+    sampling_bucket_count: 50
+    # Threshold below which all spans are returned without windowing or sampling.
+    select_all_spans_limit: 100000
 
 ##################### Authz #################################
 authz:

docs/api/openapi.yml

@@ -6516,6 +6516,70 @@ components:
       - attribute
       - resource
       type: string
+    SpantypesFlamegraphSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          type: object
+        durationNano:
+          minimum: 0
+          type: integer
+        event:
+          items:
+            $ref: '#/components/schemas/SpantypesEvent'
+          type: array
+        hasError:
+          type: boolean
+        level:
+          format: int64
+          type: integer
+        name:
+          type: string
+        parentSpanId:
+          type: string
+        resource:
+          additionalProperties:
+            type: string
+          type: object
+        spanId:
+          type: string
+        timestamp:
+          minimum: 0
+          type: integer
+      required:
+      - spanId
+      - parentSpanId
+      - timestamp
+      - durationNano
+      - hasError
+      - name
+      - level
+      - event
+      - attributes
+      - resource
+      type: object
+    SpantypesGettableFlamegraphTrace:
+      properties:
+        endTimestampMillis:
+          format: int64
+          type: integer
+        hasMore:
+          type: boolean
+        spans:
+          items:
+            items:
+              $ref: '#/components/schemas/SpantypesFlamegraphSpan'
+            type: array
+          type: array
+        startTimestampMillis:
+          format: int64
+          type: integer
+      required:
+      - spans
+      - startTimestampMillis
+      - endTimestampMillis
+      - hasMore
+      type: object
     SpantypesGettableSpanMapperGroups:
       properties:
         items:
@@ -6581,6 +6645,15 @@ components:
         traceId:
           type: string
       type: object
+    SpantypesPostableFlamegraph:
+      properties:
+        selectFields:
+          items:
+            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          type: array
+        selectedSpanId:
+          type: string
+      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -20027,6 +20100,75 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
+  /api/v3/traces/{traceID}/flamegraph:
+    post:
+      deprecated: false
+      description: Returns the flamegraph view of spans for a given trace ID.
+      operationId: GetFlamegraph
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableFlamegraph'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableFlamegraphTrace'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get flamegraph view for a trace
+      tags:
+      - tracedetail
   /api/v3/traces/{traceID}/waterfall:
     post:
       deprecated: false

frontend/jest.setup.ts

@@ -41,15 +41,6 @@ if (typeof window.IntersectionObserver === 'undefined') {
 	(window as any).IntersectionObserver = IntersectionObserverMock;
 }
 
-if (typeof window.ResizeObserver === 'undefined') {
-	class ResizeObserverMock {
-		observe(): void {}
-		unobserve(): void {}
-		disconnect(): void {}
-	}
-	(window as any).ResizeObserver = ResizeObserverMock;
-}
-
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -7675,6 +7675,77 @@ export enum SpantypesFieldContextDTO {
 	attribute = 'attribute',
 	resource = 'resource',
 }
+export type SpantypesFlamegraphSpanDTOAttributes = { [key: string]: unknown };
+
+export type SpantypesFlamegraphSpanDTOResource = { [key: string]: string };
+
+export interface SpantypesFlamegraphSpanDTO {
+	/**
+	 * @type object
+	 */
+	attributes: SpantypesFlamegraphSpanDTOAttributes;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	durationNano: number;
+	/**
+	 * @type array
+	 */
+	event: SpantypesEventDTO[];
+	/**
+	 * @type boolean
+	 */
+	hasError: boolean;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	level: number;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	parentSpanId: string;
+	/**
+	 * @type object
+	 */
+	resource: SpantypesFlamegraphSpanDTOResource;
+	/**
+	 * @type string
+	 */
+	spanId: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	timestamp: number;
+}
+
+export interface SpantypesGettableFlamegraphTraceDTO {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	endTimestampMillis: number;
+	/**
+	 * @type boolean
+	 */
+	hasMore: boolean;
+	/**
+	 * @type array
+	 */
+	spans: SpantypesFlamegraphSpanDTO[][];
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	startTimestampMillis: number;
+}
+
 export type SpantypesSpanMapperGroupConditionDTOAnyOf = {
 	/**
 	 * @type array,null
@@ -7976,6 +8047,17 @@ export interface SpantypesGettableWaterfallTraceDTO {
 	uncollapsedSpans?: string[] | null;
 }
 
+export interface SpantypesPostableFlamegraphDTO {
+	/**
+	 * @type array
+	 */
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	/**
+	 * @type string
+	 */
+	selectedSpanId?: string;
+}
+
 export enum SpantypesSpanMapperOperationDTO {
 	move = 'move',
 	copy = 'copy',
@@ -10277,6 +10359,17 @@ export type GetHosts200 = {
 	status: string;
 };
 
+export type GetFlamegraphPathParameters = {
+	traceID: string;
+};
+export type GetFlamegraph200 = {
+	data: SpantypesGettableFlamegraphTraceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetWaterfallPathParameters = {
 	traceID: string;
 };

frontend/src/api/generated/services/tracedetail/index.ts

@@ -12,6 +12,8 @@ import type {
 } from 'react-query';
 
 import type {
+	GetFlamegraph200,
+	GetFlamegraphPathParameters,
 	GetTraceAggregations200,
 	GetTraceAggregationsPathParameters,
 	GetWaterfall200,
@@ -19,6 +21,7 @@ import type {
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
+	SpantypesPostableFlamegraphDTO,
 	SpantypesPostableTraceAggregationsDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
@@ -126,6 +129,105 @@ export const useGetTraceAggregations = <
 > => {
 	return useMutation(getGetTraceAggregationsMutationOptions(options));
 };
+/**
+ * Returns the flamegraph view of spans for a given trace ID.
+ * @summary Get flamegraph view for a trace
+ */
+export const getFlamegraph = (
+	{ traceID }: GetFlamegraphPathParameters,
+	spantypesPostableFlamegraphDTO?: BodyType<SpantypesPostableFlamegraphDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetFlamegraph200>({
+		url: `/api/v3/traces/${traceID}/flamegraph`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: spantypesPostableFlamegraphDTO,
+		signal,
+	});
+};
+
+export const getGetFlamegraphMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getFlamegraph>>,
+		TError,
+		{
+			pathParams: GetFlamegraphPathParameters;
+			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getFlamegraph>>,
+	TError,
+	{
+		pathParams: GetFlamegraphPathParameters;
+		data?: BodyType<SpantypesPostableFlamegraphDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['getFlamegraph'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof getFlamegraph>>,
+		{
+			pathParams: GetFlamegraphPathParameters;
+			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return getFlamegraph(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetFlamegraphMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getFlamegraph>>
+>;
+export type GetFlamegraphMutationBody =
+	| BodyType<SpantypesPostableFlamegraphDTO>
+	| undefined;
+export type GetFlamegraphMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get flamegraph view for a trace
+ */
+export const useGetFlamegraph = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getFlamegraph>>,
+		TError,
+		{
+			pathParams: GetFlamegraphPathParameters;
+			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getFlamegraph>>,
+	TError,
+	{
+		pathParams: GetFlamegraphPathParameters;
+		data?: BodyType<SpantypesPostableFlamegraphDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getGetFlamegraphMutationOptions(options));
+};
 /**
  * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
  * @summary Get waterfall view for a trace

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef } from 'react';
 import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
-import UPlotLegend from 'lib/uPlotV2/components/Legend/UPlotLegend';
+import Legend from 'lib/uPlotV2/components/Legend/Legend';
 import {
 	LegendPosition,
 	TooltipRenderArgs,
@@ -47,7 +47,7 @@ export default function ChartWrapper({
 				return null;
 			}
 			return (
-				<UPlotLegend
+				<Legend
 					config={config}
 					position={legendConfig.position}
 					averageLegendWidth={averageLegendWidth}

frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.module.scss

@@ -1,67 +0,0 @@
-.pieChartWrapper {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	overflow: hidden;
-}
-
-.pieChartNoData {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-	font-size: 14px;
-}
-
-// Size is set inline from the computed chart dimensions (mirrors the uPlot
-// chart/legend split); this just centres the donut within that box.
-.pieChartContainer {
-	flex: 0 0 auto;
-	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.pieChartTooltip {
-	padding: 8px 12px;
-	border-radius: 4px;
-	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-	background-color: var(--l2-background) !important;
-	border: 1px solid var(--l2-border) !important;
-	z-index: 9999;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-.pieTooltipContent {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-}
-
-.pieChartIndicator {
-	width: 12px;
-	height: 12px;
-	border-radius: 2px;
-	margin-right: 8px;
-	display: inline-block;
-}
-
-.tooltipValue {
-	font-weight: bold;
-	margin-top: 4px;
-}
-
-// Wraps the shared chart Legend. Its width/height are set inline from the
-// computed chart dimensions, so the VirtuosoGrid inside gets the same bounded
-// box (right column / bottom rows) the uPlot charts use.
-.pieLegend {
-	flex: 0 0 auto;
-	min-height: 0;
-	min-width: 0;
-	padding: 8px;
-}

frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.tsx

@@ -1,241 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Group } from '@visx/group';
-import { Pie as VisxPie } from '@visx/shape';
-import { defaultStyles, useTooltip, useTooltipInPortal } from '@visx/tooltip';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { useResizeObserver } from 'hooks/useDimensions';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-
-import { PieChartProps, PieSlice } from '../types';
-import { calculateChartDimensions } from '../utils';
-
-import PieArc from './PieArc';
-import PieCenterLabel from './PieCenterLabel';
-import styles from './Pie.module.scss';
-import { usePieInteractions } from './usePieInteractions';
-import { getFillColor } from './utils';
-
-interface PieTooltipData {
-	label: string;
-	value: string;
-	color: string;
-}
-
-/**
- * Donut chart rendered with @visx. Splits its area into chart + legend with the
- * same `calculateChartDimensions` logic as the uPlot charts (right column /
- * up-to-two bottom rows), renders the shared chart Legend, and delegates the
- * arcs, centre total and interaction state to PieArc / PieCenterLabel /
- * usePieInteractions. Pure presentation — slices are pre-resolved by the caller.
- */
-export default function Pie({
-	data,
-	yAxisUnit,
-	decimalPrecision,
-	isDarkMode,
-	position = LegendPosition.BOTTOM,
-	id,
-	onSliceClick,
-	'data-testid': testId,
-}: PieChartProps): JSX.Element {
-	const {
-		active,
-		setActive,
-		visibleData,
-		legendItems,
-		focusedSeriesIndex,
-		onLegendClick,
-		onLegendMouseMove,
-		onLegendMouseLeave,
-	} = usePieInteractions(data, id);
-
-	const {
-		tooltipOpen,
-		tooltipLeft,
-		tooltipTop,
-		tooltipData,
-		hideTooltip,
-		showTooltip,
-	} = useTooltip<PieTooltipData>();
-
-	const { containerRef, TooltipInPortal } = useTooltipInPortal({
-		scroll: true,
-		detectBounds: true,
-	});
-
-	const wrapperRef = useRef<HTMLDivElement>(null);
-	const { width: containerWidth, height: containerHeight } =
-		useResizeObserver(wrapperRef);
-
-	// Reuse the uPlot chart/legend split so the donut + legend get the same area
-	// allocation (right column, or up-to-two bottom rows) as every other panel.
-	const dimensions = useMemo(
-		() =>
-			calculateChartDimensions({
-				containerWidth,
-				containerHeight,
-				legendConfig: { position },
-				seriesLabels: data.map((slice) => slice.label),
-			}),
-		[containerWidth, containerHeight, position, data],
-	);
-
-	const size = Math.min(dimensions.width, dimensions.height);
-	const radius = size * 0.35;
-	const innerRadius = radius * 0.6;
-	const totalValue = visibleData.reduce((sum, slice) => sum + slice.value, 0);
-	const labelColor = isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400;
-	const activeColor = active?.color ?? null;
-
-	const handleSliceEnter = useCallback(
-		(slice: PieSlice, centroidX: number, centroidY: number): void => {
-			showTooltip({
-				tooltipData: {
-					label: slice.label,
-					value: getYAxisFormattedValue(
-						slice.value.toString(),
-						yAxisUnit || 'none',
-						decimalPrecision,
-					),
-					color: slice.color,
-				},
-				tooltipTop: centroidY + dimensions.height / 2,
-				tooltipLeft: centroidX + dimensions.width / 2,
-			});
-			setActive(slice);
-		},
-		[
-			showTooltip,
-			setActive,
-			yAxisUnit,
-			decimalPrecision,
-			dimensions.height,
-			dimensions.width,
-		],
-	);
-
-	const handleSliceLeave = useCallback((): void => {
-		hideTooltip();
-		setActive(null);
-	}, [hideTooltip, setActive]);
-
-	if (!data.length) {
-		return (
-			<div
-				ref={wrapperRef}
-				className={styles.pieChartWrapper}
-				data-testid={testId}
-			>
-				<div className={styles.pieChartNoData}>No data</div>
-			</div>
-		);
-	}
-
-	const isRightLegend = position === LegendPosition.RIGHT;
-
-	return (
-		<div
-			ref={wrapperRef}
-			className={styles.pieChartWrapper}
-			style={{ flexDirection: isRightLegend ? 'row' : 'column' }}
-			data-testid={testId}
-		>
-			<div
-				className={styles.pieChartContainer}
-				style={{ width: dimensions.width, height: dimensions.height }}
-			>
-				{size > 0 && (
-					<svg
-						width={dimensions.width}
-						height={dimensions.height}
-						ref={containerRef}
-					>
-						<Group top={dimensions.height / 2} left={dimensions.width / 2}>
-							<VisxPie
-								data={visibleData}
-								pieValue={(slice: PieSlice): number => slice.value}
-								outerRadius={radius}
-								innerRadius={innerRadius}
-								padAngle={0.01}
-								cornerRadius={3}
-								width={size}
-								height={size}
-							>
-								{(pie): JSX.Element[] =>
-									pie.arcs.map((arc) => (
-										<PieArc
-											key={`arc-${arc.data.label}-${arc.data.value}-${arc.startAngle.toFixed(
-												6,
-											)}`}
-											slice={arc.data}
-											arcPath={pie.path(arc) || ''}
-											centroid={pie.path.centroid(arc)}
-											startAngle={arc.startAngle}
-											endAngle={arc.endAngle}
-											radius={radius}
-											totalValue={totalValue}
-											yAxisUnit={yAxisUnit}
-											decimalPrecision={decimalPrecision}
-											labelColor={labelColor}
-											fill={getFillColor(arc.data.color, activeColor)}
-											onEnter={handleSliceEnter}
-											onLeave={handleSliceLeave}
-											onClick={onSliceClick}
-										/>
-									))
-								}
-							</VisxPie>
-							<PieCenterLabel
-								total={totalValue}
-								yAxisUnit={yAxisUnit}
-								decimalPrecision={decimalPrecision}
-								radius={radius}
-								innerRadius={innerRadius}
-								color={labelColor}
-							/>
-						</Group>
-					</svg>
-				)}
-				{tooltipOpen && tooltipData && (
-					<TooltipInPortal
-						top={tooltipTop}
-						left={tooltipLeft}
-						className={styles.pieChartTooltip}
-						style={{
-							...defaultStyles,
-							color: labelColor,
-						}}
-					>
-						<div
-							className={styles.pieChartIndicator}
-							style={{ background: tooltipData.color }}
-						/>
-						<div className={styles.pieTooltipContent}>
-							<span>{tooltipData.label}</span>
-							<span className={styles.tooltipValue}>{tooltipData.value}</span>
-						</div>
-					</TooltipInPortal>
-				)}
-			</div>
-			<div
-				className={styles.pieLegend}
-				style={{
-					width: dimensions.legendWidth,
-					height: dimensions.legendHeight,
-				}}
-			>
-				<Legend
-					items={legendItems}
-					position={position}
-					averageLegendWidth={dimensions.averageLegendWidth}
-					focusedSeriesIndex={focusedSeriesIndex}
-					onClick={onLegendClick}
-					onMouseMove={onLegendMouseMove}
-					onMouseLeave={onLegendMouseLeave}
-				/>
-			</div>
-		</div>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieArc.tsx

@@ -1,123 +0,0 @@
-import type { PrecisionOption } from 'components/Graph/types';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-
-import { PieSlice } from '../types';
-
-import { getArcGeometry } from './utils';
-
-// Slices below this share of the total don't get a leader label (too cramped).
-const MIN_LABEL_SHARE = 0.03;
-const MAX_LABEL_LENGTH = 15;
-
-interface PieArcProps {
-	slice: PieSlice;
-	/** SVG path `d` for the arc, from the visx pie generator. */
-	arcPath: string;
-	/** Arc centroid `[x, y]`, used to anchor the leader line and tooltip. */
-	centroid: [number, number];
-	startAngle: number;
-	endAngle: number;
-	radius: number;
-	/** Sum of visible slice values — drives the show-label threshold. */
-	totalValue: number;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-	labelColor: string;
-	/** Resolved fill (already dimmed if another slice is active). */
-	fill: string;
-	onEnter: (slice: PieSlice, centroidX: number, centroidY: number) => void;
-	onLeave: () => void;
-	onClick?: (slice: PieSlice) => void;
-}
-
-/**
- * A single donut slice: the arc path plus, for non-tiny slices, a leader line
- * out to an external label + value. Pure presentation — interaction is
- * delegated to the `onEnter`/`onLeave`/`onClick` callbacks.
- */
-export default function PieArc({
-	slice,
-	arcPath,
-	centroid,
-	startAngle,
-	endAngle,
-	radius,
-	totalValue,
-	yAxisUnit,
-	decimalPrecision,
-	labelColor,
-	fill,
-	onEnter,
-	onLeave,
-	onClick,
-}: PieArcProps): JSX.Element {
-	const { label, value } = slice;
-	const [centroidX, centroidY] = centroid;
-	const { labelX, labelY, lineEndX, lineEndY, textAnchor } = getArcGeometry(
-		startAngle,
-		endAngle,
-		radius,
-	);
-
-	const displayValue = getYAxisFormattedValue(
-		value.toString(),
-		yAxisUnit || 'none',
-		decimalPrecision,
-	);
-	const shortenedLabel =
-		label.length > MAX_LABEL_LENGTH ? `${label.substring(0, 12)}...` : label;
-	const shouldShowLabel = value / totalValue > MIN_LABEL_SHARE;
-
-	return (
-		<g
-			onMouseEnter={(): void => onEnter(slice, centroidX, centroidY)}
-			onMouseLeave={onLeave}
-			onClick={(): void => onClick?.(slice)}
-		>
-			<path d={arcPath} fill={fill} />
-			{shouldShowLabel && (
-				<>
-					<line
-						x1={centroidX}
-						y1={centroidY}
-						x2={lineEndX}
-						y2={lineEndY}
-						stroke={labelColor}
-						strokeWidth={1}
-					/>
-					<line
-						x1={lineEndX}
-						y1={lineEndY}
-						x2={labelX}
-						y2={labelY}
-						stroke={labelColor}
-						strokeWidth={1}
-					/>
-					<text
-						x={labelX}
-						y={labelY - 8}
-						dy=".33em"
-						fill={labelColor}
-						fontSize={10}
-						textAnchor={textAnchor}
-						pointerEvents="none"
-					>
-						{shortenedLabel}
-					</text>
-					<text
-						x={labelX}
-						y={labelY + 8}
-						dy=".33em"
-						fill={labelColor}
-						fontSize={10}
-						fontWeight="bold"
-						textAnchor={textAnchor}
-						pointerEvents="none"
-					>
-						{displayValue}
-					</text>
-				</>
-			)}
-		</g>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieCenterLabel.tsx

@@ -1,57 +0,0 @@
-import type { PrecisionOption } from 'components/Graph/types';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-
-import { getScaledFontSize } from './utils';
-
-interface PieCenterLabelProps {
-	/** Sum of the visible slice values, shown in the donut hole. */
-	total: number;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-	radius: number;
-	innerRadius: number;
-	color: string;
-}
-
-/**
- * The total shown in the centre of the donut. Splits the formatted value into
- * its numeric part and unit so each can be sized independently, and scales the
- * numeric font down for long values so it never overflows the hole.
- */
-export default function PieCenterLabel({
-	total,
-	yAxisUnit,
-	decimalPrecision,
-	radius,
-	innerRadius,
-	color,
-}: PieCenterLabelProps): JSX.Element {
-	const formattedTotal = getYAxisFormattedValue(
-		total.toString(),
-		yAxisUnit || 'none',
-		decimalPrecision,
-	);
-	const matches = formattedTotal.match(/([\d.]+[KMB]?)(.*)$/);
-	const numericTotal = matches?.[1] || formattedTotal;
-	const unitTotal = matches?.[2]?.trim() || '';
-
-	const numericFontSize = getScaledFontSize({
-		text: numericTotal,
-		baseSize: radius * 0.3,
-		innerRadius,
-	});
-	const unitFontSize = numericFontSize * 0.5;
-
-	return (
-		<text textAnchor="middle" dominantBaseline="central" fill={color}>
-			<tspan fontSize={numericFontSize} fontWeight="bold">
-				{numericTotal}
-			</tspan>
-			{unitTotal && (
-				<tspan fontSize={unitFontSize} opacity={0.9} dx={2}>
-					{unitTotal}
-				</tspan>
-			)}
-		</text>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/Pie.test.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen, within } from '@testing-library/react';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-
-import { PieSlice } from '../../types';
-import Pie from '../Pie';
-
-jest.mock('hooks/useDimensions', () => ({
-	useResizeObserver: jest.fn().mockReturnValue({ width: 400, height: 300 }),
-}));
-
-jest.mock('components/Graph/yAxisConfig', () => ({
-	getYAxisFormattedValue: jest.fn((value: string) => value),
-}));
-
-// VirtuosoGrid only renders a window in jsdom; render every item so we can
-// assert on legend entries.
-jest.mock('react-virtuoso', () => ({
-	VirtuosoGrid: ({
-		data,
-		itemContent,
-	}: {
-		data: LegendItem[];
-		itemContent: (index: number, item: LegendItem) => React.ReactNode;
-	}): JSX.Element => (
-		<div data-testid="virtuoso-grid">
-			{data.map((item, index) => (
-				<div key={item.seriesIndex ?? index}>{itemContent(index, item)}</div>
-			))}
-		</div>
-	),
-}));
-
-const DATA: PieSlice[] = [
-	{ label: 'frontend', value: 100, color: '#aa0000' },
-	{ label: 'cart', value: 60, color: '#00aa00' },
-	{ label: 'checkout', value: 40, color: '#0000aa' },
-];
-
-function renderPie(
-	props: Partial<React.ComponentProps<typeof Pie>> = {},
-): void {
-	render(
-		<TooltipProvider>
-			<Pie data={DATA} isDarkMode={false} data-testid="pie" {...props} />
-		</TooltipProvider>,
-	);
-}
-
-describe('Pie', () => {
-	it('renders the "No data" state for empty data', () => {
-		render(
-			<TooltipProvider>
-				<Pie data={[]} isDarkMode={false} data-testid="pie" />
-			</TooltipProvider>,
-		);
-		expect(screen.getByText('No data')).toBeInTheDocument();
-	});
-
-	it('renders one arc per slice plus the legend entries and centre total', () => {
-		renderPie();
-
-		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
-		expect(svg.querySelectorAll('path')).toHaveLength(DATA.length);
-
-		const legend = screen.getByTestId('virtuoso-grid');
-		expect(within(legend).getByText('frontend')).toBeInTheDocument();
-		expect(within(legend).getByText('cart')).toBeInTheDocument();
-		expect(within(legend).getByText('checkout')).toBeInTheDocument();
-
-		// Centre total = 100 + 60 + 40 (formatter mocked to echo the value).
-		expect(screen.getByText('200')).toBeInTheDocument();
-	});
-
-	it('lays the legend out in a row for the right position and a column for bottom', () => {
-		const { rerender } = render(
-			<TooltipProvider>
-				<Pie
-					data={DATA}
-					isDarkMode={false}
-					position={LegendPosition.RIGHT}
-					data-testid="pie"
-				/>
-			</TooltipProvider>,
-		);
-		expect(screen.getByTestId('pie')).toHaveStyle({ flexDirection: 'row' });
-
-		rerender(
-			<TooltipProvider>
-				<Pie
-					data={DATA}
-					isDarkMode={false}
-					position={LegendPosition.BOTTOM}
-					data-testid="pie"
-				/>
-			</TooltipProvider>,
-		);
-		expect(screen.getByTestId('pie')).toHaveStyle({ flexDirection: 'column' });
-	});
-
-	it('hides a slice when its legend marker is clicked', () => {
-		renderPie();
-		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
-		expect(svg.querySelectorAll('path')).toHaveLength(3);
-
-		const marker = document.querySelector(
-			'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
-		) as HTMLElement;
-		fireEvent.click(marker);
-
-		// One slice hidden → one fewer arc drawn.
-		expect(svg.querySelectorAll('path')).toHaveLength(2);
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieArc.test.tsx

@@ -1,85 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import { PieSlice } from '../../types';
-import PieArc from '../PieArc';
-
-jest.mock('components/Graph/yAxisConfig', () => ({
-	// Echo the raw value so assertions are deterministic.
-	getYAxisFormattedValue: jest.fn((value: string) => value),
-}));
-
-const SLICE: PieSlice = { label: 'frontend', value: 50, color: '#f00' };
-
-function renderArc(props: Partial<React.ComponentProps<typeof PieArc>> = {}): {
-	onEnter: jest.Mock;
-	onLeave: jest.Mock;
-	onClick: jest.Mock;
-	container: HTMLElement;
-} {
-	const onEnter = jest.fn();
-	const onLeave = jest.fn();
-	const onClick = jest.fn();
-	const { container } = render(
-		<svg>
-			<PieArc
-				slice={SLICE}
-				arcPath="M0,0L1,1"
-				centroid={[10, 20]}
-				startAngle={0}
-				endAngle={Math.PI}
-				radius={100}
-				totalValue={100}
-				labelColor="#fff"
-				fill="#f00"
-				onEnter={onEnter}
-				onLeave={onLeave}
-				onClick={onClick}
-				{...props}
-			/>
-		</svg>,
-	);
-	return { onEnter, onLeave, onClick, container };
-}
-
-describe('PieArc', () => {
-	it('renders the arc path with the resolved fill', () => {
-		const { container } = renderArc();
-		const path = container.querySelector('path');
-		expect(path).toHaveAttribute('d', 'M0,0L1,1');
-		expect(path).toHaveAttribute('fill', '#f00');
-	});
-
-	it('shows the leader label + value for a slice above the threshold', () => {
-		renderArc(); // 50 / 100 = 0.5
-		expect(screen.getByText('frontend')).toBeInTheDocument();
-		expect(screen.getByText('50')).toBeInTheDocument();
-	});
-
-	it('hides the leader label for a slice below the 3% threshold', () => {
-		renderArc({ totalValue: 10000 }); // 50 / 10000 = 0.005
-		expect(screen.queryByText('frontend')).not.toBeInTheDocument();
-		// the arc path itself still renders
-		expect(screen.queryByText('50')).not.toBeInTheDocument();
-	});
-
-	it('truncates labels longer than 15 chars', () => {
-		renderArc({
-			slice: { label: 'a-really-long-service-name', value: 50, color: '#f00' },
-		});
-		expect(screen.getByText('a-really-lon...')).toBeInTheDocument();
-	});
-
-	it('fires onEnter with the slice + centroid, and onLeave / onClick', () => {
-		const { onEnter, onLeave, onClick, container } = renderArc();
-		const g = container.querySelector('g') as SVGGElement;
-
-		fireEvent.mouseEnter(g);
-		expect(onEnter).toHaveBeenCalledWith(SLICE, 10, 20);
-
-		fireEvent.mouseLeave(g);
-		expect(onLeave).toHaveBeenCalledTimes(1);
-
-		fireEvent.click(g);
-		expect(onClick).toHaveBeenCalledWith(SLICE);
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieCenterLabel.test.tsx

@@ -1,45 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-
-import PieCenterLabel from '../PieCenterLabel';
-
-jest.mock('components/Graph/yAxisConfig', () => ({
-	getYAxisFormattedValue: jest.fn(),
-}));
-
-const mockFormat = getYAxisFormattedValue as jest.MockedFunction<
-	typeof getYAxisFormattedValue
->;
-
-function renderInSvg(node: JSX.Element): ReturnType<typeof render> {
-	// PieCenterLabel returns an SVG <text>, so it needs an <svg> host.
-	return render(<svg>{node}</svg>);
-}
-
-describe('PieCenterLabel', () => {
-	const baseProps = {
-		total: 3700,
-		radius: 100,
-		innerRadius: 60,
-		color: '#fff',
-	};
-
-	it('renders the formatted total (numeric + unit suffix) as one numeric tspan when there is no separate unit', () => {
-		mockFormat.mockReturnValue('3.7K');
-		renderInSvg(<PieCenterLabel {...baseProps} />);
-		expect(screen.getByText('3.7K')).toBeInTheDocument();
-	});
-
-	it('splits the numeric part and the trailing unit into separate tspans', () => {
-		mockFormat.mockReturnValue('1.2 MB');
-		renderInSvg(<PieCenterLabel {...baseProps} />);
-		expect(screen.getByText('1.2')).toBeInTheDocument();
-		expect(screen.getByText('MB')).toBeInTheDocument();
-	});
-
-	it('passes the unit + precision through to the formatter', () => {
-		mockFormat.mockReturnValue('100');
-		renderInSvg(<PieCenterLabel {...baseProps} total={100} yAxisUnit="bytes" />);
-		expect(mockFormat).toHaveBeenCalledWith('100', 'bytes', undefined);
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/usePieInteractions.test.tsx

@@ -1,147 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import {
-	getStoredSeriesVisibility,
-	updateSeriesVisibilityToLocalStorage,
-} from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
-import type { MouseEvent } from 'react';
-
-import { PieSlice } from '../../types';
-import { usePieInteractions } from '../usePieInteractions';
-
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-);
-
-const mockGetStored = getStoredSeriesVisibility as jest.MockedFunction<
-	typeof getStoredSeriesVisibility
->;
-const mockUpdateStored =
-	updateSeriesVisibilityToLocalStorage as jest.MockedFunction<
-		typeof updateSeriesVisibilityToLocalStorage
-	>;
-
-const DATA: PieSlice[] = [
-	{ label: 'frontend', value: 100, color: '#a' },
-	{ label: 'cart', value: 60, color: '#b' },
-	{ label: 'checkout', value: 40, color: '#c' },
-];
-
-// Builds a fake legend click/move event: `e.target.closest('[data-legend-item-id]')`
-// resolves to the item at `index`, and `e.target.dataset.isLegendMarker` flags marker clicks.
-function legendEvent(
-	index: number | null,
-	isMarker = false,
-): MouseEvent<HTMLDivElement> {
-	const itemEl =
-		index == null ? null : { dataset: { legendItemId: String(index) } };
-	return {
-		target: {
-			closest: (): unknown => itemEl,
-			dataset: { isLegendMarker: isMarker ? 'true' : undefined },
-		},
-	} as unknown as MouseEvent<HTMLDivElement>;
-}
-
-describe('usePieInteractions', () => {
-	beforeEach(() => {
-		mockGetStored.mockReturnValue(null);
-		mockUpdateStored.mockReset();
-	});
-
-	it('starts with everything visible and nothing focused', () => {
-		const { result } = renderHook(() => usePieInteractions(DATA));
-
-		expect(result.current.visibleData).toStrictEqual(DATA);
-		expect(result.current.legendItems.map((i) => i.show)).toStrictEqual([
-			true,
-			true,
-			true,
-		]);
-		expect(result.current.focusedSeriesIndex).toBeNull();
-		expect(result.current.active).toBeNull();
-	});
-
-	describe('marker click (toggle one)', () => {
-		it('hides then unhides the clicked slice', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA, 'panel-1'));
-
-			act(() => result.current.onLegendClick(legendEvent(1, true)));
-
-			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
-			expect(result.current.legendItems[1].show).toBe(false);
-			expect(mockUpdateStored).toHaveBeenLastCalledWith('panel-1', [
-				{ label: 'frontend', show: true },
-				{ label: 'cart', show: false },
-				{ label: 'checkout', show: true },
-			]);
-
-			act(() => result.current.onLegendClick(legendEvent(1, true)));
-
-			expect(result.current.visibleData).toStrictEqual(DATA);
-			expect(result.current.legendItems[1].show).toBe(true);
-		});
-	});
-
-	describe('label click (isolate / reset)', () => {
-		it('isolates the clicked slice, then resets on a second click', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() => result.current.onLegendClick(legendEvent(0, false)));
-
-			expect(result.current.visibleData).toStrictEqual([DATA[0]]);
-			expect(result.current.legendItems.map((i) => i.show)).toStrictEqual([
-				true,
-				false,
-				false,
-			]);
-
-			act(() => result.current.onLegendClick(legendEvent(0, false)));
-
-			expect(result.current.visibleData).toStrictEqual(DATA);
-		});
-	});
-
-	describe('hover', () => {
-		it('focuses the hovered slice and clears on leave', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() => result.current.onLegendMouseMove(legendEvent(2)));
-			expect(result.current.active).toStrictEqual(DATA[2]);
-			expect(result.current.focusedSeriesIndex).toBe(2);
-
-			act(() => result.current.onLegendMouseLeave());
-			expect(result.current.active).toBeNull();
-			expect(result.current.focusedSeriesIndex).toBeNull();
-		});
-
-		it('does not focus a hidden slice', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() => result.current.onLegendClick(legendEvent(1, true))); // hide cart
-			act(() => result.current.onLegendMouseMove(legendEvent(1)));
-
-			expect(result.current.active).toBeNull();
-		});
-	});
-
-	describe('persistence', () => {
-		it('does not write to storage when no id is provided', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-			act(() => result.current.onLegendClick(legendEvent(0, true)));
-			expect(mockUpdateStored).not.toHaveBeenCalled();
-		});
-
-		it('rehydrates hidden slices from storage on mount (matched by label)', () => {
-			mockGetStored.mockReturnValue([
-				{ label: 'frontend', show: true },
-				{ label: 'cart', show: false },
-				{ label: 'checkout', show: true },
-			]);
-
-			const { result } = renderHook(() => usePieInteractions(DATA, 'panel-1'));
-
-			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
-			expect(result.current.legendItems[1].show).toBe(false);
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/utils.test.ts

@@ -1,101 +0,0 @@
-import {
-	getArcGeometry,
-	getFillColor,
-	getScaledFontSize,
-	lightenColor,
-} from '../utils';
-
-describe('Pie utils', () => {
-	describe('getScaledFontSize', () => {
-		it('returns the base size for empty text', () => {
-			expect(getScaledFontSize({ text: '', baseSize: 30, innerRadius: 100 })).toBe(
-				30,
-			);
-		});
-
-		it('does not scale short text (length <= 3)', () => {
-			// scaleFactor = max(0.3, 1) = 1 → baseSize, capped by innerRadius * 0.9.
-			expect(
-				getScaledFontSize({ text: '3.7', baseSize: 30, innerRadius: 100 }),
-			).toBe(30);
-		});
-
-		it('scales longer text down', () => {
-			// length 8 → scaleFactor = max(0.3, 1 - 5 * 0.09) = 0.55 → 30 * 0.55.
-			expect(
-				getScaledFontSize({ text: '12345678', baseSize: 30, innerRadius: 100 }),
-			).toBeCloseTo(16.5);
-		});
-
-		it('floors the scale factor at 0.3 for very long text', () => {
-			// length 20 → 1 - 17 * 0.09 < 0.3 → floored to 0.3 → 100 * 0.3.
-			expect(
-				getScaledFontSize({
-					text: '12345678901234567890',
-					baseSize: 100,
-					innerRadius: 1000,
-				}),
-			).toBeCloseTo(30);
-		});
-
-		it('caps the size at 90% of the inner radius', () => {
-			expect(
-				getScaledFontSize({ text: '3.7', baseSize: 200, innerRadius: 10 }),
-			).toBeCloseTo(9);
-		});
-	});
-
-	describe('getArcGeometry', () => {
-		it('places the label below for a slice centred at the top (angle 0)', () => {
-			const g = getArcGeometry(0, 0, 100);
-			expect(g.labelX).toBeCloseTo(0);
-			expect(g.labelY).toBeCloseTo(-130);
-			expect(g.lineEndX).toBeCloseTo(0);
-			expect(g.lineEndY).toBeCloseTo(-110);
-			// sin(0) is not > 0 → anchor end.
-			expect(g.textAnchor).toBe('end');
-		});
-
-		it('anchors to the start on the right half (angle pi/2)', () => {
-			const g = getArcGeometry(0, Math.PI, 100);
-			expect(g.labelX).toBeCloseTo(130);
-			expect(g.labelY).toBeCloseTo(0);
-			expect(g.textAnchor).toBe('start');
-		});
-
-		it('anchors to the end on the left half (angle 3pi/2)', () => {
-			const g = getArcGeometry(Math.PI, 2 * Math.PI, 100);
-			expect(g.labelX).toBeCloseTo(-130);
-			expect(g.textAnchor).toBe('end');
-		});
-	});
-
-	describe('lightenColor', () => {
-		it('converts a #rrggbb hex to rgba at the given opacity', () => {
-			expect(lightenColor('#ff0000', 0.4)).toBe('rgba(255, 0, 0, 0.4)');
-		});
-
-		it('accepts hex without a leading #', () => {
-			expect(lightenColor('00ff00', 0.4)).toBe('rgba(0, 255, 0, 0.4)');
-		});
-
-		it('returns the original colour when it is not parseable hex', () => {
-			expect(lightenColor('rgba(0,0,0,1)', 0.4)).toBe('rgba(0,0,0,1)');
-			expect(lightenColor('red', 0.4)).toBe('red');
-		});
-	});
-
-	describe('getFillColor', () => {
-		it('returns the colour unchanged when nothing is active', () => {
-			expect(getFillColor('#ff0000', null)).toBe('#ff0000');
-		});
-
-		it('returns the colour unchanged for the active slice', () => {
-			expect(getFillColor('#ff0000', '#ff0000')).toBe('#ff0000');
-		});
-
-		it('dims non-active slices to 40% opacity', () => {
-			expect(getFillColor('#00ff00', '#ff0000')).toBe('rgba(0, 255, 0, 0.4)');
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/Pie/usePieInteractions.ts

@@ -1,168 +0,0 @@
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import type { Dispatch, MouseEvent, SetStateAction } from 'react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import {
-	getStoredSeriesVisibility,
-	updateSeriesVisibilityToLocalStorage,
-} from '../../panels/utils/legendVisibilityUtils';
-import { PieSlice } from '../types';
-
-export interface UsePieInteractionsResult {
-	/** The hovered/focused slice (drives donut dimming + tooltip). */
-	active: PieSlice | null;
-	setActive: Dispatch<SetStateAction<PieSlice | null>>;
-	/** Slices currently shown (hidden ones removed). */
-	visibleData: PieSlice[];
-	/** Legend item per slice (`show` reflects hide state). */
-	legendItems: LegendItem[];
-	/** Index of the active slice for the legend's focus highlight, or null. */
-	focusedSeriesIndex: number | null;
-	onLegendClick: (e: MouseEvent<HTMLDivElement>) => void;
-	onLegendMouseMove: (e: MouseEvent<HTMLDivElement>) => void;
-	onLegendMouseLeave: () => void;
-}
-
-// Reads the slice index off the nearest `[data-legend-item-id]` ancestor of the
-// event target (the shared Legend tags each item with its seriesIndex).
-function getLegendIndex(e: MouseEvent<HTMLDivElement>): number | null {
-	const el = (e.target as HTMLElement | null)?.closest<HTMLElement>(
-		'[data-legend-item-id]',
-	);
-	const id = el?.dataset.legendItemId;
-	return id != null ? Number(id) : null;
-}
-
-/**
- * Pie interaction + derived state: hover/focus, slice hide/unhide (mirroring the
- * uPlot legend — marker toggles one, label isolates), and persistence of the
- * hidden set to localStorage (keyed by `id`, matched by label) so it survives
- * reloads. Returns the visible slices, legend items, focus index, and the
- * legend container handlers.
- */
-export function usePieInteractions(
-	data: PieSlice[],
-	id?: string,
-): UsePieInteractionsResult {
-	const [active, setActive] = useState<PieSlice | null>(null);
-	const [hiddenIndices, setHiddenIndices] = useState<Set<number>>(
-		() => new Set(),
-	);
-	const isolatedIndexRef = useRef<number | null>(null);
-
-	const legendItems = useMemo<LegendItem[]>(
-		() =>
-			data.map((slice, index) => ({
-				seriesIndex: index,
-				label: slice.label,
-				color: slice.color,
-				show: !hiddenIndices.has(index),
-			})),
-		[data, hiddenIndices],
-	);
-
-	// Hidden slices drop out so the remaining arcs + centre total recompute.
-	const visibleData = useMemo(
-		() => data.filter((_, index) => !hiddenIndices.has(index)),
-		[data, hiddenIndices],
-	);
-
-	// Rehydrate hide/unhide from localStorage (matched by label) whenever the
-	// data set changes — including first load and every refetch, since the store
-	// is the source of truth and toggles write back to it.
-	useEffect(() => {
-		if (!id || !data.length) {
-			return;
-		}
-		const stored = getStoredSeriesVisibility(id);
-		if (!stored) {
-			return;
-		}
-		const hidden = new Set<number>();
-		data.forEach((slice, index) => {
-			if (stored.find((s) => s.label === slice.label)?.show === false) {
-				hidden.add(index);
-			}
-		});
-		setHiddenIndices(hidden);
-	}, [id, data]);
-
-	// Apply a new hidden set and persist it (label + show) to localStorage.
-	const applyHidden = useCallback(
-		(hidden: Set<number>): void => {
-			setHiddenIndices(hidden);
-			if (id) {
-				updateSeriesVisibilityToLocalStorage(
-					id,
-					data.map((slice, index) => ({
-						label: slice.label,
-						show: !hidden.has(index),
-					})),
-				);
-			}
-		},
-		[id, data],
-	);
-
-	const onLegendMouseMove = useCallback(
-		(e: MouseEvent<HTMLDivElement>): void => {
-			const index = getLegendIndex(e);
-			// Don't focus/dim for hidden slices — they aren't on the donut.
-			setActive(index != null && !hiddenIndices.has(index) ? data[index] : null);
-		},
-		[data, hiddenIndices],
-	);
-
-	// Marker click toggles just that slice on/off; label click isolates it
-	// (clicking the isolated one again resets to all) — mirrors the uPlot legend.
-	const onLegendClick = useCallback(
-		(e: MouseEvent<HTMLDivElement>): void => {
-			const index = getLegendIndex(e);
-			if (index == null) {
-				return;
-			}
-			const isMarker = (e.target as HTMLElement).dataset.isLegendMarker;
-
-			if (isMarker) {
-				const next = new Set(hiddenIndices);
-				if (next.has(index)) {
-					next.delete(index);
-				} else {
-					next.add(index);
-				}
-				applyHidden(next);
-				return;
-			}
-
-			const isReset = isolatedIndexRef.current === index;
-			isolatedIndexRef.current = isReset ? null : index;
-			if (isReset) {
-				applyHidden(new Set());
-				return;
-			}
-			const next = new Set<number>();
-			data.forEach((_, i) => {
-				if (i !== index) {
-					next.add(i);
-				}
-			});
-			applyHidden(next);
-		},
-		[data, hiddenIndices, applyHidden],
-	);
-
-	const onLegendMouseLeave = useCallback((): void => setActive(null), []);
-
-	const focusedIndex = active ? data.indexOf(active) : -1;
-
-	return {
-		active,
-		setActive,
-		visibleData,
-		legendItems,
-		focusedSeriesIndex: focusedIndex >= 0 ? focusedIndex : null,
-		onLegendClick,
-		onLegendMouseMove,
-		onLegendMouseLeave,
-	};
-}

frontend/src/container/DashboardContainer/visualization/charts/Pie/utils.ts

@@ -1,110 +0,0 @@
-/**
- * Pure presentation helpers for the Pie chart. Kept out of the component file
- * so the renderer stays declarative (per the one-component-per-file rule).
- */
-
-interface ScaledFontSizeArgs {
-	text: string;
-	baseSize: number;
-	innerRadius: number;
-}
-
-/**
- * Shrinks the centre-total font as the text gets longer so it never overflows
- * the donut hole. Ported from the V1 PiePanelWrapper.
- */
-export function getScaledFontSize({
-	text,
-	baseSize,
-	innerRadius,
-}: ScaledFontSizeArgs): number {
-	if (!text) {
-		return baseSize;
-	}
-
-	const { length } = text;
-	// More aggressive scaling for very long numbers.
-	const scaleFactor = Math.max(0.3, 1 - (length - 3) * 0.09);
-	// Don't use more than 90% of the inner radius.
-	const maxSize = innerRadius * 0.9;
-
-	return Math.min(baseSize * scaleFactor, maxSize);
-}
-
-export interface ArcGeometry {
-	/** Outer point where the leader label sits. */
-	labelX: number;
-	labelY: number;
-	/** Elbow point where the leader line bends toward the label. */
-	lineEndX: number;
-	lineEndY: number;
-	/** Anchor the label left/right depending on which half of the circle it's in. */
-	textAnchor: 'start' | 'end';
-}
-
-/**
- * Computes the leader-line / label geometry for one arc from its angular span.
- * Pulled out of the render prop so the SVG markup stays declarative.
- */
-export function getArcGeometry(
-	startAngle: number,
-	endAngle: number,
-	radius: number,
-): ArcGeometry {
-	const angle = (startAngle + endAngle) / 2;
-	const labelRadius = radius * 1.3;
-	const lineEndRadius = radius * 1.1;
-	return {
-		labelX: Math.sin(angle) * labelRadius,
-		labelY: -Math.cos(angle) * labelRadius,
-		lineEndX: Math.sin(angle) * lineEndRadius,
-		lineEndY: -Math.cos(angle) * lineEndRadius,
-		textAnchor: Math.sin(angle) > 0 ? 'start' : 'end',
-	};
-}
-
-interface ParsedRgb {
-	r: number;
-	g: number;
-	b: number;
-}
-
-// Parses `#rrggbb` into its components. Returns null for anything else (e.g. an
-// already-rgba string), letting callers fall back to the original colour.
-function hexToRgb(color: string): ParsedRgb | null {
-	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
-	return result
-		? {
-				r: parseInt(result[1], 16),
-				g: parseInt(result[2], 16),
-				b: parseInt(result[3], 16),
-			}
-		: null;
-}
-
-/**
- * Returns an rgba() string for `color` at the given opacity. Used to dim the
- * non-hovered slices. Falls back to the original colour if it can't be parsed.
- */
-export function lightenColor(color: string, opacity: number): string {
-	const rgb = hexToRgb(color);
-	if (!rgb) {
-		return color;
-	}
-	return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
-}
-
-/**
- * Resolves the fill for a slice given the currently-hovered slice colour:
- * everything but the active slice dims to 40% opacity. With nothing hovered
- * (`activeColor === null`) every slice keeps its full colour.
- */
-export function getFillColor(
-	color: string,
-	activeColor: string | null,
-): string {
-	if (activeColor === null) {
-		return color;
-	}
-	return activeColor === color ? color : lightenColor(color, 0.4);
-}

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -3,14 +3,13 @@ import { PrecisionOption } from 'components/Graph/types';
 import {
 	IRenderTooltipFooterArgs,
 	LegendConfig,
-	LegendPosition,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import {
 	DashboardCursorSync,
 	SyncTooltipFilterMode,
-	ChartClickData,
+	TooltipClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
@@ -23,10 +22,10 @@ interface BaseChartProps {
 	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
 	pinKey?: string;
 	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
-	onClick?: (clickData: ChartClickData) => void;
+	onClick?: (clickData: TooltipClickData) => void;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	pinnedTooltipElement?: (clickData: ChartClickData) => React.ReactNode;
+	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
@@ -70,36 +69,3 @@ export type ChartProps =
 	| TimeSeriesChartProps
 	| BarChartProps
 	| HistogramChartProps;
-
-/**
- * One resolved pie/donut slice: a display label, its (already parsed) positive
- * numeric value, and the colour used for the arc + legend swatch.
- */
-export interface PieSlice {
-	label: string;
-	value: number;
-	color: string;
-}
-
-/**
- * Props for the Pie chart. Unlike the others above, Pie is NOT uPlot-based
- * (it renders with @visx), so it deliberately does not extend BaseChartProps /
- * UPlotBasedChartProps — it takes pre-resolved slices and self-measures its
- * draw area rather than receiving a uPlot config + aligned data.
- */
-export interface PieChartProps {
-	data: PieSlice[];
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-	isDarkMode: boolean;
-	/** Legend placement. Drives the chart-vs-legend layout. Default BOTTOM. */
-	position?: LegendPosition;
-	/**
-	 * Widget id used to persist per-slice hide/unhide state to localStorage
-	 * (shared GRAPH_VISIBILITY_STATES, keyed by label). Omit to disable persistence.
-	 */
-	id?: string;
-	/** Fired when a slice (or its legend entry) is clicked. */
-	onSliceClick?: (slice: PieSlice) => void;
-	'data-testid'?: string;
-}

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -171,20 +171,17 @@
 	}
 
 	.legend-copy-button {
-		// Always laid out (space reserved) but transparent, so revealing it on
-		// hover fades the icon in without reflowing the row / shifting the label.
-		display: flex;
-		opacity: 0;
+		display: none;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
 		padding: 2px;
 		margin: 0;
 		border: none;
-		background: transparent;
 		color: var(--l2-foreground);
 		cursor: pointer;
 		border-radius: 4px;
+		opacity: 1;
 		transition:
 			opacity 0.15s ease,
 			color 0.15s ease;
@@ -195,8 +192,9 @@
 	}
 
 	&:hover {
-		background: var(--l3-background);
+		background: color-mix(in srgb, var(--l1-foreground) 5%, transparent);
 		.legend-copy-button {
+			display: flex;
 			opacity: 1;
 		}
 	}

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -1,40 +1,39 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
-import { Input } from 'antd';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Input, Tooltip as AntdTooltip } from 'antd';
 import cx from 'classnames';
 import { useCopyToClipboard } from 'hooks/useCopyToClipboard';
 import { LegendItem } from 'lib/uPlotV2/config/types';
+import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
 import { Check, Copy } from '@signozhq/icons';
 
+import { useLegendActions } from '../../hooks/useLegendActions';
 import { LegendPosition, LegendProps } from '../types';
 
 import './Legend.styles.scss';
 
 export const MAX_LEGEND_WIDTH = 240;
 
-/**
- * Presentational legend. Renders the supplied `items` (markers + labels, an
- * optional copy button, and a search box for the RIGHT position) and delegates
- * all interaction to the container handlers. Source-agnostic — the uPlot
- * charts feed it via UPlotLegend; Pie feeds it directly.
- */
 export default function Legend({
-	items,
 	position = LegendPosition.BOTTOM,
+	config,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
-	focusedSeriesIndex = null,
-	onClick,
-	onMouseMove,
-	onMouseLeave,
-	showCopy = true,
-	showSearch,
 }: LegendProps): JSX.Element {
+	const { legendItemsMap, focusedSeriesIndex, setFocusedSeriesIndex } =
+		useLegendsSync({ config });
+	const { onLegendClick, onLegendMouseMove, onLegendMouseLeave } =
+		useLegendActions({
+			setFocusedSeriesIndex,
+			focusedSeriesIndex,
+		});
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
 	const [legendSearchQuery, setLegendSearchQuery] = useState('');
 	const { copyToClipboard, id: copiedId } = useCopyToClipboard();
 
-	const searchEnabled = showSearch ?? position === LegendPosition.RIGHT;
+	const legendItems = useMemo(
+		() => Object.values(legendItemsMap),
+		[legendItemsMap],
+	);
 
 	const isSingleRow = useMemo(() => {
 		if (!legendContainerRef.current || position !== LegendPosition.BOTTOM) {
@@ -42,19 +41,21 @@ export default function Legend({
 		}
 		const containerWidth = legendContainerRef.current.clientWidth;
 
-		const totalLegendWidth = items.length * (averageLegendWidth + 16);
+		const totalLegendWidth = legendItems.length * (averageLegendWidth + 16);
 		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
 		return totalRows <= 1;
-	}, [averageLegendWidth, items.length, position]);
+	}, [averageLegendWidth, legendContainerRef, legendItems.length, position]);
 
 	const visibleLegendItems = useMemo(() => {
-		if (!searchEnabled || !legendSearchQuery.trim()) {
-			return items;
+		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
+			return legendItems;
 		}
 
 		const query = legendSearchQuery.trim().toLowerCase();
-		return items.filter((item) => item.label?.toLowerCase().includes(query));
-	}, [searchEnabled, legendSearchQuery, items]);
+		return legendItems.filter((item) =>
+			item.label?.toLowerCase().includes(query),
+		);
+	}, [position, legendSearchQuery, legendItems]);
 
 	const handleCopyLegendItem = useCallback(
 		(e: React.MouseEvent, seriesIndex: number, label: string): void => {
@@ -67,9 +68,6 @@ export default function Legend({
 	const renderLegendItem = useCallback(
 		(item: LegendItem): JSX.Element => {
 			const isCopied = copiedId === item.seriesIndex;
-			// `color` is uPlot's stroke union (string | fn | gradient); only a string
-			// is a usable CSS colour for the marker.
-			const markerColor = typeof item.color === 'string' ? item.color : undefined;
 			return (
 				<div
 					key={item.seriesIndex}
@@ -79,56 +77,54 @@ export default function Legend({
 						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
 					})}
 				>
-					<TooltipSimple title={item.label} arrow side="top">
+					<AntdTooltip title={item.label}>
 						<div className="legend-item-label-trigger">
 							<div
 								className="legend-marker"
-								style={{ borderColor: markerColor }}
+								style={{ borderColor: String(item.color) }}
 								data-is-legend-marker={true}
 							/>
 							<span className="legend-label">{item.label}</span>
 						</div>
-					</TooltipSimple>
-					{showCopy && (
-						<TooltipSimple title={isCopied ? 'Copied' : 'Copy'} arrow side="top">
-							<button
-								type="button"
-								className="legend-copy-button"
-								onClick={(e): void =>
-									handleCopyLegendItem(e, item.seriesIndex, item.label ?? '')
-								}
-								aria-label={`Copy ${item.label}`}
-								data-testid="legend-copy"
-							>
-								{isCopied ? <Check size={12} /> : <Copy size={12} />}
-							</button>
-						</TooltipSimple>
-					)}
+					</AntdTooltip>
+					<AntdTooltip title={isCopied ? 'Copied' : 'Copy'}>
+						<button
+							type="button"
+							className="legend-copy-button"
+							onClick={(e): void =>
+								handleCopyLegendItem(e, item.seriesIndex, item.label ?? '')
+							}
+							aria-label={`Copy ${item.label}`}
+							data-testid="legend-copy"
+						>
+							{isCopied ? <Check size={12} /> : <Copy size={12} />}
+						</button>
+					</AntdTooltip>
 				</div>
 			);
 		},
-		[copiedId, focusedSeriesIndex, handleCopyLegendItem, position, showCopy],
+		[copiedId, focusedSeriesIndex, handleCopyLegendItem, position],
 	);
 
 	const isEmptyState = useMemo(() => {
-		if (!searchEnabled || !legendSearchQuery.trim()) {
+		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
 			return false;
 		}
 		return visibleLegendItems.length === 0;
-	}, [searchEnabled, legendSearchQuery, visibleLegendItems]);
+	}, [position, legendSearchQuery, visibleLegendItems]);
 
 	return (
 		<div
 			ref={legendContainerRef}
 			className="legend-container"
-			onClick={onClick}
-			onMouseMove={onMouseMove}
-			onMouseLeave={onMouseLeave}
+			onClick={onLegendClick}
+			onMouseMove={onLegendMouseMove}
+			onMouseLeave={onLegendMouseLeave}
 			style={{
 				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
 			}}
 		>
-			{searchEnabled && (
+			{position === LegendPosition.RIGHT && (
 				<div className="legend-search-container">
 					<Input
 						allowClear

frontend/src/lib/uPlotV2/components/Legend/UPlotLegend.tsx

@@ -1,41 +0,0 @@
-import { useMemo } from 'react';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-
-import { useLegendActions } from '../../hooks/useLegendActions';
-import { LegendPosition, UPlotLegendProps } from '../types';
-
-import Legend from './Legend';
-
-/**
- * uPlot legend controller. Derives the legend items + focus/visibility state
- * from the chart config (useLegendsSync) and the toggle/focus interactions from
- * the plot context (useLegendActions), then renders the presentational Legend.
- * Must be rendered inside a PlotContextProvider.
- */
-export default function UPlotLegend({
-	position = LegendPosition.BOTTOM,
-	config,
-	averageLegendWidth,
-}: UPlotLegendProps): JSX.Element {
-	const { legendItemsMap, focusedSeriesIndex, setFocusedSeriesIndex } =
-		useLegendsSync({ config });
-	const { onLegendClick, onLegendMouseMove, onLegendMouseLeave } =
-		useLegendActions({
-			setFocusedSeriesIndex,
-			focusedSeriesIndex,
-		});
-
-	const items = useMemo(() => Object.values(legendItemsMap), [legendItemsMap]);
-
-	return (
-		<Legend
-			items={items}
-			position={position}
-			averageLegendWidth={averageLegendWidth}
-			focusedSeriesIndex={focusedSeriesIndex}
-			onClick={onLegendClick}
-			onMouseMove={onLegendMouseMove}
-			onMouseLeave={onLegendMouseLeave}
-		/>
-	);
-}

frontend/src/lib/uPlotV2/components/__tests__/Legend.test.tsx

@@ -7,12 +7,11 @@ import {
 	within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
 
 import { useLegendActions } from '../../hooks/useLegendActions';
-import UPlotLegend from '../Legend/UPlotLegend';
+import Legend from '../Legend/Legend';
 import { LegendPosition } from '../types';
 
 const mockWriteText = jest.fn().mockResolvedValue(undefined);
@@ -48,7 +47,7 @@ const mockUseLegendActions = useLegendActions as jest.MockedFunction<
 	typeof useLegendActions
 >;
 
-describe('UPlotLegend', () => {
+describe('Legend', () => {
 	beforeAll(() => {
 		// JSDOM does not define navigator.clipboard; add it so we can spy on writeText
 		Object.defineProperty(navigator, 'clipboard', {
@@ -116,13 +115,11 @@ describe('UPlotLegend', () => {
 
 	const renderLegend = (position?: LegendPosition): RenderResult =>
 		render(
-			<TooltipProvider>
-				<UPlotLegend
-					position={position}
-					// config is consumed by the mocked useLegendsSync hook, not directly
-					config={{} as any}
-				/>
-			</TooltipProvider>,
+			<Legend
+				position={position}
+				// config is not used directly in the component, it's consumed by the mocked hook
+				config={{} as any}
+			/>,
 		);
 
 	describe('layout and position', () => {

frontend/src/lib/uPlotV2/components/types.ts

@@ -1,10 +1,9 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
-import { LegendItem } from '../config/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -110,33 +109,7 @@ export enum LegendPosition {
 export interface LegendConfig {
 	position: LegendPosition;
 }
-/**
- * Presentational legend props. Source-agnostic: it renders whatever
- * `items` it's given and delegates interaction to the container handlers, so
- * it serves both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie).
- */
 export interface LegendProps {
-	items: LegendItem[];
-	position?: LegendPosition;
-	averageLegendWidth?: number;
-	/** Series index to highlight (hovered/focused). */
-	focusedSeriesIndex?: number | null;
-	/**
-	 * Container-delegated handlers. Items carry `data-legend-item-id`, so the
-	 * handler reads the target's id rather than binding per item.
-	 */
-	onClick?: MouseEventHandler<HTMLDivElement>;
-	onMouseMove?: MouseEventHandler<HTMLDivElement>;
-	onMouseLeave?: () => void;
-	/** Show the per-item copy button. Default true. */
-	showCopy?: boolean;
-	/** Show the filter search box. Default: only for the RIGHT position. */
-	showSearch?: boolean;
-}
-
-/** Props for the uPlot legend controller, which derives items + interaction
- * from the chart config and renders the presentational Legend. */
-export interface UPlotLegendProps {
 	position?: LegendPosition;
 	config: UPlotConfigBuilder;
 	averageLegendWidth?: number;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -37,7 +37,7 @@ export interface TooltipViewState {
 	isHovering: boolean;
 	isPinned: boolean;
 	dismiss: () => void;
-	clickData: ChartClickData | null;
+	clickData: TooltipClickData | null;
 	contents?: ReactNode;
 }
 
@@ -59,17 +59,17 @@ export interface TooltipPluginProps {
 	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
 	pinKey?: string;
 	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
-	onClick?: (clickData: ChartClickData) => void;
+	onClick?: (clickData: TooltipClickData) => void;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	syncMetadata?: TooltipSyncMetadata;
 	render: (args: TooltipRenderArgs) => ReactNode;
-	pinnedTooltipElement?: (clickData: ChartClickData) => ReactNode;
+	pinnedTooltipElement?: (clickData: TooltipClickData) => ReactNode;
 	maxWidth?: number;
 	maxHeight?: number;
 }
 
-export interface ChartClickData {
+export interface TooltipClickData {
 	xValue: number;
 	yValue: number;
 	focusedSeries: {
@@ -101,7 +101,7 @@ export interface TooltipControllerState {
 	hoverActive: boolean;
 	isAnySeriesActive: boolean;
 	pinned: boolean;
-	clickData: ChartClickData | null;
+	clickData: TooltipClickData | null;
 	style: TooltipViewState['style'];
 	horizontalOffset: number;
 	verticalOffset: number;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -2,7 +2,7 @@ import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
 
 import {
 	TOOLTIP_OFFSET,
-	ChartClickData,
+	TooltipClickData,
 	TooltipLayoutInfo,
 	TooltipViewState,
 } from './types';
@@ -167,11 +167,14 @@ export function createLayoutObserver(
 }
 
 /**
- * Resolves a ChartClickData snapshot from a MouseEvent (real or synthetic)
+ * Resolves a TooltipClickData snapshot from a MouseEvent (real or synthetic)
  * and the current uPlot instance. Shared by the overlay click handler and the
  * keyboard-pin handler (which synthesises an event from the cursor position).
  */
-export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
+export function buildClickData(
+	event: MouseEvent,
+	plot: uPlot,
+): TooltipClickData {
 	const xValue = plot.posToVal(event.offsetX, 'x');
 	const yValue = plot.posToVal(event.offsetY, 'y');
 	const focusedSeries = getFocusedSeriesAtPosition(event, plot);

pkg/apiserver/signozapiserver/tracedetail.go

@@ -67,5 +67,24 @@ func (provider *provider) addTraceDetailRoutes(router *mux.Router) error {
 		return err
 	}
 
+	if err := router.Handle("/api/v3/traces/{traceID}/flamegraph", handler.New(
+		provider.authzMiddleware.ViewAccess(provider.traceDetailHandler.GetFlamegraph),
+		handler.OpenAPIDef{
+			ID:                  "GetFlamegraph",
+			Tags:                []string{"tracedetail"},
+			Summary:             "Get flamegraph view for a trace",
+			Description:         "Returns the flamegraph view of spans for a given trace ID.",
+			Request:             new(spantypes.PostableFlamegraph),
+			RequestContentType:  "application/json",
+			Response:            new(spantypes.GettableFlamegraphTrace),
+			ResponseContentType: "application/json",
+			SuccessStatusCode:   http.StatusOK,
+			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		},
+	)).Methods(http.MethodPost).GetError(); err != nil {
+		return err
+	}
+
 	return nil
 }

pkg/modules/tracedetail/config.go

@@ -6,7 +6,16 @@ import (
 )
 
 type Config struct {
-	Waterfall WaterfallConfig `mapstructure:"waterfall"`
+	Waterfall  WaterfallConfig  `mapstructure:"waterfall"`
+	Flamegraph FlamegraphConfig `mapstructure:"flamegraph"`
+}
+
+type FlamegraphConfig struct {
+	MaxSelectedLevels            int  `mapstructure:"max_selected_levels"`
+	MaxSpansPerLevel             int  `mapstructure:"max_spans_per_level"`
+	SamplingTopLatencySpansCount int  `mapstructure:"sampling_top_latency_count"`
+	SamplingBucketCount          int  `mapstructure:"sampling_bucket_count"`
+	SelectAllSpansLimit          uint `mapstructure:"select_all_spans_limit"`
 }
 
 type WaterfallConfig struct {
@@ -29,6 +38,13 @@ func newConfig() factory.Config {
 			MaxDepthToAutoExpand:     5,
 			MaxLimitToSelectAllSpans: 10_000,
 		},
+		Flamegraph: FlamegraphConfig{
+			MaxSelectedLevels:            50,
+			MaxSpansPerLevel:             100,
+			SamplingTopLatencySpansCount: 5,
+			SamplingBucketCount:          50,
+			SelectAllSpansLimit:          100_000,
+		},
 	}
 }
 
@@ -42,5 +58,20 @@ func (c Config) Validate() error {
 	if c.Waterfall.MaxLimitToSelectAllSpans == 0 {
 		return errors.NewInvalidInputf(errors.CodeInvalidInput, "traces.waterfall.max_limit_to_select_all_spans must be positive")
 	}
+	if c.Flamegraph.MaxSelectedLevels <= 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "tracedetail.flamegraph.level_limit must be positive, got %d", c.Flamegraph.MaxSelectedLevels)
+	}
+	if c.Flamegraph.MaxSpansPerLevel <= 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "tracedetail.flamegraph.spans_per_level must be positive, got %d", c.Flamegraph.MaxSpansPerLevel)
+	}
+	if c.Flamegraph.SamplingTopLatencySpansCount < 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "tracedetail.flamegraph.top_latency_count cannot be negative, got %d", c.Flamegraph.SamplingTopLatencySpansCount)
+	}
+	if c.Flamegraph.SamplingBucketCount <= 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "tracedetail.flamegraph.bucket_count must be positive, got %d", c.Flamegraph.SamplingBucketCount)
+	}
+	if c.Flamegraph.SelectAllSpansLimit == 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "tracedetail.flamegraph.max_limit_to_select_all_spans must be positive")
+	}
 	return nil
 }

pkg/modules/tracedetail/impltracedetail/handler.go

@@ -80,3 +80,19 @@ func (h *handler) GetTraceAggregations(rw http.ResponseWriter, r *http.Request)
 
 	render.Success(rw, http.StatusOK, result)
 }
+
+func (h *handler) GetFlamegraph(rw http.ResponseWriter, r *http.Request) {
+	req := new(spantypes.PostableFlamegraph)
+	if err := binding.JSON.BindBody(r.Body, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	result, err := h.module.GetFlamegraph(r.Context(), mux.Vars(r)["traceID"], req.SelectedSpanID, req.SelectFields)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, result)
+}

pkg/modules/tracedetail/impltracedetail/module.go

@@ -7,6 +7,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/modules/tracedetail"
 	"github.com/SigNoz/signoz/pkg/types/spantypes"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"go.opentelemetry.io/otel/metric"
 )
 
@@ -164,6 +165,17 @@ func (m *module) GetTraceAggregations(ctx context.Context, traceID string, req *
 	return &spantypes.GettableTraceAggregations{Aggregations: results}, nil
 }
 
+func (m *module) GetFlamegraph(ctx context.Context, traceID string, selectedSpanID string, selectFields []telemetrytypes.TelemetryFieldKey) (*spantypes.GettableFlamegraphTrace, error) {
+	summary, err := m.store.GetTraceSummary(ctx, traceID)
+	if err != nil {
+		return nil, err
+	}
+	if summary.NumSpans <= uint64(m.config.Flamegraph.SelectAllSpansLimit) {
+		return m.getFullFlamegraph(ctx, traceID, summary, selectFields)
+	}
+	return m.getWindowedFlamegraph(ctx, traceID, selectedSpanID, summary, selectFields)
+}
+
 // getWindowedWaterfall builds the waterfall tree with minimal data and then returns only a window of full spans.
 func (m *module) getWindowedWaterfall(ctx context.Context, traceID, selectedSpanID string, uncollapsedSpans []string, start, end time.Time) (*spantypes.GettableWaterfallTrace, error) {
 	// Step 1: minimal fetch → build full tree → select visible window
@@ -204,3 +216,47 @@ func (m *module) getWindowedWaterfall(ctx context.Context, traceID, selectedSpan
 		waterfallTrace, selectedSpans, uncollapsedSpans, false, nil,
 	), nil
 }
+
+func (m *module) getFullFlamegraph(ctx context.Context, traceID string, summary *spantypes.TraceSummary, selectFields []telemetrytypes.TelemetryFieldKey) (*spantypes.GettableFlamegraphTrace, error) {
+	fullSpans, err := m.store.GetFlamegraphSpans(ctx, traceID, summary.Start, summary.End, nil)
+	if err != nil {
+		return nil, err
+	}
+	if len(fullSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+	flamegraphTrace := spantypes.NewFlamegraphTraceFromStorable(fullSpans, selectFields)
+	return spantypes.NewGettableFlamegraphTrace(flamegraphTrace.GetAllLevels(), summary.Start.UnixMilli(), summary.End.UnixMilli(), false), nil
+}
+
+// getWindowedFlamegraph returns a window of a max levels and max sampled spans per level around the selected span.
+func (m *module) getWindowedFlamegraph(ctx context.Context, traceID, selectedSpanID string, summary *spantypes.TraceSummary, selectFields []telemetrytypes.TelemetryFieldKey) (*spantypes.GettableFlamegraphTrace, error) {
+	minimalSpans, err := m.store.GetMinimalSpans(ctx, traceID, summary.Start, summary.End)
+	if err != nil {
+		return nil, err
+	}
+	if len(minimalSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	flamegraphTrace := spantypes.NewFlamegraphTraceFromMinimal(minimalSpans)
+	minimalSpans = nil //nolint:ineffassign,wastedassign // release backing array before further db calls
+
+	cfg := m.config.Flamegraph
+	selectedSpans := flamegraphTrace.GetSelectedLevels(selectedSpanID, cfg.MaxSelectedLevels, cfg.MaxSpansPerLevel, cfg.SamplingTopLatencySpansCount, cfg.SamplingBucketCount)
+	if len(selectedSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	fullSpans, err := m.store.GetFlamegraphSpans(ctx, traceID, summary.Start, summary.End, spantypes.FlamegraphWindowSpanIDs(selectedSpans))
+	if err != nil {
+		return nil, err
+	}
+
+	return spantypes.NewGettableFlamegraphTrace(
+		flamegraphTrace.EnrichSelectedSpans(selectedSpans, fullSpans, selectFields),
+		summary.Start.UnixMilli(),
+		summary.End.UnixMilli(),
+		true,
+	), nil
+}

pkg/modules/tracedetail/impltracedetail/store.go

@@ -154,6 +154,47 @@ func (s *traceStore) GetTraceSpansByIDs(ctx context.Context, traceID string, sta
 	return spans, nil
 }
 
+func (s *traceStore) GetFlamegraphSpans(ctx context.Context, traceID string, start, end time.Time, spanIDs []string) ([]spantypes.StorableSpan, error) {
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(
+		"span_id",
+		"any(parent_span_id) AS parent_span_id",
+		"any(timestamp) AS timestamp",
+		"any(duration_nano) AS duration_nano",
+		"any(has_error) AS has_error",
+		"any(name) AS name",
+		"any(events) AS events",
+		"any(attributes_string) AS attributes_string",
+		"any(attributes_number) AS attributes_number",
+		"any(attributes_bool) AS attributes_bool",
+		"any(resources_string) AS resources_string",
+	)
+	sb.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceTable))
+	conditions := []string{
+		sb.E("trace_id", traceID),
+		sb.GE("ts_bucket_start", start.Unix()-1800),
+		sb.LE("ts_bucket_start", end.Unix()),
+	}
+	if len(spanIDs) > 0 {
+		ids := make([]any, len(spanIDs))
+		for i, id := range spanIDs {
+			ids[i] = id
+		}
+		conditions = append(conditions, sb.In("span_id", ids...))
+	}
+	sb.Where(conditions...)
+	sb.GroupBy("span_id")
+	sb.OrderByAsc("timestamp")
+	sb.OrderByAsc("name")
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	var spans []spantypes.StorableSpan
+	if err := s.telemetryStore.ClickhouseDB().Select(ctx, &spans, query, args...); err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "error querying flamegraph spans")
+	}
+	return spans, nil
+}
+
 func (s *traceStore) GetSpanCountByField(ctx context.Context, traceID string, summary *spantypes.TraceSummary, fieldKey telemetrytypes.TelemetryFieldKey) (map[string]uint64, error) {
 	fieldExpr, err := buildFieldExpr(fieldKey)
 	if err != nil {

pkg/modules/tracedetail/impltracedetail/store_test.go

@@ -91,6 +91,30 @@ func TestGetSpanCountByField(t *testing.T) {
 	}
 }
 
+func TestGetFlamegraphSpans(t *testing.T) {
+	baseSQL := "SELECT span_id, any(parent_span_id) AS parent_span_id, any(timestamp) AS timestamp, any(duration_nano) AS duration_nano, any(has_error) AS has_error, any(name) AS name, any(events) AS events, any(attributes_string) AS attributes_string, any(attributes_number) AS attributes_number, any(attributes_bool) AS attributes_bool, any(resources_string) AS resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? GROUP BY span_id ORDER BY timestamp ASC, name ASC"
+	withSpanIDsSQL := "SELECT span_id, any(parent_span_id) AS parent_span_id, any(timestamp) AS timestamp, any(duration_nano) AS duration_nano, any(has_error) AS has_error, any(name) AS name, any(events) AS events, any(attributes_string) AS attributes_string, any(attributes_number) AS attributes_number, any(attributes_bool) AS attributes_bool, any(resources_string) AS resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? AND span_id IN (?, ?) GROUP BY span_id ORDER BY timestamp ASC, name ASC"
+
+	tests := []struct {
+		name    string
+		spanIDs []string
+		sql     string
+	}{
+		{name: "NoSpanIDs_GeneratesBaseSQL", spanIDs: nil, sql: baseSQL},
+		{name: "WithSpanIDs_GeneratesInClauseSQL", spanIDs: []string{"span-1", "span-2"}, sql: withSpanIDsSQL},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			s := newTestStore(sqlmock.QueryMatcherRegexp)
+			s.Mock().ExpectSelect(regexp.QuoteMeta(tc.sql)).
+				WillReturnRows(cmock.NewRows(nil, nil))
+			_, _ = s.Store().GetFlamegraphSpans(context.Background(), testTraceID, testStart, testEnd, tc.spanIDs)
+			assert.NoError(t, s.Mock().ExpectationsWereMet())
+		})
+	}
+}
+
 func TestGetSpanDurationByField(t *testing.T) {
 
 	expectedSQL := "WITH all_spans AS (SELECT DISTINCT ON (span_id) resource.`service.name`::String AS field_value, toUnixTimestamp64Nano(timestamp) AS start_ns, start_ns + duration_nano AS end_ns FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? AND notEmpty(field_value) ORDER BY timestamp ASC, name ASC), effective_start AS (SELECT field_value, end_ns, greatest(start_ns, ifNull(max(end_ns) OVER (PARTITION BY field_value ORDER BY start_ns ROWS BETWEEN UNBOUNDED PRECEDING AND 1 PRECEDING), toUInt64(0))) AS effective_start_ns FROM all_spans) SELECT field_value, sum(toUInt64(greatest(end_ns - effective_start_ns, 0))) AS total_ns FROM effective_start GROUP BY field_value"

pkg/modules/tracedetail/tracedetail.go

@@ -5,6 +5,7 @@ import (
 	"net/http"
 
 	"github.com/SigNoz/signoz/pkg/types/spantypes"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
 // Handler exposes HTTP handlers for trace detail APIs.
@@ -12,6 +13,7 @@ type Handler interface {
 	GetWaterfall(http.ResponseWriter, *http.Request)
 	GetWaterfallV4(http.ResponseWriter, *http.Request)
 	GetTraceAggregations(http.ResponseWriter, *http.Request)
+	GetFlamegraph(http.ResponseWriter, *http.Request)
 }
 
 // Module defines the business logic for trace detail operations.
@@ -19,4 +21,5 @@ type Module interface {
 	GetWaterfall(ctx context.Context, traceID string, req *spantypes.PostableWaterfall) (*spantypes.GettableWaterfallTrace, error)
 	GetWaterfallV4(ctx context.Context, traceID string, selectedSpanID string, uncollapsedSpans []string, selectAllLimit uint) (*spantypes.GettableWaterfallTrace, error)
 	GetTraceAggregations(ctx context.Context, traceID string, req *spantypes.PostableTraceAggregations) (*spantypes.GettableTraceAggregations, error)
+	GetFlamegraph(ctx context.Context, traceID string, selectedSpanID string, selectFields []telemetrytypes.TelemetryFieldKey) (*spantypes.GettableFlamegraphTrace, error)
 }

pkg/types/spantypes/flamegraph_span.go

@@ -0,0 +1,102 @@
+package spantypes
+
+import (
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+type FlamegraphSpan struct {
+	SpanID       string            `json:"spanId" required:"true"`
+	ParentSpanID string            `json:"parentSpanId" required:"true"`
+	Timestamp    uint64            `json:"timestamp" required:"true"`
+	DurationNano uint64            `json:"durationNano" required:"true"`
+	HasError     bool              `json:"hasError" required:"true"`
+	Name         string            `json:"name" required:"true"`
+	Level        int64             `json:"level" required:"true"`
+	Events       []Event           `json:"event" required:"true" nullable:"false"`
+	Attributes   map[string]any    `json:"attributes" required:"true" nullable:"false"`
+	Resource     map[string]string `json:"resource" required:"true" nullable:"false"`
+	Children     []*FlamegraphSpan `json:"-"` // internal tree use only
+}
+
+// FlamegraphLevel groups span IDs at a single level within the selected window.
+type FlamegraphLevel struct {
+	Level   int64
+	SpanIDs []string
+}
+
+type PostableFlamegraph struct {
+	SelectedSpanID string                             `json:"selectedSpanId"`
+	SelectFields   []telemetrytypes.TelemetryFieldKey `json:"selectFields,omitempty"`
+}
+
+// GettableFlamegraphTrace is the response for the v3 flamegraph API.
+type GettableFlamegraphTrace struct {
+	Spans                [][]*FlamegraphSpan `json:"spans" required:"true" nullable:"false"`
+	StartTimestampMillis int64               `json:"startTimestampMillis" required:"true"`
+	EndTimestampMillis   int64               `json:"endTimestampMillis" required:"true"`
+	HasMore              bool                `json:"hasMore" required:"true"`
+}
+
+func NewGettableFlamegraphTrace(spans [][]*FlamegraphSpan, startMs, endMs int64, hasMore bool) *GettableFlamegraphTrace {
+	return &GettableFlamegraphTrace{
+		Spans:                spans,
+		StartTimestampMillis: startMs,
+		EndTimestampMillis:   endMs,
+		HasMore:              hasMore,
+	}
+}
+
+func NewFlamegraphSpanFromStorable(s *StorableSpan, level int64, selectFields []telemetrytypes.TelemetryFieldKey) *FlamegraphSpan {
+	span := &FlamegraphSpan{
+		SpanID:       s.SpanID,
+		ParentSpanID: s.ParentSpanID,
+		Timestamp:    uint64(s.StartTime.UnixNano()),
+		DurationNano: s.DurationNano,
+		HasError:     s.HasError,
+		Name:         s.Name,
+		Level:        level,
+		Events:       s.UnmarshalledEvents(),
+		Attributes:   make(map[string]any),
+		Resource:     make(map[string]string),
+	}
+	if len(selectFields) == 0 {
+		return span
+	}
+	for _, field := range selectFields {
+		switch field.FieldContext {
+		case telemetrytypes.FieldContextResource:
+			if v, ok := s.ResourcesString[field.Name]; ok && v != "" {
+				span.Resource[field.Name] = v
+			}
+		case telemetrytypes.FieldContextAttribute:
+			if v := s.AttributeValue(field.Name); v != nil {
+				span.Attributes[field.Name] = v
+			}
+		}
+	}
+	return span
+}
+
+func NewMissingParentFlamegraphSpan(node *FlamegraphSpan) *FlamegraphSpan {
+	return &FlamegraphSpan{
+		SpanID:       node.ParentSpanID,
+		Name:         "Missing Span",
+		Timestamp:    node.Timestamp,
+		DurationNano: node.DurationNano,
+		Events:       []Event{},
+		Children:     []*FlamegraphSpan{node},
+	}
+}
+
+// FlamegraphWindowSpanIDs collects all span IDs from a level window into a flat slice.
+func FlamegraphWindowSpanIDs(window []FlamegraphLevel) []string {
+	total := 0
+	for _, lvl := range window {
+		total += len(lvl.SpanIDs)
+	}
+	ids := make([]string, 0, total)
+	for _, lvl := range window {
+		ids = append(ids, lvl.SpanIDs...)
+	}
+	return ids
+}

pkg/types/spantypes/flamegraph_trace.go

@@ -0,0 +1,111 @@
+package spantypes
+
+import (
+	"sort"
+
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+// FlamegraphTrace holds the level wise tree built from minimal spans.
+type FlamegraphTrace struct {
+	roots     []*FlamegraphSpan
+	nodeByID  map[string]*FlamegraphSpan
+	startTime uint64
+	endTime   uint64
+}
+
+func NewFlamegraphTraceFromMinimal(spans []MinimalSpan) *FlamegraphTrace {
+	t := &FlamegraphTrace{
+		nodeByID: make(map[string]*FlamegraphSpan, len(spans)),
+	}
+	for i := range spans {
+		node := spans[i].ToFlamegraphSpan()
+		t.updateTimeRange(node.Timestamp, node.DurationNano)
+		t.nodeByID[node.SpanID] = node
+	}
+	t.buildSpanTree()
+	return t
+}
+
+func NewFlamegraphTraceFromStorable(spans []StorableSpan, selectFields []telemetrytypes.TelemetryFieldKey) *FlamegraphTrace {
+	t := &FlamegraphTrace{
+		nodeByID: make(map[string]*FlamegraphSpan, len(spans)),
+	}
+	for i := range spans {
+		node := NewFlamegraphSpanFromStorable(&spans[i], 0, selectFields) // level is set later by BFS
+		t.updateTimeRange(node.Timestamp, node.DurationNano)
+		t.nodeByID[node.SpanID] = node
+	}
+	t.buildSpanTree()
+	return t
+}
+
+func (t *FlamegraphTrace) GetAllLevels() [][]*FlamegraphSpan {
+	return nil
+}
+
+// GetSelectedLevels returns the window of levels around selectedSpanID with sampling applied to dense levels.
+func (t *FlamegraphTrace) GetSelectedLevels(selectedSpanID string, levelLimit, spansPerLevel, topLatencyCount, bucketCount int) []FlamegraphLevel {
+	return nil
+}
+
+func (t *FlamegraphTrace) EnrichSelectedSpans(selectedSpans []FlamegraphLevel, fullSpans []StorableSpan, selectFields []telemetrytypes.TelemetryFieldKey) [][]*FlamegraphSpan {
+	fullByID := make(map[string]*StorableSpan, len(fullSpans))
+	for i := range fullSpans {
+		fullByID[fullSpans[i].SpanID] = &fullSpans[i]
+	}
+
+	result := make([][]*FlamegraphSpan, len(selectedSpans))
+	for i, lvl := range selectedSpans {
+		result[i] = make([]*FlamegraphSpan, 0, len(lvl.SpanIDs))
+		for _, spanID := range lvl.SpanIDs {
+			if full, ok := fullByID[spanID]; ok {
+				result[i] = append(result[i], NewFlamegraphSpanFromStorable(full, lvl.Level, selectFields))
+			} else if lean, ok := t.nodeByID[spanID]; ok {
+				result[i] = append(result[i], lean)
+			}
+		}
+	}
+	return result
+}
+
+func (t *FlamegraphTrace) updateTimeRange(timestamp, durationNano uint64) {
+	if t.startTime == 0 || timestamp < t.startTime {
+		t.startTime = timestamp
+	}
+	if end := timestamp + durationNano; end > t.endTime {
+		t.endTime = end
+	}
+}
+
+func (t *FlamegraphTrace) buildSpanTree() {
+	for _, node := range t.nodeByID {
+		if node.ParentSpanID != "" {
+			if parent, ok := t.nodeByID[node.ParentSpanID]; ok {
+				parent.Children = append(parent.Children, node)
+			} else {
+				missing := NewMissingParentFlamegraphSpan(node)
+				t.nodeByID[missing.SpanID] = missing
+				t.roots = append(t.roots, missing)
+			}
+		} else if flamegraphSpanIndex(t.roots, node.SpanID) == -1 {
+			t.roots = append(t.roots, node)
+		}
+	}
+
+	sort.Slice(t.roots, func(i, j int) bool {
+		if t.roots[i].Timestamp == t.roots[j].Timestamp {
+			return t.roots[i].SpanID < t.roots[j].SpanID
+		}
+		return t.roots[i].Timestamp < t.roots[j].Timestamp
+	})
+}
+
+func flamegraphSpanIndex(spans []*FlamegraphSpan, spanID string) int {
+	for i, s := range spans {
+		if s.SpanID == spanID {
+			return i
+		}
+	}
+	return -1
+}

pkg/types/spantypes/store.go

@@ -30,6 +30,7 @@ type TraceStore interface {
 	GetTraceSpans(ctx context.Context, traceID string, summary *TraceSummary) ([]StorableSpan, error)
 	GetMinimalSpans(ctx context.Context, traceID string, start, end time.Time) ([]MinimalSpan, error)
 	GetTraceSpansByIDs(ctx context.Context, traceID string, start, end time.Time, spanIDs []string) ([]StorableSpan, error)
+	GetFlamegraphSpans(ctx context.Context, traceID string, start, end time.Time, spanIDs []string) ([]StorableSpan, error)
 
 	GetSpanCountByField(ctx context.Context, traceID string, summary *TraceSummary, fieldKey telemetrytypes.TelemetryFieldKey) (map[string]uint64, error)
 	GetSpanDurationByField(ctx context.Context, traceID string, summary *TraceSummary, fieldKey telemetrytypes.TelemetryFieldKey) (map[string]uint64, error)

pkg/types/spantypes/waterfall_span.go

@@ -164,6 +164,17 @@ func (item *MinimalSpan) ToWaterfallSpan(traceID string) *WaterfallSpan {
 	}
 }
 
+func (item *MinimalSpan) ToFlamegraphSpan() *FlamegraphSpan {
+	return &FlamegraphSpan{
+		SpanID:       item.SpanID,
+		ParentSpanID: item.ParentSpanID,
+		Timestamp:    uint64(item.StartTime.UnixNano()),
+		DurationNano: item.DurationNano,
+		HasError:     item.HasError,
+		Children:     make([]*FlamegraphSpan, 0),
+	}
+}
+
 // NewMissingWaterfallSpan creates a synthetic placeholder span for a parent that has no recorded data.
 func NewMissingWaterfallSpan(spanID, traceID string, timeUnixNano, durationNano uint64) *WaterfallSpan {
 	return &WaterfallSpan{
@@ -267,6 +278,19 @@ func (ws *WaterfallSpan) getPathToSelectedSpanID(selectedSpanID string) ([]strin
 	return nil, false
 }
 
+func (item *StorableSpan) AttributeValue(name string) any {
+	if v, ok := item.AttributesString[name]; ok {
+		return v
+	}
+	if v, ok := item.AttributesNumber[name]; ok {
+		return v
+	}
+	if v, ok := item.AttributesBool[name]; ok {
+		return v
+	}
+	return nil
+}
+
 func (item *StorableSpan) Attributes() map[string]any {
 	attributes := make(map[string]any, len(item.AttributesString)+len(item.AttributesNumber)+len(item.AttributesBool))
 	for k, v := range item.AttributesString {
@@ -296,7 +320,7 @@ func (item *StorableSpan) UnmarshalledEvents() []Event {
 func (item *StorableSpan) UnmarshalledRefs() []OtelSpanRef {
 	refs := []OtelSpanRef{}
 	if err := json.Unmarshal([]byte(item.References), &refs); err != nil {
-		return nil // skip malformed values
+		return []OtelSpanRef{} // skip malformed values
 	}
 	return refs
 }