diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfall.tsx b/frontend/src/container/TraceWaterfall/TraceWaterfall.tsx
index 55950e554f..3f115801ce 100644
--- a/frontend/src/container/TraceWaterfall/TraceWaterfall.tsx
+++ b/frontend/src/container/TraceWaterfall/TraceWaterfall.tsx
@@ -15,7 +15,6 @@ import './TraceWaterfall.styles.scss';
export interface IInterestedSpan {
spanId: string;
isUncollapsed: boolean;
- shouldScrollToSpan?: boolean;
}
interface ITraceWaterfallProps {
@@ -110,7 +109,6 @@ function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
selectedSpan={selectedSpan}
setSelectedSpan={setSelectedSpan}
- isFetchingTraceData={isFetchingTraceData}
/>
);
default:
@@ -119,7 +117,6 @@ function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
}, [
errorFetchingTraceData,
interestedSpanId,
- isFetchingTraceData,
selectedSpan,
setInterestedSpanId,
setSelectedSpan,
diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
index 011de56976..701c5dc1a4 100644
--- a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
+++ b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
@@ -30,7 +30,6 @@ import {
ChevronDown,
ChevronRight,
Leaf,
- Loader2,
} from 'lucide-react';
import { useAppContext } from 'providers/App/App';
import { Span } from 'types/api/trace/getTraceV2';
@@ -44,20 +43,6 @@ import './Success.styles.scss';
const CONNECTOR_WIDTH = 28;
const VERTICAL_CONNECTOR_WIDTH = 1;
-// Component to render chevron icon with spinner
-function ChevronIcon({
- isFetching,
- isCollapsed,
-}: {
- isFetching: boolean;
- isCollapsed: boolean;
-}): JSX.Element {
- if (isFetching) {
- return ;
- }
- return isCollapsed ? : ;
-}
-
interface ITraceMetadata {
traceId: string;
startTime: number;
@@ -73,7 +58,6 @@ interface ISuccessProps {
setTraceFlamegraphStatsWidth: Dispatch>;
selectedSpan: Span | undefined;
setSelectedSpan: Dispatch>;
- isFetchingTraceData: boolean;
}
function SpanOverview({
@@ -86,8 +70,6 @@ function SpanOverview({
filteredSpanIds,
isFilterActive,
traceMetadata,
- isFetchingTraceData,
- interestedSpanId,
}: {
span: Span;
isSpanCollapsed: boolean;
@@ -98,8 +80,6 @@ function SpanOverview({
filteredSpanIds: string[];
isFilterActive: boolean;
traceMetadata: ITraceMetadata;
- isFetchingTraceData: boolean;
- interestedSpanId: IInterestedSpan;
}): JSX.Element {
const isRootSpan = span.level === 0;
const { hasEditPermission } = useAppContext();
@@ -165,12 +145,11 @@ function SpanOverview({
}}
className="collapse-uncollapse-button"
>
-
+ {isSpanCollapsed ? (
+
+ ) : (
+
+ )}
{span.subTreeNodeCount}
@@ -363,8 +342,6 @@ function getWaterfallColumns({
handleAddSpanToFunnel,
filteredSpanIds,
isFilterActive,
- isFetchingTraceData,
- interestedSpanId,
}: {
handleCollapseUncollapse: (id: string, collapse: boolean) => void;
uncollapsedNodes: string[];
@@ -374,10 +351,8 @@ function getWaterfallColumns({
handleAddSpanToFunnel: (span: Span) => void;
filteredSpanIds: string[];
isFilterActive: boolean;
- isFetchingTraceData: boolean;
- interestedSpanId: IInterestedSpan;
-}): ColumnDef[] {
- const waterfallColumns: ColumnDef[] = [
+}): ColumnDef[] {
+ const waterfallColumns: ColumnDef[] = [
columnDefHelper.display({
id: 'span-name',
header: '',
@@ -392,8 +367,6 @@ function getWaterfallColumns({
traceMetadata={traceMetadata}
filteredSpanIds={filteredSpanIds}
isFilterActive={isFilterActive}
- isFetchingTraceData={isFetchingTraceData}
- interestedSpanId={interestedSpanId}
/>
),
size: 450,
@@ -438,7 +411,6 @@ function Success(props: ISuccessProps): JSX.Element {
setTraceFlamegraphStatsWidth,
setSelectedSpan,
selectedSpan,
- isFetchingTraceData,
} = props;
const [filteredSpanIds, setFilteredSpanIds] = useState([]);
@@ -455,11 +427,7 @@ function Success(props: ISuccessProps): JSX.Element {
const handleCollapseUncollapse = useCallback(
(spanId: string, collapse: boolean) => {
- setInterestedSpanId({
- spanId,
- isUncollapsed: !collapse,
- shouldScrollToSpan: false,
- });
+ setInterestedSpanId({ spanId, isUncollapsed: !collapse });
},
[setInterestedSpanId],
);
@@ -477,11 +445,7 @@ function Success(props: ISuccessProps): JSX.Element {
if (range?.startIndex === 0 && instance.isScrolling) {
// do not trigger for trace root as nothing to fetch above
if (spans[0].level !== 0) {
- setInterestedSpanId({
- spanId: spans[0].spanId,
- isUncollapsed: false,
- shouldScrollToSpan: false,
- });
+ setInterestedSpanId({ spanId: spans[0].spanId, isUncollapsed: false });
}
return;
}
@@ -490,7 +454,6 @@ function Success(props: ISuccessProps): JSX.Element {
setInterestedSpanId({
spanId: spans[spans.length - 1].spanId,
isUncollapsed: false,
- shouldScrollToSpan: false,
});
}
};
@@ -532,8 +495,6 @@ function Success(props: ISuccessProps): JSX.Element {
handleAddSpanToFunnel,
filteredSpanIds,
isFilterActive,
- isFetchingTraceData,
- interestedSpanId,
}),
[
handleCollapseUncollapse,
@@ -544,8 +505,6 @@ function Success(props: ISuccessProps): JSX.Element {
handleAddSpanToFunnel,
filteredSpanIds,
isFilterActive,
- isFetchingTraceData,
- interestedSpanId,
],
);
@@ -555,16 +514,12 @@ function Success(props: ISuccessProps): JSX.Element {
(span) => span.spanId === interestedSpanId.spanId,
);
if (idx !== -1) {
- // Only scroll to center when navigating (URL/flamegraph), not on
- // expand/collapse or virtualizer boundary fetches.
- if (interestedSpanId.shouldScrollToSpan) {
- setTimeout(() => {
- virtualizerRef.current?.scrollToIndex(idx, {
- align: 'center',
- behavior: 'auto',
- });
- }, 400);
- }
+ setTimeout(() => {
+ virtualizerRef.current?.scrollToIndex(idx, {
+ align: 'center',
+ behavior: 'auto',
+ });
+ }, 400);
setSelectedSpan(spans[idx]);
}
diff --git a/frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx b/frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx
index 7bdc94a13c..b2c6031e5f 100644
--- a/frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx
+++ b/frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx
@@ -30,7 +30,6 @@ function TraceDetailsV2(): JSX.Element {
() => ({
spanId: urlQuery.get('spanId') || '',
isUncollapsed: urlQuery.get('spanId') !== '',
- shouldScrollToSpan: urlQuery.get('spanId') !== '',
}),
);
const [
@@ -44,7 +43,6 @@ function TraceDetailsV2(): JSX.Element {
setInterestedSpanId({
spanId: urlQuery.get('spanId') || '',
isUncollapsed: urlQuery.get('spanId') !== '',
- shouldScrollToSpan: true,
});
}, [urlQuery]);