feat(charts): make stacking a property of TimeSeries and Bar charts

Charts now take a `stack` prop and hand it to their config, which derives
everything else. Callers no longer compute fill bands or transform data:
V1 and V2 bar panels, Meter Explorer and Billing each drop their
`setBands` call and declare `stack` instead.

The stacking hook moves next to the shell that runs it and is no longer
bar-specific, so TimeSeries stacks too — which is what the upcoming area
chart will build on. `stack` sits on the two chart prop types rather than
the shared config, so kinds that cannot stack never expose it.

Assisted-by: Claude Opus 5

frontend/public/locales/en-GB/titles.json

@@ -64,6 +64,5 @@
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
 	"AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview",
 	"AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration",
-	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping",
-	"AI_OBSERVABILITY_EXPLORER": "SigNoz | AI Observability Explorer"
+	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping"
 }

frontend/public/locales/en/titles.json

@@ -89,6 +89,5 @@
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
 	"AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview",
 	"AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration",
-	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping",
-	"AI_OBSERVABILITY_EXPLORER": "SigNoz | AI Observability Explorer"
+	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping"
 }

frontend/src/components/LogDetail/__tests__/LogDetail.test.tsx

@@ -18,9 +18,10 @@ jest.mock('periscope/components/DataViewer', () => ({
 	DataViewer: (): JSX.Element => <div data-testid="overview-data-viewer" />,
 }));
 
-// Force v2 for these tests regardless of route.
-jest.mock('../useIsLogDetailsV2', () => ({
-	useIsLogDetailsV2: (): boolean => true,
+// The flag to be removed later
+jest.mock('../constants', () => ({
+	...jest.requireActual('../constants'),
+	isLogDetailsV2: true,
 }));
 
 const mockLog: ILog = {

frontend/src/components/LogDetail/constants.ts

@@ -1,3 +1,6 @@
+// temporary flag to be removed with old log details code.
+export const isLogDetailsV2 = true;
+
 export const VIEW_TYPES = {
 	OVERVIEW: 'OVERVIEW',
 	JSON: 'JSON',

frontend/src/components/LogDetail/index.tsx

@@ -51,12 +51,11 @@ import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
-import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
+import { isLogDetailsV2, RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
 import LogDetailsHeader from './LogDetailsHeader/LogDetailsHeader';
 import { useLogNavigation } from './LogDetailsHeader/useLogNavigation';
 import LogHighlights from './LogHighlights/LogHighlights';
-import { useIsLogDetailsV2 } from './useIsLogDetailsV2';
 
 import './LogDetails.styles.scss';
 
@@ -93,8 +92,6 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery } = useQueryBuilder();
 
-	const isLogDetailsV2 = useIsLogDetailsV2();
-
 	// Handle clicks outside to close drawer, except on explicitly ignored regions
 	useEffect(() => {
 		const handleClickOutside = (e: MouseEvent): void => {

frontend/src/components/LogDetail/useIsLogDetailsV2.ts

@@ -1,9 +0,0 @@
-import ROUTES from 'constants/routes';
-import { useLocation } from 'react-router-dom';
-
-// v2 is rolled out only on the logs explorer route for now; every other surface
-// (dashboards, infra monitoring, etc.) keeps the v1 log details view.
-export function useIsLogDetailsV2(): boolean {
-	const { pathname } = useLocation();
-	return pathname === ROUTES.LOGS_EXPLORER;
-}

frontend/src/constants/localStorage.ts

@@ -11,8 +11,6 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_OPTIONS = 'TRACES_LIST_OPTIONS',
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
-	AI_OBSERVABILITY_LIST_COLUMNS = 'AI_OBSERVABILITY_LIST_COLUMNS',
-	AI_OBSERVABILITY_TRACE_VIEW_COLUMNS = 'AI_OBSERVABILITY_TRACE_VIEW_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -5,6 +5,7 @@ import BarChart from 'container/DashboardContainer/visualization/charts/BarChart
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+import { StackMode } from 'lib/uPlotV2/config/types';
 import {
 	LegendPosition,
 	TooltipRenderArgs,
@@ -131,9 +132,9 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 			<div ref={graphRef} className={styles.graphContainer}>
 				{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 					<BarChart
+						stack={StackMode.Normal}
 						config={config}
 						data={chartData}
-						isStackedBarChart
 						legendConfig={{ position: LegendPosition.BOTTOM }}
 						customTooltip={renderBillingTooltip}
 						width={containerDimensions.width}

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/prepareBillingBarConfig.test.ts

@@ -58,26 +58,17 @@ describe('prepareBillingBarConfig', () => {
 		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
 	});
 
-	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
+	it('sets padding and focus alpha for behavioral parity', () => {
 		const builder = prepareBillingBarConfig({
 			...baseProps,
 			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
 		});
 		const config = builder.getConfig();
-		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
+		// Stacking bands come from the chart now — see useChartStacking.
 		expect(config.padding).toStrictEqual([32, 32, 16, 16]);
 		expect(config.focus).toStrictEqual({ alpha: 0.3 });
 	});
 
-	it('sets no bands when result is empty', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse([]),
-		});
-		const config = builder.getConfig();
-		expect(config.bands).toBeUndefined();
-	});
-
 	it('uses queryName as label when legend is undefined', () => {
 		const apiResponse: MetricRangePayloadProps = {
 			data: {

frontend/src/container/BillingContainer/BillingUsageGraph/prepareBillingBarConfig.ts

@@ -1,7 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
 import { DrawStyle } from 'lib/uPlotV2/config/types';
 import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
@@ -63,7 +62,6 @@ export function prepareBillingBarConfig({
 		});
 	});
 
-	builder.setBands(getInitialStackedBands(results.length));
 	builder.setPadding([32, 32, 16, 16]);
 	builder.setFocus({ alpha: 0.3 });
 

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -6,25 +6,24 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 
-import { useBarChartStacking } from '../../hooks/useBarChartStacking';
+import { StackMode } from 'lib/uPlotV2/config/types';
+
 import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
 	const {
 		children,
-		isStackedBarChart,
 		customTooltip,
 		config,
 		data,
+		stack = StackMode.None,
 		pinnedTooltipElement,
 		...rest
 	} = props;
 
-	const chartData = useBarChartStacking({
-		data,
-		isStackedBarChart,
-		config,
-	});
+	// Written during render so it lands before UPlotChart's effect reads the config,
+	// which derives the fill bands, percent axis unit and percent range from it.
+	config.setStack(stack);
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
@@ -37,7 +36,6 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				isStackedBarChart: isStackedBarChart,
 				canPinTooltip: rest.canPinTooltip,
 				renderTooltipFooter: rest.renderTooltipFooter,
 			};
@@ -48,7 +46,6 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			rest.timezone,
 			rest.yAxisUnit,
 			rest.decimalPrecision,
-			isStackedBarChart,
 			rest.canPinTooltip,
 			rest.renderTooltipFooter,
 		],
@@ -58,7 +55,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 		<ChartWrapper
 			{...rest}
 			config={config}
-			data={chartData}
+			data={data}
 			customTooltip={renderTooltip}
 			pinnedTooltipElement={pinnedTooltipElement}
 		>

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -6,12 +6,15 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 import UPlotChart from 'lib/uPlotV2/components/UPlotChart/UPlotChart';
+import { StackMode } from 'lib/uPlotV2/config/types';
+import { prepareAlignedData } from 'lib/uPlotV2/components/UPlotChart/utils';
 import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
 import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
 import noop from 'lodash-es/noop';
 import uPlot from 'uplot';
 
-import { ChartProps } from '../types';
+import { ChartWrapperProps } from '../types';
+import { useChartStacking } from './useChartStacking';
 
 const TOOLTIP_WIDTH_PADDING = 120;
 const TOOLTIP_MIN_WIDTH = 300;
@@ -39,9 +42,20 @@ export default function ChartWrapper({
 	pinnedTooltipElement,
 	tooltipPortalRoot,
 	'data-testid': testId,
-}: ChartProps): JSX.Element {
+}: ChartWrapperProps): JSX.Element {
 	const plotInstanceRef = useRef<uPlot | null>(null);
 
+	const stack = config.getStackMode();
+	const chartData = useChartStacking({ data, config });
+
+	// Tooltips need pre-stack values, gap-processed exactly as UPlotChart processes the
+	// plot data — otherwise the cursor's index addresses a shorter array.
+	const unstackedData = useMemo(
+		() =>
+			stack === StackMode.None ? undefined : prepareAlignedData({ data, config }),
+		[data, config, stack],
+	);
+
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
 			if (!showLegend) {
@@ -61,11 +75,11 @@ export default function ChartWrapper({
 	const renderTooltipCallback = useCallback(
 		(args: TooltipRenderArgs): React.ReactNode => {
 			if (customTooltip) {
-				return customTooltip(args);
+				return customTooltip({ ...args, unstackedData });
 			}
 			return null;
 		},
-		[customTooltip],
+		[customTooltip, unstackedData],
 	);
 
 	const syncMetadata = useMemo(
@@ -91,7 +105,7 @@ export default function ChartWrapper({
 				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
 					<UPlotChart
 						config={config}
-						data={data}
+						data={chartData}
 						width={chartWidth}
 						height={chartHeight}
 						plotRef={(plot): void => {

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/__tests__/useChartStacking.test.ts

@@ -0,0 +1,98 @@
+import { renderHook } from '@testing-library/react';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { StackMode } from 'lib/uPlotV2/config/types';
+import uPlot from 'uplot';
+
+import { useChartStacking } from '../useChartStacking';
+
+type Hooks = Record<string, (...args: unknown[]) => void>;
+
+function createConfig(stack: StackMode): {
+	config: UPlotConfigBuilder;
+	hooks: Hooks;
+} {
+	const hooks: Hooks = {};
+	const config = {
+		getStackMode: (): StackMode => stack,
+		addHook: jest.fn((type: string, hook: (...args: unknown[]) => void) => {
+			hooks[type] = hook;
+			return jest.fn();
+		}),
+	} as unknown as UPlotConfigBuilder;
+	return { config, hooks };
+}
+
+const data = [[1], [30], [10]] as unknown as uPlot.AlignedData;
+
+describe('useChartStacking', () => {
+	it('returns the data untouched and registers nothing when the config says `none`', () => {
+		const { config } = createConfig(StackMode.None);
+		const { result } = renderHook(() => useChartStacking({ data, config }));
+
+		expect(result.current).toBe(data);
+		expect(config.addHook).not.toHaveBeenCalled();
+	});
+
+	it('treats a missing config as unstacked', () => {
+		const { result } = renderHook(() => useChartStacking({ data, config: null }));
+
+		expect(result.current).toBe(data);
+	});
+
+	it('accumulates raw values when the config declares `normal`', () => {
+		const { config } = createConfig(StackMode.Normal);
+		const { result } = renderHook(() => useChartStacking({ data, config }));
+
+		expect(result.current).toStrictEqual([[1], [40], [10]]);
+	});
+
+	it('rescales each column to its total when the config declares `percent`', () => {
+		const { config } = createConfig(StackMode.Percent);
+		const { result } = renderHook(() => useChartStacking({ data, config }));
+
+		expect(result.current).toStrictEqual([[1], [100], [25]]);
+	});
+
+	it('registers the uPlot hooks that re-stack on data and visibility changes', () => {
+		const { config } = createConfig(StackMode.Normal);
+		renderHook(() => useChartStacking({ data, config }));
+
+		expect(
+			(config.addHook as jest.Mock).mock.calls.map(([type]) => type),
+		).toStrictEqual(['setData', 'setSeries']);
+	});
+
+	it('re-stacks from the raw values when the legend hides a series', () => {
+		const { config, hooks } = createConfig(StackMode.Normal);
+		renderHook(() => useChartStacking({ data, config }));
+
+		const plot = {
+			data: [[1]],
+			series: [{}, { show: true }, { show: false }],
+			delBand: jest.fn(),
+			addBand: jest.fn(),
+			setData: jest.fn(),
+		};
+		hooks.setSeries(plot, 2, { show: false });
+
+		// The hidden series keeps its raw value and stops contributing to the total.
+		expect(plot.setData).toHaveBeenCalledWith([[1], [30], [10]]);
+		expect(plot.delBand).toHaveBeenCalledWith(null);
+	});
+
+	it('ignores a focus-only setSeries so hovering does not re-stack', () => {
+		const { config, hooks } = createConfig(StackMode.Normal);
+		renderHook(() => useChartStacking({ data, config }));
+
+		const plot = {
+			data: [[1]],
+			series: [{}, { show: true }, { show: true }],
+			delBand: jest.fn(),
+			addBand: jest.fn(),
+			setData: jest.fn(),
+		};
+		hooks.setSeries(plot, 1, { focus: true });
+
+		expect(plot.setData).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/useChartStacking.ts

@@ -6,10 +6,11 @@ import {
 	useRef,
 } from 'react';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { StackMode } from 'lib/uPlotV2/config/types';
 import { has } from 'lodash-es';
 import uPlot from 'uplot';
 
-import { stackSeries } from '../charts/utils/stackSeriesUtils';
+import { stackSeries } from '../utils/stackSeriesUtils';
 
 /** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
 function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
@@ -31,12 +32,12 @@ function canApplyStacking(
 
 function setupStackingHooks(
 	config: UPlotConfigBuilder,
-	applyStackingToChart: (plot: uPlot) => void,
+	restack: (plot: uPlot) => void,
 	isUpdatingRef: MutableRefObject<boolean>,
 ): () => void {
 	const onDataChange = (plot: uPlot): void => {
 		if (!isUpdatingRef.current) {
-			applyStackingToChart(plot);
+			restack(plot);
 		}
 	};
 
@@ -45,8 +46,9 @@ function setupStackingHooks(
 		_seriesIdx: number | null,
 		opts: uPlot.Series,
 	): void => {
+		// uPlot fires setSeries for hover focus too; only visibility changes restack.
 		if (!has(opts, 'focus')) {
-			applyStackingToChart(plot);
+			restack(plot);
 		}
 	};
 
@@ -62,64 +64,69 @@ function setupStackingHooks(
 	};
 }
 
-export interface UseBarChartStackingParams {
+export interface UseChartStackingParams {
 	data: uPlot.AlignedData;
-	isStackedBarChart?: boolean;
 	config: UPlotConfigBuilder | null;
 }
 
 /**
- * Handles stacking for bar charts: computes initial stacked data and re-stacks
- * when data or series visibility changes (e.g. legend toggles).
+ * Stacks a chart's data for the mode declared on its config, and re-stacks on data or
+ * visibility changes. The pre-stack values live in a ref because the uPlot hooks that
+ * read them run outside React's render cycle.
  */
-export function useBarChartStacking({
+export function useChartStacking({
 	data,
-	isStackedBarChart = false,
 	config,
-}: UseBarChartStackingParams): uPlot.AlignedData {
-	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
+}: UseChartStackingParams): uPlot.AlignedData {
+	const stack = config?.getStackMode() ?? StackMode.None;
 	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
-	unstackedDataRef.current = isStackedBarChart ? data : null;
+	unstackedDataRef.current = stack === 'none' ? null : data;
 
-	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
+	// Guards the re-entrant setData below, which would otherwise re-trigger our own hook.
 	const isUpdatingChartRef = useRef(false);
 
 	const chartData = useMemo((): uPlot.AlignedData => {
-		if (!isStackedBarChart || !data || data.length < 2) {
+		if (stack === StackMode.None || !data || data.length < 2) {
 			return data;
 		}
 		const noSeriesHidden = (): boolean => false; // include all series in initial stack
-		const { data: stacked } = stackSeries(data, noSeriesHidden);
-		return stacked;
-	}, [data, isStackedBarChart]);
+		return stackSeries(data, noSeriesHidden, stack).data;
+	}, [data, stack]);
 
-	const applyStackingToChart = useCallback((plot: uPlot): void => {
-		const unstacked = unstackedDataRef.current;
-		if (
-			!unstacked ||
-			!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
-		) {
-			return;
-		}
+	const restack = useCallback(
+		(plot: uPlot): void => {
+			const unstacked = unstackedDataRef.current;
+			if (
+				!unstacked ||
+				!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
+			) {
+				return;
+			}
 
-		const shouldExcludeSeries = (idx: number): boolean =>
-			isSeriesHidden(plot, idx);
-		const { data: stacked, bands } = stackSeries(unstacked, shouldExcludeSeries);
+			const shouldExcludeSeries = (idx: number): boolean =>
+				isSeriesHidden(plot, idx);
+			const { data: stacked, bands } = stackSeries(
+				unstacked,
+				shouldExcludeSeries,
+				stack,
+			);
 
-		plot.delBand(null);
-		bands.forEach((band: uPlot.Band) => plot.addBand(band));
+			plot.delBand(null);
+			bands.forEach((band: uPlot.Band) => plot.addBand(band));
 
-		isUpdatingChartRef.current = true;
-		plot.setData(stacked);
-		isUpdatingChartRef.current = false;
-	}, []);
+			isUpdatingChartRef.current = true;
+			plot.setData(stacked);
+			isUpdatingChartRef.current = false;
+		},
+		[stack],
+	);
 
 	useLayoutEffect(() => {
-		if (!isStackedBarChart || !config) {
+		if (stack === StackMode.None || !config) {
 			return undefined;
 		}
-		return setupStackingHooks(config, applyStackingToChart, isUpdatingChartRef);
-	}, [isStackedBarChart, config, applyStackingToChart]);
+		return setupStackingHooks(config, restack, isUpdatingChartRef);
+	}, [stack, config, restack]);
 
 	return chartData;
 }

frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx

@@ -6,10 +6,16 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 
+import { StackMode } from 'lib/uPlotV2/config/types';
+
 import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, customTooltip, ...rest } = props;
+	const { children, customTooltip, stack = StackMode.None, ...rest } = props;
+
+	// Written during render so it lands before UPlotChart's effect reads the config,
+	// which derives the fill bands, percent axis unit and percent range from it.
+	rest.config.setStack(stack);
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -14,6 +14,7 @@ import {
 	ChartClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import type { StackMode } from 'lib/uPlotV2/config/types';
 
 interface BaseChartProps {
 	width: number;
@@ -52,27 +53,26 @@ interface UPlotChartDataProps {
 	groupByPerQuery?: Record<string, BaseAutocompleteData[]>;
 }
 
-export interface TimeSeriesChartProps
-	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
+/** Everything the shared uPlot shell consumes; each chart's props narrow it. */
+export interface ChartWrapperProps
+	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {}
+
+export interface TimeSeriesChartProps extends ChartWrapperProps {
 	timezone?: Timezone;
+	/** How series compose. Defaults to `none`, which draws them independently. */
+	stack?: StackMode;
 }
 
-export interface HistogramChartProps
-	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
+export interface BarChartProps extends ChartWrapperProps {
+	timezone?: Timezone;
+	/** How series compose. Defaults to `none`, which draws them independently. */
+	stack?: StackMode;
+}
+
+export interface HistogramChartProps extends ChartWrapperProps {
 	isQueriesMerged?: boolean;
 }
 
-export interface BarChartProps
-	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
-	isStackedBarChart?: boolean;
-	timezone?: Timezone;
-}
-
-export type ChartProps =
-	| TimeSeriesChartProps
-	| BarChartProps
-	| HistogramChartProps;
-
 /**
  * One resolved pie/donut slice: a display label, its (already parsed) positive
  * numeric value, and the colour used for the arc + legend swatch.

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackSeriesUtils.test.ts

@@ -0,0 +1,158 @@
+import { AlignedData } from 'uplot';
+
+import { StackMode } from 'lib/uPlotV2/config/types';
+
+import { stackSeries } from '../stackSeriesUtils';
+
+const includeAll = (): boolean => false;
+
+// Stacking is top-down: the first series carries the column total, the last its own
+// raw value. Every expectation below reads in that order.
+describe('stackSeries', () => {
+	it('is a no-op under `none`, returning the data and no bands', () => {
+		const data: AlignedData = [[1], [30], [10]];
+
+		const { data: result, bands } = stackSeries(data, includeAll, StackMode.None);
+
+		expect(result).toBe(data);
+		expect(bands).toStrictEqual([]);
+	});
+
+	describe('normal', () => {
+		it('accumulates raw values from the bottom series upward', () => {
+			const data: AlignedData = [
+				[1, 2],
+				[10, 20],
+				[1, 2],
+			];
+
+			expect(stackSeries(data, includeAll, StackMode.Normal).data).toStrictEqual([
+				[1, 2],
+				[11, 22],
+				[1, 2],
+			]);
+		});
+
+		it('treats nulls as 0 without breaking the running total', () => {
+			const data: AlignedData = [
+				[1, 2],
+				[10, null],
+				[1, 2],
+			];
+
+			expect(stackSeries(data, includeAll, StackMode.Normal).data).toStrictEqual([
+				[1, 2],
+				[11, 2],
+				[1, 2],
+			]);
+		});
+
+		it('emits one band per adjacent pair of participating series', () => {
+			const data: AlignedData = [[1], [10], [5], [1]];
+
+			expect(stackSeries(data, includeAll, StackMode.Normal).bands).toStrictEqual([
+				{ series: [1, 2] },
+				{ series: [2, 3] },
+			]);
+		});
+
+		it('copies omitted series through unstacked and skips their bands', () => {
+			const data: AlignedData = [[1], [10], [5], [1]];
+			const omitMiddle = (seriesIndex: number): boolean => seriesIndex === 2;
+
+			const { data: stacked, bands } = stackSeries(
+				data,
+				omitMiddle,
+				StackMode.Normal,
+			);
+
+			expect(stacked).toStrictEqual([[1], [11], [5], [1]]);
+			expect(bands).toStrictEqual([{ series: [1, 3] }]);
+		});
+	});
+
+	describe('percent', () => {
+		it('rescales each column to its total so the top series reads 100', () => {
+			const data: AlignedData = [
+				[1, 2],
+				[30, 10],
+				[10, 10],
+			];
+
+			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
+				[1, 2],
+				[100, 100],
+				[25, 50],
+			]);
+		});
+
+		it('normalises per column, so an identical series differs across x', () => {
+			const data: AlignedData = [
+				[1, 2],
+				[1, 3],
+				[1, 1],
+			];
+
+			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
+				[1, 2],
+				[100, 100],
+				[50, 25],
+			]);
+		});
+
+		it('excludes omitted series from the total, so the visible ones still reach 100', () => {
+			const data: AlignedData = [[1], [30], [10], [60]];
+			const omitLast = (seriesIndex: number): boolean => seriesIndex === 3;
+
+			expect(stackSeries(data, omitLast, StackMode.Percent).data).toStrictEqual([
+				[1],
+				[100],
+				[25],
+				[60],
+			]);
+		});
+
+		it('yields 0 for a column whose participating series sum to zero', () => {
+			const data: AlignedData = [
+				[1, 2],
+				[0, 5],
+				[0, 5],
+			];
+
+			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
+				[1, 2],
+				[0, 100],
+				[0, 50],
+			]);
+		});
+
+		it('divides by the signed total when a column mixes signs', () => {
+			// 30 + (-10) = 20, so the shares are 150% and -50% and still sum to 100.
+			const data: AlignedData = [[1], [30], [-10]];
+
+			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
+				[1],
+				[100],
+				[-50],
+			]);
+		});
+
+		it('yields 0 across a column whose signed total cancels to zero', () => {
+			const data: AlignedData = [[1], [10], [-10]];
+
+			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
+				[1],
+				[0],
+				[0],
+			]);
+		});
+	});
+
+	it('defaults to normal when no mode is given', () => {
+		const data: AlignedData = [[1], [30], [10]];
+
+		expect(stackSeries(data, includeAll).data).toStrictEqual(
+			stackSeries(data, includeAll, StackMode.Normal).data,
+		);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/utils/stackSeriesUtils.ts

@@ -1,13 +1,20 @@
+import { StackMode } from 'lib/uPlotV2/config/types';
 import uPlot, { AlignedData } from 'uplot';
 
 /**
  * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
+ * When `omit(seriesIndex)` returns true, that series keeps its raw values and
+ * contributes nothing to the total. `None` is a no-op.
  */
 export function stackSeries(
 	data: AlignedData,
 	omit: (seriesIndex: number) => boolean,
+	mode: StackMode = StackMode.Normal,
 ): { data: AlignedData; bands: uPlot.Band[] } {
+	if (mode === StackMode.None) {
+		return { data, bands: [] };
+	}
+
 	const timeAxis = data[0];
 	const pointCount = timeAxis.length;
 	const valueSeriesCount = data.length - 1; // exclude time axis
@@ -17,6 +24,7 @@ export function stackSeries(
 		valueSeriesCount,
 		pointCount,
 		omit,
+		mode,
 	});
 	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
 
@@ -31,6 +39,34 @@ interface BuildStackedSeriesParams {
 	valueSeriesCount: number;
 	pointCount: number;
 	omit: (seriesIndex: number) => boolean;
+	mode: StackMode;
+}
+
+/** Per-point total. Mixed-sign columns sum signed, as "share of total" implies. */
+function columnTotals({
+	data,
+	valueSeriesCount,
+	pointCount,
+	omit,
+}: Omit<BuildStackedSeriesParams, 'mode'>): number[] {
+	const totals = Array(pointCount).fill(0) as number[];
+
+	for (let seriesIndex = 1; seriesIndex <= valueSeriesCount; seriesIndex++) {
+		if (omit(seriesIndex)) {
+			continue;
+		}
+		const rawValues = data[seriesIndex] as (number | null)[];
+		rawValues.forEach((rawValue, pointIndex) => {
+			totals[pointIndex] += rawValue == null ? 0 : Number(rawValue);
+		});
+	}
+
+	return totals;
+}
+
+/** A column whose participating series sum to 0 has no share to divide, so every slice is 0. */
+function toPercent(value: number, total: number): number {
+	return total === 0 ? 0 : (value / total) * 100;
 }
 
 /**
@@ -42,9 +78,15 @@ function buildStackedSeries({
 	valueSeriesCount,
 	pointCount,
 	omit,
+	mode,
 }: BuildStackedSeriesParams): (number | null)[][] {
 	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
 	const cumulativeSums = Array(pointCount).fill(0) as number[];
+	// Known up front: totals span series the accumulation below has not reached yet.
+	const totals =
+		mode === StackMode.Percent
+			? columnTotals({ data, valueSeriesCount, pointCount, omit })
+			: undefined;
 
 	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
 		const rawValues = data[seriesIndex] as (number | null)[];
@@ -54,7 +96,10 @@ function buildStackedSeries({
 		} else {
 			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
 				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
+				const contribution = totals
+					? toPercent(numericValue, totals[pointIndex])
+					: numericValue;
+				return (cumulativeSums[pointIndex] += contribution);
 			});
 		}
 	}
@@ -101,16 +146,3 @@ function findNextVisibleSeriesIndex(
 	}
 	return -1;
 }
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useBarChartStacking.test.ts

@@ -1,313 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import uPlot from 'uplot';
-
-import type { UseBarChartStackingParams } from '../useBarChartStacking';
-import { useBarChartStacking } from '../useBarChartStacking';
-
-type MockConfig = { addHook: jest.Mock };
-
-function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
-	return c as unknown as UseBarChartStackingParams['config'];
-}
-
-function createMockConfig(): {
-	config: MockConfig;
-	invokeSetData: (plot: uPlot) => void;
-	invokeSetSeries: (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	) => void;
-	removeSetData: jest.Mock;
-	removeSetSeries: jest.Mock;
-} {
-	let setDataHandler: ((plot: uPlot) => void) | null = null;
-	let setSeriesHandler:
-		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
-		| null = null;
-
-	const removeSetData = jest.fn();
-	const removeSetSeries = jest.fn();
-
-	const addHook = jest.fn(
-		(
-			hookName: string,
-			handler: (plot: uPlot, ...args: unknown[]) => void,
-		): (() => void) => {
-			if (hookName === 'setData') {
-				setDataHandler = handler as (plot: uPlot) => void;
-				return removeSetData;
-			}
-			if (hookName === 'setSeries') {
-				setSeriesHandler = handler as (
-					plot: uPlot,
-					seriesIndex: number | null,
-					opts: uPlot.Series,
-				) => void;
-				return removeSetSeries;
-			}
-			return jest.fn();
-		},
-	);
-
-	const config: MockConfig = { addHook };
-
-	const invokeSetData = (plot: uPlot): void => {
-		setDataHandler?.(plot);
-	};
-
-	const invokeSetSeries = (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	): void => {
-		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
-	};
-
-	return {
-		config,
-		invokeSetData,
-		invokeSetSeries,
-		removeSetData,
-		removeSetSeries,
-	};
-}
-
-function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
-	return {
-		data: [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		],
-		series: [{ show: true }, { show: true }, { show: true }],
-		delBand: jest.fn(),
-		addBand: jest.fn(),
-		setData: jest.fn(),
-		...overrides,
-	} as unknown as uPlot;
-}
-
-describe('useBarChartStacking', () => {
-	it('returns data as-is when isStackedBarChart is false', () => {
-		const data: uPlot.AlignedData = [
-			[100, 200],
-			[1, 2],
-			[3, 4],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: null,
-			}),
-		);
-		expect(result.current).toBe(data);
-	});
-
-	it('returns data as-is when config is null and isStackedBarChart is true', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[4, 5],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		// Still returns stacked data (computed in useMemo); no hooks registered
-		expect(result.current[0]).toStrictEqual([0, 1]);
-		expect(result.current[1]).toStrictEqual([5, 7]); // stacked
-		expect(result.current[2]).toStrictEqual([4, 5]);
-	});
-
-	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-			[7, 8, 9],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current[0]).toStrictEqual([0, 1, 2]);
-		expect(result.current[1]).toStrictEqual([12, 15, 18]); // s1+s2+s3
-		expect(result.current[2]).toStrictEqual([11, 13, 15]); // s2+s3
-		expect(result.current[3]).toStrictEqual([7, 8, 9]);
-	});
-
-	it('returns data as-is when only one value series (no stacking needed)', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current).toStrictEqual(data);
-	});
-
-	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
-		expect(config.addHook).toHaveBeenCalledWith(
-			'setSeries',
-			expect.any(Function),
-		);
-	});
-
-	it('does not register hooks when isStackedBarChart is false', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).not.toHaveBeenCalled();
-	});
-
-	it('calls cleanup when unmounted', () => {
-		const { config, removeSetData, removeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		const { unmount } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		unmount();
-
-		expect(removeSetData).toHaveBeenCalled();
-		expect(removeSetSeries).toHaveBeenCalled();
-	});
-
-	it('re-stacks and updates plot when setData hook is invoked', () => {
-		const { config, invokeSetData } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		];
-		const plot = createMockPlot({
-			data: [
-				[0, 1, 2],
-				[5, 7, 9],
-				[4, 5, 6],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetData(plot);
-
-		expect(plot.delBand).toHaveBeenCalledWith(null);
-		expect(plot.addBand).toHaveBeenCalled();
-		expect(plot.setData).toHaveBeenCalledWith(
-			expect.arrayContaining([
-				[0, 1, 2],
-				expect.any(Array), // stacked row 1
-				expect.any(Array), // stacked row 2
-			]),
-		);
-	});
-
-	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[10, 20],
-			[5, 10],
-		];
-		// Plot data must match unstacked length so canApplyStacking passes
-		const plot = createMockPlot({
-			data: [
-				[0, 1],
-				[15, 30],
-				[5, 10],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetSeries(plot, 1, { show: false });
-
-		expect(plot.setData).toHaveBeenCalled();
-	});
-
-	it('does not re-stack when setSeries is called with focus option', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-		const plot = createMockPlot();
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		(plot.setData as jest.Mock).mockClear();
-		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
-
-		expect(plot.setData).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -22,6 +22,7 @@ import { prepareBarPanelConfig } from './utils';
 import '../Panel.styles.scss';
 import TooltipFooter from '../components/TooltipFooter';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+import { StackMode } from 'lib/uPlotV2/config/types';
 
 function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -147,6 +148,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 				<BarChart
 					key={`${syncMode}-${syncFilterMode}`}
+					stack={widget.stackedBarChart ? StackMode.Normal : StackMode.None}
 					config={config}
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
@@ -159,7 +161,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					groupByPerQuery={groupByPerQuery}
-					isStackedBarChart={widget.stackedBarChart ?? false}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					timezone={timezone}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/__tests__/utils.test.ts

@@ -35,20 +35,10 @@ jest.mock('lib/getLabelName', () => ({
 	),
 }));
 
-jest.mock(
-	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
-	() => ({
-		getInitialStackedBands: jest.fn().mockReturnValue([]),
-	}),
-);
-
 const getLegendMock = jest.requireMock('lib/dashboard/getQueryResults')
 	.getLegend as jest.Mock;
 const getLabelNameMock = jest.requireMock('lib/getLabelName')
 	.default as jest.Mock;
-const getInitialStackedBandsMock = jest.requireMock(
-	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
-).getInitialStackedBands as jest.Mock;
 
 const createApiResponse = (
 	result: MetricRangePayloadProps['data']['result'] = [],
@@ -247,36 +237,5 @@ describe('BarPanel utils', () => {
 			}).getConfig();
 			expect(config.series?.[1]).toMatchObject({ stroke: '#ff0000' });
 		});
-
-		it('calls getInitialStackedBands when widget is stackedBarChart', () => {
-			const widget = createWidget({ stackedBarChart: true });
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-				{
-					metric: {},
-					queryName: 'Q2',
-					values: [[1000, '2']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			prepareBarPanelConfig({ ...baseParams, widget, apiResponse });
-			// seriesCount = result.length + 1 = 3
-			expect(getInitialStackedBandsMock).toHaveBeenCalledWith(3);
-		});
-
-		it('does not call getInitialStackedBands for non-stacked chart', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			prepareBarPanelConfig({ ...baseParams, apiResponse });
-			expect(getInitialStackedBandsMock).not.toHaveBeenCalled();
-		});
 	});
 });

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -1,7 +1,6 @@
 import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -69,11 +68,6 @@ export function prepareBarPanelConfig({
 		return builder;
 	}
 
-	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse.data.result.length ?? 0) + 1; // +1 for 1-based uPlot series indices
-		builder.setBands(getInitialStackedBands(seriesCount));
-	}
-
 	apiResponse.data.result.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,

frontend/src/container/LLMObservability/Explorer/Controls/Controls.module.scss

@@ -1,21 +0,0 @@
-.container {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.3rem;
-	margin: var(--spacing-4) 0;
-}
-
-.optionsTrigger {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	cursor: pointer;
-
-	// Resets button chrome: this was a bare div in the traces explorer.
-	border: none;
-	background: none;
-	padding: 0;
-	color: inherit;
-	font: inherit;
-}

frontend/src/container/LLMObservability/Explorer/Controls/Controls.tsx

@@ -1,79 +0,0 @@
-import { memo, useState } from 'react';
-import { Settings } from '@signozhq/icons';
-import FieldsSelector from 'components/FieldsSelector';
-import Controls, { ControlsProps } from 'container/Controls';
-import { OptionsMenuConfig } from 'container/OptionsMenu/types';
-import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
-import { DataSource } from 'types/common/queryBuilder';
-
-import styles from './Controls.module.scss';
-
-function ExplorerControls({
-	isLoading,
-	totalCount,
-	perPageOptions,
-	config,
-	showSizeChanger = true,
-}: ExplorerControlsProps): JSX.Element | null {
-	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
-
-	const {
-		pagination,
-		handleCountItemsPerPageChange,
-		handleNavigateNext,
-		handleNavigatePrevious,
-	} = useQueryPagination(totalCount, perPageOptions);
-
-	return (
-		<div className={styles.container}>
-			{config?.fieldsSelector && (
-				<>
-					<button
-						type="button"
-						className={styles.optionsTrigger}
-						onClick={(): void => setIsFieldsSelectorOpen(true)}
-						data-testid="explorer-controls-options"
-					>
-						Options
-						<Settings size="md" />
-					</button>
-					<FieldsSelector
-						isOpen={isFieldsSelectorOpen}
-						title="Edit columns"
-						fields={config.fieldsSelector.value}
-						onFieldsChange={config.fieldsSelector.onFieldsChange}
-						onClose={(): void => setIsFieldsSelectorOpen(false)}
-						signal={DataSource.TRACES}
-					/>
-				</>
-			)}
-
-			<Controls
-				isLoading={isLoading}
-				totalCount={totalCount}
-				offset={pagination.offset}
-				countPerPage={pagination.limit}
-				perPageOptions={perPageOptions}
-				handleCountItemsPerPageChange={handleCountItemsPerPageChange}
-				handleNavigateNext={handleNavigateNext}
-				handleNavigatePrevious={handleNavigatePrevious}
-				showSizeChanger={showSizeChanger}
-			/>
-		</div>
-	);
-}
-
-type ExplorerControlsProps = Pick<
-	ControlsProps,
-	'isLoading' | 'totalCount' | 'perPageOptions'
-> & {
-	config?: OptionsMenuConfig | null;
-	showSizeChanger?: boolean;
-};
-
-ExplorerControls.defaultProps = {
-	config: null,
-	showSizeChanger: true,
-};
-
-export default memo(ExplorerControls);

frontend/src/container/LLMObservability/Explorer/Explorer.module.scss

@@ -1,42 +1,11 @@
-.explorerPage {
-	display: flex;
-
-	// Meant to fix the query builder colors
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-border-color: var(--l2-border);
-	--input-hover-border-color: var(--internal-ant-border-color-hover);
-	--input-focus-border-color: var(--internal-ant-border-color-hover);
-}
-
-.filter {
-	width: 260px;
-	height: 100%;
-	min-height: 100vh;
-
-	border: 1px solid var(--l1-border);
-	border-right: 0px;
-	background-color: var(--l1-background);
-
-	> :global(.ant-card-body) {
-		padding: 0;
-		width: 258px;
-	}
-}
-
 .explorer {
-	width: 100%;
-	background: var(--l1-background);
-
-	&.isFiltersExpanded {
-		width: calc(100% - 260px);
-	}
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	padding: var(--spacing-2) var(--spacing-0);
 }
 
-.views {
-	padding: var(--spacing-4);
-	// Room for the floating options bar this explorer doesn't render yet.
-	padding-bottom: 60px;
-	margin-bottom: var(--spacing-12);
+.placeholder {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
 }

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -1,243 +1,13 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { QueryKey, useQueryClient } from 'react-query';
-import { useSearchParams } from 'react-router-dom-v5-compat';
-import * as Sentry from '@sentry/react';
-import { Card } from 'antd';
-import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
-import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
-import WarningPopover from 'components/WarningPopover/WarningPopover';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
-import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
-import Toolbar from 'container/Toolbar/Toolbar';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import {
-	ICurrentQueryData,
-	useHandleExplorerTabChange,
-} from 'hooks/useHandleExplorerTabChange';
-import { isEmpty } from 'lodash-es';
-import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
-import { Warning } from 'types/api';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import {
-	explorerViewToPanelType,
-	getExplorerViewFromUrl,
-} from 'utils/explorerUtils';
-
-import { defaultSelectedColumns, TOOLBAR_VIEWS } from './constants';
 import styles from './Explorer.module.scss';
-import ListView from './ListView/ListView';
-import QuerySection from './QuerySection/QuerySection';
-import TableView from './TableView/TableView';
-import TimeSeriesView from './TimeSeriesView/TimeSeriesView';
-import TracesView from './TracesView/TracesView';
 
-// Forked from the Traces Explorer; diverges as the GenAI query surface lands.
+// Shell for the AI Observability Explorer tab. Owns the
+// /ai-observability/explorer route and is intentionally empty for now: the
+// query builder + results surface land in a follow-up.
 function Explorer(): JSX.Element {
-	const {
-		updateAllQueriesOperators,
-		handleRunQuery,
-		stagedQuery,
-		handleSetConfig,
-	} = useQueryBuilder();
-
-	// TODO(ai-explorer): destructure `{ options }` when save-view / add-to-dashboard
-	// land (Traces Explorer passes it to getExportQueryData). Until then the call
-	// only seeds `?options=` for views that do not mount ListView.
-	// TODO: shares the Traces Explorer's saved columns; needs its own ai_o11y key.
-	useOptionsMenu({
-		storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
-		dataSource: DataSource.TRACES,
-		aggregateOperator: 'noop',
-		initialOptions: {
-			selectColumns: defaultSelectedColumns,
-		},
-	});
-
-	const [searchParams] = useSearchParams();
-	const queryClient = useQueryClient();
-	const listQueryKeyRef = useRef<QueryKey>();
-
-	// Get panel type from URL
-	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
-	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingQueries) {
-			setIsCancelled(false);
-		}
-	}, [isLoadingQueries]);
-
-	const handleCancelQuery = useCallback(() => {
-		if (listQueryKeyRef.current) {
-			void queryClient.cancelQueries(listQueryKeyRef.current);
-		}
-		setIsCancelled(true);
-		// The active view unmounts on cancel, so no child will reset this.
-		setIsLoadingQueries(false);
-	}, [queryClient]);
-
-	const [selectedView, setSelectedView] = useState<ExplorerViews>(() =>
-		getExplorerViewFromUrl(searchParams, panelTypesFromUrl),
-	);
-
-	const [warning, setWarning] = useState<Warning | undefined>();
-	const [isOpen, setOpen] = useState<boolean>(true);
-
-	const defaultQuery = useMemo(
-		(): Query =>
-			updateAllQueriesOperators(
-				initialQueriesMap.traces,
-				PANEL_TYPES.LIST,
-				DataSource.TRACES,
-			),
-		[updateAllQueriesOperators],
-	);
-
-	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-
-	const handleChangeSelectedView = useCallback(
-		(view: ExplorerViews, querySearchParameters?: ICurrentQueryData): void => {
-			handleSetConfig(explorerViewToPanelType[view], DataSource.TRACES);
-
-			setSelectedView(view);
-
-			handleExplorerTabChange(
-				explorerViewToPanelType[view],
-				querySearchParameters,
-			);
-		},
-		[handleExplorerTabChange, handleSetConfig],
-	);
-
-	useShareBuilderUrl({ defaultValue: defaultQuery });
-
-	const logEventCalledRef = useRef(false);
-
-	useEffect(() => {
-		if (!logEventCalledRef.current) {
-			void logEvent('AI Observability Explorer: Page visited', {});
-			logEventCalledRef.current = true;
-		}
-	}, []);
-
-	const isFilterApplied = useMemo(() => {
-		// if any of the non-disabled queries has filters applied, return true
-		const result = stagedQuery?.builder?.queryData?.filter(
-			(item) => !isEmpty(item.filters?.items) && !item.disabled,
-		);
-		return !!result?.length;
-	}, [stagedQuery]);
-
 	return (
-		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div
-				className={styles.explorerPage}
-				data-testid="llm-observability-explorer"
-			>
-				<Card className={styles.filter} hidden={!isOpen}>
-					<QuickFilters
-						className="qf-traces-explorer"
-						source={QuickFiltersSource.TRACES_EXPLORER}
-						signal={SignalType.TRACES}
-						handleFilterVisibilityChange={(): void => {
-							setOpen(!isOpen);
-						}}
-					/>
-				</Card>
-				<div
-					className={cx(styles.explorer, {
-						[styles.isFiltersExpanded]: isOpen,
-					})}
-				>
-					<div>
-						<Toolbar
-							showAutoRefresh
-							leftActions={
-								<LeftToolbarActions
-									showFilter={isOpen}
-									handleFilterVisibilityChange={(): void => setOpen(!isOpen)}
-									items={TOOLBAR_VIEWS}
-									selectedView={selectedView}
-									onChangeSelectedView={handleChangeSelectedView}
-								/>
-							}
-							warningElement={
-								!isEmpty(warning) ? <WarningPopover warningData={warning} /> : <div />
-							}
-							rightActions={
-								<RightToolbarActions
-									onStageRunQuery={(): void => {
-										setIsCancelled(false);
-										handleRunQuery();
-									}}
-									isLoadingQueries={isLoadingQueries}
-									handleCancelQuery={handleCancelQuery}
-								/>
-							}
-						/>
-					</div>
-					<ExplorerCard sourcepage={DataSource.TRACES}>
-						<div className="query-section-container">
-							<QuerySection />
-						</div>
-					</ExplorerCard>
-
-					<div className={styles.views}>
-						{isCancelled && (
-							<QueryCancelledPlaceholder subText='Click "Run Query" to load traces.' />
-						)}
-
-						{!isCancelled && selectedView === ExplorerViews.LIST && (
-							<ListView
-								isFilterApplied={isFilterApplied}
-								setWarning={setWarning}
-								setIsLoadingQueries={setIsLoadingQueries}
-								queryKeyRef={listQueryKeyRef}
-							/>
-						)}
-
-						{!isCancelled && selectedView === ExplorerViews.TRACE && (
-							<TracesView
-								isFilterApplied={isFilterApplied}
-								setWarning={setWarning}
-								setIsLoadingQueries={setIsLoadingQueries}
-								queryKeyRef={listQueryKeyRef}
-							/>
-						)}
-
-						{!isCancelled && selectedView === ExplorerViews.TIMESERIES && (
-							<TimeSeriesView
-								dataSource={DataSource.TRACES}
-								isFilterApplied={isFilterApplied}
-								setWarning={setWarning}
-								setIsLoadingQueries={setIsLoadingQueries}
-								queryKeyRef={listQueryKeyRef}
-							/>
-						)}
-
-						{!isCancelled && selectedView === ExplorerViews.TABLE && (
-							<TableView
-								setWarning={setWarning}
-								setIsLoadingQueries={setIsLoadingQueries}
-								queryKeyRef={listQueryKeyRef}
-							/>
-						)}
-					</div>
-				</div>
-			</div>
-		</Sentry.ErrorBoundary>
+		<div className={styles.explorer} data-testid="llm-observability-explorer">
+			<div className={styles.placeholder}>Explorer coming soon.</div>
+		</div>
 	);
 }
 

frontend/src/container/LLMObservability/Explorer/ListView/ListView.module.scss

@@ -1,37 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	--typography-color: var(--l1-foreground);
-}
-
-// Offset clears the toolbar, query builder, and controls row above the table.
-.table {
-	max-height: calc(100vh - 360px);
-	overflow-y: auto;
-}
-
-.controls {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.orderByContainer {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.orderByLabel {
-	color: var(--muted-foreground);
-	// Between --periscope-font-size-small (11px) and -base (13px), so literal.
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 16px; /* 133.333% */
-
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}

frontend/src/container/LLMObservability/Explorer/ListView/ListView.tsx

@@ -1,307 +0,0 @@
-import {
-	Dispatch,
-	memo,
-	MutableRefObject,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import { QueryKey } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import logEvent from 'api/common/logEvent';
-import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
-import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
-import NoLogs from 'container/NoLogs/NoLogs';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { Pagination } from 'hooks/queryPagination';
-import { getDefaultPaginationConfig } from 'hooks/queryPagination/utils';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQueryData from 'hooks/useUrlQueryData';
-import { ArrowUp10, Minus } from '@signozhq/icons';
-import { AppState } from 'store/reducers';
-import { Warning } from 'types/api';
-import APIError from 'types/api/error';
-import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { getAbsoluteUrl } from 'utils/basePath';
-
-import { defaultSelectedColumns, PER_PAGE_OPTIONS } from '../constants';
-import ExplorerControls from '../Controls/Controls';
-import { getListViewQuery } from '../explorerUtils';
-import { TracesLoading } from '../TraceLoading/TraceLoading';
-import styles from './ListView.module.scss';
-import { useListTableColumns } from './useListTableColumns';
-import { TraceListRow } from '../tableUtils';
-import { getTraceLink, getTraceRowKey, transformDataWithDate } from './utils';
-
-interface ListViewProps {
-	isFilterApplied: boolean;
-	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
-	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
-	queryKeyRef?: MutableRefObject<QueryKey | undefined>;
-}
-
-function ListView({
-	isFilterApplied,
-	setWarning,
-	setIsLoadingQueries,
-	queryKeyRef,
-}: ListViewProps): JSX.Element {
-	const { stagedQuery, panelType: panelTypeFromQueryBuilder } =
-		useQueryBuilder();
-
-	const panelType = panelTypeFromQueryBuilder || PANEL_TYPES.LIST;
-
-	const [orderBy, setOrderBy] = useState<string>('timestamp:desc');
-
-	const {
-		selectedTime: globalSelectedTime,
-		maxTime,
-		minTime,
-		loading: timeRangeUpdateLoading,
-	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
-
-	// TODO: column edits leak to Traces Explorer; needs its own ai_o11y key.
-	const { options, config } = useOptionsMenu({
-		storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
-		dataSource: DataSource.TRACES,
-		aggregateOperator: 'count',
-		initialOptions: {
-			selectColumns: defaultSelectedColumns,
-		},
-	});
-
-	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
-		QueryParams.pagination,
-	);
-	const paginationConfig =
-		paginationQueryData ?? getDefaultPaginationConfig(PER_PAGE_OPTIONS);
-
-	const requestQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueriesMap.traces, orderBy),
-		[stagedQuery, orderBy],
-	);
-
-	// Query-key slice for selectColumns: stable on reorder, changes on
-	// add/remove/replace. Composite key so resource.foo ≠ attribute.foo.
-	const selectColumnsSignature = useMemo(
-		() =>
-			(options?.selectColumns ?? [])
-				.map((c) => buildCompositeKey(c.name, c.fieldContext))
-				.sort()
-				.join(','),
-		[options?.selectColumns],
-	);
-
-	const queryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_QUERY_RANGE,
-			globalSelectedTime,
-			maxTime,
-			minTime,
-			stagedQuery,
-			panelType,
-			paginationConfig,
-			selectColumnsSignature,
-			orderBy,
-		],
-		[
-			stagedQuery,
-			panelType,
-			globalSelectedTime,
-			paginationConfig,
-			selectColumnsSignature,
-			maxTime,
-			minTime,
-			orderBy,
-		],
-	);
-
-	if (queryKeyRef) {
-		queryKeyRef.current = queryKey;
-	}
-
-	const { data, isFetching, isLoading, isError, error } = useGetQueryRange(
-		{
-			query: requestQuery,
-			graphType: panelType,
-			selectedTime: 'GLOBAL_TIME' as const,
-			globalSelectedInterval: globalSelectedTime as CustomTimeType,
-			params: {
-				dataSource: 'traces',
-			},
-			tableParams: {
-				pagination: paginationConfig,
-				selectColumns: options?.selectColumns,
-			},
-		},
-		ENTITY_VERSION_V5,
-		{
-			queryKey,
-			enabled:
-				// don't make api call while the time range state in redux is loading
-				!timeRangeUpdateLoading &&
-				!!stagedQuery &&
-				panelType === PANEL_TYPES.LIST &&
-				!!options?.selectColumns?.length,
-		},
-	);
-
-	useEffect(() => {
-		if (data?.payload) {
-			setWarning(data?.warning);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [data?.payload, data?.warning]);
-
-	useEffect(() => {
-		if (isLoading || isFetching) {
-			setIsLoadingQueries(true);
-		} else {
-			setIsLoadingQueries(false);
-		}
-	}, [isLoading, isFetching, setIsLoadingQueries]);
-
-	const dataLength =
-		data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
-	const totalCount = useMemo(() => dataLength || 0, [dataLength]);
-
-	const queryTableDataResult = data?.payload?.data?.newResult?.data?.result;
-	const queryTableData = useMemo(
-		() => queryTableDataResult || [],
-		[queryTableDataResult],
-	);
-
-	const columns = useListTableColumns(options?.selectColumns || []);
-
-	const transformedQueryTableData = useMemo(
-		() => transformDataWithDate(queryTableData) || [],
-		[queryTableData],
-	);
-
-	const { safeNavigate } = useSafeNavigate();
-
-	const handleColumnOrderChange = useCallback(
-		(reordered: TableColumnDef<TraceListRow>[]): void => {
-			// Column ids are composite (fieldContext.name) — disambiguates same-name fields.
-			config?.addColumn?.onReorder(reordered.map((column) => column.id));
-		},
-		[config],
-	);
-
-	const handleRowClick = useCallback(
-		(row: TraceListRow): void => {
-			safeNavigate(getTraceLink(row));
-		},
-		[safeNavigate],
-	);
-
-	const handleRowClickNewTab = useCallback((row: TraceListRow): void => {
-		window.open(getAbsoluteUrl(getTraceLink(row)), '_blank');
-	}, []);
-
-	const handleOrderChange = useCallback((value: string) => {
-		setOrderBy(value);
-	}, []);
-
-	const isDataAbsent =
-		!isLoading &&
-		!isFetching &&
-		!isError &&
-		transformedQueryTableData.length === 0;
-
-	useEffect(() => {
-		if (
-			!isLoading &&
-			!isFetching &&
-			!isError &&
-			transformedQueryTableData.length !== 0
-		) {
-			void logEvent('AI Observability Explorer: Data present', {
-				panelType,
-			});
-		}
-	}, [isLoading, isFetching, isError, transformedQueryTableData, panelType]);
-	return (
-		<div className={styles.container}>
-			<div className={styles.controls}>
-				<div className={styles.orderByContainer}>
-					<div className={styles.orderByLabel}>
-						Order by <Minus size={14} /> <ArrowUp10 size={14} />
-					</div>
-
-					<ListViewOrderBy
-						value={orderBy}
-						onChange={handleOrderChange}
-						dataSource={DataSource.TRACES}
-					/>
-				</div>
-
-				<DownloadOptionsMenu
-					dataSource={DataSource.TRACES}
-					selectedColumns={options?.selectColumns}
-				/>
-
-				<ExplorerControls
-					isLoading={isFetching}
-					totalCount={totalCount}
-					config={config}
-					perPageOptions={PER_PAGE_OPTIONS}
-				/>
-			</div>
-
-			{isError && error && <ErrorInPlace error={error as APIError} />}
-
-			{(isLoading || (isFetching && transformedQueryTableData.length === 0)) && (
-				<TracesLoading />
-			)}
-
-			{isDataAbsent && !isFilterApplied && (
-				<NoLogs dataSource={DataSource.TRACES} />
-			)}
-
-			{isDataAbsent && isFilterApplied && (
-				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="LIST" />
-			)}
-
-			{!isError && transformedQueryTableData.length !== 0 && (
-				<TanStackTable<TraceListRow>
-					data={transformedQueryTableData}
-					columns={columns}
-					className={styles.table}
-					columnStorageKey={LOCALSTORAGE.AI_OBSERVABILITY_LIST_COLUMNS}
-					respectColumnOrder={false}
-					onColumnOrderChange={handleColumnOrderChange}
-					isLoading={isFetching}
-					getRowKey={getTraceRowKey}
-					onRowClick={handleRowClick}
-					onRowClickNewTab={handleRowClickNewTab}
-					disableVirtualScroll
-					testId="ai-observability-list-view-table"
-				/>
-			)}
-		</div>
-	);
-}
-
-ListView.defaultProps = {
-	queryKeyRef: undefined,
-};
-
-export default memo(ListView);

frontend/src/container/LLMObservability/Explorer/ListView/useListTableColumns.tsx

@@ -1,111 +0,0 @@
-import type { ReactElement } from 'react';
-import { useMemo } from 'react';
-import { Badge } from '@signozhq/ui/badge';
-import { TelemetryFieldKey } from 'api/v5/v5';
-import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
-import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
-import { useTimezone } from 'providers/Timezone';
-
-import { formatCellValue, TraceListRow } from '../tableUtils';
-
-/** Older callers passed `{ key, type }` where v5 uses `{ name, fieldContext }`. */
-interface LegacyFieldKey {
-	key?: string;
-	type?: string;
-}
-
-const BADGE_FIELDS = new Set([
-	'httpMethod',
-	'responseStatusCode',
-	'response_status_code',
-	'http_method',
-]);
-
-const DURATION_FIELDS = new Set(['durationNano', 'duration_nano']);
-
-const TIMESTAMP_COLUMN_ID = 'date';
-
-/** Cells must tolerate missing values: skeleton rows pass through them. */
-export function useListTableColumns(
-	selectedColumns: TelemetryFieldKey[],
-): TableColumnDef<TraceListRow>[] {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	return useMemo<TableColumnDef<TraceListRow>[]>(() => {
-		const timestampColumn: TableColumnDef<TraceListRow> = {
-			id: TIMESTAMP_COLUMN_ID,
-			header: 'Timestamp',
-			accessorFn: (row): unknown => row?.date,
-			canBeHidden: false,
-			enableRemove: false,
-			enableMove: false,
-			width: { default: 180, min: 180 },
-			cell: ({ value }): ReactElement => {
-				const timestamp = value as string | number | undefined;
-				if (timestamp === undefined || timestamp === null) {
-					return <TanStackTable.Text> </TanStackTable.Text>;
-				}
-				const formatted =
-					typeof timestamp === 'string'
-						? formatTimezoneAdjustedTimestamp(
-								timestamp,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							)
-						: formatTimezoneAdjustedTimestamp(
-								timestamp / 1e6,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							);
-				return <TanStackTable.Text>{String(formatted)}</TanStackTable.Text>;
-			},
-		};
-
-		const fieldColumns = selectedColumns.map(
-			(field): TableColumnDef<TraceListRow> => {
-				const legacy = field as TelemetryFieldKey & LegacyFieldKey;
-				const name = field?.name || legacy?.key || '';
-				const fieldContext = field?.fieldContext || legacy?.type;
-
-				return {
-					id: buildCompositeKey(name, fieldContext),
-					header: name,
-					accessorFn: (row): unknown => row?.[name],
-					enableRemove: false,
-					width: { min: 192 },
-					cell: ({ value }): ReactElement => {
-						if (value === undefined || value === null || value === '') {
-							return <TanStackTable.Text data-testid={name}>N/A</TanStackTable.Text>;
-						}
-
-						if (BADGE_FIELDS.has(name)) {
-							return (
-								<Badge data-testid={name} color="sakura" variant="outline">
-									{formatCellValue(value)}
-								</Badge>
-							);
-						}
-
-						if (DURATION_FIELDS.has(name)) {
-							return (
-								<TanStackTable.Text data-testid={name}>
-									{getMs(formatCellValue(value))}ms
-								</TanStackTable.Text>
-							);
-						}
-
-						return (
-							<span data-testid={name}>
-								<LineClampedText text={formatCellValue(value)} lines={3} />
-							</span>
-						);
-					},
-				};
-			},
-		);
-
-		return [timestampColumn, ...fieldColumns];
-	}, [selectedColumns, formatTimezoneAdjustedTimestamp]);
-}

frontend/src/container/LLMObservability/Explorer/ListView/utils.tsx

@@ -1,25 +0,0 @@
-import ROUTES from 'constants/routes';
-import { formUrlParams } from 'container/TraceDetail/utils';
-import { QueryDataV3 } from 'types/api/widgets/getQuery';
-
-import { formatCellValue, TraceListRow } from '../tableUtils';
-
-/** Rows carry the span's attributes plus `date` (the list item's timestamp). */
-export const transformDataWithDate = (data: QueryDataV3[]): TraceListRow[] =>
-	data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) ||
-	[];
-
-export const getTraceLink = (record: TraceListRow): string =>
-	`${ROUTES.TRACE}/${formatCellValue(record.traceID || record.trace_id)}${formUrlParams(
-		{
-			spanId: record.spanID || record.span_id,
-			levelUp: 0,
-			levelDown: 0,
-		},
-	)}`;
-
-/** Row identity: span id per row, trace id as the root-only fallback. */
-export const getTraceRowKey = (record: TraceListRow): string =>
-	formatCellValue(
-		record?.spanID ?? record?.span_id ?? record?.traceID ?? record?.trace_id,
-	);

frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx

@@ -1,61 +0,0 @@
-import { memo, useCallback, useMemo } from 'react';
-import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ExplorerOrderBy from 'container/ExplorerOrderBy';
-import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { DataSource } from 'types/common/queryBuilder';
-
-function QuerySection(): JSX.Element {
-	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
-
-	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
-		const isList = panelTypes === PANEL_TYPES.LIST;
-		const config: QueryBuilderProps['filterConfigs'] = {
-			stepInterval: { isHidden: false, isDisabled: false },
-			limit: { isHidden: isList, isDisabled: true },
-			having: { isHidden: isList, isDisabled: true },
-		};
-
-		return config;
-	}, [panelTypes]);
-
-	const renderOrderBy = useCallback(
-		({ query, onChange }: OrderByFilterProps) => (
-			<ExplorerOrderBy query={query} onChange={onChange} />
-		),
-		[],
-	);
-
-	const queryComponents = useMemo((): QueryBuilderProps['queryComponents'] => {
-		const shouldRenderCustomOrderBy =
-			panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE;
-
-		return {
-			...(shouldRenderCustomOrderBy ? { renderOrderBy } : {}),
-		};
-	}, [panelTypes, renderOrderBy]);
-
-	const isListViewPanel = useMemo(
-		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
-		[panelTypes],
-	);
-
-	return (
-		<QueryBuilderV2
-			isListViewPanel={isListViewPanel}
-			showTraceOperator
-			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
-			queryComponents={queryComponents}
-			panelType={panelTypes}
-			filterConfigs={filterConfigs}
-			showOnlyWhereClause={
-				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
-			}
-			version="v3"
-		/>
-	);
-}
-
-export default memo(QuerySection);

frontend/src/container/LLMObservability/Explorer/TableView/TableView.module.scss

@@ -1,7 +0,0 @@
-.header {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	padding: var(--spacing-6);
-	flex-shrink: 0;
-}

frontend/src/container/LLMObservability/Explorer/TableView/TableView.tsx

@@ -1,131 +0,0 @@
-import {
-	Dispatch,
-	memo,
-	MutableRefObject,
-	SetStateAction,
-	useEffect,
-	useMemo,
-} from 'react';
-import { QueryKey } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { Space } from 'antd';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import ExportMenu from 'components/ExportMenu/ExportMenu';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { QueryTable } from 'container/QueryTable';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { AppState } from 'store/reducers';
-import { Warning } from 'types/api';
-import APIError from 'types/api/error';
-import { QueryDataV3 } from 'types/api/widgets/getQuery';
-import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import styles from './TableView.module.scss';
-
-function TableView({
-	setWarning,
-	setIsLoadingQueries,
-	queryKeyRef,
-}: {
-	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
-	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
-	queryKeyRef?: MutableRefObject<QueryKey | undefined>;
-}): JSX.Element {
-	const { stagedQuery, panelType } = useQueryBuilder();
-
-	const {
-		selectedTime: globalSelectedTime,
-		maxTime,
-		minTime,
-	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
-
-	const queryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_QUERY_RANGE,
-			globalSelectedTime,
-			maxTime,
-			minTime,
-			stagedQuery,
-		],
-		[globalSelectedTime, maxTime, minTime, stagedQuery],
-	);
-
-	if (queryKeyRef) {
-		queryKeyRef.current = queryKey;
-	}
-
-	const { data, isLoading, isFetching, isError, error } = useGetQueryRange(
-		{
-			query: stagedQuery || initialQueriesMap.traces,
-			graphType: panelType || PANEL_TYPES.TABLE,
-			selectedTime: 'GLOBAL_TIME',
-			globalSelectedInterval: globalSelectedTime,
-			params: {
-				dataSource: 'traces',
-			},
-		},
-		ENTITY_VERSION_V5,
-		{
-			queryKey,
-			enabled: !!stagedQuery && panelType === PANEL_TYPES.TABLE,
-		},
-	);
-
-	useEffect(() => {
-		if (isLoading || isFetching) {
-			setIsLoadingQueries(true);
-		} else {
-			setIsLoadingQueries(false);
-		}
-	}, [isLoading, isFetching, setIsLoadingQueries]);
-
-	const queryTableData = useMemo(
-		() =>
-			data?.payload?.data?.newResult?.data?.result ||
-			data?.payload.data.result ||
-			[],
-		[data],
-	);
-
-	useEffect(() => {
-		if (data?.payload) {
-			setWarning(data.warning);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [data?.payload, data?.warning]);
-
-	return (
-		<Space.Compact block direction="vertical">
-			{isError && error && <ErrorInPlace error={error as APIError} />}
-			{!isError && data && (
-				<div className={styles.header}>
-					<ExportMenu
-						dataSource={DataSource.TRACES}
-						data={data}
-						query={stagedQuery || initialQueriesMap.traces}
-						fileName="traces-table"
-					/>
-				</div>
-			)}
-			{!isError && (
-				<QueryTable
-					query={stagedQuery || initialQueriesMap.traces}
-					queryTableData={queryTableData as QueryDataV3[]}
-					loading={isLoading}
-					sticky
-				/>
-			)}
-		</Space.Compact>
-	);
-}
-
-TableView.defaultProps = {
-	queryKeyRef: undefined,
-};
-
-export default memo(TableView);

frontend/src/container/LLMObservability/Explorer/TimeSeriesView/TimeSeriesView.tsx

@@ -1,145 +0,0 @@
-import {
-	Dispatch,
-	MutableRefObject,
-	SetStateAction,
-	useEffect,
-	useMemo,
-} from 'react';
-import { QueryKey } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
-import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
-import { AppState } from 'store/reducers';
-import { Warning } from 'types/api';
-import APIError from 'types/api/error';
-import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-function TimeSeriesViewContainer({
-	dataSource = DataSource.TRACES,
-	isFilterApplied,
-	setWarning,
-	setIsLoadingQueries,
-	queryKeyRef,
-}: TimeSeriesViewProps): JSX.Element {
-	const { stagedQuery, currentQuery, panelType } = useQueryBuilder();
-
-	const isValidToConvertToMs = useMemo(() => {
-		const isValid: boolean[] = [];
-
-		currentQuery.builder.queryData.forEach(
-			({ aggregateAttribute, aggregateOperator }) => {
-				const isExistDurationNanoAttribute =
-					aggregateAttribute?.key === 'durationNano' ||
-					aggregateAttribute?.key === 'duration_nano';
-
-				const isCountOperator =
-					aggregateOperator === 'count' || aggregateOperator === 'count_distinct';
-
-				isValid.push(!isCountOperator && isExistDurationNanoAttribute);
-			},
-		);
-
-		return isValid.every(Boolean);
-	}, [currentQuery]);
-
-	const defaultUnit = isValidToConvertToMs ? 'ms' : 'short';
-	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit(defaultUnit);
-
-	const {
-		selectedTime: globalSelectedTime,
-		maxTime,
-		minTime,
-	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
-
-	const queryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_QUERY_RANGE,
-			globalSelectedTime,
-			maxTime,
-			minTime,
-			stagedQuery,
-		],
-		[globalSelectedTime, maxTime, minTime, stagedQuery],
-	);
-
-	if (queryKeyRef) {
-		queryKeyRef.current = queryKey;
-	}
-
-	const { data, isLoading, isFetching, isError, error } = useGetQueryRange(
-		{
-			query: stagedQuery || initialQueriesMap[dataSource],
-			graphType: panelType || PANEL_TYPES.TIME_SERIES,
-			selectedTime: 'GLOBAL_TIME',
-			globalSelectedInterval: globalSelectedTime,
-			params: {
-				dataSource,
-			},
-		},
-		ENTITY_VERSION_V5,
-		{
-			queryKey,
-			enabled: !!stagedQuery && panelType === PANEL_TYPES.TIME_SERIES,
-		},
-	);
-
-	useEffect(() => {
-		if (data?.payload) {
-			setWarning(data?.warning);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [data?.payload, data?.warning]);
-
-	const responseData = useMemo(
-		() => (isValidToConvertToMs ? convertDataValueToMs(data) : data),
-		[data, isValidToConvertToMs],
-	);
-
-	useEffect(() => {
-		if (isLoading || isFetching) {
-			setIsLoadingQueries(true);
-		} else {
-			setIsLoadingQueries(false);
-		}
-	}, [isLoading, isFetching, setIsLoadingQueries]);
-
-	return (
-		<div>
-			<TimeSeriesView
-				isFilterApplied={isFilterApplied}
-				isError={isError}
-				error={error as APIError}
-				isLoading={isLoading || isFetching}
-				data={responseData}
-				yAxisUnit={yAxisUnit}
-				onYAxisUnitChange={onUnitChange}
-				dataSource={dataSource}
-				setWarning={setWarning}
-				allowExport
-			/>
-		</div>
-	);
-}
-
-interface TimeSeriesViewProps {
-	dataSource?: DataSource;
-	isFilterApplied: boolean;
-	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
-	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
-	queryKeyRef?: MutableRefObject<QueryKey | undefined>;
-}
-
-TimeSeriesViewContainer.defaultProps = {
-	dataSource: DataSource.TRACES,
-	queryKeyRef: undefined,
-};
-
-export default TimeSeriesViewContainer;

frontend/src/container/LLMObservability/Explorer/TraceLoading/TraceLoading.module.scss

@@ -1,19 +0,0 @@
-.loadingTraces {
-	padding: var(--spacing-12) 0;
-	height: 240px;
-
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-}
-
-.content {
-	display: flex;
-	align-items: flex-start;
-	flex-direction: column;
-}
-
-.gif {
-	height: 72px;
-	margin-left: calc(var(--spacing-12) * -1);
-}

frontend/src/container/LLMObservability/Explorer/TraceLoading/TraceLoading.tsx

@@ -1,17 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
-import styles from './TraceLoading.module.scss';
-
-export function TracesLoading(): JSX.Element {
-	return (
-		<div className={styles.loadingTraces}>
-			<div className={styles.content}>
-				<img className={styles.gif} src={loadingPlaneUrl} alt="wait-icon" />
-
-				<Typography>Retrieving your traces!</Typography>
-			</div>
-		</div>
-	);
-}

frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.module.scss

@@ -1,22 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-}
-
-.actionsContainer {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.controls {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.table {
-	max-height: calc(100vh - 330px);
-	overflow-y: auto;
-}

frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.tsx

@@ -1,213 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import {
-	Dispatch,
-	memo,
-	MutableRefObject,
-	SetStateAction,
-	useEffect,
-	useMemo,
-} from 'react';
-import { QueryKey } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import TanStackTable from 'components/TanStackTableView';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
-import NoLogs from 'container/NoLogs/NoLogs';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { Pagination } from 'hooks/queryPagination';
-import useUrlQueryData from 'hooks/useUrlQueryData';
-import { AppState } from 'store/reducers';
-import { Warning } from 'types/api';
-import APIError from 'types/api/error';
-import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import DOCLINKS from 'utils/docLinks';
-
-import { PER_PAGE_OPTIONS } from '../constants';
-import ExplorerControls from '../Controls/Controls';
-import { getListViewQuery } from '../explorerUtils';
-import { TraceListRow } from '../tableUtils';
-import { TracesLoading } from '../TraceLoading/TraceLoading';
-import { columns } from './configs';
-import styles from './TracesView.module.scss';
-import { getRootSpanRowKey } from './utils';
-
-interface TracesViewProps {
-	isFilterApplied: boolean;
-	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
-	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
-	queryKeyRef?: MutableRefObject<QueryKey | undefined>;
-}
-
-function TracesView({
-	isFilterApplied,
-	setWarning,
-	setIsLoadingQueries,
-	queryKeyRef,
-}: TracesViewProps): JSX.Element {
-	const { stagedQuery, panelType } = useQueryBuilder();
-
-	const {
-		selectedTime: globalSelectedTime,
-		maxTime,
-		minTime,
-	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
-
-	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
-		QueryParams.pagination,
-	);
-
-	const transformedQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueriesMap.traces),
-		[stagedQuery],
-	);
-
-	const queryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_QUERY_RANGE,
-			globalSelectedTime,
-			maxTime,
-			minTime,
-			stagedQuery,
-			panelType,
-			paginationQueryData,
-		],
-		[
-			globalSelectedTime,
-			maxTime,
-			minTime,
-			stagedQuery,
-			panelType,
-			paginationQueryData,
-		],
-	);
-
-	if (queryKeyRef) {
-		queryKeyRef.current = queryKey;
-	}
-
-	const { data, isLoading, isFetching, isError, error } = useGetQueryRange(
-		{
-			query: transformedQuery,
-			graphType: panelType || PANEL_TYPES.TRACE,
-			selectedTime: 'GLOBAL_TIME',
-			globalSelectedInterval: globalSelectedTime,
-			params: {
-				dataSource: 'traces',
-			},
-			tableParams: {
-				pagination: paginationQueryData,
-			},
-		},
-		ENTITY_VERSION_V5,
-		{
-			queryKey,
-			enabled: !!stagedQuery && panelType === PANEL_TYPES.TRACE,
-		},
-	);
-
-	useEffect(() => {
-		if (data?.payload) {
-			setWarning(data?.warning);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [data?.payload, data?.warning]);
-
-	const responseData = data?.payload?.data?.newResult?.data?.result[0]?.list;
-	const tableData = useMemo(
-		(): TraceListRow[] => responseData?.map((listItem) => listItem.data) ?? [],
-		[responseData],
-	);
-
-	useEffect(() => {
-		if (isLoading || isFetching) {
-			setIsLoadingQueries(true);
-		} else {
-			setIsLoadingQueries(false);
-		}
-	}, [isLoading, isFetching, setIsLoadingQueries]);
-
-	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && tableData.length !== 0) {
-			void logEvent('AI Observability Explorer: Data present', {
-				panelType: 'TRACE',
-			});
-		}
-	}, [isLoading, isFetching, isError, panelType, tableData]);
-
-	return (
-		<div className={styles.container}>
-			{tableData.length !== 0 && (
-				<div className={styles.actionsContainer}>
-					<Typography>
-						This tab only shows Root Spans. More details
-						<Typography.Link href={DOCLINKS.TRACES_DETAILS_LINK} target="_blank">
-							{' '}
-							here
-						</Typography.Link>
-					</Typography>
-
-					<div className={styles.controls}>
-						<DownloadOptionsMenu
-							dataSource={DataSource.TRACES}
-							panelType={PANEL_TYPES.TRACE}
-						/>
-
-						<ExplorerControls
-							isLoading={isLoading}
-							totalCount={responseData?.length || 0}
-							perPageOptions={PER_PAGE_OPTIONS}
-						/>
-					</div>
-				</div>
-			)}
-
-			{isError && error && <ErrorInPlace error={error as APIError} />}
-
-			{(isLoading || (isFetching && tableData.length === 0)) && <TracesLoading />}
-
-			{!isLoading &&
-				!isFetching &&
-				!isError &&
-				!isFilterApplied &&
-				tableData.length === 0 && <NoLogs dataSource={DataSource.TRACES} />}
-
-			{!isLoading &&
-				!isFetching &&
-				tableData.length === 0 &&
-				!isError &&
-				isFilterApplied && (
-					<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="TRACE" />
-				)}
-
-			{tableData.length !== 0 && (
-				<TanStackTable<TraceListRow>
-					data={tableData}
-					columns={columns}
-					className={styles.table}
-					columnStorageKey={LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS}
-					isLoading={isLoading}
-					getRowKey={getRootSpanRowKey}
-					disableVirtualScroll
-					testId="ai-observability-traces-view-table"
-				/>
-			)}
-		</div>
-	);
-}
-
-TracesView.defaultProps = {
-	queryKeyRef: undefined,
-};
-
-export default memo(TracesView);

frontend/src/container/LLMObservability/Explorer/TracesView/configs.tsx

@@ -1,77 +0,0 @@
-import type { ReactElement } from 'react';
-import { generatePath, Link } from 'react-router-dom';
-import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import ROUTES from 'constants/routes';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
-
-import { formatCellValue, TraceListRow } from '../tableUtils';
-
-/** Fixed root-span columns — no user selection, so nothing can be removed. */
-export const columns: TableColumnDef<TraceListRow>[] = [
-	{
-		id: 'serviceName',
-		header: 'Root Service Name',
-		accessorFn: (row): unknown => row?.['service.name'],
-		enableRemove: false,
-		width: { min: 200 },
-		cell: ({ value }): ReactElement => (
-			<TanStackTable.Text>{formatCellValue(value)}</TanStackTable.Text>
-		),
-	},
-	{
-		id: 'name',
-		header: 'Root Operation Name',
-		accessorFn: (row): unknown => row?.name,
-		enableRemove: false,
-		width: { min: 260 },
-		cell: ({ value }): ReactElement => (
-			<TanStackTable.Text>{formatCellValue(value)}</TanStackTable.Text>
-		),
-	},
-	{
-		id: 'durationNano',
-		header: 'Root Duration (in ms)',
-		accessorFn: (row): unknown => row?.duration_nano,
-		enableRemove: false,
-		width: { min: 170 },
-		cell: ({ value }): ReactElement => (
-			<TanStackTable.Text>
-				{value === undefined || value === null
-					? ''
-					: `${getMs(formatCellValue(value))}ms`}
-			</TanStackTable.Text>
-		),
-	},
-	{
-		id: 'span_count',
-		header: 'No of Spans',
-		accessorFn: (row): unknown => row?.span_count,
-		enableRemove: false,
-		width: { min: 120 },
-		cell: ({ value }): ReactElement => (
-			<TanStackTable.Text>{formatCellValue(value)}</TanStackTable.Text>
-		),
-	},
-	{
-		id: 'traceID',
-		header: 'TraceID',
-		accessorFn: (row): unknown => row?.trace_id,
-		enableRemove: false,
-		width: { min: 290 },
-		cell: ({ value }): ReactElement => {
-			const traceID = formatCellValue(value);
-			if (!traceID) {
-				return <TanStackTable.Text> </TanStackTable.Text>;
-			}
-			return (
-				<Link
-					to={generatePath(ROUTES.TRACE_DETAIL, { id: traceID })}
-					data-testid="trace-id"
-				>
-					{traceID}
-				</Link>
-			);
-		},
-	},
-];

frontend/src/container/LLMObservability/Explorer/TracesView/utils.ts

@@ -1,5 +0,0 @@
-import { formatCellValue, TraceListRow } from '../tableUtils';
-
-/** Row identity for root spans: one row per trace; tolerates skeleton rows. */
-export const getRootSpanRowKey = (record: TraceListRow): string =>
-	formatCellValue(record?.trace_id ?? record?.traceID);

frontend/src/container/LLMObservability/Explorer/constants.ts

@@ -1,50 +0,0 @@
-import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
-
-export const TOOLBAR_VIEWS = {
-	list: {
-		name: 'list',
-		label: 'List',
-		show: true,
-		key: 'list',
-	},
-	timeseries: {
-		name: 'timeseries',
-		label: 'Timeseries',
-		disabled: false,
-		show: true,
-		key: 'timeseries',
-	},
-	trace: {
-		name: 'trace',
-		label: 'Trace',
-		disabled: false,
-		show: true,
-		key: 'trace',
-	},
-	table: {
-		name: 'table',
-		label: 'Table',
-		disabled: false,
-		show: true,
-		key: 'table',
-	},
-	clickhouse: {
-		name: 'clickhouse',
-		label: 'Clickhouse',
-		disabled: false,
-		show: false,
-		key: 'clickhouse',
-	},
-};
-
-//TODO: Change this later
-export const defaultSelectedColumns: string[] = [
-	'service.name',
-	'name',
-	'duration_nano',
-	'http_method',
-	'response_status_code',
-	'timestamp',
-];
-
-export const PER_PAGE_OPTIONS: number[] = DEFAULT_PER_PAGE_OPTIONS;

frontend/src/container/LLMObservability/Explorer/explorerUtils.ts

@@ -1,75 +0,0 @@
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { OptionsQuery } from 'container/OptionsMenu/types';
-import { cloneDeep, set } from 'lodash-es';
-import { OrderByPayload, Query } from 'types/api/queryBuilder/queryBuilderData';
-
-export const getListViewQuery = (
-	stagedQuery: Query,
-	orderBy?: string,
-): Query => {
-	const query = stagedQuery
-		? cloneDeep(stagedQuery)
-		: cloneDeep(initialQueriesMap.traces);
-
-	const orderByPayload: OrderByPayload[] = orderBy
-		? [
-				{
-					columnName: orderBy.split(':')[0],
-					order: orderBy.split(':')[1] as 'asc' | 'desc',
-				},
-			]
-		: [];
-
-	for (let i = 0; i < query.builder.queryData.length; i++) {
-		const queryData = query.builder.queryData[i];
-		queryData.groupBy = [];
-		queryData.having = {
-			expression: '',
-		};
-		queryData.orderBy = orderByPayload;
-	}
-
-	if (
-		query.builder.queryTraceOperator &&
-		query.builder.queryTraceOperator.length > 0
-	) {
-		for (let i = 0; i < query.builder.queryTraceOperator.length; i++) {
-			const queryTraceOperator = query.builder.queryTraceOperator[i];
-			queryTraceOperator.groupBy = [];
-			queryTraceOperator.having = {
-				expression: '',
-			};
-			queryTraceOperator.orderBy = orderByPayload;
-		}
-	}
-
-	return query;
-};
-
-export const getQueryByPanelType = (
-	stagedQuery: Query,
-	panelType: PANEL_TYPES,
-): Query => {
-	if (panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE) {
-		return getListViewQuery(stagedQuery);
-	}
-	return stagedQuery;
-};
-
-export const getExportQueryData = (
-	query: Query,
-	panelType: PANEL_TYPES,
-	options: OptionsQuery,
-): Query => {
-	if (panelType === PANEL_TYPES.LIST) {
-		const updatedQuery = cloneDeep(query);
-		set(
-			updatedQuery,
-			'builder.queryData[0].selectColumns',
-			options.selectColumns,
-		);
-
-		return updatedQuery;
-	}
-	return query;
-};

frontend/src/container/LLMObservability/Explorer/tableUtils.ts

@@ -1,16 +0,0 @@
-/** Span attributes, flattened. Every field access must tolerate undefined. */
-export type TraceListRow = Record<string, unknown>;
-
-/** Renders a row value as text; objects are JSON-serialised. */
-export const formatCellValue = (value: unknown): string => {
-	if (typeof value === 'string') {
-		return value;
-	}
-	if (typeof value === 'number' || typeof value === 'boolean') {
-		return String(value);
-	}
-	if (value !== null && typeof value === 'object') {
-		return JSON.stringify(value);
-	}
-	return '';
-};

frontend/src/container/LLMObservability/__tests__/LLMObservability.test.tsx

@@ -18,12 +18,6 @@ jest.mock('pages/DashboardPageV2/DashboardContainer', () => ({
 	default: (): JSX.Element => <div data-testid="llm-overview-dashboard" />,
 }));
 
-// Same for the Explorer tab, which renders a full query-builder surface.
-jest.mock('container/LLMObservability/Explorer/Explorer', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="llm-observability-explorer" />,
-}));
-
 function setupList(items = mockRules): void {
 	server.use(
 		rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) =>

frontend/src/container/LogDetailedView/Overview.tsx

@@ -13,7 +13,7 @@ import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { OptionsQuery } from 'container/OptionsMenu/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronRight, Search } from '@signozhq/icons';
-import { useIsLogDetailsV2 } from 'components/LogDetail/useIsLogDetailsV2';
+import { isLogDetailsV2 } from 'components/LogDetail/constants';
 import { DataViewer } from 'periscope/components/DataViewer';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
@@ -69,8 +69,6 @@ function Overview({
 		isListViewPanel,
 	});
 
-	const isLogDetailsV2 = useIsLogDetailsV2();
-
 	if (isLogDetailsV2) {
 		const raw = aggregateAttributesResourcesToObject(logData);
 		const prettyData = buildPrettyViewData(raw);

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -9,6 +9,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { StackMode } from 'lib/uPlotV2/config/types';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
@@ -137,6 +138,7 @@ function TimeSeries({
 									key={`${WIDGET_ID}-${index}`}
 								>
 									<BarChart
+										stack={StackMode.Normal}
 										config={chart.config}
 										legendConfig={{
 											position: LegendPosition.BOTTOM,
@@ -144,7 +146,6 @@ function TimeSeries({
 										data={chart.chartData as uPlot.AlignedData}
 										width={containerDimensions.width}
 										height={containerDimensions.height}
-										isStackedBarChart
 										yAxisUnit={yAxisUnit || 'short'}
 										timezone={timezone}
 									/>

frontend/src/container/MeterExplorer/Explorer/configBuilder.ts

@@ -1,6 +1,5 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import {
@@ -89,9 +88,6 @@ export function buildMeterChartConfig({
 		return builder;
 	}
 
-	const seriesCount = (apiResponse.data.result.length ?? 0) + 1;
-	builder.setBands(getInitialStackedBands(seriesCount));
-
 	apiResponse.data.result.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,

frontend/src/lib/uPlotV2/components/Tooltip/BarChartTooltip.tsx

@@ -9,6 +9,7 @@ export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
 		(): TooltipContentItem[] =>
 			buildTooltipContent({
 				data: props.uPlotInstance.data,
+				unstackedData: props.unstackedData,
 				series: props.uPlotInstance.series,
 				dataIndexes: props.dataIndexes,
 				activeSeriesIndex: props.seriesIndex,
@@ -21,6 +22,7 @@ export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
 			}),
 		[
 			props.uPlotInstance,
+			props.unstackedData,
 			props.seriesIndex,
 			props.dataIndexes,
 			props.yAxisUnit,

frontend/src/lib/uPlotV2/components/Tooltip/TimeSeriesTooltip.tsx

@@ -11,6 +11,7 @@ export default function TimeSeriesTooltip(
 		(): TooltipContentItem[] =>
 			buildTooltipContent({
 				data: props.uPlotInstance.data,
+				unstackedData: props.unstackedData,
 				series: props.uPlotInstance.series,
 				dataIndexes: props.dataIndexes,
 				activeSeriesIndex: props.seriesIndex,
@@ -22,6 +23,7 @@ export default function TimeSeriesTooltip(
 			}),
 		[
 			props.uPlotInstance,
+			props.unstackedData,
 			props.seriesIndex,
 			props.dataIndexes,
 			props.yAxisUnit,

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/utils.test.ts

@@ -72,6 +72,35 @@ describe('Tooltip utils', () => {
 			expect(result).toBe(20);
 		});
 
+		it('reports the pre-stack value, identically for normal and percent', () => {
+			const unstackedData: AlignedData = [[0], [30], [10]];
+			const series = [{}, { show: true }, { show: true }] as Series[];
+			const read = (data: AlignedData): number | null =>
+				getTooltipBaseValue({
+					data,
+					unstackedData,
+					index: 1,
+					dataIndex: 0,
+					isStackedBarChart: true,
+					series,
+				});
+
+			expect(read([[0], [40], [10]])).toBe(30);
+			expect(read([[0], [100], [25]])).toBe(30);
+		});
+
+		it('falls back to subtraction when no pre-stack data is given', () => {
+			const result = getTooltipBaseValue({
+				data: [[0], [40], [10]],
+				index: 1,
+				dataIndex: 0,
+				isStackedBarChart: true,
+				series: [{}, { show: true }, { show: true }] as Series[],
+			});
+
+			expect(result).toBe(30);
+		});
+
 		it('returns null when value is missing', () => {
 			const data: AlignedData = [
 				[0, 1],

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -23,17 +23,25 @@ export function resolveSeriesColor(
 
 export function getTooltipBaseValue({
 	data,
+	unstackedData,
 	index,
 	dataIndex,
 	isStackedBarChart,
 	series,
 }: {
 	data: AlignedData;
+	unstackedData?: AlignedData;
 	index: number;
 	dataIndex: number;
 	isStackedBarChart?: boolean;
 	series?: Series[];
 }): number | null {
+	// The subtraction below only recovers the raw value under `normal` stacking.
+	const unstackedSeries = unstackedData?.[index];
+	if (unstackedSeries) {
+		return unstackedSeries[dataIndex] ?? null;
+	}
+
 	let baseValue = data[index][dataIndex] ?? null;
 	// Top-down stacking (first series at top): raw = stacked[i] - stacked[nextVisible].
 	// When series are hidden, we must use the next *visible* series, not index+1,
@@ -56,6 +64,7 @@ export function getTooltipBaseValue({
 
 export function buildTooltipContent({
 	data,
+	unstackedData,
 	series,
 	dataIndexes,
 	activeSeriesIndex,
@@ -67,6 +76,7 @@ export function buildTooltipContent({
 	syncFilterMode,
 }: {
 	data: AlignedData;
+	unstackedData?: AlignedData;
 	series: Series[];
 	dataIndexes: Array<number | null>;
 	activeSeriesIndex: number | null;
@@ -115,6 +125,7 @@ export function buildTooltipContent({
 
 		const baseValue = getTooltipBaseValue({
 			data,
+			unstackedData,
 			index: seriesIndex,
 			dataIndex,
 			isStackedBarChart,

frontend/src/lib/uPlotV2/components/types.ts

@@ -69,6 +69,11 @@ export interface TooltipRenderArgs {
 	syncedSeriesIndexes?: number[] | null;
 	/** Receiver-side filter mode for the synced tooltip. Defaults to Filtered. */
 	syncFilterMode?: SyncTooltipFilterMode;
+	/**
+	 * Pre-stack values, injected by `ChartWrapper`. `Percent` discards the column total,
+	 * so the raw value cannot be recovered from the plot's own cumulative data.
+	 */
+	unstackedData?: uPlot.AlignedData;
 }
 
 export interface IRenderTooltipFooterArgs {

frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts

@@ -20,6 +20,7 @@ import {
 	ConfigBuilderProps,
 	LegendItem,
 	SelectionPreferencesSource,
+	StackMode,
 } from './types';
 import { AxisProps, UPlotAxisBuilder } from './UPlotAxisBuilder';
 import { ScaleProps, UPlotScaleBuilder } from './UPlotScaleBuilder';
@@ -28,6 +29,11 @@ import { SeriesProps, UPlotSeriesBuilder } from './UPlotSeriesBuilder';
 /**
  * Type definitions for uPlot option objects
  */
+/** Renders a 0–100 number as `50%`, unlike the 0–1 `percentunit`. */
+const PERCENT_AXIS_UNIT = 'percent';
+
+const PERCENT_AXIS_MAX = 100;
+
 type LegendConfig = {
 	show?: boolean;
 	live?: boolean;
@@ -57,6 +63,8 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private bands: uPlot.Band[] = [];
 
+	private stack: StackMode = StackMode.None;
+
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -143,6 +151,15 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		this.axes[scaleKey] = new UPlotAxisBuilder(props);
 	}
 
+	/** Drives the fill bands, the percent axis unit and the percent range below. */
+	setStack(stack: StackMode): void {
+		this.stack = stack;
+	}
+
+	getStackMode(): StackMode {
+		return this.stack;
+	}
+
 	/**
 	 * Add or merge a scale configuration
 	 */
@@ -211,6 +228,41 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		this.bands = bands;
 	}
 
+	/**
+	 * The panel's own limits are in the source unit, which means nothing once values are
+	 * normalised. Soft rather than hard, so mixed-sign shares outside 0–100 stay visible.
+	 */
+	private resolveScale(scale: UPlotScaleBuilder): UPlotScaleBuilder {
+		if (this.stack !== StackMode.Percent || scale.props.scaleKey !== 'y') {
+			return scale;
+		}
+		return new UPlotScaleBuilder({
+			...scale.props,
+			min: undefined,
+			max: undefined,
+			softMin: 0,
+			softMax: PERCENT_AXIS_MAX,
+			// Thresholds still draw, but a 500ms one must not stretch the axis to 0–500.
+			thresholds: undefined,
+		});
+	}
+
+	/** Explicit bands win; otherwise a stack fills between consecutive series. */
+	private resolveBands(): uPlot.Band[] | undefined {
+		if (this.bands.length > 0) {
+			return this.bands;
+		}
+		if (this.stack === StackMode.None || this.series.length < 2) {
+			return undefined;
+		}
+		return (
+			this.series
+				.slice(0, -1)
+				// uPlot series are 1-based (index 0 is the timestamp axis).
+				.map((_, index) => ({ series: [index + 1, index + 2] as [number, number] }))
+		);
+	}
+
 	/**
 	 * Set cursor configuration
 	 */
@@ -444,9 +496,19 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 				};
 			}),
 		];
-		config.axes = Object.values(this.axes).map((a) => a.getConfig());
+		config.axes = Object.entries(this.axes).map(([scaleKey, axis]) => {
+			if (scaleKey !== 'y' || this.stack !== StackMode.Percent) {
+				return axis.getConfig();
+			}
+			// Ticks read as percentages; the panel unit still applies to tooltips and
+			// thresholds, so build from a copy rather than touching the axis props.
+			return new UPlotAxisBuilder({
+				...axis.props,
+				yAxisUnit: PERCENT_AXIS_UNIT,
+			}).getConfig();
+		});
 		config.scales = this.scales.reduce(
-			(acc, s) => ({ ...acc, ...s.getConfig() }),
+			(acc, s) => ({ ...acc, ...this.resolveScale(s).getConfig() }),
 			{} as Record<string, uPlot.Scale>,
 		);
 
@@ -456,7 +518,7 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		config.cursor = this.getCursorConfig();
 		config.tzDate = this.tzDate;
 		config.plugins = this.plugins.length > 0 ? this.plugins : undefined;
-		config.bands = this.bands.length > 0 ? this.bands : undefined;
+		config.bands = this.resolveBands();
 
 		if (Array.isArray(this.padding)) {
 			config.padding = this.padding;

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -5,7 +5,7 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../../constants';
 import type { SeriesProps } from '../types';
-import { DrawStyle, SelectionPreferencesSource } from '../types';
+import { DrawStyle, SelectionPreferencesSource, StackMode } from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
 
 // Mock only the real boundary that hits localStorage
@@ -496,3 +496,161 @@ describe('UPlotConfigBuilder', () => {
 		expect(config.bands).toBeUndefined();
 	});
 });
+
+describe('UPlotConfigBuilder stacking', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([]);
+	});
+
+	/**
+	 * Soft limits end up captured in the scale's range closure, so the only way to read
+	 * them back is to run it and inspect the range config it hands uPlot.
+	 */
+	function scaleSoftLimits(
+		builder: UPlotConfigBuilder,
+		scaleKey: string,
+	): { min: number; max: number } {
+		const rangeNum = jest.fn().mockReturnValue([0, 0]);
+		(uPlot as unknown as { rangeNum: unknown }).rangeNum = rangeNum;
+
+		const range = builder.getConfig().scales?.[scaleKey]?.range as (
+			u: unknown,
+			min: number,
+			max: number,
+			key: string,
+		) => void;
+		range({ scales: { [scaleKey]: { distr: 1 } } }, 40, 60, scaleKey);
+
+		const [, , rangeConfig] = rangeNum.mock.calls[0] as [
+			number,
+			number,
+			{ min: { soft: number }; max: { soft: number } },
+		];
+		return { min: rangeConfig.min.soft, max: rangeConfig.max.soft };
+	}
+
+	/** Renders y-axis ticks the way uPlot would, so unit formatting is observable. */
+	function yAxisTicks(builder: UPlotConfigBuilder, ticks: number[]): string[] {
+		const yAxis = builder.getConfig().axes?.find((a) => a.scale === 'y');
+		const values = yAxis?.values as (
+			u: unknown,
+			splits: number[],
+		) => (string | null)[];
+		return values(null, ticks).map((v) => String(v));
+	}
+
+	function builderFor(stack?: StackMode, seriesCount = 3): UPlotConfigBuilder {
+		const builder = new UPlotConfigBuilder({ id: 'stack-test' });
+		if (stack) {
+			builder.setStack(stack);
+		}
+		builder.addAxis({ scaleKey: 'y', show: true, side: 3, yAxisUnit: 'ms' });
+		for (let i = 0; i < seriesCount; i++) {
+			builder.addSeries({
+				scaleKey: 'y',
+				label: `S${i}`,
+				drawStyle: DrawStyle.Bar,
+				colorMapping: {},
+				isDarkMode: false,
+			} as SeriesProps);
+		}
+		return builder;
+	}
+
+	it('defaults to no stacking, so no bands and the panel unit on the axis', () => {
+		const builder = builderFor();
+
+		expect(builder.getStackMode()).toBe('none');
+		expect(builder.getConfig().bands).toBeUndefined();
+		expect(yAxisTicks(builder, [1000])).toStrictEqual(['1 s']);
+	});
+
+	it('derives one band per adjacent series pair once a stack is declared', () => {
+		expect(builderFor(StackMode.Normal).getConfig().bands).toStrictEqual([
+			{ series: [1, 2] },
+			{ series: [2, 3] },
+		]);
+	});
+
+	it('emits no bands for a single series', () => {
+		expect(builderFor(StackMode.Normal, 1).getConfig().bands).toBeUndefined();
+	});
+
+	it('keeps the panel unit on the axis for a normal stack', () => {
+		expect(yAxisTicks(builderFor(StackMode.Normal), [1000])).toStrictEqual([
+			'1 s',
+		]);
+	});
+
+	it('formats the axis as percentages for a percent stack', () => {
+		expect(yAxisTicks(builderFor(StackMode.Percent), [0, 50, 100])).toStrictEqual(
+			['0%', '50%', '100%'],
+		);
+	});
+
+	it('leaves other axes on their own unit under a percent stack', () => {
+		const builder = builderFor(StackMode.Percent);
+		builder.addAxis({ scaleKey: 'x', show: true, side: 2 });
+
+		expect(builder.getConfig().axes?.map((a) => a.scale)).toStrictEqual([
+			'y',
+			'x',
+		]);
+	});
+
+	it('pins the y scale to the 0–100 band under a percent stack, dropping panel limits', () => {
+		const builder = new UPlotConfigBuilder({ id: 'stack-scale' });
+		builder.setStack(StackMode.Percent);
+		builder.addScale({ scaleKey: 'y', softMin: 5, softMax: 500 });
+
+		// Soft, not hard: mixed-sign shares fall outside 0–100 and must stay visible.
+		expect(builder.getConfig().scales?.y).toMatchObject({ auto: true });
+		expect(scaleSoftLimits(builder, 'y')).toStrictEqual({ min: 0, max: 100 });
+	});
+
+	it('leaves the panel limits alone when the stack is not percent', () => {
+		const builder = new UPlotConfigBuilder({ id: 'stack-scale' });
+		builder.setStack(StackMode.Normal);
+		builder.addScale({ scaleKey: 'y', softMin: 5, softMax: 500 });
+
+		expect(scaleSoftLimits(builder, 'y')).toStrictEqual({ min: 5, max: 500 });
+	});
+
+	it.each([StackMode.Normal, StackMode.Percent])(
+		'draws thresholds under a %s stack',
+		(stack) => {
+			const builder = new UPlotConfigBuilder({ id: 'stack-thr' });
+			builder.setStack(stack);
+			builder.addThresholds({
+				scaleKey: 'y',
+				thresholds: [{ thresholdValue: 500, thresholdColor: 'red' }],
+				yAxisUnit: 'ms',
+			});
+
+			expect(builder.getConfig().hooks?.draw).toHaveLength(1);
+		},
+	);
+
+	it('keeps a source-unit threshold from stretching the percent band', () => {
+		const builder = new UPlotConfigBuilder({ id: 'stack-thr' });
+		builder.setStack(StackMode.Percent);
+		const thresholds = {
+			scaleKey: 'y',
+			thresholds: [{ thresholdValue: 500, thresholdColor: 'red' }],
+			yAxisUnit: 'ms',
+		};
+		builder.addThresholds(thresholds);
+		builder.addScale({ scaleKey: 'y', thresholds });
+
+		// Without this the 500ms threshold would widen a percentage axis to 0–500.
+		expect(scaleSoftLimits(builder, 'y')).toStrictEqual({ min: 0, max: 100 });
+	});
+
+	it('lets explicit bands win over the derived ones', () => {
+		const builder = builderFor(StackMode.Normal);
+		builder.setBands([{ series: [1, 3] }]);
+
+		expect(builder.getConfig().bands).toStrictEqual([{ series: [1, 3] }]);
+	});
+});

frontend/src/lib/uPlotV2/config/types.ts

@@ -33,6 +33,13 @@ export enum SelectionPreferencesSource {
 /**
  * Props for configuring the uPlot config builder
  */
+/** `Percent` rescales each x-slice to its column total, so every column fills to 100. */
+export enum StackMode {
+	None = 'none',
+	Normal = 'normal',
+	Percent = 'percent',
+}
+
 export interface ConfigBuilderProps {
 	id: string;
 	onDragSelect?: (startTime: number, endTime: number) => void;

frontend/src/lib/uPlotV2/utils/__tests__/dataUtils.test.ts

@@ -281,3 +281,20 @@ describe('dataUtils', () => {
 		});
 	});
 });
+
+describe('insertLargeGapNullsIntoAlignedData index alignment', () => {
+	// ChartWrapper gap-processes the pre-stack series to keep tooltip indices aligned;
+	// that only holds because insertions are decided from the x axis, never from y.
+	it('inserts at the same positions regardless of the y values', () => {
+		const x = [0, 100, 200];
+		const options = [{ spanGaps: 50 }];
+		const raw = [x, [1, 2, 3]] as uPlot.AlignedData;
+		const stacked = [x, [10, 20, 30]] as uPlot.AlignedData;
+
+		const fromRaw = insertLargeGapNullsIntoAlignedData(raw, options);
+		const fromStacked = insertLargeGapNullsIntoAlignedData(stacked, options);
+
+		expect(fromRaw[0]).toStrictEqual(fromStacked[0]);
+		expect(fromRaw[1]).toHaveLength((fromStacked[1] as unknown[]).length);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -7,6 +7,7 @@ import { PanelMode } from 'container/DashboardContainer/visualization/panels/typ
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
+import { StackMode } from 'lib/uPlotV2/config/types';
 import {
 	flattenTimeSeries,
 	getExecStats,
@@ -219,7 +220,9 @@ function BarPanelRenderer({
 						height={containerDimensions.height}
 						syncMode={dashboardPreference?.syncMode}
 						syncFilterMode={dashboardPreference?.syncFilterMode}
-						isStackedBarChart={spec.visualization?.stackedBarChart ?? false}
+						stack={
+							spec.visualization?.stackedBarChart ? StackMode.Normal : StackMode.None
+						}
 						renderTooltipFooter={renderTooltipFooter}
 						onClick={enableDrillDown ? handleChartClick : undefined}
 					/>

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/utils/buildConfig.ts

@@ -1,7 +1,6 @@
 import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
 import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
@@ -101,12 +100,6 @@ function addSeries({
 }: AddSeriesArgs): void {
 	const colorMapping = spec.legend?.customColors ?? {};
 
-	if (spec.visualization?.stackedBarChart) {
-		// uPlot uses 1-based series indices (index 0 is the timestamp axis);
-		// `+1` keeps the band targets aligned with the series we're about to add.
-		builder.setBands(getInitialStackedBands(series.length + 1));
-	}
-
 	series.forEach((s) => {
 		const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
 		const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);