fix: the unknown blank height in spanTree

SigNoz · Jan 10, 2025 · 8c35934 · 8c35934
1 parent c106f1c
commit 8c35934
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 }