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]);