feat: add shared reusable components for trace details v3

Adds reusable components to periscope and DetailsPanel:

- PrettyView: JSON tree viewer with search and pinning
- JsonView: Monaco-based JSON viewer
- DataViewer: Pretty/JSON mode switcher
- FloatingPanel: Draggable/resizable panel (react-rnd)
- ResizableBox: Vertical/horizontal resize with handle
- KeyValueLabel: Key-value display (column/row)
- DetailsPanel: Drawer infrastructure and header

frontend/package.json

@@ -139,10 +139,12 @@
     "react-helmet-async": "1.3.0",
     "react-hook-form": "7.71.2",
     "react-i18next": "^11.16.1",
+    "react-json-tree": "0.20.0",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
     "react-redux": "^7.2.2",
+    "react-rnd": "10.5.3",
     "react-router-dom": "^5.2.0",
     "react-router-dom-v5-compat": "6.27.0",
     "react-syntax-highlighter": "15.5.0",

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss

@@ -0,0 +1,40 @@
+.details-header {
+	// ghost + secondary missing hover bg token in @signozhq/button
+	--button-ghost-hover-background: var(--l3-background);
+
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px;
+	border-bottom: 1px solid var(--l1-border);
+	height: 36px;
+	background: var(--l2-background);
+
+	&__icon-btn {
+		flex-shrink: 0;
+	}
+
+	&__title {
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--l1-foreground);
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__actions {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		flex-shrink: 0;
+	}
+
+	&__nav {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+}

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { Button } from '@signozhq/button';
+import { X } from '@signozhq/icons';
+
+import './DetailsHeader.styles.scss';
+
+export interface HeaderAction {
+	key: string;
+	component: ReactNode; // check later if we can use direct btn itself or not.
+}
+
+export interface DetailsHeaderProps {
+	title: string;
+	onClose: () => void;
+	actions?: HeaderAction[];
+	closePosition?: 'left' | 'right';
+	className?: string;
+}
+
+function DetailsHeader({
+	title,
+	onClose,
+	actions,
+	closePosition = 'right',
+	className,
+}: DetailsHeaderProps): JSX.Element {
+	const closeButton = (
+		<Button
+			variant="ghost"
+			size="icon"
+			color="secondary"
+			onClick={onClose}
+			aria-label="Close"
+			className="details-header__icon-btn"
+		>
+			<X size={14} />
+		</Button>
+	);
+
+	return (
+		<div className={`details-header ${className || ''}`}>
+			{closePosition === 'left' && closeButton}
+
+			<span className="details-header__title">{title}</span>
+
+			{actions && (
+				<div className="details-header__actions">
+					{actions.map((action) => (
+						<div key={action.key}>{action.component}</div>
+					))}
+				</div>
+			)}
+
+			{closePosition === 'right' && closeButton}
+		</div>
+	);
+}
+
+export default DetailsHeader;

frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss

@@ -0,0 +1,7 @@
+.details-panel-drawer {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -0,0 +1,36 @@
+import { DrawerWrapper } from '@signozhq/drawer';
+
+import './DetailsPanelDrawer.styles.scss';
+
+interface DetailsPanelDrawerProps {
+	isOpen: boolean;
+	onClose: () => void;
+	children: React.ReactNode;
+	className?: string;
+}
+
+function DetailsPanelDrawer({
+	isOpen,
+	onClose,
+	children,
+	className,
+}: DetailsPanelDrawerProps): JSX.Element {
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			direction="right"
+			type="panel"
+			showOverlay={false}
+			allowOutsideClick
+			className={`details-panel-drawer ${className || ''}`}
+			content={<div className="details-panel-drawer__body">{children}</div>}
+		/>
+	);
+}
+
+export default DetailsPanelDrawer;

frontend/src/components/DetailsPanel/index.ts

@@ -0,0 +1,8 @@
+export type {
+	DetailsHeaderProps,
+	HeaderAction,
+} from './DetailsHeader/DetailsHeader';
+export { default as DetailsHeader } from './DetailsHeader/DetailsHeader';
+export { default as DetailsPanelDrawer } from './DetailsPanelDrawer';
+export type { DetailsPanelState, UseDetailsPanelOptions } from './types';
+export { default as useDetailsPanel } from './useDetailsPanel';

frontend/src/components/DetailsPanel/types.ts

@@ -0,0 +1,10 @@
+export interface DetailsPanelState {
+	isOpen: boolean;
+	open: () => void;
+	close: () => void;
+}
+
+export interface UseDetailsPanelOptions {
+	entityId: string | undefined;
+	onClose?: () => void;
+}

frontend/src/components/DetailsPanel/useDetailsPanel.ts

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { DetailsPanelState, UseDetailsPanelOptions } from './types';
+
+function useDetailsPanel({
+	entityId,
+	onClose,
+}: UseDetailsPanelOptions): DetailsPanelState {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const prevEntityIdRef = useRef<string>('');
+
+	useEffect(() => {
+		const currentId = entityId || '';
+		if (currentId && currentId !== prevEntityIdRef.current) {
+			setIsOpen(true);
+		}
+		prevEntityIdRef.current = currentId;
+	}, [entityId]);
+
+	const open = useCallback(() => setIsOpen(true), []);
+	const close = useCallback(() => {
+		setIsOpen(false);
+		onClose?.();
+	}, [onClose]);
+
+	return { isOpen, open, close };
+}
+
+export default useDetailsPanel;

frontend/src/components/TimelineV3/TimelineV3.styles.scss

@@ -1,4 +0,0 @@
-.timeline-v3-container {
-	// flex: 1;
-	overflow: visible;
-}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -1,87 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useMeasure } from 'react-use';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import {
-	getIntervals,
-	getMinimumIntervalsBasedOnWidth,
-	Interval,
-} from './utils';
-
-import './TimelineV3.styles.scss';
-
-interface ITimelineV3Props {
-	startTimestamp: number;
-	endTimestamp: number;
-	timelineHeight: number;
-	offsetTimestamp: number;
-}
-
-function TimelineV3(props: ITimelineV3Props): JSX.Element {
-	const {
-		startTimestamp,
-		endTimestamp,
-		timelineHeight,
-		offsetTimestamp,
-	} = props;
-	const [intervals, setIntervals] = useState<Interval[]>([]);
-	const [ref, { width }] = useMeasure<HTMLDivElement>();
-	const isDarkMode = useIsDarkMode();
-
-	useEffect(() => {
-		const spread = endTimestamp - startTimestamp;
-		if (spread < 0) {
-			return;
-		}
-
-		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
-		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
-
-		setIntervals(intervals);
-	}, [startTimestamp, endTimestamp, width, offsetTimestamp]);
-
-	if (endTimestamp < startTimestamp) {
-		console.error(
-			'endTimestamp cannot be less than startTimestamp',
-			startTimestamp,
-			endTimestamp,
-		);
-		return <div />;
-	}
-
-	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
-
-	return (
-		<div ref={ref as never} className="timeline-v3-container">
-			<svg
-				width={width}
-				height={timelineHeight * 2.5}
-				xmlns="http://www.w3.org/2000/svg"
-				overflow="visible"
-			>
-				{intervals &&
-					intervals.length > 0 &&
-					intervals.map((interval, index) => (
-						<g
-							transform={`translate(${(interval.percentage * width) / 100},0)`}
-							key={`${interval.percentage + interval.label + index}`}
-							textAnchor="middle"
-							fontSize="0.6rem"
-						>
-							<text
-								x={index === intervals.length - 1 ? -10 : 0}
-								y={timelineHeight * 2}
-								fill={strokeColor}
-							>
-								{interval.label}
-							</text>
-							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
-						</g>
-					))}
-			</svg>
-		</div>
-	);
-}
-
-export default TimelineV3;

frontend/src/components/TimelineV3/utils.ts

@@ -1,93 +0,0 @@
-import {
-	IIntervalUnit,
-	Interval,
-	INTERVAL_UNITS,
-	resolveTimeFromInterval,
-} from 'components/TimelineV2/utils';
-import { toFixed } from 'utils/toFixed';
-
-export type { Interval };
-
-/** Fewer intervals than TimelineV2 for a cleaner flamegraph ruler. */
-export function getMinimumIntervalsBasedOnWidth(width: number): number {
-	if (width < 640) {
-		return 3;
-	}
-	if (width < 768) {
-		return 4;
-	}
-	if (width < 1024) {
-		return 5;
-	}
-	return 6;
-}
-
-/**
- * Computes timeline intervals with offset-aware labels.
- * Labels reflect absolute time from trace start (offsetTimestamp + elapsed),
- * so when zoomed into a window, the first tick shows e.g. "50ms" not "0ms".
- */
-export function getIntervals(
-	intervalSpread: number,
-	baseSpread: number,
-	offsetTimestamp: number,
-): Interval[] {
-	const integerPartString = intervalSpread.toString().split('.')[0];
-	const integerPartLength = integerPartString.length;
-
-	const intervalSpreadNormalized =
-		intervalSpread < 1.0
-			? intervalSpread
-			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
-			  10 ** (integerPartLength - 1);
-
-	// Unit must suit both: (1) tick granularity (intervalSpread) and (2) label magnitude
-	// (offsetTimestamp). When zoomed deep into a trace, labels show offsetTimestamp + elapsed,
-	// so we must pick a unit where that value is readable (e.g. "500.00s" not "500000.00ms").
-	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
-	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		const standardInterval = INTERVAL_UNITS[idx];
-		if (valueForUnitSelection * standardInterval.multiplier >= 1) {
-			intervalUnit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-
-	const intervals: Interval[] = [
-		{
-			label: `${toFixed(
-				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
-				2,
-			)}${intervalUnit.name}`,
-			percentage: 0,
-		},
-	];
-
-	let tempBaseSpread = baseSpread;
-	let elapsedIntervals = 0;
-
-	while (tempBaseSpread && intervals.length < 20) {
-		let intervalTime: number;
-
-		if (tempBaseSpread <= 1.5 * intervalSpreadNormalized) {
-			intervalTime = elapsedIntervals + tempBaseSpread;
-			tempBaseSpread = 0;
-		} else {
-			intervalTime = elapsedIntervals + intervalSpreadNormalized;
-			tempBaseSpread -= intervalSpreadNormalized;
-		}
-
-		elapsedIntervals = intervalTime;
-		const labelTime = offsetTimestamp + intervalTime;
-
-		intervals.push({
-			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
-				intervalUnit.name
-			}`,
-			percentage: (intervalTime / baseSpread) * 100,
-		});
-	}
-
-	return intervals;
-}

frontend/src/constants/theme.ts

@@ -33,125 +33,6 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
-	traceDetailColorsV3: {
-		// Blues
-		dodgerBlue: '#2F80ED',
-		royalBlue: '#3366E6',
-		steelBlue: '#4682B4',
-
-		// Teals / Cyans
-		turquoise: '#00CEC9',
-		lagoon: '#1ABC9C',
-		cyanBright: '#22A6F2',
-
-		// Greens
-		emeraldGreen: '#27AE60',
-		mediumSeaGreen: '#3CB371',
-		limeGreen: '#A3E635',
-
-		// Yellows / Golds
-		festivalYellow: '#F2C94C',
-		sunflower: '#FFD93D',
-		warmAmber: '#FFCA28',
-
-		// Purples / Violets
-		mediumPurple: '#BB6BD9',
-		royalPurple: '#9B51E0',
-		orchid: '#DA77F2',
-
-		// Accent
-		neonViolet: '#C77DFF',
-		electricPurple: '#6C5CE7',
-		arcticBlue: '#48DBFB',
-
-		// Blues extended
-		blue1: '#1F63E0',
-		blue2: '#3A7AED',
-		blue3: '#5A9DF5',
-		blue4: '#2874A6',
-		blue5: '#2E86C1',
-		blue6: '#3498DB',
-
-		// Cyans
-		cyan1: '#00B0AA',
-		cyan2: '#33D6C2',
-		cyan3: '#66E9DA',
-
-		// Greens extended
-		green1: '#1E8449',
-		green2: '#2ECC71',
-		green3: '#58D68D',
-		green4: '#229954',
-		green5: '#27AE60',
-		green6: '#52BE80',
-
-		// Forest
-		forest1: '#27AE60',
-		forest2: '#2ECC71',
-		forest3: '#58D68D',
-
-		// Lime
-		lime1: '#A3E635',
-		lime2: '#B9F18D',
-		lime3: '#D4FFB0',
-
-		// Teals
-		teal1: '#009688',
-		teal2: '#1ABC9C',
-		teal3: '#48C9B0',
-		teal4: '#1ABC9C',
-		teal5: '#48C9B0',
-		teal6: '#76D7C4',
-
-		// Yellows
-		yellow1: '#F1C40F',
-		yellow2: '#F7DC6F',
-		yellow3: '#F9E79F',
-
-		// Gold
-		gold1: '#F39C12',
-		gold2: '#F1C40F',
-		gold3: '#F7DC6F',
-		gold4: '#B7950B',
-		gold5: '#F1C40F',
-		gold6: '#F4D03F',
-
-		// Mustard
-		mustard1: '#F1C40F',
-		mustard2: '#F7DC6F',
-		mustard3: '#F9E79F',
-
-		// Aqua
-		aqua1: '#00BFFF',
-		aqua2: '#1E90FF',
-		aqua3: '#63B8FF',
-
-		// Purple extended
-		purple1: '#8E44AD',
-		purple2: '#9B59B6',
-		purple3: '#BB8FCE',
-
-		violet1: '#8E44AD',
-		violet2: '#9B59B6',
-		violet3: '#BB8FCE',
-		violet4: '#7D3C98',
-		violet5: '#8E44AD',
-		violet6: '#9B59B6',
-
-		// Lavender
-		lavender1: '#9B59B6',
-		lavender2: '#AF7AC5',
-		lavender3: '#C39BD3',
-
-		// Oranges (safe ones, not red-ish)
-		orange4: '#D35400',
-		orange5: '#E67E22',
-		orange6: '#EB984E',
-
-		coral1: '#E67E22',
-		coral2: '#F39C12',
-		coral3: '#F5B041',
-	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.styles.scss

@@ -1,60 +0,0 @@
-.event-tooltip-content {
-	font-family: Inter, sans-serif;
-	font-size: 12px;
-	color: #fff;
-	max-width: 300px;
-
-	&__header {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		background: rgba(255, 255, 255, 0.1);
-		border-radius: 3px;
-		padding: 2px 6px;
-		font-size: 10px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: rgba(255, 255, 255, 0.7);
-		margin-bottom: 6px;
-	}
-
-	&__name {
-		font-weight: 600;
-		margin-bottom: 2px;
-		color: rgb(14, 165, 233);
-
-		&.error {
-			color: rgb(239, 68, 68);
-		}
-	}
-
-	&__time {
-		font-size: 11px;
-		opacity: 0.8;
-		margin-bottom: 4px;
-	}
-
-	&__divider {
-		border-top: 1px solid rgba(255, 255, 255, 0.1);
-		margin: 6px 0;
-	}
-
-	&__attributes {
-		font-size: 11px;
-	}
-
-	&__kv {
-		margin-bottom: 2px;
-		line-height: 1.4;
-		word-break: break-all;
-	}
-
-	&__key {
-		opacity: 0.6;
-	}
-
-	&__value {
-		opacity: 0.9;
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.tsx

@@ -1,49 +0,0 @@
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { Diamond } from 'lucide-react';
-import { toFixed } from 'utils/toFixed';
-
-import './EventTooltipContent.styles.scss';
-
-export interface EventTooltipContentProps {
-	eventName: string;
-	timeOffsetMs: number;
-	isError: boolean;
-	attributeMap: Record<string, string>;
-}
-
-export function EventTooltipContent({
-	eventName,
-	timeOffsetMs,
-	isError,
-	attributeMap,
-}: EventTooltipContentProps): JSX.Element {
-	const { time, timeUnitName } = convertTimeToRelevantUnit(timeOffsetMs);
-
-	return (
-		<div className="event-tooltip-content">
-			<div className="event-tooltip-content__header">
-				<Diamond size={10} />
-				<span>EVENT DETAILS</span>
-			</div>
-			<div className={`event-tooltip-content__name ${isError ? 'error' : ''}`}>
-				{eventName}
-			</div>
-			<div className="event-tooltip-content__time">
-				{toFixed(time, 2)} {timeUnitName} from start
-			</div>
-			{Object.keys(attributeMap).length > 0 && (
-				<>
-					<div className="event-tooltip-content__divider" />
-					<div className="event-tooltip-content__attributes">
-						{Object.entries(attributeMap).map(([key, value]) => (
-							<div key={key} className="event-tooltip-content__kv">
-								<span className="event-tooltip-content__key">{key}:</span>{' '}
-								<span className="event-tooltip-content__value">{value}</span>
-							</div>
-						))}
-					</div>
-				</>
-			)}
-		</div>
-	);
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.styles.scss

@@ -1,28 +0,0 @@
-.span-hover-card-popover {
-	.ant-popover-inner {
-		background-color: rgba(30, 30, 30, 0.95);
-		padding: 8px 12px;
-		border-radius: 4px;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-		border: none;
-	}
-
-	.ant-popover-inner-content {
-		padding: 0;
-	}
-}
-
-.span-hover-card-content {
-	font-family: Inter, sans-serif;
-	font-size: 12px;
-	color: #fff;
-
-	&__name {
-		font-weight: 600;
-		margin-bottom: 4px;
-	}
-
-	&__row {
-		line-height: 1.5;
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -1,94 +0,0 @@
-import { ReactNode } from 'react';
-import { Popover } from 'antd';
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { Span } from 'types/api/trace/getTraceV2';
-import { toFixed } from 'utils/toFixed';
-
-import './SpanHoverCard.styles.scss';
-
-interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-export interface SpanTooltipContentProps {
-	spanName: string;
-	color: string;
-	hasError: boolean;
-	relativeStartMs: number;
-	durationMs: number;
-}
-
-export function SpanTooltipContent({
-	spanName,
-	color,
-	hasError,
-	relativeStartMs,
-	durationMs,
-}: SpanTooltipContentProps): JSX.Element {
-	const { time: formattedDuration, timeUnitName } = convertTimeToRelevantUnit(
-		durationMs,
-	);
-
-	return (
-		<div className="span-hover-card-content">
-			<div className="span-hover-card-content__name" style={{ color }}>
-				{spanName}
-			</div>
-			<div className="span-hover-card-content__row">
-				Status: {hasError ? 'error' : 'ok'}
-			</div>
-			<div className="span-hover-card-content__row">
-				Start: {toFixed(relativeStartMs, 2)} ms
-			</div>
-			<div className="span-hover-card-content__row">
-				Duration: {toFixed(formattedDuration, 2)} {timeUnitName}
-			</div>
-		</div>
-	);
-}
-
-interface SpanHoverCardProps {
-	span: Span;
-	traceMetadata: ITraceMetadata;
-	children: ReactNode;
-}
-
-function SpanHoverCard({
-	span,
-	traceMetadata,
-	children,
-}: SpanHoverCardProps): JSX.Element {
-	const durationMs = span.durationNano / 1e6;
-	const relativeStartMs = span.timestamp - traceMetadata.startTime;
-
-	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
-	if (span.hasError) {
-		color = 'var(--bg-cherry-500)';
-	}
-
-	return (
-		<Popover
-			mouseEnterDelay={0.2}
-			content={
-				<SpanTooltipContent
-					spanName={span.name}
-					color={color}
-					hasError={span.hasError}
-					relativeStartMs={relativeStartMs}
-					durationMs={durationMs}
-				/>
-			}
-			trigger="hover"
-			rootClassName="span-hover-card-popover"
-			autoAdjustOverflow
-			arrow={false}
-		>
-			{children}
-		</Popover>
-	);
-}
-
-export default SpanHoverCard;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.tsx

@@ -1,250 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import TimelineV3 from 'components/TimelineV3/TimelineV3';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { EventTooltipContent } from '../SpanHoverCard/EventTooltipContent';
-import { SpanTooltipContent } from '../SpanHoverCard/SpanHoverCard';
-import { DEFAULT_ROW_HEIGHT } from './constants';
-import { useCanvasSetup } from './hooks/useCanvasSetup';
-import { useFlamegraphDrag } from './hooks/useFlamegraphDrag';
-import { useFlamegraphDraw } from './hooks/useFlamegraphDraw';
-import { useFlamegraphHover } from './hooks/useFlamegraphHover';
-import { useFlamegraphZoom } from './hooks/useFlamegraphZoom';
-import { useScrollToSpan } from './hooks/useScrollToSpan';
-import { useVisualLayoutWorker } from './hooks/useVisualLayoutWorker';
-import { EventRect, FlamegraphCanvasProps, SpanRect } from './types';
-
-function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
-	const { spans, traceMetadata, firstSpanAtFetchLevel, onSpanClick } = props;
-
-	const isDarkMode = useIsDarkMode(); //TODO: see if can be removed or use a new hook
-	const canvasRef = useRef<HTMLCanvasElement>(null);
-	const containerRef = useRef<HTMLDivElement>(null);
-	const spanRectsRef = useRef<SpanRect[]>([]);
-	const eventRectsRef = useRef<EventRect[]>([]);
-
-	const [viewStartTs, setViewStartTs] = useState<number>(
-		traceMetadata.startTime,
-	);
-	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
-	const [scrollTop, setScrollTop] = useState<number>(0);
-	const [rowHeight, setRowHeight] = useState<number>(DEFAULT_ROW_HEIGHT);
-
-	// Mutable refs for zoom and drag hooks to read during rAF / mouse callbacks
-	const viewStartRef = useRef(viewStartTs);
-	const viewEndRef = useRef(viewEndTs);
-	const rowHeightRef = useRef(rowHeight);
-	const scrollTopRef = useRef(scrollTop);
-
-	useEffect(() => {
-		viewStartRef.current = viewStartTs;
-	}, [viewStartTs]);
-
-	useEffect(() => {
-		viewEndRef.current = viewEndTs;
-	}, [viewEndTs]);
-
-	useEffect(() => {
-		rowHeightRef.current = rowHeight;
-	}, [rowHeight]);
-
-	useEffect(() => {
-		scrollTopRef.current = scrollTop;
-	}, [scrollTop]);
-
-	useEffect(() => {
-		//TODO: see if this can be removed as once loaded the view start and end ts will not change
-		setViewStartTs(traceMetadata.startTime);
-		setViewEndTs(traceMetadata.endTime);
-		viewStartRef.current = traceMetadata.startTime;
-		viewEndRef.current = traceMetadata.endTime;
-	}, [traceMetadata.startTime, traceMetadata.endTime]);
-
-	const { layout, isComputing: _isComputing } = useVisualLayoutWorker(spans);
-
-	const totalHeight = layout.totalVisualRows * rowHeight;
-
-	const { isOverFlamegraphRef } = useFlamegraphZoom({
-		canvasRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	});
-
-	const {
-		handleMouseDown,
-		handleMouseMove: handleDragMouseMove,
-		handleMouseUp,
-		handleDragMouseLeave,
-		isDraggingRef,
-	} = useFlamegraphDrag({
-		canvasRef,
-		containerRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		setViewStartTs,
-		setViewEndTs,
-		scrollTopRef,
-		setScrollTop,
-		totalHeight,
-	});
-
-	const {
-		hoveredSpanId,
-		hoveredEventKey,
-		handleHoverMouseMove,
-		handleHoverMouseLeave,
-		handleMouseDownForClick,
-		handleClick,
-		tooltipContent,
-	} = useFlamegraphHover({
-		canvasRef,
-		spanRectsRef,
-		eventRectsRef,
-		traceMetadata,
-		viewStartTs,
-		viewEndTs,
-		isDraggingRef,
-		onSpanClick,
-		isDarkMode,
-	});
-
-	const { drawFlamegraph } = useFlamegraphDraw({
-		canvasRef,
-		containerRef,
-		spans: layout.visualRows,
-		connectors: layout.connectors,
-		viewStartTs,
-		viewEndTs,
-		scrollTop,
-		rowHeight,
-		selectedSpanId: firstSpanAtFetchLevel || undefined,
-		hoveredSpanId: hoveredSpanId ?? '',
-		isDarkMode,
-		spanRectsRef,
-		eventRectsRef,
-		hoveredEventKey,
-	});
-
-	useScrollToSpan({
-		firstSpanAtFetchLevel,
-		spans: layout.visualRows,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	});
-
-	useCanvasSetup(canvasRef, containerRef, drawFlamegraph);
-
-	const handleMouseMove = useCallback(
-		(e: React.MouseEvent): void => {
-			handleDragMouseMove(e);
-			handleHoverMouseMove(e);
-		},
-		[handleDragMouseMove, handleHoverMouseMove],
-	);
-
-	const handleMouseLeave = useCallback((): void => {
-		isOverFlamegraphRef.current = false;
-		handleDragMouseLeave();
-		handleHoverMouseLeave();
-	}, [isOverFlamegraphRef, handleDragMouseLeave, handleHoverMouseLeave]);
-
-	const tooltipElement = tooltipContent
-		? createPortal(
-				<div
-					className="span-hover-card-popover"
-					style={{
-						position: 'fixed',
-						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
-						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),
-						zIndex: 1000,
-						backgroundColor: 'rgba(30, 30, 30, 0.95)',
-						padding: '8px 12px',
-						borderRadius: 4,
-						boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-						pointerEvents: 'none',
-					}}
-				>
-					{tooltipContent.event ? (
-						<EventTooltipContent
-							eventName={tooltipContent.event.name}
-							timeOffsetMs={tooltipContent.event.timeOffsetMs}
-							isError={tooltipContent.event.isError}
-							attributeMap={tooltipContent.event.attributeMap}
-						/>
-					) : (
-						<SpanTooltipContent
-							spanName={tooltipContent.spanName}
-							color={tooltipContent.spanColor}
-							hasError={tooltipContent.status === 'error'}
-							relativeStartMs={tooltipContent.startMs}
-							durationMs={tooltipContent.durationMs}
-						/>
-					)}
-				</div>,
-				document.body,
-		  )
-		: null;
-
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				height: '100%',
-				padding: '0 15px',
-			}}
-		>
-			{tooltipElement}
-			<TimelineV3
-				startTimestamp={viewStartTs}
-				endTimestamp={viewEndTs}
-				offsetTimestamp={viewStartTs - traceMetadata.startTime}
-				timelineHeight={10}
-			/>
-			<div
-				ref={containerRef}
-				style={{
-					flex: 1,
-					overflow: 'hidden',
-					position: 'relative',
-				}}
-				onMouseEnter={(): void => {
-					isOverFlamegraphRef.current = true;
-				}}
-				onMouseLeave={handleMouseLeave}
-			>
-				<canvas
-					ref={canvasRef}
-					style={{
-						display: 'block',
-						width: '100%',
-						cursor: 'grab',
-					}}
-					onMouseDown={(e): void => {
-						handleMouseDown(e);
-						handleMouseDownForClick(e);
-					}}
-					onMouseMove={handleMouseMove}
-					onMouseUp={handleMouseUp}
-					onClick={handleClick}
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default FlamegraphCanvas;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -1,108 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useHistory, useLocation, useParams } from 'react-router-dom';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
-
-import FlamegraphCanvas from './FlamegraphCanvas';
-
-//TODO: analyse if this is needed or not and move to separate file if needed else delete this enum.
-enum TraceFlamegraphState {
-	LOADING = 'LOADING',
-	SUCCESS = 'SUCCESS',
-	NO_DATA = 'NO_DATA',
-	ERROR = 'ERROR',
-	FETCHING_WITH_OLD_DATA = 'FETCHING_WITH_OLD_DATA',
-}
-
-function TraceFlamegraph(): JSX.Element {
-	const { id: traceId } = useParams<TraceDetailFlamegraphURLProps>();
-	const urlQuery = useUrlQuery();
-	const history = useHistory();
-	const { search } = useLocation();
-	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
-		urlQuery.get('spanId') || '',
-	);
-
-	useEffect(() => {
-		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
-	}, [urlQuery]);
-
-	const handleSpanClick = useCallback(
-		(spanId: string): void => {
-			setFirstSpanAtFetchLevel(spanId);
-			const searchParams = new URLSearchParams(search);
-			//tood: use from query params constants
-			if (searchParams.get('spanId') !== spanId) {
-				searchParams.set('spanId', spanId);
-				history.replace({ search: searchParams.toString() });
-			}
-		},
-		[history, search],
-	);
-
-	const { data, isFetching, error } = useGetTraceFlamegraph({
-		traceId,
-		// selectedSpanId: firstSpanAtFetchLevel,
-		limit: 120000,
-	});
-
-	const flamegraphState = useMemo(() => {
-		if (isFetching) {
-			if (data?.payload?.spans && data.payload.spans.length > 0) {
-				return TraceFlamegraphState.FETCHING_WITH_OLD_DATA;
-			}
-			return TraceFlamegraphState.LOADING;
-		}
-		if (error) {
-			return TraceFlamegraphState.ERROR;
-		}
-		if (data?.payload?.spans && data.payload.spans.length === 0) {
-			return TraceFlamegraphState.NO_DATA;
-		}
-		return TraceFlamegraphState.SUCCESS;
-	}, [error, isFetching, data]);
-
-	const spans = useMemo(() => data?.payload?.spans || [], [
-		data?.payload?.spans,
-	]);
-
-	const content = useMemo(() => {
-		switch (flamegraphState) {
-			case TraceFlamegraphState.LOADING:
-				return <div>Loading...</div>;
-			case TraceFlamegraphState.ERROR:
-				return <div>Error loading flamegraph</div>;
-			case TraceFlamegraphState.NO_DATA:
-				return <div>No data found for trace {traceId}</div>;
-			case TraceFlamegraphState.SUCCESS:
-			case TraceFlamegraphState.FETCHING_WITH_OLD_DATA:
-				return (
-					<FlamegraphCanvas
-						spans={spans}
-						firstSpanAtFetchLevel={firstSpanAtFetchLevel}
-						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
-						onSpanClick={handleSpanClick}
-						traceMetadata={{
-							startTime: data?.payload?.startTimestampMillis || 0,
-							endTime: data?.payload?.endTimestampMillis || 0,
-						}}
-					/>
-				);
-			default:
-				return <div>Fetching the trace...</div>;
-		}
-	}, [
-		data?.payload?.endTimestampMillis,
-		data?.payload?.startTimestampMillis,
-		firstSpanAtFetchLevel,
-		flamegraphState,
-		spans,
-		traceId,
-		handleSpanClick,
-	]);
-
-	return <>{content}</>;
-}
-
-export default TraceFlamegraph;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/computeVisualLayout.test.ts

@@ -1,475 +0,0 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { computeVisualLayout } from '../computeVisualLayout';
-
-function makeSpan(
-	overrides: Partial<FlamegraphSpan> & {
-		spanId: string;
-		timestamp: number;
-		durationNano: number;
-	},
-): FlamegraphSpan {
-	return {
-		parentSpanId: '',
-		traceId: 'trace-1',
-		hasError: false,
-		serviceName: 'svc',
-		name: 'op',
-		level: 0,
-		event: [],
-		...overrides,
-	};
-}
-
-describe('computeVisualLayout', () => {
-	it('should handle empty input', () => {
-		const layout = computeVisualLayout([]);
-		expect(layout.totalVisualRows).toBe(0);
-		expect(layout.visualRows).toEqual([]);
-	});
-
-	it('should handle single root, no children — 1 visual row', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 100e6,
-		});
-		const layout = computeVisualLayout([[root]]);
-		expect(layout.totalVisualRows).toBe(1);
-		expect(layout.visualRows[0]).toEqual([root]);
-		expect(layout.spanToVisualRow['root']).toBe(0);
-	});
-
-	it('should keep non-overlapping siblings on the same row (compact)', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 500e6,
-		});
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 100e6,
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 200,
-			durationNano: 100e6,
-		});
-		const c = makeSpan({
-			spanId: 'c',
-			parentSpanId: 'root',
-			timestamp: 400,
-			durationNano: 100e6,
-		});
-
-		const layout = computeVisualLayout([[root], [a, b, c]]);
-
-		// root on row 0, all children on row 1
-		expect(layout.totalVisualRows).toBe(2);
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['a']).toBe(1);
-		expect(layout.spanToVisualRow['b']).toBe(1);
-		expect(layout.spanToVisualRow['c']).toBe(1);
-	});
-
-	it('should pack non-overlapping siblings into shared lanes (greedy packing)', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 300e6,
-		});
-		// A and B overlap; C does not overlap with either
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 100e6, // ends at 100ms
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 50,
-			durationNano: 100e6, // starts at 50ms < 100ms end of A → overlap → lane 1
-		});
-		const c = makeSpan({
-			spanId: 'c',
-			parentSpanId: 'root',
-			timestamp: 200,
-			durationNano: 100e6, // 200 >= 100, fits lane 0 with A
-		});
-
-		const layout = computeVisualLayout([[root], [a, b, c]]);
-
-		// root on row 0, C placed first (latest) → row 1, B doesn't overlap C → row 1, A overlaps B → row 2
-		expect(layout.totalVisualRows).toBe(3);
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['c']).toBe(1);
-		expect(layout.spanToVisualRow['b']).toBe(1);
-		expect(layout.spanToVisualRow['a']).toBe(2);
-	});
-
-	it('should handle full overlap — all siblings get own row', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-
-		const layout = computeVisualLayout([[root], [a, b]]);
-
-		expect(layout.totalVisualRows).toBe(3);
-		expect(layout.spanToVisualRow['a']).toBe(1);
-		expect(layout.spanToVisualRow['b']).toBe(2);
-	});
-
-	it('should stack children correctly below overlapping parents', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 300e6,
-		});
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 50,
-			durationNano: 200e6,
-		});
-		// Child of A
-		const childA = makeSpan({
-			spanId: 'childA',
-			parentSpanId: 'a',
-			timestamp: 10,
-			durationNano: 50e6,
-		});
-		// Child of B
-		const childB = makeSpan({
-			spanId: 'childB',
-			parentSpanId: 'b',
-			timestamp: 60,
-			durationNano: 50e6,
-		});
-
-		const layout = computeVisualLayout([[root], [a, b], [childA, childB]]);
-
-		// DFS processes b's subtree first (latest):
-		// root → row 0
-		// b → row 1 (parentRow 0 + 1)
-		// childB → row 2 (parentRow 1 + 1)
-		// a → try row 1 (parentRow 0 + 1), overlaps b → try row 2, overlaps childB → row 3
-		// childA → row 4 (parentRow 3 + 1)
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['b']).toBe(1);
-		expect(layout.spanToVisualRow['childB']).toBe(2);
-		expect(layout.spanToVisualRow['a']).toBe(3);
-		expect(layout.spanToVisualRow['childA']).toBe(4);
-		expect(layout.totalVisualRows).toBe(5);
-	});
-
-	it('should handle multiple roots as a sibling group', () => {
-		// Two overlapping roots
-		const r1 = makeSpan({
-			spanId: 'r1',
-			timestamp: 0,
-			durationNano: 100e6,
-		});
-		const r2 = makeSpan({
-			spanId: 'r2',
-			timestamp: 50,
-			durationNano: 100e6,
-		});
-
-		const layout = computeVisualLayout([[r1, r2]]);
-
-		expect(layout.spanToVisualRow['r1']).toBe(0);
-		expect(layout.spanToVisualRow['r2']).toBe(1);
-		expect(layout.totalVisualRows).toBe(2);
-	});
-
-	it('should produce compact layout for deep nesting without overlap', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 1000e6,
-		});
-		const child = makeSpan({
-			spanId: 'child',
-			parentSpanId: 'root',
-			timestamp: 10,
-			durationNano: 500e6,
-		});
-		const grandchild = makeSpan({
-			spanId: 'grandchild',
-			parentSpanId: 'child',
-			timestamp: 20,
-			durationNano: 200e6,
-		});
-
-		const layout = computeVisualLayout([[root], [child], [grandchild]]);
-
-		// No overlap at any level → visual rows == tree depth
-		expect(layout.totalVisualRows).toBe(3);
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['child']).toBe(1);
-		expect(layout.spanToVisualRow['grandchild']).toBe(2);
-	});
-
-	it('should pack many sequential siblings into 1 row (no diagonal staircase)', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 500e6,
-		});
-		// 6 sequential children — like checkoutservice/PlaceOrder scenario
-		const spans = [
-			makeSpan({
-				spanId: 's1',
-				parentSpanId: 'root',
-				timestamp: 3,
-				durationNano: 30e6,
-			}),
-			makeSpan({
-				spanId: 's2',
-				parentSpanId: 'root',
-				timestamp: 35,
-				durationNano: 4e6,
-			}),
-			makeSpan({
-				spanId: 's3',
-				parentSpanId: 'root',
-				timestamp: 39,
-				durationNano: 1e6,
-			}),
-			makeSpan({
-				spanId: 's4',
-				parentSpanId: 'root',
-				timestamp: 40,
-				durationNano: 4e6,
-			}),
-			makeSpan({
-				spanId: 's5',
-				parentSpanId: 'root',
-				timestamp: 44,
-				durationNano: 5e6,
-			}),
-			makeSpan({
-				spanId: 's6',
-				parentSpanId: 'root',
-				timestamp: 49,
-				durationNano: 1e6,
-			}),
-		];
-
-		const layout = computeVisualLayout([[root], spans]);
-
-		// All 6 sequential siblings should share 1 row
-		expect(layout.totalVisualRows).toBe(2);
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		for (const span of spans) {
-			expect(layout.spanToVisualRow[span.spanId]).toBe(1);
-		}
-	});
-
-	it('should keep children below parents even with misparented spans', () => {
-		// Simulates the dd_sig2 bug: /route spans have parentSpanId pointing
-		// to the wrong ancestor, but they are at level 2 in the spans[][] input.
-		// Level-based packing must place them below level 1 regardless.
-		const httpGet = makeSpan({
-			spanId: 'http-get',
-			timestamp: 0,
-			durationNano: 500e6,
-		});
-		const route = makeSpan({
-			spanId: 'route',
-			parentSpanId: 'some-wrong-ancestor', // misparented!
-			timestamp: 10,
-			durationNano: 200e6,
-		});
-
-		const layout = computeVisualLayout([[httpGet], [route]]);
-
-		// httpGet at level 0 → row 0, route at level 1 → row 1
-		expect(layout.spanToVisualRow['http-get']).toBe(0);
-		expect(layout.spanToVisualRow['route']).toBe(1);
-		expect(layout.totalVisualRows).toBe(2);
-	});
-
-	it('should keep parent-child pairs adjacent when sibling subtrees overlap', () => {
-		// Multiple overlapping parents each with a child — the subtree-unit
-		// guarantee means every parent→child gap should be exactly 1.
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 500e6,
-		});
-		// Three overlapping HTTP GET children of root, each with its own /route child
-		const get1 = makeSpan({
-			spanId: 'get1',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-		const route1 = makeSpan({
-			spanId: 'route1',
-			parentSpanId: 'get1',
-			timestamp: 10,
-			durationNano: 180e6,
-		});
-		const get2 = makeSpan({
-			spanId: 'get2',
-			parentSpanId: 'root',
-			timestamp: 50,
-			durationNano: 200e6,
-		});
-		const route2 = makeSpan({
-			spanId: 'route2',
-			parentSpanId: 'get2',
-			timestamp: 60,
-			durationNano: 180e6,
-		});
-		const get3 = makeSpan({
-			spanId: 'get3',
-			parentSpanId: 'root',
-			timestamp: 100,
-			durationNano: 200e6,
-		});
-		const route3 = makeSpan({
-			spanId: 'route3',
-			parentSpanId: 'get3',
-			timestamp: 110,
-			durationNano: 180e6,
-		});
-
-		const layout = computeVisualLayout([
-			[root],
-			[get1, get2, get3],
-			[route1, route2, route3],
-		]);
-
-		// Each parent-child pair should have a gap of exactly 1
-		const get1Row = layout.spanToVisualRow['get1'];
-		const route1Row = layout.spanToVisualRow['route1'];
-		const get2Row = layout.spanToVisualRow['get2'];
-		const route2Row = layout.spanToVisualRow['route2'];
-		const get3Row = layout.spanToVisualRow['get3'];
-		const route3Row = layout.spanToVisualRow['route3'];
-
-		expect(route1Row - get1Row).toBe(1);
-		expect(route2Row - get2Row).toBe(1);
-		expect(route3Row - get3Row).toBe(1);
-	});
-
-	it('should handle mixed levels — overlap at level 2 but not level 1', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 1000e6,
-		});
-		// Non-overlapping children
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 400e6,
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 500,
-			durationNano: 400e6,
-		});
-		// Overlapping grandchildren under A
-		const ga1 = makeSpan({
-			spanId: 'ga1',
-			parentSpanId: 'a',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-		const ga2 = makeSpan({
-			spanId: 'ga2',
-			parentSpanId: 'a',
-			timestamp: 100,
-			durationNano: 200e6,
-		});
-
-		const layout = computeVisualLayout([[root], [a, b], [ga1, ga2]]);
-
-		// root → row 0
-		// a, b → row 1 (no overlap, share row)
-		// ga1 → row 2, ga2 → row 3 (overlap, expanded)
-		// b has no children, so nothing after ga2
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['a']).toBe(1);
-		expect(layout.spanToVisualRow['b']).toBe(1);
-		expect(layout.spanToVisualRow['ga2']).toBe(2);
-		expect(layout.spanToVisualRow['ga1']).toBe(3);
-		expect(layout.totalVisualRows).toBe(4);
-	});
-
-	it('should not place a span where it covers an existing connector point (Check 2)', () => {
-		// Scenario: root has 3 leaf children. Sorted latest-first: C(200), B(100), A(80).
-		//
-		// C placed at row 1 [200, 400].
-		// B overlaps C → placed at row 2 [100, 300]. Connector from row 0→2 at x=100
-		//   passes through row 1, recording connector point at (row 1, x=100).
-		// A [80, 110] does NOT overlap C's span [200, 400] at row 1 (110 < 200),
-		//   so without connector reservation A would fit at row 1.
-		//   But A's span [80, 110) contains the connector point x=100 at row 1.
-		//   Check 2 prevents this placement, pushing A further down.
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 500e6,
-		});
-		const c = makeSpan({
-			spanId: 'c',
-			parentSpanId: 'root',
-			timestamp: 200,
-			durationNano: 200e6, // [200, 400]
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 100,
-			durationNano: 200e6, // [100, 300]
-		});
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 80,
-			durationNano: 30e6, // [80, 110]
-		});
-
-		const layout = computeVisualLayout([[root], [a, b, c]]);
-
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['c']).toBe(1); // latest, placed first
-		expect(layout.spanToVisualRow['b']).toBe(2); // overlaps C → row 2
-
-		// A would fit at row 1 by span overlap alone, but connector point at
-		// (row 1, x=100) falls within A's span [80, 110). Check 2 pushes A down.
-		const aRow = layout.spanToVisualRow['a']!;
-		expect(aRow).toBeGreaterThan(1); // must NOT be at row 1
-		expect(aRow).toBe(3); // next free row after B at row 2 (A overlaps B)
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/drawUtils.test.ts

@@ -1,539 +0,0 @@
-import { DASHED_BORDER_LINE_DASH, MIN_WIDTH_FOR_NAME } from '../constants';
-import type { FlamegraphRowMetrics } from '../utils';
-import { getFlamegraphRowMetrics } from '../utils';
-import { drawEventDot, drawSpanBar, getEventDotColor } from '../utils';
-import { MOCK_SPAN } from './testUtils';
-
-jest.mock('container/TraceDetail/utils', () => ({
-	convertTimeToRelevantUnit: (): { time: number; timeUnitName: string } => ({
-		time: 50,
-		timeUnitName: 'ms',
-	}),
-}));
-
-/** Minimal 2D context for createStripePattern's internal canvas (jsdom getContext often returns null) */
-const mockPatternCanvasCtx = {
-	beginPath: jest.fn(),
-	moveTo: jest.fn(),
-	lineTo: jest.fn(),
-	stroke: jest.fn(),
-	globalAlpha: 1,
-};
-
-const originalCreateElement = document.createElement.bind(document);
-document.createElement = function (
-	tagName: string,
-): ReturnType<typeof originalCreateElement> {
-	const el = originalCreateElement(tagName);
-	if (tagName.toLowerCase() === 'canvas') {
-		(el as HTMLCanvasElement).getContext = (() =>
-			mockPatternCanvasCtx as unknown) as HTMLCanvasElement['getContext'];
-	}
-	return el;
-};
-
-function createMockCtx(): jest.Mocked<CanvasRenderingContext2D> {
-	return ({
-		beginPath: jest.fn(),
-		roundRect: jest.fn(),
-		fill: jest.fn(),
-		stroke: jest.fn(),
-		save: jest.fn(),
-		restore: jest.fn(),
-		translate: jest.fn(),
-		rotate: jest.fn(),
-		fillRect: jest.fn(),
-		strokeRect: jest.fn(),
-		setLineDash: jest.fn(),
-		measureText: jest.fn(
-			(text: string) => ({ width: text.length * 6 } as TextMetrics),
-		),
-		createPattern: jest.fn(() => ({} as CanvasPattern)),
-		clip: jest.fn(),
-		rect: jest.fn(),
-		fillText: jest.fn(),
-		font: '',
-		fillStyle: '',
-		strokeStyle: '',
-		textAlign: '',
-		textBaseline: '',
-		lineWidth: 0,
-		globalAlpha: 1,
-	} as unknown) as jest.Mocked<CanvasRenderingContext2D>;
-}
-
-const METRICS: FlamegraphRowMetrics = getFlamegraphRowMetrics(24);
-
-describe('Canvas Draw Utils', () => {
-	describe('drawSpanBar', () => {
-		it('draws rect + fill for normal span (no selected/hovered)', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, event: [] },
-				x: 10,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray,
-				eventRectsArray: [],
-				color: '#1890ff',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.beginPath).toHaveBeenCalled();
-			expect(ctx.roundRect).toHaveBeenCalledWith(10, 1, 100, 22, 2);
-			expect(ctx.fill).toHaveBeenCalled();
-			expect(ctx.stroke).not.toHaveBeenCalled();
-			expect(spanRectsArray).toHaveLength(1);
-			expect(spanRectsArray[0]).toMatchObject({
-				x: 10,
-				y: 1,
-				width: 100,
-				height: 22,
-				level: 0,
-			});
-		});
-
-		it('uses stripe pattern + dashed stroke + 2px when selected', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'sel', event: [] },
-				x: 20,
-				y: 0,
-				width: 80,
-				levelIndex: 1,
-				spanRectsArray,
-				eventRectsArray: [],
-				color: '#2F80ED',
-				isDarkMode: false,
-				metrics: METRICS,
-				selectedSpanId: 'sel',
-			});
-
-			expect(ctx.createPattern).toHaveBeenCalled();
-			expect(ctx.setLineDash).toHaveBeenCalledWith(DASHED_BORDER_LINE_DASH);
-			expect(ctx.strokeStyle).toBe('#2F80ED');
-			expect(ctx.lineWidth).toBe(2);
-			expect(ctx.stroke).toHaveBeenCalled();
-			expect(ctx.setLineDash).toHaveBeenLastCalledWith([]);
-		});
-
-		it('uses stripe pattern + solid stroke + 1px when hovered (not selected)', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'hov', event: [] },
-				x: 30,
-				y: 0,
-				width: 60,
-				levelIndex: 0,
-				spanRectsArray,
-				eventRectsArray: [],
-				color: '#2F80ED',
-				isDarkMode: false,
-				metrics: METRICS,
-				hoveredSpanId: 'hov',
-			});
-
-			expect(ctx.createPattern).toHaveBeenCalled();
-			expect(ctx.setLineDash).not.toHaveBeenCalled();
-			expect(ctx.lineWidth).toBe(1);
-			expect(ctx.stroke).toHaveBeenCalled();
-		});
-
-		it('pushes spanRectsArray with correct dimensions', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'rect-test', event: [] },
-				x: 5,
-				y: 24,
-				width: 200,
-				levelIndex: 2,
-				spanRectsArray,
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(spanRectsArray[0]).toMatchObject({
-				x: 5,
-				y: 25,
-				width: 200,
-				height: 22,
-				level: 2,
-			});
-			expect(spanRectsArray[0].span.spanId).toBe('rect-test');
-		});
-	});
-
-	describe('drawSpanLabel (via drawSpanBar)', () => {
-		it('skips label when width < MIN_WIDTH_FOR_NAME', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'long-span-name', event: [] },
-				x: 0,
-				y: 0,
-				width: MIN_WIDTH_FOR_NAME - 1,
-				levelIndex: 0,
-				spanRectsArray,
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.clip).not.toHaveBeenCalled();
-			expect(ctx.fillText).not.toHaveBeenCalled();
-		});
-
-		it('draws name only when width >= MIN_WIDTH_FOR_NAME but < MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) => ({ width: t.length * 6 } as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'foo', event: [] },
-				x: 0,
-				y: 0,
-				width: 50,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.clip).toHaveBeenCalled();
-			expect(ctx.fillText).toHaveBeenCalled();
-			expect(ctx.textAlign).toBe('left');
-		});
-
-		it('draws name + duration when width >= MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) => ({ width: t.length * 6 } as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'my-span', event: [] },
-				x: 0,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.fillText).toHaveBeenCalledTimes(2);
-			expect(ctx.fillText).toHaveBeenCalledWith(
-				'50ms',
-				expect.any(Number),
-				expect.any(Number),
-			);
-			expect(ctx.fillText).toHaveBeenCalledWith(
-				'my-span',
-				expect.any(Number),
-				expect.any(Number),
-			);
-		});
-	});
-
-	describe('truncateText (via drawSpanBar)', () => {
-		it('uses full text when it fits', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) => ({ width: t.length * 4 } as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'short', event: [] },
-				x: 0,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.fillText).toHaveBeenCalledWith(
-				'short',
-				expect.any(Number),
-				expect.any(Number),
-			);
-		});
-
-		it('truncates text when it exceeds available width', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) =>
-					({
-						width: t.includes('...') ? 24 : t.length * 10,
-					} as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'very-long-span-name', event: [] },
-				x: 0,
-				y: 0,
-				width: 50,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			const fillTextCalls = (ctx.fillText as jest.Mock).mock.calls;
-			const nameArg = fillTextCalls.find((c) => c[0] !== '50ms')?.[0];
-			expect(nameArg).toBeDefined();
-			expect(nameArg).toMatch(/\.\.\.$/);
-		});
-	});
-
-	describe('drawEventDot', () => {
-		it('uses error styling when isError is true', () => {
-			const ctx = createMockCtx();
-			const color = getEventDotColor('#000', true, false);
-
-			drawEventDot({
-				ctx,
-				x: 50,
-				y: 11,
-				color,
-				eventDotSize: 6,
-			});
-
-			expect(ctx.save).toHaveBeenCalled();
-			expect(ctx.translate).toHaveBeenCalledWith(50, 11);
-			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
-			expect(ctx.fillStyle).toBe('rgb(220, 38, 38)');
-			expect(ctx.strokeStyle).toBe('rgb(153, 27, 27)');
-			expect(ctx.fillRect).toHaveBeenCalledWith(-3, -3, 6, 6);
-			expect(ctx.strokeRect).toHaveBeenCalledWith(-3, -3, 6, 6);
-			expect(ctx.restore).toHaveBeenCalled();
-		});
-
-		it('derives color from span color when isError is false', () => {
-			const ctx = createMockCtx();
-			const color = getEventDotColor('rgb(100, 200, 150)', false, false);
-
-			drawEventDot({
-				ctx,
-				x: 0,
-				y: 0,
-				color,
-				eventDotSize: 6,
-			});
-
-			// Darkened by 20% for fill
-			expect(ctx.fillStyle).toBe('rgb(80, 160, 120)');
-			// Darkened by 40% for stroke
-			expect(ctx.strokeStyle).toBe('rgb(60, 120, 90)');
-		});
-
-		it('uses dark mode colors for error', () => {
-			const ctx = createMockCtx();
-			const color = getEventDotColor('#000', true, true);
-
-			drawEventDot({
-				ctx,
-				x: 0,
-				y: 0,
-				color,
-				eventDotSize: 6,
-			});
-
-			expect(ctx.fillStyle).toBe('rgb(239, 68, 68)');
-			expect(ctx.strokeStyle).toBe('rgb(185, 28, 28)');
-		});
-
-		it('falls back to cyan/blue for unparseable span colors', () => {
-			const ctx = createMockCtx();
-			const color = getEventDotColor('hsl(200, 50%, 50%)', false, false);
-
-			drawEventDot({
-				ctx,
-				x: 0,
-				y: 0,
-				color,
-				eventDotSize: 6,
-			});
-
-			expect(ctx.fillStyle).toBe('rgb(6, 182, 212)');
-			expect(ctx.strokeStyle).toBe('rgb(8, 145, 178)');
-		});
-
-		it('calls save, translate, rotate, restore', () => {
-			const ctx = createMockCtx();
-			const color = getEventDotColor('#000', false, false);
-
-			drawEventDot({
-				ctx,
-				x: 10,
-				y: 20,
-				color,
-				eventDotSize: 4,
-			});
-
-			expect(ctx.save).toHaveBeenCalled();
-			expect(ctx.translate).toHaveBeenCalledWith(10, 20);
-			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
-			expect(ctx.restore).toHaveBeenCalled();
-		});
-	});
-
-	describe('createStripePattern (via drawSpanBar)', () => {
-		it('uses pattern when createPattern returns non-null', () => {
-			const ctx = createMockCtx();
-			const mockPattern = {} as CanvasPattern;
-			(ctx.createPattern as jest.Mock).mockReturnValue(mockPattern);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
-				x: 0,
-				y: 0,
-				width: MIN_WIDTH_FOR_NAME - 1,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-				hoveredSpanId: 'p',
-			});
-
-			expect(ctx.createPattern).toHaveBeenCalled();
-			expect(ctx.fillStyle).toBe(mockPattern);
-			expect(ctx.fill).toHaveBeenCalled();
-		});
-
-		it('skips fill when createPattern returns null', () => {
-			const ctx = createMockCtx();
-			(ctx.createPattern as jest.Mock).mockReturnValue(null);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
-				x: 0,
-				y: 0,
-				width: MIN_WIDTH_FOR_NAME - 1,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-				selectedSpanId: 'p',
-			});
-
-			expect(ctx.fill).not.toHaveBeenCalled();
-			expect(ctx.stroke).toHaveBeenCalled();
-		});
-	});
-
-	describe('drawSpanBar with events', () => {
-		it('draws event dots for each span event', () => {
-			const ctx = createMockCtx();
-			const spanWithEvents = {
-				...MOCK_SPAN,
-				event: [
-					{
-						name: 'e1',
-						timeUnixNano: 1_010_000_000,
-						attributeMap: {},
-						isError: false,
-					},
-					{
-						name: 'e2',
-						timeUnixNano: 1_025_000_000,
-						attributeMap: {},
-						isError: true,
-					},
-				],
-			};
-
-			drawSpanBar({
-				ctx,
-				span: spanWithEvents,
-				x: 0,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.save).toHaveBeenCalledTimes(3);
-			expect(ctx.translate).toHaveBeenCalledTimes(2);
-			expect(ctx.fillRect).toHaveBeenCalledTimes(2);
-		});
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/testUtils.ts

@@ -1,54 +0,0 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-/** Minimal FlamegraphSpan for unit tests */
-export const MOCK_SPAN: FlamegraphSpan = {
-	timestamp: 1000,
-	durationNano: 50_000_000, // 50ms
-	spanId: 'span-1',
-	parentSpanId: '',
-	traceId: 'trace-1',
-	hasError: false,
-	serviceName: 'test-service',
-	name: 'test-span',
-	level: 0,
-	event: [],
-};
-
-/** Nested spans structure for findSpanById tests */
-export const MOCK_SPANS: FlamegraphSpan[][] = [
-	[
-		{
-			...MOCK_SPAN,
-			spanId: 'root',
-			parentSpanId: '',
-			level: 0,
-		},
-	],
-	[
-		{
-			...MOCK_SPAN,
-			spanId: 'child-a',
-			parentSpanId: 'root',
-			level: 1,
-		},
-		{
-			...MOCK_SPAN,
-			spanId: 'child-b',
-			parentSpanId: 'root',
-			level: 1,
-		},
-	],
-	[
-		{
-			...MOCK_SPAN,
-			spanId: 'grandchild',
-			parentSpanId: 'child-a',
-			level: 2,
-		},
-	],
-];
-
-export const MOCK_TRACE_METADATA = {
-	startTime: 0,
-	endTime: 1000,
-};

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphDrag.test.ts

@@ -1,144 +0,0 @@
-import React from 'react';
-import { act, renderHook } from '@testing-library/react';
-
-import { useFlamegraphDrag } from '../hooks/useFlamegraphDrag';
-import { MOCK_TRACE_METADATA } from './testUtils';
-
-function createMockCanvas(): HTMLCanvasElement {
-	const canvas = document.createElement('canvas');
-	canvas.getBoundingClientRect = jest.fn(
-		(): DOMRect =>
-			({
-				left: 0,
-				top: 0,
-				width: 800,
-				height: 400,
-				x: 0,
-				y: 0,
-				bottom: 400,
-				right: 800,
-				toJSON: (): Record<string, unknown> => ({}),
-			} as DOMRect),
-	);
-	return canvas;
-}
-
-function createMockContainer(): HTMLDivElement {
-	const div = document.createElement('div');
-	Object.defineProperty(div, 'clientHeight', { value: 400 });
-	return div;
-}
-
-const defaultArgs = {
-	canvasRef: { current: createMockCanvas() },
-	containerRef: { current: createMockContainer() },
-	traceMetadata: MOCK_TRACE_METADATA,
-	viewStartRef: { current: 0 },
-	viewEndRef: { current: 1000 },
-	setViewStartTs: jest.fn(),
-	setViewEndTs: jest.fn(),
-	scrollTopRef: { current: 0 },
-	setScrollTop: jest.fn(),
-	totalHeight: 1000,
-};
-
-describe('useFlamegraphDrag', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		defaultArgs.viewStartRef.current = 0;
-		defaultArgs.viewEndRef.current = 1000;
-		defaultArgs.scrollTopRef.current = 0;
-	});
-
-	it('starts drag state on mousedown', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(true);
-	});
-
-	it('ignores non-left button mousedown', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 1,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(false);
-	});
-
-	it('updates pan/scroll on mousemove', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleMouseMove(({
-				clientX: 150,
-				clientY: 100,
-			} as unknown) as React.MouseEvent);
-		});
-
-		expect(defaultArgs.setViewStartTs).toHaveBeenCalled();
-		expect(defaultArgs.setViewEndTs).toHaveBeenCalled();
-		expect(defaultArgs.setScrollTop).toHaveBeenCalled();
-	});
-
-	it('resets drag state on mouseup', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleMouseUp();
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(false);
-	});
-
-	it('cancels drag on mouseleave', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleDragMouseLeave();
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(false);
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphHover.test.ts

@@ -1,179 +0,0 @@
-import type React from 'react';
-import { act, renderHook } from '@testing-library/react';
-
-import { useFlamegraphHover } from '../hooks/useFlamegraphHover';
-import type { SpanRect } from '../types';
-import { MOCK_SPAN, MOCK_TRACE_METADATA } from './testUtils';
-
-function createMockCanvas(): HTMLCanvasElement {
-	const canvas = document.createElement('canvas');
-	canvas.width = 800;
-	canvas.height = 400;
-	canvas.getBoundingClientRect = jest.fn(
-		(): DOMRect =>
-			({
-				left: 0,
-				top: 0,
-				width: 800,
-				height: 400,
-				x: 0,
-				y: 0,
-				bottom: 400,
-				right: 800,
-				toJSON: (): Record<string, unknown> => ({}),
-			} as DOMRect),
-	);
-	return canvas;
-}
-
-const spanRect: SpanRect = {
-	span: { ...MOCK_SPAN, spanId: 'hover-span', name: 'test-span' },
-	x: 100,
-	y: 50,
-	width: 200,
-	height: 22,
-	level: 0,
-};
-
-const defaultArgs = {
-	canvasRef: { current: createMockCanvas() },
-	spanRectsRef: { current: [spanRect] },
-	eventRectsRef: { current: [] as any[] },
-	traceMetadata: MOCK_TRACE_METADATA,
-	viewStartTs: MOCK_TRACE_METADATA.startTime,
-	viewEndTs: MOCK_TRACE_METADATA.endTime,
-	isDraggingRef: { current: false },
-	onSpanClick: jest.fn(),
-	isDarkMode: false,
-};
-
-describe('useFlamegraphHover', () => {
-	beforeEach(() => {
-		Object.defineProperty(window, 'devicePixelRatio', {
-			configurable: true,
-			value: 1,
-		});
-		jest.clearAllMocks();
-		defaultArgs.spanRectsRef.current = [spanRect];
-		defaultArgs.isDraggingRef.current = false;
-	});
-
-	it('sets hoveredSpanId and tooltipContent when hovering on span', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBe('hover-span');
-		expect(result.current.tooltipContent).not.toBeNull();
-		expect(result.current.tooltipContent?.spanName).toBe('test-span');
-		expect(result.current.tooltipContent?.clientX).toBe(150);
-		expect(result.current.tooltipContent?.clientY).toBe(61);
-	});
-
-	it('clears hover when moving to empty area', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBe('hover-span');
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 10,
-				clientY: 10,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBeNull();
-		expect(result.current.tooltipContent).toBeNull();
-	});
-
-	it('clears hover on mouse leave', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleHoverMouseLeave();
-		});
-
-		expect(result.current.hoveredSpanId).toBeNull();
-		expect(result.current.tooltipContent).toBeNull();
-	});
-
-	it('suppresses click when drag distance exceeds threshold', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDownForClick({
-				clientX: 100,
-				clientY: 50,
-			} as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleClick({
-				clientX: 150,
-				clientY: 100,
-			} as React.MouseEvent);
-		});
-
-		expect(defaultArgs.onSpanClick).not.toHaveBeenCalled();
-	});
-
-	it('calls onSpanClick when clicking on span', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleClick({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(defaultArgs.onSpanClick).toHaveBeenCalledWith('hover-span');
-	});
-
-	it('uses clientX/clientY for tooltip positioning', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 200,
-				clientY: 60,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.tooltipContent?.clientX).toBe(200);
-		expect(result.current.tooltipContent?.clientY).toBe(60);
-	});
-
-	it('does not update hover during drag', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-		defaultArgs.isDraggingRef.current = true;
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBeNull();
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphZoom.test.ts

@@ -1,279 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-
-import { DEFAULT_ROW_HEIGHT, MIN_VISIBLE_SPAN_MS } from '../constants';
-import { useFlamegraphZoom } from '../hooks/useFlamegraphZoom';
-import { MOCK_TRACE_METADATA } from './testUtils';
-
-function createMockCanvas(): HTMLCanvasElement {
-	const canvas = document.createElement('canvas');
-	canvas.width = 800;
-	canvas.height = 400;
-	canvas.getBoundingClientRect = jest.fn(
-		(): DOMRect =>
-			({
-				left: 0,
-				top: 0,
-				width: 800,
-				height: 400,
-				x: 0,
-				y: 0,
-				bottom: 400,
-				right: 800,
-				toJSON: (): Record<string, unknown> => ({}),
-			} as DOMRect),
-	);
-	return canvas;
-}
-
-describe('useFlamegraphZoom', () => {
-	const traceMetadata = { ...MOCK_TRACE_METADATA };
-
-	beforeEach(() => {
-		Object.defineProperty(window, 'devicePixelRatio', {
-			configurable: true,
-			value: 1,
-		});
-	});
-
-	it('handleResetZoom restores traceMetadata.startTime/endTime', () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: 100 };
-		const viewEndRef = { current: 500 };
-		const rowHeightRef = { current: 30 };
-		const canvasRef = { current: createMockCanvas() };
-
-		const { result } = renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		act(() => {
-			result.current.handleResetZoom();
-		});
-
-		expect(setViewStartTs).toHaveBeenCalledWith(traceMetadata.startTime);
-		expect(setViewEndTs).toHaveBeenCalledWith(traceMetadata.endTime);
-		expect(setRowHeight).toHaveBeenCalledWith(DEFAULT_ROW_HEIGHT);
-		expect(viewStartRef.current).toBe(traceMetadata.startTime);
-		expect(viewEndRef.current).toBe(traceMetadata.endTime);
-		expect(rowHeightRef.current).toBe(DEFAULT_ROW_HEIGHT);
-	});
-
-	it('wheel zoom in decreases visible time range', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: traceMetadata.startTime };
-		const viewEndRef = { current: traceMetadata.endTime };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		const initialSpan = viewEndRef.current - viewStartRef.current;
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: -100,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		expect(setViewStartTs).toHaveBeenCalled();
-		expect(setViewEndTs).toHaveBeenCalled();
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			const newSpan = newEnd - newStart;
-			expect(newSpan).toBeLessThan(initialSpan);
-		}
-	});
-
-	it('wheel zoom out increases visible time range', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const halfSpan = (traceMetadata.endTime - traceMetadata.startTime) / 2;
-		const viewStartRef = { current: traceMetadata.startTime + halfSpan * 0.25 };
-		const viewEndRef = { current: traceMetadata.startTime + halfSpan * 0.75 };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		const initialSpan = viewEndRef.current - viewStartRef.current;
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: 100,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		expect(setViewStartTs).toHaveBeenCalled();
-		expect(setViewEndTs).toHaveBeenCalled();
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			const newSpan = newEnd - newStart;
-			expect(newSpan).toBeGreaterThanOrEqual(initialSpan);
-		}
-	});
-
-	it('clamps zoom to MIN_VISIBLE_SPAN_MS', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: traceMetadata.startTime };
-		const viewEndRef = { current: traceMetadata.startTime + 100 };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: 10000,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			const newSpan = newEnd - newStart;
-			expect(newSpan).toBeGreaterThanOrEqual(MIN_VISIBLE_SPAN_MS);
-		}
-	});
-
-	it('clamps viewStart/viewEnd to trace bounds', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: traceMetadata.startTime };
-		const viewEndRef = { current: traceMetadata.endTime };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: -5000,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			expect(newStart).toBeGreaterThanOrEqual(traceMetadata.startTime);
-			expect(newEnd).toBeLessThanOrEqual(traceMetadata.endTime);
-		}
-	});
-
-	it('returns isOverFlamegraphRef', () => {
-		const canvasRef = { current: createMockCanvas() };
-		const { result } = renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef: { current: 0 },
-				viewEndRef: { current: 1000 },
-				rowHeightRef: { current: 24 },
-				setViewStartTs: jest.fn(),
-				setViewEndTs: jest.fn(),
-				setRowHeight: jest.fn(),
-			}),
-		);
-
-		expect(result.current.isOverFlamegraphRef).toBeDefined();
-		expect(result.current.isOverFlamegraphRef.current).toBe(false);
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useScrollToSpan.test.tsx

@@ -1,212 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { useRef } from 'react';
-import { act, render, waitFor } from '@testing-library/react';
-
-import { useScrollToSpan } from '../hooks/useScrollToSpan';
-import { MOCK_SPANS, MOCK_TRACE_METADATA } from './testUtils';
-
-function TestWrapper({
-	firstSpanAtFetchLevel,
-	spans,
-	traceMetadata,
-	setViewStartTs,
-	setViewEndTs,
-	setScrollTop,
-}: {
-	firstSpanAtFetchLevel: string;
-	spans: typeof MOCK_SPANS;
-	traceMetadata: typeof MOCK_TRACE_METADATA;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	setScrollTop: Dispatch<SetStateAction<number>>;
-}): JSX.Element {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const viewStartRef = useRef(traceMetadata.startTime);
-	const viewEndRef = useRef(traceMetadata.endTime);
-	const scrollTopRef = useRef(0);
-
-	useScrollToSpan({
-		firstSpanAtFetchLevel,
-		spans,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight: 24,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	});
-
-	return <div ref={containerRef} data-testid="container" />;
-}
-
-describe('useScrollToSpan', () => {
-	beforeEach(() => {
-		Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
-			configurable: true,
-			value: 400,
-		});
-	});
-
-	it('does not update when firstSpanAtFetchLevel is empty', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		render(
-			<TestWrapper
-				firstSpanAtFetchLevel=""
-				spans={MOCK_SPANS}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(setViewStartTs).not.toHaveBeenCalled();
-			expect(setViewEndTs).not.toHaveBeenCalled();
-			expect(setScrollTop).not.toHaveBeenCalled();
-		});
-	});
-
-	it('does not update when spans are empty', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		render(
-			<TestWrapper
-				firstSpanAtFetchLevel="root"
-				spans={[]}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(setViewStartTs).not.toHaveBeenCalled();
-			expect(setViewEndTs).not.toHaveBeenCalled();
-			expect(setScrollTop).not.toHaveBeenCalled();
-		});
-	});
-
-	it('does not update when target span not found', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		render(
-			<TestWrapper
-				firstSpanAtFetchLevel="nonexistent"
-				spans={MOCK_SPANS}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(setViewStartTs).not.toHaveBeenCalled();
-			expect(setViewEndTs).not.toHaveBeenCalled();
-			expect(setScrollTop).not.toHaveBeenCalled();
-		});
-	});
-
-	it('calls setters when target span found', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		const { getByTestId } = render(
-			<TestWrapper
-				firstSpanAtFetchLevel="grandchild"
-				spans={MOCK_SPANS}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		expect(getByTestId('container')).toBeInTheDocument();
-
-		await waitFor(() => {
-			expect(setViewStartTs).toHaveBeenCalled();
-			expect(setViewEndTs).toHaveBeenCalled();
-			expect(setScrollTop).toHaveBeenCalled();
-		});
-
-		const [viewStart] = setViewStartTs.mock.calls[0];
-		const [viewEnd] = setViewEndTs.mock.calls[0];
-		const [scrollTop] = setScrollTop.mock.calls[0];
-
-		expect(viewEnd - viewStart).toBeGreaterThan(0);
-		expect(viewStart).toBeGreaterThanOrEqual(MOCK_TRACE_METADATA.startTime);
-		expect(viewEnd).toBeLessThanOrEqual(MOCK_TRACE_METADATA.endTime);
-		expect(scrollTop).toBeGreaterThanOrEqual(0);
-	});
-
-	it('centers span vertically (scrollTop centers span row)', async () => {
-		const setScrollTop = jest.fn();
-
-		await act(async () => {
-			render(
-				<TestWrapper
-					firstSpanAtFetchLevel="grandchild"
-					spans={MOCK_SPANS}
-					traceMetadata={MOCK_TRACE_METADATA}
-					setViewStartTs={jest.fn()}
-					setViewEndTs={jest.fn()}
-					setScrollTop={setScrollTop}
-				/>,
-			);
-		});
-
-		await waitFor(() => expect(setScrollTop).toHaveBeenCalled());
-
-		const [scrollTop] = setScrollTop.mock.calls[0];
-		const levelIndex = 2;
-		const rowHeight = 24;
-		const viewportHeight = 400;
-		const expectedCenter =
-			levelIndex * rowHeight - viewportHeight / 2 + rowHeight / 2;
-		expect(scrollTop).toBeCloseTo(Math.max(0, expectedCenter), -1);
-	});
-
-	it('zooms horizontally to span with 2x duration padding', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-
-		await act(async () => {
-			render(
-				<TestWrapper
-					firstSpanAtFetchLevel="root"
-					spans={MOCK_SPANS}
-					traceMetadata={MOCK_TRACE_METADATA}
-					setViewStartTs={setViewStartTs}
-					setViewEndTs={setViewEndTs}
-					setScrollTop={jest.fn()}
-				/>,
-			);
-		});
-
-		await waitFor(() => {
-			expect(setViewStartTs).toHaveBeenCalled();
-			expect(setViewEndTs).toHaveBeenCalled();
-		});
-
-		const [viewStart] = setViewStartTs.mock.calls[0];
-		const [viewEnd] = setViewEndTs.mock.calls[0];
-		const visibleWindow = viewEnd - viewStart;
-		const rootSpan = MOCK_SPANS[0][0];
-		const spanDurationMs = rootSpan.durationNano / 1e6;
-		expect(visibleWindow).toBeGreaterThanOrEqual(Math.max(spanDurationMs * 2, 5));
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.math.test.ts

@@ -1,135 +0,0 @@
-import {
-	clamp,
-	findSpanById,
-	formatDuration,
-	getFlamegraphRowMetrics,
-} from '../utils';
-import { MOCK_SPANS } from './testUtils';
-
-jest.mock('container/TraceDetail/utils', () => ({
-	convertTimeToRelevantUnit: (
-		valueMs: number,
-	): { time: number; timeUnitName: string } => {
-		if (valueMs === 0) {
-			return { time: 0, timeUnitName: 'ms' };
-		}
-		if (valueMs < 1) {
-			return { time: valueMs, timeUnitName: 'ms' };
-		}
-		if (valueMs < 1000) {
-			return { time: valueMs, timeUnitName: 'ms' };
-		}
-		if (valueMs < 60_000) {
-			return { time: valueMs / 1000, timeUnitName: 's' };
-		}
-		if (valueMs < 3_600_000) {
-			return { time: valueMs / 60_000, timeUnitName: 'm' };
-		}
-		return { time: valueMs / 3_600_000, timeUnitName: 'hr' };
-	},
-}));
-
-describe('Pure Math and Data Utils', () => {
-	describe('clamp', () => {
-		it('returns value when within range', () => {
-			expect(clamp(5, 0, 10)).toBe(5);
-			expect(clamp(-3, -5, 5)).toBe(-3);
-		});
-
-		it('returns min when value is below min', () => {
-			expect(clamp(-1, 0, 10)).toBe(0);
-			expect(clamp(2, 5, 10)).toBe(5);
-		});
-
-		it('returns max when value is above max', () => {
-			expect(clamp(11, 0, 10)).toBe(10);
-			expect(clamp(100, 0, 50)).toBe(50);
-		});
-
-		it('handles min === max', () => {
-			expect(clamp(5, 7, 7)).toBe(7);
-			expect(clamp(7, 7, 7)).toBe(7);
-		});
-	});
-
-	describe('findSpanById', () => {
-		it('finds span in first level', () => {
-			const result = findSpanById(MOCK_SPANS, 'root');
-			expect(result).not.toBeNull();
-			expect(result?.span.spanId).toBe('root');
-			expect(result?.levelIndex).toBe(0);
-		});
-
-		it('finds span in nested level', () => {
-			const result = findSpanById(MOCK_SPANS, 'grandchild');
-			expect(result).not.toBeNull();
-			expect(result?.span.spanId).toBe('grandchild');
-			expect(result?.levelIndex).toBe(2);
-		});
-
-		it('returns null when span not found', () => {
-			expect(findSpanById(MOCK_SPANS, 'nonexistent')).toBeNull();
-		});
-
-		it('handles empty spans', () => {
-			expect(findSpanById([], 'root')).toBeNull();
-			expect(findSpanById([[], []], 'root')).toBeNull();
-		});
-	});
-
-	describe('getFlamegraphRowMetrics', () => {
-		it('computes normal row height metrics (24px)', () => {
-			const m = getFlamegraphRowMetrics(24);
-			expect(m.ROW_HEIGHT).toBe(24);
-			expect(m.SPAN_BAR_HEIGHT).toBe(22);
-			expect(m.SPAN_BAR_Y_OFFSET).toBe(1);
-			expect(m.EVENT_DOT_SIZE).toBe(6);
-		});
-
-		it('clamps span bar height to max for large row heights', () => {
-			const m = getFlamegraphRowMetrics(100);
-			expect(m.SPAN_BAR_HEIGHT).toBe(22);
-			expect(m.SPAN_BAR_Y_OFFSET).toBe(39);
-		});
-
-		it('clamps span bar height to min for small row heights', () => {
-			const m = getFlamegraphRowMetrics(6);
-			expect(m.SPAN_BAR_HEIGHT).toBe(8);
-			// spanBarYOffset = floor((6-8)/2) = -1 when bar exceeds row height
-			expect(m.SPAN_BAR_Y_OFFSET).toBe(-1);
-		});
-
-		it('clamps event dot size within min/max', () => {
-			const mSmall = getFlamegraphRowMetrics(6);
-			expect(mSmall.EVENT_DOT_SIZE).toBe(4);
-
-			const mLarge = getFlamegraphRowMetrics(24);
-			expect(mLarge.EVENT_DOT_SIZE).toBe(6);
-		});
-	});
-
-	describe('formatDuration', () => {
-		it('formats nanos as ms', () => {
-			// 1e6 nanos = 1ms
-			expect(formatDuration(1_000_000)).toBe('1ms');
-		});
-
-		it('formats larger durations as s/m/hr', () => {
-			// 2e9 nanos = 2000ms = 2s
-			expect(formatDuration(2_000_000_000)).toBe('2s');
-		});
-
-		it('formats zero duration', () => {
-			expect(formatDuration(0)).toBe('0ms');
-		});
-
-		it('formats very small values', () => {
-			// 1000 nanos = 0.001ms → mock returns { time: 0.001, timeUnitName: 'ms' }
-			expect(formatDuration(1000)).toBe('0ms');
-		});
-
-		it('formats decimal seconds correctly', () => {
-			expect(formatDuration(1_500_000_000)).toBe('1.5s');
-		});
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.presentation.test.ts

@@ -1,67 +0,0 @@
-import { getSpanColor } from '../utils';
-import { MOCK_SPAN } from './testUtils';
-
-const mockGenerateColor = jest.fn();
-
-jest.mock('lib/uPlotLib/utils/generateColor', () => ({
-	generateColor: (key: string, colorMap: Record<string, string>): string =>
-		mockGenerateColor(key, colorMap),
-}));
-
-describe('Presentation / Styling Utils', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockGenerateColor.mockReturnValue('#2F80ED');
-	});
-
-	describe('getSpanColor', () => {
-		it('uses generated service color for normal span', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
-				span: { ...MOCK_SPAN, hasError: false },
-				isDarkMode: false,
-			});
-
-			expect(mockGenerateColor).toHaveBeenCalledWith(
-				MOCK_SPAN.serviceName,
-				expect.any(Object),
-			);
-			expect(color).toBe('#1890ff');
-		});
-
-		it('overrides with error color in light mode when span has error', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
-				span: { ...MOCK_SPAN, hasError: true },
-				isDarkMode: false,
-			});
-
-			expect(color).toBe('rgb(220, 38, 38)');
-		});
-
-		it('overrides with error color in dark mode when span has error', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
-				span: { ...MOCK_SPAN, hasError: true },
-				isDarkMode: true,
-			});
-
-			expect(color).toBe('rgb(239, 68, 68)');
-		});
-
-		it('passes serviceName to generateColor', () => {
-			getSpanColor({
-				span: { ...MOCK_SPAN, serviceName: 'my-service' },
-				isDarkMode: false,
-			});
-
-			expect(mockGenerateColor).toHaveBeenCalledWith(
-				'my-service',
-				expect.any(Object),
-			);
-		});
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/computeVisualLayout.ts

@@ -1,370 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-export interface ConnectorLine {
-	parentRow: number;
-	childRow: number;
-	timestampMs: number;
-	serviceName: string;
-}
-
-export interface VisualLayout {
-	visualRows: FlamegraphSpan[][];
-	spanToVisualRow: Record<string, number>;
-	connectors: ConnectorLine[];
-	totalVisualRows: number;
-}
-
-/**
- * Computes an overlap-safe visual layout for flamegraph spans using DFS ordering.
- *
- * Builds a parent→children tree from parentSpanId, then traverses in DFS pre-order.
- * Each span is placed at parentRow+1 if free, otherwise scans upward row-by-row
- * until finding a non-overlapping row. This keeps children visually close to their
- * parents and avoids the BFS problem where distant siblings push children far down.
- */
-export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
-	const spanToVisualRow = new Map<string, number>();
-	const visualRowsMap = new Map<number, FlamegraphSpan[]>();
-	let maxRow = -1;
-
-	// Per-row interval list for overlap detection
-	// Each entry: [startTime, endTime]
-	const rowIntervals = new Map<number, Array<[number, number]>>();
-
-	// function hasOverlap(row: number, startTime: number, endTime: number): boolean {
-	// 	const intervals = rowIntervals.get(row);
-	// 	if (!intervals) {
-	// 		return false;
-	// 	}
-	// 	for (const [s, e] of intervals) {
-	// 		if (startTime < e && endTime > s) {
-	// 			return true;
-	// 		}
-	// 	}
-	// 	return false;
-	// }
-
-	function addToRow(row: number, span: FlamegraphSpan): void {
-		spanToVisualRow.set(span.spanId, row);
-		let arr = visualRowsMap.get(row);
-		if (!arr) {
-			arr = [];
-			visualRowsMap.set(row, arr);
-		}
-		arr.push(span);
-
-		const startTime = span.timestamp;
-		const endTime = span.timestamp + span.durationNano / 1e6;
-		let intervals = rowIntervals.get(row);
-		if (!intervals) {
-			intervals = [];
-			rowIntervals.set(row, intervals);
-		}
-		intervals.push([startTime, endTime]);
-
-		if (row > maxRow) {
-			maxRow = row;
-		}
-	}
-
-	// Flatten all spans and build lookup + children map
-	const spanMap = new Map<string, FlamegraphSpan>();
-	const childrenMap = new Map<string, FlamegraphSpan[]>();
-	const allSpans: FlamegraphSpan[] = [];
-
-	for (const level of spans) {
-		for (const span of level) {
-			allSpans.push(span);
-			spanMap.set(span.spanId, span);
-		}
-	}
-
-	// Extract parentSpanId — the field may be missing at runtime when the API
-	// returns `references` instead.  Fall back to the first CHILD_OF reference.
-	function getParentId(span: FlamegraphSpan): string {
-		if (span.parentSpanId) {
-			return span.parentSpanId;
-		}
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const refs = (span as any).references as
-			| Array<{ spanId?: string; refType?: string }>
-			| undefined;
-		if (refs) {
-			for (const ref of refs) {
-				if (ref.refType === 'CHILD_OF' && ref.spanId) {
-					return ref.spanId;
-				}
-			}
-		}
-		return '';
-	}
-
-	// Build children map and identify roots
-	const roots: FlamegraphSpan[] = [];
-
-	for (const span of allSpans) {
-		const parentId = getParentId(span);
-		if (!parentId || !spanMap.has(parentId)) {
-			roots.push(span);
-		} else {
-			let children = childrenMap.get(parentId);
-			if (!children) {
-				children = [];
-				childrenMap.set(parentId, children);
-			}
-			children.push(span);
-		}
-	}
-
-	// Sort children by timestamp for deterministic ordering
-	for (const [, children] of childrenMap) {
-		children.sort((a, b) => b.timestamp - a.timestamp);
-	}
-
-	// --- Subtree-unit placement ---
-	// Compute each subtree's layout in isolation, then place as a unit
-	// to guarantee parent-child adjacency within subtrees.
-
-	interface ShapeEntry {
-		span: FlamegraphSpan;
-		relativeRow: number;
-	}
-
-	function hasOverlapIn(
-		intervals: Map<number, Array<[number, number]>>,
-		row: number,
-		startTime: number,
-		endTime: number,
-	): boolean {
-		const rowIntervals = intervals.get(row);
-		if (!rowIntervals) {
-			return false;
-		}
-		for (const [s, e] of rowIntervals) {
-			if (startTime < e && endTime > s) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	function addIntervalTo(
-		intervals: Map<number, Array<[number, number]>>,
-		row: number,
-		startTime: number,
-		endTime: number,
-	): void {
-		let arr = intervals.get(row);
-		if (!arr) {
-			arr = [];
-			intervals.set(row, arr);
-		}
-		arr.push([startTime, endTime]);
-	}
-
-	function hasConnectorConflict(
-		intervals: Map<number, Array<[number, number]>>,
-		row: number,
-		point: number,
-	): boolean {
-		const rowIntervals = intervals.get(row);
-		if (!rowIntervals) {
-			return false;
-		}
-		for (const [s, e] of rowIntervals) {
-			if (point >= s && point < e) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	function hasPointInSpan(
-		connectorPoints: Map<number, number[]>,
-		row: number,
-		startTime: number,
-		endTime: number,
-	): boolean {
-		const points = connectorPoints.get(row);
-		if (!points) {
-			return false;
-		}
-		for (const p of points) {
-			if (p >= startTime && p < endTime) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	function addConnectorPoint(
-		connectorPoints: Map<number, number[]>,
-		row: number,
-		point: number,
-	): void {
-		let arr = connectorPoints.get(row);
-		if (!arr) {
-			arr = [];
-			connectorPoints.set(row, arr);
-		}
-		arr.push(point);
-	}
-
-	function computeSubtreeShape(rootSpan: FlamegraphSpan): ShapeEntry[] {
-		const localIntervals = new Map<number, Array<[number, number]>>();
-		const localConnectorPoints = new Map<number, number[]>();
-		const shape: ShapeEntry[] = [];
-
-		// Place root span at relative row 0
-		const rootStart = rootSpan.timestamp;
-		const rootEnd = rootSpan.timestamp + rootSpan.durationNano / 1e6;
-		shape.push({ span: rootSpan, relativeRow: 0 });
-		addIntervalTo(localIntervals, 0, rootStart, rootEnd);
-
-		const children = childrenMap.get(rootSpan.spanId);
-		if (children) {
-			for (const child of children) {
-				const childShape = computeSubtreeShape(child);
-				const connectorX = child.timestamp;
-				const offset = findPlacement(
-					childShape,
-					1,
-					localIntervals,
-					localConnectorPoints,
-					connectorX,
-				);
-
-				// Record connector points for intermediate rows (1 to offset-1)
-				for (let r = 1; r < offset; r++) {
-					addConnectorPoint(localConnectorPoints, r, connectorX);
-				}
-
-				// Place child shape into local state at offset
-				for (const entry of childShape) {
-					const actualRow = entry.relativeRow + offset;
-					shape.push({ span: entry.span, relativeRow: actualRow });
-					const s = entry.span.timestamp;
-					const e = entry.span.timestamp + entry.span.durationNano / 1e6;
-					addIntervalTo(localIntervals, actualRow, s, e);
-				}
-			}
-		}
-
-		return shape;
-	}
-
-	function findPlacement(
-		shape: ShapeEntry[],
-		minOffset: number,
-		intervals: Map<number, Array<[number, number]>>,
-		connectorPoints?: Map<number, number[]>,
-		connectorX?: number,
-	): number {
-		// Track the first offset that passes Checks 1 & 2 as a fallback.
-		// Check 3 (connector vs span) is monotonically failing: once it fails
-		// at offset K, all offsets > K also fail (more intermediate rows).
-		// If we can't satisfy Check 3, fall back to the best offset without it.
-		let fallbackOffset = -1;
-
-		for (let offset = minOffset; ; offset++) {
-			let passesSpanChecks = true;
-
-			// Check 1: span vs span (existing)
-			for (const entry of shape) {
-				const targetRow = entry.relativeRow + offset;
-				const s = entry.span.timestamp;
-				const e = entry.span.timestamp + entry.span.durationNano / 1e6;
-				if (hasOverlapIn(intervals, targetRow, s, e)) {
-					passesSpanChecks = false;
-					break;
-				}
-			}
-
-			// Check 2: span vs existing connector points
-			if (passesSpanChecks && connectorPoints) {
-				for (const entry of shape) {
-					const targetRow = entry.relativeRow + offset;
-					const s = entry.span.timestamp;
-					const e = entry.span.timestamp + entry.span.durationNano / 1e6;
-					if (hasPointInSpan(connectorPoints, targetRow, s, e)) {
-						passesSpanChecks = false;
-						break;
-					}
-				}
-			}
-
-			if (!passesSpanChecks) {
-				continue;
-			}
-
-			// This offset passes Checks 1 & 2 — record as fallback
-			if (fallbackOffset === -1) {
-				fallbackOffset = offset;
-			}
-
-			// Check 3: new connector vs existing spans
-			if (connectorX !== undefined) {
-				let connectorClear = true;
-				for (let r = 1; r < offset; r++) {
-					if (hasConnectorConflict(intervals, r, connectorX)) {
-						connectorClear = false;
-						break;
-					}
-				}
-				if (!connectorClear) {
-					// Check 3 will fail for all larger offsets too.
-					// Fall back to the first offset that passed Checks 1 & 2.
-					return fallbackOffset;
-				}
-			}
-
-			return offset;
-		}
-	}
-
-	// Process roots sorted by timestamp
-	roots.sort((a, b) => a.timestamp - b.timestamp);
-	for (const root of roots) {
-		const shape = computeSubtreeShape(root);
-		const offset = findPlacement(shape, 0, rowIntervals);
-		for (const entry of shape) {
-			addToRow(entry.relativeRow + offset, entry.span);
-		}
-	}
-
-	// Build the visualRows array
-	const totalVisualRows = maxRow + 1;
-	const visualRows: FlamegraphSpan[][] = [];
-	for (let i = 0; i < totalVisualRows; i++) {
-		visualRows.push(visualRowsMap.get(i) || []);
-	}
-
-	// Build connector lines for parent-child pairs with row gap > 1
-	const connectors: ConnectorLine[] = [];
-	for (const [parentId, children] of childrenMap) {
-		const parentRow = spanToVisualRow.get(parentId);
-		if (parentRow === undefined) {
-			continue;
-		}
-		for (const child of children) {
-			const childRow = spanToVisualRow.get(child.spanId);
-			if (childRow === undefined || childRow - parentRow <= 1) {
-				continue;
-			}
-			connectors.push({
-				parentRow,
-				childRow,
-				timestampMs: child.timestamp,
-				serviceName: child.serviceName,
-			});
-		}
-	}
-
-	return {
-		visualRows,
-		spanToVisualRow: Object.fromEntries(spanToVisualRow),
-		connectors,
-		totalVisualRows,
-	};
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/constants.ts

@@ -1,36 +0,0 @@
-export const ROW_HEIGHT = 24;
-export const SPAN_BAR_HEIGHT = 22;
-export const SPAN_BAR_Y_OFFSET = Math.floor((ROW_HEIGHT - SPAN_BAR_HEIGHT) / 2);
-export const EVENT_DOT_SIZE = 6;
-
-// Span bar sizing relative to row height (used by getFlamegraphRowMetrics)
-export const SPAN_BAR_HEIGHT_RATIO = SPAN_BAR_HEIGHT / ROW_HEIGHT;
-export const MIN_SPAN_BAR_HEIGHT = 8;
-export const MAX_SPAN_BAR_HEIGHT = SPAN_BAR_HEIGHT;
-
-// Event dot sizing relative to span bar height
-export const EVENT_DOT_SIZE_RATIO = EVENT_DOT_SIZE / SPAN_BAR_HEIGHT;
-export const MIN_EVENT_DOT_SIZE = 4;
-export const MAX_EVENT_DOT_SIZE = EVENT_DOT_SIZE;
-
-export const LABEL_FONT = '11px Inter, sans-serif';
-export const LABEL_PADDING_X = 8;
-export const MIN_WIDTH_FOR_NAME = 30;
-export const MIN_WIDTH_FOR_NAME_AND_DURATION = 80;
-
-// Dynamic row height (vertical zoom) -- disabled for now (MIN === MAX)
-export const MIN_ROW_HEIGHT = 24;
-export const MAX_ROW_HEIGHT = 24;
-export const DEFAULT_ROW_HEIGHT = MIN_ROW_HEIGHT;
-
-// Zoom intensity -- how fast zoom reacts to wheel/pinch delta
-export const PINCH_ZOOM_INTENSITY_H = 0.01;
-export const SCROLL_ZOOM_INTENSITY_H = 0.0015;
-export const PINCH_ZOOM_INTENSITY_V = 0.008;
-export const SCROLL_ZOOM_INTENSITY_V = 0.001;
-
-// Minimum visible time span in ms (prevents zooming to sub-pixel)
-export const MIN_VISIBLE_SPAN_MS = 5;
-
-// Selected span style (dashed border)
-export const DASHED_BORDER_LINE_DASH = [4, 2];

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useCanvasSetup.ts

@@ -1,55 +0,0 @@
-import { RefObject, useCallback, useEffect } from 'react';
-
-export function useCanvasSetup(
-	canvasRef: RefObject<HTMLCanvasElement>,
-	containerRef: RefObject<HTMLDivElement>,
-	onDraw: () => void,
-): void {
-	const updateCanvasSize = useCallback(() => {
-		const canvas = canvasRef.current;
-		const container = containerRef.current;
-		if (!canvas || !container) {
-			return;
-		}
-
-		const dpr = window.devicePixelRatio || 1;
-		const rect = container.getBoundingClientRect();
-		const viewportHeight = container.clientHeight;
-
-		canvas.style.width = `${rect.width}px`;
-		canvas.style.height = `${viewportHeight}px`;
-
-		const newWidth = Math.floor(rect.width * dpr);
-		const newHeight = Math.floor(viewportHeight * dpr);
-
-		if (canvas.width !== newWidth || canvas.height !== newHeight) {
-			canvas.width = newWidth;
-			canvas.height = newHeight;
-			onDraw();
-		}
-	}, [canvasRef, containerRef, onDraw]);
-
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container) {
-			return (): void => {};
-		}
-
-		const resizeObserver = new ResizeObserver(updateCanvasSize);
-		resizeObserver.observe(container);
-		updateCanvasSize();
-
-		// when dpr changes, update the canvas size
-		const dprQuery = window.matchMedia('(resolution: 1dppx)');
-		dprQuery.addEventListener('change', updateCanvasSize);
-
-		return (): void => {
-			resizeObserver.disconnect();
-			dprQuery.removeEventListener('change', updateCanvasSize);
-		};
-	}, [containerRef, updateCanvasSize]);
-
-	useEffect(() => {
-		onDraw();
-	}, [onDraw]);
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDrag.ts

@@ -1,170 +0,0 @@
-import {
-	Dispatch,
-	MouseEvent as ReactMouseEvent,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useCallback,
-	useRef,
-} from 'react';
-
-import { ITraceMetadata } from '../types';
-import { clamp } from '../utils';
-
-interface UseFlamegraphDragArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	containerRef: RefObject<HTMLDivElement>;
-	traceMetadata: ITraceMetadata;
-	viewStartRef: MutableRefObject<number>;
-	viewEndRef: MutableRefObject<number>;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	scrollTopRef: MutableRefObject<number>;
-	setScrollTop: Dispatch<SetStateAction<number>>;
-	totalHeight: number;
-}
-
-interface UseFlamegraphDragResult {
-	handleMouseDown: (e: ReactMouseEvent) => void;
-	handleMouseMove: (e: ReactMouseEvent) => void;
-	handleMouseUp: () => void;
-	handleDragMouseLeave: () => void;
-	isDraggingRef: MutableRefObject<boolean>;
-}
-
-export function useFlamegraphDrag(
-	args: UseFlamegraphDragArgs,
-): UseFlamegraphDragResult {
-	const {
-		canvasRef,
-		containerRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		setViewStartTs,
-		setViewEndTs,
-		scrollTopRef,
-		setScrollTop,
-		totalHeight,
-	} = args;
-
-	const isDraggingRef = useRef(false);
-	const dragStartRef = useRef<{ x: number; y: number } | null>(null);
-	const dragDistanceRef = useRef(0);
-
-	const clampScrollTop = useCallback(
-		(next: number): number => {
-			const container = containerRef.current;
-			if (!container) {
-				return 0;
-			}
-			const viewportHeight = container.clientHeight;
-			const maxScroll = Math.max(0, totalHeight - viewportHeight);
-			return clamp(next, 0, maxScroll);
-		},
-		[containerRef, totalHeight],
-	);
-
-	const handleMouseDown = useCallback(
-		(event: ReactMouseEvent): void => {
-			if (event.button !== 0) {
-				return;
-			}
-			event.preventDefault();
-
-			isDraggingRef.current = true;
-			dragStartRef.current = { x: event.clientX, y: event.clientY };
-			dragDistanceRef.current = 0;
-
-			const canvas = canvasRef.current;
-			if (canvas) {
-				canvas.style.cursor = 'grabbing';
-			}
-		},
-		[canvasRef],
-	);
-
-	const handleMouseMove = useCallback(
-		(event: ReactMouseEvent): void => {
-			if (!isDraggingRef.current || !dragStartRef.current) {
-				return;
-			}
-
-			const canvas = canvasRef.current;
-			if (!canvas) {
-				return;
-			}
-
-			const rect = canvas.getBoundingClientRect();
-			const deltaX = event.clientX - dragStartRef.current.x;
-			const deltaY = event.clientY - dragStartRef.current.y;
-
-			dragDistanceRef.current = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-
-			// --- Horizontal pan ---
-			const timeSpan = viewEndRef.current - viewStartRef.current;
-			const deltaTime = (deltaX / rect.width) * timeSpan;
-
-			const newStart = viewStartRef.current - deltaTime;
-			const clampedStart = clamp(
-				newStart,
-				traceMetadata.startTime,
-				traceMetadata.endTime - timeSpan,
-			);
-			const clampedEnd = clampedStart + timeSpan;
-
-			viewStartRef.current = clampedStart;
-			viewEndRef.current = clampedEnd;
-			setViewStartTs(clampedStart);
-			setViewEndTs(clampedEnd);
-
-			// --- Vertical scroll pan ---
-			const nextScrollTop = clampScrollTop(scrollTopRef.current - deltaY);
-			scrollTopRef.current = nextScrollTop;
-			setScrollTop(nextScrollTop);
-
-			dragStartRef.current = { x: event.clientX, y: event.clientY };
-		},
-		[
-			canvasRef,
-			traceMetadata,
-			viewStartRef,
-			viewEndRef,
-			setViewStartTs,
-			setViewEndTs,
-			scrollTopRef,
-			setScrollTop,
-			clampScrollTop,
-		],
-	);
-
-	const handleMouseUp = useCallback((): void => {
-		isDraggingRef.current = false;
-		dragStartRef.current = null;
-		dragDistanceRef.current = 0;
-
-		const canvas = canvasRef.current;
-		if (canvas) {
-			canvas.style.cursor = 'grab';
-		}
-	}, [canvasRef]);
-
-	// const handleDragMouseLeave = useCallback((): void => {
-	// 	isDraggingRef.current = false;
-	// 	dragStartRef.current = null;
-	// 	dragDistanceRef.current = 0;
-
-	// 	const canvas = canvasRef.current;
-	// 	if (canvas) {
-	// 		canvas.style.cursor = 'grab';
-	// 	}
-	// }, [canvasRef]);
-
-	return {
-		handleMouseDown,
-		handleMouseMove,
-		handleMouseUp,
-		handleDragMouseLeave: handleMouseUp, // Same logic for mouse up and leaving the canvas
-		isDraggingRef,
-	};
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -1,317 +0,0 @@
-import React, { RefObject, useCallback, useRef } from 'react';
-import { themeColors } from 'constants/theme';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { ConnectorLine } from '../computeVisualLayout';
-import { EventRect, SpanRect } from '../types';
-import {
-	clamp,
-	drawSpanBar,
-	FlamegraphRowMetrics,
-	getFlamegraphRowMetrics,
-	getSpanColor,
-} from '../utils';
-
-interface UseFlamegraphDrawArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	containerRef: RefObject<HTMLDivElement>;
-	spans: FlamegraphSpan[][];
-	connectors: ConnectorLine[];
-	viewStartTs: number;
-	viewEndTs: number;
-	scrollTop: number;
-	rowHeight: number;
-	selectedSpanId: string | undefined;
-	hoveredSpanId: string;
-	isDarkMode: boolean;
-	spanRectsRef?: React.MutableRefObject<SpanRect[]>;
-	eventRectsRef?: React.MutableRefObject<EventRect[]>;
-	hoveredEventKey?: string | null;
-}
-
-interface UseFlamegraphDrawResult {
-	drawFlamegraph: () => void;
-	spanRectsRef: RefObject<SpanRect[]>;
-	eventRectsRef: RefObject<EventRect[]>;
-}
-
-const OVERSCAN_ROWS = 4;
-
-interface DrawLevelArgs {
-	ctx: CanvasRenderingContext2D;
-	levelSpans: FlamegraphSpan[];
-	levelIndex: number;
-	y: number;
-	viewStartTs: number;
-	timeSpan: number;
-	cssWidth: number;
-	selectedSpanId: string | undefined;
-	hoveredSpanId: string;
-	isDarkMode: boolean;
-	spanRectsArray: SpanRect[];
-	eventRectsArray: EventRect[];
-	metrics: FlamegraphRowMetrics;
-	hoveredEventKey?: string | null;
-}
-
-function drawLevel(args: DrawLevelArgs): void {
-	const {
-		ctx,
-		levelSpans,
-		levelIndex,
-		y,
-		viewStartTs,
-		timeSpan,
-		cssWidth,
-		selectedSpanId,
-		hoveredSpanId,
-		isDarkMode,
-		spanRectsArray,
-		eventRectsArray,
-		metrics,
-		hoveredEventKey,
-	} = args;
-
-	const viewEndTs = viewStartTs + timeSpan;
-
-	for (let i = 0; i < levelSpans.length; i++) {
-		const span = levelSpans[i];
-		const spanStartMs = span.timestamp;
-		const spanEndMs = span.timestamp + span.durationNano / 1e6;
-
-		// Time culling -- skip spans entirely outside the visible time window
-		if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
-			continue;
-		}
-
-		const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
-		const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
-		let width = rightEdge - leftOffset;
-
-		// Clamp to visible x-range
-		if (leftOffset < 0) {
-			width += leftOffset;
-			if (width <= 0) {
-				continue;
-			}
-		}
-		if (rightEdge > cssWidth) {
-			width = cssWidth - Math.max(0, leftOffset);
-			if (width <= 0) {
-				continue;
-			}
-		}
-
-		// Minimum 1px width so tiny spans remain visible
-		width = clamp(width, 1, Infinity);
-
-		const color = getSpanColor({ span, isDarkMode });
-
-		drawSpanBar({
-			ctx,
-			span,
-			x: Math.max(0, leftOffset),
-			y,
-			width,
-			levelIndex,
-			spanRectsArray,
-			eventRectsArray,
-			color,
-			isDarkMode,
-			metrics,
-			selectedSpanId,
-			hoveredSpanId,
-			hoveredEventKey,
-		});
-	}
-}
-
-interface DrawConnectorLinesArgs {
-	ctx: CanvasRenderingContext2D;
-	connectors: ConnectorLine[];
-	scrollTop: number;
-	viewStartTs: number;
-	timeSpan: number;
-	cssWidth: number;
-	viewportHeight: number;
-	metrics: FlamegraphRowMetrics;
-}
-
-function drawConnectorLines(args: DrawConnectorLinesArgs): void {
-	const {
-		ctx,
-		connectors,
-		scrollTop,
-		viewStartTs,
-		timeSpan,
-		cssWidth,
-		viewportHeight,
-		metrics,
-	} = args;
-
-	ctx.save();
-	ctx.lineWidth = 1;
-	ctx.globalAlpha = 0.6;
-
-	for (const conn of connectors) {
-		const xFrac = (conn.timestampMs - viewStartTs) / timeSpan;
-		if (xFrac < -0.01 || xFrac > 1.01) {
-			continue;
-		}
-
-		const parentY =
-			conn.parentRow * metrics.ROW_HEIGHT -
-			scrollTop +
-			metrics.SPAN_BAR_Y_OFFSET +
-			metrics.SPAN_BAR_HEIGHT;
-		const childY =
-			conn.childRow * metrics.ROW_HEIGHT - scrollTop + metrics.SPAN_BAR_Y_OFFSET;
-
-		// Skip if entirely outside viewport
-		if (parentY > viewportHeight || childY < 0) {
-			continue;
-		}
-
-		const color = generateColor(
-			conn.serviceName,
-			themeColors.traceDetailColorsV3,
-		);
-		ctx.strokeStyle = color;
-
-		const x = clamp(xFrac * cssWidth, 0, cssWidth);
-		ctx.beginPath();
-		ctx.moveTo(x, parentY);
-		ctx.lineTo(x, childY);
-		ctx.stroke();
-	}
-
-	ctx.restore();
-}
-
-export function useFlamegraphDraw(
-	args: UseFlamegraphDrawArgs,
-): UseFlamegraphDrawResult {
-	const {
-		canvasRef,
-		containerRef,
-		spans,
-		connectors,
-		viewStartTs,
-		viewEndTs,
-		scrollTop,
-		rowHeight,
-		selectedSpanId,
-		hoveredSpanId,
-		isDarkMode,
-		spanRectsRef: spanRectsRefProp,
-		eventRectsRef: eventRectsRefProp,
-		hoveredEventKey,
-	} = args;
-
-	const spanRectsRefInternal = useRef<SpanRect[]>([]);
-	const spanRectsRef = spanRectsRefProp ?? spanRectsRefInternal;
-	const eventRectsRefInternal = useRef<EventRect[]>([]);
-	const eventRectsRef = eventRectsRefProp ?? eventRectsRefInternal;
-
-	const drawFlamegraph = useCallback(() => {
-		const canvas = canvasRef.current;
-		const container = containerRef.current;
-		if (!canvas || !container) {
-			return;
-		}
-
-		const ctx = canvas.getContext('2d');
-		if (!ctx) {
-			return;
-		}
-
-		const dpr = window.devicePixelRatio || 1;
-		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-		const timeSpan = viewEndTs - viewStartTs;
-		if (timeSpan <= 0) {
-			return;
-		}
-
-		const cssWidth = canvas.width / dpr;
-		const metrics = getFlamegraphRowMetrics(rowHeight);
-
-		// ---- Vertical clipping window ----
-		const viewportHeight = container.clientHeight;
-
-		//starts drawing OVERSCAN_ROWS(4) rows above the visible area.
-		const firstLevel = Math.max(
-			0,
-			Math.floor(scrollTop / metrics.ROW_HEIGHT) - OVERSCAN_ROWS,
-		);
-		// adds 2*OVERSCAN_ROWS extra rows above and below the visible area.
-		const visibleLevelCount =
-			Math.ceil(viewportHeight / metrics.ROW_HEIGHT) + 2 * OVERSCAN_ROWS;
-
-		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
-
-		ctx.clearRect(0, 0, cssWidth, viewportHeight);
-
-		// ---- Draw connector lines (behind span bars) ----
-		drawConnectorLines({
-			ctx,
-			connectors,
-			scrollTop,
-			viewStartTs,
-			timeSpan,
-			cssWidth,
-			viewportHeight,
-			metrics,
-		});
-
-		const spanRectsArray: SpanRect[] = [];
-		const eventRectsArray: EventRect[] = [];
-		const currentHoveredEventKey = hoveredEventKey ?? null;
-
-		// ---- Draw only visible levels ----
-		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
-			const levelSpans = spans[levelIndex];
-			if (!levelSpans) {
-				continue;
-			}
-
-			drawLevel({
-				ctx,
-				levelSpans,
-				levelIndex,
-				y: levelIndex * metrics.ROW_HEIGHT - scrollTop,
-				viewStartTs,
-				timeSpan,
-				cssWidth,
-				selectedSpanId,
-				hoveredSpanId,
-				isDarkMode,
-				spanRectsArray,
-				eventRectsArray,
-				metrics,
-				hoveredEventKey: currentHoveredEventKey,
-			});
-		}
-
-		spanRectsRef.current = spanRectsArray;
-		eventRectsRef.current = eventRectsArray;
-	}, [
-		canvasRef,
-		containerRef,
-		spanRectsRef,
-		eventRectsRef,
-		spans,
-		connectors,
-		viewStartTs,
-		viewEndTs,
-		scrollTop,
-		rowHeight,
-		selectedSpanId,
-		hoveredSpanId,
-		hoveredEventKey,
-		isDarkMode,
-	]);
-
-	return { drawFlamegraph, spanRectsRef, eventRectsRef };
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -1,295 +0,0 @@
-import {
-	Dispatch,
-	MouseEvent as ReactMouseEvent,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useCallback,
-	useRef,
-	useState,
-} from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { EventRect, SpanRect } from '../types';
-import { ITraceMetadata } from '../types';
-import { getSpanColor } from '../utils';
-
-function getCanvasPointer(
-	canvas: HTMLCanvasElement,
-	clientX: number,
-	clientY: number,
-): { cssX: number; cssY: number } | null {
-	const rect = canvas.getBoundingClientRect();
-	const dpr = window.devicePixelRatio || 1;
-	const cssWidth = canvas.width / dpr;
-	const cssHeight = canvas.height / dpr;
-	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
-	const cssY = (clientY - rect.top) * (cssHeight / rect.height);
-	return { cssX, cssY };
-}
-
-function findSpanAtPosition(
-	cssX: number,
-	cssY: number,
-	spanRects: SpanRect[],
-): FlamegraphSpan | null {
-	for (let i = spanRects.length - 1; i >= 0; i--) {
-		const r = spanRects[i];
-		if (
-			cssX >= r.x &&
-			cssX <= r.x + r.width &&
-			cssY >= r.y &&
-			cssY <= r.y + r.height
-		) {
-			return r.span;
-		}
-	}
-	return null;
-}
-
-function findEventAtPosition(
-	cssX: number,
-	cssY: number,
-	eventRects: EventRect[],
-): EventRect | null {
-	for (let i = eventRects.length - 1; i >= 0; i--) {
-		const r = eventRects[i];
-		// Manhattan distance check for diamond shape with padding
-		if (Math.abs(r.cx - cssX) + Math.abs(r.cy - cssY) <= r.halfSize * 1.5) {
-			return r;
-		}
-	}
-	return null;
-}
-
-export interface EventTooltipData {
-	name: string;
-	timeOffsetMs: number;
-	isError: boolean;
-	attributeMap: Record<string, string>;
-}
-
-export interface TooltipContent {
-	serviceName: string;
-	spanName: string;
-	status: 'ok' | 'warning' | 'error';
-	startMs: number;
-	durationMs: number;
-	clientX: number;
-	clientY: number;
-	spanColor: string;
-	event?: EventTooltipData;
-}
-
-interface UseFlamegraphHoverArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	spanRectsRef: MutableRefObject<SpanRect[]>;
-	eventRectsRef: MutableRefObject<EventRect[]>;
-	traceMetadata: ITraceMetadata;
-	viewStartTs: number;
-	viewEndTs: number;
-	isDraggingRef: MutableRefObject<boolean>;
-	onSpanClick: (spanId: string) => void;
-	isDarkMode: boolean;
-}
-
-interface UseFlamegraphHoverResult {
-	hoveredSpanId: string | null;
-	setHoveredSpanId: Dispatch<SetStateAction<string | null>>;
-	hoveredEventKey: string | null;
-	handleHoverMouseMove: (e: ReactMouseEvent) => void;
-	handleHoverMouseLeave: () => void;
-	handleMouseDownForClick: (e: ReactMouseEvent) => void;
-	handleClick: (e: ReactMouseEvent) => void;
-	tooltipContent: TooltipContent | null;
-}
-
-export function useFlamegraphHover(
-	args: UseFlamegraphHoverArgs,
-): UseFlamegraphHoverResult {
-	const {
-		canvasRef,
-		spanRectsRef,
-		eventRectsRef,
-		traceMetadata,
-		viewStartTs,
-		viewEndTs,
-		isDraggingRef,
-		onSpanClick,
-		isDarkMode,
-	} = args;
-
-	const [hoveredSpanId, setHoveredSpanId] = useState<string | null>(null);
-	const [hoveredEventKey, setHoveredEventKey] = useState<string | null>(null);
-	const [tooltipContent, setTooltipContent] = useState<TooltipContent | null>(
-		null,
-	);
-
-	const isZoomed =
-		viewStartTs !== traceMetadata.startTime ||
-		viewEndTs !== traceMetadata.endTime;
-
-	const updateCursor = useCallback(
-		(canvas: HTMLCanvasElement, span: FlamegraphSpan | null): void => {
-			if (span) {
-				canvas.style.cursor = 'pointer';
-			} else if (isZoomed) {
-				canvas.style.cursor = 'grab';
-			} else {
-				canvas.style.cursor = 'default';
-			}
-		},
-		[isZoomed],
-	);
-
-	const handleHoverMouseMove = useCallback(
-		(e: ReactMouseEvent): void => {
-			if (isDraggingRef.current) {
-				return;
-			}
-
-			const canvas = canvasRef.current;
-			if (!canvas) {
-				return;
-			}
-
-			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
-			if (!pointer) {
-				return;
-			}
-
-			// Check event dots first — they're drawn on top of spans
-			const eventRect = findEventAtPosition(
-				pointer.cssX,
-				pointer.cssY,
-				eventRectsRef.current,
-			);
-
-			if (eventRect) {
-				const { event, span } = eventRect;
-				const eventTimeMs = event.timeUnixNano / 1e6;
-				setHoveredEventKey(`${span.spanId}-${event.name}-${event.timeUnixNano}`);
-				setHoveredSpanId(span.spanId);
-				setTooltipContent({
-					serviceName: span.serviceName || '',
-					spanName: span.name || 'unknown',
-					status: span.hasError ? 'error' : 'ok',
-					startMs: span.timestamp - traceMetadata.startTime,
-					durationMs: span.durationNano / 1e6,
-					clientX: e.clientX,
-					clientY: e.clientY,
-					spanColor: getSpanColor({ span, isDarkMode }),
-					event: {
-						name: event.name,
-						timeOffsetMs: eventTimeMs - span.timestamp,
-						isError: event.isError,
-						attributeMap: event.attributeMap || {},
-					},
-				});
-				updateCursor(canvas, eventRect.span);
-				return;
-			}
-
-			const span = findSpanAtPosition(
-				pointer.cssX,
-				pointer.cssY,
-				spanRectsRef.current,
-			);
-
-			if (span) {
-				setHoveredEventKey(null);
-				setHoveredSpanId(span.spanId);
-				setTooltipContent({
-					serviceName: span.serviceName || '',
-					spanName: span.name || 'unknown',
-					status: span.hasError ? 'error' : 'ok',
-					startMs: span.timestamp - traceMetadata.startTime,
-					durationMs: span.durationNano / 1e6,
-					clientX: e.clientX,
-					clientY: e.clientY,
-					spanColor: getSpanColor({ span, isDarkMode }),
-				});
-				updateCursor(canvas, span);
-			} else {
-				setHoveredEventKey(null);
-				setHoveredSpanId(null);
-				setTooltipContent(null);
-				updateCursor(canvas, null);
-			}
-		},
-		[
-			canvasRef,
-			spanRectsRef,
-			eventRectsRef,
-			traceMetadata.startTime,
-			isDraggingRef,
-			updateCursor,
-			isDarkMode,
-		],
-	);
-
-	const handleHoverMouseLeave = useCallback((): void => {
-		setHoveredEventKey(null);
-		setHoveredSpanId(null);
-		setTooltipContent(null);
-
-		const canvas = canvasRef.current;
-		if (canvas) {
-			updateCursor(canvas, null);
-		}
-	}, [canvasRef, updateCursor]);
-
-	const mouseDownPosRef = useRef<{ x: number; y: number } | null>(null);
-	const CLICK_THRESHOLD = 5;
-
-	const handleMouseDownForClick = useCallback((e: ReactMouseEvent): void => {
-		mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
-	}, []);
-
-	const handleClick = useCallback(
-		(e: ReactMouseEvent): void => {
-			// Detect drag: if mouse moved more than threshold, skip click
-			if (mouseDownPosRef.current) {
-				const dx = e.clientX - mouseDownPosRef.current.x;
-				const dy = e.clientY - mouseDownPosRef.current.y;
-				if (Math.sqrt(dx * dx + dy * dy) > CLICK_THRESHOLD) {
-					mouseDownPosRef.current = null;
-					return;
-				}
-			}
-			mouseDownPosRef.current = null;
-
-			const canvas = canvasRef.current;
-			if (!canvas) {
-				return;
-			}
-
-			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
-			if (!pointer) {
-				return;
-			}
-
-			const span = findSpanAtPosition(
-				pointer.cssX,
-				pointer.cssY,
-				spanRectsRef.current,
-			);
-
-			if (span) {
-				onSpanClick(span.spanId);
-			}
-		},
-		[canvasRef, spanRectsRef, onSpanClick],
-	);
-
-	return {
-		hoveredSpanId,
-		setHoveredSpanId,
-		hoveredEventKey,
-		handleHoverMouseMove,
-		handleHoverMouseLeave,
-		handleMouseDownForClick,
-		handleClick,
-		tooltipContent,
-	};
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphZoom.ts

@@ -1,224 +0,0 @@
-import {
-	Dispatch,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useRef,
-} from 'react';
-
-import {
-	DEFAULT_ROW_HEIGHT,
-	MAX_ROW_HEIGHT,
-	MIN_ROW_HEIGHT,
-	MIN_VISIBLE_SPAN_MS,
-	PINCH_ZOOM_INTENSITY_H,
-	PINCH_ZOOM_INTENSITY_V,
-	SCROLL_ZOOM_INTENSITY_H,
-	SCROLL_ZOOM_INTENSITY_V,
-} from '../constants';
-import { ITraceMetadata } from '../types';
-import { clamp } from '../utils';
-
-interface UseFlamegraphZoomArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	traceMetadata: ITraceMetadata;
-	viewStartRef: MutableRefObject<number>;
-	viewEndRef: MutableRefObject<number>;
-	rowHeightRef: MutableRefObject<number>;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	setRowHeight: Dispatch<SetStateAction<number>>;
-}
-
-interface UseFlamegraphZoomResult {
-	handleResetZoom: () => void;
-	isOverFlamegraphRef: MutableRefObject<boolean>;
-}
-
-function getCanvasPointer(
-	canvasRef: RefObject<HTMLCanvasElement>,
-	clientX: number,
-): { cssX: number; cssWidth: number } | null {
-	const canvas = canvasRef.current;
-	if (!canvas) {
-		return null;
-	}
-
-	const rect = canvas.getBoundingClientRect();
-	const dpr = window.devicePixelRatio || 1;
-	const cssWidth = canvas.width / dpr;
-	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
-
-	return { cssX, cssWidth };
-}
-
-export function useFlamegraphZoom(
-	args: UseFlamegraphZoomArgs,
-): UseFlamegraphZoomResult {
-	const {
-		canvasRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	} = args;
-
-	const isOverFlamegraphRef = useRef(false);
-	const wheelDeltaRef = useRef(0);
-	const rafRef = useRef<number | null>(null);
-	const lastCursorXRef = useRef(0);
-	const lastCssWidthRef = useRef(1);
-	const lastIsPinchRef = useRef(false);
-	const lastWheelClientXRef = useRef<number | null>(null);
-
-	// Prevent browser zoom when pinching over the flamegraph
-	useEffect(() => {
-		const onWheel = (e: WheelEvent): void => {
-			if (isOverFlamegraphRef.current && e.ctrlKey) {
-				e.preventDefault();
-			}
-		};
-
-		window.addEventListener('wheel', onWheel, { passive: false, capture: true });
-
-		return (): void => {
-			window.removeEventListener('wheel', onWheel, {
-				capture: true,
-			} as EventListenerOptions);
-		};
-	}, []);
-
-	const applyWheelZoom = useCallback(() => {
-		rafRef.current = null;
-
-		const cssWidth = lastCssWidthRef.current || 1;
-		const cursorX = lastCursorXRef.current;
-		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
-
-		const oldStart = viewStartRef.current;
-		const oldEnd = viewEndRef.current;
-		const oldSpan = oldEnd - oldStart;
-
-		const deltaY = wheelDeltaRef.current;
-		wheelDeltaRef.current = 0;
-		if (deltaY === 0) {
-			return;
-		}
-
-		const zoomH = lastIsPinchRef.current
-			? PINCH_ZOOM_INTENSITY_H
-			: SCROLL_ZOOM_INTENSITY_H;
-		const zoomV = lastIsPinchRef.current
-			? PINCH_ZOOM_INTENSITY_V
-			: SCROLL_ZOOM_INTENSITY_V;
-
-		const factorH = Math.exp(deltaY * zoomH);
-		const factorV = Math.exp(deltaY * zoomV);
-
-		// --- Horizontal zoom ---
-		const desiredSpan = oldSpan * factorH;
-		const minSpanMs = Math.max(
-			MIN_VISIBLE_SPAN_MS,
-			oldSpan / Math.max(cssWidth, 1),
-		);
-		const clampedSpan = clamp(desiredSpan, minSpanMs, fullSpanMs);
-
-		const cursorRatio = clamp(cursorX / cssWidth, 0, 1);
-		const anchorTs = oldStart + cursorRatio * oldSpan;
-
-		let nextStart = anchorTs - cursorRatio * clampedSpan;
-		nextStart = clamp(
-			nextStart,
-			traceMetadata.startTime,
-			traceMetadata.endTime - clampedSpan,
-		);
-		const nextEnd = nextStart + clampedSpan;
-
-		// --- Vertical zoom (row height) ---
-		const desiredRow = rowHeightRef.current * (1 / factorV);
-		const nextRow = clamp(desiredRow, MIN_ROW_HEIGHT, MAX_ROW_HEIGHT);
-
-		// Write refs immediately so rapid wheel events read fresh values
-		viewStartRef.current = nextStart;
-		viewEndRef.current = nextEnd;
-		rowHeightRef.current = nextRow;
-
-		setViewStartTs(nextStart);
-		setViewEndTs(nextEnd);
-		setRowHeight(nextRow);
-	}, [
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	]);
-
-	// Native wheel listener on the canvas (passive: false for reliable preventDefault)
-	useEffect(() => {
-		const canvas = canvasRef.current;
-		if (!canvas) {
-			return (): void => {};
-		}
-
-		const onWheel = (e: WheelEvent): void => {
-			e.preventDefault();
-
-			const pointer = getCanvasPointer(canvasRef, e.clientX);
-			if (!pointer) {
-				return;
-			}
-
-			// Flush accumulated delta if cursor moved significantly
-			if (lastWheelClientXRef.current !== null) {
-				const moved = Math.abs(e.clientX - lastWheelClientXRef.current);
-				if (moved > 6) {
-					wheelDeltaRef.current = 0;
-				}
-			}
-			lastWheelClientXRef.current = e.clientX;
-
-			lastIsPinchRef.current = e.ctrlKey;
-			lastCssWidthRef.current = pointer.cssWidth;
-			lastCursorXRef.current = pointer.cssX;
-			wheelDeltaRef.current += e.deltaY;
-
-			if (rafRef.current == null) {
-				rafRef.current = requestAnimationFrame(applyWheelZoom);
-			}
-		};
-
-		canvas.addEventListener('wheel', onWheel, { passive: false });
-
-		return (): void => {
-			canvas.removeEventListener('wheel', onWheel);
-		};
-	}, [canvasRef, applyWheelZoom]);
-
-	const handleResetZoom = useCallback(() => {
-		viewStartRef.current = traceMetadata.startTime;
-		viewEndRef.current = traceMetadata.endTime;
-		rowHeightRef.current = DEFAULT_ROW_HEIGHT;
-
-		setViewStartTs(traceMetadata.startTime);
-		setViewEndTs(traceMetadata.endTime);
-		setRowHeight(DEFAULT_ROW_HEIGHT);
-	}, [
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	]);
-
-	return { handleResetZoom, isOverFlamegraphRef };
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useScrollToSpan.ts

@@ -1,118 +0,0 @@
-import {
-	Dispatch,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useEffect,
-} from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { MIN_VISIBLE_SPAN_MS } from '../constants';
-import { ITraceMetadata } from '../types';
-import { clamp, findSpanById, getFlamegraphRowMetrics } from '../utils';
-
-interface UseScrollToSpanArgs {
-	firstSpanAtFetchLevel: string;
-	spans: FlamegraphSpan[][];
-	traceMetadata: ITraceMetadata;
-	containerRef: RefObject<HTMLDivElement>;
-	viewStartRef: MutableRefObject<number>;
-	viewEndRef: MutableRefObject<number>;
-	scrollTopRef: MutableRefObject<number>;
-	rowHeight: number;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	setScrollTop: Dispatch<SetStateAction<number>>;
-}
-
-/**
- * When firstSpanAtFetchLevel (from URL spanId) changes, scroll and zoom the
- * flamegraph so the selected span is centered in view.
- */
-export function useScrollToSpan(args: UseScrollToSpanArgs): void {
-	const {
-		firstSpanAtFetchLevel,
-		spans,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	} = args;
-
-	useEffect(() => {
-		if (!firstSpanAtFetchLevel || spans.length === 0) {
-			return;
-		}
-
-		const result = findSpanById(spans, firstSpanAtFetchLevel);
-		if (!result) {
-			return;
-		}
-
-		const { span, levelIndex } = result;
-		const container = containerRef.current;
-		if (!container) {
-			return;
-		}
-
-		const metrics = getFlamegraphRowMetrics(rowHeight);
-		const viewportHeight = container.clientHeight;
-		const totalHeight = spans.length * metrics.ROW_HEIGHT;
-		const maxScroll = Math.max(0, totalHeight - viewportHeight);
-
-		// Vertical: center the span's row in the viewport
-		const targetScrollTop = clamp(
-			levelIndex * metrics.ROW_HEIGHT -
-				viewportHeight / 2 +
-				metrics.ROW_HEIGHT / 2,
-			0,
-			maxScroll,
-		);
-
-		// Horizontal: zoom to span with padding (2x span duration), center it
-		const spanStartMs = span.timestamp;
-		const spanEndMs = span.timestamp + span.durationNano / 1e6;
-		const spanDurationMs = spanEndMs - spanStartMs;
-		const spanCenterMs = (spanStartMs + spanEndMs) / 2;
-
-		const visibleWindowMs = Math.max(spanDurationMs * 2, MIN_VISIBLE_SPAN_MS);
-		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
-		const clampedWindow = clamp(visibleWindowMs, MIN_VISIBLE_SPAN_MS, fullSpanMs);
-
-		let targetViewStart = spanCenterMs - clampedWindow / 2;
-		let targetViewEnd = spanCenterMs + clampedWindow / 2;
-
-		targetViewStart = clamp(
-			targetViewStart,
-			traceMetadata.startTime,
-			traceMetadata.endTime - clampedWindow,
-		);
-		targetViewEnd = targetViewStart + clampedWindow;
-
-		// Apply immediately (instant jump)
-		viewStartRef.current = targetViewStart;
-		viewEndRef.current = targetViewEnd;
-		scrollTopRef.current = targetScrollTop;
-
-		setViewStartTs(targetViewStart);
-		setViewEndTs(targetViewEnd);
-		setScrollTop(targetScrollTop);
-	}, [
-		firstSpanAtFetchLevel,
-		spans,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	]);
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useVisualLayoutWorker.ts

@@ -1,98 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { computeVisualLayout, VisualLayout } from '../computeVisualLayout';
-import { LayoutWorkerResponse } from '../visualLayoutWorkerTypes';
-
-const EMPTY_LAYOUT: VisualLayout = {
-	visualRows: [],
-	spanToVisualRow: {},
-	connectors: [],
-	totalVisualRows: 0,
-};
-
-function computeLayoutOrEmpty(spans: FlamegraphSpan[][]): VisualLayout {
-	return spans.length ? computeVisualLayout(spans) : EMPTY_LAYOUT;
-}
-
-function createLayoutWorker(): Worker {
-	return new Worker(new URL('../visualLayout.worker.ts', import.meta.url), {
-		type: 'module',
-	});
-}
-
-export function useVisualLayoutWorker(
-	spans: FlamegraphSpan[][],
-): { layout: VisualLayout; isComputing: boolean } {
-	const [layout, setLayout] = useState<VisualLayout>(EMPTY_LAYOUT);
-	const [isComputing, setIsComputing] = useState(false);
-	const workerRef = useRef<Worker | null>(null);
-	const requestIdRef = useRef(0);
-	const fallbackRef = useRef(typeof Worker === 'undefined');
-
-	// Effect: post message to worker when spans change
-	useEffect(() => {
-		if (fallbackRef.current) {
-			setLayout(computeLayoutOrEmpty(spans));
-			return;
-		}
-
-		if (!workerRef.current) {
-			try {
-				workerRef.current = createLayoutWorker();
-			} catch {
-				fallbackRef.current = true;
-				setLayout(computeLayoutOrEmpty(spans));
-				return;
-			}
-		}
-
-		if (!spans.length) {
-			setLayout(EMPTY_LAYOUT);
-			return;
-		}
-
-		const currentId = ++requestIdRef.current;
-		setIsComputing(true);
-
-		const worker = workerRef.current;
-
-		const onMessage = (e: MessageEvent<LayoutWorkerResponse>): void => {
-			if (e.data.requestId !== requestIdRef.current) {
-				return;
-			}
-			if (e.data.type === 'result') {
-				setLayout(e.data.layout);
-			} else {
-				setLayout(computeVisualLayout(spans));
-			}
-			setIsComputing(false);
-		};
-
-		const onError = (): void => {
-			if (requestIdRef.current === currentId) {
-				setLayout(computeVisualLayout(spans));
-				setIsComputing(false);
-			}
-		};
-
-		worker.addEventListener('message', onMessage);
-		worker.addEventListener('error', onError);
-		worker.postMessage({ type: 'compute', requestId: currentId, spans });
-
-		return (): void => {
-			worker.removeEventListener('message', onMessage);
-			worker.removeEventListener('error', onError);
-		};
-	}, [spans]);
-
-	// Cleanup worker on unmount
-	useEffect(
-		() => (): void => {
-			workerRef.current?.terminate();
-		},
-		[],
-	);
-
-	return { layout, isComputing };
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/types.ts

@@ -1,32 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Event, FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-export interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-export interface FlamegraphCanvasProps {
-	spans: FlamegraphSpan[][];
-	firstSpanAtFetchLevel: string;
-	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
-	onSpanClick: (spanId: string) => void;
-	traceMetadata: ITraceMetadata;
-}
-
-export interface SpanRect {
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	level: number;
-}
-
-export interface EventRect {
-	event: Event;
-	span: FlamegraphSpan;
-	cx: number;
-	cy: number;
-	halfSize: number;
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/utils.ts

@@ -1,424 +0,0 @@
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import {
-	DASHED_BORDER_LINE_DASH,
-	EVENT_DOT_SIZE_RATIO,
-	LABEL_FONT,
-	LABEL_PADDING_X,
-	MAX_EVENT_DOT_SIZE,
-	MAX_SPAN_BAR_HEIGHT,
-	MIN_EVENT_DOT_SIZE,
-	MIN_SPAN_BAR_HEIGHT,
-	MIN_WIDTH_FOR_NAME,
-	MIN_WIDTH_FOR_NAME_AND_DURATION,
-	SPAN_BAR_HEIGHT_RATIO,
-} from './constants';
-import { EventRect, SpanRect } from './types';
-
-export function clamp(v: number, min: number, max: number): number {
-	return Math.max(min, Math.min(max, v));
-}
-
-/** Create diagonal stripe pattern for selected/hovered span (repeating-linear-gradient -45deg style). */
-function createStripePattern(
-	ctx: CanvasRenderingContext2D,
-	color: string,
-): CanvasPattern | null {
-	const size = 20;
-	const patternCanvas = document.createElement('canvas');
-	patternCanvas.width = size;
-	patternCanvas.height = size;
-	const pCtx = patternCanvas.getContext('2d');
-	if (!pCtx) {
-		return null;
-	}
-
-	// Diagonal stripes at -45deg: 10px transparent, 10px colored (0.04 opacity), repeat
-	pCtx.globalAlpha = 0.04;
-	pCtx.strokeStyle = color;
-	pCtx.lineWidth = 10;
-	pCtx.lineCap = 'butt';
-	for (let i = -size; i < size * 2; i += size) {
-		pCtx.beginPath();
-		pCtx.moveTo(i + size, 0);
-		pCtx.lineTo(i, size);
-		pCtx.stroke();
-	}
-	pCtx.globalAlpha = 1;
-
-	return ctx.createPattern(patternCanvas, 'repeat');
-}
-
-export function findSpanById(
-	spans: FlamegraphSpan[][],
-	spanId: string,
-): { span: FlamegraphSpan; levelIndex: number } | null {
-	for (let levelIndex = 0; levelIndex < spans.length; levelIndex++) {
-		const span = spans[levelIndex]?.find((s) => s.spanId === spanId);
-		if (span) {
-			return { span, levelIndex };
-		}
-	}
-	return null;
-}
-
-export interface FlamegraphRowMetrics {
-	ROW_HEIGHT: number;
-	SPAN_BAR_HEIGHT: number;
-	SPAN_BAR_Y_OFFSET: number;
-	EVENT_DOT_SIZE: number;
-}
-
-export function getFlamegraphRowMetrics(
-	rowHeight: number,
-): FlamegraphRowMetrics {
-	const spanBarHeight = clamp(
-		Math.round(rowHeight * SPAN_BAR_HEIGHT_RATIO),
-		MIN_SPAN_BAR_HEIGHT,
-		MAX_SPAN_BAR_HEIGHT,
-	);
-	const spanBarYOffset = Math.floor((rowHeight - spanBarHeight) / 2);
-	const eventDotSize = clamp(
-		Math.round(spanBarHeight * EVENT_DOT_SIZE_RATIO),
-		MIN_EVENT_DOT_SIZE,
-		MAX_EVENT_DOT_SIZE,
-	);
-
-	return {
-		ROW_HEIGHT: rowHeight,
-		SPAN_BAR_HEIGHT: spanBarHeight,
-		SPAN_BAR_Y_OFFSET: spanBarYOffset,
-		EVENT_DOT_SIZE: eventDotSize,
-	};
-}
-
-interface GetSpanColorArgs {
-	span: FlamegraphSpan;
-	isDarkMode: boolean;
-}
-
-export function getSpanColor(args: GetSpanColorArgs): string {
-	const { span, isDarkMode } = args;
-	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
-
-	if (span.hasError) {
-		color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
-	}
-
-	return color;
-}
-
-export interface EventDotColor {
-	fill: string;
-	stroke: string;
-}
-
-/** Derive event dot colors from parent span color. Error events always use red. */
-export function getEventDotColor(
-	spanColor: string,
-	isError: boolean,
-	isDarkMode: boolean,
-): EventDotColor {
-	if (isError) {
-		return {
-			fill: isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)',
-			stroke: isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)',
-		};
-	}
-
-	// Parse the span color (hex or rgb) to darken it for the event dot
-	let r: number | undefined;
-	let g: number | undefined;
-	let b: number | undefined;
-
-	const rgbMatch = spanColor.match(
-		/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+)?\s*\)/,
-	);
-	const hexMatch = spanColor.match(
-		/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i,
-	);
-
-	if (rgbMatch) {
-		r = parseInt(rgbMatch[1], 10);
-		g = parseInt(rgbMatch[2], 10);
-		b = parseInt(rgbMatch[3], 10);
-	} else if (hexMatch) {
-		r = parseInt(hexMatch[1], 16);
-		g = parseInt(hexMatch[2], 16);
-		b = parseInt(hexMatch[3], 16);
-	}
-
-	if (r !== undefined && g !== undefined && b !== undefined) {
-		// Darken by 20% for fill, 40% for stroke
-		const darken = (v: number, factor: number): number =>
-			Math.round(v * (1 - factor));
-		return {
-			fill: `rgb(${darken(r, 0.2)}, ${darken(g, 0.2)}, ${darken(b, 0.2)})`,
-			stroke: `rgb(${darken(r, 0.4)}, ${darken(g, 0.4)}, ${darken(b, 0.4)})`,
-		};
-	}
-
-	// Fallback to original cyan/blue
-	return {
-		fill: isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)',
-		stroke: isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)',
-	};
-}
-
-interface DrawEventDotArgs {
-	ctx: CanvasRenderingContext2D;
-	x: number;
-	y: number;
-	color: EventDotColor;
-	eventDotSize: number;
-}
-
-export function drawEventDot(args: DrawEventDotArgs): void {
-	const { ctx, x, y, color, eventDotSize } = args;
-
-	ctx.save();
-	ctx.translate(x, y);
-	ctx.rotate(Math.PI / 4);
-
-	ctx.fillStyle = color.fill;
-	ctx.strokeStyle = color.stroke;
-
-	ctx.lineWidth = 1;
-	const half = eventDotSize / 2;
-	ctx.fillRect(-half, -half, eventDotSize, eventDotSize);
-	ctx.strokeRect(-half, -half, eventDotSize, eventDotSize);
-	ctx.restore();
-}
-
-interface DrawSpanBarArgs {
-	ctx: CanvasRenderingContext2D;
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	levelIndex: number;
-	spanRectsArray: SpanRect[];
-	eventRectsArray: EventRect[];
-	color: string;
-	isDarkMode: boolean;
-	metrics: FlamegraphRowMetrics;
-	selectedSpanId?: string | null;
-	hoveredSpanId?: string | null;
-	hoveredEventKey?: string | null;
-}
-
-export function drawSpanBar(args: DrawSpanBarArgs): void {
-	const {
-		ctx,
-		span,
-		x,
-		y,
-		width,
-		levelIndex,
-		spanRectsArray,
-		eventRectsArray,
-		color,
-		isDarkMode,
-		metrics,
-		selectedSpanId,
-		hoveredSpanId,
-		hoveredEventKey,
-	} = args;
-
-	const spanY = y + metrics.SPAN_BAR_Y_OFFSET;
-	const isSelected = selectedSpanId === span.spanId;
-	const isHovered = hoveredSpanId === span.spanId;
-	const isSelectedOrHovered = isSelected || isHovered;
-
-	ctx.beginPath();
-	ctx.roundRect(x, spanY, width, metrics.SPAN_BAR_HEIGHT, 2);
-
-	if (isSelectedOrHovered) {
-		// Diagonal stripe pattern (repeating-linear-gradient -45deg style) + border in span color
-		const pattern = createStripePattern(ctx, color);
-		if (pattern) {
-			ctx.fillStyle = pattern;
-			ctx.fill();
-		}
-		if (isSelected) {
-			ctx.setLineDash(DASHED_BORDER_LINE_DASH);
-		}
-		ctx.strokeStyle = color;
-		ctx.lineWidth = isSelected ? 2 : 1;
-		ctx.stroke();
-		if (isSelected) {
-			ctx.setLineDash([]);
-		}
-	} else {
-		ctx.fillStyle = color;
-		ctx.fill();
-	}
-
-	spanRectsArray.push({
-		span,
-		x,
-		y: spanY,
-		width,
-		height: metrics.SPAN_BAR_HEIGHT,
-		level: levelIndex,
-	});
-
-	span.event?.forEach((event) => {
-		const spanDurationMs = span.durationNano / 1e6;
-		if (spanDurationMs <= 0) {
-			return;
-		}
-
-		const eventTimeMs = event.timeUnixNano / 1e6;
-		const eventOffsetPercent =
-			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
-		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
-		const eventX = x + (clampedOffset / 100) * width;
-		const eventY = spanY + metrics.SPAN_BAR_HEIGHT / 2;
-
-		const dotColor = getEventDotColor(color, event.isError, isDarkMode);
-		const eventKey = `${span.spanId}-${event.name}-${event.timeUnixNano}`;
-		const isEventHovered = hoveredEventKey === eventKey;
-		const dotSize = isEventHovered
-			? Math.round(metrics.EVENT_DOT_SIZE * 1.5)
-			: metrics.EVENT_DOT_SIZE;
-
-		drawEventDot({
-			ctx,
-			x: eventX,
-			y: eventY,
-			color: dotColor,
-			eventDotSize: dotSize,
-		});
-
-		eventRectsArray.push({
-			event,
-			span,
-			cx: eventX,
-			cy: eventY,
-			halfSize: metrics.EVENT_DOT_SIZE / 2,
-		});
-	});
-
-	drawSpanLabel({
-		ctx,
-		span,
-		x,
-		y: spanY,
-		width,
-		color,
-		isSelectedOrHovered,
-		isDarkMode,
-		spanBarHeight: metrics.SPAN_BAR_HEIGHT,
-	});
-}
-
-export function formatDuration(durationNano: number): string {
-	const durationMs = durationNano / 1e6;
-	const { time, timeUnitName } = convertTimeToRelevantUnit(durationMs);
-	return `${parseFloat(time.toFixed(2))}${timeUnitName}`;
-}
-
-interface DrawSpanLabelArgs {
-	ctx: CanvasRenderingContext2D;
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	color: string;
-	isSelectedOrHovered: boolean;
-	isDarkMode: boolean;
-	spanBarHeight: number;
-}
-
-function drawSpanLabel(args: DrawSpanLabelArgs): void {
-	const {
-		ctx,
-		span,
-		x,
-		y,
-		width,
-		color,
-		isSelectedOrHovered,
-		isDarkMode,
-		spanBarHeight,
-	} = args;
-
-	if (width < MIN_WIDTH_FOR_NAME) {
-		return;
-	}
-
-	const name = span.name;
-
-	ctx.save();
-
-	// Clip text to span bar bounds
-	ctx.beginPath();
-	ctx.rect(x, y, width, spanBarHeight);
-	ctx.clip();
-
-	ctx.font = LABEL_FONT;
-	ctx.fillStyle = isSelectedOrHovered
-		? color
-		: isDarkMode
-		? 'rgba(0, 0, 0, 0.9)'
-		: 'rgba(255, 255, 255, 0.9)';
-	ctx.textBaseline = 'middle';
-
-	const textY = y + spanBarHeight / 2;
-	const leftX = x + LABEL_PADDING_X;
-	const rightX = x + width - LABEL_PADDING_X;
-	const availableWidth = width - LABEL_PADDING_X * 2;
-
-	if (width >= MIN_WIDTH_FOR_NAME_AND_DURATION) {
-		const duration = formatDuration(span.durationNano);
-		const durationWidth = ctx.measureText(duration).width;
-		const minGap = 6;
-		const nameSpace = availableWidth - durationWidth - minGap;
-
-		// Duration right-aligned
-		ctx.textAlign = 'right';
-		ctx.fillText(duration, rightX, textY);
-
-		// Name left-aligned, truncated to fit remaining space
-		if (nameSpace > 20) {
-			ctx.textAlign = 'left';
-			ctx.fillText(truncateText(ctx, name, nameSpace), leftX, textY);
-		}
-	} else {
-		// Name only, truncated to fit
-		ctx.textAlign = 'left';
-		ctx.fillText(truncateText(ctx, name, availableWidth), leftX, textY);
-	}
-
-	ctx.restore();
-}
-
-function truncateText(
-	ctx: CanvasRenderingContext2D,
-	text: string,
-	maxWidth: number,
-): string {
-	const ellipsis = '...';
-	const ellipsisWidth = ctx.measureText(ellipsis).width;
-
-	if (ctx.measureText(text).width <= maxWidth) {
-		return text;
-	}
-
-	let lo = 0;
-	let hi = text.length;
-	while (lo < hi) {
-		const mid = Math.ceil((lo + hi) / 2);
-		if (ctx.measureText(text.slice(0, mid)).width + ellipsisWidth <= maxWidth) {
-			lo = mid;
-		} else {
-			hi = mid - 1;
-		}
-	}
-
-	return lo > 0 ? `${text.slice(0, lo)}${ellipsis}` : ellipsis;
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayout.worker.ts

@@ -1,26 +0,0 @@
-/// <reference lib="webworker" />
-import { computeVisualLayout } from './computeVisualLayout';
-import {
-	LayoutWorkerRequest,
-	LayoutWorkerResponse,
-} from './visualLayoutWorkerTypes';
-
-self.onmessage = (event: MessageEvent<LayoutWorkerRequest>): void => {
-	const { requestId, spans } = event.data;
-	try {
-		const layout = computeVisualLayout(spans);
-		const response: LayoutWorkerResponse = {
-			type: 'result',
-			requestId,
-			layout,
-		};
-		self.postMessage(response);
-	} catch (err) {
-		const response: LayoutWorkerResponse = {
-			type: 'error',
-			requestId,
-			message: String(err),
-		};
-		self.postMessage(response);
-	}
-};

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayoutWorkerTypes.ts

@@ -1,13 +0,0 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { VisualLayout } from './computeVisualLayout';
-
-export interface LayoutWorkerRequest {
-	type: 'compute';
-	requestId: number;
-	spans: FlamegraphSpan[][];
-}
-
-export type LayoutWorkerResponse =
-	| { type: 'result'; requestId: number; layout: VisualLayout }
-	| { type: 'error'; requestId: number; message: string };

frontend/src/periscope/components/DataViewer/DataViewer.styles.scss

@@ -0,0 +1,54 @@
+.data-viewer {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+
+	// Toolbar — view mode switcher + copy button
+	&__toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: 8px;
+	}
+
+	&__mode-select {
+		min-width: 90px;
+		height: 28px !important;
+
+		.ant-select-selector {
+			border-radius: 4px !important;
+			border-color: var(--l2-border) !important;
+			font-size: 12px !important;
+		}
+	}
+
+	&__copy-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 4px 8px;
+		border: 1px solid var(--l2-border);
+		border-radius: 4px;
+		background: transparent;
+		color: var(--l2-foreground);
+		cursor: pointer;
+
+		&:hover {
+			color: var(--l1-foreground);
+			background: var(--l3-background);
+		}
+	}
+
+	// Shared content container — no scroll, each view handles its own
+	&__content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--l2-border);
+		border-radius: 4px;
+		padding: 8px;
+		min-height: 0;
+		overflow: hidden;
+	}
+}

frontend/src/periscope/components/DataViewer/DataViewer.tsx

@@ -0,0 +1,67 @@
+import { useMemo, useState } from 'react';
+import { Copy } from '@signozhq/icons';
+// TODO: Replace antd Select with @signozhq/ui component when moving to design library
+import { Select } from 'antd';
+import { JsonView } from 'periscope/components/JsonView';
+import { PrettyView } from 'periscope/components/PrettyView';
+import { PrettyViewProps } from 'periscope/components/PrettyView';
+
+import { copyToClipboard } from './utils';
+
+import './DataViewer.styles.scss';
+
+type ViewMode = 'pretty' | 'json';
+
+export interface DataViewerProps {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	data: Record<string, any>;
+	drawerKey?: string;
+	prettyViewProps?: Omit<PrettyViewProps, 'data' | 'drawerKey'>;
+}
+
+function DataViewer({
+	data,
+	drawerKey = 'default',
+	prettyViewProps,
+}: DataViewerProps): JSX.Element {
+	const [viewMode, setViewMode] = useState<ViewMode>('pretty');
+
+	const jsonString = useMemo(() => JSON.stringify(data, null, 2), [data]);
+
+	return (
+		<div className="data-viewer">
+			<div className="data-viewer__toolbar">
+				<Select
+					className="data-viewer__mode-select"
+					size="small"
+					value={viewMode}
+					onChange={(value: ViewMode): void => setViewMode(value)}
+					options={[
+						{ label: 'Pretty', value: 'pretty' },
+						{ label: 'JSON', value: 'json' },
+					]}
+					getPopupContainer={(trigger): HTMLElement =>
+						trigger.parentElement || document.body
+					}
+				/>
+				<button
+					type="button"
+					className="data-viewer__copy-btn"
+					onClick={(): void => copyToClipboard(data)}
+					aria-label="Copy JSON"
+				>
+					<Copy size={14} />
+				</button>
+			</div>
+
+			<div className="data-viewer__content">
+				{viewMode === 'pretty' && (
+					<PrettyView data={data} drawerKey={drawerKey} {...prettyViewProps} />
+				)}
+				{viewMode === 'json' && <JsonView data={jsonString} />}
+			</div>
+		</div>
+	);
+}
+
+export default DataViewer;

frontend/src/periscope/components/DataViewer/index.ts

@@ -0,0 +1,2 @@
+export type { DataViewerProps } from './DataViewer';
+export { default as DataViewer } from './DataViewer';

frontend/src/periscope/components/DataViewer/utils.ts

@@ -0,0 +1,12 @@
+import { toast } from '@signozhq/sonner';
+
+export function copyToClipboard(value: unknown): void {
+	const text =
+		typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value);
+	// eslint-disable-next-line no-restricted-properties
+	navigator.clipboard.writeText(text);
+	toast.success('Copied to clipboard', {
+		richColors: true,
+		position: 'top-right',
+	});
+}

frontend/src/periscope/components/FloatingPanel/FloatingPanel.styles.scss

@@ -0,0 +1,22 @@
+.floating-panel {
+	z-index: 999;
+	background: var(--l1-background);
+	border: 1px solid var(--l2-border);
+	border-radius: 6px;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+	overflow: hidden;
+
+	// Inner div fills the Rnd-controlled size
+	&__inner {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	// Drag handle — any child with this class becomes the drag target
+	.floating-panel__drag-handle {
+		cursor: move;
+	}
+}

frontend/src/periscope/components/FloatingPanel/FloatingPanel.tsx

@@ -0,0 +1,80 @@
+import { ComponentProps } from 'react';
+import { createPortal } from 'react-dom';
+import { Rnd } from 'react-rnd';
+
+import './FloatingPanel.styles.scss';
+
+type EnableResizing = ComponentProps<typeof Rnd>['enableResizing'];
+
+export interface FloatingPanelProps {
+	isOpen: boolean;
+	children: React.ReactNode;
+	defaultPosition?: { x: number; y: number };
+	width?: number;
+	height?: number;
+	minWidth?: number;
+	minHeight?: number;
+	enableResizing?: EnableResizing;
+	className?: string;
+}
+
+function FloatingPanel({
+	isOpen,
+	children,
+	defaultPosition,
+	width = 560,
+	height = 600,
+	minWidth = 400,
+	minHeight = 300,
+	enableResizing,
+	className,
+}: FloatingPanelProps): JSX.Element | null {
+	if (!isOpen) {
+		return null;
+	}
+
+	const initialPosition = defaultPosition || {
+		x: window.innerWidth - width - 24,
+		y: 80,
+	};
+
+	return createPortal(
+		<Rnd
+			default={{
+				x: initialPosition.x,
+				y: initialPosition.y,
+				width,
+				height,
+			}}
+			dragHandleClassName="floating-panel__drag-handle"
+			minWidth={minWidth}
+			minHeight={minHeight}
+			onDrag={(_e, d): void | false => {
+				const HEADER_HEIGHT = 40;
+				// Top: don't allow header to go above viewport
+				if (d.y < 0) {
+					return false;
+				}
+				// Left: don't allow panel to go off-screen left
+				if (d.x < 0) {
+					return false;
+				}
+				// Bottom: only header needs to be visible
+				if (d.y > window.innerHeight - HEADER_HEIGHT) {
+					return false;
+				}
+				// Right: at least the close button (~40px) stays visible
+				if (d.x > window.innerWidth - 40) {
+					return false;
+				}
+			}}
+			className={`floating-panel ${className || ''}`}
+			enableResizing={enableResizing}
+		>
+			<div className="floating-panel__inner">{children}</div>
+		</Rnd>,
+		document.body,
+	);
+}
+
+export default FloatingPanel;

frontend/src/periscope/components/FloatingPanel/index.ts

@@ -0,0 +1,2 @@
+export type { FloatingPanelProps } from './FloatingPanel';
+export { default as FloatingPanel } from './FloatingPanel';

frontend/src/periscope/components/JsonView/JsonView.styles.scss

@@ -0,0 +1,22 @@
+.json-view {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+
+	&__footer {
+		flex-shrink: 0;
+		height: 36px;
+		display: flex;
+		align-items: center;
+		border-top: 1px solid var(--l2-border);
+	}
+
+	&__wrap-toggle {
+		display: flex;
+		gap: 8px;
+		margin-left: 12px;
+		align-items: center;
+	}
+}

frontend/src/periscope/components/JsonView/JsonView.tsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+import { Switch, Typography } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import './JsonView.styles.scss';
+
+export interface JsonViewProps {
+	data: string;
+	height?: string;
+}
+
+const editorOptions: EditorProps['options'] = {
+	automaticLayout: true,
+	readOnly: true,
+	wordWrap: 'on',
+	minimap: { enabled: false },
+	fontWeight: 400,
+	fontFamily: 'SF Mono, Geist Mono, Fira Code, monospace',
+	fontSize: 12,
+	lineHeight: '18px',
+	colorDecorators: true,
+	scrollBeyondLastLine: false,
+	decorationsOverviewRuler: false,
+	scrollbar: { vertical: 'hidden', horizontal: 'hidden' },
+	folding: false,
+};
+
+function setEditorTheme(monaco: Monaco): void {
+	monaco.editor.defineTheme('signoz-dark', {
+		base: 'vs-dark',
+		inherit: true,
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+			{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+		],
+		colors: {
+			'editor.background': '#00000000', // transparent
+		},
+		fontFamily: 'SF Mono, Geist Mono, Fira Code, monospace',
+		fontSize: 12,
+		fontWeight: 'normal',
+		lineHeight: 18,
+		letterSpacing: -0.06,
+	});
+}
+
+function JsonView({ data, height = '575px' }: JsonViewProps): JSX.Element {
+	const [isWrapWord, setIsWrapWord] = useState(true);
+	const isDarkMode = useIsDarkMode();
+
+	return (
+		<div className="json-view">
+			<MEditor
+				value={data}
+				language="json"
+				options={{ ...editorOptions, wordWrap: isWrapWord ? 'on' : 'off' }}
+				onChange={(): void => {}}
+				height={height}
+				theme={isDarkMode ? 'signoz-dark' : 'light'}
+				beforeMount={setEditorTheme}
+			/>
+			<div className="json-view__footer">
+				<div className="json-view__wrap-toggle">
+					<Typography.Text>Wrap text</Typography.Text>
+					<Switch
+						checked={isWrapWord}
+						onChange={(checked): void => setIsWrapWord(checked)}
+						size="small"
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default JsonView;

frontend/src/periscope/components/JsonView/index.ts

@@ -0,0 +1,2 @@
+export type { JsonViewProps } from './JsonView';
+export { default as JsonView } from './JsonView';

frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.styles.scss

@@ -1,43 +1,67 @@
 .key-value-label {
 	display: flex;
-	align-items: center;
-	border: 1px solid var(--bg-slate-400);
+	border: 1px solid var(--l2-border);
 	border-radius: 2px;
-	flex-wrap: wrap;
+
+	&--row {
+		align-items: center;
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	&--column {
+		flex-direction: column;
+		border: none;
+		border-radius: 0;
+		gap: 4px;
+		padding: 8px;
+
+		.key-value-label__key {
+			background: transparent;
+			border-radius: 0;
+			padding: 0;
+			font-size: 12px;
+			font-weight: 500;
+			text-transform: uppercase;
+			letter-spacing: 0.48px;
+			line-height: 20px;
+		}
+
+		.key-value-label__value {
+			background: transparent;
+			padding: 0;
+			font-size: 14px;
+			line-height: 20px;
+		}
+	}
 
 	&__key,
 	&__value {
-		padding: 1px 6px;
+		padding: 6px;
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 18px;
 		letter-spacing: -0.005em;
 		&,
 		&:hover {
-			color: var(--text-vanilla-400);
+			color: var(--l1-foreground);
 		}
 	}
+
 	&__key {
-		background: var(--bg-ink-400);
+		background: var(--l2-background);
 		border-radius: 2px 0 0 2px;
 	}
-	&__value {
-		background: var(--bg-slate-400);
-	}
-}
 
-.lightMode {
-	.key-value-label {
-		border-color: var(--bg-vanilla-400);
-		&__key,
-		&__value {
-			color: var(--text-ink-400);
-		}
-		&__key {
-			background: var(--bg-vanilla-300);
-		}
-		&__value {
-			background: var(--bg-vanilla-200);
+	&__value {
+		background: var(--l3-background);
+
+		&--clickable {
+			cursor: pointer;
+
+			&:hover {
+				opacity: 0.8;
+			}
 		}
 	}
 }

frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.tsx

@@ -1,29 +1,61 @@
-import { useMemo } from 'react';
 import { Tooltip } from 'antd';
 
 import TrimmedText from '../TrimmedText/TrimmedText';
 
 import './KeyValueLabel.styles.scss';
 
+// Rethink this component later
 type KeyValueLabelProps = {
 	badgeKey: string | React.ReactNode;
-	badgeValue: string;
+	badgeValue: string | React.ReactNode;
+	direction?: 'row' | 'column';
 	maxCharacters?: number;
+	onClick?: () => void;
 };
 
 export default function KeyValueLabel({
 	badgeKey,
 	badgeValue,
+	direction = 'row',
 	maxCharacters = 20,
+	onClick,
 }: KeyValueLabelProps): JSX.Element | null {
-	const isUrl = useMemo(() => /^https?:\/\//.test(badgeValue), [badgeValue]);
-
 	if (!badgeKey || !badgeValue) {
 		return null;
 	}
 
+	const renderValue = (): JSX.Element => {
+		if (typeof badgeValue !== 'string') {
+			return <div className="key-value-label__value">{badgeValue}</div>;
+		}
+
+		return (
+			<Tooltip title={badgeValue}>
+				<div
+					className={`key-value-label__value ${
+						onClick ? 'key-value-label__value--clickable' : ''
+					}`}
+					onClick={onClick}
+					role={onClick ? 'button' : undefined}
+					tabIndex={onClick ? 0 : undefined}
+					onKeyDown={
+						onClick
+							? (e): void => {
+									if (e.key === 'Enter' || e.key === ' ') {
+										onClick();
+									}
+							  }
+							: undefined
+					}
+				>
+					<TrimmedText text={badgeValue} maxCharacters={maxCharacters} />
+				</div>
+			</Tooltip>
+		);
+	};
+
 	return (
-		<div className="key-value-label">
+		<div className={`key-value-label key-value-label--${direction}`}>
 			<div className="key-value-label__key">
 				{typeof badgeKey === 'string' ? (
 					<TrimmedText text={badgeKey} maxCharacters={maxCharacters} />
@@ -31,26 +63,13 @@ export default function KeyValueLabel({
 					badgeKey
 				)}
 			</div>
-			{isUrl ? (
-				<a
-					href={badgeValue}
-					target="_blank"
-					rel="noopener noreferrer"
-					className="key-value-label__value"
-				>
-					<TrimmedText text={badgeValue} maxCharacters={maxCharacters} />
-				</a>
-			) : (
-				<Tooltip title={badgeValue}>
-					<div className="key-value-label__value">
-						<TrimmedText text={badgeValue} maxCharacters={maxCharacters} />
-					</div>
-				</Tooltip>
-			)}
+			{renderValue()}
 		</div>
 	);
 }
 
 KeyValueLabel.defaultProps = {
 	maxCharacters: 20,
+	direction: 'row',
+	onClick: undefined,
 };

frontend/src/periscope/components/PrettyView/PrettyView.styles.scss

@@ -0,0 +1,191 @@
+.pretty-view {
+	padding: 0;
+	flex: 1;
+	overflow-y: auto;
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
+	&__search-input {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		margin-bottom: 8px;
+		width: 100%;
+		border: 1px solid var(--l2-border) !important;
+		border-radius: 4px;
+		font-family: 'SF Mono', 'Geist Mono', 'Fira Code', monospace !important;
+		font-size: 12px !important;
+		line-height: 18px !important;
+		background: var(--l1-background) !important;
+		outline: none !important;
+		box-shadow: none !important;
+
+		&:focus {
+			border-color: var(--primary) !important;
+			outline: none !important;
+			box-shadow: none !important;
+		}
+	}
+
+	// Font spec: SF Mono, 12px, 400, 18px line-height, -0.5% letter-spacing
+	font-family: 'SF Mono', 'Geist Mono', 'Fira Code', monospace;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 18px;
+	letter-spacing: -0.06px;
+
+	// Override react-json-tree inline styles
+	ul {
+		margin: 0 !important;
+		padding-left: 16px !important;
+		list-style: none !important;
+		background-color: transparent !important;
+		flex: 1;
+	}
+
+	> ul,
+	&__pinned > ul {
+		padding-left: 0 !important;
+	}
+
+	// Force font on all tree elements
+	li,
+	span,
+	label {
+		font-family: inherit !important;
+		font-size: inherit !important;
+		line-height: inherit !important;
+		letter-spacing: inherit !important;
+	}
+
+	// Fix react-json-tree text-indent wrapping
+	li {
+		text-indent: 0 !important;
+		margin-left: 0 !important;
+		padding-top: 2px !important;
+		padding-bottom: 2px !important;
+	}
+
+	.pretty-view__actions {
+		margin-right: 16px;
+	}
+
+	// Leaf node row — hover highlights only this row
+	&__row {
+		border-radius: 2px;
+		display: flex !important;
+		align-items: baseline;
+
+		&:hover {
+			background-color: var(--l3-background);
+
+			.pretty-view__actions {
+				opacity: 1;
+			}
+		}
+
+		// Push actions to the right edge
+		> span {
+			flex: 1;
+		}
+	}
+
+	// Nested node (object/array) — hover only on the label line, not children
+	&__nested-row {
+		> label,
+		> span:not(ul span) {
+			border-radius: 2px;
+			padding: 1px 2px;
+			display: inline !important; // keep item string inline with label
+		}
+
+		// Highlight label + item string on hover, show actions
+		&:hover > label,
+		&:hover > label + span {
+			background-color: var(--l3-background);
+		}
+
+		&:hover > label + span .pretty-view__actions {
+			opacity: 1;
+		}
+
+		// In nested rows, value-row should not take full width
+		.pretty-view__value-row {
+			width: auto;
+		}
+	}
+
+	// Value + actions wrapper (from valueRenderer / getItemString)
+	&__value-row {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	// In leaf rows, value-row takes full width to push ... to the right
+	&__row &__value-row {
+		justify-content: space-between;
+		width: 100%;
+	}
+
+	// ... actions button — hidden by default, shown on row hover
+	&__actions {
+		opacity: 0;
+		display: inline-flex;
+		align-items: center;
+		cursor: pointer;
+		color: var(--l2-foreground);
+		transition: opacity 0.1s ease;
+		padding: 0 2px;
+
+		&:hover {
+			color: var(--l1-foreground);
+		}
+	}
+
+	// Pinned items section
+	&__pinned {
+		border-bottom: 1px solid var(--l2-border);
+		padding-bottom: 8px;
+		margin-bottom: 8px;
+		padding-left: 0px;
+
+		li {
+			margin-left: 0 !important;
+			padding-left: 0 !important;
+			display: flex !important;
+			align-items: baseline;
+		}
+	}
+
+	&__pinned-header {
+		font-size: 11px;
+		font-weight: 500;
+		color: var(--l3-foreground);
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		padding: 4px;
+	}
+
+	&__pinned-label {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 6px;
+	}
+
+	&__pinned-icon {
+		flex-shrink: 0;
+		color: var(--text-robin-400);
+		cursor: pointer;
+		fill: var(--text-robin-400);
+		transition: fill 0.1s ease;
+
+		&:hover {
+			color: var(--text-robin-300);
+			fill: transparent;
+		}
+	}
+}

frontend/src/periscope/components/PrettyView/PrettyView.tsx

@@ -0,0 +1,300 @@
+import { useCallback, useMemo } from 'react';
+import { JSONTree, KeyPath } from 'react-json-tree';
+import { Copy, Ellipsis, Pin, PinOff } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import type { MenuProps } from 'antd';
+// TODO: Replace antd Dropdown with @signozhq/ui component when moving to design library
+import { Dropdown } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { darkTheme, lightTheme, themeExtension } from './constants';
+import usePinnedFields from './hooks/usePinnedFields';
+import useSearchFilter, { filterTree } from './hooks/useSearchFilter';
+import {
+	copyToClipboard,
+	keyPathToDisplayString,
+	keyPathToForward,
+	serializeKeyPath,
+} from './utils';
+
+import './PrettyView.styles.scss';
+
+export interface FieldContext {
+	fieldKey: string;
+	fieldKeyPath: (string | number)[];
+	fieldValue: unknown;
+	isNested: boolean;
+}
+
+export interface PrettyViewAction {
+	key: string;
+	label: React.ReactNode;
+	icon?: React.ReactNode;
+	onClick: (context: FieldContext) => void;
+}
+
+export interface PrettyViewProps {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	data: Record<string, any>;
+	actions?: PrettyViewAction[];
+	searchable?: boolean;
+	showPinned?: boolean;
+	drawerKey?: string;
+}
+
+function PrettyView({
+	data,
+	actions,
+	searchable = true,
+	showPinned = false,
+	drawerKey = 'default',
+}: PrettyViewProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	const { searchQuery, setSearchQuery, filteredData } = useSearchFilter(data);
+	const {
+		isPinned,
+		togglePin,
+		pinnedEntries,
+		pinnedData,
+		displayKeyToForwardPath,
+	} = usePinnedFields(data, drawerKey);
+
+	const filteredPinnedData = useMemo(() => {
+		const trimmed = searchQuery.trim();
+		if (!trimmed) {
+			return pinnedData;
+		}
+		return filterTree(pinnedData, trimmed) || {};
+	}, [pinnedData, searchQuery]);
+
+	const theme = useMemo(
+		() => ({
+			extend: isDarkMode ? darkTheme : lightTheme,
+			...themeExtension,
+		}),
+		[isDarkMode],
+	);
+
+	const shouldExpandNodeInitially = useCallback(
+		(
+			_keyPath: readonly (string | number)[],
+			_data: unknown,
+			level: number,
+		): boolean => level < 5,
+		[],
+	);
+
+	const buildMenuItems = useCallback(
+		(context: FieldContext): MenuProps['items'] => {
+			// todo: drive dropdown through config.
+			const copyItem = {
+				key: 'copy',
+				label: 'Copy',
+				icon: <Copy size={12} />,
+				onClick: (): void => {
+					copyToClipboard(context.fieldValue);
+				},
+			};
+
+			const items: NonNullable<MenuProps['items']> = [copyItem];
+
+			// Pin action only for leaf nodes
+			if (!context.isNested) {
+				// Resolve the correct forward path — pinned tree uses display keys
+				// which don't match the original serialized path
+				const resolvedPath =
+					displayKeyToForwardPath[context.fieldKey] || context.fieldKeyPath;
+				const serialized = serializeKeyPath(resolvedPath);
+				const pinned = isPinned(serialized);
+
+				items.push({
+					key: 'pin',
+					label: pinned ? 'Unpin field' : 'Pin field',
+					icon: pinned ? <PinOff size={12} /> : <Pin size={12} />,
+					onClick: (): void => {
+						togglePin(resolvedPath);
+					},
+				});
+			}
+
+			if (actions && actions.length > 0) {
+				//todo: why this divider?
+				items.push({ type: 'divider' as const, key: 'divider' });
+				actions.forEach((action) => {
+					items.push({
+						key: action.key,
+						label: action.label,
+						icon: action.icon,
+						onClick: (): void => {
+							action.onClick(context);
+						},
+					});
+				});
+			}
+
+			return items;
+		},
+		[actions, isPinned, togglePin, displayKeyToForwardPath],
+	);
+
+	const renderWithActions = useCallback(
+		({
+			content,
+			fieldKey,
+			fieldKeyPath,
+			value,
+			isNested,
+		}: {
+			content: React.ReactNode;
+			fieldKey: string;
+			fieldKeyPath: (string | number)[];
+			value: unknown;
+			isNested: boolean;
+		}): React.ReactNode => {
+			const context: FieldContext = {
+				fieldKey,
+				fieldKeyPath,
+				fieldValue: value,
+				isNested,
+			};
+			const menuItems = buildMenuItems(context);
+			return (
+				<span className="pretty-view__value-row">
+					<span>{content}</span>
+					<Dropdown
+						menu={{
+							items: menuItems,
+							onClick: (e): void => {
+								e.domEvent.stopPropagation();
+							},
+						}}
+						trigger={['click']}
+						placement="bottomLeft"
+						getPopupContainer={(trigger): HTMLElement =>
+							trigger.parentElement || document.body
+						}
+					>
+						<span
+							className="pretty-view__actions"
+							onClick={(e): void => e.stopPropagation()}
+							role="button"
+							tabIndex={0}
+						>
+							<Ellipsis size={12} />
+						</span>
+					</Dropdown>
+				</span>
+			);
+		},
+		[buildMenuItems],
+	);
+
+	const getItemString = useCallback(
+		(
+			_nodeType: string,
+			nodeData: unknown,
+			itemType: React.ReactNode,
+			itemString: string,
+			keyPath: KeyPath,
+		): // eslint-disable-next-line max-params
+		React.ReactNode => {
+			const forwardPath = keyPathToForward(keyPath);
+			return renderWithActions({
+				content: (
+					<>
+						{itemType} {itemString}
+					</>
+				),
+				fieldKey: keyPathToDisplayString(keyPath),
+				fieldKeyPath: forwardPath,
+				value: nodeData,
+				isNested: true,
+			});
+		},
+		[renderWithActions],
+	);
+
+	const valueRenderer = useCallback(
+		(
+			valueAsString: unknown,
+			value: unknown,
+			...keyPath: KeyPath
+		): React.ReactNode => {
+			const forwardPath = keyPathToForward(keyPath);
+			return renderWithActions({
+				content: String(valueAsString),
+				fieldKey: keyPathToDisplayString(keyPath),
+				fieldKeyPath: forwardPath,
+				value,
+				isNested: typeof value === 'object' && value !== null,
+			});
+		},
+		[renderWithActions],
+	);
+
+	const pinnedLabelRenderer = useCallback(
+		(keyPath: KeyPath): React.ReactNode => {
+			const displayKey = String(keyPath[0]);
+			const entry = pinnedEntries.find((e) => e.displayKey === displayKey);
+			return (
+				<span className="pretty-view__pinned-label">
+					<Pin
+						size={12}
+						className="pretty-view__pinned-icon"
+						onClick={(): void => {
+							if (entry) {
+								togglePin(entry.forwardPath);
+							}
+						}}
+					/>
+					<span>{displayKey}</span>
+				</span>
+			);
+		},
+		[togglePin, pinnedEntries],
+	);
+
+	return (
+		<div className="pretty-view">
+			{searchable && (
+				<Input
+					className="pretty-view__search-input"
+					type="text"
+					placeholder="Search for a field..."
+					value={searchQuery}
+					onChange={(e): void => setSearchQuery(e.target.value)}
+				/>
+			)}
+
+			{showPinned && Object.keys(filteredPinnedData).length > 0 && (
+				<div className="pretty-view__pinned">
+					<div className="pretty-view__pinned-header">PINNED ITEMS</div>
+					<JSONTree
+						key={`pinned-${searchQuery}`}
+						data={filteredPinnedData}
+						theme={theme}
+						invertTheme={false}
+						hideRoot
+						shouldExpandNodeInitially={shouldExpandNodeInitially}
+						valueRenderer={valueRenderer}
+						getItemString={getItemString}
+						labelRenderer={pinnedLabelRenderer}
+					/>
+				</div>
+			)}
+
+			<JSONTree
+				key={searchQuery}
+				data={filteredData}
+				theme={theme}
+				invertTheme={false}
+				hideRoot
+				shouldExpandNodeInitially={shouldExpandNodeInitially}
+				valueRenderer={valueRenderer}
+				getItemString={getItemString}
+			/>
+		</div>
+	);
+}
+
+export default PrettyView;

frontend/src/periscope/components/PrettyView/constants.ts

@@ -0,0 +1,62 @@
+// Dark theme — SigNoz design palette
+export const darkTheme = {
+	scheme: 'signoz-dark',
+	author: 'signoz',
+	base00: 'transparent',
+	base01: '#161922',
+	base02: '#1d212d',
+	base03: '#62687C',
+	base04: '#ADB4C2',
+	base05: '#ADB4C2',
+	base06: '#ADB4C2',
+	base07: '#ADB4C2',
+	base08: '#EA6D71',
+	base09: '#7CEDBD',
+	base0A: '#7CEDBD',
+	base0B: '#ADB4C2',
+	base0C: '#23C4F8',
+	base0D: '#95ACFB',
+	base0E: '#95ACFB',
+	base0F: '#AD7F58',
+};
+
+// Light theme
+export const lightTheme = {
+	scheme: 'signoz-light',
+	author: 'signoz',
+	base00: 'transparent',
+	base01: '#F9F9FB',
+	base02: '#EFF0F3',
+	base03: '#80828D',
+	base04: '#62636C',
+	base05: '#62636C',
+	base06: '#62636C',
+	base07: '#1E1F24',
+	base08: '#E5484D',
+	base09: '#168757',
+	base0A: '#168757',
+	base0B: '#62636C',
+	base0C: '#157594',
+	base0D: '#2F48A0',
+	base0E: '#2F48A0',
+	base0F: '#684C35',
+};
+
+export const themeExtension = {
+	value: ({
+		style,
+	}: {
+		style: Record<string, unknown>;
+	}): { style: Record<string, unknown>; className: string } => ({
+		style: { ...style },
+		className: 'pretty-view__row',
+	}),
+	nestedNode: ({
+		style,
+	}: {
+		style: Record<string, unknown>;
+	}): { style: Record<string, unknown>; className: string } => ({
+		style: { ...style },
+		className: 'pretty-view__nested-row',
+	}),
+};

frontend/src/periscope/components/PrettyView/hooks/usePinnedFields.ts

@@ -0,0 +1,127 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import {
+	deserializeKeyPath,
+	keyPathToDisplayString,
+	resolveValueByKeys,
+	serializeKeyPath,
+} from '../utils';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyRecord = Record<string, any>;
+
+const STORAGE_PREFIX = 'pinnedFields';
+
+function loadFromStorage(storageKey: string): string[] {
+	try {
+		const stored = localStorage.getItem(storageKey);
+		return stored ? JSON.parse(stored) : [];
+	} catch {
+		return [];
+	}
+}
+
+function saveToStorage(storageKey: string, keys: string[]): void {
+	localStorage.setItem(storageKey, JSON.stringify(keys));
+}
+
+export interface PinnedEntry {
+	serializedKey: string;
+	displayKey: string;
+	forwardPath: (string | number)[];
+	value: unknown;
+}
+
+export interface UsePinnedFieldsReturn {
+	isPinned: (serializedKey: string) => boolean;
+	togglePin: (forwardPath: (string | number)[]) => void;
+	pinnedEntries: PinnedEntry[];
+	pinnedData: AnyRecord;
+	displayKeyToForwardPath: Record<string, (string | number)[]>;
+}
+
+function usePinnedFields(
+	data: AnyRecord,
+	drawerKey: string,
+): UsePinnedFieldsReturn {
+	const storageKey = `${STORAGE_PREFIX}:${drawerKey}`;
+
+	// Stored as serialized keyPath arrays (JSON strings)
+	const [pinnedSerializedKeys, setPinnedSerializedKeys] = useState<Set<string>>(
+		() => new Set(loadFromStorage(storageKey)),
+	);
+
+	const togglePin = useCallback(
+		(forwardPath: (string | number)[]): void => {
+			const serialized = serializeKeyPath(forwardPath);
+			setPinnedSerializedKeys((prev) => {
+				const next = new Set(prev);
+				if (next.has(serialized)) {
+					next.delete(serialized);
+				} else {
+					next.add(serialized);
+				}
+				saveToStorage(storageKey, Array.from(next));
+				return next;
+			});
+		},
+		[storageKey],
+	);
+
+	const isPinned = useCallback(
+		(serializedKey: string): boolean => pinnedSerializedKeys.has(serializedKey),
+		[pinnedSerializedKeys],
+	);
+
+	const pinnedEntries = useMemo(
+		(): PinnedEntry[] =>
+			Array.from(pinnedSerializedKeys)
+				.map((serializedKey) => {
+					const forwardPath = deserializeKeyPath(serializedKey);
+					if (!forwardPath) {
+						return null;
+					}
+					return {
+						serializedKey,
+						displayKey: keyPathToDisplayString(
+							[...forwardPath].reverse() as readonly (string | number)[],
+						),
+						forwardPath,
+						value: resolveValueByKeys(data, forwardPath),
+					};
+				})
+				.filter(
+					(entry): entry is PinnedEntry =>
+						entry !== null && entry.value !== undefined,
+				),
+		[pinnedSerializedKeys, data],
+	);
+
+	// Flat object for the pinned JSONTree — use display key as the object key
+	const pinnedData = useMemo(
+		() =>
+			Object.fromEntries(
+				pinnedEntries.map((entry) => [entry.displayKey, entry.value]),
+			),
+		[pinnedEntries],
+	);
+
+	// Map from display key to original forward path — for unpin from pinned tree
+	const displayKeyToForwardPath = useMemo(
+		(): Record<string, (string | number)[]> =>
+			Object.fromEntries(
+				pinnedEntries.map((entry) => [entry.displayKey, entry.forwardPath]),
+			),
+		[pinnedEntries],
+	);
+
+	return {
+		isPinned,
+		togglePin,
+		pinnedEntries,
+		pinnedData,
+		displayKeyToForwardPath,
+	};
+}
+
+export default usePinnedFields;

frontend/src/periscope/components/PrettyView/hooks/useSearchFilter.ts

@@ -0,0 +1,82 @@
+import { useMemo, useState } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyRecord = Record<string, any>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyValue = any;
+
+function isLeaf(value: unknown): boolean {
+	return value === null || value === undefined || typeof value !== 'object';
+}
+
+function matchesQuery(text: string, lowerQuery: string): boolean {
+	return text.toLowerCase().includes(lowerQuery);
+}
+
+// Filter a single value (leaf, array, or object) against the query.
+// Returns the filtered value or null if no match.
+function filterValue(value: AnyValue, query: string): AnyValue | null {
+	if (isLeaf(value)) {
+		return matchesQuery(String(value), query.toLowerCase()) ? value : null;
+	}
+
+	if (Array.isArray(value)) {
+		return filterArray(value, query);
+	}
+
+	return filterTree(value, query);
+}
+
+// Recursively filter an array, keeping only elements that match
+function filterArray(arr: AnyValue[], query: string): AnyValue[] | null {
+	const results = arr
+		.map((item) => filterValue(item, query))
+		.filter((item) => item !== null);
+
+	return results.length > 0 ? results : null;
+}
+
+// Recursively filter the data tree, keeping only branches with matching keys or values
+export function filterTree(obj: AnyRecord, query: string): AnyRecord | null {
+	const result: AnyRecord = {};
+	const lowerQuery = query.toLowerCase();
+	let hasMatch = false;
+
+	for (const [key, value] of Object.entries(obj)) {
+		if (matchesQuery(key, lowerQuery)) {
+			result[key] = value;
+			hasMatch = true;
+			continue;
+		}
+
+		const filtered = filterValue(value, query);
+		if (filtered !== null) {
+			result[key] = filtered;
+			hasMatch = true;
+		}
+	}
+
+	return hasMatch ? result : null;
+}
+
+interface UseSearchFilterReturn {
+	searchQuery: string;
+	setSearchQuery: (query: string) => void;
+	filteredData: AnyRecord;
+}
+
+function useSearchFilter(data: AnyRecord): UseSearchFilterReturn {
+	const [searchQuery, setSearchQuery] = useState('');
+
+	const filteredData = useMemo(() => {
+		const trimmed = searchQuery.trim();
+		if (!trimmed) {
+			return data;
+		}
+		return filterTree(data, trimmed) || {};
+	}, [data, searchQuery]);
+
+	return { searchQuery, setSearchQuery, filteredData };
+}
+
+export default useSearchFilter;

frontend/src/periscope/components/PrettyView/index.ts

@@ -0,0 +1,2 @@
+export type { PrettyViewProps } from './PrettyView';
+export { default as PrettyView } from './PrettyView';

frontend/src/periscope/components/PrettyView/utils.ts

@@ -0,0 +1,58 @@
+import { toast } from '@signozhq/sonner';
+
+export function copyToClipboard(value: unknown): void {
+	const text =
+		typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value);
+	// eslint-disable-next-line no-restricted-properties
+	navigator.clipboard.writeText(text);
+	toast.success('Copied to clipboard', {
+		richColors: true,
+		position: 'top-right',
+	});
+}
+
+// Resolve a value from a nested object using an array of keys (not dot-notation)
+// e.g. resolveValueByKeys({ tagMap: { 'cloud.account.id': 'x' } }, ['tagMap', 'cloud.account.id']) → 'x'
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function resolveValueByKeys(
+	data: Record<string, any>,
+	keys: (string | number)[],
+): unknown {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	return keys.reduce((obj: any, key) => obj?.[key], data);
+}
+
+// Convert react-json-tree's reversed keyPath to forward order
+// e.g. ['cloud.account.id', 'tagMap'] → ['tagMap', 'cloud.account.id']
+export function keyPathToForward(
+	keyPath: readonly (string | number)[],
+): (string | number)[] {
+	return [...keyPath].reverse();
+}
+
+// Display-friendly string for a keyPath
+// e.g. ['tagMap', 'cloud.account.id'] → 'tagMap.cloud.account.id'
+export function keyPathToDisplayString(
+	keyPath: readonly (string | number)[],
+): string {
+	return [...keyPath].reverse().join('.');
+}
+
+// Serialize keyPath for storage/comparison (JSON stringified array)
+export function serializeKeyPath(keyPath: (string | number)[]): string {
+	return JSON.stringify(keyPath);
+}
+
+export function deserializeKeyPath(
+	serialized: string,
+): (string | number)[] | null {
+	try {
+		const parsed = JSON.parse(serialized);
+		if (Array.isArray(parsed)) {
+			return parsed;
+		}
+		return null;
+	} catch {
+		return null;
+	}
+}

frontend/src/periscope/components/ResizableBox/ResizableBox.styles.scss

@@ -0,0 +1,42 @@
+.resizable-box {
+	position: relative;
+	overflow: hidden;
+
+	&--disabled {
+		flex: 1;
+		min-height: 0;
+	}
+
+	&__content {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	&__handle {
+		position: absolute;
+		z-index: 10;
+		background: var(--l2-border);
+
+		&:hover,
+		&:active {
+			background: var(--primary);
+		}
+
+		&--vertical {
+			bottom: 0;
+			left: 0;
+			right: 0;
+			height: 4px;
+			cursor: row-resize;
+		}
+
+		&--horizontal {
+			right: 0;
+			top: 0;
+			bottom: 0;
+			width: 4px;
+			cursor: col-resize;
+		}
+	}
+}

frontend/src/periscope/components/ResizableBox/ResizableBox.tsx

@@ -0,0 +1,88 @@
+import { useCallback, useRef, useState } from 'react';
+
+import './ResizableBox.styles.scss';
+
+export interface ResizableBoxProps {
+	children: React.ReactNode;
+	direction?: 'vertical' | 'horizontal';
+	defaultHeight?: number;
+	minHeight?: number;
+	maxHeight?: number;
+	defaultWidth?: number;
+	minWidth?: number;
+	maxWidth?: number;
+	onResize?: (size: number) => void;
+	disabled?: boolean;
+	className?: string;
+}
+
+function ResizableBox({
+	children,
+	direction = 'vertical',
+	defaultHeight = 200,
+	minHeight = 50,
+	maxHeight = Infinity,
+	defaultWidth = 200,
+	minWidth = 50,
+	maxWidth = Infinity,
+	onResize,
+	disabled = false,
+	className,
+}: ResizableBoxProps): JSX.Element {
+	const isHorizontal = direction === 'horizontal';
+	const [size, setSize] = useState(isHorizontal ? defaultWidth : defaultHeight);
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	const handleMouseDown = useCallback(
+		(e: React.MouseEvent): void => {
+			e.preventDefault();
+			const startPos = isHorizontal ? e.clientX : e.clientY;
+			const startSize = size;
+			const min = isHorizontal ? minWidth : minHeight;
+			const max = isHorizontal ? maxWidth : maxHeight;
+
+			const onMouseMove = (moveEvent: MouseEvent): void => {
+				const currentPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
+				const delta = currentPos - startPos;
+				const newSize = Math.min(max, Math.max(min, startSize + delta));
+				setSize(newSize);
+				onResize?.(newSize);
+			};
+
+			const onMouseUp = (): void => {
+				document.removeEventListener('mousemove', onMouseMove);
+				document.removeEventListener('mouseup', onMouseUp);
+				document.body.style.cursor = '';
+				document.body.style.userSelect = '';
+			};
+
+			document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+			document.body.style.userSelect = 'none';
+			document.addEventListener('mousemove', onMouseMove);
+			document.addEventListener('mouseup', onMouseUp);
+		},
+		[size, isHorizontal, minWidth, maxWidth, minHeight, maxHeight, onResize],
+	);
+
+	const containerStyle = disabled
+		? undefined
+		: isHorizontal
+		? { width: size }
+		: { height: size };
+	const handleClass = `resizable-box__handle resizable-box__handle--${direction}`;
+
+	return (
+		<div
+			ref={containerRef}
+			className={`resizable-box ${disabled ? 'resizable-box--disabled' : ''} ${
+				className || ''
+			}`}
+			style={containerStyle}
+		>
+			<div className="resizable-box__content">{children}</div>
+			{!disabled && <div className={handleClass} onMouseDown={handleMouseDown} />}
+		</div>
+	);
+}
+
+export default ResizableBox;

frontend/src/periscope/components/ResizableBox/index.ts

@@ -0,0 +1,2 @@
+export type { ResizableBoxProps } from './ResizableBox';
+export { default as ResizableBox } from './ResizableBox';

frontend/src/types/api/trace/getTraceFlamegraph.ts

@@ -4,8 +4,7 @@ export interface TraceDetailFlamegraphURLProps {
 
 export interface GetTraceFlamegraphPayloadProps {
 	traceId: string;
-	selectedSpanId?: string;
-	limit?: number;
+	selectedSpanId: string;
 }
 
 export interface Event {

frontend/yarn.lock

@@ -6538,6 +6538,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.0.tgz#d774355e41f372d5350a4d0714abb48194a489c3"
   integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
 
+"@types/lodash@^4.17.0", "@types/lodash@^4.17.15":
+  version "4.17.24"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.24.tgz#4ae334fc62c0e915ca8ed8e35dcc6d4eeb29215f"
+  integrity sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==
+
 "@types/mdast@^3.0.0":
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.12.tgz#beeb511b977c875a5b0cc92eab6fcac2f0895514"
@@ -8952,7 +8957,7 @@ color-string@^1.9.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^4.2.1:
+color@^4.2.1, color@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/color/-/color-4.2.3.tgz"
   integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
@@ -9384,6 +9389,11 @@ csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+csstype@^3.1.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
+  integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
+
 "d3-array@1 - 3", "d3-array@2 - 3", "d3-array@2.10.0 - 3":
   version "3.2.3"
   resolved "https://registry.npmjs.org/d3-array/-/d3-array-3.2.3.tgz"
@@ -16819,6 +16829,11 @@ rc-virtual-list@^3.11.1, rc-virtual-list@^3.5.1, rc-virtual-list@^3.5.2:
     rc-resize-observer "^1.0.0"
     rc-util "^5.36.0"
 
+re-resizable@^6.11.2:
+  version "6.11.2"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.11.2.tgz#2e8f7119ca3881d5b5aea0ffa014a80e5c1252b3"
+  integrity sha512-2xI2P3OHs5qw7K0Ud1aLILK6MQxW50TcO+DetD9eIV58j84TqYeHoZcL9H4GXFXXIh7afhH8mv5iUCXII7OW7A==
+
 react-addons-update@15.6.3:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/react-addons-update/-/react-addons-update-15.6.3.tgz#c449c309154024d04087b206d0400e020547b313"
@@ -16826,6 +16841,16 @@ react-addons-update@15.6.3:
   dependencies:
     object-assign "^4.1.0"
 
+react-base16-styling@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.10.0.tgz#5d5f019bd4dc5870c3e92fd9d5410533a0bbb0c6"
+  integrity sha512-H1k2eFB6M45OaiRru3PBXkuCcn2qNmx+gzLb4a9IPMR7tMH8oBRXU5jGbPDYG1Hz+82d88ED0vjR8BmqU3pQdg==
+  dependencies:
+    "@types/lodash" "^4.17.0"
+    color "^4.2.3"
+    csstype "^3.1.3"
+    lodash-es "^4.17.21"
+
 react-beautiful-dnd@13.1.1:
   version "13.1.1"
   resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
@@ -16890,6 +16915,14 @@ react-draggable@^4.0.0, react-draggable@^4.0.3:
     clsx "^1.1.1"
     prop-types "^15.8.1"
 
+react-draggable@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.5.0.tgz#0b274ccb6965fcf97ed38fcf7e3cc223bc48cdf5"
+  integrity sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==
+  dependencies:
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+
 react-error-boundary@4.0.11:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.11.tgz#36bf44de7746714725a814630282fee83a7c9a1c"
@@ -16980,6 +17013,14 @@ react-is@^18.3.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-json-tree@0.20.0:
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.20.0.tgz#1e7fd26f093bd49d733f80dd9b6d40142e09f7c9"
+  integrity sha512-h+f9fUNAxzBx1rbrgUF7+zSWKGHDtt2VPYLErIuB0JyKGnWgFMM21ksqQyb3EXwXNnoMW2rdE5kuAaubgGOx2Q==
+  dependencies:
+    "@types/lodash" "^4.17.15"
+    react-base16-styling "^0.10.0"
+
 react-kapsule@^2.5:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/react-kapsule/-/react-kapsule-2.5.7.tgz#dcd957ae8e897ff48055fc8ff48ed04ebe3c5bd2"
@@ -17099,6 +17140,15 @@ react-resizable@^3.0.4:
     prop-types "15.x"
     react-draggable "^4.0.3"
 
+react-rnd@10.5.3:
+  version "10.5.3"
+  resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.5.3.tgz#f8c484034276a561e8aa2fbf6a94580596621013"
+  integrity sha512-s/sIT3pGZnQ+57egijkTp9mizjIWrJz68Pq6yd+F/wniFY3IriML18dUXnQe/HP9uMiJ+9MAp44hljG99fZu6Q==
+  dependencies:
+    re-resizable "^6.11.2"
+    react-draggable "^4.5.0"
+    tslib "2.6.2"
+
 react-router-dom-v5-compat@6.27.0:
   version "6.27.0"
   resolved "https://registry.yarnpkg.com/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.27.0.tgz#19429aefa130ee151e6f4487d073d919ec22d458"
@@ -19184,6 +19234,11 @@ tsconfig-paths@^4.2.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.6.2, tslib@^2.0.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tslib@2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
@@ -19194,11 +19249,6 @@ tslib@^1.14.1, tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
-  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
-
 tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz"