chore: added changes to auto-run query when disabled, changed groupby and changed orderBy

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -1,176 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Check, TableColumnsSplit, X } from '@signozhq/icons';
-import { FloatingPanel } from 'periscope/components/FloatingPanel';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import AddedFields from './AddedFields';
-import OtherFields from './OtherFields';
-
-import styles from './FieldsSelector.module.scss';
-
-const DEFAULT_PANEL_WIDTH = 350;
-const DEFAULT_PANEL_HEIGHT_OFFSET = 100;
-const DEFAULT_PANEL_RIGHT_INSET = 100;
-const DEFAULT_PANEL_TOP_INSET = 50;
-
-interface FieldsSelectorProps {
-	isOpen: boolean;
-	title: string;
-	fields: TelemetryFieldKey[];
-	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
-	onClose: () => void;
-	signal: DataSource;
-	maxFields?: number;
-	width?: number;
-	height?: number;
-	defaultPosition?: { x: number; y: number };
-}
-
-function FieldsSelector({
-	isOpen,
-	title,
-	fields,
-	onFieldsChange,
-	onClose,
-	signal,
-	maxFields,
-	width = DEFAULT_PANEL_WIDTH,
-	height,
-	defaultPosition,
-}: FieldsSelectorProps): JSX.Element | null {
-	if (!isOpen) {
-		return null;
-	}
-
-	const resolvedHeight =
-		height ?? window.innerHeight - DEFAULT_PANEL_HEIGHT_OFFSET;
-	const resolvedPosition = defaultPosition ?? {
-		x: window.innerWidth - width - DEFAULT_PANEL_RIGHT_INSET,
-		y: DEFAULT_PANEL_TOP_INSET,
-	};
-	const [draftFields, setDraftFields] = useState<TelemetryFieldKey[]>(fields);
-	const [inputValue, setInputValue] = useState('');
-	const [debouncedInputValue, setDebouncedInputValue] = useState('');
-
-	const debouncedUpdate = useDebouncedFn((value) => {
-		setDebouncedInputValue(value as string);
-	}, 400);
-
-	const handleInputChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = e.target.value.trim().toLowerCase();
-			setInputValue(value);
-			debouncedUpdate(value);
-		},
-		[debouncedUpdate],
-	);
-
-	const handleAdd = useCallback(
-		(field: TelemetryFieldKey): void => {
-			if (maxFields !== undefined && draftFields.length >= maxFields) {
-				return;
-			}
-			if (draftFields.some((f) => f.name === field.name)) {
-				return;
-			}
-			setDraftFields((prev) => [...prev, field]);
-		},
-		[draftFields, maxFields],
-	);
-
-	const handleSave = useCallback((): void => {
-		onFieldsChange(draftFields);
-		toast.success('Saved successfully', {
-			position: 'top-right',
-		});
-		onClose();
-	}, [draftFields, onFieldsChange, onClose]);
-
-	const handleDiscard = useCallback((): void => {
-		setDraftFields(fields);
-	}, [fields]);
-
-	const hasUnsavedChanges = useMemo(
-		() =>
-			!(
-				draftFields.length === fields.length &&
-				draftFields.every((f, i) => f.name === fields[i]?.name)
-			),
-		[draftFields, fields],
-	);
-
-	const isAtLimit = maxFields !== undefined && draftFields.length >= maxFields;
-
-	return (
-		<FloatingPanel
-			isOpen
-			width={width}
-			height={resolvedHeight}
-			defaultPosition={resolvedPosition}
-			enableResizing={false}
-		>
-			<div className={styles.root}>
-				<div className={styles.header}>
-					<div className={styles.title}>
-						<TableColumnsSplit size={16} />
-						{title}
-					</div>
-					<X className={styles.closeIcon} size={16} onClick={onClose} />
-				</div>
-
-				<section>
-					<Input
-						className={styles.searchInput}
-						type="text"
-						value={inputValue}
-						placeholder="Search for a field..."
-						onChange={handleInputChange}
-					/>
-				</section>
-
-				<AddedFields
-					inputValue={inputValue}
-					fields={draftFields}
-					onFieldsChange={setDraftFields}
-					maxFields={maxFields}
-				/>
-
-				<OtherFields
-					signal={signal}
-					debouncedInputValue={debouncedInputValue}
-					addedFields={draftFields}
-					onAdd={handleAdd}
-					isAtLimit={isAtLimit}
-				/>
-
-				{hasUnsavedChanges && (
-					<div className={styles.footer}>
-						<Button
-							variant="outlined"
-							color="secondary"
-							onClick={handleDiscard}
-							prefix={<X width={14} height={14} />}
-						>
-							Discard
-						</Button>
-						<Button
-							variant="solid"
-							color="primary"
-							onClick={handleSave}
-							prefix={<Check width={14} height={14} />}
-						>
-							Save changes
-						</Button>
-					</div>
-				)}
-			</div>
-		</FloatingPanel>
-	);
-}
-
-export default FieldsSelector;

frontend/src/components/FieldsSelector/index.ts

@@ -1 +0,0 @@
-export { default } from './FieldsSelector';

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -66,7 +66,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 
 	const handleChangeGroupByKeys = useCallback(
 		(value: IBuilderQuery['groupBy']) => {
-			handleChangeQueryData('groupBy', value);
+			handleChangeQueryData('groupBy', value, { runAfterUpdate: true });
 		},
 		[handleChangeQueryData],
 	);

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

@@ -283,14 +283,14 @@ function QueryAddOns({
 
 	const handleChangeGroupByKeys = useCallback(
 		(value: IBuilderQuery['groupBy']) => {
-			handleChangeQueryData('groupBy', value);
+			handleChangeQueryData('groupBy', value, { runAfterUpdate: true });
 		},
 		[handleChangeQueryData],
 	);
 
 	const handleChangeOrderByKeys = useCallback(
 		(value: IBuilderQuery['orderBy']) => {
-			handleChangeQueryData('orderBy', value);
+			handleChangeQueryData('orderBy', value, { runAfterUpdate: true });
 		},
 		[handleChangeQueryData],
 	);

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

@@ -73,8 +73,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 	});
 
 	const handleToggleDisableQuery = useCallback(() => {
-		handleChangeQueryData('disabled', !query.disabled);
-	}, [handleChangeQueryData, query]);
+		handleChangeQueryData('disabled', !query.disabled, { runAfterUpdate: true });
+	}, [handleChangeQueryData, query.disabled]);
 
 	const handleToggleCollapsQuery = (): void => {
 		setIsCollapsed(!isCollapsed);

frontend/src/constants/reactQueryKeys.ts

@@ -108,7 +108,4 @@ export const REACT_QUERY_KEY = {
 
 	// Dashboard Grid Card Query Keys
 	DASHBOARD_GRID_CARD_QUERY_RANGE: 'DASHBOARD_GRID_CARD_QUERY_RANGE',
-
-	// Fields Selector Query Keys
-	GET_FIELDS_SELECTOR_SUGGESTIONS: 'GET_FIELDS_SELECTOR_SUGGESTIONS',
 } as const;

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -186,40 +186,77 @@
 		display: flex;
 		flex-direction: column;
 
-		section {
+		.section-1 {
 			display: flex;
 			flex-direction: column;
 			align-items: start;
+			border-bottom: 1px solid var(--l1-border);
 
 			.ant-btn {
 				display: flex;
 				width: 100%;
-				height: unset;
-				padding: 8px;
+				height: 20px;
+				padding: 16px 18px 18px 14px;
 				align-items: center;
-				gap: 12px;
+				gap: 6px;
 				color: var(--l2-foreground);
 				font-family: Inter;
-				font-size: 13px;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+				.ant-btn-icon {
+					margin-inline-end: 0px;
+				}
+			}
+		}
+		.section-2 {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
+			border-bottom: 1px solid var(--l1-border);
+
+			.ant-btn {
+				display: flex;
+				width: 100%;
+				height: 20px;
+				padding: 16px 18px 18px 14px;
+				align-items: center;
+				gap: 6px;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
 				font-style: normal;
 				font-weight: 400;
 				line-height: normal;
 				letter-spacing: 0.14px;
-				border-top: none;
 
 				.ant-btn-icon {
 					margin-inline-end: 0px;
 				}
 			}
 		}
+		.delete-dashboard {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
 
-		.section-1,
-		.section-2 {
-			border-bottom: 1px solid var(--l1-border);
-		}
-
-		.delete-dashboard .ant-btn {
-			color: var(--bg-cherry-400) !important;
+			.ant-typography {
+				display: flex;
+				width: 100%;
+				height: 20px;
+				padding: 16px 18px 18px 14px;
+				align-items: center;
+				gap: 6px;
+				color: var(--bg-cherry-400) !important;
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+			}
 		}
 	}
 }

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -211,12 +211,7 @@
 			display: grid;
 			grid-template-columns: max-content 1fr;
 
-			.typography-variables {
-				display: block;
-			}
-
 			.default-value-description {
-				display: block;
 				color: var(--l2-foreground);
 				font-family: Inter;
 				font-size: 11px;

frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx

@@ -11,7 +11,7 @@ import {
 	SyncTooltipFilterMode,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { isEqual } from 'lodash-es';
-import { Check, ExternalLink, SolidInfoCircle, X } from '@signozhq/icons';
+import { Check, ExternalLink, Info, X } from '@signozhq/icons';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 
 import styles from './GeneralSettings.module.scss';
@@ -201,7 +201,7 @@ function GeneralDashboardSettings(): JSX.Element {
 						placement="top"
 						mouseEnterDelay={0.5}
 					>
-						<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
+						<Info size={14} className={styles.crossPanelSyncInfoIcon} />
 					</Tooltip>
 				</div>
 				<div className={styles.crossPanelSyncRow}>

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -26,13 +26,10 @@
 	gap: 8px;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	flex: 1;
-	min-width: 0;
 }
 
 .widget-header-title {
 	max-width: 80%;
-	min-width: 0;
 }
 
 .widget-header-actions {

frontend/src/container/NewWidget/WidgetModals/DiscardChangesModal.tsx

@@ -1,53 +0,0 @@
-import { SolidAlertTriangle } from '@signozhq/icons';
-import { ConfirmDialog } from '@signozhq/ui/dialog';
-import { Typography } from '@signozhq/ui/typography';
-
-export interface DiscardChangesModalProps {
-	open: boolean;
-	isNewPanel: boolean;
-	panelTitle?: string;
-	dashboardTitle?: string;
-	onDiscard: () => void;
-	onClose: () => void;
-}
-
-export default function DiscardChangesModal({
-	open,
-	isNewPanel,
-	panelTitle,
-	dashboardTitle,
-	onDiscard,
-	onClose,
-}: DiscardChangesModalProps): JSX.Element {
-	const dashboardName = dashboardTitle ? (
-		<>
-			{' '}
-			to <strong>{dashboardTitle}</strong>
-		</>
-	) : null;
-	const panelLabel = panelTitle ? <strong>{panelTitle}</strong> : 'this panel';
-
-	return (
-		<ConfirmDialog
-			open={open}
-			onOpenChange={(next): void => {
-				if (!next) {
-					onClose();
-				}
-			}}
-			title="Discard changes?"
-			titleIcon={<SolidAlertTriangle size={14} color="#fdd600" />}
-			confirmText="Discard"
-			confirmColor="destructive"
-			cancelText="Keep editing"
-			onConfirm={onDiscard}
-			onCancel={onClose}
-		>
-			{isNewPanel ? (
-				<Typography>This new panel won&apos;t be added{dashboardName}.</Typography>
-			) : (
-				<Typography>Your unsaved edits to {panelLabel} will be lost.</Typography>
-			)}
-		</ConfirmDialog>
-	);
-}

frontend/src/container/NewWidget/__test__/utils.test.ts

@@ -1,17 +1,13 @@
 import {
-	initialAutocompleteData,
 	initialQueryBuilderFormValuesMap,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
-import { cloneDeep } from 'lodash-es';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { MetricAggregation } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
 import type { PartialPanelTypes } from '../utils';
-import { getIsQueryModified, handleQueryChange } from '../utils';
+import { handleQueryChange } from '../utils';
 
 const buildSupersetQuery = (extras?: Record<string, unknown>): Query => ({
 	queryType: EQueryType.QUERY_BUILDER,
@@ -41,128 +37,6 @@ const buildSupersetQuery = (extras?: Record<string, unknown>): Query => ({
 	},
 });
 
-const buildMetricsQuery = (
-	overrides?: Partial<{
-		metricName: string;
-		aggregateAttributeKey: string;
-		legend: string;
-		groupByKey: string;
-	}>,
-): Query => ({
-	queryType: EQueryType.QUERY_BUILDER,
-	promql: [],
-	clickhouse_sql: [],
-	id: 'query-id',
-	unit: '',
-	builder: {
-		queryFormulas: [],
-		queryData: [
-			{
-				...initialQueryBuilderFormValuesMap[DataSource.METRICS],
-				queryName: 'A',
-				aggregateAttribute: overrides?.aggregateAttributeKey
-					? {
-							...initialAutocompleteData,
-							key: overrides.aggregateAttributeKey,
-							type: 'tag',
-							dataType: DataTypes.Float64,
-						}
-					: cloneDeep(initialAutocompleteData),
-				aggregations: [
-					{
-						metricName: overrides?.metricName ?? 'system.cpu.load',
-						temporality: '',
-						timeAggregation: 'rate',
-						spaceAggregation: 'sum',
-						reduceTo: 'avg',
-					} as MetricAggregation,
-				],
-				legend: overrides?.legend ?? '',
-				groupBy: overrides?.groupByKey
-					? [
-							{
-								...initialAutocompleteData,
-								key: overrides.groupByKey,
-								type: 'tag',
-								dataType: DataTypes.String,
-							},
-						]
-					: [],
-			},
-		],
-		queryTraceOperator: [],
-	},
-});
-
-describe('getIsQueryModified', () => {
-	it('returns false when baseline is null (new unsaved panel with no edits anchor)', () => {
-		const current = buildMetricsQuery();
-		expect(getIsQueryModified(current, null)).toBe(false);
-	});
-
-	it('returns false when baseline is undefined', () => {
-		const current = buildMetricsQuery();
-		expect(getIsQueryModified(current, undefined)).toBe(false);
-	});
-
-	it('returns false when current only differs by auto-backfilled aggregateAttribute', () => {
-		// saved widget query: aggregateAttribute is the v5-style empty initial value
-		// (stripped from persisted spec; spread back in as initialAutocompleteData on load)
-		const savedQuery = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		// after MetricNameSelector edit-mode backfill, currentQuery has the populated
-		// aggregateAttribute while the rest of the query is identical
-		const currentQuery = buildMetricsQuery({
-			metricName: 'system.cpu.load',
-			aggregateAttributeKey: 'system.cpu.load',
-		});
-		expect(getIsQueryModified(currentQuery, savedQuery)).toBe(false);
-	});
-
-	it('returns true when the user edits the legend', () => {
-		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const edited = buildMetricsQuery({
-			metricName: 'system.cpu.load',
-			legend: 'cpu-load',
-		});
-		expect(getIsQueryModified(edited, baseline)).toBe(true);
-	});
-
-	it('returns true when the user picks a different metric (aggregations diverges)', () => {
-		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const edited = buildMetricsQuery({ metricName: 'system.memory.usage' });
-		expect(getIsQueryModified(edited, baseline)).toBe(true);
-	});
-
-	it('returns true when the user adds a groupBy', () => {
-		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const edited = buildMetricsQuery({
-			metricName: 'system.cpu.load',
-			groupByKey: 'host.name',
-		});
-		expect(getIsQueryModified(edited, baseline)).toBe(true);
-	});
-
-	it('returns true on existing widget when current diverges from saved (Stage-and-Run silent-loss flow)', () => {
-		// After Edit → Stage and Run, stagedQuery is reset to match currentQuery.
-		// The dirty check must compare against the SAVED widget query, not stagedQuery.
-		const savedQuery = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const currentQuery = buildMetricsQuery({ metricName: 'system.memory.usage' });
-		expect(getIsQueryModified(currentQuery, savedQuery)).toBe(true);
-	});
-
-	it('returns false for a new panel where currentQuery still matches stagedQuery baseline', () => {
-		const stagedQuery = buildMetricsQuery();
-		const currentQuery = buildMetricsQuery();
-		expect(getIsQueryModified(currentQuery, stagedQuery)).toBe(false);
-	});
-
-	it('returns true for a new panel where currentQuery has been edited away from stagedQuery', () => {
-		const stagedQuery = buildMetricsQuery();
-		const currentQuery = buildMetricsQuery({ legend: 'custom' });
-		expect(getIsQueryModified(currentQuery, stagedQuery)).toBe(true);
-	});
-});
-
 describe('handleQueryChange', () => {
 	it('sets list-specific fields when switching to LIST', () => {
 		const superset = buildSupersetQuery();

frontend/src/container/NewWidget/index.tsx

@@ -1,17 +1,18 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { generatePath } from 'react-router-dom';
-import { Check, X } from '@signozhq/icons';
+import { Check, SolidAlertTriangle, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/ui/resizable';
-import { Flex } from 'antd';
+import { Flex, Modal, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
@@ -68,6 +69,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { getGraphType, getGraphTypeForFormat } from 'utils/getGraphType';
 
 import LeftContainer from './LeftContainer';
+import QueryTypeTag from './LeftContainer/QueryTypeTag';
 import RightContainer from './RightContainer';
 import { ThresholdProps } from './RightContainer/Threshold/types';
 import TimeItems, { timePreferance } from './RightContainer/timeItems';
@@ -80,7 +82,6 @@ import {
 	placeWidgetAtBottom,
 	placeWidgetBetweenRows,
 } from './utils';
-import DiscardChangesModal from './WidgetModals/DiscardChangesModal';
 
 import './NewWidget.styles.scss';
 
@@ -97,6 +98,8 @@ function NewWidget({
 
 	const { dashboardVariables } = useDashboardVariables();
 
+	const { t } = useTranslation(['dashboard']);
+
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
 	const {
@@ -107,6 +110,11 @@ function NewWidget({
 		setSupersetQuery,
 	} = useQueryBuilder();
 
+	const isQueryModified = useMemo(
+		() => getIsQueryModified(currentQuery, stagedQuery),
+		[currentQuery, stagedQuery],
+	);
+
 	const { selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -131,23 +139,6 @@ function NewWidget({
 
 	const query = useUrlQuery();
 
-	// For existing widgets, compare currentQuery against the saved widget query
-	// (stable across Stage-and-Run cycles). For new panels with no saved baseline,
-	// fall back to stagedQuery so initial edits still trigger the warning.
-	const savedWidgetQuery = useMemo(() => {
-		const widgetId = query.get('widgetId');
-		const match = widgets?.find((w) => w.id === widgetId);
-		if (!match || match.panelTypes === PANEL_GROUP_TYPES.ROW) {
-			return null;
-		}
-		return (match as Widgets).query ?? null;
-	}, [widgets, query]);
-
-	const isQueryModified = useMemo(
-		() => getIsQueryModified(currentQuery, savedWidgetQuery ?? stagedQuery),
-		[currentQuery, savedWidgetQuery, stagedQuery],
-	);
-
 	const [isNewDashboard, setIsNewDashboard] = useState<boolean>(false);
 
 	const logEventCalledRef = useRef(false);
@@ -237,6 +228,7 @@ function NewWidget({
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});
 
+	const [saveModal, setSaveModal] = useState(false);
 	const [discardModal, setDiscardModal] = useState(false);
 
 	const [bucketWidth, setBucketWidth] = useState<number>(
@@ -348,6 +340,7 @@ function NewWidget({
 	]);
 
 	const closeModal = (): void => {
+		setSaveModal(false);
 		setDiscardModal(false);
 	};
 
@@ -600,7 +593,7 @@ function NewWidget({
 			},
 		};
 
-		return updateDashboardMutation.mutateAsync(dashboard, {
+		updateDashboardMutation.mutateAsync(dashboard, {
 			onSuccess: () => {
 				setToScrollWidgetId(selectedWidget?.id || '');
 				navigateToDashboardPage();
@@ -695,9 +688,9 @@ function NewWidget({
 				})),
 			}),
 		});
-		onClickSaveHandler();
+		setSaveModal(true);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [onClickSaveHandler]);
+	}, [isNewPanel]);
 
 	const isNewTraceLogsAvailable =
 		currentQuery.queryType === EQueryType.QUERY_BUILDER &&
@@ -958,14 +951,57 @@ function NewWidget({
 					</ResizablePanel>
 				</ResizablePanelGroup>
 			</PanelContainer>
-			<DiscardChangesModal
+			<Modal
+				title={
+					isQueryModified ? (
+						<Space>
+							<SolidAlertTriangle size={16} color="#fdd600" />
+							Unsaved Changes
+						</Space>
+					) : (
+						'Save Widget'
+					)
+				}
+				focusTriggerAfterClose
+				forceRender
+				destroyOnClose
+				closable
+				onCancel={closeModal}
+				onOk={onClickSaveHandler}
+				confirmLoading={updateDashboardMutation.isLoading}
+				centered
+				open={saveModal}
+				width={600}
+			>
+				{!isQueryModified ? (
+					<Typography>
+						{t('your_graph_build_with')}{' '}
+						<QueryTypeTag queryType={currentQuery.queryType} />{' '}
+						{t('dashboard_ok_confirm')}
+					</Typography>
+				) : (
+					<Typography>{t('dashboard_unsave_changes')} </Typography>
+				)}
+			</Modal>
+			<Modal
+				title={
+					<Space>
+						<SolidAlertTriangle size={16} color="#fdd600" />
+						Unsaved Changes
+					</Space>
+				}
+				focusTriggerAfterClose
+				forceRender
+				destroyOnClose
+				closable
+				onCancel={closeModal}
+				onOk={discardChanges}
+				centered
 				open={discardModal}
-				isNewPanel={isNewPanel}
-				panelTitle={title}
-				dashboardTitle={dashboardData?.data?.title}
-				onDiscard={discardChanges}
-				onClose={closeModal}
-			/>
+				width={600}
+			>
+				<Typography>{t('dashboard_unsave_changes')}</Typography>
+			</Modal>
 		</Container>
 	);
 }

frontend/src/container/NewWidget/utils.ts

@@ -1,4 +1,5 @@
 import { Layout } from 'react-grid-layout';
+import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
 import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
 import {
@@ -25,84 +26,16 @@ import { DataSource } from 'types/common/queryBuilder';
 
 import { getCategoryName } from './RightContainer/dataFormatCategories';
 
-// Asks "would saving the current panel change the persisted widget spec?".
-//
-// `adjustQueryForV5` is deliberately not reused here: in addition to stripping
-// the legacy v4 fields, it also resurrects them onto each metric
-// `aggregations[i]`. That migration step is correct on save but bleeds
-// asymmetrically across a comparator — the live query still carries the
-// legacy defaults from `initialQueryBuilderFormValuesMap` while a previously
-// saved widget had them stripped.
-const stripQueryDataForCompare = (
-	queryData: IBuilderQuery,
-): Record<string, unknown> => {
-	const {
-		aggregateAttribute: _aggregateAttribute,
-		aggregateOperator: _aggregateOperator,
-		timeAggregation: _timeAggregation,
-		spaceAggregation: _spaceAggregation,
-		reduceTo: _reduceTo,
-		filters: _filters,
-		...retained
-	} = queryData ?? ({} as IBuilderQuery);
-
-	const groupBy = (retained.groupBy ?? []).map((entry) => {
-		const { id: _id, ...rest } = entry;
-		return rest;
-	});
-
-	return {
-		...retained,
-		groupBy,
-		source: retained.source || '',
-	};
-};
-
-const normalizeForDirtyCheck = (query: Query): Record<string, unknown> => {
-	const { id: _id, unit, builder, ...rest } = query;
-	return {
-		...rest,
-		// `id` is regenerated on every Stage and Run; `unit` flips between ''
-		// and undefined depending on whether the user has touched the selector.
-		unit: unit || '',
-		builder: {
-			...builder,
-			queryData: (builder?.queryData ?? []).map(stripQueryDataForCompare),
-		},
-	};
-};
-
-// `lodash.isEqual` distinguishes `{a: undefined}` from `{}`; for the dirty
-// check those are the same. Initial-values spreads on the live query
-// frequently leave such explicit-undefined keys.
-const stripUndefined = (value: unknown): unknown => {
-	if (Array.isArray(value)) {
-		return value.map(stripUndefined);
-	}
-	if (value && typeof value === 'object') {
-		const out: Record<string, unknown> = {};
-		Object.entries(value as Record<string, unknown>).forEach(([k, v]) => {
-			if (v === undefined) {
-				return;
-			}
-			out[k] = stripUndefined(v);
-		});
-		return out;
-	}
-	return value;
-};
-
 export const getIsQueryModified = (
 	currentQuery: Query,
-	baselineQuery: Query | null | undefined,
+	stagedQuery: Query | null,
 ): boolean => {
-	if (!baselineQuery) {
+	if (!stagedQuery) {
 		return false;
 	}
-	return !isEqual(
-		stripUndefined(normalizeForDirtyCheck(baselineQuery)),
-		stripUndefined(normalizeForDirtyCheck(currentQuery)),
-	);
+	const omitIdFromStageQuery = omitIdFromQuery(stagedQuery);
+	const omitIdFromCurrentQuery = omitIdFromQuery(currentQuery);
+	return !isEqual(omitIdFromStageQuery, omitIdFromCurrentQuery);
 };
 
 export type PartialPanelTypes = {

frontend/src/hooks/queryBuilder/__tests__/useQueryBuilderOperations.test.ts

@@ -5,7 +5,8 @@ import {
 	BaseAutocompleteData,
 	DataTypes,
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
 import {
 	DataSource,
 	MetricAggregateOperator,
@@ -333,3 +334,196 @@ describe('useQueryBuilderOperations - Empty Aggregate Attribute Type', () => {
 		});
 	});
 });
+
+describe('useQueryBuilderOperations - handleChangeQueryData runAfterUpdate', () => {
+	const mockHandleSetQueryData = jest.fn();
+	const mockHandleSetTraceOperatorData = jest.fn();
+	const mockHandleRunQuery = jest.fn();
+
+	const baseQuery: IBuilderQuery = {
+		dataSource: DataSource.METRICS,
+		aggregateOperator: MetricAggregateOperator.AVG,
+		aggregateAttribute: {
+			key: 'system.cpu.load',
+			dataType: DataTypes.Float64,
+			type: ATTRIBUTE_TYPES.GAUGE,
+		} as BaseAutocompleteData,
+		timeAggregation: MetricAggregateOperator.AVG,
+		spaceAggregation: '',
+		aggregations: [],
+		having: [],
+		limit: null,
+		queryName: 'A',
+		functions: [],
+		filters: { items: [], op: 'AND' },
+		groupBy: [],
+		orderBy: [],
+		stepInterval: 60,
+		expression: '',
+		disabled: false,
+		reduceTo: ReduceOperators.AVG,
+		legend: '',
+	};
+
+	const otherQuery: IBuilderQuery = { ...baseQuery, queryName: 'B' };
+
+	const buildCurrentQuery = (): Query => ({
+		queryType: EQueryType.QUERY_BUILDER,
+		promql: [],
+		clickhouse_sql: [],
+		id: 'q-1',
+		unit: '',
+		builder: {
+			queryData: [baseQuery, otherQuery],
+			queryFormulas: [],
+			queryTraceOperator: [],
+		},
+	});
+
+	const setupMock = (overrides: Record<string, unknown> = {}): void => {
+		(useQueryBuilder as jest.Mock).mockReturnValue({
+			handleSetQueryData: mockHandleSetQueryData,
+			handleSetTraceOperatorData: mockHandleSetTraceOperatorData,
+			handleSetFormulaData: jest.fn(),
+			removeQueryBuilderEntityByIndex: jest.fn(),
+			setLastUsedQuery: jest.fn(),
+			redirectWithQueryBuilderData: jest.fn(),
+			handleRunQuery: mockHandleRunQuery,
+			panelType: 'time_series',
+			currentQuery: buildCurrentQuery(),
+			...overrides,
+		});
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		setupMock();
+	});
+
+	it('does not call handleRunQuery when options is omitted', () => {
+		const { result } = renderHook(() =>
+			useQueryOperations({
+				query: baseQuery,
+				index: 0,
+				entityVersion: ENTITY_VERSION_V4,
+			}),
+		);
+
+		act(() => {
+			result.current.handleChangeQueryData('legend', 'cpu-load');
+		});
+
+		expect(mockHandleSetQueryData).toHaveBeenCalledWith(
+			0,
+			expect.objectContaining({ legend: 'cpu-load' }),
+		);
+		expect(mockHandleRunQuery).not.toHaveBeenCalled();
+	});
+
+	it('calls handleRunQuery with the freshly-changed query when runAfterUpdate is true', () => {
+		const { result } = renderHook(() =>
+			useQueryOperations({
+				query: baseQuery,
+				index: 0,
+				entityVersion: ENTITY_VERSION_V4,
+			}),
+		);
+
+		act(() => {
+			result.current.handleChangeQueryData('disabled', true, {
+				runAfterUpdate: true,
+			});
+		});
+
+		expect(mockHandleSetQueryData).toHaveBeenCalledWith(
+			0,
+			expect.objectContaining({ disabled: true }),
+		);
+		expect(mockHandleRunQuery).toHaveBeenCalledTimes(1);
+		const [override] = mockHandleRunQuery.mock.calls[0];
+		// Index 0 reflects the new value...
+		expect(override.builder.queryData[0]).toStrictEqual(
+			expect.objectContaining({ queryName: 'A', disabled: true }),
+		);
+		// ...siblings stay untouched.
+		expect(override.builder.queryData[1]).toStrictEqual(
+			expect.objectContaining({ queryName: 'B', disabled: false }),
+		);
+	});
+
+	it('applies the change at the correct index without disturbing other queries', () => {
+		const { result } = renderHook(() =>
+			useQueryOperations({
+				query: otherQuery,
+				index: 1,
+				entityVersion: ENTITY_VERSION_V4,
+			}),
+		);
+
+		act(() => {
+			result.current.handleChangeQueryData(
+				'groupBy',
+				[
+					{
+						key: 'host.name',
+						type: 'tag',
+						dataType: DataTypes.String,
+					} as BaseAutocompleteData,
+				],
+				{ runAfterUpdate: true },
+			);
+		});
+
+		const [override] = mockHandleRunQuery.mock.calls[0];
+		expect(override.builder.queryData[0]).toStrictEqual(
+			expect.objectContaining({ queryName: 'A', groupBy: [] }),
+		);
+		expect(override.builder.queryData[1]).toStrictEqual(
+			expect.objectContaining({
+				queryName: 'B',
+				groupBy: [expect.objectContaining({ key: 'host.name' })],
+			}),
+		);
+	});
+
+	it('keeps handleSetQueryData and handleRunQuery in sync for legend formatting', () => {
+		const { result } = renderHook(() =>
+			useQueryOperations({
+				query: baseQuery,
+				index: 0,
+				entityVersion: ENTITY_VERSION_V4,
+			}),
+		);
+
+		act(() => {
+			result.current.handleChangeQueryData('legend', '{{service.name}}', {
+				runAfterUpdate: true,
+			});
+		});
+
+		const [override] = mockHandleRunQuery.mock.calls[0];
+		const setCallLegend = mockHandleSetQueryData.mock.calls[0][1].legend;
+		expect(override.builder.queryData[0].legend).toBe(setCallLegend);
+	});
+
+	it('does not call handleRunQuery for trace-operator queries (early return)', () => {
+		const { result } = renderHook(() =>
+			useQueryOperations({
+				query: baseQuery,
+				index: 0,
+				entityVersion: ENTITY_VERSION_V4,
+				isForTraceOperator: true,
+			}),
+		);
+
+		act(() => {
+			result.current.handleChangeQueryData('disabled', true, {
+				runAfterUpdate: true,
+			});
+		});
+
+		expect(mockHandleSetTraceOperatorData).toHaveBeenCalledTimes(1);
+		expect(mockHandleSetQueryData).not.toHaveBeenCalled();
+		expect(mockHandleRunQuery).not.toHaveBeenCalled();
+	});
+});

frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts

@@ -45,6 +45,7 @@ import {
 import {
 	HandleChangeFormulaData,
 	HandleChangeQueryData,
+	HandleChangeQueryDataOptions,
 	HandleChangeQueryDataV5,
 	UseQueryOperations,
 } from 'types/common/operations.types';
@@ -76,6 +77,7 @@ export const useQueryOperations: UseQueryOperations = ({
 		currentQuery,
 		setLastUsedQuery,
 		redirectWithQueryBuilderData,
+		handleRunQuery,
 	} = useQueryBuilder();
 
 	const [operators, setOperators] = useState<SelectOption<string, string>[]>([]);
@@ -530,7 +532,7 @@ export const useQueryOperations: UseQueryOperations = ({
 
 	const handleChangeQueryData: HandleChangeQueryData | HandleChangeQueryDataV5 =
 		useCallback(
-			(key: string, value: any) => {
+			(key: string, value: any, options?: HandleChangeQueryDataOptions) => {
 				const newQuery = {
 					...query,
 					[key]:
@@ -541,8 +543,24 @@ export const useQueryOperations: UseQueryOperations = ({
 
 				if (isForTraceOperator) {
 					handleSetTraceOperatorData(index, newQuery);
-				} else {
-					handleSetQueryData(index, newQuery);
+					return;
+				}
+
+				handleSetQueryData(index, newQuery);
+
+				// `runAfterUpdate` lets callers stage-and-run inline. We pass the
+				// freshly-computed query straight to `handleRunQuery` because the
+				// setState above hasn't flushed yet.
+				if (options?.runAfterUpdate) {
+					handleRunQuery({
+						...currentQuery,
+						builder: {
+							...currentQuery.builder,
+							queryData: currentQuery.builder.queryData.map((item, i) =>
+								i === index ? newQuery : item,
+							),
+						},
+					});
 				}
 			},
 			[
@@ -551,6 +569,8 @@ export const useQueryOperations: UseQueryOperations = ({
 				handleSetQueryData,
 				handleSetTraceOperatorData,
 				isForTraceOperator,
+				handleRunQuery,
+				currentQuery,
 			],
 		);
 

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -112,11 +112,11 @@ export function SpanHoverCard({
 		}
 		const span = spans[idx];
 		const previewRows: SpanPreviewRow[] = previewFields
-			.filter((f) => !RESERVED_PREVIEW_KEYS.has(f.name))
+			.filter((f) => !RESERVED_PREVIEW_KEYS.has(f.key))
 			.map((f) => {
-				const value = getSpanAttribute(span, f.name);
+				const value = getSpanAttribute(span, f.key);
 				return value !== undefined && value !== ''
-					? { key: f.name, value: String(value) }
+					? { key: f.key, value: String(value) }
 					: null;
 			})
 			.filter((r): r is SpanPreviewRow => r !== null);

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -10,7 +10,6 @@ import {
 import { Skeleton } from 'antd';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import cx from 'classnames';
-import FieldsSelector from 'components/FieldsSelector';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
@@ -24,10 +23,12 @@ import {
 	Server,
 	Timer,
 } from '@signozhq/icons';
+import { FloatingPanel } from 'periscope/components/FloatingPanel';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
 import { DataSource } from 'types/common/queryBuilder';
 
+import FieldsSettings from '../components/FieldsSettings/FieldsSettings';
 import { useTraceStore } from '../stores/traceStore';
 import AnalyticsPanel from '../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel';
 import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
@@ -225,15 +226,26 @@ function TraceDetailsHeader({
 				</div>
 			)}
 
-			<FieldsSelector
-				isOpen={isPreviewFieldsOpen}
-				title="Preview fields"
-				fields={previewFields}
-				onFieldsChange={setPreviewFields}
-				onClose={(): void => setIsPreviewFieldsOpen(false)}
-				signal={DataSource.TRACES}
-				maxFields={10}
-			/>
+			{isPreviewFieldsOpen && (
+				<FloatingPanel
+					isOpen
+					width={350}
+					height={window.innerHeight - 100}
+					defaultPosition={{
+						x: window.innerWidth - 350 - 100,
+						y: 50,
+					}}
+					enableResizing={false}
+				>
+					<FieldsSettings
+						title="Preview fields"
+						fields={previewFields}
+						onFieldsChange={setPreviewFields}
+						onClose={(): void => setIsPreviewFieldsOpen(false)}
+						dataSource={DataSource.TRACES}
+					/>
+				</FloatingPanel>
+			)}
 
 			<AnalyticsPanel
 				isOpen={isAnalyticsOpen}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -9,7 +9,10 @@ import { SpanV3 } from 'types/api/trace/getTraceV3';
 import { COLOR_BY_FIELDS } from '../constants';
 import { useTraceStore } from '../stores/traceStore';
 import Error from '../TraceWaterfall/TraceWaterfallStates/Error/Error';
-import { mergeTelemetryFieldKeys } from '../utils/previewFields';
+import {
+	mergeTelemetryFieldKeys,
+	toTelemetryFieldKey,
+} from '../utils/previewFields';
 import { FLAMEGRAPH_SPAN_LIMIT } from './constants';
 import FlamegraphCanvas from './FlamegraphCanvas';
 import { useVisualLayoutWorker } from './hooks/useVisualLayoutWorker';
@@ -57,7 +60,11 @@ function TraceFlamegraph({
 	// Color-by fields baseline + user-picked preview fields. De-duped by `name`,
 	// color-by entries first so their canonical metadata wins on collision.
 	const flamegraphSelectFields = useMemo(
-		() => mergeTelemetryFieldKeys(COLOR_BY_FIELDS, previewFields),
+		() =>
+			mergeTelemetryFieldKeys(
+				COLOR_BY_FIELDS,
+				previewFields.map(toTelemetryFieldKey),
+			),
 		[previewFields],
 	);
 

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -144,14 +144,14 @@ export function useFlamegraphHover(
 	const buildPreviewRows = useCallback(
 		(span: FlamegraphSpan): SpanPreviewRowData[] =>
 			previewFields
-				.filter((field) => !RESERVED_PREVIEW_KEYS.has(field.name))
+				.filter((field) => !RESERVED_PREVIEW_KEYS.has(field.key))
 				.map((field) => {
 					const value = getSpanAttribute(
 						{ resource: span.resource, attributes: span.attributes },
-						field.name,
+						field.key,
 					);
 					return value !== undefined && value !== ''
-						? { key: field.name, value: String(value) }
+						? { key: field.key, value: String(value) }
 						: null;
 				})
 				.filter((r): r is SpanPreviewRowData => r !== null),

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/AddedFields.tsx

@@ -18,22 +18,21 @@ import { Button } from '@signozhq/ui/button';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { Typography } from '@signozhq/ui/typography';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
-import styles from './FieldsSelector.module.scss';
+import styles from './FieldsSettings.module.scss';
 
 function SortableField({
 	field,
 	onRemove,
 	allowDrag,
 }: {
-	field: TelemetryFieldKey;
-	onRemove: (field: TelemetryFieldKey) => void;
+	field: BaseAutocompleteData;
+	onRemove: (field: BaseAutocompleteData) => void;
 	allowDrag: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: field.name });
+		useSortable({ id: field.key });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -51,7 +50,7 @@ function SortableField({
 		>
 			<div {...attributes} {...listeners} className={styles.dragHandle}>
 				{allowDrag && <GripVertical size={14} />}
-				<span className={styles.fieldKey}>{field.name}</span>
+				<span className={styles.fieldKey}>{field.key}</span>
 			</div>
 			<Button
 				className={cx(styles.removeBtn, 'periscope-btn')}
@@ -68,52 +67,41 @@ function SortableField({
 
 interface AddedFieldsProps {
 	inputValue: string;
-	fields: TelemetryFieldKey[];
-	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
-	maxFields?: number;
+	fields: BaseAutocompleteData[];
+	onFieldsChange: (fields: BaseAutocompleteData[]) => void;
 }
 
 function AddedFields({
 	inputValue,
 	fields,
 	onFieldsChange,
-	maxFields,
 }: AddedFieldsProps): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
 	const handleDragEnd = (event: DragEndEvent): void => {
 		const { active, over } = event;
 		if (over && active.id !== over.id) {
-			const oldIndex = fields.findIndex((f) => f.name === active.id);
-			const newIndex = fields.findIndex((f) => f.name === over.id);
+			const oldIndex = fields.findIndex((f) => f.key === active.id);
+			const newIndex = fields.findIndex((f) => f.key === over.id);
 			onFieldsChange(arrayMove(fields, oldIndex, newIndex));
 		}
 	};
 
 	const filteredFields = useMemo(
 		() =>
-			fields.filter((f) =>
-				f.name.toLowerCase().includes(inputValue.toLowerCase()),
-			),
+			fields.filter((f) => f.key.toLowerCase().includes(inputValue.toLowerCase())),
 		[fields, inputValue],
 	);
 
-	const handleRemove = (field: TelemetryFieldKey): void => {
-		onFieldsChange(fields.filter((f) => f.name !== field.name));
+	const handleRemove = (field: BaseAutocompleteData): void => {
+		onFieldsChange(fields.filter((f) => f.key !== field.key));
 	};
 
 	const allowDrag = inputValue.length === 0;
 
 	return (
 		<div className={cx(styles.section, styles.sectionAdded)}>
-			<div className={styles.sectionHeader}>
-				<span>ADDED FIELDS</span>
-				{maxFields !== undefined && (
-					<Typography.Text size="sm" weight="medium" color="muted">
-						Max Allowed: {maxFields}
-					</Typography.Text>
-				)}
-			</div>
+			<div className={styles.sectionHeader}>ADDED FIELDS</div>
 			<div className={styles.addedList}>
 				<OverlayScrollbar>
 					<DndContext
@@ -125,13 +113,13 @@ function AddedFields({
 							<div className={styles.noValues}>No values found</div>
 						) : (
 							<SortableContext
-								items={fields.map((f) => f.name)}
+								items={fields.map((f) => f.key)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>
 								{filteredFields.map((field) => (
 									<SortableField
-										key={field.name}
+										key={field.key}
 										field={field}
 										onRemove={handleRemove}
 										allowDrag={allowDrag}

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.module.scss

@@ -56,14 +56,12 @@
 }
 
 .sectionHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
 	color: var(--muted-foreground);
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 18px;
+	letter-spacing: 0.88px;
+	text-transform: uppercase;
 	padding: 8px 12px;
 }
 
@@ -91,6 +89,13 @@
 	font-size: 12px;
 }
 
+.limitHint {
+	padding: 8px 12px;
+	text-align: center;
+	color: var(--muted-foreground);
+	font-size: 11px;
+}
+
 .fieldItem {
 	display: flex;
 	align-items: center;

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.tsx

@@ -0,0 +1,149 @@
+import { useCallback, useMemo, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import { Check, TableColumnsSplit, X } from '@signozhq/icons';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
+
+import AddedFields from './AddedFields';
+import OtherFields from './OtherFields';
+
+import styles from './FieldsSettings.module.scss';
+
+const MAX_FIELDS_DEFAULT = 10;
+
+interface FieldsSettingsProps {
+	title: string;
+	// Picker's native shape (`BaseAutocompleteData`) is preserved end-to-end so
+	// downstream consumers (flamegraph `selectFields`, hover popovers) get full
+	// field metadata without a lossy conversion at add-time.
+	fields: BaseAutocompleteData[];
+	onFieldsChange: (fields: BaseAutocompleteData[]) => void;
+	onClose: () => void;
+	dataSource: DataSource;
+	maxFields?: number;
+}
+
+function FieldsSettings({
+	title,
+	fields,
+	onFieldsChange,
+	onClose,
+	dataSource,
+	maxFields = MAX_FIELDS_DEFAULT,
+}: FieldsSettingsProps): JSX.Element {
+	// Local draft state — changes here don't persist until Save
+	const [draftFields, setDraftFields] = useState<BaseAutocompleteData[]>(fields);
+	const [inputValue, setInputValue] = useState('');
+	const [debouncedInputValue, setDebouncedInputValue] = useState('');
+
+	const debouncedUpdate = useDebouncedFn((value) => {
+		setDebouncedInputValue(value as string);
+	}, 400);
+
+	const handleInputChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>): void => {
+			const value = e.target.value.trim().toLowerCase();
+			setInputValue(value);
+			debouncedUpdate(value);
+		},
+		[debouncedUpdate],
+	);
+
+	const handleAdd = useCallback(
+		(field: BaseAutocompleteData): void => {
+			if (draftFields.length >= maxFields) {
+				return;
+			}
+			if (draftFields.some((f) => f.key === field.key)) {
+				return;
+			}
+			setDraftFields((prev) => [...prev, field]);
+		},
+		[draftFields, maxFields],
+	);
+
+	const handleSave = useCallback((): void => {
+		onFieldsChange(draftFields);
+		toast.success('Saved successfully', {
+			position: 'top-right',
+		});
+		onClose();
+	}, [draftFields, onFieldsChange, onClose]);
+
+	const handleDiscard = useCallback((): void => {
+		setDraftFields(fields);
+	}, [fields]);
+
+	const hasUnsavedChanges = useMemo(
+		() =>
+			!(
+				draftFields.length === fields.length &&
+				draftFields.every((f, i) => f.key === fields[i]?.key)
+			),
+		[draftFields, fields],
+	);
+
+	const isAtLimit = draftFields.length >= maxFields;
+
+	return (
+		<div className={styles.root}>
+			<div className={styles.header}>
+				<div className={styles.title}>
+					<TableColumnsSplit size={16} />
+					{title}
+				</div>
+				<X className={styles.closeIcon} size={16} onClick={onClose} />
+			</div>
+
+			<section>
+				<Input
+					className={styles.searchInput}
+					type="text"
+					value={inputValue}
+					placeholder="Search for a field..."
+					onChange={handleInputChange}
+				/>
+			</section>
+
+			<AddedFields
+				inputValue={inputValue}
+				fields={draftFields}
+				onFieldsChange={setDraftFields}
+			/>
+
+			<OtherFields
+				dataSource={dataSource}
+				debouncedInputValue={debouncedInputValue}
+				addedFields={draftFields}
+				onAdd={handleAdd}
+				isAtLimit={isAtLimit}
+			/>
+
+			{hasUnsavedChanges && (
+				<div className={styles.footer}>
+					<Button
+						variant="outlined"
+						color="secondary"
+						onClick={handleDiscard}
+						prefix={<X width={14} height={14} />}
+					>
+						Discard
+					</Button>
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={handleSave}
+						prefix={<Check width={14} height={14} />}
+					>
+						Save changes
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default FieldsSettings;

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/OtherFields.tsx

@@ -4,58 +4,51 @@ import { Skeleton } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import {
-	FieldContext,
-	FieldDataType,
-	SignalType,
-	TelemetryFieldKey,
-} from 'types/api/v5/queryRange';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 
-import styles from './FieldsSelector.module.scss';
+import styles from './FieldsSettings.module.scss';
 
 interface OtherFieldsProps {
-	signal: DataSource;
+	dataSource: DataSource;
 	debouncedInputValue: string;
-	addedFields: TelemetryFieldKey[];
-	onAdd: (field: TelemetryFieldKey) => void;
+	addedFields: BaseAutocompleteData[];
+	onAdd: (field: BaseAutocompleteData) => void;
 	isAtLimit: boolean;
 }
 
 function OtherFields({
-	signal,
+	dataSource,
 	debouncedInputValue,
 	addedFields,
 	onAdd,
 	isAtLimit,
 }: OtherFieldsProps): JSX.Element {
-	const { data, isFetching } = useGetQueryKeySuggestions(
+	// API call to get available attribute keys
+	const { data, isFetching } = useGetAggregateKeys(
 		{
-			signal,
 			searchText: debouncedInputValue,
+			dataSource,
+			aggregateOperator: 'noop',
+			aggregateAttribute: '',
+			tagType: '',
 		},
 		{
 			queryKey: [
-				REACT_QUERY_KEY.GET_FIELDS_SELECTOR_SUGGESTIONS,
-				signal,
+				REACT_QUERY_KEY.GET_OTHER_FILTERS,
+				'preview-fields',
 				debouncedInputValue,
 			],
 			enabled: true,
 		},
 	);
 
-	const otherFields: TelemetryFieldKey[] = useMemo(() => {
-		const suggestions = Object.values(data?.data.data.keys || {}).flat();
-		const addedNames = new Set(addedFields.map((f) => f.name));
-		return suggestions
-			.filter((attr) => !addedNames.has(attr.name))
-			.map((attr) => ({
-				...attr,
-				signal: attr.signal as SignalType,
-				fieldContext: attr.fieldContext as FieldContext,
-				fieldDataType: attr.fieldDataType as FieldDataType,
-			}));
+	// Filter out already-added fields, match on .key from API response objects
+	const otherFields = useMemo(() => {
+		const attributes = data?.payload?.attributeKeys || [];
+		const addedKeys = new Set(addedFields.map((f) => f.key));
+		return attributes.filter((attr) => !addedKeys.has(attr.key));
 	}, [data, addedFields]);
 
 	if (isFetching) {
@@ -83,10 +76,10 @@ function OtherFields({
 						) : (
 							otherFields.map((attr) => (
 								<div
-									key={attr.name}
+									key={attr.key}
 									className={cx(styles.fieldItem, styles.otherFieldItem)}
 								>
-									<span className={styles.fieldKey}>{attr.name}</span>
+									<span className={styles.fieldKey}>{attr.key}</span>
 									{!isAtLimit && (
 										<Button
 											className={cx(styles.addBtn, 'periscope-btn')}
@@ -101,6 +94,7 @@ function OtherFields({
 								</div>
 							))
 						)}
+						{isAtLimit && <div className={styles.limitHint}>Maximum 10 fields</div>}
 					</>
 				</OverlayScrollbar>
 			</div>

frontend/src/pages/TraceDetailsV3/stores/traceStore.ts

@@ -15,7 +15,6 @@ import {
 	AGGREGATIONS,
 	getAggregationMap as findAggregationMap,
 } from '../utils/aggregations';
-import { toTelemetryFieldKey } from '../utils/previewFields';
 
 interface MutateOptions {
 	onSuccess?: () => void;
@@ -38,7 +37,7 @@ interface TraceStoreState {
 	// --- Derived state (cached for reference stability) ---
 	colorByField: TelemetryFieldKey;
 	availableColorByOptions: ColorByOption[];
-	previewFields: TelemetryFieldKey[];
+	previewFields: BaseAutocompleteData[];
 
 	// --- Setters used only by TraceStoreSync ---
 	setAggregations: (
@@ -52,7 +51,7 @@ interface TraceStoreState {
 
 	// --- Public actions (called from components) ---
 	setColorByField: (field: TelemetryFieldKey) => void;
-	setPreviewFields: (next: TelemetryFieldKey[]) => void;
+	setPreviewFields: (next: BaseAutocompleteData[]) => void;
 }
 
 /**
@@ -106,31 +105,21 @@ function deriveColorState(
 }
 
 /**
- * Reads preview fields from user preferences and normalizes them to
- * `TelemetryFieldKey`. Legacy entries persisted as `BaseAutocompleteData` (with
- * a `.key` instead of `.name`) are upgraded in-place so existing users don't
- * lose their saved preview-field selection.
+ * Reads preview fields from user preferences and filters out malformed entries.
  */
 function derivePreviewFields(
 	userPreferences: UserPreference[] | null,
-): TelemetryFieldKey[] {
+): BaseAutocompleteData[] {
 	const pref = userPreferences?.find(
 		(p) => p.name === USER_PREFERENCES.SPAN_DETAILS_PREVIEW_ATTRIBUTES,
 	);
-	const raw = (pref?.value as unknown[] | undefined) ?? [];
-	const result: TelemetryFieldKey[] = [];
-	for (const entry of raw) {
-		if (typeof entry !== 'object' || entry === null) {
-			continue;
-		}
-		const candidate = entry as { name?: unknown; key?: unknown };
-		if (typeof candidate.name === 'string') {
-			result.push(entry as TelemetryFieldKey);
-		} else if (typeof candidate.key === 'string') {
-			result.push(toTelemetryFieldKey(entry as BaseAutocompleteData));
-		}
-	}
-	return result;
+	const raw = (pref?.value as BaseAutocompleteData[] | undefined) ?? [];
+	return raw.filter(
+		(f): f is BaseAutocompleteData =>
+			typeof f === 'object' &&
+			f !== null &&
+			typeof (f as { key?: unknown }).key === 'string',
+	);
 }
 
 export const useTraceStore = create<TraceStoreState>()((set, get) => ({

frontend/src/pages/TraceDetailsV3/utils/previewFields.ts

@@ -41,9 +41,8 @@ function mapFieldDataType(
 }
 
 /**
- * Upgrades a legacy `BaseAutocompleteData`-shaped preview field (persisted by
- * pre-migration clients) to the current `TelemetryFieldKey` shape. Kept around
- * for the read-side compatibility shim in `traceStore.derivePreviewFields`.
+ * Convert a picker-shaped field to the API's `TelemetryFieldKey` shape used
+ * for `selectFields` on the flamegraph request.
  */
 export function toTelemetryFieldKey(
 	field: BaseAutocompleteData,
@@ -52,7 +51,6 @@ export function toTelemetryFieldKey(
 		name: field.key,
 		fieldContext: mapFieldContext(field.type),
 		fieldDataType: mapFieldDataType(field.dataType),
-		isIndexed: field.isIndexed,
 	};
 }
 

frontend/src/providers/QueryBuilder.tsx

@@ -1024,49 +1024,57 @@ export function QueryBuilderProvider({
 		[],
 	);
 
-	const handleRunQuery = useCallback(() => {
-		const isExplorer =
-			location.pathname === ROUTES.LOGS_EXPLORER ||
-			location.pathname === ROUTES.TRACES_EXPLORER;
-		if (isExplorer) {
-			setCalledFromHandleRunQuery(true);
-		}
-		const currentQueryData = {
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: currentQuery.builder.queryData.map((item) => ({
-					...item,
-					filter: {
-						...item.filter,
-						expression:
-							item.filter?.expression.trim() === ''
-								? ''
-								: (item.filter?.expression ?? ''),
-					},
-					filters: {
-						items: [],
-						op: 'AND',
-					},
-				})),
-			},
-		};
+	// `overrideQuery` lets callers run a query value that hasn't been committed
+	// to `currentQuery` state yet — e.g. a click handler that toggles a flag
+	// and wants to stage-and-run in the same tick, without waiting for the
+	// state update to flush.
+	const handleRunQuery = useCallback(
+		(overrideQuery?: Query) => {
+			const isExplorer =
+				location.pathname === ROUTES.LOGS_EXPLORER ||
+				location.pathname === ROUTES.TRACES_EXPLORER;
+			if (isExplorer) {
+				setCalledFromHandleRunQuery(true);
+			}
+			const sourceQuery = overrideQuery ?? currentQuery;
+			const currentQueryData = {
+				...sourceQuery,
+				builder: {
+					...sourceQuery.builder,
+					queryData: sourceQuery.builder.queryData.map((item) => ({
+						...item,
+						filter: {
+							...item.filter,
+							expression:
+								item.filter?.expression.trim() === ''
+									? ''
+									: (item.filter?.expression ?? ''),
+						},
+						filters: {
+							items: [],
+							op: 'AND',
+						},
+					})),
+				},
+			};
 
-		redirectWithQueryBuilderData({
-			...{
-				...currentQueryData,
-				...updateStepInterval({
-					builder: currentQueryData.builder,
-					clickhouse_sql: currentQueryData.clickhouse_sql,
-					promql: currentQueryData.promql,
-					id: currentQueryData.id,
-					queryType,
-					unit: currentQueryData.unit,
-				}),
-			},
-			queryType,
-		});
-	}, [currentQuery, location.pathname, queryType, redirectWithQueryBuilderData]);
+			redirectWithQueryBuilderData({
+				...{
+					...currentQueryData,
+					...updateStepInterval({
+						builder: currentQueryData.builder,
+						clickhouse_sql: currentQueryData.clickhouse_sql,
+						promql: currentQueryData.promql,
+						id: currentQueryData.id,
+						queryType,
+						unit: currentQueryData.unit,
+					}),
+				},
+				queryType,
+			});
+		},
+		[currentQuery, location.pathname, queryType, redirectWithQueryBuilderData],
+	);
 
 	useEffect(() => {
 		if (location.pathname !== currentPathnameRef.current) {

frontend/src/types/common/operations.types.ts

@@ -26,6 +26,16 @@ type UseQueryOperationsParams = Pick<QueryProps, 'index' | 'query'> &
 		savePreviousQuery?: boolean;
 	};
 
+export interface HandleChangeQueryDataOptions {
+	/**
+	 * When true, stage-and-run the query immediately after the local state
+	 * update — no need to wait for the user to click "Stage and Run".
+	 * Useful for inline toggles (visibility, disable, etc.) where the panel
+	 * should reflect the change without an extra click.
+	 */
+	runAfterUpdate?: boolean;
+}
+
 // Generic type that can work with both legacy and V5 query types
 export type HandleChangeQueryData<T = IBuilderQuery> = <
 	Key extends keyof T,
@@ -33,6 +43,7 @@ export type HandleChangeQueryData<T = IBuilderQuery> = <
 >(
 	key: Key,
 	value: Value,
+	options?: HandleChangeQueryDataOptions,
 ) => void;
 
 export type HandleChangeTraceOperatorData<T = IBuilderTraceOperator> = <

frontend/src/types/common/queryBuilder.ts

@@ -280,7 +280,7 @@ export type QueryBuilderContextType = {
 		shallStringify?: boolean,
 		newTab?: boolean,
 	) => void;
-	handleRunQuery: () => void;
+	handleRunQuery: (overrideQuery?: Query) => void;
 	resetQuery: (newCurrentQuery?: QueryState) => void;
 	handleOnUnitsChange: (units: Format['id']) => void;
 	updateAllQueriesOperators: (