From 8c35934295f9161259d96c445bc2093f8ef692c7 Mon Sep 17 00:00:00 2001
From: smbera <smbera@163.com>
Date: Fri, 10 Jan 2025 01:30:33 +0530
Subject: [PATCH] fix: the unknown blank height in spanTree

---
 frontend/src/container/GantChart/index.tsx       | 1 -
 frontend/src/container/Timeline/index.tsx        | 1 -
 frontend/src/container/TraceDetail/index.tsx     | 6 +-----
 frontend/src/container/TraceFlameGraph/index.tsx | 4 +++-
 frontend/src/utils/getSpanTreeMetadata.ts        | 4 ----
 5 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/frontend/src/container/GantChart/index.tsx b/frontend/src/container/GantChart/index.tsx
index c5874fc4c0..4836187fdb 100644
--- a/frontend/src/container/GantChart/index.tsx
+++ b/frontend/src/container/GantChart/index.tsx
@@ -73,7 +73,6 @@ function GanttChart(props: GanttChartProps): JSX.Element {
 export interface ITraceMetaData {
 	globalEnd: number;
 	globalStart: number;
-	levels: number;
 	spread: number;
 	totalSpans: number;
 }
diff --git a/frontend/src/container/Timeline/index.tsx b/frontend/src/container/Timeline/index.tsx
index 058ca3e315..accd173e70 100644
--- a/frontend/src/container/Timeline/index.tsx
+++ b/frontend/src/container/Timeline/index.tsx
@@ -102,7 +102,6 @@ interface TimelineProps {
 		globalEnd: number;
 		spread: number;
 		totalSpans: number;
-		levels: number;
 	};
 	globalTraceMetadata: ITraceMetaData;
 	setIntervalUnit: Dispatch<SetStateAction<IIntervalUnit>>;
diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
index a44fd91791..2f621ff316 100644
--- a/frontend/src/container/TraceDetail/index.tsx
+++ b/frontend/src/container/TraceDetail/index.tsx
@@ -38,7 +38,6 @@ import SubTreeMessage from './SubTree';
 import {
 	formUrlParams,
 	getSortedData,
-	getTreeLevelsCount,
 	IIntervalUnit,
 	INTERVAL_UNITS,
 } from './utils';
@@ -179,10 +178,7 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 									<TraceFlameGraph
 										key={tree.id}
 										treeData={tree}
-										traceMetaData={{
-											...traceMetaData,
-											levels: getTreeLevelsCount(tree),
-										}}
+										traceMetaData={traceMetaData}
 										hoveredSpanId={activeHoverId}
 										selectedSpanId={activeSelectedId}
 										onSpanHover={setActiveHoverId}
diff --git a/frontend/src/container/TraceFlameGraph/index.tsx b/frontend/src/container/TraceFlameGraph/index.tsx
index 7e52031646..ea0a786b35 100644
--- a/frontend/src/container/TraceFlameGraph/index.tsx
+++ b/frontend/src/container/TraceFlameGraph/index.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import Color from 'color';
 import { ITraceMetaData } from 'container/GantChart';
+import { getTreeLevelsCount } from 'container/TraceDetail/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import {
 	Dispatch,
@@ -102,13 +103,14 @@ function TraceFlameGraph(props: {
 	missingSpanTree: boolean;
 }): JSX.Element {
 	const { treeData, traceMetaData, onSpanHover, missingSpanTree } = props;
+	const levels = useMemo(() => getTreeLevelsCount(treeData), [treeData]);
 
 	if (!treeData || treeData.id === 'empty' || !traceMetaData) {
 		return <div />;
 	}
 	const { onSpanSelect, hoveredSpanId, selectedSpanId } = props;
 
-	const { globalStart, spread, levels } = traceMetaData;
+	const { globalStart, spread } = traceMetaData;
 	function RenderSpanRecursive({
 		level = 0,
 		spanData,
diff --git a/frontend/src/utils/getSpanTreeMetadata.ts b/frontend/src/utils/getSpanTreeMetadata.ts
index 631d15d551..49fe8c0a13 100644
--- a/frontend/src/utils/getSpanTreeMetadata.ts
+++ b/frontend/src/utils/getSpanTreeMetadata.ts
@@ -12,14 +12,12 @@ export const getSpanTreeMetadata = (
 	let globalStart = Number.POSITIVE_INFINITY;
 	let globalEnd = Number.NEGATIVE_INFINITY;
 	let totalSpans = 0;
-	let levels = 1;
 
 	const traverse = (treeNode: ITraceTree, level = 0): void => {
 		if (!treeNode) {
 			return;
 		}
 		totalSpans += 1;
-		levels = Math.max(levels, level);
 		const { startTime, value } = treeNode;
 		if (startTime !== null && value !== null) {
 			const endTime = startTime + value / 1e6;
@@ -45,7 +43,6 @@ export const getSpanTreeMetadata = (
 		globalEnd,
 		spread: globalEnd - globalStart,
 		totalSpans,
-		levels,
 		treesData,
 	};
 };
@@ -55,6 +52,5 @@ interface GetSpanTreeMetaData {
 	globalEnd: number;
 	spread: number;
 	totalSpans: number;
-	levels: number;
 	treesData: ITraceForest;
 }