Merge branch 'main' into fix/waterfall_tests

* fix(querier): return proper HTTP status for PromQL timeout errors

PromQL queries hitting the context deadline were incorrectly returning
400 Bad Request with "invalid_input" because enhancePromQLError
unconditionally wrapped all errors as TypeInvalidInput. Extract
tryEnhancePromQLExecError to properly classify timeout, cancellation,
and storage errors before falling through to parse error handling.

Also make the PromQL engine timeout configurable via prometheus.timeout
config (default 2m) instead of hardcoding it.

* chore: refactor files

* fix(prometheus): validate timeout config and fix test setups

Add validation in prometheus.Config to reject zero timeout. Update all
test files to explicitly set Timeout: 2 * time.Minute in prometheus.Config
literals to avoid immediate query timeouts.

conf/example.yaml

@@ -144,6 +144,8 @@ telemetrystore:
 
 ##################### Prometheus #####################
 prometheus:
+  # The maximum time a PromQL query is allowed to run before being aborted.
+  timeout: 2m
   active_query_tracker:
     # Whether to enable the active query tracker.
     enabled: true

ee/query-service/rules/manager_test.go

@@ -257,7 +257,7 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 						WillReturnRows(samplesRows)
 
 					// Create Prometheus provider for this test
-					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, store)
+					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, store)
 				},
 				ManagerOptionsHook: func(opts *rules.ManagerOptions) {
 					// Set Prometheus provider for PromQL queries

frontend/package.json

@@ -68,8 +68,8 @@
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
     "@signozhq/ui": "0.0.5",
-    "@tanstack/react-table": "8.21.3",
-    "@tanstack/react-virtual": "3.13.22",
+    "@tanstack/react-table": "8.20.6",
+    "@tanstack/react-virtual": "3.11.2",
     "@uiw/codemirror-theme-copilot": "4.23.11",
     "@uiw/codemirror-theme-github": "4.24.1",
     "@uiw/react-codemirror": "4.23.10",

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss

@@ -28,22 +28,14 @@
 	}
 }
 
-// In table/column view, keep action buttons visible at the viewport's right edge
-.log-line-action-buttons.table-view-log-actions {
-	position: absolute;
-	top: 50%;
-	right: 8px;
-	left: auto;
-	transform: translateY(-50%);
-	margin: 0;
-	z-index: 5;
-}
-
 .lightMode {
 	.log-line-action-buttons {
 		border: 1px solid var(--bg-vanilla-400);
 		background: var(--bg-vanilla-400);
 
+		.ant-btn-default {
+		}
+
 		.copy-log-btn {
 			border-left: 1px solid var(--bg-vanilla-400);
 			border-color: var(--bg-vanilla-400) !important;

frontend/src/components/Logs/TableView/config.ts

@@ -15,12 +15,13 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 		letterSpacing: '-0.07px',
 		marginBottom: '0px',
 		minWidth: '10rem',
-		width: 'auto',
+		width: '10rem',
 	};
 }
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
+	maxWidth: '90rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -43,7 +43,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 	const bodyColumnStyle = useMemo(
 		() => ({
 			...defaultTableStyle,
-			...(fields.length > 2 ? { width: 'auto' } : {}),
+			...(fields.length > 2 ? { width: '50rem' } : {}),
 		}),
 		[fields.length],
 	);

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -1,35 +1,21 @@
 .quick-filters-container {
 	display: flex;
-	flex-direction: row;
 	height: 100%;
-	min-height: 0;
 	position: relative;
 
 	.quick-filters-settings-container {
-		flex: 0 0 0;
-		width: 0;
-		min-width: 0;
-		overflow: visible;
 		position: relative;
-		align-self: stretch;
 	}
 }
 
 .quick-filters {
 	display: flex;
 	flex-direction: column;
-	flex: 1 1 auto;
-	min-width: 0;
 	height: 100%;
-	min-height: 0;
+	width: 100%;
 	border-right: 1px solid var(--bg-slate-400);
 	color: var(--bg-vanilla-100);
 
-	.overlay-scrollbar {
-		flex: 1;
-		min-height: 0;
-	}
-
 	.header {
 		display: flex;
 		align-items: center;

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -2,8 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	position: absolute;
-	top: 0;
-	left: 0;
 	z-index: 999;
 	width: 342px;
 	background: var(--bg-slate-500);

frontend/src/constants/localStorage.ts

@@ -12,7 +12,6 @@ export enum LOCALSTORAGE {
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
-	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',
 	LOGGED_IN_USER_EMAIL = 'LOGGED_IN_USER_EMAIL',
 	CHAT_SUPPORT = 'CHAT_SUPPORT',

frontend/src/container/LiveLogs/LiveLogsContainer/LiveLogsContainer.styles.scss

@@ -1,16 +1,3 @@
-.live-logs-container {
-	display: flex;
-	flex: 1;
-	min-height: 0;
-}
-
-.live-logs-content {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	min-height: 0;
-}
-
 .live-logs-chart-container {
 	height: 200px;
 	min-height: 200px;
@@ -18,12 +5,6 @@
 	border-right: none;
 }
 
-.live-logs-list-container {
-	display: flex;
-	flex: 1;
-	min-height: 0;
-}
-
 .live-logs-settings-panel {
 	display: flex;
 	align-items: center;

frontend/src/container/LiveLogs/LiveLogsList/LiveLogsList.styles.scss

@@ -18,19 +18,6 @@
 }
 
 .live-logs-list {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	min-height: 0;
-
-	.ant-card,
-	.ant-card-body {
-		display: flex;
-		flex: 1;
-		min-height: 0;
-		flex-direction: column;
-	}
-
 	.live-logs-list-loading {
 		padding: 16px;
 		text-align: center;

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -8,8 +8,8 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
+import InfinityTableView from 'container/LogsExplorerList/InfinityTableView';
 import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
-import TanStackTableView from 'container/LogsExplorerList/TanStackTableView';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
@@ -50,15 +50,11 @@ function LiveLogsList({
 		[logs],
 	);
 
-	const { options, config } = useOptionsMenu({
+	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator: StringOperators.NOOP,
 	});
-	const removableColumnKeys = useMemo(
-		() => options.selectColumns.map((column) => String(column.name)),
-		[options.selectColumns],
-	);
 
 	const activeLogIndex = useMemo(
 		() => formattedLogs.findIndex(({ id }) => id === activeLogId),
@@ -162,7 +158,7 @@ function LiveLogsList({
 			{formattedLogs.length !== 0 && (
 				<InfinityWrapperStyled>
 					{options.format === OptionFormatTypes.TABLE ? (
-						<TanStackTableView
+						<InfinityTableView
 							ref={ref}
 							isLoading={false}
 							tableViewProps={{
@@ -178,8 +174,6 @@ function LiveLogsList({
 							onSetActiveLog={handleSetActiveLog}
 							onClearActiveLog={handleCloseLogDetail}
 							activeLog={activeLog}
-							onRemoveColumn={config.addColumn?.onRemove}
-							removableColumnKeys={removableColumnKeys}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>

frontend/src/container/LogsExplorerList/InfinityTableView/config.ts

@@ -4,11 +4,18 @@ import { FontSize } from 'container/OptionsMenu/types';
 export const infinityDefaultStyles: CSSProperties = {
 	width: '100%',
 	overflowX: 'scroll',
+	marginTop: '15px',
 };
 
-export function getInfinityDefaultStyles(_fontSize: FontSize): CSSProperties {
+export function getInfinityDefaultStyles(fontSize: FontSize): CSSProperties {
 	return {
 		width: '100%',
 		overflowX: 'scroll',
+		marginTop:
+			fontSize === FontSize.SMALL
+				? '10px'
+				: fontSize === FontSize.MEDIUM
+				? '12px'
+				: '15px',
 	};
 }

frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts

@@ -14,78 +14,6 @@ interface TableHeaderCellStyledProps {
 
 export const TableStyled = styled.table`
 	width: 100%;
-	border-collapse: separate;
-	border-spacing: 0;
-`;
-
-/**
- * TanStack column sizing uses table-layout:fixed + colgroup widths; without clipping,
- * cell content overflows visually on top of neighbouring columns (overlap / "ghost" text).
- */
-export const TanStackTableStyled = styled(TableStyled)`
-	table-layout: fixed;
-	width: 100%;
-	min-width: 100%;
-	max-width: 100%;
-
-	& td,
-	& th {
-		overflow: hidden;
-		min-width: 0;
-		box-sizing: border-box;
-		vertical-align: top;
-	}
-
-	& td.table-actions-cell {
-		overflow: visible;
-	}
-
-	& td.body {
-		word-break: break-word;
-		overflow-wrap: anywhere;
-	}
-
-	/* Let nested body HTML / line-clamp shrink inside fixed columns */
-	& td.body > * {
-		min-width: 0;
-		max-width: 100%;
-	}
-
-	/* Long column titles: ellipsis when wider than the column (TanStackHeaderRow) */
-	& thead th .tanstack-header-title {
-		min-width: 0;
-		flex: 1 1 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	& thead th .tanstack-header-title > * {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		max-width: 100%;
-	}
-
-	& td.logs-table-filler-cell,
-	& th.logs-table-filler-header {
-		padding: 0 !important;
-		min-width: 0;
-		border-left: none;
-	}
-
-	& th.logs-table-actions-header {
-		position: sticky;
-		right: 0;
-		z-index: 2;
-		width: 0 !important;
-		min-width: 0 !important;
-		max-width: 0 !important;
-		padding: 0 !important;
-		overflow: visible;
-		white-space: nowrap;
-		border-left: none;
-	}
 `;
 
 const getTimestampColumnWidth = (
@@ -118,19 +46,6 @@ export const TableCellStyled = styled.td<TableHeaderCellStyledProps>`
 
 	${({ columnKey, $hasSingleColumn }): string =>
 		getTimestampColumnWidth(columnKey, $hasSingleColumn)}
-
-	&.table-actions-cell {
-		position: sticky;
-		right: 0;
-		z-index: 2;
-		width: 0;
-		min-width: 0;
-		max-width: 0;
-		padding: 0 !important;
-		white-space: nowrap;
-		overflow: visible;
-		background-color: inherit;
-	}
 `;
 
 export const TableRowStyled = styled.tr<{
@@ -149,10 +64,7 @@ export const TableRowStyled = styled.tr<{
 	position: relative;
 
 	.log-line-action-buttons {
-		display: flex;
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 80ms linear;
+		display: none;
 	}
 
 	&:hover {
@@ -161,25 +73,13 @@ export const TableRowStyled = styled.tr<{
 				getActiveLogBackground(true, $isDarkMode, $logType)}
 		}
 		.log-line-action-buttons {
-			opacity: 1;
-			pointer-events: auto;
+			display: flex;
 		}
 	}
-	${({ $isActiveLog }): string =>
-		$isActiveLog
-			? `
-		.log-line-action-buttons {
-			opacity: 1;
-			pointer-events: auto;
-		}
-	`
-			: ''}
 `;
 
 export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
 	padding: 0.5rem;
-	height: 36px;
-	text-align: left;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -198,12 +98,6 @@ export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
 			: ``};
 	${({ $isLogIndicator }): string =>
 		$isLogIndicator ? 'padding: 0px; width: 1%;' : ''}
-	border-top: 1px solid var(--l2-border);
-	border-bottom: 1px solid var(--l2-border);
-	box-shadow: inset 0 -1px 0 var(--l2-border);
-	&:first-child {
-		border-left: 1px solid var(--l2-border);
-	}
 	color: ${(props): string =>
 		props.$isDarkMode ? 'var(--bg-vanilla-100, #fff)' : themeColors.bckgGrey};
 

frontend/src/container/LogsExplorerList/InfinityTableView/types.ts

@@ -5,9 +5,6 @@ import { ILog } from 'types/api/logs/log';
 
 export type InfinityTableProps = {
 	isLoading?: boolean;
-	isFetching?: boolean;
-	onRemoveColumn?: (columnKey: string) => void;
-	removableColumnKeys?: string[];
 	tableViewProps: Omit<UseTableViewProps, 'onOpenLogsContext' | 'onClickExpand'>;
 	infitiyTableProps?: {
 		onEndReached: (index: number) => void;

frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss

@@ -8,7 +8,7 @@
 	line-height: 18px;
 	letter-spacing: -0.005em;
 	text-align: left;
-	min-height: 0;
+	min-height: 500px;
 
 	.logs-list-table-view-container {
 		.data-table-container {
@@ -24,11 +24,11 @@
 						color: white !important;
 
 						.cursor-col-resize {
-							width: 24px !important;
+							width: 3px !important;
 							cursor: col-resize !important;
-							opacity: 1 !important;
-							background-color: transparent !important;
-							border: none !important;
+							opacity: 0.5 !important;
+							background-color: var(--bg-ink-500) !important;
+							border: 1px solid var(--bg-ink-500) !important;
 
 							&:hover {
 								opacity: 1 !important;
@@ -85,7 +85,7 @@
 			}
 
 			thead {
-				z-index: 2 !important;
+				z-index: 0 !important;
 			}
 
 			.log-state-indicator {

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackCustomTableRow.tsx

@@ -1,56 +0,0 @@
-import { ComponentProps } from 'react';
-import { TableComponents } from 'react-virtuoso';
-import {
-	getLogIndicatorType,
-	getLogIndicatorTypeForTable,
-} from 'components/Logs/LogStateIndicator/utils';
-import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ILog } from 'types/api/logs/log';
-
-import { TableRowStyled } from '../InfinityTableView/styles';
-import { TanStackTableRowData } from './types';
-
-type VirtuosoTableRowProps = ComponentProps<
-	NonNullable<TableComponents<TanStackTableRowData>['TableRow']>
->;
-
-export type TanStackCustomTableRowProps = VirtuosoTableRowProps & {
-	activeLog?: ILog | null;
-	activeContextLog?: ILog | null;
-	logsById: Map<string, ILog>;
-};
-
-function TanStackCustomTableRow({
-	children,
-	item,
-	activeLog,
-	activeContextLog,
-	logsById,
-	...props
-}: TanStackCustomTableRowProps): JSX.Element {
-	const { isHighlighted } = useCopyLogLink(item.currentLog.id);
-	const isDarkMode = useIsDarkMode();
-	const rowId = String(item.currentLog.id ?? '');
-	const rowLog = logsById.get(rowId) || item.currentLog;
-	const logType = rowLog
-		? getLogIndicatorType(rowLog)
-		: getLogIndicatorTypeForTable(item.log);
-
-	return (
-		<TableRowStyled
-			{...props}
-			$isDarkMode={isDarkMode}
-			$isActiveLog={
-				isHighlighted ||
-				rowId === String(activeLog?.id ?? '') ||
-				rowId === String(activeContextLog?.id ?? '')
-			}
-			$logType={logType}
-		>
-			{children}
-		</TableRowStyled>
-	);
-}
-
-export default TanStackCustomTableRow;

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.styles.scss

@@ -1,177 +0,0 @@
-.tanstack-header-cell {
-	position: sticky;
-	top: 0;
-	z-index: 2;
-	padding: 0;
-	transform: translate3d(
-		var(--tanstack-header-translate-x, 0px),
-		var(--tanstack-header-translate-y, 0px),
-		0
-	);
-	transition: var(--tanstack-header-transition, none);
-
-	&.is-dragging {
-		opacity: 0.85;
-	}
-
-	&.is-resizing {
-		background: var(--bg-slate-500);
-	}
-}
-
-.lightMode .tanstack-header-cell.is-resizing {
-	background: var(--bg-vanilla-300);
-}
-
-.tanstack-header-content {
-	display: flex;
-	align-items: center;
-	height: 100%;
-	min-width: 0;
-	width: 100%;
-	cursor: default;
-	max-width: 100%;
-
-	&.has-resize-control {
-		max-width: calc(100% - 5px);
-	}
-
-	&.has-action-control {
-		max-width: calc(100% - 5px);
-	}
-
-	&.has-resize-control.has-action-control {
-		max-width: calc(100% - 10px);
-	}
-}
-
-.tanstack-grip-slot {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 18px;
-	height: 18px;
-	margin-right: 4px;
-	flex-shrink: 0;
-}
-
-.tanstack-grip-activator {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 12px;
-	height: 12px;
-	cursor: grab;
-	color: var(--text-vanilla-400);
-	opacity: 1;
-	touch-action: none;
-}
-
-.tanstack-header-action-trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 20px;
-	height: 20px;
-	cursor: pointer;
-	flex-shrink: 0;
-	color: var(--text-vanilla-400);
-}
-
-.lightMode .tanstack-grip-activator,
-.lightMode .tanstack-header-action-trigger {
-	color: var(--text-ink-500);
-}
-
-.tanstack-column-actions-content {
-	width: 156px;
-	padding: 6px;
-	background: var(--bg-ink-400);
-	border-color: var(--l2-border);
-	border-radius: 8px;
-	box-shadow: 0 8px 20px var(--bg-ink-500);
-}
-
-.tanstack-remove-column-action {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	width: 100%;
-	min-height: 34px;
-	padding: 0 12px;
-	border: none;
-	border-radius: 6px;
-	background: transparent;
-	justify-content: flex-start;
-	cursor: pointer;
-	color: var(--bg-cherry-500);
-	font-size: 12px;
-	line-height: 16px;
-	font-weight: 500;
-	transition: background-color 120ms ease, color 120ms ease;
-
-	&:hover {
-		background: var(--bg-slate-500);
-		color: var(--bg-cherry-600);
-	}
-}
-
-.tanstack-remove-column-action-icon {
-	font-size: 11px;
-	color: var(--bg-cherry-500);
-	opacity: 0.95;
-}
-
-.lightMode .tanstack-column-actions-content {
-	background: var(--bg-vanilla-100);
-	border: 1px solid var(--l2-border);
-	box-shadow: 0 6px 16px var(--bg-slate-300);
-}
-
-.lightMode .tanstack-remove-column-action {
-	color: var(--bg-cherry-600);
-
-	&:hover {
-		background: var(--bg-vanilla-300);
-		color: var(--bg-cherry-700);
-	}
-}
-
-.lightMode .tanstack-remove-column-action-icon {
-	color: var(--bg-cherry-600);
-}
-
-.tanstack-header-cell .cursor-col-resize {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	width: 5px;
-	cursor: col-resize;
-	z-index: 10;
-	touch-action: none;
-	background: transparent;
-}
-
-.tanstack-header-cell.is-resizing .cursor-col-resize {
-	background: var(--bg-robin-300);
-}
-
-.tanstack-resize-handle-line {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 50%;
-	width: 4px;
-	transform: translateX(-50%);
-	background: var(--l2-border);
-	opacity: 1;
-	pointer-events: none;
-	transition: background 120ms ease, width 120ms ease;
-}
-
-.tanstack-header-cell.is-resizing .tanstack-resize-handle-line {
-	width: 2px;
-	background: var(--bg-robin-500);
-	transition: none;
-}

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.tsx

@@ -1,193 +0,0 @@
-import type {
-	CSSProperties,
-	MouseEvent as ReactMouseEvent,
-	TouchEvent as ReactTouchEvent,
-} from 'react';
-import { useMemo } from 'react';
-import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
-import { useSortable } from '@dnd-kit/sortable';
-import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/popover';
-import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
-import { GripVertical } from 'lucide-react';
-
-import { TableHeaderCellStyled } from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import { OrderedColumn, TanStackTableRowData } from './types';
-import { getColumnId } from './utils';
-
-import './TanStackHeaderRow.styles.scss';
-
-type TanStackHeaderRowProps = {
-	column: OrderedColumn;
-	header?: TanStackHeader<TanStackTableRowData, unknown>;
-	isDarkMode: boolean;
-	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
-	hasSingleColumn: boolean;
-	canRemoveColumn?: boolean;
-	onRemoveColumn?: (columnKey: string) => void;
-};
-
-const GRIP_ICON_SIZE = 12;
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackHeaderRow({
-	column,
-	header,
-	isDarkMode,
-	fontSize,
-	hasSingleColumn,
-	canRemoveColumn = false,
-	onRemoveColumn,
-}: TanStackHeaderRowProps): JSX.Element {
-	const columnId = getColumnId(column);
-	const isDragColumn =
-		column.key !== 'expand' && column.key !== 'state-indicator';
-	const isResizableColumn = Boolean(header?.column.getCanResize());
-	const isColumnRemovable = Boolean(
-		canRemoveColumn &&
-			onRemoveColumn &&
-			column.key !== 'expand' &&
-			column.key !== 'state-indicator',
-	);
-	const isResizing = Boolean(header?.column.getIsResizing());
-	const resizeHandler = header?.getResizeHandler();
-	const headerText =
-		typeof column.title === 'string' && column.title
-			? column.title
-			: String(header?.id ?? columnId);
-	const headerTitleAttr = headerText.replace(/^\w/, (c) => c.toUpperCase());
-	const handleResizeStart = (
-		event: ReactMouseEvent<HTMLElement> | ReactTouchEvent<HTMLElement>,
-	): void => {
-		event.preventDefault();
-		event.stopPropagation();
-		resizeHandler?.(event);
-	};
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		setActivatorNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({
-		id: columnId,
-		disabled: !isDragColumn,
-	});
-	const headerCellStyle = useMemo(
-		() =>
-			({
-				'--tanstack-header-translate-x': `${Math.round(transform?.x ?? 0)}px`,
-				'--tanstack-header-translate-y': `${Math.round(transform?.y ?? 0)}px`,
-				'--tanstack-header-transition': isResizing ? 'none' : transition || 'none',
-			} as CSSProperties),
-		[isResizing, transform?.x, transform?.y, transition],
-	);
-	const headerCellClassName = [
-		'tanstack-header-cell',
-		isDragging ? 'is-dragging' : '',
-		isResizing ? 'is-resizing' : '',
-	]
-		.filter(Boolean)
-		.join(' ');
-	const headerContentClassName = [
-		'tanstack-header-content',
-		isResizableColumn ? 'has-resize-control' : '',
-		isColumnRemovable ? 'has-action-control' : '',
-	]
-		.filter(Boolean)
-		.join(' ');
-
-	return (
-		<TableHeaderCellStyled
-			ref={setNodeRef}
-			$isLogIndicator={column.key === 'state-indicator'}
-			$isDarkMode={isDarkMode}
-			$isDragColumn={false}
-			className={headerCellClassName}
-			key={columnId}
-			fontSize={fontSize}
-			$hasSingleColumn={hasSingleColumn}
-			style={headerCellStyle}
-		>
-			<span className={headerContentClassName}>
-				{isDragColumn ? (
-					<span className="tanstack-grip-slot">
-						<span
-							ref={setActivatorNodeRef}
-							{...attributes}
-							{...listeners}
-							role="button"
-							aria-label={`Drag ${String(
-								column.title || header?.id || columnId,
-							)} column`}
-							className="tanstack-grip-activator"
-						>
-							<GripVertical size={GRIP_ICON_SIZE} />
-						</span>
-					</span>
-				) : null}
-				<span className="tanstack-header-title" title={headerTitleAttr}>
-					{header
-						? flexRender(header.column.columnDef.header, header.getContext())
-						: String(column.title || '').replace(/^\w/, (c) => c.toUpperCase())}
-				</span>
-				{isColumnRemovable && (
-					<Popover>
-						<PopoverTrigger asChild>
-							<span
-								role="button"
-								aria-label={`Column actions for ${headerTitleAttr}`}
-								className="tanstack-header-action-trigger"
-								onMouseDown={(event): void => {
-									event.stopPropagation();
-								}}
-							>
-								<MoreOutlined />
-							</span>
-						</PopoverTrigger>
-						<PopoverContent
-							align="end"
-							sideOffset={6}
-							className="tanstack-column-actions-content"
-						>
-							<button
-								type="button"
-								className="tanstack-remove-column-action"
-								onClick={(event): void => {
-									event.preventDefault();
-									event.stopPropagation();
-									onRemoveColumn?.(String(column.key));
-								}}
-							>
-								<CloseOutlined className="tanstack-remove-column-action-icon" />
-								Remove column
-							</button>
-						</PopoverContent>
-					</Popover>
-				)}
-			</span>
-			{isResizableColumn && (
-				<span
-					role="presentation"
-					className="cursor-col-resize"
-					title="Drag to resize column"
-					onClick={(event): void => {
-						event.preventDefault();
-						event.stopPropagation();
-					}}
-					onMouseDown={(event): void => {
-						handleResizeStart(event);
-					}}
-					onTouchStart={(event): void => {
-						handleResizeStart(event);
-					}}
-				>
-					<span className="tanstack-resize-handle-line" />
-				</span>
-			)}
-		</TableHeaderCellStyled>
-	);
-}
-
-export default TanStackHeaderRow;

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackRow.tsx

@@ -1,107 +0,0 @@
-import {
-	MouseEvent as ReactMouseEvent,
-	MouseEventHandler,
-	useCallback,
-} from 'react';
-import { flexRender, Row as TanStackRowModel } from '@tanstack/react-table';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
-
-import { TableCellStyled } from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import { TanStackTableRowData } from './types';
-
-type TanStackRowProps = {
-	row: TanStackRowModel<TanStackTableRowData>;
-	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
-	onSetActiveLog?: InfinityTableProps['onSetActiveLog'];
-	onClearActiveLog?: InfinityTableProps['onClearActiveLog'];
-	isActiveLog?: boolean;
-	isDarkMode: boolean;
-	onLogCopy: (logId: string, event: ReactMouseEvent<HTMLElement>) => void;
-	isLogsExplorerPage: boolean;
-};
-
-function TanStackRow({
-	row,
-	fontSize,
-	onSetActiveLog,
-	onClearActiveLog,
-	isActiveLog = false,
-	isDarkMode,
-	onLogCopy,
-	isLogsExplorerPage,
-}: TanStackRowProps): JSX.Element {
-	const { currentLog } = row.original;
-
-	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
-		(event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			onSetActiveLog?.(currentLog, VIEW_TYPES.CONTEXT);
-		},
-		[currentLog, onSetActiveLog],
-	);
-
-	const handleShowLogDetails = useCallback(() => {
-		if (!currentLog) {
-			return;
-		}
-
-		if (isActiveLog && onClearActiveLog) {
-			onClearActiveLog();
-			return;
-		}
-
-		onSetActiveLog?.(currentLog);
-	}, [currentLog, isActiveLog, onClearActiveLog, onSetActiveLog]);
-
-	return (
-		<>
-			{row.getVisibleCells().map((cell) => {
-				const columnKey = cell.column.id;
-				return (
-					<TableCellStyled
-						$isDragColumn={false}
-						$isLogIndicator={columnKey === 'state-indicator'}
-						$hasSingleColumn={row.getVisibleCells().length <= 2}
-						$isDarkMode={isDarkMode}
-						key={cell.id}
-						fontSize={fontSize}
-						className={columnKey}
-						onClick={handleShowLogDetails}
-					>
-						{flexRender(cell.column.columnDef.cell, cell.getContext())}
-					</TableCellStyled>
-				);
-			})}
-			<TableCellStyled
-				$isDragColumn={false}
-				$isLogIndicator={false}
-				$hasSingleColumn={false}
-				$isDarkMode={isDarkMode}
-				fontSize={fontSize}
-				className="logs-table-filler-cell"
-				onClick={handleShowLogDetails}
-			/>
-			{isLogsExplorerPage && (
-				<TableCellStyled
-					$isDragColumn={false}
-					$isLogIndicator={false}
-					$hasSingleColumn={false}
-					$isDarkMode={isDarkMode}
-					fontSize={fontSize}
-					className="table-actions-cell"
-				>
-					<LogLinesActionButtons
-						handleShowContext={handleShowContext}
-						onLogCopy={(event): void => onLogCopy(currentLog.id, event)}
-						customClassName="table-view-log-actions"
-					/>
-				</TableCellStyled>
-			)}
-		</>
-	);
-}
-
-export default TanStackRow;

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackTableView.styles.scss

@@ -1,54 +0,0 @@
-.tanstack-table-view-wrapper {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	min-height: 0;
-}
-
-.tanstack-fixed-col {
-	width: 32px;
-	min-width: 32px;
-	max-width: 32px;
-}
-
-.tanstack-filler-col {
-	width: 100%;
-	min-width: 0;
-}
-
-.tanstack-actions-col {
-	width: 0;
-	min-width: 0;
-	max-width: 0;
-}
-
-.tanstack-load-more-container {
-	width: 100%;
-	min-height: 56px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 8px 0 12px;
-	flex-shrink: 0;
-}
-.tanstack-table-virtuoso {
-	width: 100%;
-	overflow-x: scroll;
-}
-
-.tanstack-fontSize-small {
-	font-size: 11px;
-}
-
-.tanstack-fontSize-medium {
-	font-size: 13px;
-}
-
-.tanstack-fontSize-large {
-	font-size: 14px;
-}
-
-.tanstack-table-foot-loader-cell {
-	text-align: center;
-	padding: 8px 0;
-}

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackCustomTableRow.test.tsx

@@ -1,98 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import TanStackCustomTableRow from '../TanStackCustomTableRow';
-import type { TanStackTableRowData } from '../types';
-
-jest.mock('../../InfinityTableView/styles', () => ({
-	TableRowStyled: 'tr',
-}));
-
-jest.mock('hooks/logs/useCopyLogLink', () => ({
-	useCopyLogLink: (): { isHighlighted: boolean } => ({ isHighlighted: false }),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('components/Logs/LogStateIndicator/utils', () => ({
-	getLogIndicatorType: (): string => 'info',
-	getLogIndicatorTypeForTable: (): string => 'info',
-}));
-
-const item: TanStackTableRowData = {
-	log: {},
-	currentLog: { id: 'row-1' } as TanStackTableRowData['currentLog'],
-	rowIndex: 0,
-};
-
-/** Required by react-virtuoso `TableRow` / `TableComponents` typing */
-const virtuosoTableRowAttrs = {
-	'data-index': 0,
-	'data-item-index': 0,
-	'data-known-size': 40,
-} as const;
-
-describe('TanStackCustomTableRow', () => {
-	it('renders children inside TableRowStyled', () => {
-		render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoTableRowAttrs}
-						item={item}
-						logsById={new Map()}
-						activeLog={null}
-						activeContextLog={null}
-					>
-						<td>cell</td>
-					</TanStackCustomTableRow>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getByText('cell')).toBeInTheDocument();
-	});
-
-	it('marks row active when activeLog matches item id', () => {
-		const { container } = render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoTableRowAttrs}
-						item={item}
-						logsById={new Map()}
-						activeLog={{ id: 'row-1' } as never}
-						activeContextLog={null}
-					>
-						<td>x</td>
-					</TanStackCustomTableRow>
-				</tbody>
-			</table>,
-		);
-
-		const row = container.querySelector('tr');
-		expect(row).toBeTruthy();
-	});
-
-	it('uses logsById entry when present for indicator type', () => {
-		const logFromMap = { id: 'row-1', severity_text: 'error' } as never;
-		render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoTableRowAttrs}
-						item={item}
-						logsById={new Map([['row-1', logFromMap]])}
-						activeLog={null}
-						activeContextLog={null}
-					>
-						<td>x</td>
-					</TanStackCustomTableRow>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getByText('x')).toBeInTheDocument();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackHeaderRow.test.tsx

@@ -1,152 +0,0 @@
-import type { Header } from '@tanstack/react-table';
-import { render, screen } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import TanStackHeaderRow from '../TanStackHeaderRow';
-import type { OrderedColumn, TanStackTableRowData } from '../types';
-
-jest.mock('../../InfinityTableView/styles', () => ({
-	TableHeaderCellStyled: 'th',
-}));
-
-const mockUseSortable = jest.fn((_args?: unknown) => ({
-	attributes: {},
-	listeners: {},
-	setNodeRef: jest.fn(),
-	setActivatorNodeRef: jest.fn(),
-	transform: null,
-	transition: undefined,
-	isDragging: false,
-}));
-
-jest.mock('@dnd-kit/sortable', () => ({
-	useSortable: (args: unknown): ReturnType<typeof mockUseSortable> =>
-		mockUseSortable(args),
-}));
-
-jest.mock('@tanstack/react-table', () => ({
-	flexRender: (def: unknown, ctx: unknown): unknown => {
-		if (typeof def === 'string') {
-			return def;
-		}
-		if (typeof def === 'function') {
-			return (def as (c: unknown) => unknown)(ctx);
-		}
-		return def;
-	},
-}));
-
-const column = (key: string): OrderedColumn =>
-	({ key, title: key } as OrderedColumn);
-
-const mockHeader = (
-	id: string,
-	canResize = true,
-): Header<TanStackTableRowData, unknown> =>
-	(({
-		id,
-		column: {
-			getCanResize: (): boolean => canResize,
-			getIsResizing: (): boolean => false,
-			columnDef: { header: id },
-		},
-		getContext: (): unknown => ({}),
-		getResizeHandler: (): (() => void) => jest.fn(),
-		flexRender: undefined,
-	} as unknown) as Header<TanStackTableRowData, unknown>);
-
-describe('TanStackHeaderRow', () => {
-	beforeEach(() => {
-		mockUseSortable.mockClear();
-	});
-
-	it('renders column title when header is undefined', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('timestamp')}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(screen.getByText('Timestamp')).toBeInTheDocument();
-	});
-
-	it('enables useSortable for draggable columns', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('body')}
-							header={mockHeader('body')}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(mockUseSortable).toHaveBeenCalledWith(
-			expect.objectContaining({
-				id: 'body',
-				disabled: false,
-			}),
-		);
-	});
-
-	it('disables sortable for expand column', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('expand')}
-							header={mockHeader('expand', false)}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(mockUseSortable).toHaveBeenCalledWith(
-			expect.objectContaining({
-				disabled: true,
-			}),
-		);
-	});
-
-	it('shows drag grip for draggable columns', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('body')}
-							header={mockHeader('body')}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(
-			screen.getByRole('button', { name: /Drag body column/i }),
-		).toBeInTheDocument();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackRow.test.tsx

@@ -1,220 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import TanStackRow from '../TanStackRow';
-import type { TanStackTableRowData } from '../types';
-
-jest.mock('../../InfinityTableView/styles', () => ({
-	TableCellStyled: 'td',
-}));
-
-jest.mock(
-	'components/Logs/LogLinesActionButtons/LogLinesActionButtons',
-	() => ({
-		__esModule: true,
-		default: ({
-			onLogCopy,
-		}: {
-			onLogCopy: (e: React.MouseEvent) => void;
-		}): JSX.Element => (
-			<button type="button" data-testid="copy-btn" onClick={onLogCopy}>
-				copy
-			</button>
-		),
-	}),
-);
-
-const flexRenderMock = jest.fn((def: unknown, _ctx?: unknown) =>
-	typeof def === 'function' ? def({}) : def,
-);
-
-jest.mock('@tanstack/react-table', () => ({
-	flexRender: (def: unknown, ctx: unknown): unknown => flexRenderMock(def, ctx),
-}));
-
-function buildMockRow(
-	visibleCells: Array<{ columnId: string }>,
-): Parameters<typeof TanStackRow>[0]['row'] {
-	return {
-		original: {
-			currentLog: { id: 'log-1' } as TanStackTableRowData['currentLog'],
-			log: {},
-			rowIndex: 0,
-		},
-		getVisibleCells: () =>
-			visibleCells.map((cell, index) => ({
-				id: `cell-${index}`,
-				column: {
-					id: cell.columnId,
-					columnDef: {
-						cell: (): string => `content-${cell.columnId}`,
-					},
-				},
-				getContext: (): Record<string, unknown> => ({}),
-			})),
-	} as never;
-}
-
-describe('TanStackRow', () => {
-	beforeEach(() => {
-		flexRenderMock.mockClear();
-	});
-
-	it('renders a cell per visible column and calls flexRender', () => {
-		const row = buildMockRow([
-			{ columnId: 'state-indicator' },
-			{ columnId: 'body' },
-		]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getAllByRole('cell')).toHaveLength(3);
-		expect(flexRenderMock).toHaveBeenCalled();
-	});
-
-	it('applies state-indicator styling class on the indicator cell', () => {
-		const row = buildMockRow([{ columnId: 'state-indicator' }]);
-
-		const { container } = render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		expect(container.querySelector('td.state-indicator')).toBeInTheDocument();
-	});
-
-	it('renders row actions on logs explorer page', () => {
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getByTestId('copy-btn')).toBeInTheDocument();
-	});
-
-	it('click on a data cell calls onSetActiveLog with current log', () => {
-		const onSetActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onSetActiveLog={onSetActiveLog}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		fireEvent.click(screen.getAllByRole('cell')[0]);
-
-		expect(onSetActiveLog).toHaveBeenCalledWith(
-			expect.objectContaining({ id: 'log-1' }),
-		);
-	});
-
-	it('click on filler cell calls onSetActiveLog', () => {
-		const onSetActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		const { container } = render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onSetActiveLog={onSetActiveLog}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		const filler = container.querySelector('td.logs-table-filler-cell');
-		expect(filler).toBeTruthy();
-		fireEvent.click(filler!);
-
-		expect(onSetActiveLog).toHaveBeenCalledWith(
-			expect.objectContaining({ id: 'log-1' }),
-		);
-	});
-
-	it('when row is active log, click on cell clears active log', () => {
-		const onSetActiveLog = jest.fn();
-		const onClearActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							isActiveLog
-							onSetActiveLog={onSetActiveLog}
-							onClearActiveLog={onClearActiveLog}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		fireEvent.click(screen.getAllByRole('cell')[0]);
-
-		expect(onClearActiveLog).toHaveBeenCalled();
-		expect(onSetActiveLog).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -1,104 +0,0 @@
-import { forwardRef } from 'react';
-import { render, screen } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import type { InfinityTableProps } from '../../InfinityTableView/types';
-import TanStackTableView from '../index';
-
-jest.mock('react-virtuoso', () => ({
-	TableVirtuoso: forwardRef<
-		unknown,
-		{
-			fixedHeaderContent?: () => JSX.Element;
-			itemContent: (i: number) => JSX.Element;
-		}
-	>(function MockVirtuoso({ fixedHeaderContent, itemContent }, _ref) {
-		return (
-			<div data-testid="virtuoso">
-				{fixedHeaderContent?.()}
-				{itemContent(0)}
-			</div>
-		);
-	}),
-}));
-
-jest.mock('components/Logs/TableView/useTableView', () => ({
-	useTableView: (): {
-		dataSource: Record<string, string>[];
-		columns: unknown[];
-	} => ({
-		dataSource: [{ id: '1' }],
-		columns: [
-			{ key: 'body', title: 'body', render: (): string => 'x' },
-			{ key: 'state-indicator', title: 's', render: (): string => 'y' },
-		],
-	}),
-}));
-
-jest.mock('hooks/useDragColumns', () => ({
-	__esModule: true,
-	default: (): {
-		draggedColumns: unknown[];
-		onColumnOrderChange: () => void;
-	} => ({
-		draggedColumns: [],
-		onColumnOrderChange: jest.fn(),
-	}),
-}));
-
-jest.mock('hooks/logs/useActiveLog', () => ({
-	useActiveLog: (): { activeLog: null } => ({ activeLog: null }),
-}));
-
-jest.mock('hooks/logs/useCopyLogLink', () => ({
-	useCopyLogLink: (): { activeLogId: null } => ({ activeLogId: null }),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('react-router-dom', () => ({
-	useLocation: (): { pathname: string } => ({ pathname: '/logs' }),
-}));
-
-jest.mock('react-use', () => ({
-	useCopyToClipboard: (): [unknown, () => void] => [null, jest.fn()],
-}));
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: { success: jest.fn() },
-}));
-
-jest.mock('components/Spinner', () => ({
-	__esModule: true,
-	default: ({ tip }: { tip: string }): JSX.Element => (
-		<div data-testid="spinner">{tip}</div>
-	),
-}));
-
-const baseProps: InfinityTableProps = {
-	isLoading: false,
-	tableViewProps: {
-		logs: [{ id: '1' } as never],
-		fields: [],
-		linesPerRow: 3,
-		fontSize: FontSize.SMALL,
-		appendTo: 'end',
-		activeLogIndex: 0,
-	},
-};
-
-describe('TanStackTableView', () => {
-	it('shows spinner while loading', () => {
-		render(<TanStackTableView {...baseProps} isLoading />);
-
-		expect(screen.getByTestId('spinner')).toHaveTextContent('Getting Logs');
-	});
-
-	it('renders virtuoso when not loading', () => {
-		render(<TanStackTableView {...baseProps} />);
-
-		expect(screen.getByTestId('virtuoso')).toBeInTheDocument();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/useColumnSizingPersistence.test.tsx

@@ -1,173 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import type { OrderedColumn } from '../types';
-import { useColumnSizingPersistence } from '../useColumnSizingPersistence';
-
-const mockGet = jest.fn();
-const mockSet = jest.fn();
-
-jest.mock('api/browser/localstorage/get', () => ({
-	__esModule: true,
-	default: (key: string): string | null => mockGet(key),
-}));
-
-jest.mock('api/browser/localstorage/set', () => ({
-	__esModule: true,
-	default: (key: string, value: string): void => {
-		mockSet(key, value);
-	},
-}));
-
-const col = (key: string): OrderedColumn =>
-	({ key, title: key } as OrderedColumn);
-
-describe('useColumnSizingPersistence', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockGet.mockReturnValue(null);
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	});
-
-	it('initializes with empty sizing when localStorage is empty', () => {
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('timestamp')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({});
-	});
-
-	it('parses flat ColumnSizingState from localStorage', () => {
-		mockGet.mockReturnValue(JSON.stringify({ body: 400, timestamp: 180 }));
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('timestamp')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 400, timestamp: 180 });
-	});
-
-	it('parses PersistedColumnSizing wrapper with sizing + columnIdsSignature', () => {
-		mockGet.mockReturnValue(
-			JSON.stringify({
-				version: 1,
-				columnIdsSignature: 'body|timestamp',
-				sizing: { body: 300 },
-			}),
-		);
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('timestamp')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 300 });
-	});
-
-	it('drops invalid numeric entries when reading from localStorage', () => {
-		mockGet.mockReturnValue(
-			JSON.stringify({
-				body: 200,
-				bad: NaN,
-				zero: 0,
-				neg: -1,
-				str: 'wide',
-			}),
-		);
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('bad'), col('zero')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 200 });
-	});
-
-	it('returns empty sizing when JSON is invalid', () => {
-		const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-		mockGet.mockReturnValue('not-json');
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({});
-		spy.mockRestore();
-	});
-
-	it('prunes sizing for columns not in orderedColumns and strips fixed columns', () => {
-		mockGet.mockReturnValue(JSON.stringify({ body: 400, expand: 32, gone: 100 }));
-
-		const { result, rerender } = renderHook(
-			({ columns }: { columns: OrderedColumn[] }) =>
-				useColumnSizingPersistence(columns),
-			{
-				initialProps: {
-					columns: [
-						col('body'),
-						col('expand'),
-						col('state-indicator'),
-					] as OrderedColumn[],
-				},
-			},
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 400 });
-
-		act(() => {
-			rerender({
-				columns: [col('body'), col('expand'), col('state-indicator')],
-			});
-		});
-
-		expect(result.current.columnSizing).toEqual({ body: 400 });
-	});
-
-	it('updates setColumnSizing manually', () => {
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body')]),
-		);
-
-		act(() => {
-			result.current.setColumnSizing({ body: 500 });
-		});
-
-		expect(result.current.columnSizing).toEqual({ body: 500 });
-	});
-
-	it('debounces writes to localStorage', () => {
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body')]),
-		);
-
-		act(() => {
-			result.current.setColumnSizing({ body: 600 });
-		});
-
-		expect(mockSet).not.toHaveBeenCalled();
-
-		act(() => {
-			jest.advanceTimersByTime(250);
-		});
-
-		expect(mockSet).toHaveBeenCalledWith(
-			LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING,
-			expect.stringContaining('"body":600'),
-		);
-	});
-
-	it('does not persist when ordered columns signature effect runs with empty ids early — still debounces empty sizing', () => {
-		const { result } = renderHook(() => useColumnSizingPersistence([]));
-
-		expect(result.current.columnSizing).toEqual({});
-
-		act(() => {
-			jest.advanceTimersByTime(250);
-		});
-
-		expect(mockSet).toHaveBeenCalled();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/useOrderedColumns.test.tsx

@@ -1,190 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-
-import type { OrderedColumn } from '../types';
-import { useOrderedColumns } from '../useOrderedColumns';
-
-const mockGetDraggedColumns = jest.fn();
-
-jest.mock('hooks/useDragColumns/utils', () => ({
-	getDraggedColumns: <T,>(current: unknown[], dragged: unknown[]): T[] =>
-		mockGetDraggedColumns(current, dragged) as T[],
-}));
-
-const col = (key: string, title?: string): OrderedColumn =>
-	({ key, title: title ?? key } as OrderedColumn);
-
-describe('useOrderedColumns', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('returns columns from getDraggedColumns filtered to keys with string or number', () => {
-		mockGetDraggedColumns.mockReturnValue([
-			col('body'),
-			col('timestamp'),
-			{ title: 'no-key' },
-		]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.orderedColumns).toEqual([
-			col('body'),
-			col('timestamp'),
-		]);
-		expect(result.current.orderedColumnIds).toEqual(['body', 'timestamp']);
-	});
-
-	it('hasSingleColumn is true when exactly one column is not state-indicator', () => {
-		mockGetDraggedColumns.mockReturnValue([col('state-indicator'), col('body')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.hasSingleColumn).toBe(true);
-	});
-
-	it('hasSingleColumn is false when more than one non-state-indicator column exists', () => {
-		mockGetDraggedColumns.mockReturnValue([
-			col('state-indicator'),
-			col('body'),
-			col('timestamp'),
-		]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.hasSingleColumn).toBe(false);
-	});
-
-	it('handleDragEnd reorders columns and calls onColumnOrderChange', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b'), col('c')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'a' },
-				over: { id: 'c' },
-			} as never);
-		});
-
-		expect(result.current.orderedColumns.map((c) => c.key)).toEqual([
-			'b',
-			'c',
-			'a',
-		]);
-		expect(onColumnOrderChange).toHaveBeenCalledWith(
-			expect.arrayContaining([
-				expect.objectContaining({ key: 'b' }),
-				expect.objectContaining({ key: 'c' }),
-				expect.objectContaining({ key: 'a' }),
-			]),
-		);
-	});
-
-	it('handleDragEnd no-ops when over is null', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		const before = result.current.orderedColumns;
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'a' },
-				over: null,
-			} as never);
-		});
-
-		expect(result.current.orderedColumns).toBe(before);
-		expect(onColumnOrderChange).not.toHaveBeenCalled();
-	});
-
-	it('handleDragEnd no-ops when active.id equals over.id', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'a' },
-				over: { id: 'a' },
-			} as never);
-		});
-
-		expect(onColumnOrderChange).not.toHaveBeenCalled();
-	});
-
-	it('handleDragEnd no-ops when indices cannot be resolved', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'missing' },
-				over: { id: 'a' },
-			} as never);
-		});
-
-		expect(onColumnOrderChange).not.toHaveBeenCalled();
-	});
-
-	it('exposes sensors from useSensors', () => {
-		mockGetDraggedColumns.mockReturnValue([col('a')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.sensors).toBeDefined();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx

@@ -1,483 +0,0 @@
-import {
-	forwardRef,
-	memo,
-	MouseEvent as ReactMouseEvent,
-	ReactElement,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
-import {
-	TableComponents,
-	TableVirtuoso,
-	TableVirtuosoHandle,
-} from 'react-virtuoso';
-import { DndContext, pointerWithin } from '@dnd-kit/core';
-import {
-	horizontalListSortingStrategy,
-	SortableContext,
-} from '@dnd-kit/sortable';
-import { toast } from '@signozhq/sonner';
-import {
-	ColumnDef,
-	getCoreRowModel,
-	useReactTable,
-} from '@tanstack/react-table';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-import { useTableView } from 'components/Logs/TableView/useTableView';
-import Spinner from 'components/Spinner';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import useDragColumns from 'hooks/useDragColumns';
-
-import { getInfinityDefaultStyles } from '../InfinityTableView/config';
-import {
-	TableHeaderCellStyled,
-	TanStackTableStyled,
-} from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import TanStackCustomTableRow from './TanStackCustomTableRow';
-import TanStackHeaderRow from './TanStackHeaderRow';
-import TanStackRow from './TanStackRow';
-import { TableRecord, TanStackTableRowData } from './types';
-import { useColumnSizingPersistence } from './useColumnSizingPersistence';
-import { useOrderedColumns } from './useOrderedColumns';
-import {
-	getColumnId,
-	getColumnMinWidthPx,
-	resolveColumnTypeRender,
-} from './utils';
-
-import '../logsTableVirtuosoScrollbar.scss';
-import './TanStackTableView.styles.scss';
-
-const COLUMN_DND_AUTO_SCROLL = {
-	layoutShiftCompensation: false as const,
-	threshold: { x: 0.2, y: 0 },
-};
-
-const TanStackTableView = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
-	function TanStackTableView(
-		{
-			isLoading,
-			isFetching,
-			onRemoveColumn,
-			removableColumnKeys,
-			tableViewProps,
-			infitiyTableProps,
-			onSetActiveLog,
-			onClearActiveLog,
-			activeLog,
-		}: InfinityTableProps,
-		forwardedRef,
-	): JSX.Element {
-		const { pathname } = useLocation();
-		const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
-		useImperativeHandle(
-			forwardedRef,
-			() => virtuosoRef.current as TableVirtuosoHandle,
-			[],
-		);
-		const [, setCopy] = useCopyToClipboard();
-		const { dataSource, columns } = useTableView({
-			...tableViewProps,
-			onClickExpand: onSetActiveLog,
-			onOpenLogsContext: (log): void => onSetActiveLog?.(log, VIEW_TYPES.CONTEXT),
-		});
-
-		const { draggedColumns, onColumnOrderChange } = useDragColumns<TableRecord>(
-			LOCALSTORAGE.LOGS_LIST_COLUMNS,
-		);
-		const {
-			orderedColumns,
-			orderedColumnIds,
-			hasSingleColumn,
-			handleDragEnd,
-			sensors,
-		} = useOrderedColumns({
-			columns,
-			draggedColumns,
-			onColumnOrderChange: onColumnOrderChange as (columns: unknown[]) => void,
-		});
-		const { columnSizing, setColumnSizing } = useColumnSizingPersistence(
-			orderedColumns,
-		);
-		const removableColumnKeySet = useMemo(
-			() => new Set((removableColumnKeys || []).map((column) => String(column))),
-			[removableColumnKeys],
-		);
-		const isAtMinimumRemovableColumns = useMemo(
-			() =>
-				orderedColumns.filter(
-					(column) => column.key !== 'state-indicator' && column.key !== 'expand',
-				).length <= 1,
-			[orderedColumns],
-		);
-		const tableData = useMemo<TanStackTableRowData[]>(
-			() =>
-				dataSource
-					.map((log, rowIndex) => {
-						const currentLog = tableViewProps.logs[rowIndex];
-						if (!currentLog) {
-							return null;
-						}
-						return { log, currentLog, rowIndex };
-					})
-					.filter(Boolean) as TanStackTableRowData[],
-			[dataSource, tableViewProps.logs],
-		);
-		const tanstackColumns = useMemo<ColumnDef<TanStackTableRowData>[]>(
-			() =>
-				orderedColumns.map((column) => {
-					const isStateIndicator = column.key === 'state-indicator';
-					const isExpand = column.key === 'expand';
-					const isFixedColumn = isStateIndicator || isExpand;
-					const fixedWidth = isFixedColumn ? 32 : undefined;
-					const minWidthPx = getColumnMinWidthPx(column, orderedColumns);
-					const headerTitle = String(column.title || '');
-
-					return {
-						id: getColumnId(column),
-						header: headerTitle.replace(/^\w/, (character) =>
-							character.toUpperCase(),
-						),
-						accessorFn: (row): unknown => row.log[column.key as keyof TableRecord],
-						enableResizing: !isFixedColumn,
-						minSize: fixedWidth ?? minWidthPx,
-						size: fixedWidth,
-						maxSize: fixedWidth,
-						cell: ({ row, getValue }): ReactElement | string | number | null => {
-							if (!column.render) {
-								return null;
-							}
-
-							return resolveColumnTypeRender(
-								column.render(
-									getValue(),
-									row.original.log,
-									row.original.rowIndex,
-								) as ColumnTypeRender<Record<string, unknown>>,
-							);
-						},
-					};
-				}),
-			[orderedColumns],
-		);
-		const { activeLogId } = useCopyLogLink();
-		const { activeLog: activeContextLog } = useActiveLog();
-		const rowSelection = useMemo<Record<string, boolean>>(() => {
-			const targetId = activeLog?.id ?? activeLogId;
-			if (targetId === undefined || targetId === null || targetId === '') {
-				return {};
-			}
-
-			const activeIndex = tableData.findIndex(
-				(row) => String(row.currentLog.id) === String(targetId),
-			);
-			if (activeIndex < 0) {
-				return {};
-			}
-
-			return { [String(activeIndex)]: true };
-		}, [activeLog?.id, activeLogId, tableData]);
-		const table = useReactTable({
-			data: tableData,
-			columns: tanstackColumns,
-			enableColumnResizing: true,
-			getCoreRowModel: getCoreRowModel(),
-			columnResizeMode: 'onChange',
-			onColumnSizingChange: setColumnSizing,
-			state: {
-				rowSelection,
-				columnSizing,
-			},
-		});
-		const tableRows = table.getRowModel().rows;
-		const [loadMoreState, setLoadMoreState] = useState<{
-			active: boolean;
-			seenFetching: boolean;
-			startCount: number;
-		}>({
-			active: false,
-			seenFetching: false,
-			startCount: 0,
-		});
-
-		const isLogsExplorerPage = pathname === ROUTES.LOGS_EXPLORER;
-		const logsById = useMemo(
-			() => new Map(tableViewProps.logs.map((log) => [String(log.id), log])),
-			[tableViewProps.logs],
-		);
-		useEffect(() => {
-			const activeLogIndex = tableViewProps.activeLogIndex ?? -1;
-			if (activeLogIndex < 0 || activeLogIndex >= tableRows.length) {
-				return;
-			}
-
-			virtuosoRef.current?.scrollToIndex({
-				index: activeLogIndex,
-				align: 'center',
-				behavior: 'auto',
-			});
-		}, [tableRows.length, tableViewProps.activeLogIndex]);
-
-		useEffect(() => {
-			if (!loadMoreState.active) {
-				return;
-			}
-
-			if (isFetching && !loadMoreState.seenFetching) {
-				setLoadMoreState((prev) =>
-					prev.active && !prev.seenFetching ? { ...prev, seenFetching: true } : prev,
-				);
-				return;
-			}
-
-			if (
-				(loadMoreState.seenFetching && !isFetching) ||
-				tableRows.length > loadMoreState.startCount
-			) {
-				setLoadMoreState((prev) =>
-					prev.active
-						? { active: false, seenFetching: false, startCount: prev.startCount }
-						: prev,
-				);
-			}
-		}, [isFetching, loadMoreState, tableRows.length]);
-		const isDarkMode = useIsDarkMode();
-		const handleLogCopy = useCallback(
-			(logId: string, event: ReactMouseEvent<HTMLElement>): void => {
-				event.preventDefault();
-				event.stopPropagation();
-
-				const urlQuery = new URLSearchParams(window.location.search);
-				urlQuery.delete(QueryParams.activeLogId);
-				urlQuery.delete(QueryParams.relativeTime);
-				urlQuery.set(QueryParams.activeLogId, `"${logId}"`);
-				const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
-
-				setCopy(link);
-				toast.success('Copied to clipboard', { position: 'top-right' });
-			},
-			[pathname, setCopy],
-		);
-		const customTableRow = useCallback<
-			NonNullable<TableComponents<TanStackTableRowData>['TableRow']>
-		>(
-			({ children, item, ...props }) => (
-				<TanStackCustomTableRow
-					{...props}
-					item={item}
-					activeLog={activeLog}
-					activeContextLog={activeContextLog}
-					logsById={logsById}
-				>
-					{children}
-				</TanStackCustomTableRow>
-			),
-			[activeContextLog, activeLog, logsById],
-		);
-		const itemContent = useCallback(
-			(index: number): JSX.Element | null => {
-				const row = table.getRowModel().rows[index];
-				if (!row) {
-					return null;
-				}
-
-				return (
-					<TanStackRow
-						row={row}
-						fontSize={tableViewProps.fontSize}
-						onSetActiveLog={onSetActiveLog}
-						onClearActiveLog={onClearActiveLog}
-						isActiveLog={
-							String(activeLog?.id ?? '') === String(row.original.currentLog.id ?? '')
-						}
-						isDarkMode={isDarkMode}
-						onLogCopy={handleLogCopy}
-						isLogsExplorerPage={isLogsExplorerPage}
-					/>
-				);
-			},
-			[
-				activeLog?.id,
-				handleLogCopy,
-				isDarkMode,
-				isLogsExplorerPage,
-				onClearActiveLog,
-				onSetActiveLog,
-				table,
-				tableViewProps.fontSize,
-			],
-		);
-		const tableHeader = useCallback(() => {
-			const flatHeaders = table
-				.getFlatHeaders()
-				.filter((header) => !header.isPlaceholder);
-			const orderedColumnsById = new Map(
-				orderedColumns.map((column) => [getColumnId(column), column] as const),
-			);
-
-			return (
-				<DndContext
-					sensors={sensors}
-					collisionDetection={pointerWithin}
-					onDragEnd={handleDragEnd}
-					autoScroll={COLUMN_DND_AUTO_SCROLL}
-				>
-					<SortableContext
-						items={orderedColumnIds}
-						strategy={horizontalListSortingStrategy}
-					>
-						<tr>
-							{flatHeaders.map((header) => {
-								const column = orderedColumnsById.get(header.id);
-								if (!column) {
-									return null;
-								}
-
-								return (
-									<TanStackHeaderRow
-										key={header.id}
-										column={column}
-										header={header}
-										isDarkMode={isDarkMode}
-										fontSize={tableViewProps.fontSize}
-										hasSingleColumn={hasSingleColumn}
-										onRemoveColumn={onRemoveColumn}
-										canRemoveColumn={
-											!isAtMinimumRemovableColumns &&
-											removableColumnKeySet.has(String(column.key ?? ''))
-										}
-									/>
-								);
-							})}
-							<TableHeaderCellStyled
-								aria-hidden
-								$isDragColumn={false}
-								$isDarkMode={isDarkMode}
-								fontSize={tableViewProps.fontSize}
-								className="logs-table-filler-header"
-							/>
-							{isLogsExplorerPage && (
-								<TableHeaderCellStyled
-									aria-hidden
-									$isDragColumn={false}
-									$isDarkMode={isDarkMode}
-									fontSize={tableViewProps.fontSize}
-									className="logs-table-actions-header"
-								/>
-							)}
-						</tr>
-					</SortableContext>
-				</DndContext>
-			);
-		}, [
-			handleDragEnd,
-			hasSingleColumn,
-			isDarkMode,
-			orderedColumnIds,
-			orderedColumns,
-			onRemoveColumn,
-			isAtMinimumRemovableColumns,
-			removableColumnKeySet,
-			sensors,
-			table,
-			tableViewProps.fontSize,
-			isLogsExplorerPage,
-		]);
-
-		const handleEndReached = useCallback(
-			(index: number): void => {
-				if (!infitiyTableProps?.onEndReached) {
-					return;
-				}
-
-				setLoadMoreState({
-					active: true,
-					seenFetching: Boolean(isFetching),
-					startCount: tableRows.length,
-				});
-				infitiyTableProps.onEndReached(index);
-			},
-			[infitiyTableProps, isFetching, tableRows.length],
-		);
-
-		if (isLoading) {
-			return <Spinner height="35px" tip="Getting Logs" />;
-		}
-
-		return (
-			<div className="tanstack-table-view-wrapper">
-				<TableVirtuoso
-					className="logs-table-virtuoso-scroll"
-					ref={virtuosoRef}
-					style={getInfinityDefaultStyles(tableViewProps.fontSize)}
-					data={tableData}
-					totalCount={tableRows.length}
-					initialTopMostItemIndex={
-						tableViewProps.activeLogIndex !== -1 ? tableViewProps.activeLogIndex : 0
-					}
-					fixedHeaderContent={tableHeader}
-					itemContent={itemContent}
-					components={{
-						Table: ({ style, children }): JSX.Element => (
-							<TanStackTableStyled style={style}>
-								<colgroup>
-									{orderedColumns.map((column) => {
-										const columnId = getColumnId(column);
-										const isFixedColumn =
-											column.key === 'expand' || column.key === 'state-indicator';
-										const minWidthPx = getColumnMinWidthPx(column, orderedColumns);
-										const persistedWidth = columnSizing[columnId];
-										const computedWidth = table.getColumn(columnId)?.getSize();
-										const effectiveWidth = persistedWidth ?? computedWidth;
-										if (isFixedColumn) {
-											return <col key={columnId} className="tanstack-fixed-col" />;
-										}
-										const widthPx =
-											effectiveWidth != null
-												? Math.max(effectiveWidth, minWidthPx)
-												: minWidthPx;
-										return (
-											<col
-												key={columnId}
-												style={{ width: `${widthPx}px`, minWidth: `${minWidthPx}px` }}
-											/>
-										);
-									})}
-									<col key="logs-table-filler-col" className="tanstack-filler-col" />
-									{isLogsExplorerPage && (
-										<col key="logs-table-actions-col" className="tanstack-actions-col" />
-									)}
-								</colgroup>
-								{children}
-							</TanStackTableStyled>
-						),
-						TableRow: customTableRow,
-					}}
-					{...(infitiyTableProps?.onEndReached
-						? { endReached: handleEndReached }
-						: {})}
-				/>
-				{loadMoreState.active && (
-					<div className="tanstack-load-more-container">
-						<Spinner height="20px" tip="Getting Logs" />
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-
-export default memo(TanStackTableView);

frontend/src/container/LogsExplorerList/TanStackTableView/types.ts

@@ -1,31 +0,0 @@
-import { ColumnSizingState } from '@tanstack/react-table';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-import { ILog } from 'types/api/logs/log';
-
-export type TableRecord = Record<string, unknown>;
-
-export type LogsTableColumnDef = {
-	key?: string | number;
-	title?: string;
-	render?: (
-		value: unknown,
-		record: TableRecord,
-		index: number,
-	) => ColumnTypeRender<Record<string, unknown>>;
-};
-
-export type OrderedColumn = LogsTableColumnDef & {
-	key: string | number;
-};
-
-export type TanStackTableRowData = {
-	log: TableRecord;
-	currentLog: ILog;
-	rowIndex: number;
-};
-
-export type PersistedColumnSizing = {
-	version: 1;
-	columnIdsSignature: string;
-	sizing: ColumnSizingState;
-};

frontend/src/container/LogsExplorerList/TanStackTableView/useColumnSizingPersistence.ts

@@ -1,113 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
-import { ColumnSizingState } from '@tanstack/react-table';
-import getFromLocalstorage from 'api/browser/localstorage/get';
-import setToLocalstorage from 'api/browser/localstorage/set';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import { OrderedColumn, PersistedColumnSizing } from './types';
-import { getColumnId } from './utils';
-
-const COLUMN_SIZING_PERSIST_DEBOUNCE_MS = 250;
-
-const readPersistedColumnSizing = (): ColumnSizingState => {
-	const rawSizing = getFromLocalstorage(LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING);
-	if (!rawSizing) {
-		return {};
-	}
-
-	try {
-		const parsed = JSON.parse(rawSizing) as
-			| PersistedColumnSizing
-			| ColumnSizingState;
-		const sizing = ('sizing' in parsed
-			? parsed.sizing
-			: parsed) as ColumnSizingState;
-
-		return Object.entries(sizing).reduce<ColumnSizingState>(
-			(acc, [key, value]) => {
-				if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
-					return acc;
-				}
-				acc[key] = value;
-				return acc;
-			},
-			{},
-		);
-	} catch (error) {
-		console.error('Failed to parse persisted log column sizing', error);
-		return {};
-	}
-};
-
-type UseColumnSizingPersistenceResult = {
-	columnSizing: ColumnSizingState;
-	setColumnSizing: Dispatch<SetStateAction<ColumnSizingState>>;
-};
-
-export const useColumnSizingPersistence = (
-	orderedColumns: OrderedColumn[],
-): UseColumnSizingPersistenceResult => {
-	const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(() =>
-		readPersistedColumnSizing(),
-	);
-	const orderedColumnIds = useMemo(
-		() => orderedColumns.map((column) => getColumnId(column)),
-		[orderedColumns],
-	);
-	const orderedColumnIdsSignature = useMemo(() => orderedColumnIds.join('|'), [
-		orderedColumnIds,
-	]);
-
-	useEffect(() => {
-		if (orderedColumnIds.length === 0) {
-			return;
-		}
-
-		const validColumnIds = new Set(orderedColumnIds);
-		const nonResizableColumnIds = new Set(
-			orderedColumns
-				.filter(
-					(column) => column.key === 'expand' || column.key === 'state-indicator',
-				)
-				.map((column) => getColumnId(column)),
-		);
-
-		setColumnSizing((previousSizing) => {
-			const nextSizing = Object.entries(previousSizing).reduce<ColumnSizingState>(
-				(acc, [columnId, size]) => {
-					if (!validColumnIds.has(columnId) || nonResizableColumnIds.has(columnId)) {
-						return acc;
-					}
-					acc[columnId] = size;
-					return acc;
-				},
-				{},
-			);
-			const hasChanged =
-				Object.keys(nextSizing).length !== Object.keys(previousSizing).length ||
-				Object.entries(nextSizing).some(
-					([columnId, size]) => previousSizing[columnId] !== size,
-				);
-
-			return hasChanged ? nextSizing : previousSizing;
-		});
-	}, [orderedColumnIds, orderedColumns]);
-
-	useEffect(() => {
-		const timeoutId = window.setTimeout(() => {
-			const persistedSizing: PersistedColumnSizing = {
-				version: 1,
-				columnIdsSignature: orderedColumnIdsSignature,
-				sizing: columnSizing,
-			};
-			setToLocalstorage(
-				LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING,
-				JSON.stringify(persistedSizing),
-			);
-		}, COLUMN_SIZING_PERSIST_DEBOUNCE_MS);
-
-		return (): void => window.clearTimeout(timeoutId);
-	}, [columnSizing, orderedColumnIdsSignature]);
-
-	return { columnSizing, setColumnSizing };
-};

frontend/src/container/LogsExplorerList/TanStackTableView/useOrderedColumns.ts

@@ -1,127 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-	DragEndEvent,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from '@dnd-kit/core';
-import { arrayMove } from '@dnd-kit/sortable';
-import { getDraggedColumns } from 'hooks/useDragColumns/utils';
-
-import { OrderedColumn, TableRecord } from './types';
-import { getColumnId } from './utils';
-
-type UseOrderedColumnsProps = {
-	columns: unknown[];
-	draggedColumns: unknown[];
-	onColumnOrderChange: (columns: unknown[]) => void;
-};
-
-type UseOrderedColumnsResult = {
-	orderedColumns: OrderedColumn[];
-	orderedColumnIds: string[];
-	hasSingleColumn: boolean;
-	handleDragEnd: (event: DragEndEvent) => void;
-	sensors: ReturnType<typeof useSensors>;
-};
-
-export const useOrderedColumns = ({
-	columns,
-	draggedColumns,
-	onColumnOrderChange,
-}: UseOrderedColumnsProps): UseOrderedColumnsResult => {
-	const baseColumns = useMemo<OrderedColumn[]>(
-		() =>
-			getDraggedColumns<TableRecord>(
-				columns as never[],
-				draggedColumns as never[],
-			).filter(
-				(column): column is OrderedColumn =>
-					typeof column.key === 'string' || typeof column.key === 'number',
-			),
-		[columns, draggedColumns],
-	);
-
-	const [orderedColumns, setOrderedColumns] = useState<OrderedColumn[]>(
-		baseColumns,
-	);
-	const sensors = useSensors(
-		useSensor(PointerSensor, {
-			activationConstraint: { distance: 4 },
-		}),
-	);
-
-	useEffect(() => {
-		setOrderedColumns((previousColumns) => {
-			const baseColumnsById = new Map(
-				baseColumns.map((column) => [getColumnId(column), column] as const),
-			);
-			const previousIds = new Set(
-				previousColumns.map((column) => getColumnId(column)),
-			);
-			const orderedFromPrevious = previousColumns
-				.map((column) => baseColumnsById.get(getColumnId(column)))
-				.filter(Boolean) as OrderedColumn[];
-			const appendedNewColumns = baseColumns.filter(
-				(column) => !previousIds.has(getColumnId(column)),
-			);
-			const nextColumns = [...orderedFromPrevious, ...appendedNewColumns];
-
-			if (nextColumns.length !== previousColumns.length) {
-				return nextColumns;
-			}
-
-			const hasReferenceChange = nextColumns.some(
-				(column, index) => column !== previousColumns[index],
-			);
-
-			return hasReferenceChange ? nextColumns : previousColumns;
-		});
-	}, [baseColumns]);
-
-	const handleDragEnd = useCallback(
-		(event: DragEndEvent): void => {
-			const { active, over } = event;
-			if (!over || active.id === over.id) {
-				return;
-			}
-
-			setOrderedColumns((previousColumns) => {
-				const oldIndex = previousColumns.findIndex(
-					(column) => getColumnId(column) === String(active.id),
-				);
-				const newIndex = previousColumns.findIndex(
-					(column) => getColumnId(column) === String(over.id),
-				);
-				if (oldIndex === -1 || newIndex === -1) {
-					return previousColumns;
-				}
-
-				const nextColumns = arrayMove(previousColumns, oldIndex, newIndex);
-				onColumnOrderChange(nextColumns as unknown[]);
-
-				return nextColumns;
-			});
-		},
-		[onColumnOrderChange],
-	);
-
-	const orderedColumnIds = useMemo(
-		() => orderedColumns.map((column) => getColumnId(column)),
-		[orderedColumns],
-	);
-	const hasSingleColumn = useMemo(
-		() =>
-			orderedColumns.filter((column) => column.key !== 'state-indicator')
-				.length === 1,
-		[orderedColumns],
-	);
-
-	return {
-		orderedColumns,
-		orderedColumnIds,
-		hasSingleColumn,
-		handleDragEnd,
-		sensors,
-	};
-};

frontend/src/container/LogsExplorerList/TanStackTableView/utils.ts

@@ -1,61 +0,0 @@
-import { cloneElement, isValidElement, ReactElement } from 'react';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-
-import { OrderedColumn } from './types';
-
-export const getColumnId = (column: OrderedColumn): string =>
-	String(column.key);
-
-/** Browser default root font size; TanStack column sizing uses px. */
-const REM_PX = 16;
-const MIN_WIDTH_OTHER_REM = 12;
-const MIN_WIDTH_BODY_REM = 40;
-
-/** When total column count is below this, body column min width is doubled (more horizontal space for few columns). */
-export const FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD = 4;
-
-/**
- * Minimum width (px) for TanStack column defs + colgroup.
- * Design: state/expand 32px; body min 40rem (doubled when fewer than
- * {@link FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD} total columns); other columns use rem→px (16px root).
- */
-export const getColumnMinWidthPx = (
-	column: OrderedColumn,
-	orderedColumns?: OrderedColumn[],
-): number => {
-	const key = String(column.key);
-	if (key === 'state-indicator' || key === 'expand') {
-		return 32;
-	}
-	if (key === 'body') {
-		const base = MIN_WIDTH_BODY_REM * REM_PX;
-		const fewColumns =
-			orderedColumns != null &&
-			orderedColumns.length < FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD;
-		return fewColumns ? base * 1.5 : base;
-	}
-	return MIN_WIDTH_OTHER_REM * REM_PX;
-};
-
-export const resolveColumnTypeRender = (
-	rendered: ColumnTypeRender<Record<string, unknown>>,
-): ReactElement | string | number | null => {
-	if (
-		rendered &&
-		typeof rendered === 'object' &&
-		'children' in rendered &&
-		isValidElement(rendered.children)
-	) {
-		const { children, props } = rendered as {
-			children: ReactElement;
-			props?: Record<string, unknown>;
-		};
-		return cloneElement(children, props || {});
-	}
-	if (rendered && typeof rendered === 'object' && isValidElement(rendered)) {
-		return rendered;
-	}
-	return typeof rendered === 'string' || typeof rendered === 'number'
-		? rendered
-		: null;
-};

frontend/src/container/LogsExplorerList/index.tsx

@@ -25,9 +25,9 @@ import { ILog } from 'types/api/logs/log';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import NoLogs from '../NoLogs/NoLogs';
+import InfinityTableView from './InfinityTableView';
 import { LogsExplorerListProps } from './LogsExplorerList.interfaces';
 import { InfinityWrapperStyled } from './styles';
-import TanStackTableView from './TanStackTableView';
 import {
 	convertKeysToColumnFields,
 	getEmptyLogsListConfig,
@@ -61,7 +61,7 @@ function LogsExplorerList({
 		handleCloseLogDetail,
 	} = useLogDetailHandlers();
 
-	const { options, config } = useOptionsMenu({
+	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator:
@@ -83,10 +83,6 @@ function LogsExplorerList({
 		() => convertKeysToColumnFields(options.selectColumns),
 		[options],
 	);
-	const removableColumnKeys = useMemo(
-		() => options.selectColumns.map((column) => String(column.name)),
-		[options.selectColumns],
-	);
 
 	const handleScrollToLog = useScrollToLog({
 		logs,
@@ -159,10 +155,9 @@ function LogsExplorerList({
 
 		if (options.format === 'table') {
 			return (
-				<TanStackTableView
+				<InfinityTableView
 					ref={ref}
 					isLoading={isLoading}
-					isFetching={isFetching}
 					tableViewProps={{
 						logs,
 						fields: selectedFields,
@@ -177,8 +172,6 @@ function LogsExplorerList({
 					onSetActiveLog={handleSetActiveLog}
 					onClearActiveLog={handleCloseLogDetail}
 					activeLog={activeLog}
-					onRemoveColumn={config.addColumn?.onRemove}
-					removableColumnKeys={removableColumnKeys}
 				/>
 			);
 		}
@@ -223,14 +216,11 @@ function LogsExplorerList({
 		logs,
 		onEndReached,
 		getItemContent,
-		isFetching,
 		selectedFields,
 		handleChangeSelectedView,
 		handleSetActiveLog,
 		handleCloseLogDetail,
 		activeLog,
-		config.addColumn?.onRemove,
-		removableColumnKeys,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {

frontend/src/container/LogsExplorerList/logsTableVirtuosoScrollbar.scss

@@ -1,38 +0,0 @@
-.logs-table-virtuoso-scroll {
-	scrollbar-width: thin;
-	scrollbar-color: var(--bg-slate-300) transparent;
-
-	&::-webkit-scrollbar {
-		width: 4px;
-		height: 4px;
-	}
-
-	&::-webkit-scrollbar-corner {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-slate-300);
-		border-radius: 9999px;
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-slate-200);
-	}
-}
-
-.lightMode .logs-table-virtuoso-scroll {
-	scrollbar-color: var(--bg-vanilla-300) transparent;
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-vanilla-300);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-vanilla-100);
-	}
-}

frontend/src/container/LogsExplorerList/styles.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const InfinityWrapperStyled = styled.div`
 	flex: 1;
+	height: 40rem !important;
 	display: flex;
 	height: 100%;
-	min-height: 0;
 `;

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -1,7 +1,6 @@
 .logs-explorer-views-container {
 	margin-bottom: 24px;
 	flex: 1;
-	min-height: 0;
 	display: flex;
 	flex-direction: column;
 
@@ -10,7 +9,6 @@
 		display: flex;
 		flex-direction: column;
 		flex: 1;
-		min-height: 0;
 		padding-bottom: 10px;
 
 		.views-tabs-container {
@@ -197,7 +195,6 @@
 
 		.logs-explorer-views-type-content {
 			flex: 1;
-			min-height: 0;
 			display: flex;
 			flex-direction: column;
 
@@ -213,32 +210,12 @@
 				}
 			}
 
-			.table-view-container {
-				flex: 1;
-				min-height: 0;
-				overflow-y: visible;
-			}
-
 			.time-series-view-container {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				min-height: 0;
-				overflow-y: visible;
-
 				.time-series-view-container-header {
 					display: flex;
 					justify-content: flex-start;
 					align-items: center;
 					padding: 12px;
-					flex-shrink: 0;
-				}
-
-				.time-series-view {
-					flex-shrink: 0;
-					height: 65vh;
-					min-height: 450px;
-					padding-bottom: 140px;
 				}
 			}
 		}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -499,18 +499,16 @@ function LogsExplorerViewsContainer({
 						</div>
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
-						<div className="table-view-container">
-							<LogsExplorerTable
-								data={
-									(data?.payload?.data?.newResult?.data?.result ||
-										data?.payload?.data?.result ||
-										[]) as QueryDataV3[]
-								}
-								isLoading={isLoading || isFetching}
-								isError={isError}
-								error={error as APIError}
-							/>
-						</div>
+						<LogsExplorerTable
+							data={
+								(data?.payload?.data?.newResult?.data?.result ||
+									data?.payload?.data?.result ||
+									[]) as QueryDataV3[]
+							}
+							isLoading={isLoading || isFetching}
+							isError={isError}
+							error={error as APIError}
+						/>
 					)}
 				</div>
 			</div>

frontend/src/pages/LogsExplorer/LogsExplorer.styles.scss

@@ -1,9 +1,6 @@
 .logs-module-page {
 	display: flex;
 	height: 100%;
-	min-height: 0;
-	overflow: hidden;
-
 	.log-quick-filter-left-section {
 		width: 0%;
 		flex-shrink: 0;
@@ -13,19 +10,13 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		min-height: 0;
-
 		.log-explorer-query-container {
 			display: flex;
 			flex-direction: column;
 			flex: 1;
-			min-height: 0;
-			overflow-y: auto;
-			overflow-x: hidden;
 
 			.logs-explorer-views {
 				flex: 1;
-				min-height: 0;
 				display: flex;
 				flex-direction: column;
 			}
@@ -35,18 +26,6 @@
 	&.filter-visible {
 		.log-quick-filter-left-section {
 			width: 260px;
-			height: 100%;
-			overflow: visible;
-			min-height: 0;
-			position: relative;
-			z-index: 2;
-			display: flex;
-			flex-direction: column;
-
-			.quick-filters-container {
-				flex: 1;
-				min-height: 0;
-			}
 		}
 
 		.log-module-right-section {

frontend/src/pages/LogsModulePage/LogsModulePage.styles.scss

@@ -1,14 +1,10 @@
 .logs-module-container {
 	flex: 1;
-	min-height: 0;
 	display: flex;
 	flex-direction: column;
 
 	.ant-tabs {
 		flex: 1;
-		min-height: 0;
-		display: flex;
-		flex-direction: column;
 	}
 
 	.ant-tabs-nav {
@@ -22,17 +18,14 @@
 
 	.ant-tabs-content-holder {
 		display: flex;
-		min-height: 0;
 
 		.ant-tabs-content {
 			flex: 1;
-			min-height: 0;
 			display: flex;
 			flex-direction: column;
 
 			.ant-tabs-tabpane {
 				flex: 1;
-				min-height: 0;
 				display: flex;
 				flex-direction: column;
 			}

frontend/yarn.lock

@@ -6017,19 +6017,26 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@tanstack/react-table@8.21.3", "@tanstack/react-table@^8.21.3":
+"@tanstack/react-table@8.20.6":
+  version "8.20.6"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.20.6.tgz#a1f3103327aa59aa621931f4087a7604a21054d0"
+  integrity sha512-w0jluT718MrOKthRcr2xsjqzx+oEM7B7s/XXyfs19ll++hlId3fjTm+B2zrR3ijpANpkzBAr15j1XGVOMxpggQ==
+  dependencies:
+    "@tanstack/table-core" "8.20.5"
+
+"@tanstack/react-table@^8.21.3":
   version "8.21.3"
   resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.21.3.tgz#2c38c747a5731c1a07174fda764b9c2b1fb5e91b"
   integrity sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==
   dependencies:
     "@tanstack/table-core" "8.21.3"
 
-"@tanstack/react-virtual@3.13.22":
-  version "3.13.22"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.13.22.tgz#9a5529dee4010f33272ae3b3e3728dee317b3b42"
-  integrity sha512-EaOrBBJLi3M0bTMQRjGkxLXRw7Gizwntoy5E2Q2UnSbML7Mo2a1P/Hfkw5tw9FLzK62bj34Jl6VNbQfRV6eJcA==
+"@tanstack/react-virtual@3.11.2":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.11.2.tgz#d6b9bd999c181f0a2edce270c87a2febead04322"
+  integrity sha512-OuFzMXPF4+xZgx8UzJha0AieuMihhhaWG0tCqpp6tDzlFwOmNBPYMuLOtMJ1Tr4pXLHmgjcWhG6RlknY2oNTdQ==
   dependencies:
-    "@tanstack/virtual-core" "3.13.22"
+    "@tanstack/virtual-core" "3.11.2"
 
 "@tanstack/react-virtual@^3.13.9":
   version "3.13.12"
@@ -6038,21 +6045,26 @@
   dependencies:
     "@tanstack/virtual-core" "3.13.12"
 
+"@tanstack/table-core@8.20.5":
+  version "8.20.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.20.5.tgz#3974f0b090bed11243d4107283824167a395cf1d"
+  integrity sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==
+
 "@tanstack/table-core@8.21.3":
   version "8.21.3"
   resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.21.3.tgz#2977727d8fc8dfa079112d9f4d4c019110f1732c"
   integrity sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==
 
+"@tanstack/virtual-core@3.11.2":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.11.2.tgz#00409e743ac4eea9afe5b7708594d5fcebb00212"
+  integrity sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==
+
 "@tanstack/virtual-core@3.13.12":
   version "3.13.12"
   resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz#1dff176df9cc8f93c78c5e46bcea11079b397578"
   integrity sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==
 
-"@tanstack/virtual-core@3.13.22":
-  version "3.13.22"
-  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.22.tgz#660a2cd048510125a4da898e5a659d53166f51af"
-  integrity sha512-isuUGKsc5TAPDoHSbWTbl1SCil54zOS2MiWz/9GCWHPUQOvNTQx8qJEWC7UWR0lShhbK0Lmkcf0SZYxvch7G3g==
-
 "@testing-library/dom@^8.5.0":
   version "8.20.0"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz"

pkg/prometheus/config.go

@@ -3,6 +3,7 @@ package prometheus
 import (
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 )
 
@@ -20,6 +21,9 @@ type Config struct {
 	//
 	// If not set, the prometheus default is used (currently 5m).
 	LookbackDelta time.Duration `mapstructure:"lookback_delta"`
+
+	// Timeout is the maximum time a query is allowed to run before being aborted.
+	Timeout time.Duration `mapstructure:"timeout"`
 }
 
 func NewConfigFactory() factory.ConfigFactory {
@@ -33,10 +37,14 @@ func newConfig() factory.Config {
 			Path:          "",
 			MaxConcurrent: 20,
 		},
+		Timeout: 2 * time.Minute,
 	}
 }
 
 func (c Config) Validate() error {
+	if c.Timeout <= 0 {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "prometheus::timeout must be greater than 0")
+	}
 	return nil
 }
 

pkg/prometheus/constants.go

@@ -1,3 +0,0 @@
-package prometheus
-
-const FingerprintAsPromLabelName = "fingerprint"

pkg/prometheus/engine.go

@@ -2,7 +2,6 @@ package prometheus
 
 import (
 	"log/slog"
-	"time"
 
 	"github.com/prometheus/prometheus/promql"
 )
@@ -21,7 +20,7 @@ func NewEngine(logger *slog.Logger, cfg Config) *Engine {
 		Logger:             logger,
 		Reg:                nil,
 		MaxSamples:         5_0000_000,
-		Timeout:            2 * time.Minute,
+		Timeout:            cfg.Timeout,
 		ActiveQueryTracker: activeQueryTracker,
 		LookbackDelta:      cfg.LookbackDelta,
 	})

pkg/prometheus/label.go

@@ -6,6 +6,8 @@ import (
 	"github.com/prometheus/prometheus/promql"
 )
 
+const FingerprintAsPromLabelName string = "fingerprint"
+
 func RemoveExtraLabels(res *promql.Result, labelsToRemove ...string) error {
 	if len(labelsToRemove) == 0 || res == nil {
 		return nil

pkg/querier/promql_query.go

@@ -36,6 +36,28 @@ var unquotedDottedNamePattern = regexp.MustCompile(`(?:^|[{,(\s])([a-zA-Z_][a-zA
 // This is a common mistake when migrating to UTF-8 syntax.
 var quotedMetricOutsideBracesPattern = regexp.MustCompile(`"([^"]+)"\s*\{`)
 
+// tryEnhancePromQLExecError attempts to convert a PromQL execution error into
+// a properly typed error. Returns nil if the error is not a recognized execution error.
+func tryEnhancePromQLExecError(execErr error) error {
+	var eqc promql.ErrQueryCanceled
+	var eqt promql.ErrQueryTimeout
+	var es promql.ErrStorage
+	switch {
+	case errors.As(execErr, &eqc):
+		return errors.Newf(errors.TypeCanceled, errors.CodeCanceled, "query canceled").WithAdditional(eqc.Error())
+	case errors.As(execErr, &eqt):
+		return errors.Newf(errors.TypeTimeout, errors.CodeTimeout, "query timed out").WithAdditional(eqt.Error())
+	case errors.Is(execErr, context.DeadlineExceeded):
+		return errors.Newf(errors.TypeTimeout, errors.CodeTimeout, "query timed out")
+	case errors.Is(execErr, context.Canceled):
+		return errors.Newf(errors.TypeCanceled, errors.CodeCanceled, "query canceled")
+	case errors.As(execErr, &es):
+		return errors.Newf(errors.TypeInternal, errors.CodeInternal, "query execution error: %v", execErr)
+	default:
+		return nil
+	}
+}
+
 // enhancePromQLError adds helpful context to PromQL parse errors,
 // particularly for UTF-8 syntax migration issues where metric and label
 // names containing dots need to be quoted.
@@ -213,27 +235,20 @@ func (q *promqlQuery) Execute(ctx context.Context) (*qbv5.Result, error) {
 		time.Unix(0, end),
 		q.query.Step.Duration,
 	)
-
 	if err != nil {
+		// NewRangeQuery can fail with execution errors (e.g. context deadline exceeded)
+		// during the query queue/scheduling stage, not just parse errors.
+		if err := tryEnhancePromQLExecError(err); err != nil {
+			return nil, err
+		}
+
 		return nil, enhancePromQLError(query, err)
 	}
 
 	res := qry.Exec(ctx)
 	if res.Err != nil {
-		var eqc promql.ErrQueryCanceled
-		var eqt promql.ErrQueryTimeout
-		var es promql.ErrStorage
-		switch {
-		case errors.As(res.Err, &eqc):
-			return nil, errors.Newf(errors.TypeCanceled, errors.CodeCanceled, "query canceled")
-		case errors.As(res.Err, &eqt):
-			return nil, errors.Newf(errors.TypeTimeout, errors.CodeTimeout, "query timeout")
-		case errors.As(res.Err, &es):
-			return nil, errors.Newf(errors.TypeInternal, errors.CodeInternal, "query execution error: %v", res.Err)
-		}
-
-		if errors.Is(res.Err, context.Canceled) {
-			return nil, errors.Newf(errors.TypeCanceled, errors.CodeCanceled, "query canceled")
+		if err := tryEnhancePromQLExecError(res.Err); err != nil {
+			return nil, err
 		}
 
 		return nil, errors.Newf(errors.TypeInternal, errors.CodeInternal, "query execution error: %v", res.Err)

pkg/query-service/app/querier/querier_test.go

@@ -1407,7 +1407,7 @@ func Test_querier_Traces_runWindowBasedListQueryDesc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -1633,7 +1633,7 @@ func Test_querier_Traces_runWindowBasedListQueryAsc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -1934,7 +1934,7 @@ func Test_querier_Logs_runWindowBasedListQueryDesc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -2162,7 +2162,7 @@ func Test_querier_Logs_runWindowBasedListQueryAsc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,

pkg/query-service/app/querier/v2/querier_test.go

@@ -1459,7 +1459,7 @@ func Test_querier_Traces_runWindowBasedListQueryDesc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -1685,7 +1685,7 @@ func Test_querier_Traces_runWindowBasedListQueryAsc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -1985,7 +1985,7 @@ func Test_querier_Logs_runWindowBasedListQueryDesc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -2213,7 +2213,7 @@ func Test_querier_Logs_runWindowBasedListQueryAsc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,

pkg/query-service/app/traces/tracedetail/waterfall.go

@@ -67,7 +67,7 @@ func getPathFromRootToSelectedSpanId(node *model.Span, selectedSpanId string, un
 	spansFromRootToNode := []string{}
 
 	if node.SpanID == selectedSpanId {
-		if isSelectedSpanIDUnCollapsed {
+		if isSelectedSpanIDUnCollapsed && !slices.Contains(uncollapsedSpans, node.SpanID) {
 			spansFromRootToNode = append(spansFromRootToNode, node.SpanID)
 		}
 		return true, spansFromRootToNode
@@ -88,7 +88,15 @@ func getPathFromRootToSelectedSpanId(node *model.Span, selectedSpanId string, un
 	return isPresentInSubtreeForTheNode, spansFromRootToNode
 }
 
-func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, isPartOfPreOrder bool, hasSibling bool, selectedSpanId string) []*model.Span {
+// traverseOpts holds the traversal configuration that remains constant
+// throughout the recursion. Per-call state (level, isPartOfPreOrder, etc.)
+// is passed as direct arguments.
+type traverseOpts struct {
+	uncollapsedSpans []string
+	selectedSpanID   string
+}
+
+func traverseTrace(span *model.Span, opts traverseOpts, level uint64, isPartOfPreOrder bool, hasSibling bool) []*model.Span {
 	preOrderTraversal := []*model.Span{}
 
 	// sort the children to maintain the order across requests
@@ -126,8 +134,9 @@ func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, is
 		preOrderTraversal = append(preOrderTraversal, &nodeWithoutChildren)
 	}
 
+	isAlreadyUncollapsed := slices.Contains(opts.uncollapsedSpans, span.SpanID)
 	for index, child := range span.Children {
-		_childTraversal := traverseTrace(child, uncollapsedSpans, level+1, isPartOfPreOrder && slices.Contains(uncollapsedSpans, span.SpanID), index != (len(span.Children)-1), selectedSpanId)
+		_childTraversal := traverseTrace(child, opts, level+1, isPartOfPreOrder && isAlreadyUncollapsed, index != (len(span.Children)-1))
 		preOrderTraversal = append(preOrderTraversal, _childTraversal...)
 		nodeWithoutChildren.SubTreeNodeCount += child.SubTreeNodeCount + 1
 		span.SubTreeNodeCount += child.SubTreeNodeCount + 1
@@ -168,7 +177,11 @@ func GetSelectedSpans(uncollapsedSpans []string, selectedSpanID string, traceRoo
 			_, spansFromRootToNode := getPathFromRootToSelectedSpanId(rootNode, selectedSpanID, updatedUncollapsedSpans, isSelectedSpanIDUnCollapsed)
 			updatedUncollapsedSpans = append(updatedUncollapsedSpans, spansFromRootToNode...)
 
-			_preOrderTraversal := traverseTrace(rootNode, updatedUncollapsedSpans, 0, true, false, selectedSpanID)
+			opts := traverseOpts{
+				uncollapsedSpans: updatedUncollapsedSpans,
+				selectedSpanID:   selectedSpanID,
+			}
+			_preOrderTraversal := traverseTrace(rootNode, opts, 0, true, false)
 			_selectedSpanIndex := findIndexForSelectedSpanFromPreOrder(_preOrderTraversal, selectedSpanID)
 
 			if _selectedSpanIndex != -1 {

pkg/query-service/app/traces/tracedetail/waterfall_test.go

@@ -0,0 +1,370 @@
+// Package tracedetail tests — waterfall
+//
+// # Background
+//
+// The waterfall view renders a trace as a scrollable list of spans in
+// pre-order (parent before children, siblings left-to-right). Because a trace
+// can have thousands of spans, only a window of ~500 is returned per request.
+// The window is centred on the selected span.
+//
+// # Key concepts
+//
+// uncollapsedSpans
+//
+//	The set of span IDs the user has manually expanded in the UI.
+//	Only the direct children of an uncollapsed span are included in the
+//	output; grandchildren stay hidden until their parent is also uncollapsed.
+//	When multiple spans are uncollapsed their children are all visible at once.
+//
+// selectedSpanID
+//
+//	The span currently focused — set when the user clicks a span in the
+//	waterfall or selects one from the flamegraph.  The output window is always
+//	centred on this span.  The path from the trace root down to the selected
+//	span is automatically uncollapsed so ancestors are visible even if they are
+//	not in uncollapsedSpans.
+//
+// isSelectedSpanIDUnCollapsed
+//
+//	Controls whether the selected span's own children are shown:
+//	  true  — user expanded the span (click-to-open in waterfall or flamegraph);
+//	          direct children of the selected span are included.
+//	  false — user selected without expanding;
+//	          the span is visible but its children remain hidden.
+//
+// traceRoots
+//
+//	Root spans of the trace — spans with no parent in the current dataset.
+//	Normally one, but multiple roots are common when upstream services are
+//	not instrumented or their spans were not sampled/exported.
+
+package tracedetail
+
+import (
+	"fmt"
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/query-service/model"
+	"github.com/stretchr/testify/assert"
+)
+
+// Pre-order traversal is preserved: parent before children, siblings left-to-right.
+func TestGetSelectedSpans_PreOrderTraversal(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("child1", "svc", mkSpan("grandchild", "svc")),
+		mkSpan("child2", "svc"),
+	)
+	spanMap := buildSpanMap(root)
+	spans, _, _, _ := GetSelectedSpans([]string{"root", "child1"}, "root", []*model.Span{root}, spanMap, false)
+
+	assert.Equal(t, []string{"root", "child1", "grandchild", "child2"}, spanIDs(spans))
+}
+
+// Multiple roots: both trees are flattened into a single pre-order list with
+// root1's subtree before root2's. Service/entry-point come from the first root.
+//
+//	root1 svc-a          ← selected
+//	  └─ child1
+//	root2 svc-b
+//	  └─ child2
+//
+// Expected output order: root1 → child1 → root2 → child2
+func TestGetSelectedSpans_MultipleRoots(t *testing.T) {
+	root1 := mkSpan("root1", "svc-a", mkSpan("child1", "svc-a"))
+	root2 := mkSpan("root2", "svc-b", mkSpan("child2", "svc-b"))
+	spanMap := buildSpanMap(root1, root2)
+
+	spans, _, svcName, entryPoint := GetSelectedSpans([]string{"root1", "root2"}, "root1", []*model.Span{root1, root2}, spanMap, false)
+
+	assert.Equal(t, []string{"root1", "child1", "root2", "child2"}, spanIDs(spans), "root1 subtree must precede root2 subtree")
+	assert.Equal(t, "svc-a", svcName, "metadata comes from first root")
+	assert.Equal(t, "root1-op", entryPoint, "metadata comes from first root")
+}
+
+// isSelectedSpanIDUnCollapsed=true opens only the selected span's direct children,
+// not deeper descendants.
+//
+//	root → selected (expanded)
+//	          ├─ child1 ✓
+//	          │    └─ grandchild ✗  (only one level opened)
+//	          └─ child2 ✓
+func TestGetSelectedSpans_ExpandedSelectedSpan(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("selected", "svc",
+			mkSpan("child1", "svc", mkSpan("grandchild", "svc")),
+			mkSpan("child2", "svc"),
+		),
+	)
+	spanMap := buildSpanMap(root)
+	spans, _, _, _ := GetSelectedSpans([]string{}, "selected", []*model.Span{root}, spanMap, true)
+
+	// root and selected are on the auto-uncollapsed path; child1/child2 are direct
+	// children of the expanded selected span; grandchild stays hidden.
+	assert.Equal(t, []string{"root", "selected", "child1", "child2"}, spanIDs(spans))
+}
+
+// Multiple spans uncollapsed simultaneously: children of all uncollapsed spans
+// are visible at once.
+//
+//	root
+//	  ├─ childA (uncollapsed) → grandchildA ✓
+//	  └─ childB (uncollapsed) → grandchildB ✓
+func TestGetSelectedSpans_MultipleUncollapsed(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("childA", "svc", mkSpan("grandchildA", "svc")),
+		mkSpan("childB", "svc", mkSpan("grandchildB", "svc")),
+	)
+	spanMap := buildSpanMap(root)
+	spans, _, _, _ := GetSelectedSpans([]string{"root", "childA", "childB"}, "root", []*model.Span{root}, spanMap, false)
+
+	assert.Equal(t, []string{"root", "childA", "grandchildA", "childB", "grandchildB"}, spanIDs(spans))
+}
+
+// The selected span is always present in the output window.
+func TestGetSelectedSpans_SelectedSpanAlwaysInWindow(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("A", "svc",
+			mkSpan("B", "svc",
+				mkSpan("selected", "svc"),
+			),
+		),
+	)
+	spanMap := buildSpanMap(root)
+	spans, _, _, _ := GetSelectedSpans([]string{}, "selected", []*model.Span{root}, spanMap, false)
+
+	assert.Equal(t, []string{"root", "A", "B", "selected"}, spanIDs(spans))
+}
+
+// Collapsing a span with other uncollapsed spans
+//
+// root
+// ├─ childA  (previously expanded — in uncollapsedSpans)
+// │    ├─ grandchild1 ✓
+// │    │    └─ greatGrandchild ✗  (grandchild1 not in uncollapsedSpans)
+// │    └─ grandchild2 ✓
+// └─ childB                        ← selected (not expanded)
+func TestGetSelectedSpans_ManualUncollapse(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("childA", "svc",
+			mkSpan("grandchild1", "svc", mkSpan("greatGrandchild", "svc")),
+			mkSpan("grandchild2", "svc"),
+		),
+		mkSpan("childB", "svc"),
+	)
+	spanMap := buildSpanMap(root)
+	// childA was expanded in a previous interaction; childB is now selected without expanding
+	spans, _, _, _ := GetSelectedSpans([]string{"childA"}, "childB", []*model.Span{root}, spanMap, false)
+
+	// path to childB auto-uncollpases root → childA and childB appear; childA is in
+	// uncollapsedSpans so its children appear; greatGrandchild stays hidden.
+	assert.Equal(t, []string{"root", "childA", "grandchild1", "grandchild2", "childB"}, spanIDs(spans))
+}
+
+// A collapsed span hides all children.
+func TestGetSelectedSpans_CollapsedSpan(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("child1", "svc"),
+		mkSpan("child2", "svc"),
+	)
+	spanMap := buildSpanMap(root)
+	spans, _, _, _ := GetSelectedSpans([]string{}, "root", []*model.Span{root}, spanMap, false)
+
+	assert.Equal(t, []string{"root"}, spanIDs(spans))
+}
+
+// Selecting a span auto-uncollpases the path from root to that span so it is visible.
+//
+//	root → parent → selected
+func TestGetSelectedSpans_PathToSelectedIsUncollapsed(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("parent", "svc",
+			mkSpan("selected", "svc"),
+		),
+	)
+	spanMap := buildSpanMap(root)
+	// no manually uncollapsed spans — path should still be opened
+	spans, _, _, _ := GetSelectedSpans([]string{}, "selected", []*model.Span{root}, spanMap, false)
+
+	assert.Equal(t, []string{"root", "parent", "selected"}, spanIDs(spans))
+}
+
+// The path-to-selected spans are returned in updatedUncollapsedSpans.
+func TestGetSelectedSpans_PathReturnedInUncollapsed(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("parent", "svc",
+			mkSpan("selected", "svc"),
+		),
+	)
+	spanMap := buildSpanMap(root)
+	spans, uncollapsed, _, _ := GetSelectedSpans([]string{}, "selected", []*model.Span{root}, spanMap, false)
+
+	assert.Equal(t, []string{"root", "parent"}, uncollapsed)
+	assert.Equal(t, []string{"root", "parent", "selected"}, spanIDs(spans))
+}
+
+// Siblings of ancestors are rendered as collapsed nodes but their subtrees
+// must NOT be expanded.
+//
+//	root
+//	  ├─ unrelated → unrelated-child (✗)
+//	  └─ parent → selected
+func TestGetSelectedSpans_SiblingsNotExpanded(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("unrelated", "svc", mkSpan("unrelated-child", "svc")),
+		mkSpan("parent", "svc",
+			mkSpan("selected", "svc"),
+		),
+	)
+	spanMap := buildSpanMap(root)
+	spans, uncollapsed, _, _ := GetSelectedSpans([]string{}, "selected", []*model.Span{root}, spanMap, false)
+
+	// children of root sort alphabetically: parent < unrelated; unrelated-child stays hidden
+	assert.Equal(t, []string{"root", "parent", "selected", "unrelated"}, spanIDs(spans))
+	// only the path nodes are tracked as uncollapsed — unrelated is not
+	assert.Equal(t, []string{"root", "parent"}, uncollapsed)
+}
+
+// An unknown selectedSpanID must not panic; returns a window from index 0.
+func TestGetSelectedSpans_UnknownSelectedSpan(t *testing.T) {
+	root := mkSpan("root", "svc", mkSpan("child", "svc"))
+	spanMap := buildSpanMap(root)
+	spans, _, _, _ := GetSelectedSpans([]string{}, "nonexistent", []*model.Span{root}, spanMap, false)
+	assert.Equal(t, []string{"root"}, spanIDs(spans))
+}
+
+// Test to check if Level, HasChildren, HasSiblings, and SubTreeNodeCount are populated correctly.
+//
+//	root          level=0, hasChildren=true,  hasSiblings=false, subTree=4
+//	  child1      level=1, hasChildren=true,  hasSiblings=true,  subTree=2
+//	    grandchild level=2, hasChildren=false, hasSiblings=false, subTree=1
+//	  child2      level=1, hasChildren=false, hasSiblings=false, subTree=1
+func TestGetSelectedSpans_SpanMetadata(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("child1", "svc", mkSpan("grandchild", "svc")),
+		mkSpan("child2", "svc"),
+	)
+	spanMap := buildSpanMap(root)
+	spans, _, _, _ := GetSelectedSpans([]string{"root", "child1"}, "root", []*model.Span{root}, spanMap, false)
+
+	byID := map[string]*model.Span{}
+	for _, s := range spans {
+		byID[s.SpanID] = s
+	}
+
+	assert.Equal(t, uint64(0), byID["root"].Level)
+	assert.Equal(t, uint64(1), byID["child1"].Level)
+	assert.Equal(t, uint64(1), byID["child2"].Level)
+	assert.Equal(t, uint64(2), byID["grandchild"].Level)
+
+	assert.True(t, byID["root"].HasChildren)
+	assert.True(t, byID["child1"].HasChildren)
+	assert.False(t, byID["child2"].HasChildren)
+	assert.False(t, byID["grandchild"].HasChildren)
+
+	assert.False(t, byID["root"].HasSiblings, "root has no siblings")
+	assert.True(t, byID["child1"].HasSiblings, "child1 has sibling child2")
+	assert.False(t, byID["child2"].HasSiblings, "child2 is the last child")
+	assert.False(t, byID["grandchild"].HasSiblings, "grandchild has no siblings")
+
+	assert.Equal(t, uint64(4), byID["root"].SubTreeNodeCount)
+	assert.Equal(t, uint64(2), byID["child1"].SubTreeNodeCount)
+	assert.Equal(t, uint64(1), byID["grandchild"].SubTreeNodeCount)
+	assert.Equal(t, uint64(1), byID["child2"].SubTreeNodeCount)
+}
+
+// If the selected span is already in uncollapsedSpans AND isSelectedSpanIDUnCollapsed=true,
+func TestGetSelectedSpans_DuplicateInUncollapsed(t *testing.T) {
+	root := mkSpan("root", "svc",
+		mkSpan("selected", "svc", mkSpan("child", "svc")),
+	)
+	spanMap := buildSpanMap(root)
+	_, uncollapsed, _, _ := GetSelectedSpans(
+		[]string{"selected"}, // already present
+		"selected",
+		[]*model.Span{root}, spanMap,
+		true,
+	)
+
+	count := 0
+	for _, id := range uncollapsed {
+		if id == "selected" {
+			count++
+		}
+	}
+	assert.Equal(t, 1, count, "should appear once")
+}
+
+// makeChain builds a linear trace: span0 → span1 → … → span(n-1).
+// All span IDs are "span0", "span1", … so the caller can reference them by index.
+func makeChain(n int) (*model.Span, map[string]*model.Span, []string) {
+	spans := make([]*model.Span, n)
+	for i := n - 1; i >= 0; i-- {
+		if i == n-1 {
+			spans[i] = mkSpan(fmt.Sprintf("span%d", i), "svc")
+		} else {
+			spans[i] = mkSpan(fmt.Sprintf("span%d", i), "svc", spans[i+1])
+		}
+	}
+	uncollapsed := make([]string, n)
+	for i := range spans {
+		uncollapsed[i] = fmt.Sprintf("span%d", i)
+	}
+	return spans[0], buildSpanMap(spans[0]), uncollapsed
+}
+
+// The selected span is centred: 200 spans before it, 300 after (0.4 / 0.6 split).
+func TestGetSelectedSpans_WindowCentredOnSelected(t *testing.T) {
+	root, spanMap, uncollapsed := makeChain(600)
+	spans, _, _, _ := GetSelectedSpans(uncollapsed, "span300", []*model.Span{root}, spanMap, false)
+
+	assert.Equal(t, 500, len(spans), "window should be 500 spans")
+	// window is [100, 600): span300 lands at position 200 (300 - 100)
+	assert.Equal(t, "span100", spans[0].SpanID, "window starts 200 before selected")
+	assert.Equal(t, "span300", spans[200].SpanID, "selected span at position 200 in window")
+	assert.Equal(t, "span599", spans[499].SpanID, "window ends 300 after selected")
+}
+
+// When the selected span is near the start, the window shifts right so no
+// negative index is used — the result is still 500 spans.
+func TestGetSelectedSpans_WindowShiftsAtStart(t *testing.T) {
+	root, spanMap, uncollapsed := makeChain(600)
+	spans, _, _, _ := GetSelectedSpans(uncollapsed, "span10", []*model.Span{root}, spanMap, false)
+
+	assert.Equal(t, 500, len(spans))
+	assert.Equal(t, "span0", spans[0].SpanID, "window clamped to start of trace")
+	assert.Equal(t, "span10", spans[10].SpanID, "selected span still in window")
+}
+
+func mkSpan(id, service string, children ...*model.Span) *model.Span {
+	return &model.Span{
+		SpanID:      id,
+		ServiceName: service,
+		Name:        id + "-op",
+		Children:    children,
+	}
+}
+
+// spanIDs returns SpanIDs in order.
+func spanIDs(spans []*model.Span) []string {
+	ids := make([]string, len(spans))
+	for i, s := range spans {
+		ids[i] = s.SpanID
+	}
+	return ids
+}
+
+// buildSpanMap indexes every span in a set of trees by SpanID.
+func buildSpanMap(roots ...*model.Span) map[string]*model.Span {
+	m := map[string]*model.Span{}
+	var walk func(*model.Span)
+	walk = func(s *model.Span) {
+		m[s.SpanID] = s
+		for _, c := range s.Children {
+			walk(c)
+		}
+	}
+	for _, r := range roots {
+		walk(r)
+	}
+	return m
+}

pkg/query-service/rules/base_rule_test.go

@@ -698,7 +698,7 @@ func TestBaseRule_FilterNewSeries(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), settings, prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), settings, prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Second,
 				nil,

pkg/query-service/rules/manager_test.go

@@ -253,7 +253,7 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 						WillReturnRows(samplesRows)
 
 					// Create Prometheus provider for this test
-					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, store)
+					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, store)
 				},
 				ManagerOptionsHook: func(opts *ManagerOptions) {
 					// Set Prometheus provider for PromQL queries

pkg/query-service/rules/managertestfactory.go

@@ -99,7 +99,7 @@ func NewTestManager(t *testing.T, testOpts *TestManagerOptions) *Manager {
 
 	options := clickhouseReader.NewOptions("", "", "archiveNamespace")
 	providerSettings := instrumentationtest.New().ToProviderSettings()
-	prometheus := prometheustest.New(context.Background(), providerSettings, prometheus.Config{}, telemetryStore)
+	prometheus := prometheustest.New(context.Background(), providerSettings, prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore)
 	reader := clickhouseReader.NewReader(
 		instrumentationtest.New().Logger(),
 		nil,

pkg/query-service/rules/prom_rule_test.go

@@ -940,7 +940,7 @@ func TestPromRuleUnitCombinations(t *testing.T) {
 			).
 			WillReturnRows(samplesRows)
 
-		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore)
+		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore)
 
 		postableRule.RuleCondition.CompareOp = ruletypes.CompareOp(c.compareOp)
 		postableRule.RuleCondition.MatchType = ruletypes.MatchType(c.matchType)
@@ -1061,7 +1061,7 @@ func _Enable_this_after_9146_issue_fix_is_merged_TestPromRuleNoData(t *testing.T
 			WithArgs("test_metric", "__name__", "test_metric").
 			WillReturnRows(fingerprintRows)
 
-		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore)
+		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore)
 
 		var target float64 = 0
 		postableRule.RuleCondition.Thresholds = &ruletypes.RuleThresholdData{
@@ -1281,7 +1281,7 @@ func TestMultipleThresholdPromRule(t *testing.T) {
 			).
 			WillReturnRows(samplesRows)
 
-		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore)
+		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore)
 
 		postableRule.RuleCondition.CompareOp = ruletypes.CompareOp(c.compareOp)
 		postableRule.RuleCondition.MatchType = ruletypes.MatchType(c.matchType)
@@ -1441,7 +1441,7 @@ func TestPromRule_NoData(t *testing.T) {
 			promProvider := prometheustest.New(
 				context.Background(),
 				instrumentationtest.New().ToProviderSettings(),
-				prometheus.Config{},
+				prometheus.Config{Timeout: 2 * time.Minute},
 				telemetryStore,
 			)
 			defer func() {
@@ -1590,7 +1590,7 @@ func TestPromRule_NoData_AbsentFor(t *testing.T) {
 			promProvider := prometheustest.New(
 				context.Background(),
 				instrumentationtest.New().ToProviderSettings(),
-				prometheus.Config{},
+				prometheus.Config{Timeout: 2 * time.Minute},
 				telemetryStore,
 			)
 			defer func() {
@@ -1748,7 +1748,7 @@ func TestPromRuleEval_RequireMinPoints(t *testing.T) {
 			promProvider := prometheustest.New(
 				context.Background(),
 				instrumentationtest.New().ToProviderSettings(),
-				prometheus.Config{LookbackDelta: lookBackDelta},
+				prometheus.Config{Timeout: 2 * time.Minute, LookbackDelta: lookBackDelta},
 				telemetryStore,
 			)
 			defer func() {

pkg/query-service/rules/threshold_rule_test.go

@@ -779,7 +779,7 @@ func TestThresholdRuleUnitCombinations(t *testing.T) {
 			},
 		)
 		require.NoError(t, err)
-		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore), "", time.Duration(time.Second), nil, readerCache, options)
+		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore), "", time.Duration(time.Second), nil, readerCache, options)
 		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, reader, nil, logger)
 		rule.TemporalityMap = map[string]map[v3.Temporality]bool{
 			"signoz_calls_total": {
@@ -894,7 +894,7 @@ func TestThresholdRuleNoData(t *testing.T) {
 		)
 		assert.NoError(t, err)
 		options := clickhouseReader.NewOptions("", "", "archiveNamespace")
-		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore), "", time.Duration(time.Second), nil, readerCache, options)
+		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore), "", time.Duration(time.Second), nil, readerCache, options)
 
 		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, reader, nil, logger)
 		rule.TemporalityMap = map[string]map[v3.Temporality]bool{
@@ -1014,7 +1014,7 @@ func TestThresholdRuleTracesLink(t *testing.T) {
 		}
 
 		options := clickhouseReader.NewOptions("", "", "archiveNamespace")
-		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore), "", time.Duration(time.Second), nil, nil, options)
+		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore), "", time.Duration(time.Second), nil, nil, options)
 
 		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, reader, nil, logger)
 		rule.TemporalityMap = map[string]map[v3.Temporality]bool{
@@ -1151,7 +1151,7 @@ func TestThresholdRuleLogsLink(t *testing.T) {
 		}
 
 		options := clickhouseReader.NewOptions("", "", "archiveNamespace")
-		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore), "", time.Duration(time.Second), nil, nil, options)
+		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore), "", time.Duration(time.Second), nil, nil, options)
 
 		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, reader, nil, logger)
 		rule.TemporalityMap = map[string]map[v3.Temporality]bool{
@@ -1418,7 +1418,7 @@ func TestMultipleThresholdRule(t *testing.T) {
 			},
 		)
 		require.NoError(t, err)
-		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore), "", time.Second, nil, readerCache, options)
+		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore), "", time.Second, nil, readerCache, options)
 		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, reader, nil, logger)
 		rule.TemporalityMap = map[string]map[v3.Temporality]bool{
 			"signoz_calls_total": {
@@ -2220,7 +2220,7 @@ func TestThresholdEval_RequireMinPoints(t *testing.T) {
 			)
 			require.NoError(t, err)
 
-			prometheusProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore)
+			prometheusProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore)
 			reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheusProvider, "", time.Second, nil, readerCache, options)
 
 			rule, err := NewThresholdRule("some-id", valuer.GenerateUUID(), &postableRule, reader, nil, logger)