diff --git a/products/tracing/frontend/TracingScene.tsx b/products/tracing/frontend/TracingScene.tsx index ac52ff099342..05e0e56af931 100644 --- a/products/tracing/frontend/TracingScene.tsx +++ b/products/tracing/frontend/TracingScene.tsx @@ -76,7 +76,6 @@ function TracingSceneContents(): JSX.Element { durationHistogramLoading, visibleRowDurationRange, isDurationMode, - expandedSpanIds, activeTracingTab, } = useValues(tracingSceneLogic()) const { featureFlags } = useValues(featureFlagLogic) @@ -91,7 +90,6 @@ function TracingSceneContents(): JSX.Element { fetchNextPage, loadMoreTraceSpans, setVisibleRowRange, - toggleExpandSpan, setSort, setActiveTracingTab, } = useActions(tracingSceneLogic()) @@ -221,8 +219,6 @@ function TracingSceneContents(): JSX.Element { hasMoreToLoad={hasMoreToLoad} onLoadMore={fetchNextPage} onVisibleRowRangeChange={setVisibleRowRange} - expandedSpanIds={expandedSpanIds} - onToggleExpand={toggleExpandSpan} orderBy={filters.orderBy} orderDirection={filters.orderDirection} onSort={(column) => diff --git a/products/tracing/frontend/components/VirtualizedSpanList/ExpandedSpanContent.tsx b/products/tracing/frontend/components/VirtualizedSpanList/ExpandedSpanContent.tsx index 06626be93449..57fe6bc97a16 100644 --- a/products/tracing/frontend/components/VirtualizedSpanList/ExpandedSpanContent.tsx +++ b/products/tracing/frontend/components/VirtualizedSpanList/ExpandedSpanContent.tsx @@ -7,8 +7,7 @@ export interface ExpandedSpanContentProps { span: Span /** * Render the "Span details" KVP table alongside the attributes. The drawer's summary header - * already surfaces these facts, so it passes false; the span-list expand-row (no header) keeps - * the default. @default true + * already surfaces these facts, so it passes false. @default true */ showDetails?: boolean } diff --git a/products/tracing/frontend/components/VirtualizedSpanList/VirtualizedSpanList.tsx b/products/tracing/frontend/components/VirtualizedSpanList/VirtualizedSpanList.tsx index bc480029359b..57a82a934137 100644 --- a/products/tracing/frontend/components/VirtualizedSpanList/VirtualizedSpanList.tsx +++ b/products/tracing/frontend/components/VirtualizedSpanList/VirtualizedSpanList.tsx @@ -1,8 +1,7 @@ -import { CSSProperties, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react' -import { List, useDynamicRowHeight, useListRef } from 'react-window' +import { CSSProperties, ReactNode, useCallback, useMemo, useRef } from 'react' +import { List, useListRef } from 'react-window' -import { IconChevronRight } from '@posthog/icons' -import { LemonButton, LemonTag } from '@posthog/lemon-ui' +import { LemonTag } from '@posthog/lemon-ui' import { AutoSizer } from 'lib/components/AutoSizer' import { SizeProps } from 'lib/components/AutoSizer/AutoSizer' @@ -13,7 +12,6 @@ import { formatDuration } from '../../TraceWaterfallView' import type { TracingOrderBy, TracingOrderDirection } from '../../tracingFiltersLogic' import { SPAN_KIND_LABELS, STATUS_CODE_LABELS } from '../../types' import type { Span } from '../../types' -import { ExpandedSpanContent } from './ExpandedSpanContent' import { SpanRowActions } from './SpanRowActions' const ROW_HEIGHT = 36 @@ -23,7 +21,6 @@ const LOAD_MORE_THRESHOLD = 10 // Fixed column widths (px). The name column flexes to fill the remaining space. const COL_WIDTH = { - expand: 32, timestamp: 190, service: 150, kind: 90, @@ -54,8 +51,6 @@ interface VirtualizedSpanListProps extends SortProps { loading: boolean onRowClick: (span: Span) => void onVisibleRowRangeChange: (startIndex: number, stopIndex: number) => void - expandedSpanIds: Record - onToggleExpand: (uuid: string) => void hasMoreToLoad?: boolean onLoadMore?: () => void emptyState?: ReactNode @@ -64,9 +59,6 @@ interface VirtualizedSpanListProps extends SortProps { interface SpanRowProps { dataSource: Span[] onRowClick: (span: Span) => void - expandedSpanIds: Record - onToggleExpand: (uuid: string) => void - dynamicRowHeight: ReturnType } function Cell({ width, children }: { width?: number; children: React.ReactNode }): JSX.Element { @@ -114,7 +106,6 @@ function SpanRowHeader({ orderBy, orderDirection, onSort }: SortProps): JSX.Elem // eslint-disable-next-line react/forbid-dom-props style={{ height: HEADER_HEIGHT }} > - void - onClick: () => void -}): JSX.Element { +function SpanRow({ span, onClick }: { span: Span; onClick: () => void }): JSX.Element { const status = STATUS_CODE_LABELS[span.status_code] ?? { label: String(span.status_code), type: 'default' as const } return ( @@ -169,17 +150,6 @@ function SpanRow({ role="button" tabIndex={0} > - - } - tooltip={isExpanded ? 'Collapse' : 'Expand'} - onClick={(e) => { - e.stopPropagation() - onToggleExpand() - }} - /> - {new Date(span.timestamp).toLocaleString()} @@ -215,35 +185,17 @@ function SpanListRow({ style, dataSource, onRowClick, - expandedSpanIds, - onToggleExpand, - dynamicRowHeight, }: { ariaAttributes: { 'aria-posinset': number; 'aria-setsize': number; role: 'listitem' } index: number style: CSSProperties } & SpanRowProps): JSX.Element { - const rowRef = useRef(null) const span = dataSource[index] - const isExpanded = !!expandedSpanIds[span.uuid] - - // Report the rendered height back to react-window so expanded rows grow the list. - useEffect(() => { - if (rowRef.current) { - return dynamicRowHeight.observeRowElements([rowRef.current]) - } - }, [dynamicRowHeight]) return ( // eslint-disable-next-line react/forbid-dom-props -
- onToggleExpand(span.uuid)} - onClick={() => onRowClick(span)} - /> - {isExpanded && } +
+ onRowClick(span)} />
) } @@ -253,8 +205,6 @@ export function VirtualizedSpanList({ loading, onRowClick, onVisibleRowRangeChange, - expandedSpanIds, - onToggleExpand, hasMoreToLoad = false, onLoadMore, emptyState = 'No spans found', @@ -266,7 +216,6 @@ export function VirtualizedSpanList({ const lastVisibleRangeRef = useRef<{ startIndex: number; stopIndex: number } | null>(null) const listRef = useListRef(null) - const dynamicRowHeight = useDynamicRowHeight({ defaultRowHeight: ROW_HEIGHT }) const handleRowsRendered = useCallback( ( @@ -291,10 +240,7 @@ export function VirtualizedSpanList({ [dataSource.length, hasMoreToLoad, loading, onLoadMore, onVisibleRowRangeChange] ) - const rowProps = useMemo( - (): SpanRowProps => ({ dataSource, onRowClick, expandedSpanIds, onToggleExpand, dynamicRowHeight }), - [dataSource, onRowClick, expandedSpanIds, onToggleExpand, dynamicRowHeight] - ) + const rowProps = useMemo((): SpanRowProps => ({ dataSource, onRowClick }), [dataSource, onRowClick]) if (dataSource.length === 0 && !loading) { return ( @@ -327,7 +273,7 @@ export function VirtualizedSpanList({ style={{ height: height - HEADER_HEIGHT, width: rowWidth }} overscanCount={10} rowCount={dataSource.length} - rowHeight={dynamicRowHeight} + rowHeight={ROW_HEIGHT} rowComponent={SpanListRow} rowProps={rowProps} onRowsRendered={handleRowsRendered} diff --git a/products/tracing/frontend/tracingSceneLogic.ts b/products/tracing/frontend/tracingSceneLogic.ts index a34c710a5bcf..fe48efbac692 100644 --- a/products/tracing/frontend/tracingSceneLogic.ts +++ b/products/tracing/frontend/tracingSceneLogic.ts @@ -80,7 +80,6 @@ export const tracingSceneLogic = kea([ })), actions({ - toggleExpandSpan: (uuid: string) => ({ uuid }), openTrace: (traceId: string, options?: { spanId?: string | null; ts?: string | null }) => ({ traceId, spanId: options?.spanId ?? null, @@ -96,22 +95,6 @@ export const tracingSceneLogic = kea([ }), reducers({ - expandedSpanIds: [ - {} as Record, - { - toggleExpandSpan: (state, { uuid }) => { - const next = { ...state } - if (next[uuid]) { - delete next[uuid] - } else { - next[uuid] = true - } - return next - }, - // Drop stale expansion state whenever the span list is refetched. - runQuery: () => ({}), - }, - ], selectedTraceId: [ null as string | null, {