feat: increase limit

* fix: add missing filtering for ip address for scalar data

In domain listing api for external api monitoring,
we have option to filter out the IP address but
it only handles timeseries and raw type data while
domain list handler returns scalar data.

* fix: switch to new derived attributes for ip filtering

---------

Co-authored-by: Nityananda Gohain <nityanandagohain@gmail.com>

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.113.0
+    image: signoz/signoz:v0.112.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.1
+    image: signoz/signoz-otel-collector:v0.142.1
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.1
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.113.0
+    image: signoz/signoz:v0.112.1
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.1
+    image: signoz/signoz-otel-collector:v0.142.1
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.1
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/otel-collector-config.yaml

@@ -82,12 +82,6 @@ exporters:
     timeout: 45s
     sending_queue:
       enabled: false
-  metadataexporter:
-    cache:
-      provider: in_memory
-    dsn: tcp://clickhouse:9000/signoz_metadata
-    enabled: true
-    timeout: 45s
 service:
   telemetry:
     logs:
@@ -99,19 +93,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, metadataexporter, signozmeter]
+      exporters: [clickhousetraces, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
+      exporters: [clickhouselogsexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.113.0}
+    image: signoz/signoz:${VERSION:-v0.112.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.1}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.113.0}
+    image: signoz/signoz:${VERSION:-v0.112.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.1}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/otel-collector-config.yaml

@@ -82,12 +82,6 @@ exporters:
     timeout: 45s
     sending_queue:
       enabled: false
-  metadataexporter:
-    cache:
-      provider: in_memory
-    dsn: tcp://clickhouse:9000/signoz_metadata
-    enabled: true
-    timeout: 45s
 service:
   telemetry:
     logs:
@@ -99,19 +93,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, metadataexporter, signozmeter]
+      exporters: [clickhousetraces, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
+      exporters: [clickhouselogsexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

frontend/src/AppRoutes/pageComponents.ts

@@ -308,15 +308,3 @@ export const PublicDashboardPage = Loadable(
 			/* webpackChunkName: "Public Dashboard Page" */ 'pages/PublicDashboard'
 		),
 );
-
-export const AlertTypeSelectionPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "Alert Type Selection Page" */ 'pages/AlertTypeSelection'
-		),
-);
-
-export const MeterExplorerPage = Loadable(
-	() =>
-		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),
-);

frontend/src/AppRoutes/routes.ts

@@ -1,10 +1,12 @@
 import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
+import AlertTypeSelectionPage from 'pages/AlertTypeSelection';
+import MessagingQueues from 'pages/MessagingQueues';
+import MeterExplorer from 'pages/MeterExplorer';
 
 import {
 	AlertHistory,
 	AlertOverview,
-	AlertTypeSelectionPage,
 	AllAlertChannels,
 	AllErrors,
 	ApiMonitoring,
@@ -27,8 +29,6 @@ import {
 	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
-	MessagingQueuesMainPage,
-	MeterExplorerPage,
 	MetricsExplorer,
 	OldLogsExplorer,
 	Onboarding,
@@ -399,28 +399,28 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
@@ -463,21 +463,21 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.METER,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER_VIEWS,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER_EXPLORER_VIEWS',
 		isPrivate: true,
 	},

frontend/src/components/LogDetail/index.tsx

@@ -86,13 +86,8 @@ function LogDetailInner({
 		const handleClickOutside = (e: MouseEvent): void => {
 			const target = e.target as HTMLElement;
 
-			// Don't close if clicking on drawer content, overlays, or portal elements
-			if (
-				target.closest('[data-log-detail-ignore="true"]') ||
-				target.closest('.cm-tooltip-autocomplete') ||
-				target.closest('.drawer-popover') ||
-				target.closest('.query-status-popover')
-			) {
+			// Don't close if clicking on explicitly ignored regions
+			if (target.closest('[data-log-detail-ignore="true"]')) {
 				return;
 			}
 
@@ -405,11 +400,7 @@ function LogDetailInner({
 			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
 				<div className="log-detail-drawer__log">
 					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-					<Tooltip
-						title={removeEscapeCharacters(log?.body)}
-						placement="left"
-						mouseLeaveDelay={0}
-					>
+					<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
 						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
 					</Tooltip>
 
@@ -475,7 +466,6 @@ function LogDetailInner({
 								title="Show Filters"
 								placement="topLeft"
 								aria-label="Show Filters"
-								mouseLeaveDelay={0}
 							>
 								<Button
 									className="action-btn"
@@ -491,7 +481,6 @@ function LogDetailInner({
 							aria-label={
 								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
 							}
-							mouseLeaveDelay={0}
 						>
 							<Button
 								className="action-btn"

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -27,11 +27,7 @@ function AddToQueryHOC({
 	return (
 		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
 		<div className={cx('addToQueryContainer', fontSize)} onClick={handleQueryAdd}>
-			<Popover
-				overlayClassName="drawer-popover"
-				placement="top"
-				content={popOverContent}
-			>
+			<Popover placement="top" content={popOverContent}>
 				{children}
 			</Popover>
 		</div>

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -32,7 +32,6 @@ function CopyClipboardHOC({
 		<span onClick={onClick} role="presentation" tabIndex={-1}>
 			<Popover
 				placement="top"
-				overlayClassName="drawer-popover"
 				content={<span style={{ fontSize: '0.9rem' }}>{tooltipText}</span>}
 			>
 				{children}

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

@@ -21,7 +21,7 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
-	maxWidth: '90rem',
+	maxWidth: '60rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -1328,10 +1328,7 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
-				<Tooltip
-					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
-					placement="left"
-				>
+				<Tooltip title={getTooltipContent()} placement="left">
 					<a
 						href="https://signoz.io/docs/userguide/search-syntax/"
 						target="_blank"

frontend/src/components/TimelineV2/TimelineV2.tsx

@@ -14,10 +14,16 @@ interface ITimelineV2Props {
 	startTimestamp: number;
 	endTimestamp: number;
 	timelineHeight: number;
+	offsetTimestamp: number;
 }
 
 function TimelineV2(props: ITimelineV2Props): JSX.Element {
-	const { startTimestamp, endTimestamp, timelineHeight } = props;
+	const {
+		startTimestamp,
+		endTimestamp,
+		timelineHeight,
+		offsetTimestamp,
+	} = props;
 	const [intervals, setIntervals] = useState<Interval[]>([]);
 	const [ref, { width }] = useMeasure<HTMLDivElement>();
 	const isDarkMode = useIsDarkMode();
@@ -30,8 +36,10 @@ function TimelineV2(props: ITimelineV2Props): JSX.Element {
 
 		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
 		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		setIntervals(getIntervals(intervalisedSpread, spread));
-	}, [startTimestamp, endTimestamp, width]);
+		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
+
+		setIntervals(intervals);
+	}, [startTimestamp, endTimestamp, width, offsetTimestamp]);
 
 	if (endTimestamp < startTimestamp) {
 		console.error(

frontend/src/components/TimelineV2/utils.ts

@@ -64,6 +64,71 @@ export const resolveTimeFromInterval = (
 export function getIntervals(
 	intervalSpread: number,
 	baseSpread: number,
+	offsetTimestamp: number, // ms offset from trace start (e.g. viewStart - traceStart)
+): Interval[] {
+	const integerPartString = intervalSpread.toString().split('.')[0];
+	const integerPartLength = integerPartString.length;
+
+	const intervalSpreadNormalized =
+		intervalSpread < 1.0
+			? intervalSpread
+			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
+			  10 ** (integerPartLength - 1);
+
+	let intervalUnit = INTERVAL_UNITS[0];
+	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
+		const standardInterval = INTERVAL_UNITS[idx];
+		if (intervalSpread * standardInterval.multiplier >= 1) {
+			intervalUnit = INTERVAL_UNITS[idx];
+			break;
+		}
+	}
+
+	const intervals: Interval[] = [
+		{
+			// ✅ start label should reflect window start offset (relative to trace start)
+			label: `${toFixed(
+				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
+				2,
+			)}${intervalUnit.name}`,
+			percentage: 0,
+		},
+	];
+
+	let tempBaseSpread = baseSpread;
+	let elapsedIntervals = 0;
+
+	while (tempBaseSpread && intervals.length < 20) {
+		let intervalTime: number;
+
+		if (tempBaseSpread <= 1.5 * intervalSpreadNormalized) {
+			intervalTime = elapsedIntervals + tempBaseSpread;
+			tempBaseSpread = 0;
+		} else {
+			intervalTime = elapsedIntervals + intervalSpreadNormalized;
+			tempBaseSpread -= intervalSpreadNormalized;
+		}
+
+		elapsedIntervals = intervalTime;
+
+		// ✅ label time = window offset + elapsed time inside window
+		const labelTime = offsetTimestamp + intervalTime;
+
+		intervals.push({
+			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
+				intervalUnit.name
+			}`,
+			percentage: (intervalTime / baseSpread) * 100,
+		});
+	}
+
+	return intervals;
+}
+
+export function getIntervalsOld(
+	intervalSpread: number,
+	baseSpread: number,
+	offsetTimestamp: number,
 ): Interval[] {
 	const integerPartString = intervalSpread.toString().split('.')[0];
 	const integerPartLength = integerPartString.length;
@@ -106,9 +171,10 @@ export function getIntervals(
 		}
 		elapsedIntervals = intervalTime;
 		const interval: Interval = {
-			label: `${toFixed(resolveTimeFromInterval(intervalTime, intervalUnit), 2)}${
-				intervalUnit.name
-			}`,
+			label: `${toFixed(
+				resolveTimeFromInterval(intervalTime + offsetTimestamp, intervalUnit),
+				2,
+			)}${intervalUnit.name}`,
 			percentage: (intervalTime / baseSpread) * 100,
 		};
 		intervals.push(interval);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -9,7 +9,6 @@ import {
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
-import { updateDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import {
 	enqueueDescendantsOfVariable,
 	enqueueFetchOfAllVariables,
@@ -32,9 +31,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
 
 	const { dashboardVariables } = useDashboardVariables();
-	const dashboardId = useDashboardVariablesSelector(
-		(state) => state.dashboardId,
-	);
 	const sortedVariablesArray = useDashboardVariablesSelector(
 		(state) => state.sortedVariablesArray,
 	);
@@ -100,28 +96,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 				updateUrlVariable(name || id, value);
 			}
 
-			// Synchronously update the external store with the new variable value so that
-			// child variables see the updated parent value when they refetch, rather than
-			// waiting for setSelectedDashboard → useEffect → updateDashboardVariablesStore.
-			const updatedVariables = { ...dashboardVariables };
-			if (updatedVariables[id]) {
-				updatedVariables[id] = {
-					...updatedVariables[id],
-					selectedValue: value,
-					allSelected,
-					haveCustomValuesSelected,
-				};
-			}
-			if (updatedVariables[name]) {
-				updatedVariables[name] = {
-					...updatedVariables[name],
-					selectedValue: value,
-					allSelected,
-					haveCustomValuesSelected,
-				};
-			}
-			updateDashboardVariablesStore({ dashboardId, variables: updatedVariables });
-
 			setSelectedDashboard((prev) => {
 				if (prev) {
 					const oldVariables = { ...prev?.data.variables };
@@ -156,12 +130,10 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			// Cascade: enqueue query-type descendants for refetching.
-			// Safe to call synchronously now that the store already has the updated value.
+			// Cascade: enqueue query-type descendants for refetching
 			enqueueDescendantsOfVariable(name);
 		},
 		[
-			dashboardId,
 			dashboardVariables,
 			updateLocalStorageDashboardVariables,
 			updateUrlVariable,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx

@@ -5,7 +5,7 @@ import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQ
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import { isArray, isEmpty } from 'lodash-es';
+import { isArray, isEmpty, isString } from 'lodash-es';
 import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -54,7 +54,7 @@ function QueryVariableInput({
 		onChange,
 		onDropdownVisibleChange,
 		handleClear,
-		getDefaultValue,
+		applyDefaultIfNeeded,
 	} = useDashboardVariableSelectHelper({
 		variableData,
 		optionsData,
@@ -68,93 +68,81 @@ function QueryVariableInput({
 			try {
 				setErrorMessage(null);
 
-				// This is just a check given the previously undefined typed name prop. Not significant
-				// This will be changed when we change the schema
-				// TODO: @AshwinBhatkal Perses
-				if (!variableData.name) {
-					return;
-				}
-
-				// if the response is not an array, premature return
 				if (
-					!variablesRes?.variableValues ||
-					!Array.isArray(variablesRes?.variableValues)
+					variablesRes?.variableValues &&
+					Array.isArray(variablesRes?.variableValues)
 				) {
-					return;
-				}
-
-				const sortedNewOptions = sortValues(
-					variablesRes.variableValues,
-					variableData.sort,
-				);
-				const sortedOldOptions = sortValues(optionsData, variableData.sort);
-
-				// if options are the same as before, no need to update state or check for selected value validity
-				// ! selectedValue needs to be set in the first pass though, as options are initially empty array and we need to apply default if needed
-				// Expecatation is that when oldOptions are not empty, then there is always some selectedValue
-				if (areArraysEqual(sortedNewOptions, sortedOldOptions)) {
-					return;
-				}
-
-				setOptionsData(sortedNewOptions);
-
-				let isSelectedValueMissingInNewOptions = false;
-
-				// Check if currently selected value(s) are present in the new options list
-				if (isArray(variableData.selectedValue)) {
-					isSelectedValueMissingInNewOptions = variableData.selectedValue.some(
-						(val) => !sortedNewOptions.includes(val),
+					const newOptionsData = sortValues(
+						variablesRes?.variableValues,
+						variableData.sort,
 					);
-				} else if (
-					variableData.selectedValue &&
-					!sortedNewOptions.includes(variableData.selectedValue)
-				) {
-					isSelectedValueMissingInNewOptions = true;
-				}
 
-				// If multi-select with ALL option enabled, and ALL is currently selected, we want to maintain that state and select all new options
-				// This block does not depend on selected value because of ALL and also because we would only come here if options are different from the previous
-				if (
-					variableData.multiSelect &&
-					variableData.showALLOption &&
-					variableData.allSelected &&
-					isSelectedValueMissingInNewOptions
-				) {
-					onValueUpdate(variableData.name, variableData.id, sortedNewOptions, true);
+					const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
 
-					// Update tempSelection to maintain ALL state when dropdown is open
-					if (tempSelection !== undefined) {
-						setTempSelection(sortedNewOptions.map((option) => option.toString()));
-					}
-					return;
-				}
+					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
+						let valueNotInList = false;
 
-				const value = variableData.selectedValue;
-				let allSelected = false;
+						if (isArray(variableData.selectedValue)) {
+							variableData.selectedValue.forEach((val) => {
+								if (!newOptionsData.includes(val)) {
+									valueNotInList = true;
+								}
+							});
+						} else if (
+							isString(variableData.selectedValue) &&
+							!newOptionsData.includes(variableData.selectedValue)
+						) {
+							valueNotInList = true;
+						}
 
-				if (variableData.multiSelect) {
-					const { selectedValue } = variableData;
-					allSelected =
-						sortedNewOptions.length > 0 &&
-						Array.isArray(selectedValue) &&
-						sortedNewOptions.every((option) => selectedValue.includes(option));
-				}
+						if (variableData.name && (valueNotInList || variableData.allSelected)) {
+							if (
+								variableData.allSelected &&
+								variableData.multiSelect &&
+								variableData.showALLOption
+							) {
+								if (
+									variableData.name &&
+									variableData.id &&
+									!isEmpty(variableData.selectedValue)
+								) {
+									onValueUpdate(
+										variableData.name,
+										variableData.id,
+										newOptionsData,
+										true,
+									);
+								}
 
-				if (
-					variableData.name &&
-					variableData.id &&
-					!isEmpty(variableData.selectedValue)
-				) {
-					onValueUpdate(variableData.name, variableData.id, value, allSelected);
-				} else {
-					const defaultValue = getDefaultValue(sortedNewOptions);
-					if (defaultValue !== undefined) {
-						onValueUpdate(
-							variableData.name,
-							variableData.id,
-							defaultValue,
-							allSelected,
-						);
+								// Update tempSelection to maintain ALL state when dropdown is open
+								if (tempSelection !== undefined) {
+									setTempSelection(newOptionsData.map((option) => option.toString()));
+								}
+							} else {
+								const value = variableData.selectedValue;
+								let allSelected = false;
+
+								if (variableData.multiSelect) {
+									const { selectedValue } = variableData;
+									allSelected =
+										newOptionsData.length > 0 &&
+										Array.isArray(selectedValue) &&
+										newOptionsData.every((option) => selectedValue.includes(option));
+								}
+
+								if (
+									variableData.name &&
+									variableData.id &&
+									!isEmpty(variableData.selectedValue)
+								) {
+									onValueUpdate(variableData.name, variableData.id, value, allSelected);
+								}
+							}
+						}
+
+						setOptionsData(newOptionsData);
+						// Apply default if no value is selected (e.g., new variable, first load)
+						applyDefaultIfNeeded(newOptionsData);
 					}
 				}
 			} catch (e) {
@@ -167,7 +155,7 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
-			getDefaultValue,
+			applyDefaultIfNeeded,
 		],
 	);
 

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/DashboardVariableSelection.test.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import { act, render } from '@testing-library/react';
-import * as dashboardVariablesStoreModule from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import {
 	dashboardVariablesStore,
 	setDashboardVariablesStore,
@@ -11,7 +10,6 @@ import {
 	IDashboardVariablesStoreState,
 } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import {
-	enqueueDescendantsOfVariable,
 	enqueueFetchOfAllVariables,
 	initializeVariableFetchStore,
 } from 'providers/Dashboard/store/variableFetchStore';
@@ -19,17 +17,6 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DashboardVariableSelection from '../DashboardVariableSelection';
 
-// Mutable container to capture the onValueUpdate callback from VariableItem
-const mockVariableItemCallbacks: {
-	onValueUpdate?: (
-		name: string,
-		id: string,
-		value: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
-	) => void;
-} = {};
-
 // Mock providers/Dashboard/Dashboard
 const mockSetSelectedDashboard = jest.fn();
 const mockUpdateLocalStorageDashboardVariables = jest.fn();
@@ -69,14 +56,10 @@ jest.mock('react-redux', () => ({
 	useSelector: jest.fn().mockReturnValue({ minTime: 1000, maxTime: 2000 }),
 }));
 
-// VariableItem mock captures the onValueUpdate prop for use in onValueUpdate tests
+// Mock VariableItem to avoid rendering complexity
 jest.mock('../VariableItem', () => ({
 	__esModule: true,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	default: (props: any): JSX.Element => {
-		mockVariableItemCallbacks.onValueUpdate = props.onValueUpdate;
-		return <div data-testid="variable-item" />;
-	},
+	default: (): JSX.Element => <div data-testid="variable-item" />,
 }));
 
 function createVariable(
@@ -217,162 +200,4 @@ describe('DashboardVariableSelection', () => {
 		expect(initializeVariableFetchStore).not.toHaveBeenCalled();
 		expect(enqueueFetchOfAllVariables).not.toHaveBeenCalled();
 	});
-
-	describe('onValueUpdate', () => {
-		let updateStoreSpy: jest.SpyInstance;
-
-		beforeEach(() => {
-			resetStore();
-			jest.clearAllMocks();
-			// Real implementation pass-through — we just want to observe calls
-			updateStoreSpy = jest.spyOn(
-				dashboardVariablesStoreModule,
-				'updateDashboardVariablesStore',
-			);
-		});
-
-		afterEach(() => {
-			updateStoreSpy.mockRestore();
-		});
-
-		it('updates dashboardVariablesStore synchronously before enqueueDescendantsOfVariable', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({ name: 'env', id: 'env-id', order: 0 }),
-				},
-			});
-
-			render(<DashboardVariableSelection />);
-
-			const callOrder: string[] = [];
-			updateStoreSpy.mockImplementation(() => {
-				callOrder.push('updateDashboardVariablesStore');
-			});
-			(enqueueDescendantsOfVariable as jest.Mock).mockImplementation(() => {
-				callOrder.push('enqueueDescendantsOfVariable');
-			});
-
-			act(() => {
-				mockVariableItemCallbacks.onValueUpdate?.(
-					'env',
-					'env-id',
-					'production',
-					false,
-				);
-			});
-
-			expect(callOrder).toEqual([
-				'updateDashboardVariablesStore',
-				'enqueueDescendantsOfVariable',
-			]);
-		});
-
-		it('passes updated variable value to dashboardVariablesStore', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						id: 'env-id',
-						order: 0,
-						selectedValue: 'staging',
-					}),
-				},
-			});
-
-			render(<DashboardVariableSelection />);
-
-			// Clear spy calls that happened during setup/render
-			updateStoreSpy.mockClear();
-
-			act(() => {
-				mockVariableItemCallbacks.onValueUpdate?.(
-					'env',
-					'env-id',
-					'production',
-					false,
-				);
-			});
-
-			expect(updateStoreSpy).toHaveBeenCalledWith(
-				expect.objectContaining({
-					dashboardId: 'dash-1',
-					variables: expect.objectContaining({
-						env: expect.objectContaining({
-							selectedValue: 'production',
-							allSelected: false,
-						}),
-					}),
-				}),
-			);
-		});
-
-		it('calls enqueueDescendantsOfVariable synchronously without a timer', () => {
-			jest.useFakeTimers();
-
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({ name: 'env', id: 'env-id', order: 0 }),
-				},
-			});
-
-			render(<DashboardVariableSelection />);
-
-			act(() => {
-				mockVariableItemCallbacks.onValueUpdate?.(
-					'env',
-					'env-id',
-					'production',
-					false,
-				);
-			});
-
-			// Must be called immediately — no timer advancement needed
-			expect(enqueueDescendantsOfVariable).toHaveBeenCalledWith('env');
-
-			jest.useRealTimers();
-		});
-
-		it('propagates allSelected and haveCustomValuesSelected to the store', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						id: 'env-id',
-						order: 0,
-						multiSelect: true,
-						showALLOption: true,
-					}),
-				},
-			});
-
-			render(<DashboardVariableSelection />);
-			updateStoreSpy.mockClear();
-
-			act(() => {
-				mockVariableItemCallbacks.onValueUpdate?.(
-					'env',
-					'env-id',
-					['production', 'staging'],
-					true,
-					false,
-				);
-			});
-
-			expect(updateStoreSpy).toHaveBeenCalledWith(
-				expect.objectContaining({
-					variables: expect.objectContaining({
-						env: expect.objectContaining({
-							selectedValue: ['production', 'staging'],
-							allSelected: true,
-							haveCustomValuesSelected: false,
-						}),
-					}),
-				}),
-			);
-		});
-	});
 });

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/QueryVariableInput.test.tsx

@@ -1,275 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { act, render, waitFor } from '@testing-library/react';
-import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import { variableFetchStore } from 'providers/Dashboard/store/variableFetchStore';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import QueryVariableInput from '../QueryVariableInput';
-
-jest.mock('api/dashboard/variables/dashboardVariablesQuery');
-
-jest.mock('react-redux', () => ({
-	...jest.requireActual('react-redux'),
-	useSelector: jest.fn().mockReturnValue({ minTime: 1000, maxTime: 2000 }),
-}));
-
-function createTestQueryClient(): QueryClient {
-	return new QueryClient({
-		defaultOptions: {
-			queries: { retry: false, refetchOnWindowFocus: false },
-		},
-	});
-}
-
-function Wrapper({
-	children,
-	queryClient,
-}: {
-	children: React.ReactNode;
-	queryClient: QueryClient;
-}): JSX.Element {
-	return (
-		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-	);
-}
-
-function createVariable(
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable {
-	return {
-		id: 'env-id',
-		name: 'env',
-		description: '',
-		type: 'QUERY',
-		sort: 'DISABLED',
-		showALLOption: false,
-		multiSelect: false,
-		order: 0,
-		queryValue: 'SELECT env FROM table',
-		...overrides,
-	};
-}
-
-/** Put the named variable into 'loading' state so useQuery fires on mount */
-function setVariableLoading(name: string): void {
-	variableFetchStore.update((draft) => {
-		draft.states[name] = 'loading';
-		draft.cycleIds[name] = (draft.cycleIds[name] || 0) + 1;
-	});
-}
-
-function resetFetchStore(): void {
-	variableFetchStore.set(() => ({
-		states: {},
-		lastUpdated: {},
-		cycleIds: {},
-	}));
-}
-
-describe('QueryVariableInput - getOptions logic', () => {
-	const mockOnValueUpdate = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		resetFetchStore();
-	});
-
-	afterEach(() => {
-		resetFetchStore();
-	});
-
-	it('applies default value (first option) when selectedValue is empty on first load', async () => {
-		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: ['production', 'staging', 'dev'] },
-		});
-
-		const variable = createVariable({ selectedValue: undefined });
-		setVariableLoading('env');
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		await waitFor(() => {
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'env',
-				'env-id',
-				'production', // first option by default
-				false,
-			);
-		});
-	});
-
-	it('keeps existing selectedValue when it is present in new options', async () => {
-		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: ['production', 'staging'] },
-		});
-
-		const variable = createVariable({ selectedValue: 'staging' });
-		setVariableLoading('env');
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		await waitFor(() => {
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'env',
-				'env-id',
-				'staging',
-				false,
-			);
-		});
-	});
-
-	it('selects all new options when allSelected=true and value is missing from new options', async () => {
-		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: ['production', 'staging'] },
-		});
-
-		const variable = createVariable({
-			selectedValue: ['old-env'],
-			allSelected: true,
-			multiSelect: true,
-			showALLOption: true,
-		});
-		setVariableLoading('env');
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		await waitFor(() => {
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'env',
-				'env-id',
-				['production', 'staging'],
-				true,
-			);
-		});
-	});
-
-	it('does not call onValueUpdate a second time when options have not changed', async () => {
-		const mockQueryFn = jest.fn().mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: ['production', 'staging'] },
-		});
-		(dashboardVariablesQuery as jest.Mock).mockImplementation(mockQueryFn);
-
-		const variable = createVariable({ selectedValue: 'production' });
-		setVariableLoading('env');
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		// Wait for first fetch and onValueUpdate call
-		await waitFor(() => {
-			expect(mockOnValueUpdate).toHaveBeenCalledTimes(1);
-		});
-
-		mockOnValueUpdate.mockClear();
-
-		// Trigger a second fetch cycle with the same API response
-		act(() => {
-			variableFetchStore.update((draft) => {
-				draft.states['env'] = 'revalidating';
-				draft.cycleIds['env'] = (draft.cycleIds['env'] || 0) + 1;
-			});
-		});
-
-		// Wait for second query to fire
-		await waitFor(() => {
-			expect(mockQueryFn).toHaveBeenCalledTimes(2);
-		});
-
-		// Options are unchanged, so onValueUpdate must not fire again
-		expect(mockOnValueUpdate).not.toHaveBeenCalled();
-	});
-
-	it('does not call onValueUpdate when API returns a non-array response', async () => {
-		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: null },
-		});
-
-		const variable = createVariable({ selectedValue: 'production' });
-		setVariableLoading('env');
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		await waitFor(() => {
-			expect(dashboardVariablesQuery).toHaveBeenCalled();
-		});
-
-		expect(mockOnValueUpdate).not.toHaveBeenCalled();
-	});
-
-	it('does not fire the query when variableData.name is empty', () => {
-		(dashboardVariablesQuery as jest.Mock).mockResolvedValue({
-			statusCode: 200,
-			payload: { variableValues: ['production'] },
-		});
-
-		// Variable with no name — useVariableFetchState will be called with ''
-		// and the query key will have an empty name, leaving it disabled
-		const variable = createVariable({ name: '' });
-		// Note: we do NOT put it in 'loading' state since name is empty
-		// (no variableFetchStore entry for '' means isVariableFetching=false)
-
-		const queryClient = createTestQueryClient();
-		render(
-			<Wrapper queryClient={queryClient}>
-				<QueryVariableInput
-					variableData={variable}
-					existingVariables={{ 'env-id': variable }}
-					onValueUpdate={mockOnValueUpdate}
-				/>
-			</Wrapper>,
-		);
-
-		expect(dashboardVariablesQuery).not.toHaveBeenCalled();
-		expect(mockOnValueUpdate).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableSelectHelper.ts

@@ -46,9 +46,6 @@ interface UseDashboardVariableSelectHelperReturn {
 	applyDefaultIfNeeded: (
 		overrideOptions?: (string | number | boolean)[],
 	) => void;
-	getDefaultValue: (
-		overrideOptions?: (string | number | boolean)[],
-	) => string | string[] | undefined;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -251,6 +248,5 @@ export function useDashboardVariableSelectHelper({
 		defaultValue,
 		onChange,
 		applyDefaultIfNeeded,
-		getDefaultValue,
 	};
 }

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -121,23 +121,9 @@ function BodyTitleRenderer({
 	return (
 		<TitleWrapper onClick={handleNodeClick}>
 			{typeof value !== 'object' && (
-				<span
-					onClick={(e): void => {
-						e.stopPropagation();
-						e.preventDefault();
-					}}
-					onMouseDown={(e): void => e.preventDefault()}
-				>
-					<Dropdown
-						menu={menu}
-						trigger={['click']}
-						dropdownRender={(originNode): React.ReactNode => (
-							<div data-log-detail-ignore="true">{originNode}</div>
-						)}
-					>
-						<SettingOutlined style={{ marginRight: 8 }} className="hover-reveal" />
-					</Dropdown>
-				</span>
+				<Dropdown menu={menu} trigger={['click']}>
+					<SettingOutlined style={{ marginRight: 8 }} className="hover-reveal" />
+				</Dropdown>
 			)}
 			{title.toString()}{' '}
 			{!parentIsArray && typeof value !== 'object' && (

frontend/src/container/LogDetailedView/FieldRenderer.tsx

@@ -13,7 +13,7 @@ function FieldRenderer({ field }: FieldRendererProps): JSX.Element {
 		<span className="field-renderer-container">
 			{dataType && newField && logType ? (
 				<>
-					<Tooltip placement="left" title={newField} mouseLeaveDelay={0}>
+					<Tooltip placement="left" title={newField}>
 						<Typography.Text ellipsis className="label">
 							{newField}{' '}
 						</Typography.Text>

frontend/src/container/LogDetailedView/Overview.tsx

@@ -46,7 +46,7 @@ function Overview({
 	handleChangeSelectedView,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
-	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
+	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false);
 	const [isAttributesExpanded, setIsAttributesExpanded] = useState<boolean>(
 		true,
 	);

frontend/src/container/LogDetailedView/TableView.tsx

@@ -245,7 +245,7 @@ function TableView({
 							<Typography.Text>{renderedField}</Typography.Text>
 
 							{traceId && (
-								<Tooltip title="Inspect in Trace" mouseLeaveDelay={0}>
+								<Tooltip title="Inspect in Trace">
 									<Button
 										className="periscope-btn"
 										onClick={(

frontend/src/container/LogsExplorerChart/__tests__/frequencyGraphColor.test.ts

@@ -1,34 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-
-import { getColorsForSeverityLabels, isRedLike } from '../utils';
-
-describe('getColorsForSeverityLabels', () => {
-	it('should return slate for blank labels', () => {
-		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_SLATE_300);
-		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_SLATE_300);
-	});
-
-	it('should return correct colors for known severity variants', () => {
-		expect(getColorsForSeverityLabels('INFO', 0)).toBe(Color.BG_ROBIN_600);
-		expect(getColorsForSeverityLabels('ERROR', 0)).toBe(Color.BG_CHERRY_600);
-		expect(getColorsForSeverityLabels('WARN', 0)).toBe(Color.BG_AMBER_600);
-		expect(getColorsForSeverityLabels('DEBUG', 0)).toBe(Color.BG_AQUA_600);
-		expect(getColorsForSeverityLabels('TRACE', 0)).toBe(Color.BG_FOREST_600);
-		expect(getColorsForSeverityLabels('FATAL', 0)).toBe(Color.BG_SAKURA_600);
-	});
-
-	it('should return non-red colors for unrecognized labels at any index', () => {
-		for (let i = 0; i < 30; i++) {
-			const color = getColorsForSeverityLabels('4', i);
-			expect(isRedLike(color)).toBe(false);
-		}
-	});
-
-	it('should return non-red colors for numeric severity text', () => {
-		const numericLabels = ['1', '2', '4', '9', '13', '17', '21'];
-		numericLabels.forEach((label) => {
-			const color = getColorsForSeverityLabels(label, 0);
-			expect(isRedLike(color)).toBe(false);
-		});
-	});
-});

frontend/src/container/LogsExplorerChart/utils.ts

@@ -1,16 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
+import { themeColors } from 'constants/theme';
 import { colors } from 'lib/getRandomColor';
 
-// Function to determine if a color is "red-like" based on its RGB values
-export function isRedLike(hex: string): boolean {
-	const r = parseInt(hex.slice(1, 3), 16);
-	const g = parseInt(hex.slice(3, 5), 16);
-	const b = parseInt(hex.slice(5, 7), 16);
-	return r > 180 && r > g * 1.4 && r > b * 1.4;
-}
-
-const SAFE_FALLBACK_COLORS = colors.filter((c) => !isRedLike(c));
-
 const SEVERITY_VARIANT_COLORS: Record<string, string> = {
 	TRACE: Color.BG_FOREST_600,
 	Trace: Color.BG_FOREST_500,
@@ -76,13 +67,8 @@ export function getColorsForSeverityLabels(
 	label: string,
 	index: number,
 ): string {
-	const trimmed = label.trim();
-
-	if (!trimmed) {
-		return Color.BG_SLATE_300;
-	}
-
-	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
+	// Check if we have a direct mapping for this severity variant
+	const variantColor = SEVERITY_VARIANT_COLORS[label.trim()];
 	if (variantColor) {
 		return variantColor;
 	}
@@ -117,8 +103,5 @@ export function getColorsForSeverityLabels(
 		return Color.BG_SAKURA_500;
 	}
 
-	return (
-		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
-		Color.BG_SLATE_400
-	);
+	return colors[index % colors.length] || themeColors.red;
 }

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

@@ -111,19 +111,23 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		);
 
 		const itemContent = useCallback(
-			(index: number, log: Record<string, unknown>): JSX.Element => (
-				<TableRow
-					tableColumns={tableColumns}
-					index={index}
-					log={log}
-					logs={tableViewProps.logs}
-					hasActions
-					fontSize={tableViewProps.fontSize}
-					onShowLogDetails={onSetActiveLog}
-					isActiveLog={activeLog?.id === log.id}
-					onClearActiveLog={onCloseActiveLog}
-				/>
-			),
+			(index: number, log: Record<string, unknown>): JSX.Element => {
+				return (
+					<div key={log.id as string}>
+						<TableRow
+							tableColumns={tableColumns}
+							index={index}
+							log={log}
+							logs={tableViewProps.logs}
+							hasActions
+							fontSize={tableViewProps.fontSize}
+							onShowLogDetails={onSetActiveLog}
+							isActiveLog={activeLog?.id === log.id}
+							onClearActiveLog={onCloseActiveLog}
+						/>
+					</div>
+				);
+			},
 			[
 				tableColumns,
 				onSetActiveLog,

frontend/src/container/PaginatedTraceFlamegraph/FLAMEGRAPH_CANVAS_POC_NOTES.md

@@ -0,0 +1,88 @@
+# Flamegraph Canvas POC Notes
+
+## Overview
+This document tracks the proof-of-concept (POC) implementation of a canvas-based flamegraph rendering system, replacing the previous DOM-based approach.
+
+## Implementation Status
+
+### ✅ Completed Features
+
+1. **Canvas-based Rendering**
+   - Replaced DOM elements (`react-virtuoso` and `div.span-item`) with a single HTML5 Canvas
+   - Implemented `drawFlamegraph` function to render all spans as rectangles on canvas
+   - Added device pixel ratio (DPR) support for crisp rendering
+
+2. **Time-window-based Zoom**
+   - Replaced pixel-based zoom/pan with time-window-based approach (`viewStartTs`, `viewEndTs`)
+   - Prevents pixelation by redrawing from data with new time bounds
+   - Zoom anchors to cursor position
+   - Horizontal zoom works correctly (min: 1/100th of trace, max: full trace)
+
+3. **Drag to Pan**
+   - Implemented drag-to-pan functionality for navigating the canvas
+   - Differentiates between click (span selection) and drag (panning) based on distance moved
+   - Prevents unwanted window zoom
+
+4. **Minimap with 2D Navigation**
+   - Canvas-based minimap showing density histogram (time × levels)
+   - 2D brush overlay for both horizontal (time) and vertical (levels) navigation
+   - Draggable brush to pan both dimensions
+   - Bidirectional synchronization between main canvas and minimap
+
+5. **Timeline Synchronization**
+   - `TimelineV2` component synchronized with visible time window
+   - Updates correctly during zoom and pan operations
+
+6. **Hit Testing**
+   - Implemented span rectangle tracking for click detection
+   - Tooltip on hover
+   - Span selection via click
+
+### ❌ Known Issues / Not Working
+
+1. **Vertical Zoom - NOT WORKING**
+   - **Status**: Attempted implementation but not functioning correctly
+   - **Issue**: When horizontal zoom reaches maximum (full trace width), vertical zoom cannot continue to zoom out further
+   - **Attempted Solution**: Added `rowHeightScale` state to control vertical row spacing, but the implementation does not work as expected
+   - **Impact**: Users cannot fully zoom out vertically to see all levels when horizontal zoom is at maximum
+   - **Next Steps**: Needs further investigation and alternative approach
+
+2. **Timeline Scale Alignment - NOT WORKING PROPERLY**
+   - **Status**: Issue identified but not fully resolved
+   - **Issue**: The timeline scale does not align properly when dragging/panning the canvas. The timeline aligns correctly during zoom operations, but not during drag/pan operations.
+   - **Impact**: Timeline may show incorrect time values while dragging the canvas
+   - **Attempted Solution**: Used refs (`viewStartTsRef`, `viewEndTsRef`) to track current time window and incremental delta calculation, but issue persists
+   - **Next Steps**: Needs further investigation to ensure timeline stays synchronized during all interaction types
+
+### 🔄 Pending / Future Work
+
+1. **Performance Optimization**
+   - Consider adding an interaction layer (separate canvas on top) for better performance
+   - Optimize rendering for large traces
+
+2. **Code Quality**
+   - Reduce cognitive complexity of `drawFlamegraph` function (currently 26, target: 15)
+   - Reduce cognitive complexity of `drawMinimap` function (currently 30, target: 15)
+
+3. **Additional Features**
+   - Keyboard shortcuts for navigation
+   - Better zoom controls
+   - Export functionality
+
+## Technical Details
+
+### Key Files Modified
+- `frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx` - Main rendering component
+- `frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss` - Styles for canvas and minimap
+- `frontend/src/components/TimelineV2/TimelineV2.tsx` - Timeline synchronization
+
+### Key Concepts
+- **Time-window-based zoom**: Instead of scaling canvas bitmap, redraw from data with new time bounds
+- **Device Pixel Ratio**: Render at DPR resolution for crisp display on high-DPI screens
+- **2D Minimap**: Shows density heatmap across both time (horizontal) and levels (vertical) dimensions
+- **Brush Navigation**: Draggable rectangle overlay for panning both dimensions
+
+## Notes
+- This is a POC implementation - code quality and optimization can be improved after validation
+- Some linting warnings (cognitive complexity) are acceptable for POC phase
+- All changes should be validated before production use

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+/* eslint-disable */
 import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Progress, Skeleton, Tooltip, Typography } from 'antd';
@@ -13,8 +15,13 @@ import { Span } from 'types/api/trace/getTraceV2';
 import { TraceFlamegraphStates } from './constants';
 import Error from './TraceFlamegraphStates/Error/Error';
 import NoData from './TraceFlamegraphStates/NoData/NoData';
-import Success from './TraceFlamegraphStates/Success/Success';
+// import Success from './TraceFlamegraphStates/Success/SuccessV2';
+// import Success from './TraceFlamegraphStates/Success/SuccessV3_without_minimap_best';
+import Success from './TraceFlamegraphStates/Success/Success_zoom';
 
+// import Success from './TraceFlamegraphStates/Success/Success_zoom_api';
+// import Success from './TraceFlamegraphStates/Success/SuccessCursor';
+// import Success from './TraceFlamegraphStates/Success/Success';
 import './PaginatedTraceFlamegraph.styles.scss';
 
 interface ITraceFlamegraphProps {
@@ -38,7 +45,6 @@ function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
 	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
 		urlQuery.get('spanId') || '',
 	);
-
 	useEffect(() => {
 		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
 	}, [urlQuery]);
@@ -46,6 +52,9 @@ function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
 	const { data, isFetching, error } = useGetTraceFlamegraph({
 		traceId,
 		selectedSpanId: firstSpanAtFetchLevel,
+		limit: 100001,
+		// boundaryStartTsMilli: 0,
+		// boundarEndTsMilli: 10000,
 	});
 
 	// get the current state of trace flamegraph based on the API lifecycle

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss

@@ -3,6 +3,11 @@
 	overflow-x: hidden;
 	overflow-y: auto;
 
+	&.trace-flamegraph-canvas {
+		overflow: hidden;
+		position: relative;
+	}
+
 	.trace-flamegraph-virtuoso {
 		overflow-x: hidden;
 

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx

@@ -1,3 +1,6 @@
+// @ts-nocheck
+/* eslint-disable */
+
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import {
@@ -23,6 +26,12 @@ import { toFixed } from 'utils/toFixed';
 
 import './Success.styles.scss';
 
+// Constants for rendering
+const ROW_HEIGHT = 24; // 18px height + 6px padding
+const SPAN_BAR_HEIGHT = 12;
+const EVENT_DOT_SIZE = 6;
+const SPAN_BAR_Y_OFFSET = 3; //
+
 interface ITraceMetadata {
 	startTime: number;
 	endTime: number;
@@ -35,6 +44,14 @@ interface ISuccessProps {
 	traceMetadata: ITraceMetadata;
 	selectedSpan: Span | undefined;
 }
+interface SpanRect {
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	level: number;
+}
 
 function Success(props: ISuccessProps): JSX.Element {
 	const {
@@ -48,6 +65,28 @@ function Success(props: ISuccessProps): JSX.Element {
 	const history = useHistory();
 	const isDarkMode = useIsDarkMode();
 	const virtuosoRef = useRef<VirtuosoHandle>(null);
+
+	const baseCanvasRef = useRef<HTMLCanvasElement>(null);
+	const interactionCanvasRef = useRef<HTMLCanvasElement>(null);
+	const minimapRef = useRef<HTMLCanvasElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	console.log('spans.length', spans.length);
+	// Calculate total canvas height. this is coming less
+	const totalHeight = spans.length * ROW_HEIGHT;
+
+	// Build a flat array of span rectangles for hit testing.
+	// consider per level buckets to improve hit testing
+	const spanRects = useRef<SpanRect[]>([]);
+
+	// Time window state (instead of zoom/pan in pixel space)
+	const [viewStartTs, setViewStartTs] = useState<number>(
+		traceMetadata.startTime,
+	);
+	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
+
+	const [scrollTop, setScrollTop] = useState<number>(0);
+
 	const [hoveredSpanId, setHoveredSpanId] = useState<string>('');
 	const renderSpanLevel = useCallback(
 		(_: number, spans: FlamegraphSpan[]): JSX.Element => (
@@ -157,16 +196,305 @@ function Success(props: ISuccessProps): JSX.Element {
 		});
 	}, [firstSpanAtFetchLevel, spans]);
 
+	// Draw a single event dot
+	const drawEventDot = useCallback(
+		(
+			ctx: CanvasRenderingContext2D,
+			x: number,
+			y: number,
+			isError: boolean,
+		): void => {
+			// could be optimized:
+			// ctx.beginPath();
+			// ctx.moveTo(x, y - size/2);
+			// ctx.lineTo(x + size/2, y);
+			// ctx.lineTo(x, y + size/2);
+			// ctx.lineTo(x - size/2, y);
+			// ctx.closePath();
+			// ctx.fill();
+			// ctx.stroke();
+			ctx.save();
+			ctx.translate(x, y);
+			ctx.rotate(Math.PI / 4); // 45 degrees
+
+			if (isError) {
+				ctx.fillStyle = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+				ctx.strokeStyle = isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)';
+			} else {
+				ctx.fillStyle = isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)';
+				ctx.strokeStyle = isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)';
+			}
+
+			ctx.lineWidth = 1;
+			ctx.fillRect(
+				-EVENT_DOT_SIZE / 2,
+				-EVENT_DOT_SIZE / 2,
+				EVENT_DOT_SIZE,
+				EVENT_DOT_SIZE,
+			);
+			ctx.strokeRect(
+				-EVENT_DOT_SIZE / 2,
+				-EVENT_DOT_SIZE / 2,
+				EVENT_DOT_SIZE,
+				EVENT_DOT_SIZE,
+			);
+			ctx.restore();
+		},
+		[isDarkMode],
+	);
+
+	// Get CSS color value from color string or CSS variable
+	// const getColorValue = useCallback((color: string): string => {
+	// 	// if (color.startsWith('var(')) {
+	// 	// 	// For CSS variables, we need to get computed value
+	// 	// 	const tempDiv = document.createElement('div');
+	// 	// 	tempDiv.style.color = color;
+	// 	// 	document.body.appendChild(tempDiv);
+	// 	// 	const computedColor = window.getComputedStyle(tempDiv).color;
+	// 	// 	document.body.removeChild(tempDiv);
+	// 	// 	return computedColor;
+	// 	// }
+	// 	return color;
+	// }, []);
+
+	// Get span color based on service, error state, and selection
+	// separate this when introducing interaction canvas
+	const getSpanColor = useCallback(
+		(span: FlamegraphSpan): string => {
+			let color = generateColor(span.serviceName, themeColors.traceDetailColors);
+
+			if (span.hasError) {
+				color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+			}
+			// else {
+			// 	color = getColorValue(color);
+			// }
+
+			// Apply selection/hover highlight
+			//hover/selection highlight in getSpanColor forces base redraw. clipping necessary.
+			if (selectedSpan?.spanId === span.spanId || hoveredSpanId === span.spanId) {
+				const colorObj = Color(color);
+				color = isDarkMode
+					? colorObj.lighten(0.7).hex()
+					: colorObj.darken(0.7).hex();
+			}
+
+			return color;
+		},
+		[isDarkMode, selectedSpan, hoveredSpanId],
+	);
+
+	// Draw a single span and its events
+	const drawSpan = useCallback(
+		(
+			ctx: CanvasRenderingContext2D,
+			span: FlamegraphSpan,
+			x: number,
+			y: number,
+			width: number,
+			levelIndex: number,
+			spanRectsArray: SpanRect[],
+		): void => {
+			const color = getSpanColor(span); // do not depend on hover/clicks
+			const spanY = y + SPAN_BAR_Y_OFFSET;
+
+			// Draw span rectangle
+			ctx.fillStyle = color;
+			ctx.beginPath();
+			// see if we can avoid roundRect as it is performance intensive
+			ctx.roundRect(x, spanY, width, SPAN_BAR_HEIGHT, 6);
+			ctx.fill();
+
+			// Store rect for hit testing
+			// consider per level buckets to improve hit testing
+			// So hover can:
+			// compute level from y
+			// search only within that row
+			spanRectsArray.push({
+				span,
+				x,
+				y: spanY,
+				width,
+				height: SPAN_BAR_HEIGHT,
+				level: levelIndex,
+			});
+
+			// Draw events
+			// think about optimizing this.
+			// if span is too small to draw events, skip drawing events???
+			span.event?.forEach((event) => {
+				const eventTimeMs = event.timeUnixNano / 1e6;
+				const eventOffsetPercent =
+					((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
+				const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
+				const eventX = x + (clampedOffset / 100) * width;
+				const eventY = spanY + SPAN_BAR_HEIGHT / 2;
+				// LOD guard: skip events if span too narrow
+				// if (width < EVENT_DOT_SIZE) {
+				// 	return;
+				// }
+				drawEventDot(ctx, eventX, eventY, event.isError);
+			});
+		},
+		[getSpanColor, drawEventDot],
+	);
+
+	const drawFlamegraph = useCallback(() => {
+		const canvas = baseCanvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+		const timeSpan = viewEndTs - viewStartTs;
+		if (timeSpan <= 0) {
+			return;
+		}
+
+		const cssWidth = canvas.width / dpr;
+
+		// ---- Vertical clipping window ----
+		const viewportHeight = container.clientHeight;
+		const overscan = 4;
+
+		const firstLevel = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - overscan);
+		const visibleLevelCount =
+			Math.ceil(viewportHeight / ROW_HEIGHT) + 2 * overscan;
+		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
+
+		// ---- Clear only visible region (recommended) ----
+		const clearTop = firstLevel * ROW_HEIGHT;
+		const clearHeight = (lastLevel - firstLevel + 1) * ROW_HEIGHT;
+		ctx.clearRect(0, clearTop, cssWidth, clearHeight);
+
+		const spanRectsArray: SpanRect[] = [];
+
+		// ---- Draw only visible levels ----
+		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
+			const levelSpans = spans[levelIndex];
+			if (!levelSpans) {
+				continue;
+			}
+
+			const y = levelIndex * ROW_HEIGHT;
+
+			for (let i = 0; i < levelSpans.length; i++) {
+				const span = levelSpans[i];
+
+				const spanStartMs = span.timestamp;
+				const spanEndMs = span.timestamp + span.durationNano / 1e6;
+
+				// Time culling (already correct)
+				if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
+					continue;
+				}
+
+				const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
+				const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
+				let width = rightEdge - leftOffset;
+
+				// Clamp to visible x-range
+				if (leftOffset < 0) {
+					width += leftOffset;
+					if (width <= 0) {
+						continue;
+					}
+				}
+				if (rightEdge > cssWidth) {
+					width = cssWidth - Math.max(0, leftOffset);
+					if (width <= 0) {
+						continue;
+					}
+				}
+
+				// Optional: minimum 1px width
+				if (width > 0 && width < 1) {
+					width = 1;
+				}
+
+				drawSpan(
+					ctx,
+					span,
+					Math.max(0, leftOffset),
+					y,
+					width,
+					levelIndex,
+					spanRectsArray,
+				);
+			}
+		}
+
+		spanRects.current = spanRectsArray;
+	}, [spans, viewStartTs, viewEndTs, scrollTop, drawSpan]);
+
+	// Handle canvas resize with device pixel ratio
+	useEffect(() => {
+		const canvas = baseCanvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const updateCanvasSize = (): void => {
+			const rect = container.getBoundingClientRect();
+			const dpr = window.devicePixelRatio || 1;
+
+			// Set CSS size
+			canvas.style.width = `${rect.width}px`;
+			canvas.style.height = `${totalHeight}px`;
+
+			// Set actual pixel size (accounting for DPR)
+			// Only update if size actually changed to prevent unnecessary redraws
+			const newWidth = Math.floor(rect.width * dpr);
+			const newHeight = Math.floor(totalHeight * dpr);
+
+			if (canvas.width !== newWidth || canvas.height !== newHeight) {
+				canvas.width = newWidth;
+				canvas.height = newHeight;
+				// Redraw with current time window (preserves zoom/pan)
+				drawFlamegraph();
+			}
+		};
+
+		const resizeObserver = new ResizeObserver(updateCanvasSize);
+		resizeObserver.observe(container);
+
+		// Initial size
+		updateCanvasSize();
+
+		// Handle DPR changes (e.g., moving window between screens)
+		const handleDPRChange = (): void => {
+			updateCanvasSize();
+		};
+		window
+			.matchMedia('(resolution: 1dppx)')
+			.addEventListener('change', handleDPRChange);
+
+		return (): void => {
+			resizeObserver.disconnect();
+			window
+				.matchMedia('(resolution: 1dppx)')
+				.removeEventListener('change', handleDPRChange);
+		};
+	}, [drawFlamegraph, totalHeight]);
+
+	// Re-draw when data changes
+	useEffect(() => {
+		drawFlamegraph();
+	}, [drawFlamegraph]);
+
 	return (
 		<>
-			<div className="trace-flamegraph">
-				<Virtuoso
-					ref={virtuosoRef}
-					className="trace-flamegraph-virtuoso"
-					data={spans}
-					itemContent={renderSpanLevel}
-					rangeChanged={handleRangeChanged}
-				/>
+			<div ref={containerRef} className="trace-flamegraph trace-flamegraph-canvas">
+				<canvas ref={baseCanvasRef}></canvas>
 			</div>
 			<TimelineV2
 				startTimestamp={traceMetadata.startTime}

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/SuccessV3_without_minimap_best.tsx

@@ -0,0 +1,890 @@
+// @ts-nocheck
+/* eslint-disable */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { Button } from 'antd';
+import Color from 'color';
+import TimelineV2 from 'components/TimelineV2/TimelineV2';
+import { themeColors } from 'constants/theme';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import './Success.styles.scss';
+
+interface ITraceMetadata {
+	startTime: number;
+	endTime: number;
+}
+
+interface ISuccessProps {
+	spans: FlamegraphSpan[][];
+	firstSpanAtFetchLevel: string;
+	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
+	traceMetadata: ITraceMetadata;
+	selectedSpan: Span | undefined;
+}
+
+// Constants for rendering
+const ROW_HEIGHT = 24; // 18px height + 6px padding
+const SPAN_BAR_HEIGHT = 12;
+const EVENT_DOT_SIZE = 6;
+const SPAN_BAR_Y_OFFSET = 3; // Center the 12px bar in 18px row
+
+interface SpanRect {
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	level: number;
+}
+
+function Success(props: ISuccessProps): JSX.Element {
+	const {
+		spans,
+		setFirstSpanAtFetchLevel,
+		traceMetadata,
+		firstSpanAtFetchLevel,
+		selectedSpan,
+	} = props;
+	const { search } = useLocation();
+	const history = useHistory();
+	const isDarkMode = useIsDarkMode();
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [hoveredSpanId, setHoveredSpanId] = useState<string>('');
+	const [tooltipContent, setTooltipContent] = useState<{
+		content: string;
+		x: number;
+		y: number;
+	} | null>(null);
+	const [scrollTop, setScrollTop] = useState<number>(0);
+
+	// Time window state (instead of zoom/pan in pixel space)
+	const [viewStartTs, setViewStartTs] = useState<number>(
+		traceMetadata.startTime,
+	);
+	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
+	const [isSpacePressed, setIsSpacePressed] = useState<boolean>(false);
+
+	// Refs to avoid stale state during rapid wheel events and dragging
+	const viewStartRef = useRef(viewStartTs);
+	const viewEndRef = useRef(viewEndTs);
+
+	useEffect(() => {
+		viewStartRef.current = viewStartTs;
+		viewEndRef.current = viewEndTs;
+	}, [viewStartTs, viewEndTs]);
+
+	// Drag state in refs to avoid re-renders during drag
+	const isDraggingRef = useRef(false);
+	const dragStartRef = useRef<{ x: number; y: number } | null>(null);
+	const dragDistanceRef = useRef(0);
+	const suppressClickRef = useRef(false);
+
+	// Scroll ref to avoid recreating getCanvasPointer on every scroll
+	const scrollTopRef = useRef(0);
+
+	useEffect(() => {
+		scrollTopRef.current = scrollTop;
+	}, [scrollTop]);
+
+	// Build a flat array of span rectangles for hit testing
+	const spanRects = useRef<SpanRect[]>([]);
+
+	// Get span color based on service, error state, and selection
+	const getSpanColor = useCallback(
+		(span: FlamegraphSpan): string => {
+			let color = generateColor(span.serviceName, themeColors.traceDetailColors);
+
+			if (span.hasError) {
+				color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+			}
+
+			// Apply selection/hover highlight
+			if (selectedSpan?.spanId === span.spanId || hoveredSpanId === span.spanId) {
+				const colorObj = Color(color);
+				color = isDarkMode
+					? colorObj.lighten(0.7).hex()
+					: colorObj.darken(0.7).hex();
+			}
+
+			return color;
+		},
+		[isDarkMode, selectedSpan, hoveredSpanId],
+	);
+
+	// Draw a single event dot
+	const drawEventDot = useCallback(
+		(
+			ctx: CanvasRenderingContext2D,
+			x: number,
+			y: number,
+			isError: boolean,
+		): void => {
+			// could be optimized:
+			// ctx.beginPath();
+			// ctx.moveTo(x, y - size/2);
+			// ctx.lineTo(x + size/2, y);
+			// ctx.lineTo(x, y + size/2);
+			// ctx.lineTo(x - size/2, y);
+			// ctx.closePath();
+			// ctx.fill();
+			// ctx.stroke();
+			ctx.save();
+			ctx.translate(x, y);
+			ctx.rotate(Math.PI / 4); // 45 degrees
+
+			if (isError) {
+				ctx.fillStyle = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+				ctx.strokeStyle = isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)';
+			} else {
+				ctx.fillStyle = isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)';
+				ctx.strokeStyle = isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)';
+			}
+
+			ctx.lineWidth = 1;
+			ctx.fillRect(
+				-EVENT_DOT_SIZE / 2,
+				-EVENT_DOT_SIZE / 2,
+				EVENT_DOT_SIZE,
+				EVENT_DOT_SIZE,
+			);
+			ctx.strokeRect(
+				-EVENT_DOT_SIZE / 2,
+				-EVENT_DOT_SIZE / 2,
+				EVENT_DOT_SIZE,
+				EVENT_DOT_SIZE,
+			);
+			ctx.restore();
+		},
+		[isDarkMode],
+	);
+
+	// Draw a single span and its events
+	const drawSpan = useCallback(
+		(
+			ctx: CanvasRenderingContext2D,
+			span: FlamegraphSpan,
+			x: number,
+			y: number,
+			width: number,
+			levelIndex: number,
+			spanRectsArray: SpanRect[],
+		): void => {
+			const color = getSpanColor(span); // do not depend on hover/clicks
+			const spanY = y + SPAN_BAR_Y_OFFSET;
+
+			// Draw span rectangle
+			ctx.fillStyle = color;
+			ctx.beginPath();
+			ctx.roundRect(x, spanY, width, SPAN_BAR_HEIGHT, 6);
+			ctx.fill();
+
+			// Store rect for hit testing
+			// consider per level buckets to improve hit testing
+			// So hover can:
+			// compute level from y
+			// search only within that row
+			spanRectsArray.push({
+				span,
+				x,
+				y: spanY,
+				width,
+				height: SPAN_BAR_HEIGHT,
+				level: levelIndex,
+			});
+
+			// Draw events
+			// think about optimizing this.
+			// if span is too small to draw events, skip drawing events???
+			span.event?.forEach((event) => {
+				const eventTimeMs = event.timeUnixNano / 1e6;
+				const eventOffsetPercent =
+					((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
+				const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
+				const eventX = x + (clampedOffset / 100) * width;
+				const eventY = spanY + SPAN_BAR_HEIGHT / 2;
+
+				drawEventDot(ctx, eventX, eventY, event.isError);
+			});
+		},
+		[getSpanColor, drawEventDot],
+	);
+
+	// Draw the flamegraph on canvas
+	const drawFlamegraph = useCallback(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+		const timeSpan = viewEndTs - viewStartTs;
+		if (timeSpan <= 0) {
+			return;
+		}
+
+		const cssWidth = canvas.width / dpr;
+
+		// ---- Vertical clipping window ----
+		const viewportHeight = container.clientHeight;
+		const overscan = 4;
+
+		const firstLevel = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - overscan);
+		const visibleLevelCount =
+			Math.ceil(viewportHeight / ROW_HEIGHT) + 2 * overscan;
+		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
+
+		// ---- Clear only visible region (recommended) ----
+		const clearTop = firstLevel * ROW_HEIGHT;
+		const clearHeight = (lastLevel - firstLevel + 1) * ROW_HEIGHT;
+		ctx.clearRect(0, clearTop, cssWidth, clearHeight);
+
+		const spanRectsArray: SpanRect[] = [];
+
+		// ---- Draw only visible levels ----
+		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
+			const levelSpans = spans[levelIndex];
+			if (!levelSpans) {
+				continue;
+			}
+
+			const y = levelIndex * ROW_HEIGHT;
+
+			for (let i = 0; i < levelSpans.length; i++) {
+				const span = levelSpans[i];
+
+				const spanStartMs = span.timestamp;
+				const spanEndMs = span.timestamp + span.durationNano / 1e6;
+
+				// Time culling (already correct)
+				if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
+					continue;
+				}
+
+				const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
+				const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
+				let width = rightEdge - leftOffset;
+
+				// Clamp to visible x-range
+				if (leftOffset < 0) {
+					width += leftOffset;
+					if (width <= 0) {
+						continue;
+					}
+				}
+				if (rightEdge > cssWidth) {
+					width = cssWidth - Math.max(0, leftOffset);
+					if (width <= 0) {
+						continue;
+					}
+				}
+
+				// Optional: minimum 1px width
+				if (width > 0 && width < 1) {
+					width = 1;
+				}
+
+				drawSpan(
+					ctx,
+					span,
+					Math.max(0, leftOffset),
+					y,
+					width,
+					levelIndex,
+					spanRectsArray,
+				);
+			}
+		}
+
+		spanRects.current = spanRectsArray;
+	}, [spans, viewStartTs, viewEndTs, scrollTop, drawSpan]);
+
+	// Calculate total canvas height
+	const totalHeight = spans.length * ROW_HEIGHT;
+
+	console.log('time: ', {
+		start: traceMetadata.startTime,
+		end: traceMetadata.endTime,
+	});
+
+	// Initialize time window when trace metadata changes (only if not already set)
+	useEffect(() => {
+		// Only reset if we're at the default view (full trace)
+		// This prevents resetting zoom/pan when metadata updates
+		if (
+			viewStartTs === traceMetadata.startTime &&
+			viewEndTs === traceMetadata.endTime
+		) {
+			// Already at default, no need to update
+			return;
+		}
+		// Only reset if the trace bounds have actually changed significantly
+		const currentSpan = viewEndTs - viewStartTs;
+		const fullSpan = traceMetadata.endTime - traceMetadata.startTime;
+		// If we're zoomed in, preserve the zoom level relative to new bounds
+		if (currentSpan < fullSpan * 0.99) {
+			// We're zoomed in, adjust the window proportionally
+			const ratio = currentSpan / fullSpan;
+			const newSpan = (traceMetadata.endTime - traceMetadata.startTime) * ratio;
+			const center = (viewStartTs + viewEndTs) / 2;
+			const newStart = Math.max(
+				traceMetadata.startTime,
+				Math.min(center - newSpan / 2, traceMetadata.endTime - newSpan),
+			);
+			setViewStartTs(newStart);
+			setViewEndTs(newStart + newSpan);
+		} else {
+			// We're at full view, reset to new full view
+			setViewStartTs(traceMetadata.startTime);
+			setViewEndTs(traceMetadata.endTime);
+		}
+	}, [traceMetadata.startTime, traceMetadata.endTime, viewStartTs, viewEndTs]);
+
+	// Handle canvas resize with device pixel ratio
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const updateCanvasSize = (): void => {
+			const rect = container.getBoundingClientRect();
+			const dpr = window.devicePixelRatio || 1;
+
+			// Set CSS size
+			canvas.style.width = `${rect.width}px`;
+			canvas.style.height = `${totalHeight}px`;
+
+			// Set actual pixel size (accounting for DPR)
+			// Only update if size actually changed to prevent unnecessary redraws
+			const newWidth = Math.floor(rect.width * dpr);
+			const newHeight = Math.floor(totalHeight * dpr);
+
+			if (canvas.width !== newWidth || canvas.height !== newHeight) {
+				canvas.width = newWidth;
+				canvas.height = newHeight;
+				// Redraw with current time window (preserves zoom/pan)
+				drawFlamegraph();
+			}
+		};
+
+		const resizeObserver = new ResizeObserver(updateCanvasSize);
+		resizeObserver.observe(container);
+
+		// Initial size
+		updateCanvasSize();
+
+		// Handle DPR changes (e.g., moving window between screens)
+		const handleDPRChange = (): void => {
+			updateCanvasSize();
+		};
+		window
+			.matchMedia('(resolution: 1dppx)')
+			.addEventListener('change', handleDPRChange);
+
+		return (): void => {
+			resizeObserver.disconnect();
+			window
+				.matchMedia('(resolution: 1dppx)')
+				.removeEventListener('change', handleDPRChange);
+		};
+	}, [drawFlamegraph, totalHeight]);
+
+	// Re-draw when data changes
+	useEffect(() => {
+		drawFlamegraph();
+	}, [drawFlamegraph]);
+
+	// Find span at given canvas coordinates
+	const findSpanAtPosition = useCallback((x: number, y: number):
+		| SpanRect
+		| undefined => {
+		return spanRects.current.find(
+			(spanRect) =>
+				x >= spanRect.x &&
+				x <= spanRect.x + spanRect.width &&
+				y >= spanRect.y &&
+				y <= spanRect.y + spanRect.height,
+		);
+	}, []);
+
+	// Utility to convert client coordinates to CSS canvas coordinates
+	const getCanvasPointer = useCallback((clientX: number, clientY: number): {
+		cssX: number;
+		cssY: number;
+		cssWidth: number;
+	} | null => {
+		const canvas = canvasRef.current;
+		if (!canvas) {
+			return null;
+		}
+
+		const rect = canvas.getBoundingClientRect();
+		const dpr = window.devicePixelRatio || 1;
+
+		const cssWidth = canvas.width / dpr;
+
+		const cssX = (clientX - rect.left) * (cssWidth / rect.width);
+
+		const cssY = clientY - rect.top + scrollTopRef.current;
+
+		return { cssX, cssY, cssWidth };
+	}, []);
+
+	// Handle mouse move for hover and dragging
+	const handleMouseMove = useCallback(
+		(event: React.MouseEvent<HTMLCanvasElement>) => {
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const rect = canvas.getBoundingClientRect();
+
+			console.log('event', { clientX: event.clientX, clientY: event.clientY });
+
+			// ---- Dragging (pan in time space) ----
+			if (isDraggingRef.current && dragStartRef.current) {
+				const deltaX = event.clientX - dragStartRef.current.x;
+				const deltaY = event.clientY - dragStartRef.current.y;
+
+				console.log('delta', { deltaY, deltaX });
+
+				const totalDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+				dragDistanceRef.current = totalDistance;
+
+				const timeSpan = viewEndRef.current - viewStartRef.current;
+				const deltaTime = (deltaX / rect.width) * timeSpan;
+
+				const newStart = viewStartRef.current - deltaTime;
+
+				const clampedStart = Math.max(
+					traceMetadata.startTime,
+					Math.min(newStart, traceMetadata.endTime - timeSpan),
+				);
+
+				const clampedEnd = clampedStart + timeSpan;
+
+				setViewStartTs(clampedStart);
+				setViewEndTs(clampedEnd);
+
+				dragStartRef.current = {
+					x: event.clientX,
+					y: event.clientY,
+				};
+
+				return;
+			}
+
+			// ---- Hover ----
+			const pointer = getCanvasPointer(event.clientX, event.clientY);
+
+			if (!pointer) {
+				return;
+			}
+
+			const { cssX, cssY } = pointer;
+			const hoveredSpan = findSpanAtPosition(cssX, cssY);
+
+			if (hoveredSpan) {
+				setHoveredSpanId(hoveredSpan.span.spanId);
+				setTooltipContent({
+					content: hoveredSpan.span.name,
+					x: event.clientX,
+					y: event.clientY,
+				});
+				canvas.style.cursor = 'pointer';
+			} else {
+				setHoveredSpanId('');
+				setTooltipContent(null);
+				// Set cursor based on space key state when not hovering
+				canvas.style.cursor = isSpacePressed ? 'grab' : 'default';
+			}
+		},
+		[findSpanAtPosition, traceMetadata, getCanvasPointer, isSpacePressed],
+	);
+
+	// Handle key down for space key
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent): void => {
+			if (event.code === 'Space') {
+				event.preventDefault();
+				setIsSpacePressed(true);
+			}
+		};
+
+		const handleKeyUp = (event: KeyboardEvent): void => {
+			if (event.code === 'Space') {
+				event.preventDefault();
+				setIsSpacePressed(false);
+			}
+		};
+
+		window.addEventListener('keydown', handleKeyDown);
+		window.addEventListener('keyup', handleKeyUp);
+
+		return (): void => {
+			window.removeEventListener('keydown', handleKeyDown);
+			window.removeEventListener('keyup', handleKeyUp);
+		};
+	}, []);
+
+	const handleMouseDown = useCallback(
+		(event: React.MouseEvent<HTMLCanvasElement>) => {
+			if (event.button !== 0) {
+				return;
+			} // left click only
+
+			event.preventDefault();
+
+			isDraggingRef.current = true;
+			dragStartRef.current = {
+				x: event.clientX,
+				y: event.clientY,
+			};
+			dragDistanceRef.current = 0;
+
+			const canvas = canvasRef.current;
+			if (canvas) {
+				canvas.style.cursor = 'grabbing';
+			}
+		},
+		[],
+	);
+
+	const handleMouseUp = useCallback(() => {
+		const wasDrag = dragDistanceRef.current > 5;
+
+		suppressClickRef.current = wasDrag; // 👈 key fix: suppress click after drag
+
+		isDraggingRef.current = false;
+		dragStartRef.current = null;
+		dragDistanceRef.current = 0;
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			canvas.style.cursor = 'grab';
+		}
+
+		return wasDrag;
+	}, []);
+
+	const handleMouseLeave = useCallback(() => {
+		isOverFlamegraphRef.current = false;
+
+		setHoveredSpanId('');
+		setTooltipContent(null);
+
+		isDraggingRef.current = false;
+		dragStartRef.current = null;
+		dragDistanceRef.current = 0;
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			canvas.style.cursor = 'grab';
+		}
+	}, []);
+
+	const handleClick = useCallback(
+		(event: React.MouseEvent<HTMLCanvasElement>) => {
+			// Prevent click after drag
+			if (suppressClickRef.current) {
+				suppressClickRef.current = false; // reset after suppressing once
+				return;
+			}
+
+			const pointer = getCanvasPointer(event.clientX, event.clientY);
+
+			if (!pointer) {
+				return;
+			}
+
+			const { cssX, cssY } = pointer;
+			const clickedSpan = findSpanAtPosition(cssX, cssY);
+
+			if (!clickedSpan) {
+				return;
+			}
+
+			const searchParams = new URLSearchParams(search);
+			const currentSpanId = searchParams.get('spanId');
+
+			if (currentSpanId !== clickedSpan.span.spanId) {
+				searchParams.set('spanId', clickedSpan.span.spanId);
+				history.replace({ search: searchParams.toString() });
+			}
+		},
+		[search, history, findSpanAtPosition, getCanvasPointer],
+	);
+
+	const isOverFlamegraphRef = useRef(false);
+
+	useEffect(() => {
+		const onWheel = (e: WheelEvent) => {
+			// Pinch zoom on trackpads often comes as ctrl+wheel
+			if (isOverFlamegraphRef.current && e.ctrlKey) {
+				e.preventDefault(); // stops browser zoom
+			}
+		};
+
+		// capture:true ensures we intercept early
+		window.addEventListener('wheel', onWheel, { passive: false, capture: true });
+
+		return () => {
+			window.removeEventListener(
+				'wheel',
+				onWheel as any,
+				{ capture: true } as any,
+			);
+		};
+	}, []);
+
+	const wheelDeltaRef = useRef(0);
+	const rafRef = useRef<number | null>(null);
+	const lastCursorXRef = useRef(0);
+	const lastCssWidthRef = useRef(1);
+	const lastIsPinchRef = useRef(false);
+
+	const applyWheelZoom = useCallback(() => {
+		rafRef.current = null;
+
+		const cssWidth = lastCssWidthRef.current || 1;
+		const cursorX = lastCursorXRef.current;
+
+		const fullSpan = traceMetadata.endTime - traceMetadata.startTime;
+		const oldSpan = viewEndRef.current - viewStartRef.current;
+
+		// ✅ Different intensity for pinch vs scroll
+		const zoomIntensityScroll = 0.0015;
+		const zoomIntensityPinch = 0.01; // pinch needs stronger response
+		const zoomIntensity = lastIsPinchRef.current
+			? zoomIntensityPinch
+			: zoomIntensityScroll;
+
+		const deltaY = wheelDeltaRef.current;
+		wheelDeltaRef.current = 0;
+
+		// ✅ Smooth zoom using delta magnitude
+		const zoomFactor = Math.exp(deltaY * zoomIntensity);
+		const newSpan = oldSpan * zoomFactor;
+
+		console.log('newSpan', { cssWidth, newSpan, zoomFactor, oldSpan });
+
+		// ✅ Better minSpan clamp (absolute + pixel-based)
+		const absoluteMinSpan = 5; // ms
+		const pixelMinSpan = fullSpan / cssWidth; // ~1px of time
+		const minSpan = Math.max(absoluteMinSpan, pixelMinSpan);
+		const maxSpan = fullSpan;
+
+		const clampedSpan = Math.max(minSpan, Math.min(maxSpan, newSpan));
+
+		// ✅ Anchor preserving zoom (same as your original logic)
+		const cursorRatio = Math.max(0, Math.min(cursorX / cssWidth, 1));
+		const anchorTs = viewStartRef.current + cursorRatio * oldSpan;
+
+		const newViewStart = anchorTs - cursorRatio * clampedSpan;
+
+		const finalStart = Math.max(
+			traceMetadata.startTime,
+			Math.min(newViewStart, traceMetadata.endTime - clampedSpan),
+		);
+		const finalEnd = finalStart + clampedSpan;
+
+		console.log('finalStart', finalStart);
+		console.log('finalEnd', finalEnd);
+		setViewStartTs(finalStart);
+		setViewEndTs(finalEnd);
+	}, [traceMetadata]);
+
+	const handleWheel = useCallback(
+		(event: React.WheelEvent<HTMLCanvasElement>) => {
+			event.preventDefault();
+
+			const pointer = getCanvasPointer(event.clientX, event.clientY);
+
+			if (!pointer) {
+				return;
+			}
+
+			console.log('pointer', pointer);
+
+			const { cssX: cursorX, cssWidth } = pointer;
+
+			// ✅ Detect pinch on Chrome/Edge: ctrlKey true for trackpad pinch
+			lastIsPinchRef.current = event.ctrlKey;
+
+			lastCssWidthRef.current = cssWidth;
+			lastCursorXRef.current = cursorX;
+
+			// ✅ Accumulate deltas; apply once per frame
+			wheelDeltaRef.current += event.deltaY;
+
+			if (rafRef.current == null) {
+				rafRef.current = requestAnimationFrame(applyWheelZoom);
+			}
+		},
+		[applyWheelZoom, getCanvasPointer],
+	);
+
+	// Reset zoom and pan
+	const handleResetZoom = useCallback(() => {
+		setViewStartTs(traceMetadata.startTime);
+		setViewEndTs(traceMetadata.endTime);
+	}, [traceMetadata]);
+
+	// Handle scroll for pagination
+	const handleScroll = useCallback(
+		(event: React.UIEvent<HTMLDivElement>): void => {
+			const target = event.currentTarget;
+			setScrollTop(target.scrollTop);
+
+			// Pagination logic
+			if (spans.length < 50) {
+				return;
+			}
+
+			const scrollPercentage = target.scrollTop / target.scrollHeight;
+			const totalLevels = spans.length;
+
+			if (scrollPercentage === 0 && spans[0]?.[0]?.level !== 0) {
+				setFirstSpanAtFetchLevel(spans[0][0].spanId);
+			}
+
+			if (scrollPercentage >= 0.95 && spans[totalLevels - 1]?.[0]?.spanId) {
+				setFirstSpanAtFetchLevel(spans[totalLevels - 1][0].spanId);
+			}
+		},
+		[spans, setFirstSpanAtFetchLevel],
+	);
+
+	// Auto-scroll to selected span
+	useEffect(() => {
+		if (!firstSpanAtFetchLevel || !containerRef.current) {
+			return;
+		}
+
+		const levelIndex = spans.findIndex(
+			(level) => level[0]?.spanId === firstSpanAtFetchLevel,
+		);
+
+		if (levelIndex !== -1) {
+			const targetScroll = levelIndex * ROW_HEIGHT;
+			containerRef.current.scrollTop = targetScroll;
+			setScrollTop(targetScroll);
+		}
+	}, [firstSpanAtFetchLevel, spans]);
+
+	return (
+		<>
+			<div
+				ref={containerRef}
+				className="trace-flamegraph trace-flamegraph-canvas"
+				onScroll={handleScroll}
+			>
+				{(viewStartTs !== traceMetadata.startTime ||
+					viewEndTs !== traceMetadata.endTime) && (
+					<Button
+						className="flamegraph-reset-zoom"
+						size="small"
+						onClick={handleResetZoom}
+						title="Reset zoom and pan"
+					>
+						Reset View
+					</Button>
+				)}
+				<canvas
+					ref={canvasRef}
+					style={{
+						display: 'block',
+						width: '100%',
+						height: `${totalHeight}px`,
+					}}
+					onMouseMove={handleMouseMove}
+					onMouseDown={handleMouseDown}
+					onMouseUp={handleMouseUp}
+					onMouseEnter={() => (isOverFlamegraphRef.current = true)}
+					onMouseLeave={handleMouseLeave}
+					onClick={handleClick}
+					onWheel={handleWheel}
+					onContextMenu={(e): void => e.preventDefault()}
+				/>
+				{tooltipContent && (
+					<div
+						style={{
+							position: 'fixed',
+							left: `${tooltipContent.x + 10}px`,
+							top: `${tooltipContent.y - 10}px`,
+							pointerEvents: 'none',
+							zIndex: 1000,
+							backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
+							color: isDarkMode ? '#ffffff' : '#000000',
+							padding: '4px 8px',
+							borderRadius: '4px',
+							fontSize: '12px',
+							boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+						}}
+					>
+						{tooltipContent.content}
+					</div>
+				)}
+			</div>
+			<TimelineV2
+				startTimestamp={viewStartTs}
+				endTimestamp={viewEndTs}
+				offsetTimestamp={viewStartTs - traceMetadata.startTime}
+				timelineHeight={22}
+			/>
+		</>
+	);
+}
+
+export default Success;
+
+// on drag on click is getting registered as a click
+// zoom and scale not matching
+// check minimap logic
+// use
+// const scrollTopRef = useRef(scrollTop);
+
+// useEffect(() => {
+//   scrollTopRef.current = scrollTop;
+// }, [scrollTop]);
+
+// fix clicks in interaction canvas
+
+// Auto-scroll to selected span else on top(based on default span)
+// time bar line vertical
+// zoom handle vertical and horizontal scroll with proper defined thresholds
+// timeline should be in sync with the flamegraph. test with vertical line of time on event etc.
+// proper working interaction layer for clicks and hovers
+// hit testing should be efficient and accurate without flat spanRect
+
+// Final Priority Order (Clean Summary)
+// ✅ Zoom (Horizontal + Vertical thresholds)
+// ✅ Timeline sync + vertical time dashed line
+// ✅ Minimap brush correctness
+// ✅ Auto-scroll behavior
+// ✅ Interaction layer separation
+// ✅ Efficient hit testing

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/FilterInput/index.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Form } from 'antd';
 import { initialQueryBuilderFormValuesMap } from 'constants/queryBuilder';
-import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import isEqual from 'lodash-es/isEqual';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -30,7 +30,7 @@ function TagFilterInput({
 	};
 
 	return (
-		<QueryBuilderSearchV2
+		<QueryBuilderSearch
 			query={query}
 			onChange={onQueryChange}
 			placeholder={placeholder}

frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx

@@ -86,7 +86,7 @@ jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
 }));
 
 const BASE_URL = ENVIRONMENT.baseURL;
-const attributeKeysURL = `${BASE_URL}/api/v3/filter_suggestions`;
+const attributeKeysURL = `${BASE_URL}/api/v3/autocomplete/attribute_keys`;
 
 describe('PipelinePage container test', () => {
 	beforeAll(() => {
@@ -333,34 +333,26 @@ describe('PipelinePage container test', () => {
 					ctx.json({
 						status: 'success',
 						data: {
-							attributes: [
+							attributeKeys: [
 								{
 									key: 'otelServiceName',
 									dataType: DataTypes.String,
 									type: 'tag',
-									isColumn: false,
-									isJSON: false,
-								},
-								{
-									key: 'service.name',
-									dataType: DataTypes.String,
-									type: 'resource',
-									isColumn: false,
-									isJSON: false,
 								},
 								{
 									key: 'service.instance.id',
 									dataType: DataTypes.String,
 									type: 'resource',
-									isColumn: false,
-									isJSON: false,
+								},
+								{
+									key: 'service.name',
+									dataType: DataTypes.String,
+									type: 'resource',
 								},
 								{
 									key: 'service.name',
 									dataType: DataTypes.String,
 									type: 'tag',
-									isColumn: false,
-									isJSON: false,
 								},
 							],
 						},

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -973,7 +973,6 @@ function QueryBuilderSearchV2(
 	return (
 		<div className="query-builder-search-v2">
 			<Select
-				data-testid={'qb-search-select'}
 				ref={selectRef}
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...(hasPopupContainer ? { getPopupContainer: popupContainer } : {})}

frontend/src/hooks/logs/__tests__/useLogDetailHandlers.test.ts

@@ -1,94 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useIsTextSelected } from 'hooks/useIsTextSelected';
-import { ILog } from 'types/api/logs/log';
-
-import useLogDetailHandlers from '../useLogDetailHandlers';
-
-jest.mock('hooks/logs/useActiveLog');
-jest.mock('hooks/useIsTextSelected');
-
-const mockOnSetActiveLog = jest.fn();
-const mockOnClearActiveLog = jest.fn();
-const mockOnAddToQuery = jest.fn();
-const mockOnGroupByAttribute = jest.fn();
-const mockIsTextSelected = jest.fn();
-
-const mockLog: ILog = {
-	id: 'log-1',
-	timestamp: '2024-01-01T00:00:00Z',
-	date: '2024-01-01',
-	body: 'test log body',
-	severityText: 'INFO',
-	severityNumber: 9,
-	traceFlags: 0,
-	traceId: '',
-	spanID: '',
-	attributesString: {},
-	attributesInt: {},
-	attributesFloat: {},
-	resources_string: {},
-	scope_string: {},
-	attributes_string: {},
-	severity_text: '',
-	severity_number: 0,
-};
-
-beforeEach(() => {
-	jest.clearAllMocks();
-
-	jest.mocked(useIsTextSelected).mockReturnValue(mockIsTextSelected);
-
-	jest.mocked(useActiveLog).mockReturnValue({
-		activeLog: null,
-		onSetActiveLog: mockOnSetActiveLog,
-		onClearActiveLog: mockOnClearActiveLog,
-		onAddToQuery: mockOnAddToQuery,
-		onGroupByAttribute: mockOnGroupByAttribute,
-	});
-});
-
-it('should not open log detail when text is selected', () => {
-	mockIsTextSelected.mockReturnValue(true);
-
-	const { result } = renderHook(() => useLogDetailHandlers());
-
-	act(() => {
-		result.current.handleSetActiveLog(mockLog);
-	});
-
-	expect(mockOnSetActiveLog).not.toHaveBeenCalled();
-});
-
-it('should open log detail when no text is selected', () => {
-	mockIsTextSelected.mockReturnValue(false);
-
-	const { result } = renderHook(() => useLogDetailHandlers());
-
-	act(() => {
-		result.current.handleSetActiveLog(mockLog);
-	});
-
-	expect(mockOnSetActiveLog).toHaveBeenCalledWith(mockLog);
-});
-
-it('should toggle off when clicking the same active log', () => {
-	mockIsTextSelected.mockReturnValue(false);
-
-	jest.mocked(useActiveLog).mockReturnValue({
-		activeLog: mockLog,
-		onSetActiveLog: mockOnSetActiveLog,
-		onClearActiveLog: mockOnClearActiveLog,
-		onAddToQuery: mockOnAddToQuery,
-		onGroupByAttribute: mockOnGroupByAttribute,
-	});
-
-	const { result } = renderHook(() => useLogDetailHandlers());
-
-	act(() => {
-		result.current.handleSetActiveLog(mockLog);
-	});
-
-	expect(mockOnClearActiveLog).toHaveBeenCalled();
-	expect(mockOnSetActiveLog).not.toHaveBeenCalled();
-});

frontend/src/hooks/logs/useActiveLog.ts

@@ -1,17 +1,15 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { QueryParams } from 'constants/query';
 import { OPERATORS, QueryBuilderKeys } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
-import useUrlQuery from 'hooks/useUrlQuery';
 import { getGeneratedFilterQueryString } from 'lib/getGeneratedFilterQueryString';
 import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
 import { AppState } from 'store/reducers';
@@ -56,20 +54,6 @@ export const useActiveLog = (): UseActiveLog => {
 
 	const [activeLog, setActiveLog] = useState<ILog | null>(null);
 
-	// Close drawer/clear active log when query in URL changes
-	const urlQuery = useUrlQuery();
-	const compositeQuery = urlQuery.get(QueryParams.compositeQuery) ?? '';
-	const prevQueryRef = useRef<string | null>(null);
-	useEffect(() => {
-		if (
-			prevQueryRef.current !== null &&
-			prevQueryRef.current !== compositeQuery
-		) {
-			setActiveLog(null);
-		}
-		prevQueryRef.current = compositeQuery;
-	}, [compositeQuery]);
-
 	const onSetDetailedLogData = useCallback(
 		(logData: ILog) => {
 			dispatch({

frontend/src/hooks/logs/useLogDetailHandlers.ts

@@ -2,7 +2,6 @@ import { useCallback, useState } from 'react';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import type { UseActiveLog } from 'hooks/logs/types';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useIsTextSelected } from 'hooks/useIsTextSelected';
 import { ILog } from 'types/api/logs/log';
 
 type SelectedTab = typeof VIEW_TYPES[keyof typeof VIEW_TYPES] | undefined;
@@ -29,13 +28,9 @@ function useLogDetailHandlers({
 		onAddToQuery,
 	} = useActiveLog();
 	const [selectedTab, setSelectedTab] = useState<SelectedTab>(defaultTab);
-	const isTextSelected = useIsTextSelected();
 
 	const handleSetActiveLog = useCallback(
 		(log: ILog, nextTab: SelectedTab = defaultTab): void => {
-			if (isTextSelected()) {
-				return;
-			}
 			if (activeLog?.id === log.id) {
 				onClearActiveLog();
 				setSelectedTab(undefined);
@@ -44,7 +39,7 @@ function useLogDetailHandlers({
 			onSetActiveLog(log);
 			setSelectedTab(nextTab ?? defaultTab);
 		},
-		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog, isTextSelected],
+		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
 	);
 
 	const handleCloseLogDetail = useCallback((): void => {

frontend/src/hooks/trace/useGetTraceFlamegraph.tsx

@@ -17,6 +17,9 @@ const useGetTraceFlamegraph = (
 			REACT_QUERY_KEY.GET_TRACE_V2_FLAMEGRAPH,
 			props.traceId,
 			props.selectedSpanId,
+			props.limit,
+			props.boundaryStartTsMilli,
+			props.boundarEndTsMilli,
 		],
 		enabled: !!props.traceId,
 		keepPreviousData: true,

frontend/src/hooks/useIsTextSelected.ts

@@ -1,10 +0,0 @@
-import { useCallback } from 'react';
-
-export function useIsTextSelected(): () => boolean {
-	return useCallback((): boolean => {
-		const selection = window.getSelection();
-		return (
-			!!selection && !selection.isCollapsed && selection.toString().length > 0
-		);
-	}, []);
-}

frontend/src/types/api/trace/getTraceFlamegraph.ts

@@ -5,6 +5,9 @@ export interface TraceDetailFlamegraphURLProps {
 export interface GetTraceFlamegraphPayloadProps {
 	traceId: string;
 	selectedSpanId: string;
+	limit: number;
+	boundaryStartTsMilli: number;
+	boundarEndTsMilli: number;
 }
 
 export interface Event {
@@ -31,4 +34,6 @@ export interface GetTraceFlamegraphSuccessResponse {
 	spans: FlamegraphSpan[][];
 	startTimestampMillis: number;
 	endTimestampMillis: number;
+	durationNano: number;
+	hasMore: boolean;
 }

pkg/modules/promote/implpromote/module.go

@@ -87,7 +87,7 @@ func (m *module) ListPromotedAndIndexedPaths(ctx context.Context) ([]promotetype
 }
 
 func (m *module) listPromotedPaths(ctx context.Context) ([]string, error) {
-	paths, err := m.metadataStore.GetPromotedPaths(ctx)
+	paths, err := m.metadataStore.ListPromotedPaths(ctx)
 	if err != nil {
 		return nil, err
 	}
@@ -142,7 +142,7 @@ func (m *module) PromoteAndIndexPaths(
 		pathsStr = append(pathsStr, path.Path)
 	}
 
-	existingPromotedPaths, err := m.metadataStore.GetPromotedPaths(ctx, pathsStr...)
+	existingPromotedPaths, err := m.metadataStore.ListPromotedPaths(ctx, pathsStr...)
 	if err != nil {
 		return err
 	}

pkg/query-service/app/clickhouseReader/reader.go

@@ -1046,7 +1046,19 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	}
 
 	processingPostCache := time.Now()
-	selectedSpans, uncollapsedSpans, rootServiceName, rootServiceEntryPoint := tracedetail.GetSelectedSpans(req.UncollapsedSpans, req.SelectedSpanID, traceRoots, spanIdToSpanNodeMap, req.IsSelectedSpanIDUnCollapsed)
+	limit := min(req.Limit, tracedetail.MaxLimitToSelectAllSpans)
+	selectAllSpans := totalSpans <= uint64(limit)
+
+	var (
+		selectedSpans                          []*model.Span
+		uncollapsedSpans                       []string
+		rootServiceName, rootServiceEntryPoint string
+	)
+	if selectAllSpans {
+		selectedSpans, rootServiceName, rootServiceEntryPoint = tracedetail.GetAllSpans(traceRoots)
+	} else {
+		selectedSpans, uncollapsedSpans, rootServiceName, rootServiceEntryPoint = tracedetail.GetSelectedSpans(req.UncollapsedSpans, req.SelectedSpanID, traceRoots, spanIdToSpanNodeMap, req.IsSelectedSpanIDUnCollapsed)
+	}
 	zap.L().Info("getWaterfallSpansForTraceWithMetadata: processing post cache", zap.Duration("duration", time.Since(processingPostCache)), zap.String("traceID", traceID))
 
 	// convert start timestamp to millis because right now frontend is expecting it in millis
@@ -1059,7 +1071,7 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	}
 
 	response.Spans = selectedSpans
-	response.UncollapsedSpans = uncollapsedSpans
+	response.UncollapsedSpans = uncollapsedSpans // ignoring if all spans are returning
 	response.StartTimestampMillis = startTime / 1000000
 	response.EndTimestampMillis = endTime / 1000000
 	response.TotalSpansCount = totalSpans
@@ -1068,6 +1080,7 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	response.RootServiceEntryPoint = rootServiceEntryPoint
 	response.ServiceNameToTotalDurationMap = serviceNameToTotalDurationMap
 	response.HasMissingSpans = hasMissingSpans
+	response.HasMore = !selectAllSpans
 	return response, nil
 }
 
@@ -1199,7 +1212,7 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 			}
 		}
 
-		selectedSpans = tracedetail.GetSelectedSpansForFlamegraph(traceRoots, spanIdToSpanNodeMap)
+		selectedSpans = tracedetail.GetAllSpansForFlamegraph(traceRoots, spanIdToSpanNodeMap)
 		traceCache := model.GetFlamegraphSpansForTraceCache{
 			StartTime:     startTime,
 			EndTime:       endTime,
@@ -1216,12 +1229,20 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 	}
 
 	processingPostCache := time.Now()
-	selectedSpansForRequest := tracedetail.GetSelectedSpansForFlamegraphForRequest(req.SelectedSpanID, selectedSpans, startTime, endTime)
-	zap.L().Info("getFlamegraphSpansForTrace: processing post cache", zap.Duration("duration", time.Since(processingPostCache)), zap.String("traceID", traceID))
+	selectedSpansForRequest := selectedSpans
+	limit := min(req.Limit, tracedetail.MaxLimitWithoutSampling)
+	totalSpanCount := tracedetail.GetTotalSpanCount(selectedSpans)
+	if totalSpanCount > uint64(limit) {
+		boundaryStart, boundaryEnd := utils.MilliToNano(req.BoundaryStartTS), utils.MilliToNano(req.BoundaryEndTS)
+		selectedSpansForRequest = tracedetail.GetSelectedSpansForFlamegraphForRequest(req.SelectedSpanID, selectedSpans, boundaryStart, boundaryEnd)
+	}
+	zap.L().Info("getFlamegraphSpansForTrace: processing post cache", zap.Duration("duration", time.Since(processingPostCache)), zap.String("traceID", traceID),
+		zap.Uint64("totalSpanCount", totalSpanCount))
 
 	trace.Spans = selectedSpansForRequest
 	trace.StartTimestampMillis = startTime / 1000000
 	trace.EndTimestampMillis = endTime / 1000000
+	trace.HasMore = totalSpanCount > uint64(limit)
 	return trace, nil
 }
 

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

@@ -7,9 +7,11 @@ import (
 )
 
 var (
-	SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH float64 = 50
-	SPAN_LIMIT_PER_LEVEL                  int     = 100
-	TIMESTAMP_SAMPLING_BUCKET_COUNT       int     = 50
+	flamegraphSpanLevelLimit      float64 = 50
+	flamegraphSpanLimitPerLevel   int     = 1000
+	flamegraphSamplingBucketCount int     = 500
+
+	MaxLimitWithoutSampling uint = 120_000
 )
 
 func ContainsFlamegraphSpan(slice []*model.FlamegraphSpan, item *model.FlamegraphSpan) bool {
@@ -52,7 +54,8 @@ func FindIndexForSelectedSpan(spans [][]*model.FlamegraphSpan, selectedSpanId st
 	return selectedSpanLevel
 }
 
-func GetSelectedSpansForFlamegraph(traceRoots []*model.FlamegraphSpan, spanIdToSpanNodeMap map[string]*model.FlamegraphSpan) [][]*model.FlamegraphSpan {
+// GetAllSpansForFlamegraph groups all spans as per their level
+func GetAllSpansForFlamegraph(traceRoots []*model.FlamegraphSpan, spanIdToSpanNodeMap map[string]*model.FlamegraphSpan) [][]*model.FlamegraphSpan {
 
 	var traceIdLevelledFlamegraph = map[string]map[int64][]*model.FlamegraphSpan{}
 	selectedSpans := [][]*model.FlamegraphSpan{}
@@ -100,7 +103,7 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 	})
 
 	// pick the top 5 latency spans
-	for idx := range 5 {
+	for idx := range 100 {
 		sampledSpans = append(sampledSpans, spans[idx])
 	}
 
@@ -110,6 +113,7 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 		for _idx, span := range spans {
 			if span.SpanID == selectedSpanID {
 				idx = _idx
+				break
 			}
 		}
 		if idx != -1 {
@@ -117,17 +121,17 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 		}
 	}
 
-	bucketSize := (endTime - startTime) / uint64(TIMESTAMP_SAMPLING_BUCKET_COUNT)
+	bucketSize := (endTime - startTime) / uint64(flamegraphSamplingBucketCount)
 	if bucketSize == 0 {
 		bucketSize = 1
 	}
 
-	bucketedSpans := make([][]*model.FlamegraphSpan, 50)
+	bucketedSpans := make([][]*model.FlamegraphSpan, flamegraphSamplingBucketCount)
 
 	for _, span := range spans {
 		if span.TimeUnixNano >= startTime && span.TimeUnixNano <= endTime {
 			bucketIndex := int((span.TimeUnixNano - startTime) / bucketSize)
-			if bucketIndex >= 0 && bucketIndex < 50 {
+			if bucketIndex >= 0 && bucketIndex < flamegraphSamplingBucketCount {
 				bucketedSpans[bucketIndex] = append(bucketedSpans[bucketIndex], span)
 			}
 		}
@@ -156,8 +160,8 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 		selectedIndex = FindIndexForSelectedSpan(selectedSpans, selectedSpanID)
 	}
 
-	lowerLimit := selectedIndex - int(SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH*0.4)
-	upperLimit := selectedIndex + int(SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH*0.6)
+	lowerLimit := selectedIndex - int(flamegraphSpanLevelLimit*0.4)
+	upperLimit := selectedIndex + int(flamegraphSpanLevelLimit*0.6)
 
 	if lowerLimit < 0 {
 		upperLimit = upperLimit - lowerLimit
@@ -174,7 +178,7 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 	}
 
 	for i := lowerLimit; i < upperLimit; i++ {
-		if len(selectedSpans[i]) > SPAN_LIMIT_PER_LEVEL {
+		if len(selectedSpans[i]) > flamegraphSpanLimitPerLevel {
 			_spans := getLatencyAndTimestampBucketedSpans(selectedSpans[i], selectedSpanID, i == selectedIndex, startTime, endTime)
 			selectedSpansForRequest = append(selectedSpansForRequest, _spans)
 		} else {
@@ -184,3 +188,12 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 
 	return selectedSpansForRequest
 }
+
+func GetTotalSpanCount(spans [][]*model.FlamegraphSpan) uint64 {
+	levelCount := len(spans)
+	spanCount := uint64(0)
+	for i := range levelCount {
+		spanCount += uint64(len(spans[i]))
+	}
+	return spanCount
+}

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

@@ -9,6 +9,9 @@ import (
 
 var (
 	SPAN_LIMIT_PER_REQUEST_FOR_WATERFALL float64 = 500
+
+	maxDepthForSelectedSpanChildren int  = 5
+	MaxLimitToSelectAllSpans        uint = 10_000
 )
 
 type Interval struct {
@@ -88,8 +91,11 @@ 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 {
+func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, isPartOfPreOrder bool, hasSibling bool, selectedSpanId string,
+	depthFromSelectedSpan int, isSelectedSpanIDUnCollapsed bool, selectAllSpan bool) ([]*model.Span, []string) {
+
 	preOrderTraversal := []*model.Span{}
+	autoExpandedSpans := []string{}
 
 	// sort the children to maintain the order across requests
 	sort.Slice(span.Children, func(i, j int) bool {
@@ -126,15 +132,40 @@ func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, is
 		preOrderTraversal = append(preOrderTraversal, &nodeWithoutChildren)
 	}
 
+	nextDepthFromSelectedSpan := -1
+	if span.SpanID == selectedSpanId && isSelectedSpanIDUnCollapsed {
+		nextDepthFromSelectedSpan = 1
+	} else if depthFromSelectedSpan >= 1 && depthFromSelectedSpan < maxDepthForSelectedSpanChildren {
+		nextDepthFromSelectedSpan = depthFromSelectedSpan + 1
+	}
+
 	for index, child := range span.Children {
-		_childTraversal := traverseTrace(child, uncollapsedSpans, level+1, isPartOfPreOrder && slices.Contains(uncollapsedSpans, span.SpanID), index != (len(span.Children)-1), selectedSpanId)
+		// A child is included in the pre-order output if its parent is uncollapsed
+		// OR if the child falls within MAX_DEPTH_FOR_SELECTED_SPAN_CHILDREN levels
+		// below the selected span.
+		isChildWithinMaxDepth := nextDepthFromSelectedSpan >= 1
+		isAlreadyUncollapsed := slices.Contains(uncollapsedSpans, span.SpanID)
+		childIsPartOfPreOrder := isPartOfPreOrder && (isAlreadyUncollapsed || isChildWithinMaxDepth)
+		if selectAllSpan {
+			childIsPartOfPreOrder = true
+		}
+
+		if isPartOfPreOrder && isChildWithinMaxDepth && !isAlreadyUncollapsed {
+			if !slices.Contains(autoExpandedSpans, span.SpanID) {
+				autoExpandedSpans = append(autoExpandedSpans, span.SpanID)
+			}
+		}
+
+		_childTraversal, _autoExpanded := traverseTrace(child, uncollapsedSpans, level+1, childIsPartOfPreOrder, index != (len(span.Children)-1), selectedSpanId,
+			nextDepthFromSelectedSpan, isSelectedSpanIDUnCollapsed, selectAllSpan)
 		preOrderTraversal = append(preOrderTraversal, _childTraversal...)
+		autoExpandedSpans = append(autoExpandedSpans, _autoExpanded...)
 		nodeWithoutChildren.SubTreeNodeCount += child.SubTreeNodeCount + 1
 		span.SubTreeNodeCount += child.SubTreeNodeCount + 1
 	}
 
 	nodeWithoutChildren.SubTreeNodeCount += 1
-	return preOrderTraversal
+	return preOrderTraversal, autoExpandedSpans
 
 }
 
@@ -168,7 +199,13 @@ 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)
+			_preOrderTraversal, _autoExpanded := traverseTrace(rootNode, updatedUncollapsedSpans, 0, true, false, selectedSpanID, -1, isSelectedSpanIDUnCollapsed, false)
+			// Merge auto-expanded spans into updatedUncollapsedSpans for returning in response
+			for _, spanID := range _autoExpanded {
+				if !slices.Contains(updatedUncollapsedSpans, spanID) {
+					updatedUncollapsedSpans = append(updatedUncollapsedSpans, spanID)
+				}
+			}
 			_selectedSpanIndex := findIndexForSelectedSpanFromPreOrder(_preOrderTraversal, selectedSpanID)
 
 			if _selectedSpanIndex != -1 {
@@ -212,3 +249,17 @@ func GetSelectedSpans(uncollapsedSpans []string, selectedSpanID string, traceRoo
 
 	return preOrderTraversal[startIndex:endIndex], updatedUncollapsedSpans, rootServiceName, rootServiceEntryPoint
 }
+
+func GetAllSpans(traceRoots []*model.Span) (spans []*model.Span, rootServiceName, rootEntryPoint string) {
+	for _, root := range traceRoots {
+		childSpans, _ := traverseTrace(root, nil, 0, true, false, "", -1, false, true)
+		spans = append(spans, childSpans...)
+		if rootServiceName == "" {
+			rootServiceName = root.ServiceName
+		}
+		if rootEntryPoint == "" {
+			rootEntryPoint = root.Name
+		}
+	}
+	return
+}

pkg/query-service/model/queryParams.go

@@ -333,10 +333,14 @@ type GetWaterfallSpansForTraceWithMetadataParams struct {
 	SelectedSpanID              string   `json:"selectedSpanId"`
 	IsSelectedSpanIDUnCollapsed bool     `json:"isSelectedSpanIDUnCollapsed"`
 	UncollapsedSpans            []string `json:"uncollapsedSpans"`
+	Limit                       uint     `json:"limit"`
 }
 
 type GetFlamegraphSpansForTraceParams struct {
-	SelectedSpanID string `json:"selectedSpanId"`
+	SelectedSpanID  string `json:"selectedSpanId"`
+	Limit           uint   `json:"limit"`
+	BoundaryStartTS uint64 `json:"boundaryStartTsMilli"`
+	BoundaryEndTS   uint64 `json:"boundarEndTsMilli"`
 }
 
 type SpanFilterParams struct {

pkg/query-service/model/response.go

@@ -329,6 +329,7 @@ type GetWaterfallSpansForTraceWithMetadataResponse struct {
 	HasMissingSpans               bool              `json:"hasMissingSpans"`
 	// this is needed for frontend and query service sync
 	UncollapsedSpans []string `json:"uncollapsedSpans"`
+	HasMore          bool     `json:"hasMore"`
 }
 
 type GetFlamegraphSpansForTraceResponse struct {
@@ -336,6 +337,7 @@ type GetFlamegraphSpansForTraceResponse struct {
 	EndTimestampMillis   uint64              `json:"endTimestampMillis"`
 	DurationNano         uint64              `json:"durationNano"`
 	Spans                [][]*FlamegraphSpan `json:"spans"`
+	HasMore              bool                `json:"hasMore"`
 }
 
 type OtelSpanRef struct {

pkg/query-service/utils/time.go

@@ -17,3 +17,7 @@ func Elapsed(funcName string, args map[string]interface{}) func() {
 		zap.L().Info("Elapsed time", zapFields...)
 	}
 }
+
+func MilliToNano(milliTS uint64) uint64 {
+	return milliTS * 1000_000
+}

pkg/signoz/provider.go

@@ -169,7 +169,6 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddAnonymousPublicDashboardTransactionFactory(sqlstore),
 		sqlmigration.NewAddRootUserFactory(sqlstore, sqlschema),
 		sqlmigration.NewAddUserEmailOrgIDIndexFactory(sqlstore, sqlschema),
-		sqlmigration.NewMigrateRulesV4ToV5Factory(sqlstore, telemetryStore),
 	)
 }
 

pkg/sqlmigration/066_migrate_rules_v4_to_v5_post_deprecation.go

@@ -1,209 +0,0 @@
-package sqlmigration
-
-import (
-	"context"
-	"database/sql"
-	"encoding/json"
-	"log/slog"
-
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/transition"
-	"github.com/uptrace/bun"
-	"github.com/uptrace/bun/migrate"
-)
-
-type migrateRulesV4ToV5 struct {
-	store          sqlstore.SQLStore
-	telemetryStore telemetrystore.TelemetryStore
-	logger         *slog.Logger
-}
-
-func NewMigrateRulesV4ToV5Factory(
-	store sqlstore.SQLStore,
-	telemetryStore telemetrystore.TelemetryStore,
-) factory.ProviderFactory[SQLMigration, Config] {
-	return factory.NewProviderFactory(
-		factory.MustNewName("migrate_rules_post_deprecation"),
-		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
-			return &migrateRulesV4ToV5{
-				store:          store,
-				telemetryStore: telemetryStore,
-				logger:         ps.Logger,
-			}, nil
-		})
-}
-
-func (migration *migrateRulesV4ToV5) Register(migrations *migrate.Migrations) error {
-	if err := migrations.Register(migration.Up, migration.Down); err != nil {
-		return err
-	}
-	return nil
-}
-
-func (migration *migrateRulesV4ToV5) getLogDuplicateKeys(ctx context.Context) ([]string, error) {
-	query := `
-		SELECT name
-		FROM (
-			SELECT DISTINCT name FROM signoz_logs.distributed_logs_attribute_keys
-			INTERSECT
-			SELECT DISTINCT name FROM signoz_logs.distributed_logs_resource_keys
-		)
-		ORDER BY name
-	`
-
-	rows, err := migration.telemetryStore.ClickhouseDB().Query(ctx, query)
-	if err != nil {
-		migration.logger.WarnContext(ctx, "failed to query log duplicate keys", "error", err)
-		return nil, nil
-	}
-	defer rows.Close()
-
-	var keys []string
-	for rows.Next() {
-		var key string
-		if err := rows.Scan(&key); err != nil {
-			migration.logger.WarnContext(ctx, "failed to scan log duplicate key", "error", err)
-			continue
-		}
-		keys = append(keys, key)
-	}
-
-	return keys, nil
-}
-
-func (migration *migrateRulesV4ToV5) getTraceDuplicateKeys(ctx context.Context) ([]string, error) {
-	query := `
-		SELECT tagKey
-		FROM signoz_traces.distributed_span_attributes_keys
-		WHERE tagType IN ('tag', 'resource')
-		GROUP BY tagKey
-		HAVING COUNT(DISTINCT tagType) > 1
-		ORDER BY tagKey
-	`
-
-	rows, err := migration.telemetryStore.ClickhouseDB().Query(ctx, query)
-	if err != nil {
-		migration.logger.WarnContext(ctx, "failed to query trace duplicate keys", "error", err)
-		return nil, nil
-	}
-	defer rows.Close()
-
-	var keys []string
-	for rows.Next() {
-		var key string
-		if err := rows.Scan(&key); err != nil {
-			migration.logger.WarnContext(ctx, "failed to scan trace duplicate key", "error", err)
-			continue
-		}
-		keys = append(keys, key)
-	}
-
-	return keys, nil
-}
-
-func (migration *migrateRulesV4ToV5) Up(ctx context.Context, db *bun.DB) error {
-	logsKeys, err := migration.getLogDuplicateKeys(ctx)
-	if err != nil {
-		return err
-	}
-
-	tracesKeys, err := migration.getTraceDuplicateKeys(ctx)
-	if err != nil {
-		return err
-	}
-
-	tx, err := db.BeginTx(ctx, nil)
-	if err != nil {
-		return err
-	}
-
-	defer func() {
-		_ = tx.Rollback()
-	}()
-
-	var rules []struct {
-		ID   string         `bun:"id"`
-		Data map[string]any `bun:"data"`
-	}
-
-	err = tx.NewSelect().
-		Table("rule").
-		Column("id", "data").
-		Scan(ctx, &rules)
-	if err != nil {
-		if err == sql.ErrNoRows {
-			return nil
-		}
-		return err
-	}
-
-	alertsMigrator := transition.NewAlertMigrateV5(migration.logger, logsKeys, tracesKeys)
-
-	count := 0
-
-	for _, rule := range rules {
-		version, _ := rule.Data["version"].(string)
-
-		if version == "v5" {
-			continue
-		}
-
-		if version == "" {
-			migration.logger.WarnContext(ctx, "unexpected empty version for rule", "rule_id", rule.ID)
-		}
-
-		migration.logger.InfoContext(ctx, "migrating rule v4 to v5", "rule_id", rule.ID, "current_version", version)
-
-		// Check if the queries envelope already exists and is non-empty
-		hasQueriesEnvelope := false
-		if condition, ok := rule.Data["condition"].(map[string]any); ok {
-			if compositeQuery, ok := condition["compositeQuery"].(map[string]any); ok {
-				if queries, ok := compositeQuery["queries"].([]any); ok && len(queries) > 0 {
-					hasQueriesEnvelope = true
-				}
-			}
-		}
-
-		if hasQueriesEnvelope {
-			// already has queries envelope, just bump version
-			// this is because user made a mistake of choosing version
-			migration.logger.InfoContext(ctx, "rule already has queries envelope, bumping version", "rule_id", rule.ID)
-			rule.Data["version"] = "v5"
-		} else {
-			// old format, run full migration
-			migration.logger.InfoContext(ctx, "rule has old format, running full migration", "rule_id", rule.ID)
-			updated := alertsMigrator.Migrate(ctx, rule.Data)
-			if !updated {
-				migration.logger.WarnContext(ctx, "expected updated to be true but got false", "rule_id", rule.ID)
-				continue
-			}
-			rule.Data["version"] = "v5"
-		}
-
-		dataJSON, err := json.Marshal(rule.Data)
-		if err != nil {
-			return err
-		}
-
-		_, err = tx.NewUpdate().
-			Table("rule").
-			Set("data = ?", string(dataJSON)).
-			Where("id = ?", rule.ID).
-			Exec(ctx)
-		if err != nil {
-			return err
-		}
-		count++
-	}
-	if count != 0 {
-		migration.logger.InfoContext(ctx, "migrate v4 alerts", "count", count)
-	}
-
-	return tx.Commit()
-}
-
-func (migration *migrateRulesV4ToV5) Down(ctx context.Context, db *bun.DB) error {
-	return nil
-}

pkg/telemetrymetadata/body_json_metadata.go

@@ -10,6 +10,7 @@ import (
 	"github.com/ClickHouse/clickhouse-go/v2/lib/chcol"
 	schemamigrator "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
 	"github.com/SigNoz/signoz-otel-collector/constants"
+	"github.com/SigNoz/signoz-otel-collector/utils"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/querybuilder"
 	"github.com/SigNoz/signoz/pkg/telemetrylogs"
@@ -112,7 +113,7 @@ func (t *telemetryMetaStore) buildBodyJSONPaths(ctx context.Context,
 
 	for _, fieldKey := range fieldKeys {
 		promotedKey := strings.Split(fieldKey.Name, telemetrytypes.ArraySep)[0]
-		fieldKey.Materialized = promoted[promotedKey]
+		fieldKey.Materialized = promoted.Contains(promotedKey)
 		fieldKey.Indexes = indexes[fieldKey.Name]
 	}
 
@@ -294,6 +295,33 @@ func (t *telemetryMetaStore) ListLogsJSONIndexes(ctx context.Context, filters ..
 	return indexes, nil
 }
 
+func (t *telemetryMetaStore) ListPromotedPaths(ctx context.Context, paths ...string) (map[string]struct{}, error) {
+	sb := sqlbuilder.Select("path").From(fmt.Sprintf("%s.%s", DBName, PromotedPathsTableName))
+	pathConditions := []string{}
+	for _, path := range paths {
+		pathConditions = append(pathConditions, sb.Equal("path", path))
+	}
+	sb.Where(sb.Or(pathConditions...))
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, CodeFailLoadPromotedPaths, "failed to load promoted paths")
+	}
+	defer rows.Close()
+
+	next := make(map[string]struct{})
+	for rows.Next() {
+		var path string
+		if err := rows.Scan(&path); err != nil {
+			return nil, errors.WrapInternalf(err, CodeFailLoadPromotedPaths, "failed to scan promoted path")
+		}
+		next[path] = struct{}{}
+	}
+
+	return next, nil
+}
+
 // TODO(Piyush): Remove this if not used in future
 func (t *telemetryMetaStore) ListJSONValues(ctx context.Context, path string, limit int) (*telemetrytypes.TelemetryFieldValues, bool, error) {
 	path = CleanPathPrefixes(path)
@@ -456,12 +484,11 @@ func derefValue(v any) any {
 	return val.Interface()
 }
 
-// IsPathPromoted checks if a specific path is promoted (Column Evolution table: field_name for logs body).
+// IsPathPromoted checks if a specific path is promoted
 func (t *telemetryMetaStore) IsPathPromoted(ctx context.Context, path string) (bool, error) {
 	split := strings.Split(path, telemetrytypes.ArraySep)
-	pathSegment := split[0]
-	query := fmt.Sprintf("SELECT 1 FROM %s.%s WHERE signal = ? AND column_name = ? AND field_context = ? AND field_name = ? LIMIT 1", DBName, PromotedPathsTableName)
-	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, telemetrytypes.SignalLogs, telemetrylogs.LogsV2BodyPromotedColumn, telemetrytypes.FieldContextBody, pathSegment)
+	query := fmt.Sprintf("SELECT 1 FROM %s.%s WHERE path = ? LIMIT 1", DBName, PromotedPathsTableName)
+	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, split[0])
 	if err != nil {
 		return false, errors.WrapInternalf(err, CodeFailCheckPathPromoted, "failed to check if path %s is promoted", path)
 	}
@@ -470,24 +497,15 @@ func (t *telemetryMetaStore) IsPathPromoted(ctx context.Context, path string) (b
 	return rows.Next(), nil
 }
 
-// GetPromotedPaths returns promoted paths from the Column Evolution table (field_name for logs body).
-func (t *telemetryMetaStore) GetPromotedPaths(ctx context.Context, paths ...string) (map[string]bool, error) {
-	sb := sqlbuilder.Select("field_name").From(fmt.Sprintf("%s.%s", DBName, PromotedPathsTableName))
-	conditions := []string{
-		sb.Equal("signal", telemetrytypes.SignalLogs),
-		sb.Equal("column_name", telemetrylogs.LogsV2BodyPromotedColumn),
-		sb.Equal("field_context", telemetrytypes.FieldContextBody),
-		sb.NotEqual("field_name", "__all__"),
+// GetPromotedPaths checks if a specific path is promoted
+func (t *telemetryMetaStore) GetPromotedPaths(ctx context.Context, paths ...string) (*utils.ConcurrentSet[string], error) {
+	sb := sqlbuilder.Select("path").From(fmt.Sprintf("%s.%s", DBName, PromotedPathsTableName))
+	pathConditions := []string{}
+	for _, path := range paths {
+		split := strings.Split(path, telemetrytypes.ArraySep)
+		pathConditions = append(pathConditions, sb.Equal("path", split[0]))
 	}
-	if len(paths) > 0 {
-		pathArgs := make([]interface{}, len(paths))
-		for i, path := range paths {
-			split := strings.Split(path, telemetrytypes.ArraySep)
-			pathArgs[i] = split[0]
-		}
-		conditions = append(conditions, sb.In("field_name", pathArgs))
-	}
-	sb.Where(sb.And(conditions...))
+	sb.Where(sb.Or(pathConditions...))
 
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 	rows, err := t.telemetrystore.ClickhouseDB().Query(ctx, query, args...)
@@ -496,13 +514,13 @@ func (t *telemetryMetaStore) GetPromotedPaths(ctx context.Context, paths ...stri
 	}
 	defer rows.Close()
 
-	promotedPaths := make(map[string]bool)
+	promotedPaths := utils.NewConcurrentSet[string]()
 	for rows.Next() {
-		var fieldName string
-		if err := rows.Scan(&fieldName); err != nil {
+		var path string
+		if err := rows.Scan(&path); err != nil {
 			return nil, errors.WrapInternalf(err, CodeFailCheckPathPromoted, "failed to scan promoted path")
 		}
-		promotedPaths[fieldName] = true
+		promotedPaths.Insert(path)
 	}
 
 	return promotedPaths, nil
@@ -516,22 +534,21 @@ func CleanPathPrefixes(path string) string {
 	return path
 }
 
-// PromotePaths inserts promoted paths into the Column Evolution table (same schema as signoz-otel-collector metadata_migrations).
 func (t *telemetryMetaStore) PromotePaths(ctx context.Context, paths ...string) error {
 	batch, err := t.telemetrystore.ClickhouseDB().PrepareBatch(ctx,
-		fmt.Sprintf("INSERT INTO %s.%s (signal, column_name, column_type, field_context, field_name, version, release_time) VALUES", DBName,
+		fmt.Sprintf("INSERT INTO %s.%s (path, created_at) VALUES", DBName,
 			PromotedPathsTableName))
 	if err != nil {
 		return errors.WrapInternalf(err, CodeFailedToPrepareBatch, "failed to prepare batch")
 	}
 
-	releaseTime := time.Now().UnixNano()
+	nowMs := uint64(time.Now().UnixMilli())
 	for _, p := range paths {
 		trimmed := strings.TrimSpace(p)
 		if trimmed == "" {
 			continue
 		}
-		if err := batch.Append(telemetrytypes.SignalLogs, telemetrylogs.LogsV2BodyPromotedColumn, "JSON()", telemetrytypes.FieldContextBody, trimmed, 0, releaseTime); err != nil {
+		if err := batch.Append(trimmed, nowMs); err != nil {
 			_ = batch.Abort()
 			return errors.WrapInternalf(err, CodeFailedToAppendPath, "failed to append path")
 		}

pkg/telemetrymetadata/tables.go

@@ -7,7 +7,6 @@ const (
 	AttributesMetadataTableName      = "distributed_attributes_metadata"
 	AttributesMetadataLocalTableName = "attributes_metadata"
 	PathTypesTableName               = otelcollectorconst.DistributedPathTypesTable
-	// Column Evolution table stores promoted paths as (signal, column_name, field_context, field_name); see signoz-otel-collector metadata_migrations.
-	PromotedPathsTableName           = "distributed_column_evolution_metadata"
+	PromotedPathsTableName           = otelcollectorconst.DistributedPromotedPathsTable
 	SkipIndexTableName               = "system.data_skipping_indices"
 )

pkg/types/ruletypes/api_params.go

@@ -355,10 +355,6 @@ func (r *PostableRule) validate() error {
 		errs = append(errs, signozError.NewInvalidInputf(signozError.CodeInvalidInput, "composite query is required"))
 	}
 
-	if r.Version != "v5" {
-		errs = append(errs, signozError.NewInvalidInputf(signozError.CodeInvalidInput, "only version v5 is supported, got %q", r.Version))
-	}
-
 	if isAllQueriesDisabled(r.RuleCondition.CompositeQuery) {
 		errs = append(errs, signozError.NewInvalidInputf(signozError.CodeInvalidInput, "all queries are disabled in rule condition"))
 	}

pkg/types/ruletypes/api_params_test.go

@@ -108,7 +108,6 @@ func TestParseIntoRule(t *testing.T) {
 				"ruleType": "threshold_rule",
 				"evalWindow": "5m",
 				"frequency": "1m",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -151,7 +150,6 @@ func TestParseIntoRule(t *testing.T) {
 			content: []byte(`{
 				"alert": "DefaultsRule",
 				"ruleType": "threshold_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -189,7 +187,6 @@ func TestParseIntoRule(t *testing.T) {
 			initRule: PostableRule{},
 			content: []byte(`{
 				"alert": "PromQLRule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "promql",
@@ -259,7 +256,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "SeverityLabelTest",
 				"schemaVersion": "v1",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -348,7 +344,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "NoLabelsTest",
 				"schemaVersion": "v1",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -389,7 +384,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "OverwriteTest",
 				"schemaVersion": "v1",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -480,7 +474,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "V2Test",
 				"schemaVersion": "v2",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -524,7 +517,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			initRule: PostableRule{},
 			content: []byte(`{
 				"alert": "DefaultSchemaTest",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -577,7 +569,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 func TestParseIntoRuleThresholdGeneration(t *testing.T) {
 	content := []byte(`{
 		"alert": "TestThresholds",
-		"version": "v5",
 		"condition": {
 			"compositeQuery": {
 				"queryType": "builder",
@@ -648,7 +639,6 @@ func TestParseIntoRuleMultipleThresholds(t *testing.T) {
 		"schemaVersion": "v2",
 		"alert": "MultiThresholdAlert",
 		"ruleType": "threshold_rule",
-		"version": "v5",
 		"condition": {
 			"compositeQuery": {
 				"queryType": "builder",
@@ -742,7 +732,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -777,7 +766,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -811,7 +799,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyAboveTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -846,7 +833,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyAboveTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -880,7 +866,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowAllTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -916,7 +901,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowAllTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -951,7 +935,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyOutOfBoundsTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -986,7 +969,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "ThresholdTest",
 				"ruleType": "threshold_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -1021,7 +1003,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "ThresholdTest",
 				"ruleType": "threshold_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",

pkg/types/telemetrytypes/store.go

@@ -36,7 +36,7 @@ type MetadataStore interface {
 	ListLogsJSONIndexes(ctx context.Context, filters ...string) (map[string][]schemamigrator.Index, error)
 
 	// ListPromotedPaths lists the promoted paths.
-	GetPromotedPaths(ctx context.Context, paths ...string) (map[string]bool, error)
+	ListPromotedPaths(ctx context.Context, paths ...string) (map[string]struct{}, error)
 
 	// PromotePaths promotes the paths.
 	PromotePaths(ctx context.Context, paths ...string) error

pkg/types/telemetrytypes/telemetrytypestest/metadata_store.go

@@ -16,7 +16,7 @@ type MockMetadataStore struct {
 	RelatedValuesMap   map[string][]string
 	AllValuesMap       map[string]*telemetrytypes.TelemetryFieldValues
 	TemporalityMap     map[string]metrictypes.Temporality
-	PromotedPathsMap   map[string]bool
+	PromotedPathsMap   map[string]struct{}
 	LogsJSONIndexesMap map[string][]schemamigrator.Index
 	LookupKeysMap      map[telemetrytypes.MetricMetadataLookupKey]int64
 }
@@ -28,7 +28,7 @@ func NewMockMetadataStore() *MockMetadataStore {
 		RelatedValuesMap:   make(map[string][]string),
 		AllValuesMap:       make(map[string]*telemetrytypes.TelemetryFieldValues),
 		TemporalityMap:     make(map[string]metrictypes.Temporality),
-		PromotedPathsMap:   make(map[string]bool),
+		PromotedPathsMap:   make(map[string]struct{}),
 		LogsJSONIndexesMap: make(map[string][]schemamigrator.Index),
 		LookupKeysMap:      make(map[telemetrytypes.MetricMetadataLookupKey]int64),
 	}
@@ -295,13 +295,13 @@ func (m *MockMetadataStore) SetTemporality(metricName string, temporality metric
 // PromotePaths promotes the paths.
 func (m *MockMetadataStore) PromotePaths(ctx context.Context, paths ...string) error {
 	for _, path := range paths {
-		m.PromotedPathsMap[path] = true
+		m.PromotedPathsMap[path] = struct{}{}
 	}
 	return nil
 }
 
-// GetPromotedPaths returns the promoted paths.
-func (m *MockMetadataStore) GetPromotedPaths(ctx context.Context, paths ...string) (map[string]bool, error) {
+// ListPromotedPaths lists the promoted paths.
+func (m *MockMetadataStore) ListPromotedPaths(ctx context.Context, paths ...string) (map[string]struct{}, error) {
 	return m.PromotedPathsMap, nil
 }