fix(dashboards-v2): refine New Panel modal footer + section labels

- Keep the footer visible at all times; the "Add Panel" confirm is disabled
  until a panel type is selected (instead of hiding the whole footer).
- Footer layout: the section selector fills the available width and the
  confirm button takes its natural width (no more 50/50 split).
- Add a "Select panel type" label above the panel-type grid, matching the
  existing "Add panel to" label.

frontend/src/components/cmdKPalette/cmdKPalette.scss

@@ -1,12 +1,12 @@
 /* Overlay stays below content */
 [data-slot='dialog-overlay'] {
-	z-index: 1000 !important;
+	z-index: 50;
 }
 
 /* Dialog content always above overlay */
 [data-slot='dialog-content'] {
 	position: fixed;
-	z-index: 1001 !important;
+	z-index: 60;
 	background: var(--l1-background);
 	color: var(--l1-foreground);
 

frontend/src/container/MeterExplorer/Explorer/EmptyMeterSearch.module.scss

@@ -1,8 +0,0 @@
-.emptyMeterSearch {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-}

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

@@ -1,26 +0,0 @@
-import { Empty } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './EmptyMeterSearch.module.scss';
-
-interface EmptyMeterSearchProps {
-	hasQueryResult?: boolean;
-}
-
-export default function EmptyMeterSearch({
-	hasQueryResult,
-}: EmptyMeterSearchProps): JSX.Element {
-	return (
-		<div className={styles.emptyMeterSearch}>
-			<Empty
-				description={
-					<Typography.Title level={5}>
-						{hasQueryResult
-							? 'No data'
-							: 'Select a metric and run a query to see the results'}
-					</Typography.Title>
-				}
-			/>
-		</div>
-	);
-}

frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss

@@ -73,6 +73,34 @@
 				margin-top: 10px;
 				margin-bottom: 20px;
 			}
+
+			.empty-meter-search {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				width: 100%;
+				height: 100%;
+			}
+
+			.time-series-view-panel {
+				border-radius: 4px;
+				border: 1px solid var(--l1-border);
+				background: var(--l2-background);
+				padding: 8px !important;
+				margin: 8px;
+			}
+
+			.time-series-container {
+				display: grid;
+				grid-template-columns: repeat(
+					auto-fit,
+					minmax(min(100%, calc(50% - 8px)), 1fr)
+				);
+				gap: 16px;
+				width: 100%;
+				height: fit-content;
+			}
 		}
 	}
 
@@ -85,6 +113,22 @@
 	padding-bottom: 80px;
 }
 
+.meter-time-series-container {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+
+	.builder-units-filter {
+		padding: 0 8px;
+		margin-bottom: 0px !important;
+
+		.builder-units-filter-label {
+			margin-bottom: 0px !important;
+			font-size: 12px;
+		}
+	}
+}
+
 .dashboards-and-alerts-popover-container {
 	display: flex;
 	gap: 16px;

frontend/src/container/MeterExplorer/Explorer/MeterLoading.module.scss

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

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

@@ -1,17 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { DataSource } from 'types/common/queryBuilder';
-
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
-import styles from './MeterLoading.module.scss';
-
-export default function MeterLoading(): JSX.Element {
-	return (
-		<div className={styles.loadingMeter}>
-			<div className={styles.loadingMeterContent}>
-				<img className={styles.loadingGif} src={loadingPlaneUrl} alt="wait-icon" />
-				<Typography>Retrieving your {DataSource.METRICS}</Typography>
-			</div>
-		</div>
-	);
-}

frontend/src/container/MeterExplorer/Explorer/TimeSeries.module.scss

@@ -1,31 +0,0 @@
-.meterTimeSeriesContainer {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-5);
-	width: 100%;
-
-	:global(.builder-units-filter) {
-		padding: 0 var(--spacing-4);
-		margin-bottom: 0 !important;
-	}
-
-	:global(.builder-units-filter-label) {
-		margin-bottom: 0 !important;
-		font-size: 12px;
-	}
-}
-
-.timeSeriesContainer {
-	gap: var(--spacing-8);
-	width: 100%;
-	height: 50vh;
-	max-height: 50vh;
-	padding-right: 16px;
-	padding-left: 8px;
-}
-
-.timeSeriesViewPanel {
-	border-radius: 4px;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
-}

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

@@ -1,28 +1,27 @@
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
+import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
+import { isAxiosError } from 'axios';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
+import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
+import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-import { useTimezone } from 'providers/Timezone';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
+import APIError from 'types/api/error';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import uPlot from 'uplot';
-
-import { buildMeterChartConfig } from './configBuilder';
-import EmptyMeterSearch from './EmptyMeterSearch';
-import MeterLoading from './MeterLoading';
-import styles from './TimeSeries.module.scss';
-import { useTimeSeriesQueries } from './useTimeSeriesQueries';
-import { useTimeSeriesTimeManagement } from './useTimeSeriesTimeManagement';
-
-const WIDGET_ID = 'meter-explorer-bar-chart';
 
 interface TimeSeriesProps {
 	onFetchingStateChange?: (isFetching: boolean) => void;
@@ -33,124 +32,144 @@ function TimeSeries({
 	onFetchingStateChange,
 	isCancelled = false,
 }: TimeSeriesProps): JSX.Element {
-	const graphRef = useRef<HTMLDivElement>(null);
-
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
 
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-	const containerDimensions = useResizeObserver(graphRef);
-
 	const {
 		selectedTime: globalSelectedTime,
 		maxTime,
 		minTime,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
-	const { minTimeScale, maxTimeScale, onDragSelect } =
-		useTimeSeriesTimeManagement({
-			globalSelectedTime,
-			maxTime,
-			minTime,
-		});
+	const isValidToConvertToMs = useMemo(() => {
+		const isValid: boolean[] = [];
 
-	const { responseData, isLoading, isError } = useTimeSeriesQueries({
-		stagedQuery,
-		currentQuery,
-		globalSelectedTime,
-		maxTime,
-		minTime,
-		onFetchingStateChange,
-	});
+		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 queryPayloads = useMemo(
+		() => [stagedQuery || initialQueryMeterWithType],
+		[stagedQuery],
+	);
+
+	const { showErrorModal } = useErrorModal();
+
+	const queries = useQueries(
+		queryPayloads.map((payload, index) => ({
+			queryKey: [
+				REACT_QUERY_KEY.GET_QUERY_RANGE,
+				payload,
+				ENTITY_VERSION_V5,
+				globalSelectedTime,
+				maxTime,
+				minTime,
+				index,
+			],
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(
+					{
+						query: payload,
+						graphType: PANEL_TYPES.BAR,
+						selectedTime: 'GLOBAL_TIME',
+						globalSelectedInterval: globalSelectedTime,
+						params: {
+							dataSource: DataSource.METRICS,
+						},
+					},
+					ENTITY_VERSION_V5,
+					undefined,
+					signal,
+				),
+			enabled: !!payload,
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
+				let status: number | undefined;
+
+				if (error instanceof APIError) {
+					status = error.getHttpStatusCode();
+				} else if (isAxiosError(error)) {
+					status = error.response?.status;
+				}
+
+				if (status && status >= 400 && status < 500) {
+					return false;
+				}
+
+				return failureCount < MAX_QUERY_RETRIES;
+			},
+			onError: (error: APIError): void => {
+				showErrorModal(error);
+			},
+		})),
+	);
+
+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
+	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);
+
+	const responseData = useMemo(
+		() =>
+			data.map((datapoint) =>
+				isValidToConvertToMs ? convertDataValueToMs(datapoint) : datapoint,
+			),
+		[data, isValidToConvertToMs],
+	);
 
 	const hasMetricSelected = useMemo(
 		() => currentQuery.builder.queryData.some((q) => q.aggregateAttribute?.key),
 		[currentQuery],
 	);
 
-	const chartsData = useMemo(() => {
-		return responseData.map((response, index) => {
-			const apiResponse = response?.payload;
-
-			const config = buildMeterChartConfig({
-				id: `${WIDGET_ID}-${index}`,
-				isDarkMode,
-				currentQuery,
-				onDragSelect,
-				apiResponse,
-				timezone,
-				yAxisUnit: yAxisUnit || 'short',
-				minTimeScale,
-				maxTimeScale,
-			});
-
-			const chartData = apiResponse ? prepareChartData(apiResponse) : [];
-
-			return {
-				config,
-				chartData,
-				hasData: chartData.length > 0 && chartData[0]?.length > 0,
-			};
-		});
-	}, [
-		responseData,
-		currentQuery,
-		yAxisUnit,
-		isDarkMode,
-		onDragSelect,
-		timezone,
-		minTimeScale,
-		maxTimeScale,
-	]);
-
-	const hasAnyData = chartsData.some((chart) => chart.hasData);
-
 	return (
-		<div className={styles.meterTimeSeriesContainer}>
+		<div className="meter-time-series-container">
 			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
-			<div className={styles.timeSeriesContainer} ref={graphRef}>
-				{!hasMetricSelected && <EmptyMeterSearch />}
+			<div className="time-series-container">
+				{!hasMetricSelected && <EmptyMetricsSearch />}
 				{isCancelled && hasMetricSelected && (
 					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
 				)}
-				{isLoading && hasMetricSelected && !isCancelled && <MeterLoading />}
 				{!isCancelled &&
 					hasMetricSelected &&
-					!isLoading &&
-					!isError &&
-					!hasAnyData && (
-						<EmptyMeterSearch hasQueryResult={responseData[0] !== undefined} />
-					)}
-				{!isCancelled &&
-					hasMetricSelected &&
-					!isLoading &&
-					!isError &&
-					containerDimensions.width > 0 &&
-					containerDimensions.height > 0 &&
-					chartsData.map(
-						(chart, index) =>
-							chart.hasData && (
-								<div
-									className={styles.timeSeriesViewPanel}
-									// oxlint-disable-next-line react/no-array-index-key -- query responses have no stable ID
-									key={`${WIDGET_ID}-${index}`}
-								>
-									<BarChart
-										config={chart.config}
-										legendConfig={{
-											position: LegendPosition.BOTTOM,
-										}}
-										data={chart.chartData as uPlot.AlignedData}
-										width={containerDimensions.width}
-										height={containerDimensions.height}
-										isStackedBarChart
-										yAxisUnit={yAxisUnit || 'short'}
-										timezone={timezone}
-									/>
-								</div>
-							),
-					)}
+					responseData.map((datapoint, index) => (
+						<div
+							className="time-series-view-panel"
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+						>
+							<TimeSeriesView
+								isFilterApplied={false}
+								isError={queries[index].isError}
+								isLoading={queries[index].isLoading}
+								data={datapoint}
+								dataSource={DataSource.METRICS}
+								yAxisUnit={yAxisUnit}
+								panelType={PANEL_TYPES.BAR}
+							/>
+						</div>
+					))}
 			</div>
 		</div>
 	);

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

@@ -1,117 +0,0 @@
-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 {
-	DrawStyle,
-	SelectionPreferencesSource,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { get } from 'lodash-es';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import uPlot from 'uplot';
-
-export interface MeterChartConfigProps {
-	id: string;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse?: MetricRangePayloadProps;
-	timezone: Timezone;
-	yAxisUnit: string;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}
-
-export function buildMeterChartConfig({
-	id,
-	isDarkMode,
-	currentQuery,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	yAxisUnit,
-	minTimeScale,
-	maxTimeScale,
-}: MeterChartConfigProps): UPlotConfigBuilder {
-	const stepIntervals = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	) as Record<string, number>;
-	const minStepInterval = Object.keys(stepIntervals).length
-		? Math.min(...Object.values(stepIntervals))
-		: undefined;
-
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
-
-	const builder = new UPlotConfigBuilder({
-		id,
-		onDragSelect,
-		tzDate,
-		selectionPreferencesSource: SelectionPreferencesSource.IN_MEMORY,
-		stepInterval: minStepInterval,
-	});
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		min: minTimeScale,
-		max: maxTimeScale,
-	});
-
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-	});
-
-	builder.addAxis({
-		scaleKey: 'x',
-		show: true,
-		side: 2,
-		isDarkMode,
-		panelType: PANEL_TYPES.BAR,
-	});
-
-	builder.addAxis({
-		scaleKey: 'y',
-		show: true,
-		side: 3,
-		isDarkMode,
-		yAxisUnit,
-		panelType: PANEL_TYPES.BAR,
-	});
-
-	if (!apiResponse?.data?.result) {
-		return builder;
-	}
-
-	const seriesCount = (apiResponse.data.result.length ?? 0) + 1;
-	builder.setBands(getInitialStackedBands(seriesCount));
-
-	apiResponse.data.result.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '',
-			series.legend || '',
-		);
-
-		const label = getLegend(series, currentQuery, baseLabelName);
-		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
-
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			label,
-			colorMapping: {},
-			isDarkMode,
-			stepInterval: currentStepInterval,
-			metric: series.metric,
-		});
-	});
-
-	return builder;
-}

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

@@ -1,146 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { useQueries } from 'react-query';
-import { isAxiosError } from 'axios';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import { SuccessResponse } from 'types/api';
-import APIError from 'types/api/error';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-interface UseTimeSeriesQueriesProps {
-	stagedQuery: Query | null;
-	currentQuery: Query;
-	globalSelectedTime: Time | CustomTimeType;
-	maxTime: number;
-	minTime: number;
-	onFetchingStateChange?: (isFetching: boolean) => void;
-}
-
-interface UseTimeSeriesQueriesResult {
-	responseData: (SuccessResponse<MetricRangePayloadProps> | undefined)[];
-	isLoading: boolean;
-	isError: boolean;
-}
-
-export function useTimeSeriesQueries({
-	stagedQuery,
-	currentQuery,
-	globalSelectedTime,
-	maxTime,
-	minTime,
-	onFetchingStateChange,
-}: UseTimeSeriesQueriesProps): UseTimeSeriesQueriesResult {
-	const { showErrorModal } = useErrorModal();
-
-	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 queryPayloads = useMemo(
-		() => [stagedQuery || initialQueryMeterWithType],
-		[stagedQuery],
-	);
-
-	const queries = useQueries(
-		queryPayloads.map((payload, index) => ({
-			queryKey: [
-				REACT_QUERY_KEY.GET_QUERY_RANGE,
-				payload,
-				ENTITY_VERSION_V5,
-				globalSelectedTime,
-				maxTime,
-				minTime,
-				index,
-			],
-			queryFn: ({
-				signal,
-			}: {
-				signal?: AbortSignal;
-			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(
-					{
-						query: payload,
-						graphType: PANEL_TYPES.BAR,
-						selectedTime: 'GLOBAL_TIME',
-						globalSelectedInterval: globalSelectedTime,
-						params: {
-							dataSource: DataSource.METRICS,
-						},
-					},
-					ENTITY_VERSION_V5,
-					undefined,
-					signal,
-				),
-			enabled: !!payload,
-			retry: (failureCount: number, error: unknown): boolean => {
-				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-					return false;
-				}
-
-				let status: number | undefined;
-
-				if (error instanceof APIError) {
-					status = error.getHttpStatusCode();
-				} else if (isAxiosError(error)) {
-					status = error.response?.status;
-				}
-
-				if (status && status >= 400 && status < 500) {
-					return false;
-				}
-
-				return failureCount < MAX_QUERY_RETRIES;
-			},
-			onError: (error: APIError): void => {
-				showErrorModal(error);
-			},
-		})),
-	);
-
-	const isFetching = queries.some((q) => q.isFetching);
-	useEffect(() => {
-		onFetchingStateChange?.(isFetching);
-	}, [isFetching, onFetchingStateChange]);
-
-	const responseData = useMemo(() => {
-		const data = queries.map(({ data }) => data) ?? [];
-		return data.map((datapoint) =>
-			isValidToConvertToMs ? convertDataValueToMs(datapoint) : datapoint,
-		);
-	}, [queries, isValidToConvertToMs]);
-
-	const isLoading = queries.some((q) => q.isLoading);
-	const isError = queries.some((q) => q.isError);
-
-	return {
-		responseData,
-		isLoading,
-		isError,
-	};
-}

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

@@ -1,102 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
-import { QueryParams } from 'constants/query';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import useUrlQuery from 'hooks/useUrlQuery';
-import GetMinMax from 'lib/getMinMax';
-import getTimeString from 'lib/getTimeString';
-import history from 'lib/history';
-import { UpdateTimeInterval } from 'store/actions';
-import { getTimeRange } from 'utils/getTimeRange';
-
-interface UseTimeSeriesTimeManagementProps {
-	globalSelectedTime: Time | CustomTimeType;
-	maxTime: number;
-	minTime: number;
-}
-
-interface UseTimeSeriesTimeManagementResult {
-	minTimeScale: number | undefined;
-	maxTimeScale: number | undefined;
-	onDragSelect: (start: number, end: number) => void;
-}
-
-export function useTimeSeriesTimeManagement({
-	globalSelectedTime,
-	maxTime,
-	minTime,
-}: UseTimeSeriesTimeManagementProps): UseTimeSeriesTimeManagementResult {
-	const dispatch = useDispatch();
-	const urlQuery = useUrlQuery();
-	const location = useLocation();
-
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange();
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [maxTime, minTime, globalSelectedTime]);
-
-	const onDragSelect = useCallback(
-		(start: number, end: number): void => {
-			const startTimestamp = Math.trunc(start);
-			const endTimestamp = Math.trunc(end);
-
-			if (startTimestamp !== endTimestamp) {
-				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
-			}
-
-			const { maxTime, minTime } = GetMinMax('custom', [
-				startTimestamp,
-				endTimestamp,
-			]);
-
-			urlQuery.set(QueryParams.startTime, minTime.toString());
-			urlQuery.set(QueryParams.endTime, maxTime.toString());
-			urlQuery.delete(QueryParams.relativeTime);
-			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
-		},
-		[dispatch, location.pathname, urlQuery],
-	);
-
-	const handleBackNavigation = useCallback((): void => {
-		const searchParams = new URLSearchParams(window.location.search);
-		const startTime = searchParams.get(QueryParams.startTime);
-		const endTime = searchParams.get(QueryParams.endTime);
-		const relativeTime = searchParams.get(
-			QueryParams.relativeTime,
-		) as CustomTimeType;
-
-		if (relativeTime) {
-			dispatch(UpdateTimeInterval(relativeTime));
-		} else if (startTime && endTime && startTime !== endTime) {
-			dispatch(
-				UpdateTimeInterval('custom', [
-					parseInt(getTimeString(startTime), 10),
-					parseInt(getTimeString(endTime), 10),
-				]),
-			);
-		}
-	}, [dispatch]);
-
-	useEffect(() => {
-		window.addEventListener('popstate', handleBackNavigation);
-		return (): void => {
-			window.removeEventListener('popstate', handleBackNavigation);
-		};
-	}, [handleBackNavigation]);
-
-	return {
-		minTimeScale,
-		maxTimeScale,
-		onDragSelect,
-	};
-}

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -30,7 +30,6 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import history from 'lib/history';
-import { stackSeries } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { isEmpty } from 'lodash-es';
@@ -58,7 +57,6 @@ function TimeSeriesView({
 	dataSource,
 	setWarning,
 	panelType = PANEL_TYPES.TIME_SERIES,
-	stackBarChart = false,
 }: TimeSeriesViewProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 
@@ -67,23 +65,11 @@ function TimeSeriesView({
 	const location = useLocation();
 	const { currentQuery } = useQueryBuilder();
 
-	const rawChartData = useMemo(
+	const chartData = useMemo(
 		() => getUPlotChartData(data?.payload),
 		[data?.payload],
 	);
 
-	const { chartData, stackedBands } = useMemo(() => {
-		if (!stackBarChart || !rawChartData || rawChartData.length < 2) {
-			return { chartData: rawChartData, stackedBands: null };
-		}
-		const noSeriesHidden = (): boolean => false;
-		const { data: stacked, bands } = stackSeries(
-			rawChartData as uPlot.AlignedData,
-			noSeriesHidden,
-		);
-		return { chartData: stacked, stackedBands: bands };
-	}, [rawChartData, stackBarChart]);
-
 	useEffect(() => {
 		if (data?.payload) {
 			setWarning?.(data?.warning);
@@ -203,7 +189,7 @@ function TimeSeriesView({
 
 	const { timezone } = useTimezone();
 
-	const baseChartOptions = getUPlotChartOptions({
+	const chartOptions = getUPlotChartOptions({
 		id: 'time-series-explorer',
 		onDragSelect,
 		yAxisUnit: yAxisUnit || '',
@@ -236,14 +222,6 @@ function TimeSeriesView({
 		},
 	});
 
-	const chartOptions = useMemo(
-		() =>
-			stackedBands
-				? { ...baseChartOptions, bands: stackedBands }
-				: baseChartOptions,
-		[baseChartOptions, stackedBands],
-	);
-
 	return (
 		<div className="time-series-view">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
@@ -304,7 +282,6 @@ interface TimeSeriesViewProps {
 	dataSource: DataSource;
 	setWarning?: Dispatch<SetStateAction<Warning | undefined>>;
 	panelType?: PANEL_TYPES;
-	stackBarChart?: boolean;
 }
 
 TimeSeriesView.defaultProps = {
@@ -313,7 +290,6 @@ TimeSeriesView.defaultProps = {
 	error: undefined,
 	setWarning: undefined,
 	panelType: PANEL_TYPES.TIME_SERIES,
-	stackBarChart: false,
 };
 
 export default TimeSeriesView;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/index.tsx

@@ -52,8 +52,13 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	const { user } = useAppContext();
 	const { showErrorModal } = useErrorModal();
 	const { patchAsync } = useOptimisticPatch();
-	const { isPickerOpen, openPicker, closePicker, createPanel } =
-		useCreatePanel();
+	const {
+		isPickerOpen,
+		openPicker,
+		closePicker,
+		createPanel,
+		targetLayoutIndex,
+	} = useCreatePanel();
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
@@ -153,6 +158,7 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 				open={isPickerOpen}
 				onClose={closePicker}
 				onSelect={createPanel}
+				defaultLayoutIndex={targetLayoutIndex}
 			/>
 		</section>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -1,22 +1,69 @@
+.panelTypeSection {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	align-items: center;
+}
+
 .grid {
+	align-self: stretch;
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	gap: 8px;
 }
 
-.typeButton {
+.panelTypeCard {
 	display: flex;
+	flex-direction: column;
 	align-items: center;
-	gap: 8px;
+	border: 1px solid var(--l2-border);
+	background: var(--l2-background);
 	padding: 12px;
-	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--l1-border);
+	gap: 12px;
+	cursor: pointer;
+	font: inherit;
 	border-radius: 4px;
 	color: var(--l1-foreground);
-	cursor: pointer;
-	text-align: left;
+	transition:
+		transform 180ms ease,
+		border-color 180ms ease;
 
 	&:hover {
-		border-color: var(--bg-robin-500);
+		background-color: var(--l2-background-hover);
+		border-color: var(--bg-robin-400);
+	}
+	&:active {
+		transform: translateY(2px);
 	}
 }
+
+.panelTypeCardSelected {
+	border-color: var(--bg-robin-400);
+	background-color: var(--l2-background-hover);
+	box-shadow: inset 0 0 0 1px var(--bg-robin-400);
+}
+
+.footerActions {
+	display: flex;
+	align-items: flex-end;
+	justify-content: flex-end;
+	gap: 8px;
+	width: 100%;
+}
+
+.footerPicker {
+	// Take all the width left over by the (natural-width) confirm button.
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: 6px;
+	min-width: 0;
+}
+
+.pickerLabel {
+	color: var(--l3-foreground);
+	font-size: 11px;
+	font-weight: 500;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -1,45 +1,135 @@
-import { Modal } from 'antd';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+import cx from 'classnames';
 
+import { useDashboardSections } from '../../../hooks/useDashboardSections';
 import type { PanelKind } from '../../../Panels/types/panelKind';
 import { PANEL_TYPES } from './constants';
+import SectionPicker from './SectionPicker';
+import { buildSectionOptions, resolveDefaultSectionValue } from './utils';
 import styles from './PanelTypeSelectionModal.module.scss';
+import { Plus } from '@signozhq/icons';
 
 interface PanelTypeSelectionModalProps {
 	open: boolean;
 	onClose: () => void;
-	onSelect: (panelKind: PanelKind) => void;
+	onSelect: (panelKind: PanelKind, layoutIndex?: number) => void;
+	/** Section the picker opens on; omit → the untitled root / first section. */
+	defaultLayoutIndex?: number;
 }
 
+/** Fake loader shown on the confirm button before navigating to the editor. */
+const CONFIRM_LOADER_MS = 500;
+
 function PanelTypeSelectionModal({
 	open,
 	onClose,
 	onSelect,
+	defaultLayoutIndex,
 }: PanelTypeSelectionModalProps): JSX.Element {
+	const sections = useDashboardSections();
+	const options = useMemo(() => buildSectionOptions(sections), [sections]);
+	const hasSectionPicker = options.length > 1;
+
+	const [selectedValue, setSelectedValue] = useState('');
+	const [selectedPanelKind, setSelectedPanelKind] = useState<PanelKind | null>(
+		null,
+	);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const clearTimer = useCallback((): void => {
+		if (timerRef.current !== null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+	}, []);
+
+	// Seed the target section on open; cancel a pending navigation on close.
+	useEffect(() => {
+		if (open) {
+			setSelectedValue(resolveDefaultSectionValue(options, defaultLayoutIndex));
+			setSelectedPanelKind(null);
+			setIsSubmitting(false);
+		} else {
+			clearTimer();
+		}
+	}, [open, options, defaultLayoutIndex, clearTimer]);
+
+	useEffect(() => clearTimer, [clearTimer]);
+
+	const handleConfirm = (): void => {
+		if (selectedPanelKind === null || isSubmitting) {
+			return;
+		}
+		setIsSubmitting(true);
+		const layoutIndex = selectedValue === '' ? undefined : Number(selectedValue);
+		timerRef.current = setTimeout(() => {
+			onSelect(selectedPanelKind, layoutIndex);
+		}, CONFIRM_LOADER_MS);
+	};
+
+	// Footer is always shown; the confirm button is disabled until a panel type is picked.
+	const footer = (
+		<div className={styles.footerActions}>
+			{hasSectionPicker && (
+				<div className={styles.footerPicker}>
+					<span className={styles.pickerLabel}>Add panel to</span>
+					<SectionPicker
+						options={options}
+						value={selectedValue}
+						onChange={setSelectedValue}
+					/>
+				</div>
+			)}
+			<Button
+				color="primary"
+				size="md"
+				disabled={selectedPanelKind === null}
+				loading={isSubmitting}
+				prefix={<Plus size={16} />}
+				onClick={handleConfirm}
+				testId="panel-type-confirm"
+			>
+				Add Panel
+			</Button>
+		</div>
+	);
+
 	return (
-		<Modal
+		<DialogWrapper
 			open={open}
-			title="Select a panel type"
-			onCancel={onClose}
-			footer={null}
-			destroyOnClose
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			title="New Panel"
+			footer={footer}
 		>
-			<div className={styles.grid}>
-				{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
-					<Button
-						key={panelKind}
-						type="button"
-						variant="ghost"
-						className={styles.typeButton}
-						data-testid={`panel-type-${panelKind}`}
-						onClick={(): void => onSelect(panelKind)}
-					>
-						<Icon size={14} />
-						{label}
-					</Button>
-				))}
+			<div className={styles.panelTypeSection}>
+				<span className={styles.pickerLabel}>Select panel type</span>
+				<div className={styles.grid}>
+					{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
+						<button
+							key={panelKind}
+							type="button"
+							className={cx(styles.panelTypeCard, {
+								[styles.panelTypeCardSelected]: panelKind === selectedPanelKind,
+							})}
+							data-testid={`panel-type-${panelKind}`}
+							aria-pressed={panelKind === selectedPanelKind}
+							onClick={(): void => setSelectedPanelKind(panelKind)}
+						>
+							<Icon size={24} color={Color.BG_ROBIN_400} />
+							{label}
+						</button>
+					))}
+				</div>
 			</div>
-		</Modal>
+		</DialogWrapper>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/SectionPicker.module.scss

@@ -0,0 +1,55 @@
+.select {
+	width: 100%;
+}
+
+.dropdown {
+	min-width: 260px;
+}
+
+.rootIcon {
+	color: var(--bg-robin-400);
+	flex-shrink: 0;
+}
+
+.sectionIcon {
+	color: var(--l3-foreground);
+	flex-shrink: 0;
+}
+
+.triggerValue {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	overflow: hidden;
+}
+
+.triggerLabel {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.optionRow {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 4px 0;
+}
+
+.optionText {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	overflow: hidden;
+}
+
+.optionLabel {
+	color: var(--l1-foreground);
+	line-height: 1.2;
+}
+
+.optionDescription {
+	color: var(--l3-foreground);
+	font-size: 12px;
+	line-height: 1.2;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/SectionPicker.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+// eslint-disable-next-line signoz/no-antd-components
+import { Select } from 'antd';
+
+import type { SectionOption } from './types';
+import styles from './SectionPicker.module.scss';
+
+interface SectionPickerProps {
+	options: SectionOption[];
+	value: string;
+	onChange: (value: string) => void;
+}
+
+function SectionPicker({
+	options,
+	value,
+	onChange,
+}: SectionPickerProps): JSX.Element {
+	// `selectedLabel` (one line) shows in the trigger; `label` (two lines) in the list.
+	const selectOptions = useMemo(
+		() =>
+			options.map((option) => {
+				const iconClass = option.isRoot ? styles.rootIcon : styles.sectionIcon;
+				return {
+					value: option.value,
+					selectedLabel: (
+						<span className={styles.triggerValue}>
+							<option.Icon size={16} className={iconClass} />
+							<span className={styles.triggerLabel}>{option.label}</span>
+						</span>
+					),
+					label: (
+						<span
+							className={styles.optionRow}
+							data-testid={`panel-section-option-${option.layoutIndex}`}
+						>
+							<option.Icon size={16} className={iconClass} />
+							<span className={styles.optionText}>
+								<span className={styles.optionLabel}>{option.label}</span>
+								<span className={styles.optionDescription}>{option.description}</span>
+							</span>
+						</span>
+					),
+				};
+			}),
+		[options],
+	);
+
+	return (
+		<Select<string>
+			className={styles.select}
+			popupClassName={styles.dropdown}
+			value={value}
+			onChange={onChange}
+			data-testid="panel-section-select"
+			optionLabelProp="selectedLabel"
+			getPopupContainer={(trigger): HTMLElement =>
+				trigger.parentElement ?? document.body
+			}
+			options={selectOptions}
+		/>
+	);
+}
+
+export default SectionPicker;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts

@@ -14,3 +14,16 @@ export interface PanelType {
 	/** Icon component — the consumer renders it and controls size/color/etc. */
 	Icon: ComponentType<IconProps>;
 }
+
+export interface SectionOption {
+	/** The section's `layoutIndex`, stringified for the Select value. */
+	value: string;
+	layoutIndex: number;
+	/** Section title, or "Dashboard (root)" for the untitled top-level layout. */
+	label: string;
+	/** Caption under the label. */
+	description: string;
+	/** Untitled top-level layout (has no section header). */
+	isRoot: boolean;
+	Icon: ComponentType<IconProps>;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/utils.ts

@@ -0,0 +1,41 @@
+import { LayoutDashboard, Rows2 } from '@signozhq/icons';
+
+import type { DashboardSection } from '../../../utils';
+import type { SectionOption } from './types';
+
+const ROOT_LABEL = 'Dashboard (root)';
+const ROOT_DESCRIPTION = 'Top level — no section';
+const SECTION_DESCRIPTION = 'Section';
+
+/** Maps dashboard sections to section-picker options (untitled → "root"). */
+export function buildSectionOptions(
+	sections: DashboardSection[],
+): SectionOption[] {
+	return sections.map((section) => {
+		const isRoot = !section.title;
+		return {
+			value: String(section.layoutIndex),
+			layoutIndex: section.layoutIndex,
+			label: isRoot ? ROOT_LABEL : (section.title as string),
+			description: isRoot ? ROOT_DESCRIPTION : SECTION_DESCRIPTION,
+			isRoot,
+			Icon: isRoot ? LayoutDashboard : Rows2,
+		};
+	});
+}
+
+/**
+ * Picks the option the picker should open on: the section the "Add panel" was
+ * triggered from when present and still valid, otherwise the first option.
+ */
+export function resolveDefaultSectionValue(
+	options: SectionOption[],
+	defaultLayoutIndex: number | undefined,
+): string {
+	const fallback = options[0]?.value ?? '';
+	if (defaultLayoutIndex === undefined) {
+		return fallback;
+	}
+	const target = String(defaultLayoutIndex);
+	return options.some((option) => option.value === target) ? target : fallback;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -29,8 +29,13 @@ interface SectionProps {
 
 function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
-	const { isPickerOpen, openPicker, closePicker, createPanel } =
-		useCreatePanel();
+	const {
+		isPickerOpen,
+		openPicker,
+		closePicker,
+		createPanel,
+		targetLayoutIndex,
+	} = useCreatePanel();
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
@@ -141,6 +146,7 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 				open={isPickerOpen}
 				onClose={closePicker}
 				onSelect={createPanel}
+				defaultLayoutIndex={targetLayoutIndex}
 			/>
 			<ConfirmDeleteDialog
 				open={isDeleteOpen}

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useCreatePanel.ts

@@ -12,7 +12,10 @@ interface UseCreatePanelResult {
 	/** Pass the target section's layout index; omit → last/new section. */
 	openPicker: (layoutIndex?: number) => void;
 	closePicker: () => void;
-	createPanel: (panelKind: PanelKind) => void;
+	/** The section the picker was opened against — seeds its section dropdown. */
+	targetLayoutIndex: number | undefined;
+	/** `layoutIndex` overrides the opened-against target (the dropdown's choice). */
+	createPanel: (panelKind: PanelKind, layoutIndex?: number) => void;
 }
 
 /**
@@ -38,16 +41,23 @@ export function useCreatePanel(): UseCreatePanelResult {
 	}, []);
 
 	const createPanel = useCallback(
-		(panelKind: PanelKind): void => {
+		(panelKind: PanelKind, targetIndex?: number): void => {
 			setIsPickerOpen(false);
 			const path = generatePath(ROUTES.DASHBOARD_PANEL_EDITOR, {
 				dashboardId,
 				panelId: NEW_PANEL_ID,
 			});
-			safeNavigate(`${path}${newPanelSearch(panelKind, layoutIndex)}`);
+			const target = targetIndex ?? layoutIndex;
+			safeNavigate(`${path}${newPanelSearch(panelKind, target)}`);
 		},
 		[safeNavigate, dashboardId, layoutIndex],
 	);
 
-	return { isPickerOpen, openPicker, closePicker, createPanel };
+	return {
+		isPickerOpen,
+		openPicker,
+		closePicker,
+		targetLayoutIndex: layoutIndex,
+		createPanel,
+	};
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardSections.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { useGetDashboardV2 } from 'api/generated/services/dashboard';
+
+import { useDashboardStore } from '../store/useDashboardStore';
+import { type DashboardSection, layoutsToSections } from '../utils';
+
+/**
+ * The current dashboard's sections, read from the already-loaded dashboard
+ * query. The page fetches via useGetDashboardV2 keyed by id, so this reuses that
+ * cache (no extra request) instead of prop-drilling the section list.
+ */
+export function useDashboardSections(): DashboardSection[] {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const { data } = useGetDashboardV2({ id: dashboardId });
+	const spec = data?.data?.spec;
+
+	return useMemo(
+		() => layoutsToSections(spec?.layouts, spec?.panels),
+		[spec?.layouts, spec?.panels],
+	);
+}

frontend/src/periscope/components/DataViewer/DataViewer.styles.scss

@@ -12,6 +12,16 @@
 		padding-bottom: 8px;
 	}
 
+	&__mode-select {
+		min-width: 90px;
+	}
+
+	// Dropdown content is rendered in a portal; bump above FloatingPanel
+	// (z-index 999) so it stays visible when the consumer panel is floating.
+	&__mode-dropdown {
+		--dropdown-menu-content-z-index: 1000;
+	}
+
 	&__copy-btn {
 		display: flex;
 		align-items: center;
@@ -35,7 +45,8 @@
 		display: flex;
 		flex-direction: column;
 		border: 1px solid var(--l2-border);
-		border-top: 0px;
+		border-radius: 4px;
+		padding: 8px;
 		min-height: 0;
 	}
 }

frontend/src/periscope/components/DataViewer/DataViewer.tsx

@@ -1,24 +1,23 @@
 import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Copy } from '@signozhq/icons';
+import { ChevronDown, Copy } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import logEvent from 'api/common/logEvent';
 import { JsonView } from 'periscope/components/JsonView';
-import { PrettyView, PrettyViewProps } from 'periscope/components/PrettyView';
+import { PrettyView } from 'periscope/components/PrettyView';
+import { PrettyViewProps } from 'periscope/components/PrettyView';
 
 import './DataViewer.styles.scss';
 
-enum ViewMode {
-	Pretty = 'pretty',
-	Json = 'json',
-}
+type ViewMode = 'pretty' | 'json';
 
 const VIEW_MODE_CHANGED_EVENT = 'Data Viewer: View mode changed';
 
 const VIEW_MODE_OPTIONS: { label: string; value: ViewMode }[] = [
-	{ label: 'Pretty', value: ViewMode.Pretty },
-	{ label: 'JSON', value: ViewMode.Json },
+	{ label: 'Pretty', value: 'pretty' },
+	{ label: 'JSON', value: 'json' },
 ];
 
 export interface DataViewerProps {
@@ -33,18 +32,13 @@ function DataViewer({
 	drawerKey = 'default',
 	prettyViewProps,
 }: DataViewerProps): JSX.Element {
-	const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.Pretty);
+	const [viewMode, setViewMode] = useState<ViewMode>('pretty');
 	const [, setCopy] = useCopyToClipboard();
 
 	const jsonString = useMemo(() => JSON.stringify(data, null, 2), [data]);
 
 	const handleViewModeChange = (value: string): void => {
 		const next = value as ViewMode;
-		// A single-select toggle can emit '' when the active item is toggled off;
-		// ignore it so one mode is always selected.
-		if (next !== ViewMode.Pretty && next !== ViewMode.Json) {
-			return;
-		}
 		setViewMode(next);
 		try {
 			logEvent(VIEW_MODE_CHANGED_EVENT, {
@@ -65,17 +59,41 @@ function DataViewer({
 		});
 	};
 
+	const currentLabel =
+		VIEW_MODE_OPTIONS.find((opt) => opt.value === viewMode)?.label ?? 'Pretty';
+
 	return (
 		<div className="data-viewer">
 			<div className="data-viewer__toolbar">
-				<ToggleGroupSimple
-					type="single"
-					size="sm"
-					value={viewMode}
-					onChange={handleViewModeChange}
-					items={VIEW_MODE_OPTIONS}
-					testId="data-viewer-view-mode"
-				/>
+				<Dropdown
+					align="start"
+					className="data-viewer__mode-dropdown"
+					menu={{
+						items: [
+							{
+								type: 'radio-group',
+								value: viewMode,
+								onChange: handleViewModeChange,
+								children: VIEW_MODE_OPTIONS.map((opt) => ({
+									type: 'radio',
+									key: opt.value,
+									value: opt.value,
+									label: opt.label,
+								})),
+							},
+						],
+					}}
+				>
+					<Button
+						variant="outlined"
+						size="sm"
+						color="secondary"
+						className="data-viewer__mode-select"
+						suffix={<ChevronDown size={12} />}
+					>
+						{currentLabel}
+					</Button>
+				</Dropdown>
 				<button
 					type="button"
 					className="data-viewer__copy-btn"
@@ -87,10 +105,10 @@ function DataViewer({
 			</div>
 
 			<div className="data-viewer__content">
-				{viewMode === ViewMode.Pretty && (
+				{viewMode === 'pretty' && (
 					<PrettyView data={data} drawerKey={drawerKey} {...prettyViewProps} />
 				)}
-				{viewMode === ViewMode.Json && <JsonView data={jsonString} />}
+				{viewMode === 'json' && <JsonView data={jsonString} />}
 			</div>
 		</div>
 	);

frontend/src/periscope/components/JsonView/JsonView.tsx

@@ -23,9 +23,6 @@ const editorOptions: EditorProps['options'] = {
 	lineHeight: 18,
 	colorDecorators: true,
 	scrollBeyondLastLine: false,
-	// Disabled: the transparent editor background leaves the sticky-scroll widget
-	// without an opaque backing, so scrolling lines bleed through and overlap it.
-	stickyScroll: { enabled: false },
 	scrollbar: {
 		vertical: 'hidden',
 		horizontal: 'hidden',

frontend/src/periscope/components/PrettyView/PrettyView.styles.scss

@@ -12,10 +12,8 @@
 
 	&__search-input {
 		width: 100%;
-		border: 0 !important;
-		border-top: 1px solid var(--l2-border) !important;
-		border-bottom: 1px solid var(--l2-border) !important;
-		border-radius: 0 !important;
+		border: 1px solid var(--l2-border) !important;
+		border-radius: 4px;
 		font-family: 'SF Mono', 'Geist Mono', 'Fira Code', monospace !important;
 		font-size: 12px !important;
 		line-height: 18px !important;
@@ -24,7 +22,6 @@
 		box-shadow: none !important;
 
 		&:focus {
-			border: 1px solid var(--l2-border) !important;
 			border-color: var(--primary) !important;
 			outline: none !important;
 			box-shadow: none !important;
@@ -50,9 +47,6 @@
 	> ul,
 	&__pinned > ul {
 		padding-left: 0 !important;
-		// Clip the hover bleed to the panel width. `clip` (not `hidden`) does
-		// not create a scroll container, so the sticky search stays working.
-		overflow-x: clip;
 	}
 
 	// Force font on all tree elements
@@ -77,87 +71,45 @@
 		margin-right: 16px;
 	}
 
-	// Leaf node row — full-width hover highlight
+	// Leaf node row — hover highlights only this row
 	&__row {
+		border-radius: 2px;
 		display: flex !important;
 		align-items: baseline;
-		position: relative;
-		isolation: isolate; // own stacking context so ::before sits behind content, not the panel bg
 
-		// Keep actions visible on hover, or while this row's menu is open
-		&:hover .pretty-view__actions,
-		&:has(> span [data-state='open']) .pretty-view__actions {
-			opacity: 1;
-		}
+		&:hover {
+			background-color: var(--l3-background);
 
-		// Edge-to-edge highlight, bled past indentation, clipped by `> ul`.
-		// Persists while this row's ... menu is open (the trigger stays in the
-		// row and carries data-state=open, even though the menu is portaled out).
-		&:hover::before,
-		&:has(> span [data-state='open'])::before {
-			content: '';
-			position: absolute;
-			inset: 0 -9999px;
-			background: var(--l3-background);
-			z-index: -1;
+			.pretty-view__actions {
+				opacity: 1;
+			}
 		}
 
 		// Push actions to the right edge
 		> span {
 			flex: 1;
 		}
-
-		// Brighten the value text from its default grey to foreground-hover
-		// while the row is active (hover, or its ... menu open). !important
-		// overrides react-json-tree's per-type inline color on the value span.
-		&:hover > span,
-		&:has(> span [data-state='open']) > span {
-			color: var(--l1-foreground-hover) !important;
-		}
 	}
 
-	// Nested node (object/array) — full-width hover on the header line only
+	// Nested node (object/array) — hover only on the label line, not children
 	&__nested-row {
-		position: relative;
-		isolation: isolate;
-
 		> label,
 		> span:not(ul span) {
+			border-radius: 2px;
 			padding: 1px 2px;
 			display: inline !important; // keep item string inline with label
 		}
 
-		// Edge-to-edge highlight, capped to the header line so it doesn't
-		// cover the children this <li> contains. Persists while this row's own
-		// menu is open — `> span` scopes it so a child row's open menu (nested
-		// in `> ul`) doesn't light up this parent.
-		&:hover::before,
-		&:has(> span [data-state='open'])::before {
-			content: '';
-			position: absolute;
-			top: 0;
-			height: 20px; // 18px line-height + 2px top padding
-			left: -9999px;
-			right: -9999px;
-			background: var(--l3-background);
-			z-index: -1;
+		// Highlight label + item string on hover, show actions
+		&:hover > label,
+		&:hover > label + span {
+			background-color: var(--l3-background);
 		}
 
-		&:hover > label + span .pretty-view__actions,
-		&:has(> span [data-state='open']) > label + span .pretty-view__actions {
+		&:hover > label + span .pretty-view__actions {
 			opacity: 1;
 		}
 
-		// Push the ... to the right edge of the row instead of hugging the key.
-		// Absolute (not flex) so the arrow/label/children layout stays intact;
-		// the row <li> is position: relative (react-json-tree sets it inline).
-		.pretty-view__actions {
-			position: absolute;
-			top: 2px; // align with the header line (li padding-top)
-			right: 0;
-			height: 18px; // line-height — centers the icon (span is align-items: center)
-		}
-
 		// In nested rows, value-row should not take full width
 		.pretty-view__value-row {
 			width: auto;
@@ -220,7 +172,6 @@
 		display: inline-flex;
 		align-items: baseline;
 		gap: 6px;
-		padding-left: 6px !important;
 	}
 
 	&__pinned-icon {

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -138,33 +138,14 @@ func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind,
 	return nil
 }
 
-const maxLayoutsPerDashboard = 500
-
-// validateLayouts validates the dashboard's layouts: bounded section count,
-// per-item geometry, resolvable panel references, and no panel placed twice.
-// Geometry (validateGridLayoutGeometry) needs only each layout's own data but
-// runs here so its errors can name the layout by index.
+// validateLayouts rejects grid items referencing a panel that doesn't exist.
 func (d *DashboardSpec) validateLayouts() error {
-	if len(d.Layouts) > maxLayoutsPerDashboard {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts: dashboard has %d layouts; maximum is %d", len(d.Layouts), maxLayoutsPerDashboard)
-	}
-
-	// Could enforce this but skipping for now: panels in no grid item (orphans)
-	// are allowed.
-
-	// The frontend keys each grid item by its panel id, so placing one panel in
-	// two grid items collides; reject duplicate references dashboard-wide. Maps
-	// each referenced panel key to the path of the item that first placed it.
-	referencedPanels := make(map[string]string, len(d.Panels))
 	for li, layout := range d.Layouts {
 		grid, ok := layout.Spec.(*dashboard.GridLayoutSpec)
 		if !ok {
 			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
 			return errors.NewInternalf(errors.CodeInternal, "spec.layouts[%d].spec: unexpected layout spec type %T", li, layout.Spec)
 		}
-		if err := validateGridLayoutGeometry(grid, li); err != nil {
-			return err
-		}
 		for ii, item := range grid.Items {
 			path := fmt.Sprintf("spec.layouts[%d].spec.items[%d].content", li, ii)
 			if item.Content == nil {
@@ -177,10 +158,6 @@ func (d *DashboardSpec) validateLayouts() error {
 			if _, ok := d.Panels[key]; !ok {
 				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: references unknown panel %q", path, key)
 			}
-			if firstPath, dup := referencedPanels[key]; dup {
-				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: panel %q is already placed by %s", path, key, firstPath)
-			}
-			referencedPanels[key] = path
 		}
 	}
 	return nil

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -299,22 +299,19 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 	// Layout edits
 	// ─────────────────────────────────────────────────────────────────
 
-	t.Run("move panel by editing layout y coordinate", func(t *testing.T) {
-		// p2 fills the right half of row 0, so p1 can only move to a fresh row
-		// without tripping overlap validation.
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/y", "value": 6}]`).Apply(base)
+	t.Run("move panel by editing layout x coordinate", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/x", "value": 6}]`).Apply(base)
 		require.NoError(t, err)
 		raw := jsonOf(t, out)
-		// The first item used to live at y=0, now lives at y=6.
-		assert.Contains(t, raw, `"x":0,"y":6,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
+		// The first item used to live at x=0, now lives at x=6.
+		assert.Contains(t, raw, `"x":6,"y":0,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
 	})
 
 	t.Run("resize panel by editing layout width", func(t *testing.T) {
-		// p2 sits at x=6, so p1 (at x=0) can only shrink; widening it would overlap.
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 3}]`).Apply(base)
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 12}]`).Apply(base)
 		require.NoError(t, err)
 		raw := jsonOf(t, out)
-		assert.Contains(t, raw, `"width":3`)
+		assert.Contains(t, raw, `"width":12`)
 	})
 
 	t.Run("rename layout row title", func(t *testing.T) {
@@ -324,12 +321,11 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 	})
 
 	t.Run("append layout item", func(t *testing.T) {
-		// Appending needs a not-yet-placed panel, so add one in the same patch;
-		// re-placing p1 or p2 would be a duplicate reference.
-		out, err := decode(t, `[
-			{"op": "add", "path": "/spec/panels/p3", "value": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}},
-			{"op": "add", "path": "/spec/layouts/0/spec/items/-", "value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p3"}}}
-		]`).Apply(base)
+		out, err := decode(t, `[{
+			"op": "add",
+			"path": "/spec/layouts/0/spec/items/-",
+			"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
+		}]`).Apply(base)
 		require.NoError(t, err)
 		// Item count went 2 → 3.
 		raw := jsonOf(t, out)

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -8,7 +8,6 @@ import (
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/perses/spec/go/dashboard"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 	"k8s.io/apimachinery/pkg/util/validation"
@@ -26,19 +25,19 @@ func TestValidateBigExample(t *testing.T) {
 	data, err := os.ReadFile("testdata/perses.json")
 	require.NoError(t, err, "reading example file")
 	_, err = unmarshalDashboard(data)
-	assert.NoError(t, err, "expected valid dashboard")
+	require.NoError(t, err, "expected valid dashboard")
 }
 
 func TestValidateDashboardWithSections(t *testing.T) {
 	data, err := os.ReadFile("testdata/perses_with_sections.json")
 	require.NoError(t, err, "reading example file")
 	_, err = unmarshalDashboard(data)
-	assert.NoError(t, err, "expected valid dashboard")
+	require.NoError(t, err, "expected valid dashboard")
 }
 
 func TestInvalidateNotAJSON(t *testing.T) {
 	_, err := unmarshalDashboard([]byte("not json"))
-	assert.Error(t, err, "expected error for invalid JSON")
+	require.Error(t, err, "expected error for invalid JSON")
 }
 
 // TestUnmarshalErrorPreservesNestedMessage guards the wrap on dec.Decode in
@@ -61,11 +60,11 @@ func TestUnmarshalErrorPreservesNestedMessage(t *testing.T) {
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err)
 
-	assert.Contains(t, err.Error(), "unknown panel plugin kind",
+	require.Contains(t, err.Error(), "unknown panel plugin kind",
 		"outer wrap should not smother the inner UnmarshalJSON message")
-	assert.Contains(t, err.Error(), `"NonExistentPanel"`,
+	require.Contains(t, err.Error(), `"NonExistentPanel"`,
 		"the offending value should still appear in the error")
-	assert.Contains(t, err.Error(), "allowed values:",
+	require.Contains(t, err.Error(), "allowed values:",
 		"the allowed-values hint should still appear in the error")
 
 	assert.True(t, errors.Ast(err, errors.TypeInvalidInput),
@@ -78,7 +77,7 @@ func TestValidateEmptySpec(t *testing.T) {
 	// no variables no panels
 	data := []byte(`{}`)
 	_, err := unmarshalDashboard(data)
-	assert.NoError(t, err, "expected valid")
+	require.NoError(t, err, "expected valid")
 }
 
 func TestValidateOnlyVariables(t *testing.T) {
@@ -110,7 +109,7 @@ func TestValidateOnlyVariables(t *testing.T) {
 		"layouts": []
 	}`)
 	_, err := unmarshalDashboard(data)
-	assert.NoError(t, err, "expected valid")
+	require.NoError(t, err, "expected valid")
 }
 
 func TestInvalidateDuplicateVariableNames(t *testing.T) {
@@ -137,7 +136,7 @@ func TestInvalidateDuplicateVariableNames(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected error for duplicate variable name")
-	assert.Contains(t, err.Error(), `duplicate variable name "env"`)
+	require.Contains(t, err.Error(), `duplicate variable name "env"`)
 }
 
 func TestInvalidateVariableNameWithInvalidChars(t *testing.T) {
@@ -164,19 +163,19 @@ func TestInvalidateVariableNameWithInvalidChars(t *testing.T) {
 		t.Run(name, func(t *testing.T) {
 			_, err := unmarshalDashboard(listVarWithName(name))
 			require.Error(t, err, "expected error for invalid variable name %q", name)
-			assert.Contains(t, err.Error(), "is not a correct name")
+			require.Contains(t, err.Error(), "is not a correct name")
 		})
 	}
 	for _, name := range []string{"service", "my_var", "MY_VAR", "MixedCase9", "with-hyphen", "with.dot"} {
 		t.Run(name, func(t *testing.T) {
 			_, err := unmarshalDashboard(listVarWithName(name))
-			assert.NoError(t, err, "expected valid variable name %q", name)
+			require.NoError(t, err, "expected valid variable name %q", name)
 		})
 	}
 	t.Run("digits only", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVarWithName("123"))
 		require.Error(t, err)
-		assert.Contains(t, err.Error(), "cannot contain only digits")
+		require.Contains(t, err.Error(), "cannot contain only digits")
 	})
 }
 
@@ -200,7 +199,7 @@ func TestInvalidatePanelKey(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected error for invalid panel key")
-	assert.Contains(t, err.Error(), "is not a correct name")
+	require.Contains(t, err.Error(), "is not a correct name")
 }
 
 func TestInvalidateListVariableCrossFields(t *testing.T) {
@@ -226,30 +225,30 @@ func TestInvalidateListVariableCrossFields(t *testing.T) {
 	t.Run("customAllValue without allowAllValue", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "customAllValue": "*",`))
 		require.Error(t, err)
-		assert.Contains(t, err.Error(), "customAllValue cannot be set")
+		require.Contains(t, err.Error(), "customAllValue cannot be set")
 	})
 
 	t.Run("list defaultValue without allowMultiple", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "defaultValue": ["a", "b"],`))
 		require.Error(t, err)
-		assert.Contains(t, err.Error(), "allowMultiple")
+		require.Contains(t, err.Error(), "allowMultiple")
 	})
 
 	t.Run("single-element list default without allowMultiple", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "defaultValue": ["only"],`))
 		require.Error(t, err)
-		assert.Contains(t, err.Error(), "allowMultiple")
+		require.Contains(t, err.Error(), "allowMultiple")
 	})
 
 	t.Run("valid sort is accepted", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVar(`"sort": "alphabetical-asc",`))
-		assert.NoError(t, err)
+		require.NoError(t, err)
 	})
 
 	t.Run("unknown sort is rejected", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVar(`"sort": "bogus",`))
 		require.Error(t, err)
-		assert.Contains(t, err.Error(), "unknown sort")
+		require.Contains(t, err.Error(), "unknown sort")
 	})
 }
 
@@ -276,7 +275,7 @@ func TestInvalidateEmptyVariableName(t *testing.T) {
 		t.Run(name, func(t *testing.T) {
 			_, err := unmarshalDashboard(data)
 			require.Error(t, err, "expected error for empty variable name")
-			assert.Contains(t, err.Error(), "name cannot be empty")
+			require.Contains(t, err.Error(), "name cannot be empty")
 		})
 	}
 }
@@ -415,7 +414,7 @@ func TestInvalidateUnknownPluginKind(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
-			assert.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
+			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
 	}
 }
@@ -436,7 +435,7 @@ func TestInvalidateOneInvalidPanel(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected error for invalid panel plugin kind")
-	assert.Contains(t, err.Error(), "FakePanel", "error should mention FakePanel")
+	require.Contains(t, err.Error(), "FakePanel", "error should mention FakePanel")
 }
 
 func TestInvalidateLayoutPanelReferences(t *testing.T) {
@@ -489,11 +488,11 @@ func TestInvalidateLayoutPanelReferences(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			_, err := unmarshalDashboard(tt.data)
 			if tt.wantContain == "" {
-				assert.NoError(t, err)
+				require.NoError(t, err)
 				return
 			}
 			require.Error(t, err)
-			assert.Contains(t, err.Error(), tt.wantContain)
+			require.Contains(t, err.Error(), tt.wantContain)
 		})
 	}
 }
@@ -571,7 +570,7 @@ func TestRejectUnknownFieldsInPluginSpec(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error for unknown field")
-			assert.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
+			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
 	}
 }
@@ -650,7 +649,7 @@ func TestInvalidateWrongFieldTypeInPluginSpec(t *testing.T) {
 			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected validation error")
 			if tt.wantContain != "" {
-				assert.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
+				require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 			}
 		})
 	}
@@ -875,7 +874,7 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
-			assert.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
+			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
 	}
 }
@@ -908,7 +907,7 @@ func TestThresholdLabelOptional(t *testing.T) {
 
 			spec := d.Panels["p1"].Spec.Plugin.Spec.(*TimeSeriesPanelSpec)
 			require.Len(t, spec.Thresholds, 1)
-			assert.Empty(t, spec.Thresholds[0].Label, "label should remain empty")
+			require.Empty(t, spec.Thresholds[0].Label, "label should remain empty")
 		})
 	}
 }
@@ -925,7 +924,7 @@ func TestInvalidatePanelWithoutQueries(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected panel-without-queries to be rejected")
-	assert.Contains(t, err.Error(), "panel must have one query")
+	require.Contains(t, err.Error(), "panel must have one query")
 }
 
 func TestInvalidatePanelWithEmptyQueriesArray(t *testing.T) {
@@ -943,7 +942,7 @@ func TestInvalidatePanelWithEmptyQueriesArray(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected panel with explicit empty queries array to be rejected")
-	assert.Contains(t, err.Error(), "panel must have one query")
+	require.Contains(t, err.Error(), "panel must have one query")
 }
 
 // Rendering multiple data sources in a single panel is supported via
@@ -966,7 +965,7 @@ func TestInvalidatePanelWithMultipleDirectQueries(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected panel with two top-level queries to be rejected")
-	assert.Contains(t, err.Error(), "panel must have one query")
+	require.Contains(t, err.Error(), "panel must have one query")
 }
 
 func TestValidateRequiredFields(t *testing.T) {
@@ -1054,7 +1053,7 @@ func TestValidateRequiredFields(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
-			assert.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
+			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
 	}
 }
@@ -1082,14 +1081,14 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 	require.IsType(t, &TimeSeriesPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
 	spec := d.Panels["p1"].Spec.Plugin.Spec.(*TimeSeriesPanelSpec)
 
-	assert.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
-	assert.Equal(t, "spline", spec.ChartAppearance.LineInterpolation.ValueOrDefault(), "expected LineInterpolation default spline")
-	assert.Equal(t, "solid", spec.ChartAppearance.LineStyle.ValueOrDefault(), "expected LineStyle default solid")
-	assert.Equal(t, "none", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected FillMode default none")
-	assert.False(t, spec.ChartAppearance.SpanGaps.FillOnlyBelow, "expected SpanGaps.FillOnlyBelow default false")
-	assert.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
-	assert.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
-	assert.Equal(t, "list", spec.Legend.Mode.ValueOrDefault(), "expected LegendMode default list")
+	require.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
+	require.Equal(t, "spline", spec.ChartAppearance.LineInterpolation.ValueOrDefault(), "expected LineInterpolation default spline")
+	require.Equal(t, "solid", spec.ChartAppearance.LineStyle.ValueOrDefault(), "expected LineStyle default solid")
+	require.Equal(t, "none", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected FillMode default none")
+	require.False(t, spec.ChartAppearance.SpanGaps.FillOnlyBelow, "expected SpanGaps.FillOnlyBelow default false")
+	require.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
+	require.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
+	require.Equal(t, "list", spec.Legend.Mode.ValueOrDefault(), "expected LegendMode default list")
 
 	// Re-marshal the full dashboard (what we'd store in DB / return in API response)
 	// and verify the output contains the default values.
@@ -1132,8 +1131,8 @@ func TestNumberPanelDefaults(t *testing.T) {
 	spec := d.Panels["p1"].Spec.Plugin.Spec.(*NumberPanelSpec)
 
 	require.Len(t, spec.Thresholds, 1, "expected 1 threshold")
-	assert.Equal(t, "above", spec.Thresholds[0].Operator.ValueOrDefault(), "expected ComparisonOperator default above")
-	assert.Equal(t, "text", spec.Thresholds[0].Format.ValueOrDefault(), "expected ThresholdFormat default text")
+	require.Equal(t, "above", spec.Thresholds[0].Operator.ValueOrDefault(), "expected ComparisonOperator default above")
+	require.Equal(t, "text", spec.Thresholds[0].Format.ValueOrDefault(), "expected ThresholdFormat default text")
 
 	// Marshal back and verify defaults in JSON output.
 	output, err := json.Marshal(d)
@@ -1164,7 +1163,7 @@ func TestPersesFixtureStorageRoundTrip(t *testing.T) {
 	require.NoError(t, err, "map → JSON (read-back shape)")
 
 	var roundtripped DashboardSpec
-	assert.NoError(t, json.Unmarshal(remarshaled, &roundtripped), "JSON → typed (the failure mode)")
+	require.NoError(t, json.Unmarshal(remarshaled, &roundtripped), "JSON → typed (the failure mode)")
 }
 
 // TestStorageRoundTrip simulates the future DB store/load cycle:
@@ -1330,9 +1329,9 @@ func TestGenerateDashboardName(t *testing.T) {
 	for _, tt := range tests {
 		t.Run(tt.scenario, func(t *testing.T) {
 			got := generateDashboardName(tt.input)
-			assert.NotEmpty(t, got)
-			assert.LessOrEqual(t, len(got), 63)
-			assert.Empty(t, validation.IsDNS1123Label(got), "result must be a valid DNS-1123 label")
+			require.NotEmpty(t, got)
+			require.LessOrEqual(t, len(got), 63)
+			require.Empty(t, validation.IsDNS1123Label(got), "result must be a valid DNS-1123 label")
 
 			if tt.wantPrefix == "" {
 				assert.Len(t, got, dashboardNameSuffixLen, "expected the bare random suffix")
@@ -1347,8 +1346,8 @@ func TestGenerateDashboardName(t *testing.T) {
 	t.Run("prefix is truncated to leave room for the suffix", func(t *testing.T) {
 		input := strings.Repeat("a", 100)
 		got := generateDashboardName(input)
-		assert.LessOrEqual(t, len(got), 63)
-		assert.Empty(t, validation.IsDNS1123Label(got))
+		require.LessOrEqual(t, len(got), 63)
+		require.Empty(t, validation.IsDNS1123Label(got))
 		assert.Equal(t, len(got), 63, "expected the result to be padded to the max DNS-1123 length")
 	})
 
@@ -1436,130 +1435,10 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		t.Run(tc.name, func(t *testing.T) {
 			_, err := unmarshalDashboard(tc.data)
 			if tc.wantErr {
-				assert.Error(t, err)
+				require.Error(t, err)
 			} else {
-				assert.NoError(t, err)
+				require.NoError(t, err)
 			}
 		})
 	}
 }
-
-func TestValidateGridGeometry(t *testing.T) {
-	tests := []struct {
-		scenario         string
-		items            []dashboard.GridItem
-		expectErrContain string
-	}{
-		{
-			scenario:         "valid side-by-side items",
-			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 6, Y: 0, Width: 6, Height: 6}},
-			expectErrContain: "",
-		},
-		{
-			scenario:         "valid full-width item",
-			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 12, Height: 6}},
-			expectErrContain: "",
-		},
-		{
-			scenario:         "stacked items do not overlap",
-			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 0, Y: 6, Width: 6, Height: 6}},
-			expectErrContain: "",
-		},
-		{
-			scenario:         "zero width",
-			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 0, Height: 6}},
-			expectErrContain: "width must be at least 1",
-		},
-		{
-			scenario:         "zero height",
-			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 0}},
-			expectErrContain: "height must be at least 1",
-		},
-		{
-			scenario:         "negative x",
-			items:            []dashboard.GridItem{{X: -1, Y: 0, Width: 6, Height: 6}},
-			expectErrContain: "x must not be negative",
-		},
-		{
-			scenario:         "negative y",
-			items:            []dashboard.GridItem{{X: 0, Y: -1, Width: 6, Height: 6}},
-			expectErrContain: "y must not be negative",
-		},
-		{
-			scenario:         "width wider than grid",
-			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 13, Height: 6}},
-			expectErrContain: "width (13) exceeds grid width 12",
-		},
-		{
-			scenario:         "x at grid width",
-			items:            []dashboard.GridItem{{X: 12, Y: 0, Width: 1, Height: 6}},
-			expectErrContain: "x (12) must be less than grid width 12",
-		},
-		{
-			scenario:         "x plus width overflows grid",
-			items:            []dashboard.GridItem{{X: 8, Y: 0, Width: 6, Height: 6}},
-			expectErrContain: "x (8) + width (6) exceeds grid width 12",
-		},
-		{
-			scenario:         "overlapping items",
-			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 3, Y: 3, Width: 6, Height: 6}},
-			expectErrContain: "items[0] and items[1] overlap",
-		},
-	}
-	for _, test := range tests {
-		t.Run(test.scenario, func(t *testing.T) {
-			err := validateGridLayoutGeometry(&dashboard.GridLayoutSpec{Items: test.items}, 0)
-			if test.expectErrContain == "" {
-				assert.NoError(t, err)
-				return
-			}
-			require.Error(t, err)
-			assert.Contains(t, err.Error(), test.expectErrContain)
-		})
-	}
-}
-
-func TestValidateGridItemLimit(t *testing.T) {
-	err := validateGridLayoutGeometry(&dashboard.GridLayoutSpec{Items: make([]dashboard.GridItem, maxItemsPerGridLayout+1)}, 0)
-	require.Error(t, err)
-	assert.Contains(t, err.Error(), "maximum is")
-}
-
-// Both panel refs are valid, so this errors only if geometry validation runs on
-// the unmarshal path — it does, via DashboardSpec.Validate -> validateLayouts.
-func TestInvalidateLayoutOverlapViaUnmarshal(t *testing.T) {
-	data := []byte(`{
-		"panels": {
-			"p1": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}},
-			"p2": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}
-		},
-		"layouts": [{"kind": "Grid", "spec": {"items": [
-			{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
-			{"x": 3, "y": 3, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}}
-		]}}]
-	}`)
-	_, err := unmarshalDashboard(data)
-	require.Error(t, err)
-	assert.Contains(t, err.Error(), "overlap")
-}
-
-// The frontend keys each grid item by its panel id, so the same panel placed by
-// two grid items crashes the section; the backend rejects it dashboard-wide. The
-// two items are side by side so they clear the overlap check first.
-func TestInvalidateDuplicatePanelReference(t *testing.T) {
-	data := []byte(`{
-		"panels": {
-			"p1": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}
-		},
-		"layouts": [{"kind": "Grid", "spec": {"items": [
-			{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
-			{"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
-		]}}]
-	}`)
-	_, err := unmarshalDashboard(data)
-	require.Error(t, err)
-	assert.Contains(t, err.Error(), "already placed")
-	// Both offending grid items are named.
-	assert.Contains(t, err.Error(), "spec.layouts[0].spec.items[0].content")
-	assert.Contains(t, err.Error(), "spec.layouts[0].spec.items[1].content")
-}

pkg/types/dashboardtypes/perses_replicas.go

@@ -322,55 +322,6 @@ func (l *Layout) UnmarshalJSON(data []byte) error {
 	return nil
 }
 
-const (
-	gridColumnCount       = 12
-	maxItemsPerGridLayout = 100
-)
-
-// validateGridLayoutGeometry checks a single grid layout's item geometry (size,
-// position, and intra-section overlap), which Perses does not. It reads only the
-// layout's own items; layoutIndex is supplied by the caller (validateLayouts)
-// solely to name the layout in error paths.
-func validateGridLayoutGeometry(spec *dashboard.GridLayoutSpec, layoutIndex int) error {
-	if len(spec.Items) > maxItemsPerGridLayout {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items: has %d items; maximum is %d", layoutIndex, len(spec.Items), maxItemsPerGridLayout)
-	}
-	for i, item := range spec.Items {
-		// The width/x bounds keep x+width small enough not to overflow.
-		switch {
-		case item.Width < 1:
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: width must be at least 1, got %d", layoutIndex, i, item.Width)
-		case item.Height < 1:
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: height must be at least 1, got %d", layoutIndex, i, item.Height)
-		case item.X < 0:
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x must not be negative, got %d", layoutIndex, i, item.X)
-		case item.Y < 0:
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: y must not be negative, got %d", layoutIndex, i, item.Y)
-		case item.Width > gridColumnCount:
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: width (%d) exceeds grid width %d", layoutIndex, i, item.Width, gridColumnCount)
-		case item.X >= gridColumnCount:
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x (%d) must be less than grid width %d", layoutIndex, i, item.X, gridColumnCount)
-		case item.X+item.Width > gridColumnCount:
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x (%d) + width (%d) exceeds grid width %d", layoutIndex, i, item.X, item.Width, gridColumnCount)
-		}
-		// Could cap y/height but skipping for now: the grid grows vertically
-		// without limit (frontend autoSize), so "too big" has no natural bound.
-	}
-	// Two items overlap iff their rectangles intersect on both axes.
-	overlap := func(a, b dashboard.GridItem) bool {
-		return a.X < b.X+b.Width && b.X < a.X+a.Width &&
-			a.Y < b.Y+b.Height && b.Y < a.Y+a.Height
-	}
-	for i := 0; i < len(spec.Items); i++ {
-		for j := i + 1; j < len(spec.Items); j++ {
-			if overlap(spec.Items[i], spec.Items[j]) {
-				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d] and items[%d] overlap", layoutIndex, i, j)
-			}
-		}
-	}
-	return nil
-}
-
 func (Layout) JSONSchemaOneOf() []any {
 	return []any{
 		LayoutEnvelope[dashboard.GridLayoutSpec]{Kind: string(dashboard.KindGridLayout)},

tests/integration/tests/dashboard/03_v2_dashboard.py

@@ -173,125 +173,6 @@ def test_create_rejects_too_many_tags(
     assert response.json()["error"]["code"] == "dashboard_invalid_input"
 
 
-def test_create_rejects_invalid_grid_layout(
-    signoz: SigNoz,
-    create_user_admin: Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-):
-    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    def panel(name: str) -> dict:
-        return {
-            "kind": "Panel",
-            "spec": {
-                "display": {"name": name},
-                "plugin": {"kind": "signoz/TablePanel", "spec": {}},
-                "queries": [
-                    {
-                        "kind": "time_series",
-                        "spec": {
-                            "plugin": {
-                                "kind": "signoz/BuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "logs",
-                                    "aggregations": [{"expression": "count()"}],
-                                },
-                            }
-                        },
-                    }
-                ],
-            },
-        }
-
-    # Two grid items reference valid, distinct panels but share cells, so the
-    # overlap is the only violation.
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        json={
-            "schemaVersion": "v6",
-            "name": "rejects-overlap",
-            "spec": {
-                "display": {"name": "Rejects Overlap"},
-                "panels": {"p1": panel("P1"), "p2": panel("P2")},
-                "layouts": [
-                    {
-                        "kind": "Grid",
-                        "spec": {
-                            "items": [
-                                {"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
-                                {"x": 3, "y": 3, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}},
-                            ]
-                        },
-                    }
-                ],
-            },
-            "tags": [],
-        },
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    )
-    assert response.status_code == HTTPStatus.BAD_REQUEST
-    assert response.json()["error"]["code"] == "dashboard_invalid_input"
-    assert "overlap" in response.json()["error"]["message"]
-
-    # One panel placed by two grid items (side by side, so they clear the overlap
-    # check first). The frontend keys grid items by panel id, so this is rejected.
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        json={
-            "schemaVersion": "v6",
-            "name": "rejects-multiref",
-            "spec": {
-                "display": {"name": "Rejects Multiref"},
-                "panels": {"p1": panel("P1")},
-                "layouts": [
-                    {
-                        "kind": "Grid",
-                        "spec": {
-                            "items": [
-                                {"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
-                                {"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
-                            ]
-                        },
-                    }
-                ],
-            },
-            "tags": [],
-        },
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    )
-    assert response.status_code == HTTPStatus.BAD_REQUEST
-    assert response.json()["error"]["code"] == "dashboard_invalid_input"
-    assert "already placed" in response.json()["error"]["message"]
-
-    # More grid items than allowed. The item-count check runs before the
-    # panel-ref check, so content-less items suffice here.
-    response = requests.post(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        json={
-            "schemaVersion": "v6",
-            "name": "rejects-too-many-items",
-            "spec": {
-                "display": {"name": "Rejects Too Many"},
-                "layouts": [
-                    {
-                        "kind": "Grid",
-                        "spec": {"items": [{"x": 0, "y": 0, "width": 1, "height": 1} for _ in range(101)]},
-                    }
-                ],
-            },
-            "tags": [],
-        },
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    )
-    assert response.status_code == HTTPStatus.BAD_REQUEST
-    assert response.json()["error"]["code"] == "dashboard_invalid_input"
-    assert "maximum" in response.json()["error"]["message"]
-
-
 @pytest.mark.parametrize(
     "params",
     [